@synergy-design-system/tokens 1.0.0-main.1 → 1.0.0-main.11

package/dist/themes/light.css

@@ -0,0 +1,251 @@
+/**
+ * @synergy-design-system/tokens version 1.0.0-main.10
+ * SICK Global UX Foundation
+ * Do not edit directly
+ * Generated on Mon, 20 Nov 2023 09:19:04 GMT
+ */
+
+:root {
+  --syn-font-size-2x-small: 10px;
+  --syn-font-size-x-small: 12px;
+  --syn-font-size-small: 14px;
+  --syn-font-size-medium: 16px;
+  --syn-font-size-large: 20px;
+  --syn-font-size-x-large: 24px;
+  --syn-font-size-2x-large: 32px;
+  --syn-font-size-3x-large: 40px;
+  --syn-duration-extra-fast: 90ms;
+  --syn-duration-fast: 150ms;
+  --syn-duration-normal: 250ms;
+  --syn-duration-slow: 350ms;
+  --syn-duration-extra-slow: 500ms;
+  --syn-line-height-denser: 1;
+  --syn-line-height-dense: 1.2;
+  --syn-line-height-normal: 1.4;
+  --syn-line-height-loose: 1.8;
+  --syn-line-height-looser: 2.2;
+  --syn-font-weight-normal: 400;
+  --syn-font-weight-semibold: 600;
+  --syn-font-weight-bold: 700;
+  --syn-shadow-medium: 0 1px 2px 0 rgba(49, 55, 58, 0.08), 0 1px 4px 0 rgba(49, 55, 58, 0.08), 0 2px 8px 0 rgba(49, 55, 58, 0.08);
+  --syn-shadow-large: 0 0 3px 0 rgba(49, 55, 58, 0.12), 0 2px 6px 0 rgba(49, 55, 58, 0.12), 0 3px 8px 0 rgba(49, 55, 58, 0.16);
+  --syn-shadow-x-large: 0 1px 4px 0 rgba(49, 55, 58, 0.12), 0 8px 24px 0 rgba(49, 55, 58, 0.12), 0 16px 48px 0 rgba(49, 55, 58, 0.16);
+  --syn-shadow-overflow-down: 0 1px 4px 0 rgba(49, 55, 58, 0.12), 0 3px 8px 0 rgba(49, 55, 58, 0.12), 0 4px 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Down */
+  --syn-shadow-overflow-up: 0 -1px 4px 0 rgba(49, 55, 58, 0.12), 0 -3px 8px 0 rgba(49, 55, 58, 0.12), 0 -4px 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Up */
+  --syn-shadow-overflow-left: -1px 0 4px 0 rgba(49, 55, 58, 0.12), -3px 0 8px 0 rgba(49, 55, 58, 0.12), -4px 0 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Left */
+  --syn-shadow-overflow-right: 1px 0 4px 0 rgba(49, 55, 58, 0.12), 3px 0 8px 0 rgba(49, 55, 58, 0.12), 4px 0 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Right */
+  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
+  --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  --syn-spacing-4x-small: calc(4px / 4);
+  --syn-spacing-3x-small: calc(4px / 2);
+  --syn-spacing-2x-small: calc(4px * 1);
+  --syn-spacing-x-small: calc(4px * 2);
+  --syn-spacing-small: calc(4px * 3);
+  --syn-spacing-medium: calc(4px * 4);
+  --syn-spacing-large: calc(4px * 6);
+  --syn-spacing-x-large: calc(4px * 8);
+  --syn-spacing-2x-large: calc(4px * 12);
+  --syn-spacing-3x-large: calc(4px * 16);
+  --syn-spacing-4x-large: calc(4px * 24);
+  --syn-spacing-5x-large: calc(4px * 32);
+  --syn-border-radius-none: 0px;
+  --syn-border-radius-pill: 9999px;
+  --syn-border-radius-circle: 9999px;
+  --syn-dimension-base: 4px;
+  --syn-border-width-none: 0px; /* None */
+  --syn-border-width-small: 1px; /* Small */
+  --syn-border-width-medium: 2px; /* Medium */
+  --syn-border-width-large: 3px; /* Large */
+  --syn-border-width-x-large: 4px; /* X Large */
+  --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --syn-button-font-size-small: var(--syn-font-size-x-small);
+  --syn-button-font-size-medium: var(--syn-font-size-medium);
+  --syn-button-font-size-large: var(--syn-font-size-large);
+  --syn-focus-ring-color: var(--syn-color-primary-400);
+  --syn-focus-ring-width: var(--syn-border-width-medium);
+  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
+  --syn-input-color: var(--syn-color-neutral-950);
+  --syn-input-color-hover: var(--syn-color-neutral-950);
+  --syn-input-color-focus: var(--syn-color-neutral-950);
+  --syn-input-color-disabled: var(--syn-color-neutral-950);
+  --syn-input-background-color: var(--syn-color-neutral-0);
+  --syn-input-background-color-hover: var(--syn-input-background.color);
+  --syn-input-background-color-focus: var(--syn-input-background.color);
+  --syn-input-background-color-disabled: var(--syn-input-background.color);
+  --syn-input-border-color: var(--syn-color-neutral-700);
+  --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-color-focus: var(--syn-color-neutral-950);
+  --syn-input-border-color-disables: var(--syn-color-neutral-700);
+  --syn-input-border-radius-small: var(--syn-border-radius-none);
+  --syn-input-border-radius-medium: var(--syn-border-radius-none);
+  --syn-input-border-radius-large: var(--syn-border-radius-none);
+  --syn-input-border-color-focus-error: var(--syn-color-error-700);
+  --syn-input-width: var(--syn-border-width-small);
+  --syn-input-icon-color: var(--syn-color-neutral-800);
+  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
+  --syn-input-icon-color-focus: var(--syn-color-neutral-800);
+  --syn-input-icon-icon-clearable-color: var(--syn-color-gray-500);
+  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-gray-500);
+  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-gray-500);
+  --syn-input-placeholder-color: var(--syn-color-neutral-500);
+  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
+  --syn-input-required-content: "*";
+  --syn-input-required-content-offset: -2px;
+  --syn-input-label-color: var(--syn-color-neutral-950);
+  --syn-input-label-font-size-small: var(--syn-font-size-small);
+  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
+  --syn-input-label-font-size-large: var(--syn-font-size-large);
+  --syn-input-spacing-small: var(--syn-spacing-small);
+  --syn-input-spacing-medium: var(--syn-spacing-medium);
+  --syn-input-spacing-large: var(--syn-spacing-large);
+  --syn-input-focus-ring-color: var(--syn-color-primary-400);
+  --syn-input-focus-ring-offset: 0;
+  --syn-input-focus-ring-error: var(--syn-color-error-400);
+  --syn-input-disabled-opacity: 0.5;
+  --syn-input-readonly-background-color: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
+  --syn-input-help-text-color: var(--syn-color-neutral-800);
+  --syn-input-help-text-color-error: var(--syn-color-error-700);
+  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
+  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
+  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
+  --syn-input-height-small: var(--syn-spacing-x-large);
+  --syn-input-height-medium: var(--syn-spacing-2x-large);
+  --syn-input-height-large: var(--syn-spacing-3x-large);
+  --syn-input-readonly-color: var(--syn-color-neutral-800);
+  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
+  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
+  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
+  --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-toggle-size-small: 14px;
+  --syn-toggle-size-medium: var(--syn-spacing-medium);
+  --syn-toggle-size-large: var(--syn-spacing-large);
+  --syn-color-primary-50: #f0f9ff;
+  --syn-color-primary-100: #e0f1FE;
+  --syn-color-primary-200: #b9e5fe;
+  --syn-color-primary-300: #7cd1fd;
+  --syn-color-primary-400: #36bbfa;
+  --syn-color-primary-500: #0ca2eb;
+  --syn-color-primary-600: #007cc1;
+  --syn-color-primary-700: #0166a3;
+  --syn-color-primary-800: #065786;
+  --syn-color-primary-900: #0B486F;
+  --syn-color-primary-950: #072E4A;
+  --syn-color-success-50: #f5fde8;
+  --syn-color-success-100: #e7facd;
+  --syn-color-success-200: #D1F4A2;
+  --syn-color-success-300: #B0EB6B;
+  --syn-color-success-400: #93DD3E;
+  --syn-color-success-500: #73C31F;
+  --syn-color-success-600: #63B017;
+  --syn-color-success-700: #437714;
+  --syn-color-success-800: #395E16;
+  --syn-color-success-900: #315017;
+  --syn-color-success-950: #172C07;
+  --syn-color-warning-50: #fefce8;
+  --syn-color-warning-100: #fdf7c4;
+  --syn-color-warning-200: #FCEC8c;
+  --syn-color-warning-300: #f9da4b;
+  --syn-color-warning-400: #f5c413;
+  --syn-color-warning-500: #e5ae0d;
+  --syn-color-warning-600: #c68608;
+  --syn-color-warning-700: #9e5f0a;
+  --syn-color-warning-800: #834b10;
+  --syn-color-warning-900: #6f3e14;
+  --syn-color-warning-950: #411f07;
+  --syn-color-error-50: #fff0f2;
+  --syn-color-error-100: #ffdee2;
+  --syn-color-error-200: #ffc3c9;
+  --syn-color-error-300: #ff98a4;
+  --syn-color-error-400: #ff5d70;
+  --syn-color-error-500: #ff2b44;
+  --syn-color-error-600: #ea0823;
+  --syn-color-error-700: #d0051d;
+  --syn-color-error-800: #ab091c;
+  --syn-color-error-900: #8D0f1e;
+  --syn-color-error-950: #4e010a;
+  --syn-color-accent-50: #FFFBEA;
+  --syn-color-accent-100: #FFF2C5;
+  --syn-color-accent-200: #FFE685;
+  --syn-color-accent-300: #FFD246;
+  --syn-color-accent-400: #FFBD1B;
+  --syn-color-accent-500: #F39200;
+  --syn-color-accent-600: #E27200;
+  --syn-color-accent-700: #BB4D02;
+  --syn-color-accent-800: #983B08;
+  --syn-color-accent-900: #7C310B;
+  --syn-color-accent-950: #481700;
+  --syn-color-neutral-0: white;
+  --syn-color-neutral-50: #f9fafb;
+  --syn-color-neutral-100: #f2f5f5;
+  --syn-color-neutral-200: #e8ebec;
+  --syn-color-neutral-300: #d5dbdd;
+  --syn-color-neutral-400: #bac2c6;
+  --syn-color-neutral-500: #9ea9ae;
+  --syn-color-neutral-600: #859298;
+  --syn-color-neutral-700: #737f85;
+  --syn-color-neutral-800: #5e676b;
+  --syn-color-neutral-900: #4c5357;
+  --syn-color-neutral-950: #31373a;
+  --syn-color-neutral-1000: black;
+
+  /* Fallbacks from Shoelace */
+  --syn-border-radius-small: 0.1875rem;
+  --syn-border-radius-medium: 0.25rem;
+  --syn-border-radius-large: 0.5rem;
+  --syn-border-radius-x-large: 1rem;
+  --syn-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
+  --syn-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --syn-transition-x-slow: 1000ms;
+  --syn-transition-slow: 500ms;
+  --syn-transition-medium: 250ms;
+  --syn-transition-fast: 150ms;
+  --syn-transition-x-fast: 50ms;
+  --syn-font-serif: Georgia, "Times New Roman", serif;
+  --syn-font-size-4x-large: 4.5rem;
+  --syn-font-weight-light: 300;
+  --syn-letter-spacing-denser: -0.03em;
+  --syn-letter-spacing-dense: -0.015em;
+  --syn-letter-spacing-normal: normal;
+  --syn-letter-spacing-loose: 0.075em;
+  --syn-letter-spacing-looser: 0.15em;
+  --syn-focus-ring-style: solid;
+  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
+  --syn-input-border-color-disabled: var(--syn-color-neutral-300);
+  --syn-input-border-width: 1px;
+  --syn-input-required-content-color: var(--syn-input-label-color);
+  --syn-input-font-family: var(--syn-font-sans);
+  --syn-input-font-weight: var(--syn-font-weight-normal);
+  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
+  --syn-input-filled-background-color: var(--syn-color-neutral-100);
+  --syn-input-filled-background-color-hover: var(--syn-color-neutral-100);
+  --syn-input-filled-background-color-focus: var(--syn-color-neutral-100);
+  --syn-input-filled-background-color-disabled: var(--syn-color-neutral-100);
+  --syn-input-filled-color: var(--syn-color-neutral-800);
+  --syn-input-filled-color-hover: var(--syn-color-neutral-800);
+  --syn-input-filled-color-focus: var(--syn-color-neutral-700);
+  --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
+  --syn-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+  --syn-panel-background-color: var(--syn-color-neutral-0);
+  --syn-panel-border-color: var(--syn-color-neutral-200);
+  --syn-panel-border-width: 1px;
+  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
+  --syn-tooltip-background-color: var(--syn-color-neutral-800);
+  --syn-tooltip-color: var(--syn-color-neutral-0);
+  --syn-tooltip-font-family: var(--syn-font-sans);
+  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
+  --syn-tooltip-font-size: var(--syn-font-size-small);
+  --syn-tooltip-line-height: var(--syn-line-height-dense);
+  --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
+  --syn-tooltip-arrow-size: 6px;
+  --syn-z-index-drawer: 700;
+  --syn-z-index-dialog: 800;
+  --syn-z-index-dropdown: 900;
+  --syn-z-index-toast: 950;
+  --syn-z-index-tooltip: 1000;
+}

package/package.json

@@ -6,19 +6,28 @@
   "description": "Design tokens for the SICK Design System",
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@synergy-design-system/eslint-config-syn": "workspace:0.1",
     "@tokens-studio/sd-transforms": "^0.11.0",
     "chalk": "^5.3.0",
+    "change-case": "^4.1.2",
     "eslint": "^8.47.0",
+    "eslint-plugin-import": "^2.28.1",
     "rimraf": "^5.0.1",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "^7.0.5",
-    "style-dictionary": "^3.8.0"
+    "style-dictionary": "^3.8.0",
+    "@synergy-design-system/eslint-config-syn": "0.1.0"
+  },
+  "exports": {
+    ".": "./dist/js/index.js",
+    "./themes/*": "./dist/themes/*",
+    "./scss": "./dist/scss/_tokens.scss"
   },
   "files": [
     "dist",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "src/figma-tokens"
   ],
   "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens",
   "keywords": [
@@ -60,10 +69,16 @@
           "changelogFile": "CHANGELOG.md"
         }
       ],
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "pnpm build"
+        }
+      ],
       [
         "@semantic-release/npm",
         {
-          "npmPublish": true
+          "npmPublish": false
         }
       ],
       [
@@ -84,13 +99,13 @@
       ]
     ]
   },
+  "type": "module",
+  "version": "1.0.0-main.11",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",
     "lint": "eslint scripts",
     "start": "pnpm build",
     "release": "semantic-release  --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
-  },
-  "type": "module",
-  "version": "1.0.0-main.1"
-}
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "tokenSetOrder": [
+    "globals",
+    "color/dark",
+    "color/light",
+    "color/primitives",
+    "semantic/focus-ring",
+    "semantic/input",
+    "semantic/button",
+    "semantic/toggle",
+    "_docs"
+  ]
+}