Convert theme to TS and update zIndex values

NASA-IMPACT · Feb 3, 2023 · 1e2830d · 1e2830d
1 parent e789127
commit 1e2830d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 40 deletions.
diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import T from 'prop-types';
 import styled, { css } from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
 
 import PageHeader from './page-header';
 import { useSlidingStickyHeaderProps } from './layout-root';
@@ -15,7 +16,7 @@ const NavWrapper = styled.div`
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 900;
+  z-index: ${themeVal('zIndices.sticky')};
 
   transition: top ${HEADER_TRANSITION_DURATION}ms ease-out;
   ${({ shouldSlideHeader, headerHeight }) =>

diff --git a/app/scripts/components/common/tip.ts b/app/scripts/components/common/tip.ts
@@ -11,7 +11,7 @@ export const Tip = Typpy;
 export const reactTippyStyles = () => css`
   body {
     [data-tippy-root] {
-      z-index: 800 !important;
+      z-index: ${themeVal('zIndices.tooltip')} !important;
     }
 
     .tippy-box {

diff --git a/app/scripts/styles/theme.js → app/scripts/styles/theme.ts b/app/scripts/styles/theme.js → app/scripts/styles/theme.ts
@@ -2,45 +2,59 @@ import { createUITheme, media, themeVal } from '@devseed-ui/theme-provider';
 import { createGlobalStyle } from 'styled-components';
 import { reactTippyStyles } from '$components/common/tip';
 
-export default function themeOverrides() {
-  return createUITheme({
-    color: {
-      base: '#2c3e50',
-      primary: '#2276ac',
-      infographicA: '#fcab10',
-      infographicB: '#f4442e',
-      infographicC: '#b62b6e',
-      infographicD: '#2ca58d',
-      infographicE: '#2276ac'
-    },
-    type: {
-      base: {
-        leadSize: '1.25rem',
-        extrabold: '800',
-        // Increments to the type.base.size for each media breakpoint.
-        sizeIncrement: {
-          small: '0rem',
-          medium: '0rem',
-          large: '0.25rem',
-          xlarge: '0.25rem'
-        }
-      },
-      heading: {
-        settings: '"wdth" 100, "wght" 700'
+export const VEDA_OVERRIDE_THEME = {
+  zIndices: {
+    hide: -1,
+    docked: 10,
+    sticky: 900,
+    dropdown: 1000,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800
+  },
+  color: {
+    base: '#2c3e50',
+    primary: '#2276ac',
+    infographicA: '#fcab10',
+    infographicB: '#f4442e',
+    infographicC: '#b62b6e',
+    infographicD: '#2ca58d',
+    infographicE: '#2276ac'
+  },
+  type: {
+    base: {
+      leadSize: '1.25rem',
+      extrabold: '800',
+      // Increments to the type.base.size for each media breakpoint.
+      sizeIncrement: {
+        small: '0rem',
+        medium: '0rem',
+        large: '0.25rem',
+        xlarge: '0.25rem'
       }
     },
-    layout: {
-      min: '384px',
-      max: '1440px',
-      glspMultiplier: {
-        xsmall: 1,
-        small: 1,
-        medium: 1.5,
-        large: 2,
-        xlarge: 2
-      }
+    heading: {
+      settings: '"wdth" 100, "wght" 700'
+    }
+  },
+  layout: {
+    min: '384px',
+    max: '1440px',
+    glspMultiplier: {
+      xsmall: 1,
+      small: 1,
+      medium: 1.5,
+      large: 2,
+      xlarge: 2
     }
-  });
+  }
+};
+
+export default function themeOverrides() {
+  return createUITheme(VEDA_OVERRIDE_THEME);
 }
 
 /**
@@ -51,7 +65,7 @@ export const GlobalStyles = createGlobalStyle`
   ${reactTippyStyles()}
 
   .tether-element.tether-element {
-    z-index: 700;
+    z-index: ${themeVal('zIndices.dropdown')};
   }
 
   :root {
@@ -85,4 +99,4 @@ export const GlobalStyles = createGlobalStyle`
       --base-space-multiplier: ${themeVal('layout.glspMultiplier.xlarge')};
     }
   `}
-`;
+`;
diff --git a/types.d.ts b/types.d.ts
@@ -0,0 +1,16 @@
+import { VEDA_OVERRIDE_THEME } from "$styles/theme";
+
+// Convert object keys to string paths.
+type PropertyStringPath<T, Prefix = ''> = {
+  [K in keyof T]: T[K] extends number | string
+    ? `${string & Prefix}${string & K}`
+    : PropertyStringPath<T[K], `${string & Prefix}${string & K}.`>;
+}[keyof T];
+
+declare module '@devseed-ui/theme-provider' {
+  type ThemeValPathExtend =
+    | ThemeValPath
+    | PropertyStringPath<typeof VEDA_OVERRIDE_THEME>;
+
+  function themeVal(path: ThemeValPathExtend): ThemeValReturn;
+}