@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/ThemeExplorer/index.ts

@@ -0,0 +1 @@
+export * from './ThemeBuilder';

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,5 +1,5 @@
 import type { TonalPalette } from '@material/material-color-utilities';
-import { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+import { hexFromArgb } from '@material/material-color-utilities';
 
 export function makeColorScheme(opts: {
   primary: TonalPalette;
@@ -22,10 +22,19 @@ export function makeColorScheme(opts: {
     'secondary-container': c(opts.secondary, 90),
     'tertiary-container': c(opts.tertiary, 90),
     'error-container': c(opts.error, 90),
-    background: c(opts.neutral, 99),
-    surface: c(opts.neutral, 99),
+    background: c(opts.neutral, 98),
     'surface-variant': c(opts.neutralVariant, 90),
     outline: c(opts.neutralVariant, 50),
+    'outline-variant': c(opts.neutralVariant, 80),
+    // https://material.io/blog/tone-based-surface-color-m3
+    'surface-dim': c(opts.neutral, 87),
+    surface: c(opts.neutral, 98),
+    'surface-bright': c(opts.neutral, 98),
+    'surface-container-lowest': c(opts.neutral, 100),
+    'surface-container-low': c(opts.neutral, 96),
+    'surface-container': c(opts.neutral, 94),
+    'surface-container-high': c(opts.neutral, 92),
+    'surface-container-highest': c(opts.neutral, 90),
     on: {
       primary: c(opts.primary, 100),
       secondary: c(opts.secondary, 100),
@@ -36,9 +45,18 @@ export function makeColorScheme(opts: {
       'tertiary-container': c(opts.tertiary, 10),
       'error-container': c(opts.error, 10),
       background: c(opts.neutral, 10),
-      surface: c(opts.neutral, 10),
       'surface-variant': c(opts.neutralVariant, 30),
       outline: c(opts.neutralVariant, 95),
+      'outline-variant': c(opts.neutralVariant, 10),
+      // https://material.io/blog/tone-based-surface-color-m3
+      'surface-dim': c(opts.neutral, 10),
+      surface: c(opts.neutral, 10),
+      'surface-bright': c(opts.neutral, 10),
+      'surface-container-lowest': c(opts.neutral, 10),
+      'surface-container-low': c(opts.neutral, 10),
+      'surface-container': c(opts.neutral, 10),
+      'surface-container-high': c(opts.neutral, 10),
+      'surface-container-highest': c(opts.neutral, 10),
     },
     modes: {
       dark: {
@@ -50,10 +68,20 @@ export function makeColorScheme(opts: {
         'secondary-container': c(opts.secondary, 30),
         'tertiary-container': c(opts.tertiary, 30),
         'error-container': c(opts.error, 30),
-        background: c(opts.neutral, 10),
-        surface: c(opts.neutral, 10),
+        background: c(opts.neutral, 6),
         'surface-variant': c(opts.neutralVariant, 30),
         outline: c(opts.neutralVariant, 60),
+        'outline-variant': c(opts.neutralVariant, 30),
+        // https://material.io/blog/tone-based-surface-color-m3
+        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
+        'surface-dim': c(opts.neutral, 6),
+        surface: c(opts.neutral, 6),
+        'surface-bright': c(opts.neutral, 24),
+        'surface-container-lowest': c(opts.neutral, 4),
+        'surface-container-low': c(opts.neutral, 10),
+        'surface-container': c(opts.neutral, 12),
+        'surface-container-high': c(opts.neutral, 17),
+        'surface-container-highest': c(opts.neutral, 22),
         on: {
           primary: c(opts.primary, 20),
           secondary: c(opts.secondary, 20),
@@ -64,9 +92,18 @@ export function makeColorScheme(opts: {
           'tertiary-container': c(opts.tertiary, 90),
           'error-container': c(opts.error, 90),
           background: c(opts.neutral, 90),
-          surface: c(opts.neutral, 90),
           'surface-variant': c(opts.neutralVariant, 80),
           outline: c(opts.neutralVariant, 10),
+          'outline-variant': c(opts.neutralVariant, 90),
+          // https://material.io/blog/tone-based-surface-color-m3
+          'surface-dim': c(opts.neutral, 90),
+          surface: c(opts.neutral, 90),
+          'surface-bright': c(opts.neutral, 90),
+          'surface-container-lowest': c(opts.neutral, 90),
+          'surface-container-low': c(opts.neutral, 90),
+          'surface-container': c(opts.neutral, 90),
+          'surface-container-high': c(opts.neutral, 90),
+          'surface-container-highest': c(opts.neutral, 90),
         },
       },
     },

package/src/ThemeExplorer/makeTailwindTheme.ts

@@ -0,0 +1,44 @@
+import {
+  DARK_SCHEME_CLASS,
+  LIGHT_SCHEME_CLASS,
+  transformTheme,
+} from '@basic-ui/dynamic-theme';
+
+import type { Theme } from '../theme/theme';
+
+export function makeTailwindThemeCSS(theme: Theme) {
+  const transformedTheme = transformTheme(theme, []);
+  const { light, dark } = transformedTheme.colorModes;
+
+  const parseColorMode = (colors: Record<string, string>) => {
+    const keys = Object.keys(colors);
+    const cssLines: string[] = [];
+    // let css = '';
+    for (const key of keys) {
+      if (!key.endsWith('--rgb')) {
+        continue;
+      }
+
+      cssLines.push(`  ` + key + ': ' + colors[key]);
+    }
+    return cssLines.join(';\n') + ';';
+  };
+
+  const bodySelector = `body`;
+  const lightThemeSelector = [
+    '' + bodySelector,
+    '' + bodySelector + '.' + LIGHT_SCHEME_CLASS,
+    '' + bodySelector + ' .' + LIGHT_SCHEME_CLASS,
+  ].join(',\n');
+  const darkThemeSelector = [
+    '' + bodySelector + '.' + DARK_SCHEME_CLASS,
+    '' + bodySelector + ' .' + DARK_SCHEME_CLASS,
+  ].join(',\n');
+
+  return `${lightThemeSelector} {
+${parseColorMode(light)}
+}
+${darkThemeSelector} {
+${parseColorMode(dark)}
+}`;
+}

package/src/ThemeExplorer/updateGoogleFonts.js

@@ -0,0 +1,33 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { writeFileSync } = require('fs');
+
+// This file auto generates our googleFonts.ts file
+
+// You can generate an API key from here
+// https://developers.google.com/fonts/docs/developer_api#APIKey
+const API_KEY = process.env.GOOGLE_FONTS_API_KEY;
+
+async function main() {
+  const res = await fetch(
+    `https://content-webfonts.googleapis.com/v1/webfonts?sort=POPULARITY&key=${API_KEY}`
+  );
+
+  const json = await res.json();
+  if (json.error) {
+    console.error(json.error);
+    return;
+  }
+  const fonts = json.items.map((item) => item.family);
+  let str = '';
+  str += `// THIS FILE WAS AUTOGENERATED BY updateGoogleFonts.js\n`;
+  str += `// TO UPDATE IT RUN THE FOLLOWING WITH Node.js v18+\n`;
+  str += `// GOOGLE_FONTS_API_KEY="<SECRET>" node updateGoogleFonts.js`;
+  str += `\n\n/* eslint-disable prettier/prettier */\n`;
+  str += `export const googleFonts = [\n`;
+  str += fonts.map((f) => '  ' + JSON.stringify(f)).join(',\n');
+  str += '\n];\n';
+
+  writeFileSync('./googleFonts.ts', str, 'utf-8');
+}
+
+main();

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,25 +1,21 @@
-import { useMemo, useDeferredValue } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+import { useMemo } from 'react';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
 import type { Color } from '@basic-ui/color-picker';
 
 import { useLocalStorageCachedState } from './useLocalStorageCachedState';
 
-// import './styles.css';
 export function useDeferredColor(
   key: string,
   fallbackValue: TonalPalette
 ): [Color | null, TonalPalette, (c: Color | null) => void] {
   const [color, setColor] = useLocalStorageCachedState<Color | null>(
-    'theme-builder.' + key,
-    null
+    null,
+    'theme-builder.' + key
   );
-  const deferredColor = useDeferredValue(color);
   const colorTonal = useMemo(
     () =>
-      deferredColor?.hex
-        ? TonalPalette.fromInt(argbFromHex(deferredColor.hex))
-        : fallbackValue,
-    [deferredColor?.hex, fallbackValue]
+      color?.hex ? TonalPalette.fromInt(argbFromHex(color.hex)) : fallbackValue,
+    [color?.hex, fallbackValue]
   );
   return [color, colorTonal, setColor];
 }

package/src/ThemeExplorer/useLocalStorageCachedState.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 
 export function useLocalStorageCachedState<T>(
-  key: string,
-  initialValue: T
+  initialValue: T,
+  key: string
 ): [T, (c: T) => void] {
   const [state, _setState] = useState<T>(
     () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Tooltip } from './';
 import { Button } from '../Button';
@@ -9,7 +9,7 @@ export default {
 };
 
 const Example = () => {
-  const buttonRef = useRef();
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const [counter, setCounter] = useState(0);
   useEffect(() => {
     const interval = setInterval(() => setCounter((f) => f + 1), 50);

package/src/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import type { PopperProps } from '@basic-ui/core';
 import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
-import type { FC } from 'react';
-import React, { forwardRef } from 'react';
+import type { ElementType, FC, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -10,18 +10,44 @@ import { alpha } from '../color';
 export interface TooltipProps
   extends BoxProps,
     Omit<PopperProps, 'color' | 'anchorEl'> {
-  label: React.ReactNode;
+  label: ReactNode;
   disabled?: boolean;
 }
 
 const BaseTooltip: FC<
   BoxProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
+    label: ReactNode;
   } & Omit<PopperProps, 'color' | 'anchorEl'>
 > = _BaseTooltip as any;
+
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, forwardedRef) {
-    const { placement = 'bottom', __css, ...otherProps } = props;
+    const {
+      placement = 'bottom',
+      children,
+      label,
+      __css,
+      ...otherProps
+    } = props;
+    const cssStyle = {
+      variant: ['text.body-medium', 'text.body-small'],
+      bg: alpha('#616161', 0.9),
+      color: '#fff',
+      px: 2,
+      py: 1,
+      borderRadius: 'extra-small',
+      zIndex: 'tooltip',
+      ...__css,
+    };
+
+    if (!children) {
+      return (
+        <Box ref={forwardedRef} __css={cssStyle} {...otherProps}>
+          {label}
+        </Box>
+      );
+    }
 
     return (
       <BaseTooltip
@@ -30,21 +56,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         ref={forwardedRef}
         placement={placement}
         distance={8}
-        __css={{
-          bg: alpha('#616161', 0.9),
-          color: '#fff',
-          fontSize: [2, 2, 1],
-          fontFamily: 'body',
-          fontWeight: 'regular',
-          lineHeight: [1.2, 1.2, 1.33],
-          px: [3, 3, 2],
-          py: [2, 2, 1],
-          borderRadius: '4px',
-          zIndex: 'tooltip',
-          ...__css,
-        }}
+        label={label}
+        __css={cssStyle}
         {...otherProps}
-      />
+      >
+        {children}
+      </BaseTooltip>
     );
   }
 );

package/src/color.ts

@@ -1,8 +1,8 @@
 import type { SystemStyleObject } from '@styled-system/css';
 import { get } from '@styled-system/css';
 import { parseToRgb } from 'polished';
+import { DARK_SCHEME_CLASS } from '@basic-ui/dynamic-theme';
 
-import { DARK_THEME_CLASS } from './ColorMode';
 import type { Theme } from './theme';
 
 export const alpha =
@@ -12,22 +12,46 @@ export const alpha =
       const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
       return `rgba(${color},${alphaValue})`;
     }
+    if (color.startsWith('rgba(')) {
+      return color;
+    }
 
     const rgb = parseToRgb(color);
     return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
   };
 
+export function mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
+
 export function getColorOverlay(
   theme: Theme,
   baseColor: string,
   overlayColor: string,
   overlayOpacity: number
 ): SystemStyleObject {
-  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
-
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
   };
 }
 
@@ -53,7 +77,7 @@ export function getDarkThemeBackgroundOverlay(
   }
 
   return {
-    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {
+    [`.${DARK_SCHEME_CLASS} &, &.${DARK_SCHEME_CLASS}`]: {
       ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),
     },
   };

package/src/index.ts

@@ -8,7 +8,6 @@ export * from './Button';
 export * from './Combobox';
 export * from './CheckBox';
 export * from './Chip';
-export * from './ColorMode';
 export * from './Divider';
 export * from './Dialog';
 export * from './FloatingLabel';
@@ -17,14 +16,17 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
+export * from './Popover';
 export * from './ProgressSpinner';
 export * from './RadioButton';
 export * from './Ripple';
 export * from './Select';
 export * from './SelectItem';
 export * from './Skeleton';
+export * from './Slider';
 export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';
@@ -33,5 +35,7 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';
+export * from './hooks/useAnimation';

package/src/motion.ts

@@ -0,0 +1,7 @@
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';

package/src/tailwind/extendColors.ts

@@ -0,0 +1,51 @@
+import type { Theme } from '../theme/theme';
+
+export type ColorsObject = { [key: string]: string | ColorsObject };
+export function extendColors(theme: Theme): ColorsObject {
+  const modifiedColors: ColorsObject = {};
+  function extractColors(colors: ColorsObject, arr: ColorsObject, root = '') {
+    function insert(key: string, value: string) {
+      const parts = key.split('-');
+
+      let obj: any = arr;
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const isLast = i === parts.length - 1;
+
+        if (isLast) {
+          if (typeof obj[part] === 'object') {
+            obj[part].DEFAULT = value;
+          } else {
+            obj[part] = value;
+          }
+        } else {
+          if (typeof obj[part] === 'string') {
+            obj[part] = { DEFAULT: obj[part] };
+          } else if (typeof obj[part] === 'undefined') {
+            obj[part] = {};
+          }
+          obj = obj[part];
+        }
+      }
+    }
+
+    for (const key of Object.keys(colors)) {
+      if (key === 'modes') {
+        continue;
+      }
+
+      const c = colors[key];
+      if (typeof c === 'string') {
+        const varName = `--${root + key}--rgb`;
+        insert(key, `rgba(var(${varName}), <alpha-value>)`);
+      } else if (typeof c === 'object') {
+        const subColors: ColorsObject = {};
+        extractColors(c, subColors, root + key + '-');
+        arr[key] = subColors;
+      }
+    }
+  }
+
+  extractColors(theme.colors as any, modifiedColors);
+  return modifiedColors;
+}

package/src/tailwind/index.ts

@@ -0,0 +1,56 @@
+import plugin from 'tailwindcss/plugin';
+import type { Config as TailwindConfig } from 'tailwindcss';
+import { css } from '@styled-system/css';
+
+import type { Theme } from '../theme';
+import { extendColors } from './extendColors';
+
+export type PluginOptions = {
+  theme?: Theme;
+};
+
+const textVariants = [
+  'display-large',
+  'display-medium',
+  'display-small',
+  'headline-large',
+  'headline-medium',
+  'headline-small',
+  'title-large',
+  'title-medium',
+  'title-small',
+  'label-large',
+  'label-medium',
+  'label-small',
+  'body-large',
+  'body-medium',
+  'body-small',
+];
+
+export default function generatePreset({
+  theme: basicUiTheme,
+}: {
+  theme: Theme;
+}): TailwindConfig {
+  return {
+    content: [],
+    darkMode: 'class',
+    theme: {
+      colors: {
+        ...extendColors(basicUiTheme),
+      },
+    },
+    plugins: [
+      plugin(function ({ addComponents }) {
+        for (const variant of textVariants) {
+          const themeStyle = basicUiTheme.text[variant];
+          if (themeStyle) {
+            addComponents({
+              [`.text-${variant}`]: css(themeStyle)(basicUiTheme) as any,
+            });
+          }
+        }
+      }),
+    ],
+  };
+}

package/src/tailwind/tests/extendColors.test.ts

@@ -0,0 +1,123 @@
+import { extendColors } from '../extendColors';
+
+test('extendColors', () => {
+  expect(
+    extendColors({
+      colors: {
+        primary: '#123456',
+        'primary-container': '#123456',
+        secondary: '#123456',
+        surface: '#123456',
+        'surface-container-lowest': '#123456',
+        'surface-container-low': '#123456',
+        'surface-container': '#123456',
+        'surface-container-high': '#123456',
+        'surface-container-highest': '#123456',
+        on: {
+          primary: '#123456',
+          'primary-container': '#123456',
+          surface: '#123456',
+          'surface-container-lowest': '#123456',
+          'surface-container-low': '#123456',
+          'surface-container': '#123456',
+          'surface-container-high': '#123456',
+          'surface-container-highest': '#123456',
+        },
+      },
+    } as any)
+  ).toMatchInlineSnapshot(`
+    Object {
+      "on": Object {
+        "primary": Object {
+          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
+          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
+        },
+        "surface": Object {
+          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
+          "container": Object {
+            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
+            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
+            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
+            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
+            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
+          },
+        },
+      },
+      "primary": Object {
+        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
+        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
+      },
+      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
+      "surface": Object {
+        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
+        "container": Object {
+          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
+          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
+          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
+          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
+          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
+        },
+      },
+    }
+  `);
+
+  expect(
+    extendColors({
+      colors: {
+        primary: '#123456',
+        'primary-container': '#123456',
+        secondary: '#123456',
+        'surface-container-lowest': '#123456',
+        'surface-container-low': '#123456',
+        'surface-container-high': '#123456',
+        'surface-container-highest': '#123456',
+        'surface-container': '#123456',
+        surface: '#123456',
+        on: {
+          primary: '#123456',
+          'primary-container': '#123456',
+          surface: '#123456',
+          'surface-container-lowest': '#123456',
+          'surface-container-low': '#123456',
+          'surface-container': '#123456',
+          'surface-container-high': '#123456',
+          'surface-container-highest': '#123456',
+        },
+      },
+    } as any)
+  ).toMatchInlineSnapshot(`
+    Object {
+      "on": Object {
+        "primary": Object {
+          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
+          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
+        },
+        "surface": Object {
+          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
+          "container": Object {
+            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
+            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
+            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
+            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
+            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
+          },
+        },
+      },
+      "primary": Object {
+        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
+        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
+      },
+      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
+      "surface": Object {
+        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
+        "container": Object {
+          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
+          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
+          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
+          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
+          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
+        },
+      },
+    }
+  `);
+});