@synergy-design-system/tokens 1.3.2 → 1.5.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 (14) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/index.d.ts +91 -6
  3. package/dist/js/index.js +91 -6
  4. package/dist/scss/_tokens.scss +19 -2
  5. package/dist/themes/dark.css +23 -5
  6. package/dist/themes/light.css +23 -5
  7. package/package.json +1 -1
  8. package/src/figma-tokens/$metadata.json +1 -0
  9. package/src/figma-tokens/$themes.json +5 -1
  10. package/src/figma-tokens/_docs.json +31 -1
  11. package/src/figma-tokens/globals.json +0 -4
  12. package/src/figma-tokens/semantic/button.json +1 -1
  13. package/src/figma-tokens/semantic/input.json +1 -1
  14. package/src/figma-tokens/semantic/typography.json +170 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v1.5.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.4.0...tokens/1.5.0) (2024-02-22)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ adjust the size tokens for syn-Input and syn-Button ([#324](https://github.com/synergy-design-system/synergy-design-system/issues/324)) ([ac00d58](https://github.com/synergy-design-system/synergy-design-system/commit/ac00d58db394490e852c627f90209e37bfb8a4bb))
7
+
8
+ # [@synergy-design-system/tokens-v1.4.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.3.2...tokens/1.4.0) (2024-02-15)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ Added text-styles for typography ([#318](https://github.com/synergy-design-system/synergy-design-system/issues/318)) ([a9758ee](https://github.com/synergy-design-system/synergy-design-system/commit/a9758ee7c8242fac4b0e6e6d7d4006d9b59cc51d))
14
+
1
15
  # [@synergy-design-system/tokens-v1.3.2](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.3.1...tokens/1.3.2) (2024-02-15)
2
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,14 +1,9 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.3.1
2
+ * @synergy-design-system/tokens version 1.4.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
6
6
 
7
- /**
8
- * Maps to the css variable `--syn-font-size-2x-small`
9
- */
10
- export const SynFontSize2xSmall: string;
11
-
12
7
  /**
13
8
  * Maps to the css variable `--syn-font-size-x-small`
14
9
  */
@@ -619,6 +614,96 @@ export const SynToggleSizeMedium: string;
619
614
  */
620
615
  export const SynToggleSizeLarge: string;
621
616
 
617
+ /**
618
+ * Maps to the css variable `--syn-body-x-small-regular`
619
+ */
620
+ export const SynBodyXSmallRegular: string;
621
+
622
+ /**
623
+ * Maps to the css variable `--syn-body-x-small-semibold`
624
+ */
625
+ export const SynBodyXSmallSemibold: string;
626
+
627
+ /**
628
+ * Maps to the css variable `--syn-body-x-small-bold`
629
+ */
630
+ export const SynBodyXSmallBold: string;
631
+
632
+ /**
633
+ * Maps to the css variable `--syn-body-small-regular`
634
+ */
635
+ export const SynBodySmallRegular: string;
636
+
637
+ /**
638
+ * Maps to the css variable `--syn-body-small-semibold`
639
+ */
640
+ export const SynBodySmallSemibold: string;
641
+
642
+ /**
643
+ * Maps to the css variable `--syn-body-small-bold`
644
+ */
645
+ export const SynBodySmallBold: string;
646
+
647
+ /**
648
+ * Maps to the css variable `--syn-body-medium-regular`
649
+ */
650
+ export const SynBodyMediumRegular: string;
651
+
652
+ /**
653
+ * Maps to the css variable `--syn-body-medium-semibold`
654
+ */
655
+ export const SynBodyMediumSemibold: string;
656
+
657
+ /**
658
+ * Maps to the css variable `--syn-body-medium-bold`
659
+ */
660
+ export const SynBodyMediumBold: string;
661
+
662
+ /**
663
+ * Maps to the css variable `--syn-body-large-regular`
664
+ */
665
+ export const SynBodyLargeRegular: string;
666
+
667
+ /**
668
+ * Maps to the css variable `--syn-body-large-semibold`
669
+ */
670
+ export const SynBodyLargeSemibold: string;
671
+
672
+ /**
673
+ * Maps to the css variable `--syn-body-large-bold`
674
+ */
675
+ export const SynBodyLargeBold: string;
676
+
677
+ /**
678
+ * Maps to the css variable `--syn-heading-large`
679
+ */
680
+ export const SynHeadingLarge: string;
681
+
682
+ /**
683
+ * Maps to the css variable `--syn-heading-x-large`
684
+ */
685
+ export const SynHeadingXLarge: string;
686
+
687
+ /**
688
+ * Maps to the css variable `--syn-heading-2x-large`
689
+ */
690
+ export const SynHeading2xLarge: string;
691
+
692
+ /**
693
+ * Maps to the css variable `--syn-heading-3x-large`
694
+ */
695
+ export const SynHeading3xLarge: string;
696
+
697
+ /**
698
+ * Maps to the css variable `--syn-typography-color-text`
699
+ */
700
+ export const SynTypographyColorText: string;
701
+
702
+ /**
703
+ * Maps to the css variable `--syn-typography-color-text-inverted`
704
+ */
705
+ export const SynTypographyColorTextInverted: string;
706
+
622
707
  /**
623
708
  * Maps to the css variable `--syn-color-primary-50`
624
709
  */
package/dist/js/index.js CHANGED
@@ -1,13 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.3.1
2
+ * @synergy-design-system/tokens version 1.4.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
6
- /**
7
- * @type {string}
8
- */
9
- export const SynFontSize2xSmall = 'var(--syn-font-size-2x-small)';
10
-
11
6
  /**
12
7
  * @type {string}
13
8
  */
@@ -618,6 +613,96 @@ export const SynToggleSizeMedium = 'var(--syn-toggle-size-medium)';
618
613
  */
619
614
  export const SynToggleSizeLarge = 'var(--syn-toggle-size-large)';
620
615
 
616
+ /**
617
+ * @type {string}
618
+ */
619
+ export const SynBodyXSmallRegular = 'var(--syn-body-x-small-regular)';
620
+
621
+ /**
622
+ * @type {string}
623
+ */
624
+ export const SynBodyXSmallSemibold = 'var(--syn-body-x-small-semibold)';
625
+
626
+ /**
627
+ * @type {string}
628
+ */
629
+ export const SynBodyXSmallBold = 'var(--syn-body-x-small-bold)';
630
+
631
+ /**
632
+ * @type {string}
633
+ */
634
+ export const SynBodySmallRegular = 'var(--syn-body-small-regular)';
635
+
636
+ /**
637
+ * @type {string}
638
+ */
639
+ export const SynBodySmallSemibold = 'var(--syn-body-small-semibold)';
640
+
641
+ /**
642
+ * @type {string}
643
+ */
644
+ export const SynBodySmallBold = 'var(--syn-body-small-bold)';
645
+
646
+ /**
647
+ * @type {string}
648
+ */
649
+ export const SynBodyMediumRegular = 'var(--syn-body-medium-regular)';
650
+
651
+ /**
652
+ * @type {string}
653
+ */
654
+ export const SynBodyMediumSemibold = 'var(--syn-body-medium-semibold)';
655
+
656
+ /**
657
+ * @type {string}
658
+ */
659
+ export const SynBodyMediumBold = 'var(--syn-body-medium-bold)';
660
+
661
+ /**
662
+ * @type {string}
663
+ */
664
+ export const SynBodyLargeRegular = 'var(--syn-body-large-regular)';
665
+
666
+ /**
667
+ * @type {string}
668
+ */
669
+ export const SynBodyLargeSemibold = 'var(--syn-body-large-semibold)';
670
+
671
+ /**
672
+ * @type {string}
673
+ */
674
+ export const SynBodyLargeBold = 'var(--syn-body-large-bold)';
675
+
676
+ /**
677
+ * @type {string}
678
+ */
679
+ export const SynHeadingLarge = 'var(--syn-heading-large)';
680
+
681
+ /**
682
+ * @type {string}
683
+ */
684
+ export const SynHeadingXLarge = 'var(--syn-heading-x-large)';
685
+
686
+ /**
687
+ * @type {string}
688
+ */
689
+ export const SynHeading2xLarge = 'var(--syn-heading-2x-large)';
690
+
691
+ /**
692
+ * @type {string}
693
+ */
694
+ export const SynHeading3xLarge = 'var(--syn-heading-3x-large)';
695
+
696
+ /**
697
+ * @type {string}
698
+ */
699
+ export const SynTypographyColorText = 'var(--syn-typography-color-text)';
700
+
701
+ /**
702
+ * @type {string}
703
+ */
704
+ export const SynTypographyColorTextInverted = 'var(--syn-typography-color-text-inverted)';
705
+
621
706
  /**
622
707
  * @type {string}
623
708
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,8 +1,7 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.3.1
2
+ * @synergy-design-system/tokens version 1.4.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
- $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
6
5
  $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
7
6
  $SynFontSizeSmall: var(--syn-font-size-small) !default;
8
7
  $SynFontSizeMedium: var(--syn-font-size-medium) !default;
@@ -125,6 +124,24 @@ $SynPanelBorder: var(--syn-panel-border) !default;
125
124
  $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
126
125
  $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
127
126
  $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
127
+ $SynBodyXSmallRegular: var(--syn-body-x-small-regular) !default;
128
+ $SynBodyXSmallSemibold: var(--syn-body-x-small-semibold) !default;
129
+ $SynBodyXSmallBold: var(--syn-body-x-small-bold) !default;
130
+ $SynBodySmallRegular: var(--syn-body-small-regular) !default;
131
+ $SynBodySmallSemibold: var(--syn-body-small-semibold) !default;
132
+ $SynBodySmallBold: var(--syn-body-small-bold) !default;
133
+ $SynBodyMediumRegular: var(--syn-body-medium-regular) !default;
134
+ $SynBodyMediumSemibold: var(--syn-body-medium-semibold) !default;
135
+ $SynBodyMediumBold: var(--syn-body-medium-bold) !default;
136
+ $SynBodyLargeRegular: var(--syn-body-large-regular) !default;
137
+ $SynBodyLargeSemibold: var(--syn-body-large-semibold) !default;
138
+ $SynBodyLargeBold: var(--syn-body-large-bold) !default;
139
+ $SynHeadingLarge: var(--syn-heading-large) !default;
140
+ $SynHeadingXLarge: var(--syn-heading-x-large) !default;
141
+ $SynHeading2xLarge: var(--syn-heading-2x-large) !default;
142
+ $SynHeading3xLarge: var(--syn-heading-3x-large) !default;
143
+ $SynTypographyColorText: var(--syn-typography-color-text) !default;
144
+ $SynTypographyColorTextInverted: var(--syn-typography-color-text-inverted) !default;
128
145
  $SynColorPrimary50: var(--syn-color-primary-50) !default;
129
146
  $SynColorPrimary100: var(--syn-color-primary-100) !default;
130
147
  $SynColorPrimary200: var(--syn-color-primary-200) !default;
package/dist/themes/dark.css CHANGED
@@ -1,13 +1,12 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.3.1
2
+ * @synergy-design-system/tokens version 1.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Thu, 15 Feb 2024 08:55:40 GMT
5
+ * Generated on Thu, 22 Feb 2024 07:08:20 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-dark {
9
9
  color-scheme: dark;
10
- --syn-font-size-2x-small: 10px;
11
10
  --syn-font-size-x-small: 12px;
12
11
  --syn-font-size-small: 14px;
13
12
  --syn-font-size-medium: 16px;
@@ -60,7 +59,7 @@
60
59
  --syn-border-width-large: 3px; /* Large */
61
60
  --syn-border-width-x-large: 4px; /* X Large */
62
61
  --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
63
- --syn-button-font-size-small: var(--syn-font-size-x-small);
62
+ --syn-button-font-size-small: var(--syn-font-size-small);
64
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
65
64
  --syn-button-font-size-large: var(--syn-font-size-large);
66
65
  --syn-focus-ring-color: var(--syn-color-primary-400);
@@ -113,7 +112,7 @@
113
112
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
114
113
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
115
114
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
116
- --syn-input-height-small: var(--syn-spacing-x-large);
115
+ --syn-input-height-small: 36px;
117
116
  --syn-input-height-medium: var(--syn-spacing-2x-large);
118
117
  --syn-input-height-large: var(--syn-spacing-3x-large);
119
118
  --syn-input-readonly-color: var(--syn-color-neutral-800);
@@ -131,6 +130,24 @@
131
130
  --syn-toggle-size-small: 14px;
132
131
  --syn-toggle-size-medium: var(--syn-spacing-medium);
133
132
  --syn-toggle-size-large: var(--syn-spacing-large);
133
+ --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';
134
+ --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';
135
+ --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';
136
+ --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
137
+ --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
138
+ --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
139
+ --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
140
+ --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
141
+ --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
142
+ --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
143
+ --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
144
+ --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
145
+ --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
146
+ --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
147
+ --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
148
+ --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
149
+ --syn-typography-color-text: var(--syn-color-neutral-950);
150
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
134
151
  --syn-color-primary-50: #072E4A;
135
152
  --syn-color-primary-100: #0B486F;
136
153
  --syn-color-primary-200: #065786;
@@ -213,6 +230,7 @@
213
230
  --syn-transition-fast: 150ms;
214
231
  --syn-transition-x-fast: 50ms;
215
232
  --syn-font-serif: Georgia, "Times New Roman", serif;
233
+ --syn-font-size-2x-small: 0.625rem;
216
234
  --syn-font-size-4x-large: 4.5rem;
217
235
  --syn-font-weight-light: 300;
218
236
  --syn-letter-spacing-denser: -0.03em;
package/dist/themes/light.css CHANGED
@@ -1,13 +1,12 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.3.1
2
+ * @synergy-design-system/tokens version 1.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Thu, 15 Feb 2024 08:55:40 GMT
5
+ * Generated on Thu, 22 Feb 2024 07:08:20 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-light {
9
9
  color-scheme: light;
10
- --syn-font-size-2x-small: 10px;
11
10
  --syn-font-size-x-small: 12px;
12
11
  --syn-font-size-small: 14px;
13
12
  --syn-font-size-medium: 16px;
@@ -60,7 +59,7 @@
60
59
  --syn-border-width-large: 3px; /* Large */
61
60
  --syn-border-width-x-large: 4px; /* X Large */
62
61
  --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
63
- --syn-button-font-size-small: var(--syn-font-size-x-small);
62
+ --syn-button-font-size-small: var(--syn-font-size-small);
64
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
65
64
  --syn-button-font-size-large: var(--syn-font-size-large);
66
65
  --syn-focus-ring-color: var(--syn-color-primary-400);
@@ -113,7 +112,7 @@
113
112
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
114
113
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
115
114
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
116
- --syn-input-height-small: var(--syn-spacing-x-large);
115
+ --syn-input-height-small: 36px;
117
116
  --syn-input-height-medium: var(--syn-spacing-2x-large);
118
117
  --syn-input-height-large: var(--syn-spacing-3x-large);
119
118
  --syn-input-readonly-color: var(--syn-color-neutral-800);
@@ -131,6 +130,24 @@
131
130
  --syn-toggle-size-small: 14px;
132
131
  --syn-toggle-size-medium: var(--syn-spacing-medium);
133
132
  --syn-toggle-size-large: var(--syn-spacing-large);
133
+ --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';
134
+ --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';
135
+ --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';
136
+ --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
137
+ --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
138
+ --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
139
+ --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
140
+ --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
141
+ --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
142
+ --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
143
+ --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
144
+ --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
145
+ --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
146
+ --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
147
+ --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
148
+ --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
149
+ --syn-typography-color-text: var(--syn-color-neutral-950);
150
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
134
151
  --syn-color-primary-50: #f0f9ff;
135
152
  --syn-color-primary-100: #e0f1FE;
136
153
  --syn-color-primary-200: #b9e5fe;
@@ -213,6 +230,7 @@
213
230
  --syn-transition-fast: 150ms;
214
231
  --syn-transition-x-fast: 50ms;
215
232
  --syn-font-serif: Georgia, "Times New Roman", serif;
233
+ --syn-font-size-2x-small: 0.625rem;
216
234
  --syn-font-size-4x-large: 4.5rem;
217
235
  --syn-font-weight-light: 300;
218
236
  --syn-letter-spacing-denser: -0.03em;
package/package.json CHANGED
@@ -99,7 +99,7 @@
99
99
  },
100
100
  "type": "module",
101
101
  "types": "./dist/js/index.d.ts",
102
- "version": "1.3.2",
102
+ "version": "1.5.0",
103
103
  "scripts": {
104
104
  "build": "pnpm clean && node scripts/build.js",
105
105
  "clean": "rimraf build",
package/src/figma-tokens/$metadata.json CHANGED
@@ -8,6 +8,7 @@
8
8
  "semantic/input",
9
9
  "semantic/button",
10
10
  "semantic/toggle",
11
+ "semantic/typography",
11
12
  "semantic/overlays",
12
13
  "semantic/panels",
13
14
  "_docs"
package/src/figma-tokens/$themes.json CHANGED
@@ -296,6 +296,7 @@
296
296
  "input.filled.color-disabled": "S:50d5ea5eca1de474be32aa6343b7643c5cc40049,",
297
297
  "input.filled.color-hover": "S:5eefc6417572b45a2142265f8686ce798ac04e80,",
298
298
  "input.filled.color-focus": "S:bc4ba1f6b31a61949d3c4186b243633dba518ae6,"
299
+
299
300
  },
300
301
  "selectedTokenSets": {
301
302
  "globals": "source",
@@ -303,11 +304,14 @@
303
304
  "color/primitives": "source",
304
305
  "semantic/input": "enabled",
305
306
  "semantic/button": "enabled",
306
- "semantic/toggle": "enabled"
307
+ "semantic/toggle": "enabled",
308
+ "semantic/typography": "enabled"
307
309
  },
308
310
  "$figmaCollectionId": "VariableCollectionId:790:67393",
309
311
  "$figmaModeId": "790:0",
310
312
  "$figmaVariableReferences": {
313
+ "typography.color.text": "0bce8a23c955ec27b2edc35101d7c955ac12dc13",
314
+ "typography.color.text-inverted": "1411de66484c1b8ca3c0034b32473973ed6838fb",
311
315
  "toggle.size.small": "59e798ea0cba4be9ea32e894e79cecd7b82cfded",
312
316
  "toggle.size.medium": "c853d6f661e4380daff9745e0e4b39e2b56637f3",
313
317
  "toggle.size.large": "8c9580c2db9de0c2ceb7553e99520d3a5c4a90d3",
package/src/figma-tokens/_docs.json CHANGED
@@ -1810,12 +1810,42 @@
1810
1810
  },
1811
1811
  "typography": {
1812
1812
  "description": {
1813
- "value": "Typography tokens are used to maintain a consistent set of font styles throughout your app.",
1813
+ "value": "Typography tokens are used to define typographic style of headings, body text, and UI components. They are used to maintain a consistent set of font styles throughout your app.",
1814
1814
  "type": "text"
1815
1815
  },
1816
1816
  "title": {
1817
1817
  "value": "Typography",
1818
1818
  "type": "text"
1819
+ },
1820
+ "text-styles": {
1821
+ "description": {
1822
+ "value": "The Synergy text styles are made up of two categories to cover the range of different needs in designs: Headings and Body / UI text.\n\nUnless explicitly mentioned otherwise in a component, Synergy recommends using sentence case capitalization throughout your applications.",
1823
+ "type": "text"
1824
+ },
1825
+ "title": {
1826
+ "value": "Text styles",
1827
+ "type": "text"
1828
+ },
1829
+ "headings": {
1830
+ "description": {
1831
+ "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\nbuilding page hierarchy,\nhelping users scan large chunks of text,\nproviding a title to a page or piece of content,\nas subheadings or eyebrow headings, where there is still only one H1 tag per page (as per Accessibility requirements).\n\nOur heading styles are consistently bold, to better address the visual hierarchy.",
1832
+ "type": "text"
1833
+ },
1834
+ "title": {
1835
+ "value": "Headings",
1836
+ "type": "text"
1837
+ }
1838
+ },
1839
+ "body": {
1840
+ "description": {
1841
+ "value": "Body text is used for long-form content where a paragraph or multiple lines of text are required. Body text styles are optimized for reading as a large chunk of information through line height and paragraph spacing. Inline links sit within body text styles and inherit the same font values. \nUI text is text used in UI components and uses the same text stylings.\n\nThe default font size is medium (16 px). Synergy supports three additional font sizes for body copy.\nIt is also possible to format the text bold for certain text passages.",
1842
+ "type": "text"
1843
+ },
1844
+ "title": {
1845
+ "value": "Body and UI text",
1846
+ "type": "text"
1847
+ }
1848
+ }
1819
1849
  }
1820
1850
  },
1821
1851
  "z-index": {
package/src/figma-tokens/globals.json CHANGED
@@ -1,9 +1,5 @@
1
1
  {
2
2
  "font-size": {
3
- "2x-small": {
4
- "value": "10px",
5
- "type": "fontSizes"
6
- },
7
3
  "x-small": {
8
4
  "value": "12px",
9
5
  "type": "fontSizes"
package/src/figma-tokens/semantic/button.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "button": {
3
3
  "font-size": {
4
4
  "small": {
5
- "value": "{font-size.x-small}",
5
+ "value": "{font-size.small}",
6
6
  "type": "fontSizes"
7
7
  },
8
8
  "medium": {
package/src/figma-tokens/semantic/input.json CHANGED
@@ -218,7 +218,7 @@
218
218
  },
219
219
  "height": {
220
220
  "small": {
221
- "value": "{spacing.x-large}",
221
+ "value": "36px",
222
222
  "type": "spacing"
223
223
  },
224
224
  "medium": {
package/src/figma-tokens/semantic/typography.json ADDED
@@ -0,0 +1,170 @@
1
+ {
2
+ "body": {
3
+ "x-small": {
4
+ "regular": {
5
+ "value": {
6
+ "fontFamily": "{font.sans}",
7
+ "fontWeight": "{font-weight.normal}",
8
+ "fontSize": "{font-size.x-small}",
9
+ "lineHeight": "{line-height.normal}"
10
+ },
11
+ "type": "typography"
12
+ },
13
+ "semibold": {
14
+ "value": {
15
+ "fontFamily": "{font.sans}",
16
+ "fontWeight": "{font-weight.semibold}",
17
+ "fontSize": "{font-size.x-small}",
18
+ "lineHeight": "{line-height.normal}"
19
+ },
20
+ "type": "typography"
21
+ },
22
+ "bold": {
23
+ "value": {
24
+ "fontFamily": "{font.sans}",
25
+ "fontWeight": "{font-weight.bold}",
26
+ "fontSize": "{font-size.x-small}",
27
+ "lineHeight": "{line-height.normal}"
28
+ },
29
+ "type": "typography"
30
+ }
31
+ },
32
+ "small": {
33
+ "regular": {
34
+ "value": {
35
+ "fontFamily": "{font.sans}",
36
+ "fontWeight": "{font-weight.normal}",
37
+ "fontSize": "{font-size.small}",
38
+ "lineHeight": "{line-height.normal}"
39
+ },
40
+ "type": "typography"
41
+ },
42
+ "semibold": {
43
+ "value": {
44
+ "fontFamily": "{font.sans}",
45
+ "fontWeight": "{font-weight.semibold}",
46
+ "fontSize": "{font-size.small}",
47
+ "lineHeight": "{line-height.normal}"
48
+ },
49
+ "type": "typography"
50
+ },
51
+ "bold": {
52
+ "value": {
53
+ "fontFamily": "{font.sans}",
54
+ "fontWeight": "{font-weight.bold}",
55
+ "fontSize": "{font-size.small}",
56
+ "lineHeight": "{line-height.normal}"
57
+ },
58
+ "type": "typography"
59
+ }
60
+ },
61
+ "medium": {
62
+ "regular": {
63
+ "value": {
64
+ "fontFamily": "{font.sans}",
65
+ "fontWeight": "{font-weight.normal}",
66
+ "fontSize": "{font-size.medium}",
67
+ "lineHeight": "{line-height.normal}"
68
+ },
69
+ "type": "typography"
70
+ },
71
+ "semibold": {
72
+ "value": {
73
+ "fontFamily": "{font.sans}",
74
+ "fontWeight": "{font-weight.semibold}",
75
+ "fontSize": "{font-size.medium}",
76
+ "lineHeight": "{line-height.normal}"
77
+ },
78
+ "type": "typography"
79
+ },
80
+ "bold": {
81
+ "value": {
82
+ "fontFamily": "{font.sans}",
83
+ "fontWeight": "{font-weight.bold}",
84
+ "fontSize": "{font-size.medium}",
85
+ "lineHeight": "{line-height.normal}"
86
+ },
87
+ "type": "typography"
88
+ }
89
+ },
90
+ "large": {
91
+ "regular": {
92
+ "value": {
93
+ "fontFamily": "{font.sans}",
94
+ "fontWeight": "{font-weight.normal}",
95
+ "fontSize": "{font-size.large}",
96
+ "lineHeight": "{line-height.normal}"
97
+ },
98
+ "type": "typography"
99
+ },
100
+ "semibold": {
101
+ "value": {
102
+ "fontFamily": "{font.sans}",
103
+ "fontWeight": "{font-weight.semibold}",
104
+ "fontSize": "{font-size.large}",
105
+ "lineHeight": "{line-height.normal}"
106
+ },
107
+ "type": "typography"
108
+ },
109
+ "bold": {
110
+ "value": {
111
+ "fontFamily": "{font.sans}",
112
+ "fontWeight": "{font-weight.bold}",
113
+ "fontSize": "{font-size.large}",
114
+ "lineHeight": "{line-height.normal}"
115
+ },
116
+ "type": "typography"
117
+ }
118
+ }
119
+ },
120
+ "heading": {
121
+ "large": {
122
+ "value": {
123
+ "fontFamily": "{font.sans}",
124
+ "fontWeight": "{font-weight.bold}",
125
+ "fontSize": "{font-size.large}",
126
+ "lineHeight": "{line-height.normal}"
127
+ },
128
+ "type": "typography"
129
+ },
130
+ "x-large": {
131
+ "value": {
132
+ "fontFamily": "{font.sans}",
133
+ "fontWeight": "{font-weight.bold}",
134
+ "fontSize": "{font-size.x-large}",
135
+ "lineHeight": "{line-height.dense}"
136
+ },
137
+ "type": "typography"
138
+ },
139
+ "2x-large": {
140
+ "value": {
141
+ "fontFamily": "{font.sans}",
142
+ "fontWeight": "{font-weight.bold}",
143
+ "fontSize": "{font-size.2x-large}",
144
+ "lineHeight": "{line-height.dense}"
145
+ },
146
+ "type": "typography"
147
+ },
148
+ "3x-large": {
149
+ "value": {
150
+ "fontFamily": "{font.sans}",
151
+ "fontWeight": "{font-weight.bold}",
152
+ "fontSize": "{font-size.3x-large}",
153
+ "lineHeight": "{line-height.dense}"
154
+ },
155
+ "type": "typography"
156
+ }
157
+ },
158
+ "typography": {
159
+ "color": {
160
+ "text": {
161
+ "value": "{neutral.950}",
162
+ "type": "color"
163
+ },
164
+ "text-inverted": {
165
+ "value": "{neutral.0}",
166
+ "type": "color"
167
+ }
168
+ }
169
+ }
170
+ }