@synergy-design-system/tokens 1.11.0 → 1.12.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.12.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.12.0...tokens/1.12.1) (2024-04-23)
+
+
+### Bug Fixes
+
+* 🤔 update dependencies ([#438](https://github.com/synergy-design-system/synergy-design-system/issues/438)) ([f3d648b](https://github.com/synergy-design-system/synergy-design-system/commit/f3d648b2071214cd6d58ff18d66e434dd32bfc76))
+
+# [@synergy-design-system/tokens-v1.12.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.11.0...tokens/1.12.0) (2024-04-18)
+
+
+### Features
+
+* ✨ opacity-token 50% ([#428](https://github.com/synergy-design-system/synergy-design-system/issues/428)) ([ec1493d](https://github.com/synergy-design-system/synergy-design-system/commit/ec1493d8c0cedaf6568be970e8d9a5c0c1ab82fa))
+
 # [@synergy-design-system/tokens-v1.11.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.10.0...tokens/1.11.0) (2024-04-08)
 
 

package/README.md

@@ -3,6 +3,8 @@
 This package provides the design tokens that form the base for all components of the synergy design system.
 It provides multiple exports for colors, spacings, shadows, sizings, etc. that can be also consumed by applications directly.
 
+The source of the tokens can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-235&mode=design&t=GPu4VVd9yffLLAaS-0)
+
 ---
 
 ## Installation

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.10.0
+ * @synergy-design-system/tokens version 1.12.0
  * SICK Global UX Foundation
  */
 
@@ -269,6 +269,11 @@ export const SynBorderWidthXLarge: string;
  */
 export const SynFontSansFallback: string;
 
+/**
+ * Maps to the css variable `--syn-opacity-medium`
+ */
+export const SynOpacityMedium: 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.10.0
+ * @synergy-design-system/tokens version 1.12.0
  * SICK Global UX Foundation
  */
 
@@ -268,6 +268,11 @@ export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';
  */
 export const SynFontSansFallback = 'var(--syn-font-sans-fallback)';
 
+/**
+ * @type {string}
+ */
+export const SynOpacityMedium = 'var(--syn-opacity-medium)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.10.0
+ * @synergy-design-system/tokens version 1.12.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -55,6 +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;
 $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.10.0
+ * @synergy-design-system/tokens version 1.12.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 08 Apr 2024 14:25:51 GMT
+ * Generated on Tue, 23 Apr 2024 09:42:20 GMT
  */
 
 :root, .syn-theme-dark {
@@ -61,6 +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-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.10.0
+ * @synergy-design-system/tokens version 1.12.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 08 Apr 2024 14:25:51 GMT
+ * Generated on Tue, 23 Apr 2024 09:42:20 GMT
  */
 
 :root, .syn-theme-light {
@@ -61,6 +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-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

@@ -8,16 +8,16 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@tokens-studio/sd-transforms": "^0.14.2",
+    "@tokens-studio/sd-transforms": "^0.14.4",
     "chalk": "^5.3.0",
-    "change-case": "^4.1.2",
-    "eslint": "^8.56.0",
+    "change-case": "^5.4.4",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.3.1",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -1,13 +1,85 @@
 {
   "components": {
     "alert": {
-      "description": {
-        "value": "Alerts are used to display important messages inline or as toast notifications.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Alerts are used to display important messages inline or as toast notifications.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Alert",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Alert",
-        "type": "text"
+      "variants": {
+        "title": {
+          "value": "Variants",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the variant attribute to change the alert’s variant.",
+          "type": "text"
+        }
+      },
+      "closable": {
+        "title": {
+          "value": "Closable",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add the closable attribute to show a close button that will hide the alert.",
+          "type": "text"
+        }
+      },
+      "without-icons": {
+        "title": {
+          "value": "Without Icons",
+          "type": "text"
+        },
+        "description": {
+          "value": "Icons are optional. Simply omit the icon slot if you don’t want them.",
+          "type": "text"
+        }
+      },
+      "duration": {
+        "title": {
+          "value": "Duration",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don’t require acknowledgement.",
+          "type": "text"
+        }
+      },
+      "toast-notifications": {
+        "titel": {
+          "value": "Toast Notifications",
+          "type": "text"
+        },
+        "description": {
+          "value": "To display an alert as a toast notification, or “toast”, create the alert and call its toast() method. This will move the alert out of its position in the DOM and into the toast stack where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call toast() again later on.\n\nYou should always use the closable attribute so users can dismiss the notification. It’s also common to set a reasonable duration when the notification doesn’t require acknowledgement.",
+          "type": "text"
+        }
+      },
+      "creating-toasts-imperatively": {
+        "title": {
+          "value": "Creating Toasts Imperatively",
+          "type": "text"
+        },
+        "description": {
+          "value": "For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the toast() method as shown in the example below.",
+          "type": "text"
+        }
+      },
+      "toast-stack": {
+        "title": {
+          "value": "The Toast Stack",
+          "type": "text"
+        },
+        "description": {
+          "value": "The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.\n\nBy default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting .syn-toast-stack in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.",
+          "type": "text"
+        }
       }
     },
     "animated-image": {
@@ -367,13 +439,65 @@
       }
     },
     "dialog": {
-      "description": {
-        "value": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Dialog",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Dialog",
-        "type": "text"
+      "custom-width": {
+        "title": {
+          "value": "Custom Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --width custom property to set the dialog’s width.",
+          "type": "text"
+        }
+      },
+      "scrolling": {
+        "title": {
+          "value": "Scrolling",
+          "type": "text"
+        },
+        "description": {
+          "value": "By design, a dialog’s height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.",
+          "type": "text"
+        }
+      },
+      "header-actions": {
+        "title": {
+          "value": "Header Actions",
+          "type": "text"
+        },
+        "description": {
+          "value": "The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.",
+          "type": "text"
+        }
+      },
+      "prevent-closing": {
+        "title": {
+          "value": "Preventing the Dialog from Closing",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.\n\nTo keep the dialog open in such cases, you can cancel the syn-request-close event. When canceled, the dialog will remain open and pulse briefly to draw the user’s attention to it.\n\nYou can use event.detail.source to determine what triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Customizing Initial Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "By default, the dialog’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the autofocus attribute to it as shown below.",
+          "type": "text"
+        }
       }
     },
     "divider": {
@@ -651,7 +775,7 @@
     "icon-button": {
       "default": {
         "description": {
-          "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\nFor a full list of icons that come bundled with Synergy, refer to the Assets.",
+          "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\nFor a full list of icons that come bundled with Synergy, refer to the Assets.\n\n**Note:** To make the icon-button work in development, have a look at the icon documentation for how to set up the assets package.",
           "type": "text"
         },
         "title": {
@@ -1083,13 +1207,55 @@
       }
     },
     "progress-bar": {
-      "description": {
-        "value": "Progress bars are used to show the status of an ongoing operation.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Progress bars are used to show the status of an ongoing operation.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Progress Bar",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Progress Bar",
-        "type": "text"
+      "labels": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "decription": {
+          "value": "Use the label attribute to label the progress bar and tell assistive devices how to announce it.",
+          "type": "text"
+        }
+      },
+      "custom-height": {
+        "title": {
+          "value": "Custom Height",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --height custom property to set the progress bar’s height.",
+          "type": "text"
+        }
+      },
+      "showing-values": {
+        "title": {
+          "value": "Showing Values",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the default slot to show a value.",
+          "type": "text"
+        }
+      },
+      "indeterminate": {
+        "title": {
+          "value": "Indeterminate",
+          "type": "text"
+        },
+        "description": {
+          "value": "The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, value is ignored and the label, if present, will not be shown.",
+          "type": "text"
+        }
       }
     },
     "progress-ring": {

package/src/figma-tokens/globals.json

@@ -415,5 +415,12 @@
   "font-sans-fallback": {
     "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif",
     "type": "other"
+  },
+  "opacity": {
+    "medium": {
+      "value": "0.5",
+      "type": "opacity",
+      "description": "50%"
+    }
   }
 }