@charcoal-ui/styled 2.8.0 → 2.9.0

package/dist/TokenInjector.d.ts

@@ -4,7 +4,7 @@ export interface ThemeMap<T extends Theme> {
     [mediaQuery: `@media (${string})`]: T;
     [selector: string]: T;
 }
-type Theme = Pick<CharcoalAbstractTheme, 'color' | 'effect'>;
+type Theme = Pick<CharcoalAbstractTheme, 'color' | 'effect' | 'border'>;
 export default function TokenInjector<T extends Theme>({ theme: themeMap, background, }: {
     theme: ThemeMap<T>;
     background?: keyof ThemeMap<T>[string]['color'];

package/dist/TokenInjector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenInjector.d.ts","sourceRoot":"","sources":["../src/TokenInjector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAqC1D,MAAM,WAAW,QAAQ,CAAC,CAAC,SAAS,KAAK;IACvC,OAAO,EAAE,CAAC,CAAA;IACV,CAAC,UAAU,EAAE,WAAW,MAAM,GAAG,GAAG,CAAC,CAAA;IACrC,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAA;CACtB;AAED,KAAK,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAA;AAE5D,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,KAAK,EAAE,EACrD,KAAK,EAAE,QAAQ,EACf,UAAU,GACX,EAAE;IACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;CAChD,eAEA"}
+{"version":3,"file":"TokenInjector.d.ts","sourceRoot":"","sources":["../src/TokenInjector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAsC1D,MAAM,WAAW,QAAQ,CAAC,CAAC,SAAS,KAAK;IACvC,OAAO,EAAE,CAAC,CAAA;IACV,CAAC,UAAU,EAAE,WAAW,MAAM,GAAG,GAAG,CAAC,CAAA;IACrC,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAA;CACtB;AAED,KAAK,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAA;AAEvE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,KAAK,EAAE,EACrD,KAAK,EAAE,QAAQ,EACf,UAAU,GACX,EAAE;IACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;CAChD,eAEA"}

package/dist/builders/border.d.ts

@@ -2,7 +2,7 @@ import { CharcoalAbstractTheme } from '@charcoal-ui/theme';
 import { Internal } from '../internals';
 export declare const borderDirections: readonly ["top", "right", "bottom", "left"];
 type BorderDirection = (typeof borderDirections)[number];
-export declare const createBorderCss: <T extends CharcoalAbstractTheme>(theme: T) => (variant: keyof T["border"], directions: readonly BorderDirection[]) => Internal;
+export declare const createBorderCss: <T extends CharcoalAbstractTheme>(variant: keyof T["border"], directions: readonly BorderDirection[]) => Internal;
 export default function border<T extends CharcoalAbstractTheme>(theme: T): Readonly<{
     border: { readonly [key in keyof T["border"] & string]: import("../factories/lib").PropertyChain<Internal, "bottom" | "left" | "right" | "top">; };
 }>;

package/dist/builders/border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/builders/border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,OAAO,EAAE,QAAQ,EAAkB,MAAM,cAAc,CAAA;AAOvD,eAAO,MAAM,gBAAgB,6CAA8C,CAAA;AAC3E,KAAK,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAUxD,eAAO,MAAM,eAAe,0FAIZ,SAAS,eAAe,EAAE,KACrC,QAmBF,CAAA;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC,SAAS,qBAAqB,EAAE,KAAK,EAAE,CAAC;;GAevE"}
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../src/builders/border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,OAAO,EAAE,QAAQ,EAAkB,MAAM,cAAc,CAAA;AAQvD,eAAO,MAAM,gBAAgB,6CAA8C,CAAA;AAC3E,KAAK,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD,eAAO,MAAM,eAAe,4EAEd,SAAS,eAAe,EAAE,KACrC,QAsBF,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC,SAAS,qBAAqB,EAAE,KAAK,EAAE,CAAC;;GAcvE"}

package/dist/index.cjs.js

@@ -88,6 +88,9 @@ var variable = (value) => `var(${value})`;
 function onEffectPseudo(effect, css2) {
   return effect === "hover" ? { "&:hover": { [import_utils.notDisabledSelector]: css2 } } : effect === "press" ? { "&:active": { [import_utils.notDisabledSelector]: css2 } } : effect === "disabled" ? { [import_utils.disabledSelector]: css2 } : unreachable(effect);
 }
+function withPrefixes(...parts) {
+  return parts.join("-");
+}
 
 // src/internals/index.ts
 var internalSym = Symbol("internal");
@@ -169,23 +172,20 @@ var defineMethodChains = (modifiers, source, ..._inferPhantom) => function defin
 }([]);
 
 // src/builders/border.ts
+var import_utils2 = require("@charcoal-ui/utils");
 var borderDirections = ["top", "right", "bottom", "left"];
-function borderProperty(direction) {
-  return `border-${direction}`;
-}
-function borderShorthand(color) {
-  return `solid 1px ${color}`;
-}
-var createBorderCss = (theme) => (variant, directions) => {
+var createBorderCss = (variant, directions) => {
   const all = directions.length === 0;
-  const value = borderShorthand(theme.border[variant].color);
+  const value = `solid 1px ${variable(
+    (0, import_utils2.customPropertyToken)(withPrefixes("border", variant.toString()))
+  )}`;
   return createInternal({
     toCSS() {
       return {
         ...all ? { border: value } : directions.reduce(
           (acc, direction) => ({
             ...acc,
-            [borderProperty(direction)]: value
+            [`border-${direction}`]: value
           }),
           {}
         )
@@ -195,7 +195,6 @@ var createBorderCss = (theme) => (variant, directions) => {
 };
 function border(theme) {
   const borderTypes = keyof(theme.border);
-  const borderCss = createBorderCss(theme);
   const borderObject = defineConstantProperties(
     {},
     {
@@ -204,7 +203,7 @@ function border(theme) {
         borderTypes,
         (variant) => definePropertyChains(
           borderDirections,
-          (modifiers) => borderCss(variant, modifiers)
+          (modifiers) => createBorderCss(variant, modifiers)
         )
       )
     }
@@ -213,12 +212,12 @@ function border(theme) {
 }
 
 // src/builders/borderRadius.ts
-var import_utils2 = require("@charcoal-ui/utils");
+var import_utils3 = require("@charcoal-ui/utils");
 var createBorderRadiusCss = (theme) => (size2) => {
   return createInternal({
     toCSS() {
       return {
-        borderRadius: (0, import_utils2.px)(theme.borderRadius[size2])
+        borderRadius: (0, import_utils3.px)(theme.borderRadius[size2])
       };
     }
   });
@@ -235,14 +234,14 @@ function borderRadius(theme) {
 }
 
 // src/builders/colors.ts
-var import_utils4 = require("@charcoal-ui/utils");
+var import_utils5 = require("@charcoal-ui/utils");
 var import_warning = __toESM(require("warning"));
 
 // src/builders/transition.ts
-var import_utils3 = require("@charcoal-ui/utils");
+var import_utils4 = require("@charcoal-ui/utils");
 var TRANSITION_DURATION = 0.2;
 function transition(_theme) {
-  const duration = (0, import_utils3.dur)(TRANSITION_DURATION);
+  const duration = (0, import_utils4.dur)(TRANSITION_DURATION);
   const transition2 = (property) => ({
     transition: property.map((v) => `${duration} ${v}`).join(", ")
   });
@@ -270,14 +269,14 @@ var createColorCss = (_theme) => (target, color, effects = []) => {
   function toCSS() {
     return {
       [targetProperty(target)]: variable(
-        (0, import_utils4.customPropertyToken)(color.toString())
+        (0, import_utils5.customPropertyToken)(color.toString())
       ),
       ...effects.filter(isSupportedEffect).reduce(
         (acc, effect) => ({
           ...acc,
           ...onEffectPseudo(effect, {
             [targetProperty(target)]: variable(
-              (0, import_utils4.customPropertyToken)(color.toString(), [effect])
+              (0, import_utils5.customPropertyToken)(color.toString(), [effect])
             )
           })
         }),
@@ -295,10 +294,10 @@ var createColorCss = (_theme) => (target, color, effects = []) => {
   });
 };
 var createGradientColorCss = (theme) => (color, effects = [], direction) => {
-  const toLinearGradient = (0, import_utils4.gradient)(direction);
+  const toLinearGradient = (0, import_utils5.gradient)(direction);
   function toCSS(context) {
     const optimized = !shouldCancelHalfLeading(context);
-    const duration = (0, import_utils4.dur)(TRANSITION_DURATION);
+    const duration = (0, import_utils5.dur)(TRANSITION_DURATION);
     if (optimized && effects.length > 0) {
       return {
         position: "relative",
@@ -319,7 +318,7 @@ var createGradientColorCss = (theme) => (color, effects = [], direction) => {
             },
             ...onEffectPseudo(effect, {
               "&::before": {
-                backgroundColor: (0, import_utils4.applyEffect)(
+                backgroundColor: (0, import_utils5.applyEffect)(
                   null,
                   theme.effect[effect] ?? []
                 )
@@ -341,7 +340,7 @@ var createGradientColorCss = (theme) => (color, effects = [], direction) => {
           ...acc,
           ...onEffectPseudo(effect, {
             ...toLinearGradient(
-              (0, import_utils4.applyEffectToGradient)(theme.effect[effect] ?? [])(
+              (0, import_utils5.applyEffectToGradient)(theme.effect[effect] ?? [])(
                 theme.gradientColor[color]
               )
             )
@@ -431,17 +430,17 @@ function elementEffect(theme) {
 }
 
 // src/builders/outline.ts
-var import_utils5 = require("@charcoal-ui/utils");
+var import_utils6 = require("@charcoal-ui/utils");
 var outlineType = ["focus"];
 var outlineCss = (weight, color) => ({
-  boxShadow: `0 0 0 ${(0, import_utils5.px)(weight)} ${color}`
+  boxShadow: `0 0 0 ${(0, import_utils6.px)(weight)} ${color}`
 });
 var createOutlineColorCss = (theme) => (variant, modifiers) => {
   const weight = theme.outline[variant].weight;
   const color = theme.outline[variant].color;
   return createInternal({
     toCSS() {
-      return modifiers.includes("focus") ? onFocus(outlineCss(weight, color)) : { "&&": { [import_utils5.notDisabledSelector]: outlineCss(weight, color) } };
+      return modifiers.includes("focus") ? onFocus(outlineCss(weight, color)) : { "&&": { [import_utils6.notDisabledSelector]: outlineCss(weight, color) } };
     },
     context: {
       boxShadowTransition: true
@@ -449,7 +448,7 @@ var createOutlineColorCss = (theme) => (variant, modifiers) => {
   });
 };
 var onFocus = (css2) => ({
-  [import_utils5.notDisabledSelector]: {
+  [import_utils6.notDisabledSelector]: {
     "&:focus, &:active": {
       outline: "none",
       ...css2
@@ -483,12 +482,12 @@ function outline(theme) {
 
 // src/builders/size.ts
 var import_foundation = require("@charcoal-ui/foundation");
-var import_utils6 = require("@charcoal-ui/utils");
+var import_utils7 = require("@charcoal-ui/utils");
 var fixedProperties = ["width", "height"];
 var createFixedPxCss = (theme) => (property, size2) => createInternal({
   toCSS() {
     return {
-      [property]: size2 === "auto" ? "auto" : (0, import_utils6.px)(theme.spacing[size2])
+      [property]: size2 === "auto" ? "auto" : (0, import_utils7.px)(theme.spacing[size2])
     };
   }
 });
@@ -502,7 +501,7 @@ var createFixedRelativeCss = (_theme) => (property, amount) => createInternal({
 var createFixedColumnCss = (theme) => (property, span) => createInternal({
   toCSS() {
     return {
-      [property]: (0, import_utils6.px)(
+      [property]: (0, import_utils7.px)(
         (0, import_foundation.columnSystem)(span, theme.grid.unit.column, theme.grid.unit.gutter)
       )
     };
@@ -529,7 +528,7 @@ function size(theme) {
 }
 
 // src/builders/spacing.ts
-var import_utils7 = require("@charcoal-ui/utils");
+var import_utils8 = require("@charcoal-ui/utils");
 var spacingProperties = ["margin", "padding"];
 var spacingDirections = [
   "top",
@@ -568,20 +567,20 @@ var createSpacingCss = (theme) => (property, modifiers) => {
   function toCSS({ cancelHalfLeadingPx = 0 }) {
     return {
       ...top !== void 0 && {
-        [spacingProperty(property, "top")]: top === "auto" ? "auto" : (0, import_utils7.px)(
+        [spacingProperty(property, "top")]: top === "auto" ? "auto" : (0, import_utils8.px)(
           theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)
         )
       },
       ...bottom !== void 0 && {
-        [spacingProperty(property, "bottom")]: bottom === "auto" ? "auto" : (0, import_utils7.px)(
+        [spacingProperty(property, "bottom")]: bottom === "auto" ? "auto" : (0, import_utils8.px)(
           theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)
         )
       },
       ...right !== void 0 && {
-        [spacingProperty(property, "right")]: right === "auto" ? "auto" : (0, import_utils7.px)(theme.spacing[right])
+        [spacingProperty(property, "right")]: right === "auto" ? "auto" : (0, import_utils8.px)(theme.spacing[right])
       },
       ...left !== void 0 && {
-        [spacingProperty(property, "left")]: left === "auto" ? "auto" : (0, import_utils7.px)(theme.spacing[left])
+        [spacingProperty(property, "left")]: left === "auto" ? "auto" : (0, import_utils8.px)(theme.spacing[left])
       }
     };
   }
@@ -605,7 +604,7 @@ function spacing(theme) {
 }
 
 // src/builders/typography.ts
-var import_utils8 = require("@charcoal-ui/utils");
+var import_utils9 = require("@charcoal-ui/utils");
 var createTypographyCss = (theme) => (size2, options = {}) => {
   const {
     preserveHalfLeading = false,
@@ -613,11 +612,11 @@ var createTypographyCss = (theme) => (size2, options = {}) => {
     bold = false
   } = options;
   const descriptor = theme.typography.size[size2];
-  const margin = -(0, import_utils8.halfLeading)(descriptor);
+  const margin = -(0, import_utils9.halfLeading)(descriptor);
   function toCSS(context) {
     return {
-      fontSize: (0, import_utils8.px)(descriptor.fontSize),
-      lineHeight: (0, import_utils8.px)(descriptor.lineHeight),
+      fontSize: (0, import_utils9.px)(descriptor.fontSize),
+      lineHeight: (0, import_utils9.px)(descriptor.lineHeight),
       ...monospace && {
         fontFamily: "monospace"
       },
@@ -628,11 +627,11 @@ var createTypographyCss = (theme) => (size2, options = {}) => {
         display: "flow-root",
         "&::before": {
           ...leadingCancel,
-          marginTop: (0, import_utils8.px)(margin)
+          marginTop: (0, import_utils9.px)(margin)
         },
         "&::after": {
           ...leadingCancel,
-          marginBottom: (0, import_utils8.px)(margin)
+          marginBottom: (0, import_utils9.px)(margin)
         }
       }
     };
@@ -689,6 +688,7 @@ function createO(theme) {
 // src/TokenInjector.tsx
 var import_react = __toESM(require("react"));
 var import_styled_components = require("styled-components");
+var import_utils10 = require("@charcoal-ui/utils");
 var GlobalStyle = import_styled_components.createGlobalStyle`
   ${({
   themeMap,
@@ -720,7 +720,17 @@ function TokenInjector({
 }) {
   return /* @__PURE__ */ import_react.default.createElement(GlobalStyle, { themeMap, background });
 }
-var defineColorVariableCSS = (theme) => Object.entries(defineThemeVariables(theme.color)({ theme })).map(([varName, value]) => variableDefinition(varName, value.toString())).join(";");
+var defineColorVariableCSS = (theme) => {
+  const borders = (0, import_utils10.mapObject)(theme.border, (name, { color }) => [
+    withPrefixes("border", name),
+    color
+  ]);
+  const colors2 = defineThemeVariables({ ...theme.color, ...borders })({ theme });
+  return toCSSVariables(colors2);
+};
+function toCSSVariables(css2) {
+  return Object.entries(css2).map(([varName, value]) => variableDefinition(varName, value.toString())).join(";");
+}
 var variableDefinition = (prop, value) => `${prop}: ${value}`;
 
 // src/helper.ts