chore: refactor colors

ccontrols · Sep 26, 2020 · 460532d · 460532d
1 parent a16ec4a
commit 460532d
Show file tree

Hide file tree

Showing 42 changed files with 189 additions and 187 deletions.
diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AltaColor, AltaColorPalette } from './AltaColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AltaColor',

diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Theme } from 'theme-ui';
+import { jsx, Theme } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block, as well as hex(string) and rgb values.
@@ -14,7 +14,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'row',
@@ -23,7 +23,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             bg: colorValue,
             width: 64,
@@ -32,7 +32,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
           }}
         />
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -43,24 +43,24 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
           py: 1,
         }}
       >
-        <Box
+        <div
           sx={{
             fontWeight: 'bold',
             borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
             pb: 1,
           }}
         >
           {name || hex}
-        </Box>
-        <Box>HEX: {hex}</Box>
-        <Box>
+        </div>
+        <div>HEX: {hex}</div>
+        <div>
           RGB:{' '}
           {`${rgba.r}, ${rgba.g}, ${rgba.b}${
             rgba.a !== 1 ? `, ${rgba.a}` : ''
           }`}
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 };
 

diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AntdHorzColor, AntdHorzColorPalette } from './AntdHorzColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AntdHorzColor',

diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC, useState, useMemo } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
@@ -29,9 +29,9 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
     [isContained],
   );
   return (
-    <Box sx={{ display: 'flex', flex: '1', height: 90, maxWidth: 120 }}>
+    <div sx={{ display: 'flex', flex: '1', height: 90, maxWidth: 120 }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
-        <Box
+        <div
           {...onMouseEvents}
           sx={{
             position: 'absolute',
@@ -55,14 +55,14 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
             },
           }}
         >
-          <Box
+          <div
             sx={{
               fontWeight: 'bold',
             }}
           >
             {name || hex}
-          </Box>
-          <Box
+          </div>
+          <div
             sx={{
               pointerEvents: 'none',
               ...(hover || hoverMe ? {} : { visibility: 'hidden', height: 0 }),
@@ -73,10 +73,10 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
                   rgba.a !== 1 ? `, ${rgba.a}` : ''
                 }`
               : hex}
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 

diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AntdVertColor, AntdVertColorPalette } from './AntdVertColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AntdVertColor',

diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC, useState, useMemo } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
@@ -29,9 +29,9 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
   );
 
   return (
-    <Box sx={{ display: 'flex', flex: '1', width: 250 }}>
+    <div sx={{ display: 'flex', flex: '1', width: 250 }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
-        <Box
+        <div
           {...onMouseEvents}
           sx={{
             display: 'flex',
@@ -49,15 +49,15 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
             },
           }}
         >
-          <Box
+          <div
             sx={{
               fontWeight: 'bold',
               mr: 4,
             }}
           >
             {name || hex}
-          </Box>
-          <Box
+          </div>
+          <div
             className="item-text"
             sx={{
               pointerEvents: 'none',
@@ -69,10 +69,10 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
                   rgba.a !== 1 ? `, ${rgba.a}` : ''
                 }`
               : hex}
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 

diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnvilColor, AnvilColorPalette } from './AnvilColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AnvilColor',

diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Heading } from 'theme-ui';
+import { jsx, Heading } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block with a title, as well as hex(string) and rgb values.
@@ -15,7 +15,7 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -24,14 +24,14 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             position: 'relative',
             bg: colorValue,
             height: 90,
           }}
         >
-          <Box
+          <div
             sx={{
               position: 'absolute',
               bottom: 10,
@@ -41,10 +41,10 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
               borderRadius: '50%',
               bg: textColor,
             }}
-          ></Box>
-        </Box>
+          />
+        </div>
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -61,11 +61,11 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
         >
           {name || hex}
         </Heading>
-        <Box sx={{ fontSize: 1 }}>{`${
+        <div sx={{ fontSize: 1 }}>{`${
           typeof color !== 'string' ? color.name : 'HEX:'
-        } ${hex}`}</Box>
-      </Box>
-    </Box>
+        } ${hex}`}</div>
+      </div>
+    </div>
   );
 };
 

diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AtlassianColor, AtlassianColorPalette } from './AtlassianColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AtlassianColor',