feat: add tailwind theme support (#43616)

* feat: add tailwind theme support

* feat: simplify config

tools/ui-components/src/button.css

@@ -3,21 +3,11 @@
 .storybook-button {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 700;
-  border: 0;
-  border-radius: 3em;
   cursor: pointer;
   display: inline-block;
   line-height: 1;
 }
-.storybook-button--primary {
+
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
 .storybook-button--small {
   font-size: 12px;
   padding: 10px 16px;
@@ -31,6 +21,9 @@
   padding: 12px 24px;
 }
 
-.fcc-style {
+.button-default-style {
-  @apply bg-fccSecondary;
+  @apply bg-default-background-quaternary;
+  @apply border-default-foreground-secondary;
+  @apply text-default-foreground-secondary;
+  @apply border-2;
 }

tools/ui-components/src/button.stories.tsx

@@ -7,11 +7,27 @@ const story = {
   title: 'Example/Button',
   component: Button,
   argTypes: {
-    backgroundColor: { control: 'color' }
+    theme: {
+      options: ['dark', 'light'],
+      control: { type: 'radio' },
+      defaultValue: 'light'
+    }
   }
 };
 
-const Template: Story<ButtonProps> = args => <Button {...args} />;
+const Template: Story<ButtonProps> = args => {
+  return (
+    <div
+      className={`flex h-screen justify-center items-center ${
+        args.theme === 'dark'
+          ? 'dark bg-dark-theme-background'
+          : 'light bg-light-theme-background'
+      }`}
+    >
+      <Button {...args} />
+    </div>
+  );
+};
 
 export const Primary = Template.bind({});
 Primary.args = {

tools/ui-components/src/button.tsx

@@ -9,7 +9,6 @@ import './button.css';
 export const Button: React.FC<ButtonProps> = ({
   primary,
   size = 'medium',
-  backgroundColor,
   label,
   ...props
 }: ButtonProps) => {
@@ -22,9 +21,8 @@ export const Button: React.FC<ButtonProps> = ({
         'storybook-button',
         `storybook-button--${size}`,
         mode,
-        'fcc-style'
+        'button-default-style'
       ].join(' ')}
-      style={{ backgroundColor }}
       type='button'
       {...props}
     >

tools/ui-components/src/button.types.ts

@@ -3,8 +3,8 @@ type ButtonSize = 'small' | 'medium' | 'large';
 export interface ButtonProps {
   primary?: boolean;
   size?: ButtonSize;
-  backgroundColor?: string;
   label: string;
   customKey?: string;
   onClick: () => void;
+  theme?: 'light' | 'dark';
 }

tools/ui-components/src/colors.css

@@ -33,37 +33,25 @@
   --red90: #850000;
 }
 
-:export {
+html,
-  --gray00: var(--gray00);
+div.light {
-  --gray05: var(--gray05);
+  --default-foreground-primary: var(--gray90);
-  --gray10: var(--gray10);
+  --default-foreground-secondary: var(--gray85);
-  --gray15: var(--gray15);
+  --default-foreground-tertiary: var(--gray80);
-  --gray45: var(--gray45);
+  --default-foreground-quaternary: var(--gray75);
-  --gray75: var(--gray75);
+  --default-background-primary: var(--gray00);
-  --gray80: var(--gray80);
+  --default-background-secondary: var(--gray05);
-  --gray85: var(--gray85);
+  --default-background-tertiary: var(--gray10);
-  --gray90: var(--gray90);
+  --default-background-quaternary: var(--gray15);
-
+}
-  --purple10: var(--purple10);
+
-  --purple50: var(--purple50);
+html.dark,
-  --purple90: var(--purple90);
+div.dark {
-
+  --default-foreground-primary: var(--gray00);
-  --yellow10: var(--yellow10);
+  --default-foreground-secondary: var(--gray05);
-  --yellow20: var(--yellow20);
+  --default-foreground-quaternary: var(--gray15);
-  --yellow50: var(--yellow50);
+  --default-background-primary: var(--gray90);
-  --yellow90: var(--yellow90);
+  --default-background-secondary: var(--gray85);
-
+  --default-background-tertiary: var(--gray80);
-  --blue10: var(--blue10);
+  --default-background-quaternary: var(--gray75);
-  --blue20: var(--blue20);
-  --blue30: var(--blue30);
-  --blue50: var(--blue50);
-  --blue90: var(--blue90);
-
-  --green10: var(--green10);
-  --green90: var(--green90);
-
-  --red10: var(--red10);
-  --red20: var(--red20);
-  --red80: var(--red80);
-  --red90: var(--red90);
 }

tools/ui-components/tailwind.config.js

@@ -1,9 +1,18 @@
 module.exports = {
   purge: ['./src/**/*.html', './src/**/*.js'],
-  darkMode: false,
+  darkMode: 'class',
   theme: {
     colors: {
-      fccSecondary: 'var(--green90)'
+      'dark-theme-background': 'var(--gray90)',
+      'light-theme-background': 'var(--gray00)',
+      'default-foreground-primary': 'var(--default-foreground-primary)',
+      'default-foreground-secondary': 'var(--default-foreground-secondary)',
+      'default-foreground-tertiary': 'var(--default-foreground-tertiary)',
+      'default-foreground-quaternary': 'var(--default-foreground-quaternary)',
+      'default-background-primary': 'var(--default-background-primary)',
+      'default-background-secondary': 'var(--default-background-secondary)',
+      'default-background-tertiary': 'var(--default-background-tertiary)',
+      'default-background-quaternary': 'var(--default-background-quaternary)'
     }
   },
   variants: {