@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.44

package/src/tailwind/extendColors.ts

@@ -1,51 +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;
-}
+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

@@ -1,56 +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,
-            });
-          }
-        }
-      }),
-    ],
-  };
-}
+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

@@ -1,123 +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>)",
-        },
-      },
-    }
-  `);
-});
+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>)",
+        },
+      },
+    }
+  `);
+});

package/src/theme/index.ts

@@ -1,2 +1,2 @@
-export * from './theme';
-export * from './useTheme';
+export * from './theme';
+export * from './useTheme';