@economic/taco 8.1.2-hanger-base-ui.2 → 8.1.2

package/tailwind.colors.js

@@ -1,103 +1,214 @@
+/**
+ * Taco Tailwind color theme.
+ *
+ * Structure:
+ *  1. Legacy constants   — colors not (yet) in the token pipeline.
+ *  2. Semantic constants — non-token UI colors (overlay blends, etc.).
+ *  3. Token maps         — rename taco-tokens keys to Tailwind family/shade tuples.
+ *  4. palette            — assembled from all token maps; mutated to add DEFAULT shades.
+ *  5. THEME_COLORS       — the final export consumed by tailwind.config.js.
+ *
+ * To add a new token-backed color family: add rows to the relevant *_MAP and a
+ * `palette.<family>` entry in THEME_COLORS. Do NOT edit taco-tokens — it is generated.
+ */
+import { primaryColors, secondaryColors, tertiaryColors, neutralColors, brandColors } from '@economic/taco-tokens/tokens';
+
+// ─── 1. Legacy constants ──────────────────────────────────────────────────────
+
+// Not generated in tokens: TODO: Map and remove post color palette update
+const LEGACY_BROWN = {
+    100: '#EEE0DA', // Used in Badge component
+    300: '#C4AB9E', // Client: Used in paymentcards
+    500: '#93715D', // Client: Used in paymentcards, invoicing dashboard
+    700: '#73503B', // Client: Used in paymentcards, invoicing dashboard
+    900: '#45291F', // Used in Badge component
+};
+
+// Not generated in tokens: TODO: Map and remove post color palette update */
+const LEGACY_ORANGE = {
+    100: '#FFE3BB', // Used in Badge component
+    300: '#FAB64D', // Client: Used in paymentcards, workflows
+    500: '#F99702', // Client: Used in Avatar component
+    700: '#EF7D00', // Client: Used in paymentcards
+    900: '#4A2811', // Used in Badge component
+};
+
+// ─── 2. Semantic constants ────────────────────────────────────────────────────
+
+/** Not in tokens: 7% tacoNeutralBlack over transparent → `bg-black-subtle`. */
+const BLACK_SUBTLE_ALPHA = 7;
+const BLACK_SUBTLE = `color-mix(in oklab, ${neutralColors.tacoNeutralBlack} ${BLACK_SUBTLE_ALPHA}%, transparent)`;
+
+/** Not in tokens: 8% tacoNeutralWhite over transparent → `bg-white-subtle`. */
+const WHITE_SUBTLE_ALPHA = 8;
+const WHITE_SUBTLE = `color-mix(in oklab, ${neutralColors.tacoNeutralWhite} ${WHITE_SUBTLE_ALPHA}%, transparent)`;
+
+// ─── 3. Token maps ────────────────────────────────────────────────────────────
+
+/**
+ * Maps token keys from a source object into a `{ [family]: { [shade]: hex } }` structure
+ * that Tailwind can consume as a color scale.
+ *
+ * @param {Record<string, string>} source - A taco-tokens export (e.g. `primaryColors`).
+ * @param {ReadonlyArray<readonly [string, string, string | number]>} rows - Each row is
+ *   [tokenKey, tailwindFamily, tailwindShade], e.g. ['tacoBlue500', 'blue', 500].
+ * @returns {Record<string, Record<string | number, string>>}
+ */
+const assignTokenShades = (source, rows) => {
+    const out = {};
+    for (const [tokenKey, family, shade] of rows) {
+        const value = source[tokenKey];
+        if (value === undefined) {
+            continue;
+        }
+        if (!out[family]) {
+            out[family] = {};
+        }
+        out[family][shade] = value;
+    }
+    return out;
+};
+
+const PRIMARY_MAP = [
+    ['tacoBlue50', 'blue', 50],
+    ['tacoBlue100', 'blue', 100],
+    ['tacoBlue200', 'blue', 200],
+    ['tacoBlue300', 'blue', 300],
+    ['tacoBlue500', 'blue', 500],
+    ['tacoBlue700', 'blue', 700],
+    ['tacoBlue900', 'blue', 900],
+    ['tacoGray50', 'gray', 50],
+    ['tacoGray100', 'gray', 100],
+    ['tacoGray200', 'gray', 200],
+    ['tacoGray300', 'gray', 300],
+    ['tacoGray500', 'gray', 500],
+    ['tacoGray700', 'gray', 700],
+    ['tacoGray900', 'gray', 900],
+];
+
+const SECONDARY_MAP = [
+    ['tacoRed50', 'red', 50],
+    ['tacoRed100', 'red', 100],
+    ['tacoRed200', 'red', 200],
+    ['tacoRed300', 'red', 300],
+    ['tacoRed500', 'red', 500],
+    ['tacoRed700', 'red', 700],
+    ['tacoRed900', 'red', 900],
+    ['tacoYellow50', 'yellow', 50],
+    ['tacoYellow100', 'yellow', 100],
+    ['tacoYellow200', 'yellow', 200],
+    ['tacoYellow300', 'yellow', 300],
+    ['tacoYellow500', 'yellow', 500],
+    ['tacoYellow700', 'yellow', 700],
+    ['tacoYellow900', 'yellow', 900],
+    ['tacoGreen50', 'green', 50],
+    ['tacoGreen100', 'green', 100],
+    ['tacoGreen200', 'green', 200],
+    ['tacoGreen300', 'green', 300],
+    ['tacoGreen500', 'green', 500],
+    ['tacoGreen700', 'green', 700],
+    ['tacoGreen900', 'green', 900],
+];
+
+const TERTIARY_MAP = [
+    ['tacoPink50', 'pink', 50],
+    ['tacoPink100', 'pink', 100],
+    ['tacoPink200', 'pink', 200],
+    ['tacoPink300', 'pink', 300],
+    ['tacoPink500', 'pink', 500],
+    ['tacoPink700', 'pink', 700],
+    ['tacoPink900', 'pink', 900],
+    ['tacoPurple50', 'purple', 50],
+    ['tacoPurple100', 'purple', 100],
+    ['tacoPurple200', 'purple', 200],
+    ['tacoPurple300', 'purple', 300],
+    ['tacoPurple500', 'purple', 500],
+    ['tacoPurple700', 'purple', 700],
+    ['tacoPurple900', 'purple', 900],
+];
+
+/**
+ * Matches --taco-neutral-white / --taco-neutral-black in tokens.css.
+ * Note: palette.neutral.white / .black are not exposed in THEME_COLORS — `white` and `black`
+ * are set directly from neutralColors instead to keep utilities flat (bg-white, not bg-neutral-white).
+ */
+const NEUTRAL_MAP = [
+    ['tacoNeutralWhite', 'neutral', 'white'],
+    ['tacoNeutralBlack', 'neutral', 'black'],
+];
+
+// ─── 4. Palette assembly ──────────────────────────────────────────────────────
+
+const fromPrimary = assignTokenShades(primaryColors, PRIMARY_MAP);
+const fromSecondary = assignTokenShades(secondaryColors, SECONDARY_MAP);
+const fromTertiary = assignTokenShades(tertiaryColors, TERTIARY_MAP);
+const fromNeutral = assignTokenShades(neutralColors, NEUTRAL_MAP);
+
+const mergeFamilies = (...parts) => {
+    const merged = {};
+    for (const part of parts) {
+        for (const [family, shades] of Object.entries(part)) {
+            merged[family] = { ...merged[family], ...shades };
+        }
+    }
+    return merged;
+};
+
+const palette = mergeFamilies(fromPrimary, fromSecondary, fromTertiary, fromNeutral);
+
+// `DEFAULT` lets Tailwind resolve bare utilities (e.g. `bg-blue` → blue-500, `text-red` → red-500).
+palette.blue = {
+    DEFAULT: primaryColors.tacoBlue500,
+    ...palette.blue,
+};
+
+palette.red = {
+    DEFAULT: secondaryColors.tacoRed500,
+    ...palette.red,
+};
+
+palette.green = {
+    DEFAULT: secondaryColors.tacoGreen500,
+    ...palette.green,
+};
+
+palette.yellow = {
+    DEFAULT: secondaryColors.tacoYellow500,
+    ...palette.yellow,
+};
+
+palette.gray = {
+    DEFAULT: primaryColors.tacoGray50,
+    ...palette.gray,
+};
+
+// ─── 5. Theme colors ──────────────────────────────────────────────────────────
+
 const THEME_COLORS = {
     transparent: 'transparent',
     current: 'currentColor',
-    white: '#fff',
-    black: '#1c1c1c',
+    white: neutralColors.tacoNeutralWhite,
+    black: neutralColors.tacoNeutralBlack,
+    'black-subtle': BLACK_SUBTLE,
+    'white-subtle': WHITE_SUBTLE,
     brand: {
-        vismaRed: '#E70641',
-        paleOrange: '#FFF5E5',
-        sunsetOrange: '#E89C2E',
-        midnightBlue: '#29283E',
-        coolBlue: '#F5F7F9',
-    },
-    grey: {
-        DEFAULT: '#EBEBEB',
-        50: '#fafafa',
-        100: '#F6F6F6',
-        200: '#EBEBEB',
-        300: '#DDDDDD',
-        500: '#ACACAC',
-        700: '#595959',
-        900: '#303030',
-    },
-    gray: {
-        DEFAULT: '#EBEBEB',
-        50: '#fafafa',
-        100: '#F6F6F6',
-        200: '#EBEBEB',
-        300: '#DDDDDD',
-        500: '#ACACAC',
-        700: '#595959',
-        900: '#303030',
-    },
-    purple: {
-        100: '#EEE5FF',
-        200: '#ddd1ff',
-        300: '#CBBCFE',
-        500: '#9270FA',
-        700: '#6542D1',
-        900: '#412970',
-    },
-    blue: {
-        DEFAULT: '#4573D2',
-        100: '#DEEBFF',
-        200: '#AACCFF',
-        300: '#75A0F5',
-        500: '#4573D2',
-        700: '#2B57B4',
-        900: '#29283E',
-    },
-    red: {
-        DEFAULT: '#CE3F42',
-        100: '#FFDAD2',
-        200: '#f3a09d',
-        300: '#E66568',
-        500: '#CE3F42',
-        700: '#950027',
-        900: '#64001B',
-    },
-    green: {
-        DEFAULT: '#08AE87',
-        100: '#cdf0e7',
-        200: '#9be1ce',
-        300: '#52C7AB',
-        500: '#08AE87',
-        700: '#028465',
-        900: '#14493A',
-    },
-    yellow: {
-        DEFAULT: '#FFBD3B',
-        100: '#FFF1C3',
-        200: '#ffe494',
-        300: '#FFD665',
-        500: '#FFBD3B',
-        700: '#e89c2e',
-        900: '#733700',
-    },
-    pink: {
-        100: '#FFE3F7',
-        200: '#fcb9e9',
-        300: '#F98EDB',
-        500: '#E165BF',
-        700: '#CF49AA',
-        900: '#870062',
-    },
-    brown: {
-        100: '#EEE0DA',
-        200: '#DFCCC2',
-        300: '#C4AB9E',
-        500: '#93715D',
-        700: '#73503B',
-        900: '#45291F',
-    },
-    orange: {
-        100: '#FFE3BB',
-        200: '#FCCB80',
-        300: '#FAB64D',
-        500: '#F99702',
-        700: '#EF7D00',
-        900: '#4A2811',
+        morning: brandColors.tacoBrandMorning,
+        noon: brandColors.tacoBrandNoon,
+        sunset: brandColors.tacoBrandSunset,
+        midnight: brandColors.tacoBrandMidnight,
     },
+    /** Alias for `gray` — supports both spellings in className strings. */
+    grey: { ...palette.gray },
+    gray: palette.gray,
+    neutral: palette.neutral,
+    purple: palette.purple,
+    blue: palette.blue,
+    red: palette.red,
+    green: palette.green,
+    yellow: palette.yellow,
+    pink: palette.pink,
+    brown: LEGACY_BROWN,
+    orange: LEGACY_ORANGE,
 };
 
 export default THEME_COLORS;

package/tailwind.config.js

@@ -7,6 +7,7 @@ import { borderRadius, typography } from '@economic/taco-tokens/tokens';
 
 module.exports = {
     theme: {
+        /** Semantic / non-token colors (e.g. `black-subtle`, `white-subtle`): see `./tailwind.colors.js` */
         colors,
         fontFamily: {
             display: ['Helvetica, Arial, sans-serif'],
@@ -162,7 +163,7 @@ module.exports = {
                 },
                 '.wcag-green-500': {
                     background: theme('colors.green.500'),
-                    color: theme('colors.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-green-700': {
                     background: theme('colors.green.700'),
@@ -173,8 +174,8 @@ module.exports = {
                     color: theme('colors.yellow.900'),
                 },
                 '.wcag-yellow-500': {
-                    background: theme('colors.yellow.500'),
-                    color: theme('colors.yellow.900'),
+                    background: theme('colors.yellow.200'),
+                    color: theme('colors.black'),
                 },
                 '.wcag-yellow-700': {
                     background: theme('colors.yellow.700'),
@@ -188,29 +189,13 @@ module.exports = {
                     background: theme('colors.purple.700'),
                     color: theme('colors.white'),
                 },
-                '.wcag-brown-100': {
-                    background: theme('colors.brown.100'),
-                    color: theme('colors.brown.900'),
-                },
-                '.wcag-brown-700': {
-                    background: theme('colors.brown.700'),
-                    color: theme('colors.white'),
-                },
                 '.wcag-pink-100': {
                     background: theme('colors.pink.100'),
                     color: theme('colors.pink.900'),
                 },
                 '.wcag-pink-500': {
                     background: theme('colors.pink.500'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-orange-100': {
-                    background: theme('colors.orange.100'),
-                    color: theme('colors.orange.900'),
-                },
-                '.wcag-orange-700': {
-                    background: theme('colors.orange.700'),
-                    color: theme('colors.orange.900'),
+                    color: theme('colors.white'),
                 },
                 // Legacy
                 '.yt-transparent': {
@@ -251,46 +236,26 @@ module.exports = {
                     color: theme('colors.blue.500'),
                 },
                 '.yt-yellow-solid': {
-                    background: theme('colors.yellow.500'),
+                    background: theme('colors.yellow.200'),
                     color: theme('colors.black'),
                 },
-                '.yt-yellow-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.yellow.700')}`,
-                    color: theme('colors.yellow.700'),
-                },
                 '.yt-red-solid': {
                     background: theme('colors.red.500'),
                     color: theme('colors.white'),
                 },
-                '.yt-red-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.red.500')}`,
-                    color: theme('colors.red.500'),
-                },
                 '.yt-green-solid': {
-                    background: theme('colors.green.700'),
+                    background: theme('colors.green.500'),
                     color: theme('colors.white'),
                 },
-                '.yt-green-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.green.700')}`,
-                    color: theme('colors.green.700'),
-                },
                 '.yt-grey-solid': {
-                    background: theme('colors.gray.200'),
+                    background: theme('colors.gray.100'),
                     color: theme('colors.black'),
                 },
-                '.yt-grey-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.gray.700')}`,
-                    color: theme('colors.gray.700'),
-                },
                 '.yt-shadow': {
-                    'box-shadow': '0px 1px 3px 1px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                    'box-shadow': '0px 1px 3px 1px rgba(89, 85, 98, 0.15), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
                 },
                 '.yt-shadow-inset': {
-                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.175), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
                 },
                 '.pointer-events-all': {
                     'pointer-events': 'all',