@synergy-design-system/tokens 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.8.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.7.1...tokens/1.8.0) (2024-02-28)
+
+
+### Features
+
+* ✨ Create syn-header ([#331](https://github.com/synergy-design-system/synergy-design-system/issues/331)) ([acde61d](https://github.com/synergy-design-system/synergy-design-system/commit/acde61d762dd4123aae553227f3af2015e824208))
+
+# [@synergy-design-system/tokens-v1.7.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.7.0...tokens/1.7.1) (2024-02-27)
+
+
+### Bug Fixes
+
+* 🤔 Fix broken theme tokens and add automatic check ([#342](https://github.com/synergy-design-system/synergy-design-system/issues/342)) ([3fea98a](https://github.com/synergy-design-system/synergy-design-system/commit/3fea98a242d0994f8c3aa9be81ef38a9cd43e48e))
+
 # [@synergy-design-system/tokens-v1.7.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.6.0...tokens/1.7.0) (2024-02-27)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.6.0
+ * @synergy-design-system/tokens version 1.7.1
  * SICK Global UX Foundation
  */
 
@@ -429,6 +429,11 @@ export const SynInputPlaceholderColorDisabled: string;
  */
 export const SynInputRequiredContent: string;
 
+/**
+ * Maps to the css variable `--syn-input-required-content-color`
+ */
+export const SynInputRequiredContentColor: string;
+
 /**
  * Maps to the css variable `--syn-input-required-content-offset`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.6.0
+ * @synergy-design-system/tokens version 1.7.1
  * SICK Global UX Foundation
  */
 
@@ -428,6 +428,11 @@ export const SynInputPlaceholderColorDisabled = 'var(--syn-input-placeholder-col
  */
 export const SynInputRequiredContent = 'var(--syn-input-required-content)';
 
+/**
+ * @type {string}
+ */
+export const SynInputRequiredContentColor = 'var(--syn-input-required-content-color)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.6.0
+ * @synergy-design-system/tokens version 1.7.1
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -87,6 +87,7 @@ $SynInputIconIconClearableColorFocus: var(--syn-input-icon-icon-clearable-color-
 $SynInputPlaceholderColor: var(--syn-input-placeholder-color) !default;
 $SynInputPlaceholderColorDisabled: var(--syn-input-placeholder-color-disabled) !default;
 $SynInputRequiredContent: var(--syn-input-required-content) !default;
+$SynInputRequiredContentColor: var(--syn-input-required-content-color) !default;
 $SynInputRequiredContentOffset: var(--syn-input-required-content-offset) !default;
 $SynInputLabelColor: var(--syn-input-label-color) !default;
 $SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.6.0
+ * @synergy-design-system/tokens version 1.7.1
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 12:58:11 GMT
+ * Generated on Wed, 28 Feb 2024 13:40:21 GMT
  */
 
 :root, .syn-theme-dark {
@@ -72,9 +72,9 @@
   --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-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);
@@ -93,6 +93,7 @@
   --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-color: var(--syn-input-label-color);
   --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);
@@ -221,8 +222,8 @@
   /* Fallbacks from Shoelace */
   --syn-border-radius-large: 0.5rem;
   --syn-border-radius-x-large: 1rem;
-  --syn-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
-  --syn-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
+  --syn-shadow-x-small: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --syn-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.24);
   --syn-transition-x-slow: 1000ms;
   --syn-transition-slow: 500ms;
   --syn-transition-medium: 250ms;
@@ -241,18 +242,9 @@
   --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-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);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.6.0
+ * @synergy-design-system/tokens version 1.7.1
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 12:58:11 GMT
+ * Generated on Wed, 28 Feb 2024 13:40:21 GMT
  */
 
 :root, .syn-theme-light {
@@ -72,9 +72,9 @@
   --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-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);
@@ -93,6 +93,7 @@
   --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-color: var(--syn-input-label-color);
   --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);
@@ -221,8 +222,8 @@
   /* Fallbacks from Shoelace */
   --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-shadow-x-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.06);
+  --syn-shadow-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.12);
   --syn-transition-x-slow: 1000ms;
   --syn-transition-slow: 500ms;
   --syn-transition-medium: 250ms;
@@ -241,18 +242,9 @@
   --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-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);

package/package.json

@@ -17,6 +17,8 @@
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
+    "stylelint": "^16.2.1",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "0.1.0"
   },
   "exports": {
@@ -99,11 +101,13 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",
-    "lint": "eslint scripts",
+    "lint:css": "stylelint \"dist/**/*.css\"",
+    "lint:js": "eslint scripts",
+    "lint": "pnpm run /^lint:.*/",
     "format.eslint": "pnpm lint --fix",
     "start": "pnpm build",
     "release": "semantic-release  --tagFormat 'tokens/${version}' -e semantic-release-monorepo",

package/src/figma-tokens/_docs.json

@@ -1701,6 +1701,68 @@
           "type": "text"
         }
       }
+    },
+    "header": {
+      "default": {
+        "title": {
+          "value": "Header",
+          "type": "text"
+        },
+        "description": {
+          "value": "The header is used to indicate the name of the app, provide important actions in a toolbar and a navigation.",
+          "type": "text"
+        }
+      },
+      "label": {
+        "title": {
+          "value": "Label",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to change the app name.",
+          "type": "text"
+        }
+      },
+      "logo": {
+        "title": {
+          "value": "Logo",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the logo slot to change the app logo. Usually this is only needed in whitelabel solutions, when the SICK branding explicitly has to be hidden.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that a link in the logo has been focused by the keyboard interaction and that the link is ready to be navigated to.",
+          "type": "text"
+        }
+      },
+      "options": {
+        "title": {
+          "value": "Meta Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the Meta Navigation slot to add additional functionalities to your application. Please be aware of the guidelines regarding the order of icons in the toolbar.\nImportant: The Options Menu doesn’t handle any responsive behaviour, e. g. if there is not enough space for all items in different screen sizes. You have to make sure yourself, that your app works correctly and e. g. move elements into the footer of the side navigation or inside a “more” button in the Options Menu.",
+          "type": "text"
+        }
+      },
+      "navigation": {
+        "title": {
+          "value": "Top Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.",
+          "type": "text"
+        }
+      }
     }
   },
   "frameworks": {
@@ -1993,4 +2055,4 @@
       }
     }
   }
-}
+}

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

@@ -110,18 +110,20 @@
         "type": "color"
       }
     },
-    "required-content": {
-      "value": "*",
-      "type": "text",
-      "color": {
+    "required": {
+      "content": {
+        "value": "*",
+        "type": "text"
+      },
+      "content-color": {
         "value": "{input.label.color}",
         "type": "color"
+      },
+      "content-offset": {
+        "value": "-2px",
+        "type": "spacing"
       }
     },
-    "required-content-offset": {
-      "value": "-2px",
-      "type": "spacing"
-    },
     "label": {
       "color": {
         "value": "{neutral.950}",
@@ -263,4 +265,4 @@
       }
     }
   }
-}
+}