Dynamic Tokens

[aaronreed708]

Theme Builder generates dynamic tokens that update user interfaces based on the following input:

• WCAG Level - AA or AAA
• Theme - Organization can add as many themes at they want to Theme Builder
• Mode - Light or Dark
• Platform - Default, Android, IOS
• Device - These settings update design spec so designers can preview designs in different window sizes/dimensions. We provide the most popular 5 dimensions for dektop, tablet and mobile.
• Congnative - None, Dyslexic and ADHD
• Color Blind Mode - None, Red-Weak, Blue-Weak, Green-Weak, Red-Blind, Blue-Blind, Green-Blind, Monochromacy and Blue Cone
• Elevations - Levels 1-5 that align with Material 3 elevations
• Background
• Motion Sensativity

The following input values are set by the developer in the code:

• WCAG Level
• Theme
• Elevation
• Background

The following input is determined by the user's device

• Platform
• Mode

The end user could adjust the following input values in settings:

• Cognative Mode
• Color Blind Mode
• Motion Sensativity

Moving forward, we may allow users to adjust the following input to meet their specific needs/likes:

• Target Sizes
• Spacing (increasing white space without resizing components)
• Contrast (WCAG AA or AAA)

Note: In design files, the designer can control all inputs to affect the interface rendered

Tokens are dynamcially based on the above user input. Below we'll document how this maps to the logic flow that influences tokens and how they relate to styling.

This list provides finer detail regarding dynamic token logic flow. Changes anywhere in the logic flow affect the value of the final token.

• Button/Focus State Coloring: WCAG Level > Theme > Mode > Background
• Icons Coloring: WCAG Level > Theme > Mode > Background
• Text Coloring: WCAG Level > Theme > Mode > Elevation > Background
• Border Coloring: WCAG Level > Theme > Mode > Elevation > Background
• Background Coloring: WCAG Level > Theme > Mode > Elevation > Background
• Hotlink Coloring: WCAG Level > Theme > Mode > Background
• Hotlink Underlining: WCAG Level > Theme > Mode > Background
• Font Family: (Theme Potentially) > Platform > Cognative Mode
• Chartacter Spacing: WCAG Level > Platform > Cognative Mode
• Line Height: WCAG Level > Platform > Cognative Mode
• Minimum Target Area: WCAG Level > Cognative Mode > Platform
• Spacing: WCAG Level > Cognative Mode
• Effects/Shadows: (Theme Potentially) > Mode > Elevation
• Image Overlay: Mode

In the Theme Builder interface, when a user assigns a value or a value is pre-assigned, the UI indicates to the user if this value is linked to a standard token or a dynamic token.

The user can click on a dynamic token to see the logic flow and to see it's relationship to other components or styles, essentially indicating where else the token is used in the design system.

The user can click on a standard token to see it's relationship to other components or styles, essentially indicating where else the token is used in the design system.

In the Theme Builder CSS, the various values for each input type are grouped together in data-sets. For example:

[data-wcag="AA"] {
  --min-target: 24px;
}
[data-wcag="AAA"] {
  --min-target: 44px;
}
[data-cognative="none"] {
}
[data-cognative="dyslexic"] {
  --min-target: 44px;
}
[data-cognative="ADHD"] {
  --min-target: 44px;
}
[data-platform="default"] {
}
[data-platform="android"] {
  --min-target: 48px;
}
[data-wcag="ios"] {
  --min-target: 44px;
}

Now, should your CSS use the CSS variable var(--min-taget), it's value will be determined by the values input by the user. For example, if the data-wcag level is AA, the value of --min-target will be 24px. If the data-cognative mode of dyslexia is then applied, the value changes to 44px. Finally, if the data-platform is set to android, the value becomes 48px.

We may allow the user to add new dynamic components and identify the various inputs that affects its styling.

This could be important in dynamically rendering components differently in IOS vs Andriod. For example, the Switch UI component is slightly different in IOS vs Android.