finos / a11y-theme-builder

DesignOps toolchain theme builder for accessibility inclusion using Atomic Design.

Accessibility Theme Builder

A system for generating machine readable asset types allowing design systems to publish products that are accessibly inclusive.

Concept

Accessibility compliance is difficult. All too often accessibility is addressed late in the development and testing cycle. What if systems were designed upfront with accessible inclusion as a design principle? What if the workflow between designers and developers produced accessible components before the assembling of applications?

Adhering to an Atomic Accessibility Design Methodology, the Accessibility Theme Builder enables designers to systematically achieve consistent standards compliance. The system collects atomic design system variables, allowing a Designer to incrementally create asset types (JSON, CSS files) that can be used to:

1. publish physical and digital solutions
2. generate reusable design components that are leveraged to build physical and digital solutions

Getting Started

Theme Builder Capabilities

Visit the project docs to view an introductory video and to learn about Theme Builder's features.

Using the Application

Try it for yourself, take Theme Builder for a spin!

Interested in exploring Theme Builder further? Learn how to install and use the Accessibility Theme Builder Application in your own environment.

Using the SDK

Learn how to work with the Accessibility Theme Builder SDK.

Join our community!

We encourage designers, developers, technical writers and testers to read about our project, to learn about our goals, and to play in our sandbox. And we hope that you will spend some time in our community.

Contributing

Get involved! Our project welcomes passionate contributors.

Learn more, give feedback

We are happy to listen to ideas, to learn where we can improve and would love to help you become involved in our project. If you would like to help us to refine Theme Builder by reporting issues or suggesting enhancements, please begin the dialog by capturing your thoughts and observations in a GitHub Issue.

If you would like to discuss our ambitions and vision, or to reach out to learn more about Theme Builder, please reach out to us through GitHub Discussions.

We encourage the community to join us in our weekly meetings to understand where our current focus lies, what events we will be participating in, and what opportunities are on the horizon. And, of course, please join us on Slack if we can be of any additional help.

License

Copyright 2023 Discover Financial Services

Distributed under the Apache-2.0 License.

a11y-theme-builder's Issues

Black and Near Black backgrounds in light mode look gray

the nearblack and black colors in the light mode drop down look gray

• link to problem content

Proposed Solution

Elevation backgrounds are not being passed into the css

--elevation-bg-0
--elevation-bg-1
--elevation-bg-2
--elevation-bg-3
--elevation-bg-4
--elevation-bg-5
--elevation-bg-6
--elevation-bg-7
--elevation-bg-8
--elevation-bg-9

• link to problem content

Proposed Solution

The colors should be the selected dark mode back ground with white overlayed on top in increasing brightness.

[TB] Restyle switch and slider thumbs

Problem/Concern

Switch and slider thumbs need to be restyled

Proposed Solution

[TB] Add hotlinks component

Problem/Concern

The hotlinks component needs to be created and added to Components page.

Proposed Solution

[SDK] Missing CSS variables

Problem/Concern

Compare generated CSS variables with required list and create any missing variables.

Proposed Solution

[TB] Hotlinks atom radio buttons disabled

Problem/Concern

In the Hotlinks atom the radio buttons are not editable & below them an error icon is displayed but no message.

Proposed Solution

[DOCS] Create videos

Problem/Concern

The ThemeBuilder's vision and usage need to be conveyed to the users of the tool.

Proposed Solution

Create one or more videos:

1. ThemeBuilder application intro and how it can be run (Lise)
2. How designers can use ThemeBuilder (Evan)
3. How developers can use ThemeBuilder (Evan)

[TB] Review Contribution Guide for both project repos

Problem/Concern

Review content of CONTRIBUTE.md
Review inline comments for missing data.

• link to problem content

Proposed Solution

Update any/all missing data / comtent.

[TB] Implement Divider component

Problem/Concern

Implement the divider component with a color mode selector.

Proposed Solution

[TB] Component popups are not rendered correctly in dark mode

Problem/Concern

Under the components page, the dark mode switch sets the right editor container to darkmode. This works correctly for all components except for those with popups. For these popups, the component is added to a div on body, instead of the container that the popup was defined.

Proposed Solution

[TB] Implement dark mode

Problem/Concern

Dark mode is not fully implemented for all molecules/components.

Proposed Solution

Add css rules for .darkmode on existing classes as needed to implement the molecules and components.

[TB] Update Color Selector

The color selector default should use --background and normal color css, the white option should use black background with white color, and the white should use white background with black color.

Proposed Solution

[DOCS] Complete docs for MVP

Problem/Concern

Add content to docs needed for hackathon and MVP.

Proposed Solution

[DOCS] How to configure disability overlays

Problem/Concern

The overlays are deferred for MVP, but need intro text.

Proposed Solution

[DOCS] Update all images to be transparent

Problem/Concern

We use Material for MkDocs which supports light and dark mode toggling.

Currently images used across docs (specifically in Overview (/motivation) use a white background and there do not work well in Dark Mode.

Proposed Solution

Update all images to have transparent background.

[TB] List component wide image missing

Problem/Concern

The wide image for the list components is missing.

Proposed Solution

[TB] Add image to use for avatars

Problem/Concern

Need an image to use for avatars so border color can be seen.

Proposed Solution

[TB] Review JSON variables

Problem/Concern

Review & align JSON variables for Figma.

Proposed Solution

The --primaryDarkBG and --secondaryDarkBG are not rendering as the correct colors

Problem/Concern

The colors for the --primaryDarkBG and --secondaryDarkBGshould be darker versions of the primary-900 color and they just look grey

• link to problem content

Proposed Solution

[TB] Update color mode selector

Problem/Concern

The color mode selector allows the user to select one of 3 variants of a component: default, white, black.

Proposed Solution

These variants are specified by a css class "white" and "black" on the HTML tag instead of on a parent container.
The meaning of "white" is white foreground color on a dark background.
The meaning of "black" is black foreground color on a light background.
The meaning of "default" is the default colors for the theme.

[TB] Add JSON for Buttons.GroupButton.Background and OnBackgound

Problem/Concern

The generated JSON needs the following for both light and dark mode:
Buttons.GroupButton.Background and Buttons.GroupButton.OnBackground.
These should correspond to the following CSS variables:
--groupButtonBG, --on-groupButtonBG, --dm-groupButtonBG, --dm-on-groupButtonBG.

For dark mode, the following should be constant.

   "GroupButton": {
      "Background": {
        "value": "{Core-Colors.White.Color}1f",
        "type": "color"
      }

Proposed Solution

[DOCS] Figma docs

Problem/Concern

Describe how to use Figma with ThemeBuilder

Proposed Solution

Dropdown menu should be left aligned not center aligned

The dropdown menus look odd center aligned.

• [link to p

roblem content]()

They should left align with the button.

[TB] Switch and slider backgrounds missing

Problem/Concern

The switch and slider components are missing background.

Proposed Solution

[TB] Multiple .gitignores

Problem/Concern

Merge .gitignore in root and /code then delete the one in /code.

[TB] Dark mode for tooltips not rendered correctly

Problem/Concern

Under the components page, the dark mode switch sets the right editor container to dark mode. For tooltips, the component is added to a div on body, instead of the container that the popup was defined.

Proposed Solution

Wrong and missing atributes

Things that are wrong:
--backgroundSecondary
--on-backgroundSecondary
—onbuttonOnBlack
—buttonOnTertiary
—onButtonOnTertiary
—gradient-3
—on-gradient-3
--buttonOnGradient1
—onbuttonOnGradient1
--buttonOnGradient2
—onbuttonOnGradient2
--buttonOnGradient3
—onbuttonOnGradient3
--dm-on-background-tertiary

Missing:
--dmhotlinkOnWhite:’’;
--dmhotlinkDecorationOnWhite: '';
--dmhotlinkOnBlack:'';
--dmhotlinkDecorationOnBlack: '';

• link to problem content

Proposed Solution

[TB] Light mode chip & on-chip colors

Problem/Concern

Fix the light mode --chip and --on-chip colors based upon calculations.

Proposed Solution

[SDK] Determine how we centralize docs

Problem/Concern

The base repo has online docs managed via mkdocs. How do we ensure a single code base for docs while allow this repo to have docs directly accessible?

Proposed Solution

• Centralize all docs in base repo
• Redirect this repo to the base online docs in README
• Provide instructions for how to use pandocs to generate HTML docs from the mkdocs source.

[TB] Add Color Mode Selector to primary & secondary tabs & radio & check boxes

Problem/Concern

Add Color Mode Selector to primary & secondary tabs & radio & check boxes components

Proposed Solution

Create Nav Organisms

• Primary Nav
• Secondary Nav
• Footer and Copyright

I only have 1 color and primary color but when I click on a dropdown in the theme area I have 3 rows of colors

Problem/Concern

* [link to problem content]()

Proposed Solution

There should only be one row if I only have a primary color
There should only be two rows if I have a primary and a secondary color and they are different
There should only be three rows if primary, secondly and tertiary are different colors

[SDK] Remove design system name from key in serialized object

Problem/Concern

When a design system is serialized and persisted, there are several values that are set to a key. This key has the design system name included.

"colorThemes": {
    "themes": {
        "default-initial-color-theme-instance": {
            "primary": {
                "key": "Sample9/atoms/ColorPalette/cobalt/lm[0]"

For portability and to allow cloning, the key should not include the design system name.

Proposed Solution

State Colors not rendering

The states all appear white with black text in light mode and all balck with white text in dark mode in the Theme Builder UI

roblem content]()

• [link to p

Proposed Solution

[DOCS] How to generate a theme section

Problem/Concern

Write content for this section.

Proposed Solution

[SDK] Need to add support for dark mode gradient backgrounds JSON generation

Problem/Concern

The current generation of JSON code in src/code/JSONGenerator.ts in the getGradientBackgrounds method does not take dark mode (i.e. !lm) into account, but it should.

Proposed Solution

[TB] Fix color mode selector for dark mode

Problem/Concern

Text color for the radio buttons are not being updated correctly when switching to dark mode.

Proposed Solution

[SDK] Avatar border properties should be multipler

Problem/Concern

The avatar border properties should be a multiplier instead of pixel value.

Proposed Solution

Change mediumBorder and extraLargeBorder type from PropertyPixelSelectable to PropertyNumberSelectable and update the selectable values.

[TB] Dark tertiary shade with text

Problem/Concern

If use dark tertiary shade when building color theme, design system nav bar and buttons have bad “on” colors so text not visible

Proposed Solution

[TB] Darkmode dropdown colors

Problem/Concern

Darkmode dropdown, hover color, border hard to see if theme palette is red

Proposed Solution

[TB] Avatar border not showing

Problem/Concern

The avatar borders are not shown

Proposed Solution

border property for .avatar class needs to be updated. The calc() is multiplying 2 pixel values, which doesn't render the border.

[TB] Accessibility layers dropdown not rendering correctly

Problem/Concern

The layout of the accessibility layers dropdown menu items needs to be fixed.

• The first item is highlighted but shouldn't be
• There shouldn't be a visible circle around the checkbox
• The checkbox is taking up too much space & should be left justified
• The selected item's text disappears

Proposed Solution

Dark Mode Elevation Backgrounds

Dark Mode Elevation Backgrounds

• link to problem content

Proposed Solution

We need to pass a variable for the dark mode elevation background color for each molecule with an elevation:
i.e. so for example card will need a variable like - dm-card-elevation-bg and to update the css with "var(--elevation-bg-1)" and for the JSON will can just pass along a value from 0-9.

[DOCS] Update welcome page

Problem/Concern

Update to include simple description & either embed video or link to it.

Proposed Solution

[TB] Create default theme

Problem/Concern

Verify once default theme is checked in to Theme.css:

• Color themes dropdowns have transparent background. The --surface css variable is not set correctly before adding theme.
• Button background color is not set.
• Focusing input fields in ColorPalette page results in white on white border on the field so can't see the field anymore, just the text

Proposed Solution

[TB] Remove Nav Section under Organisms

Problem/Concern

This is deferred.

Proposed Solution

[TB] Gradient text on color theme needs to be styled

Problem/Concern

The gradient text sample on the color theme editor is small and needs to be styled.

Proposed Solution

[Admin] Getting organized!

Problem/Concern

Need to discuss how the project will be organized including logistics for meetings, triage, milestone definitions and collaborating.

See example missing details here

Proposed Solution

We should consider the use of GitHub Wiki, Projects, and Discussions.

Some well organized projects, like Backstage, include topics such as:

• Community Sessions (Replays)
• Community Sessions Notes/Schedules (See Calendar)
• Office Hours

[TB] Dark mode on background color

Problem/Concern

The dark mode --dm-on-background color needs to be set as rgba(255,255,255,0.6)

Proposed Solution

[TB] Update color palette field as user makes color selections

Problem/Concern

Suggested by @lwnoble. The color picker on the Color Palette page has a small spot where it shoes the currently selected color. Lise would like to make this more noticeable.

Proposed Solution

Lise would like the background of the textfield that shows the hex value of the currently selected color to change to that color and also use the corresponding "on" color when showing the hex value in that field.