@synergy-design-system/tokens 2.24.0 → 2.26.0

package/dist/themes/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.23.0
+ * @synergy-design-system/tokens version 2.25.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -96,7 +96,8 @@
   --syn-duration-fast: 150ms;
   --syn-duration-normal: 250ms;
   --syn-duration-slow: 500ms;
-  --syn-focus-ring-color: var(--syn-color-primary-400);
+  --syn-focus-ring-border-radius: 4px;
+  --syn-focus-ring-color: var(--syn-color-primary-500);
   --syn-focus-ring-offset: var(--syn-spacing-3x-small);
   --syn-focus-ring-style: solid;
   --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -179,12 +180,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
-  --syn-interactive-primary-color: var(--syn-color-primary-500);
-  --syn-interactive-primary-color-active: var(--syn-color-neutral-1000);
-  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
-  --syn-interactive-secondary-color: var(--syn-color-neutral-1000);
-  --syn-interactive-secondary-color-active: var(--syn-color-primary-500);
-  --syn-interactive-secondary-color-hover: var(--syn-color-primary-500);
+  --syn-interactive-emphasis-color: var(--syn-color-primary-500);
+  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
+  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
+  --syn-interactive-quiet-color-active: var(--syn-color-primary-600);
+  --syn-interactive-quiet-color-hover: var(--syn-color-primary-500);
   --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
   --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
   --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
   --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
-  --syn-link-color: var(--syn-color-primary-600);
-  --syn-link-color-active: var(--syn-color-primary-950);
-  --syn-link-color-hover: var(--syn-color-primary-900);
-  --syn-link-quiet-color: var(--syn-typography-color-text);
-  --syn-link-quiet-color-active: var(--syn-color-primary-950);
-  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
+  --syn-link-color: var(--syn-interactive-emphasis-color);
+  --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
+  --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
+  --syn-link-quiet-color: var(--syn-interactive-quiet-color);
+  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
+  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
+  --syn-link-underline-outline: 25%;
   --syn-opacity-50: 0.5; /** 50% */
   --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
-  --syn-panel-background-color: var(--syn-color-neutral-0);
+  --syn-panel-background-color: var(--syn-color-neutral-50);
   --syn-panel-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border-radius: var(--syn-border-radius-x-large);
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -219,13 +222,20 @@
   --syn-spacing-small: 12px;
   --syn-spacing-x-large: 32px;
   --syn-spacing-x-small: 8px;
+  --syn-spinner-opacity: 0.4;
+  --syn-table-background-color: var(--syn-panel-background-color);
+  --syn-table-background-color-alternating: var(--syn-color-neutral-100);
+  --syn-table-background-color-header: var(--syn-color-neutral-200);
+  --syn-table-border-color: var(--syn-color-neutral-300);
+  --syn-table-shadow-end: rgba(0, 0, 0, 0);
+  --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
   --syn-text-decoration-default: none;
   --syn-text-decoration-underline: underline;
   --syn-toggle-size-large: var(--syn-spacing-large);
   --syn-toggle-size-medium: var(--syn-spacing-medium);
   --syn-toggle-size-small: 14px;
   --syn-tooltip-arrow-size: 9px;
-  --syn-tooltip-background-color: var(--syn-color-neutral-950);
+  --syn-tooltip-background-color: var(--syn-color-neutral-1000);
   --syn-tooltip-border-radius: var(--syn-border-radius-small);
   --syn-tooltip-color: var(--syn-typography-color-text-inverted);
   --syn-tooltip-font-family: var(--syn-font-sans);
@@ -238,22 +248,22 @@
   --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
   --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
   --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
-  --syn-typography-color-text: var(--syn-color-neutral-950);
-  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
+  --syn-typography-color-text: var(--syn-color-neutral-1000);
+  --syn-typography-color-text-inverted: var(--syn-color-neutral-50);
   --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
-  --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
-  --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
-  --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
-  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
-  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
-  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
-  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
-  --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
-  --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
+  --syn-shadow-medium: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+  --syn-shadow-large: 0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
+  --syn-shadow-x-large: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16);
+  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
+  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16);
+  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16);
+  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16);
+  --syn-shadow-x-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
+  --syn-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
   --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

package/dist/themes/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.23.0
+ * @synergy-design-system/tokens version 2.25.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -96,7 +96,8 @@
   --syn-duration-fast: 150ms;
   --syn-duration-normal: 250ms;
   --syn-duration-slow: 500ms;
-  --syn-focus-ring-color: var(--syn-color-primary-400);
+  --syn-focus-ring-border-radius: 4px;
+  --syn-focus-ring-color: var(--syn-color-primary-700);
   --syn-focus-ring-offset: var(--syn-spacing-3x-small);
   --syn-focus-ring-style: solid;
   --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -179,12 +180,12 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
-  --syn-interactive-primary-color: var(--syn-color-primary-700);
-  --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
-  --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
-  --syn-interactive-secondary-color: var(--syn-color-neutral-950);
-  --syn-interactive-secondary-color-active: var(--syn-color-primary-700);
-  --syn-interactive-secondary-color-hover: var(--syn-color-primary-700);
+  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
+  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
+  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
+  --syn-interactive-quiet-color: var(--syn-color-neutral-950);
+  --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
+  --syn-interactive-quiet-color-hover: var(--syn-color-primary-700);
   --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
   --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
   --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
   --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
-  --syn-link-color: var(--syn-color-primary-600);
-  --syn-link-color-active: var(--syn-color-primary-950);
-  --syn-link-color-hover: var(--syn-color-primary-900);
-  --syn-link-quiet-color: var(--syn-typography-color-text);
-  --syn-link-quiet-color-active: var(--syn-color-primary-950);
-  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
+  --syn-link-color: var(--syn-interactive-emphasis-color);
+  --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
+  --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
+  --syn-link-quiet-color: var(--syn-interactive-quiet-color);
+  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
+  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
+  --syn-link-underline-outline: 25%;
   --syn-opacity-50: 0.5; /** 50% */
   --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
   --syn-panel-background-color: var(--syn-color-neutral-0);
-  --syn-panel-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border-color: #e6e1dc;
+  --syn-panel-border-radius: var(--syn-border-radius-x-large);
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
   --syn-spacing-small: 12px;
   --syn-spacing-x-large: 32px;
   --syn-spacing-x-small: 8px;
+  --syn-spinner-opacity: 0.16;
+  --syn-table-background-color: var(--syn-panel-background-color);
+  --syn-table-background-color-alternating: #f8f7f6;
+  --syn-table-background-color-header: #f2f0ed;
+  --syn-table-border-color: #e6e1dc;
+  --syn-table-shadow-end: rgba(13, 13, 13, 0);
+  --syn-table-shadow-start: rgba(13, 13, 13, 0.16);
   --syn-text-decoration-default: none;
   --syn-text-decoration-underline: underline;
   --syn-toggle-size-large: var(--syn-spacing-large);

package/package.json

@@ -5,6 +5,7 @@
   },
   "description": "Design tokens for Synergy, the SICK Design System",
   "devDependencies": {
+    "@dotenvx/dotenvx": "^1.44.2",
     "@figma-export/cli": "^6.2.2",
     "@figma-export/types": "^6.2.2",
     "@figma/rest-api-spec": "^0.31.0",
@@ -112,9 +113,11 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.24.0",
+  "version": "2.26.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
+    "build:all": "dotenvx -q run pnpm build:_all",
+    "build:_all": "pnpm clean && pnpm fetch:figma && pnpm build:figma && pnpm build",
     "build:figma": "pnpm run build:variables && pnpm run build:styles",
     "build:variables": "node scripts/figma/transform-tokens.js",
     "build:styles": "node scripts/figma/transform-styles.js",
@@ -129,6 +132,7 @@
     "format.eslint": "pnpm lint:js --fix",
     "start": "pnpm build",
     "compare": "pnpm build && node test/test-css-variables.js",
+    "test": "pnpm compare",
     "release": "semantic-release  --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
     "release.dry": "semantic-release --dry-run --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
   }

package/src/figma-variables/output/sick2018-dark.json

@@ -388,6 +388,10 @@
     }
   },
   "focus-ring": {
+    "border-radius": {
+      "type": "sizing",
+      "value": "0px"
+    },
     "color": {
       "type": "color",
       "value": "{color.primary.400}"
@@ -767,28 +771,28 @@
     }
   },
   "interactive": {
-    "primary": {
+    "emphasis": {
       "color": {
         "type": "color",
         "value": "{color.primary.600}"
       },
       "color-active": {
         "type": "color",
-        "value": "{color.neutral.950}"
+        "value": "{color.primary.950}"
       },
       "color-hover": {
         "type": "color",
         "value": "{color.primary.900}"
       }
     },
-    "secondary": {
+    "quiet": {
       "color": {
         "type": "color",
         "value": "{color.neutral.950}"
       },
       "color-active": {
         "type": "color",
-        "value": "{color.primary.600}"
+        "value": "{color.primary.700}"
       },
       "color-hover": {
         "type": "color",
@@ -852,29 +856,33 @@
   "link": {
     "color": {
       "type": "color",
-      "value": "{color.primary.600}"
+      "value": "{interactive.emphasis.color}"
     },
     "color-active": {
       "type": "color",
-      "value": "{color.primary.950}"
+      "value": "{interactive.emphasis.color-active}"
     },
     "color-hover": {
       "type": "color",
-      "value": "{color.primary.900}"
+      "value": "{interactive.emphasis.color-hover}"
     },
     "quiet": {
       "color": {
         "type": "color",
-        "value": "{typography.color.text}"
+        "value": "{interactive.quiet.color}"
       },
       "color-active": {
         "type": "color",
-        "value": "{color.primary.950}"
+        "value": "{interactive.quiet.color-active}"
       },
       "color-hover": {
         "type": "color",
-        "value": "{color.primary.900}"
+        "value": "{interactive.quiet.color-hover}"
       }
+    },
+    "underline-outline": {
+      "type": "string",
+      "value": "7%"
     }
   },
   "opacity": {
@@ -904,6 +912,10 @@
         "type": "color",
         "value": "{color.neutral.300}"
       },
+      "radius": {
+        "type": "sizing",
+        "value": "{border-radius.medium}"
+      },
       "width": {
         "type": "sizing",
         "value": "{border-width.small}"
@@ -964,6 +976,44 @@
       "value": "8px"
     }
   },
+  "spinner": {
+    "opacity": {
+      "type": "opacity",
+      "value": "16%"
+    }
+  },
+  "table": {
+    "background": {
+      "color": {
+        "type": "color",
+        "value": "{panel.background.color}"
+      },
+      "color-alternating": {
+        "type": "color",
+        "value": "{color.neutral.50}"
+      },
+      "color-header": {
+        "type": "color",
+        "value": "{color.neutral.200}"
+      }
+    },
+    "border": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.300}"
+      }
+    },
+    "shadow": {
+      "end": {
+        "type": "color",
+        "value": "rgba(49, 55, 58, 0.00)"
+      },
+      "start": {
+        "type": "color",
+        "value": "rgba(49, 55, 58, 0.16)"
+      }
+    }
+  },
   "text-decoration": {
     "default": {
       "type": "string",

package/src/figma-variables/output/sick2018-light.json

@@ -388,6 +388,10 @@
     }
   },
   "focus-ring": {
+    "border-radius": {
+      "type": "sizing",
+      "value": "0px"
+    },
     "color": {
       "type": "color",
       "value": "{color.primary.400}"
@@ -767,28 +771,28 @@
     }
   },
   "interactive": {
-    "primary": {
+    "emphasis": {
       "color": {
         "type": "color",
         "value": "{color.primary.600}"
       },
       "color-active": {
         "type": "color",
-        "value": "{color.neutral.950}"
+        "value": "{color.primary.950}"
       },
       "color-hover": {
         "type": "color",
         "value": "{color.primary.900}"
       }
     },
-    "secondary": {
+    "quiet": {
       "color": {
         "type": "color",
         "value": "{color.neutral.950}"
       },
       "color-active": {
         "type": "color",
-        "value": "{color.primary.600}"
+        "value": "{color.primary.700}"
       },
       "color-hover": {
         "type": "color",
@@ -852,29 +856,33 @@
   "link": {
     "color": {
       "type": "color",
-      "value": "{color.primary.600}"
+      "value": "{interactive.emphasis.color}"
     },
     "color-active": {
       "type": "color",
-      "value": "{color.primary.950}"
+      "value": "{interactive.emphasis.color-active}"
     },
     "color-hover": {
       "type": "color",
-      "value": "{color.primary.900}"
+      "value": "{interactive.emphasis.color-hover}"
     },
     "quiet": {
       "color": {
         "type": "color",
-        "value": "{typography.color.text}"
+        "value": "{interactive.quiet.color}"
       },
       "color-active": {
         "type": "color",
-        "value": "{color.primary.950}"
+        "value": "{interactive.emphasis.color-active}"
       },
       "color-hover": {
         "type": "color",
-        "value": "{color.primary.900}"
+        "value": "{interactive.quiet.color-hover}"
       }
+    },
+    "underline-outline": {
+      "type": "string",
+      "value": "7%"
     }
   },
   "opacity": {
@@ -904,6 +912,10 @@
         "type": "color",
         "value": "{color.neutral.300}"
       },
+      "radius": {
+        "type": "sizing",
+        "value": "{border-radius.medium}"
+      },
       "width": {
         "type": "sizing",
         "value": "{border-width.small}"
@@ -964,6 +976,44 @@
       "value": "8px"
     }
   },
+  "spinner": {
+    "opacity": {
+      "type": "opacity",
+      "value": "16%"
+    }
+  },
+  "table": {
+    "background": {
+      "color": {
+        "type": "color",
+        "value": "{panel.background.color}"
+      },
+      "color-alternating": {
+        "type": "color",
+        "value": "{color.neutral.50}"
+      },
+      "color-header": {
+        "type": "color",
+        "value": "{color.neutral.200}"
+      }
+    },
+    "border": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.300}"
+      }
+    },
+    "shadow": {
+      "end": {
+        "type": "color",
+        "value": "rgba(49, 55, 58, 0.00)"
+      },
+      "start": {
+        "type": "color",
+        "value": "rgba(49, 55, 58, 0.16)"
+      }
+    }
+  },
   "text-decoration": {
     "default": {
       "type": "string",