Transition empty

Arize-ai · Oct 26, 2023 · c28a3af · c28a3af
1 parent 13c31a7
commit c28a3af
Show file tree

Hide file tree

Showing 31 changed files with 167 additions and 148 deletions.
diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx
@@ -50,8 +50,8 @@ export function Accordion({ children }: AccordionProps) {
         --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;
         }
       `}

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -64,7 +64,8 @@ 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: var(--ac-global-text-color-900);
         display: flex;
@@ -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/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx
@@ -79,7 +79,7 @@ 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 {

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);
         }
       `}
     >

diff --git a/src/button/styles.ts b/src/button/styles.ts
@@ -22,16 +22,20 @@ export const buttonCSS = css`
     opacity: ${theme.opacity.disabled};
   }
   &[data-size='normal'][data-childless='false'] {
-    padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
+    padding: var(--ac-global-dimension-static-size-100)
+      var(--ac-global-dimension-static-size-200);
   }
   &[data-size='compact'][data-childless='false'] {
-    padding: ${theme.spacing.padding4}px ${theme.spacing.padding8}px;
+    padding: var(--ac-global-dimension-static-size-50)
+      var(--ac-global-dimension-static-size-100);
   }
   &[data-size='normal'][data-childless='true'] {
-    padding: ${theme.spacing.padding8}px ${theme.spacing.padding8}px;
+    padding: var(--ac-global-dimension-static-size-100)
+      var(--ac-global-dimension-static-size-100);
   }
   &[data-size='compact'][data-childless='true'] {
-    padding: ${theme.spacing.padding4}px ${theme.spacing.padding4}px;
+    padding: var(--ac-global-dimension-static-size-50)
+      var(--ac-global-dimension-static-size-50);
   }
   &[data-variant='primary'] {
     background-color: var(--ac-global-button-primary-background-color);
@@ -76,6 +80,6 @@ export const buttonCSS = css`
 
   &[data-childless='false'] > i,
   & > .ac-spinner {
-    margin-right: ${theme.spacing.margin4}px;
+    margin-right: var(--ac-global-dimension-static-size-50);
   }
 `;
diff --git a/src/card/CollapsibleCardTitle.tsx b/src/card/CollapsibleCardTitle.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
 import { Icon, ArrowIosDownwardOutline } from '../icon';
 import { classNames, useStyleProps, viewStyleProps } from '../utils';
-import theme from '../theme';
 import { ViewProps } from '../view';
 
 const titleWrapCSS = css`
@@ -55,7 +54,7 @@ export function CollapsibleCardTitle(props: CollapsibleCardTitleProps) {
         css={css`
           transition: transform ease var(--collapsible-card-animation-duration);
           transform: rotate(-90deg);
-          margin-right: ${theme.spacing.padding8}px;
+          margin-right: var(--ac-global-dimension-static-size-100);
         `}
         aria-hidden={true}
       />

diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
@@ -10,7 +10,6 @@ import { useDialog } from '@react-aria/dialog';
 import { DialogProps } from '../types/dialog';
 import { Heading } from '../content';
 import { css } from '@emotion/react';
-import theme from '../theme';
 
 const dialogCSS = css`
   outline: none;
@@ -112,7 +111,8 @@ function Dialog(props: DialogProps, ref: DOMRef) {
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
+            padding: var(--ac-global-dimension-static-size-100)
+              var(--ac-global-dimension-static-size-200);
             border-bottom: 1px solid var(--ac-global-border-color-dark);
             flex: none;
           `}
@@ -123,7 +123,7 @@ function Dialog(props: DialogProps, ref: DOMRef) {
               display: flex;
               flex-direction: row;
               .ac-dialog__dismiss-button {
-                margin-left: ${theme.spacing.margin8}px;
+                margin-left: var(--ac-global-dimension-static-size-100);
               }
             `}
           >

diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
@@ -74,7 +74,7 @@ const buttonBaseCSS = css`
   .ac-dropdown-button__validation-icon {
     /* Animate in the icon */
     animation: ${appearKeyframes} ${0.2}s forwards ease-in-out;
-    top: ${theme.spacing.padding8}px;
+    top: var(--ac-global-dimension-static-size-100);
     right: 0;
     &.ac-dropdown-button__validation-icon--invalid {
       color: var(--ac-global-color-danger);
@@ -84,7 +84,8 @@ const buttonBaseCSS = css`
   // Make room for the invalid icon
   &.ac-dropdown-button > .ac-dropdown-button__text {
     padding-right: calc(
-      ${theme.spacing.padding8}px + var(--ac-validation-icon-width)
+      var(--ac-global-dimension-static-size-100) +
+        var(--ac-validation-icon-width)
     );
   }
 
@@ -106,7 +107,8 @@ const quietButtonCSS = css`
       --ac-field-border-color-override,
       var(--ac-dropdown-button-border-color)
     );
-  margin: ${theme.spacing.margin8}px 0 ${theme.spacing.margin8}px 0;
+  margin: var(--ac-global-dimension-static-size-100) 0
+    var(--ac-global-dimension-static-size-100) 0;
   &.is-hovered {
     border-bottom: 1px solid var(--ac-global-color-grey-500);
   }
@@ -131,7 +133,7 @@ const quietButtonCSS = css`
  */
 const nonQuietButtonCSS = css`
   min-width: 200px;
-  padding: 0 ${theme.spacing.margin8}px 0 0;
+  padding: 0 var(--ac-global-dimension-static-size-100) 0 0;
   --ac-dropdown-button-border-color: var(--ac-global-input-field-border-color);
   border: 1px solid
     var(
@@ -154,8 +156,10 @@ const nonQuietButtonCSS = css`
     border: 1px solid ${theme.components.dropdown.borderColor};
   }
   .ac-dropdown-button__text {
-    margin: ${theme.spacing.margin8}px ${theme.spacing.margin8}px
-      ${theme.spacing.margin8}px ${theme.spacing.margin16}px;
+    margin: var(--ac-global-dimension-static-size-100)
+      var(--ac-global-dimension-static-size-100)
+      var(--ac-global-dimension-static-size-100)
+      var(--ac-global-dimension-static-size-200);
   }
 
   &.ac-dropdown-button--invalid {

diff --git a/src/empty/graphics/EmptyDocumentsSVG.tsx b/src/empty/graphics/EmptyDocumentsSVG.tsx
@@ -20,7 +20,7 @@ export const EmptyDocumentsSVG = (props: StyleProps) => {
           isolation: isolate;
         }
         .cls-2 {
-          fill: #2c353f;
+          fill: var(--ac-global-color-grey-200);
         }
         .cls-3,
         .cls-9 {
@@ -29,7 +29,7 @@ export const EmptyDocumentsSVG = (props: StyleProps) => {
           stroke-miterlimit: 10;
         }
         .cls-3 {
-          stroke: #02bf92;
+          stroke: var(--ac-global-color-primary);
           stroke-width: 1.21px;
           stroke-dasharray: 0 6.2;
         }
@@ -50,7 +50,7 @@ export const EmptyDocumentsSVG = (props: StyleProps) => {
           fill: url(${linearGradientIdPrefix}-4);
         }
         .cls-9 {
-          stroke: #02bfff;
+          stroke: var(--ac-global-color-primary);
           stroke-width: 2px;
         }
       `}

diff --git a/src/empty/graphics/ErrorSVG.tsx b/src/empty/graphics/ErrorSVG.tsx
@@ -21,7 +21,7 @@ export function ErrorSVG(props: StyleProps) {
           fill: transparent;
         }
         .cls-3 {
-          fill: #2c353f;
+          fill: var(--ac-global-color-grey-200);
         }
         .cls-4 {
           mix-blend-mode: multiply;
@@ -37,11 +37,11 @@ export function ErrorSVG(props: StyleProps) {
           stroke-miterlimit: 10;
         }
         .cls-6 {
-          stroke: #02bf92;
+          stroke: var(--ac-global-color-primary);
           stroke-dasharray: 0 6.31;
         }
         .cls-7 {
-          stroke: #5bdbff;
+          stroke: var(--ac-global-color-primary);
           stroke-width: 2px;
         }
       `}

diff --git a/src/empty/graphics/NotFoundSVG.tsx b/src/empty/graphics/NotFoundSVG.tsx
@@ -23,7 +23,7 @@ export const NotFoundSVG = (props: StyleProps) => {
         }
         .cls-14,
         .cls-3 {
-          fill: #2c353f;
+          fill: var(--ac-global-color-grey-200);
         }
         .cls-4 {
           fill: url(#${id});
@@ -44,7 +44,7 @@ export const NotFoundSVG = (props: StyleProps) => {
         .cls-7,
         .cls-8,
         .cls-9 {
-          stroke: #5bdbff;
+          stroke: var(--ac-global-color-primary);
         }
         .cls-5 {
           stroke-width: 0.95px;
@@ -62,7 +62,7 @@ export const NotFoundSVG = (props: StyleProps) => {
           stroke-width: 0.25px;
         }
         .cls-10 {
-          stroke: #02bf92;
+          stroke: var(--ac-global-color-primary);
           stroke-dasharray: 0 5.11;
         }
         .cls-11 {
@@ -71,7 +71,7 @@ export const NotFoundSVG = (props: StyleProps) => {
         }
         .cls-12,
         .cls-14 {
-          stroke: #ededed;
+          stroke: var(--ac-global-color-grey-900);
           stroke-miterlimit: 1;
           stroke-width: 1.5px;
         }

diff --git a/src/field/Addon.tsx b/src/field/Addon.tsx
@@ -5,7 +5,7 @@ import { Text } from '../content/Text';
 
 const addonBeforeCSS = css`
   background-color: var(--ac-global-color-grey-300);
-  padding: 0 ${theme.spacing.padding8}px;
+  padding: 0 var(--ac-global-dimension-static-size-100);
   flex: none;
   box-sizing: border-box;
   height: ${theme.singleLineHeight}px;

diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx
@@ -62,7 +62,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         line-height: ${theme.typography.sizes.small.lineHeight}px;
         font-weight: ${theme.typography.weights.heavy};
         color: var(--ac-global-text-color-900);
-        padding: ${theme.spacing.padding4}px 0;
+        padding: var(--ac-global-dimension-static-size-50) 0;
         display: inline-flex;
         align-items: center;
       `}
@@ -90,7 +90,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         <span
           className="ac-field-label__label-extra"
           css={css`
-            margin-left: ${theme.spacing.padding4}px;
+            margin-left: var(--ac-global-dimension-static-size-50);
             display: inline-flex;
             align-items: center;
           `}

diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx
@@ -38,7 +38,7 @@ function HelpText(props: HelpTextComponentProps, ref: DOMRef<HTMLDivElement>) {
       ref={domRef}
       css={css`
         height: 16px;
-        padding: ${theme.spacing.padding4}px 0 0;
+        padding: var(--ac-global-dimension-static-size-50) 0 0;
         color: var(--ac-global-text-color-500);
         &.ac-help-text--danger {
           color: var(--ac-global-color-danger);

diff --git a/src/label/LabelGroup.tsx b/src/label/LabelGroup.tsx
@@ -1,14 +1,13 @@
 import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
-import theme from '../theme';
 
 export const LabelGroup = ({ children }: { children: ReactNode }) => {
   return (
     <span
       className="ac-label-group"
       css={css`
         .ac-label + .ac-label {
-          margin: ${theme.spacing.margin8}px;
+          margin: var(--ac-global-dimension-static-size-100);
         }
       `}
     >

diff --git a/src/list/List.tsx b/src/list/List.tsx
@@ -14,7 +14,7 @@ export type ListSize = 'small' | 'default';
 
 const interactiveListCSS = css`
   & > li:hover {
-    background-color: ${theme.colors.hoverBgColor};
+    background-color: var(--ac-global-background-color-light-hover);
     cursor: pointer;
   }
 `;
@@ -98,15 +98,15 @@ const listItemCSS = (options: {
 }) => {
   const spacing =
     options.listSize === 'small'
-      ? theme.spacing.padding8
-      : theme.spacing.padding16;
+      ? 'var(--ac-global-dimension-static-size-100)'
+      : 'var(--ac-global-dimension-static-size-200)';
   const innerPadding = options.noPadding ? 0 : spacing;
   return css`
-    padding: ${innerPadding}px;
+    padding: ${innerPadding};
     position: relative;
     &:hover {
       background-color: ${options.interactive
-        ? theme.colors.hoverBgColor
+        ? 'var(--ac-global-background-color-light-hover)'
         : 'transparent'};
       cursor: ${options.interactive ? 'pointer' : 'default'};
     }
@@ -115,7 +115,7 @@ const listItemCSS = (options: {
       content: ' ';
       border-top: 1px solid var(--ac-global-border-color-default);
       position: absolute;
-      left: ${spacing}px;
+      left: ${spacing};
       right: 0;
       top: 0;
     }

diff --git a/src/menu/ActionMenu.tsx b/src/menu/ActionMenu.tsx
@@ -7,7 +7,6 @@ import { ArrowIosDownwardOutline, Icon, MoreHorizontalOutline } from '../icon';
 import React, { forwardRef } from 'react';
 import { ActionMenuProps } from '../types';
 import { css } from '@emotion/react';
-import theme from '../theme';
 
 function ActionMenu<T extends object>(
   props: ActionMenuProps<T>,
@@ -34,7 +33,7 @@ function ActionMenu<T extends object>(
           align-items: center;
           .ac-icon-wrap {
             flex: fixed;
-            padding-left: ${theme.spacing.padding8}px;
+            padding-left: var(--ac-global-dimension-static-size-100);
             width: 16px;
             height: 16px;
             font-size: 16px;