Requested SDK Updates to Theme Builder

[aaronreed708]

Theme Builder Color 2.0 Calculation Updates

0.) Push updates thus far for color generation.

1.) Remove "alt-background-color" and add "on-on-color" for each color.

A. "on-on-color" - the on-on-color is the inverse of the on-color. So if the "on-color" is light text then the "on-on-color" is dark text.

The following values need to be added and set in each mode:

surface
elevation-mix.1
elevation-mix.2
elevation-mix.3
elevation-mix.4
elevation-mix.5

These values will depend on which approach the users want to use for depicting depth. The Material 2, approach to elevations, uses dropshadows in light mode and increasing lightness in dark mode or Material 3's approach or tonal adjustments to surfaces in both light and dark mode.

By default we will use the Material 2 approach.

Method #1

light mode for both AA and AAA
surface = #ffffff
elevations.mix.1 = #ffffff
elevations.mix.2 = #ffffff
elevations.mix.3 = #ffffff
elevations.mix.4 = #ffffff
elevations.mix.5 = #ffffff

dark mode both AA and AAA
NOTE: in the following calculation I used #23233f but it should be the same as the dark-text color.
surface = mixColors('#23233f', background-color , .88)
elevations.mix.1 = mixColors('#FFFFFF', surface , .05)
elevations.mix.2 = mixColors('#FFFFFF', surface , .07)
elevations.mix.3 = mixColors('#FFFFFF', surface , .08)
elevations.mix.4 = mixColors('#FFFFFF', surface , .09)
elevations.mix.5 = mixColors('#FFFFFF', surface , .11)

Method 2

light mode for both AA and AAA
surface = = mixColors('#ffffff', color, .11);
elevations.mix.1 = mixColors('#ffffff', color, .05);
elevations.mix.2 = mixColors('#ffffff', color, .08);
elevations.mix.3 = mixColors('#ffffff', color, .11);
elevations.mix.4 = mixColors('#ffffff', color, .12);
elevations.mix.5 = mixColors('#ffffff', color, .14);

dark mode in both AA and AAA
NOTE: in the following calculation I used #23233f but it should be the same as the dark-text color.
surface = mixColors('#23233f', color, .88);
elevations.mix.1 = mixColors('#23233f, color, .05);
elevations.mix.2 = mixColors('#23233f, color, .08);
elevations.mix.3 = mixColors('#23233f, color, .11);
elevations.mix.4 = mixColors('#23233f, color, .12);
elevations.mix.5 = mixColors('#23233f, color, .14);

2.) Add on-color, on-color-quiet and border for elevations 0-5 for all background colors

These values will be added to each mode, for each background color. There is not consistent calculation that can be used across all colors, hence we need to do this for each background color to stay wcag compliant.

A.) on-color
As the background color changes do to elevation we need to make sure the on-color maintains a contrast of 4.5:1 against the background.

The following calculations only need to be done for dark mode (AA and AAA). The on-color for each elevation in light mode will be the same as the background color.

To calculate this for each background color you first need to know the surface color at each elevation, see the calculations above.

Then for dark mode you need to test and adjust the opacity of the text agaist that surface color. To do this I created the following function passes along the surface color for the elevation, the text color for the background, the users selected opacity for dark text and the contrast requirement (4.5 for WCAG AA and 7.1 for AAA). This calculation returns a new hex value for the on-color for the elevation.

function getWCAGText(hex,text_color,textOpacity,contrastRequirement) {
    var contrastAmount = 0
    while (contrastAmount < contrastRequirement) {
      textOpacity = textOpacity + .01
      var newHex = mixColors(text_color, hex,percentOpacity);
      var newHexArray = hextoRGBArray(newHex);
      var hexArray    = hextoRGBArray(hex)
      var contrastAmount = contrast(newHexArray, hexArray);

    }
    return(newHex)
  }

B.) on-color-quite
As the background color changes do to elevation we need to make sure the on-color-quite, used for de-emphasized text, maintains a contrast of 4.5:1 against the background.

These calculations need to be run for both light and dark mode, both WCAG AA and AAA, if the user selects the Material 3 method for representing depth, and only on for dark mode, both WCAG AA and AAA, if they choose the Material 2 method.

Quiet, or deemphisized text, needs to maintain a contrast of 4.5:1 against the elevation background color for WCAG AA and 7.1:1 agains the background for WCAG AAA.

C.) border
As the background color changes do to elevation we need to make sure the border, maintains a contrast of 3.1:1 against the background.

These calculations need to be run for both light and dark mode, both WCAG AA and AAA, if the user selects the Material 3 method for representing depth, and only on for dark mode, both WCAG AA and AAA, if they choose the Material 2 method.

The border color needs to maintain a contrast of 3.1:1 against the elevation background color.

To get the proper border color for each elevation we pass along the surface color, the on-color for the background and contrast requirement of 3.1 (it is the same for both WCAG AA and AAA). The function returns a hex value for the elevation border color.

function getWCAGColor(hex,text_color,contrastRequirement) {
    var percentOpacity = .0;
    var contrastAmount = 0
    while (contrastAmount < contrastRequirement) {
      percentOpacity = percentOpacity + .01
      var newHex = mixColors(text_color, hex,percentOpacity);
      var newHexArray = hextoRGBArray(newHex);
      var hexArray    = hextoRGBArray(hex)
      var contrastAmount = contrast(newHexArray, hexArray);

    }
    return(newHex)
  }

3.) Calculate the icon and colored text colors for light, dark shades, the default background and the surface colors for each mode (AA and AAA).

By defaul the following colored icons will be created in a design system:

Icons:

• default (same as the on-color)
• primary
• secondary (if provided)
• tertiary (if provided)
• success
• warning
• error
• info
• brand
• on-brand (a brand color that has a 3.1:1 contrast the corresponging "on-color")

Users can add additional icon colors to the design system. We need to make certain each icon color meets the 3.1:1 contrst against all background color and surfaces.

To do this we will test the icon color against each background color at the 5 elevation/surface level for both light and dark modes.

icons-on-light-shades
To identify the shade of each colored icon that meets the 3.1 against all 100 shades of our background colors, we start with the 500 shade of the selected icon color in light mode and keep increasing the shade (600-900) until we identify a color and shade that meets the 3.1:1 against the 100 shade of all background colors.

icons-on-dark-shades
To identify the shade of each colored icon that meets the 3.1 against all 100 shades of our background colors, we start with the 300 shade of the selected icon color in light mode and keep decreasing the shade (200-050) until we identify a color and shade that meets the 3.1:1 against the 800 shade of all background colors.

icons-on-default
The user could have only selected a color and shade the has the required 3.1:1 contrast against the default background in light mode. But we need to find the icon color shade that meets the wcag requirement in dark mode. To do this, we start 400 shade of the selected icon color and keep decreasing the shade (300-050) until we identify a color and shade that meets the 3.1:1 against the default dark mode background.

icons-on-surface
For light mode:

To identify the shade of each colored icon that meets the 3.1 against the elevation 5 surface color for all backgrounds, we start with the 500 shade of the selected icon color in light mode and keep increasing the shade (600-900) until we identify a color and shade that meets the 3.1:1 against all elevation 5 surface color for all backgrounds.

For dark mode:

To identify the shade of each colored icon that meets the 3.1 against the elevation 5 surface color for all backgrounds, we start with the 500 shade of the selected icon color in light mode and keep decreasing the shade (300-050) until we identify a color and shade that meets the 3.1:1 against all elevation 5 surface color for all backgrounds.

Colored Text:

• default (same as the on-color)
• primary
• secondary (if provided)
• tertiary (if provided)
• success
• warning
• error
• info

Users can add additional colored text to the design system. We need to make certain each icon color meets the 3.1:1 contrst against all background color and surfaces.

To do this we will test the icon color against each background color at the 5 elevation/surface level for both light and dark modes.

colored-text-on-light-shades
To identify the shade of each colored icon that meets the required contrast (4.5 for WCAG AA and 7.1 for WCAG AAA) against all 100 shades of our background colors, we start with the 500 shade of the selected icon color in light mode and keep increasing the shade (600-900) until we identify a color and shade that meets the 3.1:1 against the 100 shade of all background colors.

colored-text-on-dark-shades
To identify the shade of each colored icon that meets the required contrast (4.5 for WCAG AA and 7.1 for WCAG AAA) against all 100 shades of our background colors, we start with the 300 shade of the selected icon color in light mode and keep decreasing the shade (200-050) until we identify a color and shade that meets the 3.1:1 against the 800 shade of all background colors.

colored-text-on-default
The user could have only selected a color and shade the has the required contrast (4.5 for WCAG AA and 7.1 for WCAG AAA) against the default background in light mode. But we need to find the icon color shade that meets the wcag requirement in dark mode. To do this, we start 400 shade of the selected icon color and keep decreasing the shade (300-050) until we identify a color and shade that meets the required contrast (4.5 for WCAG AA and 7.1 for WCAG AAA) against the default dark mode background.

colored-text-on-surface
For light mode:

To identify the shade of each colored icon that meets the 3.1 against the elevation 5 surface color for all backgrounds, we start with the 500 shade of the selected icon color in light mode and keep increasing the shade (600-900) until we identify a color and shade that meets the required contrast (4.5 for WCAG AA and 7.1 for WCAG AAA) against all elevation 5 surface color for all backgrounds.

For dark mode:

To identify the shade of each colored icon that meets the 3.1 against the elevation 5 surface color for all backgrounds, we start with the 500 shade of the selected icon color in light mode and keep decreasing the shade (300-050) until we identify a color and shade that meets the required contrast (4.5 for WCAG AA and 7.1 for WCAG AAA) against all elevation 5 surface color for all backgrounds.

4.) Change to one exported JSON file

core
mode.aa-light
mode.aa-dark
mode.aaa-light
mode.aaa-dark
theme.default
(theme…) any additional themes
platform.default
platform.ios-mobile
platform.ios-tablet
platform.andriod
spacing.standard
spacing.extended
cognative.none
cognative.dyslexic
cognative.adhd
motion-sensative.off
motion-sensative.on
backgrounds.default (black or white)
backgrounds.primary
backgrounds.secondary
backgrounds.tertiary
backgrounds.black (inverse of default)
backgrounds.success
backgrounds.warning
backgrounds.error
backgrounds.info
backgrounds…(any additional backgrounds added by the user)
gradients.primary
gradients.secondary
gradients.tertiary
gradients.neutral
gradients…(any additional backgrounds added by the user)
charting.default
charting.red-weak
charting.green-weak
charting.blue-weak
charting.red-blind
charting.green-blind
charting.blue-blind
charting.blue-cone
charting.monochromatic
device.mobile-328x982
device.mobile-360x800
device.mobile-390x844
device.mobile-393x873
device.mobile-414x896
device.tablet-768x1024
device.tablet-800x1180
device.tablet-810x1080
device.tablet-962x601
device.tablet-1280x800
device.desktop-1366x768
device.desktop-1440x900
device.desktop-1536x864
device.desktop-1600x900
device.desktop-1920x1080
elevation.0
elevation.1
elevation.2
elevation.3
elevation.4
elevations.5
typography
shadows

NOTE: The italisized json listed above is fixed, only the bolded json is unique and updated based on the users input.

Here are example of the required code that theme builder generates.

Core: https://hedgedoc-hedgedoc.apps.aws-useast1-apps-dev-1.ocpdev.us-east-1.ac.discoverfinancial.com/RItOM_BrSFi_GF899saZ6A?both

For each mode generated: (aa-light, aa-dark, aaa-light and aaa-dark)
Mode: https://hedgedoc-hedgedoc.apps.aws-useast1-apps-dev-1.ocpdev.us-east-1.ac.discoverfinancial.com/FR4lp0ORT7WFhEszHLYcMA?both

For each theme generated
Themes
https://hedgedoc-hedgedoc.apps.aws-useast1-apps-dev-1.ocpdev.us-east-1.ac.discoverfinancial.com/GOb8pRfnSrGk27zhoF3LwQ

For each background color:
Backgrounds: https://hedgedoc-hedgedoc.apps.aws-useast1-apps-dev-1.ocpdev.us-east-1.ac.discoverfinancial.com/1-r1KS9cTvqtbzwuWXOE2g

Note:  
For the default background the the icon, on-icon and text color will be linked to 
**icons-on-default**
**on-icons-on-default**
**colored-text-default**

For all backgrounds that are shades 050 or 100 the icon, on-icon and text color will be linked to:
**icons-on-light-shades**
**on-icons-on-light-shades**
**colored-text-on-light-shades**

For all backgrounds that are shades 800 or 900 the icon, on-icon and text color will be linked to:
**icons-on-dark-shades**
**on-icons-on-dark-shades**
**colored-text-on-dark-shades**

All other backgrounds will use "on-color" for all icons and colored text values and "on-on-color" for all "on-icon" values

Here is the rest of the JSON code, which is fixed.
(coming soon)

[fatima794]

The Theme Builder Color 2.0 Calculation Updates refer to enhancements made in tools or software that enable users to customize color themes dynamically based on certain calculations or algorithms. Here’s https://topfollow-apk.com/ a detailed breakdown of what these updates might involve:

Dynamic Color Calculations
Adaptive Color Schemes: Users can set conditions under which color themes change. For instance, if a certain metric exceeds a threshold, the color of a graph or section can automatically adjust to indicate this.
Data-Driven Color Assignments: Colors can be assigned based on data values. For example, a heat map could use a gradient to visually represent varying data intensities.
User-Friendly Interfaces
Intuitive Color Pickers: Enhanced interfaces for selecting colors, perhaps with previews that show how changes affect the overall theme in real-time.
Simplified Access to Color Rules: Users can easily define and adjust rules that dictate how colors are applied based on data states or conditions.
Integration with Design Principles
Accessibility Considerations: Updates may include guidelines to ensure color combinations are accessible to users with visual impairments (e.g., color blindness).
Consistency in Design: Mechanisms to maintain brand consistency while allowing for flexibility based on data-driven insights.
Custom Calculation Functions
Built-In Functions: Users might be able to leverage built-in functions for calculations, like averages or sums, to determine color assignments automatically.
Custom Scripts: For advanced users, the ability to write custom scripts to create complex color logic based on more intricate data relationships.
Performance Optimizations
Faster Rendering Times: Enhancements that ensure that dynamic color calculations do not significantly impact the performance of the application or website.
Batch Processing: Allowing multiple elements to be updated simultaneously, reducing the load time.
Theming Across Platforms
Consistency Across Devices: Ensuring that color themes appear the same across various devices and browsers, taking into account differences in rendering.
Responsive Design Integration: Adjusting colors based on screen size or orientation for a better user experience.
Real-time Feedback
Preview Modes: The ability to see changes in real-time as color rules are adjusted, allowing for immediate feedback and iterative design.
Documentation and Support
Comprehensive Guides: Clear documentation on how to use the new features effectively, including examples and best practices.
Community Support: Forums or platforms where users can share ideas, troubleshoot, and discuss their experiences with color customization.
Conclusion
The Theme Builder Color 2.0 Calculation Updates significantly enhance the flexibility and usability of color theming tools. By incorporating dynamic calculations, user-friendly interfaces, and a focus on performance and accessibility, these updates empower users to create visually engaging and contextually relevant designs that adapt seamlessly to data-driven changes.