@synergy-design-system/tokens 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@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.15.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.15.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.15.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.15.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 26 Apr 2024 10:46:36 GMT
+ * Generated on Thu, 02 May 2024 06:39:11 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);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.14.0
+ * @synergy-design-system/tokens version 1.15.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 26 Apr 2024 10:46:36 GMT
+ * Generated on Thu, 02 May 2024 06:39:11 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);

package/package.json

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

package/src/figma-tokens/_docs.json

@@ -429,13 +429,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 +2611,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%"