Skip to content

Commit

Permalink
Apply v2 colors to components (#1449)
Browse files Browse the repository at this point in the history 
* Replace component legacy color variables, utility classes

* Replace component monochromatic variables

* Replace gold, sliver, bronze variables

* Replace shade utility variables

* Update a few missed theme variables, --blue

* Missed a couple more theme variables

* Update focus ring variables

* Update generated sidebar widget colors

* Replace less base black/white variables with static CSS vars

* Remove completed todos

* Fix focus ring variable name generation

* Tweak focus-ring default value

* Fix focus ring var generation

* Theming updates

* Update base theme variable color names

* Move legacy border color classes to v1 directory

* Move legacy typography color classes to v1 directory

* Replace misc lingering legacy color references

* Replace legacy Less vars with v2 variables, references

* Replace legacy var references in ADR

* Minor alterations to white values

* Cleanup

* Update Less test snapshot

* Update baseline test images

* Remove errant whitespace

* Remove a11y test skippedTestids

* Replace legacy color reference in docs with new colors (#1450)
  • Loading branch information
@dancormier
dancormier authored Aug 22, 2023
1 parent 78545ab commit 2b0a6a1
Show file tree
Hide file tree
Showing 4,730 changed files with 12,133 additions and 11,924 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
18 changes: 9 additions & 9 deletions adrs/0001-pseudo-private-custom-properties.md
View file
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
59 changes: 0 additions & 59 deletions docs/_data/borders.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,65 +239,6 @@
"output": "border-left-style: dashed"
}
],
"border-color": [
{
"term": "bc-transparent",
"define": "Transparent border color",
"darkmode": true
},
{
"term": "bc-white-legacy",
"define": "White border color"
},
{
"term": "bc-white-legacy-[x]",
"define": "Alpha stops for border color"
},
{
"term": "bc-black-legacy-[x]",
"define": "Black color stops for border colors"
},
{
"term": "bc-orange-legacy-[x]",
"define": "Orange color stops for border colors"
},
{
"term": "bc-blue-legacy-[x]",
"define": "Blue color stops for border colors"
},
{
"term": "bc-green-legacy-[x]",
"define": "Green color stops for border colors"
},
{
"term": "bc-powder-legacy-[x]",
"define": "Powder color stops for border colors"
},
{
"term": "bc-red-legacy-[x]",
"define": "Red color stops for border colors"
},
{
"term": "bc-yellow-legacy-[x]",
"define": "Yellow color stops for border colors"
},
{
"term": "bc-danger",
"define": "Danger border color alias"
},
{
"term": "bc-error",
"define": "Error border color alias"
},
{
"term": "bc-success",
"define": "Success border color alias"
},
{
"term": "bc-warning",
"define": "Warning border color alias"
}
],
"border-radius-definitions": [
{
"term": "bar",
Expand Down
4 changes: 2 additions & 2 deletions docs/_data/links.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"applies": ".s-anchors",
"name": "grayscale",
"description": "Applies gray styling to all descendent links.",
"exampleClasses": "fc-orange-legacy-700"
"exampleClasses": "fc-orange-500"
},
{
"class": ".s-anchors__muted",
Expand Down Expand Up @@ -89,7 +89,7 @@
"applies": ".s-anchors",
"name": "inherit",
"description": "Applies the parent element’s text color to all descendent links.",
"exampleClasses": "fc-green-legacy-500"
"exampleClasses": "fc-green-400"
}
],
"block-links": [
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/layouts/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<html lang="en-us" class="h100">
{% include 'head.html' %}

<body class="d-flex flex__center bg-black-legacy-800 fc-black-legacy-300">
<body class="d-flex flex__center bg-black-600 fc-black-350">
<div class="d-flex ai-center sm:fd-column">
<div class="flex--item mr24 sm:mr0 sm:mb24">
<svg width="272" height="297" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M267 18a1 1 0 0 0-2 0v4h-4a1 1 0 0 0 0 2h4v4a1 1 0 0 0 2 0v-4h4a1 1 0 0 0 0-2h-4v-4z" fill="#FF9600"/><path clip-rule="evenodd" d="M243.5 30a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z" stroke="#F48024" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path opacity=".5" clip-rule="evenodd" d="M194.5 277.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z" stroke="#FF9600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 104a1 1 0 0 0-2 0h2zm-2 12a1 1 0 0 0 2 0H6zm0-12v12h2v-12H6z" fill="#F28033"/><path d="M13 111a1 1 0 0 0 0-2v2zm-12-2a1 1 0 0 0 0 2v-2zm12 0H1v2h12v-2z" fill="#F28033"/><path opacity=".5" clip-rule="evenodd" d="M20.5 92.5l4 7h-8l4-7z" stroke="#FF9600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M205 284a1 1 0 0 0-2 0h2zm-2 12a1 1 0 0 0 2 0h-2zm0-12v12h2v-12h-2z" fill="#F28033"/><path d="M210 291a1 1 0 0 0 0-2v2zm-12-2a1 1 0 0 0 0 2v-2zm12 0h-12v2h12v-2z" fill="#F28033"/><path opacity=".5" clip-rule="evenodd" d="M218 273l4 7h-8l4-7z" stroke="#FF9600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M254.8 8.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" stroke="#FFB935" stroke-width="2" stroke-miterlimit="10"/><path opacity=".5" d="M120 198.4c-11.2-7.9-25-7.2-31.2 1.4-6 8.6-2 22 9.2 29.8 11.1 7.8 25 7.2 31.1-1.4 6-8.7 2-22-9.1-29.8z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 158.6l11 17-.8.5-3.2 2-2.6 1.6c-2 1.2-4.6.8-6.7-.1-2.1-1-4.1-2.5-5.2-4-3.5-5.2-2-11.2 2-13.2l5.5-3.8zm-.6 2.8L20 164c-2.7 1.4-4.4 6-1.4 10.3.8 1.2 2.5 2.6 4.4 3.3 1.9.8 3.7 1 4.8.3l2.7-1.7 2.3-1.4-8.9-13.5z" fill="#4F4F4F"/><path opacity=".5" d="M129.3 166.7l18 12.7a5.5 5.5 0 1 1-6.2 9.1L123 175.8a5.6 5.6 0 1 1 6.3-9.2z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M95.5 230a23.6 23.6 0 1 0 27.2-38.6A23.6 23.6 0 0 0 95.5 230zm34.6-4.6a25.6 25.6 0 1 1-42-29.5 25.6 25.6 0 0 1 42 29.5z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M98.7 225.5c11 7.6 24.1 6.8 29.8-1.2 5.6-8 2-20.7-9-28.4-10.8-7.7-24-6.8-29.7 1.2-5.6 8-2 20.7 9 28.4zm31.4 0c-6.5 9.2-21.2 9.6-32.5 1.6-11.4-8-16-22-9.4-31.2 6.5-9.2 21.1-9.6 32.5-1.6 11.4 8 16 21.9 9.4 31.1z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M130.4 221.3a1 1 0 0 1 1.4-.3l5 3.4 7.2-10.1a1 1 0 1 1 1.6 1.1l-7.6 11a1 1 0 0 1-1.4.2l-5.9-4a1 1 0 0 1-.3-1.3zM92 194a1 1 0 0 1-1.4.2l-5-3.6a1 1 0 0 1-.3-1.4l6.6-9.4a1 1 0 0 1 1.6 1.2l-6 8.5 4.3 3c.4.4.5 1 .2 1.4z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M129.5 231.8a1 1 0 0 1-.2-1.4l4.5-6.6a1 1 0 1 1 1.7 1.1l-4.6 6.6a1 1 0 0 1-1.4.3zM135.8 158.3a1 1 0 0 1-1 0l-3.3-2.4a1 1 0 0 1-.4-.9l.3-4c0-.3.3-.6.6-.8l3.6-1.7a1 1 0 0 1 1 .1l3.3 2.3c.3.2.5.6.4 1l-.3 4c0 .3-.3.6-.6.7l-3.6 1.7zm-.4-2l2.6-1.2.3-2.9-2.4-1.6-2.5 1.2-.3 2.8 2.3 1.7zM123.8 179a1 1 0 0 1-1.4.2l-6.3-4.4a1 1 0 1 1 1.2-1.6l6.2 4.4c.5.3.6 1 .3 1.4zM142.5 192.2a1 1 0 0 1-1.4.2l-1.1-.8a1 1 0 1 1 1.1-1.6l1.2.8c.4.3.5 1 .2 1.4zM235.5 86.8a10 10 0 0 0 7.4.8 9.4 9.4 0 0 0 5-3.6L231.6 75a9 9 0 0 0 4 11.7zm14.8-2.7a11.1 11.1 0 0 1-6.9 5.5 11.8 11.8 0 0 1-8.9-1 11 11 0 0 1-4.3-15.3l.4-.9 18.4 9.8 2.3-4.3-17.5-9.3 1-1.8L254 77l-3.7 7z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M235.5 67.5l-3.6 6.8-1.7-1 3.6-6.7 1.7 1zM249.9 76l-3.3 6.1-1.8-1 3.3-6 1.8.9zM246.2 74l-3.3 6.2-1.7-1 3.2-6.1 1.8 1zM242.5 72l-3.2 6.2-1.8-1 3.3-6 1.7.9zM238.9 70.1l-3.3 6.1-1.8-1 3.3-6 1.8 1zM182.5 50.7a10 10 0 0 0 6.7 3.3 9.4 9.4 0 0 0 6-1.7l-12.4-13.9a9 9 0 0 0-.3 12.3zm14.9 2.5A11.1 11.1 0 0 1 189 56a11.8 11.8 0 0 1-8-4 11 11 0 0 1 1.2-15.8l.7-.7 13.9 15.6 3.7-3.3L187.3 33l1.4-1.3 14.6 16.2-6 5.3z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M189.2 32.6l-5.7 5.1-1.4-1.5 5.7-5 1.4 1.4zM199.8 45.5l-5.2 4.6-1.3-1.5 5.1-4.6 1.4 1.5zM197 42.4l-5.2 4.6-1.3-1.5 5.2-4.6 1.3 1.5zM194.2 39.3l-5.2 4.6-1.3-1.5 5.2-4.6 1.3 1.5zM191.4 36.2l-5.1 4.6-1.4-1.5 5.2-4.6 1.3 1.5zM129.4 139.7a1 1 0 0 1-1.4.2l-5.7-4a1 1 0 0 1 1.2-1.6l4.8 3.4 3.7-5.2-5-3.5a1 1 0 1 1 1.2-1.7l5.8 4.2c.4.3.5.9.2 1.3l-4.8 6.9zM171.3 123l-.2-.3c-1.6-1.8-2.5-5-2.7-9-.2-4 .3-9.3 2-15.4a131.6 131.6 0 0 1 24.3-46l1.6 1.3a129.7 129.7 0 0 0-24 45.2c-1.6 6-2.1 11-2 14.8.2 3.7 1 6.2 2.1 7.5 2.4.6 6.1 0 10.7-1.8a75 75 0 0 0 15.7-9c11.2-8 22.8-20 30.1-33.7l1.8 1c-7.5 14-19.4 26.1-30.7 34.3a77 77 0 0 1-16.2 9.2c-4.8 2-9.1 2.8-12.2 1.9h-.3zM187.7 156.3a79.6 79.6 0 0 0 28.1-20.6A197 197 0 0 0 251.1 83l-1.8-.9a195 195 0 0 1-35 52.2 76.5 76.5 0 0 1-27.6 20.2l-.3.1-29.2 43.8 1 .5c.6.3 1.4.5 2.2.7h3c2.3 0 5.1-.3 8.3-.8a315.5 315.5 0 0 0 44.9-12.2 88 88 0 0 0 14.2-6.1l7.9 13.4c-6.5 3-16.2 7.2-26.1 11a156 156 0 0 1-28.3 9c-19.2 2.9-35.6 4.3-50-5.8l-1.1 1.6c15 10.7 32.3 9 51.4 6 7.4-1 18.2-4.8 28.7-8.9a565.1 565.1 0 0 0 33.3-14.4l.3-.1h.1c2-1.1 3.5-3.3 4-5.8a10.4 10.4 0 0 0-6.6-11.8c-2-.8-4.3-1.1-6.3-.2-2.6 1.1-3 1.4-4.8 2.3l-2.7 1.4-1 .5h.1a86 86 0 0 1-13.8 6 313.3 313.3 0 0 1-44.5 12.1 61.9 61.9 0 0 1-11.2.7l27.5-41.2zm58.5 34.1a6.2 6.2 0 0 0 2.9-4.3c.4-2 0-4.3-1.4-6.5a9.2 9.2 0 0 0-4-3 6.2 6.2 0 0 0-4.8-.3 72.5 72.5 0 0 0-4.6 2.3l-1.8.9 8 13.6 4-1.9 1.2-.6.4-.1zM68.3 169.2A21 21 0 0 0 60 168a87 87 0 0 0-16.8 4.7 205.1 205.1 0 0 0-9.6 3.8h-.1l-.5-.8-.4-1h.2a92.5 92.5 0 0 1 2.7-1.2l7-2.7c5.5-2 12.3-4.2 17.3-4.8a23 23 0 0 1 9.1 1.2c3.4 1 7 2.6 10.9 4.5a192 192 0 0 1 23.3 14.3l-1.1 1.6a190 190 0 0 0-23.1-14.1 67.6 67.6 0 0 0-10.6-4.4z" fill="#4F4F4F"/><path fill-rule="evenodd" clip-rule="evenodd" d="M182.8 37c.4.3.4 1 0 1.3-33.1 30.3-46.8 70-48.8 82.4 0 .2 0 .3-.2.4L104 163.5a1 1 0 0 1-1.4.3l-1-.6c-4.3-2.8-12-7.8-26.6-12.8-8.7-3-18.4-2-27.4.4a95 95 0 0 0-22.7 10 1 1 0 0 1-1-1.8A97 97 0 0 1 47 149a48.8 48.8 0 0 1 28.5-.4 113.6 113.6 0 0 1 27.3 13.1l29.2-41.4c2.1-13 16-53 49.3-83.4a1 1 0 0 1 1.4.1zM127.2 162.7a4.6 4.6 0 0 0-3.5 8.2l18 12.7a4.6 4.6 0 1 0 5.3-7.4l-18.1-12.8c-.5-.3-1-.6-1.7-.7zm-2.1-2a6.5 6.5 0 0 1 5 1l18 12.8a6.6 6.6 0 1 1-7.5 10.8l-18-12.7a6.6 6.6 0 0 1 2.5-12z" fill="#4F4F4F"/></svg>
Expand Down
Loading

0 comments on commit 2b0a6a1

Please sign in to comment.