@synergy-design-system/tokens 1.6.0 → 1.7.1

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 CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v1.7.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.7.0...tokens/1.7.1) (2024-02-27)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * 🤔 Fix broken theme tokens and add automatic check ([#342](https://github.com/synergy-design-system/synergy-design-system/issues/342)) ([3fea98a](https://github.com/synergy-design-system/synergy-design-system/commit/3fea98a242d0994f8c3aa9be81ef38a9cd43e48e))
7
+
8
+ # [@synergy-design-system/tokens-v1.7.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.6.0...tokens/1.7.0) (2024-02-27)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ syn-drawer ([#320](https://github.com/synergy-design-system/synergy-design-system/issues/320)) ([ce20a42](https://github.com/synergy-design-system/synergy-design-system/commit/ce20a42f9f90eb5b38c0ae84f99d4a8db2e08613))
14
+
1
15
  # [@synergy-design-system/tokens-v1.6.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.5.0...tokens/1.6.0) (2024-02-26)
2
16
 
3
17
 
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.5.0
2
+ * @synergy-design-system/tokens version 1.7.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -429,6 +429,11 @@ export const SynInputPlaceholderColorDisabled: string;
429
429
  */
430
430
  export const SynInputRequiredContent: string;
431
431
 
432
+ /**
433
+ * Maps to the css variable `--syn-input-required-content-color`
434
+ */
435
+ export const SynInputRequiredContentColor: string;
436
+
432
437
  /**
433
438
  * Maps to the css variable `--syn-input-required-content-offset`
434
439
  */
@@ -585,29 +590,24 @@ export const SynInputFontSizeMedium: string;
585
590
  export const SynInputFontSizeLarge: string;
586
591
 
587
592
  /**
588
- * Maps to the css variable `--syn-overlay-color`
589
- */
590
- export const SynOverlayColor: string;
591
-
592
- /**
593
- * Maps to the css variable `--syn-overlay-opacity`
593
+ * Maps to the css variable `--syn-overlay-background-color`
594
594
  */
595
- export const SynOverlayOpacity: string;
595
+ export const SynOverlayBackgroundColor: string;
596
596
 
597
597
  /**
598
- * Maps to the css variable `--syn-background-color`
598
+ * Maps to the css variable `--syn-panel-background-color`
599
599
  */
600
- export const SynBackgroundColor: string;
600
+ export const SynPanelBackgroundColor: string;
601
601
 
602
602
  /**
603
- * Maps to the css variable `--syn-border-color`
603
+ * Maps to the css variable `--syn-panel-border-color`
604
604
  */
605
- export const SynBorderColor: string;
605
+ export const SynPanelBorderColor: string;
606
606
 
607
607
  /**
608
- * Maps to the css variable `--syn-panel-border`
608
+ * Maps to the css variable `--syn-panel-border-width`
609
609
  */
610
- export const SynPanelBorder: string;
610
+ export const SynPanelBorderWidth: string;
611
611
 
612
612
  /**
613
613
  * Maps to the css variable `--syn-toggle-size-small`
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.5.0
2
+ * @synergy-design-system/tokens version 1.7.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -428,6 +428,11 @@ export const SynInputPlaceholderColorDisabled = 'var(--syn-input-placeholder-col
428
428
  */
429
429
  export const SynInputRequiredContent = 'var(--syn-input-required-content)';
430
430
 
431
+ /**
432
+ * @type {string}
433
+ */
434
+ export const SynInputRequiredContentColor = 'var(--syn-input-required-content-color)';
435
+
431
436
  /**
432
437
  * @type {string}
433
438
  */
@@ -586,27 +591,22 @@ export const SynInputFontSizeLarge = 'var(--syn-input-font-size-large)';
586
591
  /**
587
592
  * @type {string}
588
593
  */
589
- export const SynOverlayColor = 'var(--syn-overlay-color)';
590
-
591
- /**
592
- * @type {string}
593
- */
594
- export const SynOverlayOpacity = 'var(--syn-overlay-opacity)';
594
+ export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
595
595
 
596
596
  /**
597
597
  * @type {string}
598
598
  */
599
- export const SynBackgroundColor = 'var(--syn-background-color)';
599
+ export const SynPanelBackgroundColor = 'var(--syn-panel-background-color)';
600
600
 
601
601
  /**
602
602
  * @type {string}
603
603
  */
604
- export const SynBorderColor = 'var(--syn-border-color)';
604
+ export const SynPanelBorderColor = 'var(--syn-panel-border-color)';
605
605
 
606
606
  /**
607
607
  * @type {string}
608
608
  */
609
- export const SynPanelBorder = 'var(--syn-panel-border)';
609
+ export const SynPanelBorderWidth = 'var(--syn-panel-border-width)';
610
610
 
611
611
  /**
612
612
  * @type {string}
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.5.0
2
+ * @synergy-design-system/tokens version 1.7.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -87,6 +87,7 @@ $SynInputIconIconClearableColorFocus: var(--syn-input-icon-icon-clearable-color-
87
87
  $SynInputPlaceholderColor: var(--syn-input-placeholder-color) !default;
88
88
  $SynInputPlaceholderColorDisabled: var(--syn-input-placeholder-color-disabled) !default;
89
89
  $SynInputRequiredContent: var(--syn-input-required-content) !default;
90
+ $SynInputRequiredContentColor: var(--syn-input-required-content-color) !default;
90
91
  $SynInputRequiredContentOffset: var(--syn-input-required-content-offset) !default;
91
92
  $SynInputLabelColor: var(--syn-input-label-color) !default;
92
93
  $SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;
@@ -118,11 +119,10 @@ $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
118
119
  $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
119
120
  $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
120
121
  $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
121
- $SynOverlayColor: var(--syn-overlay-color) !default;
122
- $SynOverlayOpacity: var(--syn-overlay-opacity) !default;
123
- $SynBackgroundColor: var(--syn-background-color) !default;
124
- $SynBorderColor: var(--syn-border-color) !default;
125
- $SynPanelBorder: var(--syn-panel-border) !default;
122
+ $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
123
+ $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
124
+ $SynPanelBorderColor: var(--syn-panel-border-color) !default;
125
+ $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
126
126
  $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
127
127
  $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
128
128
  $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
@@ -1,8 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.5.0
2
+ * @synergy-design-system/tokens version 1.7.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Mon, 26 Feb 2024 07:16:32 GMT
5
+ * Generated on Tue, 27 Feb 2024 14:13:18 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-dark {
@@ -72,9 +72,9 @@
72
72
  --syn-input-color-focus: var(--syn-color-neutral-950);
73
73
  --syn-input-color-disabled: var(--syn-color-neutral-950);
74
74
  --syn-input-background-color: var(--syn-color-neutral-0);
75
- --syn-input-background-color-hover: var(--syn-input-background.color);
76
- --syn-input-background-color-focus: var(--syn-input-background.color);
77
- --syn-input-background-color-disabled: var(--syn-input-background.color);
75
+ --syn-input-background-color-hover: var(--syn-input-background-color);
76
+ --syn-input-background-color-focus: var(--syn-input-background-color);
77
+ --syn-input-background-color-disabled: var(--syn-input-background-color);
78
78
  --syn-input-border-color: var(--syn-color-neutral-700);
79
79
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
80
80
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
@@ -93,6 +93,7 @@
93
93
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
94
94
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
95
95
  --syn-input-required-content: "*";
96
+ --syn-input-required-content-color: var(--syn-input-label-color);
96
97
  --syn-input-required-content-offset: -2px;
97
98
  --syn-input-label-color: var(--syn-color-neutral-950);
98
99
  --syn-input-label-font-size-small: var(--syn-font-size-small);
@@ -124,11 +125,10 @@
124
125
  --syn-input-font-size-small: var(--syn-font-size-small);
125
126
  --syn-input-font-size-medium: var(--syn-font-size-medium);
126
127
  --syn-input-font-size-large: var(--syn-font-size-large);
127
- --syn-overlay-color: var(--syn-color-neutral-1000);
128
- --syn-overlay-opacity: 0.4;
129
- --syn-background-color: var(--syn-color-neutral-0);
130
- --syn-border-color: var(--syn-color-neutral-300);
131
- --syn-panel-border: var(--syn-border-width-small);
128
+ --syn-overlay-background-color: rgba(0, 0, 0, 0.4);
129
+ --syn-panel-background-color: var(--syn-color-neutral-0);
130
+ --syn-panel-border-color: var(--syn-color-neutral-300);
131
+ --syn-panel-border-width: var(--syn-border-width-small);
132
132
  --syn-toggle-size-small: 14px;
133
133
  --syn-toggle-size-medium: var(--syn-spacing-medium);
134
134
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -222,8 +222,8 @@
222
222
  /* Fallbacks from Shoelace */
223
223
  --syn-border-radius-large: 0.5rem;
224
224
  --syn-border-radius-x-large: 1rem;
225
- --syn-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
226
- --syn-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
225
+ --syn-shadow-x-small: 0 1px 2px rgba(0, 0, 0, 0.18);
226
+ --syn-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.24);
227
227
  --syn-transition-x-slow: 1000ms;
228
228
  --syn-transition-slow: 500ms;
229
229
  --syn-transition-medium: 250ms;
@@ -242,22 +242,9 @@
242
242
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
243
243
  --syn-input-border-color-disabled: var(--syn-color-neutral-300);
244
244
  --syn-input-border-width: 1px;
245
- --syn-input-required-content-color: var(--syn-input-label-color);
246
245
  --syn-input-font-family: var(--syn-font-sans);
247
246
  --syn-input-font-weight: var(--syn-font-weight-normal);
248
247
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
249
- --syn-input-filled-background-color: var(--syn-color-neutral-100);
250
- --syn-input-filled-background-color-hover: var(--syn-color-neutral-100);
251
- --syn-input-filled-background-color-focus: var(--syn-color-neutral-100);
252
- --syn-input-filled-background-color-disabled: var(--syn-color-neutral-100);
253
- --syn-input-filled-color: var(--syn-color-neutral-800);
254
- --syn-input-filled-color-hover: var(--syn-color-neutral-800);
255
- --syn-input-filled-color-focus: var(--syn-color-neutral-700);
256
- --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
257
- --syn-overlay-background-color: hsl(0 0% 0% / 43%);
258
- --syn-panel-background-color: var(--syn-color-neutral-0);
259
- --syn-panel-border-color: var(--syn-color-neutral-300);
260
- --syn-panel-border-width: 1px;
261
248
  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
262
249
  --syn-tooltip-background-color: var(--syn-color-neutral-800);
263
250
  --syn-tooltip-color: var(--syn-color-neutral-0);
@@ -1,8 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.5.0
2
+ * @synergy-design-system/tokens version 1.7.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Mon, 26 Feb 2024 07:16:32 GMT
5
+ * Generated on Tue, 27 Feb 2024 14:13:18 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-light {
@@ -72,9 +72,9 @@
72
72
  --syn-input-color-focus: var(--syn-color-neutral-950);
73
73
  --syn-input-color-disabled: var(--syn-color-neutral-950);
74
74
  --syn-input-background-color: var(--syn-color-neutral-0);
75
- --syn-input-background-color-hover: var(--syn-input-background.color);
76
- --syn-input-background-color-focus: var(--syn-input-background.color);
77
- --syn-input-background-color-disabled: var(--syn-input-background.color);
75
+ --syn-input-background-color-hover: var(--syn-input-background-color);
76
+ --syn-input-background-color-focus: var(--syn-input-background-color);
77
+ --syn-input-background-color-disabled: var(--syn-input-background-color);
78
78
  --syn-input-border-color: var(--syn-color-neutral-700);
79
79
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
80
80
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
@@ -93,6 +93,7 @@
93
93
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
94
94
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
95
95
  --syn-input-required-content: "*";
96
+ --syn-input-required-content-color: var(--syn-input-label-color);
96
97
  --syn-input-required-content-offset: -2px;
97
98
  --syn-input-label-color: var(--syn-color-neutral-950);
98
99
  --syn-input-label-font-size-small: var(--syn-font-size-small);
@@ -124,11 +125,10 @@
124
125
  --syn-input-font-size-small: var(--syn-font-size-small);
125
126
  --syn-input-font-size-medium: var(--syn-font-size-medium);
126
127
  --syn-input-font-size-large: var(--syn-font-size-large);
127
- --syn-overlay-color: var(--syn-color-neutral-1000);
128
- --syn-overlay-opacity: 0.4;
129
- --syn-background-color: var(--syn-color-neutral-0);
130
- --syn-border-color: var(--syn-color-neutral-300);
131
- --syn-panel-border: var(--syn-border-width-small);
128
+ --syn-overlay-background-color: rgba(0, 0, 0, 0.4);
129
+ --syn-panel-background-color: var(--syn-color-neutral-0);
130
+ --syn-panel-border-color: var(--syn-color-neutral-300);
131
+ --syn-panel-border-width: var(--syn-border-width-small);
132
132
  --syn-toggle-size-small: 14px;
133
133
  --syn-toggle-size-medium: var(--syn-spacing-medium);
134
134
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -222,8 +222,8 @@
222
222
  /* Fallbacks from Shoelace */
223
223
  --syn-border-radius-large: 0.5rem;
224
224
  --syn-border-radius-x-large: 1rem;
225
- --syn-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
226
- --syn-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
225
+ --syn-shadow-x-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.06);
226
+ --syn-shadow-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.12);
227
227
  --syn-transition-x-slow: 1000ms;
228
228
  --syn-transition-slow: 500ms;
229
229
  --syn-transition-medium: 250ms;
@@ -242,22 +242,9 @@
242
242
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
243
243
  --syn-input-border-color-disabled: var(--syn-color-neutral-300);
244
244
  --syn-input-border-width: 1px;
245
- --syn-input-required-content-color: var(--syn-input-label-color);
246
245
  --syn-input-font-family: var(--syn-font-sans);
247
246
  --syn-input-font-weight: var(--syn-font-weight-normal);
248
247
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
249
- --syn-input-filled-background-color: var(--syn-color-neutral-100);
250
- --syn-input-filled-background-color-hover: var(--syn-color-neutral-100);
251
- --syn-input-filled-background-color-focus: var(--syn-color-neutral-100);
252
- --syn-input-filled-background-color-disabled: var(--syn-color-neutral-100);
253
- --syn-input-filled-color: var(--syn-color-neutral-800);
254
- --syn-input-filled-color-hover: var(--syn-color-neutral-800);
255
- --syn-input-filled-color-focus: var(--syn-color-neutral-700);
256
- --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
257
- --syn-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
258
- --syn-panel-background-color: var(--syn-color-neutral-0);
259
- --syn-panel-border-color: var(--syn-color-neutral-300);
260
- --syn-panel-border-width: 1px;
261
248
  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
262
249
  --syn-tooltip-background-color: var(--syn-color-neutral-800);
263
250
  --syn-tooltip-color: var(--syn-color-neutral-0);
package/package.json CHANGED
@@ -17,6 +17,8 @@
17
17
  "semantic-release": "^19.0.5",
18
18
  "semantic-release-monorepo": "7.0.5",
19
19
  "style-dictionary": "^3.9.2",
20
+ "stylelint": "^16.2.1",
21
+ "@synergy-design-system/stylelint-config-syn": "0.1.0",
20
22
  "@synergy-design-system/eslint-config-syn": "0.1.0"
21
23
  },
22
24
  "exports": {
@@ -99,11 +101,13 @@
99
101
  },
100
102
  "type": "module",
101
103
  "types": "./dist/js/index.d.ts",
102
- "version": "1.6.0",
104
+ "version": "1.7.1",
103
105
  "scripts": {
104
106
  "build": "pnpm clean && node scripts/build.js",
105
107
  "clean": "rimraf build",
106
- "lint": "eslint scripts",
108
+ "lint:css": "stylelint \"dist/**/*.css\"",
109
+ "lint:js": "eslint scripts",
110
+ "lint": "pnpm run /^lint:.*/",
107
111
  "format.eslint": "pnpm lint --fix",
108
112
  "start": "pnpm build",
109
113
  "release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
@@ -1599,6 +1599,108 @@
1599
1599
  "type": "text"
1600
1600
  }
1601
1601
  }
1602
+ },
1603
+ "nav-item": {
1604
+ "default": {
1605
+ "title": {
1606
+ "value": "Navigation Item",
1607
+ "type": "text"
1608
+ },
1609
+ "description": {
1610
+ "value": "The navigation item is used to trigger page switches.",
1611
+ "type": "text"
1612
+ }
1613
+ },
1614
+ "labels": {
1615
+ "title": {
1616
+ "value": "Labels",
1617
+ "type": "text"
1618
+ },
1619
+ "description": {
1620
+ "value": "Use the label attribute to change the content of a navigtion item.",
1621
+ "type": "text"
1622
+ }
1623
+ },
1624
+ "current": {
1625
+ "title": {
1626
+ "value": "Current",
1627
+ "type": "text"
1628
+ },
1629
+ "description": {
1630
+ "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
1631
+ "type": "text"
1632
+ }
1633
+ },
1634
+ "focus": {
1635
+ "title": {
1636
+ "value": "Focus",
1637
+ "type": "text"
1638
+ },
1639
+ "description": {
1640
+ "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
1641
+ "type": "text"
1642
+ }
1643
+ },
1644
+ "nav-horizontal": {
1645
+ "title": {
1646
+ "value": "Horizontal Navigation",
1647
+ "type": "text"
1648
+ },
1649
+ "description": {
1650
+ "value": "Use the horizontal attribute to indicate that an element is used in a horizontal navigation.
(The example shows it in combination with the current attribute, to indicate the difference.)",
1651
+ "type": "text"
1652
+ }
1653
+ },
1654
+ "prefix-suffix": {
1655
+ "title": {
1656
+ "value": "Prefix and suffix Slot",
1657
+ "type": "text"
1658
+ },
1659
+ "description": {
1660
+ "value": "Use the prefix and suffix slots to add e. g. icons or tags. If available the prefix slot will be shown in the rail navigation.",
1661
+ "type": "text"
1662
+ }
1663
+ },
1664
+ "children": {
1665
+ "title": {
1666
+ "value": "Children closed / open (vertical only)",
1667
+ "type": "text"
1668
+ },
1669
+ "description": {
1670
+ "value": "Use the *children attribute to indicate that show a chevron. In development this will be handled automatically as soon as an element has children.:",
1671
+ "type": "text"
1672
+ }
1673
+ },
1674
+ "divider": {
1675
+ "title": {
1676
+ "value": "Divider",
1677
+ "type": "text"
1678
+ },
1679
+ "description": {
1680
+ "value": "Use the divider attribute to add a border at the top. This should be used for first level elements in vertical navigations.",
1681
+ "type": "text"
1682
+ }
1683
+ },
1684
+ "indentation": {
1685
+ "title": {
1686
+ "value": "Indentation",
1687
+ "type": "text"
1688
+ },
1689
+ "description": {
1690
+ "value": "Vertical navigation elements can be indented to indicate deeper navigation levels.",
1691
+ "type": "text"
1692
+ }
1693
+ },
1694
+ "disabled": {
1695
+ "title": {
1696
+ "value": "Disabled",
1697
+ "type": "text"
1698
+ },
1699
+ "description": {
1700
+ "value": "Use the disabled attribute to disable a navigation-item.",
1701
+ "type": "text"
1702
+ }
1703
+ }
1602
1704
  }
1603
1705
  },
1604
1706
  "frameworks": {
@@ -110,18 +110,20 @@
110
110
  "type": "color"
111
111
  }
112
112
  },
113
- "required-content": {
114
- "value": "*",
115
- "type": "text",
116
- "color": {
113
+ "required": {
114
+ "content": {
115
+ "value": "*",
116
+ "type": "text"
117
+ },
118
+ "content-color": {
117
119
  "value": "{input.label.color}",
118
120
  "type": "color"
121
+ },
122
+ "content-offset": {
123
+ "value": "-2px",
124
+ "type": "spacing"
119
125
  }
120
126
  },
121
- "required-content-offset": {
122
- "value": "-2px",
123
- "type": "spacing"
124
- },
125
127
  "label": {
126
128
  "color": {
127
129
  "value": "{neutral.950}",
@@ -263,4 +265,4 @@
263
265
  }
264
266
  }
265
267
  }
266
- }
268
+ }
@@ -1,10 +1,10 @@
1
1
  {
2
- "overlay-color": {
3
- "value": "{neutral.1000}",
4
- "type": "color"
5
- },
6
- "overlay-opacity": {
7
- "value": "40%",
8
- "type": "opacity"
2
+ "overlay": {
3
+ "background": {
4
+ "color": {
5
+ "value": "rgba(0, 0, 0, 0.4)",
6
+ "type": "color"
7
+ }
8
+ }
9
9
  }
10
- }
10
+ }
@@ -1,14 +1,20 @@
1
1
  {
2
- "background-color": {
3
- "value": "{neutral.0}",
4
- "type": "color"
5
- },
6
- "border-color": {
7
- "value": "{neutral.300}",
8
- "type": "color"
9
- },
10
- "panel-border": {
11
- "value": "{border-width.small}",
12
- "type": "borderWidth"
2
+ "panel": {
3
+ "background": {
4
+ "color": {
5
+ "value": "{neutral.0}",
6
+ "type": "color"
7
+ }
8
+ },
9
+ "border": {
10
+ "color": {
11
+ "value": "{neutral.300}",
12
+ "type": "color"
13
+ },
14
+ "width": {
15
+ "value": "{border-width.small}",
16
+ "type": "borderWidth"
17
+ }
18
+ }
13
19
  }
14
20
  }