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

Jump to bottom

Apply v2 colors to components #1449

Merged
merged 27 commits into from
Aug 22, 2023
Merged

Apply v2 colors to components #1449

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
7a51c36
Replace component legacy color variables, utility classes
dancormier Aug 16, 2023
0cdd831
Replace component monochromatic variables
dancormier Aug 16, 2023
0615d35
Replace gold, sliver, bronze variables
dancormier Aug 16, 2023
cc8369c
Replace shade utility variables
dancormier Aug 16, 2023
09aca78
Update a few missed theme variables, --blue
dancormier Aug 16, 2023
ee07be8
Missed a couple more theme variables
dancormier Aug 16, 2023
915af32
Update focus ring variables
dancormier Aug 16, 2023
c5eb830
Update generated sidebar widget colors
dancormier Aug 16, 2023
518bab3
Replace less base black/white variables with static CSS vars
dancormier Aug 16, 2023
2df6abe
Remove completed todos
dancormier Aug 16, 2023
b4878fc
Fix focus ring variable name generation
dancormier Aug 16, 2023
a99cc31
Tweak focus-ring default value
dancormier Aug 16, 2023
ab4d49a
Fix focus ring var generation
dancormier Aug 17, 2023
af42fc9
Theming updates
dancormier Aug 17, 2023
9ac5794
Update base theme variable color names
dancormier Aug 17, 2023
b84af5f
Move legacy border color classes to v1 directory
dancormier Aug 17, 2023
c1a1490
Move legacy typography color classes to v1 directory
dancormier Aug 17, 2023
cee0a0d
Replace misc lingering legacy color references
dancormier Aug 17, 2023
0eab0ec
Replace legacy Less vars with v2 variables, references
dancormier Aug 17, 2023
a8cee02
Replace legacy var references in ADR
dancormier Aug 17, 2023
ecf00bd
Minor alterations to white values
dancormier Aug 17, 2023
5db2f08
Cleanup
dancormier Aug 18, 2023
8b0c124
Update Less test snapshot
dancormier Aug 18, 2023
19f67c0
Update baseline test images
dancormier Aug 18, 2023
24659d6
Remove errant whitespace
dancormier Aug 18, 2023
9e69c91
Remove a11y test skippedTestids
dancormier Aug 21, 2023
1f2f5bb
Replace legacy color reference in docs with new colors (#1450)
dancormier Aug 22, 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
18 changes: 9 additions & 9 deletions adrs/0001-pseudo-private-custom-properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,23 @@ Defining a structure for component styles using pseudo-private custom properties
@cn-transition-duration: 100ms;
// BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
// --_{component-abbreviation}-{property-shorthand}: {value};
--_cn-bg: var(--blue-legacy-500);
--_cn-bg: var(--blue-500);
--_cn-h: var(--su-static16);
--_cn-fd: row-reverse;
// VARIANT CUSTOM PROPERTIES
// --_{component-abbreviation}-{property-shorthand}-{variant-name}: {value};
--_cn-fc-filled: var(--green-legacy-500);
--_cn-fc-filled: var(--green-500);
// CHILD COMPONENT CUSTOM PROPERTIES
// --_{component-abreviation}-{child-component-name}-{property-shorthand}: {value};
--_cn-image-bg: var(--red-legacy-500);
--_cn-image-bg: var(--red-500);

// CONTEXTUAL STYLES
// These may include themes/modes, responsive styles, or modifications based on parent containers
.highcontrast-mode({
--_cn-bg: var(--black-legacy-400);
--_cn-bg: var(--black-400);

.s-avatar--letter {
--_cn-image-bg: var(--white-legacy);
--_cn-image-bg: var(--white);
}
});

Expand All @@ -64,7 +64,7 @@ Defining a structure for component styles using pseudo-private custom properties
// STATES
// These are generally classes prefixed with `.is-` or `.has-`
&.is-selected {
--_cn-bg: var(--orange-legacy-200);
--_cn-bg: var(--orange-200);
}

// MODIFIERS
Expand All @@ -86,10 +86,10 @@ Defining a structure for component styles using pseudo-private custom properties
// VARIANTS
// Variants are expected to be used exclusive of one another. In other words, you should only use one variant class at a time
&&__info {
--_cn-bg: var(--yellow-legacy-100);
--_cn-bg: var(--yellow-100);

&.s-component-name__filled {
--_cn-bg-filled: var(--yellow-legacy-800);
--_cn-bg-filled: var(--yellow-600);
}
}

Expand All @@ -100,7 +100,7 @@ Defining a structure for component styles using pseudo-private custom properties

// INTERACTION
&:hover {
--_cn-bg: var(--black-legacy-050);
--_cn-bg: var(--black-150);
}

// STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/less/stacks-documentation.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,8 +417,8 @@ body.theme-system {
// v2 colors and theming
.create-custom-theme-hsl-variables(hsl(172, 37%, 48%), primary, base);
.create-custom-theme-hsl-variables(hsl(259, 29%, 55%), secondary, base);
.create-custom-theme-hsl-variables(hsl(172, 34%, 60%), primary, dark);
.create-custom-theme-hsl-variables(hsl(259, 29%, 75%), secondary, dark);
.create-custom-theme-hsl-variables(hsl(172, 37%, 48%), primary, dark);
.create-custom-theme-hsl-variables(hsl(259, 29%, 55%), secondary, dark);
}
}

Expand Down
24 changes: 12 additions & 12 deletions lib/atomic/__snapshots__/color.less.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1265,28 +1265,28 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
.h\\\\:bg-transparent:hover,
.f\\\\:bg-transparent:focus,
.f\\\\:bg-transparent:focus-within {
background-color: transparent;
background-color: transparent !important;
}

.bc-transparent,
.h\\\\:bc-transparent:hover,
.f\\\\:bc-transparent:focus,
.f\\\\:bc-transparent:focus-within {
border-color: transparent;
border-color: transparent !important;
}

.bg-inherit,
.h\\\\:bg-inherit:hover,
.f\\\\:bg-inherit:focus,
.f\\\\:bg-inherit:focus-within {
background-color: inherit;
background-color: inherit !important;
}

.bc-inherit,
.h\\\\:bc-inherit:hover,
.f\\\\:bc-inherit:focus,
.f\\\\:bc-inherit:focus-within {
border-color: inherit;
border-color: inherit !important;
}

.bg-theme-primary,
Expand Down Expand Up @@ -2072,28 +2072,28 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
body.theme-system .h\\\\:bg-transparent:hover,
body.theme-system .f\\\\:bg-transparent:focus,
body.theme-system .f\\\\:bg-transparent:focus-within {
background-color: transparent;
background-color: transparent !important;
}

body.theme-system .bc-transparent,
body.theme-system .h\\\\:bc-transparent:hover,
body.theme-system .f\\\\:bc-transparent:focus,
body.theme-system .f\\\\:bc-transparent:focus-within {
border-color: transparent;
border-color: transparent !important;
}

body.theme-system .bg-inherit,
body.theme-system .h\\\\:bg-inherit:hover,
body.theme-system .f\\\\:bg-inherit:focus,
body.theme-system .f\\\\:bg-inherit:focus-within {
background-color: inherit;
background-color: inherit !important;
}

body.theme-system .bc-inherit,
body.theme-system .h\\\\:bc-inherit:hover,
body.theme-system .f\\\\:bc-inherit:focus,
body.theme-system .f\\\\:bc-inherit:focus-within {
border-color: inherit;
border-color: inherit !important;
}
}

Expand Down Expand Up @@ -2835,7 +2835,7 @@ body.theme-system .theme-dark__forced .f\\\\:bg-transparent:focus,
body.theme-dark .f\\\\:bg-transparent:focus-within,
.theme-dark__forced .f\\\\:bg-transparent:focus-within,
body.theme-system .theme-dark__forced .f\\\\:bg-transparent:focus-within {
background-color: transparent;
background-color: transparent !important;
}

body.theme-dark .bc-transparent,
Expand All @@ -2850,7 +2850,7 @@ body.theme-system .theme-dark__forced .f\\\\:bc-transparent:focus,
body.theme-dark .f\\\\:bc-transparent:focus-within,
.theme-dark__forced .f\\\\:bc-transparent:focus-within,
body.theme-system .theme-dark__forced .f\\\\:bc-transparent:focus-within {
border-color: transparent;
border-color: transparent !important;
}

body.theme-dark .bg-inherit,
Expand All @@ -2865,7 +2865,7 @@ body.theme-system .theme-dark__forced .f\\\\:bg-inherit:focus,
body.theme-dark .f\\\\:bg-inherit:focus-within,
.theme-dark__forced .f\\\\:bg-inherit:focus-within,
body.theme-system .theme-dark__forced .f\\\\:bg-inherit:focus-within {
background-color: inherit;
background-color: inherit !important;
}

body.theme-dark .bc-inherit,
Expand All @@ -2880,7 +2880,7 @@ body.theme-system .theme-dark__forced .f\\\\:bc-inherit:focus,
body.theme-dark .f\\\\:bc-inherit:focus-within,
.theme-dark__forced .f\\\\:bc-inherit:focus-within,
body.theme-system .theme-dark__forced .f\\\\:bc-inherit:focus-within {
border-color: inherit;
border-color: inherit !important;
}
"
`;
Loading
Loading