From 055f4e92e099cbb6f200136e3d3bd0e3ebe6f240 Mon Sep 17 00:00:00 2001 From: davidken91 <127498135+davidken91@users.noreply.github.com> Date: Thu, 14 Sep 2023 16:27:38 +0200 Subject: [PATCH] fix(ui-library): updating toggle switch selected state, fixing pressed / active state, fixing toggling on / off icons (#352) --- .../__component-tokens.Dark.generated.js | 842 ++++++++++++++++ .../__component-tokens.Light.generated.js | 842 ++++++++++++++++ .../__semantic-tokens.Dark.generated.js | 480 ++++++++++ .../__semantic-tokens.Light.generated.js | 480 ++++++++++ .../_border-radius.generated.scss | 14 + .../_border-width.generated.scss | 13 + .../_tokens-generated/_color.generated.scss | 899 ++++++++++++++++++ .../_font-families.generated.scss | 9 + .../_font-sizes.generated.scss | 20 + .../_font-weights.generated.scss | 11 + .../_letter-spacing.generated.scss | 12 + .../_line-heights.generated.scss | 14 + .../_pargraph-spacing.generated.scss | 10 + .../__component-config.generated.js | 63 ++ .../component-tokens/toggleSwitch.css.js | 8 +- 15 files changed, 3713 insertions(+), 4 deletions(-) create mode 100644 packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js create mode 100644 packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js create mode 100644 packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js create mode 100644 packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss create mode 100644 packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js diff --git a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js new file mode 100644 index 000000000..696e4d839 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js @@ -0,0 +1,842 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +export const componentTokens = { + Feedback: { + Warning: { + Surface: 'hsla(50, 80%, 40%,0.4) ', + SurfaceStroke: 'hsla(50, 80%, 80%,1) ', + Text: 'hsla(50, 80%, 50%,1) ', + Icon: 'hsla(50, 80%, 70%,1) ', + }, + Error: { + Surface: 'hsla(350, 65%, 40%,0.4) ', + SurfaceStroke: 'hsla(350, 65%, 80%,1) ', + Text: 'hsla(350, 65%, 50%,1) ', + Icon: 'hsla(350, 65%, 70%,1) ', + }, + Loader: { + SM: { + Background: { + Default: { color: 'hsla(220, 65%, 60%,0.2) ', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 0.2)', width: '2px', style: 'solid' }, + }, + Foreground: { + Default: { color: 'hsla(220, 65%, 40%, 1)', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + }, + Sizing: '1rem', + Padding: '0.063rem', + }, + MD: { + Background: { + Default: { color: 'hsla(220, 65%, 60%,0.2) ', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 0.2)', width: '2px', style: 'solid' }, + }, + Foreground: { + Default: { color: 'hsla(220, 65%, 40%, 1)', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + }, + Sizing: '1.5rem', + Padding: '0.125rem', + }, + LG: { + Background: { + Default: { color: 'hsla(220, 65%, 60%,0.2) ', width: '3px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 0.2)', width: '3px', style: 'solid' }, + }, + Foreground: { + Default: { color: 'hsla(220, 65%, 40%, 1)', width: '3px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 1)', width: '3px', style: 'solid' }, + }, + Sizing: '2rem', + Padding: '0.188rem', + }, + }, + Counter: { + SM: { + Padding: '0px 4px', + ItemSpacing: '2px', + Border: { + Neutral: { color: '#00000000', width: '1px', style: 'solid' }, + Warning: { color: 'hsla(50, 80%, 80%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + }, + }, + MD: { + Padding: '0px 4px', + ItemSpacing: '2px', + Border: { + Neutral: { color: '#00000000', width: '1px', style: 'solid' }, + Warning: { color: 'hsla(50, 80%, 80%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + }, + }, + LG: { + Padding: '0px 4px', + ItemSpacing: '2px', + Border: { + Neutral: { color: '#00000000', width: '1px', style: 'solid' }, + Warning: { color: 'hsla(50, 80%, 80%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + }, + }, + BorderRadius: '4px', + }, + }, + Forms: { + Checkbox: { + Control: { + Background: { + Unselected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 10%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(0, 0%, 100%, 1)', + }, + Stroke: { + Rest: 'hsla(220, 65%, 60%, 1)', + Hover: 'hsla(220, 65%, 70%, 1)', + Pressed: 'hsla(220, 65%, 80%, 1)', + Focus: 'hsla(220, 65%, 60%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 20%,1) ', + Error: 'hsla(350, 65%, 80%,1) ', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(220, 65%, 40%, 1)', + Hover: 'hsla(220, 65%, 50%, 1)', + Pressed: 'hsla(220, 65%, 60%, 1)', + Focus: 'hsla(220, 65%, 40%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 30%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Foreground: { + Unselected: { + Fill: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 10%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Unselected: { + Rest: { color: 'hsla(220, 65%, 60%, 1)', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 70%, 1)', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 80%, 1)', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 80%, 1)', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 20%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + }, + }, + SM: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + MainContainer: { ItemSpacing: '8px' }, + ControlWrapper: { TopMargin: '0px' }, + Control: { + Background: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + }, + }, + Foreground: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + }, + }, + }, + }, + MD: { + Control: { + Background: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + }, + }, + Foreground: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + }, + }, + }, + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + MainContainer: { ItemSpacing: '8px' }, + ControlWrapper: { TopMargin: '0.25rem' }, + }, + LG: { + Control: { + Background: { + Sizing: { + Unselected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + Selected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + }, + Indeterminate: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + }, + }, + }, + Foreground: { + Sizing: { + Unselected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + Selected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + Indeterminate: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + }, + }, + }, + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + MainContainer: { ItemSpacing: '12px' }, + ControlWrapper: { TopMargin: '0.125rem' }, + }, + ControlBorderRadius: '2px', + }, + Radio: { + Control: { + Background: { + Unselected: { + Fill: { + Rest: 'hsla(220, 65%, 40%, 1)', + Hover: 'hsla(220, 65%, 50%, 1)', + Pressed: 'hsla(220, 65%, 60%, 1)', + Focus: 'hsla(220, 65%, 40%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 30%,1) ', + Error: 'hsla(350, 65%, 80%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Fill: { + Rest: 'hsla(220, 65%, 40%, 1)', + Hover: 'hsla(220, 65%, 50%, 1)', + Pressed: 'hsla(220, 65%, 60%, 1)', + Focus: 'hsla(220, 65%, 40%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 30%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + }, + Foreground: { + Unselected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 10%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(0, 0%, 100%, 1)', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + Rest: '14px', + Hover: '14px', + Pressed: '14px', + Focus: '14px', + Disabled: '14px', + ReadOnly: '14px', + Error: '14px', + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 10%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + Rest: '6px', + Hover: '8px', + Pressed: '10px', + Focus: '6px', + Disabled: '6px', + ReadOnly: '6px', + }, + }, + Unselected: { + Rest: { color: 'hsla(220, 65%, 40%, 1)', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 60%, 1)', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 40%, 1)', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + }, + }, + ControlBorderRadius: '9999px', + SM: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + ContentRow: { ItemSpacing: '8px', Padding: '0.5rem 0' }, + ControlWrapper: { TopMargin: '0rem' }, + }, + MD: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + ContentRow: { ItemSpacing: '8px', Padding: '0.5rem 0' }, + ControlWrapper: { TopMargin: '0.25rem' }, + }, + LG: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + ContentRow: { ItemSpacing: '12px', Padding: '0.5rem 0' }, + ControlWrapper: { TopMargin: '0.25rem' }, + }, + }, + ToggleSwitch: { + Control: { + Background: { + Unselected: { + Fill: { + Rest: 'hsla(220, 10%, 30%,1) ', + Hover: 'hsla(220, 10%, 20%,1) ', + Pressed: 'hsla(220, 10%, 40%,1) ', + Focus: 'hsla(220, 10%, 30%,1) ', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 30%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(100, 65%, 30%,1) ', + Hover: 'hsla(100, 65%, 40%,1) ', + Pressed: 'hsla(100, 65%, 50%,1) ', + Focus: 'hsla(100, 65%, 30%,1) ', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 30%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Ay11Icon: { + Unselected: { + Fill: { + Rest: 'hsla(220, 10%, 40%,1) ', + Hover: 'hsla(220, 10%, 40%,1) ', + Pressed: 'hsla(220, 10%, 40%,1) ', + Focus: 'hsla(220, 10%, 40%,1) ', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(220, 10%, 40%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(220, 10%, 40%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Knob: { + Surface: { + Unselected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(220, 10%, 40%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(220, 10%, 40%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + }, + SM: { + A11yIcon: { Sizing: '1rem' }, + Knob: { Sizing: '1rem' }, + Background: { Width: '2.25rem', Height: '1.25rem', Padding: '2px' }, + IconContainer: { PaddingLeftRight: '0.125rem' }, + LabelGap: '8px', + }, + MD: { + A11yIcon: { Sizing: '1rem' }, + Knob: { Sizing: '1.25rem' }, + Background: { Width: '2.75rem', Height: '1.5rem', Padding: '2px' }, + IconContainer: { PaddingLeftRight: '0.125rem' }, + LabelGap: '8px', + }, + LG: { + Background: { Padding: '2px', Width: '3.25rem', Height: '1.75rem' }, + A11yIcon: { Sizing: '1rem' }, + Knob: { Sizing: '1.5rem' }, + IconContainer: { PaddingLeftRight: '0.219rem' }, + LabelGap: '8px', + }, + }, + A11yOffBorderRadius: '9999px', + SM: { Gap: '0.5rem', ContentColGap: '0rem' }, + MD: { Gap: '0.5rem', ContentColGap: '0rem' }, + LG: { Gap: '0.5rem', ContentColGap: '0rem' }, + }, + Slider: { + Thumb: { + Fill: { + Rest: 'hsla(220, 10%, 10%,1) ', + Hover: 'hsla(220, 10%, 10%,1) ', + Pressed: 'hsla(220, 10%, 10%,1) ', + Focus: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 10%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(350, 65%, 40%,0.4) ', + }, + Stroke: { + Rest: 'hsla(220, 65%, 60%, 1)', + Hover: 'hsla(220, 65%, 70%, 1)', + Pressed: 'hsla(220, 65%, 80%, 1)', + Focus: 'hsla(220, 65%, 60%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 20%,1) ', + Error: 'hsla(350, 65%, 80%,1) ', + }, + Border: { + Rest: { color: 'hsla(220, 65%, 60%, 1)', width: '2px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 70%, 1)', width: '4px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 80%, 1)', width: '4px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 60%, 1)', width: '2px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,1) ', width: '2px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 20%,1) ', width: '2px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 80%,1) ', width: '2px', style: 'solid' }, + }, + Sizing: { Rest: '14px', Hover: '20px', Pressed: '20px', Focus: '14px', Disabled: '14px', Readonly: '14px' }, + }, + Track: { + Stroke: { + Active: { Default: 'hsla(220, 65%, 95%, 1)', Mute: 'hsla(220, 10%, 40%,1) ' }, + Inactive: { Default: 'hsla(220, 65%, 20%,0.3) ', Mute: 'hsla(220, 10%, 30%,1) ' }, + }, + Border: { + Active: { + Default: { color: 'hsla(220, 65%, 95%, 1)', width: '4px', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 40%,1) ', width: '4px', style: 'solid' }, + }, + Inactive: { + Default: { color: 'hsla(220, 65%, 20%,0.3) ', width: '4px', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 30%,1) ', width: '4px', style: 'solid' }, + }, + }, + }, + TickMark: { + Stroke: { + Active: { Default: 'hsla(220, 65%, 95%, 1)', Mute: 'hsla(220, 10%, 40%,1) ' }, + Inactive: { Default: 'hsla(220, 65%, 20%,0.3) ', Mute: 'hsla(220, 10%, 30%,1) ' }, + }, + Fill: { + Active: { Default: 'hsla(220, 10%, 10%,1) ', Mute: 'hsla(220, 10%, 10%,1) ' }, + Inactive: { Default: 'hsla(220, 10%, 10%,1) ', Mute: 'hsla(220, 10%, 10%,1) ' }, + }, + Border: { + Active: { + Default: { color: 'hsla(220, 65%, 95%, 1)', width: '1px', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 40%,1) ', width: '1px', style: 'solid' }, + }, + Inactive: { + Default: { color: 'hsla(220, 65%, 20%,0.3) ', width: '1px1', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + }, + }, + Sizing: '6px', + }, + Legend: { + Color: { Default: 'hsla(220, 10%, 60%,1) ', Disabled: 'hsla(220, 10%, 40%,1) ' }, + Typography: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '150%', fontSize: '0.75rem' }, + }, + }, + Select: { + SM: { InputFieldPadding: '0.5rem 32px 0.5rem 12px', IconPaddingRight: '12px' }, + MD: { InputFieldPadding: '0.5rem 32px 0.5rem 12px', IconPaddingRight: '12px' }, + LG: { InputFieldPadding: '0.75rem 48px 0.75rem 16px', IconPaddingRight: '16px' }, + }, + TextArea: { SM: { MinHeight: '4rem' }, MD: { MinHeight: '5rem' }, LG: { MinHeight: '7rem' } }, + }, + UI: { + Divider: { Stroke: 'hsla(220, 10%, 80%,0.3) ', Border: { color: 'hsla(220, 10%, 80%,0.3) ', width: '1px' } }, + Icon: { XXS: '0.5rem', XS: '0.75rem', SM: '1rem', MD: '1.5rem', LG: '2rem', XL: '3rem' }, + }, + Navigation: { + TabBar: { + Tab: { + HighlightLine: { + SurfaceFill: 'hsla(220, 65%, 40%, 1)', + Selected: { Opacity: '1' }, + Unselected: { Opacity: '0' }, + }, + Label: { + Active: 'hsla(220, 65%, 40%, 1)', + Unselected: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + }, + Icon: { + Active: 'hsla(220, 65%, 40%, 1)', + Unselected: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + }, + SM: { + HighlightLine: { Height: '2px' }, + ContentCol: { TopPadding: '0.25rem', ItemSpacing: '0.5rem' }, + ContentRow: { PaddingLeftRight: '12px', ItemSpacing: '2px' }, + Icon: { Sizing: '0.75rem' }, + }, + MD: { + HighlightLine: { Height: '2px' }, + ContentCol: { TopPadding: '0.5rem', ItemSpacing: '0.5rem' }, + ContentRow: { PaddingLeftRight: '16px', ItemSpacing: '2px' }, + Icon: { Sizing: '1rem' }, + }, + LG: { + HighlightLine: { Height: '2px' }, + ContentCol: { TopPadding: '0.5rem', ItemSpacing: '0.5rem' }, + ContentRow: { PaddingLeftRight: '16px', ItemSpacing: '4px' }, + Icon: { Sizing: '1rem' }, + }, + }, + ButtonWrapper: { + SM: { Leading: { Padding: '0 0.5rem 0 0' }, Trailing: { Padding: '0 0 0 0.5rem' } }, + MD: { Leading: { Padding: '0 0.5rem 0 0' }, Trailing: { Padding: '0 0 0 0.5rem' } }, + LG: { Leading: { Padding: '0 0.75rem' }, Trailing: { Padding: '0 0 0 0.75rem' } }, + }, + }, + }, + Action: { + TextButton: { + XS: { Padding: '0.25rem 12px', ItemSpacing: '4px' }, + SM: { Padding: '0.25rem 12px', ItemSpacing: '4px' }, + MD: { Padding: '0.5rem 16px', ItemSpacing: '4px' }, + LG: { Padding: '0.5rem 24px', ItemSpacing: '4px' }, + XL: { Padding: '1rem 40px', ItemSpacing: '4px' }, + }, + IconButton: { + XS: { Padding: '0.375rem', ItemSpacing: '0px' }, + SM: { Padding: '0.375rem', ItemSpacing: '0px' }, + MD: { Padding: '0.5rem', ItemSpacing: '0px' }, + LG: { Padding: '0.5rem', ItemSpacing: '0px' }, + XL: { Padding: '0.75rem', ItemSpacing: '0px' }, + }, + IconDropdown: { + XS: { Padding: '0.375rem 0.063rem 0.375rem 0.188rem', ItemSpacing: '0px' }, + SM: { Padding: '0.375rem 0.063rem 0.375rem 0.188rem', ItemSpacing: '0px' }, + MD: { Padding: '0.5rem 0.063rem 0.5rem 0.188rem', ItemSpacing: '0px' }, + LG: { Padding: '0.5rem 0rem 0.5rem 0.125rem', ItemSpacing: '-0.125rem' }, + XL: { Padding: '0.75rem 0rem 0.75rem 0.25rem', ItemSpacing: '-0.25rem' }, + }, + StepperButton: { + Border: { + Rest: { color: '#00000000', width: '0px' }, + Hover: { color: '#00000000', width: '0px' }, + Pressed: { color: '#00000000', width: '0px' }, + Focus: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,0) ', width: '0px' }, + }, + SM: { Width: '2rem' }, + MD: { Width: '2.5rem' }, + LG: { Width: '3rem' }, + }, + StepperCombo: { + SM: { + Vertical: { Width: '2rem', DividerWrapper: { Padding: '0 0.5rem' } }, + Horizontal: { Width: '4rem', DividerWrapper: { Padding: '0.5rem 0' } }, + }, + MD: { + Vertical: { Width: '2.5rem', DividerWrapper: { Padding: '0 0.5rem' } }, + Horizontal: { Width: '5rem', DividerWrapper: { Padding: '0.5rem 0' } }, + }, + LG: { + Vertical: { Width: '3rem', DividerWrapper: { Padding: '0 0.5rem' } }, + Horizontal: { Width: '6rem', DividerWrapper: { Padding: '0.5rem 0' } }, + }, + }, + }, +}; diff --git a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js new file mode 100644 index 000000000..12d7b2b9b --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js @@ -0,0 +1,842 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:28 GMT + */ + +export const componentTokens = { + Feedback: { + Warning: { + Surface: 'hsla(50, 80%, 50%,0.1) ', + SurfaceStroke: 'hsla(50, 80%, 50%,1) ', + Text: 'hsla(50, 80%, 20%,1) ', + Icon: 'hsla(50, 80%, 50%,1) ', + }, + Error: { + Surface: 'hsla(350, 65%, 80%,0.1) ', + SurfaceStroke: 'hsla(350, 65%, 50%,1) ', + Text: 'hsla(350, 65%, 30%,1) ', + Icon: 'hsla(350, 65%, 50%,1) ', + }, + Loader: { + SM: { + Background: { + Default: { color: 'hsla(220, 65%, 60%,0.2) ', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 0.2)', width: '2px', style: 'solid' }, + }, + Foreground: { + Default: { color: 'hsla(220, 65%, 40%, 1)', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + }, + Sizing: '1rem', + Padding: '0.063rem', + }, + MD: { + Background: { + Default: { color: 'hsla(220, 65%, 60%,0.2) ', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 0.2)', width: '2px', style: 'solid' }, + }, + Foreground: { + Default: { color: 'hsla(220, 65%, 40%, 1)', width: '2px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + }, + Sizing: '1.5rem', + Padding: '0.125rem', + }, + LG: { + Background: { + Default: { color: 'hsla(220, 65%, 60%,0.2) ', width: '3px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 0.2)', width: '3px', style: 'solid' }, + }, + Foreground: { + Default: { color: 'hsla(220, 65%, 40%, 1)', width: '3px', style: 'solid' }, + Inverted: { color: 'hsla(0, 0%, 100%, 1)', width: '3px', style: 'solid' }, + }, + Sizing: '2rem', + Padding: '0.188rem', + }, + }, + Counter: { + SM: { + Padding: '0px 4px', + ItemSpacing: '2px', + Border: { + Neutral: { color: '#00000000', width: '1px', style: 'solid' }, + Warning: { color: 'hsla(50, 80%, 50%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + }, + }, + MD: { + Padding: '0px 4px', + ItemSpacing: '2px', + Border: { + Neutral: { color: '#00000000', width: '1px', style: 'solid' }, + Warning: { color: 'hsla(50, 80%, 50%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + }, + }, + LG: { + Padding: '0px 4px', + ItemSpacing: '2px', + Border: { + Neutral: { color: '#00000000', width: '1px', style: 'solid' }, + Warning: { color: 'hsla(50, 80%, 50%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + }, + }, + BorderRadius: '4px', + }, + }, + Forms: { + Checkbox: { + Control: { + Background: { + Unselected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(0, 0%, 100%, 1)', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(0, 0%, 100%, 1)', + }, + Stroke: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 90%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Foreground: { + Unselected: { + Fill: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(0, 0%, 100%, 1)', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Unselected: { + Rest: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 40%, 1)', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 30%, 1)', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 30%, 1)', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,1) ', width: '1px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + }, + }, + SM: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + MainContainer: { ItemSpacing: '8px' }, + ControlWrapper: { TopMargin: '0px' }, + Control: { + Background: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + }, + }, + Foreground: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + }, + }, + }, + }, + MD: { + Control: { + Background: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + }, + }, + Foreground: { + Sizing: { + Unselected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Indeterminate: { + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + }, + }, + }, + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + MainContainer: { ItemSpacing: '8px' }, + ControlWrapper: { TopMargin: '0.25rem' }, + }, + LG: { + Control: { + Background: { + Sizing: { + Unselected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + Selected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + }, + Indeterminate: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + }, + }, + }, + Foreground: { + Sizing: { + Unselected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + Selected: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + Indeterminate: { + Rest: '20px', + Hover: '20px', + Pressed: '20px', + Focus: '20px', + Disabled: '20px', + ReadOnly: '20px', + Error: '20px', + }, + }, + }, + }, + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + MainContainer: { ItemSpacing: '12px' }, + ControlWrapper: { TopMargin: '0.125rem' }, + }, + ControlBorderRadius: '2px', + }, + Radio: { + Control: { + Background: { + Unselected: { + Fill: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 90%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + Error: '16px', + }, + Selected: { + Fill: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 90%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + Rest: '16px', + Hover: '16px', + Pressed: '16px', + Focus: '16px', + Disabled: '16px', + ReadOnly: '16px', + }, + }, + Foreground: { + Unselected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(0, 0%, 100%, 1)', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(0, 0%, 100%, 1)', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + Error: '#00000000', + }, + Rest: '14px', + Hover: '14px', + Pressed: '14px', + Focus: '14px', + Disabled: '14px', + ReadOnly: '14px', + Error: '14px', + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(0, 0%, 100%, 1)', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + Rest: '6px', + Hover: '8px', + Pressed: '10px', + Focus: '6px', + Disabled: '6px', + ReadOnly: '6px', + }, + }, + Unselected: { + Rest: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 40%, 1)', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 30%, 1)', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + }, + }, + ControlBorderRadius: '9999px', + SM: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + ContentRow: { ItemSpacing: '8px', Padding: '0.5rem 0' }, + ControlWrapper: { TopMargin: '0rem' }, + }, + MD: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + ContentRow: { ItemSpacing: '8px', Padding: '0.5rem 0' }, + ControlWrapper: { TopMargin: '0.25rem' }, + }, + LG: { + ContentCol: { ItemSpacing: '0px', PaddingTop: '0rem' }, + ContentRow: { ItemSpacing: '12px', Padding: '0.5rem 0' }, + ControlWrapper: { TopMargin: '0.25rem' }, + }, + }, + ToggleSwitch: { + Control: { + Background: { + Unselected: { + Fill: { + Rest: 'hsla(220, 10%, 70%,1) ', + Hover: 'hsla(220, 10%, 60%,1) ', + Pressed: 'hsla(220, 10%, 50%,1) ', + Focus: 'hsla(220, 10%, 70%,1) ', + Disabled: 'hsla(220, 10%, 90%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(100, 65%, 40%,1) ', + Hover: 'hsla(100, 65%, 30%,1) ', + Pressed: 'hsla(100, 65%, 20%,1) ', + Focus: 'hsla(100, 65%, 40%,1) ', + Disabled: 'hsla(220, 10%, 90%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Ay11Icon: { + Unselected: { + Fill: { + Rest: 'hsla(220, 10%, 80%,1) ', + Hover: 'hsla(220, 10%, 80%,1) ', + Pressed: 'hsla(220, 10%, 80%,1) ', + Focus: 'hsla(220, 10%, 80%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 80%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 80%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + Knob: { + Surface: { + Unselected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 80%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + Selected: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 80%,1) ', + }, + Stroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: '#00000000', + ReadOnly: '#00000000', + }, + }, + }, + }, + SM: { + A11yIcon: { Sizing: '1rem' }, + Knob: { Sizing: '1rem' }, + Background: { Width: '2.25rem', Height: '1.25rem', Padding: '2px' }, + IconContainer: { PaddingLeftRight: '0.125rem' }, + LabelGap: '8px', + }, + MD: { + A11yIcon: { Sizing: '1rem' }, + Knob: { Sizing: '1.25rem' }, + Background: { Width: '2.75rem', Height: '1.5rem', Padding: '2px' }, + IconContainer: { PaddingLeftRight: '0.125rem' }, + LabelGap: '8px', + }, + LG: { + Background: { Padding: '2px', Width: '3.25rem', Height: '1.75rem' }, + A11yIcon: { Sizing: '1rem' }, + Knob: { Sizing: '1.5rem' }, + IconContainer: { PaddingLeftRight: '0.219rem' }, + LabelGap: '8px', + }, + }, + A11yOffBorderRadius: '9999px', + SM: { Gap: '0.5rem', ContentColGap: '0rem' }, + MD: { Gap: '0.5rem', ContentColGap: '0rem' }, + LG: { Gap: '0.5rem', ContentColGap: '0rem' }, + }, + Slider: { + Thumb: { + Fill: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(0, 0%, 100%, 1)', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(350, 65%, 80%,0.1) ', + }, + Stroke: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 90%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + Border: { + Rest: { color: 'hsla(220, 65%, 50%, 1)', width: '2px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 40%, 1)', width: '4px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 30%, 1)', width: '4px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 50%, 1)', width: '2px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,1) ', width: '2px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 90%,1) ', width: '2px', style: 'solid' }, + Error: { color: 'hsla(350, 65%, 50%,1) ', width: '2px', style: 'solid' }, + }, + Sizing: { Rest: '14px', Hover: '20px', Pressed: '20px', Focus: '14px', Disabled: '14px', Readonly: '14px' }, + }, + Track: { + Stroke: { + Active: { Default: 'hsla(220, 65%, 50%, 1)', Mute: 'hsla(220, 10%, 80%,1) ' }, + Inactive: { Default: 'hsla(220, 65%, 80%,0.3) ', Mute: 'hsla(220, 10%, 90%,1) ' }, + }, + Border: { + Active: { + Default: { color: 'hsla(220, 65%, 50%, 1)', width: '4px', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 80%,1) ', width: '4px', style: 'solid' }, + }, + Inactive: { + Default: { color: 'hsla(220, 65%, 80%,0.3) ', width: '4px', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 90%,1) ', width: '4px', style: 'solid' }, + }, + }, + }, + TickMark: { + Stroke: { + Active: { Default: 'hsla(220, 65%, 50%, 1)', Mute: 'hsla(220, 10%, 80%,1) ' }, + Inactive: { Default: 'hsla(220, 65%, 80%,0.3) ', Mute: 'hsla(220, 10%, 90%,1) ' }, + }, + Fill: { + Active: { Default: 'hsla(0, 0%, 100%, 1)', Mute: 'hsla(0, 0%, 100%, 1)' }, + Inactive: { Default: 'hsla(0, 0%, 100%, 1)', Mute: 'hsla(0, 0%, 100%, 1)' }, + }, + Border: { + Active: { + Default: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 80%,1) ', width: '1px', style: 'solid' }, + }, + Inactive: { + Default: { color: 'hsla(220, 65%, 80%,0.3) ', width: '1px1', style: 'solid' }, + Mute: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' }, + }, + }, + Sizing: '6px', + }, + Legend: { + Color: { Default: 'hsla(220, 10%, 40%,1) ', Disabled: 'hsla(220, 10%, 80%,1) ' }, + Typography: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '150%', fontSize: '0.75rem' }, + }, + }, + Select: { + SM: { InputFieldPadding: '0.5rem 32px 0.5rem 12px', IconPaddingRight: '12px' }, + MD: { InputFieldPadding: '0.5rem 32px 0.5rem 12px', IconPaddingRight: '12px' }, + LG: { InputFieldPadding: '0.75rem 48px 0.75rem 16px', IconPaddingRight: '16px' }, + }, + TextArea: { SM: { MinHeight: '4rem' }, MD: { MinHeight: '5rem' }, LG: { MinHeight: '7rem' } }, + }, + UI: { + Divider: { Stroke: 'hsla(220, 10%, 80%,0.3) ', Border: { color: 'hsla(220, 10%, 80%,0.3) ', width: '1px' } }, + Icon: { XXS: '0.5rem', XS: '0.75rem', SM: '1rem', MD: '1.5rem', LG: '2rem', XL: '3rem' }, + }, + Navigation: { + TabBar: { + Tab: { + HighlightLine: { + SurfaceFill: 'hsla(220, 65%, 50%, 1)', + Selected: { Opacity: '1' }, + Unselected: { Opacity: '0' }, + }, + Label: { + Active: 'hsla(220, 65%, 50%, 1)', + Unselected: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + }, + Icon: { + Active: 'hsla(220, 65%, 50%, 1)', + Unselected: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + }, + SM: { + HighlightLine: { Height: '2px' }, + ContentCol: { TopPadding: '0.25rem', ItemSpacing: '0.5rem' }, + ContentRow: { PaddingLeftRight: '12px', ItemSpacing: '2px' }, + Icon: { Sizing: '0.75rem' }, + }, + MD: { + HighlightLine: { Height: '2px' }, + ContentCol: { TopPadding: '0.5rem', ItemSpacing: '0.5rem' }, + ContentRow: { PaddingLeftRight: '16px', ItemSpacing: '2px' }, + Icon: { Sizing: '1rem' }, + }, + LG: { + HighlightLine: { Height: '2px' }, + ContentCol: { TopPadding: '0.5rem', ItemSpacing: '0.5rem' }, + ContentRow: { PaddingLeftRight: '16px', ItemSpacing: '4px' }, + Icon: { Sizing: '1rem' }, + }, + }, + ButtonWrapper: { + SM: { Leading: { Padding: '0 0.5rem 0 0' }, Trailing: { Padding: '0 0 0 0.5rem' } }, + MD: { Leading: { Padding: '0 0.5rem 0 0' }, Trailing: { Padding: '0 0 0 0.5rem' } }, + LG: { Leading: { Padding: '0 0.75rem' }, Trailing: { Padding: '0 0 0 0.75rem' } }, + }, + }, + }, + Action: { + TextButton: { + XS: { Padding: '0.25rem 12px', ItemSpacing: '4px' }, + SM: { Padding: '0.25rem 12px', ItemSpacing: '4px' }, + MD: { Padding: '0.5rem 16px', ItemSpacing: '4px' }, + LG: { Padding: '0.5rem 24px', ItemSpacing: '4px' }, + XL: { Padding: '1rem 40px', ItemSpacing: '4px' }, + }, + IconButton: { + XS: { Padding: '0.375rem', ItemSpacing: '0px' }, + SM: { Padding: '0.375rem', ItemSpacing: '0px' }, + MD: { Padding: '0.5rem', ItemSpacing: '0px' }, + LG: { Padding: '0.5rem', ItemSpacing: '0px' }, + XL: { Padding: '0.75rem', ItemSpacing: '0px' }, + }, + IconDropdown: { + XS: { Padding: '0.375rem 0.063rem 0.375rem 0.188rem', ItemSpacing: '0px' }, + SM: { Padding: '0.375rem 0.063rem 0.375rem 0.188rem', ItemSpacing: '0px' }, + MD: { Padding: '0.5rem 0.063rem 0.5rem 0.188rem', ItemSpacing: '0px' }, + LG: { Padding: '0.5rem 0rem 0.5rem 0.125rem', ItemSpacing: '-0.125rem' }, + XL: { Padding: '0.75rem 0rem 0.75rem 0.25rem', ItemSpacing: '-0.25rem' }, + }, + StepperButton: { + Border: { + Rest: { color: '#00000000', width: '0px' }, + Hover: { color: '#00000000', width: '0px' }, + Pressed: { color: '#00000000', width: '0px' }, + Focus: { color: 'hsla(220, 10%, 10%,1) ', width: '2px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,0) ', width: '0px' }, + }, + SM: { Width: '2rem' }, + MD: { Width: '2.5rem' }, + LG: { Width: '3rem' }, + }, + StepperCombo: { + SM: { + Vertical: { Width: '2rem', DividerWrapper: { Padding: '0 0.5rem' } }, + Horizontal: { Width: '4rem', DividerWrapper: { Padding: '0.5rem 0' } }, + }, + MD: { + Vertical: { Width: '2.5rem', DividerWrapper: { Padding: '0 0.5rem' } }, + Horizontal: { Width: '5rem', DividerWrapper: { Padding: '0.5rem 0' } }, + }, + LG: { + Vertical: { Width: '3rem', DividerWrapper: { Padding: '0 0.5rem' } }, + Horizontal: { Width: '6rem', DividerWrapper: { Padding: '0.5rem 0' } }, + }, + }, + }, +}; diff --git a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js new file mode 100644 index 000000000..69c888744 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js @@ -0,0 +1,480 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +export const semanticTokens = { + Feedback: { + Neutral: { + Surface: 'hsla(220, 10%, 10%,1) ', + SurfaceStroke: '#00000000', + Text: 'hsla(220, 10%, 60%,1) ', + Icon: 'hsla(220, 10%, 60%,1) ', + }, + Warning: { + Surface: 'hsla(50, 80%, 40%,0.4) ', + SurfaceStroke: 'hsla(50, 80%, 80%,1) ', + Text: 'hsla(50, 80%, 50%,1) ', + Icon: 'hsla(50, 80%, 70%,1) ', + }, + Error: { + Surface: 'hsla(350, 65%, 40%,0.4) ', + SurfaceStroke: 'hsla(350, 65%, 80%,1) ', + Text: 'hsla(350, 65%, 50%,1) ', + Icon: 'hsla(350, 65%, 70%,1) ', + }, + }, + Forms: { + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(350, 65%, 60%,1) ', + }, + LabelAppendix: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(350, 65%, 60%,1) ', + }, + Caption: { Error: 'hsla(350, 65%, 60%,1) ', Hint: 'hsla(220, 10%, 60%,1) ' }, + UserInput: { + Default: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + }, + Error: { + Rest: 'hsla(350, 65%, 50%,1) ', + Hover: 'hsla(350, 65%, 50%,1) ', + Pressed: 'hsla(350, 65%, 50%,1) ', + Focused: 'hsla(350, 65%, 50%,1) ', + }, + }, + Placeholder: { + Default: { + Rest: 'hsla(220, 10%, 30%,1) ', + Hover: 'hsla(220, 10%, 30%,1) ', + Pressed: 'hsla(220, 10%, 30%,1) ', + Focus: 'hsla(220, 10%, 30%,1) ', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(220, 10%, 30%,1) ', + }, + Error: { + Rest: 'hsla(220, 10%, 70%,1) ', + Hover: 'hsla(220, 10%, 70%,1) ', + Pressed: 'hsla(220, 10%, 70%,1) ', + Focus: 'hsla(220, 10%, 70%,1) ', + }, + }, + SurfaceFill: { + Default: { + Rest: 'hsla(220, 10%, 10%,1) ', + Hover: 'hsla(220, 10%, 10%,1) ', + Pressed: 'hsla(220, 10%, 10%,1) ', + Focus: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 30%,1) ', + ReadOnly: 'hsla(220, 10%, 20%,0.1) ', + }, + Error: { + Rest: 'hsla(350, 65%, 40%,0.4) ', + Hover: 'hsla(350, 65%, 40%,0.4) ', + Pressed: 'hsla(350, 65%, 40%,0.4) ', + Focus: 'hsla(350, 65%, 40%,0.4) ', + }, + }, + InputIcon: { + Rest: 'hsla(220, 10%, 30%,1) ', + Hover: 'hsla(220, 10%, 20%,1) ', + Pressed: 'hsla(220, 10%, 40%,1) ', + Focus: 'hsla(220, 10%, 30%,1) ', + Disabled: 'hsla(220, 10%, 40%,1) ', + Error: 'hsla(350, 65%, 70%,1) ', + }, + LabelNextToControl: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(350, 65%, 60%,1) ', + }, + Legend: { + Default: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + ReadOnly: 'hsla(0, 0%, 100%, 1)', + Error: 'hsla(350, 65%, 60%,1) ', + }, + SM: { + Caption: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.75rem' }, + CaptionComponent: { + CaptionLabelWrapper: { Padding: '0rem 0px' }, + IconDimension: '0.875rem', + IconSize: 'SM', + IconWrapper: { PaddingTop: '0.063rem' }, + ItemSpacing: '0.125rem', + Padding: '0rem 0px', + }, + CaptionSlot: { Margin: '0.5rem 0px 0rem 0px' }, + InputField: { Padding: '0.5rem 12px', IconSize: 'MD' }, + InputSlot: { Margin: '0rem 0px 0rem 0px' }, + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.875rem' }, + LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.75rem' }, + LabelComponent: { ItemSpacing: '4px', Padding: '0 0px' }, + LabelSlot: { Padding: '0rem 0px 8px ' }, + LabelNextToControl: { + fontFamily: '"Source Sans Pro" ', + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.875rem', + }, + Legend: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.75rem' }, + Placeholder: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + UserInput: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + }, + MD: { + Caption: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + CaptionComponent: { + CaptionLabelWrapper: { Padding: '0rem 0px' }, + IconDimension: '1rem', + IconSize: 'SM', + IconWrapper: { PaddingTop: '0.031rem' }, + ItemSpacing: '0.125rem', + Padding: '0rem 0px', + }, + CaptionSlot: { Margin: '0.5rem 0px 0rem 0px' }, + InputField: { Padding: '0.5rem 12px', IconSize: 'MD' }, + InputSlot: { Margin: '0rem 0px 0rem 0px' }, + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1rem' }, + LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + LabelComponent: { ItemSpacing: '4px', Padding: '0 0px' }, + LabelSlot: { Padding: '0rem 0px 8px ' }, + LabelNextToControl: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + Legend: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.875rem' }, + Placeholder: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + UserInput: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + }, + LG: { + Caption: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + CaptionComponent: { + CaptionLabelWrapper: { Padding: '0rem 0px' }, + IconDimension: '1rem', + IconSize: 'SM', + IconWrapper: { PaddingTop: '0.313rem' }, + ItemSpacing: '0.125rem', + Padding: '0rem 0px', + }, + CaptionSlot: { Margin: '0.5rem 0px 0rem 0px' }, + InputField: { Padding: '0.75rem 16px', IconSize: 'MD' }, + InputSlot: { Margin: '0rem 0px 0rem 0px' }, + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1.25rem' }, + LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + LabelNextToControl: { + fontFamily: '"Source Sans Pro" ', + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1.25rem', + }, + LabelSlot: { Padding: '0rem 0px 8px ' }, + LabelComponent: { ItemSpacing: '4px', Padding: '0 0px' }, + Legend: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1rem' }, + Placeholder: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1.25rem' }, + UserInput: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1.25rem' }, + }, + InputBorderRadius: '4px', + Input: { + Default: { + Rest: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 20%,1) ', width: '1px', style: 'solid' }, + }, + Error: { + Rest: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(350, 65%, 80%,1) ', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(350, 65%, 80%,1) ', width: '2px', style: 'solid' }, + }, + }, + }, + UI: { Background: { Level_1: 'hsla(220, 10%, 10%,1) ', Level_2: 'hsla(220, 10%, 10%,1) ' } }, + Action: { + CTA: { + SurfaceFill: { + Rest: 'hsla(260, 50%, 40%, 1)', + Hover: 'hsla(260, 50%, 50%, 1)', + Pressed: 'hsla(260, 50%, 60%, 1)', + Focus: 'hsla(260, 50%, 40%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + Loading: 'hsla(260, 50%, 40%, 1)', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Primary: { + SurfaceFill: { + Rest: 'hsla(220, 65%, 40%, 1)', + Hover: 'hsla(220, 65%, 50%, 1)', + Pressed: 'hsla(220, 65%, 60%, 1)', + Focus: 'hsla(220, 65%, 40%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + Loading: 'hsla(220, 65%, 40%, 1)', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Secondary: { + SurfaceFill: { + Rest: 'hsla(220, 65%, 20%,0.3) ', + Hover: 'hsla(220, 65%, 30%,0.4) ', + Pressed: 'hsla(220, 65%, 40%,0.4) ', + Focus: 'hsla(220, 65%, 20%,0.3) ', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: 'hsla(220, 65%, 20%,0.3) ', + }, + SurfaceStroke: { + Rest: 'hsla(220, 65%, 60%, 1)', + Hover: 'hsla(220, 65%, 70%, 1)', + Pressed: 'hsla(220, 65%, 80%, 1)', + Focus: 'hsla(220, 65%, 60%, 1)', + Disabled: 'hsla(220, 10%, 30%,1) ', + Loading: 'hsla(220, 65%, 60%, 1)', + }, + Icon: { + Rest: 'hsla(220, 65%, 95%, 1)', + Hover: 'hsla(220, 65%, 90%, 1)', + Pressed: 'hsla(220, 65%, 70%, 1)', + Focus: 'hsla(220, 65%, 95%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(220, 65%, 95%, 1)', + }, + Label: { + Rest: 'hsla(220, 65%, 95%, 1)', + Hover: 'hsla(220, 65%, 90%, 1)', + Pressed: 'hsla(220, 65%, 70%, 1)', + Focus: 'hsla(220, 65%, 95%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(220, 65%, 95%, 1)', + }, + Rest: { color: 'hsla(220, 65%, 60%, 1)', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 70%, 1)', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 80%, 1)', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 60%, 1)', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,1) ', width: '1px', style: 'solid' }, + Loading: { color: 'hsla(220, 65%, 60%, 1)', width: '1px', style: 'solid' }, + }, + Silent: { + SurfaceFill: { + Rest: 'hsla(220, 65%, 60%,0) ', + Hover: 'hsla(220, 65%, 60%,0.1) ', + Pressed: 'hsla(220, 65%, 60%,0.2) ', + Focus: 'hsla(220, 65%, 60%,0) ', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: 'hsla(220, 65%, 60%,0) ', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(220, 65%, 95%, 1)', + Hover: 'hsla(220, 65%, 90%, 1)', + Pressed: 'hsla(220, 65%, 70%, 1)', + Focus: 'hsla(220, 65%, 95%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(220, 65%, 95%, 1)', + }, + Label: { + Rest: 'hsla(220, 65%, 95%, 1)', + Hover: 'hsla(220, 65%, 90%, 1)', + Pressed: 'hsla(220, 65%, 70%, 1)', + Focus: 'hsla(220, 65%, 95%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(220, 65%, 95%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Destructive: { + SurfaceFill: { + Rest: 'hsla(350, 65%, 40%,1) ', + Hover: 'hsla(350, 65%, 50%,1) ', + Pressed: 'hsla(350, 65%, 60%,1) ', + Focus: 'hsla(350, 65%, 40%,1) ', + Disabled: 'hsla(220, 10%, 30%,1) ', + Loading: 'hsla(350, 65%, 40%,1) ', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Encourage: { + SurfaceFill: { + Rest: 'hsla(100, 65%, 30%,1) ', + Hover: 'hsla(100, 65%, 40%,1) ', + Pressed: 'hsla(100, 65%, 50%,1) ', + Focus: 'hsla(100, 65%, 30%,1) ', + Disabled: 'hsla(220, 10%, 30%,1) ', + Loading: 'hsla(100, 65%, 30%,1) ', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 30%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 40%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 30%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + BorderRadius: '4px', + XS: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '0.75rem', fontSize: '0.5rem' }, + LoaderSize: 'SM', + }, + SM: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.75rem' }, + LoaderSize: 'SM', + }, + MD: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.875rem' }, + LoaderSize: 'MD', + }, + LG: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1rem' }, + LoaderSize: 'MD', + }, + XL: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1.25rem' }, + LoaderSize: 'LG', + }, + }, + Global: { + Focus: 'hsla(0, 0%, 100%, 1)', + FocusBorder: { color: 'hsla(0, 0%, 100%, 1)', width: '2px', style: 'solid' }, + }, +}; diff --git a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js new file mode 100644 index 000000000..44f872ea8 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js @@ -0,0 +1,480 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:28 GMT + */ + +export const semanticTokens = { + Feedback: { + Neutral: { + Surface: 'hsla(0, 0%, 100%, 1)', + SurfaceStroke: '#00000000', + Text: 'hsla(220, 10%, 40%,1) ', + Icon: 'hsla(220, 10%, 40%,1) ', + }, + Warning: { + Surface: 'hsla(50, 80%, 50%,0.1) ', + SurfaceStroke: 'hsla(50, 80%, 50%,1) ', + Text: 'hsla(50, 80%, 20%,1) ', + Icon: 'hsla(50, 80%, 50%,1) ', + }, + Error: { + Surface: 'hsla(350, 65%, 80%,0.1) ', + SurfaceStroke: 'hsla(350, 65%, 50%,1) ', + Text: 'hsla(350, 65%, 30%,1) ', + Icon: 'hsla(350, 65%, 50%,1) ', + }, + }, + Forms: { + Label: { + Rest: 'hsla(220, 10%, 10%,1) ', + Hover: 'hsla(220, 10%, 10%,1) ', + Pressed: 'hsla(220, 10%, 10%,1) ', + Focus: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + LabelAppendix: { + Rest: 'hsla(220, 10%, 10%,1) ', + Hover: 'hsla(220, 10%, 10%,1) ', + Pressed: 'hsla(220, 10%, 10%,1) ', + Focus: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + Caption: { Error: 'hsla(350, 65%, 50%,1) ', Hint: 'hsla(220, 10%, 40%,1) ' }, + UserInput: { + Default: { + Rest: 'hsla(220, 10%, 10%,1) ', + Hover: 'hsla(220, 10%, 10%,1) ', + Pressed: 'hsla(220, 10%, 10%,1) ', + Focus: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + }, + Error: { + Rest: 'hsla(350, 65%, 30%,1) ', + Hover: 'hsla(350, 65%, 30%,1) ', + Pressed: 'hsla(350, 65%, 30%,1) ', + Focused: 'hsla(350, 65%, 30%,1) ', + }, + }, + Placeholder: { + Default: { + Rest: 'hsla(220, 10%, 70%,1) ', + Hover: 'hsla(220, 10%, 70%,1) ', + Pressed: 'hsla(220, 10%, 70%,1) ', + Focus: 'hsla(220, 10%, 70%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 70%,1) ', + }, + Error: { + Rest: 'hsla(220, 10%, 70%,1) ', + Hover: 'hsla(220, 10%, 70%,1) ', + Pressed: 'hsla(220, 10%, 70%,1) ', + Focus: 'hsla(220, 10%, 70%,1) ', + }, + }, + SurfaceFill: { + Default: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 90%,1) ', + ReadOnly: 'hsla(220, 10%, 99%,1) ', + }, + Error: { + Rest: 'hsla(350, 65%, 80%,0.1) ', + Hover: 'hsla(350, 65%, 80%,0.1) ', + Pressed: 'hsla(350, 65%, 80%,0.1) ', + Focus: 'hsla(350, 65%, 80%,0.1) ', + }, + }, + InputIcon: { + Rest: 'hsla(220, 10%, 70%,1) ', + Hover: 'hsla(220, 10%, 60%,1) ', + Pressed: 'hsla(220, 10%, 50%,1) ', + Focus: 'hsla(220, 10%, 70%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + LabelNextToControl: { + Rest: 'hsla(220, 10%, 10%,1) ', + Hover: 'hsla(220, 10%, 10%,1) ', + Pressed: 'hsla(220, 10%, 10%,1) ', + Focus: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + Legend: { + Default: 'hsla(220, 10%, 10%,1) ', + Disabled: 'hsla(220, 10%, 80%,1) ', + ReadOnly: 'hsla(220, 10%, 10%,1) ', + Error: 'hsla(350, 65%, 50%,1) ', + }, + SM: { + Caption: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.75rem' }, + CaptionComponent: { + CaptionLabelWrapper: { Padding: '0rem 0px' }, + IconDimension: '0.875rem', + IconSize: 'SM', + IconWrapper: { PaddingTop: '0.063rem' }, + ItemSpacing: '0.125rem', + Padding: '0rem 0px', + }, + CaptionSlot: { Margin: '0.5rem 0px 0rem 0px' }, + InputField: { Padding: '0.5rem 12px', IconSize: 'MD' }, + InputSlot: { Margin: '0rem 0px 0rem 0px' }, + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.875rem' }, + LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.75rem' }, + LabelComponent: { ItemSpacing: '4px', Padding: '0 0px' }, + LabelSlot: { Padding: '0rem 0px 8px ' }, + LabelNextToControl: { + fontFamily: '"Source Sans Pro" ', + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.875rem', + }, + Legend: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.75rem' }, + Placeholder: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + UserInput: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + }, + MD: { + Caption: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + CaptionComponent: { + CaptionLabelWrapper: { Padding: '0rem 0px' }, + IconDimension: '1rem', + IconSize: 'SM', + IconWrapper: { PaddingTop: '0.031rem' }, + ItemSpacing: '0.125rem', + Padding: '0rem 0px', + }, + CaptionSlot: { Margin: '0.5rem 0px 0rem 0px' }, + InputField: { Padding: '0.5rem 12px', IconSize: 'MD' }, + InputSlot: { Margin: '0rem 0px 0rem 0px' }, + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1rem' }, + LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1rem', fontSize: '0.875rem' }, + LabelComponent: { ItemSpacing: '4px', Padding: '0 0px' }, + LabelSlot: { Padding: '0rem 0px 8px ' }, + LabelNextToControl: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + Legend: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.875rem' }, + Placeholder: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + UserInput: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + }, + LG: { + Caption: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + CaptionComponent: { + CaptionLabelWrapper: { Padding: '0rem 0px' }, + IconDimension: '1rem', + IconSize: 'SM', + IconWrapper: { PaddingTop: '0.313rem' }, + ItemSpacing: '0.125rem', + Padding: '0rem 0px', + }, + CaptionSlot: { Margin: '0.5rem 0px 0rem 0px' }, + InputField: { Padding: '0.75rem 16px', IconSize: 'MD' }, + InputSlot: { Margin: '0rem 0px 0rem 0px' }, + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1.25rem' }, + LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1rem' }, + LabelNextToControl: { + fontFamily: '"Source Sans Pro" ', + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1.25rem', + }, + LabelSlot: { Padding: '0rem 0px 8px ' }, + LabelComponent: { ItemSpacing: '4px', Padding: '0 0px' }, + Legend: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1rem' }, + Placeholder: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1.25rem' }, + UserInput: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '1.5rem', fontSize: '1.25rem' }, + }, + InputBorderRadius: '4px', + Input: { + Default: { + Rest: { color: 'hsla(220, 10%, 70%,1) ', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 10%, 70%,1) ', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 10%, 70%,1) ', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 10%, 10%,1) ', width: '2px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,1) ', width: '1px', style: 'solid' }, + ReadOnly: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' }, + }, + Error: { + Rest: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(350, 65%, 50%,1) ', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(350, 65%, 50%,1) ', width: '2px', style: 'solid' }, + }, + }, + }, + UI: { Background: { Level_1: 'hsla(0, 0%, 100%, 1)', Level_2: 'hsla(0, 0%, 100%, 1)' } }, + Action: { + CTA: { + SurfaceFill: { + Rest: 'hsla(260, 50%, 50%, 1)', + Hover: 'hsla(260, 50%, 40%, 1)', + Pressed: 'hsla(260, 50%, 30%, 1)', + Focus: 'hsla(260, 50%, 50%, 1)', + Disabled: 'hsla(220, 10%, 90%,1) ', + Loading: 'hsla(260, 50%, 50%, 1)', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Primary: { + SurfaceFill: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 90%,1) ', + Loading: 'hsla(220, 65%, 50%, 1)', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Secondary: { + SurfaceFill: { + Rest: 'hsla(220, 65%, 80%,0.3) ', + Hover: 'hsla(220, 65%, 70%,0.3) ', + Pressed: 'hsla(220, 65%, 60%,0.5) ', + Focus: 'hsla(220, 65%, 80%,0.3) ', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: 'hsla(220, 65%, 80%,0.3) ', + }, + SurfaceStroke: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(220, 65%, 50%, 1)', + }, + Icon: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(220, 65%, 50%, 1)', + }, + Label: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(220, 65%, 50%, 1)', + }, + Rest: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Hover: { color: 'hsla(220, 65%, 40%, 1)', width: '1px', style: 'solid' }, + Pressed: { color: 'hsla(220, 65%, 30%, 1)', width: '1px', style: 'solid' }, + Focus: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,1) ', width: '1px', style: 'solid' }, + Loading: { color: 'hsla(220, 65%, 50%, 1)', width: '1px', style: 'solid' }, + }, + Silent: { + SurfaceFill: { + Rest: 'hsla(220, 65%, 60%,0) ', + Hover: 'hsla(220, 65%, 60%,0.1) ', + Pressed: 'hsla(220, 65%, 60%,0.2) ', + Focus: 'hsla(220, 65%, 60%,0) ', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: 'hsla(220, 65%, 60%,0) ', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(220, 65%, 50%, 1)', + }, + Label: { + Rest: 'hsla(220, 65%, 50%, 1)', + Hover: 'hsla(220, 65%, 40%, 1)', + Pressed: 'hsla(220, 65%, 30%, 1)', + Focus: 'hsla(220, 65%, 50%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(220, 65%, 50%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Destructive: { + SurfaceFill: { + Rest: 'hsla(350, 65%, 50%,1) ', + Hover: 'hsla(350, 65%, 40%,1) ', + Pressed: 'hsla(350, 65%, 30%,1) ', + Focus: 'hsla(350, 65%, 50%,1) ', + Disabled: 'hsla(220, 10%, 90%,1) ', + Loading: 'hsla(350, 65%, 50%,1) ', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + Encourage: { + SurfaceFill: { + Rest: 'hsla(100, 65%, 40%,1) ', + Hover: 'hsla(100, 65%, 30%,1) ', + Pressed: 'hsla(100, 65%, 20%,1) ', + Focus: 'hsla(100, 65%, 40%,1) ', + Disabled: 'hsla(220, 10%, 90%,1) ', + Loading: 'hsla(100, 65%, 40%,1) ', + }, + SurfaceStroke: { + Rest: '#00000000', + Hover: '#00000000', + Pressed: '#00000000', + Focus: '#00000000', + Disabled: 'hsla(220, 10%, 80%,0) ', + Loading: '#00000000', + }, + Icon: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Label: { + Rest: 'hsla(0, 0%, 100%, 1)', + Hover: 'hsla(0, 0%, 100%, 1)', + Pressed: 'hsla(0, 0%, 100%, 1)', + Focus: 'hsla(0, 0%, 100%, 1)', + Disabled: 'hsla(220, 10%, 80%,1) ', + Loading: 'hsla(0, 0%, 100%, 1)', + }, + Rest: { color: '#00000000', width: '1px', style: 'solid' }, + Hover: { color: '#00000000', width: '1px', style: 'solid' }, + Pressed: { color: '#00000000', width: '1px', style: 'solid' }, + Focus: { color: '#00000000', width: '1px', style: 'solid' }, + Disabled: { color: 'hsla(220, 10%, 80%,0) ', width: '1px', style: 'solid' }, + Loading: { color: '#00000000', width: '1px', style: 'solid' }, + }, + BorderRadius: '4px', + XS: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '0.75rem', fontSize: '0.5rem' }, + LoaderSize: 'SM', + }, + SM: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.75rem' }, + LoaderSize: 'SM', + }, + MD: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1rem', fontSize: '0.875rem' }, + LoaderSize: 'MD', + }, + LG: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1rem' }, + LoaderSize: 'MD', + }, + XL: { + Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '1.5rem', fontSize: '1.25rem' }, + LoaderSize: 'LG', + }, + }, + Global: { + Focus: 'hsla(220, 10%, 10%,1) ', + FocusBorder: { color: 'hsla(220, 10%, 10%,1) ', width: '2px', style: 'solid' }, + }, +}; diff --git a/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss new file mode 100644 index 000000000..caaa24fc6 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss @@ -0,0 +1,14 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-border-radius-base: 4px; + --blr-core-border-radius-sm: 2px; + --blr-core-border-radius-md: 4px; + --blr-core-border-radius-lg: 8px; + --blr-core-border-radius-xl: 12px; + --blr-core-border-radius-round: 9999px; + --blr-core-border-radius-none: 0px; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss new file mode 100644 index 000000000..d82536e14 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss @@ -0,0 +1,13 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-border-width-base: 1px; + --blr-core-border-width-thin: 0.5px; + --blr-core-border-width-medium: 1px; + --blr-core-border-width-bold: 2px; + --blr-core-border-width-heavy: 3px; + --blr-core-border-width-none: 0px; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss new file mode 100644 index 000000000..81496d442 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss @@ -0,0 +1,899 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-color-ref-lght-100: 10; + --blr-core-color-ref-lght-200: 20; + --blr-core-color-ref-lght-300: 30; + --blr-core-color-ref-lght-400: 40; + --blr-core-color-ref-lght-500: 50; + --blr-core-color-ref-lght-600: 60; + --blr-core-color-ref-lght-700: 70; + --blr-core-color-ref-lght-800: 80; + --blr-core-color-ref-lght-900: 90; + --blr-core-color-ref-lght-950: 95; + --blr-core-color-ref-lght-999: 99; + --blr-core-color-ref-alpha-0: 0; + --blr-core-color-ref-alpha-10: 0.1; + --blr-core-color-ref-alpha-20: 0.2; + --blr-core-color-ref-alpha-30: 0.3; + --blr-core-color-ref-alpha-40: 0.4; + --blr-core-color-ref-alpha-50: 0.5; + --blr-core-color-ref-alpha-60: 0.6; + --blr-core-color-ref-alpha-70: 0.7; + --blr-core-color-ref-alpha-80: 0.8; + --blr-core-color-ref-alpha-90: 0.9; + --blr-core-color-ref-alpha-100: 1; + --blr-core-color-neutral-transparent: #00000000; + --blr-core-color-white-solid: hsla(0, 0%, 100%, 1); + --blr-core-color-white-opa0: hsla(0, 0%, 100%, 0); + --blr-core-color-white-opa10: hsla(0, 0%, 100%, 0.1); + --blr-core-color-white-opa20: hsla(0, 0%, 100%, 0.2); + --blr-core-color-white-opa30: hsla(0, 0%, 100%, 0.3); + --blr-core-color-white-opa40: hsla(0, 0%, 100%, 0.4); + --blr-core-color-white-opa50: hsla(0, 0%, 100%, 0.5); + --blr-core-color-white-opa60: hsla(0, 0%, 100%, 0.6); + --blr-core-color-white-opa70: hsla(0, 0%, 100%, 0.7); + --blr-core-color-white-opa80: hsla(0, 0%, 100%, 0.8); + --blr-core-color-white-opa90: hsla(0, 0%, 100%, 0.9); + --blr-core-color-black-solid: hsla(0, 0%, 0%, 1); + --blr-core-color-black-opa0: hsla(0, 0%, 0%, 0); + --blr-core-color-black-opa10: hsla(0, 0%, 0%, 0.1); + --blr-core-color-black-opa20: hsla(0, 0%, 0%, 0.2); + --blr-core-color-black-opa30: hsla(0, 0%, 0%, 0.3); + --blr-core-color-black-opa40: hsla(0, 0%, 0%, 0.4); + --blr-core-color-black-opa50: hsla(0, 0%, 0%, 0.5); + --blr-core-color-black-opa60: hsla(0, 0%, 0%, 0.6); + --blr-core-color-black-opa70: hsla(0, 0%, 0%, 0.7); + --blr-core-color-black-opa80: hsla(0, 0%, 0%, 0.8); + --blr-core-color-black-opa90: hsla(0, 0%, 0%, 0.9); + --blr-core-color-purple-100-solid: hsla(260, 50%, 10%, 1); + --blr-core-color-purple-100-opa0: hsla(260, 50%, 10%, 0); + --blr-core-color-purple-100-opa10: hsla(260, 50%, 10%, 0.1); + --blr-core-color-purple-100-opa20: hsla(260, 50%, 10%, 0.2); + --blr-core-color-purple-100-opa30: hsla(260, 50%, 10%, 0.3); + --blr-core-color-purple-100-opa40: hsla(260, 50%, 10%, 0.4); + --blr-core-color-purple-100-opa50: hsla(260, 50%, 10%, 0.5); + --blr-core-color-purple-100-opa60: hsla(260, 50%, 10%, 0.6); + --blr-core-color-purple-100-opa70: hsla(260, 50%, 10%, 0.7); + --blr-core-color-purple-100-opa80: hsla(260, 50%, 10%, 0.8); + --blr-core-color-purple-100-opa90: hsla(260, 50%, 10%, 0.9); + --blr-core-color-purple-200-solid: hsla(260, 50%, 20%, 1); + --blr-core-color-purple-200-opa0: hsla(260, 50%, 20%, 0); + --blr-core-color-purple-200-opa10: hsla(260, 50%, 20%, 0.1); + --blr-core-color-purple-200-opa20: hsla(260, 50%, 20%, 0.2); + --blr-core-color-purple-200-opa30: hsla(260, 50%, 20%, 0.3); + --blr-core-color-purple-200-opa40: hsla(260, 50%, 20%, 0.4); + --blr-core-color-purple-200-opa50: hsla(260, 50%, 20%, 0.5); + --blr-core-color-purple-200-opa60: hsla(260, 50%, 20%, 0.6); + --blr-core-color-purple-200-opa70: hsla(260, 50%, 20%, 0.7); + --blr-core-color-purple-200-opa80: hsla(260, 50%, 20%, 0.8); + --blr-core-color-purple-200-opa90: hsla(260, 50%, 20%, 0.9); + --blr-core-color-purple-300-solid: hsla(260, 50%, 30%, 1); + --blr-core-color-purple-300-opa0: hsla(260, 50%, 30%, 0); + --blr-core-color-purple-300-opa10: hsla(260, 50%, 30%, 0.1); + --blr-core-color-purple-300-opa20: hsla(260, 50%, 30%, 0.2); + --blr-core-color-purple-300-opa30: hsla(260, 50%, 30%, 0.3); + --blr-core-color-purple-300-opa40: hsla(260, 50%, 30%, 0.4); + --blr-core-color-purple-300-opa50: hsla(260, 50%, 30%, 0.5); + --blr-core-color-purple-300-opa60: hsla(260, 50%, 30%, 0.6); + --blr-core-color-purple-300-opa70: hsla(260, 50%, 30%, 0.7); + --blr-core-color-purple-300-opa80: hsla(260, 50%, 30%, 0.8); + --blr-core-color-purple-300-opa90: hsla(260, 50%, 30%, 0.9); + --blr-core-color-purple-400-solid: hsla(260, 50%, 40%, 1); + --blr-core-color-purple-400-opa0: hsla(260, 50%, 40%, 0); + --blr-core-color-purple-400-opa10: hsla(260, 50%, 40%, 0.1); + --blr-core-color-purple-400-opa20: hsla(260, 50%, 40%, 0.2); + --blr-core-color-purple-400-opa30: hsla(260, 50%, 40%, 0.3); + --blr-core-color-purple-400-opa40: hsla(260, 50%, 40%, 0.4); + --blr-core-color-purple-400-opa50: hsla(260, 50%, 40%, 0.5); + --blr-core-color-purple-400-opa60: hsla(260, 50%, 40%, 0.6); + --blr-core-color-purple-400-opa70: hsla(260, 50%, 40%, 0.7); + --blr-core-color-purple-400-opa80: hsla(260, 50%, 40%, 0.8); + --blr-core-color-purple-400-opa90: hsla(260, 50%, 40%, 0.9); + --blr-core-color-purple-500-solid: hsla(260, 50%, 50%, 1); + --blr-core-color-purple-500-opa0: hsla(260, 50%, 50%, 0); + --blr-core-color-purple-500-opa10: hsla(260, 50%, 50%, 0.1); + --blr-core-color-purple-500-opa20: hsla(260, 50%, 50%, 0.2); + --blr-core-color-purple-500-opa30: hsla(260, 50%, 50%, 0.3); + --blr-core-color-purple-500-opa40: hsla(260, 50%, 50%, 0.4); + --blr-core-color-purple-500-opa50: hsla(260, 50%, 50%, 0.5); + --blr-core-color-purple-500-opa60: hsla(260, 50%, 50%, 0.6); + --blr-core-color-purple-500-opa70: hsla(260, 50%, 50%, 0.7); + --blr-core-color-purple-500-opa80: hsla(260, 50%, 50%, 0.8); + --blr-core-color-purple-500-opa90: hsla(260, 50%, 50%, 0.9); + --blr-core-color-purple-600-solid: hsla(260, 50%, 60%, 1); + --blr-core-color-purple-600-opa0: hsla(260, 50%, 60%, 0); + --blr-core-color-purple-600-opa10: hsla(260, 50%, 60%, 0.1); + --blr-core-color-purple-600-opa20: hsla(260, 50%, 60%, 0.2); + --blr-core-color-purple-600-opa30: hsla(260, 50%, 60%, 0.3); + --blr-core-color-purple-600-opa40: hsla(260, 50%, 60%, 0.4); + --blr-core-color-purple-600-opa50: hsla(260, 50%, 60%, 0.5); + --blr-core-color-purple-600-opa60: hsla(260, 50%, 60%, 0.6); + --blr-core-color-purple-600-opa70: hsla(260, 50%, 60%, 0.7); + --blr-core-color-purple-600-opa80: hsla(260, 50%, 60%, 0.8); + --blr-core-color-purple-600-opa90: hsla(260, 50%, 60%, 0.9); + --blr-core-color-purple-700-solid: hsla(260, 50%, 70%, 1); + --blr-core-color-purple-700-opa0: hsla(260, 50%, 70%, 0); + --blr-core-color-purple-700-opa10: hsla(260, 50%, 70%, 0.1); + --blr-core-color-purple-700-opa20: hsla(260, 50%, 70%, 0.2); + --blr-core-color-purple-700-opa30: hsla(260, 50%, 70%, 0.3); + --blr-core-color-purple-700-opa40: hsla(260, 50%, 70%, 0.4); + --blr-core-color-purple-700-opa50: hsla(260, 50%, 70%, 0.5); + --blr-core-color-purple-700-opa60: hsla(260, 50%, 70%, 0.6); + --blr-core-color-purple-700-opa70: hsla(260, 50%, 70%, 0.7); + --blr-core-color-purple-700-opa80: hsla(260, 50%, 70%, 0.8); + --blr-core-color-purple-700-opa90: hsla(260, 50%, 70%, 0.9); + --blr-core-color-purple-800-solid: hsla(260, 50%, 80%, 1); + --blr-core-color-purple-800-opa0: hsla(260, 50%, 80%, 0); + --blr-core-color-purple-800-opa10: hsla(260, 50%, 80%, 0.1); + --blr-core-color-purple-800-opa20: hsla(260, 50%, 80%, 0.2); + --blr-core-color-purple-800-opa30: hsla(260, 50%, 80%, 0.3); + --blr-core-color-purple-800-opa40: hsla(260, 50%, 80%, 0.4); + --blr-core-color-purple-800-opa50: hsla(260, 50%, 80%, 0.5); + --blr-core-color-purple-800-opa60: hsla(260, 50%, 80%, 0.6); + --blr-core-color-purple-800-opa70: hsla(260, 50%, 80%, 0.7); + --blr-core-color-purple-800-opa80: hsla(260, 50%, 80%, 0.8); + --blr-core-color-purple-800-opa90: hsla(260, 50%, 80%, 0.9); + --blr-core-color-purple-900-solid: hsla(260, 50%, 90%, 1); + --blr-core-color-purple-900-opa0: hsla(260, 50%, 90%, 0); + --blr-core-color-purple-900-opa10: hsla(260, 50%, 90%, 0.1); + --blr-core-color-purple-900-opa20: hsla(260, 50%, 90%, 0.2); + --blr-core-color-purple-900-opa30: hsla(260, 50%, 90%, 0.3); + --blr-core-color-purple-900-opa40: hsla(260, 50%, 90%, 0.4); + --blr-core-color-purple-900-opa50: hsla(260, 50%, 90%, 0.5); + --blr-core-color-purple-900-opa60: hsla(260, 50%, 90%, 0.6); + --blr-core-color-purple-900-opa70: hsla(260, 50%, 90%, 0.7); + --blr-core-color-purple-900-opa80: hsla(260, 50%, 90%, 0.8); + --blr-core-color-purple-900-opa90: hsla(260, 50%, 90%, 0.9); + --blr-core-color-purple-950-solid: hsla(260, 50%, 95%, 1); + --blr-core-color-purple-950-opa0: hsla(260, 50%, 95%, 0); + --blr-core-color-purple-950-opa10: hsla(260, 50%, 95%, 0.1); + --blr-core-color-purple-950-opa20: hsla(260, 50%, 95%, 0.2); + --blr-core-color-purple-950-opa30: hsla(260, 50%, 95%, 0.3); + --blr-core-color-purple-950-opa40: hsla(260, 50%, 95%, 0.4); + --blr-core-color-purple-950-opa50: hsla(260, 50%, 95%, 0.5); + --blr-core-color-purple-950-opa60: hsla(260, 50%, 95%, 0.6); + --blr-core-color-purple-950-opa70: hsla(260, 50%, 95%, 0.7); + --blr-core-color-purple-950-opa80: hsla(260, 50%, 95%, 0.8); + --blr-core-color-purple-950-opa90: hsla(260, 50%, 95%, 0.9); + --blr-core-color-purple-990-solid: hsla(260, 50%, 99%, 1); + --blr-core-color-purple-990-opa0: hsla(260, 50%, 99%, 0); + --blr-core-color-purple-990-opa10: hsla(260, 50%, 99%, 0.1); + --blr-core-color-purple-990-opa20: hsla(260, 50%, 99%, 0.2); + --blr-core-color-purple-990-opa30: hsla(260, 50%, 99%, 0.3); + --blr-core-color-purple-990-opa40: hsla(260, 50%, 99%, 0.4); + --blr-core-color-purple-990-opa50: hsla(260, 50%, 99%, 0.5); + --blr-core-color-purple-990-opa60: hsla(260, 50%, 99%, 0.6); + --blr-core-color-purple-990-opa70: hsla(260, 50%, 99%, 0.7); + --blr-core-color-purple-990-opa80: hsla(260, 50%, 99%, 0.8); + --blr-core-color-purple-990-opa90: hsla(260, 50%, 99%, 0.9); + --blr-core-color-azure-100-solid: hsla(220, 65%, 10%, 1); + --blr-core-color-azure-100-opa0: hsla(220, 65%, 10%, 0); + --blr-core-color-azure-100-opa10: hsla(220, 65%, 10%, 0.1); + --blr-core-color-azure-100-opa20: hsla(220, 65%, 10%, 0.2); + --blr-core-color-azure-100-opa30: hsla(220, 65%, 10%, 0.3); + --blr-core-color-azure-100-opa40: hsla(220, 65%, 10%, 0.4); + --blr-core-color-azure-100-opa50: hsla(220, 65%, 10%, 0.5); + --blr-core-color-azure-100-opa60: hsla(220, 65%, 10%, 0.6); + --blr-core-color-azure-100-opa70: hsla(220, 65%, 10%, 0.7); + --blr-core-color-azure-100-opa80: hsla(220, 65%, 10%, 0.8); + --blr-core-color-azure-100-opa90: hsla(220, 65%, 10%, 0.9); + --blr-core-color-azure-200-solid: hsla(220, 65%, 20%, 1); + --blr-core-color-azure-200-opa0: hsla(220, 65%, 20%, 0); + --blr-core-color-azure-200-opa10: hsla(220, 65%, 20%, 0.1); + --blr-core-color-azure-200-opa20: hsla(220, 65%, 20%, 0.2); + --blr-core-color-azure-200-opa30: hsla(220, 65%, 20%, 0.3); + --blr-core-color-azure-200-opa40: hsla(220, 65%, 20%, 0.4); + --blr-core-color-azure-200-opa50: hsla(220, 65%, 20%, 0.5); + --blr-core-color-azure-200-opa60: hsla(220, 65%, 20%, 0.6); + --blr-core-color-azure-200-opa70: hsla(220, 65%, 20%, 0.7); + --blr-core-color-azure-200-opa80: hsla(220, 65%, 20%, 0.8); + --blr-core-color-azure-200-opa90: hsla(220, 65%, 20%, 0.9); + --blr-core-color-azure-300-solid: hsla(220, 65%, 30%, 1); + --blr-core-color-azure-300-opa0: hsla(220, 65%, 30%, 0); + --blr-core-color-azure-300-opa10: hsla(220, 65%, 30%, 0.1); + --blr-core-color-azure-300-opa20: hsla(220, 65%, 30%, 0.2); + --blr-core-color-azure-300-opa30: hsla(220, 65%, 30%, 0.3); + --blr-core-color-azure-300-opa40: hsla(220, 65%, 30%, 0.4); + --blr-core-color-azure-300-opa50: hsla(220, 65%, 30%, 0.5); + --blr-core-color-azure-300-opa60: hsla(220, 65%, 30%, 0.6); + --blr-core-color-azure-300-opa70: hsla(220, 65%, 30%, 0.7); + --blr-core-color-azure-300-opa80: hsla(220, 65%, 30%, 0.8); + --blr-core-color-azure-300-opa90: hsla(220, 65%, 30%, 0.9); + --blr-core-color-azure-400-solid: hsla(220, 65%, 40%, 1); + --blr-core-color-azure-400-opa0: hsla(220, 65%, 40%, 0); + --blr-core-color-azure-400-opa10: hsla(220, 65%, 40%, 0.1); + --blr-core-color-azure-400-opa20: hsla(220, 65%, 40%, 0.2); + --blr-core-color-azure-400-opa30: hsla(220, 65%, 40%, 0.3); + --blr-core-color-azure-400-opa40: hsla(220, 65%, 40%, 0.4); + --blr-core-color-azure-400-opa50: hsla(220, 65%, 40%, 0.5); + --blr-core-color-azure-400-opa60: hsla(220, 65%, 40%, 0.6); + --blr-core-color-azure-400-opa70: hsla(220, 65%, 40%, 0.7); + --blr-core-color-azure-400-opa80: hsla(220, 65%, 40%, 0.8); + --blr-core-color-azure-400-opa90: hsla(220, 65%, 40%, 0.9); + --blr-core-color-azure-500-solid: hsla(220, 65%, 50%, 1); + --blr-core-color-azure-500-opa0: hsla(220, 65%, 50%, 0); + --blr-core-color-azure-500-opa10: hsla(220, 65%, 50%, 0.1); + --blr-core-color-azure-500-opa20: hsla(220, 65%, 50%, 0.2); + --blr-core-color-azure-500-opa30: hsla(220, 65%, 50%, 0.3); + --blr-core-color-azure-500-opa40: hsla(220, 65%, 50%, 0.4); + --blr-core-color-azure-500-opa50: hsla(220, 65%, 50%, 0.5); + --blr-core-color-azure-500-opa60: hsla(220, 65%, 50%, 0.6); + --blr-core-color-azure-500-opa70: hsla(220, 65%, 50%, 0.7); + --blr-core-color-azure-500-opa80: hsla(220, 65%, 50%, 0.8); + --blr-core-color-azure-500-opa90: hsla(220, 65%, 50%, 0.9); + --blr-core-color-azure-600-solid: hsla(220, 65%, 60%, 1); + --blr-core-color-azure-600-opa0: hsla(220, 65%, 60%, 0); + --blr-core-color-azure-600-opa10: hsla(220, 65%, 60%, 0.1); + --blr-core-color-azure-600-opa20: hsla(220, 65%, 60%, 0.2); + --blr-core-color-azure-600-opa30: hsla(220, 65%, 60%, 0.3); + --blr-core-color-azure-600-opa40: hsla(220, 65%, 60%, 0.4); + --blr-core-color-azure-600-opa50: hsla(220, 65%, 60%, 0.5); + --blr-core-color-azure-600-opa60: hsla(220, 65%, 60%, 0.6); + --blr-core-color-azure-600-opa70: hsla(220, 65%, 60%, 0.7); + --blr-core-color-azure-600-opa80: hsla(220, 65%, 60%, 0.8); + --blr-core-color-azure-600-opa90: hsla(220, 65%, 60%, 0.9); + --blr-core-color-azure-700-solid: hsla(220, 65%, 70%, 1); + --blr-core-color-azure-700-opa0: hsla(220, 65%, 70%, 0); + --blr-core-color-azure-700-opa10: hsla(220, 65%, 70%, 0.1); + --blr-core-color-azure-700-opa20: hsla(220, 65%, 70%, 0.2); + --blr-core-color-azure-700-opa30: hsla(220, 65%, 70%, 0.3); + --blr-core-color-azure-700-opa40: hsla(220, 65%, 70%, 0.4); + --blr-core-color-azure-700-opa50: hsla(220, 65%, 70%, 0.5); + --blr-core-color-azure-700-opa60: hsla(220, 65%, 70%, 0.6); + --blr-core-color-azure-700-opa70: hsla(220, 65%, 70%, 0.7); + --blr-core-color-azure-700-opa80: hsla(220, 65%, 70%, 0.8); + --blr-core-color-azure-700-opa90: hsla(220, 65%, 70%, 0.9); + --blr-core-color-azure-800-solid: hsla(220, 65%, 80%, 1); + --blr-core-color-azure-800-opa0: hsla(220, 65%, 80%, 0); + --blr-core-color-azure-800-opa10: hsla(220, 65%, 80%, 0.1); + --blr-core-color-azure-800-opa20: hsla(220, 65%, 80%, 0.2); + --blr-core-color-azure-800-opa30: hsla(220, 65%, 80%, 0.3); + --blr-core-color-azure-800-opa40: hsla(220, 65%, 80%, 0.4); + --blr-core-color-azure-800-opa50: hsla(220, 65%, 80%, 0.5); + --blr-core-color-azure-800-opa60: hsla(220, 65%, 80%, 0.6); + --blr-core-color-azure-800-opa70: hsla(220, 65%, 80%, 0.7); + --blr-core-color-azure-800-opa80: hsla(220, 65%, 80%, 0.8); + --blr-core-color-azure-800-opa90: hsla(220, 65%, 80%, 0.9); + --blr-core-color-azure-900-solid: hsla(220, 65%, 90%, 1); + --blr-core-color-azure-900-opa0: hsla(220, 65%, 90%, 0); + --blr-core-color-azure-900-opa10: hsla(220, 65%, 90%, 0.1); + --blr-core-color-azure-900-opa20: hsla(220, 65%, 90%, 0.2); + --blr-core-color-azure-900-opa30: hsla(220, 65%, 90%, 0.3); + --blr-core-color-azure-900-opa40: hsla(220, 65%, 90%, 0.4); + --blr-core-color-azure-900-opa50: hsla(220, 65%, 90%, 0.5); + --blr-core-color-azure-900-opa60: hsla(220, 65%, 90%, 0.6); + --blr-core-color-azure-900-opa70: hsla(220, 65%, 90%, 0.7); + --blr-core-color-azure-900-opa80: hsla(220, 65%, 90%, 0.8); + --blr-core-color-azure-900-opa90: hsla(220, 65%, 90%, 0.9); + --blr-core-color-azure-950-solid: hsla(220, 65%, 95%, 1); + --blr-core-color-azure-950-opa0: hsla(220, 10%, 95%, 0); + --blr-core-color-azure-950-opa10: hsla(220, 10%, 95%, 0.1); + --blr-core-color-azure-950-opa20: hsla(220, 10%, 95%, 0.2); + --blr-core-color-azure-950-opa30: hsla(220, 10%, 95%, 0.3); + --blr-core-color-azure-950-opa40: hsla(220, 10%, 95%, 0.4); + --blr-core-color-azure-950-opa50: hsla(220, 10%, 95%, 0.5); + --blr-core-color-azure-950-opa60: hsla(220, 10%, 95%, 0.6); + --blr-core-color-azure-950-opa70: hsla(220, 10%, 95%, 0.7); + --blr-core-color-azure-950-opa80: hsla(220, 10%, 95%, 0.8); + --blr-core-color-azure-950-opa90: hsla(220, 10%, 95%, 0.9); + --blr-core-color-azure-999-solid: hsla(220, 65%, 99%, 1); + --blr-core-color-azure-999-opa0: hsla(220, 10%, 99%, 0); + --blr-core-color-azure-999-opa10: hsla(220, 10%, 99%, 0.1); + --blr-core-color-azure-999-opa20: hsla(220, 10%, 99%, 0.2); + --blr-core-color-azure-999-opa30: hsla(220, 10%, 99%, 0.3); + --blr-core-color-azure-999-opa40: hsla(220, 10%, 99%, 0.4); + --blr-core-color-azure-999-opa50: hsla(220, 10%, 99%, 0.5); + --blr-core-color-azure-999-opa60: hsla(220, 10%, 99%, 0.6); + --blr-core-color-azure-999-opa70: hsla(220, 10%, 99%, 0.7); + --blr-core-color-azure-999-opa80: hsla(220, 10%, 99%, 0.8); + --blr-core-color-azure-999-opa90: hsla(220, 10%, 99%, 0.9); + --blr-core-color-coolgray-100-solid: hsla(220, 10%, 10%, 1); + --blr-core-color-coolgray-100-opa0: hsla(220, 10%, 10%, 0); + --blr-core-color-coolgray-100-opa10: hsla(220, 10%, 10%, 0.1); + --blr-core-color-coolgray-100-opa20: hsla(220, 10%, 10%, 0.2); + --blr-core-color-coolgray-100-opa30: hsla(220, 10%, 10%, 0.3); + --blr-core-color-coolgray-100-opa40: hsla(220, 10%, 10%, 0.4); + --blr-core-color-coolgray-100-opa50: hsla(220, 10%, 10%, 0.5); + --blr-core-color-coolgray-100-opa60: hsla(220, 10%, 10%, 0.6); + --blr-core-color-coolgray-100-opa70: hsla(220, 10%, 10%, 0.7); + --blr-core-color-coolgray-100-opa80: hsla(220, 10%, 10%, 0.8); + --blr-core-color-coolgray-100-opa90: hsla(220, 10%, 10%, 0.9); + --blr-core-color-coolgray-200-solid: hsla(220, 10%, 20%, 1); + --blr-core-color-coolgray-200-opa0: hsla(220, 10%, 20%, 0); + --blr-core-color-coolgray-200-opa10: hsla(220, 10%, 20%, 0.1); + --blr-core-color-coolgray-200-opa20: hsla(220, 10%, 20%, 0.2); + --blr-core-color-coolgray-200-opa30: hsla(220, 10%, 20%, 0.3); + --blr-core-color-coolgray-200-opa40: hsla(220, 10%, 20%, 0.4); + --blr-core-color-coolgray-200-opa50: hsla(220, 10%, 20%, 0.5); + --blr-core-color-coolgray-200-opa60: hsla(220, 10%, 20%, 0.6); + --blr-core-color-coolgray-200-opa70: hsla(220, 10%, 20%, 0.7); + --blr-core-color-coolgray-200-opa80: hsla(220, 10%, 20%, 0.8); + --blr-core-color-coolgray-200-opa90: hsla(220, 10%, 20%, 0.9); + --blr-core-color-coolgray-300-solid: hsla(220, 10%, 30%, 1); + --blr-core-color-coolgray-300-opa0: hsla(220, 10%, 30%, 0); + --blr-core-color-coolgray-300-opa10: hsla(220, 10%, 30%, 0.1); + --blr-core-color-coolgray-300-opa20: hsla(220, 10%, 30%, 0.2); + --blr-core-color-coolgray-300-opa30: hsla(220, 10%, 30%, 0.3); + --blr-core-color-coolgray-300-opa40: hsla(220, 10%, 30%, 0.4); + --blr-core-color-coolgray-300-opa50: hsla(220, 10%, 30%, 0.5); + --blr-core-color-coolgray-300-opa60: hsla(220, 10%, 30%, 0.6); + --blr-core-color-coolgray-300-opa70: hsla(220, 10%, 30%, 0.7); + --blr-core-color-coolgray-300-opa80: hsla(220, 10%, 30%, 0.8); + --blr-core-color-coolgray-300-opa90: hsla(220, 10%, 30%, 0.9); + --blr-core-color-coolgray-400-solid: hsla(220, 10%, 40%, 1); + --blr-core-color-coolgray-400-opa0: hsla(220, 10%, 40%, 0); + --blr-core-color-coolgray-400-opa10: hsla(220, 10%, 40%, 0.1); + --blr-core-color-coolgray-400-opa20: hsla(220, 10%, 40%, 0.2); + --blr-core-color-coolgray-400-opa30: hsla(220, 10%, 40%, 0.3); + --blr-core-color-coolgray-400-opa40: hsla(220, 10%, 40%, 0.4); + --blr-core-color-coolgray-400-opa50: hsla(220, 10%, 40%, 0.5); + --blr-core-color-coolgray-400-opa60: hsla(220, 10%, 40%, 0.6); + --blr-core-color-coolgray-400-opa70: hsla(220, 10%, 40%, 0.7); + --blr-core-color-coolgray-400-opa80: hsla(220, 10%, 40%, 0.8); + --blr-core-color-coolgray-400-opa90: hsla(220, 10%, 40%, 0.9); + --blr-core-color-coolgray-500-solid: hsla(220, 10%, 50%, 1); + --blr-core-color-coolgray-500-opa0: hsla(220, 10%, 50%, 0); + --blr-core-color-coolgray-500-opa10: hsla(220, 10%, 50%, 0.1); + --blr-core-color-coolgray-500-opa20: hsla(220, 10%, 50%, 0.2); + --blr-core-color-coolgray-500-opa30: hsla(220, 10%, 50%, 0.3); + --blr-core-color-coolgray-500-opa40: hsla(220, 10%, 50%, 0.4); + --blr-core-color-coolgray-500-opa50: hsla(220, 10%, 50%, 0.5); + --blr-core-color-coolgray-500-opa60: hsla(220, 10%, 50%, 0.6); + --blr-core-color-coolgray-500-opa70: hsla(220, 10%, 50%, 0.7); + --blr-core-color-coolgray-500-opa80: hsla(220, 10%, 50%, 0.8); + --blr-core-color-coolgray-500-opa90: hsla(220, 10%, 50%, 0.9); + --blr-core-color-coolgray-600-solid: hsla(220, 10%, 60%, 1); + --blr-core-color-coolgray-600-opa0: hsla(220, 10%, 60%, 0); + --blr-core-color-coolgray-600-opa10: hsla(220, 10%, 60%, 0.1); + --blr-core-color-coolgray-600-opa20: hsla(220, 10%, 60%, 0.2); + --blr-core-color-coolgray-600-opa30: hsla(220, 10%, 60%, 0.3); + --blr-core-color-coolgray-600-opa40: hsla(220, 10%, 60%, 0.4); + --blr-core-color-coolgray-600-opa50: hsla(220, 10%, 60%, 0.5); + --blr-core-color-coolgray-600-opa60: hsla(220, 10%, 60%, 0.6); + --blr-core-color-coolgray-600-opa70: hsla(220, 10%, 60%, 0.7); + --blr-core-color-coolgray-600-opa80: hsla(220, 10%, 60%, 0.8); + --blr-core-color-coolgray-600-opa90: hsla(220, 10%, 60%, 0.9); + --blr-core-color-coolgray-700-solid: hsla(220, 10%, 70%, 1); + --blr-core-color-coolgray-700-opa0: hsla(220, 10%, 70%, 0); + --blr-core-color-coolgray-700-opa10: hsla(220, 10%, 70%, 0.1); + --blr-core-color-coolgray-700-opa20: hsla(220, 10%, 70%, 0.2); + --blr-core-color-coolgray-700-opa30: hsla(220, 10%, 70%, 0.3); + --blr-core-color-coolgray-700-opa40: hsla(220, 10%, 70%, 0.4); + --blr-core-color-coolgray-700-opa50: hsla(220, 10%, 70%, 0.5); + --blr-core-color-coolgray-700-opa60: hsla(220, 10%, 70%, 0.6); + --blr-core-color-coolgray-700-opa70: hsla(220, 10%, 70%, 0.7); + --blr-core-color-coolgray-700-opa80: hsla(220, 10%, 70%, 0.8); + --blr-core-color-coolgray-700-opa90: hsla(220, 10%, 70%, 0.9); + --blr-core-color-coolgray-800-solid: hsla(220, 10%, 80%, 1); + --blr-core-color-coolgray-800-opa0: hsla(220, 10%, 80%, 0); + --blr-core-color-coolgray-800-opa10: hsla(220, 10%, 80%, 0.1); + --blr-core-color-coolgray-800-opa20: hsla(220, 10%, 80%, 0.2); + --blr-core-color-coolgray-800-opa30: hsla(220, 10%, 80%, 0.3); + --blr-core-color-coolgray-800-opa40: hsla(220, 10%, 80%, 0.4); + --blr-core-color-coolgray-800-opa50: hsla(220, 10%, 80%, 0.5); + --blr-core-color-coolgray-800-opa60: hsla(220, 10%, 80%, 0.6); + --blr-core-color-coolgray-800-opa70: hsla(220, 10%, 80%, 0.7); + --blr-core-color-coolgray-800-opa80: hsla(220, 10%, 80%, 0.8); + --blr-core-color-coolgray-800-opa90: hsla(220, 10%, 80%, 0.9); + --blr-core-color-coolgray-900-solid: hsla(220, 10%, 90%, 1); + --blr-core-color-coolgray-900-opa0: hsla(220, 10%, 90%, 0); + --blr-core-color-coolgray-900-opa10: hsla(220, 10%, 90%, 0.1); + --blr-core-color-coolgray-900-opa20: hsla(220, 10%, 90%, 0.2); + --blr-core-color-coolgray-900-opa30: hsla(220, 10%, 90%, 0.3); + --blr-core-color-coolgray-900-opa40: hsla(220, 10%, 90%, 0.4); + --blr-core-color-coolgray-900-opa50: hsla(220, 10%, 90%, 0.5); + --blr-core-color-coolgray-900-opa60: hsla(220, 10%, 90%, 0.6); + --blr-core-color-coolgray-900-opa70: hsla(220, 10%, 90%, 0.7); + --blr-core-color-coolgray-900-opa80: hsla(220, 10%, 90%, 0.8); + --blr-core-color-coolgray-900-opa90: hsla(220, 10%, 90%, 0.9); + --blr-core-color-coolgray-950-solid: hsla(220, 10%, 95%, 1); + --blr-core-color-coolgray-950-opa0: hsla(220, 10%, 95%, 0); + --blr-core-color-coolgray-950-opa10: hsla(220, 10%, 95%, 0.1); + --blr-core-color-coolgray-950-opa20: hsla(220, 10%, 95%, 0.2); + --blr-core-color-coolgray-950-opa30: hsla(220, 10%, 95%, 0.3); + --blr-core-color-coolgray-950-opa40: hsla(220, 10%, 95%, 0.4); + --blr-core-color-coolgray-950-opa50: hsla(220, 10%, 95%, 0.5); + --blr-core-color-coolgray-950-opa60: hsla(220, 10%, 95%, 0.6); + --blr-core-color-coolgray-950-opa70: hsla(220, 10%, 95%, 0.7); + --blr-core-color-coolgray-950-opa80: hsla(220, 10%, 95%, 0.8); + --blr-core-color-coolgray-950-opa90: hsla(220, 10%, 95%, 0.9); + --blr-core-color-coolgray-999-solid: hsla(220, 10%, 99%, 1); + --blr-core-color-coolgray-999-opa0: hsla(220, 10%, 99%, 0); + --blr-core-color-coolgray-999-opa10: hsla(220, 10%, 99%, 0.1); + --blr-core-color-coolgray-999-opa20: hsla(220, 10%, 99%, 0.2); + --blr-core-color-coolgray-999-opa30: hsla(220, 10%, 99%, 0.3); + --blr-core-color-coolgray-999-opa40: hsla(220, 10%, 99%, 0.4); + --blr-core-color-coolgray-999-opa50: hsla(220, 10%, 99%, 0.5); + --blr-core-color-coolgray-999-opa60: hsla(220, 10%, 99%, 0.6); + --blr-core-color-coolgray-999-opa70: hsla(220, 10%, 99%, 0.7); + --blr-core-color-coolgray-999-opa80: hsla(220, 10%, 99%, 0.8); + --blr-core-color-coolgray-999-opa90: hsla(220, 10%, 99%, 0.9); + --blr-core-color-limegreen-100-solid: hsla(100, 65%, 10%, 1); + --blr-core-color-limegreen-100-opa0: hsla(100, 65%, 10%, 0); + --blr-core-color-limegreen-100-opa10: hsla(100, 65%, 10%, 0.1); + --blr-core-color-limegreen-100-opa20: hsla(100, 65%, 10%, 0.2); + --blr-core-color-limegreen-100-opa30: hsla(100, 65%, 10%, 0.3); + --blr-core-color-limegreen-100-opa40: hsla(100, 65%, 10%, 0.4); + --blr-core-color-limegreen-100-opa50: hsla(100, 65%, 10%, 0.5); + --blr-core-color-limegreen-100-opa60: hsla(100, 65%, 10%, 0.6); + --blr-core-color-limegreen-100-opa70: hsla(100, 65%, 10%, 0.7); + --blr-core-color-limegreen-100-opa80: hsla(100, 65%, 10%, 0.8); + --blr-core-color-limegreen-100-opa90: hsla(100, 65%, 10%, 0.9); + --blr-core-color-limegreen-200-solid: hsla(100, 65%, 20%, 1); + --blr-core-color-limegreen-200-opa0: hsla(100, 65%, 20%, 0); + --blr-core-color-limegreen-200-opa10: hsla(100, 65%, 20%, 0.1); + --blr-core-color-limegreen-200-opa20: hsla(100, 65%, 20%, 0.2); + --blr-core-color-limegreen-200-opa30: hsla(100, 65%, 20%, 0.3); + --blr-core-color-limegreen-200-opa40: hsla(100, 65%, 20%, 0.4); + --blr-core-color-limegreen-200-opa50: hsla(100, 65%, 20%, 0.5); + --blr-core-color-limegreen-200-opa60: hsla(100, 65%, 20%, 0.6); + --blr-core-color-limegreen-200-opa70: hsla(100, 65%, 20%, 0.7); + --blr-core-color-limegreen-200-opa80: hsla(100, 65%, 20%, 0.8); + --blr-core-color-limegreen-200-opa90: hsla(100, 65%, 20%, 0.9); + --blr-core-color-limegreen-300-solid: hsla(100, 65%, 30%, 1); + --blr-core-color-limegreen-300-opa0: hsla(100, 65%, 30%, 0); + --blr-core-color-limegreen-300-opa10: hsla(100, 65%, 30%, 0.1); + --blr-core-color-limegreen-300-opa20: hsla(100, 65%, 30%, 0.2); + --blr-core-color-limegreen-300-opa30: hsla(100, 65%, 30%, 0.3); + --blr-core-color-limegreen-300-opa40: hsla(100, 65%, 30%, 0.4); + --blr-core-color-limegreen-300-opa50: hsla(100, 65%, 30%, 0.5); + --blr-core-color-limegreen-300-opa60: hsla(100, 65%, 30%, 0.6); + --blr-core-color-limegreen-300-opa70: hsla(100, 65%, 30%, 0.7); + --blr-core-color-limegreen-300-opa80: hsla(100, 65%, 30%, 0.8); + --blr-core-color-limegreen-300-opa90: hsla(100, 65%, 30%, 0.9); + --blr-core-color-limegreen-400-solid: hsla(100, 65%, 40%, 1); + --blr-core-color-limegreen-400-opa0: hsla(100, 65%, 40%, 0); + --blr-core-color-limegreen-400-opa10: hsla(100, 65%, 40%, 0.1); + --blr-core-color-limegreen-400-opa20: hsla(100, 65%, 40%, 0.2); + --blr-core-color-limegreen-400-opa30: hsla(100, 65%, 40%, 0.3); + --blr-core-color-limegreen-400-opa40: hsla(100, 65%, 40%, 0.4); + --blr-core-color-limegreen-400-opa50: hsla(100, 65%, 40%, 0.5); + --blr-core-color-limegreen-400-opa60: hsla(100, 65%, 40%, 0.6); + --blr-core-color-limegreen-400-opa70: hsla(100, 65%, 40%, 0.7); + --blr-core-color-limegreen-400-opa80: hsla(100, 65%, 40%, 0.8); + --blr-core-color-limegreen-400-opa90: hsla(100, 65%, 40%, 0.9); + --blr-core-color-limegreen-500-solid: hsla(100, 65%, 50%, 1); + --blr-core-color-limegreen-500-opa0: hsla(100, 65%, 50%, 0); + --blr-core-color-limegreen-500-opa10: hsla(100, 65%, 50%, 0.1); + --blr-core-color-limegreen-500-opa20: hsla(100, 65%, 50%, 0.2); + --blr-core-color-limegreen-500-opa30: hsla(100, 65%, 50%, 0.3); + --blr-core-color-limegreen-500-opa40: hsla(100, 65%, 50%, 0.4); + --blr-core-color-limegreen-500-opa50: hsla(100, 65%, 50%, 0.5); + --blr-core-color-limegreen-500-opa60: hsla(100, 65%, 50%, 0.6); + --blr-core-color-limegreen-500-opa70: hsla(100, 65%, 50%, 0.7); + --blr-core-color-limegreen-500-opa80: hsla(100, 65%, 50%, 0.8); + --blr-core-color-limegreen-500-opa90: hsla(100, 65%, 50%, 0.9); + --blr-core-color-limegreen-600-solid: hsla(100, 65%, 60%, 1); + --blr-core-color-limegreen-600-opa0: hsla(100, 65%, 60%, 0); + --blr-core-color-limegreen-600-opa10: hsla(100, 65%, 60%, 0.1); + --blr-core-color-limegreen-600-opa20: hsla(100, 65%, 60%, 0.2); + --blr-core-color-limegreen-600-opa30: hsla(100, 65%, 60%, 0.3); + --blr-core-color-limegreen-600-opa40: hsla(100, 65%, 60%, 0.4); + --blr-core-color-limegreen-600-opa50: hsla(100, 65%, 60%, 0.5); + --blr-core-color-limegreen-600-opa60: hsla(100, 65%, 60%, 0.6); + --blr-core-color-limegreen-600-opa70: hsla(100, 65%, 60%, 0.7); + --blr-core-color-limegreen-600-opa80: hsla(100, 65%, 60%, 0.8); + --blr-core-color-limegreen-600-opa90: hsla(100, 65%, 60%, 0.9); + --blr-core-color-limegreen-700-solid: hsla(100, 65%, 70%, 1); + --blr-core-color-limegreen-700-opa0: hsla(100, 65%, 70%, 0); + --blr-core-color-limegreen-700-opa10: hsla(100, 65%, 70%, 0.1); + --blr-core-color-limegreen-700-opa20: hsla(100, 65%, 70%, 0.2); + --blr-core-color-limegreen-700-opa30: hsla(100, 65%, 70%, 0.3); + --blr-core-color-limegreen-700-opa40: hsla(100, 65%, 70%, 0.4); + --blr-core-color-limegreen-700-opa50: hsla(100, 65%, 70%, 0.5); + --blr-core-color-limegreen-700-opa60: hsla(100, 65%, 70%, 0.6); + --blr-core-color-limegreen-700-opa70: hsla(100, 65%, 70%, 0.7); + --blr-core-color-limegreen-700-opa80: hsla(100, 65%, 70%, 0.8); + --blr-core-color-limegreen-700-opa90: hsla(100, 65%, 70%, 0.9); + --blr-core-color-limegreen-800-solid: hsla(100, 65%, 80%, 1); + --blr-core-color-limegreen-800-opa0: hsla(100, 65%, 80%, 0); + --blr-core-color-limegreen-800-opa10: hsla(100, 65%, 80%, 0.1); + --blr-core-color-limegreen-800-opa20: hsla(100, 65%, 80%, 0.2); + --blr-core-color-limegreen-800-opa30: hsla(100, 65%, 80%, 0.3); + --blr-core-color-limegreen-800-opa40: hsla(100, 65%, 80%, 0.4); + --blr-core-color-limegreen-800-opa50: hsla(100, 65%, 80%, 0.5); + --blr-core-color-limegreen-800-opa60: hsla(100, 65%, 80%, 0.6); + --blr-core-color-limegreen-800-opa70: hsla(100, 65%, 80%, 0.7); + --blr-core-color-limegreen-800-opa80: hsla(100, 65%, 80%, 0.8); + --blr-core-color-limegreen-800-opa90: hsla(100, 65%, 80%, 0.9); + --blr-core-color-limegreen-900-solid: hsla(100, 65%, 90%, 1); + --blr-core-color-limegreen-900-opa0: hsla(100, 65%, 90%, 0); + --blr-core-color-limegreen-900-opa10: hsla(100, 65%, 90%, 0.1); + --blr-core-color-limegreen-900-opa20: hsla(100, 65%, 90%, 0.2); + --blr-core-color-limegreen-900-opa30: hsla(100, 65%, 90%, 0.3); + --blr-core-color-limegreen-900-opa40: hsla(100, 65%, 90%, 0.4); + --blr-core-color-limegreen-900-opa50: hsla(100, 65%, 90%, 0.5); + --blr-core-color-limegreen-900-opa60: hsla(100, 65%, 90%, 0.6); + --blr-core-color-limegreen-900-opa70: hsla(100, 65%, 90%, 0.7); + --blr-core-color-limegreen-900-opa80: hsla(100, 65%, 90%, 0.8); + --blr-core-color-limegreen-900-opa90: hsla(100, 65%, 90%, 0.9); + --blr-core-color-limegreen-950-solid: hsla(100, 65%, 95%, 1); + --blr-core-color-limegreen-950-opa0: hsla(100, 65%, 95%, 0); + --blr-core-color-limegreen-950-opa10: hsla(100, 65%, 95%, 0.1); + --blr-core-color-limegreen-950-opa20: hsla(100, 65%, 95%, 0.2); + --blr-core-color-limegreen-950-opa30: hsla(100, 65%, 95%, 0.3); + --blr-core-color-limegreen-950-opa40: hsla(100, 65%, 95%, 0.4); + --blr-core-color-limegreen-950-opa50: hsla(100, 65%, 95%, 0.5); + --blr-core-color-limegreen-950-opa60: hsla(100, 65%, 95%, 0.6); + --blr-core-color-limegreen-950-opa70: hsla(100, 65%, 95%, 0.7); + --blr-core-color-limegreen-950-opa80: hsla(100, 65%, 95%, 0.8); + --blr-core-color-limegreen-950-opa90: hsla(100, 65%, 95%, 0.9); + --blr-core-color-limegreen-999-solid: hsla(100, 65%, 99%, 1); + --blr-core-color-limegreen-999-opa0: hsla(100, 65%, 99%, 0); + --blr-core-color-limegreen-999-opa10: hsla(100, 65%, 99%, 0.1); + --blr-core-color-limegreen-999-opa20: hsla(100, 65%, 99%, 0.2); + --blr-core-color-limegreen-999-opa30: hsla(100, 65%, 99%, 0.3); + --blr-core-color-limegreen-999-opa40: hsla(100, 65%, 99%, 0.4); + --blr-core-color-limegreen-999-opa50: hsla(100, 65%, 99%, 0.5); + --blr-core-color-limegreen-999-opa60: hsla(100, 65%, 99%, 0.6); + --blr-core-color-limegreen-999-opa70: hsla(100, 65%, 99%, 0.7); + --blr-core-color-limegreen-999-opa80: hsla(100, 65%, 99%, 0.8); + --blr-core-color-limegreen-999-opa90: hsla(100, 65%, 99%, 0.9); + --blr-core-color-gold-100-solid: hsla(50, 80%, 10%, 1); + --blr-core-color-gold-100-opa0: hsla(50, 80%, 10%, 0); + --blr-core-color-gold-100-opa10: hsla(50, 80%, 10%, 0.1); + --blr-core-color-gold-100-opa20: hsla(50, 80%, 10%, 0.2); + --blr-core-color-gold-100-opa30: hsla(50, 80%, 10%, 0.3); + --blr-core-color-gold-100-opa40: hsla(50, 80%, 10%, 0.4); + --blr-core-color-gold-100-opa50: hsla(50, 80%, 10%, 0.5); + --blr-core-color-gold-100-opa60: hsla(50, 80%, 10%, 0.6); + --blr-core-color-gold-100-opa70: hsla(50, 80%, 10%, 0.7); + --blr-core-color-gold-100-opa80: hsla(50, 80%, 10%, 0.8); + --blr-core-color-gold-100-opa90: hsla(50, 80%, 10%, 0.9); + --blr-core-color-gold-200-solid: hsla(50, 80%, 20%, 1); + --blr-core-color-gold-200-opa0: hsla(50, 80%, 20%, 0); + --blr-core-color-gold-200-opa10: hsla(50, 80%, 20%, 0.1); + --blr-core-color-gold-200-opa20: hsla(50, 80%, 20%, 0.2); + --blr-core-color-gold-200-opa30: hsla(50, 80%, 20%, 0.3); + --blr-core-color-gold-200-opa40: hsla(50, 80%, 20%, 0.4); + --blr-core-color-gold-200-opa50: hsla(50, 80%, 20%, 0.5); + --blr-core-color-gold-200-opa60: hsla(50, 80%, 20%, 0.6); + --blr-core-color-gold-200-opa70: hsla(50, 80%, 20%, 0.7); + --blr-core-color-gold-200-opa80: hsla(50, 80%, 20%, 0.8); + --blr-core-color-gold-200-opa90: hsla(50, 80%, 20%, 0.9); + --blr-core-color-gold-300-solid: hsla(50, 80%, 30%, 1); + --blr-core-color-gold-300-opa0: hsla(50, 80%, 30%, 0); + --blr-core-color-gold-300-opa10: hsla(50, 80%, 30%, 0.1); + --blr-core-color-gold-300-opa20: hsla(50, 80%, 30%, 0.2); + --blr-core-color-gold-300-opa30: hsla(50, 80%, 30%, 0.3); + --blr-core-color-gold-300-opa40: hsla(50, 80%, 30%, 0.4); + --blr-core-color-gold-300-opa50: hsla(50, 80%, 30%, 0.5); + --blr-core-color-gold-300-opa60: hsla(50, 80%, 30%, 0.6); + --blr-core-color-gold-300-opa70: hsla(50, 80%, 30%, 0.7); + --blr-core-color-gold-300-opa80: hsla(50, 80%, 30%, 0.8); + --blr-core-color-gold-300-opa90: hsla(50, 80%, 30%, 0.9); + --blr-core-color-gold-400-solid: hsla(50, 80%, 40%, 1); + --blr-core-color-gold-400-opa0: hsla(50, 80%, 40%, 0); + --blr-core-color-gold-400-opa10: hsla(50, 80%, 40%, 0.1); + --blr-core-color-gold-400-opa20: hsla(50, 80%, 40%, 0.2); + --blr-core-color-gold-400-opa30: hsla(50, 80%, 40%, 0.3); + --blr-core-color-gold-400-opa40: hsla(50, 80%, 40%, 0.4); + --blr-core-color-gold-400-opa50: hsla(50, 80%, 40%, 0.5); + --blr-core-color-gold-400-opa60: hsla(50, 80%, 40%, 0.6); + --blr-core-color-gold-400-opa70: hsla(50, 80%, 40%, 0.7); + --blr-core-color-gold-400-opa80: hsla(50, 80%, 40%, 0.8); + --blr-core-color-gold-400-opa90: hsla(50, 80%, 40%, 0.9); + --blr-core-color-gold-500-solid: hsla(50, 80%, 50%, 1); + --blr-core-color-gold-500-opa0: hsla(50, 80%, 50%, 0); + --blr-core-color-gold-500-opa10: hsla(50, 80%, 50%, 0.1); + --blr-core-color-gold-500-opa20: hsla(50, 80%, 50%, 0.2); + --blr-core-color-gold-500-opa30: hsla(50, 80%, 50%, 0.3); + --blr-core-color-gold-500-opa40: hsla(50, 80%, 50%, 0.4); + --blr-core-color-gold-500-opa50: hsla(50, 80%, 50%, 0.5); + --blr-core-color-gold-500-opa60: hsla(50, 80%, 50%, 0.6); + --blr-core-color-gold-500-opa70: hsla(50, 80%, 50%, 0.7); + --blr-core-color-gold-500-opa80: hsla(50, 80%, 50%, 0.8); + --blr-core-color-gold-500-opa90: hsla(50, 80%, 50%, 0.9); + --blr-core-color-gold-600-solid: hsla(50, 80%, 60%, 1); + --blr-core-color-gold-600-opa0: hsla(50, 80%, 60%, 0); + --blr-core-color-gold-600-opa10: hsla(50, 80%, 60%, 0.1); + --blr-core-color-gold-600-opa20: hsla(50, 80%, 60%, 0.2); + --blr-core-color-gold-600-opa30: hsla(50, 80%, 60%, 0.3); + --blr-core-color-gold-600-opa40: hsla(50, 80%, 60%, 0.4); + --blr-core-color-gold-600-opa50: hsla(50, 80%, 60%, 0.5); + --blr-core-color-gold-600-opa60: hsla(50, 80%, 60%, 0.6); + --blr-core-color-gold-600-opa70: hsla(50, 80%, 60%, 0.7); + --blr-core-color-gold-600-opa80: hsla(50, 80%, 60%, 0.8); + --blr-core-color-gold-600-opa90: hsla(50, 80%, 60%, 0.9); + --blr-core-color-gold-700-solid: hsla(50, 80%, 70%, 1); + --blr-core-color-gold-700-opa0: hsla(50, 80%, 70%, 0); + --blr-core-color-gold-700-opa10: hsla(50, 80%, 70%, 0.1); + --blr-core-color-gold-700-opa20: hsla(50, 80%, 70%, 0.2); + --blr-core-color-gold-700-opa30: hsla(50, 80%, 70%, 0.3); + --blr-core-color-gold-700-opa40: hsla(50, 80%, 70%, 0.4); + --blr-core-color-gold-700-opa50: hsla(50, 80%, 70%, 0.5); + --blr-core-color-gold-700-opa60: hsla(50, 80%, 70%, 0.6); + --blr-core-color-gold-700-opa70: hsla(50, 80%, 70%, 0.7); + --blr-core-color-gold-700-opa80: hsla(50, 80%, 70%, 0.8); + --blr-core-color-gold-700-opa90: hsla(50, 80%, 70%, 0.9); + --blr-core-color-gold-800-solid: hsla(50, 80%, 80%, 1); + --blr-core-color-gold-800-opa0: hsla(50, 80%, 80%, 0); + --blr-core-color-gold-800-opa10: hsla(50, 80%, 80%, 0.1); + --blr-core-color-gold-800-opa20: hsla(50, 80%, 80%, 0.2); + --blr-core-color-gold-800-opa30: hsla(50, 80%, 80%, 0.3); + --blr-core-color-gold-800-opa40: hsla(50, 80%, 80%, 0.4); + --blr-core-color-gold-800-opa50: hsla(50, 80%, 80%, 0.5); + --blr-core-color-gold-800-opa60: hsla(50, 80%, 80%, 0.6); + --blr-core-color-gold-800-opa70: hsla(50, 80%, 80%, 0.7); + --blr-core-color-gold-800-opa80: hsla(50, 80%, 80%, 0.8); + --blr-core-color-gold-800-opa90: hsla(50, 80%, 80%, 0.9); + --blr-core-color-gold-900-solid: hsla(50, 80%, 90%, 1); + --blr-core-color-gold-900-opa0: hsla(50, 80%, 90%, 0); + --blr-core-color-gold-900-opa10: hsla(50, 80%, 90%, 0.1); + --blr-core-color-gold-900-opa20: hsla(50, 80%, 90%, 0.2); + --blr-core-color-gold-900-opa30: hsla(50, 80%, 90%, 0.3); + --blr-core-color-gold-900-opa40: hsla(50, 80%, 90%, 0.4); + --blr-core-color-gold-900-opa50: hsla(50, 80%, 90%, 0.5); + --blr-core-color-gold-900-opa60: hsla(50, 80%, 90%, 0.6); + --blr-core-color-gold-900-opa70: hsla(50, 80%, 90%, 0.7); + --blr-core-color-gold-900-opa80: hsla(50, 80%, 90%, 0.8); + --blr-core-color-gold-900-opa90: hsla(50, 80%, 90%, 0.9); + --blr-core-color-gold-950-solid: hsla(50, 80%, 95%, 1); + --blr-core-color-gold-950-opa0: hsla(50, 80%, 95%, 0); + --blr-core-color-gold-950-opa10: hsla(50, 80%, 95%, 0.1); + --blr-core-color-gold-950-opa20: hsla(50, 80%, 95%, 0.2); + --blr-core-color-gold-950-opa30: hsla(50, 80%, 95%, 0.3); + --blr-core-color-gold-950-opa40: hsla(50, 80%, 95%, 0.4); + --blr-core-color-gold-950-opa50: hsla(50, 80%, 95%, 0.5); + --blr-core-color-gold-950-opa60: hsla(50, 80%, 95%, 0.6); + --blr-core-color-gold-950-opa70: hsla(50, 80%, 95%, 0.7); + --blr-core-color-gold-950-opa80: hsla(50, 80%, 95%, 0.8); + --blr-core-color-gold-950-opa90: hsla(50, 80%, 95%, 0.9); + --blr-core-color-gold-999-solid: hsla(50, 80%, 99%, 1); + --blr-core-color-gold-999-opa0: hsla(50, 80%, 99%, 0); + --blr-core-color-gold-999-opa10: hsla(50, 80%, 99%, 0.1); + --blr-core-color-gold-999-opa20: hsla(50, 80%, 99%, 0.2); + --blr-core-color-gold-999-opa30: hsla(50, 80%, 99%, 0.3); + --blr-core-color-gold-999-opa40: hsla(50, 80%, 99%, 0.4); + --blr-core-color-gold-999-opa50: hsla(50, 80%, 99%, 0.5); + --blr-core-color-gold-999-opa60: hsla(50, 80%, 99%, 0.6); + --blr-core-color-gold-999-opa70: hsla(50, 80%, 99%, 0.7); + --blr-core-color-gold-999-opa80: hsla(50, 80%, 99%, 0.8); + --blr-core-color-gold-999-opa90: hsla(50, 80%, 99%, 0.9); + --blr-core-color-crimson-100-solid: hsla(350, 65%, 10%, 1); + --blr-core-color-crimson-100-opa0: hsla(350, 65%, 10%, 0); + --blr-core-color-crimson-100-opa10: hsla(350, 65%, 10%, 0.1); + --blr-core-color-crimson-100-opa20: hsla(350, 65%, 10%, 0.2); + --blr-core-color-crimson-100-opa30: hsla(350, 65%, 10%, 0.3); + --blr-core-color-crimson-100-opa40: hsla(350, 65%, 10%, 0.4); + --blr-core-color-crimson-100-opa50: hsla(350, 65%, 10%, 0.5); + --blr-core-color-crimson-100-opa60: hsla(350, 65%, 10%, 0.6); + --blr-core-color-crimson-100-opa70: hsla(350, 65%, 10%, 0.7); + --blr-core-color-crimson-100-opa80: hsla(350, 65%, 10%, 0.8); + --blr-core-color-crimson-100-opa90: hsla(350, 65%, 10%, 0.9); + --blr-core-color-crimson-200-solid: hsla(350, 65%, 20%, 1); + --blr-core-color-crimson-200-opa0: hsla(350, 65%, 20%, 0); + --blr-core-color-crimson-200-opa10: hsla(350, 65%, 20%, 0.1); + --blr-core-color-crimson-200-opa20: hsla(350, 65%, 20%, 0.2); + --blr-core-color-crimson-200-opa30: hsla(350, 65%, 20%, 0.3); + --blr-core-color-crimson-200-opa40: hsla(350, 65%, 20%, 0.4); + --blr-core-color-crimson-200-opa50: hsla(350, 65%, 20%, 0.5); + --blr-core-color-crimson-200-opa60: hsla(350, 65%, 20%, 0.6); + --blr-core-color-crimson-200-opa70: hsla(350, 65%, 20%, 0.7); + --blr-core-color-crimson-200-opa80: hsla(350, 65%, 20%, 0.8); + --blr-core-color-crimson-200-opa90: hsla(350, 65%, 20%, 0.9); + --blr-core-color-crimson-300-solid: hsla(350, 65%, 30%, 1); + --blr-core-color-crimson-300-opa0: hsla(350, 65%, 30%, 0); + --blr-core-color-crimson-300-opa10: hsla(350, 65%, 30%, 0.1); + --blr-core-color-crimson-300-opa20: hsla(350, 65%, 30%, 0.2); + --blr-core-color-crimson-300-opa30: hsla(350, 65%, 30%, 0.3); + --blr-core-color-crimson-300-opa40: hsla(350, 65%, 30%, 0.4); + --blr-core-color-crimson-300-opa50: hsla(350, 65%, 30%, 0.5); + --blr-core-color-crimson-300-opa60: hsla(350, 65%, 30%, 0.6); + --blr-core-color-crimson-300-opa70: hsla(350, 65%, 30%, 0.7); + --blr-core-color-crimson-300-opa80: hsla(350, 65%, 30%, 0.8); + --blr-core-color-crimson-300-opa90: hsla(350, 65%, 30%, 0.9); + --blr-core-color-crimson-400-solid: hsla(350, 65%, 40%, 1); + --blr-core-color-crimson-400-opa0: hsla(350, 65%, 40%, 0); + --blr-core-color-crimson-400-opa10: hsla(350, 65%, 40%, 0.1); + --blr-core-color-crimson-400-opa20: hsla(350, 65%, 40%, 0.2); + --blr-core-color-crimson-400-opa30: hsla(350, 65%, 40%, 0.3); + --blr-core-color-crimson-400-opa40: hsla(350, 65%, 40%, 0.4); + --blr-core-color-crimson-400-opa50: hsla(350, 65%, 40%, 0.5); + --blr-core-color-crimson-400-opa60: hsla(350, 65%, 40%, 0.6); + --blr-core-color-crimson-400-opa70: hsla(350, 65%, 40%, 0.7); + --blr-core-color-crimson-400-opa80: hsla(350, 65%, 40%, 0.8); + --blr-core-color-crimson-400-opa90: hsla(350, 65%, 40%, 0.9); + --blr-core-color-crimson-500-solid: hsla(350, 65%, 50%, 1); + --blr-core-color-crimson-500-opa0: hsla(350, 65%, 50%, 0); + --blr-core-color-crimson-500-opa10: hsla(350, 65%, 50%, 0.1); + --blr-core-color-crimson-500-opa20: hsla(350, 65%, 50%, 0.2); + --blr-core-color-crimson-500-opa30: hsla(350, 65%, 50%, 0.3); + --blr-core-color-crimson-500-opa40: hsla(350, 65%, 50%, 0.4); + --blr-core-color-crimson-500-opa50: hsla(350, 65%, 50%, 0.5); + --blr-core-color-crimson-500-opa60: hsla(350, 65%, 50%, 0.6); + --blr-core-color-crimson-500-opa70: hsla(350, 65%, 50%, 0.7); + --blr-core-color-crimson-500-opa80: hsla(350, 65%, 50%, 0.8); + --blr-core-color-crimson-500-opa90: hsla(350, 65%, 50%, 0.9); + --blr-core-color-crimson-600-solid: hsla(350, 65%, 60%, 1); + --blr-core-color-crimson-600-opa0: hsla(350, 65%, 60%, 0); + --blr-core-color-crimson-600-opa10: hsla(350, 65%, 60%, 0.1); + --blr-core-color-crimson-600-opa20: hsla(350, 65%, 60%, 0.2); + --blr-core-color-crimson-600-opa30: hsla(350, 65%, 60%, 0.3); + --blr-core-color-crimson-600-opa40: hsla(350, 65%, 60%, 0.4); + --blr-core-color-crimson-600-opa50: hsla(350, 65%, 60%, 0.5); + --blr-core-color-crimson-600-opa60: hsla(350, 65%, 60%, 0.6); + --blr-core-color-crimson-600-opa70: hsla(350, 65%, 60%, 0.7); + --blr-core-color-crimson-600-opa80: hsla(350, 65%, 60%, 0.8); + --blr-core-color-crimson-600-opa90: hsla(350, 65%, 60%, 0.9); + --blr-core-color-crimson-700-solid: hsla(350, 65%, 70%, 1); + --blr-core-color-crimson-700-opa0: hsla(350, 65%, 70%, 0); + --blr-core-color-crimson-700-opa10: hsla(350, 65%, 70%, 0.1); + --blr-core-color-crimson-700-opa20: hsla(350, 65%, 70%, 0.2); + --blr-core-color-crimson-700-opa30: hsla(350, 65%, 70%, 0.3); + --blr-core-color-crimson-700-opa40: hsla(350, 65%, 70%, 0.4); + --blr-core-color-crimson-700-opa50: hsla(350, 65%, 70%, 0.5); + --blr-core-color-crimson-700-opa60: hsla(350, 65%, 70%, 0.6); + --blr-core-color-crimson-700-opa70: hsla(350, 65%, 70%, 0.7); + --blr-core-color-crimson-700-opa80: hsla(350, 65%, 70%, 0.8); + --blr-core-color-crimson-700-opa90: hsla(350, 65%, 70%, 0.9); + --blr-core-color-crimson-800-solid: hsla(350, 65%, 80%, 1); + --blr-core-color-crimson-800-opa0: hsla(350, 65%, 80%, 0); + --blr-core-color-crimson-800-opa10: hsla(350, 65%, 80%, 0.1); + --blr-core-color-crimson-800-opa20: hsla(350, 65%, 80%, 0.2); + --blr-core-color-crimson-800-opa30: hsla(350, 65%, 80%, 0.3); + --blr-core-color-crimson-800-opa40: hsla(350, 65%, 80%, 0.4); + --blr-core-color-crimson-800-opa50: hsla(350, 65%, 80%, 0.5); + --blr-core-color-crimson-800-opa60: hsla(350, 65%, 80%, 0.6); + --blr-core-color-crimson-800-opa70: hsla(350, 65%, 80%, 0.7); + --blr-core-color-crimson-800-opa80: hsla(350, 65%, 80%, 0.8); + --blr-core-color-crimson-800-opa90: hsla(350, 65%, 80%, 0.9); + --blr-core-color-crimson-900-solid: hsla(350, 65%, 90%, 1); + --blr-core-color-crimson-900-opa0: hsla(350, 65%, 90%, 0); + --blr-core-color-crimson-900-opa10: hsla(350, 65%, 90%, 0.1); + --blr-core-color-crimson-900-opa20: hsla(350, 65%, 90%, 0.2); + --blr-core-color-crimson-900-opa30: hsla(350, 65%, 90%, 0.3); + --blr-core-color-crimson-900-opa40: hsla(350, 65%, 90%, 0.4); + --blr-core-color-crimson-900-opa50: hsla(350, 65%, 90%, 0.5); + --blr-core-color-crimson-900-opa60: hsla(350, 65%, 90%, 0.6); + --blr-core-color-crimson-900-opa70: hsla(350, 65%, 90%, 0.7); + --blr-core-color-crimson-900-opa80: hsla(350, 65%, 90%, 0.8); + --blr-core-color-crimson-900-opa90: hsla(350, 65%, 90%, 0.9); + --blr-core-color-crimson-950-solid: hsla(350, 65%, 95%, 1); + --blr-core-color-crimson-950-opa0: hsla(350, 65%, 95%, 0); + --blr-core-color-crimson-950-opa10: hsla(350, 65%, 95%, 0.1); + --blr-core-color-crimson-950-opa20: hsla(350, 65%, 95%, 0.2); + --blr-core-color-crimson-950-opa30: hsla(350, 65%, 95%, 0.3); + --blr-core-color-crimson-950-opa40: hsla(350, 65%, 95%, 0.4); + --blr-core-color-crimson-950-opa50: hsla(350, 65%, 95%, 0.5); + --blr-core-color-crimson-950-opa60: hsla(350, 65%, 95%, 0.6); + --blr-core-color-crimson-950-opa70: hsla(350, 65%, 95%, 0.7); + --blr-core-color-crimson-950-opa80: hsla(350, 65%, 95%, 0.8); + --blr-core-color-crimson-950-opa90: hsla(350, 65%, 95%, 0.9); + --blr-core-color-crimson-999-solid: hsla(350, 65%, 99%, 1); + --blr-core-color-crimson-999-opa0: hsla(350, 65%, 99%, 0); + --blr-core-color-crimson-999-opa10: hsla(350, 65%, 99%, 0.1); + --blr-core-color-crimson-999-opa20: hsla(350, 65%, 99%, 0.2); + --blr-core-color-crimson-999-opa30: hsla(350, 65%, 99%, 0.3); + --blr-core-color-crimson-999-opa40: hsla(350, 65%, 99%, 0.4); + --blr-core-color-crimson-999-opa50: hsla(350, 65%, 99%, 0.5); + --blr-core-color-crimson-999-opa60: hsla(350, 65%, 99%, 0.6); + --blr-core-color-crimson-999-opa70: hsla(350, 65%, 99%, 0.7); + --blr-core-color-crimson-999-opa80: hsla(350, 65%, 99%, 0.8); + --blr-core-color-crimson-999-opa90: hsla(350, 65%, 99%, 0.9); + --blr-core-color-red-100-solid: hsla(360, 100%, 10%, 1); + --blr-core-color-red-100-opa0: hsla(360, 100%, 10%, 0); + --blr-core-color-red-100-opa10: hsla(360, 100%, 10%, 0.1); + --blr-core-color-red-100-opa20: hsla(360, 100%, 10%, 0.2); + --blr-core-color-red-100-opa30: hsla(360, 100%, 10%, 0.3); + --blr-core-color-red-100-opa40: hsla(360, 100%, 10%, 0.4); + --blr-core-color-red-100-opa50: hsla(360, 100%, 10%, 0.5); + --blr-core-color-red-100-opa60: hsla(360, 100%, 10%, 0.6); + --blr-core-color-red-100-opa70: hsla(360, 100%, 10%, 0.7); + --blr-core-color-red-100-opa80: hsla(360, 100%, 10%, 0.8); + --blr-core-color-red-100-opa90: hsla(360, 100%, 10%, 0.9); + --blr-core-color-red-200-solid: hsla(360, 100%, 20%, 1); + --blr-core-color-red-200-opa0: hsla(360, 100%, 20%, 0); + --blr-core-color-red-200-opa10: hsla(360, 100%, 20%, 0.1); + --blr-core-color-red-200-opa20: hsla(360, 100%, 20%, 0.2); + --blr-core-color-red-200-opa30: hsla(360, 100%, 20%, 0.3); + --blr-core-color-red-200-opa40: hsla(360, 100%, 20%, 0.4); + --blr-core-color-red-200-opa50: hsla(360, 100%, 20%, 0.5); + --blr-core-color-red-200-opa60: hsla(360, 100%, 20%, 0.6); + --blr-core-color-red-200-opa70: hsla(360, 100%, 20%, 0.7); + --blr-core-color-red-200-opa80: hsla(360, 100%, 20%, 0.8); + --blr-core-color-red-200-opa90: hsla(360, 100%, 20%, 0.9); + --blr-core-color-red-300-solid: hsla(360, 100%, 30%, 1); + --blr-core-color-red-300-opa0: hsla(360, 100%, 30%, 0); + --blr-core-color-red-300-opa10: hsla(360, 100%, 30%, 0.1); + --blr-core-color-red-300-opa20: hsla(360, 100%, 30%, 0.2); + --blr-core-color-red-300-opa30: hsla(360, 100%, 30%, 0.3); + --blr-core-color-red-300-opa40: hsla(360, 100%, 30%, 0.4); + --blr-core-color-red-300-opa50: hsla(360, 100%, 30%, 0.5); + --blr-core-color-red-300-opa60: hsla(360, 100%, 30%, 0.6); + --blr-core-color-red-300-opa70: hsla(360, 100%, 30%, 0.7); + --blr-core-color-red-300-opa80: hsla(360, 100%, 30%, 0.8); + --blr-core-color-red-300-opa90: hsla(360, 100%, 30%, 0.9); + --blr-core-color-red-400-solid: hsla(360, 100%, 40%, 1); + --blr-core-color-red-400-opa0: hsla(360, 100%, 40%, 0); + --blr-core-color-red-400-opa10: hsla(360, 100%, 40%, 0.1); + --blr-core-color-red-400-opa20: hsla(360, 100%, 40%, 0.2); + --blr-core-color-red-400-opa30: hsla(360, 100%, 40%, 0.3); + --blr-core-color-red-400-opa40: hsla(360, 100%, 40%, 0.4); + --blr-core-color-red-400-opa50: hsla(360, 100%, 40%, 0.5); + --blr-core-color-red-400-opa60: hsla(360, 100%, 40%, 0.6); + --blr-core-color-red-400-opa70: hsla(360, 100%, 40%, 0.7); + --blr-core-color-red-400-opa80: hsla(360, 100%, 40%, 0.8); + --blr-core-color-red-400-opa90: hsla(360, 100%, 40%, 0.9); + --blr-core-color-red-500-solid: hsla(360, 100%, 50%, 1); + --blr-core-color-red-500-opa0: hsla(360, 100%, 50%, 0); + --blr-core-color-red-500-opa10: hsla(360, 100%, 50%, 0.1); + --blr-core-color-red-500-opa20: hsla(360, 100%, 50%, 0.2); + --blr-core-color-red-500-opa30: hsla(360, 100%, 50%, 0.3); + --blr-core-color-red-500-opa40: hsla(360, 100%, 50%, 0.4); + --blr-core-color-red-500-opa50: hsla(360, 100%, 50%, 0.5); + --blr-core-color-red-500-opa60: hsla(360, 100%, 50%, 0.6); + --blr-core-color-red-500-opa70: hsla(360, 100%, 50%, 0.7); + --blr-core-color-red-500-opa80: hsla(360, 100%, 50%, 0.8); + --blr-core-color-red-500-opa90: hsla(360, 100%, 50%, 0.9); + --blr-core-color-red-600-solid: hsla(360, 100%, 60%, 1); + --blr-core-color-red-600-opa0: hsla(360, 100%, 60%, 0); + --blr-core-color-red-600-opa10: hsla(360, 100%, 60%, 0.1); + --blr-core-color-red-600-opa20: hsla(360, 100%, 60%, 0.2); + --blr-core-color-red-600-opa30: hsla(360, 100%, 60%, 0.3); + --blr-core-color-red-600-opa40: hsla(360, 100%, 60%, 0.4); + --blr-core-color-red-600-opa50: hsla(360, 100%, 60%, 0.5); + --blr-core-color-red-600-opa60: hsla(360, 100%, 60%, 0.6); + --blr-core-color-red-600-opa70: hsla(360, 100%, 60%, 0.7); + --blr-core-color-red-600-opa80: hsla(360, 100%, 60%, 0.8); + --blr-core-color-red-600-opa90: hsla(360, 100%, 60%, 0.9); + --blr-core-color-red-700-solid: hsla(360, 100%, 70%, 1); + --blr-core-color-red-700-opa0: hsla(360, 100%, 70%, 0); + --blr-core-color-red-700-opa10: hsla(360, 100%, 70%, 0.1); + --blr-core-color-red-700-opa20: hsla(360, 100%, 70%, 0.2); + --blr-core-color-red-700-opa30: hsla(360, 100%, 70%, 0.3); + --blr-core-color-red-700-opa40: hsla(360, 100%, 70%, 0.4); + --blr-core-color-red-700-opa50: hsla(360, 100%, 70%, 0.5); + --blr-core-color-red-700-opa60: hsla(360, 100%, 70%, 0.6); + --blr-core-color-red-700-opa70: hsla(360, 100%, 70%, 0.7); + --blr-core-color-red-700-opa80: hsla(360, 100%, 70%, 0.8); + --blr-core-color-red-700-opa90: hsla(360, 100%, 70%, 0.9); + --blr-core-color-red-800-solid: hsla(360, 100%, 80%, 1); + --blr-core-color-red-800-opa0: hsla(360, 100%, 80%, 0); + --blr-core-color-red-800-opa10: hsla(360, 100%, 80%, 0.1); + --blr-core-color-red-800-opa20: hsla(360, 100%, 80%, 0.2); + --blr-core-color-red-800-opa30: hsla(360, 100%, 80%, 0.3); + --blr-core-color-red-800-opa40: hsla(360, 100%, 80%, 0.4); + --blr-core-color-red-800-opa50: hsla(360, 100%, 80%, 0.5); + --blr-core-color-red-800-opa60: hsla(360, 100%, 80%, 0.6); + --blr-core-color-red-800-opa70: hsla(360, 100%, 80%, 0.7); + --blr-core-color-red-800-opa80: hsla(360, 100%, 80%, 0.8); + --blr-core-color-red-800-opa90: hsla(360, 100%, 80%, 0.9); + --blr-core-color-red-900-solid: hsla(360, 100%, 90%, 1); + --blr-core-color-red-900-opa0: hsla(360, 100%, 90%, 0); + --blr-core-color-red-900-opa10: hsla(360, 100%, 90%, 0.1); + --blr-core-color-red-900-opa20: hsla(360, 100%, 90%, 0.2); + --blr-core-color-red-900-opa30: hsla(360, 100%, 90%, 0.3); + --blr-core-color-red-900-opa40: hsla(360, 100%, 90%, 0.4); + --blr-core-color-red-900-opa50: hsla(360, 100%, 90%, 0.5); + --blr-core-color-red-900-opa60: hsla(360, 100%, 90%, 0.6); + --blr-core-color-red-900-opa70: hsla(360, 100%, 90%, 0.7); + --blr-core-color-red-900-opa80: hsla(360, 100%, 90%, 0.8); + --blr-core-color-red-900-opa90: hsla(360, 100%, 90%, 0.9); + --blr-core-color-red-950-solid: hsla(360, 100%, 95%, 1); + --blr-core-color-red-950-opa0: hsla(360, 100%, 95%, 0); + --blr-core-color-red-950-opa10: hsla(360, 100%, 95%, 0.1); + --blr-core-color-red-950-opa20: hsla(360, 100%, 95%, 0.2); + --blr-core-color-red-950-opa30: hsla(360, 100%, 95%, 0.3); + --blr-core-color-red-950-opa40: hsla(360, 100%, 95%, 0.4); + --blr-core-color-red-950-opa50: hsla(360, 100%, 95%, 0.5); + --blr-core-color-red-950-opa60: hsla(360, 100%, 95%, 0.6); + --blr-core-color-red-950-opa70: hsla(360, 100%, 95%, 0.7); + --blr-core-color-red-950-opa80: hsla(360, 100%, 95%, 0.8); + --blr-core-color-red-950-opa90: hsla(360, 100%, 95%, 0.9); + --blr-core-color-red-999-solid: hsla(360, 100%, 99%, 1); + --blr-core-color-red-999-opa0: hsla(360, 100%, 99%, 0); + --blr-core-color-red-999-opa10: hsla(360, 100%, 99%, 0.1); + --blr-core-color-red-999-opa20: hsla(360, 100%, 99%, 0.2); + --blr-core-color-red-999-opa30: hsla(360, 100%, 99%, 0.3); + --blr-core-color-red-999-opa40: hsla(360, 100%, 99%, 0.4); + --blr-core-color-red-999-opa50: hsla(360, 100%, 99%, 0.5); + --blr-core-color-red-999-opa60: hsla(360, 100%, 99%, 0.6); + --blr-core-color-red-999-opa70: hsla(360, 100%, 99%, 0.7); + --blr-core-color-red-999-opa80: hsla(360, 100%, 99%, 0.8); + --blr-core-color-red-999-opa90: hsla(360, 100%, 99%, 0.9); +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss new file mode 100644 index 000000000..0a3ee472e --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-font-families-headlines: 'Source Sans Pro'; + --blr-core-font-families-text: 'Source Sans Pro'; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss new file mode 100644 index 000000000..e45bd93e4 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss @@ -0,0 +1,20 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-font-sizes-50: 0.03125rem; + --blr-core-font-sizes-75: 0.046875rem; + --blr-core-font-sizes-87: 0.0546875rem; + --blr-core-font-sizes-100: 0.0625rem; + --blr-core-font-sizes-125: 0.078125rem; + --blr-core-font-sizes-150: 0.09375rem; + --blr-core-font-sizes-175: 0.109375rem; + --blr-core-font-sizes-200: 0.125rem; + --blr-core-font-sizes-250: 0.15625rem; + --blr-core-font-sizes-300: 0.1875rem; + --blr-core-font-sizes-350: 0.21875rem; + --blr-core-font-sizes-400: 0.25rem; + --blr-core-font-sizes-450: 0.28125rem; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss new file mode 100644 index 000000000..1c17c2d72 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss @@ -0,0 +1,11 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-font-weights-light: Light; + --blr-core-font-weights-regular: Regular; + --blr-core-font-weights-semi-bold: SemiBold; + --blr-core-font-weights-bold: Bold; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss new file mode 100644 index 000000000..735bfd330 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss @@ -0,0 +1,12 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-letter-spacing-extra-tight: -1.6%; + --blr-core-letter-spacing-tight: -0.8%; + --blr-core-letter-spacing-normal: 0%; + --blr-core-letter-spacing-loose: 0.8%; + --blr-core-letter-spacing-extra-loose: 1.6%; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss new file mode 100644 index 000000000..3a2f1ac75 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss @@ -0,0 +1,14 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-line-heights-tight: 110%; + --blr-core-line-heights-normal: 150%; + --blr-core-line-heights-loose: 160%; + --blr-core-line-heights-fix-0-75-rem: 0.75rem; + --blr-core-line-heights-fix-1-rem: 1rem; + --blr-core-line-heights-fix-1-25-rem: 1.25rem; + --blr-core-line-heights-fix-1-5-rem: 1.5rem; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss new file mode 100644 index 000000000..c84be8d97 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss @@ -0,0 +1,10 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:27 GMT + */ + +:root { + --blr-core-pargraph-spacing-50: 0.5rem; + --blr-core-pargraph-spacing-100: 1rem; + --blr-core-pargraph-spacing-none: 0; +} diff --git a/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js b/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js new file mode 100644 index 000000000..9da6a20b9 --- /dev/null +++ b/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js @@ -0,0 +1,63 @@ +/** + * Do not edit directly + * Generated on Thu, 14 Sep 2023 12:28:28 GMT + */ + +export const componentConfig = { + Forms: { + Checkbox: { + SM: { Control: { IconSize: 'SM' } }, + MD: { Control: { IconSize: 'SM' } }, + LG: { Control: { IconSize: 'Custom 20px' } }, + }, + SM: { CaptionComponent: { IconSize: 'SM' }, InputField: { IconSize: 'MD' } }, + MD: { CaptionComponent: { IconSize: 'SM' }, InputField: { IconSize: 'MD' } }, + LG: { CaptionComponent: { IconSize: 'SM' }, InputField: { IconSize: 'MD' } }, + }, + Navigation: { + TabBar: { + Tab: { + SM: { Icon: { SizeVariant: 'XS' } }, + MD: { Icon: { SizeVariant: 'SM' } }, + LG: { Icon: { SizeVariant: 'SM' } }, + }, + }, + }, + Action: { + Menu: { MenuItem: { IconSize: 'SM' } }, + TextButton: { + XS: { IconSize: 'XXS' }, + SM: { IconSize: 'XS' }, + MD: { IconSize: 'XS' }, + LG: { IconSize: 'SM' }, + XL: { IconSize: 'SM' }, + }, + IconButton: { + XS: { IconSize: 'XXS' }, + SM: { IconSize: 'XS' }, + MD: { IconSize: 'SM' }, + LG: { IconSize: 'MD' }, + XL: { IconSize: 'LG' }, + }, + IconDropdown: { + XS: { IconSize: 'XXS', ChevronSize: 'XXS' }, + SM: { IconSize: 'XS', ChevronSize: 'XXS' }, + MD: { IconSize: 'SM', ChevronSize: 'XS' }, + LG: { IconSize: 'MD', ChevronSize: 'SM' }, + XL: { IconSize: 'LG', ChevronSize: 'MD' }, + }, + TextDropdown: { + XS: { ChevronSize: 'XXS' }, + SM: { ChevronSize: 'XS' }, + MD: { ChevronSize: 'XS' }, + LG: { ChevronSize: 'SM' }, + XL: { ChevronSize: 'MD' }, + }, + StepperButton: { SM: { IconSize: 'SM' }, MD: { IconSize: 'SM' }, LG: { IconSize: 'MD' } }, + XS: { LoaderSize: 'SM' }, + SM: { LoaderSize: 'SM' }, + MD: { LoaderSize: 'MD' }, + LG: { LoaderSize: 'MD' }, + XL: { LoaderSize: 'LG' }, + }, +}; diff --git a/packages/ui-library/src/foundation/component-tokens/toggleSwitch.css.js b/packages/ui-library/src/foundation/component-tokens/toggleSwitch.css.js index e3bc4d7d1..8764b76ef 100644 --- a/packages/ui-library/src/foundation/component-tokens/toggleSwitch.css.js +++ b/packages/ui-library/src/foundation/component-tokens/toggleSwitch.css.js @@ -56,7 +56,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar } &:active { - background-color: ${ToggleSwitch.Control.Background.Unselected.Fill.Hover}; + background-color: ${ToggleSwitch.Control.Background.Unselected.Fill.Pressed}; } &[disabled] { @@ -76,7 +76,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar } &:active { - background-color: ${ToggleSwitch.Control.Background.Selected.Fill.Focus}; + background-color: ${ToggleSwitch.Control.Background.Selected.Fill.Pressed}; } &:focus { @@ -107,14 +107,14 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar &::after { content: ""; position: absolute; - background-color: ${ToggleSwitch.Control.Ay11Icon.Unselected.Fill.Rest}; + background-color: ${ToggleSwitch.Control.Knob.Surface.Unselected.Fill.Rest}; border-radius: 50%; transition: transform 0.2s ease; } } & > input:checked + .toggle-switch-slider::after { - background-color: ${ToggleSwitch.Control.Foreground.Selected.Fill.Rest}; + background-color: ${ToggleSwitch.Control.Knob.Surface.Selected.Fill.Rest}; } & > .toggle-switch-unselect {