@synergy-design-system/tokens 1.7.1 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@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)
+
+
+### Features
+
+* ✨ Create syn-header ([#331](https://github.com/synergy-design-system/synergy-design-system/issues/331)) ([acde61d](https://github.com/synergy-design-system/synergy-design-system/commit/acde61d762dd4123aae553227f3af2015e824208))
+
 # [@synergy-design-system/tokens-v1.7.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.7.0...tokens/1.7.1) (2024-02-27)
 
 

package/dist/js/index.d.ts

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

package/dist/js/index.js

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

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.7.0
+ * @synergy-design-system/tokens version 1.8.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.0
+ * @synergy-design-system/tokens version 1.8.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 14:13:18 GMT
+ * Generated on Mon, 18 Mar 2024 10:36:36 GMT
  */
 
 :root, .syn-theme-dark {

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.7.0
+ * @synergy-design-system/tokens version 1.8.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 14:13:18 GMT
+ * Generated on Mon, 18 Mar 2024 10:36:36 GMT
  */
 
 :root, .syn-theme-light {

package/package.json

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

package/src/figma-tokens/_docs.json

@@ -473,7 +473,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 +489,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 +839,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 +999,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": {
@@ -1647,7 +1801,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"
         }
       },
@@ -1701,262 +1855,406 @@
           "type": "text"
         }
       }
+    },
+    "header": {
+      "default": {
+        "title": {
+          "value": "Header",
+          "type": "text"
+        },
+        "description": {
+          "value": "The header is used to indicate the name of the app, provide important actions in a toolbar and a navigation.",
+          "type": "text"
+        }
+      },
+      "label": {
+        "title": {
+          "value": "Label",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to change the app name.",
+          "type": "text"
+        }
+      },
+      "logo": {
+        "title": {
+          "value": "Logo",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the logo slot to change the app logo. Usually this is only needed in whitelabel solutions, when the SICK branding explicitly has to be hidden.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that a link in the logo has been focused by the keyboard interaction and that the link is ready to be navigated to.",
+          "type": "text"
+        }
+      },
+      "options": {
+        "title": {
+          "value": "Meta Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the Meta Navigation slot to add additional functionalities to your application. Please be aware of the guidelines regarding the order of icons in the toolbar.\nImportant: The Options Menu doesn’t handle any responsive behaviour, e. g. if there is not enough space for all items in different screen sizes. You have to make sure yourself, that your app works correctly and e. g. move elements into the footer of the side navigation or inside a “more” button in the Options Menu.",
+          "type": "text"
+        }
+      },
+      "navigation": {
+        "title": {
+          "value": "Top Navigation",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.",
+          "type": "text"
+        }
+      }
     }
   },
-  "frameworks": {
-    "angular": {
+  "assets": {
+    "sick-logo": {
       "description": {
-        "value": "Tips for using Essential in your Angular app.",
+        "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": "Angular",
+        "value": "SICK Logo",
         "type": "text"
       }
     },
-    "react": {
+    "material-icons": {
       "description": {
-        "value": "Tips for using Essential in your React 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": "React",
+        "value": "Material Icons",
         "type": "text"
       }
     },
-    "vue-2": {
+    "system-icons": {
       "description": {
-        "value": "Tips for using Essential in your Vue 2 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 (version 2)",
+        "value": "System Icons",
+        "type": "text"
+      }
+    }
+  },
+  "tokens": {
+    "border-radius": {
+      "description": {
+        "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": "Border radius",
         "type": "text"
       }
     },
-    "vue": {
+    "border-width": {
       "description": {
-        "value": "Tips for using Essential in your Vue 3 app.",
+        "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": "Vue",
+        "value": "Border width",
         "type": "text"
       }
-    }
-  },
-  "getting-started": {
-    "customizing": {
+    },
+    "color": {
       "description": {
-        "value": "Learn how to customize Essential through parts and custom properties.",
+        "value": "Color tokens help maintain consistent use of color throughout our products.",
         "type": "text"
       },
       "title": {
-        "value": "Customizing",
+        "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"
+          }
+        }
       }
     },
-    "form-controls": {
+    "shadow": {
       "description": {
-        "value": "Some things to note about Essential and forms.",
+        "value": "Shadow and elevation tokens are used to give elements the appearance of being raised off the page.",
         "type": "text"
       },
       "title": {
-        "value": "Form Controls",
+        "value": "Shadow and elevation",
         "type": "text"
       }
     },
-    "installation": {
+    "spacing": {
       "description": {
-        "value": "Choose the installation method that works best for you.",
+        "value": "Spacing tokens are used to provide consistent spacing between content in your app.",
         "type": "text"
       },
       "title": {
-        "value": "Installation",
+        "value": "Spacing",
         "type": "text"
       }
     },
-    "localization": {
+    "transition": {
       "description": {
-        "value": "Discover how to localize Essential with minimal effort.",
+        "value": "Transition tokens are used to provide consistent transitions throughout our applications.",
         "type": "text"
       },
       "title": {
-        "value": "Localization",
+        "value": "Transition Tokens",
         "type": "text"
       }
     },
-    "themes": {
+    "typography": {
       "description": {
-        "value": "Everything you need to know about theming Essential.",
+        "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": "Themes",
+        "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"
+        }
       }
     },
-    "usage": {
+    "z-index": {
       "description": {
-        "value": "Learn more about using custom elements.",
+        "value": "Z-indexes are used to stack components in a logical manner.",
         "type": "text"
       },
       "title": {
-        "value": "Usage",
+        "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"
       }
     }

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

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

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

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