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

package/dist/taco.css

@@ -170,7 +170,7 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 }
 
 .wcag-transparent {
-    @apply bg-black/[0.08] text-black;
+    @apply bg-black-subtle text-black;
 }
 
 @keyframes fade-in {
@@ -232,11 +232,11 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 }
 
 [data-taco='calendar'] .rdp-day_button {
-    @apply hover:wcag-gray-200 focus:yt-focus flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
+    @apply hover:wcag-gray-100 focus:yt-focus flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
 }
 
 [data-taco='calendar'] .rdp-selected .rdp-day_button {
-    @apply wcag-gray-200;
+    @apply wcag-gray-100;
 }
 
 [data-taco='calendar'] .rdp-footer {
@@ -257,7 +257,7 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover,
 [data-taco='calendar'] .DayPicker-Day--highlighted,
 [data-taco='calendar'] .DayPicker-Day--selected {
-    @apply wcag-gray-200;
+    @apply wcag-gray-100;
 }
 
 [data-taco='calendar'] .calendar-caption {
@@ -281,11 +281,11 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 }
 
 [data-taco='scrollable-list']:not([readonly]) li:not([disabled]):hover {
-    @apply wcag-gray-200;
+    @apply wcag-gray-100;
 }
 
 [data-taco='scrollable-list']:not([readonly]) li:not([disabled]):hover [data-taco='icon'] {
-    @apply wcag-gray-200;
+    @apply wcag-gray-100;
 }
 
 [data-taco='scrollable-list'] li:focus,
@@ -364,30 +364,10 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
     stroke: theme('colors.white');
 }
 
-.yt-yellow-solid svg circle {
-    stroke: theme('colors.black');
-}
-
 .yt-blue-inverted svg circle {
     stroke: theme('colors.blue.500');
 }
 
-.yt-yellow-inverted svg circle {
-    stroke: theme('colors.yellow.500');
-}
-
-.yt-red-inverted svg circle {
-    stroke: theme('colors.red.500');
-}
-
-.yt-green-inverted svg circle {
-    stroke: theme('colors.green.500');
-}
-
-.yt-gray-inverted svg circle {
-    stroke: theme('colors.gray.700');
-}
-
 [class*='wcag-'] svg circle,
 [class*='text-'] svg circle {
     stroke: currentColor;
@@ -438,9 +418,13 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
     @apply mt-6;
 }
 [data-taco='hanger'] a {
-    @apply text-gray-200 underline;
+    @apply text-gray-50 underline;
 }
 
+    [data-taco='hanger'] a:hover {
+        @apply text-gray-100;
+    }
+
 [data-taco='hanger'] > *:last-child {
     @apply mb-0;
 }
@@ -449,7 +433,7 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 }
 
 [data-taco='list-item'] {
-    @apply flex w-full items-center gap-x-3 rounded-lg border border-gray-300 bg-white p-3 text-left;
+    @apply flex w-full items-center gap-x-3 rounded-lg border border-gray-100 bg-white p-3 text-left;
 }
 
 [data-taco='list-item']:focus-visible {
@@ -457,7 +441,7 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
     }
 
 [data-taco='list-item']:not([aria-disabled]):hover {
-        @apply cursor-pointer bg-black/[0.08];
+        @apply cursor-pointer bg-gray-50;
     }
 
 [data-taco='list-item'][aria-disabled] {
@@ -473,7 +457,7 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
     }
 
 [data-taco='list-item-collapsible'] > div {
-        @apply rounded-b-lg border border-t-0 border-gray-300 bg-white p-3;
+        @apply rounded-b-lg border border-t-0 border-gray-100 bg-white p-3;
     }
 
 /* Stack the trigger above the panel so the full box-shadow stays visible. */
@@ -587,14 +571,14 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
     /* Radio button indicator */
     [data-taco='radio-group'] > label::before {
             content: '';
-            @apply mt-[0.2rem] flex h-4 w-4 flex-shrink-0 items-center justify-center self-start rounded-full border-2 border-gray-700 bg-white;
+            @apply mt-[0.2rem] flex h-4 w-4 flex-shrink-0 items-center justify-center self-start rounded-full border-2 border-gray-200 bg-white;
         }
     /* Add focus ring when focused */
     [data-taco='radio-group'] > label::before[data-focus-visible='true'] {
                 @apply ring-2 ring-blue-500 ring-offset-2;
             }
     [data-taco='radio-group'] > label::before:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-selected]):hover {
-                @apply border-gray-900;
+                @apply border-gray-300;
             }
     [data-taco='radio-group'] > label::before:not([data-disabled]):not([data-readonly]):hover {
                 @apply border-4;
@@ -622,7 +606,7 @@ table[data-taco^='table'] {
     /* z-indexes & layout */
     @apply relative isolate h-full w-full grow overflow-auto;
     /* styling */
-    @apply rounded border border-gray-300 bg-white outline-none;
+    @apply rounded border border-gray-100 bg-white outline-none;
     /* grid */
     @apply grid;
     /* print */
@@ -641,7 +625,7 @@ table[data-taco^='table'] thead {
 /* header column separator */
 
 table[data-taco^='table'] thead:hover th:not(:last-child):after {
-            @apply absolute bottom-2 right-0 top-2 w-px bg-gray-300 content-[''];
+            @apply absolute bottom-2 right-0 top-2 w-px bg-gray-100 content-[''];
         }
 
 table[data-taco^='table'] thead tr:first-child {
@@ -657,17 +641,17 @@ table[data-taco^='table'] thead tr:first-child th:last-child {
         }
 
 table[data-taco^='table'] thead tr:last-child {
-        @apply border-b-2 border-gray-300;
+        @apply border-b-2 border-gray-100;
     }
 
 /* bottom border for column groups */
 
 table[data-taco^='table'] thead tr:not(:last-child) th {
-            @apply print:border-b print:border-gray-300;
+            @apply print:border-b print:border-gray-100;
         }
 
 table[data-taco^='table'] thead tr:not(:last-child) th:before {
-                @apply absolute bottom-0 left-2 right-2 h-[2px] bg-gray-300 content-[''];
+                @apply absolute bottom-0 left-2 right-2 h-[2px] bg-gray-50 content-[''];
             }
 
 table[data-taco^='table'] tfoot {
@@ -710,7 +694,7 @@ table[data-taco^='table'] tr:last-child th:before {
 /* row groups */
 
 table[data-taco^='table'] tr[data-row-group] {
-        @apply sticky top-[calc((var(--table-header-group-depth)_-_1)_*_40px_+_42px)] z-30 bg-gray-100;
+        @apply sticky top-[calc((var(--table-header-group-depth)_-_1)_*_40px_+_42px)] z-30 bg-gray-50;
     }
 
 /* Only apply -mt-px when the row group header is sticked to the top of the table.
@@ -735,7 +719,7 @@ table[data-taco^='table'] tr[aria-grabbed='true'] td {
     }
 
 table[data-taco^='table'] tr[data-row-dragged-over='true'] td {
-        @apply !bg-gray-100;
+        @apply !bg-gray-50;
     }
 
 table[data-taco^='table'] tr:hover > td[data-cell-id='__actions'] {
@@ -746,11 +730,11 @@ table[data-taco^='table'] th {
     /* layout */
     @apply relative flex h-10 items-center justify-start px-[var(--table-cell-padding-x)];
     /* styling */
-    @apply border-gray-300 bg-white font-bold;
+    @apply border-gray-100 bg-white font-bold;
 }
 
 table[data-taco^='table'] th:not([data-cell-placeholder='true']):hover {
-        @apply bg-gray-100;
+        @apply bg-gray-50;
     }
 
 table[data-taco^='table'] th[aria-sort]:hover {
@@ -761,7 +745,7 @@ table[data-taco^='table'] td {
     /* layout */
     @apply flex justify-start px-[var(--table-cell-padding-x)] pt-[var(--table-cell-padding-y)];
     /* styling */
-    @apply border-b border-gray-300 bg-white outline-none;
+    @apply border-b border-gray-100 bg-white outline-none;
     /* word breaking */
     @apply break-word hyphens-auto whitespace-pre-line;
 }
@@ -826,7 +810,7 @@ table[data-taco^='table'] td:not([data-cell-truncate='true']) {
 /* FOOTER */
 
 table[data-taco^='table'] tfoot tr {
-    @apply border-t-2 border-gray-300;
+    @apply border-t-2 border-gray-100;
 }
 
 table[data-taco^='table'] tfoot tr:not([data-row-index]) td {
@@ -1305,46 +1289,46 @@ table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td {
 table[data-taco^='table'] > tbody > tr:not([data-row-selected]):hover > td,
         table[data-taco^='table'] > tbody > tr:not([data-row-selected])[data-row-active] > td,
         table[data-taco^='table'] > tbody > tr:not([data-row-selected])[data-row-group] > td {
-            --table-row-actions-shadow: theme(colors.gray.100);
-            @apply bg-gray-100 print:bg-white;
+            --table-row-actions-shadow: theme(colors.gray.50);
+            @apply bg-gray-50 print:bg-white;
         }
 /* search highlighting */
 table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='true'] {
-            --table-row-actions-shadow: #e9f2ff;
-            @apply !bg-[#e9f2ff];
+            --table-row-actions-shadow: theme(colors.gray.50);
+            @apply !bg-gray-50;
         }
 table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='current'] {
-            --table-row-actions-shadow: #bdd7fc;
-            @apply !bg-[#bdd7fc];
+            --table-row-actions-shadow: theme(colors.blue.50);
+            @apply !bg-blue-50;
         }
 /* selected rows */
 table[data-taco^='table'] > tbody > tr[data-row-selected] > td {
-            @apply bg-blue-100;
+            @apply bg-blue-50;
         }
 table[data-taco^='table'] > tbody > tr[data-row-selected]:hover > td,
         table[data-taco^='table'] > tbody > tr[data-row-selected][data-row-active] > td,
         table[data-taco^='table'] > tbody > tr[data-row-selected][data-row-group] > td {
-            --table-row-actions-shadow: #d6e3f6;
-            @apply bg-[#d6e3f6];
+            --table-row-actions-shadow: theme(colors.blue.50);
+            @apply bg-blue-50;
         }
 /* search highlighting */
 table[data-taco^='table'] > tbody > tr[data-row-selected] > td[data-cell-highlighted] {
-            --table-row-actions-shadow: #b4d2fd;
-            @apply !bg-[#b4d2fd];
+            --table-row-actions-shadow: theme(colors.blue.50);
+            @apply !bg-blue-50;
         }
 
 /* normal rows */
 
 table[data-taco^='table']:focus-within > tbody > tr:not([data-row-selected])[data-row-active] > td {
-            --table-row-actions-shadow: theme(colors.gray.200);
-            @apply bg-gray-200;
+            --table-row-actions-shadow: theme(colors.gray.50);
+            @apply bg-gray-50;
         }
 
 /* selected rows */
 
 table[data-taco^='table']:focus-within > tbody > tr[data-row-selected][data-row-active] > td {
-            --table-row-actions-shadow: #ccd8eb;
-            @apply bg-[#ccd8eb];
+            --table-row-actions-shadow: theme(colors.blue.50);
+            @apply bg-blue-50;
         }
 
 /* normal rows */
@@ -1355,20 +1339,20 @@ table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover:not(
         }
 
 table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected])[data-row-active] > td {
-            --table-row-actions-shadow: theme(colors.gray.200);
-            @apply bg-gray-200;
+            --table-row-actions-shadow: theme(colors.gray.50);
+            @apply bg-gray-50;
         }
 
 /* selected rows */
 
 table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected]:not([data-row-active]) > td {
-            --table-row-actions-shadow: theme(colors.blue.100);
-            @apply bg-blue-100;
+            --table-row-actions-shadow: theme(colors.blue.50);
+            @apply bg-blue-50;
         }
 
 table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected][data-row-active] > td {
-            --table-row-actions-shadow: #ccd8eb;
-            @apply bg-[#CCD8EB];
+            --table-row-actions-shadow: theme(colors.blue.50);
+            @apply bg-blue-50;
         }
 
 /* row metadata */
@@ -1398,7 +1382,7 @@ table[data-taco='table3'][data-table-editing-mode='detailed'] td [data-taco='tex
 }
 
 table[data-taco='table3'] td:focus {
-    @apply rounded-sm ring-2 ring-inset ring-[#4573D2];
+    @apply rounded-sm ring-2 ring-inset ring-blue-500;
 }
 
 table[data-taco='table3'] [data-taco='checkbox'][data-focus='programmatic']:focus {
@@ -1408,7 +1392,7 @@ table[data-taco='table3'] [data-taco='checkbox'][data-focus='programmatic']:focu
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='input'],
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='textarea'],
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='Select2'] {
-    @apply bg-gray-100;
+    @apply bg-gray-50;
 }
 
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='switch'] {
@@ -1459,8 +1443,8 @@ table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'] > td,
         table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true']:not([data-row-selected]):not([data-row-active]) > td,
         table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'] > td,
         table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-selected]):not([data-row-active]) > td {
-            --table-row-actions-shadow: #ffe4de;
-            @apply bg-[#ffede9];
+            --table-row-actions-shadow: theme(colors.red.50);
+            @apply bg-red-100;
         }
 
 table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:hover > td,
@@ -1472,8 +1456,8 @@ table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:hover >
         table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:hover > td,
         table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'][data-row-group] > td,
         table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:hover:not([data-row-selected]):not([data-row-active]) > td {
-            --table-row-actions-shadow: #ffe4de;
-            @apply bg-[#ffe4de];
+            --table-row-actions-shadow: theme(colors.red.50);
+            @apply bg-red-50;
         }
 
 table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'][data-row-active] > td,
@@ -1489,8 +1473,8 @@ table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'][data-row
 /* search highlighting */
 
 table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'] > td[data-cell-highlighted], table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true'] > td[data-cell-highlighted], table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'] > td[data-cell-highlighted] {
-            --table-row-actions-shadow: #b4d2fd;
-            @apply !bg-[#b4d2fd];
+            --table-row-actions-shadow: theme(colors.blue.100);
+            @apply !bg-blue-100;
         }
 
 table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='input'],
@@ -1523,7 +1507,7 @@ table[data-taco^='table'] tr:not([data-row-id^='temp-']) [data-row-move-indicato
 
 /* Hiding CreateNewRow using CSS to ensure higher specificity for hiding the row */
 table[data-taco^='table'] tr[data-row-create] {
-    @apply border-t-2 border-gray-300 print:hidden;
+    @apply border-t-2 border-gray-100 print:hidden;
 }
 table[data-taco^='table'] tr[data-row-create] td {
         @apply !h-[41px] !min-h-[41px] items-center !border-0 !p-0;
@@ -1613,7 +1597,7 @@ table[data-taco='table3'] td[data-taco='save-status'] [data-taco='spinner'] svg
 }
 /* rows */
 .yt-table__row {
-    @apply flex border-b border-gray-300;
+    @apply flex border-b border-gray-100;
     min-height: 2.5rem;
 }
 
@@ -1645,12 +1629,12 @@ table[data-taco='table3'] td[data-taco='save-status'] [data-taco='spinner'] svg
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-b border-gray-300;
+    @apply border-b border-gray-100;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-l border-gray-300;
+    @apply border-l border-gray-100;
 }
 
 .yt-table__head .yt-table__cell > [data-taco='icon'] {
@@ -1658,7 +1642,7 @@ table[data-taco='table3'] td[data-taco='save-status'] [data-taco='spinner'] svg
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-l-2 border-gray-300;
+    @apply border-l-2 border-gray-100;
 }
 
 .yt-table.yt-table--windowed.table-with-scrollbar .yt-table__head {
@@ -1682,7 +1666,7 @@ table[data-taco='table3'] td[data-taco='save-status'] [data-taco='spinner'] svg
 }
 
 .yt-table__body .yt-table__row.yt-table__row--active {
-    @apply wcag-gray-200;
+    @apply wcag-gray-100;
 }
 
 .yt-table__body .yt-table__row.yt-table__row--dragging,
@@ -1692,7 +1676,7 @@ table[data-taco='table3'] td[data-taco='save-status'] [data-taco='spinner'] svg
 
 /* edit */
 .yt-table__body .yt-table__row.yt-table__row--editing {
-    @apply border-t border-gray-300;
+    @apply border-t border-gray-100;
 }
 
 .yt-table__body .yt-table__row.yt-table__row--editing,

package/dist/tailwind.colors.cjs

@@ -1,104 +1,165 @@
 "use strict";
+const tokens = require("@economic/taco-tokens/tokens");
+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
+};
+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
+};
+const BLACK_SUBTLE_ALPHA = 7;
+const BLACK_SUBTLE = `color-mix(in oklab, ${tokens.neutralColors.tacoNeutralBlack} ${BLACK_SUBTLE_ALPHA}%, transparent)`;
+const WHITE_SUBTLE_ALPHA = 8;
+const WHITE_SUBTLE = `color-mix(in oklab, ${tokens.neutralColors.tacoNeutralWhite} ${WHITE_SUBTLE_ALPHA}%, transparent)`;
+const assignTokenShades = (source, rows) => {
+  const out = {};
+  for (const [tokenKey, family, shade] of rows) {
+    const value = source[tokenKey];
+    if (value === void 0) {
+      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]
+];
+const NEUTRAL_MAP = [
+  ["tacoNeutralWhite", "neutral", "white"],
+  ["tacoNeutralBlack", "neutral", "black"]
+];
+const fromPrimary = assignTokenShades(tokens.primaryColors, PRIMARY_MAP);
+const fromSecondary = assignTokenShades(tokens.secondaryColors, SECONDARY_MAP);
+const fromTertiary = assignTokenShades(tokens.tertiaryColors, TERTIARY_MAP);
+const fromNeutral = assignTokenShades(tokens.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);
+palette.blue = {
+  DEFAULT: tokens.primaryColors.tacoBlue500,
+  ...palette.blue
+};
+palette.red = {
+  DEFAULT: tokens.secondaryColors.tacoRed500,
+  ...palette.red
+};
+palette.green = {
+  DEFAULT: tokens.secondaryColors.tacoGreen500,
+  ...palette.green
+};
+palette.yellow = {
+  DEFAULT: tokens.secondaryColors.tacoYellow500,
+  ...palette.yellow
+};
+palette.gray = {
+  DEFAULT: tokens.primaryColors.tacoGray50,
+  ...palette.gray
+};
 const THEME_COLORS = {
   transparent: "transparent",
   current: "currentColor",
-  white: "#fff",
-  black: "#1c1c1c",
+  white: tokens.neutralColors.tacoNeutralWhite,
+  black: tokens.neutralColors.tacoNeutralBlack,
+  "black-subtle": BLACK_SUBTLE,
+  "white-subtle": WHITE_SUBTLE,
   brand: {
-    vismaRed: "#E70641",
-    paleOrange: "#FFF5E5",
-    sunsetOrange: "#E89C2E",
-    midnightBlue: "#29283E",
-    coolBlue: "#F5F7F9"
+    morning: tokens.brandColors.tacoBrandMorning,
+    noon: tokens.brandColors.tacoBrandNoon,
+    sunset: tokens.brandColors.tacoBrandSunset,
+    midnight: tokens.brandColors.tacoBrandMidnight
   },
-  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"
-  }
+  /** 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
 };
 module.exports = THEME_COLORS;
 //# sourceMappingURL=tailwind.colors.cjs.map