Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add semantic color tokens to BaseStyles #1880

Merged
merged 12 commits into from
Jan 10, 2023
Merged

Add semantic color tokens to BaseStyles #1880

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d5d9e0a
Add new semantic color tokens to BaseStyles
Dec 13, 2022
3567e3b
Remove unnecessary aliases
Dec 13, 2022
ba6c047
Fix border typo
Dec 13, 2022
1c58018
Fix comments
Jan 4, 2023
2630bf3
Rename color role normal to neutral
Jan 4, 2023
28f2c07
Update special color names
Jan 4, 2023
aa81110
Add disabled colors
Jan 4, 2023
0919378
Remove aliasing logic
Jan 4, 2023
851bcdb
Update snapshots
Jan 5, 2023
d170f11
Document custom properties on theme page
Jan 6, 2023
2fdef71
Add changeset
Jan 6, 2023
a7f0dd2
Add ref to Figma in docs and fix typos
Jan 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 152 additions & 0 deletions packages/circuit-ui/components/BaseStyles/BaseStylesService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,158 @@ export const createBaseStyles = ({
url('${FONTS_BASE_URL}/aktiv-grotest-700.eot') format('embedded-opentype');
}

:root {
/* Neutral backgrounds */
--cui-bg-normal: #ffffff;
--cui-bg-normal-hovered: #f5f5f5;
--cui-bg-normal-pressed: #e6e6e6;
--cui-bg-normal-disabled: rgba(255, 255, 255, 0.4);
--cui-bg-subtle: #f5f5f5;
--cui-bg-subtle-hovered: #e6e6e6;
--cui-bg-subtle-pressed: #cccccc;
--cui-bg-subtle-disabled: rgba(245, 245, 245, 0.4);
--cui-bg-highlight: #e6e6e6;
--cui-bg-highlight-hovered: #cccccc;
--cui-bg-highlight-pressed: #999999;
--cui-bg-highlight-disabled: rgba(230, 230, 230, 0.4);
--cui-bg-strong: #000000;
--cui-bg-strong-hovered: #000000;
--cui-bg-strong-pressed: #000000;
Comment on lines +60 to +62
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How will users perceive/differentiate these different states?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case it looks like there is no differentiation. This could for instance be used in the ODL black buttons. From a standards perspective (WCAG 2.1 AA), nothing states that hovered or pressed states should be visually different from a UI element's idle state.

So we fall back to a design question—I'm happy to raise this with design again in the context of ODL (which introduces a lot of these black and white styles) but in the meantime I'd suggest moving forward here (no blocker and this is a design decision).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm surprised this isn't an accessibility failure. I would at least classify it as a usability issue. Do you know if there's any other indicator planned in the new button design?

I agree that this shouldn't block this PR, but I'd like to question this decision and improve it in the future.

--cui-bg-strong-disabled: rgba(0, 0, 0, 0.4);
/* Accent backgrounds */
--cui-bg-accent: #ebf4ff;
--cui-bg-accent-hovered: #dbe9ff;
--cui-bg-accent-pressed: #c7dbff;
--cui-bg-accent-disabled: rgba(235, 244, 255, 0.4);
--cui-bg-accent-strong: #3064e3;
--cui-bg-accent-strong-hovered: #1c51d3;
--cui-bg-accent-strong-pressed: #10399e;
--cui-bg-accent-strong-disabled: rgba(48, 100, 227, 0.4);
/* Success backgrounds */
--cui-bg-success: #e9fbe9;
--cui-bg-success-hovered: #d7f8d7;
--cui-bg-success-pressed: #c1e8c1;
--cui-bg-success-disabled: rgba(193, 232, 193, 0.4);
--cui-bg-success-strong: #018850;
--cui-bg-success-strong-hovered: #007a4e;
--cui-bg-success-strong-pressed: #016c26;
--cui-bg-success-strong-disabled: rgba(1, 135, 48, 0.4);
/* Warning backgrounds */
--cui-bg-warning: #fdf4db;
--cui-bg-warning-hovered: #faeec6;
--cui-bg-warning-pressed: #f5dea3;
--cui-bg-warning-disabled: rgba(245, 222, 163, 0.4);
--cui-bg-warning-strong: #e87c00;
--cui-bg-warning-strong-hovered: #cc6d00;
--cui-bg-warning-strong-pressed: #b25c00;
--cui-bg-warning-strong-disabled: rgba(232, 124, 0, 0.4);
/* Danger backgrounds */
--cui-bg-danger: #b25c00;
--cui-bg-danger-hovered: #fcddd9;
--cui-bg-danger-pressed: #f7ccc7;
--cui-bg-danger-disabled: rgba(247, 204, 199, 0.4);
--cui-bg-danger-strong: #de331d;
--cui-bg-danger-strong-hovered: #bd2c19;
--cui-bg-danger-strong-pressed: #9e2415;
--cui-bg-danger-strong-disabled: rgba(222, 51, 29, 0.4);
/* Promo backgrounds */
--cui-bg-promo: #f5edfe;
--cui-bg-promo-hovered: #ede0fc;
--cui-bg-promo-pressed: #e0c9f8;
--cui-bg-promo-disabled: rgba(224, 201, 248, 0.4);
--cui-bg-promo-strong: #9e33e0;
--cui-bg-promo-strong-hovered: #8a1ecc;
--cui-bg-promo-strong-pressed: #7219a9;
--cui-bg-promo-strong-disabled: rgba(149, 53, 208, 0.4);
/* Neutral foregrounds */
--cui-fg-normal: #1a1a1a;
--cui-fg-normal-hovered: #1a1a1a;
--cui-fg-normal-pressed: #1a1a1a;
--cui-fg-normal-disabled: rgba(26, 26, 26, 0.4);
--cui-fg-subtle: #666666;
--cui-fg-subtle-hovered: #333333;
--cui-fg-subtle-pressed: #1a1a1a;
--cui-fg-subtle-disabled: rgba(102, 102, 102, 0.4);
--cui-fg-placeholder: #999999;
--cui-fg-placeholder-hovered: #999999;
--cui-fg-placeholder-pressed: #999999;
--cui-fg-placeholder-disabled: rgba(153, 153, 153, 0.4);
--cui-fg-on-strong: #ffffff;
--cui-fg-on-strong-hovered: #ffffff;
--cui-fg-on-strong-pressed: #ffffff;
--cui-fg-on-strong-disabled: rgba(255, 255, 255, 0.4);
/* Accent foregrounds */
--cui-fg-accent: #3064e3;
--cui-fg-accent-hovered: #1c51d3;
--cui-fg-accent-pressed: #10399e;
--cui-fg-accent-disabled: rgba(48, 100, 227, 0.4);
/* Success foregrounds */
--cui-fg-success: #018850;
--cui-fg-success-hovered: #007a4e;
--cui-fg-success-pressed: #016c26;
--cui-fg-success-disabled: rgba(1, 135, 48, 0.4);
/* Warning foregrounds */
--cui-fg-warning: #e27900;
--cui-fg-warning-hovered: #cc6d00;
--cui-fg-warning-pressed: #b25c00;
--cui-fg-warning-disabled: rgba(232, 124, 0, 0.4);
/* Danger foregrounds */
--cui-fg-danger: #de331d;
--cui-fg-danger-hovered: #bd2c19;
--cui-fg-danger-pressed: #9e2415;
--cui-fg-danger-disabled: rgba(222, 51, 29, 0.4);
/* Promo foregrounds */
--cui-fg-promo: #9e33e0;
--cui-fg-promo-hovered: #8a1ecc;
--cui-fg-promo-pressed: #7219a9;
--cui-fg-promo-disabled: rgba(149, 53, 208, 0.4);
/* Neutral borders */
--cui-border-normal: #cccccc;
--cui-border-normal-hovered: #999999;
--cui-border-normal-pressed: #666666;
--cui-border-normal-disabled: rgba(204, 204, 204, 0.4);
--cui-border-subtle: #e6e6e6;
--cui-border-subtle-hovered: #cccccc;
--cui-border-subtle-pressed: #999999;
--cui-border-subtle-disabled: rgba(230, 230, 230, 0.4);
--cui-border-divider: #cccccc;
--cui-border-divider-hovered: #999999;
--cui-border-divider-pressed: #666666;
--cui-border-divider-disabled: rgba(204, 204, 204, 0.4);
--cui-border-strong: #1a1a1a;
--cui-border-strong-hovered: #000000;
--cui-border-strong-pressed: #000000;
--cui-border-strong-disabled: rgba(0, 0, 0, 0.4);
/* Accent borders */
--cui-border-accent: #3064e3;
--cui-border-accent-hovered: #1c51d3;
--cui-border-accent-pressed: #10399e;
--cui-border-accent-disabled: rgba(48, 100, 227, 0.4);
/* Success borders */
--cui-border-success: #018850;
--cui-border-success-hovered: #007a4e;
--cui-border-success-pressed: #016c26;
--cui-border-success-disabled: rgba(1, 135, 48, 0.4);
/* Warning borders */
--cui-border-warning: #e87c00;
--cui-border-warning-hovered: #cc6d00;
--cui-border-warning-pressed: #b25c00;
--cui-border-warning-disabled: rgba(232, 124, 0, 0.4);
/* Danger borders */
--cui-border-danger: #de331d;
--cui-border-danger-hovered: #bd2c19;
--cui-border-danger-pressed: #9e2415;
--cui-border-danger-disabled: rgba(222, 51, 29, 0.4);
/* Promo borders */
--cui-border-promo: #9e33e0;
--cui-border-promo-hovered: #8a1ecc;
--cui-border-promo-pressed: #7219a9;
--cui-border-promo-disabled: rgba(149, 53, 208, 0.4);
/* Special colors */
--cui-bg-overlay: rgba(0, 0, 0, 0.4);
--cui-border-focus: #ebf4ff;
}

/**
* reset.css
* http://meyerweb.com/eric/tools/css/reset/
Expand Down
Loading