@synergy-design-system/tokens 1.13.0 → 1.15.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 (10) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/index.d.ts +46 -1
  3. package/dist/js/index.js +46 -1
  4. package/dist/scss/_tokens.scss +10 -1
  5. package/dist/themes/dark.css +11 -11
  6. package/dist/themes/light.css +11 -11
  7. package/package.json +3 -3
  8. package/src/figma-tokens/$metadata.json +1 -0
  9. package/src/figma-tokens/_docs.json +13 -3
  10. package/src/figma-tokens/semantic/tooltip.json +42 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v1.15.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.14.0...tokens/1.15.0) (2024-04-26)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ tooltip ([#451](https://github.com/synergy-design-system/synergy-design-system/issues/451)) ([b6f3958](https://github.com/synergy-design-system/synergy-design-system/commit/b6f395846b00598273d0287daa98a64f82b75699))
7
+
8
+ # [@synergy-design-system/tokens-v1.14.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.13.0...tokens/1.14.0) (2024-04-23)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ progress-bar ([#423](https://github.com/synergy-design-system/synergy-design-system/issues/423)) ([587d2ad](https://github.com/synergy-design-system/synergy-design-system/commit/587d2adad36266d5e2bd3aadad2c7350c5b8aa34))
14
+
1
15
  # [@synergy-design-system/tokens-v1.13.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.12.1...tokens/1.13.0) (2024-04-23)
2
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.12.1
2
+ * @synergy-design-system/tokens version 1.14.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -629,6 +629,51 @@ export const SynToggleSizeMedium: string;
629
629
  */
630
630
  export const SynToggleSizeLarge: string;
631
631
 
632
+ /**
633
+ * Maps to the css variable `--syn-tooltip-border-radius`
634
+ */
635
+ export const SynTooltipBorderRadius: string;
636
+
637
+ /**
638
+ * Maps to the css variable `--syn-tooltip-background-color`
639
+ */
640
+ export const SynTooltipBackgroundColor: string;
641
+
642
+ /**
643
+ * Maps to the css variable `--syn-tooltip-color`
644
+ */
645
+ export const SynTooltipColor: string;
646
+
647
+ /**
648
+ * Maps to the css variable `--syn-tooltip-font-family`
649
+ */
650
+ export const SynTooltipFontFamily: string;
651
+
652
+ /**
653
+ * Maps to the css variable `--syn-tooltip-font-weight`
654
+ */
655
+ export const SynTooltipFontWeight: string;
656
+
657
+ /**
658
+ * Maps to the css variable `--syn-tooltip-font-size`
659
+ */
660
+ export const SynTooltipFontSize: string;
661
+
662
+ /**
663
+ * Maps to the css variable `--syn-tooltip-line-height`
664
+ */
665
+ export const SynTooltipLineHeight: string;
666
+
667
+ /**
668
+ * Maps to the css variable `--syn-tooltip-padding`
669
+ */
670
+ export const SynTooltipPadding: string;
671
+
672
+ /**
673
+ * Maps to the css variable `--syn-tooltip-arrow-size`
674
+ */
675
+ export const SynTooltipArrowSize: string;
676
+
632
677
  /**
633
678
  * Maps to the css variable `--syn-body-x-small-regular`
634
679
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.12.1
2
+ * @synergy-design-system/tokens version 1.14.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -628,6 +628,51 @@ export const SynToggleSizeMedium = 'var(--syn-toggle-size-medium)';
628
628
  */
629
629
  export const SynToggleSizeLarge = 'var(--syn-toggle-size-large)';
630
630
 
631
+ /**
632
+ * @type {string}
633
+ */
634
+ export const SynTooltipBorderRadius = 'var(--syn-tooltip-border-radius)';
635
+
636
+ /**
637
+ * @type {string}
638
+ */
639
+ export const SynTooltipBackgroundColor = 'var(--syn-tooltip-background-color)';
640
+
641
+ /**
642
+ * @type {string}
643
+ */
644
+ export const SynTooltipColor = 'var(--syn-tooltip-color)';
645
+
646
+ /**
647
+ * @type {string}
648
+ */
649
+ export const SynTooltipFontFamily = 'var(--syn-tooltip-font-family)';
650
+
651
+ /**
652
+ * @type {string}
653
+ */
654
+ export const SynTooltipFontWeight = 'var(--syn-tooltip-font-weight)';
655
+
656
+ /**
657
+ * @type {string}
658
+ */
659
+ export const SynTooltipFontSize = 'var(--syn-tooltip-font-size)';
660
+
661
+ /**
662
+ * @type {string}
663
+ */
664
+ export const SynTooltipLineHeight = 'var(--syn-tooltip-line-height)';
665
+
666
+ /**
667
+ * @type {string}
668
+ */
669
+ export const SynTooltipPadding = 'var(--syn-tooltip-padding)';
670
+
671
+ /**
672
+ * @type {string}
673
+ */
674
+ export const SynTooltipArrowSize = 'var(--syn-tooltip-arrow-size)';
675
+
631
676
  /**
632
677
  * @type {string}
633
678
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.12.1
2
+ * @synergy-design-system/tokens version 1.14.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -127,6 +127,15 @@ $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
127
127
  $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
128
128
  $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
129
129
  $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
130
+ $SynTooltipBorderRadius: var(--syn-tooltip-border-radius) !default;
131
+ $SynTooltipBackgroundColor: var(--syn-tooltip-background-color) !default;
132
+ $SynTooltipColor: var(--syn-tooltip-color) !default;
133
+ $SynTooltipFontFamily: var(--syn-tooltip-font-family) !default;
134
+ $SynTooltipFontWeight: var(--syn-tooltip-font-weight) !default;
135
+ $SynTooltipFontSize: var(--syn-tooltip-font-size) !default;
136
+ $SynTooltipLineHeight: var(--syn-tooltip-line-height) !default;
137
+ $SynTooltipPadding: var(--syn-tooltip-padding) !default;
138
+ $SynTooltipArrowSize: var(--syn-tooltip-arrow-size) !default;
130
139
  $SynBodyXSmallRegular: var(--syn-body-x-small-regular) !default;
131
140
  $SynBodyXSmallSemibold: var(--syn-body-x-small-semibold) !default;
132
141
  $SynBodyXSmallBold: var(--syn-body-x-small-bold) !default;
package/dist/themes/dark.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.12.1
2
+ * @synergy-design-system/tokens version 1.14.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Tue, 23 Apr 2024 12:01:41 GMT
5
+ * Generated on Fri, 26 Apr 2024 10:46:36 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-dark {
@@ -133,6 +133,15 @@
133
133
  --syn-toggle-size-small: 14px;
134
134
  --syn-toggle-size-medium: var(--syn-spacing-medium);
135
135
  --syn-toggle-size-large: var(--syn-spacing-large);
136
+ --syn-tooltip-border-radius: var(--syn-border-radius-small);
137
+ --syn-tooltip-background-color: var(--syn-color-neutral-950);
138
+ --syn-tooltip-color: var(--syn-typography-color-text-inverted);
139
+ --syn-tooltip-font-family: var(--syn-font-sans);
140
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
141
+ --syn-tooltip-font-size: var(--syn-button-font-size-small);
142
+ --syn-tooltip-line-height: var(--syn-line-height-normal);
143
+ --syn-tooltip-padding: var(--syn-spacing-small);
144
+ --syn-tooltip-arrow-size: 9px;
136
145
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
137
146
  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
138
147
  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -246,15 +255,6 @@
246
255
  --syn-input-font-family: var(--syn-font-sans);
247
256
  --syn-input-font-weight: var(--syn-font-weight-normal);
248
257
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
249
- --syn-tooltip-border-radius: var(--syn-border-radius-medium);
250
- --syn-tooltip-background-color: var(--syn-color-neutral-800);
251
- --syn-tooltip-color: var(--syn-color-neutral-0);
252
- --syn-tooltip-font-family: var(--syn-font-sans);
253
- --syn-tooltip-font-weight: var(--syn-font-weight-normal);
254
- --syn-tooltip-font-size: var(--syn-font-size-small);
255
- --syn-tooltip-line-height: var(--syn-line-height-dense);
256
- --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
257
- --syn-tooltip-arrow-size: 6px;
258
258
  --syn-z-index-drawer: 700;
259
259
  --syn-z-index-dialog: 800;
260
260
  --syn-z-index-dropdown: 900;
package/dist/themes/light.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.12.1
2
+ * @synergy-design-system/tokens version 1.14.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Tue, 23 Apr 2024 12:01:41 GMT
5
+ * Generated on Fri, 26 Apr 2024 10:46:36 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-light {
@@ -133,6 +133,15 @@
133
133
  --syn-toggle-size-small: 14px;
134
134
  --syn-toggle-size-medium: var(--syn-spacing-medium);
135
135
  --syn-toggle-size-large: var(--syn-spacing-large);
136
+ --syn-tooltip-border-radius: var(--syn-border-radius-small);
137
+ --syn-tooltip-background-color: var(--syn-color-neutral-950);
138
+ --syn-tooltip-color: var(--syn-typography-color-text-inverted);
139
+ --syn-tooltip-font-family: var(--syn-font-sans);
140
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
141
+ --syn-tooltip-font-size: var(--syn-button-font-size-small);
142
+ --syn-tooltip-line-height: var(--syn-line-height-normal);
143
+ --syn-tooltip-padding: var(--syn-spacing-small);
144
+ --syn-tooltip-arrow-size: 9px;
136
145
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
137
146
  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
138
147
  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -246,15 +255,6 @@
246
255
  --syn-input-font-family: var(--syn-font-sans);
247
256
  --syn-input-font-weight: var(--syn-font-weight-normal);
248
257
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
249
- --syn-tooltip-border-radius: var(--syn-border-radius-medium);
250
- --syn-tooltip-background-color: var(--syn-color-neutral-800);
251
- --syn-tooltip-color: var(--syn-color-neutral-0);
252
- --syn-tooltip-font-family: var(--syn-font-sans);
253
- --syn-tooltip-font-weight: var(--syn-font-weight-normal);
254
- --syn-tooltip-font-size: var(--syn-font-size-small);
255
- --syn-tooltip-line-height: var(--syn-line-height-dense);
256
- --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
257
- --syn-tooltip-arrow-size: 6px;
258
258
  --syn-z-index-drawer: 700;
259
259
  --syn-z-index-dialog: 800;
260
260
  --syn-z-index-dropdown: 900;
package/package.json CHANGED
@@ -18,8 +18,8 @@
18
18
  "semantic-release-monorepo": "7.0.5",
19
19
  "style-dictionary": "^3.9.2",
20
20
  "stylelint": "^16.3.1",
21
- "@synergy-design-system/eslint-config-syn": "0.1.0",
22
- "@synergy-design-system/stylelint-config-syn": "0.1.0"
21
+ "@synergy-design-system/stylelint-config-syn": "0.1.0",
22
+ "@synergy-design-system/eslint-config-syn": "0.1.0"
23
23
  },
24
24
  "exports": {
25
25
  ".": {
@@ -101,7 +101,7 @@
101
101
  },
102
102
  "type": "module",
103
103
  "types": "./dist/js/index.d.ts",
104
- "version": "1.13.0",
104
+ "version": "1.15.0",
105
105
  "scripts": {
106
106
  "build": "pnpm clean && node scripts/build.js",
107
107
  "clean": "rimraf build",
package/src/figma-tokens/$metadata.json CHANGED
@@ -11,6 +11,7 @@
11
11
  "semantic/typography",
12
12
  "semantic/overlays",
13
13
  "semantic/panels",
14
+ "semantic/tooltip",
14
15
  "_docs"
15
16
  ]
16
17
  }
package/src/figma-tokens/_docs.json CHANGED
@@ -1222,8 +1222,8 @@
1222
1222
  "value": "Labels",
1223
1223
  "type": "text"
1224
1224
  },
1225
- "decription": {
1226
- "value": "Use the label attribute to label the progress bar and tell assistive devices how to announce it.",
1225
+ "description": {
1226
+ "value": "Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.",
1227
1227
  "type": "text"
1228
1228
  }
1229
1229
  },
@@ -1982,6 +1982,16 @@
1982
1982
  "value": "Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.",
1983
1983
  "type": "text"
1984
1984
  }
1985
+ },
1986
+ "hoisting": {
1987
+ "title": {
1988
+ "value": "Hoisting",
1989
+ "type": "text"
1990
+ },
1991
+ "description": {
1992
+ "value": "Tooltips will be clipped if they’re inside a container that has overflow: auto|hidden|scroll. The hoist attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter.",
1993
+ "type": "text"
1994
+ }
1985
1995
  }
1986
1996
  },
1987
1997
  "tree-item": {
@@ -2739,4 +2749,4 @@
2739
2749
  }
2740
2750
  }
2741
2751
  }
2742
- }
2752
+ }
package/src/figma-tokens/semantic/tooltip.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "tooltip": {
3
+ "border": {
4
+ "radius": {
5
+ "value": "{border-radius.small}",
6
+ "type": "borderRadius"
7
+ }
8
+ },
9
+ "background-color": {
10
+ "value": "{neutral.950}",
11
+ "type": "color"
12
+ },
13
+ "color": {
14
+ "value": "{typography.color.text-inverted}",
15
+ "type": "color"
16
+ },
17
+ "font-family": {
18
+ "value": "{font.sans}",
19
+ "type": "fontFamilies"
20
+ },
21
+ "font-weight": {
22
+ "value": "{font-weight.normal}",
23
+ "type": "fontWeights"
24
+ },
25
+ "font-size": {
26
+ "value": "{button.font-size.small}",
27
+ "type": "fontSizes"
28
+ },
29
+ "line-height": {
30
+ "value": "{line-height.normal}",
31
+ "type": "lineHeights"
32
+ },
33
+ "padding": {
34
+ "value": "{spacing.small}",
35
+ "type": "spacing"
36
+ },
37
+ "arrow-size": {
38
+ "value": "9px",
39
+ "type": "spacing"
40
+ }
41
+ }
42
+ }