@utilitywarehouse/hearth-react 0.10.5 → 0.11.1

package/dist/props/border.props.d.ts

@@ -1,18 +1,9 @@
-import { transformColorValue } from '../helpers/transform-color-value.js';
 import { Responsive } from '../types/responsive.js';
 
-declare const colorTokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
 declare const borderStyleValues: readonly ["none", "solid"];
 declare const borderWidthValues: readonly ["0", "1", "2"];
 declare const borderRadiusValues: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 declare const borderPropDefs: {
-    borderColor: {
-        className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
-        responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
-    };
     borderStyle: {
         className: string;
         tokens: readonly ["none", "solid"];
@@ -23,13 +14,6 @@ declare const borderPropDefs: {
         tokens: readonly ["0", "1", "2"];
         responsive: true;
     };
-    borderTopColor: {
-        className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
-        responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
-    };
     borderTopStyle: {
         className: string;
         tokens: readonly ["none", "solid"];
@@ -40,13 +24,6 @@ declare const borderPropDefs: {
         tokens: readonly ["0", "1", "2"];
         responsive: true;
     };
-    borderRightColor: {
-        className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
-        responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
-    };
     borderRightStyle: {
         className: string;
         tokens: readonly ["none", "solid"];
@@ -57,13 +34,6 @@ declare const borderPropDefs: {
         tokens: readonly ["0", "1", "2"];
         responsive: true;
     };
-    borderBottomColor: {
-        className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
-        responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
-    };
     borderBottomStyle: {
         className: string;
         tokens: readonly ["none", "solid"];
@@ -74,13 +44,6 @@ declare const borderPropDefs: {
         tokens: readonly ["0", "1", "2"];
         responsive: true;
     };
-    borderLeftColor: {
-        className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
-        responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
-    };
     borderLeftStyle: {
         className: string;
         tokens: readonly ["none", "solid"];
@@ -118,19 +81,14 @@ declare const borderPropDefs: {
     };
 };
 interface BorderProps {
-    borderColor?: (typeof colorTokens)[number];
     borderStyle?: Responsive<(typeof borderStyleValues)[number]>;
     borderWidth?: Responsive<(typeof borderWidthValues)[number]>;
-    borderTopColor?: (typeof colorTokens)[number];
     borderTopStyle?: Responsive<(typeof borderStyleValues)[number]>;
     borderTopWidth?: Responsive<(typeof borderWidthValues)[number]>;
-    borderRightColor?: (typeof colorTokens)[number];
     borderRightStyle?: Responsive<(typeof borderStyleValues)[number]>;
     borderRightWidth?: Responsive<(typeof borderWidthValues)[number]>;
-    borderBottomColor?: (typeof colorTokens)[number];
     borderBottomStyle?: Responsive<(typeof borderStyleValues)[number]>;
     borderBottomWidth?: Responsive<(typeof borderWidthValues)[number]>;
-    borderLeftColor?: (typeof colorTokens)[number];
     borderLeftStyle?: Responsive<(typeof borderStyleValues)[number]>;
     borderLeftWidth?: Responsive<(typeof borderWidthValues)[number]>;
     borderRadius?: Responsive<(typeof borderRadiusValues)[number]>;

package/dist/props/border.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-7IOJKSAJ.js";import"../chunk-HDDK3KYO.js";import"../chunk-VBXP3BKF.js";import"../chunk-TLHGRJDQ.js";export{a as borderPropDefs};
+import{a}from"../chunk-LDAML57Y.js";export{a as borderPropDefs};
 //# sourceMappingURL=border.props.js.map

package/dist/props/color.props.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkAQ6CX7GRcjs = require('../chunk-AQ6CX7GR.cjs');require('../chunk-5NBN3TFA.cjs');require('../chunk-YRQMCYXX.cjs');require('../chunk-A4KDLDVY.cjs');exports.colorPropDefs = _chunkAQ6CX7GRcjs.a;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkSFSPC4MBcjs = require('../chunk-SFSPC4MB.cjs');exports.colorPropDefs = _chunkSFSPC4MBcjs.b; exports.colorValues = _chunkSFSPC4MBcjs.a;
 //# sourceMappingURL=color.props.cjs.map

package/dist/props/color.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/color.props.cjs"],"names":[],"mappings":"AAAA,kIAAoC,iCAA8B,iCAA8B,iCAA8B,4CAA2B","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/color.props.cjs"}
+{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/color.props.cjs"],"names":[],"mappings":"AAAA,kIAAsC,uFAA4C","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/color.props.cjs"}

package/dist/props/color.props.d.cts

@@ -1,20 +1,16 @@
-import { transformColorValue } from '../helpers/transform-color-value.cjs';
-
-declare const colorTokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
+declare const colorValues: readonly ["primary", "secondary", "brand", "affirmative", "inverted"];
 declare const colorPropDefs: {
     color: {
         className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
+        tokens: readonly ["primary", "secondary", "brand", "affirmative", "inverted"];
         responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
     };
 };
 interface ColorProps {
     /**
      * Set the foreground colour.
      */
-    color?: (typeof colorTokens)[number];
+    color?: (typeof colorValues)[number];
 }
 
-export { type ColorProps, colorPropDefs };
+export { type ColorProps, colorPropDefs, colorValues };

package/dist/props/color.props.d.ts

@@ -1,20 +1,16 @@
-import { transformColorValue } from '../helpers/transform-color-value.js';
-
-declare const colorTokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
+declare const colorValues: readonly ["primary", "secondary", "brand", "affirmative", "inverted"];
 declare const colorPropDefs: {
     color: {
         className: string;
-        tokens: readonly ["blue0", "blue50", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "blue950", "blue1000", "broadbandGreen0", "broadbandGreen50", "broadbandGreen100", "broadbandGreen200", "broadbandGreen300", "broadbandGreen400", "broadbandGreen500", "broadbandGreen600", "broadbandGreen700", "broadbandGreen800", "broadbandGreen900", "broadbandGreen950", "broadbandGreen1000", "cashbackLilac0", "cashbackLilac50", "cashbackLilac100", "cashbackLilac200", "cashbackLilac300", "cashbackLilac400", "cashbackLilac500", "cashbackLilac600", "cashbackLilac700", "cashbackLilac800", "cashbackLilac900", "cashbackLilac950", "cashbackLilac1000", "energyBlue0", "energyBlue50", "energyBlue100", "energyBlue200", "energyBlue300", "energyBlue400", "energyBlue500", "energyBlue600", "energyBlue700", "energyBlue800", "energyBlue900", "energyBlue950", "energyBlue1000", "green0", "green50", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900", "green950", "green1000", "grey0", "grey50", "grey100", "grey200", "grey300", "grey400", "grey500", "grey600", "grey700", "grey800", "grey900", "grey950", "grey975", "grey1000", "insuranceOrange0", "insuranceOrange50", "insuranceOrange100", "insuranceOrange200", "insuranceOrange300", "insuranceOrange400", "insuranceOrange500", "insuranceOrange600", "insuranceOrange700", "insuranceOrange800", "insuranceOrange900", "insuranceOrange950", "insuranceOrange1000", "mobileRose0", "mobileRose50", "mobileRose100", "mobileRose200", "mobileRose300", "mobileRose400", "mobileRose500", "mobileRose600", "mobileRose700", "mobileRose800", "mobileRose900", "mobileRose950", "mobileRose1000", "orange0", "orange50", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange750", "orange800", "orange900", "orange950", "orange1000", "piggyPink0", "piggyPink50", "piggyPink100", "piggyPink200", "piggyPink300", "piggyPink400", "piggyPink500", "piggyPink600", "piggyPink700", "piggyPink800", "piggyPink900", "piggyPink950", "piggyPink1000", "purple0", "purple50", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "purple950", "purple1000", "red0", "red50", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "red950", "red1000", "warmWhite0", "warmWhite50", "warmWhite100", "warmWhite200", "warmWhite300", "warmWhite400", "warmWhite500", "warmWhite600", "warmWhite700", "warmWhite800", "warmWhite900", "warmWhite950", "warmWhite975", "warmWhite1000", "yellow0", "yellow50", "yellow100", "yellow200", "yellow300", "yellow400", "yellow500", "yellow600", "yellow700", "yellow800", "yellow900", "yellow950", "yellow1000"];
+        tokens: readonly ["primary", "secondary", "brand", "affirmative", "inverted"];
         responsive: false;
-        singleClassNameTokens: true;
-        transformValue: typeof transformColorValue;
     };
 };
 interface ColorProps {
     /**
      * Set the foreground colour.
      */
-    color?: (typeof colorTokens)[number];
+    color?: (typeof colorValues)[number];
 }
 
-export { type ColorProps, colorPropDefs };
+export { type ColorProps, colorPropDefs, colorValues };

package/dist/props/color.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-JLSPEHMW.js";import"../chunk-HDDK3KYO.js";import"../chunk-VBXP3BKF.js";import"../chunk-TLHGRJDQ.js";export{a as colorPropDefs};
+import{a,b}from"../chunk-COQ3LMFF.js";export{b as colorPropDefs,a as colorValues};
 //# sourceMappingURL=color.props.js.map

package/dist/props/prop-def.d.cts

@@ -10,8 +10,6 @@
  *   className: 'color',
  *   responsive: false,
  *   tokens: ['grey-100', 'grey-200', 'blue-500'],
- *   singleClassNameTokens: true,
- *   transformValue: token => `var(--h-color-${token})`,
  * };
  * ```
  */
@@ -32,20 +30,6 @@ type PropDef<T = string> = {
      * A default value if needed.
      */
     default?: string | number;
-    /**
-     * When we have a set of options that are too big to create CSS classes for every option.
-     * For example; colours. We can't reasonably create classes for every colour and every colour property,
-     * especially when we know many won't be used. In this case, we will have a single colour class,
-     * and set the colour using a custom property in the style attribute.
-     *
-     * If true and `value` is a string token, emit a single class and provide the value via CSS var
-     * after applying `transformValue`.
-     */
-    singleClassNameTokens?: boolean;
-    /**
-     * Transform applied to string token values when `singleClassNameTokens` is true.
-     */
-    transformValue?: (value: string) => string;
 };
 
 export type { PropDef };

package/dist/props/prop-def.d.ts

@@ -10,8 +10,6 @@
  *   className: 'color',
  *   responsive: false,
  *   tokens: ['grey-100', 'grey-200', 'blue-500'],
- *   singleClassNameTokens: true,
- *   transformValue: token => `var(--h-color-${token})`,
  * };
  * ```
  */
@@ -32,20 +30,6 @@ type PropDef<T = string> = {
      * A default value if needed.
      */
     default?: string | number;
-    /**
-     * When we have a set of options that are too big to create CSS classes for every option.
-     * For example; colours. We can't reasonably create classes for every colour and every colour property,
-     * especially when we know many won't be used. In this case, we will have a single colour class,
-     * and set the colour using a custom property in the style attribute.
-     *
-     * If true and `value` is a string token, emit a single class and provide the value via CSS var
-     * after applying `transformValue`.
-     */
-    singleClassNameTokens?: boolean;
-    /**
-     * Transform applied to string token values when `singleClassNameTokens` is true.
-     */
-    transformValue?: (value: string) => string;
 };
 
 export type { PropDef };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react",
-  "version": "0.10.5",
+  "version": "0.11.1",
   "description": "React components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,7 +40,7 @@
     "@radix-ui/react-use-controllable-state": "^1.0.1",
     "clsx": "^2.1.1",
     "radix-ui": "^1.4.2",
-    "@utilitywarehouse/hearth-css-reset": "0.1.1"
+    "@utilitywarehouse/hearth-css-reset": "0.1.2"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",
@@ -79,7 +79,6 @@
     "lint:css:fix": "stylelint \"src/**/*.css\" --fix",
     "format": "prettier --write \"src/**/*.ts*\"",
     "format:ci": "prettier --list-different \"src/**/*.ts*\"",
-    "copy-tokens-index": "cp ./src/styles/tokens.css ./src/styles/tokens/index.css",
-    "gen:color-tokens": "node ./scripts/generate-color-tokens.js && prettier --write \"./src/tokens/color.ts\""
+    "copy-tokens-index": "cp ./src/styles/tokens.css ./src/styles/tokens/index.css"
   }
 }