@stackoverflow/stacks 1.10.2 → 2.0.0-rc.0

package/lib/exports/color-mixins.less

@@ -0,0 +1,280 @@
+@import (reference) "./mixins.less";
+@import (reference) "./color-sets.less";
+@import (reference) "./theme.less";
+
+// Type definitions
+//
+// @mode: light | dark | light-highcontrast | dark-highcontrast;
+// @modeCustom: base | dark; // legacy we're supporting for theming in Core
+// @modeSimple: light | dark; // TODO consider different name?
+// @property: all | background-color | border-color | color;
+// @set: { [key: stop]: color }[];
+// @sets: set[] | { [key: string]: set }[];
+// @stop: default | 050 | 100 | 150 | 200 | 225 | 300 | 350 | 400 | 500 | 600;
+// @tier: primary | secondary;
+// @type: classes | variables;
+
+/**
+ * Primary function to generate colors variables for a given mode.
+ *
+ * Usage example:
+ * .generate-colors(dark);
+ *
+ * @mode - Determines what to generate and which mode set to use.
+ */
+// 
+.generate-colors(@mode: light) {
+    @set: .sets-mode()[$@mode];
+    @setUtility: .sets-utility-mode()[$@mode];
+    @modeCustom: if(@mode = dark, dark, base);
+
+    & when (@mode = light), (@mode = dark) {
+        &,
+        &.themed,
+        & .themed {
+            .create-colors(@set);
+            .create-colors(@setUtility);
+            .create-theme-variables(@mode);
+            .create-custom-theme-variables(primary, @modeCustom);
+            .create-custom-theme-variables(secondary, @modeCustom);
+        }
+    }
+
+    & when (@mode = light-highcontrast), (@mode = dark-highcontrast) {
+        .create-colors(@set);
+        .create-colors(@setUtility);
+        .create-theme-variables(@mode);
+        --_o-disabled: 0.8;
+    }
+}
+
+/**
+ * Creates color variables or atomic classes based on the given sets of colors.
+ *
+ * Usage example:
+ * .create-colors(.sets-mode()[dark], classes);
+ *
+ * @sets - (required) A collection of name/set pairs.
+ * @type - The type of output.
+ * @modeSimple - The mode to use for generating classes.
+ * @property - The property to use for generating classes.
+ */
+.create-colors(@sets, @type: variables, @modeSimple: light, @property: all) {
+    each(@sets, .(@set, @setName, @iSet) {
+        each(@set, .(@value, @stop, @iColorValue) {
+            @suffix: if((@stop = default), "", ~"-@{stop}");
+            @name: ~"@{setName}@{suffix}";
+            @variable: ~"--@{name}";
+
+            // Create custom property assignment
+            & when (@type = variables) {
+                @{variable}: @value;
+            }
+
+            // Create bg atomic class assignments
+            & when (@type = classes) {
+                @customValue: ~"var(@{variable}) !important";
+                .create-color-classes(@name, @customValue, @modeSimple, @property);
+            }
+        });
+  });
+}
+
+/**
+ * Creates atomic color classes for background and text color with the given color name and property value.
+ *
+ * Usage example:
+ * .create-color-classes(red-500, var(--red-500));
+ *
+ * @name - (required) Used as a suffix to each class.
+ * @value - (required) The value assigned to the generated class' property.
+ * @modeSimple - Generate either all standard or dark conditional classes.
+ * @property - Determines which type(s) of atomic class to generate.
+ */
+.create-color-classes(@name, @value, @modeSimple: light, @property: all) {
+    & when (@modeSimple = light) {
+        // Create bg atomic class assignments
+        & when (@property = all), (@property = background-color) {
+            .bg-@{name},
+            .h\:bg-@{name}:hover,
+            .f\:bg-@{name}:focus,
+            .f\:bg-@{name}:focus-within {
+                background-color: @value;
+            }
+        }
+
+        // Create bc atomic class assignments
+        & when (@property = all), (@property = border-color) {
+            .bc-@{name},
+            .h\:bc-@{name}:hover,
+            .f\:bc-@{name}:focus,
+            .f\:bc-@{name}:focus-within {
+                border-color: @value;
+            }
+        }
+
+        // Create fc atomic class assignments
+        & when (@property = all), (@property = color) {
+            .fc-@{name},
+            .h\:fc-@{name}:hover,
+            .f\:fc-@{name}:focus,
+            .f\:fc-@{name}:focus-within {
+                color: @value;
+            }
+        }
+    }
+
+    // Create dark mode atomic class assignments
+    & when (@modeSimple = dark) {
+        // Note: we currently do not generate conditional border-color classes
+        // & when (@property = all), (@property = border-color) {
+        //     .d\:bc-@{name} {
+        //         border-color: @value;
+        //     }
+        // }
+
+        // Create bg atomic class assignments
+        & when (@property = all), (@property = background-color) {
+            .d\:bg-@{name} {
+                background-color: @value;
+            }
+        }
+
+        // Create fc atomic class assignments
+        & when (@property = all), (@property = color) {
+            .d\:fc-@{name} {
+                color: @value;
+            }
+        }
+    }
+}
+
+/**
+ * Creates aliased color classes or variables.
+ *
+ * Usage example:
+ * .create-aliased-utility-colors(classes)
+ *
+ * @modeSimple - Generate either all standard or dark conditional classes.
+ */
+.create-aliased-utility-classes(@modeSimple: light) {
+    // TODO add font color aliases
+    each(.set-fc(), .(@value, @stop, @iColorValue) {
+        @customValue: ~"var(--fc-@{stop}) !important";
+        .create-color-classes(@stop, @customValue, @modeSimple, color);
+    });
+    each(.set-utility-alias(), .(@value, @stop, @iColorValue) {
+        @customValue: ~"var(--bg-@{stop}) !important";
+        .create-color-classes(@stop, @customValue, @modeSimple, background-color);
+    });
+    each(.set-utility-alias(), .(@value, @stop, @iColorValue) {
+        @suffix: if((@stop = default), "", ~"@{stop}");
+        @customValue: ~"var(--bc-@{stop}) !important";
+        .create-color-classes(@stop, @customValue, @modeSimple, border-color);
+    });
+}
+
+// THEMING -- PUBLIC API
+/**
+ * Creates theme h/s/l and r/g/b variables based on the given color for a specified theme.
+ * Replaces .generate-calculated-themed-variables() (referenced in Core)
+ * Maintains API parity with legacy .generate-calculated-themed-variables()
+ *
+ * Usage example:
+ * .create-custom-theme-hsl-variables("#ff1100", secondary, dark);
+ *
+ * @color - (required) The color to be used to generate h/s/g and /r/g/b values.
+ * @tier - The tier name to be used to generate the variable name.
+ * @modeCustom - A custom label to be used to generate the variable name.
+ */
+.create-custom-theme-hsl-variables(@color, @tier: primary, @modeCustom: base) {
+    @varBase: ~"--theme-@{modeCustom}-@{tier}-color";
+
+    @{varBase}-h: hue(@color);
+    @{varBase}-s: saturation(@color);
+    @{varBase}-l: lightness(@color);
+
+    .create-custom-theme-variables(@tier, @modeCustom);
+}
+
+// THEMING -- PSEUDO-PRIVATE API
+/**
+ * Defines custom theme varaibles from assembled h/s/l variables
+ *
+ * Usage example:
+ * .create-custom-theme-variables(base);
+ *
+ * @tier - The tier name to be used to generate the variable name.
+ * @modeCustom - A custom label to be used to generate the variable name.
+ */
+.create-custom-theme-variables(@tier: primary, @modeCustom: base) {
+    @valueVar: ~"theme-@{modeCustom}-@{tier}-color";
+    @focusRingHSLVars: ~"var(--@{valueVar}-h), var(--@{valueVar}-s), var(--@{valueVar}-l)";
+
+    // TODO verify color stops with design
+    & when (@modeCustom = base) {
+        @varBase: ~"--theme-@{tier}-custom";
+
+        @{varBase}-100: .native-lightness(@valueVar, 50, 70, 95)[];
+        @{varBase}-200: .native-lightness(@valueVar, 35, 55, 90)[];
+        @{varBase}-300: .native-lightness(@valueVar, 15, 35, 75)[];
+        @{varBase}-400: .native-lightness(@valueVar, 0, 20, 60)[];
+        @{varBase}-500: .native-lightness(@valueVar, -14, 13, 50)[];
+        @{varBase}-600: .native-lightness(@valueVar, -26, 5, 40)[];
+        @{varBase}: ~"var(@{varBase}-400)";
+
+        & when (@tier = secondary) {
+            @{varBase}-focus-ring: ~"hsla(@{focusRingHSLVars}, 0.15)";
+        }
+    }
+
+    & when (@modeCustom = dark) {
+        @varBaseDark: ~"--theme-@{modeCustom}-@{tier}-custom";
+
+        @{varBaseDark}-100: .native-saturation-lightness(@valueVar, -12, -60, 15, 30)[];
+        @{varBaseDark}-200: .native-saturation-lightness(@valueVar, -10, -45, 25, 45)[];
+        @{varBaseDark}-300: .native-saturation-lightness(@valueVar, -7, -33, 35, 70)[];
+        @{varBaseDark}-400: .native-lightness(@valueVar, 0, 55, 85)[];
+        @{varBaseDark}-500: .native-lightness(@valueVar, 10, 70, 90)[];
+        @{varBaseDark}-600: .native-lightness(@valueVar, 20, 85, 95)[];
+        @{varBaseDark}: ~"var(@{varBaseDark}-400)";
+
+        & when (@tier = secondary) {
+            @{varBaseDark}-focus-ring: ~"hsla(@{focusRingHSLVars}, 0.25)";
+        }
+    }
+}
+
+/**
+ * Generates theme variables with values mapped to custom hsl values
+ *
+ * Usage example:
+ * .create-theme-variables();
+ *
+ * @mode - determines which variable naming convention to use.
+ */
+.create-theme-variables(@mode: light) {
+    @tiers: primary, secondary;
+
+    each(@tiers, .(@tier, @k, @i) {
+        @stops: 100, 200, 300, 400, 500, 600;
+        @fallbackColor: if(@tier = primary, orange, blue);
+        @baseThemeVar: ~"--theme-@{tier}";
+        @customThemeVar: if(@mode = light, ~"@{baseThemeVar}-custom", ~"--theme-dark-@{tier}-custom");
+
+        & when (@mode = light), (@mode = dark) {
+            @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
+            each(@stops, .(@stop, @kStop, @iStop) {
+                @{baseThemeVar}-@{stop}: ~"var(@{customThemeVar}-@{stop}, var(--@{fallbackColor}-@{stop}))";
+            });
+        }
+
+        & when (@mode = light-highcontrast), (@mode = dark-highcontrast) {
+            @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
+
+            each(@stops, .(@stop, @kStop, @iStop) {
+                @{baseThemeVar}-@{stop}: ~"var(--@{fallbackColor}-@{stop})";
+            });
+        }
+    });
+}

package/lib/exports/color-mixins.less.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("color-mixins", () => {
+    describe("colors", () => {
+        describe("generate-colors", () => {
+            it("light", async () => {
+                const css = await renderLess(`
+                    @import (reference) "color-mixins.less";
+
+                    // TODO: figure out how to simplify sets to reduce output
+
+                    /* .generate-colors(light) */
+                    body {
+                        .generate-colors(light);
+                    }
+                `);
+
+                expect(css).toMatchSnapshot();
+            });
+        });
+        it("create-colors", async () => {
+            const css = await renderLess(`
+                @import (reference) "color-mixins.less";
+
+                /*
+                .set-test-emerald() {
+                    default: hsl(150, 60%, 55%);
+                }
+                .set-test-ruby() {
+                    100: hsl(350, 70%, 97%);
+                    600: hsl(350, 70%, 29%);
+                }
+                .sets-test() {
+                    emerald: .set-test-emerald();
+                    ruby: .set-test-ruby();
+                }
+                */
+                .set-test-emerald() {
+                    default: hsl(150, 60%, 55%);
+                }
+                .set-test-ruby() {
+                    100: hsl(350, 70%, 97%);
+                    600: hsl(350, 70%, 29%);
+                }
+                .sets-test() {
+                    emerald: .set-test-emerald();
+                    ruby: .set-test-ruby();
+                }
+
+                /* .create-colors(.sets-test(), variables) */
+                body {
+                    .create-colors(.sets-test(), variables);
+                }
+
+                /* .create-colors(.sets-test(), classes) */
+                body {
+                    .create-colors(.sets-test(), classes);
+                }
+            `);
+
+            expect(css).toMatchSnapshot();
+        });
+        it("create-color-classes", async () => {
+            const css = await renderLess(`
+                @import (reference) "color-mixins.less";
+                /* .create-color-classes(red-500, var(--red-500)) */
+                /* .create-color-classes(blue-400, var(--blue-400), dark, color) */
+                /* .create-color-classes(green-300, var(--green-300), light, background-color) */
+                body {
+                    .create-color-classes(red-500, var(--red-500));
+                    .create-color-classes(blue-500, var(--blue-500), dark, color);
+                    .create-color-classes(green-300, var(--green-300), light, background-color);
+                }
+            `);
+
+            expect(css).toMatchSnapshot();
+        });
+        it(".create-aliased-utility-classes", async () => {
+            const css = await renderLess(`
+                @import (reference) "color-mixins.less";
+                /* .create-aliased-utility-classes() */
+                /* .create-aliased-utility-classes(dark) */
+                body {
+                    .create-aliased-utility-classes();
+                }
+                body.theme-dark {
+                    .create-aliased-utility-classes(dark);
+                }
+            `);
+
+            expect(css).toMatchSnapshot();
+        });
+    });
+    describe("theming", () => {
+        it("create-custom-theme-hsl-rgb-variables", async () => {
+            const css = await renderLess(`
+                @import (reference) "color-mixins.less";
+                create-custom-theme-hsl-rgb-variables(#ff1100, primary, base) {
+                    .create-custom-theme-hsl-variables(#ff1100, primary, base);
+                }
+                create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
+                    .create-custom-theme-hsl-variables(#29ff53, secondary, base);
+                }
+                create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
+                    .create-custom-theme-hsl-variables(#1c091d, primary, dark);
+                }
+                create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
+                    .create-custom-theme-hsl-variables(#49281f, secondary, dark);
+                }
+            `);
+
+            expect(css).toMatchSnapshot();
+        });
+
+        it("create-theme-variables", async () => {
+            const css = await renderLess(`
+                @import (reference) "color-mixins.less";
+                body {
+                    .create-theme-variables();
+                }
+                body.theme-highcontrast {
+                    .create-theme-variables(light-highcontrast);
+                }
+            `);
+
+            expect(css).toMatchSnapshot();
+        });
+
+        it("create-custom-theme-variables", async () => {
+            const css = await renderLess(`
+                @import (reference) "color-mixins.less";
+                create-custom-theme-variables(primary, base) {
+                    .create-custom-theme-variables(primary, base);
+                }
+                create-custom-theme-variables(primary, dark) {
+                    .create-custom-theme-variables(primary, dark);
+                }
+                create-custom-theme-variables(secondary, base) {
+                    .create-custom-theme-variables(secondary, base);
+                }
+                create-custom-theme-variables(secondary, base) {
+                    .create-custom-theme-variables(secondary, base);
+                }
+            `);
+
+            expect(css).toMatchSnapshot();
+        });
+    });
+});