diff --git a/adrs/0001-pseudo-private-custom-properties.md b/adrs/0001-pseudo-private-custom-properties.md index 4315b0854c..0f8a352168 100644 --- a/adrs/0001-pseudo-private-custom-properties.md +++ b/adrs/0001-pseudo-private-custom-properties.md @@ -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); } }); @@ -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 @@ -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); } } @@ -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 diff --git a/docs/_data/borders.json b/docs/_data/borders.json index 4fd01df4a5..0102911096 100755 --- a/docs/_data/borders.json +++ b/docs/_data/borders.json @@ -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", diff --git a/docs/_data/links.json b/docs/_data/links.json index 12a0fcb833..1503a6e231 100755 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -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", @@ -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": [ diff --git a/docs/_includes/layouts/404.html b/docs/_includes/layouts/404.html index 4c38a59ac1..662a018697 100755 --- a/docs/_includes/layouts/404.html +++ b/docs/_includes/layouts/404.html @@ -6,7 +6,7 @@ {% include 'head.html' %} - +
diff --git a/docs/_includes/layouts/home.html b/docs/_includes/layouts/home.html index d88b71e004..8785103f3c 100644 --- a/docs/_includes/layouts/home.html +++ b/docs/_includes/layouts/home.html @@ -2,159 +2,159 @@ {% include 'head.html' %} - + {% include 'theme.html' %} -
+
- - + + - + - - - - + + + + - - - - - - - - - - - + + + + + + + + + + + - + - - + + - - - - - + + + + + - - + + - + - - - - + + + + - - - - - - - - + + + + + + + + - - - - + + + + - - - + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - + + - - + + - - + + - - - + + + - - - + + + - - - + + + - - - - - - + + + + + + - + - +
- + {% embed "LogoGlyphSm" %} - + {% icon "GitHub", "", "24" %} - +
- + {% icon "Search", "s-input-icon s-input-icon__search" %}
-
-
+

Stacks

- v{% version %} + v{% version %}

Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack Overflow—from the brand and product itself, down to how we send emails and write copy.

-
+
-
+
{% spot "Puzzle" %}
-
Product
-
Robust CSS & JavaScript Pattern libraries for rapidly building Stack Overflow.
+
Product
+
Robust CSS & JavaScript Pattern libraries for rapidly building Stack Overflow.
 -
+
{% spot "Mail" %}
-
Email
-
Patterns and guidelines for creating and sending emails to Stack Overflow users.
+
Email
+
Patterns and guidelines for creating and sending emails to Stack Overflow users.
 -
+
{% spot "DocumentAlt" %}
-
Content
-
Principles and tactics for writing at Stack Overflow.
+
Content
+
Principles and tactics for writing at Stack Overflow.
 -
+
{% spot "Theme" %}
-
Brand
-
Visual patterns and guidelines for Stack Overflow’s brand.
+
Brand
+
Visual patterns and guidelines for Stack Overflow’s brand.
diff --git a/docs/_includes/layouts/page.html b/docs/_includes/layouts/page.html index 006668fa99..1988fc8b06 100644 --- a/docs/_includes/layouts/page.html +++ b/docs/_includes/layouts/page.html @@ -13,7 +13,7 @@ {% if hide-menu != true %}
-
Sections
+
Sections
{{ content | toc }}
@@ -28,25 +28,25 @@
S

{{ title }}

{% if razor %} - +
{% icon "Checkmark" %}
Razor
 {% endif %} {% if js %} - -
{% icon "Checkmark" %}
-
JavaScript
+ +
{% icon "Checkmark" %}
+
JavaScript
 {% endif %} {% if figma %} - -
+ +
{% icon "Figma", "native" %}
-
Figma
+
Figma
 {% endif %}
@@ -104,7 +104,7 @@

{{ title }}