feat: Light theme (#174)

* wip * colors (#173) * fix dimension size to be base * light colors * fix blobal styles to have derived styles * replacing white90 with text90 ' * Add light to stories * fix gray types * add proper colors for borders * toggle wrap for the theme picker * themeToggleWrap * text field * editing range slider and slider base * dropdown button * radio group * cleanup * accordion * changes * add overview page * compact search field * fix inherit * bunch of cleanup * fix danger button color * Unused variables * Unused variables * cleanup * v1.0.0-0 * fix designation colors * Fix slideover * v1.0.0-1 * fix light colors * breadcrumbs * v1.0.0-2 * light mode scoping * cleanup * cleanup * v1.0.0-3 * Add different semantic colors * alert colors * v1.0.0-4 * desginmation colors * v1.0.0-5 * fix notify * Transition empty * fix modal story * fix yarn lock * fix import * gray deprecation * fix list stately * add more primary * v1.0.0-6 * fix designation colors * fix designation colors --------- Co-authored-by: Krystal Kirkland <[email protected]> Co-authored-by: Gurmehar Somal <[email protected]>
Arize-ai · Oct 27, 2023 · 2b0360c · 2b0360c
1 parent c4c0ee6
commit 2b0360c
Show file tree

Hide file tree

Showing 93 changed files with 3,682 additions and 2,562 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,6 +1,6 @@
 <style>
   body {
     font-family: 'Roboto', sans-serif;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--ac-global-text-color-900);
   }
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -10,6 +10,10 @@ export const parameters = {
         name: 'arize',
         value: '#14171b',
       },
+      {
+        name: 'arize light',
+        value: '#ffffff',
+      },
     ],
   },
 };
diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.17.6-1",
+  "version": "1.0.0-6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -127,7 +127,7 @@
     "@react-aria/utils": "^3.14.0",
     "@react-aria/virtualizer": "^3.5.1",
     "@react-aria/visually-hidden": "^3.5.0",
-    "@react-stately/collections": "3.5.1",
+    "@react-stately/collections": "^3.10.2",
     "@react-stately/layout": "^3.8.0",
     "@react-stately/list": "3.6.1",
     "@react-stately/overlays": "^3.4.2",

diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx
@@ -9,6 +9,34 @@ export interface AccordionProps {
   children: ReactNode;
 }
 
+const accordionItemCSS = css`
+  cursor: pointer;
+  padding: var(--accordion-padding-top) var(--accordion-padding-side);
+  display: block;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  align-items: center;
+  appearance: none;
+  background-color: inherit;
+  border: 0;
+  text-align: start;
+  color: var(--ac-global-text-color-900);
+  border-bottom: 1px solid var(--ac-global-border-color-dark);
+  /* remove outline - TODO might need to give a visual cue that this area is in focus */
+  outline: none;
+  background-color: var(--ac-global-background-color-light);
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--ac-global-background-color-light-hover);
+  }
+  .ac-accordion-item__title {
+    font-size: var(--accordion-font-size);
+  }
+`;
+
 /**
  * Accordion component for having collapsible sections
  * @see https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
@@ -19,15 +47,13 @@ export function Accordion({ children }: AccordionProps) {
       className={`ac-accordion ac-accordion--default`}
       role="region"
       css={css`
-      
         --accordion-animation-duration: ${theme.animation.global.duration}ms;
-   
+
         &.ac-accordion--default {
-          --accordion-padding-top: ${theme.spacing.padding8}px;
-          --accordion-padding-side: ${theme.spacing.padding16}px;
+          --accordion-padding-top: var(--ac-global-dimension-static-size-100);
+          --accordion-padding-side: var(--ac-global-dimension-static-size-200);
           --accordion-font-size: ${theme.typography.sizes.medium.fontSize}px;
         }
-        
       `}
     >
       {children}
@@ -101,33 +127,7 @@ export function AccordionItem(props: AccordionItemProps) {
       <Heading level={3}>
         <button
           id={headerId}
-          css={css`
-            cursor: pointer;
-            padding: var(--accordion-padding-top) var(--accordion-padding-side);
-            display: block;
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            flex: 1 1 auto;
-            justify-content: space-between;
-            align-items: center;
-            appearance: none;
-            background-color: inherit;
-            border: 0;
-            text-align: start;
-            color: ${theme.textColors.white90};
-            border-bottom: 1px solid ${theme.components.accordion.borderColor};
-            /* remove outline - TODO might need to give a visual cue that this area is in focus */
-            outline: none;
-            background-color: ${theme.components.accordion.backgroundColor};
-            transition: background-color 0.2s ease-in-out;
-            &:hover {
-              background-color: ${theme.colors.hoverBgColor};
-            }
-            .ac-accordion-item__title {
-              font-size: var(--accordion-font-size);
-            }
-          `}
+          css={accordionItemCSS}
           onClick={() => {
             const newIsOpen = !isOpen;
             setIsOpen(newIsOpen);
@@ -153,7 +153,7 @@ export function AccordionItem(props: AccordionItemProps) {
         id={contentId}
         role="region"
         css={css`
-          border-bottom: 1px solid ${theme.colors.dividerColor};
+          border-bottom: 1px solid var(--ac-global-border-color-dark);
           display: ${isOpen ? 'block' : 'none'};
         `}
         aria-labelledby={headerId}

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -64,9 +64,10 @@ export const Alert = ({
     <div
       {...otherProps}
       css={css`
-        padding: ${theme.spacing.margin8}px ${theme.spacing.margin16}px;
+        padding: var(--ac-global-dimension-static-size-100)
+          var(--ac-global-dimension-static-size-200);
         border-radius: 4px;
-        color: ${theme.textColors.white90};
+        color: var(--ac-global-text-color-900);
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -77,7 +78,7 @@ export const Alert = ({
         }
         ${variantStyle}
         .ac-alert__icon-title-wrap .ac-icon-wrap {
-          margin-right: ${theme.spacing.margin16}px;
+          margin-right: var(--ac-global-dimension-static-size-200);
           font-size: ${theme.typography.sizes.xlarge.fontSize}px;
           margin-top: 2px;
         }
@@ -129,7 +130,7 @@ export const Alert = ({
             cursor: pointer;
             width: 20px;
             height: 20px;
-            margin-left: ${theme.spacing.margin16}px;
+            margin-left: var(--ac-global-dimension-static-size-200);
           `}
           onClick={onDismissClick}
         >

diff --git a/src/alert/styles.ts b/src/alert/styles.ts
@@ -1,39 +1,23 @@
 import { css } from '@emotion/react';
-import { transparentize, darken } from 'polished';
-import theme from '../theme';
+import { SeverityLevel } from '../types';
 
 export const baseSeverityCSS = css`
   backdrop-filter: blur(10px);
 `;
 
-const bgDarken = 0.4,
-  bgTransparentize = 0.5,
-  // FireFox does not support backdrop-filter so needs to be less transparent and darker
-  bgDarkenFallback = 0.45,
-  bgTransparentizeFallback = 0.1;
-
-const generateSeverityCSS = (severityColor: string) =>
-  css(
+const generateSeverityCSS = (semanticColor: SeverityLevel) => {
+  const colorPrefix = `--ac-global-color-${semanticColor}`;
+  return css(
     baseSeverityCSS,
     css`
-      border: 1px solid ${severityColor};
-      /* FireFox Only style */
-      background-color: ${transparentize(
-        bgTransparentizeFallback,
-        darken(bgDarkenFallback, severityColor)
-      )};
-      color: ${severityColor};
-      /* background-filter support (Chrome / Safari) */
-      @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
-        background-color: ${transparentize(
-          bgTransparentize,
-          darken(bgDarken, severityColor)
-        )};
-      }
+      border: 1px solid var(${colorPrefix});
+      background-color: var(${colorPrefix}-700);
+      color: var(--ac-global-static-color-white-900);
     `
   );
+};
 
-export const warningCSS = generateSeverityCSS(theme.colors.statusWarning);
-export const infoCSS = generateSeverityCSS(theme.colors.statusInfo);
-export const dangerCSS = generateSeverityCSS(theme.colors.statusDanger);
-export const successCSS = generateSeverityCSS(theme.colors.statusSuccess);
+export const warningCSS = generateSeverityCSS('warning');
+export const infoCSS = generateSeverityCSS('info');
+export const dangerCSS = generateSeverityCSS('danger');
+export const successCSS = generateSeverityCSS('success');
diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx
@@ -57,15 +57,15 @@ const ulCSS = css`
   padding: 0;
   list-style-type: none;
   display: flex;
-  color: ${theme.textColors.white70};
+  color: var(--ac-global-text-color-700);
   li:last-of-type {
     font-weight: ${theme.typography.weights.heavy};
-    color: ${theme.textColors.white90};
+    color: var(--ac-global-text-color-900);
   }
   li:not(:last-of-type):hover {
     text-decoration: underline;
     cursor: pointer;
-    color: ${theme.textColors.white90};
+    color: var(--ac-global-text-color-900);
   }
 `;
 
@@ -79,11 +79,11 @@ const liCSS = css`
   position: relative;
 
   .ac-breadcrumbs-item-link {
-    padding: 0 ${theme.spacing.padding4}px;
+    padding: 0 var(--ac-global-dimension-static-size-50);
     outline: none;
   }
   .ac-icon-wrap {
-    color: ${theme.textColors.white70};
+    color: var(--ac-global-text-color-700);
   }
 `;
 

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -46,7 +46,7 @@ const Button = (props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) => {
     >
       {loading ? <Spinner /> : null}
       {!loading && icon ? icon : null}
-      <Text textSize="medium" color={isDisabled ? 'white70' : 'white90'}>
+      <Text textSize="medium" color="inherit">
         {children}
       </Text>
     </button>

diff --git a/src/button/ButtonGroup.tsx b/src/button/ButtonGroup.tsx
@@ -7,7 +7,6 @@ import React, {
   HTMLAttributes,
   ReactElement,
 } from 'react';
-import theme from '../theme';
 import { ButtonProps } from './Button';
 
 export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
@@ -21,15 +20,15 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 const buttonGroupCSS = css`
   display: inline-flex;
-  border-radius: ${theme.borderRadius.medium}px;
-  border: 1px solid ${theme.components.button.defaultBorderColor};
+  border-radius: var(--ac-global-rounding-small);
+  border: 1px solid var(--ac-global-input-field-border-color);
   overflow: hidden;
   & > .ac-button {
     border-radius: 0;
     border: none;
   }
   & > .ac-button + .ac-button {
-    border-left: 1px solid ${theme.components.button.defaultBorderColor};
+    border-left: 1px solid var(--ac-global-input-field-border-color);
   }
 `;
 

diff --git a/src/button/ButtonToolbar.tsx b/src/button/ButtonToolbar.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
-import theme from '../theme';
 
 type ButtonToolbarProps = {
   children: ReactNode;
@@ -18,7 +17,7 @@ export function ButtonToolbar({ children }: ButtonToolbarProps) {
         display: flex;
         flex-direction: row;
         & > .ac-button + .ac-button {
-          margin-left: ${theme.spacing.margin8}px;
+          margin-left: var(--ac-global-dimension-static-size-100);
         }
       `}
     >