@synergy-design-system/tokens 1.8.0 → 1.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.9.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.9.0...tokens/1.9.1) (2024-03-26)
+
+
+### Bug Fixes
+
+* 🤔: Adjust syn-color-neutral-100 ([#391](https://github.com/synergy-design-system/synergy-design-system/issues/391)) ([bec9459](https://github.com/synergy-design-system/synergy-design-system/commit/bec945987fddf571fc8c2da940a9b7b279f0bb82))
+
+# [@synergy-design-system/tokens-v1.9.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.8.0...tokens/1.9.0) (2024-03-18)
+
+
+### Features
+
+* ✨ drop-down ([#367](https://github.com/synergy-design-system/synergy-design-system/issues/367)) ([562daf8](https://github.com/synergy-design-system/synergy-design-system/commit/562daf8b06627b7d44a3f06210b3202c7eee9540))
+
 # [@synergy-design-system/tokens-v1.8.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.7.1...tokens/1.8.0) (2024-02-28)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.7.1
+ * @synergy-design-system/tokens version 1.9.0
  * SICK Global UX Foundation
  */
 

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.7.1
+ * @synergy-design-system/tokens version 1.9.0
  * SICK Global UX Foundation
  */
 

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.7.1
+ * @synergy-design-system/tokens version 1.9.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.7.1
+ * @synergy-design-system/tokens version 1.9.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:40:21 GMT
+ * Generated on Tue, 26 Mar 2024 07:28:20 GMT
  */
 
 :root, .syn-theme-dark {
@@ -215,7 +215,7 @@
   --syn-color-neutral-600: #bac2c6;
   --syn-color-neutral-700: #d5dbdd;
   --syn-color-neutral-800: #e8ebec;
-  --syn-color-neutral-900: #f2f5f5;
+  --syn-color-neutral-900: #F2F3F6;
   --syn-color-neutral-950: #f9fafb;
   --syn-color-neutral-1000: white;
 

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.7.1
+ * @synergy-design-system/tokens version 1.9.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:40:21 GMT
+ * Generated on Tue, 26 Mar 2024 07:28:20 GMT
  */
 
 :root, .syn-theme-light {
@@ -207,7 +207,7 @@
   --syn-color-accent-950: #481700;
   --syn-color-neutral-0: white;
   --syn-color-neutral-50: #f9fafb;
-  --syn-color-neutral-100: #f2f5f5;
+  --syn-color-neutral-100: #F2F3F6;
   --syn-color-neutral-200: #e8ebec;
   --syn-color-neutral-300: #d5dbdd;
   --syn-color-neutral-400: #bac2c6;

package/package.json

@@ -18,8 +18,8 @@
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
     "stylelint": "^16.2.1",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "0.1.0"
+    "@synergy-design-system/eslint-config-syn": "0.1.0",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "exports": {
     ".": {
@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/_docs.json

@@ -41,13 +41,45 @@
       }
     },
     "badge": {
-      "description": {
-        "value": "Badges are used to draw attention and display statuses or counts.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Badges are used to draw attention and display statuses or counts.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Badge",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Badge",
-        "type": "text"
+      "variants": {
+        "title": {
+          "value": "Variants",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the variant attribute to change the badge’s variant.",
+          "type": "text"
+        }
+      },
+      "withButton": {
+        "title": {
+          "value": "With Buttons",
+          "type": "text"
+        },
+        "description": {
+          "value": "One of the most common use cases for badges is attaching them to buttons. \n\nDEV: To make this easier, badges will be automatically positioned at the top-right when they’re a child of a button.",
+          "type": "text"
+        }
+      },
+      "menu": {
+        "title": {
+          "value": "With Menu Items",
+          "type": "text"
+        },
+        "description": {
+          "value": "When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.",
+          "type": "text"
+        }
       }
     },
     "breadcrumb-item": {
@@ -473,7 +505,7 @@
           "type": "text"
         },
         "description": {
-          "value": "By default, drawers 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 drawer open in such cases, you can cancel the sl-request-close event. When canceled, the drawer 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 drawer from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.",
+          "value": "By default, drawers 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 drawer open in such cases, you can cancel the syn-request-close event. When canceled, the drawer 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 drawer from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.",
           "type": "text"
         }
       },
@@ -489,13 +521,69 @@
       }
     },
     "dropdown": {
-      "description": {
-        "value": "Dropdowns expose additional content that \"drops down\" in a panel.",
-        "type": "textDropdowns 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."
+      "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.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Dropdown",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Dropdown",
-        "type": "text"
+      "selected": {
+        "title": {
+          "value": "Getting the Selected Item",
+          "type": "text"
+        },
+        "description": {
+          "value": "When dropdowns are used with menus, you can listen for the syn-select event to determine which menu item was selected. The menu item element will be exposed in event.detail.item. You can set value props to make it easier to identify commands. DEV: Alternatively, you can listen for the click event on individual menu items. Note that, using this approach, disabled menu items will still emit a click event.",
+          "type": "text"
+        }
+      },
+      "placement": {
+        "title": {
+          "value": "Placement",
+          "type": "text"
+        },
+        "description": {
+          "value": "The preferred placement of the dropdown can be set with the placement attribute. Note that the actual position may vary to ensure the panel remains in the viewport.",
+          "type": "text"
+        }
+      },
+      "distance": {
+        "title": {
+          "value": "Distance",
+          "type": "text"
+        },
+        "description": {
+          "value": "The distance from the panel to the trigger can be customized using the distance attribute. This value is specified in pixels.",
+          "type": "text"
+        }
+      },
+      "skidding": {
+        "title": {
+          "value": "Skidding",
+          "type": "text"
+        },
+        "description": {
+          "value": "The offset of the panel along the trigger can be customized using the skidding attribute. This value is specified in pixels.",
+          "type": "text"
+        }
+      },
+      "submenu": {
+        "title": {
+          "value": "Submenus",
+          "type": "text"
+        },
+        "description": {
+          "value": "To create a submenu, nest an <syn-menu slot=\"submenu\"> element in a menu item.",
+          "type": "text"
+        },
+        "warning": {
+          "value": "As a UX best practice, avoid using more than one level of submenus when possible.",
+          "type": "text"
+        }
       }
     },
     "format-bytes": {
@@ -783,33 +871,121 @@
       }
     },
     "menu-item": {
-      "description": {
-        "value": "Menu items provide options for the user to pick from in a menu.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Menu items provide options for the user to pick from in a menu.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Menu Item",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Menu Item",
-        "type": "text"
+      "prefixsuffix": {
+        "title": {
+          "value": "Prefix and Suffix",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add content to the start and end of menu items using the prefix and suffix slots.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable an option and prevent it from being selected.",
+          "type": "text"
+        }
+      },
+      "loading": {
+        "title": {
+          "value": "Loading",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the loading attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.",
+          "type": "text"
+        }
+      },
+      "checkbox": {
+        "title": {
+          "value": "Checkbox Menu Items",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the type attribute to checkbox to create a menu item that will toggle on and off when selected. You can use the checked attribute to set the initial state.\n\nCheckbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you’d find in the menu of a native app.",
+          "type": "text"
+        }
+      },
+      "selection": {
+        "title": {
+          "value": "Value & Selection",
+          "type": "text"
+        },
+        "description": {
+          "value": "The value attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the syn-select event will be emitted and a reference to the item will be available at event.detail.item. You can use this reference to access the selected item’s value, its checked state, and more.",
+          "type": "text"
+        }
       }
     },
     "menu-label": {
-      "description": {
-        "value": "Menu labels are used to describe a group of menu items.",
-        "type": "text"
-      },
-      "title": {
-        "value": "Menu Label",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Menu labels are used to describe a group of menu items.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Menu Label",
+          "type": "text"
+        }
       }
     },
     "menu": {
-      "description": {
-        "value": "Menus provide a list of options for the user to choose from.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Menus provide a list of options for the user to choose from.\n\nYou can use menu items, menu labels, and dividers to compose a menu. Menus support keyboard interactions, including type-to-select an option.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Menu",
+          "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)",
+          "type": "text"
+        },
+        "warning": {
+          "value": "Deviation between dev and design, For implementation reasons design nests the dropdown inside the menu, development the other way round",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Menu",
-        "type": "text"
+      "dropdown": {
+        "title": {
+          "value": "In Dropdowns",
+          "type": "text"
+        },
+        "description": {
+          "value": "Menus work really well when used inside dropdowns.",
+          "type": "text"
+        }
+      },
+      "submenu": {
+        "title": {
+          "value": "Submenus",
+          "type": "text"
+        },
+        "description": {
+          "value": "To create a submenu, nest an <syn-menu slot=\"submenu\"> in any menu item.",
+          "type": "text"
+        },
+        "warning": {
+          "value": "As a UX best practice, avoid using more than one level of submenus when possible.",
+          "type": "text"
+        }
       }
     },
     "mutation-observer": {
@@ -855,13 +1031,23 @@
       }
     },
     "popup": {
-      "description": {
-        "value": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.",
-        "type": "text"
-      },
-      "title": {
-        "value": "Popup",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Popup is a utility that lets you declaratively anchor “popup” containers to another element.\nThis component’s name is inspired by <popup>. It uses Floating UI under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more.\n\nPopup doesn’t provide any styles — just positioning! The popup’s preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Popup",
+          "type": "text"
+        },
+        "warning": {
+          "value": "Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of <syn-popup> will involve building other components. It should rarely, if ever, occur directly in your HTML.\n\nFor all Figma Designers, please refer for this component in Storybook.",
+          "type": "text"
+        },
+        "info": {
+          "value": "A popup’s anchor should not be styled with display: contents since the coordinates will not be eligible for calculation. However, if the anchor is a <slot> element, popup will use the first assigned element as the anchor. This behavior allows other components to pass anchors through more easily via composition.",
+          "type": "text"
+        }
       }
     },
     "progress-bar": {
@@ -1445,13 +1631,75 @@
       }
     },
     "tooltip": {
-      "description": {
-        "value": "Tooltips display additional information based on a specific action.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Tooltips display additional information based on a specific action.\n\nA tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.\n\nTooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Tooltip",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Tooltip",
-        "type": "text"
+      "placement": {
+        "title": {
+          "value": "Placement",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the placement attribute to set the preferred placement of the tooltip.",
+          "type": "text"
+        }
+      },
+      "onclick": {
+        "title": {
+          "value": "Click Trigger",
+          "type": "text"
+        },
+        "description": {
+          "value": "Set the trigger attribute to click to toggle the tooltip on click instead of hover.",
+          "type": "text"
+        }
+      },
+      "manuel": {
+        "title": {
+          "value": "Manual Trigger",
+          "type": "text"
+        },
+        "description": {
+          "value": "Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.",
+          "type": "text"
+        }
+      },
+      "removingarrows": {
+        "title": {
+          "value": "Removing Arrows",
+          "type": "text"
+        },
+        "description": {
+          "value": "You can control the size of tooltip arrows by overriding the --syn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.",
+          "type": "text"
+        }
+      },
+      "htmltooltip": {
+        "title": {
+          "value": "HTML in Tooltips",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.",
+          "type": "text"
+        }
+      },
+      "maxwith": {
+        "title": {
+          "value": "Setting a Maximum Width",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.",
+          "type": "text"
+        }
       }
     },
     "tree-item": {
@@ -1647,7 +1895,7 @@
           "type": "text"
         },
         "description": {
-          "value": "Use the horizontal attribute to indicate that an element is used in a horizontal navigation.
(The example shows it in combination with the current attribute, to indicate the difference.)",
+          "value": "Use the horizontal attribute to indicate that an element is used in a horizontal navigation.
 (The example shows it in combination with the current attribute, to indicate the difference.)",
           "type": "text"
         }
       },
@@ -1763,262 +2011,406 @@
           "type": "text"
         }
       }
-    }
-  },
-  "frameworks": {
-    "angular": {
-      "description": {
-        "value": "Tips for using Essential in your Angular app.",
-        "type": "text"
-      },
-      "title": {
-        "value": "Angular",
-        "type": "text"
-      }
     },
-    "react": {
-      "description": {
-        "value": "Tips for using Essential in your React app.",
-        "type": "text"
+    "side-nav": {
+      "default": {
+        "title": {
+          "value": "Side Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Side navigation lets the user navigate through the entire content of a product. It supports single or nested navigation levels.",
+          "type": "text"
+        }
+      },
+      "rail": {
+        "title": {
+          "value": "Rail",
+          "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. ",
+          "type": "text"
+        }
+      },
+      "footer": {
+        "title": {
+          "value": "Footer",
+          "type": "text"
+        },
+        "description": {
+          "value": "The Side navigation can have an optional bottom navigation \"slot\" to split up the navigation entries.\n\nPlease avoid having to many navigation entries (at the bottom) as it can massively influence the user experience.",
+          "type": "text"
+        }
+      },
+      "fixed": {
+        "title": {
+          "value": "Fixed Content",
+          "type": "text"
+        },
+        "description": {
+          "value": "Per default, the side navigation shows an overlay. This should always be the case, if the content of the app is not shrinking. This makes especially sense for applications, where you navigate to a place and stay there for a longer time.",
+          "type": "text"
+        }
+      },
+      "shrinking": {
+        "title": {
+          "value": "Shrinking Content",
+          "type": "text"
+        },
+        "description": {
+          "value": "For specific cases it might make sense to have the navigation open while still being able to interact with the app. This especially makes sense for cases where you switch a lot between areas to interact with an app.\n\nYou can decide yourself depending on your app and screen size, when it makes sense to omit the overlay and shrink the content.\n\nThis should never be used in combination with a Rail navigation, as this would lead to too much friction on hover.",
+          "type": "text"
+        }
+      },
+      "indentation": {
+        "title": {
+          "value": "Indentation",
+          "type": "text"
+        },
+        "description": {
+          "value": "The different levels of navigation can be organized using the indention. The current status of a page shows the user directly which page they are browsing.",
+          "type": "text"
+        }
+      }
+    }
+  },
+  "assets": {
+    "sick-logo": {
+      "description": {
+        "value": "The logo represents the company and forms the core of the brand identity. Therefore, the logo has a very special meaning in communication: It is always in a prominent position and retains its absolute independence in all applications. The logo is always used as original graphic. It may not be changed or translated.",
+        "type": "text"
       },
       "title": {
-        "value": "React",
+        "value": "SICK Logo",
         "type": "text"
       }
     },
-    "vue-2": {
+    "material-icons": {
       "description": {
-        "value": "Tips for using Essential in your Vue 2 app.",
+        "value": "Icons are small standard symbols that are primarily used in screen design. Due to their intended use, the icons must be recognizable min size of 16 x 16 pixels.\n\nIf you need to create a new icon, you have to follow the Material Icons Guide. Please also inform the Synergy design system team, so we can include this icon to prevent duplicates.",
         "type": "text"
       },
       "title": {
-        "value": "Vue (version 2)",
+        "value": "Material Icons",
         "type": "text"
       }
     },
-    "vue": {
+    "system-icons": {
       "description": {
-        "value": "Tips for using Essential in your Vue 3 app.",
+        "value": "The system-icons contain only a small subset of icons that are used internally by Synergy components.\nEach icon wraps the original icon in an own component.\nThe names are aligned with dev and could deviate from Material Icons.",
         "type": "text"
       },
       "title": {
-        "value": "Vue",
+        "value": "System Icons",
         "type": "text"
       }
     }
   },
-  "getting-started": {
-    "customizing": {
+  "tokens": {
+    "border-radius": {
       "description": {
-        "value": "Learn how to customize Essential through parts and custom properties.",
+        "value": "Border radius tokens are used to give sharp edges a more subtle, rounded effect. In general, rounding in SICK user interfaces should be avoided and only used in carefully considered cases. The following points provide some guidance for when and how rounding may be appropriate.\n\nPurpose and usage:\n\nThe use of rounding in UI design should primarily serve a functional purpose, enhancing user experience and visual hierarchy.\nRounding should be applied judiciously, considering both aesthetic appeal and usability.\nRounding should only be applied to selected components where it enhances clarity, visual distinction, or interaction affordance.\nAvoid excessive rounding, which can compromise clarity and readability.\nRounding Tokens:\n\n4px: Suitable for compact elements typically nested within another element (e.g. tags within select component).\n8px: Ideal for container elements like cards, aiding in visually distinguishing multiple containers from one another.\nFull roundings: Reserved for status elements like badges, offering a distinct visual cue to draw attention.\n\nFor any questions or uncertainties, feel free to reach out to the team for clarification and support.",
         "type": "text"
       },
       "title": {
-        "value": "Customizing",
+        "value": "Border radius",
         "type": "text"
       }
     },
-    "form-controls": {
+    "border-width": {
       "description": {
-        "value": "Some things to note about Essential and forms.",
+        "value": "The border is primarily used to outline the frame of a component or to structure content. The border color varies depending on the component and context, but the width stays constant.",
         "type": "text"
       },
       "title": {
-        "value": "Form Controls",
+        "value": "Border width",
         "type": "text"
       }
     },
-    "installation": {
+    "color": {
       "description": {
-        "value": "Choose the installation method that works best for you.",
+        "value": "Color tokens help maintain consistent use of color throughout our products.",
         "type": "text"
       },
       "title": {
-        "value": "Installation",
+        "value": "Color Tokens",
         "type": "text"
+      },
+      "light": {
+        "description": {
+          "value": "Our light theme is the default theme for all applications",
+          "type": "text"
+        },
+        "title": {
+          "value": "Colors / light",
+          "type": "text"
+        }
+      },
+      "dark": {
+        "description": {
+          "value": "Use the dark theme as a low-light UI that displays mostly dark surfaces.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Colors / dark",
+          "type": "text"
+        }
+      },
+      "semantic": {
+        "description": {
+          "value": "Semantic color information for general or specific components.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Semantic colors",
+          "type": "text"
+        },
+        "text": {
+          "description": {
+            "value": "Primary color used for text within the application",
+            "type": "text"
+          },
+          "title": {
+            "value": "Text colors",
+            "type": "text"
+          }
+        }
       }
     },
-    "localization": {
+    "shadow": {
       "description": {
-        "value": "Discover how to localize Essential with minimal effort.",
+        "value": "Shadow and elevation tokens are used to give elements the appearance of being raised off the page.",
         "type": "text"
       },
       "title": {
-        "value": "Localization",
+        "value": "Shadow and elevation",
         "type": "text"
       }
     },
-    "themes": {
+    "spacing": {
       "description": {
-        "value": "Everything you need to know about theming Essential.",
+        "value": "Spacing tokens are used to provide consistent spacing between content in your app.",
         "type": "text"
       },
       "title": {
-        "value": "Themes",
+        "value": "Spacing",
         "type": "text"
       }
     },
-    "usage": {
+    "transition": {
       "description": {
-        "value": "Learn more about using custom elements.",
+        "value": "Transition tokens are used to provide consistent transitions throughout our applications.",
         "type": "text"
       },
       "title": {
-        "value": "Usage",
+        "value": "Transition Tokens",
+        "type": "text"
+      }
+    },
+    "typography": {
+      "description": {
+        "value": "Typography tokens are used to define typographic style of headings, body text, and UI components. They are used to maintain a consistent set of font styles throughout your app.",
+        "type": "text"
+      },
+      "title": {
+        "value": "Typography",
+        "type": "text"
+      },
+      "text-styles": {
+        "description": {
+          "value": "The Synergy text styles are made up of two categories to cover the range of different needs in designs: Headings and Body / UI text.\n\nUnless explicitly mentioned otherwise in a component, Synergy recommends using sentence case capitalization throughout your applications.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Text styles",
+          "type": "text"
+        },
+        "headings": {
+          "description": {
+            "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\nbuilding page hierarchy,\nhelping users scan large chunks of text,\nproviding a title to a page or piece of content,\nas 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"
+          }
+        },
+        "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.\nIt is also possible to format the text bold for certain text passages.",
+            "type": "text"
+          },
+          "title": {
+            "value": "Body and UI text",
+            "type": "text"
+          }
+        }
+      },
+      "font-family": {
+        "description": {
+          "value": "Synergy uses the open source typeface Open Sans for all elements, but system fonts can also be used.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Font family",
+          "type": "text"
+        }
+      }
+    },
+    "z-index": {
+      "description": {
+        "value": "Z-indexes are used to stack components in a logical manner.",
+        "type": "text"
+      },
+      "title": {
+        "value": "Z-Index Tokens",
         "type": "text"
       }
     }
   },
-  "resources": {
-    "accessibility": {
+  "frameworks": {
+    "angular": {
       "description": {
-        "value": "Essential recognizes the need for all users to have undeterred access to the websites and applications that are created with it.",
+        "value": "Tips for using Essential in your Angular app.",
         "type": "text"
       },
       "title": {
-        "value": "Accessibility Commitment",
+        "value": "Angular",
         "type": "text"
       }
     },
-    "changelog": {
+    "react": {
       "description": {
-        "value": "Changes to each version of the project are documented here.",
+        "value": "Tips for using Essential in your React app.",
         "type": "text"
       },
       "title": {
-        "value": "Changelog",
+        "value": "React",
         "type": "text"
       }
     },
-    "community": {
+    "vue-2": {
       "description": {
-        "value": "Essential has a growing community of designers and developers that are building amazing things with web components.",
+        "value": "Tips for using Essential in your Vue 2 app.",
         "type": "text"
       },
       "title": {
-        "value": "Community",
+        "value": "Vue (version 2)",
         "type": "text"
       }
     },
-    "contributing": {
+    "vue": {
       "description": {
-        "value": "Essential is an open source project, meaning everyone can use it and contribute to its development.",
+        "value": "Tips for using Essential in your Vue 3 app.",
         "type": "text"
       },
       "title": {
-        "value": "Contributing",
+        "value": "Vue",
         "type": "text"
       }
     }
   },
-  "tokens": {
-    "border-radius": {
+  "getting-started": {
+    "customizing": {
       "description": {
-        "value": "Border radius tokens are used to give sharp edges a more subtle, rounded effect.",
+        "value": "Learn how to customize Essential through parts and custom properties.",
         "type": "text"
       },
       "title": {
-        "value": "Border Radius",
+        "value": "Customizing",
         "type": "text"
       }
     },
-    "color": {
+    "form-controls": {
       "description": {
-        "value": "Color tokens help maintain consistent use of color throughout your app.",
+        "value": "Some things to note about Essential and forms.",
         "type": "text"
       },
       "title": {
-        "value": "Color Tokens",
+        "value": "Form Controls",
         "type": "text"
       }
     },
-    "elevation": {
+    "installation": {
       "description": {
-        "value": "Elevation tokens are used to give elements the appearance of being raised off the page.",
+        "value": "Choose the installation method that works best for you.",
         "type": "text"
       },
       "title": {
-        "value": "Elevation",
+        "value": "Installation",
         "type": "text"
       }
     },
-    "more": {
+    "localization": {
       "description": {
-        "value": "Additional design tokens can be found here.",
+        "value": "Discover how to localize Essential with minimal effort.",
         "type": "text"
       },
       "title": {
-        "value": "More Design Tokens",
+        "value": "Localization",
         "type": "text"
       }
     },
-    "spacing": {
+    "themes": {
       "description": {
-        "value": "Spacing tokens are used to provide consistent spacing between content in your app.",
+        "value": "Everything you need to know about theming Essential.",
         "type": "text"
       },
       "title": {
-        "value": "Spacing Tokens",
+        "value": "Themes",
         "type": "text"
       }
     },
-    "transition": {
+    "usage": {
       "description": {
-        "value": "Transition tokens are used to provide consistent transitions throughout your app.",
+        "value": "Learn more about using custom elements.",
         "type": "text"
       },
       "title": {
-        "value": "Transition Tokens",
+        "value": "Usage",
+        "type": "text"
+      }
+    }
+  },
+  "resources": {
+    "accessibility": {
+      "description": {
+        "value": "Essential recognizes the need for all users to have undeterred access to the websites and applications that are created with it.",
+        "type": "text"
+      },
+      "title": {
+        "value": "Accessibility Commitment",
         "type": "text"
       }
     },
-    "typography": {
+    "changelog": {
       "description": {
-        "value": "Typography tokens are used to define typographic style of headings, body text, and UI components. They are used to maintain a consistent set of font styles throughout your app.",
+        "value": "Changes to each version of the project are documented here.",
         "type": "text"
       },
       "title": {
-        "value": "Typography",
+        "value": "Changelog",
+        "type": "text"
+      }
+    },
+    "community": {
+      "description": {
+        "value": "Essential has a growing community of designers and developers that are building amazing things with web components.",
         "type": "text"
       },
-      "text-styles": {
-        "description": {
-          "value": "The Synergy text styles are made up of two categories to cover the range of different needs in designs: Headings and Body / UI text.\n\nUnless explicitly mentioned otherwise in a component, Synergy recommends using sentence case capitalization throughout your applications.",
-          "type": "text"
-        },
-        "title": {
-          "value": "Text styles",
-          "type": "text"
-        },
-        "headings": {
-          "description": {
-            "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\nbuilding page hierarchy,\nhelping users scan large chunks of text,\nproviding a title to a page or piece of content,\nas 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"
-          }
-        },
-        "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.\nIt is also possible to format the text bold for certain text passages.",
-            "type": "text"
-          },
-          "title": {
-            "value": "Body and UI text",
-            "type": "text"
-          }
-        }
+      "title": {
+        "value": "Community",
+        "type": "text"
       }
     },
-    "z-index": {
+    "contributing": {
       "description": {
-        "value": "Z-indexes are used to stack components in a logical manner.",
+        "value": "Essential is an open source project, meaning everyone can use it and contribute to its development.",
         "type": "text"
       },
       "title": {
-        "value": "Z-Index Tokens",
+        "value": "Contributing",
         "type": "text"
       }
     }
@@ -2055,4 +2447,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/color/primitives.json

@@ -5,7 +5,7 @@
       "type": "color"
     },
     "100": {
-      "value": "#f2f5f5",
+      "value": "#F2F3F6",
       "type": "color"
     },
     "200": {

package/src/figma-tokens/semantic/input.json

@@ -265,4 +265,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/semantic/overlays.json

@@ -7,4 +7,4 @@
       }
     }
   }
-}
+}