@synergy-design-system/tokens 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ 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))
+
+# [@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)
+
+
+### Bug Fixes
+
+* 🤔 color tokens to variables sync ([#321](https://github.com/synergy-design-system/synergy-design-system/issues/321)) ([41c7195](https://github.com/synergy-design-system/synergy-design-system/commit/41c719571cf4905125420343e91a349597da16d5))
+
 # [@synergy-design-system/tokens-v1.3.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.3.0...tokens/1.3.1) (2024-02-09)
 
 

package/dist/js/index.d.ts

@@ -1,14 +1,9 @@
 /**
- * @synergy-design-system/tokens version 1.3.0
+ * @synergy-design-system/tokens version 1.3.2
  * SICK Global UX Foundation
  */
 
 
-/**
- * Maps to the css variable `--syn-font-size-2x-small`
- */
-export const SynFontSize2xSmall: string;
-
 /**
  * Maps to the css variable `--syn-font-size-x-small`
  */
@@ -579,6 +574,31 @@ export const SynInputFontSizeMedium: string;
  */
 export const SynInputFontSizeLarge: string;
 
+/**
+ * Maps to the css variable `--syn-overlay-color`
+ */
+export const SynOverlayColor: string;
+
+/**
+ * Maps to the css variable `--syn-overlay-opacity`
+ */
+export const SynOverlayOpacity: string;
+
+/**
+ * Maps to the css variable `--syn-background-color`
+ */
+export const SynBackgroundColor: string;
+
+/**
+ * Maps to the css variable `--syn-border-color`
+ */
+export const SynBorderColor: string;
+
+/**
+ * Maps to the css variable `--syn-panel-border`
+ */
+export const SynPanelBorder: string;
+
 /**
  * Maps to the css variable `--syn-toggle-size-small`
  */
@@ -594,6 +614,96 @@ export const SynToggleSizeMedium: string;
  */
 export const SynToggleSizeLarge: string;
 
+/**
+ * Maps to the css variable `--syn-body-x-small-regular`
+ */
+export const SynBodyXSmallRegular: string;
+
+/**
+ * Maps to the css variable `--syn-body-x-small-semibold`
+ */
+export const SynBodyXSmallSemibold: string;
+
+/**
+ * Maps to the css variable `--syn-body-x-small-bold`
+ */
+export const SynBodyXSmallBold: string;
+
+/**
+ * Maps to the css variable `--syn-body-small-regular`
+ */
+export const SynBodySmallRegular: string;
+
+/**
+ * Maps to the css variable `--syn-body-small-semibold`
+ */
+export const SynBodySmallSemibold: string;
+
+/**
+ * Maps to the css variable `--syn-body-small-bold`
+ */
+export const SynBodySmallBold: string;
+
+/**
+ * Maps to the css variable `--syn-body-medium-regular`
+ */
+export const SynBodyMediumRegular: string;
+
+/**
+ * Maps to the css variable `--syn-body-medium-semibold`
+ */
+export const SynBodyMediumSemibold: string;
+
+/**
+ * Maps to the css variable `--syn-body-medium-bold`
+ */
+export const SynBodyMediumBold: string;
+
+/**
+ * Maps to the css variable `--syn-body-large-regular`
+ */
+export const SynBodyLargeRegular: string;
+
+/**
+ * Maps to the css variable `--syn-body-large-semibold`
+ */
+export const SynBodyLargeSemibold: string;
+
+/**
+ * Maps to the css variable `--syn-body-large-bold`
+ */
+export const SynBodyLargeBold: string;
+
+/**
+ * Maps to the css variable `--syn-heading-large`
+ */
+export const SynHeadingLarge: string;
+
+/**
+ * Maps to the css variable `--syn-heading-x-large`
+ */
+export const SynHeadingXLarge: string;
+
+/**
+ * Maps to the css variable `--syn-heading-2x-large`
+ */
+export const SynHeading2xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-heading-3x-large`
+ */
+export const SynHeading3xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-typography-color-text`
+ */
+export const SynTypographyColorText: string;
+
+/**
+ * Maps to the css variable `--syn-typography-color-text-inverted`
+ */
+export const SynTypographyColorTextInverted: string;
+
 /**
  * Maps to the css variable `--syn-color-primary-50`
  */

package/dist/js/index.js

@@ -1,13 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.3.0
+ * @synergy-design-system/tokens version 1.3.2
  * SICK Global UX Foundation
  */
 
-/**
- * @type {string}
- */
-export const SynFontSize2xSmall = 'var(--syn-font-size-2x-small)';
-
 /**
  * @type {string}
  */
@@ -578,6 +573,31 @@ export const SynInputFontSizeMedium = 'var(--syn-input-font-size-medium)';
  */
 export const SynInputFontSizeLarge = 'var(--syn-input-font-size-large)';
 
+/**
+ * @type {string}
+ */
+export const SynOverlayColor = 'var(--syn-overlay-color)';
+
+/**
+ * @type {string}
+ */
+export const SynOverlayOpacity = 'var(--syn-overlay-opacity)';
+
+/**
+ * @type {string}
+ */
+export const SynBackgroundColor = 'var(--syn-background-color)';
+
+/**
+ * @type {string}
+ */
+export const SynBorderColor = 'var(--syn-border-color)';
+
+/**
+ * @type {string}
+ */
+export const SynPanelBorder = 'var(--syn-panel-border)';
+
 /**
  * @type {string}
  */
@@ -593,6 +613,96 @@ export const SynToggleSizeMedium = 'var(--syn-toggle-size-medium)';
  */
 export const SynToggleSizeLarge = 'var(--syn-toggle-size-large)';
 
+/**
+ * @type {string}
+ */
+export const SynBodyXSmallRegular = 'var(--syn-body-x-small-regular)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyXSmallSemibold = 'var(--syn-body-x-small-semibold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyXSmallBold = 'var(--syn-body-x-small-bold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodySmallRegular = 'var(--syn-body-small-regular)';
+
+/**
+ * @type {string}
+ */
+export const SynBodySmallSemibold = 'var(--syn-body-small-semibold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodySmallBold = 'var(--syn-body-small-bold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyMediumRegular = 'var(--syn-body-medium-regular)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyMediumSemibold = 'var(--syn-body-medium-semibold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyMediumBold = 'var(--syn-body-medium-bold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyLargeRegular = 'var(--syn-body-large-regular)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyLargeSemibold = 'var(--syn-body-large-semibold)';
+
+/**
+ * @type {string}
+ */
+export const SynBodyLargeBold = 'var(--syn-body-large-bold)';
+
+/**
+ * @type {string}
+ */
+export const SynHeadingLarge = 'var(--syn-heading-large)';
+
+/**
+ * @type {string}
+ */
+export const SynHeadingXLarge = 'var(--syn-heading-x-large)';
+
+/**
+ * @type {string}
+ */
+export const SynHeading2xLarge = 'var(--syn-heading-2x-large)';
+
+/**
+ * @type {string}
+ */
+export const SynHeading3xLarge = 'var(--syn-heading-3x-large)';
+
+/**
+ * @type {string}
+ */
+export const SynTypographyColorText = 'var(--syn-typography-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynTypographyColorTextInverted = 'var(--syn-typography-color-text-inverted)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,8 +1,7 @@
 /**
- * @synergy-design-system/tokens version 1.3.0
+ * @synergy-design-system/tokens version 1.3.2
  * SICK Global UX Foundation
  */
-$SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
 $SynFontSizeSmall: var(--syn-font-size-small) !default;
 $SynFontSizeMedium: var(--syn-font-size-medium) !default;
@@ -117,9 +116,32 @@ $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
 $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
 $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
 $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
+$SynOverlayColor: var(--syn-overlay-color) !default;
+$SynOverlayOpacity: var(--syn-overlay-opacity) !default;
+$SynBackgroundColor: var(--syn-background-color) !default;
+$SynBorderColor: var(--syn-border-color) !default;
+$SynPanelBorder: var(--syn-panel-border) !default;
 $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
 $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
 $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
+$SynBodyXSmallRegular: var(--syn-body-x-small-regular) !default;
+$SynBodyXSmallSemibold: var(--syn-body-x-small-semibold) !default;
+$SynBodyXSmallBold: var(--syn-body-x-small-bold) !default;
+$SynBodySmallRegular: var(--syn-body-small-regular) !default;
+$SynBodySmallSemibold: var(--syn-body-small-semibold) !default;
+$SynBodySmallBold: var(--syn-body-small-bold) !default;
+$SynBodyMediumRegular: var(--syn-body-medium-regular) !default;
+$SynBodyMediumSemibold: var(--syn-body-medium-semibold) !default;
+$SynBodyMediumBold: var(--syn-body-medium-bold) !default;
+$SynBodyLargeRegular: var(--syn-body-large-regular) !default;
+$SynBodyLargeSemibold: var(--syn-body-large-semibold) !default;
+$SynBodyLargeBold: var(--syn-body-large-bold) !default;
+$SynHeadingLarge: var(--syn-heading-large) !default;
+$SynHeadingXLarge: var(--syn-heading-x-large) !default;
+$SynHeading2xLarge: var(--syn-heading-2x-large) !default;
+$SynHeading3xLarge: var(--syn-heading-3x-large) !default;
+$SynTypographyColorText: var(--syn-typography-color-text) !default;
+$SynTypographyColorTextInverted: var(--syn-typography-color-text-inverted) !default;
 $SynColorPrimary50: var(--syn-color-primary-50) !default;
 $SynColorPrimary100: var(--syn-color-primary-100) !default;
 $SynColorPrimary200: var(--syn-color-primary-200) !default;

package/dist/themes/dark.css

@@ -1,13 +1,12 @@
 /**
- * @synergy-design-system/tokens version 1.3.0
+ * @synergy-design-system/tokens version 1.3.2
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 12:30:27 GMT
+ * Generated on Thu, 15 Feb 2024 10:58:44 GMT
  */
 
 :root, .syn-theme-dark {
   color-scheme: dark;
-  --syn-font-size-2x-small: 10px;
   --syn-font-size-x-small: 12px;
   --syn-font-size-small: 14px;
   --syn-font-size-medium: 16px;
@@ -123,9 +122,32 @@
   --syn-input-font-size-small: var(--syn-font-size-small);
   --syn-input-font-size-medium: var(--syn-font-size-medium);
   --syn-input-font-size-large: var(--syn-font-size-large);
+  --syn-overlay-color: var(--syn-color-neutral-1000);
+  --syn-overlay-opacity: 0.4;
+  --syn-background-color: var(--syn-color-neutral-0);
+  --syn-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border: var(--syn-border-width-small);
   --syn-toggle-size-small: 14px;
   --syn-toggle-size-medium: var(--syn-spacing-medium);
   --syn-toggle-size-large: var(--syn-spacing-large);
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --syn-typography-color-text: var(--syn-color-neutral-950);
+  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
   --syn-color-primary-50: #072E4A;
   --syn-color-primary-100: #0B486F;
   --syn-color-primary-200: #065786;
@@ -208,6 +230,7 @@
   --syn-transition-fast: 150ms;
   --syn-transition-x-fast: 50ms;
   --syn-font-serif: Georgia, "Times New Roman", serif;
+  --syn-font-size-2x-small: 0.625rem;
   --syn-font-size-4x-large: 4.5rem;
   --syn-font-weight-light: 300;
   --syn-letter-spacing-denser: -0.03em;

package/dist/themes/light.css

@@ -1,13 +1,12 @@
 /**
- * @synergy-design-system/tokens version 1.3.0
+ * @synergy-design-system/tokens version 1.3.2
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 12:30:27 GMT
+ * Generated on Thu, 15 Feb 2024 10:58:44 GMT
  */
 
 :root, .syn-theme-light {
   color-scheme: light;
-  --syn-font-size-2x-small: 10px;
   --syn-font-size-x-small: 12px;
   --syn-font-size-small: 14px;
   --syn-font-size-medium: 16px;
@@ -123,9 +122,32 @@
   --syn-input-font-size-small: var(--syn-font-size-small);
   --syn-input-font-size-medium: var(--syn-font-size-medium);
   --syn-input-font-size-large: var(--syn-font-size-large);
+  --syn-overlay-color: var(--syn-color-neutral-1000);
+  --syn-overlay-opacity: 0.4;
+  --syn-background-color: var(--syn-color-neutral-0);
+  --syn-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border: var(--syn-border-width-small);
   --syn-toggle-size-small: 14px;
   --syn-toggle-size-medium: var(--syn-spacing-medium);
   --syn-toggle-size-large: var(--syn-spacing-large);
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --syn-typography-color-text: var(--syn-color-neutral-950);
+  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
   --syn-color-primary-50: #f0f9ff;
   --syn-color-primary-100: #e0f1FE;
   --syn-color-primary-200: #b9e5fe;
@@ -208,6 +230,7 @@
   --syn-transition-fast: 150ms;
   --syn-transition-x-fast: 50ms;
   --syn-font-serif: Georgia, "Times New Roman", serif;
+  --syn-font-size-2x-small: 0.625rem;
   --syn-font-size-4x-large: 4.5rem;
   --syn-font-weight-light: 300;
   --syn-letter-spacing-denser: -0.03em;

package/package.json

@@ -99,7 +99,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/$metadata.json

@@ -8,6 +8,9 @@
     "semantic/input",
     "semantic/button",
     "semantic/toggle",
+    "semantic/typography",
+    "semantic/overlays",
+    "semantic/panels",
     "_docs"
   ]
 }

package/src/figma-tokens/$themes.json

@@ -1,82 +1,92 @@
 [
+  {
+    "id": "30eaeb034a2c0a58ba5a3f529b201a5a4a615948",
+    "name": "Color",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "color/primitives": "enabled"
+    },
+    "$figmaCollectionId": "VariableCollectionId:9166:113417",
+    "$figmaModeId": "9166:0",
+    "$figmaVariableReferences": {
+      "gray.50": "9e25df19fb759d366fb1a4a6815dcef16d1e44cf",
+      "gray.100": "fb37808697512e1cd808ebb6744be9269d08fee1",
+      "gray.200": "4c2c449447c3254cff01207907b891c1b26aab92",
+      "gray.300": "1262992b92a2ec4f1021064a5840aa9684365cea",
+      "gray.400": "33b9844da362dfaa9a3b40d0a60ab5fafdfc48f1",
+      "gray.500": "07cf5aff18a5897ce4519f69b0293cdffba50644",
+      "gray.600": "38a78fa199f15699e7ad210a229e9474868691ee",
+      "gray.700": "bfab513733dfa0e77568df190ccf3ade46b14a15",
+      "gray.800": "2304500662fba27ef88f2e821f2e1875a494ccff",
+      "gray.900": "8074bf429189f359ed3064baf7fe73ddd720c835",
+      "gray.950": "b22124c1f3f80ed9f9cc981ae716a913c2ef9a40",
+      "red.50": "b58d43b7f21eb95b731d667a634c882710b9316b",
+      "red.100": "05eed336ab3c1eaba504aa39d9c2163d1ba3faaf",
+      "red.200": "08bb22894e4fef0c5999f676e38303168598e704",
+      "red.300": "4aabbf556b4dadcee38f172c19d2233656383ea3",
+      "red.400": "bf82c149df195d615f5b17d0192980d95e87971b",
+      "red.500": "bf6baff57009aa3d05d3f82d49a8a8e6be56c478",
+      "red.600": "4bd91b9f4459683b8c372194ba87989f6ea38ab1",
+      "red.700": "178059706bdd71aee8c70411c16e50d6a3d314e4",
+      "red.800": "8701142194655fa31017ed9fb6c77142c4ef8522",
+      "red.900": "fd2f325573a66b57a413a213cfe95c2b20d8d964",
+      "red.950": "09f27d6c9c8055a33f270d62177b611df4d78036",
+      "yellow.50": "5a8d11221a5535b001d32cc5666f373189c6c9ec",
+      "yellow.100": "2fec99154f6bbe0689ebbc3249d6624fc324ec75",
+      "yellow.200": "49654ff8accb13d9da798eab41ea9d6386c80b91",
+      "yellow.300": "8201e8439b1a9c4eb92729a93392da73baf5d4c7",
+      "yellow.400": "f6586b4fb6b32f5c69db4add5a6bf61bd48976da",
+      "yellow.500": "8221c1bbdcd930332c980623b2b29c50fe04009d",
+      "yellow.600": "cc9c716e8a9898414d0bd6340c3d251ba10023e4",
+      "yellow.700": "b4c9d00a7e57851fca3af062d7da698169804631",
+      "yellow.800": "9da548ef522db22a37861b7a4335dfa946fbf75e",
+      "yellow.900": "8698887bf064f37e7fb0d3a849e3f412103a03b3",
+      "yellow.950": "e98385857b067e47df42cb0cc5d0856ace9076f2",
+      "green.50": "26940f7b616ac809fe61d68b7ca77c202d396a5f",
+      "green.100": "8b4a52fe7d3b7192a797306d4e7618e933c19ab7",
+      "green.200": "df9a96af37b3e023e2f2f4da17dbe26d70036890",
+      "green.300": "27f2d2623bd64444166d8568e8ca057ec94cbbb3",
+      "green.400": "9c0341e4bab8c217fc43bee3779df86a263e5daf",
+      "green.500": "88ac6c57bc3df89bf4952db3f5290ac96e53e574",
+      "green.600": "b171e9a1c240379e46029da90ea1094f666da161",
+      "green.700": "e85529a79649e8c520f42f4c82fad321954ccdb9",
+      "green.800": "bd26e0ee0165f78a7aa38d7e80470b45b85796db",
+      "green.900": "b3826a04d49e56c252167464956f63aa2de29574",
+      "green.950": "244a7791f6b88c6a253c78219e4cddc7c72de6ac",
+      "Blue.50": "eec3eb9d7c9f4a913fb7c36bdcd02095a92ba2a8",
+      "Blue.100": "748e5d714b0c9a2751d185e8ddb369b0e9965602",
+      "Blue.200": "6d4ff7a017a9fb2f3d22dbeec03b97f8761dcf1c",
+      "Blue.300": "86b7b8d7010497257453f5bd53a580dd6f369f42",
+      "Blue.400": "907ce2d73af14184b21e0879ed6410181f1ed1a9",
+      "Blue.500": "14247475344394599586702bbca9ffbc5f907778",
+      "Blue.600": "0aaa2dc223323d981e4d4a4459daf74522ec0a80",
+      "Blue.700": "b81f2f9afa5bd577829b392b7f75f45db2dd7290",
+      "Blue.800": "da484fff6f543c6f79c236b301dfce2b6885a419",
+      "Blue.900": "9d0de7fbea23a24063921e18bfcb69f876a05c45",
+      "Blue.950": "690f2c8868eb9b5704759391eb0d1df45da23535",
+      "Orange.50": "03adfa8ddf4e6cbd446f8f49b0d208e181db327b",
+      "Orange.100": "5b5ed8730ed7275205e0c3d1cb0f71047a8e9ffa",
+      "Orange.200": "ea26989c45972cdfe41031ef5e1f77a4096108f5",
+      "Orange.300": "734539480a6d4f55ad7b91468752a8ddfd141f27",
+      "Orange.400": "a7cd3d70c559f44d5597a432d175577f979dc79d",
+      "Orange.500": "dae0e2552bb85ca13a7f8fe98e0801b40cadffef",
+      "Orange.600": "87f8106b27b09ab81e5203a0b3d7f3675c59ea9c",
+      "Orange.700": "63d83beadea7774aa4a5e88097bc972b2dde7a65",
+      "Orange.800": "e3ec4df7d820716329beb709c16c2b02e437e22f",
+      "Orange.900": "9e798dfff4f5a19e1b078cc4102f056776e3e43f",
+      "Orange.950": "2c788b82eb095308cc4732b20310c43d9192443c",
+      "black": "bafcb93aa9c2c7d5962ae1f708c5fe9df2a01c63",
+      "white": "59831283e335dadc50c9b259071fc562d6c66809"
+    },
+    "group": "Primitives"
+  },
   {
     "id": "eda1d35f1a28a0d1fce620eca524dde48d6b5817",
     "name": "Light",
-    "group": "Theme",
     "selectedTokenSets": {
-      "color/light": "enabled",
-      "color/primitives": "source"
-    },
-    "$figmaStyleReferences": {
-      "primary.50": "S:eb21790c7e19e4a2f70b605f29d45573656ac66e,",
-      "primary.100": "S:4a436d03e133e2f9e2d9e0ba5cba10be7b642a8a,",
-      "primary.200": "S:307500524cfd8db249405a59aaf33e264dbe8d12,",
-      "primary.300": "S:f65ceb6c19b881aca9dd5d94c8f5a58ffdc9f88b,",
-      "primary.400": "S:70b10b5bab8cb75d447c90ff8cbf25ee7d30ec86,",
-      "primary.500": "S:152b4c437186868adebb9b8fdc085fee604ddb94,",
-      "primary.600": "S:4da2b1de83c093f798f767cf6ba9a0e24d16f628,",
-      "primary.700": "S:0526fb3d7a467e40152f1e77ed99de925740366e,",
-      "primary.800": "S:36cd297dd5fbd2e0b8016d0c569f1faa7c3ec326,",
-      "primary.900": "S:5819d2e5902534d6d1685f5554be14ebf227ca79,",
-      "primary.950": "S:dddb12de0f9dcd0fe84bdc1aaaa397ac9f78dce3,",
-      "success.50": "S:24767fb8592fef02887fde3e919dd8ac973ae247,",
-      "success.100": "S:fdbc5133bd3eea9eec3f5c2c80875e3f7bc34b29,",
-      "success.200": "S:6edd294f9775e88980be28f8fd85d648a0c83b9f,",
-      "success.300": "S:49123946357535074af74b029355875717bd1469,",
-      "success.400": "S:e9e15a2b3bd2a6dac525059709818494ee10b87b,",
-      "success.500": "S:cc607932fb736bdb86e89e8e7e9183fb670eac60,",
-      "success.600": "S:b06569940ac64bd060152119b270998c195942e1,",
-      "success.700": "S:2e16d80617f8d94a724b1c16aec25a013b580c05,",
-      "success.800": "S:d5b59f7b9fd2f68aa52d9690b3dc04075f7d9881,",
-      "success.900": "S:f0b3f80f6e7f68c4ee9807112e1fd7190869788b,",
-      "success.950": "S:9a41e43c2566893c9346151527a4b9b2d94eeb13,",
-      "warning.50": "S:76392270794cf9003043199a1fb80e93dc707185,",
-      "warning.100": "S:733e92480ba5f7afa9a449b2c3e95bd1189bb7b7,",
-      "warning.200": "S:3acc0f9bced069faa9a233972d4aaac807179183,",
-      "warning.300": "S:4951af8e2cffa906bca198fbe200d474e3cd87d1,",
-      "warning.400": "S:bf0a2e7c12d221a58878e7c6c5c9a2ca4166e075,",
-      "warning.500": "S:d6842ae59fff988fdf083801bb68a7a0e8508ac1,",
-      "warning.600": "S:948a0f0d3717f335a15ebed22798a66af8c2b980,",
-      "warning.700": "S:b1f2c333f2935dbb3a5bc6c96aa3b3ca0a2e3bad,",
-      "warning.800": "S:652e405f147b73d55779028ba3d4b983e6879ed1,",
-      "warning.900": "S:a1c625055d4d4955d5b48091d9b32d5eb9002a88,",
-      "warning.950": "S:db90a4f762f2a8ecbe9f38805192def04510e957,",
-      "error.50": "S:6c8125be7ffaf57936249d85697991361b7bf256,",
-      "error.100": "S:fd14b86cf9589599d5642f20490699bd703c5790,",
-      "error.200": "S:c24d89e9b16e6945662726efbc4fbad459d2cdd2,",
-      "error.300": "S:c0d80929e48c7abe0196534d761ae3a457d9b5bd,",
-      "error.400": "S:352fc3f9f38d7d24a2ea6b1c9ed43d5b3d45bf25,",
-      "error.500": "S:744a65e527ad3eca02d1789a362d22eda0b87298,",
-      "error.600": "S:d78a673addd92c4289b59bc65c2ba180633c0bbb,",
-      "error.700": "S:1d9da544e7c9d3ee284fb6e39382ff8c21d29905,",
-      "error.800": "S:3193dd999604acfbb13eaec3a0af9133ea0c77f1,",
-      "error.900": "S:1288704f21d62f4601808c1ec39f7a72b2ae68ea,",
-      "error.950": "S:215d4e103be4036dfd2d3999d5694f9de6cff44e,",
-      "accent.50": "S:f808fd1aa0a39958ba38567ffbd12d9cf08bb8db,",
-      "accent.100": "S:df64c93f07ca623a2ff9317970cb697bbb20d489,",
-      "accent.200": "S:5f335b66860316b3005e9a57c1f6d3680718a543,",
-      "accent.300": "S:92733c9d5a98b03c823df0b0ec62d01da2c5d752,",
-      "accent.400": "S:272ff349ce90572087a3c0279c34329bfa6abdcd,",
-      "accent.500": "S:976cc6afa147d76dc0c318f06fad395ca557bb48,",
-      "accent.600": "S:b930610bb4e5739ae2eda8e9821ca62309ba6255,",
-      "accent.700": "S:a69855804920427dd774a522a76eab46ceda0ef7,",
-      "accent.800": "S:0e841c4c7ca0a38349bf4b2de12375766aa00b63,",
-      "accent.900": "S:257c834b700f26a583341f9839a569cee1069c9f,",
-      "accent.950": "S:c71006592cf2f0b78f32f49d860022e4e8e84254,",
-      "neutral.0": "S:b7a1b264c509174465233944161ef1ca23844aaa,",
-      "neutral.50": "S:fbf7c8b17444630a19135afa0117fac5d6de9fad,",
-      "neutral.100": "S:cbbec7b9aaa2555b2ccb3723e1a9bc46f316ea90,",
-      "neutral.200": "S:2b6f85a23b4004c3fd203639e17776890967eda1,",
-      "neutral.300": "S:bf27cc325f87a38b7f61a0798947d36c474e697b,",
-      "neutral.400": "S:1dbe9bc54fd40ea3c00d5dd9b2e96ecafd59d863,",
-      "neutral.500": "S:a3455c307d7c5140560a3942c2b9f15f6f8cc319,",
-      "neutral.600": "S:4c944f35c9a258fdf7b399afec70a9af80375007,",
-      "neutral.700": "S:736eb05fb7854a8d18856dc2e468e421b9be62b2,",
-      "neutral.800": "S:f4808864247a6de18ff89e0f9deead729171a03d,",
-      "neutral.900": "S:f900be7e522d6cc37fd9a42a7424e7cc9f26ddf0,",
-      "neutral.950": "S:e93db93d4a0917ba11a25848068fe80112ee5a6c,",
-      "neutral.1000": "S:26fbb5f80e80129dd6abe5a9ace6071523c5e121,"
+      "color/light": "enabled"
     },
+    "$figmaStyleReferences": {},
     "$figmaVariableReferences": {
       "primary.50": "ec4c6e8b546a9753d6446853aa103a946ba3a5b9",
       "primary.100": "ea740c2c136f469e8559985c19d8a22d93dd5be2",
@@ -148,15 +158,14 @@
       "neutral.1000": "1dfbb4a2b696500e0b547922a22e5e8db7372364"
     },
     "$figmaCollectionId": "VariableCollectionId:21:286",
-    "$figmaModeId": "21:0"
+    "$figmaModeId": "21:0",
+    "group": "Theme"
   },
   {
     "id": "f39c786993e4942a7c329538c246ec8fa5e56c30",
     "name": "Dark",
-    "group": "Theme",
     "selectedTokenSets": {
-      "color/dark": "enabled",
-      "color/primitives": "source"
+      "color/dark": "enabled"
     },
     "$figmaStyleReferences": {},
     "$figmaVariableReferences": {
@@ -230,7 +239,8 @@
       "neutral.1000": "1dfbb4a2b696500e0b547922a22e5e8db7372364"
     },
     "$figmaCollectionId": "VariableCollectionId:21:286",
-    "$figmaModeId": "21:1"
+    "$figmaModeId": "21:1",
+    "group": "Theme"
   },
   {
     "id": "bc6b869612b2783f5cf45d3783bee47bdf9e2e27",
@@ -278,38 +288,15 @@
     "id": "c510bd1b702894dd5472684c57dff6e70edcd508",
     "name": "Default",
     "$figmaStyleReferences": {
-      "input.color": "S:48a1de035d4e577efd4b3f2890e68a6675a838f8,",
-      "input.color-hover": "S:a7cf2b27c05ac6d6e86ed01c122537ad60a2bfc4,",
-      "input.color-focus": "S:d21ad006bcfc9612fa342180eac85755f953e263,",
-      "input.color-disabled": "S:5f3b89b15c1fa1e553a8eb4bc2a49bafa49aa4db,",
-      "input.background.color": "S:d9a8f615664682a7db1083f1646db46937e4a519,",
-      "input.background.color-hover": "S:fa207fc1b19d51512b2b961d5659ffc88ec80a07,",
-      "input.background.color-focus": "S:fe21336dd0ea566224648358b979c2015b1a3538,",
-      "input.background.color-disabled": "S:af42ab933bb86cdf088e4ec991efc7bf9609ee9a,",
-      "input.border.color": "S:52872d306f3b1eb057b8adc37d5cd31483dcd2bd,",
-      "input.border.color-hover": "S:ced9ca09ee436a680d00eae2068e118cd91a25b8,",
-      "input.border.color-focus": "S:fad0f1655a82365f575df79fdceda36d5b0d86b7,",
-      "input.border.color-disables": "S:4ea9e0a7d9aa48e69d88fca9dc84bf5bbc82fd3e,",
-      "input.border.color-focus-error": "S:e9a2931b600a3f27f5101b081684cb45119df0f9,",
-      "input.icon.color": "S:a79f84f130d4b1a4cb85e4f0ebbf5937a9621f26,",
-      "input.icon.color-hover": "S:dcdd53c575340af664a8421657f29213e1e9bf29,",
-      "input.icon.color-focus": "S:d89a8952011bd684d30657d609b436d92047f882,",
-      "input.placeholder.color": "S:714d890f023daf4ae038be03eaa95d28d85748d5,",
-      "input.placeholder.color-disabled": "S:12776411eaed36b3a166ad942cbdd883eef1c2f6,",
-      "input.label.color": "S:5348d8351259a44250eee5aa934dd1f1990b6f5a,",
-      "input.focus-ring.color": "S:c7bec70c6ceb691ad7008ed57468c26ddf9c4fcf,",
-      "input.focus-ring.error": "S:46c604f50a5b844eabfdbda8144db268cfedb0e0,",
       "input.filled-background.color": "S:95eae530db68b5b43fe539ef0fde2c06fb17ae6c,",
       "input.filled-background.color-hover": "S:a2d3632222882650eebf84a6c53bf85d650cc8f6,",
       "input.filled-background.color-focus": "S:8742f0846cfd225dffb0129678c1271fcfebe5d0,",
       "input.filled-background.color-disabled": "S:13a1f7b30f5d09a60c628dbf66dc93a54ba9557f,",
-      "input.help-text.color": "S:733585ba48df9a4bd23f4ccb0e23ca3ed5cfa536,",
-      "input.help-text.color-error": "S:5085f1beaefe88c457495675f4ff0666a779d579,",
       "input.filled.color": "S:16123b7fbffebafa01a5ac91f69f9c96fbb6a291,",
       "input.filled.color-disabled": "S:50d5ea5eca1de474be32aa6343b7643c5cc40049,",
       "input.filled.color-hover": "S:5eefc6417572b45a2142265f8686ce798ac04e80,",
-      "input.filled.color-focus": "S:bc4ba1f6b31a61949d3c4186b243633dba518ae6,",
-      "focus-ring.color": "S:998e95d21d7ea293e13851f1232b4843ebb87e70,"
+      "input.filled.color-focus": "S:bc4ba1f6b31a61949d3c4186b243633dba518ae6,"
+
     },
     "selectedTokenSets": {
       "globals": "source",
@@ -317,11 +304,64 @@
       "color/primitives": "source",
       "semantic/input": "enabled",
       "semantic/button": "enabled",
-      "semantic/toggle": "enabled"
+      "semantic/toggle": "enabled",
+      "semantic/typography": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:790:67393",
     "$figmaModeId": "790:0",
     "$figmaVariableReferences": {
+      "typography.color.text": "0bce8a23c955ec27b2edc35101d7c955ac12dc13",
+      "typography.color.text-inverted": "1411de66484c1b8ca3c0034b32473973ed6838fb",
+      "toggle.size.small": "59e798ea0cba4be9ea32e894e79cecd7b82cfded",
+      "toggle.size.medium": "c853d6f661e4380daff9745e0e4b39e2b56637f3",
+      "toggle.size.large": "8c9580c2db9de0c2ceb7553e99520d3a5c4a90d3",
+      "input.color": "bc745cc91841ef07e91b5fb6a8ac1018eb4247bf",
+      "input.color-hover": "17492033de110a4bcc43dcb1437516a4ad52df3b",
+      "input.color-focus": "8642f42f34c8b021c8802ad57409ae401fbba742",
+      "input.color-disabled": "5a99a8e259c70b1d29de48283791ef06f05a21e9",
+      "input.background.color": "d09531643cd995794e3b9dc1bd82c139d8106e25",
+      "input.background.color-hover": "9fec7aa09d1a2f81645fa75b3d92edaa2c90d054",
+      "input.background.color-focus": "98fbc0a558a11a03efae306884c4452f668fc463",
+      "input.background.color-disabled": "7215ec04eeadd8daf594e53f12ec80bba4b91447",
+      "input.border.color": "adf10ba5c2480b2bb7f053c751f9b42f0938f01f",
+      "input.border.color-hover": "1cc56ba06f6b13759b7f75944a643b00405224fe",
+      "input.border.color-focus": "b42c56cf0e505f5430f1b5bbe91d32413dcd9b91",
+      "input.border.color-disables": "5a26ce120ce201221c9215e031262f1dc0ee8778",
+      "input.border.radius-small": "87345f9338038632e1d943f159b73e50cc8d528e",
+      "input.border.radius-medium": "f3f6890292e00d684ae9cb10c35a7d663d6ed539",
+      "input.border.radius-large": "cd7030024183d34c991d483a7e465e296e796982",
+      "input.border.color-focus-error": "0b1c989689b0931690e46a2d2486a540d902123d",
+      "input.width": "9224209e27b3dd48f81c63a456da0f1502adb692",
+      "input.icon.color": "b60276a27a35c350f09e66ab1468296c9affd647",
+      "input.icon.color-hover": "e5d3ddd062c31b95ad25fe72cded500150e33fb7",
+      "input.icon.color-focus": "807c59ade48c51e04e00842a0be752d9c00a96c3",
+      "input.icon.icon-clearable.color": "566a0ff5d40e6af1bac05a1bddce26830d01b501",
+      "input.icon.icon-clearable.color-hover": "bc524dceafd86db1c9f32fcb21b3cb46b65765d2",
+      "input.icon.icon-clearable.color-focus": "bc9ca2538e5308c35e9e0963320d220a91d2eab8",
+      "input.placeholder.color": "e84537a67522aac7b98de44b92615252de3c45d7",
+      "input.placeholder.color-disabled": "990261ec45dcb6c65d0a943a7d75c7242c35d277",
+      "input.required-content": "1b7090b1195ecd43c3d07c805e23f85c55d129a9",
+      "input.required-content-offset": "9c83452a5d8195f66598593c2f1f3fb68c45d758",
+      "input.label.color": "ba3a82f7a87cf0e3dba37fa22b6bb120e1d0f954",
+      "input.spacing.small": "761eeae11a5d5db0b9f287169fe518bf388d0ead",
+      "input.spacing.medium": "83e3fb83e4da16cdf63a2bb8766b3889a1b522cb",
+      "input.spacing.large": "717937cad33a5ea1fa31fd17ca4308a51864a773",
+      "input.focus-ring.color": "bcfb57039745269f7cae825530c515483b553db1",
+      "input.focus-ring.offset": "0c2b194ad8a3892f72c51ef583f940f80f0a0da7",
+      "input.focus-ring.error": "990c1a5ff0acb5561de1391d59d64acbee0db591",
+      "input.readonly-background.color": "202fec4c3b10c4a85bd051a23fd11e635b691a9b",
+      "input.readonly-background.color-hover": "99485e086679b6b82520908d2af565301ee2bfb8",
+      "input.readonly-background.color-focus": "176aad43eb9f85cb824570850c1e1f3cac88ca25",
+      "input.readonly-background.color-disabled": "410324cb496aaf9da36090d959acebbe80ae14e1",
+      "input.help-text.color": "79ea482375f6cec5228b6bf0ea9c7fbb2505d9c6",
+      "input.help-text.color-error": "9e62a851799b2b3c5021ae7cde72b92b34fdfb60",
+      "input.height.small": "424b7861abcecffc7cc6c3735ec28842f2e84ae7",
+      "input.height.medium": "4bf50c4d8473a9f03cf3a09567c4459b62d57afc",
+      "input.height.large": "c9ab4ffc73a9047178eca68979ef22e5878238af",
+      "input.readonly.color": "36098d0584c5e66d3778e1f97e9d7d92a641c4f0",
+      "input.readonly.color-disabled": "dd753058470317fa489a113595530f7f3e097dfa",
+      "input.readonly.color-hover": "d9e2c120038f5b2434a1adb2ed026ffcac5dbb94",
+      "input.readonly.color-focus": "2b9ed719a33678da68b9e3a89fb148f75e0b04ce",
       "focus-ring.color": "4560189da085bbe8e1ce1fa9a615fa9b88869789",
       "focus-ring.width": "2e54bf95bfc688cc460e9f7606fb9631fd43aecc",
       "focus-ring.offset": "491c1017f3208a7c19a9ed70a4b1cc50001e01b4"

package/src/figma-tokens/_docs.json

@@ -387,13 +387,105 @@
       }
     },
     "drawer": {
-      "description": {
-        "value": "Drawers slide in from a container to expose additional options and information.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Drawers slide in from a container to expose additional options and information.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Drawer",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Drawer",
-        "type": "text"
+      "start": {
+        "title": {
+          "value": "Slide in From Start",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, drawers slide in from the end. To make the drawer slide in from the start, set the placement attribute to start.",
+          "type": "text"
+        }
+      },
+      "top": {
+        "title": {
+          "value": "Slide in From Top",
+          "type": "text"
+        },
+        "description": {
+          "value": "To make the drawer slide in from the top, set the placement attribute to top.",
+          "type": "text"
+        }
+      },
+      "bottom": {
+        "title": {
+          "value": "Slide in From Bottom",
+          "type": "text"
+        },
+        "description": {
+          "value": "To make the drawer slide in from the bottom, set the placement attribute to bottom.",
+          "type": "text"
+        }
+      },
+      "contained": {
+        "title": {
+          "value": "Contained to an Element",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, drawers slide out of their containing block, which is usually the viewport. To make a drawer slide out of a parent element, add the contained attribute to the drawer and apply position: relative to its parent.\n\nUnlike normal drawers, contained drawers are not modal. This means they do not show an overlay, they do not trap focus, and they are not dismissible with Escape. This is intentional to allow users to interact with elements outside of the drawer.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Custom Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --size custom property to set the drawer’s size. This will be applied to the drawer’s width or height depending on its placement.",
+          "type": "text"
+        }
+      },
+      "scrolling": {
+        "title": {
+          "value": "Scrolling",
+          "type": "text"
+        },
+        "description": {
+          "value": "By design, a drawer’s height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.",
+          "type": "text"
+        }
+      },
+      "action": {
+        "title": {
+          "value": "Header Actions",
+          "type": "text"
+        },
+        "description": {
+          "value": "The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.",
+          "type": "text"
+        }
+      },
+      "closing": {
+        "title": {
+          "value": "Preventing the Drawer from Closing",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.\n\nTo keep the drawer open in such cases, you can cancel the sl-request-close event. When canceled, the drawer will remain open and pulse briefly to draw the user’s attention to it.\n\nYou can use event.detail.source to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.",
+          "type": "text"
+        }
+      },
+      "fokus": {
+        "title": {
+          "value": "Customizing Initial Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, the drawer’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the autofocus attribute to it as shown below.",
+          "type": "text"
+        }
       }
     },
     "dropdown": {
@@ -1718,12 +1810,42 @@
     },
     "typography": {
       "description": {
-        "value": "Typography tokens are used to maintain a consistent set of font styles throughout your app.",
+        "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.",
         "type": "text"
       },
       "title": {
         "value": "Typography",
         "type": "text"
+      },
+      "text-styles": {
+        "description": {
+          "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.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Text styles",
+          "type": "text"
+        },
+        "headings": {
+          "description": {
+            "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.",
+            "type": "text"
+          },
+          "title": {
+            "value": "Headings",
+            "type": "text"
+          }
+        },
+        "body": {
+          "description": {
+            "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.",
+            "type": "text"
+          },
+          "title": {
+            "value": "Body and UI text",
+            "type": "text"
+          }
+        }
       }
     },
     "z-index": {

package/src/figma-tokens/globals.json

@@ -1,9 +1,5 @@
 {
   "font-size": {
-    "2x-small": {
-      "value": "10px",
-      "type": "fontSizes"
-    },
     "x-small": {
       "value": "12px",
       "type": "fontSizes"

package/src/figma-tokens/semantic/overlays.json

@@ -0,0 +1,10 @@
+{
+  "overlay-color": {
+    "value": "{neutral.1000}",
+    "type": "color"
+  },
+  "overlay-opacity": {
+    "value": "40%",
+    "type": "opacity"
+  }
+}

package/src/figma-tokens/semantic/panels.json

@@ -0,0 +1,14 @@
+{
+  "background-color": {
+    "value": "{neutral.0}",
+    "type": "color"
+  },
+  "border-color": {
+    "value": "{neutral.300}",
+    "type": "color"
+  },
+  "panel-border": {
+    "value": "{border-width.small}",
+    "type": "borderWidth"
+  }
+}

package/src/figma-tokens/semantic/typography.json

@@ -0,0 +1,170 @@
+{
+  "body": {
+    "x-small": {
+      "regular": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.normal}",
+          "fontSize": "{font-size.x-small}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "semibold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.semibold}",
+          "fontSize": "{font-size.x-small}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "bold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.bold}",
+          "fontSize": "{font-size.x-small}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      }
+    },
+    "small": {
+      "regular": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.normal}",
+          "fontSize": "{font-size.small}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "semibold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.semibold}",
+          "fontSize": "{font-size.small}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "bold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.bold}",
+          "fontSize": "{font-size.small}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      }
+    },
+    "medium": {
+      "regular": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.normal}",
+          "fontSize": "{font-size.medium}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "semibold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.semibold}",
+          "fontSize": "{font-size.medium}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "bold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.bold}",
+          "fontSize": "{font-size.medium}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      }
+    },
+    "large": {
+      "regular": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.normal}",
+          "fontSize": "{font-size.large}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "semibold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.semibold}",
+          "fontSize": "{font-size.large}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      },
+      "bold": {
+        "value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.bold}",
+          "fontSize": "{font-size.large}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography"
+      }
+    }
+  },
+  "heading": {
+    "large": {
+      "value": {
+        "fontFamily": "{font.sans}",
+        "fontWeight": "{font-weight.bold}",
+        "fontSize": "{font-size.large}",
+        "lineHeight": "{line-height.normal}"
+      },
+      "type": "typography"
+    },
+    "x-large": {
+      "value": {
+        "fontFamily": "{font.sans}",
+        "fontWeight": "{font-weight.bold}",
+        "fontSize": "{font-size.x-large}",
+        "lineHeight": "{line-height.dense}"
+      },
+      "type": "typography"
+    },
+    "2x-large": {
+      "value": {
+        "fontFamily": "{font.sans}",
+        "fontWeight": "{font-weight.bold}",
+        "fontSize": "{font-size.2x-large}",
+        "lineHeight": "{line-height.dense}"
+      },
+      "type": "typography"
+    },
+    "3x-large": {
+      "value": {
+        "fontFamily": "{font.sans}",
+        "fontWeight": "{font-weight.bold}",
+        "fontSize": "{font-size.3x-large}",
+        "lineHeight": "{line-height.dense}"
+      },
+      "type": "typography"
+    }
+  },
+  "typography": {
+    "color": {
+      "text": {
+        "value": "{neutral.950}",
+        "type": "color"
+      },
+      "text-inverted": {
+        "value": "{neutral.0}",
+        "type": "color"
+      }
+    }
+  }
+}