feat: handle inverse themes in config provider (EightfoldAI#67)

thiyagaraj-eightfold · Apr 19, 2022 · 8044e04 · 8044e04
1 parent 4a69af0
commit 8044e04
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 490 deletions.
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -1,4 +1,31 @@
 .button {
+    --button-default-foreground-color: var(--primary-color-70);
+    --button-hover-foreground-color: var(--primary-color-70);
+    --button-focus-foreground-color: var(--primary-color-80);
+    --button-active-foreground-color: var(--primary-color-80);
+    --button-visited-foreground-color: var(--primary-color-80);
+    --button-default-outline-color: var(--primary-color-70);
+    --button-hover-outline-color: var(--primary-color-60);
+    --button-focus-outline-color: var(--primary-color-80);
+    --button-active-outline-color: var(--primary-color-80);
+    --button-visited-outline-color: var(--primary-color-80);
+    --button-primary-default-background-color: var(--primary-color-70);
+    --button-primary-hover-background-color: var(--primary-color-60);
+    --button-primary-focus-background-color: var(--primary-color-80);
+    --button-primary-active-background-color: var(--primary-color-80);
+    --button-primary-visited-background-color: var(--primary-color-80);
+    --button-primary-default-border-color: var(--primary-color-70);
+    --button-primary-hover-border-color: var(--primary-color-60);
+    --button-primary-focus-border-color: var(--primary-color-80);
+    --button-primary-active-border-color: var(--primary-color-80);
+    --button-primary-visited-border-color: var(--primary-color-80);
+    --button-default-background-color: var(--white-color);
+    --button-hover-background-color: var(--primary-color-10);
+    --button-focus-background-color: var(--primary-color-10);
+    --button-active-background-color: var(--primary-color-10);
+    --button-visited-background-color: var(--primary-color-10);
+    --button-hover-variant-background-color: var(--primary-color-20);
+    --text-color: var(--text-inverse-color);
     background-color: inherit;
     border: 2px solid rgba(var(--button-primary-default-border-color), 0.01);
     border-radius: $corner-radius-s;
@@ -118,18 +145,18 @@
 .button-primary {
     background-color: var(--button-primary-default-background-color);
     border-color: var(--button-primary-default-border-color);
-    color: var(--button-primary-default-foreground-color);
+    color: var(--text-color);
 
     &:hover {
         background-color: var(--button-primary-hover-background-color);
         border-color: var(--button-primary-hover-border-color);
-        color: var(--button-primary-hover-foreground-color);
+        color: var(--text-color);
     }
 
     &:active {
         background-color: var(--button-primary-active-background-color);
         border-color: var(--button-primary-active-border-color);
-        color: var(--button-primary-active-foreground-color);
+        color: var(--text-color);
     }
 
     &:focus-visible {
@@ -165,7 +192,7 @@
 .button-primary-disruptive {
     background-color: var(--disruptive-color-70);
     border-color: var(--disruptive-color-70);
-    color: var(--white-color);
+    color: var(--text-inverse-color);
 
     &:hover {
         background-color: var(--disruptive-color-60);
@@ -257,25 +284,25 @@
 
 .button-neutral {
     background-color: var(--white-color);
-    color: var(--button-neutral-default-foreground-color);
+    color: var(--text-secondary-color);
     outline: transparent solid 2px;
     outline-offset: -2px;
 
     &:hover {
         background-color: var(--grey-color-20);
-        color: var(--button-neutral-hover-foreground-color);
+        color: var(--text-secondary-color);
         outline-color: var(--grey-color-20);
     }
 
     &:active {
         background-color: var(--grey-color-10);
-        color: var(--button-neutral-active-foreground-color);
+        color: var(--text-secondary-color);
         outline-color: var(--grey-color-10);
     }
 
     &:focus-visible {
         background-color: var(--grey-color-10);
-        color: var(--button-neutral-active-foreground-color);
+        color: var(--text-secondary-color);
         outline-color: var(--grey-color-80);
     }
 }
@@ -288,7 +315,7 @@
         width: 1px;
 
         &.split-divider-primary {
-            background-color: var(--button-primary-default-foreground-color);
+            background-color: var(--button-default-foreground-color);
         }
 
         &.split-divider-secondary {
@@ -312,7 +339,7 @@
         }
 
         &.split-divider-neutral {
-            background-color: var(--button-neutral-default-foreground-color);
+            background-color: var(--button-default-foreground-color);
         }
     }
 

diff --git a/src/components/ConfigProvider/ConfigProvider.tsx b/src/components/ConfigProvider/ConfigProvider.tsx
@@ -1,38 +1,47 @@
 import React, { createContext, FC, useEffect, useState } from 'react';
 import { registerTheme } from './Theming/styleGenerator';
 import { ConfigProviderProps, IConfigContext } from './ConfigProvider.types';
-import { ThemeOptions } from './Theming';
+import { IRegisterTheme, ThemeOptions } from './Theming';
 import { useFontSize } from '../../hooks/useFontSize';
 
 const ConfigContext = createContext<Partial<IConfigContext>>({});
 
 const DEFAULT_THEME = 'blue';
+const DEFAULT_FONT_SIZE = 16;
 
 const ConfigProvider: FC<ConfigProviderProps> = ({
     children,
     themeOptions: defaultThemeOptions,
 }) => {
     const [themeOptions, setThemeOptions] =
         useState<ThemeOptions>(defaultThemeOptions);
+
+    const [registeredTheme, setRegisteredTheme] = useState<IRegisterTheme>(
+        {} as IRegisterTheme
+    );
+
     const [fontSize, setFontSize] = useFontSize({
         variableName: '--font-size',
     });
 
     useEffect(() => {
         if (themeOptions) {
-            registerTheme({
-                name: DEFAULT_THEME,
-                ...themeOptions,
-            });
+            setRegisteredTheme(
+                registerTheme({
+                    name: DEFAULT_THEME,
+                    ...themeOptions,
+                })
+            );
         }
-        setFontSize(16);
+        setFontSize(DEFAULT_FONT_SIZE);
     }, [themeOptions]);
 
     return (
         <ConfigContext.Provider
             value={{
                 themeOptions,
                 setThemeOptions,
+                registeredTheme,
             }}
         >
             <div className={`theme-${themeOptions.name}`}>{children}</div>

diff --git a/src/components/ConfigProvider/ConfigProvider.types.ts b/src/components/ConfigProvider/ConfigProvider.types.ts
@@ -1,8 +1,9 @@
-import { ThemeOptions } from './Theming';
+import { IRegisterTheme, ThemeOptions } from './Theming';
 
 export interface IConfigContext {
     themeOptions: ThemeOptions;
     setThemeOptions: (themeOptions: ThemeOptions) => void;
+    registeredTheme?: IRegisterTheme;
 }
 
 export interface ConfigProviderProps {

diff --git a/src/components/ConfigProvider/Theming/Theming.types.ts b/src/components/ConfigProvider/Theming/Theming.types.ts
@@ -25,32 +25,6 @@ export interface OcBaseTheme {
     warningColor?: Color;
     infoColor?: Color;
     errorColor?: Color;
-    buttonDefaultForegroundColor?: Color;
-    buttonHoverForegroundColor?: Color;
-    buttonFocusForegroundColor?: Color;
-    buttonActiveForegroundColor?: Color;
-    buttonVisitedForegroundColor?: Color;
-    buttonDefaultOutlineColor?: Color;
-    buttonHoverOutlineColor?: Color;
-    buttonFocusOutlineColor?: Color;
-    buttonActiveOutlineColor?: Color;
-    buttonVisitedOutlineColor?: Color;
-    buttonPrimaryDefaultBackgroundColor?: Color;
-    buttonPrimaryHoverBackgroundColor?: Color;
-    buttonPrimaryFocusBackgroundColor?: Color;
-    buttonPrimaryActiveBackgroundColor?: Color;
-    buttonPrimaryVisitedBackgroundColor?: Color;
-    buttonPrimaryDefaultBorderColor?: Color;
-    buttonPrimaryHoverBorderColor?: Color;
-    buttonPrimaryFocusBorderColor?: Color;
-    buttonPrimaryActiveBorderColor?: Color;
-    buttonPrimaryVisitedBorderColor?: Color;
-    buttonDefaultBackgroundColor?: Color;
-    buttonHoverBackgroundColor?: Color;
-    buttonFocusBackgroundColor?: Color;
-    buttonActiveBackgroundColor?: Color;
-    buttonVisitedBackgroundColor?: Color;
-    buttonHoverVariantBackgroundColor?: Color;
 }
 
 export interface OcTheme extends OcBaseTheme {
@@ -80,3 +54,15 @@ export interface ThemeOptions {
      */
     customTheme?: OcBaseTheme;
 }
+
+export type Variables = Record<string, Color>;
+
+export interface IGetStyle {
+    themeName: ThemeName;
+    light: boolean;
+    variables: Variables;
+}
+
+export interface IRegisterTheme extends IGetStyle {
+    styleNode: HTMLStyleElement;
+}