PR comments

Arize-ai · May 17, 2023 · e6c078f · e6c078f
1 parent 4b0930f
commit e6c078f
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 19 deletions.
diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
@@ -53,7 +53,7 @@ const buttonBaseCSS = css`
     overflow: hidden;
     color: var(--ac-field-text-color-override, ${theme.textColors.white90});
   }
-  .ac-icon-wrap {
+  .ac-icon-wrap:not(.ac-dropdown-button__validation-icon) {
     margin: 10px 0 10px 10px;
     flex: fixed;
     width: 16px;
@@ -69,7 +69,7 @@ const buttonBaseCSS = css`
     top: ${theme.spacing.padding8}px;
     right: 0;
     &.ac-dropdown-button__validation-icon--invalid {
-      color: ${theme.colors.statusDanger};
+      color: var(--ac-global-color-danger);
     }
   }
 `;
@@ -101,9 +101,9 @@ const quietButtonCSS = css`
   }
 
   &.ac-dropdown-button--invalid {
-    border-bottom: 1px solid ${theme.colors.statusDanger};
+    border-color: var(--ac-global-color-danger);
     div.ac-dropdown__content {
-      color: ${theme.colors.statusDanger};
+      color: var(--ac-global-color-danger);
     }
   }
   // Make room for the invalid icon
@@ -145,9 +145,9 @@ const nonQuietButtonCSS = css`
   }
 
   &.ac-dropdown-button--invalid {
-    border: 1px solid ${theme.colors.statusDanger};
+    border: 1px solid var(--ac-global-color-danger);
     div.ac-dropdown__content {
-      color: ${theme.colors.statusDanger};
+      color: var(--ac-global-color-danger);
     }
   }
 

diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx
@@ -42,7 +42,7 @@ function HelpText(props: HelpTextComponentProps, ref: DOMRef<HTMLDivElement>) {
         padding: ${theme.spacing.padding4}px 0 0;
         color: ${theme.textColors.white50};
         &.ac-help-text--danger {
-          color: ${theme.colors.statusDanger};
+          color: var(--ac-global-color-danger);
         }
         .ac-help-text__text {
           font-size: ${theme.typography.sizes.small.fontSize}px;

diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -1,6 +1,65 @@
 import { Global, css } from '@emotion/react';
 
 export const globalCSS = css`
+  :root {
+    --ac-global-dimension-static-size-0: 0px;
+    --ac-global-dimension-static-size-10: 1px;
+    --ac-global-dimension-static-size-25: 2px;
+    --ac-global-dimension-static-size-50: 4px;
+    --ac-global-dimension-static-size-40: 3px;
+    --ac-global-dimension-static-size-65: 5px;
+    --ac-global-dimension-static-size-100: 8px;
+    --ac-global-dimension-static-size-115: 9px;
+    --ac-global-dimension-static-size-125: 10px;
+    --ac-global-dimension-static-size-130: 11px;
+    --ac-global-dimension-static-size-150: 12px;
+    --ac-global-dimension-static-size-160: 13px;
+    --ac-global-dimension-static-size-175: 14px;
+    --ac-global-dimension-static-size-200: 16px;
+    --ac-global-dimension-static-size-225: 18px;
+    --ac-global-dimension-static-size-250: 20px;
+    --ac-global-dimension-static-size-300: 24px;
+    --ac-global-dimension-static-size-400: 32px;
+    --ac-global-dimension-static-size-450: 36px;
+    --ac-global-dimension-static-size-500: 40px;
+    --ac-global-dimension-static-size-550: 44px;
+    --ac-global-dimension-static-size-600: 48px;
+    --ac-global-dimension-static-size-700: 56px;
+    --ac-global-dimension-static-size-800: 64px;
+    --ac-global-dimension-static-size-900: 72px;
+    --ac-global-dimension-static-size-1000: 80px;
+    --ac-global-dimension-static-size-1200: 96px;
+    --ac-global-dimension-static-size-1700: 136px;
+    --ac-global-dimension-static-size-2400: 192px;
+    --ac-global-dimension-static-size-2600: 208px;
+    --ac-global-dimension-static-size-3400: 272px;
+    --ac-global-dimension-static-size-3600: 288px;
+    --ac-global-dimension-static-size-4600: 368px;
+    --ac-global-dimension-static-size-5000: 400px;
+    --ac-global-dimension-static-size-6000: 480px;
+    --ac-global-dimension-static-font-size-50: 11px;
+    --ac-global-dimension-static-font-size-75: 12px;
+    --ac-global-dimension-static-font-size-100: 14px;
+    --ac-global-dimension-static-font-size-150: 15px;
+    --ac-global-dimension-static-font-size-200: 16px;
+    --ac-global-dimension-static-font-size-300: 18px;
+    --ac-global-dimension-static-font-size-400: 20px;
+    --ac-global-dimension-static-font-size-500: 22px;
+    --ac-global-dimension-static-font-size-600: 25px;
+    --ac-global-dimension-static-font-size-700: 28px;
+    --ac-global-dimension-static-font-size-800: 32px;
+    --ac-global-dimension-static-font-size-900: 36px;
+    --ac-global-dimension-static-font-size-1000: 40px;
+    --ac-global-dimension-static-percent-50: 50%;
+    --ac-global-dimension-static-percent-100: 100%;
+    --ac-global-dimension-static-breakpoint-xsmall: 304px;
+    --ac-global-dimension-static-breakpoint-small: 768px;
+    --ac-global-dimension-static-breakpoint-medium: 1280px;
+    --ac-global-dimension-static-breakpoint-large: 1768px;
+    --ac-global-dimension-static-breakpoint-xlarge: 2160px;
+    --ac-global-dimension-static-grid-columns: 12;
+    --ac-global-dimension-static-grid-fluid-width: 100%;
+    --ac-global-dimension-static-grid-fixed-max-width: 1280px; 
   :root {
     --ac-global-dimension-static-size-0: 0px;
     --ac-global-dimension-static-size-10: 1px;
@@ -80,6 +139,26 @@ export const globalCSS = css`
 
     --ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
     --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
+
+    --ac-global-color-danger: #f85149;
+  }
+
+    --ac-global-color-gray-900: #181b1f;
+    --ac-global-color-gray-800: #1d2126;
+    --ac-global-color-gray-700: #23282e;
+    --ac-global-color-gray-600: #282e35;
+    --ac-global-color-gray-500: #2f353d;
+    --ac-global-color-gray-400: #3d434a;
+    --ac-global-color-gray-300: #4a5057;
+    --ac-global-color-gray-200: #585d64;
+    --ac-global-color-gray-100: #666b71;
+    --ac-global-background-color-light: var(--ac-global-color-gray-500);
+    --ac-global-background-color-dark: var(--ac-global-color-gray-900);
+    --ac-global-border-color-light: var(--ac-global-color-gray-100);
+    --ac-global-border-color-dark: 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);
+    --ac-global-color-danger: #f85149;
   }
 `;
 

diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
@@ -117,9 +117,11 @@ 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;
@@ -185,12 +187,12 @@ const quietTextfieldBaseCSS = css`
     opacity: ${theme.opacity.disabled};
   }
   &.ac-textfield--invalid:not(.is-disabled) {
-    border-bottom: 1px solid ${theme.colors.statusDanger};
+    border-bottom: 1px solid var(--ac-global-color-danger);
   }
   &.ac-textfield--invalid.ac-textfield__input {
     // Make room for the invalid icon
     padding-right: 24px;
-    color: ${theme.colors.statusDanger};
+    color: var(--ac-global-color-danger);
   }
 
   .ac-textfield__validation-icon {
@@ -200,7 +202,7 @@ const quietTextfieldBaseCSS = css`
     right: 0;
     position: absolute;
     &.ac-textfield__validation-icon--invalid {
-      color: ${theme.colors.statusDanger};
+      color: var(--ac-global-color-danger);
     }
   }
 `;
@@ -222,9 +224,9 @@ const standardTextfieldBaseCSS = css`
     border: 1px solid ${theme.components.textField.activeBorderColor};
     background-color: ${theme.components.textField.activeBackgroundColor};
     &.ac-textfield--invalid {
-      border: 1px solid ${theme.colors.statusDanger};
+      border: 1px solid var(--ac-global-color-danger);
       .ac-textfield__input {
-        color: ${theme.colors.statusDanger};
+        color: var(--ac-global-color-danger);
       }
     }
   }
@@ -241,16 +243,16 @@ const standardTextfieldBaseCSS = css`
   }
 
   &.ac-textfield--invalid:not(.is-disabled) {
-    border: 1px solid ${theme.colors.statusDanger};
+    border: 1px solid var(--ac-global-color-danger);
     .ac-textfield__input {
-      color: ${theme.colors.statusDanger};
+      color: var(--ac-global-color-danger);
     }
   }
 
   &.ac-textfield--invalid .ac-textfield__input {
     // Make room for the invalid icon (outer padding + icon width + inner padding)
     padding-right: ${theme.spacing.padding8 + 24 + theme.spacing.padding4}px;
-    color: ${theme.colors.statusDanger};
+    color: var(--ac-global-color-danger);
   }
 
   .ac-textfield__validation-icon {
@@ -260,7 +262,7 @@ const standardTextfieldBaseCSS = css`
     right: ${theme.spacing.padding8}px;
     position: absolute;
     &.ac-textfield__validation-icon--invalid {
-      color: ${theme.colors.statusDanger};
+      color: var(--ac-global-color-danger);
     }
   }
 `;