@synergy-design-system/tokens 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/tokens-v2.3.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.2.0...tokens/2.3.0) (2024-06-21)
+
+
+### Features
+
+* ✨ syn-details ([#468](https://github.com/synergy-design-system/synergy-design-system/issues/468)) ([e064922](https://github.com/synergy-design-system/synergy-design-system/commit/e064922ef435f3173db12548375e6032d281421a))
+
 # [@synergy-design-system/tokens-v2.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.1.0...tokens/2.2.0) (2024-06-18)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.1.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  */
 
@@ -179,6 +179,11 @@ export const SynSpacingSmall: string;
  */
 export const SynSpacingMedium: string;
 
+/**
+ * Maps to the css variable `--syn-spacing-medium-large`
+ */
+export const SynSpacingMediumLarge: string;
+
 /**
  * Maps to the css variable `--syn-spacing-large`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.1.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  */
 
@@ -178,6 +178,11 @@ export const SynSpacingSmall = 'var(--syn-spacing-small)';
  */
 export const SynSpacingMedium = 'var(--syn-spacing-medium)';
 
+/**
+ * @type {string}
+ */
+export const SynSpacingMediumLarge = 'var(--syn-spacing-medium-large)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.1.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -37,6 +37,7 @@ $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
 $SynSpacingXSmall: var(--syn-spacing-x-small) !default;
 $SynSpacingSmall: var(--syn-spacing-small) !default;
 $SynSpacingMedium: var(--syn-spacing-medium) !default;
+$SynSpacingMediumLarge: var(--syn-spacing-medium-large) !default;
 $SynSpacingLarge: var(--syn-spacing-large) !default;
 $SynSpacingXLarge: var(--syn-spacing-x-large) !default;
 $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.1.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 14:30:01 GMT
+ * Generated on Fri, 21 Jun 2024 08:14:11 GMT
  */
 
 :root, .syn-theme-dark {
@@ -43,6 +43,7 @@
   --syn-spacing-x-small: calc(4px * 2);
   --syn-spacing-small: calc(4px * 3);
   --syn-spacing-medium: calc(4px * 4);
+  --syn-spacing-medium-large: calc(4px * 5);
   --syn-spacing-large: calc(4px * 6);
   --syn-spacing-x-large: calc(4px * 8);
   --syn-spacing-2x-large: calc(4px * 12);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.1.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 14:30:01 GMT
+ * Generated on Fri, 21 Jun 2024 08:14:11 GMT
  */
 
 :root, .syn-theme-light {
@@ -43,6 +43,7 @@
   --syn-spacing-x-small: calc(4px * 2);
   --syn-spacing-small: calc(4px * 3);
   --syn-spacing-medium: calc(4px * 4);
+  --syn-spacing-medium-large: calc(4px * 5);
   --syn-spacing-large: calc(4px * 6);
   --syn-spacing-x-large: calc(4px * 8);
   --syn-spacing-2x-large: calc(4px * 12);

package/package.json

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

package/src/figma-tokens/_docs.json

@@ -1,5 +1,67 @@
 {
   "components": {
+    "accordion": {
+      "default": {
+        "title": {
+          "value": "Accordion",
+          "type": "text"
+        },
+        "description": {
+          "value": "Accordion is a group of syn-details to show a brief summary and expand to show additional content.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disable attribute to prevent the details from expanding.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a detail’s size. The size attribute should not be mixed within an accordion",
+          "type": "text"
+        }
+      },
+      "grouping": {
+        "title": {
+          "value": "Grouping Details",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the `close-others` property to true to ensure only one detail is open at a time.",
+          "type": "text"
+        }
+      },
+      "contained": {
+        "title": {
+          "value": "Contained",
+          "type": "text"
+        },
+        "description": {
+          "value": "To give content more structure, you can use the property contained.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the detail has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      }
+    },
     "alert": {
       "default": {
         "description": {
@@ -537,7 +599,7 @@
     "details": {
       "default": {
         "description": {
-          "value": "Details show a brief summary and expand to show additional content.",
+          "value": "Details show a brief summary and expand to show additional content. If you want to group the details, we recommend that you use the syn-accordion component.",
           "type": "text"
         },
         "title": {
@@ -555,33 +617,53 @@
           "type": "text"
         }
       },
-      "summary-icon": {
+      "size": {
         "title": {
-          "value": "Customizing the Summary Icon",
+          "value": "Sizes",
           "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.",
+          "value": "Use the size attribute to change a detail’s size.",
           "type": "text"
         }
       },
-      "grouping": {
+      "open": {
         "title": {
-          "value": "Grouping Details",
+          "value": "Open",
           "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.",
+          "value": "Details show a brief summary and expand to show additional content.",
           "type": "text"
         }
       },
-      "size": {
+      "focus": {
         "title": {
-          "value": "Sizes",
+          "value": "Focus",
           "type": "text"
         },
         "description": {
-          "value": "Use the size attribute to change a detail’s size.",
+          "value": "The focus event gives the user feedback that the detail has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "contained": {
+        "title": {
+          "value": "Contained",
+          "type": "text"
+        },
+        "description": {
+          "value": "To give content more structure, you can use the property contained.",
+          "type": "text"
+        }
+      },
+      "icon": {
+        "title": {
+          "value": "Prefix Icons",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix Icon to prepend an icon to the details.",
           "type": "text"
         }
       }
@@ -2371,7 +2453,7 @@
           "type": "text"
         }
       }
-    },  
+    },
     "templates": {
       "application-shell": {
         "title": {
@@ -3023,4 +3105,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/globals.json

@@ -332,6 +332,10 @@
       "value": "{dimension.base}*4",
       "type": "spacing"
     },
+    "medium-large": {
+      "value": "{dimension.base}*5",
+      "type": "spacing"
+    },
     "large": {
       "value": "{dimension.base}*6",
       "type": "spacing"