@synergy-design-system/tokens 0.1.0 → 1.0.0-main.10

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 (20) hide show
  1. package/CHANGELOG.md +69 -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/{css → themes}/dark.css +48 -33
  7. package/dist/{css → themes}/light.css +48 -33
  8. package/package.json +30 -13
  9. package/src/figma-tokens/$metadata.json +13 -0
  10. package/src/figma-tokens/$themes.json +331 -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/toggles.json +16 -0
  20. package/dist/scss/tokens.scss +0 -158
package/dist/scss/_tokens.scss ADDED
@@ -0,0 +1,190 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 1.0.0-main.9
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 0.1.0
2
+ * @synergy-design-system/tokens version 1.0.0-main.9
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Thu, 19 Oct 2023 11:11:33 GMT
5
+ * Generated on Mon, 20 Nov 2023 07:57:45 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,9 +59,12 @@
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;
61
- --syn-focus-ring-color: var(--syn-color-primary-600);
62
- --syn-focus-ring-width: var(--syn-border-width-small);
63
- --syn-focus-ring-offset: 0;
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);
64
68
  --syn-input-color: var(--syn-color-neutral-950);
65
69
  --syn-input-color-hover: var(--syn-color-neutral-950);
66
70
  --syn-input-color-focus: var(--syn-color-neutral-950);
@@ -71,18 +75,21 @@
71
75
  --syn-input-background-color-disabled: var(--syn-input-background.color);
72
76
  --syn-input-border-color: var(--syn-color-neutral-700);
73
77
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
74
- --syn-input-border-color-focus: var(--syn-color-primary-800);
78
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
75
79
  --syn-input-border-color-disables: var(--syn-color-neutral-700);
76
80
  --syn-input-border-radius-small: var(--syn-border-radius-none);
77
81
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
78
82
  --syn-input-border-radius-large: var(--syn-border-radius-none);
79
- --syn-input-border-color-focus-error: var(--syn-color-error-600);
83
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
80
84
  --syn-input-width: var(--syn-border-width-small);
81
- --syn-input-icon-color: var(--syn-color-neutral-950);
82
- --syn-input-icon-color-hover: var(--syn-color-neutral-950);
83
- --syn-input-icon-color-focus: var(--syn-color-neutral-950);
84
- --syn-input-placeholder-color: var(--syn-color-neutral-800);
85
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
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);
86
93
  --syn-input-required-content: "*";
87
94
  --syn-input-required-content-offset: -2px;
88
95
  --syn-input-label-color: var(--syn-color-neutral-950);
@@ -92,29 +99,32 @@
92
99
  --syn-input-spacing-small: var(--syn-spacing-small);
93
100
  --syn-input-spacing-medium: var(--syn-spacing-medium);
94
101
  --syn-input-spacing-large: var(--syn-spacing-large);
95
- --syn-input-focus-ring-color: var(--syn-color-primary-200);
102
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
96
103
  --syn-input-focus-ring-offset: 0;
97
- --syn-input-focus-ring-error: var(--syn-color-error-200);
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-600);
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 0.1.0
2
+ * @synergy-design-system/tokens version 1.0.0-main.9
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Thu, 19 Oct 2023 11:11:33 GMT
5
+ * Generated on Mon, 20 Nov 2023 07:57:45 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,9 +59,12 @@
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;
61
- --syn-focus-ring-color: var(--syn-color-primary-600);
62
- --syn-focus-ring-width: var(--syn-border-width-small);
63
- --syn-focus-ring-offset: 0;
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);
64
68
  --syn-input-color: var(--syn-color-neutral-950);
65
69
  --syn-input-color-hover: var(--syn-color-neutral-950);
66
70
  --syn-input-color-focus: var(--syn-color-neutral-950);
@@ -71,18 +75,21 @@
71
75
  --syn-input-background-color-disabled: var(--syn-input-background.color);
72
76
  --syn-input-border-color: var(--syn-color-neutral-700);
73
77
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
74
- --syn-input-border-color-focus: var(--syn-color-primary-800);
78
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
75
79
  --syn-input-border-color-disables: var(--syn-color-neutral-700);
76
80
  --syn-input-border-radius-small: var(--syn-border-radius-none);
77
81
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
78
82
  --syn-input-border-radius-large: var(--syn-border-radius-none);
79
- --syn-input-border-color-focus-error: var(--syn-color-error-600);
83
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
80
84
  --syn-input-width: var(--syn-border-width-small);
81
- --syn-input-icon-color: var(--syn-color-neutral-950);
82
- --syn-input-icon-color-hover: var(--syn-color-neutral-950);
83
- --syn-input-icon-color-focus: var(--syn-color-neutral-950);
84
- --syn-input-placeholder-color: var(--syn-color-neutral-800);
85
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
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);
86
93
  --syn-input-required-content: "*";
87
94
  --syn-input-required-content-offset: -2px;
88
95
  --syn-input-label-color: var(--syn-color-neutral-950);
@@ -92,29 +99,32 @@
92
99
  --syn-input-spacing-small: var(--syn-spacing-small);
93
100
  --syn-input-spacing-medium: var(--syn-spacing-medium);
94
101
  --syn-input-spacing-large: var(--syn-spacing-large);
95
- --syn-input-focus-ring-color: var(--syn-color-primary-200);
102
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
96
103
  --syn-input-focus-ring-offset: 0;
97
- --syn-input-focus-ring-error: var(--syn-color-error-200);
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-600);
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
@@ -6,21 +6,30 @@
6
6
  "description": "Design tokens for the SICK Design System",
7
7
  "devDependencies": {
8
8
  "@semantic-release/changelog": "^6.0.3",
9
+ "@semantic-release/exec": "^6.0.3",
9
10
  "@semantic-release/git": "^10.0.1",
10
- "@synergy-design-system/eslint-config-syn": "workspace: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",
15
+ "eslint-plugin-import": "^2.28.1",
14
16
  "rimraf": "^5.0.1",
15
- "semantic-release": "^22.0.5",
17
+ "semantic-release": "^19.0.5",
16
18
  "semantic-release-monorepo": "^7.0.5",
17
- "style-dictionary": "^3.8.0"
19
+ "style-dictionary": "^3.8.0",
20
+ "@synergy-design-system/eslint-config-syn": "0.1.0"
21
+ },
22
+ "exports": {
23
+ ".": "./dist/js/index.js",
24
+ "./themes/*": "./dist/themes/*",
25
+ "./scss": "./dist/scss/_tokens.scss"
18
26
  },
19
27
  "files": [
20
28
  "dist",
21
- "CHANGELOG.md"
29
+ "CHANGELOG.md",
30
+ "src/figma-tokens"
22
31
  ],
23
- "homepage": "https://github.com/SickDesignSystem/syn/tree/main/packages/tokens",
32
+ "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens",
24
33
  "keywords": [
25
34
  "SDS",
26
35
  "SICK",
@@ -31,7 +40,7 @@
31
40
  "name": "@synergy-design-system/tokens",
32
41
  "repository": {
33
42
  "type": "git",
34
- "url": "https://github.com/SickDesignSystem/syn.git",
43
+ "url": "https://github.com/SickDesignSystem/synergy.git",
35
44
  "directory": "packages/tokens"
36
45
  },
37
46
  "release": {
@@ -48,7 +57,8 @@
48
57
  {
49
58
  "name": "alpha",
50
59
  "prerelease": true
51
- }
60
+ },
61
+ "release-fallback"
52
62
  ],
53
63
  "plugins": [
54
64
  "@semantic-release/commit-analyzer",
@@ -59,10 +69,16 @@
59
69
  "changelogFile": "CHANGELOG.md"
60
70
  }
61
71
  ],
72
+ [
73
+ "@semantic-release/exec",
74
+ {
75
+ "prepareCmd": "pnpm build"
76
+ }
77
+ ],
62
78
  [
63
79
  "@semantic-release/npm",
64
80
  {
65
- "npmPublish": true
81
+ "npmPublish": false
66
82
  }
67
83
  ],
68
84
  [
@@ -83,12 +99,13 @@
83
99
  ]
84
100
  ]
85
101
  },
102
+ "type": "module",
103
+ "version": "1.0.0-main.10",
86
104
  "scripts": {
87
105
  "build": "pnpm clean && node scripts/build.js",
88
106
  "clean": "rimraf build",
89
107
  "lint": "eslint scripts",
90
- "start": "pnpm build"
91
- },
92
- "type": "module",
93
- "version": "0.1.0"
94
- }
108
+ "start": "pnpm build",
109
+ "release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
110
+ }
111
+ }
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
+ }