@synergy-design-system/tokens 1.0.0-main.1 → 1.0.0-main.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/LICENSE +28 -0
  3. package/README.md +126 -31
  4. package/dist/js/index.js +934 -0
  5. package/dist/scss/_tokens.scss +190 -0
  6. package/dist/themes/dark.css +251 -0
  7. package/dist/themes/light.css +251 -0
  8. package/package.json +23 -8
  9. package/src/figma-tokens/$metadata.json +13 -0
  10. package/src/figma-tokens/$themes.json +334 -0
  11. package/src/figma-tokens/_docs.json +1256 -0
  12. package/src/figma-tokens/color/dark.json +286 -0
  13. package/src/figma-tokens/color/light.json +286 -0
  14. package/src/figma-tokens/color/primitives.json +292 -0
  15. package/src/figma-tokens/globals.json +415 -0
  16. package/src/figma-tokens/semantic/button.json +18 -0
  17. package/src/figma-tokens/semantic/focus-ring.json +16 -0
  18. package/src/figma-tokens/semantic/input.json +266 -0
  19. package/src/figma-tokens/semantic/toggle.json +18 -0
package/dist/scss/_tokens.scss ADDED
@@ -0,0 +1,190 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 1.0.0-main.10
3
+ * SICK Global UX Foundation
4
+ */
5
+ $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
6
+ $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
7
+ $SynFontSizeSmall: var(--syn-font-size-small) !default;
8
+ $SynFontSizeMedium: var(--syn-font-size-medium) !default;
9
+ $SynFontSizeLarge: var(--syn-font-size-large) !default;
10
+ $SynFontSizeXLarge: var(--syn-font-size-x-large) !default;
11
+ $SynFontSize2xLarge: var(--syn-font-size-2x-large) !default;
12
+ $SynFontSize3xLarge: var(--syn-font-size-3x-large) !default;
13
+ $SynDurationExtraFast: var(--syn-duration-extra-fast) !default;
14
+ $SynDurationFast: var(--syn-duration-fast) !default;
15
+ $SynDurationNormal: var(--syn-duration-normal) !default;
16
+ $SynDurationSlow: var(--syn-duration-slow) !default;
17
+ $SynDurationExtraSlow: var(--syn-duration-extra-slow) !default;
18
+ $SynLineHeightDenser: var(--syn-line-height-denser) !default;
19
+ $SynLineHeightDense: var(--syn-line-height-dense) !default;
20
+ $SynLineHeightNormal: var(--syn-line-height-normal) !default;
21
+ $SynLineHeightLoose: var(--syn-line-height-loose) !default;
22
+ $SynLineHeightLooser: var(--syn-line-height-looser) !default;
23
+ $SynFontWeightNormal: var(--syn-font-weight-normal) !default;
24
+ $SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
25
+ $SynFontWeightBold: var(--syn-font-weight-bold) !default;
26
+ $SynShadowMedium: var(--syn-shadow-medium) !default;
27
+ $SynShadowLarge: var(--syn-shadow-large) !default;
28
+ $SynShadowXLarge: var(--syn-shadow-x-large) !default;
29
+ $SynShadowOverflowDown: var(--syn-shadow-overflow-down) !default;
30
+ $SynShadowOverflowUp: var(--syn-shadow-overflow-up) !default;
31
+ $SynShadowOverflowLeft: var(--syn-shadow-overflow-left) !default;
32
+ $SynShadowOverflowRight: var(--syn-shadow-overflow-right) !default;
33
+ $SynFontSans: var(--syn-font-sans) !default;
34
+ $SynFontMono: var(--syn-font-mono) !default;
35
+ $SynSpacing4xSmall: var(--syn-spacing-4x-small) !default;
36
+ $SynSpacing3xSmall: var(--syn-spacing-3x-small) !default;
37
+ $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
38
+ $SynSpacingXSmall: var(--syn-spacing-x-small) !default;
39
+ $SynSpacingSmall: var(--syn-spacing-small) !default;
40
+ $SynSpacingMedium: var(--syn-spacing-medium) !default;
41
+ $SynSpacingLarge: var(--syn-spacing-large) !default;
42
+ $SynSpacingXLarge: var(--syn-spacing-x-large) !default;
43
+ $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
44
+ $SynSpacing3xLarge: var(--syn-spacing-3x-large) !default;
45
+ $SynSpacing4xLarge: var(--syn-spacing-4x-large) !default;
46
+ $SynSpacing5xLarge: var(--syn-spacing-5x-large) !default;
47
+ $SynBorderRadiusNone: var(--syn-border-radius-none) !default;
48
+ $SynBorderRadiusPill: var(--syn-border-radius-pill) !default;
49
+ $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
50
+ $SynDimensionBase: var(--syn-dimension-base) !default;
51
+ $SynBorderWidthNone: var(--syn-border-width-none) !default;
52
+ $SynBorderWidthSmall: var(--syn-border-width-small) !default;
53
+ $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
54
+ $SynBorderWidthLarge: var(--syn-border-width-large) !default;
55
+ $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
56
+ $SynFontSansFallback: var(--syn-font-sans-fallback) !default;
57
+ $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
58
+ $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
59
+ $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
60
+ $SynFocusRingColor: var(--syn-focus-ring-color) !default;
61
+ $SynFocusRingWidth: var(--syn-focus-ring-width) !default;
62
+ $SynFocusRingOffset: var(--syn-focus-ring-offset) !default;
63
+ $SynInputColor: var(--syn-input-color) !default;
64
+ $SynInputColorHover: var(--syn-input-color-hover) !default;
65
+ $SynInputColorFocus: var(--syn-input-color-focus) !default;
66
+ $SynInputColorDisabled: var(--syn-input-color-disabled) !default;
67
+ $SynInputBackgroundColor: var(--syn-input-background-color) !default;
68
+ $SynInputBackgroundColorHover: var(--syn-input-background-color-hover) !default;
69
+ $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
70
+ $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
71
+ $SynInputBorderColor: var(--syn-input-border-color) !default;
72
+ $SynInputBorderColorHover: var(--syn-input-border-color-hover) !default;
73
+ $SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
74
+ $SynInputBorderColorDisables: var(--syn-input-border-color-disables) !default;
75
+ $SynInputBorderRadiusSmall: var(--syn-input-border-radius-small) !default;
76
+ $SynInputBorderRadiusMedium: var(--syn-input-border-radius-medium) !default;
77
+ $SynInputBorderRadiusLarge: var(--syn-input-border-radius-large) !default;
78
+ $SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
79
+ $SynInputWidth: var(--syn-input-width) !default;
80
+ $SynInputIconColor: var(--syn-input-icon-color) !default;
81
+ $SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
82
+ $SynInputIconColorFocus: var(--syn-input-icon-color-focus) !default;
83
+ $SynInputIconIconClearableColor: var(--syn-input-icon-icon-clearable-color) !default;
84
+ $SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
85
+ $SynInputIconIconClearableColorFocus: var(--syn-input-icon-icon-clearable-color-focus) !default;
86
+ $SynInputPlaceholderColor: var(--syn-input-placeholder-color) !default;
87
+ $SynInputPlaceholderColorDisabled: var(--syn-input-placeholder-color-disabled) !default;
88
+ $SynInputRequiredContent: var(--syn-input-required-content) !default;
89
+ $SynInputRequiredContentOffset: var(--syn-input-required-content-offset) !default;
90
+ $SynInputLabelColor: var(--syn-input-label-color) !default;
91
+ $SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;
92
+ $SynInputLabelFontSizeMedium: var(--syn-input-label-font-size-medium) !default;
93
+ $SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
94
+ $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
95
+ $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
96
+ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
97
+ $SynInputFocusRingColor: var(--syn-input-focus-ring-color) !default;
98
+ $SynInputFocusRingOffset: var(--syn-input-focus-ring-offset) !default;
99
+ $SynInputFocusRingError: var(--syn-input-focus-ring-error) !default;
100
+ $SynInputDisabledOpacity: var(--syn-input-disabled-opacity) !default;
101
+ $SynInputReadonlyBackgroundColor: var(--syn-input-readonly-background-color) !default;
102
+ $SynInputReadonlyBackgroundColorHover: var(--syn-input-readonly-background-color-hover) !default;
103
+ $SynInputReadonlyBackgroundColorFocus: var(--syn-input-readonly-background-color-focus) !default;
104
+ $SynInputReadonlyBackgroundColorDisabled: var(--syn-input-readonly-background-color-disabled) !default;
105
+ $SynInputHelpTextColor: var(--syn-input-help-text-color) !default;
106
+ $SynInputHelpTextColorError: var(--syn-input-help-text-color-error) !default;
107
+ $SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !default;
108
+ $SynInputHelpTextFontSizeMedium: var(--syn-input-help-text-font-size-medium) !default;
109
+ $SynInputHelpTextFontSizeLarge: var(--syn-input-help-text-font-size-large) !default;
110
+ $SynInputHeightSmall: var(--syn-input-height-small) !default;
111
+ $SynInputHeightMedium: var(--syn-input-height-medium) !default;
112
+ $SynInputHeightLarge: var(--syn-input-height-large) !default;
113
+ $SynInputReadonlyColor: var(--syn-input-readonly-color) !default;
114
+ $SynInputReadonlyColorDisabled: var(--syn-input-readonly-color-disabled) !default;
115
+ $SynInputReadonlyColorHover: var(--syn-input-readonly-color-hover) !default;
116
+ $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
117
+ $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
118
+ $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
119
+ $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
120
+ $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
121
+ $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
122
+ $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
123
+ $SynColorPrimary50: var(--syn-color-primary-50) !default;
124
+ $SynColorPrimary100: var(--syn-color-primary-100) !default;
125
+ $SynColorPrimary200: var(--syn-color-primary-200) !default;
126
+ $SynColorPrimary300: var(--syn-color-primary-300) !default;
127
+ $SynColorPrimary400: var(--syn-color-primary-400) !default;
128
+ $SynColorPrimary500: var(--syn-color-primary-500) !default;
129
+ $SynColorPrimary600: var(--syn-color-primary-600) !default;
130
+ $SynColorPrimary700: var(--syn-color-primary-700) !default;
131
+ $SynColorPrimary800: var(--syn-color-primary-800) !default;
132
+ $SynColorPrimary900: var(--syn-color-primary-900) !default;
133
+ $SynColorPrimary950: var(--syn-color-primary-950) !default;
134
+ $SynColorSuccess50: var(--syn-color-success-50) !default;
135
+ $SynColorSuccess100: var(--syn-color-success-100) !default;
136
+ $SynColorSuccess200: var(--syn-color-success-200) !default;
137
+ $SynColorSuccess300: var(--syn-color-success-300) !default;
138
+ $SynColorSuccess400: var(--syn-color-success-400) !default;
139
+ $SynColorSuccess500: var(--syn-color-success-500) !default;
140
+ $SynColorSuccess600: var(--syn-color-success-600) !default;
141
+ $SynColorSuccess700: var(--syn-color-success-700) !default;
142
+ $SynColorSuccess800: var(--syn-color-success-800) !default;
143
+ $SynColorSuccess900: var(--syn-color-success-900) !default;
144
+ $SynColorSuccess950: var(--syn-color-success-950) !default;
145
+ $SynColorWarning50: var(--syn-color-warning-50) !default;
146
+ $SynColorWarning100: var(--syn-color-warning-100) !default;
147
+ $SynColorWarning200: var(--syn-color-warning-200) !default;
148
+ $SynColorWarning300: var(--syn-color-warning-300) !default;
149
+ $SynColorWarning400: var(--syn-color-warning-400) !default;
150
+ $SynColorWarning500: var(--syn-color-warning-500) !default;
151
+ $SynColorWarning600: var(--syn-color-warning-600) !default;
152
+ $SynColorWarning700: var(--syn-color-warning-700) !default;
153
+ $SynColorWarning800: var(--syn-color-warning-800) !default;
154
+ $SynColorWarning900: var(--syn-color-warning-900) !default;
155
+ $SynColorWarning950: var(--syn-color-warning-950) !default;
156
+ $SynColorError50: var(--syn-color-error-50) !default;
157
+ $SynColorError100: var(--syn-color-error-100) !default;
158
+ $SynColorError200: var(--syn-color-error-200) !default;
159
+ $SynColorError300: var(--syn-color-error-300) !default;
160
+ $SynColorError400: var(--syn-color-error-400) !default;
161
+ $SynColorError500: var(--syn-color-error-500) !default;
162
+ $SynColorError600: var(--syn-color-error-600) !default;
163
+ $SynColorError700: var(--syn-color-error-700) !default;
164
+ $SynColorError800: var(--syn-color-error-800) !default;
165
+ $SynColorError900: var(--syn-color-error-900) !default;
166
+ $SynColorError950: var(--syn-color-error-950) !default;
167
+ $SynColorAccent50: var(--syn-color-accent-50) !default;
168
+ $SynColorAccent100: var(--syn-color-accent-100) !default;
169
+ $SynColorAccent200: var(--syn-color-accent-200) !default;
170
+ $SynColorAccent300: var(--syn-color-accent-300) !default;
171
+ $SynColorAccent400: var(--syn-color-accent-400) !default;
172
+ $SynColorAccent500: var(--syn-color-accent-500) !default;
173
+ $SynColorAccent600: var(--syn-color-accent-600) !default;
174
+ $SynColorAccent700: var(--syn-color-accent-700) !default;
175
+ $SynColorAccent800: var(--syn-color-accent-800) !default;
176
+ $SynColorAccent900: var(--syn-color-accent-900) !default;
177
+ $SynColorAccent950: var(--syn-color-accent-950) !default;
178
+ $SynColorNeutral0: var(--syn-color-neutral-0) !default;
179
+ $SynColorNeutral50: var(--syn-color-neutral-50) !default;
180
+ $SynColorNeutral100: var(--syn-color-neutral-100) !default;
181
+ $SynColorNeutral200: var(--syn-color-neutral-200) !default;
182
+ $SynColorNeutral300: var(--syn-color-neutral-300) !default;
183
+ $SynColorNeutral400: var(--syn-color-neutral-400) !default;
184
+ $SynColorNeutral500: var(--syn-color-neutral-500) !default;
185
+ $SynColorNeutral600: var(--syn-color-neutral-600) !default;
186
+ $SynColorNeutral700: var(--syn-color-neutral-700) !default;
187
+ $SynColorNeutral800: var(--syn-color-neutral-800) !default;
188
+ $SynColorNeutral900: var(--syn-color-neutral-900) !default;
189
+ $SynColorNeutral950: var(--syn-color-neutral-950) !default;
190
+ $SynColorNeutral1000: var(--syn-color-neutral-1000) !default;
package/dist/themes/dark.css ADDED
@@ -0,0 +1,251 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 1.0.0-main.10
3
+ * SICK Global UX Foundation
4
+ * Do not edit directly
5
+ * Generated on Mon, 20 Nov 2023 09:19:04 GMT
6
+ */
7
+
8
+ :root {
9
+ --syn-font-size-2x-small: 10px;
10
+ --syn-font-size-x-small: 12px;
11
+ --syn-font-size-small: 14px;
12
+ --syn-font-size-medium: 16px;
13
+ --syn-font-size-large: 20px;
14
+ --syn-font-size-x-large: 24px;
15
+ --syn-font-size-2x-large: 32px;
16
+ --syn-font-size-3x-large: 40px;
17
+ --syn-duration-extra-fast: 90ms;
18
+ --syn-duration-fast: 150ms;
19
+ --syn-duration-normal: 250ms;
20
+ --syn-duration-slow: 350ms;
21
+ --syn-duration-extra-slow: 500ms;
22
+ --syn-line-height-denser: 1;
23
+ --syn-line-height-dense: 1.2;
24
+ --syn-line-height-normal: 1.4;
25
+ --syn-line-height-loose: 1.8;
26
+ --syn-line-height-looser: 2.2;
27
+ --syn-font-weight-normal: 400;
28
+ --syn-font-weight-semibold: 600;
29
+ --syn-font-weight-bold: 700;
30
+ --syn-shadow-medium: 0 1px 2px 0 rgba(249, 250, 251, 0.08), 0 1px 4px 0 rgba(249, 250, 251, 0.08), 0 2px 8px 0 rgba(249, 250, 251, 0.08);
31
+ --syn-shadow-large: 0 0 3px 0 rgba(249, 250, 251, 0.12), 0 2px 6px 0 rgba(249, 250, 251, 0.12), 0 3px 8px 0 rgba(249, 250, 251, 0.16);
32
+ --syn-shadow-x-large: 0 1px 4px 0 rgba(249, 250, 251, 0.12), 0 8px 24px 0 rgba(249, 250, 251, 0.12), 0 16px 48px 0 rgba(249, 250, 251, 0.16);
33
+ --syn-shadow-overflow-down: 0 1px 4px 0 rgba(249, 250, 251, 0.12), 0 3px 8px 0 rgba(249, 250, 251, 0.12), 0 4px 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Down */
34
+ --syn-shadow-overflow-up: 0 -1px 4px 0 rgba(249, 250, 251, 0.12), 0 -3px 8px 0 rgba(249, 250, 251, 0.12), 0 -4px 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Up */
35
+ --syn-shadow-overflow-left: -1px 0 4px 0 rgba(249, 250, 251, 0.12), -3px 0 8px 0 rgba(249, 250, 251, 0.12), -4px 0 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Left */
36
+ --syn-shadow-overflow-right: 1px 0 4px 0 rgba(249, 250, 251, 0.12), 3px 0 8px 0 rgba(249, 250, 251, 0.12), 4px 0 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Right */
37
+ --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
38
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
39
+ --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
40
+ --syn-spacing-4x-small: calc(4px / 4);
41
+ --syn-spacing-3x-small: calc(4px / 2);
42
+ --syn-spacing-2x-small: calc(4px * 1);
43
+ --syn-spacing-x-small: calc(4px * 2);
44
+ --syn-spacing-small: calc(4px * 3);
45
+ --syn-spacing-medium: calc(4px * 4);
46
+ --syn-spacing-large: calc(4px * 6);
47
+ --syn-spacing-x-large: calc(4px * 8);
48
+ --syn-spacing-2x-large: calc(4px * 12);
49
+ --syn-spacing-3x-large: calc(4px * 16);
50
+ --syn-spacing-4x-large: calc(4px * 24);
51
+ --syn-spacing-5x-large: calc(4px * 32);
52
+ --syn-border-radius-none: 0px;
53
+ --syn-border-radius-pill: 9999px;
54
+ --syn-border-radius-circle: 9999px;
55
+ --syn-dimension-base: 4px;
56
+ --syn-border-width-none: 0px; /* None */
57
+ --syn-border-width-small: 1px; /* Small */
58
+ --syn-border-width-medium: 2px; /* Medium */
59
+ --syn-border-width-large: 3px; /* Large */
60
+ --syn-border-width-x-large: 4px; /* X Large */
61
+ --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
62
+ --syn-button-font-size-small: var(--syn-font-size-x-small);
63
+ --syn-button-font-size-medium: var(--syn-font-size-medium);
64
+ --syn-button-font-size-large: var(--syn-font-size-large);
65
+ --syn-focus-ring-color: var(--syn-color-primary-400);
66
+ --syn-focus-ring-width: var(--syn-border-width-medium);
67
+ --syn-focus-ring-offset: var(--syn-spacing-3x-small);
68
+ --syn-input-color: var(--syn-color-neutral-950);
69
+ --syn-input-color-hover: var(--syn-color-neutral-950);
70
+ --syn-input-color-focus: var(--syn-color-neutral-950);
71
+ --syn-input-color-disabled: var(--syn-color-neutral-950);
72
+ --syn-input-background-color: var(--syn-color-neutral-0);
73
+ --syn-input-background-color-hover: var(--syn-input-background.color);
74
+ --syn-input-background-color-focus: var(--syn-input-background.color);
75
+ --syn-input-background-color-disabled: var(--syn-input-background.color);
76
+ --syn-input-border-color: var(--syn-color-neutral-700);
77
+ --syn-input-border-color-hover: var(--syn-color-neutral-950);
78
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
79
+ --syn-input-border-color-disables: var(--syn-color-neutral-700);
80
+ --syn-input-border-radius-small: var(--syn-border-radius-none);
81
+ --syn-input-border-radius-medium: var(--syn-border-radius-none);
82
+ --syn-input-border-radius-large: var(--syn-border-radius-none);
83
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
84
+ --syn-input-width: var(--syn-border-width-small);
85
+ --syn-input-icon-color: var(--syn-color-neutral-800);
86
+ --syn-input-icon-color-hover: var(--syn-color-neutral-800);
87
+ --syn-input-icon-color-focus: var(--syn-color-neutral-800);
88
+ --syn-input-icon-icon-clearable-color: var(--syn-color-gray-500);
89
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-gray-500);
90
+ --syn-input-icon-icon-clearable-color-focus: var(--syn-color-gray-500);
91
+ --syn-input-placeholder-color: var(--syn-color-neutral-500);
92
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
93
+ --syn-input-required-content: "*";
94
+ --syn-input-required-content-offset: -2px;
95
+ --syn-input-label-color: var(--syn-color-neutral-950);
96
+ --syn-input-label-font-size-small: var(--syn-font-size-small);
97
+ --syn-input-label-font-size-medium: var(--syn-font-size-medium);
98
+ --syn-input-label-font-size-large: var(--syn-font-size-large);
99
+ --syn-input-spacing-small: var(--syn-spacing-small);
100
+ --syn-input-spacing-medium: var(--syn-spacing-medium);
101
+ --syn-input-spacing-large: var(--syn-spacing-large);
102
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
103
+ --syn-input-focus-ring-offset: 0;
104
+ --syn-input-focus-ring-error: var(--syn-color-error-400);
105
+ --syn-input-disabled-opacity: 0.5;
106
+ --syn-input-readonly-background-color: var(--syn-color-neutral-50);
107
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
108
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
109
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
110
+ --syn-input-help-text-color: var(--syn-color-neutral-800);
111
+ --syn-input-help-text-color-error: var(--syn-color-error-700);
112
+ --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
113
+ --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
114
+ --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
115
+ --syn-input-height-small: var(--syn-spacing-x-large);
116
+ --syn-input-height-medium: var(--syn-spacing-2x-large);
117
+ --syn-input-height-large: var(--syn-spacing-3x-large);
118
+ --syn-input-readonly-color: var(--syn-color-neutral-800);
119
+ --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
120
+ --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
121
+ --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
122
+ --syn-input-font-size-small: var(--syn-font-size-small);
123
+ --syn-input-font-size-medium: var(--syn-font-size-medium);
124
+ --syn-input-font-size-large: var(--syn-font-size-large);
125
+ --syn-toggle-size-small: 14px;
126
+ --syn-toggle-size-medium: var(--syn-spacing-medium);
127
+ --syn-toggle-size-large: var(--syn-spacing-large);
128
+ --syn-color-primary-50: #072E4A;
129
+ --syn-color-primary-100: #0B486F;
130
+ --syn-color-primary-200: #065786;
131
+ --syn-color-primary-300: #0166a3;
132
+ --syn-color-primary-400: #007cc1;
133
+ --syn-color-primary-500: #0ca2eb;
134
+ --syn-color-primary-600: #0ca2eb;
135
+ --syn-color-primary-700: #7cd1fd;
136
+ --syn-color-primary-800: #b9e5fe;
137
+ --syn-color-primary-900: #e0f1FE;
138
+ --syn-color-primary-950: #f0f9ff;
139
+ --syn-color-success-50: #172C07;
140
+ --syn-color-success-100: #315017;
141
+ --syn-color-success-200: #395E16;
142
+ --syn-color-success-300: #437714;
143
+ --syn-color-success-400: #63B017;
144
+ --syn-color-success-500: #73C31F;
145
+ --syn-color-success-600: #93DD3E;
146
+ --syn-color-success-700: #B0EB6B;
147
+ --syn-color-success-800: #D1F4A2;
148
+ --syn-color-success-900: #e7facd;
149
+ --syn-color-success-950: #f5fde8;
150
+ --syn-color-warning-50: #411f07;
151
+ --syn-color-warning-100: #6f3e14;
152
+ --syn-color-warning-200: #834b10;
153
+ --syn-color-warning-300: #9e5f0a;
154
+ --syn-color-warning-400: #c68608;
155
+ --syn-color-warning-500: #e5ae0d;
156
+ --syn-color-warning-600: #f5c413;
157
+ --syn-color-warning-700: #f9da4b;
158
+ --syn-color-warning-800: #FCEC8c;
159
+ --syn-color-warning-900: #fdf7c4;
160
+ --syn-color-warning-950: #fefce8;
161
+ --syn-color-error-50: #4e010a;
162
+ --syn-color-error-100: #8D0f1e;
163
+ --syn-color-error-200: #ab091c;
164
+ --syn-color-error-300: #d0051d;
165
+ --syn-color-error-400: #ea0823;
166
+ --syn-color-error-500: #ff2b44;
167
+ --syn-color-error-600: #ff5d70;
168
+ --syn-color-error-700: #ff98a4;
169
+ --syn-color-error-800: #ffc3c9;
170
+ --syn-color-error-900: #ffdee2;
171
+ --syn-color-error-950: #fff0f2;
172
+ --syn-color-accent-50: #481700;
173
+ --syn-color-accent-100: #7C310B;
174
+ --syn-color-accent-200: #983B08;
175
+ --syn-color-accent-300: #BB4D02;
176
+ --syn-color-accent-400: #E27200;
177
+ --syn-color-accent-500: #F39200;
178
+ --syn-color-accent-600: #FFBD1B;
179
+ --syn-color-accent-700: #FFD246;
180
+ --syn-color-accent-800: #FFE685;
181
+ --syn-color-accent-900: #FFF2C5;
182
+ --syn-color-accent-950: #FFFBEA;
183
+ --syn-color-neutral-0: black;
184
+ --syn-color-neutral-50: #31373a;
185
+ --syn-color-neutral-100: #4c5357;
186
+ --syn-color-neutral-200: #5e676b;
187
+ --syn-color-neutral-300: #737f85;
188
+ --syn-color-neutral-400: #859298;
189
+ --syn-color-neutral-500: #9ea9ae;
190
+ --syn-color-neutral-600: #bac2c6;
191
+ --syn-color-neutral-700: #d5dbdd;
192
+ --syn-color-neutral-800: #e8ebec;
193
+ --syn-color-neutral-900: #f2f5f5;
194
+ --syn-color-neutral-950: #f9fafb;
195
+ --syn-color-neutral-1000: white;
196
+
197
+ /* Fallbacks from Shoelace */
198
+ --syn-border-radius-small: 0.1875rem;
199
+ --syn-border-radius-medium: 0.25rem;
200
+ --syn-border-radius-large: 0.5rem;
201
+ --syn-border-radius-x-large: 1rem;
202
+ --syn-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
203
+ --syn-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
204
+ --syn-transition-x-slow: 1000ms;
205
+ --syn-transition-slow: 500ms;
206
+ --syn-transition-medium: 250ms;
207
+ --syn-transition-fast: 150ms;
208
+ --syn-transition-x-fast: 50ms;
209
+ --syn-font-serif: Georgia, "Times New Roman", serif;
210
+ --syn-font-size-4x-large: 4.5rem;
211
+ --syn-font-weight-light: 300;
212
+ --syn-letter-spacing-denser: -0.03em;
213
+ --syn-letter-spacing-dense: -0.015em;
214
+ --syn-letter-spacing-normal: normal;
215
+ --syn-letter-spacing-loose: 0.075em;
216
+ --syn-letter-spacing-looser: 0.15em;
217
+ --syn-focus-ring-style: solid;
218
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
219
+ --syn-input-border-color-disabled: var(--syn-color-neutral-300);
220
+ --syn-input-border-width: 1px;
221
+ --syn-input-required-content-color: var(--syn-input-label-color);
222
+ --syn-input-font-family: var(--syn-font-sans);
223
+ --syn-input-font-weight: var(--syn-font-weight-normal);
224
+ --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
225
+ --syn-input-filled-background-color: var(--syn-color-neutral-100);
226
+ --syn-input-filled-background-color-hover: var(--syn-color-neutral-100);
227
+ --syn-input-filled-background-color-focus: var(--syn-color-neutral-100);
228
+ --syn-input-filled-background-color-disabled: var(--syn-color-neutral-100);
229
+ --syn-input-filled-color: var(--syn-color-neutral-800);
230
+ --syn-input-filled-color-hover: var(--syn-color-neutral-800);
231
+ --syn-input-filled-color-focus: var(--syn-color-neutral-700);
232
+ --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
233
+ --syn-overlay-background-color: hsl(0 0% 0% / 43%);
234
+ --syn-panel-background-color: var(--syn-color-neutral-50);
235
+ --syn-panel-border-color: var(--syn-color-neutral-200);
236
+ --syn-panel-border-width: 1px;
237
+ --syn-tooltip-border-radius: var(--syn-border-radius-medium);
238
+ --syn-tooltip-background-color: var(--syn-color-neutral-800);
239
+ --syn-tooltip-color: var(--syn-color-neutral-0);
240
+ --syn-tooltip-font-family: var(--syn-font-sans);
241
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
242
+ --syn-tooltip-font-size: var(--syn-font-size-small);
243
+ --syn-tooltip-line-height: var(--syn-line-height-dense);
244
+ --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
245
+ --syn-tooltip-arrow-size: 6px;
246
+ --syn-z-index-drawer: 700;
247
+ --syn-z-index-dialog: 800;
248
+ --syn-z-index-dropdown: 900;
249
+ --syn-z-index-toast: 950;
250
+ --syn-z-index-tooltip: 1000;
251
+ }