feat(theme): change light theme primary (#185)

* change light theme primary * add addonafter
Arize-ai · Jan 23, 2024 · f8ec977 · f8ec977
1 parent f566139
commit f8ec977
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/field/Addon.tsx b/src/field/Addon.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import theme from '../theme';
 import { Text } from '../content/Text';
 
-const addonBeforeCSS = css`
+const addonCSS = css`
   background-color: var(--ac-global-color-grey-300);
   padding: 0 var(--ac-global-dimension-static-size-100);
   flex: none;
@@ -18,7 +18,20 @@ const addonBeforeCSS = css`
  */
 export function AddonBefore({ children }: { children: ReactNode }) {
   return (
-    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
+    <div css={addonCSS} className="ac-addon ac-addon--before">
+      <Text textSize="medium" weight="heavy" color="text-700">
+        {children}
+      </Text>
+    </div>
+  );
+}
+
+/**
+ * A label element that describes a button or an input field
+ */
+export function AddonAfter({ children }: { children: ReactNode }) {
+  return (
+    <div css={addonCSS} className="ac-addon ac-addon--after">
       <Text textSize="medium" weight="heavy" color="text-700">
         {children}
       </Text>

diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -661,9 +661,9 @@ export const lightThemeCSS = css`
     /* Colors */
 
     // The primary color tint for  the apps
-    --ac-global-color-primary: rgb(2, 173, 221);
-    --ac-global-color-primary-900: rgb(2, 173, 221, 0.9);
-    --ac-global-color-primary-700: rgb(2, 173, 221, 0.7);
+    --ac-global-color-primary: rgb(9, 105, 218);
+    --ac-global-color-primary-900: rgb(9, 105, 218, 0.9);
+    --ac-global-color-primary-700: rgb(9, 105, 218, 0.7);
 
     // The newer grays (grey)
     --ac-global-color-grey-50-rgb: 255, 255, 255;

diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
@@ -219,11 +219,9 @@ const standardTextfieldBaseCSS = css`
     var(--ac-field-border-color-override, var(--ac-textfield-border-color));
   &.is-hovered:not(.is-disabled) {
     border: 1px solid var(--ac-global-input-field-border-color-active);
-    background-color: var(--ac-global-input-field-background-color-active);
   }
   &.is-focused:not(.is-disabled) {
     border: 1px solid var(--ac-global-input-field-border-color-active);
-    background-color: var(--ac-global-input-field-background-color-active);
     &.ac-textfield--invalid {
       border: 1px solid var(--ac-global-color-danger);
       .ac-textfield__input {

diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
@@ -167,6 +167,13 @@ export function OverviewPage() {
                         Receive alerts when your model experiences drift, data
                         quality, and performance degradations.
                       </Text>
+                      <span
+                        css={css`
+                          color: var(--ac-global-color-primary);
+                        `}
+                      >
+                        This is a fake link
+                      </span>
                     </Flex>
                   </Flex>
                 </ListItem>