feat: add the ability to un-mount global styles

Arize-ai · Jan 14, 2025 · 629d437 · 629d437
1 parent 8f81ef4
commit 629d437
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/src/button/styles.ts b/src/button/styles.ts
@@ -19,7 +19,7 @@ export const buttonCSS = css`
   }
   &[disabled] {
     cursor: default;
-    opacity: ${theme.opacity.disabled};
+    opacity: var(--ac-opacity-disabled);
   }
   &[data-size='default'][data-childless='false'] {
     padding: var(--ac-global-dimension-static-size-100)

diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -1016,6 +1016,10 @@ export const derivedCSS = (theme: ProviderTheme) => css`
     --ac-alias-single-line-width: var(--ac-global-dimension-size-2400);
   }
 `;
+
+const opacitiesCSS = css`
+  --ac-opacity-disabled: 0.6;
+`;
 export function GlobalStyles() {
   let { theme } = useProvider();
   theme = theme || 'dark';
@@ -1027,7 +1031,8 @@ export function GlobalStyles() {
         staticCSS,
         themeCSS,
         derivedCSS(theme),
-        mediumRootCSS
+        mediumRootCSS,
+        opacitiesCSS
       )}
     />
   );

diff --git a/src/provider/Provider.tsx b/src/provider/Provider.tsx
@@ -7,7 +7,12 @@ const Context = React.createContext<ProviderContext | null>(null);
 
 export function Provider(props: ProviderProps) {
   const prevContext = useContext(Context);
-  const { children, theme: propsTheme, ...context } = props;
+  const {
+    children,
+    theme: propsTheme,
+    mountGlobalStyles = true,
+    ...context
+  } = props;
   let theme: ProviderTheme = propsTheme || 'dark';
   const isRootProvider = !prevContext;
   // If there is a theme higher up in the tree, use that theme
@@ -21,7 +26,7 @@ export function Provider(props: ProviderProps) {
   );
   return (
     <Context.Provider value={{ ...context, theme }}>
-      {isRootProvider ? <GlobalStyles /> : null}
+      {isRootProvider && mountGlobalStyles ? <GlobalStyles /> : null}
       <div className={`ac-theme ac-theme--${theme}`}>{content}</div>
     </Context.Provider>
   );

diff --git a/src/types/provider.ts b/src/types/provider.ts
@@ -16,6 +16,12 @@ interface ContextProps {
 export interface ProviderProps extends ContextProps {
   /** The content of the Provider. */
   children: ReactNode;
+  /**
+   * Whether or not to mount the global styles. This should only be set to false if
+   * you are wanting to manually set the global design tokens.
+   * @default true
+   */
+  mountGlobalStyles?: boolean;
 }
 
-export type ProviderContext = ContextProps
+export type ProviderContext = ContextProps;