@synergy-design-system/tokens 2.39.0 → 2.41.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.
- package/CHANGELOG.md +16 -0
- package/dist/js/index.d.ts +31 -1
- package/dist/js/index.js +31 -1
- package/dist/scss/_tokens.scss +7 -1
- package/dist/themes/dark.css +11 -5
- package/dist/themes/light.css +11 -5
- package/dist/themes/sick2018_dark.css +11 -5
- package/dist/themes/sick2018_light.css +11 -5
- package/dist/themes/sick2025_dark.css +22 -16
- package/dist/themes/sick2025_light.css +11 -5
- package/package.json +3 -3
- package/src/figma-variables/output/sick2018-dark.json +80 -4
- package/src/figma-variables/output/sick2018-light.json +80 -4
- package/src/figma-variables/output/sick2025-dark.json +91 -15
- package/src/figma-variables/output/sick2025-light.json +80 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.41.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
|
|
8
|
+
|
|
9
|
+
feat: ✨ Brand update for syn-range and syn-range-tick (#966)
|
|
10
|
+
|
|
11
|
+
## 2.40.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#1072](https://github.com/synergy-design-system/synergy-design-system/pull/1072) [`81dae1e`](https://github.com/synergy-design-system/synergy-design-system/commit/81dae1e912bcbdefb4346b4a3bbc245f7fac9f12) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-07
|
|
16
|
+
|
|
17
|
+
feat: ✨ Brand updates for `<syn-card>` (#942)
|
|
18
|
+
|
|
3
19
|
## 2.39.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/dist/js/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError: string;
|
|
|
833
833
|
*/
|
|
834
834
|
export const SynInputBorderColorHover: string;
|
|
835
835
|
|
|
836
|
+
/**
|
|
837
|
+
* Maps to the css variable `--syn-input-border-color-offset`
|
|
838
|
+
*/
|
|
839
|
+
export const SynInputBorderColorOffset: string;
|
|
840
|
+
|
|
836
841
|
/**
|
|
837
842
|
* Maps to the css variable `--syn-input-border-radius-large`
|
|
838
843
|
*/
|
|
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor: string;
|
|
|
1248
1253
|
*/
|
|
1249
1254
|
export const SynProgressTrackColor: string;
|
|
1250
1255
|
|
|
1256
|
+
/**
|
|
1257
|
+
* Maps to the css variable `--syn-range-color-inactive`
|
|
1258
|
+
*/
|
|
1259
|
+
export const SynRangeColorInactive: string;
|
|
1260
|
+
|
|
1261
|
+
/**
|
|
1262
|
+
* Maps to the css variable `--syn-range-error-color`
|
|
1263
|
+
*/
|
|
1264
|
+
export const SynRangeErrorColor: string;
|
|
1265
|
+
|
|
1266
|
+
/**
|
|
1267
|
+
* Maps to the css variable `--syn-range-tick-color`
|
|
1268
|
+
*/
|
|
1269
|
+
export const SynRangeTickColor: string;
|
|
1270
|
+
|
|
1271
|
+
/**
|
|
1272
|
+
* Maps to the css variable `--syn-range-track-color-active`
|
|
1273
|
+
*/
|
|
1274
|
+
export const SynRangeTrackColorActive: string;
|
|
1275
|
+
|
|
1276
|
+
/**
|
|
1277
|
+
* Maps to the css variable `--syn-readonly-background-color`
|
|
1278
|
+
*/
|
|
1279
|
+
export const SynReadonlyBackgroundColor: string;
|
|
1280
|
+
|
|
1251
1281
|
/**
|
|
1252
1282
|
* Maps to the css variable `--syn-spacing-2x-large`
|
|
1253
1283
|
*/
|
package/dist/js/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError = 'var(--syn-input-border-color-focus
|
|
|
833
833
|
*/
|
|
834
834
|
export const SynInputBorderColorHover = 'var(--syn-input-border-color-hover)';
|
|
835
835
|
|
|
836
|
+
/**
|
|
837
|
+
* @type {string}
|
|
838
|
+
*/
|
|
839
|
+
export const SynInputBorderColorOffset = 'var(--syn-input-border-color-offset)';
|
|
840
|
+
|
|
836
841
|
/**
|
|
837
842
|
* @type {string}
|
|
838
843
|
*/
|
|
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
|
|
|
1248
1253
|
*/
|
|
1249
1254
|
export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
|
|
1250
1255
|
|
|
1256
|
+
/**
|
|
1257
|
+
* @type {string}
|
|
1258
|
+
*/
|
|
1259
|
+
export const SynRangeColorInactive = 'var(--syn-range-color-inactive)';
|
|
1260
|
+
|
|
1261
|
+
/**
|
|
1262
|
+
* @type {string}
|
|
1263
|
+
*/
|
|
1264
|
+
export const SynRangeErrorColor = 'var(--syn-range-error-color)';
|
|
1265
|
+
|
|
1266
|
+
/**
|
|
1267
|
+
* @type {string}
|
|
1268
|
+
*/
|
|
1269
|
+
export const SynRangeTickColor = 'var(--syn-range-tick-color)';
|
|
1270
|
+
|
|
1271
|
+
/**
|
|
1272
|
+
* @type {string}
|
|
1273
|
+
*/
|
|
1274
|
+
export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
|
|
1275
|
+
|
|
1276
|
+
/**
|
|
1277
|
+
* @type {string}
|
|
1278
|
+
*/
|
|
1279
|
+
export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
|
|
1280
|
+
|
|
1251
1281
|
/**
|
|
1252
1282
|
* @type {string}
|
|
1253
1283
|
*/
|
package/dist/scss/_tokens.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
*/
|
|
5
5
|
$SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
|
|
@@ -168,6 +168,7 @@ $SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
|
|
|
168
168
|
$SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
|
|
169
169
|
$SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
|
|
170
170
|
$SynInputBorderColorHover: var(--syn-input-border-color-hover) !default;
|
|
171
|
+
$SynInputBorderColorOffset: var(--syn-input-border-color-offset) !default;
|
|
171
172
|
$SynInputBorderRadiusLarge: var(--syn-input-border-radius-large) !default;
|
|
172
173
|
$SynInputBorderRadiusMedium: var(--syn-input-border-radius-medium) !default;
|
|
173
174
|
$SynInputBorderRadiusSmall: var(--syn-input-border-radius-small) !default;
|
|
@@ -251,6 +252,11 @@ $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
|
|
|
251
252
|
$SynPanelBorderWidth: var(--syn-panel-border-width) !default;
|
|
252
253
|
$SynProgressIndicatorColor: var(--syn-progress-indicator-color) !default;
|
|
253
254
|
$SynProgressTrackColor: var(--syn-progress-track-color) !default;
|
|
255
|
+
$SynRangeColorInactive: var(--syn-range-color-inactive) !default;
|
|
256
|
+
$SynRangeErrorColor: var(--syn-range-error-color) !default;
|
|
257
|
+
$SynRangeTickColor: var(--syn-range-tick-color) !default;
|
|
258
|
+
$SynRangeTrackColorActive: var(--syn-range-track-color-active) !default;
|
|
259
|
+
$SynReadonlyBackgroundColor: var(--syn-readonly-background-color) !default;
|
|
254
260
|
$SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
|
|
255
261
|
$SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
|
|
256
262
|
$SynSpacing3xLarge: var(--syn-spacing-3x-large) !default;
|
package/dist/themes/dark.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
174
174
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
175
175
|
--syn-input-border-color-hover: var(--syn-color-neutral-950);
|
|
176
|
+
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
176
177
|
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
177
178
|
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
178
179
|
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
@@ -210,10 +211,10 @@
|
|
|
210
211
|
--syn-input-placeholder-color: var(--syn-color-neutral-500);
|
|
211
212
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
|
|
212
213
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
213
|
-
--syn-input-readonly-background-color: var(--syn-
|
|
214
|
-
--syn-input-readonly-background-color-disabled: var(--syn-
|
|
215
|
-
--syn-input-readonly-background-color-focus: var(--syn-
|
|
216
|
-
--syn-input-readonly-background-color-hover: var(--syn-
|
|
214
|
+
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
215
|
+
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
216
|
+
--syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
|
|
217
|
+
--syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
|
|
217
218
|
--syn-input-required-content: "*";
|
|
218
219
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
219
220
|
--syn-input-required-content-offset: -2px;
|
|
@@ -256,6 +257,11 @@
|
|
|
256
257
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
257
258
|
--syn-progress-indicator-color: var(--syn-color-primary-600);
|
|
258
259
|
--syn-progress-track-color: var(--syn-color-neutral-200);
|
|
260
|
+
--syn-range-color-inactive: var(--syn-color-neutral-200);
|
|
261
|
+
--syn-range-error-color: var(--syn-color-error-700);
|
|
262
|
+
--syn-range-tick-color: var(--syn-color-neutral-400);
|
|
263
|
+
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
264
|
+
--syn-readonly-background-color: var(--syn-color-neutral-300);
|
|
259
265
|
--syn-spacing-2x-large: 48px;
|
|
260
266
|
--syn-spacing-2x-small: 4px;
|
|
261
267
|
--syn-spacing-3x-large: 64px;
|
package/dist/themes/light.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
174
174
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
175
175
|
--syn-input-border-color-hover: var(--syn-color-neutral-950);
|
|
176
|
+
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
176
177
|
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
177
178
|
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
178
179
|
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
@@ -210,10 +211,10 @@
|
|
|
210
211
|
--syn-input-placeholder-color: var(--syn-color-neutral-500);
|
|
211
212
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
|
|
212
213
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
213
|
-
--syn-input-readonly-background-color: var(--syn-
|
|
214
|
-
--syn-input-readonly-background-color-disabled: var(--syn-
|
|
215
|
-
--syn-input-readonly-background-color-focus: var(--syn-
|
|
216
|
-
--syn-input-readonly-background-color-hover: var(--syn-
|
|
214
|
+
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
215
|
+
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
216
|
+
--syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
|
|
217
|
+
--syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
|
|
217
218
|
--syn-input-required-content: "*";
|
|
218
219
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
219
220
|
--syn-input-required-content-offset: -2px;
|
|
@@ -256,6 +257,11 @@
|
|
|
256
257
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
257
258
|
--syn-progress-indicator-color: var(--syn-color-primary-600);
|
|
258
259
|
--syn-progress-track-color: var(--syn-color-neutral-200);
|
|
260
|
+
--syn-range-color-inactive: var(--syn-color-neutral-200);
|
|
261
|
+
--syn-range-error-color: var(--syn-color-error-700);
|
|
262
|
+
--syn-range-tick-color: var(--syn-color-neutral-400);
|
|
263
|
+
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
264
|
+
--syn-readonly-background-color: var(--syn-color-neutral-300);
|
|
259
265
|
--syn-spacing-2x-large: 48px;
|
|
260
266
|
--syn-spacing-2x-small: 4px;
|
|
261
267
|
--syn-spacing-3x-large: 64px;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
174
174
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
175
175
|
--syn-input-border-color-hover: var(--syn-color-neutral-950);
|
|
176
|
+
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
176
177
|
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
177
178
|
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
178
179
|
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
@@ -210,10 +211,10 @@
|
|
|
210
211
|
--syn-input-placeholder-color: var(--syn-color-neutral-500);
|
|
211
212
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
|
|
212
213
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
213
|
-
--syn-input-readonly-background-color: var(--syn-
|
|
214
|
-
--syn-input-readonly-background-color-disabled: var(--syn-
|
|
215
|
-
--syn-input-readonly-background-color-focus: var(--syn-
|
|
216
|
-
--syn-input-readonly-background-color-hover: var(--syn-
|
|
214
|
+
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
215
|
+
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
216
|
+
--syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
|
|
217
|
+
--syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
|
|
217
218
|
--syn-input-required-content: "*";
|
|
218
219
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
219
220
|
--syn-input-required-content-offset: -2px;
|
|
@@ -256,6 +257,11 @@
|
|
|
256
257
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
257
258
|
--syn-progress-indicator-color: var(--syn-color-primary-600);
|
|
258
259
|
--syn-progress-track-color: var(--syn-color-neutral-200);
|
|
260
|
+
--syn-range-color-inactive: var(--syn-color-neutral-200);
|
|
261
|
+
--syn-range-error-color: var(--syn-color-error-700);
|
|
262
|
+
--syn-range-tick-color: var(--syn-color-neutral-400);
|
|
263
|
+
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
264
|
+
--syn-readonly-background-color: var(--syn-color-neutral-300);
|
|
259
265
|
--syn-spacing-2x-large: 48px;
|
|
260
266
|
--syn-spacing-2x-small: 4px;
|
|
261
267
|
--syn-spacing-3x-large: 64px;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
174
174
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
175
175
|
--syn-input-border-color-hover: var(--syn-color-neutral-950);
|
|
176
|
+
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
176
177
|
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
177
178
|
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
178
179
|
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
@@ -210,10 +211,10 @@
|
|
|
210
211
|
--syn-input-placeholder-color: var(--syn-color-neutral-500);
|
|
211
212
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
|
|
212
213
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
213
|
-
--syn-input-readonly-background-color: var(--syn-
|
|
214
|
-
--syn-input-readonly-background-color-disabled: var(--syn-
|
|
215
|
-
--syn-input-readonly-background-color-focus: var(--syn-
|
|
216
|
-
--syn-input-readonly-background-color-hover: var(--syn-
|
|
214
|
+
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
215
|
+
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
216
|
+
--syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
|
|
217
|
+
--syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
|
|
217
218
|
--syn-input-required-content: "*";
|
|
218
219
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
219
220
|
--syn-input-required-content-offset: -2px;
|
|
@@ -256,6 +257,11 @@
|
|
|
256
257
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
257
258
|
--syn-progress-indicator-color: var(--syn-color-primary-600);
|
|
258
259
|
--syn-progress-track-color: var(--syn-color-neutral-200);
|
|
260
|
+
--syn-range-color-inactive: var(--syn-color-neutral-200);
|
|
261
|
+
--syn-range-error-color: var(--syn-color-error-700);
|
|
262
|
+
--syn-range-tick-color: var(--syn-color-neutral-400);
|
|
263
|
+
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
264
|
+
--syn-readonly-background-color: var(--syn-color-neutral-300);
|
|
259
265
|
--syn-spacing-2x-large: 48px;
|
|
260
266
|
--syn-spacing-2x-small: 4px;
|
|
261
267
|
--syn-spacing-3x-large: 64px;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--syn-input-border-color-focus: var(--syn-color-primary-400);
|
|
174
174
|
--syn-input-border-color-focus-error: var(--syn-color-error-600);
|
|
175
175
|
--syn-input-border-color-hover: var(--syn-color-primary-400);
|
|
176
|
+
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
176
177
|
--syn-input-border-radius-large: var(--syn-border-radius-medium);
|
|
177
178
|
--syn-input-border-radius-medium: var(--syn-border-radius-medium);
|
|
178
179
|
--syn-input-border-radius-small: var(--syn-border-radius-medium);
|
|
@@ -210,10 +211,10 @@
|
|
|
210
211
|
--syn-input-placeholder-color: var(--syn-color-neutral-800);
|
|
211
212
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
|
|
212
213
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
213
|
-
--syn-input-readonly-background-color: var(--syn-
|
|
214
|
-
--syn-input-readonly-background-color-disabled: var(--syn-
|
|
215
|
-
--syn-input-readonly-background-color-focus: var(--syn-
|
|
216
|
-
--syn-input-readonly-background-color-hover: var(--syn-
|
|
214
|
+
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
215
|
+
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
216
|
+
--syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
|
|
217
|
+
--syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
|
|
217
218
|
--syn-input-required-content: "*";
|
|
218
219
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
219
220
|
--syn-input-required-content-offset: -2px;
|
|
@@ -256,6 +257,11 @@
|
|
|
256
257
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
257
258
|
--syn-progress-indicator-color: var(--syn-color-primary-500);
|
|
258
259
|
--syn-progress-track-color: var(--syn-color-neutral-300);
|
|
260
|
+
--syn-range-color-inactive: var(--syn-color-neutral-300);
|
|
261
|
+
--syn-range-error-color: var(--syn-color-error-600);
|
|
262
|
+
--syn-range-tick-color: var(--syn-color-neutral-600);
|
|
263
|
+
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
264
|
+
--syn-readonly-background-color: var(--syn-color-neutral-300);
|
|
259
265
|
--syn-spacing-2x-large: 48px;
|
|
260
266
|
--syn-spacing-2x-small: 4px;
|
|
261
267
|
--syn-spacing-3x-large: 64px;
|
|
@@ -274,8 +280,8 @@
|
|
|
274
280
|
--syn-table-background-color-alternating: var(--syn-color-neutral-200);
|
|
275
281
|
--syn-table-background-color-header: var(--syn-color-neutral-300);
|
|
276
282
|
--syn-table-border-color: var(--syn-color-neutral-300);
|
|
277
|
-
--syn-table-shadow-end: rgba(
|
|
278
|
-
--syn-table-shadow-start: rgba(
|
|
283
|
+
--syn-table-shadow-end: rgba(13, 13, 13, 0);
|
|
284
|
+
--syn-table-shadow-start: rgba(13, 13, 13, 0.8);
|
|
279
285
|
--syn-text-decoration-default: none;
|
|
280
286
|
--syn-text-decoration-underline: underline;
|
|
281
287
|
--syn-toggle-size-large: var(--syn-spacing-large);
|
|
@@ -302,15 +308,15 @@
|
|
|
302
308
|
--syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
|
|
303
309
|
--syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
|
|
304
310
|
--syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
|
|
305
|
-
--syn-shadow-medium: 0px 1px 2px 0px rgba(
|
|
306
|
-
--syn-shadow-large: 0px 0px 3px 0px rgba(
|
|
307
|
-
--syn-shadow-x-large: 0px 1px 4px 0px rgba(
|
|
308
|
-
--syn-shadow-overflow-down: 0px 1px 4px 0px rgba(
|
|
309
|
-
--syn-shadow-overflow-up: 0px -1px 4px 0px rgba(
|
|
310
|
-
--syn-shadow-overflow-left: -1px 0px 4px 0px rgba(
|
|
311
|
-
--syn-shadow-overflow-right: 1px 0px 4px 0px rgba(
|
|
312
|
-
--syn-shadow-x-small: 0px 1px 2px 0px rgba(
|
|
313
|
-
--syn-shadow-small: 0px 1px 2px 0px rgba(
|
|
311
|
+
--syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
|
|
312
|
+
--syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
|
|
313
|
+
--syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
|
|
314
|
+
--syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
|
|
315
|
+
--syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
|
|
316
|
+
--syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
|
|
317
|
+
--syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
|
|
318
|
+
--syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
|
|
319
|
+
--syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
|
|
314
320
|
--syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
315
321
|
--syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
316
322
|
--syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.40.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--syn-input-border-color-focus: var(--syn-color-primary-700);
|
|
174
174
|
--syn-input-border-color-focus-error: var(--syn-color-error-600);
|
|
175
175
|
--syn-input-border-color-hover: var(--syn-color-primary-700);
|
|
176
|
+
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
176
177
|
--syn-input-border-radius-large: var(--syn-border-radius-medium);
|
|
177
178
|
--syn-input-border-radius-medium: var(--syn-border-radius-medium);
|
|
178
179
|
--syn-input-border-radius-small: var(--syn-border-radius-medium);
|
|
@@ -210,10 +211,10 @@
|
|
|
210
211
|
--syn-input-placeholder-color: var(--syn-color-neutral-700);
|
|
211
212
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
|
|
212
213
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
213
|
-
--syn-input-readonly-background-color:
|
|
214
|
-
--syn-input-readonly-background-color-disabled:
|
|
215
|
-
--syn-input-readonly-background-color-focus:
|
|
216
|
-
--syn-input-readonly-background-color-hover:
|
|
214
|
+
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
215
|
+
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
216
|
+
--syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
|
|
217
|
+
--syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
|
|
217
218
|
--syn-input-required-content: "*";
|
|
218
219
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
219
220
|
--syn-input-required-content-offset: -2px;
|
|
@@ -256,6 +257,11 @@
|
|
|
256
257
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
257
258
|
--syn-progress-indicator-color: var(--syn-color-primary-700);
|
|
258
259
|
--syn-progress-track-color: var(--syn-color-neutral-100);
|
|
260
|
+
--syn-range-color-inactive: var(--syn-color-neutral-100);
|
|
261
|
+
--syn-range-error-color: var(--syn-color-error-600);
|
|
262
|
+
--syn-range-tick-color: var(--syn-color-neutral-500);
|
|
263
|
+
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
264
|
+
--syn-readonly-background-color: #e6e1dc;
|
|
259
265
|
--syn-spacing-2x-large: 48px;
|
|
260
266
|
--syn-spacing-2x-small: 4px;
|
|
261
267
|
--syn-spacing-3x-large: 64px;
|
package/package.json
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"style-dictionary": "^5.0.1",
|
|
21
21
|
"stylelint": "^16.23.0",
|
|
22
22
|
"typescript": "^5.8.3",
|
|
23
|
-
"@synergy-design-system/
|
|
24
|
-
"@synergy-design-system/
|
|
23
|
+
"@synergy-design-system/stylelint-config-syn": "0.1.0",
|
|
24
|
+
"@synergy-design-system/eslint-config-syn": "0.1.0"
|
|
25
25
|
},
|
|
26
26
|
"exports": {
|
|
27
27
|
".": {
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
},
|
|
58
58
|
"type": "module",
|
|
59
59
|
"types": "./dist/js/index.d.ts",
|
|
60
|
-
"version": "2.
|
|
60
|
+
"version": "2.41.0",
|
|
61
61
|
"scripts": {
|
|
62
62
|
"build": "pnpm clean && node scripts/build.js",
|
|
63
63
|
"build:all": "dotenvx -q run pnpm build:_all",
|
|
@@ -944,19 +944,19 @@
|
|
|
944
944
|
"readonly-background": {
|
|
945
945
|
"color": {
|
|
946
946
|
"type": "color",
|
|
947
|
-
"value": "{
|
|
947
|
+
"value": "{readonly.background.color}"
|
|
948
948
|
},
|
|
949
949
|
"color-disabled": {
|
|
950
950
|
"type": "color",
|
|
951
|
-
"value": "{
|
|
951
|
+
"value": "{readonly.background.color}"
|
|
952
952
|
},
|
|
953
953
|
"color-focus": {
|
|
954
954
|
"type": "color",
|
|
955
|
-
"value": "{
|
|
955
|
+
"value": "{readonly.background.color}"
|
|
956
956
|
},
|
|
957
957
|
"color-hover": {
|
|
958
958
|
"type": "color",
|
|
959
|
-
"value": "{
|
|
959
|
+
"value": "{readonly.background.color}"
|
|
960
960
|
}
|
|
961
961
|
},
|
|
962
962
|
"required": {
|
|
@@ -994,6 +994,10 @@
|
|
|
994
994
|
},
|
|
995
995
|
"interactive": {
|
|
996
996
|
"background": {
|
|
997
|
+
"color-active": {
|
|
998
|
+
"type": "color",
|
|
999
|
+
"value": "{color.neutral.200}"
|
|
1000
|
+
},
|
|
997
1001
|
"color-hover": {
|
|
998
1002
|
"type": "color",
|
|
999
1003
|
"value": "{color.neutral.100}"
|
|
@@ -1180,6 +1184,60 @@
|
|
|
1180
1184
|
}
|
|
1181
1185
|
}
|
|
1182
1186
|
},
|
|
1187
|
+
"range": {
|
|
1188
|
+
"color-inactive": {
|
|
1189
|
+
"type": "color",
|
|
1190
|
+
"value": "{color.neutral.200}"
|
|
1191
|
+
},
|
|
1192
|
+
"color-readonly": {
|
|
1193
|
+
"type": "color",
|
|
1194
|
+
"value": "{input.readonly-background.color}"
|
|
1195
|
+
},
|
|
1196
|
+
"error": {
|
|
1197
|
+
"color": {
|
|
1198
|
+
"type": "color",
|
|
1199
|
+
"value": "{color.error.700}"
|
|
1200
|
+
}
|
|
1201
|
+
},
|
|
1202
|
+
"tick": {
|
|
1203
|
+
"color": {
|
|
1204
|
+
"type": "color",
|
|
1205
|
+
"value": "{color.neutral.400}"
|
|
1206
|
+
}
|
|
1207
|
+
},
|
|
1208
|
+
"track": {
|
|
1209
|
+
"color-active": {
|
|
1210
|
+
"type": "color",
|
|
1211
|
+
"value": "{interactive.emphasis.color}"
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
},
|
|
1215
|
+
"readonly": {
|
|
1216
|
+
"background": {
|
|
1217
|
+
"color": {
|
|
1218
|
+
"type": "color",
|
|
1219
|
+
"value": "{color.neutral.300}"
|
|
1220
|
+
}
|
|
1221
|
+
},
|
|
1222
|
+
"border": {
|
|
1223
|
+
"color": {
|
|
1224
|
+
"type": "color",
|
|
1225
|
+
"value": "{typography.color.text}"
|
|
1226
|
+
}
|
|
1227
|
+
},
|
|
1228
|
+
"indicator": {
|
|
1229
|
+
"color": {
|
|
1230
|
+
"type": "color",
|
|
1231
|
+
"value": "{typography.color.text}"
|
|
1232
|
+
}
|
|
1233
|
+
},
|
|
1234
|
+
"opacity": {
|
|
1235
|
+
"color": {
|
|
1236
|
+
"type": "color",
|
|
1237
|
+
"value": "rgba(115, 127, 133, 0.70)"
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
},
|
|
1183
1241
|
"spacing": {
|
|
1184
1242
|
"2x-large": {
|
|
1185
1243
|
"type": "sizing",
|
|
@@ -1506,6 +1564,20 @@
|
|
|
1506
1564
|
"type": "typography",
|
|
1507
1565
|
"value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
|
|
1508
1566
|
}
|
|
1567
|
+
},
|
|
1568
|
+
"2x-small": {
|
|
1569
|
+
"regular": {
|
|
1570
|
+
"type": "typography",
|
|
1571
|
+
"value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
|
|
1572
|
+
},
|
|
1573
|
+
"semibold": {
|
|
1574
|
+
"type": "typography",
|
|
1575
|
+
"value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1576
|
+
},
|
|
1577
|
+
"bold": {
|
|
1578
|
+
"type": "typography",
|
|
1579
|
+
"value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1580
|
+
}
|
|
1509
1581
|
}
|
|
1510
1582
|
},
|
|
1511
1583
|
"heading": {
|
|
@@ -1524,6 +1596,10 @@
|
|
|
1524
1596
|
"3x-large": {
|
|
1525
1597
|
"type": "typography",
|
|
1526
1598
|
"value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
|
|
1599
|
+
},
|
|
1600
|
+
"4x-large": {
|
|
1601
|
+
"type": "typography",
|
|
1602
|
+
"value": "{font-weight.bold} 52/1.2 {font.sans}"
|
|
1527
1603
|
}
|
|
1528
1604
|
}
|
|
1529
1605
|
}
|
|
@@ -944,19 +944,19 @@
|
|
|
944
944
|
"readonly-background": {
|
|
945
945
|
"color": {
|
|
946
946
|
"type": "color",
|
|
947
|
-
"value": "{
|
|
947
|
+
"value": "{readonly.background.color}"
|
|
948
948
|
},
|
|
949
949
|
"color-disabled": {
|
|
950
950
|
"type": "color",
|
|
951
|
-
"value": "{
|
|
951
|
+
"value": "{readonly.background.color}"
|
|
952
952
|
},
|
|
953
953
|
"color-focus": {
|
|
954
954
|
"type": "color",
|
|
955
|
-
"value": "{
|
|
955
|
+
"value": "{readonly.background.color}"
|
|
956
956
|
},
|
|
957
957
|
"color-hover": {
|
|
958
958
|
"type": "color",
|
|
959
|
-
"value": "{
|
|
959
|
+
"value": "{readonly.background.color}"
|
|
960
960
|
}
|
|
961
961
|
},
|
|
962
962
|
"required": {
|
|
@@ -994,6 +994,10 @@
|
|
|
994
994
|
},
|
|
995
995
|
"interactive": {
|
|
996
996
|
"background": {
|
|
997
|
+
"color-active": {
|
|
998
|
+
"type": "color",
|
|
999
|
+
"value": "{color.neutral.200}"
|
|
1000
|
+
},
|
|
997
1001
|
"color-hover": {
|
|
998
1002
|
"type": "color",
|
|
999
1003
|
"value": "{color.neutral.100}"
|
|
@@ -1180,6 +1184,60 @@
|
|
|
1180
1184
|
}
|
|
1181
1185
|
}
|
|
1182
1186
|
},
|
|
1187
|
+
"range": {
|
|
1188
|
+
"color-inactive": {
|
|
1189
|
+
"type": "color",
|
|
1190
|
+
"value": "{color.neutral.200}"
|
|
1191
|
+
},
|
|
1192
|
+
"color-readonly": {
|
|
1193
|
+
"type": "color",
|
|
1194
|
+
"value": "{input.readonly-background.color}"
|
|
1195
|
+
},
|
|
1196
|
+
"error": {
|
|
1197
|
+
"color": {
|
|
1198
|
+
"type": "color",
|
|
1199
|
+
"value": "{color.error.700}"
|
|
1200
|
+
}
|
|
1201
|
+
},
|
|
1202
|
+
"tick": {
|
|
1203
|
+
"color": {
|
|
1204
|
+
"type": "color",
|
|
1205
|
+
"value": "{color.neutral.400}"
|
|
1206
|
+
}
|
|
1207
|
+
},
|
|
1208
|
+
"track": {
|
|
1209
|
+
"color-active": {
|
|
1210
|
+
"type": "color",
|
|
1211
|
+
"value": "{interactive.emphasis.color}"
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
},
|
|
1215
|
+
"readonly": {
|
|
1216
|
+
"background": {
|
|
1217
|
+
"color": {
|
|
1218
|
+
"type": "color",
|
|
1219
|
+
"value": "{color.neutral.300}"
|
|
1220
|
+
}
|
|
1221
|
+
},
|
|
1222
|
+
"border": {
|
|
1223
|
+
"color": {
|
|
1224
|
+
"type": "color",
|
|
1225
|
+
"value": "{typography.color.text}"
|
|
1226
|
+
}
|
|
1227
|
+
},
|
|
1228
|
+
"indicator": {
|
|
1229
|
+
"color": {
|
|
1230
|
+
"type": "color",
|
|
1231
|
+
"value": "{typography.color.text}"
|
|
1232
|
+
}
|
|
1233
|
+
},
|
|
1234
|
+
"opacity": {
|
|
1235
|
+
"color": {
|
|
1236
|
+
"type": "color",
|
|
1237
|
+
"value": "rgba(213, 219, 221, 0.70)"
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
},
|
|
1183
1241
|
"spacing": {
|
|
1184
1242
|
"2x-large": {
|
|
1185
1243
|
"type": "sizing",
|
|
@@ -1506,6 +1564,20 @@
|
|
|
1506
1564
|
"type": "typography",
|
|
1507
1565
|
"value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
|
|
1508
1566
|
}
|
|
1567
|
+
},
|
|
1568
|
+
"2x-small": {
|
|
1569
|
+
"regular": {
|
|
1570
|
+
"type": "typography",
|
|
1571
|
+
"value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
|
|
1572
|
+
},
|
|
1573
|
+
"semibold": {
|
|
1574
|
+
"type": "typography",
|
|
1575
|
+
"value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1576
|
+
},
|
|
1577
|
+
"bold": {
|
|
1578
|
+
"type": "typography",
|
|
1579
|
+
"value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1580
|
+
}
|
|
1509
1581
|
}
|
|
1510
1582
|
},
|
|
1511
1583
|
"heading": {
|
|
@@ -1524,6 +1596,10 @@
|
|
|
1524
1596
|
"3x-large": {
|
|
1525
1597
|
"type": "typography",
|
|
1526
1598
|
"value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
|
|
1599
|
+
},
|
|
1600
|
+
"4x-large": {
|
|
1601
|
+
"type": "typography",
|
|
1602
|
+
"value": "{font-weight.bold} 52/1.2 {font.sans}"
|
|
1527
1603
|
}
|
|
1528
1604
|
}
|
|
1529
1605
|
}
|
|
@@ -944,19 +944,19 @@
|
|
|
944
944
|
"readonly-background": {
|
|
945
945
|
"color": {
|
|
946
946
|
"type": "color",
|
|
947
|
-
"value": "{
|
|
947
|
+
"value": "{readonly.background.color}"
|
|
948
948
|
},
|
|
949
949
|
"color-disabled": {
|
|
950
950
|
"type": "color",
|
|
951
|
-
"value": "{
|
|
951
|
+
"value": "{readonly.background.color}"
|
|
952
952
|
},
|
|
953
953
|
"color-focus": {
|
|
954
954
|
"type": "color",
|
|
955
|
-
"value": "{
|
|
955
|
+
"value": "{readonly.background.color}"
|
|
956
956
|
},
|
|
957
957
|
"color-hover": {
|
|
958
958
|
"type": "color",
|
|
959
|
-
"value": "{
|
|
959
|
+
"value": "{readonly.background.color}"
|
|
960
960
|
}
|
|
961
961
|
},
|
|
962
962
|
"required": {
|
|
@@ -994,6 +994,10 @@
|
|
|
994
994
|
},
|
|
995
995
|
"interactive": {
|
|
996
996
|
"background": {
|
|
997
|
+
"color-active": {
|
|
998
|
+
"type": "color",
|
|
999
|
+
"value": "{color.neutral.200}"
|
|
1000
|
+
},
|
|
997
1001
|
"color-hover": {
|
|
998
1002
|
"type": "color",
|
|
999
1003
|
"value": "{color.neutral.100}"
|
|
@@ -1180,6 +1184,60 @@
|
|
|
1180
1184
|
}
|
|
1181
1185
|
}
|
|
1182
1186
|
},
|
|
1187
|
+
"range": {
|
|
1188
|
+
"color-inactive": {
|
|
1189
|
+
"type": "color",
|
|
1190
|
+
"value": "{color.neutral.300}"
|
|
1191
|
+
},
|
|
1192
|
+
"color-readonly": {
|
|
1193
|
+
"type": "color",
|
|
1194
|
+
"value": "{input.readonly-background.color}"
|
|
1195
|
+
},
|
|
1196
|
+
"error": {
|
|
1197
|
+
"color": {
|
|
1198
|
+
"type": "color",
|
|
1199
|
+
"value": "{color.error.600}"
|
|
1200
|
+
}
|
|
1201
|
+
},
|
|
1202
|
+
"tick": {
|
|
1203
|
+
"color": {
|
|
1204
|
+
"type": "color",
|
|
1205
|
+
"value": "{color.neutral.600}"
|
|
1206
|
+
}
|
|
1207
|
+
},
|
|
1208
|
+
"track": {
|
|
1209
|
+
"color-active": {
|
|
1210
|
+
"type": "color",
|
|
1211
|
+
"value": "{interactive.emphasis.color}"
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
},
|
|
1215
|
+
"readonly": {
|
|
1216
|
+
"background": {
|
|
1217
|
+
"color": {
|
|
1218
|
+
"type": "color",
|
|
1219
|
+
"value": "{color.neutral.300}"
|
|
1220
|
+
}
|
|
1221
|
+
},
|
|
1222
|
+
"border": {
|
|
1223
|
+
"color": {
|
|
1224
|
+
"type": "color",
|
|
1225
|
+
"value": "{typography.color.text}"
|
|
1226
|
+
}
|
|
1227
|
+
},
|
|
1228
|
+
"indicator": {
|
|
1229
|
+
"color": {
|
|
1230
|
+
"type": "color",
|
|
1231
|
+
"value": "{typography.color.text}"
|
|
1232
|
+
}
|
|
1233
|
+
},
|
|
1234
|
+
"opacity": {
|
|
1235
|
+
"color": {
|
|
1236
|
+
"type": "color",
|
|
1237
|
+
"value": "rgba(38, 47, 85, 0.55)"
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
},
|
|
1183
1241
|
"spacing": {
|
|
1184
1242
|
"2x-large": {
|
|
1185
1243
|
"type": "sizing",
|
|
@@ -1264,11 +1322,11 @@
|
|
|
1264
1322
|
"shadow": {
|
|
1265
1323
|
"end": {
|
|
1266
1324
|
"type": "color",
|
|
1267
|
-
"value": "rgba(
|
|
1325
|
+
"value": "rgba(13, 13, 13, 0.00)"
|
|
1268
1326
|
},
|
|
1269
1327
|
"start": {
|
|
1270
1328
|
"type": "color",
|
|
1271
|
-
"value": "rgba(
|
|
1329
|
+
"value": "rgba(13, 13, 13, 0.80)"
|
|
1272
1330
|
}
|
|
1273
1331
|
}
|
|
1274
1332
|
},
|
|
@@ -1415,39 +1473,39 @@
|
|
|
1415
1473
|
"shadow": {
|
|
1416
1474
|
"medium": {
|
|
1417
1475
|
"type": "shadow",
|
|
1418
|
-
"value": "0px 1px 2px 0px rgba(
|
|
1476
|
+
"value": "0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08)"
|
|
1419
1477
|
},
|
|
1420
1478
|
"large": {
|
|
1421
1479
|
"type": "shadow",
|
|
1422
|
-
"value": "0px 0px 3px 0px rgba(
|
|
1480
|
+
"value": "0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16)"
|
|
1423
1481
|
},
|
|
1424
1482
|
"x-large": {
|
|
1425
1483
|
"type": "shadow",
|
|
1426
|
-
"value": "0px 1px 4px 0px rgba(
|
|
1484
|
+
"value": "0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16)"
|
|
1427
1485
|
},
|
|
1428
1486
|
"overflow-down": {
|
|
1429
1487
|
"type": "shadow",
|
|
1430
|
-
"value": "0px 1px 4px 0px rgba(
|
|
1488
|
+
"value": "0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16)"
|
|
1431
1489
|
},
|
|
1432
1490
|
"overflow-up": {
|
|
1433
1491
|
"type": "shadow",
|
|
1434
|
-
"value": "0px -1px 4px 0px rgba(
|
|
1492
|
+
"value": "0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16)"
|
|
1435
1493
|
},
|
|
1436
1494
|
"overflow-left": {
|
|
1437
1495
|
"type": "shadow",
|
|
1438
|
-
"value": "-1px 0px 4px 0px rgba(
|
|
1496
|
+
"value": "-1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16)"
|
|
1439
1497
|
},
|
|
1440
1498
|
"overflow-right": {
|
|
1441
1499
|
"type": "shadow",
|
|
1442
|
-
"value": "1px 0px 4px 0px rgba(
|
|
1500
|
+
"value": "1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16)"
|
|
1443
1501
|
},
|
|
1444
1502
|
"x-small": {
|
|
1445
1503
|
"type": "shadow",
|
|
1446
|
-
"value": "0px 1px 2px 0px rgba(
|
|
1504
|
+
"value": "0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04)"
|
|
1447
1505
|
},
|
|
1448
1506
|
"small": {
|
|
1449
1507
|
"type": "shadow",
|
|
1450
|
-
"value": "0px 1px 2px 0px rgba(
|
|
1508
|
+
"value": "0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06)"
|
|
1451
1509
|
}
|
|
1452
1510
|
},
|
|
1453
1511
|
"body": {
|
|
@@ -1506,6 +1564,20 @@
|
|
|
1506
1564
|
"type": "typography",
|
|
1507
1565
|
"value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
|
|
1508
1566
|
}
|
|
1567
|
+
},
|
|
1568
|
+
"2x-small": {
|
|
1569
|
+
"regular": {
|
|
1570
|
+
"type": "typography",
|
|
1571
|
+
"value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
|
|
1572
|
+
},
|
|
1573
|
+
"semibold": {
|
|
1574
|
+
"type": "typography",
|
|
1575
|
+
"value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1576
|
+
},
|
|
1577
|
+
"bold": {
|
|
1578
|
+
"type": "typography",
|
|
1579
|
+
"value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1580
|
+
}
|
|
1509
1581
|
}
|
|
1510
1582
|
},
|
|
1511
1583
|
"heading": {
|
|
@@ -1524,6 +1596,10 @@
|
|
|
1524
1596
|
"3x-large": {
|
|
1525
1597
|
"type": "typography",
|
|
1526
1598
|
"value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
|
|
1599
|
+
},
|
|
1600
|
+
"4x-large": {
|
|
1601
|
+
"type": "typography",
|
|
1602
|
+
"value": "{font-weight.bold} 52/1.2 {font.sans}"
|
|
1527
1603
|
}
|
|
1528
1604
|
}
|
|
1529
1605
|
}
|
|
@@ -944,19 +944,19 @@
|
|
|
944
944
|
"readonly-background": {
|
|
945
945
|
"color": {
|
|
946
946
|
"type": "color",
|
|
947
|
-
"value": "
|
|
947
|
+
"value": "{readonly.background.color}"
|
|
948
948
|
},
|
|
949
949
|
"color-disabled": {
|
|
950
950
|
"type": "color",
|
|
951
|
-
"value": "
|
|
951
|
+
"value": "{readonly.background.color}"
|
|
952
952
|
},
|
|
953
953
|
"color-focus": {
|
|
954
954
|
"type": "color",
|
|
955
|
-
"value": "
|
|
955
|
+
"value": "{readonly.background.color}"
|
|
956
956
|
},
|
|
957
957
|
"color-hover": {
|
|
958
958
|
"type": "color",
|
|
959
|
-
"value": "
|
|
959
|
+
"value": "{readonly.background.color}"
|
|
960
960
|
}
|
|
961
961
|
},
|
|
962
962
|
"required": {
|
|
@@ -994,6 +994,10 @@
|
|
|
994
994
|
},
|
|
995
995
|
"interactive": {
|
|
996
996
|
"background": {
|
|
997
|
+
"color-active": {
|
|
998
|
+
"type": "color",
|
|
999
|
+
"value": "#ece8e5"
|
|
1000
|
+
},
|
|
997
1001
|
"color-hover": {
|
|
998
1002
|
"type": "color",
|
|
999
1003
|
"value": "#f2f0ed"
|
|
@@ -1180,6 +1184,60 @@
|
|
|
1180
1184
|
}
|
|
1181
1185
|
}
|
|
1182
1186
|
},
|
|
1187
|
+
"range": {
|
|
1188
|
+
"color-inactive": {
|
|
1189
|
+
"type": "color",
|
|
1190
|
+
"value": "{color.neutral.100}"
|
|
1191
|
+
},
|
|
1192
|
+
"color-readonly": {
|
|
1193
|
+
"type": "color",
|
|
1194
|
+
"value": "{input.readonly-background.color}"
|
|
1195
|
+
},
|
|
1196
|
+
"error": {
|
|
1197
|
+
"color": {
|
|
1198
|
+
"type": "color",
|
|
1199
|
+
"value": "{color.error.600}"
|
|
1200
|
+
}
|
|
1201
|
+
},
|
|
1202
|
+
"tick": {
|
|
1203
|
+
"color": {
|
|
1204
|
+
"type": "color",
|
|
1205
|
+
"value": "{color.neutral.500}"
|
|
1206
|
+
}
|
|
1207
|
+
},
|
|
1208
|
+
"track": {
|
|
1209
|
+
"color-active": {
|
|
1210
|
+
"type": "color",
|
|
1211
|
+
"value": "{interactive.emphasis.color}"
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
},
|
|
1215
|
+
"readonly": {
|
|
1216
|
+
"background": {
|
|
1217
|
+
"color": {
|
|
1218
|
+
"type": "color",
|
|
1219
|
+
"value": "#e6e1dc"
|
|
1220
|
+
}
|
|
1221
|
+
},
|
|
1222
|
+
"border": {
|
|
1223
|
+
"color": {
|
|
1224
|
+
"type": "color",
|
|
1225
|
+
"value": "{typography.color.text}"
|
|
1226
|
+
}
|
|
1227
|
+
},
|
|
1228
|
+
"indicator": {
|
|
1229
|
+
"color": {
|
|
1230
|
+
"type": "color",
|
|
1231
|
+
"value": "{typography.color.text}"
|
|
1232
|
+
}
|
|
1233
|
+
},
|
|
1234
|
+
"opacity": {
|
|
1235
|
+
"color": {
|
|
1236
|
+
"type": "color",
|
|
1237
|
+
"value": "rgba(230, 225, 220, 0.70)"
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
},
|
|
1183
1241
|
"spacing": {
|
|
1184
1242
|
"2x-large": {
|
|
1185
1243
|
"type": "sizing",
|
|
@@ -1506,6 +1564,20 @@
|
|
|
1506
1564
|
"type": "typography",
|
|
1507
1565
|
"value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
|
|
1508
1566
|
}
|
|
1567
|
+
},
|
|
1568
|
+
"2x-small": {
|
|
1569
|
+
"regular": {
|
|
1570
|
+
"type": "typography",
|
|
1571
|
+
"value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
|
|
1572
|
+
},
|
|
1573
|
+
"semibold": {
|
|
1574
|
+
"type": "typography",
|
|
1575
|
+
"value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1576
|
+
},
|
|
1577
|
+
"bold": {
|
|
1578
|
+
"type": "typography",
|
|
1579
|
+
"value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
|
|
1580
|
+
}
|
|
1509
1581
|
}
|
|
1510
1582
|
},
|
|
1511
1583
|
"heading": {
|
|
@@ -1524,6 +1596,10 @@
|
|
|
1524
1596
|
"3x-large": {
|
|
1525
1597
|
"type": "typography",
|
|
1526
1598
|
"value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
|
|
1599
|
+
},
|
|
1600
|
+
"4x-large": {
|
|
1601
|
+
"type": "typography",
|
|
1602
|
+
"value": "{font-weight.bold} 52/1.2 {font.sans}"
|
|
1527
1603
|
}
|
|
1528
1604
|
}
|
|
1529
1605
|
}
|