From 6d61f960ecbfe63c90784c5170fb54ce3f177b47 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 22 Apr 2024 09:00:18 +0000 Subject: [PATCH] chore: auto update samples --- .../client-extension.yaml | 9 + .../src/css/_clay_variables.scss | 149 ++++ .../src/frontend-token-definition.json | 725 ++++++++++++++++++ 3 files changed, 883 insertions(+) create mode 100644 liferay-sample-theme-css-token-definition/client-extension.yaml create mode 100644 liferay-sample-theme-css-token-definition/src/css/_clay_variables.scss create mode 100644 liferay-sample-theme-css-token-definition/src/frontend-token-definition.json 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