diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap index 1c6b966ec1..3bd6a41114 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap @@ -3374,5 +3374,585 @@ body.theme-dark .f\\:bc-inherit:focus-within, body.theme-system .theme-dark__forced .f\\:bc-inherit:focus-within { border-color: inherit !important; } + +body.theme-highcontrast .hc\\:fc-white { + color: var(--white) !important; +} + +body.theme-highcontrast .hc\\:bg-white { + background-color: var(--white) !important; +} + +body.theme-highcontrast .hc\\:fc-black-050 { + color: var(--black-050) !important; +} + +body.theme-highcontrast .hc\\:bg-black-050 { + background-color: var(--black-050) !important; +} + +body.theme-highcontrast .hc\\:fc-black-100 { + color: var(--black-100) !important; +} + +body.theme-highcontrast .hc\\:bg-black-100 { + background-color: var(--black-100) !important; +} + +body.theme-highcontrast .hc\\:fc-black-150 { + color: var(--black-150) !important; +} + +body.theme-highcontrast .hc\\:bg-black-150 { + background-color: var(--black-150) !important; +} + +body.theme-highcontrast .hc\\:fc-black-200 { + color: var(--black-200) !important; +} + +body.theme-highcontrast .hc\\:bg-black-200 { + background-color: var(--black-200) !important; +} + +body.theme-highcontrast .hc\\:fc-black-225 { + color: var(--black-225) !important; +} + +body.theme-highcontrast .hc\\:bg-black-225 { + background-color: var(--black-225) !important; +} + +body.theme-highcontrast .hc\\:fc-black-250 { + color: var(--black-250) !important; +} + +body.theme-highcontrast .hc\\:bg-black-250 { + background-color: var(--black-250) !important; +} + +body.theme-highcontrast .hc\\:fc-black-300 { + color: var(--black-300) !important; +} + +body.theme-highcontrast .hc\\:bg-black-300 { + background-color: var(--black-300) !important; +} + +body.theme-highcontrast .hc\\:fc-black-350 { + color: var(--black-350) !important; +} + +body.theme-highcontrast .hc\\:bg-black-350 { + background-color: var(--black-350) !important; +} + +body.theme-highcontrast .hc\\:fc-black-400 { + color: var(--black-400) !important; +} + +body.theme-highcontrast .hc\\:bg-black-400 { + background-color: var(--black-400) !important; +} + +body.theme-highcontrast .hc\\:fc-black-500 { + color: var(--black-500) !important; +} + +body.theme-highcontrast .hc\\:bg-black-500 { + background-color: var(--black-500) !important; +} + +body.theme-highcontrast .hc\\:fc-black-600 { + color: var(--black-600) !important; +} + +body.theme-highcontrast .hc\\:bg-black-600 { + background-color: var(--black-600) !important; +} + +body.theme-highcontrast .hc\\:fc-black { + color: var(--black) !important; +} + +body.theme-highcontrast .hc\\:bg-black { + background-color: var(--black) !important; +} + +body.theme-highcontrast .hc\\:fc-orange-100 { + color: var(--orange-100) !important; +} + +body.theme-highcontrast .hc\\:bg-orange-100 { + background-color: var(--orange-100) !important; +} + +body.theme-highcontrast .hc\\:fc-orange-200 { + color: var(--orange-200) !important; +} + +body.theme-highcontrast .hc\\:bg-orange-200 { + background-color: var(--orange-200) !important; +} + +body.theme-highcontrast .hc\\:fc-orange-300 { + color: var(--orange-300) !important; +} + +body.theme-highcontrast .hc\\:bg-orange-300 { + background-color: var(--orange-300) !important; +} + +body.theme-highcontrast .hc\\:fc-orange-400 { + color: var(--orange-400) !important; +} + +body.theme-highcontrast .hc\\:bg-orange-400 { + background-color: var(--orange-400) !important; +} + +body.theme-highcontrast .hc\\:fc-orange-500 { + color: var(--orange-500) !important; +} + +body.theme-highcontrast .hc\\:bg-orange-500 { + background-color: var(--orange-500) !important; +} + +body.theme-highcontrast .hc\\:fc-orange-600 { + color: var(--orange-600) !important; +} + +body.theme-highcontrast .hc\\:bg-orange-600 { + background-color: var(--orange-600) !important; +} + +body.theme-highcontrast .hc\\:fc-blue-100 { + color: var(--blue-100) !important; +} + +body.theme-highcontrast .hc\\:bg-blue-100 { + background-color: var(--blue-100) !important; +} + +body.theme-highcontrast .hc\\:fc-blue-200 { + color: var(--blue-200) !important; +} + +body.theme-highcontrast .hc\\:bg-blue-200 { + background-color: var(--blue-200) !important; +} + +body.theme-highcontrast .hc\\:fc-blue-300 { + color: var(--blue-300) !important; +} + +body.theme-highcontrast .hc\\:bg-blue-300 { + background-color: var(--blue-300) !important; +} + +body.theme-highcontrast .hc\\:fc-blue-400 { + color: var(--blue-400) !important; +} + +body.theme-highcontrast .hc\\:bg-blue-400 { + background-color: var(--blue-400) !important; +} + +body.theme-highcontrast .hc\\:fc-blue-500 { + color: var(--blue-500) !important; +} + +body.theme-highcontrast .hc\\:bg-blue-500 { + background-color: var(--blue-500) !important; +} + +body.theme-highcontrast .hc\\:fc-blue-600 { + color: var(--blue-600) !important; +} + +body.theme-highcontrast .hc\\:bg-blue-600 { + background-color: var(--blue-600) !important; +} + +body.theme-highcontrast .hc\\:fc-green-100 { + color: var(--green-100) !important; +} + +body.theme-highcontrast .hc\\:bg-green-100 { + background-color: var(--green-100) !important; +} + +body.theme-highcontrast .hc\\:fc-green-200 { + color: var(--green-200) !important; +} + +body.theme-highcontrast .hc\\:bg-green-200 { + background-color: var(--green-200) !important; +} + +body.theme-highcontrast .hc\\:fc-green-300 { + color: var(--green-300) !important; +} + +body.theme-highcontrast .hc\\:bg-green-300 { + background-color: var(--green-300) !important; +} + +body.theme-highcontrast .hc\\:fc-green-400 { + color: var(--green-400) !important; +} + +body.theme-highcontrast .hc\\:bg-green-400 { + background-color: var(--green-400) !important; +} + +body.theme-highcontrast .hc\\:fc-green-500 { + color: var(--green-500) !important; +} + +body.theme-highcontrast .hc\\:bg-green-500 { + background-color: var(--green-500) !important; +} + +body.theme-highcontrast .hc\\:fc-green-600 { + color: var(--green-600) !important; +} + +body.theme-highcontrast .hc\\:bg-green-600 { + background-color: var(--green-600) !important; +} + +body.theme-highcontrast .hc\\:fc-red-100 { + color: var(--red-100) !important; +} + +body.theme-highcontrast .hc\\:bg-red-100 { + background-color: var(--red-100) !important; +} + +body.theme-highcontrast .hc\\:fc-red-200 { + color: var(--red-200) !important; +} + +body.theme-highcontrast .hc\\:bg-red-200 { + background-color: var(--red-200) !important; +} + +body.theme-highcontrast .hc\\:fc-red-300 { + color: var(--red-300) !important; +} + +body.theme-highcontrast .hc\\:bg-red-300 { + background-color: var(--red-300) !important; +} + +body.theme-highcontrast .hc\\:fc-red-400 { + color: var(--red-400) !important; +} + +body.theme-highcontrast .hc\\:bg-red-400 { + background-color: var(--red-400) !important; +} + +body.theme-highcontrast .hc\\:fc-red-500 { + color: var(--red-500) !important; +} + +body.theme-highcontrast .hc\\:bg-red-500 { + background-color: var(--red-500) !important; +} + +body.theme-highcontrast .hc\\:fc-red-600 { + color: var(--red-600) !important; +} + +body.theme-highcontrast .hc\\:bg-red-600 { + background-color: var(--red-600) !important; +} + +body.theme-highcontrast .hc\\:fc-yellow-100 { + color: var(--yellow-100) !important; +} + +body.theme-highcontrast .hc\\:bg-yellow-100 { + background-color: var(--yellow-100) !important; +} + +body.theme-highcontrast .hc\\:fc-yellow-200 { + color: var(--yellow-200) !important; +} + +body.theme-highcontrast .hc\\:bg-yellow-200 { + background-color: var(--yellow-200) !important; +} + +body.theme-highcontrast .hc\\:fc-yellow-300 { + color: var(--yellow-300) !important; +} + +body.theme-highcontrast .hc\\:bg-yellow-300 { + background-color: var(--yellow-300) !important; +} + +body.theme-highcontrast .hc\\:fc-yellow-400 { + color: var(--yellow-400) !important; +} + +body.theme-highcontrast .hc\\:bg-yellow-400 { + background-color: var(--yellow-400) !important; +} + +body.theme-highcontrast .hc\\:fc-yellow-500 { + color: var(--yellow-500) !important; +} + +body.theme-highcontrast .hc\\:bg-yellow-500 { + background-color: var(--yellow-500) !important; +} + +body.theme-highcontrast .hc\\:fc-yellow-600 { + color: var(--yellow-600) !important; +} + +body.theme-highcontrast .hc\\:bg-yellow-600 { + background-color: var(--yellow-600) !important; +} + +body.theme-highcontrast .hc\\:fc-purple-100 { + color: var(--purple-100) !important; +} + +body.theme-highcontrast .hc\\:bg-purple-100 { + background-color: var(--purple-100) !important; +} + +body.theme-highcontrast .hc\\:fc-purple-200 { + color: var(--purple-200) !important; +} + +body.theme-highcontrast .hc\\:bg-purple-200 { + background-color: var(--purple-200) !important; +} + +body.theme-highcontrast .hc\\:fc-purple-300 { + color: var(--purple-300) !important; +} + +body.theme-highcontrast .hc\\:bg-purple-300 { + background-color: var(--purple-300) !important; +} + +body.theme-highcontrast .hc\\:fc-purple-400 { + color: var(--purple-400) !important; +} + +body.theme-highcontrast .hc\\:bg-purple-400 { + background-color: var(--purple-400) !important; +} + +body.theme-highcontrast .hc\\:fc-purple-500 { + color: var(--purple-500) !important; +} + +body.theme-highcontrast .hc\\:bg-purple-500 { + background-color: var(--purple-500) !important; +} + +body.theme-highcontrast .hc\\:fc-purple-600 { + color: var(--purple-600) !important; +} + +body.theme-highcontrast .hc\\:bg-purple-600 { + background-color: var(--purple-600) !important; +} + +body.theme-highcontrast .hc\\:fc-pink-100 { + color: var(--pink-100) !important; +} + +body.theme-highcontrast .hc\\:bg-pink-100 { + background-color: var(--pink-100) !important; +} + +body.theme-highcontrast .hc\\:fc-pink-200 { + color: var(--pink-200) !important; +} + +body.theme-highcontrast .hc\\:bg-pink-200 { + background-color: var(--pink-200) !important; +} + +body.theme-highcontrast .hc\\:fc-pink-300 { + color: var(--pink-300) !important; +} + +body.theme-highcontrast .hc\\:bg-pink-300 { + background-color: var(--pink-300) !important; +} + +body.theme-highcontrast .hc\\:fc-pink-400 { + color: var(--pink-400) !important; +} + +body.theme-highcontrast .hc\\:bg-pink-400 { + background-color: var(--pink-400) !important; +} + +body.theme-highcontrast .hc\\:fc-pink-500 { + color: var(--pink-500) !important; +} + +body.theme-highcontrast .hc\\:bg-pink-500 { + background-color: var(--pink-500) !important; +} + +body.theme-highcontrast .hc\\:fc-pink-600 { + color: var(--pink-600) !important; +} + +body.theme-highcontrast .hc\\:bg-pink-600 { + background-color: var(--pink-600) !important; +} + +body.theme-highcontrast .hc\\:fc-gold-100 { + color: var(--gold-100) !important; +} + +body.theme-highcontrast .hc\\:bg-gold-100 { + background-color: var(--gold-100) !important; +} + +body.theme-highcontrast .hc\\:fc-gold-200 { + color: var(--gold-200) !important; +} + +body.theme-highcontrast .hc\\:bg-gold-200 { + background-color: var(--gold-200) !important; +} + +body.theme-highcontrast .hc\\:fc-gold-300 { + color: var(--gold-300) !important; +} + +body.theme-highcontrast .hc\\:bg-gold-300 { + background-color: var(--gold-300) !important; +} + +body.theme-highcontrast .hc\\:fc-gold-400 { + color: var(--gold-400) !important; +} + +body.theme-highcontrast .hc\\:bg-gold-400 { + background-color: var(--gold-400) !important; +} + +body.theme-highcontrast .hc\\:fc-silver-100 { + color: var(--silver-100) !important; +} + +body.theme-highcontrast .hc\\:bg-silver-100 { + background-color: var(--silver-100) !important; +} + +body.theme-highcontrast .hc\\:fc-silver-200 { + color: var(--silver-200) !important; +} + +body.theme-highcontrast .hc\\:bg-silver-200 { + background-color: var(--silver-200) !important; +} + +body.theme-highcontrast .hc\\:fc-silver-300 { + color: var(--silver-300) !important; +} + +body.theme-highcontrast .hc\\:bg-silver-300 { + background-color: var(--silver-300) !important; +} + +body.theme-highcontrast .hc\\:fc-silver-400 { + color: var(--silver-400) !important; +} + +body.theme-highcontrast .hc\\:bg-silver-400 { + background-color: var(--silver-400) !important; +} + +body.theme-highcontrast .hc\\:fc-bronze-100 { + color: var(--bronze-100) !important; +} + +body.theme-highcontrast .hc\\:bg-bronze-100 { + background-color: var(--bronze-100) !important; +} + +body.theme-highcontrast .hc\\:fc-bronze-200 { + color: var(--bronze-200) !important; +} + +body.theme-highcontrast .hc\\:bg-bronze-200 { + background-color: var(--bronze-200) !important; +} + +body.theme-highcontrast .hc\\:fc-bronze-300 { + color: var(--bronze-300) !important; +} + +body.theme-highcontrast .hc\\:bg-bronze-300 { + background-color: var(--bronze-300) !important; +} + +body.theme-highcontrast .hc\\:fc-bronze-400 { + color: var(--bronze-400) !important; +} + +body.theme-highcontrast .hc\\:bg-bronze-400 { + background-color: var(--bronze-400) !important; +} + +body.theme-highcontrast .hc\\:fc-light { + color: var(--fc-light) !important; +} + +body.theme-highcontrast .hc\\:fc-medium { + color: var(--fc-medium) !important; +} + +body.theme-highcontrast .hc\\:fc-dark { + color: var(--fc-dark) !important; +} + +body.theme-highcontrast .hc\\:fc-error { + color: var(--fc-error) !important; +} + +body.theme-highcontrast .hc\\:fc-danger { + color: var(--fc-danger) !important; +} + +body.theme-highcontrast .hc\\:fc-success { + color: var(--fc-success) !important; +} + +body.theme-highcontrast .hc\\:fc-warning { + color: var(--fc-warning) !important; +} + +body.theme-highcontrast .hc\\:bg-error { + background-color: var(--bg-error) !important; +} + +body.theme-highcontrast .hc\\:bg-danger { + background-color: var(--bg-danger) !important; +} + +body.theme-highcontrast .hc\\:bg-success { + background-color: var(--bg-success) !important; +} + +body.theme-highcontrast .hc\\:bg-warning { + background-color: var(--bg-warning) !important; +} " `; diff --git a/packages/stacks-classic/lib/atomic/color.less b/packages/stacks-classic/lib/atomic/color.less index d7bc9ec048..df07c31335 100644 --- a/packages/stacks-classic/lib/atomic/color.less +++ b/packages/stacks-classic/lib/atomic/color.less @@ -33,4 +33,13 @@ .create-color-classes(@value, ~"@{value} !important", light, border-color); }); }); + + // Create high contrast mode conditional utility classes + .highcontrast-mode({ + // Utility classes + .create-colors(@set, classes, highcontrast); + + // Aliased utility classes (error, warning, etc) + .create-aliased-utility-classes(highcontrast); + }); } diff --git a/packages/stacks-classic/lib/exports/color-mixins.less b/packages/stacks-classic/lib/exports/color-mixins.less index b2aae6259b..09fbb924e0 100644 --- a/packages/stacks-classic/lib/exports/color-mixins.less +++ b/packages/stacks-classic/lib/exports/color-mixins.less @@ -21,7 +21,7 @@ * * @mode - Determines what to generate and which mode set to use. */ -// +// .generate-colors(@mode: light) { @set: .sets-mode()[$@mode]; @setUtility: .sets-utility-mode()[$@mode]; @@ -147,6 +147,23 @@ } } } + + // Create high contrast mode atomic class assignments + & when (@modeSimple = highcontrast) { + // Create fc atomic class assignments + & when (@property = all), (@property = color) { + .hc\:fc-@{name} { + color: @value; + } + } + + // Create bg atomic class assignments + & when (@property = all), (@property = background-color) { + .hc\:bg-@{name} { + background-color: @value; + } + } + } } /** diff --git a/packages/stacks-docs/product/develop/conditional-classes.html b/packages/stacks-docs/product/develop/conditional-classes.html index 8bcc23459c..642d9b896c 100644 --- a/packages/stacks-docs/product/develop/conditional-classes.html +++ b/packages/stacks-docs/product/develop/conditional-classes.html @@ -137,3 +137,18 @@ + +
+ {% header "h2", "High contrast mode" %} +

Stacks provides high contrast mode atomic classes for improved accessibility. By applying .hc:fc-black-600, you're saying "In high contrast mode, apply a font color of black 600." These classes are particularly useful for ensuring text remains readable when users enable high contrast mode.

+
+{% highlight html %} +
+{% endhighlight %} +
+
This element will use black-400 font color normally, but will switch to black-600 in high contrast mode for better readability.
+
+
+ +

High contrast conditional classes are available for font colors (.hc:fc-*), and background colors (.hc:bg-*).

+