@synergy-design-system/tokens 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.10.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.9.1...tokens/1.10.0) (2024-03-28)
+
+
+### Features
+
+* ✨ syn-badge ([#390](https://github.com/synergy-design-system/synergy-design-system/issues/390)) ([a44d683](https://github.com/synergy-design-system/synergy-design-system/commit/a44d683b35e984bfbdac093dba5abd04c74f33c0))
+
+# [@synergy-design-system/tokens-v1.9.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.9.0...tokens/1.9.1) (2024-03-26)
+
+
+### Bug Fixes
+
+* 🤔: Adjust syn-color-neutral-100 ([#391](https://github.com/synergy-design-system/synergy-design-system/issues/391)) ([bec9459](https://github.com/synergy-design-system/synergy-design-system/commit/bec945987fddf571fc8c2da940a9b7b279f0bb82))
+
 # [@synergy-design-system/tokens-v1.9.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.8.0...tokens/1.9.0) (2024-03-18)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.8.0
+ * @synergy-design-system/tokens version 1.9.1
  * SICK Global UX Foundation
  */
 

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.8.0
+ * @synergy-design-system/tokens version 1.9.1
  * SICK Global UX Foundation
  */
 

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.8.0
+ * @synergy-design-system/tokens version 1.9.1
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.8.0
+ * @synergy-design-system/tokens version 1.9.1
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 18 Mar 2024 10:36:36 GMT
+ * Generated on Thu, 28 Mar 2024 09:52:06 GMT
  */
 
 :root, .syn-theme-dark {
@@ -215,7 +215,7 @@
   --syn-color-neutral-600: #bac2c6;
   --syn-color-neutral-700: #d5dbdd;
   --syn-color-neutral-800: #e8ebec;
-  --syn-color-neutral-900: #f2f5f5;
+  --syn-color-neutral-900: #F2F3F6;
   --syn-color-neutral-950: #f9fafb;
   --syn-color-neutral-1000: white;
 

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.8.0
+ * @synergy-design-system/tokens version 1.9.1
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 18 Mar 2024 10:36:36 GMT
+ * Generated on Thu, 28 Mar 2024 09:52:06 GMT
  */
 
 :root, .syn-theme-light {
@@ -207,7 +207,7 @@
   --syn-color-accent-950: #481700;
   --syn-color-neutral-0: white;
   --syn-color-neutral-50: #f9fafb;
-  --syn-color-neutral-100: #f2f5f5;
+  --syn-color-neutral-100: #F2F3F6;
   --syn-color-neutral-200: #e8ebec;
   --syn-color-neutral-300: #d5dbdd;
   --syn-color-neutral-400: #bac2c6;

package/package.json

@@ -18,8 +18,8 @@
     "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"
+    "@synergy-design-system/eslint-config-syn": "0.1.0",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "exports": {
     ".": {
@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -41,13 +41,55 @@
       }
     },
     "badge": {
-      "description": {
-        "value": "Badges are used to draw attention and display statuses or counts.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Badges are used to draw attention and display statuses or counts.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Badge",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Badge",
-        "type": "text"
+      "variants": {
+        "title": {
+          "value": "Variants",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the variant attribute to change the badge’s variant.",
+          "type": "text"
+        }
+      },
+      "withButton": {
+        "title": {
+          "value": "With Buttons",
+          "type": "text"
+        },
+        "description": {
+          "value": "One of the most common use cases for badges is attaching them to buttons. \n\nDEV: To make this easier, badges will be automatically positioned at the top-right when they’re a child of a button.",
+          "type": "text"
+        }
+      },
+      "menu": {
+        "title": {
+          "value": "With Menu Items",
+          "type": "text"
+        },
+        "description": {
+          "value": "When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.",
+          "type": "text"
+        }
+      },
+      "withEmptyContent": {
+        "title": {
+          "value": "With empty content",
+          "type": "text"
+        },
+        "description": {
+          "value": "Badges can be used without content to just show an status indicator.",
+          "type": "text"
+        }
       }
     },
     "breadcrumb-item": {
@@ -1599,13 +1641,75 @@
       }
     },
     "tooltip": {
-      "description": {
-        "value": "Tooltips display additional information based on a specific action.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Tooltips display additional information based on a specific action.\n\nA tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.\n\nTooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Tooltip",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Tooltip",
-        "type": "text"
+      "placement": {
+        "title": {
+          "value": "Placement",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the placement attribute to set the preferred placement of the tooltip.",
+          "type": "text"
+        }
+      },
+      "onclick": {
+        "title": {
+          "value": "Click Trigger",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the trigger attribute to click to toggle the tooltip on click instead of hover.",
+          "type": "text"
+        }
+      },
+      "manuel": {
+        "title": {
+          "value": "Manual Trigger",
+          "type": "text"
+        },
+        "description": {
+          "value": "Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.",
+          "type": "text"
+        }
+      },
+      "removingarrows": {
+        "title": {
+          "value": "Removing Arrows",
+          "type": "text"
+        },
+        "description": {
+          "value": "You can control the size of tooltip arrows by overriding the --syn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.",
+          "type": "text"
+        }
+      },
+      "htmltooltip": {
+        "title": {
+          "value": "HTML in Tooltips",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.",
+          "type": "text"
+        }
+      },
+      "maxwith": {
+        "title": {
+          "value": "Setting a Maximum Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.",
+          "type": "text"
+        }
       }
     },
     "tree-item": {
@@ -1917,6 +2021,68 @@
           "type": "text"
         }
       }
+    },
+    "side-nav": {
+      "default": {
+        "title": {
+          "value": "Side Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Side navigation lets the user navigate through the entire content of a product. It supports single or nested navigation levels.",
+          "type": "text"
+        }
+      },
+      "rail": {
+        "title": {
+          "value": "Rail",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the rail attribute to only show the prefix of navigation items. This will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation. ",
+          "type": "text"
+        }
+      },
+      "footer": {
+        "title": {
+          "value": "Footer",
+          "type": "text"
+        },
+        "description": {
+          "value": "The Side navigation can have an optional bottom navigation \"slot\" to split up the navigation entries.\n\nPlease avoid having to many navigation entries (at the bottom) as it can massively influence the user experience.",
+          "type": "text"
+        }
+      },
+      "fixed": {
+        "title": {
+          "value": "Fixed Content",
+          "type": "text"
+        },
+        "description": {
+          "value": "Per default, the side navigation shows an overlay. This should always be the case, if the content of the app is not shrinking. This makes especially sense for applications, where you navigate to a place and stay there for a longer time.",
+          "type": "text"
+        }
+      },
+      "shrinking": {
+        "title": {
+          "value": "Shrinking Content",
+          "type": "text"
+        },
+        "description": {
+          "value": "For specific cases it might make sense to have the navigation open while still being able to interact with the app. This especially makes sense for cases where you switch a lot between areas to interact with an app.\n\nYou can decide yourself depending on your app and screen size, when it makes sense to omit the overlay and shrink the content.\n\nThis should never be used in combination with a Rail navigation, as this would lead to too much friction on hover.",
+          "type": "text"
+        }
+      },
+      "indentation": {
+        "title": {
+          "value": "Indentation",
+          "type": "text"
+        },
+        "description": {
+          "value": "The different levels of navigation can be organized using the indention. The current status of a page shows the user directly which page they are browsing.",
+          "type": "text"
+        }
+      }
     }
   },
   "assets": {

package/src/figma-tokens/color/primitives.json

@@ -5,7 +5,7 @@
       "type": "color"
     },
     "100": {
-      "value": "#f2f5f5",
+      "value": "#F2F3F6",
       "type": "color"
     },
     "200": {