@synergy-design-system/tokens 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ adjust syn opacity token ([#457](https://github.com/synergy-design-system/synergy-design-system/issues/457)) ([0f44c01](https://github.com/synergy-design-system/synergy-design-system/commit/0f44c012d05930d3c01b62756f761563ee24d684))
+
 # [@synergy-design-system/tokens-v1.15.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.14.0...tokens/1.15.0) (2024-04-26)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.14.0
+ * @synergy-design-system/tokens version 1.16.0
  * SICK Global UX Foundation
  */
 
@@ -270,9 +270,9 @@ export const SynBorderWidthXLarge: string;
 export const SynFontSansFallback: string;
 
 /**
- * Maps to the css variable `--syn-opacity-medium`
+ * Maps to the css variable `--syn-opacity-50`
  */
-export const SynOpacityMedium: string;
+export const SynOpacity50: string;
 
 /**
  * Maps to the css variable `--syn-button-font-size-small`

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.14.0
+ * @synergy-design-system/tokens version 1.16.0
  * SICK Global UX Foundation
  */
 
@@ -271,7 +271,7 @@ export const SynFontSansFallback = 'var(--syn-font-sans-fallback)';
 /**
  * @type {string}
  */
-export const SynOpacityMedium = 'var(--syn-opacity-medium)';
+export const SynOpacity50 = 'var(--syn-opacity-50)';
 
 /**
  * @type {string}

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.14.0
+ * @synergy-design-system/tokens version 1.16.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -55,7 +55,7 @@ $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
 $SynBorderWidthLarge: var(--syn-border-width-large) !default;
 $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
 $SynFontSansFallback: var(--syn-font-sans-fallback) !default;
-$SynOpacityMedium: var(--syn-opacity-medium) !default;
+$SynOpacity50: var(--syn-opacity-50) !default;
 $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
 $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
 $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.14.0
+ * @synergy-design-system/tokens version 1.16.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 26 Apr 2024 10:46:36 GMT
+ * Generated on Wed, 08 May 2024 05:53:28 GMT
  */
 
 :root, .syn-theme-dark {
@@ -61,7 +61,7 @@
   --syn-border-width-large: 3px; /* Large */
   --syn-border-width-x-large: 4px; /* X Large */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  --syn-opacity-medium: 0.5; /* 50% */
+  --syn-opacity-50: 0.5; /* 50% */
   --syn-button-font-size-small: var(--syn-font-size-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
@@ -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.14.0
+ * @synergy-design-system/tokens version 1.16.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 26 Apr 2024 10:46:36 GMT
+ * Generated on Wed, 08 May 2024 05:53:28 GMT
  */
 
 :root, .syn-theme-light {
@@ -61,7 +61,7 @@
   --syn-border-width-large: 3px; /* Large */
   --syn-border-width-x-large: 4px; /* X Large */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  --syn-opacity-medium: 0.5; /* 50% */
+  --syn-opacity-50: 0.5; /* 50% */
   --syn-button-font-size-small: var(--syn-font-size-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
@@ -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

@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.15.0",
+  "version": "1.17.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": {
@@ -429,13 +471,55 @@
       }
     },
     "details": {
-      "description": {
-        "value": "Details show a brief summary and expand to show additional content.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Details show a brief summary and expand to show additional content.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Details",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Details",
-        "type": "text"
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disable attribute to prevent the details from expanding.",
+          "type": "text"
+        }
+      },
+      "summary-icon": {
+        "title": {
+          "value": "Customizing the Summary Icon",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the summary-icon part as shown below.",
+          "type": "text"
+        }
+      },
+      "grouping": {
+        "title": {
+          "value": "Grouping Details",
+          "type": "text"
+        },
+        "description": {
+          "value": "Details are designed to function independently, but you can simulate a group or “accordion” where only one is shown at a time by listening for the syn-show event.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a detail’s size.",
+          "type": "text"
+        }
       }
     },
     "dialog": {
@@ -2569,6 +2653,16 @@
         "value": "Z-Index Tokens",
         "type": "text"
       }
+    },
+    "opacity": {
+      "description": {
+        "value": "Opacity tokens apply transparency to an element.",
+        "type": "text"
+      },
+      "title": {
+        "value": "Opacity",
+        "type": "text"
+      }
     }
   },
   "frameworks": {

package/src/figma-tokens/globals.json

@@ -417,7 +417,7 @@
     "type": "other"
   },
   "opacity": {
-    "medium": {
+    "50": {
       "value": "0.5",
       "type": "opacity",
       "description": "50%"

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

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