@coopdigital/styles 0.44.0 → 0.46.0

package/presets/uno/index.js

@@ -1,59 +1,104 @@
 import { definePreset } from "unocss"
 
+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 {
     name: "coop-preset",
+
     extendTheme: (theme) => {
       return {
         ...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/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%;

package/src/components/Checkbox.scss

@@ -69,7 +69,7 @@ input[type="checkbox"]:indeterminate + div label::after {
   border-radius: var(--ui-border-radius-sm);
 
   opacity: 1;
-  background: var(--color-mid-grey);
+  background: var(--color-grey-600);
 }
 
 input[type="checkbox"]:not(:disabled) + div label {

package/src/components/DatePicker.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable no-descending-specificity */
 /* stylelint-disable selector-class-pattern */
 @use "../breakpoints.scss" as *;
 
@@ -6,7 +5,34 @@
   width: 100%;
 
   &[data-mode="range"] {
-    min-width: 21.25rem;
+    min-width: 15rem;
+    @media (width >= 22rem) {
+      min-width: 18.5rem;
+    }
+  }
+
+  .coop-text-input--suffix[data-inline] {
+    padding-right: 0;
+    padding-left: 1px;
+  }
+}
+
+.coop-datepicker-trigger {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: calc(100% - 4px);
+  margin-right: 2px;
+  padding: var(--spacing-10);
+  border: 0;
+
+  background: none;
+
+  &:hover {
+    background-color: var(--color-grey-300);
   }
 }
 
@@ -27,14 +53,12 @@
   width: max(calc(100vw - 2rem), var(--radix-popper-anchor-width));
   max-width: min(calc(100vw - 2rem), var(--popover-max-width));
   padding: var(--spacing-12);
-  background-color: var(--color-white);
 
   /* Containers */
 
   .rdp-root {
     margin: 0 0 var(--spacing-16) 0;
     border-radius: var(--ui-border-radius-md);
-    // background: var(--color-tint-grey);
   }
 
   .rdp-months {
@@ -132,7 +156,7 @@
   }
 
   .rdp-day.rdp-outside button {
-    color: var(--color-mid-dark-grey);
+    color: var(--color-grey-700);
     background: none;
   }
 
@@ -177,7 +201,7 @@
 
   .rdp-day.rdp-disabled button {
     cursor: not-allowed;
-    color: var(--color-mid-light-grey);
+    color: var(--color-grey-500);
   }
 
   .rdp-day.rdp-range_middle.rdp-selected {

package/src/components/Expandable.scss

@@ -1,9 +1,15 @@
 .coop-expandable {
+  --expandable-bg-color: var(--bg-color, var(--color-tint-grey));
+
   display: inline-block;
+
   padding: var(--spacing-10) var(--spacing-16);
   border-radius: var(--ui-border-radius-lg);
+
   font-size: var(--text-size-18);
 
+  background-color: var(--expandable-bg-color);
+
   & > summary {
     cursor: pointer;
 
@@ -18,12 +24,12 @@
   }
 
   .coop-expandable--icon {
-    margin: -1px 0 0 0.75rem;
+    margin: -1px 0 0 0.5rem;
     transition: transform 0.2s ease-out;
   }
 
   &[open] {
-    box-shadow: 0 0 0 var(--spacing-6) var(--bg);
+    box-shadow: 0 0 0 var(--spacing-6) var(--expandable-bg-color);
 
     .coop-expandable--icon {
       transform: rotate(180deg);

package/src/components/Pill.scss

@@ -1,7 +1,7 @@
 .coop-pill {
-  --font-size-badge: var(--text-size-10);
-  --font-size: var(--text-size-16);
-  --height: var(--spacing-48);
+  --pill-font-size-badge: var(--text-size-10);
+  --pill-font-size: var(--text-size-16);
+  --pill-height: var(--spacing-48);
 
   position: relative;
 
@@ -9,12 +9,12 @@
   gap: 0.5rem;
   align-items: center;
 
-  height: var(--height);
-  min-height: var(--height);
+  height: var(--pill-height);
+  min-height: var(--pill-height);
   padding: 0 var(--spacing-20);
   border-radius: var(--ui-border-radius-3xl);
 
-  font-size: var(--font-size); // [data-pill-size="md"]
+  font-size: var(--pill-font-size); // [data-pill-size="md"]
   line-height: var(--type-line-height-default);
   text-decoration: none;
   white-space: nowrap;
@@ -28,21 +28,21 @@
     padding: var(--spacing-2) var(--spacing-6);
     border-radius: var(--ui-border-radius-lg);
 
-    font-size: var(--font-size-badge);
+    font-size: var(--pill-font-size-badge);
     font-weight: 600;
     line-height: var(--type-line-height);
     text-transform: uppercase;
   }
 
   &[data-size="sm"] {
-    --height: var(--spacing-40);
-    --font-size: var(--text-size-14);
+    --pill-height: var(--spacing-40);
+    --pill-font-size: var(--text-size-14);
   }
 
   &[data-size="lg"] {
-    --height: var(--spacing-56);
-    --font-size: var(--text-size-18);
-    --font-size-badge: var(--text-size-12);
+    --pill-height: var(--spacing-56);
+    --pill-font-size: var(--text-size-18);
+    --pill-font-size-badge: var(--text-size-12);
 
     padding: 0 var(--spacing-24);
   }