light mode scoping

Arize-ai · Oct 25, 2023 · a3db4b9 · a3db4b9
1 parent 190c3f7
commit a3db4b9
Show file tree

Hide file tree

Showing 19 changed files with 193 additions and 153 deletions.
diff --git a/src/button/styles.ts b/src/button/styles.ts
@@ -36,24 +36,24 @@ export const buttonCSS = css`
   &[data-variant='primary'] {
     background-color: var(--ac-global-button-primary-background-color);
     border-color: var(--ac-global-button-primary-border-color);
-    color: var(--ac-global-color-white-900);
+    color: var(--ac-global-static-color-white-900);
     &:hover:not([disabled]) {
       background-color: var(--ac-global-button-primary-background-color-hover);
     }
   }
   &[data-variant='danger'] {
     background-color: var(--ac-global-button-danger-background-color);
     border-color: var(--ac-global-button-danger-border-color);
-    color: var(--ac-global-color-white-900);
+    color: var(--ac-global-static-color-white-900);
     &:hover:not([disabled]) {
       background-color: var(--ac-global-button-danger-background-color-hover);
     }
   }
   &[data-variant='success'] {
     background-color: var(--ac-global-button-success-background-color);
     border-color: var(--ac-global-button-success-border-color);
-    color: var(--ac-global-color-white-900);
-    color: var(--ac-global-color-white-900);
+    color: var(--ac-global-static-color-white-900);
+    color: var(--ac-global-static-color-white-900);
     &:hover:not([disabled]) {
       background-color: var(--ac-global-button-success-background-color-hover);
     }

diff --git a/src/content/Text.tsx b/src/content/Text.tsx
@@ -64,8 +64,11 @@ const getTextColor = (color: TextColorValue) => {
     // Return the designation color (e.x. the main primary / reference colors)
     return designationColors[color];
   }
+  if (color === 'inherit') {
+    return 'inherit';
+  }
   const textColor = theme.textColors[color];
-  if (textColor && color !== 'inherit') {
+  if (textColor) {
     console.warn(
       `${textColor} is deprecated since it is not light/dark theme compatible.`
     );

diff --git a/src/menu/Menu.tsx b/src/menu/Menu.tsx
@@ -41,7 +41,7 @@ const menuULCSS = css`
   color: var(--ac-global-color-text-900);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
   outline: none;
-  border: 1px solid ${theme.components.dropdown.borderColor};
+  border: 1px solid var(--ac-global-menu-border-color);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
   max-height: inherit;
   list-style: none;

diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -1,5 +1,6 @@
 import { Global, css } from '@emotion/react';
 import { useProvider } from './Provider';
+import { ProviderTheme } from '../types';
 
 /**
  * Medium size root CSS variables
@@ -61,6 +62,15 @@ export const mediumRootCSS = css`
   }
 `;
 
+const staticCSS = css`
+  :root {
+    // static colors
+    --ac-global-static-color-white-900: rgba(255, 255, 255, 0.9);
+    --ac-global-static-color-white-700: rgba(255, 255, 255, 0.7);
+    --ac-global-static-color-white-300: rgba(255, 255, 255, 0.3);
+  }
+`;
+
 const dimensionsCSS = css`
   :root {
     --ac-global-dimension-static-size-0: 0px;
@@ -125,7 +135,8 @@ const dimensionsCSS = css`
 `;
 
 export const darkThemeCSS = css`
-  :root {
+  :root,
+  .ac-theme--dark {
     /* Colors */
 
     // The primary color tint for  the apps
@@ -144,11 +155,6 @@ export const darkThemeCSS = css`
     --ac-global-color-gray-200: #585d64;
     --ac-global-color-gray-100: #666b71;
 
-    // static colors
-    --ac-global-color-white-900: rgba(255, 255, 255, 0.9);
-    --ac-global-color-white-700: rgba(255, 255, 255, 0.7);
-    --ac-global-color-white-300: rgba(255, 255, 255, 0.3);
-
     // The newer grays (grey)
     --ac-global-color-grey-50: #000000;
     --ac-global-color-grey-75: #0e0e0e;
@@ -364,13 +370,14 @@ export const darkThemeCSS = css`
 `;
 
 export const lightThemeCSS = css`
-  :root {
+  :root,
+  .ac-theme--light {
     /* Colors */
 
     // The primary color tint for  the apps
-    --ac-global-color-primary: rgb(39, 156, 199);
-    --ac-global-color-primary-900: rgb(39, 156, 199, 0.9);
-    --ac-global-color-primary-700: rgb(39, 156, 199, 0.7);
+    --ac-global-color-primary: rgb(0, 193, 247);
+    --ac-global-color-primary-900: rgb(0, 193, 247, 0.9);
+    --ac-global-color-primary-700: rgb(0, 193, 247, 0.7);
 
     // The newer grays (grey)
     --ac-global-color-grey-50: #ffffff;
@@ -586,8 +593,9 @@ export const lightThemeCSS = css`
   }
 `;
 
-export const derivedCSS = css`
-  :root {
+export const derivedCSS = (theme: ProviderTheme) => css`
+  :root,
+  .ac-theme--${theme} {
     --ac-global-background-color-default: var(--ac-global-color-grey-100);
     --ac-global-background-color-light: var(--ac-global-color-grey-200);
     --ac-global-background-color-light-hover: var(--ac-global-color-grey-300);
@@ -637,6 +645,10 @@ export const derivedCSS = css`
     );
     --ac-global-button-success-border-color: var(--ac-global-color-success);
 
+    // Style for tooltips
+    --ac-global-tooltip-background-color: var(--ac-global-color-grey-100);
+    --ac-global-tooltip-border-color: var(--ac-global-color-grey-300);
+
     --ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
     --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
 
@@ -672,9 +684,18 @@ export const derivedCSS = css`
   }
 `;
 export function GlobalStyles() {
-  const { theme } = useProvider();
+  let { theme } = useProvider();
+  theme = theme || 'dark';
   const themeCSS = theme === 'dark' ? darkThemeCSS : lightThemeCSS;
   return (
-    <Global styles={css(dimensionsCSS, themeCSS, derivedCSS, mediumRootCSS)} />
+    <Global
+      styles={css(
+        dimensionsCSS,
+        staticCSS,
+        themeCSS,
+        derivedCSS(theme),
+        mediumRootCSS
+      )}
+    />
   );
 }
diff --git a/src/provider/Provider.tsx b/src/provider/Provider.tsx
@@ -22,7 +22,7 @@ export function Provider(props: ProviderProps) {
   return (
     <Context.Provider value={{ ...context, theme }}>
       {isRootProvider ? <GlobalStyles /> : null}
-      {content}
+      <div className={`ac-theme--${theme}`}>{content}</div>
     </Context.Provider>
   );
 }

diff --git a/src/radio/styles.ts b/src/radio/styles.ts
@@ -66,7 +66,7 @@ export const selectorRadioCSS = ({
   border: 2px solid
     ${isSelected
       ? 'var(--ac-global-text-color-900)'
-      : theme.colors.dividerColor};
+      : 'var(--ac-global-input-field-border-color)'};
   color: ${isDisabled
     ? 'var(--ac-global-text-color-300)'
     : 'var(--ac-global-text-color-900)'};
@@ -75,7 +75,7 @@ export const selectorRadioCSS = ({
   ${!isDisabled &&
     !isSelected &&
     `&:hover {
-    border-color: ${theme.components.button.defaultHoverBackgroundColor};
+    border-color: var(--ac-global-input-field-border-color-hover);
     transition: border-color 0.2s ease-in-out;
   }`};
 `;
@@ -85,16 +85,16 @@ export const inlineButtonRadioCSS = () =>
     css`
       transition: all 0.2s ease-in-out;
       &.is-selected {
-        background-color: ${transparentize(0.1, theme.colors.arizeBlue)};
+        background-color: var(--ac-global-button-primary-background-color);
         &:hover {
-          background-color: ${theme.components.button
-            .primaryHoverBackgroundColor};
+          background-color: var(
+            --ac-global-button-primary-background-color-hover
+          );
         }
       }
       &:not(.is-selected) {
         &:hover {
-          background-color: ${theme.components.button
-            .defaultHoverBackgroundColor};
+          background-color: --ac-global-input-field-background-color-hover;
         }
       }
       &[data-size='normal'] {

diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
@@ -34,8 +34,8 @@ const tabListCSS = css`
     --scope-border-color,
     var(--ac-global-border-color-default)
   );
-  --tab-hover-color: ${transparentize(0.2, theme.colors.arizeLightBlue)};
-  --tab-selected-border-color: ${theme.colors.arizeLightBlue};
+  --tab-hover-color: var(--ac-global-color-primary-900);
+  --tab-selected-border-color: var(--ac-global-color-primary);
 
   .ac-tabs__tab-list-item {
     box-sizing: border-box; /* place the border inside */

diff --git a/src/tooltip/ActionTooltip.tsx b/src/tooltip/ActionTooltip.tsx
@@ -5,7 +5,11 @@ import { PlacementAxis, DOMRef } from '../types';
 import { mergeProps } from '@react-aria/utils';
 import { TooltipContext } from './context';
 import { Text } from '../content';
-import { actionTooltipCSS, actionTooltipHeaderWrap } from './styles';
+import {
+  actionTooltipCSS,
+  actionTooltipHeaderWrap,
+  actionTooltipHeaderWrapCSS,
+} from './styles';
 
 interface ActionTooltipProps extends HTMLProps<HTMLDivElement> {
   isOpen?: boolean;
@@ -69,7 +73,7 @@ function ActionTooltip(props: ActionTooltipProps, _ref: DOMRef) {
       css={actionTooltipCSS({ placement })}
     >
       <div
-        css={actionTooltipHeaderWrap}
+        css={actionTooltipHeaderWrapCSS}
         className={classNames('ac-action-tooltip__title-wrap')}
       >
         <Text color="text-900" textSize="large" elementType="h5" weight="heavy">

diff --git a/src/tooltip/styles.ts b/src/tooltip/styles.ts
@@ -159,9 +159,9 @@ export const actionTooltipCSS = ({
     --tooltip-tip-width: 8px;
     --tooltip-max-inline-size: 500px;
     color: var(--ac-global-text-color-900);
-    background-color: ${actionTooltipStyles.backgroundColor};
+    background-color: var(--ac-global-tooltip-background-color);
     border-radius: 8px;
-    border: 1px solid ${actionTooltipStyles.borderColor};
+    border: 1px solid var(--ac-global-tooltip-border-color);
     position: relative;
 
     display: flex;
@@ -193,8 +193,8 @@ export const actionTooltipCSS = ({
   `;
 };
 
-export const actionTooltipHeaderWrap = css`
-  border-bottom: 1px solid ${actionTooltipStyles.borderColor};
+export const actionTooltipHeaderWrapCSS = css`
+  border-bottom: 1px solid var(--ac-global-tooltip-border-color);
   padding: ${theme.spacing.padding8}px;
 `;
 
@@ -226,8 +226,8 @@ export const helpTooltipCSS = ({ placement }: { placement: PlacementAxis }) => {
     --tooltip-animation-distance: ${theme.spacing.tooltip.offset}px;
     --tooltip-target-offset: ${theme.spacing.tooltip.offset}px;
     --tooltip-max-inline-size: 300px;
-    --tooltip-background-color: var(--ac-global-color-grey-100);
-    --tooltip-border-color: var(--ac-global-color-grey-300);
+    --tooltip-background-color: var(--ac-global-tooltip-background-color);
+    --tooltip-border-color: var(--ac-global-tooltip-border-color);
     color: var(--ac-global-text-color-900);
     background-color: var(--tooltip-background-color);
     position: relative;

diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
@@ -5,12 +5,12 @@ import {
   AccordionProps,
   AccordionItem,
   Card,
-  Provider,
   Counter,
 } from '../src';
 import { withDesign } from 'storybook-addon-designs';
 import InfoTip from './components/InfoTip';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
+import { ThemeSplitView } from './components/ThemeSplitView';
 
 const meta: Meta = {
   title: 'Accordion',
@@ -39,8 +39,8 @@ const AccordionContents = () => (
 
 export default meta;
 
-const Template: Story<AccordionProps> = args => (
-  <ThemeToggleWrap>
+const Template: Story<AccordionProps> = args => {
+  const content = (
     <Card
       title="Model Health"
       subTitle={'An overview of the the health of your model'}
@@ -68,8 +68,9 @@ const Template: Story<AccordionProps> = args => (
         </AccordionItem>
       </Accordion>
     </Card>
-  </ThemeToggleWrap>
-);
+  );
+  return <ThemeSplitView>{content}</ThemeSplitView>;
+};
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

diff --git a/stories/ActionMenu.stories.tsx b/stories/ActionMenu.stories.tsx
@@ -32,8 +32,8 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<DropdownProps> = args => (
-  <ThemeToggleWrap>
+const Template: Story<DropdownProps> = args => {
+  const content = (
     <div
       css={css`
         margin: 24px;
@@ -186,7 +186,9 @@ const Template: Story<DropdownProps> = args => (
         </ActionMenu>
       </div>
     </div>
-  </ThemeToggleWrap>
-);
+  );
+
+  return <ThemeToggleWrap>{content}</ThemeToggleWrap>;
+};
 
 export const Default = Template.bind({});
diff --git a/stories/ActionTooltip.stories.tsx b/stories/ActionTooltip.stories.tsx
@@ -12,6 +12,7 @@ import {
   Text,
 } from '../src';
 import { Icon, ArrowIosForwardOutline } from '../src/icon';
+import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const placements: Placement[] = [
   'start',
@@ -51,7 +52,7 @@ const Link = () => (
     href="#"
     css={css`
       padding: 8px;
-      color: rgba(255, 255, 255, 0.9);
+      color: var(--ac-global-text-color-900);
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -71,7 +72,7 @@ const containerCSS = css`
 `;
 
 export const Gallery = () => (
-  <Provider>
+  <ThemeToggleWrap>
     <ul style={{ listStyle: 'none' }} css={containerCSS}>
       {placements.map((placement, index) => {
         return (
@@ -90,12 +91,12 @@ export const Gallery = () => (
         );
       })}
     </ul>
-  </Provider>
+  </ThemeToggleWrap>
 );
 
 const Template: Story<TooltipTriggerProps> = args => {
   return (
-    <Provider>
+    <ThemeToggleWrap>
       <div css={containerCSS}>
         <TooltipTrigger {...args}>
           <ActionButton>Hover</ActionButton>
@@ -108,7 +109,7 @@ const Template: Story<TooltipTriggerProps> = args => {
           </ActionTooltip>
         </TooltipTrigger>
       </div>
-    </Provider>
+    </ThemeToggleWrap>
   );
 };