@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/atomic/border.less

@@ -1,33 +1,3 @@
-//
-//  STACK OVERFLOW
-//  BORDER CLASSES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • BORDER
-//  • WIDTH
-//  • STYLE
-//  • RADIUS
-//  • COLORS
-//
-//  ============================================================================
-//  $   BORDER
-//      Default border has 1px width and solid style. To apply a non-black
-//      color, use a border-color class.
-//
-//      Border Sides:
-//      bn: border none
-//      ba: border all sides
-//      bt: border top side
-//      br: border right side
-//      bl: border left side
-//      bb: border bottom side
-//      bx: border x-axis
-//      by: border y-axis
-//  ----------------------------------------------------------------------------
 #stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
 #stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
 #stacks-internals #responsify('.br', { .brs-solid; .brw1; });
@@ -38,11 +8,6 @@
 
 //  ============================================================================
 //  $   WIDTH
-//      w0: 0 border width
-//      w1: First step:    1px border width
-//      w2: Second step:   2px border width
-//      w3: Third step:    4px border width
-//      w4: Fourth step:   8px border width
 //  ----------------------------------------------------------------------------
 //  $$  All Sides
 #stacks-internals #responsify('.baw0', { border-width: 0 !important; });
@@ -90,8 +55,6 @@
 
 //  ============================================================================
 //  $   STYLE
-//      s-dashed: dashed border style
-//      s-solid:  solid border style
 //  ============================================================================
 //  $$  All sides
 .bas-solid { border-style: solid !important; }
@@ -116,9 +79,6 @@
 
 //  ============================================================================
 //  $   BORDER RADIUS
-//      br-sm:  Small step:   4px border radius
-//      br-md:  Medium step:  6px border radius
-//      br-lg:  Large step:   8px border radius
 //  ----------------------------------------------------------------------------
 //  $$  All Sides
 .bar-sm { border-radius: var(--br-sm) !important; }
@@ -177,221 +137,3 @@
 
 //  $$  All Sides
 #stacks-internals #responsify('.bar0', { border-radius: 0 !important; });
-
-//  ============================================================================
-//  $   COLORS
-//  ============================================================================
-//  $$  WHITE
-//  ----------------------------------------------------------------------------
-.bc-white-1 { border-color: var(--black-500) !important; }
-.bc-white-2 { border-color: var(--black-300) !important; }
-.bc-white-3,
-.bc-white { border-color: var(--white) !important; }
-
-.highcontrast-mode({
-    .bc-white-1 { border-color: var(--black-025) !important; }
-    .bc-white-2 { border-color: var(--black-050) !important; }
-});
-
-//  $$  BLACK
-//  ----------------------------------------------------------------------------
-.bc-black-025 { border-color: var(--black-025) !important; }
-.bc-black-1, // Deprecated
-.bc-black-050 { border-color: var(--black-050) !important; }
-.bc-black-2, // Deprecated
-.bc-black-075 { border-color: var(--black-075) !important; }
-.bc-black-3, // Deprecated
-.bc-black-100 { border-color: var(--black-100) !important; }
-.bc-black-150 { border-color: var(--black-150) !important; }
-.bc-black-4, // Deprecated
-.bc-black-200 { border-color: var(--black-200) !important; }
-.bc-black-5, // Deprecated
-.bc-black-300 { border-color: var(--black-300) !important; }
-.bc-black-350 { border-color: var(--black-350) !important; }
-.bc-black-6, // Deprecated
-.bc-black-400 { border-color: var(--black-400) !important; }
-.bc-black-7, // Deprecated
-.bc-black-500 { border-color: var(--black-500) !important; }
-.bc-black-600 { border-color: var(--black-600) !important; }
-.bc-black-8, // Deprecated
-.bc-black-700 { border-color: var(--black-700) !important; }
-.bc-black-750 { border-color: var(--black-750) !important; }
-.bc-black-9, // Deprecated
-.bc-black-800 { border-color: var(--black-800) !important; }
-.bc-black-10, // Deprecated
-.bc-black-900 { border-color: var(--black-900) !important; }
-
-.highcontrast-mode({
-    .bc-black-025,
-    .bc-black-1, // Deprecated
-    .bc-black-050,
-    .bc-black-2, // Deprecated
-    .bc-black-075,
-    .bc-black-3, // Deprecated
-    .bc-black-100,
-    .bc-black-150,
-    .bc-black-4, // Deprecated
-    .bc-black-200 { border-color: var(--black-300) !important; }
-});
-
-//  $$  ORANGE
-//  ----------------------------------------------------------------------------
-.bc-orange-050 { border-color: var(--orange-050) !important; }
-.bc-orange-1, // Deprecated
-.bc-orange-100 { border-color: var(--orange-100) !important; }
-.bc-orange-200 { border-color: var(--orange-200) !important; }
-.bc-orange-300 { border-color: var(--orange-300) !important; }
-.bc-orange-2, // Deprecated
-.bc-orange-400 { border-color: var(--orange-400) !important; }
-.bc-orange-500 { border-color: var(--orange-500) !important; }
-.bc-orange-3, // Deprecated
-.bc-orange-600 { border-color: var(--orange-600) !important; }
-.bc-orange-700 { border-color: var(--orange-700) !important; }
-.bc-orange-800 { border-color: var(--orange-800) !important; }
-.bc-orange-900 { border-color: var(--orange-900) !important; }
-
-//  $$  BLUE
-//  ----------------------------------------------------------------------------
-.bc-blue-050 { border-color: var(--blue-050) !important; }
-.bc-blue-1, // Deprecated
-.bc-blue-100 { border-color: var(--blue-100) !important; }
-.bc-blue-200 { border-color: var(--blue-200) !important; }
-.bc-blue-300 { border-color: var(--blue-300) !important; }
-.bc-blue-2, // Deprecated
-.bc-blue-400 { border-color: var(--blue-400) !important; }
-.bc-blue-500 { border-color: var(--blue-500) !important; }
-.bc-blue-3, // Deprecated
-.bc-blue-600 { border-color: var(--blue-600) !important; }
-.bc-blue-700 { border-color: var(--blue-700) !important; }
-.bc-blue-800 { border-color: var(--blue-800) !important; }
-.bc-blue-900 { border-color: var(--blue-900) !important; }
-
-//  $$  POWDER
-//  ----------------------------------------------------------------------------
-.bc-powder-050 { border-color: var(--powder-050) !important; }
-.bc-powder-1, // Deprecated
-.bc-powder-100 { border-color: var(--powder-100) !important; }
-.bc-powder-200 { border-color: var(--powder-200) !important; }
-.bc-powder-300 { border-color: var(--powder-300) !important; }
-.bc-powder-2, // Deprecated
-.bc-powder-400 { border-color: var(--powder-400) !important; }
-.bc-powder-500 { border-color: var(--powder-500) !important; }
-.bc-powder-3, // Deprecated
-.bc-powder-600 { border-color: var(--powder-600) !important; }
-.bc-powder-700 { border-color: var(--powder-700) !important; }
-.bc-powder-800 { border-color: var(--powder-800) !important; }
-.bc-powder-900 { border-color: var(--powder-900) !important; }
-
-//  $$  GREEN
-//  ----------------------------------------------------------------------------
-.bc-green-025 { border-color: var(--green-025) !important; }
-.bc-green-050 { border-color: var(--green-050) !important; }
-.bc-green-1, // Deprecated
-.bc-green-100 { border-color: var(--green-100) !important; }
-.bc-green-200 { border-color: var(--green-200) !important; }
-.bc-green-300 { border-color: var(--green-300) !important; }
-.bc-green-2, // Deprecated
-.bc-green-400 { border-color: var(--green-400) !important; }
-.bc-green-500 { border-color: var(--green-500) !important; }
-.bc-green-3, // Deprecated
-.bc-success,
-.bc-green-600 { border-color: var(--green-600) !important; }
-.bc-green-700 { border-color: var(--green-700) !important; }
-.bc-green-800 { border-color: var(--green-800) !important; }
-.bc-green-900 { border-color: var(--green-900) !important; }
-
-//  $$  RED
-//  ----------------------------------------------------------------------------
-.bc-red-025 { border-color: var(--red-025) !important; }
-.bc-red-050 { border-color: var(--red-050) !important; }
-.bc-red-1, // Deprecated
-.bc-red-100 { border-color: var(--red-100) !important; }
-.bc-red-200 { border-color: var(--red-200) !important; }
-.bc-red-300 { border-color: var(--red-300) !important; }
-.bc-red-2, // Deprecated
-.bc-error,
-.bc-red-400 { border-color: var(--red-400) !important; }
-.bc-red-500 { border-color: var(--red-500) !important; }
-.bc-red-3, // Deprecated
-.bc-red-600 { border-color: var(--red-600) !important; }
-.bc-red-700 { border-color: var(--red-700) !important; }
-.bc-red-800 { border-color: var(--red-800) !important; }
-.bc-red-900 { border-color: var(--red-900) !important; }
-
-//  $$  YELLOW
-//  ----------------------------------------------------------------------------
-.bc-yellow-050 { border-color: var(--yellow-050) !important; }
-.bc-yellow-100 { border-color: var(--yellow-100) !important; }
-.bc-yellow-1, // Deprecated
-.bc-yellow-200 { border-color: var(--yellow-200) !important; }
-.bc-yellow-300 { border-color: var(--yellow-300) !important; }
-.bc-yellow-2, // Deprecated
-.bc-yellow-400 { border-color: var(--yellow-400) !important; }
-.bc-yellow-500 { border-color: var(--yellow-500) !important; }
-.bc-yellow-3, // Deprecated
-.bc-warning,
-.bc-yellow-600 { border-color: var(--yellow-600) !important; }
-.bc-yellow-700 { border-color: var(--yellow-700) !important; }
-.bc-yellow-800 { border-color: var(--yellow-800) !important; }
-.bc-yellow-900 { border-color: var(--yellow-900) !important; }
-
-//  $$  GOLD
-//  ----------------------------------------------------------------------------
-.bc-gold-lighter { border-color: var(--gold-lighter) !important; }
-.bc-gold { border-color: var(--gold) !important; }
-.bc-gold-darker { border-color: var(--gold-darker) !important; }
-
-//  $$  SILVER
-//  ----------------------------------------------------------------------------
-.bc-silver-lighter { border-color: var(--silver-lighter) !important; }
-.bc-silver { border-color: var(--silver) !important; }
-.bc-silver-darker { border-color: var(--silver-darker) !important; }
-
-//  $$  BRONZE
-//  ----------------------------------------------------------------------------
-.bc-bronze-lighter { border-color: var(--bronze-lighter) !important; }
-.bc-bronze { border-color: var(--bronze) !important; }
-.bc-bronze-darker { border-color: var(--bronze-darker) !important; }
-
-//  $$  PRIMARY
-//  ----------------------------------------------------------------------------
-.bc-theme-primary-025 { border-color: var(--theme-primary-025) !important; }
-.bc-theme-primary-050 { border-color: var(--theme-primary-050) !important; }
-.bc-theme-primary-075 { border-color: var(--theme-primary-075) !important; }
-.bc-theme-primary-100 { border-color: var(--theme-primary-100) !important; }
-.bc-theme-primary-150 { border-color: var(--theme-primary-150) !important; }
-.bc-theme-primary-200 { border-color: var(--theme-primary-200) !important; }
-.bc-theme-primary-300 { border-color: var(--theme-primary-300) !important; }
-.bc-theme-primary-350 { border-color: var(--theme-primary-350) !important; }
-.bc-theme-primary-400 { border-color: var(--theme-primary-400) !important; }
-.bc-theme-primary-500 { border-color: var(--theme-primary-500) !important; }
-.bc-theme-primary-600 { border-color: var(--theme-primary-600) !important; }
-.bc-theme-primary-700 { border-color: var(--theme-primary-700) !important; }
-.bc-theme-primary-800 { border-color: var(--theme-primary-800) !important; }
-.bc-theme-primary-900 { border-color: var(--theme-primary-900) !important; }
-
-//  $$  SECONDARY
-//  ----------------------------------------------------------------------------
-.bc-theme-secondary-025 { border-color: var(--theme-secondary-025) !important; }
-.bc-theme-secondary-050 { border-color: var(--theme-secondary-050) !important; }
-.bc-theme-secondary-075 { border-color: var(--theme-secondary-075) !important; }
-.bc-theme-secondary-100 { border-color: var(--theme-secondary-100) !important; }
-.bc-theme-secondary-150 { border-color: var(--theme-secondary-150) !important; }
-.bc-theme-secondary-200 { border-color: var(--theme-secondary-200) !important; }
-.bc-theme-secondary-300 { border-color: var(--theme-secondary-300) !important; }
-.bc-theme-secondary-350 { border-color: var(--theme-secondary-350) !important; }
-.bc-theme-secondary-400 { border-color: var(--theme-secondary-400) !important; }
-.bc-theme-secondary-500 { border-color: var(--theme-secondary-500) !important; }
-.bc-theme-secondary-600 { border-color: var(--theme-secondary-600) !important; }
-.bc-theme-secondary-700 { border-color: var(--theme-secondary-700) !important; }
-.bc-theme-secondary-800 { border-color: var(--theme-secondary-800) !important; }
-.bc-theme-secondary-900 { border-color: var(--theme-secondary-900) !important; }
-
-//  $$  TRANSPARENT
-//  ----------------------------------------------------------------------------
-.bc-transparent { border-color: transparent !important; }
-.d\:bc-transparent { .dark-mode({ border-color: transparent !important; }); }
-
-//  $$  INHERIT
-//  ----------------------------------------------------------------------------
-.bc-inherit { border-color: inherit !important; }

package/lib/atomic/color.less

@@ -1,210 +1,36 @@
-//
-//  STACK OVERFLOW
-//  COLORS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  UTILITY OVERRIDES
-//  Instead of re-adding colors to unique class names, use these atomic classes
-//  for text and background colors
-//  ============================================================================
+@import (reference) "../exports/color-mixins.less";
+@import (reference) "../exports/mixins.less";
 
 & {
-    .color(@color-name) {
-        .fc-@{color-name},
-        .h\:fc-@{color-name}:hover,
-        .f\:fc-@{color-name}:focus,
-        .f\:fc-@{color-name}:focus-within {
-            color: var(~"--@{color-name}") !important;
-        }
-        .d\:fc-@{color-name} {
-            .dark-mode({
-                color: var(~"--@{color-name}") !important;
-            });
-        }
+    @set: .sets-mode()[light];
+    @miscUtilityClasses: transparent, inherit;
 
-        .bg-@{color-name},
-        .h\:bg-@{color-name}:hover,
-        .f\:bg-@{color-name}:focus,
-        .f\:bg-@{color-name}:focus-within {
-            background-color: var(~"--@{color-name}") !important;
-        }
-        .d\:bg-@{color-name} {
-            .dark-mode({
-                background-color: var(~"--@{color-name}") !important;
-            });
-        }
-    }
+    // Create utility classes
+    .create-colors(@set, classes);
 
-    .standard-weights(@color) {
-        .color(~"@{color}-900");
-        .color(~"@{color}-800");
-        .color(~"@{color}-700");
-        .color(~"@{color}-600");
-        .color(~"@{color}-500");
-        .color(~"@{color}-400");
-        .color(~"@{color}-300");
-        .color(~"@{color}-200");
-        .color(~"@{color}-100");
-        .color(~"@{color}-050");
-    }
+    // Create aliased utility classes (error, warning, etc)
+    .create-aliased-utility-classes();
 
-    .standard-weights(black);
-    .standard-weights(orange);
-    .standard-weights(blue);
-    .standard-weights(powder);
-    .standard-weights(green);
-    .standard-weights(yellow);
-    .standard-weights(red);
-    .standard-weights(theme-primary);
-    .standard-weights(theme-secondary);
+    each(@miscUtilityClasses, {
+        .create-color-classes(@value, ~"@{value} !important", light, background-color);
+        .create-color-classes(@value, ~"@{value} !important", light, border-color);
+    });
 
-    // Additional color names
-    .color(white);
-    .color(black);
-    .color(black-750);
-    .color(black-350);
-    .color(black-150);
-    .color(black-075);
-    .color(black-025);
-    .color(green-025);
-    .color(red-025);
-    .color(theme-primary-350);
-    .color(theme-primary-150);
-    .color(theme-primary-075);
-    .color(theme-primary-025);
-    .color(theme-secondary-350);
-    .color(theme-secondary-150);
-    .color(theme-secondary-075);
-    .color(theme-secondary-025);
+    // Create theme-specific utility classes
+    .create-colors(.sets-theme-default(), classes);
 
-    .fc-success { &:extend(.fc-green-600); }
-    .fc-warning { &:extend(.fc-yellow-600); }
-    .fc-error,
-    .fc-danger { &:extend(.fc-red-500); }
-    .bg-success { &:extend(.bg-green-500); }
-    .bg-warning { &:extend(.bg-yellow-600); }
-    .bg-error,
-    .bg-danger { &:extend(.bg-red-500); }
-}
-
-.fc-theme-primary {
-    color: var(--theme-primary-color) !important;
-}
-
-.bg-theme-primary {
-    background-color: var(--theme-primary-color) !important;
-}
-
-.bc-theme-primary {
-    border-color: var(--theme-primary-color) !important;
-}
-
-.fc-theme-secondary {
-    color: var(--theme-secondary-color) !important;
-}
-
-.bg-theme-secondary {
-    background-color: var(--theme-secondary-color) !important;
-}
-
-.bc-theme-secondary {
-    border-color: var(--theme-secondary-color) !important;
-}
-
-.fc-white__forced {
-    color: @white !important;
-}
-
-.fc-black__forced {
-    color: @black !important;
-}
-
-.fc-gold {
-    color: var(--gold) !important;
-}
-
-.fc-gold-darker {
-    color: var(--gold-darker) !important;
-}
-
-.fc-gold-lighter {
-    color: var(--gold-lighter) !important;
-}
-
-.bg-gold {
-    background-color: var(--gold) !important;
-}
-
-.bg-gold-darker {
-    background-color: var(--gold-darker) !important;
-}
-
-.bg-gold-lighter {
-    background-color: var(--gold-lighter) !important;
-}
-
-.fc-silver {
-    color: var(--silver) !important;
-}
-
-.fc-silver-darker {
-    color: var(--silver-darker) !important;
-}
-
-.fc-silver-lighter {
-    color: var(--silver-lighter) !important;
-}
-
-.bg-silver {
-    background-color: var(--silver) !important;
-}
-
-.bg-silver-darker {
-    background-color: var(--silver-darker) !important;
-}
-
-.bg-silver-lighter {
-    background-color: var(--silver-lighter) !important;
-}
-
-.fc-bronze {
-    color: var(--bronze) !important;
-}
-
-.fc-bronze-darker {
-    color: var(--bronze-darker) !important;
-}
-
-.fc-bronze-lighter {
-    color: var(--bronze-lighter) !important;
-}
-
-.bg-bronze {
-    background-color: var(--bronze) !important;
-}
+    // Create dark mode conditional utility classes
+    .dark-mode({
+        // Utility classes
+        .create-colors(@set, classes, dark);
 
-.bg-bronze-darker {
-    background-color: var(--bronze-darker) !important;
-}
-
-.bg-bronze-lighter {
-    background-color: var(--bronze-lighter) !important;
-}
-
-.bg-transparent,
-.h\:bg-transparent:hover {
-    background-color: transparent !important;
-    background-image: none !important;
-}
-
-.bg-inherit {
-    background-color: inherit !important;
-}
+        // Aliased utility classes (error, warning, etc)
+        .create-aliased-utility-classes(dark);
 
-.fc-inherit {
-    color: inherit !important;
+        // Misc utility classes
+        each(@miscUtilityClasses, {
+            .create-color-classes(@value, ~"@{value} !important", light, background-color);
+            .create-color-classes(@value, ~"@{value} !important", light, border-color);
+        });
+    });
 }

package/lib/atomic/color.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("atomic: color", () => {
+    it("should output v2 atomic css classes for colors", async () => {
+        const css = await renderLess(`
+            @import "./lib/atomic/color.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/atomic/misc.less

@@ -303,12 +303,13 @@
 }
 
 //  --  Added hover styles for box-shadow
-.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) @black-050 !important; }
-.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) @black-100 !important; }
-.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(@black-300, 70%) !important; }
-.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(@black-200, 75%) !important; }
-.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(@black-350, 80%) !important; }
-.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 @black-350 !important; }
+// TODO do we still need them? Can we deprecate/remove these weird hover classes?
+.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) .set-black()[150] !important; }
+.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) .set-black()[225] !important; }
+.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(.set-black()[350], 70%) !important; }
+.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[300], 75%) !important; }
+.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[350], 80%) !important; }
+.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 .set-black()[350] !important; }
 
 //  ============================================================================
 //  $  TRANSITIONS

package/lib/atomic/typography.less

@@ -67,13 +67,6 @@ p {
     }
 }
 
-//  ============================================================================
-//  $$  TEXT COLORS
-//  ----------------------------------------------------------------------------
-.fc-dark { color: var(--fc-dark) !important; }
-.fc-medium { color: var(--fc-medium) !important; }
-.fc-light { color: var(--fc-light) !important; }
-
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------