fix: subtle border color

Hyphen · Apr 23, 2024 · 915c4b6 · 915c4b6
1 parent 96dfc7c
commit 915c4b6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -116,7 +116,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^3.2.0",
+    "@hyphen/hyphen-design-tokens": "^3.2.1",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",

diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
@@ -98,7 +98,16 @@ export const Border = () => {
   return (
     <Box gap="md">
       <Box borderColor="default" borderWidth="sm" padding="md">
-        separator
+        default
+      </Box>
+      <Box borderColor="subtle" borderWidth="sm" padding="md">
+        subtle
+      </Box>
+      <Box borderColor="hover" borderWidth="sm" padding="md">
+        hover
+      </Box>
+      <Box borderColor="active" borderWidth="sm" padding="md">
+        active
       </Box>
       <Box borderColor="info" borderWidth="sm" padding="md">
         info

diff --git a/src/docs/Colors.mdx b/src/docs/Colors.mdx
@@ -1,5 +1,6 @@
 import { ColorPalette, ColorItem, Meta } from '@storybook/addon-docs';
 import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json';
+import { Box } from '../../src/components/Box/Box';
 
 <Meta title="Foundation/Colors" />
 
@@ -126,3 +127,33 @@ import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json
     )}
   />
 </ColorPalette>
+
+## Borders
+
+<ColorPalette>
+  <ColorItem
+    title="Backgrounds"
+    subtitle="used for borders"
+    colors={Object.keys(designTokens.color.border).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.border).map(
+        (g) => designTokens.color.border[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>
+
+## Text
+
+<ColorPalette>
+  <ColorItem
+    title="Text"
+    subtitle="used for text"
+    colors={Object.keys(designTokens.color.font).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.font).map(
+        (g) => designTokens.color.font[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>