feat: add complete tailwind color palette

tailwind.common.js

@@ -5,18 +5,40 @@ module.exports = {
     colors: {
       // Make sure these guidelines are followed when adding new colors: https://tailwindcss.com/docs/customizing-colors#using-css-variables
       // Color variables should be added to tailwind.css.
-      'primary-main': 'rgb(var(--primary-main) / <alpha-value>)',
       brand: {
         400: 'rgb(var(--brand-400) / <alpha-value>)',
         300: 'rgb(var(--brand-300) / <alpha-value>)',
+        200: 'rgb(var(--brand-200) / <alpha-value>)',
+        100: 'rgb(var(--brand-100) / <alpha-value>)',
       },
       grey: {
         0: 'rgb(var(--grey-0) / <alpha-value>)',
         100: 'rgb(var(--grey-100) / <alpha-value>)',
         200: 'rgb(var(--grey-200) / <alpha-value>)',
         300: 'rgb(var(--grey-300) / <alpha-value>)',
         400: 'rgb(var(--grey-400) / <alpha-value>)',
+        500: 'rgb(var(--grey-500) / <alpha-value>)',
+        600: 'rgb(var(--grey-600) / <alpha-value>)',
+        700: 'rgb(var(--grey-700) / <alpha-value>)',
       },
+      warning: {
+        400: 'rgb(var(--warning-400) / <alpha-value>)',
+        300: 'rgb(var(--warning-300) / <alpha-value>)',
+        200: 'rgb(var(--warning-200) / <alpha-value>)',
+        100: 'rgb(var(--warning-100) / <alpha-value>)',
+      },
+      error: {
+        400: 'rgb(var(--error-400) / <alpha-value>)',
+        300: 'rgb(var(--error-300) / <alpha-value>)',
+        200: 'rgb(var(--error-200) / <alpha-value>)',
+        100: 'rgb(var(--error-100) / <alpha-value>)',
+      },
+      blue: {
+        400: 'rgb(var(--blue-400) / <alpha-value>)',
+        300: 'rgb(var(--blue-300) / <alpha-value>)',
+        200: 'rgb(var(--blue-200) / <alpha-value>)',
+        100: 'rgb(var(--blue-100) / <alpha-value>)',
+      }
     },
     spacing: {
       // This spacing scale is based on the actual pixel values converted to REM values.
@@ -44,4 +66,5 @@ module.exports = {
     // border-solid is needed whereas it would normally be set by default.
     preflight: false,
   },
+  darkMode: 'class',
 };

tailwind.css

@@ -11,12 +11,65 @@
 
       Colors are based off of https://www.figma.com/file/Md1Cl2B9eJi4NMzQgpbdMF/Dark-Mode?type=design&node-id=112-9885&mode=design&t=YKxx8fYvslM2TeLp-0.
     */
+
     --brand-400: 79 181 115;
     --brand-300: 123 199 150;
+    --brand-200: 185 225 199;
+    --brand-100: 220 240 227;
+
     --grey-0: 255 255 255;
     --grey-100: 250 250 250;
     --grey-200: 239 239 239;
     --grey-300: 210 213 217;
     --grey-400: 143 143 143;
+    --grey-500: 84 85 85;
+    --grey-600: 32 32 32;
+    --grey-700: 0 0 0;
+
+    --warning-400: 255 196 50;
+    --warning-300: 255 211 101;
+    --warning-200: 255 231 173;
+    --warning-100: 255 243 214;
+
+    --error-400: 255 69 38;
+    --error-300: 230 115 92;
+    --error-200: 242 181 168;
+    --error-100: 248 218 212;
+
+    --blue-400: 61 122 207;
+    --blue-300: 109 155 219;
+    --blue-200: 177 202 236;
+    --blue-100: 216 228 245;
+  }
+
+  .dark {
+    --brand-400: 123 199 150;
+    --brand-300: 185 225 199;
+    --brand-200: 220 240 227;
+    --brand-100: 79 181 115;
+
+    --grey-0: 0 0 0;
+    --grey-100: 32 32 32;
+    --grey-200: 84 85 85;
+    --grey-300: 143 143 143;
+    --grey-400: 210 213 217;
+    --grey-500: 239 239 239;
+    --grey-600: 250 250 250;
+    --grey-700: 255 255 255;
+
+    --warning-400: 255 211 101;
+    --warning-300: 255 231 173;
+    --warning-200: 255 243 214;
+    --warning-100: 255 196 50;
+
+    --error-400: 230 115 92;
+    --error-300: 242 181 168;
+    --error-200: 248 218 212;
+    --error-100: 255 69 38;
+
+    --blue-400: 109 155 219;
+    --blue-300: 177 202 236;
+    --blue-200: 216 228 245;
+    --blue-100: 61 122 207;
   }
 }

web-components/src/theme/colors.stories.tsx

@@ -0,0 +1,63 @@
+import { cn } from "src/utils/styles/cn";
+
+const Swatch = ({bgColor, className}: {bgColor: string, className?: string}) =>
+  <div className={cn(bgColor, className, "p-10 rounded-md")}>
+    {bgColor.substring(3)}
+  </div>
+
+const Row = ({children}: {children: React.ReactNode}) =>
+  <div className="flex flex-row gap-10">
+    {children}
+  </div>
+
+const Pallete = () =>
+  <div className="flex flex-col gap-30 bg-grey-0 text-grey-700 p-50">
+    <Row>
+      <Swatch bgColor="bg-brand-400" />
+      <Swatch bgColor="bg-brand-300" />
+      <Swatch bgColor="bg-brand-200" />
+      <Swatch bgColor="bg-brand-100" />
+    </Row>
+    <Row>
+      <Swatch bgColor="bg-grey-0" />
+      <Swatch bgColor="bg-grey-100" />
+      <Swatch bgColor="bg-grey-200" />
+      <Swatch bgColor="bg-grey-300" />
+      <Swatch bgColor="bg-grey-400" className="text-grey-0" />
+      <Swatch bgColor="bg-grey-500" className="text-grey-0" />
+      <Swatch bgColor="bg-grey-600" className="text-grey-0" />
+      <Swatch bgColor="bg-grey-700" className="text-grey-0" />
+    </Row>
+    <Row>
+      <Swatch bgColor="bg-warning-400" />
+      <Swatch bgColor="bg-warning-300" />
+      <Swatch bgColor="bg-warning-200" />
+      <Swatch bgColor="bg-warning-100" />
+    </Row>
+    <Row>
+      <Swatch bgColor="bg-error-400" className="text-grey-0" />
+      <Swatch bgColor="bg-error-300" />
+      <Swatch bgColor="bg-error-200" />
+      <Swatch bgColor="bg-error-100" />
+    </Row>
+    <Row>
+      <Swatch bgColor="bg-blue-400" className="text-grey-0" />
+      <Swatch bgColor="bg-blue-300" />
+      <Swatch bgColor="bg-blue-200" />
+      <Swatch bgColor="bg-blue-100" />
+    </Row>
+  </div>
+
+export default {
+  title: 'Colors',
+  component: Pallete,
+};
+
+export const Light = {};
+
+export const Dark = {
+  render: () => <div className="dark">
+    <Pallete />
+  </div>
+};
+

web-storybook/.storybook/main.js

@@ -9,7 +9,7 @@ const path = require('path');
 
 module.exports = {
   stories: [
-    '../../web-components/src/components/**/*.stories.tsx',
+    '../../web-components/src/**/*.stories.tsx',
     '../../web-marketplace/src/**/*.stories.tsx',
   ],
   addons: [