diff --git a/liferay-sample-theme-css-token-definition/client-extension.yaml b/liferay-sample-theme-css-token-definition/client-extension.yaml
new file mode 100644
index 0000000..a0bdf66
--- /dev/null
+++ b/liferay-sample-theme-css-token-definition/client-extension.yaml
@@ -0,0 +1,9 @@
+assemble:
+    - from: build/buildTheme/img
+      into: static/img
+liferay-sample-theme-css-3:
+    clayURL: css/clay.css
+    frontendTokenDefinitionJSON: src/frontend-token-definition.json
+    mainURL: css/main.css
+    name: Liferay Sample Theme CSS 3
+    type: themeCSS
\ No newline at end of file
diff --git a/liferay-sample-theme-css-token-definition/src/css/_clay_variables.scss b/liferay-sample-theme-css-token-definition/src/css/_clay_variables.scss
new file mode 100644
index 0000000..0505466
--- /dev/null
+++ b/liferay-sample-theme-css-token-definition/src/css/_clay_variables.scss
@@ -0,0 +1,149 @@
+$enable-lexicon-flat-colors: true !default;
+
+$enable-shadows: true !default;
+
+$white: #fff !default;
+$gray-100: #f7f8f9 !default;
+$gray-200: #f1f2f5 !default;
+$gray-900: #272833 !default;
+
+$primary: #0b5fff !default;
+$primary-d1: #0053f0 !default;
+$primary-d2: #004ad7 !default;
+$primary-l0: #528eff !default;
+
+$secondary: #6b6c7e !default;
+$secondary-l0: #88889a !default;
+
+$btn: () !default;
+$btn: map-deep-merge(
+	(
+		border-radius: var(--btn-border-radius, 4px),
+		border-width: var(--btn-border-width, 1px),
+		box-shadow: var(--btn-box-shadow, none),
+		font-size: var(--btn-font-size, 1rem),
+		font-weight: var(--btn-font-weight, 600),
+		line-height: var(--btn-line-height, 1.5),
+		padding-bottom: var(--btn-padding-y, 0.4375rem),
+		padding-left: var(--btn-padding-x, 0.9375rem),
+		padding-right: var(--btn-padding-x, 0.9375rem),
+		padding-top: var(--btn-padding-y, 0.4375rem),
+		transition:
+			var(
+				--btn-transition,
+				color 0.15s ease-in-out,
+				background-color 0.15s ease-in-out,
+				border-color 0.15s ease-in-out,
+				box-shadow 0.15s ease-in-out
+			),
+		focus: (
+			box-shadow:
+				var(
+					--btn-focus-box-shadow,
+					(0 0 0 0.125rem $white, 0 0 0 0.25rem $primary-l0)
+				),
+			outline: var(--btn-focus-outline, 0),
+			outline-offset: var(--btn-focus-outline-offset),
+		),
+		disabled: (
+			opacity: var(--btn-disabled-opacity, 0.4),
+		),
+	),
+	$btn
+);
+
+$btn-primary: () !default;
+$btn-primary: map-deep-merge(
+	(
+		background-color: var(--btn-primary-background-color, $primary),
+		background-image: var(--btn-primary-background-image),
+		border-color: var(--btn-primary-border-color, transparent),
+		box-shadow: var(--btn-primary-box-shadow),
+		color: var(--btn-primary-color, $white),
+		hover: (
+			background-color:
+				var(--btn-primary-hover-background-color, $primary-d1),
+			background-image: var(--btn-primary-hover-background-image),
+			border-color: var(--btn-primary-border-color, transparent),
+			box-shadow: var(--btn-primary-hover-box-shadow),
+			color: var(--btn-primary-hover-color, $white),
+		),
+		focus: (
+			background-color:
+				var(--btn-primary-focus-background-color, $primary-d1),
+			background-image: var(--btn-primary-focus-background-image),
+			border-color: var(--btn-primary-focus-border-color, transparent),
+			box-shadow: var(--btn-primary-focus-box-shadow),
+			color: var(--btn-primary-focus-color, $white),
+		),
+		active: (
+			background-color:
+				var(--btn-primary-active-background-color, $primary-d2),
+			background-image: var(--btn-primary-active-background-image),
+			border-color: var(--btn-primary-active-border-color, transparent),
+			box-shadow: var(--btn-primary-active-box-shadow),
+			color: var(--btn-primary-active-color, $white),
+			focus: (
+				box-shadow: var(--btn-primary-active-focus-box-shadow),
+			),
+		),
+		disabled: (
+			background-color:
+				var(--btn-primary-disabled-background-color, $primary),
+			background-image: var(--btn-primary-disabled-background-image),
+			border-color: var(--btn-primary-disabled-border-color, $primary),
+			box-shadow: var(--btn-primary-disabled-box-shadow),
+			color: var(--btn-primary-disabled-color, $white),
+		),
+	),
+	$btn-primary
+);
+
+$btn-secondary: () !default;
+$btn-secondary: map-deep-merge(
+	(
+		background-color: var(--btn-secondary-background-color, $white),
+		background-image: c-unset,
+		border-color: var(--btn-secondary-border-color, $secondary-l0),
+		box-shadow: var(--btn-secondary-box-shadow),
+		color: var(--btn-secondary-color, $secondary),
+		hover: (
+			background-color:
+				var(--btn-secondary-hover-background-color, $gray-100),
+			background-image: c-unset,
+			border-color: var(--btn-secondary-hover-border-color, $secondary-l0),
+			box-shadow: var(--btn-secondary-hover-box-shadow),
+			color: var(--btn-secondary-hover-color, $gray-900),
+		),
+		focus: (
+			background-color:
+				var(--btn-secondary-focus-background-color, $gray-100),
+			background-image: c-unset,
+			border-color: var(--btn-secondary-focus-border-color, $secondary-l0),
+			box-shadow: var(--btn-secondary-focus-box-shadow),
+			color: var(--btn-secondary-focus-color, $gray-900),
+		),
+		active: (
+			background-color:
+				var(--btn-secondary-active-background-color, $gray-200),
+			background-image: c-unset,
+			border-color:
+				var(--btn-secondary-active-border-color, $secondary-l0),
+			box-shadow: var(--btn-secondary-active-box-shadow),
+			color: var(--btn-secondary-active-color, $gray-900),
+			focus: (
+				box-shadow: var(--btn-secondary-active-focus-box-shadow),
+			),
+		),
+		disabled: (
+			background-color:
+				var(--btn-secondary-disabled-background-color, $white),
+			background-image: c-unset,
+			border-color:
+				var(--btn-secondary-disabled-border-color, $secondary-l0),
+			box-shadow: var(--btn-secondary-disabled-box-shadow),
+			color: var(--btn-secondary-disabled-color, $secondary),
+		),
+	),
+	$btn-secondary
+);
diff --git a/liferay-sample-theme-css-token-definition/src/frontend-token-definition.json b/liferay-sample-theme-css-token-definition/src/frontend-token-definition.json
new file mode 100644
index 0000000..22e3845
--- /dev/null
+++ b/liferay-sample-theme-css-token-definition/src/frontend-token-definition.json
@@ -0,0 +1,725 @@
+{
+	"frontendTokenCategories": [
+		{
+			"frontendTokenSets": [
+				{
+					"frontendTokens": [
+						{
+							"defaultValue": "8px",
+							"editorType": "Length",
+							"label": "border-radius",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-border-radius"
+								}
+							],
+							"name": "btnBorderRadius",
+							"type": "String"
+						},
+						{
+							"defaultValue": "0",
+							"editorType": "Length",
+							"label": "border-width",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-border-width"
+								}
+							],
+							"name": "btnBorderWidth",
+							"type": "String"
+						},
+						{
+							"defaultValue": "none",
+							"label": "box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-box-shadow"
+								}
+							],
+							"name": "btnBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "13px",
+							"editorType": "Length",
+							"label": "font-size",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-font-size"
+								}
+							],
+							"name": "btnFontSize",
+							"type": "String"
+						},
+						{
+							"defaultValue": "600",
+							"label": "font-weight",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-font-weight"
+								}
+							],
+							"name": "btnFontWeight",
+							"type": "String"
+						},
+						{
+							"defaultValue": "16px",
+							"editorType": "Length",
+							"label": "line-height",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-line-height"
+								}
+							],
+							"name": "btnLineHeight",
+							"type": "String"
+						},
+						{
+							"defaultValue": "12px",
+							"editorType": "Length",
+							"label": "padding-x",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-padding-x"
+								}
+							],
+							"name": "btnPaddingX",
+							"type": "String"
+						},
+						{
+							"defaultValue": "6px",
+							"editorType": "Length",
+							"label": "padding-y",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-padding-y"
+								}
+							],
+							"name": "btnPaddingY",
+							"type": "String"
+						},
+						{
+							"defaultValue": "none",
+							"label": "transition",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-transition"
+								}
+							],
+							"name": "btnTransition",
+							"type": "String"
+						},
+						{
+							"defaultValue": "none",
+							"label": "focus-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-focus-box-shadow"
+								}
+							],
+							"name": "btnFocusBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "2px solid #0e5fd0",
+							"label": "focus-outline",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-focus-outline"
+								}
+							],
+							"name": "btnFocusOutline",
+							"type": "String"
+						},
+						{
+							"defaultValue": "1px",
+							"editorType": "Length",
+							"label": "focus-outline-offset",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-focus-outline-offset"
+								}
+							],
+							"name": "btnFocusOutlineOffset",
+							"type": "String"
+						},
+						{
+							"defaultValue": "1",
+							"label": "disabled-opacity",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-disabled-opacity"
+								}
+							],
+							"name": "btnDisabledOpacity",
+							"type": "String"
+						}
+					],
+					"label": "btn",
+					"name": "btn"
+				},
+				{
+					"frontendTokens": [
+						{
+							"defaultValue": "#3f3f3f",
+							"editorType": "ColorPicker",
+							"label": "background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-background-color"
+								}
+							],
+							"name": "btnPrimaryBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, hsla(0, 0%, 100%, .15))",
+							"label": "background-image",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-background-image"
+								}
+							],
+							"name": "btnPrimaryBackgroundImage",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-border-color"
+								}
+							],
+							"name": "btnPrimaryBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "inset 0px 0px 0 1px #3f3f3f,inset 1px 1px 0 1px rgba(129, 129, 129, 0.5), inset -1px 1px 0 1px rgba(129, 129, 129, 0.5)",
+							"label": "box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-box-shadow"
+								}
+							],
+							"name": "btnPrimaryBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fff",
+							"editorType": "ColorPicker",
+							"label": "color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-color"
+								}
+							],
+							"name": "btnPrimaryColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#1a1a1a",
+							"editorType": "ColorPicker",
+							"label": "hover-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-hover-background-color"
+								}
+							],
+							"name": "btnPrimaryHoverBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, hsla(0, 0%, 100%, .15))",
+							"label": "hover-background-image",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-hover-background-image"
+								}
+							],
+							"name": "btnPrimaryHoverBackgroundImage",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "hover-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-hover-border-color"
+								}
+							],
+							"name": "btnPrimaryHoverBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, .8) inset, 0rem 0rem 0rem 0.0625rem #303030 inset, 0rem 0.03125rem 0rem 0.09375rem hsla(0, 0%, 100%, .25)",
+							"label": "hover-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-hover-box-shadow"
+								}
+							],
+							"name": "btnPrimaryHoverBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fff",
+							"editorType": "ColorPicker",
+							"label": "hover-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-hover-color"
+								}
+							],
+							"name": "btnPrimaryHoverColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#1a1a1a",
+							"editorType": "ColorPicker",
+							"label": "focus-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-focus-background-color"
+								}
+							],
+							"name": "btnPrimaryFocusBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, hsla(0, 0%, 100%, .15))",
+							"label": "focus-background-image",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-focus-background-image"
+								}
+							],
+							"name": "btnPrimaryFocusBackgroundImage",
+							"type": "String"
+						},
+						{
+							"defaultValue": "0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, .8) inset, 0rem 0rem 0rem 0.0625rem #303030 inset, 0rem 0.03125rem 0rem 0.09375rem hsla(0, 0%, 100%, .25) inset",
+							"label": "focus-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-focus-box-shadow"
+								}
+							],
+							"name": "btnPrimaryFocusBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "focus-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-focus-border-color"
+								}
+							],
+							"name": "btnPrimaryFocusBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fff",
+							"editorType": "ColorPicker",
+							"label": "focus-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-focus-color"
+								}
+							],
+							"name": "btnPrimaryFocusColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#303030",
+							"editorType": "ColorPicker",
+							"label": "active-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-active-background-color"
+								}
+							],
+							"name": "btnPrimaryActiveBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "inset 0 3px 0 0 #000",
+							"label": "active-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-active-box-shadow"
+								}
+							],
+							"name": "btnPrimaryActiveBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "active-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-active-border-color"
+								}
+							],
+							"name": "btnPrimaryActiveBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fff",
+							"editorType": "ColorPicker",
+							"label": "active-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-active-color"
+								}
+							],
+							"name": "btnPrimaryActiveColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#c8c8c8",
+							"editorType": "ColorPicker",
+							"label": "disabled-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-disabled-background-color"
+								}
+							],
+							"name": "btnPrimaryDisabledBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "disabled-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-disabled-border-color"
+								}
+							],
+							"name": "btnPrimaryDisabledBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fff",
+							"editorType": "ColorPicker",
+							"label": "disabled-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-primary-disabled-color"
+								}
+							],
+							"name": "btnPrimaryDisabledColor",
+							"type": "String"
+						}
+					],
+					"label": "btn-primary",
+					"name": "btnPrimary"
+				},
+				{
+					"frontendTokens": [
+						{
+							"defaultValue": "#fff",
+							"editorType": "ColorPicker",
+							"label": "background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-background-color"
+								}
+							],
+							"name": "btnSecondaryBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-border-color"
+								}
+							],
+							"name": "btnSecondaryBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, .1) inset, 0rem 0.03125rem 0rem 0.09375rem #fff inset",
+							"label": "box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-box-shadow"
+								}
+							],
+							"name": "btnSecondaryBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#303030",
+							"editorType": "ColorPicker",
+							"label": "color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-color"
+								}
+							],
+							"name": "btnSecondaryColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fafafa",
+							"editorType": "ColorPicker",
+							"label": "hover-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-hover-background-color"
+								}
+							],
+							"name": "btnSecondaryHoverBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "hover-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-hover-border-color"
+								}
+							],
+							"name": "btnSecondaryHoverBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, .1) inset, 0rem 0.03125rem 0rem 0.09375rem #fff inset",
+							"label": "hover-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-hover-box-shadow"
+								}
+							],
+							"name": "btnSecondaryHoverBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#303030",
+							"editorType": "ColorPicker",
+							"label": "hover-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-hover-color"
+								}
+							],
+							"name": "btnSecondaryHoverColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#fafafa",
+							"editorType": "ColorPicker",
+							"label": "focus-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-focus-background-color"
+								}
+							],
+							"name": "btnSecondaryFocusBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "focus-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-focus-border-color"
+								}
+							],
+							"name": "btnSecondaryFocusBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, .1) inset, 0rem 0.03125rem 0rem 0.09375rem #fff inset",
+							"label": "focus-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-focus-box-shadow"
+								}
+							],
+							"name": "btnSecondaryFocusBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#303030",
+							"editorType": "ColorPicker",
+							"label": "focus-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-focus-color"
+								}
+							],
+							"name": "btnSecondaryFocusColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#f7f7f7",
+							"editorType": "ColorPicker",
+							"label": "active-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-active-background-color"
+								}
+							],
+							"name": "btnSecondaryActiveBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "active-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-active-border-color"
+								}
+							],
+							"name": "btnSecondaryActiveBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "-0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, .122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, .2) inset",
+							"label": "active-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-active-box-shadow"
+								}
+							],
+							"name": "btnSecondaryActiveBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#303030",
+							"editorType": "ColorPicker",
+							"label": "active-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-active-color"
+								}
+							],
+							"name": "btnSecondaryActiveColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#e5e5e5",
+							"editorType": "ColorPicker",
+							"label": "disabled-background-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-disabled-background-color"
+								}
+							],
+							"name": "btnSecondaryDisabledBackgroundColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "transparent",
+							"editorType": "ColorPicker",
+							"label": "disabled-border-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-disabled-border-color"
+								}
+							],
+							"name": "btnSecondaryDisabledBorderColor",
+							"type": "String"
+						},
+						{
+							"defaultValue": "none",
+							"label": "disabled-box-shadow",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-disabled-box-shadow"
+								}
+							],
+							"name": "btnSecondaryDisabledBoxShadow",
+							"type": "String"
+						},
+						{
+							"defaultValue": "#b5b5b5",
+							"editorType": "ColorPicker",
+							"label": "disabled-color",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "btn-secondary-disabled-color"
+								}
+							],
+							"name": "btnSecondaryDisabledColor",
+							"type": "String"
+						}
+					],
+					"label": "btn-secondary",
+					"name": "btnSecondary"
+				}
+			],
+			"label": "buttons",
+			"name": "buttons"
+		}
+	]
+}
\ No newline at end of file