@synergy-design-system/tokens 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ added tokens for roundings ([#338](https://github.com/synergy-design-system/synergy-design-system/issues/338)) ([48e01cb](https://github.com/synergy-design-system/synergy-design-system/commit/48e01cbe074726a5bd2abf67fce7bd8d784f1c47))
+
 # [@synergy-design-system/tokens-v1.5.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.4.0...tokens/1.5.0) (2024-02-22)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.4.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  */
 
@@ -224,6 +224,16 @@ export const SynBorderRadiusPill: string;
  */
 export const SynBorderRadiusCircle: string;
 
+/**
+ * Maps to the css variable `--syn-border-radius-small`
+ */
+export const SynBorderRadiusSmall: string;
+
+/**
+ * Maps to the css variable `--syn-border-radius-medium`
+ */
+export const SynBorderRadiusMedium: string;
+
 /**
  * Maps to the css variable `--syn-dimension-base`
  */
@@ -575,29 +585,24 @@ 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`
+ * Maps to the css variable `--syn-overlay-background-color`
  */
-export const SynOverlayOpacity: string;
+export const SynOverlayBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-background-color`
+ * Maps to the css variable `--syn-panel-background-color`
  */
-export const SynBackgroundColor: string;
+export const SynPanelBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-border-color`
+ * Maps to the css variable `--syn-panel-border-color`
  */
-export const SynBorderColor: string;
+export const SynPanelBorderColor: string;
 
 /**
- * Maps to the css variable `--syn-panel-border`
+ * Maps to the css variable `--syn-panel-border-width`
  */
-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.4.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  */
 
@@ -223,6 +223,16 @@ export const SynBorderRadiusPill = 'var(--syn-border-radius-pill)';
  */
 export const SynBorderRadiusCircle = 'var(--syn-border-radius-circle)';
 
+/**
+ * @type {string}
+ */
+export const SynBorderRadiusSmall = 'var(--syn-border-radius-small)';
+
+/**
+ * @type {string}
+ */
+export const SynBorderRadiusMedium = 'var(--syn-border-radius-medium)';
+
 /**
  * @type {string}
  */
@@ -576,27 +586,22 @@ 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)';
+export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
 
 /**
  * @type {string}
  */
-export const SynBackgroundColor = 'var(--syn-background-color)';
+export const SynPanelBackgroundColor = 'var(--syn-panel-background-color)';
 
 /**
  * @type {string}
  */
-export const SynBorderColor = 'var(--syn-border-color)';
+export const SynPanelBorderColor = 'var(--syn-panel-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.4.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -46,6 +46,8 @@ $SynSpacing5xLarge: var(--syn-spacing-5x-large) !default;
 $SynBorderRadiusNone: var(--syn-border-radius-none) !default;
 $SynBorderRadiusPill: var(--syn-border-radius-pill) !default;
 $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
+$SynBorderRadiusSmall: var(--syn-border-radius-small) !default;
+$SynBorderRadiusMedium: var(--syn-border-radius-medium) !default;
 $SynDimensionBase: var(--syn-dimension-base) !default;
 $SynBorderWidthNone: var(--syn-border-width-none) !default;
 $SynBorderWidthSmall: var(--syn-border-width-small) !default;
@@ -116,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.4.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 22 Feb 2024 07:08:20 GMT
+ * Generated on Tue, 27 Feb 2024 12:58:11 GMT
  */
 
 :root, .syn-theme-dark {
@@ -52,6 +52,8 @@
   --syn-border-radius-none: 0px;
   --syn-border-radius-pill: 9999px;
   --syn-border-radius-circle: 9999px;
+  --syn-border-radius-small: 4px;
+  --syn-border-radius-medium: 8px;
   --syn-dimension-base: 4px;
   --syn-border-width-none: 0px; /* None */
   --syn-border-width-small: 1px; /* Small */
@@ -122,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);
@@ -218,8 +219,6 @@
   --syn-color-neutral-1000: white;
 
   /* 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 rgb(0 0 0 / 18%);
@@ -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.4.0
+ * @synergy-design-system/tokens version 1.6.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 22 Feb 2024 07:08:20 GMT
+ * Generated on Tue, 27 Feb 2024 12:58:11 GMT
  */
 
 :root, .syn-theme-light {
@@ -52,6 +52,8 @@
   --syn-border-radius-none: 0px;
   --syn-border-radius-pill: 9999px;
   --syn-border-radius-circle: 9999px;
+  --syn-border-radius-small: 4px;
+  --syn-border-radius-medium: 8px;
   --syn-dimension-base: 4px;
   --syn-border-width-none: 0px; /* None */
   --syn-border-width-small: 1px; /* Small */
@@ -122,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);
@@ -218,8 +219,6 @@
   --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%);
@@ -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.5.0",
+  "version": "1.7.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

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

@@ -296,7 +296,6 @@
       "input.filled.color-disabled": "S:50d5ea5eca1de474be32aa6343b7643c5cc40049,",
       "input.filled.color-hover": "S:5eefc6417572b45a2142265f8686ce798ac04e80,",
       "input.filled.color-focus": "S:bc4ba1f6b31a61949d3c4186b243633dba518ae6,"
-
     },
     "selectedTokenSets": {
       "globals": "source",

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/globals.json

@@ -369,6 +369,14 @@
     "circle": {
       "value": "9999px",
       "type": "borderRadius"
+    },
+    "small": {
+      "value": "4px",
+      "type": "borderRadius"
+    },
+    "medium": {
+      "value": "8px",
+      "type": "borderRadius"
     }
   },
   "dimension": {

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"
+      }
+    }
   }
 }