finos / a11y-theme-builder Goto Github PK

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

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.

Problem/Concern

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

Proposed Solution

Problem/Concern

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

Problem/Concern

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

Proposed Solution

Problem/Concern

This is deferred.

Proposed Solution

Problem/Concern

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

Proposed Solution

Problem/Concern

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

Proposed Solution

Problem/Concern

Implement the divider component with a color mode selector.

Proposed Solution

Problem/Concern

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

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.

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.

Problem/Concern

Switch and slider thumbs need to be restyled

Proposed Solution

Problem/Concern

The wide image for the list components is missing.

Proposed Solution

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

Problem/Concern

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

Proposed Solution

Problem/Concern

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

Proposed Solution

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.

Problem/Concern

The switch and slider components are missing background.

Proposed Solution

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

• link to problem content

Proposed Solution

Problem/Concern

Review & align JSON variables for Figma.

Proposed Solution

The dropdown menus look odd center aligned.

• [link to p

They should left align with the button.

Problem/Concern

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

Proposed Solution

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

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.

--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.

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

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.

Problem/Concern

Write content for this section.

Proposed Solution

Problem/Concern

Add content to docs needed for hackathon and MVP.

Proposed Solution

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.

Problem/Concern

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

Proposed Solution

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

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

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.

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

Problem/Concern

Describe how to use Figma with ThemeBuilder

Proposed Solution

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)

Problem/Concern

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

Proposed Solution

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.

Problem/Concern

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

Proposed Solution

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

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

• Primary Nav
• Secondary Nav
• Footer and Copyright

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

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

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

Problem/Concern

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

Proposed Solution

Problem/Concern

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

Proposed Solution

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