@basic-ui/material 1.0.0-alpha.35 → 1.0.0-alpha.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.35",
+  "version": "1.0.0-alpha.36",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -18,17 +18,18 @@
     "build:dts": "run -T tsc -p ./tsconfig-build.json --isolatedModules false --declaration --emitDeclarationOnly",
     "build:cjs": "run -T cross-env NODE_ENV=production rollup -c ../../rollup.config.js",
     "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm run -T babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
-    "build-storybook": "run -T build-storybook -c ./scripts/storybook -o .out",
+    "build-storybook": "run -T sb build -c ./scripts/storybook -o .out",
     "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "format": "run -T prettier --write '**/*.js'",
-    "start": "run -T start-storybook -p 9001 -c ./scripts/storybook",
+    "start": "run -T sb dev -p 9001 -c ./scripts/storybook",
     "serve": "run -T http-server .out",
     "typecheck": "run -T tsc --noEmit -p ./tsconfig.json",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "run -T jest --config ../../jest.config.js",
+    "test:watch": "yarn test --watch"
   },
   "dependencies": {
     "@basic-ui/core": "^0.0.51",
-    "@basic-ui/dynamic-theme": "^0.0.8",
+    "@basic-ui/dynamic-theme": "^0.0.9",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -40,7 +41,11 @@
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
     "@material/material-color-utilities": "0.1.1",
-    "polished": "^4.2.2"
+    "autoprefixer": "^10.4.14",
+    "polished": "^4.2.2",
+    "postcss": "^8.4.27",
+    "postcss-import": "^15.1.0",
+    "tailwindcss": "^3.3.3"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.0.0",
@@ -48,9 +53,12 @@
     "@emotion/react": "11.x",
     "@emotion/styled": "11.x",
     "@styled-system/css": "*",
+    "autoprefixer": "^10.0.0",
     "polished": ">=3.0.0",
+    "postcss": "^8.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "tailwindcss": "^3.0.0"
   },
-  "gitHead": "273a88616867cc95b2b6b686f96fcb5a702234ed"
+  "gitHead": "befcd640cc8951f08635b5e71b80cacfdc302339"
 }

package/src/Button/Button.story.tsx

@@ -29,6 +29,10 @@ const NavigationIcon = (props) => (
 const Example = (props) => {
   return (
     <Box bg="surface">
+      <div className="bg-primary w-16 h-16 text-body-medium">Hello</div>
+      <div className="bg-primary-container w-16 h-16" />
+      <div className="bg-on-primary-container w-16 h-16" />
+      <div className="bg-ss-container-high w-16 h-16" />
       <Box p={3} display="flex" sx={{ gap: 2 }}>
         <Button variant="filled" {...props}>
           Filled

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -28,6 +28,7 @@ import { FontAutoComplete, parseMainFont } from './FontAutoComplete';
 import type { Theme } from '../theme/theme';
 import { BorderSlider } from './BorderSlider';
 import { ColorSchemePicker } from './ColorSchemePicker';
+import { makeTailwindThemeCSS } from './makeTailwindTheme';
 
 export interface ThemeBuilderProps {
   CodeHighlightingComponent?: ComponentType<{
@@ -338,11 +339,15 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
           <TonalColors palette={n2} />
         </Box>
       </Box>
-      {/* Color pickers */}
+      {/* Code pickers */}
       <Text variant="headline-small">Theme</Text>
       <CodeHighlightingComponent className={`language-json`}>
         {JSON.stringify(newTheme, null, 2)}
       </CodeHighlightingComponent>
+      <Text variant="headline-small">Tailwind Theme</Text>
+      <CodeHighlightingComponent className={`language-css`}>
+        {makeTailwindThemeCSS(newTheme as any)}
+      </CodeHighlightingComponent>
     </>
   );
 };

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/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>)",
+        },
+      },
+    }
+  `);
+});

package/src/theme/theme.ts

@@ -169,7 +169,7 @@ export const theme = {
       fontFamily: 'body',
       lineHeight: 'body',
     },
-    'display-large': font('brand', 64, 57, 0, 400),
+    'display-large': font('brand', 64, 57, -0.25, 400),
     'display-medium': font('brand', 52, 45, 0, 400),
     'display-small': font('brand', 44, 36, 0, 400),
     'headline-large': font('brand', 40, 32, 0, 400),
@@ -486,8 +486,8 @@ export const theme = {
   styles: {
     root: {
       body: {
-        fontFamily: 'body1',
-        fontWeight: 'body1',
+        fontFamily: 'plain',
+        fontWeight: 'regular',
         lineHeight: 'body',
         backgroundColor: 'surface',
         color: 'on.surface',