@synergy-design-system/tokens 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ add syn-side-nav, syn-nav-item, syn-prio-nav ([#364](https://github.com/synergy-design-system/synergy-design-system/issues/364)) ([fd9b821](https://github.com/synergy-design-system/synergy-design-system/commit/fd9b82138385f2708003ce18d9c118b7a8fb7925))
+
 # [@synergy-design-system/tokens-v1.10.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.9.1...tokens/1.10.0) (2024-03-28)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.9.1
+ * @synergy-design-system/tokens version 1.11.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.9.1
+ * @synergy-design-system/tokens version 1.11.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.9.1
+ * @synergy-design-system/tokens version 1.11.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.9.1
+ * @synergy-design-system/tokens version 1.11.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 28 Mar 2024 09:52:06 GMT
+ * Generated on Thu, 18 Apr 2024 09:32:36 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.9.1
+ * @synergy-design-system/tokens version 1.11.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 28 Mar 2024 09:52:06 GMT
+ * Generated on Thu, 18 Apr 2024 09:32:36 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

@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "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": {
@@ -533,7 +657,7 @@
     "dropdown": {
       "default": {
         "description": {
-          "value": "Dropdowns expose additional content that “drops down” in a panel.

Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.\n\nDropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker). The API gives you complete control over showing, hiding, and positioning the panel.",
+          "value": "Dropdowns expose additional content that “drops down” in a panel.

Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.\n\nDropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker). The API gives you complete control over showing, hiding, and positioning the panel.",
           "type": "text"
         },
         "title": {
@@ -626,6 +750,28 @@
         "type": "text"
       }
     },
+    "prio-nav": {
+      "default": {
+        "description": {
+          "value": "Priority navigation is supported as product navigation if required. This navigation layout provides a high level of findability and support so that users know where they are at all times and can ensure that they can easily reach their goals.\n\nNote: Please note that the priority navigation does not have a child menu navigation, if you want to have a child navigation, combine the priority navigation and the side navigation",
+          "type": "text"
+        },
+        "title": {
+          "value": "Priority Navigation",
+          "type": "text"
+        }
+      },
+      "priority-menu": {
+        "description": {
+          "value": "If there is not enough space, elements will move into a dropdown.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Priority Menu",
+          "type": "text"
+        }
+      }
+    },
     "icon-button": {
       "default": {
         "description": {
@@ -965,7 +1111,7 @@
           "type": "text"
         },
         "info": {
-          "value": "Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.\n(Figma: syn-side-nav or syn-horizontal-nav)",
+          "value": "Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.\n(Figma: syn-side-nav or syn-prio-nav)",
           "type": "text"
         },
         "warning": {
@@ -1061,23 +1207,117 @@
       }
     },
     "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": {
-      "description": {
-        "value": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Progress Ring",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Progress Ring",
-        "type": "text"
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --size custom property to set the diameter of the progress ring.",
+          "type": "text"
+        }
+      },
+      "track-indicator-width": {
+        "title": {
+          "value": "Track and Indicator Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --track-width and --indicator-width custom properties to set the width of the progress ring’s track and indicator.",
+          "type": "text"
+        }
+      },
+      "color": {
+        "titel": {
+          "value": "Colors",
+          "type": "text"
+        },
+        "description": {
+          "value": "To change the color, use the --track-color and --indicator-color custom properties.",
+          "type": "text"
+        }
+      },
+      "labels": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to label the progress ring and tell assistive devices how to announce it.",
+          "type": "text"
+        }
+      },
+      "show-values": {
+        "title": {
+          "value": "Showing Values",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the default slot to show a label inside the progress ring.",
+          "type": "text"
+        }
       }
     },
     "qr-code": {
@@ -1375,13 +1615,45 @@
       }
     },
     "spinner": {
-      "description": {
-        "value": "Spinners are used to show the progress of an indeterminate operation.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Spinners are used to show the progress of an indeterminate operation.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Spinner",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Spinner",
-        "type": "text"
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.",
+          "type": "text"
+        }
+      },
+      "track-width": {
+        "title": {
+          "value": "Track Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "The width of the spinner’s track can be changed by setting the --track-width custom property.",
+          "type": "text"
+        }
+      },
+      "color": {
+        "title": {
+          "value": "Color",
+          "type": "text"
+        },
+        "description": {
+          "value": "The spinner’s colors can be changed by setting the --indicator-color and --track-color custom properties.",
+          "type": "text"
+        }
       }
     },
     "split-panel": {
@@ -1875,7 +2147,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the label attribute to change the content of a navigtion item.",
+          "value": "Use the label attribute to change the content of a navigation item.",
           "type": "text"
         }
       },
@@ -1885,7 +2157,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
+          "value": "The current attribute provides the user feedback about which of the navigation elements is currently selected.",
           "type": "text"
         }
       },
@@ -1895,7 +2167,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the prefix and suffix slots to add. If available the prefix slot will be shown in the rail navigation.",
+          "value": "The focus event gives the user feedback that the Navigation Item has been focused by the keyboard interaction or active click from the user.",
           "type": "text"
         }
       },
@@ -1925,7 +2197,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the *children attribute to indicate that show a chevron. In development this will be handled automatically as soon as an element has children.:",
+          "value": "Use the *children attribute to indicate that a chevron should be shown. In development this will be handled automatically as soon as an element has children.\n\nNote:\nSince there should be no double use of functionality, a link cannot be mixed with an accordion behavior. The accordion always has priority, which means that if the href attribute is used at the same time as children, the link functionality is ignored and only the accordion behavior is provided.",
           "type": "text"
         }
       },
@@ -2020,6 +2292,16 @@
           "value": "Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.",
           "type": "text"
         }
+      },
+      "burger-menu": {
+        "title": {
+          "value": "Burger Menu",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the Burger Menu as trigger to open and close the Navigation. In the open state, the icon changes to a cancel icon. This will be hidden, if you use a rail navigation.",
+          "type": "text"
+        }
       }
     },
     "side-nav": {
@@ -2039,7 +2321,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the rail attribute to only show the prefix of navigation items. This will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation. ",
+          "value": "Use the rail attribute to only show the prefix of navigation items. This will open on hover on the rail navigation, therefore the header doesn't have an burger-menu-icon.\nOn touch devices the navigation opens on click and shows an overlay to be closable.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation.",
           "type": "text"
         }
       },

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%"
+    }
   }
 }