more testing

primer · Feb 29, 2024 · 84ef766 · 84ef766
1 parent 33cd0f8
commit 84ef766
Show file tree

Hide file tree

Showing 8 changed files with 3,843 additions and 4,206 deletions.
diff --git a/docs/storybook/stories/Color/Display/Demo.stories.tsx b/docs/storybook/stories/Color/Display/Demo.stories.tsx
@@ -62,13 +62,21 @@ export default {
 const renderKitchenSink = (variant: (typeof variants)[number], width?: number) => {
   return (
     <Box sx={{width: width ? `${width}px` : 'auto'}}>
+      <Box sx={{borderBottom: 'solid 1px var(--borderColor-default)', marginBottom: '1rem'}}></Box>
+      <Box sx={{borderBottom: 'solid 1px var(--base-display-color-gray-2)', marginBottom: '1rem'}}></Box>
+      <Box sx={{borderBottom: 'solid 1px var(--borderColor-muted)', marginBottom: '1rem'}}></Box>
+      <Box sx={{borderBottom: 'solid 1px var(--base-display-color-gray-1)', marginBottom: '1rem'}}></Box>
+      <Box sx={{color: 'var(--fgColor-default)', marginBottom: '1rem'}}>Default old</Box>
+      <Box sx={{color: 'var(--base-display-color-gray-9)', marginBottom: '1rem'}}>Default new</Box>
+      <Box sx={{color: 'var(--fgColor-muted)', marginBottom: '1rem'}}>Muted old</Box>
+      <Box sx={{color: 'var(--base-display-color-gray-6)', marginBottom: '1rem'}}>Muted new</Box>
       <Flash
         sx={{
-          backgroundColor: `var(--base-color-${variant}-0)`,
-          border: `1px solid var(--base-color-${variant}-4)`,
-          color: `var(--base-color-${variant}-6)`,
+          backgroundColor: `var(--base-display-color-${variant}-0)`,
+          border: `1px solid var(--base-display-color-${variant}-1)`,
+          color: `var(--base-display-color-${variant}-6)`,
           '.octicon': {
-            fill: `var(--base-color-${variant}-6)`,
+            fill: `var(--base-display-color-${variant}-6)`,
           },
         }}
       >
@@ -78,42 +86,43 @@ const renderKitchenSink = (variant: (typeof variants)[number], width?: number) =
         <Button
           variant="primary"
           sx={{
-            backgroundColor: `var(--base-color-${variant}-6)`,
+            backgroundColor: `var(--base-display-color-${variant}-6)`,
             '&:hover': {
-              backgroundColor: `var(--base-color-${variant}-7)`,
+              backgroundColor: `var(--base-display-color-${variant}-7)`,
             },
             '&:active': {
-              backgroundColor: `var(--base-color-${variant}-8)`,
+              backgroundColor: `var(--base-display-color-${variant}-8)`,
             },
           }}
         >
           Button
         </Button>
+        <Button variant="invisible">Invisible</Button>
         <Token
           text="Default Token"
           sx={{
-            backgroundColor: `var(--base-color-${variant}-0)`,
-            border: `0px solid var(--base-color-${variant}-4)`,
-            color: `var(--base-color-${variant}-7)`,
+            backgroundColor: `var(--base-display-color-${variant}-0)`,
+            border: `0px solid var(--base-display-color-${variant}-4)`,
+            color: `var(--base-display-color-${variant}-6)`,
             '&:hover': {
-              color: `var(--base-color-${variant}-8)`,
-              backgroundColor: `var(--base-color-${variant}-1)`,
+              color: `var(--base-display-color-${variant}-7)`,
+              backgroundColor: `var(--base-display-color-${variant}-1)`,
             },
             '&:active': {
-              color: `var(--base-color-${variant}-9)`,
-              backgroundColor: `var(--base-color-${variant}-2)`,
+              color: `var(--base-display-color-${variant}-8)`,
+              backgroundColor: `var(--base-display-color-${variant}-2)`,
             },
           }}
         />
         <Label
           sx={{
-            border: `1px solid var(--base-color-${variant}-6)`,
-            color: `var(--base-color-${variant}-6)`,
+            border: `1px solid var(--base-display-color-${variant}-6)`,
+            color: `var(--base-display-color-${variant}-6)`,
           }}
         >
           System label
         </Label>
-        <CircleBadge sx={{color: `var(--base-color-${variant}-6)`}} size={60}>
+        <CircleBadge sx={{color: `var(--base-display-color-${variant}-6)`}} size={60}>
           <CircleBadge.Icon icon={ZapIcon} />
         </CircleBadge>
       </Box>
@@ -149,8 +158,12 @@ const renderKitchenSink = (variant: (typeof variants)[number], width?: number) =
       </Box>
       <Box sx={{marginTop: 3, display: 'flex', gap: 2, alignItems: 'center'}}>
         <Text mr={3}>5 of 10</Text>
-        <ProgressBar progress={50} inline sx={{width: '200px'}} bg={`var(--base-color-${variant}-6)`} />
-        <CircleOcticon icon={CheckIcon} size={24} sx={{bg: `var(--base-color-${variant}-6)`, color: 'fg.onEmphasis'}} />
+        <ProgressBar progress={50} inline sx={{width: '200px'}} bg={`var(--base-display-color-${variant}-6)`} />
+        <CircleOcticon
+          icon={CheckIcon}
+          size={24}
+          sx={{bg: `var(--base-display-color-${variant}-6)`, color: 'fg.onEmphasis'}}
+        />
       </Box>
       <ActionList>
         <ActionList.Item>
@@ -161,15 +174,15 @@ const renderKitchenSink = (variant: (typeof variants)[number], width?: number) =
         </ActionList.Item>
         <ActionList.Item
           sx={{
-            color: `var(--base-color-${variant}-6)`,
+            color: `var(--base-display-color-${variant}-6)`,
             '&:hover:not([aria-disabled])': {
-              color: `var(--base-color-${variant}-6)`,
-              backgroundColor: `var(--base-color-${variant}-1)`,
+              color: `var(--base-display-color-${variant}-6)`,
+              backgroundColor: `var(--base-display-color-${variant}-1)`,
             },
           }}
         >
           <ActionList.LeadingVisual>
-            <AlertIcon fill={`var(--base-color-${variant}-6)`} />
+            <AlertIcon fill={`var(--base-display-color-${variant}-6)`} />
           </ActionList.LeadingVisual>
           4 vulnerabilities
         </ActionList.Item>

diff --git a/docs/storybook/stories/Color/Display/PresentationalColors.stories.css b/docs/storybook/stories/Color/Display/PresentationalColors.stories.css
@@ -1,7 +1,9 @@
 .story-wrap-grid {
   padding: 24px;
 
-  --control-borderColor-rest: var(--base-color-gray-5) !important;
+  --control-borderColor-rest: var(--base-display-color-gray-6) !important;
+  --control-transparent-bgColor-hover: var(--base-display-color-gray-0) !important;
+  --bgColor-muted: var(--base-display-color-gray-0) !important;
 }
 #storybook-root {
   display: grid;