Fix mapping of borderColors (#355)

gsoft-inc · Jul 18, 2024 · d76dd4c · d76dd4c
2 parents 23337b8 + 9ec7616
commit d76dd4c
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 56 deletions.
diff --git a/.changeset/strong-feet-report.md b/.changeset/strong-feet-report.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/styled-system": patch
+---
+
+Fix mapping of borderColor
diff --git a/packages/components/src/Badge/tests/chromatic/Badge.stories.tsx b/packages/components/src/Badge/tests/chromatic/Badge.stories.tsx
@@ -44,7 +44,7 @@ export const Secondary = {
 export const Styling = {
     render: props => (
         <Inline>
-            <Badge border="warning-strong" {...props} />
+            <Badge border="warning" {...props} />
             <Badge className="border-red" {...props} />
             <Badge style={{ border: "1px solid darkRed" }} {...props}>New</Badge>
         </Inline>

diff --git a/packages/components/src/ErrorMessage/tests/chromatic/ErrorMessage.stories.tsx b/packages/components/src/ErrorMessage/tests/chromatic/ErrorMessage.stories.tsx
@@ -46,7 +46,7 @@ export const Styling: Story = {
             }]
         ]}
         >
-            <ErrorMessage border="primary-strong" {...props} />
+            <ErrorMessage border="primary" {...props} />
             <ErrorMessage className="bg-blue" {...props} />
             <ErrorMessage style={{ backgroundColor: "blue" }} {...props} />
         </SlotProvider>

diff --git a/packages/components/src/HelperMessage/tests/chromatic/HelperMessage.stories.tsx b/packages/components/src/HelperMessage/tests/chromatic/HelperMessage.stories.tsx
@@ -30,7 +30,7 @@ export const Styling: Story = {
     },
     render: props => (
         <>
-            <HelperMessage border="warning-strong" {...props} />
+            <HelperMessage border="warning" {...props} />
             <HelperMessage className="bg-red" {...props} />
             <HelperMessage style={{ backgroundColor: "red" }} {...props} />
         </>

diff --git a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
diff --git a/packages/components/src/checkbox/tests/chromatic/CheckboxGroup.stories.tsx b/packages/components/src/checkbox/tests/chromatic/CheckboxGroup.stories.tsx
@@ -178,7 +178,7 @@ export const Vertical = {
             </Inline>
             <h1>Styling</h1>
             <Inline>
-                <CheckboxGroup border="warning-strong">
+                <CheckboxGroup border="warning">
                     <Label>Numbers</Label>
                     <CheckboxList>
                         <Checkbox value="1">1</Checkbox>

diff --git a/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx b/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx
@@ -202,7 +202,7 @@ export const Vertical = {
             </Inline>
             <h1>Styling</h1>
             <Inline>
-                <RadioGroup border="warning-strong">
+                <RadioGroup border="warning">
                     <Label>Numbers</Label>
                     <RadioList>
                         <Radio value="1">1</Radio>

diff --git a/packages/components/src/typography/Heading/tests/chromatic/Heading.stories.tsx b/packages/components/src/typography/Heading/tests/chromatic/Heading.stories.tsx
@@ -43,7 +43,7 @@ export const Styling: Story = {
     },
     render: props => (
         <>
-            <Heading border="warning-strong" {...props} />
+            <Heading border="warning" {...props} />
             <Heading className="bg-red" {...props} />
             <Heading style={{ backgroundColor: "red" }} {...props} />
         </>

diff --git a/packages/components/src/typography/Label/tests/chromatic/Label.stories.tsx b/packages/components/src/typography/Label/tests/chromatic/Label.stories.tsx
@@ -42,7 +42,7 @@ export const Styling: Story = {
     },
     render: props => (
         <>
-            <Label border="warning-strong" {...props} />
+            <Label border="warning" {...props} />
             <Label className="bg-red" {...props} />
             <Label style={{ backgroundColor: "red" }} {...props} />
         </>

diff --git a/packages/components/src/typography/OverlineText/tests/chromatic/Overline.stories.tsx b/packages/components/src/typography/OverlineText/tests/chromatic/Overline.stories.tsx
@@ -27,9 +27,9 @@ export const Styling: Story = {
     },
     render: props => (
         <>
-            <OverlineText border="warning-strong" {...props} />
+            <OverlineText border="warning" {...props} />
             <OverlineText className="bg-red" {...props} />
             <OverlineText style={{ backgroundColor: "red" }} {...props} />
         </>
     )
-};
+};
diff --git a/packages/components/src/typography/Text/tests/chromatic/Text.stories.tsx b/packages/components/src/typography/Text/tests/chromatic/Text.stories.tsx
@@ -42,7 +42,7 @@ export const Styling: Story = {
     },
     render: props => (
         <>
-            <Text border="warning-strong" {...props} />
+            <Text border="warning" {...props} />
             <Text className="bg-red" {...props} />
             <Text style={{ backgroundColor: "red" }} {...props} />
         </>

diff --git a/packages/styled-system/src/tokens/tokenMappings.ts b/packages/styled-system/src/tokens/tokenMappings.ts
@@ -6,6 +6,7 @@ import { isNil, isObject } from "../utils/assertion.ts";
 
 import {
     BackgroundColors,
+    BorderColors,
     CoreSpace,
     DataVizColors,
     Elevation,
@@ -61,7 +62,7 @@ export const BackgroundColorMapping = {
 };
 
 export const BorderMapping = {
-    ...createMapping(BackgroundColors, createBorderValueTemplate),
+    ...createMapping(BorderColors, createBorderValueTemplate),
     ...createMapping(HopperColors, createBorderValueTemplate),
     ...createMapping(DataVizColors, createBorderValueTemplate)
 };
@@ -153,10 +154,10 @@ export type CssBoxShadow = Globals | "none";
 export type CssBorder = Globals | 0;
 export type CssBorderRadius = Globals | 0;
 export type CssGap = Globals | "normal" | 0;
-export type CSSSizing = "auto" | "fit-content" | "max-content" | "min-content"| Globals | Percentage;
+export type CSSSizing = "auto" | "fit-content" | "max-content" | "min-content" | Globals | Percentage;
 
 export type BackgroundColorValue = keyof typeof BackgroundColorMapping | CssColor;
-export type UNSAFE_BackgroundColorValue = keyof typeof BackgroundColorMapping | Property.BackgroundColor ;
+export type UNSAFE_BackgroundColorValue = keyof typeof BackgroundColorMapping | Property.BackgroundColor;
 
 export type BorderValue = keyof typeof BorderMapping | CssColor | CssBorder;
 export type UNSAFE_BorderValue = keyof typeof BorderMapping | Property.Border;
@@ -196,11 +197,23 @@ export type UNSAFE_GridAutoRowsValue = keyof typeof SizingMapping | Property.Gri
 
 export type GridTemplateAreasValue = Property.GridTemplateAreas | Array<string>;
 
-export type GridTemplateColumnsValue = keyof typeof SizingMapping | CssGridTemplate | Array<keyof typeof SizingMapping | CssGridTemplate>;
-export type UNSAFE_GridTemplateColumnsValue = keyof typeof SizingMapping | Property.GridTemplateColumns | Array<keyof typeof SizingMapping | Property.GridTemplateColumns>;
-
-export type GridTemplateRowsValue = keyof typeof SizingMapping | CssGridTemplate | Array<keyof typeof SizingMapping | CssGridTemplate>;
-export type UNSAFE_GridTemplateRowsValue = keyof typeof SizingMapping | Property.GridTemplateRows | Array<keyof typeof SizingMapping | Property.GridTemplateRows>;
+export type GridTemplateColumnsValue =
+    keyof typeof SizingMapping
+    | CssGridTemplate
+    | Array<keyof typeof SizingMapping | CssGridTemplate>;
+export type UNSAFE_GridTemplateColumnsValue =
+    keyof typeof SizingMapping
+    | Property.GridTemplateColumns
+    | Array<keyof typeof SizingMapping | Property.GridTemplateColumns>;
+
+export type GridTemplateRowsValue =
+    keyof typeof SizingMapping
+    | CssGridTemplate
+    | Array<keyof typeof SizingMapping | CssGridTemplate>;
+export type UNSAFE_GridTemplateRowsValue =
+    keyof typeof SizingMapping
+    | Property.GridTemplateRows
+    | Array<keyof typeof SizingMapping | Property.GridTemplateRows>;
 
 export type HeightValue = keyof typeof SizingMapping | CSSSizing;
 export type UNSAFE_HeightValue = keyof typeof SizingMapping | Property.Height;