@synergy-design-system/tokens 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ Styles Package ([#495](https://github.com/synergy-design-system/synergy-design-system/issues/495)) ([5e7b3dc](https://github.com/synergy-design-system/synergy-design-system/commit/5e7b3dc54bc9d94060fafc8119648e9e01bd07b7))
+
 # [@synergy-design-system/tokens-v2.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.0.0...tokens/2.1.0) (2024-06-18)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.0.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.0.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.0.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.0.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 07:24:50 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.0.0
+ * @synergy-design-system/tokens version 2.2.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 07:24:50 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.1.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"
         }
       }
@@ -2340,6 +2422,38 @@
         }
       }
     },
+    "styles": {
+      "body": {
+        "description": {
+          "value": "Body text is used for long-form content where a paragraph or multiple lines of text are required. Body text styles are optimized for reading as a large chunk of information through line height and paragraph spacing. Inline links sit within body text styles and inherit the same font values.\nUI text is text used in UI components and uses the same text stylings.\n\nThe default font size is medium (16 px). Synergy supports three additional font sizes for body copy.\n\nIt is also possible to format the text bold or semibold for certain text passages and UI elements such as label.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Body and UI text",
+          "type": "text"
+        }
+      },
+      "headings": {
+        "description": {
+          "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\n- building page hierarchy,\n- helping users scan large chunks of text,\n- providing a title to a page or piece of content,\n-as subheadings or eyebrow headings, where there is still only one H1 tag per page (as per Accessibility requirements).\n\nOur heading styles are consistently bold, to better address the visual hierarchy.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Headings",
+          "type": "text"
+        }
+      },
+      "weight": {
+        "description": {
+          "value": "Supported font weights",
+          "type": "text"
+        },
+        "title": {
+          "value": "Font-Weights",
+          "type": "text"
+        }
+      }
+    },
     "templates": {
       "application-shell": {
         "title": {

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"