refactor(core): remove deprecated colours (#378)

* refactor(core): remove deprecated colours * fix(react): skeleton colours * test(react): fix tests with old colours
kata-ai · Aug 4, 2021 · 7a93c39 · 7a93c39 · vercel · Aug 4, 2021
1 parent a385352
commit 7a93c39
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 47 deletions.
diff --git a/packages/core/src/foundations/colors.ts b/packages/core/src/foundations/colors.ts
@@ -1,36 +1,3 @@
-/** (DEPRECATED) old color variables */
-const legacyColors = {
-  red: '#e53935',
-  green: '#00c853',
-  yellow: '#ffc400',
-  softKataBlue: '#d8ebff',
-  lightKataBlue: '#7fbcff',
-  kataBlue: '#006fe6',
-  darkKataBlue: '#0056b3',
-  lightCobalt: '#6386c7',
-  semiCobalt: '#2662cf',
-  cobalt: '#2053af',
-  darkCobalt: '#19428c',
-  gray10: '#f6f7f8',
-  gray20: '#edf1f2',
-  gray30: '#e2e6e8',
-  gray40: '#c2c7c8',
-  gray50: '#949a9d',
-  gray60: '#676b6d',
-  gray70: '#484c4f',
-  gray80: '#24282d',
-  special01: '#f8bbd0',
-  special02: '#e8bbf8',
-  special03: '#bbcaf8',
-  special04: '#bbe7f8',
-  special05: '#bbf8ee',
-  special06: '#bbf8c4',
-  special07: '#d6f8bb',
-  special08: '#f5f8bb',
-  special09: '#f8e5bb',
-  special10: '#f8cebb',
-};
-
 const blue = {
   // Blue
   /** Blue01 - Glitter */
@@ -214,7 +181,6 @@ const colors = {
   white: '#fff',
   black: '#000',
 
-  ...legacyColors,
   ...systemColors,
 
   // Core tokens

diff --git a/packages/core/src/foundations/space.ts b/packages/core/src/foundations/space.ts
@@ -1,4 +1,5 @@
-const spaceModern = {
+/** Space values (in px) mapped by size designators */
+const space = {
   /** Equivalent to 2px */
   xxxs: 2,
   /** Equivalent to 4px */
@@ -17,9 +18,4 @@ const spaceModern = {
   xxl: 48,
 };
 
-/** Space values (in px) mapped by size designators */
-const space = {
-  ...spaceModern,
-};
-
 export default space;
diff --git a/packages/react/src/components/skeleton/components/Skeleton.tsx b/packages/react/src/components/skeleton/components/Skeleton.tsx
@@ -19,7 +19,7 @@ const Wrapper = styled('div')`
   overflow: hidden;
   height: 20px;
   width: 100%;
-  background: ${theme.colors.gray20};
+  background: ${theme.colors.grey03};
   border-radius: 4px;
 
   &:after {
@@ -29,7 +29,7 @@ const Wrapper = styled('div')`
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, ${theme.colors.gray20}, ${theme.colors.gray10}, ${theme.colors.gray20});
+    background: linear-gradient(90deg, ${theme.colors.grey03}, ${theme.colors.grey02}, ${theme.colors.grey03});
     animation: ${progress} 1s ease-in-out infinite;
   }
 

diff --git a/packages/react/src/components/skeleton/components/SkeletonBox.tsx b/packages/react/src/components/skeleton/components/SkeletonBox.tsx
@@ -17,7 +17,7 @@ const Root = styled('div')`
   position: relative;
   overflow: hidden;
   width: 100%;
-  background: ${theme.colors.gray20};
+  background: ${theme.colors.grey03};
   border-radius: 8px;
 
   &:after {
@@ -27,7 +27,7 @@ const Root = styled('div')`
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, ${theme.colors.gray20}, ${theme.colors.gray10}, ${theme.colors.gray20});
+    background: linear-gradient(90deg, ${theme.colors.grey03}, ${theme.colors.grey02}, ${theme.colors.grey03});
     animation: ${progress} 1s ease-in-out infinite;
   }
 `;

diff --git a/packages/react/src/utils/storybook/ColorSwatch.test.tsx b/packages/react/src/utils/storybook/ColorSwatch.test.tsx
@@ -6,9 +6,7 @@ import { theme } from '../../theme';
 describe('utils/storybook', () => {
   describe('ColorSwatch', () => {
     test('renders correctly', () => {
-      const { container } = render(
-        <ColorSwatch title="Dark Kata Blue" colorKey="darkKataBlue" hex={theme.colors.darkKataBlue} />
-      );
+      const { container } = render(<ColorSwatch title="blue06" colorKey="blue06" hex={theme.colors.blue06} />);
 
       expect(container.firstChild).toBeInTheDocument();
     });