@synergy-design-system/tokens 1.0.0-main.4 → 1.0.0-main.6

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 (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +126 -31
  3. package/dist/js/index.js +934 -0
  4. package/dist/scss/_tokens.scss +190 -0
  5. package/dist/{css → themes}/dark.css +36 -21
  6. package/dist/{css → themes}/light.css +36 -21
  7. package/package.json +9 -2
  8. package/src/figma-tokens/$metadata.json +13 -0
  9. package/src/figma-tokens/$themes.json +331 -0
  10. package/src/figma-tokens/_docs.json +1212 -0
  11. package/src/figma-tokens/color/dark.json +286 -0
  12. package/src/figma-tokens/color/light.json +286 -0
  13. package/src/figma-tokens/color/primitives.json +292 -0
  14. package/src/figma-tokens/globals.json +415 -0
  15. package/src/figma-tokens/semantic/button.json +18 -0
  16. package/src/figma-tokens/semantic/focus-ring.json +16 -0
  17. package/src/figma-tokens/semantic/input.json +272 -0
  18. package/src/figma-tokens/semantic/toggles.json +16 -0
package/dist/scss/_tokens.scss ADDED
@@ -0,0 +1,190 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 1.0.0-main.5
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
+ $SynSizeSmall: var(--syn-size-small) !default;
121
+ $SynSizeMedium: var(--syn-size-medium) !default;
122
+ $SynSizeLarge: var(--syn-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/{css → themes}/dark.css RENAMED
@@ -1,11 +1,12 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.0.0-main.3
2
+ * @synergy-design-system/tokens version 1.0.0-main.5
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Thu, 02 Nov 2023 15:24:29 GMT
5
+ * Generated on Tue, 07 Nov 2023 15:06:55 GMT
6
6
  */
7
7
 
8
- :root { --syn-font-size-2x-small: 10px;
8
+ :root {
9
+ --syn-font-size-2x-small: 10px;
9
10
  --syn-font-size-x-small: 12px;
10
11
  --syn-font-size-small: 14px;
11
12
  --syn-font-size-medium: 16px;
@@ -58,6 +59,9 @@
58
59
  --syn-border-width-large: 3px; /* Large */
59
60
  --syn-border-width-x-large: 4px; /* X Large */
60
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);
61
65
  --syn-focus-ring-color: var(--syn-color-primary-600);
62
66
  --syn-focus-ring-width: var(--syn-border-width-small);
63
67
  --syn-focus-ring-offset: 0;
@@ -81,6 +85,9 @@
81
85
  --syn-input-icon-color: var(--syn-color-neutral-800);
82
86
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
83
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);
84
91
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
85
92
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
86
93
  --syn-input-required-content: "*";
@@ -96,25 +103,28 @@
96
103
  --syn-input-focus-ring-offset: 0;
97
104
  --syn-input-focus-ring-error: var(--syn-color-error-400);
98
105
  --syn-input-disabled-opacity: 0.5;
99
- --syn-input-filled-background-color: var(--syn-color-neutral-50);
100
- --syn-input-filled-background-color-hover: var(--syn-color-neutral-50);
101
- --syn-input-filled-background-color-focus: var(--syn-color-neutral-50);
102
- --syn-input-filled-background-color-disabled: var(--syn-color-neutral-50);
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);
103
112
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
104
113
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
105
114
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
106
- --syn-input-help-text-color: var(--syn-color-neutral-800);
107
- --syn-input-help-text-color-error: var(--syn-color-error-700);
108
- --syn-input-font-size-small: var(--syn-font-size-small);
109
- --syn-input-font-size-medium: var(--syn-font-size-medium);
110
- --syn-input-font-size-large: var(--syn-font-size-large);
111
115
  --syn-input-height-small: var(--syn-spacing-x-large);
112
116
  --syn-input-height-medium: var(--syn-spacing-2x-large);
113
117
  --syn-input-height-large: var(--syn-spacing-3x-large);
114
- --syn-input-filled-color: var(--syn-color-neutral-800);
115
- --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
116
- --syn-input-filled-color-hover: var(--syn-color-neutral-950);
117
- --syn-input-filled-color-focus: var(--syn-color-neutral-950);
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-size-small: 14px;
126
+ --syn-size-medium: var(--syn-spacing-medium);
127
+ --syn-size-large: var(--syn-spacing-large);
118
128
  --syn-color-primary-50: #072E4A;
119
129
  --syn-color-primary-100: #0B486F;
120
130
  --syn-color-primary-200: #065786;
@@ -183,6 +193,7 @@
183
193
  --syn-color-neutral-900: #f2f5f5;
184
194
  --syn-color-neutral-950: #f9fafb;
185
195
  --syn-color-neutral-1000: white;
196
+
186
197
  /* Fallbacks from Shoelace */
187
198
  --syn-border-radius-small: 0.1875rem;
188
199
  --syn-border-radius-medium: 0.25rem;
@@ -204,17 +215,21 @@
204
215
  --syn-letter-spacing-loose: 0.075em;
205
216
  --syn-letter-spacing-looser: 0.15em;
206
217
  --syn-focus-ring-style: solid;
207
- --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width)
208
- var(--syn-focus-ring-color);
209
- --syn-button-font-size-small: var(--syn-font-size-x-small);
210
- --syn-button-font-size-medium: var(--syn-font-size-small);
211
- --syn-button-font-size-large: var(--syn-font-size-medium);
218
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
212
219
  --syn-input-border-color-disabled: var(--syn-color-neutral-300);
213
220
  --syn-input-border-width: 1px;
214
221
  --syn-input-required-content-color: var(--syn-input-label-color);
215
222
  --syn-input-font-family: var(--syn-font-sans);
216
223
  --syn-input-font-weight: var(--syn-font-weight-normal);
217
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);
218
233
  --syn-toggle-size-small: 0.875rem;
219
234
  --syn-toggle-size-medium: 1.125rem;
220
235
  --syn-toggle-size-large: 1.375rem;
package/dist/{css → themes}/light.css RENAMED
@@ -1,11 +1,12 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.0.0-main.3
2
+ * @synergy-design-system/tokens version 1.0.0-main.5
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Thu, 02 Nov 2023 15:24:29 GMT
5
+ * Generated on Tue, 07 Nov 2023 15:06:55 GMT
6
6
  */
7
7
 
8
- :root { --syn-font-size-2x-small: 10px;
8
+ :root {
9
+ --syn-font-size-2x-small: 10px;
9
10
  --syn-font-size-x-small: 12px;
10
11
  --syn-font-size-small: 14px;
11
12
  --syn-font-size-medium: 16px;
@@ -58,6 +59,9 @@
58
59
  --syn-border-width-large: 3px; /* Large */
59
60
  --syn-border-width-x-large: 4px; /* X Large */
60
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);
61
65
  --syn-focus-ring-color: var(--syn-color-primary-600);
62
66
  --syn-focus-ring-width: var(--syn-border-width-small);
63
67
  --syn-focus-ring-offset: 0;
@@ -81,6 +85,9 @@
81
85
  --syn-input-icon-color: var(--syn-color-neutral-800);
82
86
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
83
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);
84
91
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
85
92
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
86
93
  --syn-input-required-content: "*";
@@ -96,25 +103,28 @@
96
103
  --syn-input-focus-ring-offset: 0;
97
104
  --syn-input-focus-ring-error: var(--syn-color-error-400);
98
105
  --syn-input-disabled-opacity: 0.5;
99
- --syn-input-filled-background-color: var(--syn-color-neutral-50);
100
- --syn-input-filled-background-color-hover: var(--syn-color-neutral-50);
101
- --syn-input-filled-background-color-focus: var(--syn-color-neutral-50);
102
- --syn-input-filled-background-color-disabled: var(--syn-color-neutral-50);
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);
103
112
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
104
113
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
105
114
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
106
- --syn-input-help-text-color: var(--syn-color-neutral-800);
107
- --syn-input-help-text-color-error: var(--syn-color-error-700);
108
- --syn-input-font-size-small: var(--syn-font-size-small);
109
- --syn-input-font-size-medium: var(--syn-font-size-medium);
110
- --syn-input-font-size-large: var(--syn-font-size-large);
111
115
  --syn-input-height-small: var(--syn-spacing-x-large);
112
116
  --syn-input-height-medium: var(--syn-spacing-2x-large);
113
117
  --syn-input-height-large: var(--syn-spacing-3x-large);
114
- --syn-input-filled-color: var(--syn-color-neutral-800);
115
- --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
116
- --syn-input-filled-color-hover: var(--syn-color-neutral-950);
117
- --syn-input-filled-color-focus: var(--syn-color-neutral-950);
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-size-small: 14px;
126
+ --syn-size-medium: var(--syn-spacing-medium);
127
+ --syn-size-large: var(--syn-spacing-large);
118
128
  --syn-color-primary-50: #f0f9ff;
119
129
  --syn-color-primary-100: #e0f1FE;
120
130
  --syn-color-primary-200: #b9e5fe;
@@ -183,6 +193,7 @@
183
193
  --syn-color-neutral-900: #4c5357;
184
194
  --syn-color-neutral-950: #31373a;
185
195
  --syn-color-neutral-1000: black;
196
+
186
197
  /* Fallbacks from Shoelace */
187
198
  --syn-border-radius-small: 0.1875rem;
188
199
  --syn-border-radius-medium: 0.25rem;
@@ -204,17 +215,21 @@
204
215
  --syn-letter-spacing-loose: 0.075em;
205
216
  --syn-letter-spacing-looser: 0.15em;
206
217
  --syn-focus-ring-style: solid;
207
- --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width)
208
- var(--syn-focus-ring-color);
209
- --syn-button-font-size-small: var(--syn-font-size-x-small);
210
- --syn-button-font-size-medium: var(--syn-font-size-small);
211
- --syn-button-font-size-large: var(--syn-font-size-medium);
218
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
212
219
  --syn-input-border-color-disabled: var(--syn-color-neutral-300);
213
220
  --syn-input-border-width: 1px;
214
221
  --syn-input-required-content-color: var(--syn-input-label-color);
215
222
  --syn-input-font-family: var(--syn-font-sans);
216
223
  --syn-input-font-weight: var(--syn-font-weight-normal);
217
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);
218
233
  --syn-toggle-size-small: 0.875rem;
219
234
  --syn-toggle-size-medium: 1.125rem;
220
235
  --syn-toggle-size-large: 1.375rem;
package/package.json CHANGED
@@ -10,6 +10,7 @@
10
10
  "@semantic-release/git": "^10.0.1",
11
11
  "@tokens-studio/sd-transforms": "^0.11.0",
12
12
  "chalk": "^5.3.0",
13
+ "change-case": "^4.1.2",
13
14
  "eslint": "^8.47.0",
14
15
  "eslint-plugin-import": "^2.28.1",
15
16
  "rimraf": "^5.0.1",
@@ -18,9 +19,15 @@
18
19
  "style-dictionary": "^3.8.0",
19
20
  "@synergy-design-system/eslint-config-syn": "0.1.0"
20
21
  },
22
+ "exports": {
23
+ ".": "./dist/js/index.js",
24
+ "./themes/*": "./dist/themes/*",
25
+ "./scss": "./dist/scss/_tokens.scss"
26
+ },
21
27
  "files": [
22
28
  "dist",
23
- "CHANGELOG.md"
29
+ "CHANGELOG.md",
30
+ "src/figma-tokens"
24
31
  ],
25
32
  "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens",
26
33
  "keywords": [
@@ -93,7 +100,7 @@
93
100
  ]
94
101
  },
95
102
  "type": "module",
96
- "version": "1.0.0-main.4",
103
+ "version": "1.0.0-main.6",
97
104
  "scripts": {
98
105
  "build": "pnpm clean && node scripts/build.js",
99
106
  "clean": "rimraf build",
package/src/figma-tokens/$metadata.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "tokenSetOrder": [
3
+ "globals",
4
+ "color/dark",
5
+ "color/light",
6
+ "color/primitives",
7
+ "semantic/focus-ring",
8
+ "semantic/input",
9
+ "semantic/button",
10
+ "semantic/toggles",
11
+ "_docs"
12
+ ]
13
+ }