Merge branch 'light-theme' of github.com:Arize-ai/ui-components into …

…light-theme
Arize-ai · Oct 19, 2023 · 97d53fc · 97d53fc
2 parents 9005e2c + ceca1b7
commit 97d53fc
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -353,7 +353,7 @@ export const lightThemeCSS = css`
     /* Colors */
 
     // The primary color tint for  the apps
-    --ac-global-primary-color: #72d9ff;
+    --ac-global-primary-color: #42cafb;
 
     // The newer grays (grey)
     --ac-global-color-grey-50: #ffffff;

diff --git a/src/slider/SliderBase.tsx b/src/slider/SliderBase.tsx
@@ -147,6 +147,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
       css={css`
         grid-area: value;
         text-align: right;
+        color: var(--ac-global-text-color-900);
       `}
       // TODO this is non-deterministic
       // style={

diff --git a/src/slider/styles.tsx b/src/slider/styles.tsx
@@ -7,7 +7,7 @@ export const sliderCSS = css`
   --ac-slider-handle-height: var(--ac-global-dimension-size-250);
   --ac-slider-handle-halo-width: var(--ac-global-dimension-size-350);
   --ac-slider-handle-border-radius: var(--ac-global-dimension-size-250);
-  --ac-slider-handle-background-color: var(--ac-global-text-color-900);
+  --ac-slider-handle-background-color: white;
   --ac-slider-track-height: var(--ac-global-dimension-size-100);
   width: var(
     --ac-alias-single-line-width,

diff --git a/src/switch/styles.ts b/src/switch/styles.ts
@@ -8,7 +8,7 @@ export const switchCSS = css`
   --ac-switch-background-color-disabled: var(--ac-global-color-grey-300);
   --ac-switch-background-color-selected: var(--ac-global-primary-color);
 
-  --ac-switch-handle-background-color: var(--ac-global-color-grey-900);
+  --ac-switch-handle-background-color: white;
   --ac-switch-handle-background-color-selected: ${theme.colors.arizeLightBlue};
 
   --ac-switch-min-height: 30px;

diff --git a/stories/RangeSlider.stories.tsx b/stories/RangeSlider.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
 import { Flex, Provider, RangeSlider, Switch } from '../src';
 import { withDesign } from 'storybook-addon-designs';
+import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const meta: Meta = {
   title: 'RangeSlider',
@@ -19,8 +19,7 @@ const meta: Meta = {
     controls: { expanded: true },
     design: {
       type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?type=design&node-id=3235%3A9316&mode=dev',
+      url: 'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?type=design&node-id=3235%3A9316&mode=dev',
     },
   },
 };
@@ -29,11 +28,11 @@ export default meta;
 
 export const Gallery = () => {
   return (
-    <Provider>
+    <ThemeToggleWrap>
       <Flex direction="column">
         <RangeSlider label="Range" defaultValue={{ start: 12, end: 36 }} />
         <Switch>Send Emails</Switch>
       </Flex>
-    </Provider>
+    </ThemeToggleWrap>
   );
 };