chore: more input field colors to global (#171)

Arize-ai · Oct 10, 2023 · 7afe7e2 · 7afe7e2
1 parent 6b9eb7a
commit 7afe7e2
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 103 deletions.
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -60,7 +60,7 @@ export const mediumRootCSS = css`
   }
 `;
 
-export const globalCSS = css`
+export const darkThemeCSS = css`
   :root {
     --ac-global-dimension-static-size-0: 0px;
     --ac-global-dimension-static-size-10: 1px;
@@ -181,6 +181,10 @@ export const globalCSS = css`
       --ac-global-dimension-static-grid-fixed-max-width: 1280px;
 
       /* Colors */
+
+      // The primary color tint for  the apps
+      --ac-global-primary-color: #72d9ff;
+
       --ac-global-color-gray-900: #181b1f;
       --ac-global-color-gray-800: #1d2126;
       --ac-global-color-gray-700: #23282e;
@@ -391,6 +395,19 @@ export const globalCSS = css`
       --ac-global-border-color-light: var(--ac-global-color-gray-400);
       --ac-global-border-color-dark: var(--ac-global-color-gray-400);
 
+      // Styles for text fields etc
+      --ac-global-input-field-border-color: var(--ac-global-color-gray-100);
+      --ac-global-input-field-border-color-hover: var(
+        --ac-global-color-gray-300
+      );
+      --ac-global-input-field-border-color-active: var(
+        --ac-global-primary-color
+      );
+      --ac-global-input-field-background-color: var(--ac-global-color-gray-600);
+      --ac-global-input-field-background-color-active: var(
+        --ac-global-color-gray-400
+      );
+
       --ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
       --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
 
@@ -444,5 +461,5 @@ export const globalCSS = css`
 `;
 
 export function GlobalStyles() {
-  return <Global styles={css(globalCSS, mediumRootCSS)} />;
+  return <Global styles={css(darkThemeCSS, mediumRootCSS)} />;
 }
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
@@ -117,18 +117,16 @@ const textFieldBaseCSS = (styleProps: StyleProps) => css`
   flex-direction: row;
   position: relative;
   align-items: center;
-  min-width: ${
-    styleProps.width
-      ? dimensionValue(styleProps.width)
-      : dimensionValue('static-size-3400')
-  };
+  min-width: ${styleProps.width
+    ? dimensionValue(styleProps.width)
+    : dimensionValue('static-size-3400')};
   width: ${styleProps.width ? dimensionValue(styleProps.width) : '100%'};
 
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   font-size: ${theme.typography.sizes.medium.fontSize}px;
   box-sizing: border-box;
-  --ac-textfield-border-color: ${theme.components.textField.borderColor};
+  --ac-textfield-border-color: var(--ac-global-input-field-border-color);
   border-bottom: 1px solid
     var(--ac-field-border-color-override, var(--ac-textfield-border-color));
 
@@ -140,7 +138,7 @@ const textFieldBaseCSS = (styleProps: StyleProps) => css`
     flex: 1 1 auto;
     box-sizing: border-box;
     background-color: transparent;
-    color: var(--ac-field-text-color-override, ${theme.textColors.white90});
+    color: var(--ac-field-text-color-override, --ac-global-text-color-900);
     height: ${styleProps.height ?? theme.singleLineHeight}px;
     transition: all 0.2s ease-in-out;
     /** provide an alternate highlight */
@@ -179,10 +177,10 @@ const quietTextfieldBaseCSS = css`
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   &.is-hovered:not(.is-disabled) {
-    border-bottom: 1px solid ${theme.components.textField.hoverBorderColor};
+    border-bottom: 1px solid var(--ac-global-input-field-border-color-active);
   }
   &.is-focused:not(.is-disabled) {
-    border-bottom: 1px solid ${theme.components.textField.activeBorderColor};
+    border-bottom: 1px solid var(--ac-global-input-field-border-color-active);
   }
   &.is-disabled {
     border-bottom: 1px solid ${theme.colors.lightGrayBorder};
@@ -210,7 +208,7 @@ const quietTextfieldBaseCSS = css`
 `;
 
 const standardTextfieldBaseCSS = css`
-  background-color: ${theme.components.textField.backgroundColor};
+  background-color: var(--ac-global-input-field-background-color);
   border-radius: ${theme.borderRadius.medium}px;
   border-top: 1px solid
     var(--ac-field-border-color-override, var(--ac-textfield-border-color));
@@ -219,8 +217,8 @@ const standardTextfieldBaseCSS = css`
   border-right: 1px solid
     var(--ac-field-border-color-override, var(--ac-textfield-border-color));
   &.is-hovered:not(.is-disabled) {
-    border: 1px solid ${theme.components.textField.hoverBorderColor};
-    background-color: ${theme.components.textField.activeBackgroundColor};
+    border: 1px solid var(--ac-global-input-field-border-color-active);
+    background-color: var(--ac-global-input-field-background-color-active);
   }
   &.is-focused:not(.is-disabled) {
     border: 1px solid ${theme.components.textField.activeBorderColor};
@@ -253,9 +251,10 @@ const standardTextfieldBaseCSS = css`
 
   &.ac-textfield--invalid .ac-textfield__input {
     // Make room for the invalid icon (outer padding + icon width + inner padding)
-    padding-right: calc(${
-      theme.spacing.padding8
-    } + var(--ac-validation-icon-width) + ${theme.spacing.padding4}px);
+    padding-right: calc(
+      ${theme.spacing.padding8} + var(--ac-validation-icon-width) +
+        ${theme.spacing.padding4}px
+    );
     color: var(--ac-global-color-danger);
   }
 

diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
@@ -7,12 +7,11 @@ import {
   TextFieldProps,
   ContextualHelp,
   Heading,
-  Section,
   Text,
   Content,
   theme,
+  Provider,
 } from '../src';
-import InfoTip from './components/InfoTip';
 import { css } from '@emotion/react';
 
 const meta: Meta = {
@@ -46,7 +45,7 @@ const contextualHelp = (
       css={css`
         .ac-text {
           text-decoration: underline;
-          color: ${theme.colors.arizeLightBlue};
+          color: var(--global-primary-color);
         }
       `}
     >
@@ -58,98 +57,104 @@ const contextualHelp = (
  * A gallery of all the variants
  */
 export const Gallery = () => (
-  <Form>
-    <TextField label="Name" placeholder="enter your name" />
-    <TextField
-      label="Name"
-      placeholder="enter your name"
-      defaultValue="Michael King"
-    />
-    <TextField label="Name" placeholder="enter your name" isRequired />
-    <TextField
-      label="Name"
-      placeholder="enter your name"
-      isRequired
-      validationState={'invalid'}
-    />
-    <TextField
-      label="Name"
-      placeholder="enter your name"
-      isRequired
-      validationState={'invalid'}
-      errorMessage="This field is required"
-    />
-    <TextField
-      label="Charge"
-      labelExtra={contextualHelp}
-      placeholder="enter your amount"
-      isRequired
-      validationState={'invalid'}
-      addonBefore="$"
-      errorMessage="This field is required"
-    />
-    <TextField
-      label="Disabled"
-      labelExtra={contextualHelp}
-      placeholder="enter your amount"
-      isDisabled
-      addonBefore="$"
-      value="100"
-    />
-    <TextField
-      label="Read Only"
-      labelExtra={contextualHelp}
-      placeholder="enter your amount"
-      isReadOnly
-      addonBefore="$"
-      value="100"
-      width={800}
-    />
-    <TextField
-      label="With Description"
-      description="This is the description"
-      labelExtra={contextualHelp}
-      placeholder="enter your amount"
-      isReadOnly
-      addonBefore="$"
-      value="100"
-      width={800}
-    />
-  </Form>
+  <Provider>
+    <Form>
+      <TextField label="Name" placeholder="enter your name" />
+      <TextField
+        label="Name"
+        placeholder="enter your name"
+        defaultValue="Michael King"
+      />
+      <TextField label="Name" placeholder="enter your name" isRequired />
+      <TextField
+        label="Name"
+        placeholder="enter your name"
+        isRequired
+        validationState={'invalid'}
+      />
+      <TextField
+        label="Name"
+        placeholder="enter your name"
+        isRequired
+        validationState={'invalid'}
+        errorMessage="This field is required"
+      />
+      <TextField
+        label="Charge"
+        labelExtra={contextualHelp}
+        placeholder="enter your amount"
+        isRequired
+        validationState={'invalid'}
+        addonBefore="$"
+        errorMessage="This field is required"
+      />
+      <TextField
+        label="Disabled"
+        labelExtra={contextualHelp}
+        placeholder="enter your amount"
+        isDisabled
+        addonBefore="$"
+        value="100"
+      />
+      <TextField
+        label="Read Only"
+        labelExtra={contextualHelp}
+        placeholder="enter your amount"
+        isReadOnly
+        addonBefore="$"
+        value="100"
+        width={800}
+      />
+      <TextField
+        label="With Description"
+        description="This is the description"
+        labelExtra={contextualHelp}
+        placeholder="enter your amount"
+        isReadOnly
+        addonBefore="$"
+        value="100"
+        width={800}
+      />
+    </Form>
+  </Provider>
 );
 
 const Template: Story<TextFieldProps> = args => (
-  <Form>
-    <TextField {...args}>Label Text</TextField>
-  </Form>
+  <Provider>
+    <Form>
+      <TextField {...args}>Label Text</TextField>
+    </Form>
+  </Provider>
 );
 
 export function WithValidation() {
   const [val, setVal] = useState<string>('');
   const isValid = val.length > 10 && val.length < 15;
   return (
-    <Form>
-      <TextField label="Field" value={val} onChange={setVal} />
-      <TextField
-        label="Field"
-        validationState={isValid ? 'valid' : 'invalid'}
-        value={val}
-        errorMessage={
-          isValid ? null : 'Value must be between 10 and 15 characters'
-        }
-        addonBefore="Name"
-        isRequired
-        onChange={setVal}
-      />
-      <TextField
-        validationState={isValid ? 'valid' : 'invalid'}
-        value={val}
-        errorMessage={
-          isValid ? null : 'Value must be between 10 and 15 characters'
-        }
-        onChange={setVal}
-      />
-    </Form>
+    <Provider>
+      <Form>
+        <TextField label="Field" value={val} onChange={setVal} />
+        <TextField
+          label="Field"
+          validationState={isValid ? 'valid' : 'invalid'}
+          value={val}
+          errorMessage={
+            isValid ? null : 'Value must be between 10 and 15 characters'
+          }
+          addonBefore="Name"
+          isRequired
+          onChange={setVal}
+        />
+        <TextField
+          validationState={isValid ? 'valid' : 'invalid'}
+          value={val}
+          errorMessage={
+            isValid ? null : 'Value must be between 10 and 15 characters'
+          }
+          onChange={setVal}
+        />
+      </Form>
+    </Provider>
   );
 }
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test