@synergy-design-system/tokens 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@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)
+
+
+### Features
+
+* ✨ syn-drawer ([#320](https://github.com/synergy-design-system/synergy-design-system/issues/320)) ([ce20a42](https://github.com/synergy-design-system/synergy-design-system/commit/ce20a42f9f90eb5b38c0ae84f99d4a8db2e08613))
+
 # [@synergy-design-system/tokens-v1.6.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.5.0...tokens/1.6.0) (2024-02-26)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.5.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  */
 
@@ -585,29 +585,24 @@ export const SynInputFontSizeMedium: string;
 export const SynInputFontSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-overlay-color`
+ * Maps to the css variable `--syn-overlay-background-color`
  */
-export const SynOverlayColor: string;
+export const SynOverlayBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-overlay-opacity`
+ * Maps to the css variable `--syn-panel-background-color`
  */
-export const SynOverlayOpacity: string;
+export const SynPanelBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-background-color`
+ * Maps to the css variable `--syn-panel-border-color`
  */
-export const SynBackgroundColor: string;
+export const SynPanelBorderColor: string;
 
 /**
- * Maps to the css variable `--syn-border-color`
+ * Maps to the css variable `--syn-panel-border-width`
  */
-export const SynBorderColor: string;
-
-/**
- * Maps to the css variable `--syn-panel-border`
- */
-export const SynPanelBorder: string;
+export const SynPanelBorderWidth: string;
 
 /**
  * Maps to the css variable `--syn-toggle-size-small`

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.5.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  */
 
@@ -586,27 +586,22 @@ export const SynInputFontSizeLarge = 'var(--syn-input-font-size-large)';
 /**
  * @type {string}
  */
-export const SynOverlayColor = 'var(--syn-overlay-color)';
+export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
 
 /**
  * @type {string}
  */
-export const SynOverlayOpacity = 'var(--syn-overlay-opacity)';
+export const SynPanelBackgroundColor = 'var(--syn-panel-background-color)';
 
 /**
  * @type {string}
  */
-export const SynBackgroundColor = 'var(--syn-background-color)';
+export const SynPanelBorderColor = 'var(--syn-panel-border-color)';
 
 /**
  * @type {string}
  */
-export const SynBorderColor = 'var(--syn-border-color)';
-
-/**
- * @type {string}
- */
-export const SynPanelBorder = 'var(--syn-panel-border)';
+export const SynPanelBorderWidth = 'var(--syn-panel-border-width)';
 
 /**
  * @type {string}

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.5.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -118,11 +118,10 @@ $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;
+$SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
+$SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
+$SynPanelBorderColor: var(--syn-panel-border-color) !default;
+$SynPanelBorderWidth: var(--syn-panel-border-width) !default;
 $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
 $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
 $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.5.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 07:16:32 GMT
+ * Generated on Tue, 27 Feb 2024 12:58:11 GMT
  */
 
 :root, .syn-theme-dark {
@@ -124,11 +124,10 @@
   --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-overlay-background-color: rgba(0, 0, 0, 0.4);
+  --syn-panel-background-color: var(--syn-color-neutral-0);
+  --syn-panel-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border-width: 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);
@@ -254,10 +253,6 @@
   --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(0 0% 0% / 43%);
-  --syn-panel-background-color: var(--syn-color-neutral-0);
-  --syn-panel-border-color: var(--syn-color-neutral-300);
-  --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);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.5.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 26 Feb 2024 07:16:32 GMT
+ * Generated on Tue, 27 Feb 2024 12:58:11 GMT
  */
 
 :root, .syn-theme-light {
@@ -124,11 +124,10 @@
   --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-overlay-background-color: rgba(0, 0, 0, 0.4);
+  --syn-panel-background-color: var(--syn-color-neutral-0);
+  --syn-panel-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border-width: 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);
@@ -254,10 +253,6 @@
   --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-300);
-  --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);

package/package.json

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

package/src/figma-tokens/_docs.json

@@ -1599,6 +1599,108 @@
           "type": "text"
         }
       }
+    },
+    "nav-item": {
+      "default": {
+        "title": {
+          "value": "Navigation Item",
+          "type": "text"
+        },
+        "description": {
+          "value": "The navigation item is used to trigger page switches.",
+          "type": "text"
+        }
+      },
+      "labels": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to change the content of a navigtion item.",
+          "type": "text"
+        }
+      },
+      "current": {
+        "title": {
+          "value": "Current",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
+          "type": "text"
+        }
+      },
+      "nav-horizontal": {
+        "title": {
+          "value": "Horizontal Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the horizontal attribute to indicate that an element is used in a horizontal navigation.
(The example shows it in combination with the current attribute, to indicate the difference.)",
+          "type": "text"
+        }
+      },
+      "prefix-suffix": {
+        "title": {
+          "value": "Prefix and suffix Slot",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix and suffix slots to add e. g. icons or tags. If available the prefix slot will be shown in the rail navigation.",
+          "type": "text"
+        }
+      },
+      "children": {
+        "title": {
+          "value": "Children closed / open (vertical only)",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the *children attribute to indicate that show a chevron. In development this will be handled automatically as soon as an element has children.:",
+          "type": "text"
+        }
+      },
+      "divider": {
+        "title": {
+          "value": "Divider",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the divider attribute to add a border at the top. This should be used for first level elements in vertical navigations.",
+          "type": "text"
+        }
+      },
+      "indentation": {
+        "title": {
+          "value": "Indentation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Vertical navigation elements can be indented to indicate deeper navigation levels.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a navigation-item.",
+          "type": "text"
+        }
+      }
     }
   },
   "frameworks": {

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

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

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

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