From ceca1b724d4d7e96ad3f5f63644793f7c635bd39 Mon Sep 17 00:00:00 2001
From: Gurmehar Somal <gurmehar98@berkeley.edu>
Date: Thu, 19 Oct 2023 15:27:12 -0500
Subject: [PATCH] editing range slider and slider base

---
 src/provider/GlobalStyles.tsx   | 2 +-
 src/slider/SliderBase.tsx       | 1 +
 src/slider/styles.tsx           | 2 +-
 src/switch/styles.ts            | 2 +-
 stories/RangeSlider.stories.tsx | 9 ++++-----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
index 5692ad2f..8c44e263 100644
--- 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
index b4c2dcf6..059699a3 100644
--- 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
index 289dba8c..c4551c1a 100644
--- 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
index ceba575c..88599b0b 100644
--- 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
index 390ccb53..e15f8a57 100644
--- 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>
   );
 };