@synergy-design-system/tokens 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.18.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.17.0...tokens/1.18.0) (2024-05-15)
+
+
+### Features
+
+* ✨ syn-card ([#467](https://github.com/synergy-design-system/synergy-design-system/issues/467)) ([6fa03de](https://github.com/synergy-design-system/synergy-design-system/commit/6fa03def4564236b737df851880902da03b4f47d))
+
+# [@synergy-design-system/tokens-v1.17.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.16.0...tokens/1.17.0) (2024-05-08)
+
+
+### Features
+
+* ✨ syn-dialog ([#458](https://github.com/synergy-design-system/synergy-design-system/issues/458)) ([7247f0c](https://github.com/synergy-design-system/synergy-design-system/commit/7247f0cca654ea10ec5968d92175e546c43515cd))
+
 # [@synergy-design-system/tokens-v1.16.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.15.0...tokens/1.16.0) (2024-05-02)
 
 

package/dist/js/index.d.ts

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

package/dist/js/index.js

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

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.15.0
+ * @synergy-design-system/tokens version 1.17.0
  * 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.15.0
+ * @synergy-design-system/tokens version 1.17.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 02 May 2024 06:39:11 GMT
+ * Generated on Wed, 15 May 2024 08:15:55 GMT
  */
 
 :root, .syn-theme-dark {
@@ -126,7 +126,7 @@
   --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-background-color: rgba(0, 0, 0, 0.4);
+  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
   --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);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.15.0
+ * @synergy-design-system/tokens version 1.17.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 02 May 2024 06:39:11 GMT
+ * Generated on Wed, 15 May 2024 08:15:55 GMT
  */
 
 :root, .syn-theme-light {
@@ -126,7 +126,7 @@
   --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-background-color: rgba(0, 0, 0, 0.4);
+  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
   --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);

package/package.json

@@ -18,8 +18,8 @@
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
     "stylelint": "^16.3.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.16.0",
+  "version": "1.18.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -175,13 +175,55 @@
       }
     },
     "breadcrumb": {
-      "description": {
-        "value": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Breadcrumb",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Breadcrumb",
-        "type": "text"
+      "links": {
+        "title": {
+          "value": "Breadcrumb Links",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you’ll need to add event listeners to handle clicks.\n\nFor websites, you’ll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they’ll be taken to the corresponding page — no event listeners required.",
+          "type": "text"
+        }
+      },
+      "prefix": {
+        "title": {
+          "value": "Prefixes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix slot to add content before any breadcrumb item.",
+          "type": "text"
+        }
+      },
+      "suffix": {
+        "title": {
+          "value": "Suffixes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the suffix slot to add content after any breadcrumb item.",
+          "type": "text"
+        }
+      },
+      "menu": {
+        "title": {
+          "value": "With Dropdowns",
+          "type": "text"
+        },
+        "description": {
+          "value": "Dropdown menus can be placed in a prefix or suffix slot to provide additional options.",
+          "type": "text"
+        }
       }
     },
     "button": {
@@ -297,13 +339,65 @@
       }
     },
     "card": {
-      "description": {
-        "value": "Cards can be used to group related subjects in a container.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Cards can be used to group related subjects in a container.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Card",
+          "type": "text"
+        }  
       },
-      "title": {
-        "value": "Card",
-        "type": "text"
+      "basic-card": {
+        "description": {
+          "value": "Basic cards aren’t very exciting, but they can display any content you want them to.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Basic Card",
+          "type": "text"
+        }
+      },
+      "with-header": {
+        "description": {
+          "value": "Headers can be used to display titles and more.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Card with Header",
+          "type": "text"
+        }
+      },
+      "with-footer": {
+        "description": {
+          "value": "Footers can be used to display actions, summaries, or other relevant content.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Card with Footer",
+          "type": "text"
+        }
+      },
+      "images": {
+        "description": {
+          "value": "Cards accept an image slot. The image is displayed atop the card and stretches to fit.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Images",
+          "type": "text"
+        }
+      },
+      "nested": {
+        "description": {
+          "value": "Its possible to expand the Card to a Background Card and nest multiple cards into.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Nested Card",
+          "type": "text"
+        }
       }
     },
     "carousel-item": {
@@ -1771,13 +1865,75 @@
       }
     },
     "tab-group": {
-      "description": {
-        "value": "Tab groups organize content into a container that shows one section at a time.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Tab groups organize content into a container that shows one section at a time. Tab groups make use of tabs and tab panels. Each tab must be slotted into the nav slot and its panel must refer to a tab panel of the same name.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Tab Group",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Tab Group",
-        "type": "text"
+      "start": {
+        "title": {
+          "value": "Tabs on Start",
+          "type": "text"
+        },
+        "description": {
+          "value": "Tabs can be shown on the starting side by setting placement to start.",
+          "type": "text"
+        }
+      },
+      "end": {
+        "title": {
+          "value": "Tabs on End",
+          "type": "text"
+        },
+        "description": {
+          "value": "Tabs can be shown on the ending side by setting placement to end.",
+          "type": "text"
+        }
+      },
+      "closable": {
+        "title": {
+          "value": "Closable Tabs",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.",
+          "type": "text"
+        }
+      },
+      "scrolling": {
+        "title": {
+          "value": "Scrolling Tabs",
+          "type": "text"
+        },
+        "description": {
+          "value": "When there are more tabs than horizontal space allows, the nav will be scrollable.",
+          "type": "text"
+        }
+      },
+      "manuel": {
+        "title": {
+          "value": "Manual Activation",
+          "type": "text"
+        },
+        "description": {
+          "value": "When focused, keyboard users can press Left or Right to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting activation=\"manual\" which will require the user to press Space or Enter before showing the tab panel (manual activation).",
+          "type": "text"
+        }
+      },
+      "hierachy": {
+        "title": {
+          "value": "Visual Hierarchy",
+          "type": "text"
+        },
+        "description": {
+          "value": "To structure the Page, you can use different tab styles.",
+          "type": "text"
+        }
       }
     },
     "tab-panel": {
@@ -1791,13 +1947,15 @@
       }
     },
     "tab": {
-      "description": {
-        "value": "Tabs are used inside tab groups to represent and activate tab panels.",
-        "type": "text"
-      },
-      "title": {
-        "value": "Tab",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Tabs are used inside tab groups to represent and activate tab panels.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Tab",
+          "type": "text"
+        }
       }
     },
     "tag": {
@@ -2801,4 +2959,4 @@
       }
     }
   }
-}
+}

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

@@ -2,7 +2,7 @@
   "overlay": {
     "background": {
       "color": {
-        "value": "rgba(0, 0, 0, 0.4)",
+        "value": "rgba(0, 0, 0, 0.5)",
         "type": "color"
       }
     }