feat: update color palette according to the updated design

traefik · Oct 28, 2021 · c9c617d · c9c617d
1 parent 0961cf2
commit c9c617d
Show file tree

Hide file tree

Showing 33 changed files with 774 additions and 610 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,7 +1,6 @@
 import { FaencyProvider } from '../components/FaencyProvider';
 import { DocsContainer } from './components/DocContainer';
-import { themes } from '@storybook/theming';
-import { deepBlue, deepBlueDark } from '../stitches.config';
+import { globalCss } from '../';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,14 +12,23 @@ export const parameters = {
   },
   darkMode: {
     stylePreview: true,
-    dark: { ...themes.dark, appContentBg: deepBlueDark.deepBlue1 },
-    light: { ...themes.light, appContentBg: deepBlue.deepBlue1 },
   },
   docs: {
     container: DocsContainer,
   },
 };
 
+const globalStyle = globalCss({
+  body: {
+    bc: '$contentBg',
+  },
+});
+
 export const decorators = [
-  (renderStory) => <FaencyProvider primaryColor="$neon8">{renderStory()}</FaencyProvider>,
+  (renderStory) => (
+    <FaencyProvider primaryColor="$neon9">
+      {globalStyle()}
+      {renderStory()}
+    </FaencyProvider>
+  ),
 ];
diff --git a/colors/deepBlue.ts b/colors/deepBlue.ts
@@ -0,0 +1,59 @@
+export const deepBlue = {
+  deepBlue1: 'hsl(208, 60.0%, 99.0%)',
+  deepBlue2: 'hsl(210, 90.0%, 96.1%)',
+  deepBlue3: 'hsl(210, 67.8%, 94.6%)',
+  deepBlue4: 'hsl(210, 49.1%, 92.2%)',
+  deepBlue5: 'hsl(210, 34.8%, 88.1%)',
+  deepBlue6: 'hsl(209, 24.6%, 81.0%)',
+  deepBlue7: 'hsl(209, 17.6%, 67.9%)',
+  deepBlue8: 'hsl(208, 16.0%, 36.0%)',
+  deepBlue9: 'hsl(208, 24.0%, 27.0%)',
+  deepBlue10: 'hsl(208, 40.0%, 18.0%)',
+  deepBlue11: 'hsl(209, 88.0%, 9.0%)',
+  deepBlue12: 'hsl(208, 89.0%, 7.0%)',
+};
+
+export const deepBlueA = {
+  deepBlueA1: 'hsl(200, 94.9%, 38.7%, 0.016)',
+  deepBlueA2: 'hsl(210, 98.6%, 47.7%, 0.075)',
+  deepBlueA3: 'hsl(212, 97.9%, 41.8%, 0.091)',
+  deepBlueA4: 'hsl(210, 99.1%, 33.5%, 0.118)',
+  deepBlueA5: 'hsl(209, 99.5%, 25.7%, 0.161)',
+  deepBlueA6: 'hsl(209, 98.5%, 19.4%, 0.236)',
+  deepBlueA7: 'hsl(209, 99.1%, 15.2%, 0.377)',
+  deepBlueA8: 'hsl(207 99.7% 8.3% / 0.682)',
+  deepBlueA9: 'hsl(207, 98.6%, 8.2%, 0.797)',
+  deepBlueA10: 'hsl(208, 98.9%, 8.0%, 0.891)',
+  deepBlueA11: 'hsl(210, 100%, 7.6%, 0.980)',
+  deepBlueA12: 'hsl(211, 100%, 5.8%, 0.980)',
+};
+
+export const deepBlueDark = {
+  deepBlue1: 'hsl(208, 53.0%, 4.0%)',
+  deepBlue2: 'hsl(209, 88.0%, 7.0%)',
+  deepBlue3: 'hsl(209, 88.0%, 9.0%)',
+  deepBlue4: 'hsl(209, 45.6%, 16.0%)',
+  deepBlue5: 'hsl(209, 44.5%, 17.7%)',
+  deepBlue6: 'hsl(208, 43.4%, 19.6%)',
+  deepBlue7: 'hsl(208, 42.2%, 22.6%)',
+  deepBlue8: 'hsl(208, 40.5%, 29.0%)',
+  deepBlue9: 'hsl(208, 40.0%, 58.0%)',
+  deepBlue10: 'hsl(209, 40.0%, 68.0%)',
+  deepBlue11: 'hsl(209, 40.0%, 78.0%)',
+  deepBlue12: 'hsl(209, 60.0%, 94.0%)',
+};
+
+export const deepBlueDarkA = {
+  deepBlueA1: 'hsl(0, 0%, 0%, 0)',
+  deepBlueA2: 'hsl(216 100% 49.6% / 0.076)',
+  deepBlueA3: 'hsl(210 100% 50% / 0.113)',
+  deepBlueA4: 'hsl(210, 99.9%, 69.5%, 0.180)',
+  deepBlueA5: 'hsl(209, 98.5%, 69.8%, 0.206)',
+  deepBlueA6: 'hsl(209, 99.1%, 70.0%, 0.235)',
+  deepBlueA7: 'hsl(208, 99.0%, 70.7%, 0.277)',
+  deepBlueA8: 'hsl(208, 99.3%, 71.6%, 0.369)',
+  deepBlueA9: 'hsl(208, 99.6%, 77.7%, 0.733)',
+  deepBlueA10: 'hsl(210, 100%, 84.5%, 0.795)',
+  deepBlueA11: 'hsl(208, 99.7%, 90.0%, 0.858)',
+  deepBlueA12: 'hsl(210, 99.7%, 96.4%, 0.975)',
+};
diff --git a/colors/elevation.ts b/colors/elevation.ts
@@ -0,0 +1,17 @@
+export const elevation = {
+  '00dp': 'hsl(240, 4%, 95%)',
+  '01dp': 'hsl(0, 0%, 99%)',
+  '02dp': 'hsl(0, 0%, 99%)',
+  '03dp': 'hsl(0, 0%, 99%)',
+  '04dp': 'hsl(0, 0%, 99%)',
+  '05dp': 'hsl(0, 0%, 99%)',
+};
+
+export const elevationDark = {
+  '00dp': 'hsl(210, 68%, 9%)',
+  '01dp': 'hsl(208, 37%, 15%)',
+  '02dp': 'hsl(207, 32%, 17%)',
+  '03dp': 'hsl(209, 28%, 19%)',
+  '04dp': 'hsl(209, 23%, 21%)',
+  '05dp': 'hsl(209, 21%, 23%)',
+};
diff --git a/colors/grayBlue.ts b/colors/grayBlue.ts
@@ -0,0 +1,59 @@
+export const grayBlue = {
+  grayBlue1: 'hsl(208 9.0% 99.0%)',
+  grayBlue2: 'hsl(210 10.0% 96.1%)',
+  grayBlue3: 'hsl(210 9.9% 95.7%)',
+  grayBlue4: 'hsl(210 9.8% 94.9%)',
+  grayBlue5: 'hsl(210 9.7% 93.1%)',
+  grayBlue6: 'hsl(210 9.6% 89.8%)',
+  grayBlue7: 'hsl(210 9.4% 83.2%)',
+  grayBlue8: 'hsl(208, 9.0%, 80.0%)',
+  grayBlue9: 'hsl(208, 9.0%, 73.0%)',
+  grayBlue10: 'hsl(208 9.0% 53.0%)',
+  grayBlue11: 'hsl(208 9.0% 33.0%)',
+  grayBlue12: 'hsl(208 9.0% 13.0%)',
+};
+
+export const grayBlueA = {
+  grayBlueA1: 'hsl(240 89.3% 18.3% / 0.012)',
+  grayBlueA2: 'hsl(182 89% 7.1% / 0.032)',
+  grayBlueA3: 'hsl(210 80.6% 10.1% / 0.048)',
+  grayBlueA4: 'hsl(210 97.6% 7.3% / 0.055)',
+  grayBlueA5: 'hsl(220 92.3% 8.5% / 0.075)',
+  grayBlueA6: 'hsl(204 97.3% 8.8% / 0.114)',
+  grayBlueA7: 'hsl(210 95.8% 8.9% / 0.185)',
+  grayBlueA8: 'hsl(207 96.4% 8.9% / 0.211)',
+  grayBlueA9: 'hsl(205 96.4% 8.3% / 0.295)',
+  grayBlueA10: 'hsl(207 99.4% 8.4% / 0.514)',
+  grayBlueA11: 'hsl(208 96.8% 4.3% / 0.699)',
+  grayBlueA12: 'hsl(210 94.8% 1.4% / 0.883)',
+};
+
+export const grayBlueDark = {
+  grayBlue1: 'hsl(208 11.0% 4.0%)',
+  grayBlue2: 'hsl(220 9.7% 6.1%)',
+  grayBlue3: 'hsl(220 9.4% 6.3%)',
+  grayBlue4: 'hsl(220 8.8% 6.9%)',
+  grayBlue5: 'hsl(219 7.9% 7.9%)',
+  grayBlue6: 'hsl(218 7.4% 9.6%)',
+  grayBlue7: 'hsl(217 8.3% 13.0%)',
+  grayBlue8: 'hsl(210 10.8% 29.0%)',
+  grayBlue9: 'hsl(208, 11.0%, 45.0%)',
+  grayBlue10: 'hsl(208 11.0% 68.0%)',
+  grayBlue11: 'hsl(208 11.0% 78.0%)',
+  grayBlue12: 'hsl(208 11.0% 88.0%)',
+};
+
+export const grayBlueDarkA = {
+  grayBlueA1: 'hsl(0 0% 0% / 0)',
+  grayBlueA2: 'hsl(239 84.0% 90.2% / 0.025)',
+  grayBlueA3: 'hsl(238 87.4% 91.8% / 0.029)',
+  grayBlueA4: 'hsl(238 91.1% 93.0% / 0.033)',
+  grayBlueA5: 'hsl(237 70.9% 93.4% / 0.046)',
+  grayBlueA6: 'hsl(237 81.4% 95.6% / 0.062)',
+  grayBlueA7: 'hsl(210 94.1% 91.5% / 0.103)',
+  grayBlueA8: 'hsl(210 99.9% 90.2% / 0.291)',
+  grayBlueA9: 'hsl(206 98.8% 90.0% / 0.476)',
+  grayBlueA10: 'hsl(207 99.5% 95.1% / 0.701)',
+  grayBlueA11: 'hsl(210 96.3% 97.0% / 0.796)',
+  grayBlueA12: 'hsl(206 95.5% 98.4% / 0.890)',
+};
diff --git a/colors/index.ts b/colors/index.ts
@@ -0,0 +1,6 @@
+export * from './elevation';
+export * from './deepBlue';
+export * from './grayBlue';
+export * from './neon';
+export * from './orange';
+export * from './red';
diff --git a/colors/neon.ts b/colors/neon.ts
@@ -0,0 +1,59 @@
+export const neon = {
+  neon1: 'hsl(68, 60.0%, 99.0%)',
+  neon2: 'hsl(67, 90.0%, 96.1%)',
+  neon3: 'hsl(67, 86.3%, 94.4%)',
+  neon4: 'hsl(67, 82.5%, 90.5%)',
+  neon5: 'hsl(67, 79.8%, 82.3%)',
+  neon6: 'hsl(68, 78.5%, 69.8%)',
+  neon7: 'hsl(68, 78.5%, 60.6%)',
+  neon8: 'hsl(68, 53.0%, 48.0%)',
+  neon9: 'hsl(68, 53.0%, 36.0%)',
+  neon10: 'hsl(68, 53.0%, 24.0%)',
+  neon11: 'hsl(68, 53.0%, 18.0%)',
+  neon12: 'hsl(68, 53.0%, 10.0%)',
+};
+
+export const neonA = {
+  neonA1: 'hsl(60, 94.9%, 38.7%, 0.016)',
+  neonA2: 'hsl(67, 98.6%, 47.7%, 0.075)',
+  neonA3: 'hsl(67, 99.8%, 46.4%, 0.106)',
+  neonA4: 'hsl(68, 99.4%, 45.6%, 0.173)',
+  neonA5: 'hsl(68, 99.8%, 44.5%, 0.318)',
+  neonA6: 'hsl(68, 99.7%, 43.9%, 0.538)',
+  neonA7: 'hsl(68, 100%, 43.9%, 0.702)',
+  neonA8: 'hsl(68, 99.7%, 33.3%, 0.762)',
+  neonA9: 'hsl(68, 99.7%, 22.9%, 0.832)',
+  neonA10: 'hsl(68, 99.4%, 14.5%, 0.887)',
+  neonA11: 'hsl(68, 99.7%, 10.3%, 0.914)',
+  neonA12: 'hsl(69, 99.9%, 5.6%, 0.953)',
+};
+
+export const neonDark = {
+  neon1: 'hsl(68, 53.0%, 4.0%)',
+  neon2: 'hsl(68, 53.3%, 5.9%)',
+  neon3: 'hsl(72, 47.3%, 10.0%)',
+  neon4: 'hsl(73, 52.0%, 13.2%)',
+  neon5: 'hsl(73, 58.3%, 16.3%)',
+  neon6: 'hsl(72, 65.6%, 20.0%)',
+  neon7: 'hsl(70, 76.7%, 24.7%)',
+  neon8: 'hsl(68, 100%, 29.0%)',
+  neon9: 'hsl(68, 79.0%, 60.0%)',
+  neon10: 'hsl(68, 79.0%, 68.0%)',
+  neon11: 'hsl(68, 79.0%, 78.0%)',
+  neon12: 'hsl(68, 79.0%, 88.0%)',
+};
+
+export const neonDarkA = {
+  neonA1: 'hsl(0, 0%, 0%, 0)',
+  neonA2: 'hsl(61, 94.0%, 62.9%, 0.030)',
+  neonA3: 'hsl(73, 97.1%, 67.4%, 0.093)',
+  neonA4: 'hsl(72, 99.0%, 65.5%, 0.147)',
+  neonA5: 'hsl(74, 99.1%, 62.0%, 0.210)',
+  neonA6: 'hsl(72, 99.6%, 59.8%, 0.285)',
+  neonA7: 'hsl(70, 99.7%, 55.8%, 0.398)',
+  neonA8: 'hsl(68, 100%, 49.9%, 0.553)',
+  neonA9: 'hsl(68, 99.7%, 65.3%, 0.913)',
+  neonA10: 'hsl(68, 100%, 72.9%, 0.929)',
+  neonA11: 'hsl(68, 99.9%, 81.9%, 0.950)',
+  neonA12: 'hsl(69, 99.9%, 90.2%, 0.975)',
+};
diff --git a/colors/orange.ts b/colors/orange.ts
@@ -0,0 +1,59 @@
+export const orange = {
+  orange1: 'hsl(24 70.0% 99.0%)',
+  orange2: 'hsl(27 81.8% 97.8%)',
+  orange3: 'hsl(27 98.5% 95.4%)',
+  orange4: 'hsl(27 100% 92.2%)',
+  orange5: 'hsl(27 100% 88.1%)',
+  orange6: 'hsl(26 100% 82.5%)',
+  orange7: 'hsl(25 99.2% 74.8%)',
+  orange8: 'hsl(24 94.6% 63.9%)',
+  orange9: 'hsl(24 94.0% 50.0%)',
+  orange10: 'hsl(24 100% 46.0%)',
+  orange11: 'hsl(24 100% 37.0%)',
+  orange12: 'hsl(24 60.0% 17.0%)',
+};
+
+export const orangeA = {
+  orangeA1: 'hsl(20 94.9% 38.7% / 0.016)',
+  orangeA2: 'hsl(27 95.7% 46.1% / 0.040)',
+  orangeA3: 'hsl(26 100% 50.4% / 0.091)',
+  orangeA4: 'hsl(27 100% 50.0% / 0.157)',
+  orangeA5: 'hsl(28 100% 50.2% / 0.240)',
+  orangeA6: 'hsl(26 100% 50.1% / 0.350)',
+  orangeA7: 'hsl(25 100% 49.6% / 0.502)',
+  orangeA8: 'hsl(24 100% 48.6% / 0.702)',
+  orangeA9: 'hsl(24 99.9% 48.4% / 0.969)',
+  orangeA10: 'hsl(23 100% 46.4% / 0.980)',
+  orangeA11: 'hsl(23 100% 36.8% / 0.980)',
+  orangeA12: 'hsl(15 99.4% 11.0% / 0.934)',
+};
+
+export const orangeDark = {
+  orange1: 'hsl(35 100% 7.2%)',
+  orange2: 'hsl(35 100% 8.0%)',
+  orange3: 'hsl(34 87.5% 11.4%)',
+  orange4: 'hsl(33 84.1% 14.0%)',
+  orange5: 'hsl(33 83.6% 16.6%)',
+  orange6: 'hsl(33 85.7% 19.8%)',
+  orange7: 'hsl(34 91.5% 23.9%)',
+  orange8: 'hsl(35 100% 29.0%)',
+  orange9: 'hsl(24 94.0% 50.0%)',
+  orange10: 'hsl(35, 100%, 50.0%)',
+  orange11: 'hsl(35 100% 62.2%)',
+  orange12: 'hsl(24 97.0% 93.2%)',
+};
+
+export const orangeDarkA = {
+  orangeA1: 'hsl(0 0% 100% / 0)',
+  orangeA2: 'hsl(30 100% 50.2% / 0.064)',
+  orangeA3: 'hsl(33 100% 50.2% / 0.116)',
+  orangeA4: 'hsl(33 100% 50.2% / 0.176)',
+  orangeA5: 'hsl(33 99.4% 14.4% / 0.973)',
+  orangeA6: 'hsl(33 99.5% 17.6% / 0.973)',
+  orangeA7: 'hsl(34 100% 22.4% / 0.98)',
+  orangeA8: 'hsl(34 100% 28.6% / 0.98)',
+  orangeA9: 'hsl(24 99.8% 48.4% / 0.969)',
+  orangeA10: 'hsl(35 100% 50% / 0.98)',
+  orangeA11: 'hsl(36 100% 62.4% / 0.98)',
+  orangeA12: 'hsl(26 100% 94.2% / 0.98)',
+};
diff --git a/colors/red.ts b/colors/red.ts
@@ -0,0 +1,59 @@
+export const red = {
+  red1: 'hsl(347 100% 99.0%)',
+  red2: 'hsl(348 100% 99.0%)',
+  red3: 'hsl(348 99.7% 97.2%)',
+  red4: 'hsl(348 92.2% 94.5%)',
+  red5: 'hsl(348 83.3% 90.1%)',
+  red6: 'hsl(348 75.7% 84.0%)',
+  red7: 'hsl(347 71.9% 78.7%)',
+  red8: 'hsl(347 100% 67.0%)',
+  red9: 'hsl(347, 100%, 60.0%)',
+  red10: 'hsl(347 77.4% 52.4%)',
+  red11: 'hsl(347, 80.0%, 40.0%)',
+  red12: 'hsl(347 60.0% 15.0%)',
+};
+
+export const redA = {
+  redA1: 'hsl(348 100% 51.0% / 0.020)',
+  redA2: 'hsl(348 100% 51.0% / 0.020)',
+  redA3: 'hsl(347 100% 50.1% / 0.055)',
+  redA4: 'hsl(348 99.8% 48.2% / 0.106)',
+  redA5: 'hsl(349 99.3% 45.8% / 0.181)',
+  redA6: 'hsl(347 99.5% 43.2% / 0.283)',
+  redA7: 'hsl(347 99.8% 42.0% / 0.365)',
+  redA8: 'hsl(347 100% 50% / 0.641)',
+  redA9: 'hsl(347 100% 50.0% / 0.800)',
+  redA10: 'hsl(347 99.8% 43.8% / 0.844)',
+  redA11: 'hsl(347 99.9% 34.9% / 0.922)',
+  redA12: 'hsl(347 99.1% 9.7% / 0.942)',
+};
+
+export const redDark = {
+  red1: 'hsl(347 23.0% 10.0%)',
+  red2: 'hsl(346 34.4% 12.0%)',
+  red3: 'hsl(345 42.6% 16.5%)',
+  red4: 'hsl(345 46.5% 19.3%)',
+  red5: 'hsl(346 49.9% 22.1%)',
+  red6: 'hsl(346 53.9% 26.2%)',
+  red7: 'hsl(346 59.0% 32.3%)',
+  red8: 'hsl(347 64.8% 41.2%)',
+  red9: 'hsl(347, 100%, 60.0%)',
+  red10: 'hsl(347, 100%, 67.0%)',
+  red11: 'hsl(347 100% 72.0%)',
+  red12: 'hsl(347 100% 98.0%)',
+};
+
+export const redDarkA = {
+  redA1: 'hsl(0 0% 0% / 0)',
+  redA2: 'hsl(342 98.5% 53.6% / 0.045)',
+  redA3: 'hsl(344 99.1% 59.8% / 0.130)',
+  redA4: 'hsl(343 98.8% 60.1% / 0.184)',
+  redA5: 'hsl(346 99.6% 60.5% / 0.237)',
+  redA6: 'hsl(345 99.6% 60.5% / 0.322)',
+  redA7: 'hsl(346 99.7% 60.0% / 0.447)',
+  redA8: 'hsl(347 100% 59.2% / 0.634)',
+  redA9: 'hsl(347 100% 60.1% / 0.980)',
+  redA10: 'hsl(347 100% 67.3% / 0.980)',
+  redA11: 'hsl(347 100% 72.3% / 0.980)',
+  redA12: 'hsl(338 100% 98.9% / 0.980)',
+};
diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import { VariantProps } from '@stitches/react';
-import { styled, CSS } from '../../stitches.config';
+import { styled } from '../../stitches.config';
 import { Card } from '../Card';
 
 export const Alert = styled(Card, {
@@ -22,7 +22,7 @@ export const Alert = styled(Card, {
       },
       warning: {
         '&::before': {
-          boxShadow: 'inset 0 0 0 1px $colors$amber9',
+          boxShadow: 'inset 0 0 0 1px $colors$orange9',
         },
       },
       error: {