@synergy-design-system/tokens 2.20.1 → 2.22.0

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 (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +201 -2
  3. package/dist/js/index.d.ts +517 -522
  4. package/dist/js/index.js +259 -264
  5. package/dist/scss/_tokens.scss +203 -204
  6. package/dist/themes/dark.css +203 -206
  7. package/dist/themes/light.css +203 -206
  8. package/package.json +20 -8
  9. package/src/figma-tokens/_docs.json +41 -1
  10. package/src/figma-variables/output/sick2018-dark.json +1187 -0
  11. package/src/figma-variables/output/sick2018-light.json +1187 -0
package/dist/scss/_tokens.scss CHANGED
@@ -1,150 +1,248 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.20.0
2
+ * @synergy-design-system/tokens version 2.21.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
- $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
6
- $SynFontSizeSmall: var(--syn-font-size-small) !default;
7
- $SynFontSizeMedium: var(--syn-font-size-medium) !default;
8
- $SynFontSizeLarge: var(--syn-font-size-large) !default;
9
- $SynFontSizeXLarge: var(--syn-font-size-x-large) !default;
10
- $SynFontSize2xLarge: var(--syn-font-size-2x-large) !default;
11
- $SynFontSize3xLarge: var(--syn-font-size-3x-large) !default;
12
- $SynDurationExtraFast: var(--syn-duration-extra-fast) !default;
13
- $SynDurationFast: var(--syn-duration-fast) !default;
14
- $SynDurationNormal: var(--syn-duration-normal) !default;
15
- $SynDurationSlow: var(--syn-duration-slow) !default;
16
- $SynDurationExtraSlow: var(--syn-duration-extra-slow) !default;
17
- $SynLineHeightDenser: var(--syn-line-height-denser) !default;
18
- $SynLineHeightDense: var(--syn-line-height-dense) !default;
19
- $SynLineHeightNormal: var(--syn-line-height-normal) !default;
20
- $SynLineHeightLoose: var(--syn-line-height-loose) !default;
21
- $SynLineHeightLooser: var(--syn-line-height-looser) !default;
22
- $SynFontWeightNormal: var(--syn-font-weight-normal) !default;
23
- $SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
24
- $SynFontWeightBold: var(--syn-font-weight-bold) !default;
25
- $SynShadowMedium: var(--syn-shadow-medium) !default;
26
- $SynShadowLarge: var(--syn-shadow-large) !default;
27
- $SynShadowXLarge: var(--syn-shadow-x-large) !default;
28
- $SynShadowOverflowDown: var(--syn-shadow-overflow-down) !default;
29
- $SynShadowOverflowUp: var(--syn-shadow-overflow-up) !default;
30
- $SynShadowOverflowLeft: var(--syn-shadow-overflow-left) !default;
31
- $SynShadowOverflowRight: var(--syn-shadow-overflow-right) !default;
32
- $SynFontSans: var(--syn-font-sans) !default;
33
- $SynFontMono: var(--syn-font-mono) !default;
34
- $SynSpacing4xSmall: var(--syn-spacing-4x-small) !default;
35
- $SynSpacing3xSmall: var(--syn-spacing-3x-small) !default;
36
- $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
37
- $SynSpacingXSmall: var(--syn-spacing-x-small) !default;
38
- $SynSpacingSmall: var(--syn-spacing-small) !default;
39
- $SynSpacingMedium: var(--syn-spacing-medium) !default;
40
- $SynSpacingMediumLarge: var(--syn-spacing-medium-large) !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;
5
+ $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
6
+ $SynBorderRadiusLarge: var(--syn-border-radius-large) !default;
7
+ $SynBorderRadiusMedium: var(--syn-border-radius-medium) !default;
47
8
  $SynBorderRadiusNone: var(--syn-border-radius-none) !default;
48
9
  $SynBorderRadiusPill: var(--syn-border-radius-pill) !default;
49
- $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
50
10
  $SynBorderRadiusSmall: var(--syn-border-radius-small) !default;
51
- $SynBorderRadiusMedium: var(--syn-border-radius-medium) !default;
52
- $SynDimensionBase: var(--syn-dimension-base) !default;
11
+ $SynBorderRadiusXLarge: var(--syn-border-radius-x-large) !default;
12
+ $SynBorderWidthLarge: var(--syn-border-width-large) !default;
13
+ $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
53
14
  $SynBorderWidthNone: var(--syn-border-width-none) !default;
54
15
  $SynBorderWidthSmall: var(--syn-border-width-small) !default;
55
- $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
56
- $SynBorderWidthLarge: var(--syn-border-width-large) !default;
57
16
  $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
58
- $SynFontSansFallback: var(--syn-font-sans-fallback) !default;
59
- $SynOpacity50: var(--syn-opacity-50) !default;
60
- $SynTextDecorationDefault: var(--syn-text-decoration-default) !default;
61
- $SynTextDecorationUnderline: var(--syn-text-decoration-underline) !default;
62
- $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
63
- $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
64
17
  $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
18
+ $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
19
+ $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
20
+ $SynColorAccent50: var(--syn-color-accent-50) !default;
21
+ $SynColorAccent100: var(--syn-color-accent-100) !default;
22
+ $SynColorAccent200: var(--syn-color-accent-200) !default;
23
+ $SynColorAccent300: var(--syn-color-accent-300) !default;
24
+ $SynColorAccent400: var(--syn-color-accent-400) !default;
25
+ $SynColorAccent500: var(--syn-color-accent-500) !default;
26
+ $SynColorAccent600: var(--syn-color-accent-600) !default;
27
+ $SynColorAccent700: var(--syn-color-accent-700) !default;
28
+ $SynColorAccent800: var(--syn-color-accent-800) !default;
29
+ $SynColorAccent900: var(--syn-color-accent-900) !default;
30
+ $SynColorAccent950: var(--syn-color-accent-950) !default;
31
+ $SynColorError50: var(--syn-color-error-50) !default;
32
+ $SynColorError100: var(--syn-color-error-100) !default;
33
+ $SynColorError200: var(--syn-color-error-200) !default;
34
+ $SynColorError300: var(--syn-color-error-300) !default;
35
+ $SynColorError400: var(--syn-color-error-400) !default;
36
+ $SynColorError500: var(--syn-color-error-500) !default;
37
+ $SynColorError600: var(--syn-color-error-600) !default;
38
+ $SynColorError700: var(--syn-color-error-700) !default;
39
+ $SynColorError800: var(--syn-color-error-800) !default;
40
+ $SynColorError900: var(--syn-color-error-900) !default;
41
+ $SynColorError950: var(--syn-color-error-950) !default;
42
+ $SynColorNeutral0: var(--syn-color-neutral-0) !default;
43
+ $SynColorNeutral50: var(--syn-color-neutral-50) !default;
44
+ $SynColorNeutral100: var(--syn-color-neutral-100) !default;
45
+ $SynColorNeutral200: var(--syn-color-neutral-200) !default;
46
+ $SynColorNeutral300: var(--syn-color-neutral-300) !default;
47
+ $SynColorNeutral400: var(--syn-color-neutral-400) !default;
48
+ $SynColorNeutral500: var(--syn-color-neutral-500) !default;
49
+ $SynColorNeutral600: var(--syn-color-neutral-600) !default;
50
+ $SynColorNeutral700: var(--syn-color-neutral-700) !default;
51
+ $SynColorNeutral800: var(--syn-color-neutral-800) !default;
52
+ $SynColorNeutral900: var(--syn-color-neutral-900) !default;
53
+ $SynColorNeutral950: var(--syn-color-neutral-950) !default;
54
+ $SynColorNeutral1000: var(--syn-color-neutral-1000) !default;
55
+ $SynColorPrimary50: var(--syn-color-primary-50) !default;
56
+ $SynColorPrimary100: var(--syn-color-primary-100) !default;
57
+ $SynColorPrimary200: var(--syn-color-primary-200) !default;
58
+ $SynColorPrimary300: var(--syn-color-primary-300) !default;
59
+ $SynColorPrimary400: var(--syn-color-primary-400) !default;
60
+ $SynColorPrimary500: var(--syn-color-primary-500) !default;
61
+ $SynColorPrimary600: var(--syn-color-primary-600) !default;
62
+ $SynColorPrimary700: var(--syn-color-primary-700) !default;
63
+ $SynColorPrimary800: var(--syn-color-primary-800) !default;
64
+ $SynColorPrimary900: var(--syn-color-primary-900) !default;
65
+ $SynColorPrimary950: var(--syn-color-primary-950) !default;
66
+ $SynColorSuccess50: var(--syn-color-success-50) !default;
67
+ $SynColorSuccess100: var(--syn-color-success-100) !default;
68
+ $SynColorSuccess200: var(--syn-color-success-200) !default;
69
+ $SynColorSuccess300: var(--syn-color-success-300) !default;
70
+ $SynColorSuccess400: var(--syn-color-success-400) !default;
71
+ $SynColorSuccess500: var(--syn-color-success-500) !default;
72
+ $SynColorSuccess600: var(--syn-color-success-600) !default;
73
+ $SynColorSuccess700: var(--syn-color-success-700) !default;
74
+ $SynColorSuccess800: var(--syn-color-success-800) !default;
75
+ $SynColorSuccess900: var(--syn-color-success-900) !default;
76
+ $SynColorSuccess950: var(--syn-color-success-950) !default;
77
+ $SynColorWarning50: var(--syn-color-warning-50) !default;
78
+ $SynColorWarning100: var(--syn-color-warning-100) !default;
79
+ $SynColorWarning200: var(--syn-color-warning-200) !default;
80
+ $SynColorWarning300: var(--syn-color-warning-300) !default;
81
+ $SynColorWarning400: var(--syn-color-warning-400) !default;
82
+ $SynColorWarning500: var(--syn-color-warning-500) !default;
83
+ $SynColorWarning600: var(--syn-color-warning-600) !default;
84
+ $SynColorWarning700: var(--syn-color-warning-700) !default;
85
+ $SynColorWarning800: var(--syn-color-warning-800) !default;
86
+ $SynColorWarning900: var(--syn-color-warning-900) !default;
87
+ $SynColorWarning950: var(--syn-color-warning-950) !default;
88
+ $SynDimensionBase: var(--syn-dimension-base) !default;
89
+ $SynDurationExtraFast: var(--syn-duration-extra-fast) !default;
90
+ $SynDurationExtraSlow: var(--syn-duration-extra-slow) !default;
91
+ $SynDurationFast: var(--syn-duration-fast) !default;
92
+ $SynDurationNormal: var(--syn-duration-normal) !default;
93
+ $SynDurationSlow: var(--syn-duration-slow) !default;
65
94
  $SynFocusRingColor: var(--syn-focus-ring-color) !default;
66
- $SynFocusRingWidth: var(--syn-focus-ring-width) !default;
67
95
  $SynFocusRingOffset: var(--syn-focus-ring-offset) !default;
68
- $SynInputColor: var(--syn-input-color) !default;
69
- $SynInputColorHover: var(--syn-input-color-hover) !default;
70
- $SynInputColorFocus: var(--syn-input-color-focus) !default;
71
- $SynInputColorDisabled: var(--syn-input-color-disabled) !default;
96
+ $SynFocusRingStyle: var(--syn-focus-ring-style) !default;
97
+ $SynFocusRingWidth: var(--syn-focus-ring-width) !default;
98
+ $SynFontMono: var(--syn-font-mono) !default;
99
+ $SynFontSans: var(--syn-font-sans) !default;
100
+ $SynFontSansFallback: var(--syn-font-sans-fallback) !default;
101
+ $SynFontSerif: var(--syn-font-serif) !default;
102
+ $SynFontSize2xLarge: var(--syn-font-size-2x-large) !default;
103
+ $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
104
+ $SynFontSize3xLarge: var(--syn-font-size-3x-large) !default;
105
+ $SynFontSize4xLarge: var(--syn-font-size-4x-large) !default;
106
+ $SynFontSizeLarge: var(--syn-font-size-large) !default;
107
+ $SynFontSizeMedium: var(--syn-font-size-medium) !default;
108
+ $SynFontSizeSmall: var(--syn-font-size-small) !default;
109
+ $SynFontSizeXLarge: var(--syn-font-size-x-large) !default;
110
+ $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
111
+ $SynFontWeightBold: var(--syn-font-weight-bold) !default;
112
+ $SynFontWeightLight: var(--syn-font-weight-light) !default;
113
+ $SynFontWeightNormal: var(--syn-font-weight-normal) !default;
114
+ $SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
72
115
  $SynInputBackgroundColor: var(--syn-input-background-color) !default;
73
- $SynInputBackgroundColorHover: var(--syn-input-background-color-hover) !default;
74
- $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
75
116
  $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
117
+ $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
118
+ $SynInputBackgroundColorHover: var(--syn-input-background-color-hover) !default;
76
119
  $SynInputBorderColor: var(--syn-input-border-color) !default;
77
- $SynInputBorderColorHover: var(--syn-input-border-color-hover) !default;
120
+ $SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
78
121
  $SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
79
- $SynInputBorderColorDisables: var(--syn-input-border-color-disables) !default;
80
- $SynInputBorderRadiusSmall: var(--syn-input-border-radius-small) !default;
81
- $SynInputBorderRadiusMedium: var(--syn-input-border-radius-medium) !default;
82
- $SynInputBorderRadiusLarge: var(--syn-input-border-radius-large) !default;
83
122
  $SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
84
- $SynInputWidth: var(--syn-input-width) !default;
123
+ $SynInputBorderColorHover: var(--syn-input-border-color-hover) !default;
124
+ $SynInputBorderRadiusLarge: var(--syn-input-border-radius-large) !default;
125
+ $SynInputBorderRadiusMedium: var(--syn-input-border-radius-medium) !default;
126
+ $SynInputBorderRadiusSmall: var(--syn-input-border-radius-small) !default;
127
+ $SynInputBorderWidth: var(--syn-input-border-width) !default;
128
+ $SynInputColor: var(--syn-input-color) !default;
129
+ $SynInputColorDisabled: var(--syn-input-color-disabled) !default;
130
+ $SynInputColorFocus: var(--syn-input-color-focus) !default;
131
+ $SynInputColorHover: var(--syn-input-color-hover) !default;
132
+ $SynInputDisabledOpacity: var(--syn-input-disabled-opacity) !default;
133
+ $SynInputFocusRingColor: var(--syn-input-focus-ring-color) !default;
134
+ $SynInputFocusRingError: var(--syn-input-focus-ring-error) !default;
135
+ $SynInputFocusRingOffset: var(--syn-input-focus-ring-offset) !default;
136
+ $SynInputFontFamily: var(--syn-input-font-family) !default;
137
+ $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
138
+ $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
139
+ $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
140
+ $SynInputFontWeight: var(--syn-input-font-weight) !default;
141
+ $SynInputHeightLarge: var(--syn-input-height-large) !default;
142
+ $SynInputHeightMedium: var(--syn-input-height-medium) !default;
143
+ $SynInputHeightSmall: var(--syn-input-height-small) !default;
144
+ $SynInputHelpTextColor: var(--syn-input-help-text-color) !default;
145
+ $SynInputHelpTextColorError: var(--syn-input-help-text-color-error) !default;
146
+ $SynInputHelpTextFontSizeLarge: var(--syn-input-help-text-font-size-large) !default;
147
+ $SynInputHelpTextFontSizeMedium: var(--syn-input-help-text-font-size-medium) !default;
148
+ $SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !default;
85
149
  $SynInputIconColor: var(--syn-input-icon-color) !default;
86
- $SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
87
150
  $SynInputIconColorFocus: var(--syn-input-icon-color-focus) !default;
151
+ $SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
88
152
  $SynInputIconIconClearableColor: var(--syn-input-icon-icon-clearable-color) !default;
89
- $SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
90
153
  $SynInputIconIconClearableColorFocus: var(--syn-input-icon-icon-clearable-color-focus) !default;
154
+ $SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
155
+ $SynInputLabelColor: var(--syn-input-label-color) !default;
156
+ $SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
157
+ $SynInputLabelFontSizeMedium: var(--syn-input-label-font-size-medium) !default;
158
+ $SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;
159
+ $SynInputLetterSpacing: var(--syn-input-letter-spacing) !default;
91
160
  $SynInputPlaceholderColor: var(--syn-input-placeholder-color) !default;
92
161
  $SynInputPlaceholderColorDisabled: var(--syn-input-placeholder-color-disabled) !default;
162
+ $SynInputReadonlyColor: var(--syn-input-readonly-color) !default;
163
+ $SynInputReadonlyColorDisabled: var(--syn-input-readonly-color-disabled) !default;
164
+ $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
165
+ $SynInputReadonlyColorHover: var(--syn-input-readonly-color-hover) !default;
166
+ $SynInputReadonlyBackgroundColor: var(--syn-input-readonly-background-color) !default;
167
+ $SynInputReadonlyBackgroundColorDisabled: var(--syn-input-readonly-background-color-disabled) !default;
168
+ $SynInputReadonlyBackgroundColorFocus: var(--syn-input-readonly-background-color-focus) !default;
169
+ $SynInputReadonlyBackgroundColorHover: var(--syn-input-readonly-background-color-hover) !default;
93
170
  $SynInputRequiredContent: var(--syn-input-required-content) !default;
94
171
  $SynInputRequiredContentColor: var(--syn-input-required-content-color) !default;
95
172
  $SynInputRequiredContentOffset: var(--syn-input-required-content-offset) !default;
96
- $SynInputLabelColor: var(--syn-input-label-color) !default;
97
- $SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;
98
- $SynInputLabelFontSizeMedium: var(--syn-input-label-font-size-medium) !default;
99
- $SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
100
- $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
101
- $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
102
173
  $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
103
- $SynInputFocusRingColor: var(--syn-input-focus-ring-color) !default;
104
- $SynInputFocusRingOffset: var(--syn-input-focus-ring-offset) !default;
105
- $SynInputFocusRingError: var(--syn-input-focus-ring-error) !default;
106
- $SynInputDisabledOpacity: var(--syn-input-disabled-opacity) !default;
107
- $SynInputReadonlyBackgroundColor: var(--syn-input-readonly-background-color) !default;
108
- $SynInputReadonlyBackgroundColorHover: var(--syn-input-readonly-background-color-hover) !default;
109
- $SynInputReadonlyBackgroundColorFocus: var(--syn-input-readonly-background-color-focus) !default;
110
- $SynInputReadonlyBackgroundColorDisabled: var(--syn-input-readonly-background-color-disabled) !default;
111
- $SynInputHelpTextColor: var(--syn-input-help-text-color) !default;
112
- $SynInputHelpTextColorError: var(--syn-input-help-text-color-error) !default;
113
- $SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !default;
114
- $SynInputHelpTextFontSizeMedium: var(--syn-input-help-text-font-size-medium) !default;
115
- $SynInputHelpTextFontSizeLarge: var(--syn-input-help-text-font-size-large) !default;
116
- $SynInputHeightSmall: var(--syn-input-height-small) !default;
117
- $SynInputHeightMedium: var(--syn-input-height-medium) !default;
118
- $SynInputHeightLarge: var(--syn-input-height-large) !default;
119
- $SynInputReadonlyColor: var(--syn-input-readonly-color) !default;
120
- $SynInputReadonlyColorDisabled: var(--syn-input-readonly-color-disabled) !default;
121
- $SynInputReadonlyColorHover: var(--syn-input-readonly-color-hover) !default;
122
- $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
123
- $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
124
- $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
125
- $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
174
+ $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
175
+ $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
176
+ $SynInputWidth: var(--syn-input-width) !default;
177
+ $SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
178
+ $SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
179
+ $SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
180
+ $SynLetterSpacingLooser: var(--syn-letter-spacing-looser) !default;
181
+ $SynLetterSpacingNormal: var(--syn-letter-spacing-normal) !default;
182
+ $SynLineHeightDense: var(--syn-line-height-dense) !default;
183
+ $SynLineHeightDenser: var(--syn-line-height-denser) !default;
184
+ $SynLineHeightLoose: var(--syn-line-height-loose) !default;
185
+ $SynLineHeightLooser: var(--syn-line-height-looser) !default;
186
+ $SynLineHeightNormal: var(--syn-line-height-normal) !default;
126
187
  $SynLinkColor: var(--syn-link-color) !default;
127
- $SynLinkColorHover: var(--syn-link-color-hover) !default;
128
188
  $SynLinkColorActive: var(--syn-link-color-active) !default;
189
+ $SynLinkColorHover: var(--syn-link-color-hover) !default;
129
190
  $SynLinkQuietColor: var(--syn-link-quiet-color) !default;
130
- $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
131
191
  $SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
192
+ $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
193
+ $SynOpacity50: var(--syn-opacity-50) !default;
132
194
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
133
195
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
134
196
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
135
197
  $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
136
- $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
137
- $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
198
+ $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
199
+ $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
200
+ $SynSpacing3xLarge: var(--syn-spacing-3x-large) !default;
201
+ $SynSpacing3xSmall: var(--syn-spacing-3x-small) !default;
202
+ $SynSpacing4xLarge: var(--syn-spacing-4x-large) !default;
203
+ $SynSpacing4xSmall: var(--syn-spacing-4x-small) !default;
204
+ $SynSpacing5xLarge: var(--syn-spacing-5x-large) !default;
205
+ $SynSpacingLarge: var(--syn-spacing-large) !default;
206
+ $SynSpacingMedium: var(--syn-spacing-medium) !default;
207
+ $SynSpacingMediumLarge: var(--syn-spacing-medium-large) !default;
208
+ $SynSpacingSmall: var(--syn-spacing-small) !default;
209
+ $SynSpacingXLarge: var(--syn-spacing-x-large) !default;
210
+ $SynSpacingXSmall: var(--syn-spacing-x-small) !default;
211
+ $SynTextDecorationDefault: var(--syn-text-decoration-default) !default;
212
+ $SynTextDecorationUnderline: var(--syn-text-decoration-underline) !default;
138
213
  $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
139
- $SynTooltipBorderRadius: var(--syn-tooltip-border-radius) !default;
214
+ $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
215
+ $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
216
+ $SynTooltipArrowSize: var(--syn-tooltip-arrow-size) !default;
140
217
  $SynTooltipBackgroundColor: var(--syn-tooltip-background-color) !default;
218
+ $SynTooltipBorderRadius: var(--syn-tooltip-border-radius) !default;
141
219
  $SynTooltipColor: var(--syn-tooltip-color) !default;
142
220
  $SynTooltipFontFamily: var(--syn-tooltip-font-family) !default;
143
- $SynTooltipFontWeight: var(--syn-tooltip-font-weight) !default;
144
221
  $SynTooltipFontSize: var(--syn-tooltip-font-size) !default;
222
+ $SynTooltipFontWeight: var(--syn-tooltip-font-weight) !default;
145
223
  $SynTooltipLineHeight: var(--syn-tooltip-line-height) !default;
146
224
  $SynTooltipPadding: var(--syn-tooltip-padding) !default;
147
- $SynTooltipArrowSize: var(--syn-tooltip-arrow-size) !default;
225
+ $SynTransitionFast: var(--syn-transition-fast) !default;
226
+ $SynTransitionMedium: var(--syn-transition-medium) !default;
227
+ $SynTransitionSlow: var(--syn-transition-slow) !default;
228
+ $SynTransitionXFast: var(--syn-transition-x-fast) !default;
229
+ $SynTransitionXSlow: var(--syn-transition-x-slow) !default;
230
+ $SynTypographyColorText: var(--syn-typography-color-text) !default;
231
+ $SynTypographyColorTextInverted: var(--syn-typography-color-text-inverted) !default;
232
+ $SynZIndexDialog: var(--syn-z-index-dialog) !default;
233
+ $SynZIndexDrawer: var(--syn-z-index-drawer) !default;
234
+ $SynZIndexDropdown: var(--syn-z-index-dropdown) !default;
235
+ $SynZIndexToast: var(--syn-z-index-toast) !default;
236
+ $SynZIndexTooltip: var(--syn-z-index-tooltip) !default;
237
+ $SynShadowMedium: var(--syn-shadow-medium) !default;
238
+ $SynShadowLarge: var(--syn-shadow-large) !default;
239
+ $SynShadowXLarge: var(--syn-shadow-x-large) !default;
240
+ $SynShadowOverflowDown: var(--syn-shadow-overflow-down) !default;
241
+ $SynShadowOverflowUp: var(--syn-shadow-overflow-up) !default;
242
+ $SynShadowOverflowLeft: var(--syn-shadow-overflow-left) !default;
243
+ $SynShadowOverflowRight: var(--syn-shadow-overflow-right) !default;
244
+ $SynShadowXSmall: var(--syn-shadow-x-small) !default;
245
+ $SynShadowSmall: var(--syn-shadow-small) !default;
148
246
  $SynBodyXSmallRegular: var(--syn-body-x-small-regular) !default;
149
247
  $SynBodyXSmallSemibold: var(--syn-body-x-small-semibold) !default;
150
248
  $SynBodyXSmallBold: var(--syn-body-x-small-bold) !default;
@@ -161,103 +259,4 @@ $SynHeadingLarge: var(--syn-heading-large) !default;
161
259
  $SynHeadingXLarge: var(--syn-heading-x-large) !default;
162
260
  $SynHeading2xLarge: var(--syn-heading-2x-large) !default;
163
261
  $SynHeading3xLarge: var(--syn-heading-3x-large) !default;
164
- $SynTypographyColorText: var(--syn-typography-color-text) !default;
165
- $SynTypographyColorTextInverted: var(--syn-typography-color-text-inverted) !default;
166
- $SynColorPrimary50: var(--syn-color-primary-50) !default;
167
- $SynColorPrimary100: var(--syn-color-primary-100) !default;
168
- $SynColorPrimary200: var(--syn-color-primary-200) !default;
169
- $SynColorPrimary300: var(--syn-color-primary-300) !default;
170
- $SynColorPrimary400: var(--syn-color-primary-400) !default;
171
- $SynColorPrimary500: var(--syn-color-primary-500) !default;
172
- $SynColorPrimary600: var(--syn-color-primary-600) !default;
173
- $SynColorPrimary700: var(--syn-color-primary-700) !default;
174
- $SynColorPrimary800: var(--syn-color-primary-800) !default;
175
- $SynColorPrimary900: var(--syn-color-primary-900) !default;
176
- $SynColorPrimary950: var(--syn-color-primary-950) !default;
177
- $SynColorSuccess50: var(--syn-color-success-50) !default;
178
- $SynColorSuccess100: var(--syn-color-success-100) !default;
179
- $SynColorSuccess200: var(--syn-color-success-200) !default;
180
- $SynColorSuccess300: var(--syn-color-success-300) !default;
181
- $SynColorSuccess400: var(--syn-color-success-400) !default;
182
- $SynColorSuccess500: var(--syn-color-success-500) !default;
183
- $SynColorSuccess600: var(--syn-color-success-600) !default;
184
- $SynColorSuccess700: var(--syn-color-success-700) !default;
185
- $SynColorSuccess800: var(--syn-color-success-800) !default;
186
- $SynColorSuccess900: var(--syn-color-success-900) !default;
187
- $SynColorSuccess950: var(--syn-color-success-950) !default;
188
- $SynColorWarning50: var(--syn-color-warning-50) !default;
189
- $SynColorWarning100: var(--syn-color-warning-100) !default;
190
- $SynColorWarning200: var(--syn-color-warning-200) !default;
191
- $SynColorWarning300: var(--syn-color-warning-300) !default;
192
- $SynColorWarning400: var(--syn-color-warning-400) !default;
193
- $SynColorWarning500: var(--syn-color-warning-500) !default;
194
- $SynColorWarning600: var(--syn-color-warning-600) !default;
195
- $SynColorWarning700: var(--syn-color-warning-700) !default;
196
- $SynColorWarning800: var(--syn-color-warning-800) !default;
197
- $SynColorWarning900: var(--syn-color-warning-900) !default;
198
- $SynColorWarning950: var(--syn-color-warning-950) !default;
199
- $SynColorError50: var(--syn-color-error-50) !default;
200
- $SynColorError100: var(--syn-color-error-100) !default;
201
- $SynColorError200: var(--syn-color-error-200) !default;
202
- $SynColorError300: var(--syn-color-error-300) !default;
203
- $SynColorError400: var(--syn-color-error-400) !default;
204
- $SynColorError500: var(--syn-color-error-500) !default;
205
- $SynColorError600: var(--syn-color-error-600) !default;
206
- $SynColorError700: var(--syn-color-error-700) !default;
207
- $SynColorError800: var(--syn-color-error-800) !default;
208
- $SynColorError900: var(--syn-color-error-900) !default;
209
- $SynColorError950: var(--syn-color-error-950) !default;
210
- $SynColorAccent50: var(--syn-color-accent-50) !default;
211
- $SynColorAccent100: var(--syn-color-accent-100) !default;
212
- $SynColorAccent200: var(--syn-color-accent-200) !default;
213
- $SynColorAccent300: var(--syn-color-accent-300) !default;
214
- $SynColorAccent400: var(--syn-color-accent-400) !default;
215
- $SynColorAccent500: var(--syn-color-accent-500) !default;
216
- $SynColorAccent600: var(--syn-color-accent-600) !default;
217
- $SynColorAccent700: var(--syn-color-accent-700) !default;
218
- $SynColorAccent800: var(--syn-color-accent-800) !default;
219
- $SynColorAccent900: var(--syn-color-accent-900) !default;
220
- $SynColorAccent950: var(--syn-color-accent-950) !default;
221
- $SynColorNeutral0: var(--syn-color-neutral-0) !default;
222
- $SynColorNeutral50: var(--syn-color-neutral-50) !default;
223
- $SynColorNeutral100: var(--syn-color-neutral-100) !default;
224
- $SynColorNeutral200: var(--syn-color-neutral-200) !default;
225
- $SynColorNeutral300: var(--syn-color-neutral-300) !default;
226
- $SynColorNeutral400: var(--syn-color-neutral-400) !default;
227
- $SynColorNeutral500: var(--syn-color-neutral-500) !default;
228
- $SynColorNeutral600: var(--syn-color-neutral-600) !default;
229
- $SynColorNeutral700: var(--syn-color-neutral-700) !default;
230
- $SynColorNeutral800: var(--syn-color-neutral-800) !default;
231
- $SynColorNeutral900: var(--syn-color-neutral-900) !default;
232
- $SynColorNeutral950: var(--syn-color-neutral-950) !default;
233
- $SynColorNeutral1000: var(--syn-color-neutral-1000) !default;
234
- $SynBorderRadiusLarge: var(--syn-border-radius-large) !default;
235
- $SynBorderRadiusXLarge: var(--syn-border-radius-x-large) !default;
236
- $SynShadowXSmall: var(--syn-shadow-x-small) !default;
237
- $SynShadowSmall: var(--syn-shadow-small) !default;
238
- $SynTransitionXSlow: var(--syn-transition-x-slow) !default;
239
- $SynTransitionSlow: var(--syn-transition-slow) !default;
240
- $SynTransitionMedium: var(--syn-transition-medium) !default;
241
- $SynTransitionFast: var(--syn-transition-fast) !default;
242
- $SynTransitionXFast: var(--syn-transition-x-fast) !default;
243
- $SynFontSerif: var(--syn-font-serif) !default;
244
- $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
245
- $SynFontSize4xLarge: var(--syn-font-size-4x-large) !default;
246
- $SynFontWeightLight: var(--syn-font-weight-light) !default;
247
- $SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
248
- $SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
249
- $SynLetterSpacingNormal: var(--syn-letter-spacing-normal) !default;
250
- $SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
251
- $SynLetterSpacingLooser: var(--syn-letter-spacing-looser) !default;
252
- $SynFocusRingStyle: var(--syn-focus-ring-style) !default;
253
262
  $SynFocusRing: var(--syn-focus-ring) !default;
254
- $SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
255
- $SynInputBorderWidth: var(--syn-input-border-width) !default;
256
- $SynInputFontFamily: var(--syn-input-font-family) !default;
257
- $SynInputFontWeight: var(--syn-input-font-weight) !default;
258
- $SynInputLetterSpacing: var(--syn-input-letter-spacing) !default;
259
- $SynZIndexDrawer: var(--syn-z-index-drawer) !default;
260
- $SynZIndexDialog: var(--syn-z-index-dialog) !default;
261
- $SynZIndexDropdown: var(--syn-z-index-dropdown) !default;
262
- $SynZIndexToast: var(--syn-z-index-toast) !default;
263
- $SynZIndexTooltip: var(--syn-z-index-tooltip) !default;