@coopdigital/styles 0.44.0 → 0.45.0

package/presets/uno/__tests__/rules.test.js

@@ -0,0 +1,101 @@
+import { describe, test, expect } from "vitest"
+import { bgColorRule, borderColorRule } from "../rules"
+
+const theme = {
+  colors: {
+    "brand-blue": "var(--color-brand-blue)",
+    red: {
+      100: "var(--color-red-100)",
+      500: "var(--color-red-500)",
+      DEFAULT: "var(--color-red-500)",
+    },
+    blue: {
+      DEFAULT: "var(--color-blue-500)",
+    },
+    teal: "var(--color-teal-500)",
+  },
+}
+
+describe("Test makeColorRule()", () => {
+  const bgRule = bgColorRule
+  const borderRule = borderColorRule
+
+  function runRule(rule, className) {
+    const [regex, handler] = rule
+    const match = className.match(regex)
+    if (!match) return null
+    return handler(match, { theme })
+  }
+
+  // ---------------------------
+  // Flat color tests
+  // ---------------------------
+
+  test("bg-brand-blue uses flat color var", () => {
+    const result = runRule(bgRule, "bg-brand-blue")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-brand-blue)",
+      "background-color": "var(--color-brand-blue)",
+    })
+  })
+
+  test("bg-teal uses flat color but different var name", () => {
+    const result = runRule(bgRule, "bg-teal")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-teal-500)",
+      "background-color": "var(--color-teal-500)",
+    })
+  })
+
+  // ---------------------------
+  // Nested color tests
+  // ---------------------------
+
+  test("bg-red-500 resolves nested shade", () => {
+    const result = runRule(bgRule, "bg-red-500")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-red-500)",
+      "background-color": "var(--color-red-500)",
+    })
+  })
+
+  test("bg-red falls back to DEFAULT shade", () => {
+    const result = runRule(bgRule, "bg-red")
+    expect(result).toEqual({
+      "--bg-color": "var(--color-red-500)",
+      "background-color": "var(--color-red-500)",
+    })
+  })
+
+  // ---------------------------
+  // Rule not matching
+  // ---------------------------
+
+  test("bg-red-200 returns undefined as 200 shade doesn't exist", () => {
+    const result = runRule(bgRule, "bg-red-200")
+    expect(result).toBeUndefined()
+  })
+
+  test("non-existent bg-yellow returns nothing", () => {
+    const result = runRule(bgRule, "bg-yellow")
+    expect(result).toBeUndefined()
+  })
+
+  test("wrong prefix does not match the regex (bg!=border)", () => {
+    const result = runRule(bgRule, "border-red-500")
+    expect(result).toBeNull()
+  })
+
+  // ---------------------------
+  // Border rule test
+  // ---------------------------
+
+  test("border-red-100 uses border props", () => {
+    const result = runRule(borderRule, "border-red-100")
+    expect(result).toEqual({
+      "--border-color": "var(--color-red-100)",
+      "border-color": "var(--color-red-100)",
+    })
+  })
+})
+;``

package/presets/uno/index.js

@@ -1,4 +1,19 @@
 import { definePreset } from "unocss"
+import { bgColorRule, borderColorRule } from "./rules"
+
+function generateTertiaryColors() {
+  const hues = ["blue", "green", "lilac", "orange", "pink", "purple", "red", "yellow"]
+  const variants = ["light", "tint", "dark"]
+  const out = {}
+  for (const h of hues) {
+    for (const v of variants) {
+      const key = `${v}-${h}` // e.g. "light-blue"
+      const cssVar = `var(--color-${key})`
+      out[key] = cssVar
+    }
+  }
+  return out
+}
 
 const presetCoop = definePreset(() => {
   return {
@@ -8,52 +23,82 @@ const presetCoop = definePreset(() => {
         ...theme,
         breakpoints: {
           ...theme.breakpoints,
-          lg: "1024px",
-          md: "768px",
+          xxs: "320px",
+          xs: "414px",
           sm: "600px",
+          md: "768px",
+          lg: "1024px",
           xl: "1312px",
-          xs: "414px",
           xxl: "1536px",
-          xxs: "320px",
         },
         colors: {
           ...theme.colors,
-          blue: "var(--color-blue)",
           "brand-blue": "var(--color-brand-blue)",
-          "dark-blue": "var(--color-dark-blue)",
-          "dark-green": "var(--color-dark-green)",
-          "dark-grey": "var(--color-dark-grey)",
-          "dark-lilac": "var(--color-dark-lilac)",
-          "dark-orange": "var(--color-dark-orange)",
-          "dark-pink": "var(--color-dark-pink)",
-          "dark-purple": "var(--color-dark-purple)",
-          "dark-red": "var(--color-dark-red)",
-          "dark-yellow": "var(--color-dark-yellow)",
-          green: "var(--color-green)",
-          "light-blue": "var(--color-light-blue)",
-          "light-green": "var(--color-light-green)",
-          "light-grey": "var(--color-light-grey)",
-          "light-lilac": "var(--color-light-lilac)",
-          "light-orange": "var(--color-light-orange)",
-          "light-pink": "var(--color-light-pink)",
-          "light-purple": "var(--color-light-purple)",
-          "light-red": "var(--color-light-red)",
-          "light-yellow": "var(--color-light-yellow)",
-          "mid-dark-grey": "var(--color-mid-dark-grey)",
-          "mid-grey": "var(--color-mid-grey)",
-          "mid-light-grey": "var(--color-mid-light-grey)",
-          "offer-red": "var(--color-offer-red)",
-          red: "var(--color-offer-red)",
-          "tint-blue": "var(--color-tint-blue)",
-          "tint-brown": "var(--color-tint-brown)",
-          "tint-green": "var(--color-tint-green)",
-          "tint-grey": "var(--color-tint-grey)",
-          "tint-lilac": "var(--color-tint-lilac)",
-          "tint-orange": "var(--color-tint-orange)",
-          "tint-pink": "var(--color-tint-pink)",
-          "tint-purple": "var(--color-tint-purple)",
-          "tint-red": "var(--color-tint-red)",
-          "tint-yellow": "var(--color-tint-yellow)",
+          // BLUES
+          blue: {
+            500: "var(--color-blue-500)",
+            700: "var(--color-blue-700)",
+            DEFAULT: "var(--color-blue)",
+          },
+          // REDS
+          red: {
+            500: "var(--color-red-500)",
+            100: "var(--color-red-100)",
+            DEFAULT: "var(--color-red)",
+          },
+          // PURPLES
+          purple: {
+            500: "var(--color-purple-500)",
+            DEFAULT: "var(--color-purple)",
+          },
+          // YELLOWS
+          yellow: {
+            500: "var(--color-yellow-500)",
+            100: "var(--color-yellow-100)",
+            DEFAULT: "var(--color-yellow)",
+          },
+          // GREENS
+          green: {
+            500: "var(--color-green-500)",
+            100: "var(--color-green-100)",
+            DEFAULT: "var(--color-green)",
+          },
+          // TEALS
+          teal: {
+            500: "var(--color-teal-500)",
+            DEFAULT: "var(--color-teal)",
+          },
+          // NEUTRALS
+          white: "var(--color-white)",
+          black: "var(--color-black)",
+          "grey-warm": {
+            100: "var(--color-grey-warm-100)",
+            500: "var(--color-grey-warm-500)",
+            900: "var(--color-grey-warm-900)",
+            DEFAULT: "var(--color-grey-warm)",
+          },
+          "grey-cool": {
+            100: "var(--color-grey-cool-100)",
+            500: "var(--color-grey-cool-500)",
+            900: "var(--color-grey-cool-900)",
+            DEFAULT: "var(--color-grey-cool)",
+          },
+          grey: {
+            900: "var(--color-grey-900)",
+            800: "var(--color-grey-800)",
+            700: "var(--color-grey-700)",
+            600: "var(--color-grey-600)",
+            500: "var(--color-grey-500)",
+            400: "var(--color-grey-400)",
+            300: "var(--color-grey-300)",
+            200: "var(--color-grey-200)",
+            100: "var(--color-grey-100)",
+            DEFAULT: "var(--color-grey)",
+          },
+          // TERTIARY colours: tints, lights and darks
+          ...generateTertiaryColors(),
+          "tint-brown": "var(--color-grey-warm-100)",
+          "tint-grey": "var(--color-grey-200)",
         },
       }
     },
@@ -67,6 +112,31 @@ const presetCoop = definePreset(() => {
       ],
       ["font-headline", { "font-family": "'Co-opHeadline', 'Impact Fallback', sans-serif" }],
 
+      [
+        /^(bg|border)-(.*)$/,
+        function* ([, rule, color], { theme }) {
+          const root = color.split("-")[0]
+
+          // console.log(root, color)
+
+          if (root in theme.colors || color in theme.colors) {
+            const cssVar = `var(--color-${color})`
+            //const cssVar = extractColorVarName(value)
+            switch (rule) {
+              case "bg":
+                yield { "background-color": cssVar, "--bg-color": cssVar }
+                break
+              case "border":
+                yield { "border-color": cssVar, "--border-color": cssVar }
+                break
+            }
+          }
+        },
+      ],
+
+      //bgColorRule,
+      //borderColorRule,
+
       /* 
       To support presetWind3 and presetWind4 and probably future presets 
       we decided to use rules instead of editing font-size inside theme 
@@ -98,6 +168,63 @@ const presetCoop = definePreset(() => {
         "flex-center-between": "flex justify-between items-center",
         "flex-responsive": "flex flex-col md:flex-row",
         "flex-stack-vertical": "flex flex-col gap-4",
+
+        // SEMANTIC COLORS
+
+        // Blues
+        "text-link": "text-blue-500",
+        //"text-button-secondary2": "text-blue-700",
+        //"bg-button-primary2": "bg-blue-700",
+        "icon-brand-blue": "fill-brand-blue",
+
+        // Teal
+        //"text-button-secondary": "text-teal",
+        //"bg-button-primary": "bg-teal",
+
+        // Reds
+        "text-offer": "text-red-500",
+        "text-error": "text-red-500",
+        "bg-offer": "bg-red-500",
+        "bg-error": "bg-red-500",
+        "bg-error-light": "bg-red-100",
+        "border-offer": "border-red-500",
+        "border-error": "border-red-500",
+
+        // Purples
+        "border-focus-ring": "border-purple-500",
+
+        // Whites
+        "text-inverse": "text-white",
+        "icon-inverse": "fill-white",
+
+        // Greys
+        "text-primary": "text-grey-900",
+        "text-secondary": "text-grey-800",
+        "bg-primary": "bg-white",
+        "bg-secondary": "bg-grey-200",
+        // "bg-membership": "bg-tint-blue",
+        "bg-footer": "bg-grey-900",
+        "bg-footer-light": "bg-grey-cool-100", // bg-footer-shop
+        // "bg-neutral-warm": "bg-grey-warm-100",
+        "border-divider": "border-grey-600",
+
+        // Yellows
+        "border-alert": "border-yellow-500",
+        "bg-alert-light": "bg-yellow-100",
+
+        // Greens
+        "text-success": "text-green-500",
+        "border-success": "border-green-500",
+        "bg-success-light": "bg-green-100",
+
+        // Tertiaries
+        "text-brand-red": "text-dark-red",
+        "text-brand-orange": "text-dark-orange",
+        "text-brand-yellow": "text-dark-yellow",
+        "text-brand-green": "text-dark-green",
+        "text-brand-lilac": "text-dark-purple",
+        "text-brand-purple": "text-dark-lilac",
+        "text-brand-pink": "text-dark-pink",
       },
     ],
   }

package/presets/uno/rules.js

@@ -0,0 +1,72 @@
+function extractColorVarName(value) {
+  const match = /var\(\s*(--[^)]+)\s*\)/.exec(value)
+  return match ? match[1] : null
+}
+
+function makeColorRule(prefix, props) {
+  const regex = new RegExp(`^${prefix}-(.+)$`)
+
+  return [
+    regex,
+    ([, token], ctx) => {
+      const colors = ctx.theme && ctx.theme.colors
+      if (!colors) return
+
+      let value = null
+
+      //
+      // 1. True flat colors — must NOT be an object
+      //
+      if (token in colors && typeof colors[token] !== "object") {
+        value = colors[token]
+      }
+      //
+      // 2. Nested colors (object) eg: red-500 or red (DEFAULT)
+      //
+      else {
+        const parts = token.split("-")
+        const shade = parts.pop() // "500"
+        const name = parts.join("-") || token
+
+        const colorObj = colors[name]
+
+        if (colorObj && typeof colorObj === "object") {
+          // Normalize keys to strings
+          const keys = Object.keys(colorObj).map(String)
+
+          let selectedShade = null
+
+          // If the user-specified shade exists → use it
+          if (keys.includes(shade)) {
+            selectedShade = shade
+          }
+          // If user DID NOT specify a shade (like "bg-red") → use DEFAULT
+          else if (token === name) {
+            // example: token="red", name="red"
+            if (keys.includes("DEFAULT")) {
+              selectedShade = "DEFAULT"
+            }
+          }
+
+          // If no matching shade found → undefined
+          if (selectedShade === null) return
+
+          value = colorObj[selectedShade]
+        }
+      }
+
+      if (!value) return
+
+      const varName = extractColorVarName(value)
+      if (!varName) return
+
+      const out = {}
+      props.forEach((prop) => (out[prop] = `var(${varName})`))
+      return out
+    },
+  ]
+}
+
+export const bgColorRule = makeColorRule("bg", ["--bg-color", "background-color"])
+
+export const borderColorRule = makeColorRule("border", ["--border-color", "border-color"])

package/src/components/AlertBanner.scss

@@ -1,7 +1,7 @@
 .coop-alert-banner {
-  --bg-color: var(--color-orange-alert-light);
-  --text-color: var(--color-text-default);
-  --border-left: solid 0.25rem var(--color-orange-alert);
+  --alert-bg-color: var(--color-alert-light);
+  --alert-text-color: var(--color-text-default);
+  --alert-border-left: solid 0.25rem var(--color-alert);
 
   display: flex;
   flex-direction: column;
@@ -9,16 +9,16 @@
 
   width: 100%;
   padding: var(--spacing-16);
-  border-left: var(--border-left);
+  border-left: var(--alert-border-left);
 
-  color: var(--text-color);
+  color: var(--alert-text-color);
 
-  background-color: var(--bg-color);
+  background-color: var(--alert-bg-color);
 
   &[data-variant="black"] {
-    --bg-color: var(--color-black);
-    --text-color: var(--color-white);
-    --border-left: 0;
+    --alert-bg-color: var(--color-black);
+    --alert-text-color: var(--color-white);
+    --alert-border-left: 0;
   }
 
   a {

package/src/components/Button.scss

@@ -1,49 +1,14 @@
-@use "sass:map";
 @use "../breakpoints.scss" as *;
 @use "../keyframes/spinner";
 
-$variants: (
-  "blue": (
-    bg-color: var(--color-blue),
-    text-color: var(--color-white),
-  ),
-  "white": (
-    bg-color: var(--color-white),
-    text-color: var(--color-black),
-  ),
-  "grey": (
-    bg-color: var(--color-grey),
-    text-color: var(--color-black),
-  ),
-  "green-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-green),
-    border: 2px solid var(--color-green),
-  ),
-  "blue-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-blue),
-    border: 2px solid var(--color-blue),
-  ),
-  "white-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-white),
-    border: 2px solid var(--color-white),
-  ),
-  "grey-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-grey),
-    border: 2px solid var(--color-grey),
-  ),
-);
-
 .coop-button {
-  --bg-color: var(--color-green);
-  --text-color: var(--color-white);
-  --font-size: var(--text-size-18);
-  --border: 0;
-  --padding: 0 var(--spacing-24);
-  --height: var(--spacing-48);
+  --button-font-size: var(--text-size-18);
+  --button-border-color: var(--border-color, transparent);
+  --button-padding-y: 0;
+  --button-padding-x: var(--spacing-24);
+  --button-padding: var(--button-padding-y) var(--button-padding-x);
+  --button-height: var(--spacing-48);
+  --button-bg-color: var(--bg-color, var(--color-teal));
 
   cursor: pointer;
 
@@ -53,44 +18,37 @@ $variants: (
   justify-content: center;
 
   width: max-content;
-  height: var(--height);
-  min-height: var(--height);
-  padding: var(--padding);
-  border: var(--border);
+  height: var(--button-height);
+  min-height: var(--button-height);
+  padding: var(--button-padding);
+  border-style: solid;
+  border-width: 0;
   border-radius: var(--ui-border-radius-lg);
 
-  font-size: var(--font-size);
+  font-size: var(--button-font-size);
   font-weight: 500;
   line-height: var(--type-line-height-default);
-  color: var(--text-color);
   text-align: center;
-  text-decoration: underline;
-  text-decoration-color: transparent;
 
-  background: var(--bg-color);
+  background: var(--button-bg-color);
 
   transition: 0.1s ease-out;
-  transition-property: background-color, color, text-decoration-color;
+  transition-property: background-color, color, border-color;
 
   /* SIZES */
   &[data-size="sm"] {
-    --padding: 0 var(--spacing-16);
-    --height: var(--spacing-40);
-    --font-size: var(--text-size-16);
+    --button-padding-x: var(--spacing-16);
+    --button-height: var(--spacing-40);
+    --button-font-size: var(--text-size-16);
   }
 
   &[data-size="lg"] {
-    --padding: 0 var(--spacing-32);
-    --height: var(--spacing-56);
-    --font-size: var(--text-size-20);
+    --button-padding-x: var(--spacing-32);
+    --button-height: var(--spacing-56);
+    --button-font-size: var(--text-size-20);
   }
 
-  // &[data-size="xl"] {
-  //   --min-height: var(--spacing-60);
-  // }
-
   &:is(a) {
-    color: var(--text-color);
     text-decoration-color: transparent;
   }
 
@@ -99,24 +57,13 @@ $variants: (
     outline-offset: 3px;
   }
 
-  &[aria-disabled],
-  &:disabled {
-    --bg-color: var(--color-mid-grey);
-    --text-color: var(--color-white);
-    --border: 0;
-
-    cursor: not-allowed;
-    outline: 0;
-  }
-
   &:not([data-loading], [aria-disabled], :disabled):hover {
-    color: var(--text-color);
-    text-decoration-color: var(--text-color);
-    background-color: hsl(from var(--bg-color) h s calc(l - 5));
+    text-decoration: solid underline currentColor;
+    background-color: hsl(from var(--button-bg-color) h s calc(l - 5));
   }
 
   &:not([data-loading], [aria-disabled], :disabled):active {
-    background-color: hsl(from var(--bg-color) h s calc(l - 10));
+    background-color: hsl(from var(--button-bg-color) h s calc(l - 10));
   }
 
   /* FULL WIDTH */
@@ -134,26 +81,29 @@ $variants: (
     }
   }
 
-  > * {
-    pointer-events: none;
+  &[data-variant="ghost"] {
+    --button-bg-color: transparent;
+    --button-border-color: var(--border-color, var(--color-teal));
+    --button-padding: var(--button-padding-y) calc(var(--button-padding-x) - 2px);
+
+    border-color: var(--button-border-color);
+    border-width: 2px;
+    color: var(--button-border-color);
   }
 
-  /* MEDIA QUERIES */
+  &[aria-disabled],
+  &:disabled {
+    cursor: not-allowed;
 
-  // @media (min-width: $mq-medium) {
-  //   --padding-x: var(--spacing-40);
-  // }
+    border: 0;
 
-  /* VARIANTS */
+    color: var(--color-white);
 
-  @each $variant, $colors in $variants {
-    &[data-variant="#{$variant}"]:not([aria-disabled], &:disabled) {
-      --bg-color: #{map.get($colors, "bg-color")};
-      --text-color: #{map.get($colors, "text-color")};
+    background: var(--color-grey-600);
+    outline: 0;
+  }
 
-      @if map.has-key($colors, "border") {
-        --border: #{map.get($colors, "border")};
-      }
-    }
+  > * {
+    pointer-events: none;
   }
 }

package/src/components/Card.scss

@@ -2,10 +2,8 @@
 
 .coop-card {
   --card-direction: column;
-  --image-max-width: 100%;
-  --image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
-  --label-bg: none;
-  --card-bg: var(--color-white);
+  --card-image-max-width: 100%;
+  --card-image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
 
   position: relative;
 
@@ -14,7 +12,6 @@
 
   border-radius: var(--ui-border-radius-lg);
 
-  background: var(--card-bg);
   box-shadow: var(--ui-shadow);
 
   transition: box-shadow var(--ui-transition-hover);
@@ -22,23 +19,23 @@
   &[data-orientation="horizontal"] {
     @media (min-width: $mq-medium) {
       --card-direction: row;
-      --image-max-width: calc(100% / 3);
-      --image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
+      --card-image-max-width: calc(100% / 3);
+      --card-image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
     }
   }
 
   &[data-orientation="horizontal"][data-image-pos="right"] {
     @media (min-width: $mq-medium) {
       --card-direction: row-reverse;
-      --image-border-radius: 0 var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0;
+      --card-image-border-radius: 0 var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0;
     }
   }
 
   picture {
     overflow: hidden;
-    max-width: var(--image-max-width);
+    max-width: var(--card-image-max-width);
     margin: 0;
-    border-radius: var(--image-border-radius);
+    border-radius: var(--card-image-border-radius);
 
     img {
       width: 100%;