@coopdigital/styles 1.22.0 → 1.23.1

package/presets/uno/index.js

@@ -1,259 +0,0 @@
-/* oxlint-disable */
-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
-}
-
-function generateBreakpoints(theme) {
-  const values = {
-    "2xs": "320px",
-    xs: "414px",
-    sm: "600px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1312px",
-    "2xl": "1536px",
-  }
-
-  if (theme.breakpoint) {
-    return {
-      breakpoint: {
-        ...values,
-      },
-    }
-  } else if (theme.breakpoints) {
-    return {
-      breakpoints: {
-        ...values,
-      },
-    }
-  }
-}
-
-const presetCoop = definePreset(() => {
-  return {
-    name: "coop-preset",
-
-    extendTheme: (theme) => {
-      return {
-        ...theme,
-        ...generateBreakpoints(theme),
-
-        colors: {
-          "brand-blue": "var(--color-brand-blue)",
-          offer: "var(--color-red-500)",
-          error: "var(--color-red-500)",
-          "error-light": "var(--color-red-100)",
-
-          alert: "var(--color-yellow-500)",
-          "alert-light": "var(--color-yellow-100)",
-
-          value: "var(--color-yellow-500)",
-
-          success: "var(--color-green-500)",
-          "success-light": "var(--color-green-100)",
-
-          blue: {
-            100: "var(--color-blue-100)",
-            500: "var(--color-blue-500)",
-            700: "var(--color-blue-700)",
-            800: "var(--color-blue-800)",
-            900: "var(--color-blue-900)",
-            DEFAULT: "var(--color-blue)",
-          },
-          red: {
-            100: "var(--color-red-100)",
-            500: "var(--color-red-500)",
-            DEFAULT: "var(--color-red)",
-          },
-          purple: {
-            500: "var(--color-purple-500)",
-            DEFAULT: "var(--color-purple)",
-          },
-          yellow: {
-            100: "var(--color-yellow-100)",
-            500: "var(--color-yellow-500)",
-            900: "var(--color-yellow-900)",
-            DEFAULT: "var(--color-yellow)",
-          },
-          green: {
-            100: "var(--color-green-100)",
-            500: "var(--color-green-500)",
-            DEFAULT: "var(--color-green)",
-          },
-          teal: {
-            500: "var(--color-teal-500)",
-            DEFAULT: "var(--color-teal)",
-          },
-          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: {
-            100: "var(--color-grey-100)",
-            200: "var(--color-grey-200)",
-            300: "var(--color-grey-300)",
-            400: "var(--color-grey-400)",
-            500: "var(--color-grey-500)",
-            600: "var(--color-grey-600)",
-            700: "var(--color-grey-700)",
-            800: "var(--color-grey-800)",
-            900: "var(--color-grey-900)",
-            DEFAULT: "var(--color-grey)",
-          },
-          // TERTIARY colours: tints, lights and darks
-          ...generateTertiaryColors(),
-          "tint-brown": "var(--color-grey-warm-100)",
-          "tint-grey": "var(--color-grey-200)",
-        },
-      }
-    },
-    rules: [
-      [
-        "font-avenir",
-        {
-          "font-family":
-            "'Avenir Next', 'Avenir-Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;",
-        },
-      ],
-      [
-        "font-coopsans",
-        { "font-family": "'Co-opSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;" },
-      ],
-      ["font-headline", { "font-family": "'Co-opHeadline', 'Impact Fallback', sans-serif" }],
-
-      [
-        /^(bg|border)-(.*)$/,
-        function* ([, rule, color], { theme }) {
-          const root = color.split("-")[0]
-
-          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
-            }
-          }
-        },
-      ],
-
-      [
-        /^ch-(\d+)$/,
-        ([, n]) => ({
-          width: `calc((${n} * 2ch) + 1rem)`,
-        }),
-        { autocomplete: "ch-<num>" },
-      ],
-
-      /*
-      To support presetWind3 and presetWind4 and probably future presets 
-      we decided to use rules instead of editing font-size inside theme 
-      */
-
-      ["text-xs", { "font-size": "0.75rem" }],
-      ["text-sm", { "font-size": "0.875rem" }],
-      ["text-base", { "font-size": "1rem" }],
-      ["text-md", { "font-size": "1rem" }],
-      ["text-lg", { "font-size": "1.125rem" }],
-      ["text-xl", { "font-size": "1.25rem" }],
-      ["text-2xl", { "font-size": "1.5rem" }],
-      ["text-3xl", { "font-size": "1.875rem" }],
-      ["text-4xl", { "font-size": "2.25rem" }],
-      ["text-5xl", { "font-size": "3rem" }],
-      ["text-6xl", { "font-size": "4rem" }],
-      ["text-7xl", { "font-size": "4.5rem" }],
-      ["text-mega", { "font-size": "5.125rem" }],
-      ["text-8xl", { "font-size": "6rem" }],
-
-      ["gap-sm", { gap: "1rem" }],
-      ["gap-md", { gap: "2rem" }],
-      ["gap-lg", { gap: "3rem" }],
-    ],
-    shortcuts: [
-      {
-        "flex-center": "flex justify-center items-center",
-        "flex-center-around": "flex justify-around items-center",
-        "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",
-        // "icon-brand-blue": "fill-brand-blue",
-
-        // 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-footer": "bg-grey-900",
-        "bg-footer-light": "bg-grey-cool-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",
-      },
-    ],
-  }
-})
-
-export { presetCoop as default }