### Install Dependencies and Start Watch Mode Source: https://docs.tokens.studio/open-source/contribute Run these commands to install project dependencies and start the webpack build process in watch mode for development. ```bash npm ci npm run start ``` -------------------------------- ### Install lz-string for Data Decompression Source: https://docs.tokens.studio/open-source/shared-data Install the lz-string library using npm. This is required for decompressing chunked or compressed token data. ```bash npm install lz-string ``` -------------------------------- ### Install Style Dictionary and SD Transforms Source: https://docs.tokens.studio/transform-tokens/style-dictionary Install Style Dictionary and the @tokens-studio/sd-transforms package using NPM. This is the first step before transforming design tokens. ```bash npm install style-dictionary @tokens-studio/sd-transforms ``` -------------------------------- ### Token Name Transformation Example Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs Demonstrates how an original token name might be transformed by engineers, for example, to camelCase. ```plaintext Original: my-awesome-token Transformed: myAwesomeToken ``` -------------------------------- ### Example of a Token value using Math Source: https://docs.tokens.studio/manage-tokens/token-values Token values can include math equations to calculate dynamic values. This example shows how to combine token references to determine a border radius. ```plaintext {button.border-radis} + {focus.offset} ``` -------------------------------- ### Grouped Token Names Example Source: https://docs.tokens.studio/manage-tokens/token-names/groups These are examples of Color Tokens using periods (.) to create groups, replacing the dash (-) used in flat names. ```text colors.green.100 colors.green.200 colors.green.300 ``` -------------------------------- ### Flat Token Names Example Source: https://docs.tokens.studio/manage-tokens/token-names/groups These are examples of Color Tokens without any grouping, also known as flat names. ```text colors-green-100 colors-green-200 colors-green-300 ``` -------------------------------- ### Base URL Example for Enterprise GitHub Source: https://docs.tokens.studio/token-storage/remote/sync-git-github Enter this format for the Base URL if your organization runs an enterprise GitHub server, allowing the plugin to point to the correct API. ```plaintext github.hyma.com ``` -------------------------------- ### Flat Token Name Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-name This example demonstrates a flat design token name, which is a simpler structure compared to grouped names. ```plaintext button-success-hover-label-color ``` -------------------------------- ### Border Width Token Syntax Example Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/border-width Demonstrates the correct syntax for defining Border Width tokens, emphasizing the avoidance of spaces between numbers and units, and using lowercase units. ```plaintext 1px ``` -------------------------------- ### Example of a Color Token Reference Source: https://docs.tokens.studio/manage-tokens/token-values/references This shows how a color token's value can be set to reference another token, like a theme color. The resolved value is displayed below the input. ```plaintext {theme-color.info.default} ``` -------------------------------- ### Dimension Token Examples Source: https://docs.tokens.studio/manage-tokens/token-types/dimension Examples of valid Dimension Token values, including pixels and rem units. Ensure no spaces between the number and unit, and use lowercase units. ```plaintext 16px ``` ```plaintext 1rem ``` -------------------------------- ### Sizing Token Value Example (rem) Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/sizing Define Sizing Tokens in `rem` units for responsive design. The plugin automatically converts the value to pixels when applied in Figma. ```css 1rem ``` -------------------------------- ### Example of Numeric Scale Token Names Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs Illustrates how numeric scales can lead to naming collisions when flattened. Avoid this by using descriptive string names for fractional values. ```json spacing.1 spacing.1-5 spacing.2 ... spacing.15 ``` ```json spacing1 spacing15 spacing2 ... spacing15 ``` ```json spacing1 spacing1half spacing2 ... spacing15 ``` -------------------------------- ### Example of a raw referenced Token value Source: https://docs.tokens.studio/manage-tokens/token-values The raw value is the exact string as written in the token definition. This example shows a raw value that references another token. ```plaintext {green-500} ``` -------------------------------- ### Flattened Token Names Examples Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs Shows how different original token names, including those with periods or dashes for scales, can be flattened to a single name during transformation. ```plaintext Original Name| Flattened Name ---|--- spacing.1.5| spacing15 spacing.1-5| spacing15 spacing.15| spacing15 ``` -------------------------------- ### Example of Token Anatomy Matching Names Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs Demonstrates how token names should not match reserved anatomy properties like 'name', 'type', 'value', or 'description' to prevent conflicts. ```json "$description" denotes the property of token description "$type" denotes the type of token ``` -------------------------------- ### Token Name with Groups Source: https://docs.tokens.studio/fundamentals/design-tokens/anatomy-name This example shows a design token name structured with groups, indicating a hierarchical organization of design decisions. ```plaintext button.success.hover.label.color ``` -------------------------------- ### Example of Token Value Referencing Another Token Source: https://docs.tokens.studio/manage-tokens/token-names/technical-specs Shows how curly brackets are used to reference token values. Avoid using curly brackets within token names themselves as it breaks code processing. ```json "$value": "{green-500}" ``` -------------------------------- ### Build Project Once Source: https://docs.tokens.studio/open-source/contribute Use this command to perform a single build of the project. ```bash npm run build ``` -------------------------------- ### Invalid Dimension Token Examples Source: https://docs.tokens.studio/manage-tokens/token-types/dimension Examples of invalid Dimension Token values to avoid. Spaces between numbers and units, and unitless numbers are not permitted. ```plaintext 16 px ``` ```plaintext 1 rem ``` ```plaintext 16 ``` -------------------------------- ### Example of a hard-coded Color Token value Source: https://docs.tokens.studio/manage-tokens/token-values A hard-coded value is an exact value that does not require interpretation by a tool. This example shows a hex code for a color. ```plaintext #22c55e ``` -------------------------------- ### Supernova Mapping Configuration Example Source: https://docs.tokens.studio/token-storage/remote/sync-cloud-supernova This JSON structure defines how Tokens Studio data is mapped to Supernova. Ensure this configuration is copied precisely from Supernova documentation, including brackets, to correctly sync token sets and brands. ```json [ { "tokenSets": ["global", "light"], "supernovaBrand": "Default" } ] ``` -------------------------------- ### Create RGBA Token with Referenced Color and Number Token Source: https://docs.tokens.studio/manage-tokens/token-types/color Reference a Color Token and a unitless Number Token for opacity. Ensure the Number Token is unitless to avoid potential export issues. ```plaintext rgba({colors.grey.900}, {brand.opacity.border.default}) ``` -------------------------------- ### Example of Nested Reference (Deprecated) Source: https://docs.tokens.studio/manage-tokens/token-values/references This syntax for nested references is deprecated and will be phased out. Avoid using dynamic keys within token references. ```plaintext {colors.{primary}.500} ``` -------------------------------- ### Typography Composite Token JSON Source: https://docs.tokens.studio/manage-tokens/token-types/typography/font-family This example demonstrates a Typography composite token where 'font-family-sans' is referenced as the value for the 'fontFamily' property. The 'type' is 'typography' for composite tokens. ```json { "paragraph-3": { "value": { "fontFamily": "{font-family-sans}", "fontWeight": "{font-weight-default}", "lineHeight": "{line-height-classic}", "fontSize": "{font-size-small}", "letterSpacing": "{letter-spacing-tight}", "paragraphSpacing": "{paragraphSpacing.none}" "paragraphIndent": "{paragraphIndent.none}" "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } } ``` -------------------------------- ### Create a Basic Linear Gradient Source: https://docs.tokens.studio/manage-tokens/token-types/color/gradient Define a linear gradient with two color stops at a 45-degree angle. Use this for diagonal color transitions. ```css linear-gradient(45deg, #87CEEB 0%, #008000 100%) ``` -------------------------------- ### Pixel Unit for Static Elements Source: https://docs.tokens.studio/manage-tokens/token-types/dimension/border-width Illustrates defining Border Width tokens in pixel units for design elements that should maintain a static size regardless of user preferences. ```plaintext 4px ```