fix light colors

Arize-ai · Oct 24, 2023 · 05d496f · 05d496f
1 parent 13e5698
commit 05d496f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -579,13 +579,13 @@ export const lightThemeCSS = css`
 export const derivedCSS = css`
   :root {
     --ac-global-background-color-default: var(--ac-global-color-grey-100);
-    --ac-global-background-color-light: var(--ac-global-color-grey-300);
-    --ac-global-background-color-light-hover: var(--ac-global-color-grey-400);
+    --ac-global-background-color-light: var(--ac-global-color-grey-200);
+    --ac-global-background-color-light-hover: var(--ac-global-color-grey-300);
     --ac-global-background-color-dark: var(--ac-global-color-grey-100);
     --ac-global-background-color-danger: var(--ac-global-color-danger);
 
     --ac-global-border-color-default: var(--ac-global-color-grey-300);
-    --ac-global-border-color-light: var(--ac-global-color-grey-500);
+    --ac-global-border-color-light: var(--ac-global-color-grey-400);
     --ac-global-border-color-dark: var(--ac-global-color-grey-300);
 
     // Styles for text fields etc

diff --git a/stories/SlideOver.stories.tsx b/stories/SlideOver.stories.tsx
@@ -10,6 +10,7 @@ import {
   ButtonGroup,
   Card,
   Flex,
+  CardProps,
 } from '../src';
 import { DialogProps } from '../src/types/dialog';
 import {
@@ -41,6 +42,12 @@ const meta: Meta = {
 
 export default meta;
 
+const cardProps: Partial<CardProps> = {
+  borderColor: 'light',
+  backgroundColor: 'light',
+  variant: 'compact',
+};
+
 const content = (
   <div
     css={css`
@@ -51,31 +58,31 @@ const content = (
     data-testid="scroll-container"
   >
     <Flex direction="column" gap="size-100">
-      <Card title="Section 1">
+      <Card title="Section 1" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 2">
+      <Card title="Section 2" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 3">
+      <Card title="Section 3" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 4">
+      <Card title="Section 4" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 5">
+      <Card title="Section 5" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 6">
+      <Card title="Section 6" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 7">
+      <Card title="Section 7" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 8">
+      <Card title="Section 8" {...cardProps}>
         <Text>hello</Text>
       </Card>
-      <Card title="Section 9">
+      <Card title="Section 9" {...cardProps}>
         <Text>hello</Text>
       </Card>
     </Flex>