@dxos/react-ui 0.1.12 → 0.1.14

package/src/config/tailwind.ts

@@ -0,0 +1,250 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import tailwindcssForms from '@tailwindcss/forms';
+import { resolve } from 'node:path';
+import type { Config } from 'tailwindcss';
+import tailwindcssLogical from 'tailwindcss-logical';
+import tailwindcssRadix from 'tailwindcss-radix';
+import tailwindColors from 'tailwindcss/colors';
+import defaultConfig from 'tailwindcss/stubs/defaultConfig.stub.js';
+
+export const tailwindConfig = ({
+  env = 'production',
+  root = './',
+  content = []
+}: {
+  env?: string;
+  root?: string;
+  content?: string[];
+}): Config => ({
+  darkMode: 'class',
+  theme: {
+    fontFamily: {
+      body: ['Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
+      display: ['Space GroteskVariable', 'Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
+      mono: ['Fira CodeVariable', ...defaultConfig.theme.fontFamily.mono]
+    },
+    extend: {
+      colors: {
+        success: tailwindColors.emerald,
+        warning: tailwindColors.amber,
+        error: tailwindColors.rose,
+        info: tailwindColors.cyan,
+        neutral: {
+          // Key color #707076
+          // Hue torsion 0.0º
+          // C*CP black 0.80, C*CP white 0.88
+          950: '#101012',
+          900: '#1b1b1e',
+          850: '#252529',
+          800: '#303034',
+          750: '#3b3b3f',
+          700: '#46464b',
+          650: '#525257',
+          600: '#5e5e64',
+          550: '#6a6a70',
+          500: '#77767d',
+          450: '#838389',
+          400: '#909096',
+          350: '#9d9da4',
+          300: '#ababb1',
+          250: '#b8b8be',
+          200: '#c6c6cc',
+          150: '#d4d4d9',
+          100: '#e2e2e7',
+          50: '#f1f1f4'
+        },
+        primary: {
+          // Key color #00e0e0
+          // Hue torsion -73.5º
+          // C*CP black 1.0, C*CP white 1.0
+          950: '#110c2a',
+          900: '#101940',
+          850: '#0b2453',
+          800: '#003164',
+          750: '#003e70',
+          700: '#004b7c',
+          650: '#005887',
+          600: '#006693',
+          550: '#00749e',
+          500: '#0082a9',
+          450: '#0091b3',
+          400: '#00a0be',
+          350: '#00afc7',
+          300: '#00bed0',
+          250: '#00ced8',
+          200: '#00dedf',
+          150: '#3cede4',
+          100: '#69fae8',
+          50: '#b9ffee'
+        },
+        transparent: 'transparent',
+        current: 'currentColor',
+        white: '#ffffff',
+        black: '#000000'
+      },
+      fontSize: {
+        // Base size 16px
+        // Scale 1.125
+        xs: ['0.790rem', { lineHeight: '1rem' }],
+        sm: ['0.889rem', { lineHeight: '1.25rem' }],
+        base: ['1rem', { lineHeight: '1.5rem' }],
+        lg: ['1.125rem', { lineHeight: '1.75rem' }],
+        xl: ['1.266rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.424rem', { lineHeight: '2rem' }],
+        '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
+        '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
+        '5xl': ['2.027rem', { lineHeight: '2.5rem' }],
+        '6xl': ['2.281rem', { lineHeight: '2.5rem' }],
+        '7xl': ['2.566rem', { lineHeight: '2.75rem' }],
+        '8xl': ['2.887rem', { lineHeight: '3rem' }],
+        '9xl': ['3.247rem', { lineHeight: '3.25rem' }]
+      },
+      outlineWidth: {
+        3: '3px'
+      },
+      boxShadow: {
+        slider: '0 0 0 5px rgba(0, 0, 0, 0.3)'
+      },
+      keyframes: {
+        // Dropdown menu
+        'scale-in': {
+          '0%': { opacity: '0', transform: 'scale(0)' },
+          '100%': { opacity: '1', transform: 'scale(1)' }
+        },
+        'slide-down': {
+          '0%': { opacity: '0', transform: 'translateY(-10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        'slide-up': {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        // Tooltip
+        'slide-up-fade': {
+          '0%': { opacity: '0', transform: 'translateY(2px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        'slide-right-fade': {
+          '0%': { opacity: '0', transform: 'translateX(-2px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' }
+        },
+        'slide-down-fade': {
+          '0%': { opacity: '0', transform: 'translateY(-2px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        'slide-left-fade': {
+          '0%': { opacity: '0', transform: 'translateX(2px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' }
+        },
+        // Navigation menu
+        'enter-from-right': {
+          '0%': { transform: 'translateX(200px)', opacity: '0' },
+          '100%': { transform: 'translateX(0)', opacity: '1' }
+        },
+        'enter-from-left': {
+          '0%': { transform: 'translateX(-200px)', opacity: '0' },
+          '100%': { transform: 'translateX(0)', opacity: '1' }
+        },
+        'exit-to-right': {
+          '0%': { transform: 'translateX(0)', opacity: '1' },
+          '100%': { transform: 'translateX(200px)', opacity: '0' }
+        },
+        'exit-to-left': {
+          '0%': { transform: 'translateX(0)', opacity: '1' },
+          '100%': {
+            transform: 'translateX(-200px)',
+            opacity: '0'
+          }
+        },
+        'scale-in-content': {
+          '0%': {
+            transform: 'rotateX(-30deg) scale(0.9)',
+            opacity: '0'
+          },
+          '100%': {
+            transform: 'rotateX(0deg) scale(1)',
+            opacity: '1'
+          }
+        },
+        'scale-out-content': {
+          '0%': {
+            transform: 'rotateX(0deg) scale(1)',
+            opacity: '1'
+          },
+          '100%': {
+            transform: 'rotateX(-10deg) scale(0.95)',
+            opacity: '0'
+          }
+        },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' }
+        },
+        'fade-out': {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' }
+        },
+        // Toast
+        'toast-hide': {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' }
+        },
+        'toast-slide-in-right': {
+          '0%': { transform: 'translateX(calc(100% + 1rem))' },
+          '100%': { transform: 'translateX(0)' }
+        },
+        'toast-slide-in-bottom': {
+          '0%': { transform: 'translateY(calc(100% + 1rem))' },
+          '100%': { transform: 'translateY(0)' }
+        },
+        'toast-swipe-out': {
+          '0%': {
+            transform: 'translateX(var(--radix-toast-swipe-end-x))'
+          },
+          '100%': {
+            transform: 'translateX(calc(100% + 1rem))'
+          }
+        },
+        // Shimmer
+        'shimmer-loop': {
+          '100%': {
+            transform: 'translateX(100%)'
+          }
+        }
+      },
+      animation: {
+        // Dropdown menu
+        'scale-in': 'scale-in 0.2s ease-in-out',
+        'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
+        // Tooltip
+        'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-right-fade': 'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+        'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+        // Navigation menu
+        'enter-from-right': 'enter-from-right 0.25s ease',
+        'enter-from-left': 'enter-from-left 0.25s ease',
+        'exit-to-right': 'exit-to-right 0.25s ease',
+        'exit-to-left': 'exit-to-left 0.25s ease',
+        'scale-in-content': 'scale-in-content 0.2s ease',
+        'scale-out-content': 'scale-out-content 0.2s ease',
+        'fade-in': 'fade-in 0.2s ease',
+        'fade-out': 'fade-out 0.2s ease',
+        // Toast
+        'toast-hide': 'toast-hide 100ms ease-in forwards',
+        'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
+        // Shimmer
+        shimmer: 'shimmer-loop 2s infinite'
+      }
+    }
+  },
+  plugins: [tailwindcssLogical, tailwindcssForms, tailwindcssRadix()],
+  ...(env === 'development' && { mode: 'jit' }),
+  content: [resolve(root, 'node_modules/@dxos/react-ui/dist/**/*.mjs'), ...content]
+});

package/src/esbuild-plugin.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import autoprefixer from 'autoprefixer';
+import type { Plugin } from 'esbuild';
+import stylePlugin from 'esbuild-style-plugin';
+import { mkdir, cp } from 'node:fs/promises';
+import { resolve, relative, join, basename } from 'node:path';
+import tailwindcss from 'tailwindcss';
+
+import { tailwindConfig } from './config';
+
+export const themePlugins = (options: { content: string[]; outdir: string }): Plugin[] => {
+  return [
+    // TODO (thure): This really shouldn’t be this way, but after hours of searching for a reasonable way to do this I came up empty. The prior art I found was mainly this thread, though it’s only tangentially related: https://github.com/evanw/esbuild/issues/800#issuecomment-786151076
+    {
+      name: 'esbuild-plugin-dxos-ui-theme-resolvers',
+      setup: async (build) => {
+        const fontsDir = join(options.outdir, 'node_modules/@dxos/react-ui/fonts');
+        try {
+          await mkdir(fontsDir);
+        } catch (_e) {}
+        build.onResolve({ filter: /\.woff2$/ }, async (args) => {
+          const depPath = resolve(args.resolveDir, args.path);
+          const destPath = join(fontsDir, basename(args.path));
+          try {
+            await cp(depPath, destPath);
+          } catch (_e) {}
+          return { path: `./${relative(options.outdir, join('fonts', basename(args.path)))}`, external: true };
+        });
+      }
+    },
+    // TODO (thure): theme.css must be part of entryPoints in order to be processed with `stylePlugin`, but this should not be necessary. ESBuild would not load theme.css using stylePlugin if referenced within index.ts(x) as with the Vite plugin.
+    // TODO (thure): Note also that because it is an entryPoint, the developer has to reference the built theme.css from `index.html`, which is inflexible and possibly inconvenient.
+    stylePlugin({
+      postcss: {
+        plugins: [tailwindcss(tailwindConfig({ env: process.env.NODE_ENV, content: options.content })), autoprefixer]
+      }
+    })
+  ];
+};

package/src/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './components';
-export * from './styles';
-export * from './props';
 export * from './hooks';
+export * from './props';
+export * from './styles';
+export * from './util';

package/src/plugin.ts

@@ -2,16 +2,13 @@
 // Copyright 2022 DXOS.org
 //
 
-import tailwindcssForms from '@tailwindcss/forms';
 import autoprefixer from 'autoprefixer';
-import { resolve } from 'path';
+import { resolve } from 'node:path';
 import tailwindcss from 'tailwindcss';
-import tailwindcssLogical from 'tailwindcss-logical';
-import tailwindcssRadix from 'tailwindcss-radix';
-import tailwindColors from 'tailwindcss/colors';
-import defaultConfig from 'tailwindcss/stubs/defaultConfig.stub.js';
 import { Plugin } from 'vite';
 
+import { tailwindConfig } from './config';
+
 export interface VitePluginTailwindOptions {
   jit?: boolean;
   cssPath?: string;
@@ -19,7 +16,7 @@ export interface VitePluginTailwindOptions {
   content: string[];
 }
 
-export const themePlugin = (options: VitePluginTailwindOptions) => {
+export const themePlugin = (options: Pick<VitePluginTailwindOptions, 'content'>) => {
   const config: VitePluginTailwindOptions = {
     jit: true,
     cssPath: resolve(__dirname, './theme.css'),
@@ -33,239 +30,7 @@ export const themePlugin = (options: VitePluginTailwindOptions) => {
       return {
         css: {
           postcss: {
-            plugins: [
-              tailwindcss({
-                darkMode: 'class',
-                theme: {
-                  fontFamily: {
-                    body: ['Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
-                    display: ['Space GroteskVariable', 'Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
-                    mono: ['Fira CodeVariable', ...defaultConfig.theme.fontFamily.mono]
-                  },
-                  extend: {
-                    colors: {
-                      success: tailwindColors.emerald,
-                      warning: tailwindColors.amber,
-                      error: tailwindColors.red,
-                      info: tailwindColors.cyan,
-                      neutral: {
-                        // Key color #707076
-                        // Hue torsion 0.0º
-                        // C*CP black 0.80, C*CP white 0.88
-                        950: '#101012',
-                        900: '#1b1b1e',
-                        850: '#252529',
-                        800: '#303034',
-                        750: '#3b3b3f',
-                        700: '#46464b',
-                        650: '#525257',
-                        600: '#5e5e64',
-                        550: '#6a6a70',
-                        500: '#77767d',
-                        450: '#838389',
-                        400: '#909096',
-                        350: '#9d9da4',
-                        300: '#ababb1',
-                        250: '#b8b8be',
-                        200: '#c6c6cc',
-                        150: '#d4d4d9',
-                        100: '#e2e2e7',
-                        50: '#f1f1f4'
-                      },
-                      primary: {
-                        // Key color #00e0e0
-                        // Hue torsion -73.5º
-                        // C*CP black 1.0, C*CP white 1.0
-                        950: '#110c2a',
-                        900: '#101940',
-                        850: '#0b2453',
-                        800: '#003164',
-                        750: '#003e70',
-                        700: '#004b7c',
-                        650: '#005887',
-                        600: '#006693',
-                        550: '#00749e',
-                        500: '#0082a9',
-                        450: '#0091b3',
-                        400: '#00a0be',
-                        350: '#00afc7',
-                        300: '#00bed0',
-                        250: '#00ced8',
-                        200: '#00dedf',
-                        150: '#3cede4',
-                        100: '#69fae8',
-                        50: '#b9ffee'
-                      },
-                      transparent: 'transparent',
-                      current: 'currentColor',
-                      white: '#ffffff',
-                      black: '#000000'
-                    },
-                    fontSize: {
-                      // Base size 16px
-                      // Scale 1.125
-                      xs: ['0.79rem', { lineHeight: '1rem' }],
-                      sm: ['0.889rem', { lineHeight: '1.25rem' }],
-                      base: ['1rem', { lineHeight: '1.5rem' }],
-                      lg: ['1.125rem', { lineHeight: '1.75rem' }],
-                      xl: ['1.266rem', { lineHeight: '1.75rem' }],
-                      '2xl': ['1.424rem', { lineHeight: '2rem' }],
-                      '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
-                      '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
-                      '5xl': ['2.027rem', { lineHeight: '1' }],
-                      '6xl': ['2.281rem', { lineHeight: '1' }],
-                      '7xl': ['2.566rem', { lineHeight: '1' }],
-                      '8xl': ['2.887rem', { lineHeight: '1' }],
-                      '9xl': ['3.247rem', { lineHeight: '1' }]
-                    },
-                    outlineWidth: {
-                      3: '3px'
-                    },
-                    boxShadow: {
-                      slider: '0 0 0 5px rgba(0, 0, 0, 0.3)'
-                    },
-                    keyframes: {
-                      // Dropdown menu
-                      'scale-in': {
-                        '0%': { opacity: '0', transform: 'scale(0)' },
-                        '100%': { opacity: '1', transform: 'scale(1)' }
-                      },
-                      'slide-down': {
-                        '0%': { opacity: '0', transform: 'translateY(-10px)' },
-                        '100%': { opacity: '1', transform: 'translateY(0)' }
-                      },
-                      'slide-up': {
-                        '0%': { opacity: '0', transform: 'translateY(10px)' },
-                        '100%': { opacity: '1', transform: 'translateY(0)' }
-                      },
-                      // Tooltip
-                      'slide-up-fade': {
-                        '0%': { opacity: '0', transform: 'translateY(2px)' },
-                        '100%': { opacity: '1', transform: 'translateY(0)' }
-                      },
-                      'slide-right-fade': {
-                        '0%': { opacity: '0', transform: 'translateX(-2px)' },
-                        '100%': { opacity: '1', transform: 'translateX(0)' }
-                      },
-                      'slide-down-fade': {
-                        '0%': { opacity: '0', transform: 'translateY(-2px)' },
-                        '100%': { opacity: '1', transform: 'translateY(0)' }
-                      },
-                      'slide-left-fade': {
-                        '0%': { opacity: '0', transform: 'translateX(2px)' },
-                        '100%': { opacity: '1', transform: 'translateX(0)' }
-                      },
-                      // Navigation menu
-                      'enter-from-right': {
-                        '0%': { transform: 'translateX(200px)', opacity: '0' },
-                        '100%': { transform: 'translateX(0)', opacity: '1' }
-                      },
-                      'enter-from-left': {
-                        '0%': { transform: 'translateX(-200px)', opacity: '0' },
-                        '100%': { transform: 'translateX(0)', opacity: '1' }
-                      },
-                      'exit-to-right': {
-                        '0%': { transform: 'translateX(0)', opacity: '1' },
-                        '100%': { transform: 'translateX(200px)', opacity: '0' }
-                      },
-                      'exit-to-left': {
-                        '0%': { transform: 'translateX(0)', opacity: '1' },
-                        '100%': {
-                          transform: 'translateX(-200px)',
-                          opacity: '0'
-                        }
-                      },
-                      'scale-in-content': {
-                        '0%': {
-                          transform: 'rotateX(-30deg) scale(0.9)',
-                          opacity: '0'
-                        },
-                        '100%': {
-                          transform: 'rotateX(0deg) scale(1)',
-                          opacity: '1'
-                        }
-                      },
-                      'scale-out-content': {
-                        '0%': {
-                          transform: 'rotateX(0deg) scale(1)',
-                          opacity: '1'
-                        },
-                        '100%': {
-                          transform: 'rotateX(-10deg) scale(0.95)',
-                          opacity: '0'
-                        }
-                      },
-                      'fade-in': {
-                        '0%': { opacity: '0' },
-                        '100%': { opacity: '1' }
-                      },
-                      'fade-out': {
-                        '0%': { opacity: '1' },
-                        '100%': { opacity: '0' }
-                      },
-                      // Toast
-                      'toast-hide': {
-                        '0%': { opacity: '1' },
-                        '100%': { opacity: '0' }
-                      },
-                      'toast-slide-in-right': {
-                        '0%': { transform: 'translateX(calc(100% + 1rem))' },
-                        '100%': { transform: 'translateX(0)' }
-                      },
-                      'toast-slide-in-bottom': {
-                        '0%': { transform: 'translateY(calc(100% + 1rem))' },
-                        '100%': { transform: 'translateY(0)' }
-                      },
-                      'toast-swipe-out': {
-                        '0%': {
-                          transform: 'translateX(var(--radix-toast-swipe-end-x))'
-                        },
-                        '100%': {
-                          transform: 'translateX(calc(100% + 1rem))'
-                        }
-                      },
-                      // Shimmer
-                      'shimmer-loop': {
-                        '100%': {
-                          transform: 'translateX(100%)'
-                        }
-                      }
-                    },
-                    animation: {
-                      // Dropdown menu
-                      'scale-in': 'scale-in 0.2s ease-in-out',
-                      'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-                      'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-                      // Tooltip
-                      'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-                      'slide-right-fade': 'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-                      'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-                      'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-                      // Navigation menu
-                      'enter-from-right': 'enter-from-right 0.25s ease',
-                      'enter-from-left': 'enter-from-left 0.25s ease',
-                      'exit-to-right': 'exit-to-right 0.25s ease',
-                      'exit-to-left': 'exit-to-left 0.25s ease',
-                      'scale-in-content': 'scale-in-content 0.2s ease',
-                      'scale-out-content': 'scale-out-content 0.2s ease',
-                      'fade-in': 'fade-in 0.2s ease',
-                      'fade-out': 'fade-out 0.2s ease',
-                      // Toast
-                      'toast-hide': 'toast-hide 100ms ease-in forwards',
-                      'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-                      'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-                      'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
-                      // Shimmer
-                      shimmer: 'shimmer-loop 2s infinite'
-                    }
-                  }
-                },
-                plugins: [tailwindcssLogical, tailwindcssForms, tailwindcssRadix()],
-                ...(env.mode === 'development' && { mode: 'jit' }),
-                content: [resolve(root || './', 'node_modules/@dxos/react-ui/dist/**/*.js'), ...config.content]
-              }),
-              autoprefixer
-            ]
+            plugins: [tailwindcss(tailwindConfig({ env: env.mode, root, content: options.content })), autoprefixer]
           }
         }
       };

package/src/styles/active.ts

@@ -2,9 +2,9 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
+import { mx } from '../util';
 
-export const defaultActive = cx(
+export const defaultActive = mx(
   'radix-state-open:outline-2 radix-state-open:outline-offset-1 radix-state-open:outline-primary-300 radix-state-open:outline-offset-transparent dark:radix-state-open:outline-primary-400 dark:radix-state-open:outline-offset-transparent',
   'radix-state-on:outline-2 radix-state-on:outline-offset-1 radix-state-on:outline-primary-300 radix-state-on:outline-offset-transparent dark:radix-state-on:outline-primary-400 dark:radix-state-on:outline-offset-transparent',
   'radix-state-instant-open:outline-2 radix-state-instant-open:outline-offset-1 radix-state-instant-open:outline-primary-300 radix-state-instant-open:outline-offset-transparent dark:radix-state-instant-open:outline-primary-400 dark:radix-state-instant-open:outline-offset-transparent'

package/src/styles/group.ts

@@ -2,9 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
-
 import { Elevation } from '../props';
+import { mx } from '../util';
 
 const elevationClassNameMap = new Map<number, string>([
   [0, 'shadow-none'],
@@ -25,7 +24,7 @@ export const defaultGroup = ({
   rounding?: string;
   spacing?: string;
 }) => {
-  return cx(
+  return mx(
     rounding ?? 'rounded-lg',
     spacing ?? 'p-4',
     elevation === 0

package/src/styles/input.ts

@@ -2,9 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
-
 import { MessageValence } from '../props';
+import { mx } from '../util';
 import { defaultDisabled } from './disabled';
 import { defaultFocus, staticFocus } from './focus';
 import { defaultHover } from './hover';
@@ -12,53 +11,35 @@ import { defaultPlaceholder } from './text';
 import { valenceInputBorder } from './valence';
 
 export const defaultInput = ({
-  borders,
-  typography,
-  rounding,
   disabled,
   validationValence
 }: {
-  borders?: string;
-  typography?: string;
-  rounding?: string;
   disabled?: boolean;
   validationValence?: MessageValence;
 }) => {
-  return cx(
+  return mx(
+    'text-base border rounded bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white',
     defaultFocus,
     defaultPlaceholder,
     defaultHover({ disabled }),
-    'bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white',
-    typography ?? 'text-base',
-    borders ?? 'border',
-    borders ?? valenceInputBorder(validationValence),
-    rounding ?? 'rounded',
+    valenceInputBorder(validationValence),
     disabled && defaultDisabled
   );
 };
 
 export const staticInput = ({
-  borders,
-  typography,
-  rounding,
   disabled,
   focused,
   validationValence
 }: {
-  borders?: string;
-  typography?: string;
-  rounding?: string;
   disabled?: boolean;
   focused?: boolean;
   validationValence?: MessageValence;
 }) => {
-  return cx(
+  return mx(
     defaultPlaceholder,
-    'bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white',
-    typography ?? 'text-base',
-    borders ?? 'border',
-    borders ?? valenceInputBorder(validationValence),
-    rounding ?? 'rounded',
+    'text-base border rounded bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white',
+    valenceInputBorder(validationValence),
     disabled && defaultDisabled,
     focused && staticFocus
   );