@remix-run/ui 0.0.0 → 0.1.0

package/src/theme/contract.ts

@@ -0,0 +1,183 @@
+import type { css, Handle, MixinDescriptor, RemixElement } from '@remix-run/ui'
+
+export interface ThemeVariableTree {
+  [key: string]: string | ThemeVariableTree
+}
+
+const themeVariableNames = {
+  space: {
+    none: '--rmx-space-none',
+    px: '--rmx-space-px',
+    xs: '--rmx-space-xs',
+    sm: '--rmx-space-sm',
+    md: '--rmx-space-md',
+    lg: '--rmx-space-lg',
+    xl: '--rmx-space-xl',
+    xxl: '--rmx-space-xxl',
+  },
+  radius: {
+    none: '--rmx-radius-none',
+    sm: '--rmx-radius-sm',
+    md: '--rmx-radius-md',
+    lg: '--rmx-radius-lg',
+    xl: '--rmx-radius-xl',
+    full: '--rmx-radius-full',
+  },
+  fontFamily: {
+    sans: '--rmx-font-family-sans',
+    mono: '--rmx-font-family-mono',
+  },
+  fontSize: {
+    xxxs: '--rmx-font-size-xxxs',
+    xxs: '--rmx-font-size-xxs',
+    xs: '--rmx-font-size-xs',
+    sm: '--rmx-font-size-sm',
+    md: '--rmx-font-size-md',
+    lg: '--rmx-font-size-lg',
+    xl: '--rmx-font-size-xl',
+    xxl: '--rmx-font-size-xxl',
+  },
+  lineHeight: {
+    tight: '--rmx-line-height-tight',
+    normal: '--rmx-line-height-normal',
+    relaxed: '--rmx-line-height-relaxed',
+  },
+  letterSpacing: {
+    tight: '--rmx-letter-spacing-tight',
+    normal: '--rmx-letter-spacing-normal',
+    meta: '--rmx-letter-spacing-meta',
+    wide: '--rmx-letter-spacing-wide',
+  },
+  fontWeight: {
+    normal: '--rmx-font-weight-normal',
+    medium: '--rmx-font-weight-medium',
+    semibold: '--rmx-font-weight-semibold',
+    bold: '--rmx-font-weight-bold',
+  },
+  control: {
+    height: {
+      sm: '--rmx-control-height-sm',
+      md: '--rmx-control-height-md',
+      lg: '--rmx-control-height-lg',
+    },
+  },
+  surface: {
+    lvl0: '--rmx-surface-lvl0',
+    lvl1: '--rmx-surface-lvl1',
+    lvl2: '--rmx-surface-lvl2',
+    lvl3: '--rmx-surface-lvl3',
+    lvl4: '--rmx-surface-lvl4',
+  },
+  shadow: {
+    xs: '--rmx-shadow-xs',
+    sm: '--rmx-shadow-sm',
+    md: '--rmx-shadow-md',
+    lg: '--rmx-shadow-lg',
+    xl: '--rmx-shadow-xl',
+  },
+  colors: {
+    text: {
+      primary: '--rmx-color-text-primary',
+      secondary: '--rmx-color-text-secondary',
+      muted: '--rmx-color-text-muted',
+      link: '--rmx-color-text-link',
+    },
+    border: {
+      subtle: '--rmx-color-border-subtle',
+      default: '--rmx-color-border-default',
+      strong: '--rmx-color-border-strong',
+    },
+    focus: {
+      ring: '--rmx-color-focus-ring',
+    },
+    overlay: {
+      scrim: '--rmx-color-overlay-scrim',
+    },
+    action: {
+      primary: {
+        background: '--rmx-color-action-primary-background',
+        backgroundHover: '--rmx-color-action-primary-background-hover',
+        backgroundActive: '--rmx-color-action-primary-background-active',
+        foreground: '--rmx-color-action-primary-foreground',
+        border: '--rmx-color-action-primary-border',
+      },
+      secondary: {
+        background: '--rmx-color-action-secondary-background',
+        backgroundHover: '--rmx-color-action-secondary-background-hover',
+        backgroundActive: '--rmx-color-action-secondary-background-active',
+        foreground: '--rmx-color-action-secondary-foreground',
+        border: '--rmx-color-action-secondary-border',
+      },
+      danger: {
+        background: '--rmx-color-action-danger-background',
+        backgroundHover: '--rmx-color-action-danger-background-hover',
+        backgroundActive: '--rmx-color-action-danger-background-active',
+        foreground: '--rmx-color-action-danger-foreground',
+        border: '--rmx-color-action-danger-border',
+      },
+    },
+  },
+} as const satisfies ThemeVariableTree
+
+type MapLeaves<source, leaf> = source extends string
+  ? leaf
+  : {
+      [key in keyof source]: MapLeaves<source[key], leaf>
+    }
+
+export type ThemeValue = string | number
+export type ThemeValues = MapLeaves<typeof themeVariableNames, ThemeValue>
+export type ThemeVars = Readonly<Record<string, string>>
+export type CreateThemeOptions = {
+  selector?: string
+  reset?: boolean
+}
+export type ThemeStyleProps = {
+  nonce?: string
+}
+
+type ThemeRenderer = (handle: Handle<ThemeStyleProps>) => () => RemixElement
+
+export type ThemeComponent = ThemeRenderer & {
+  Style: ThemeRenderer
+  cssText: string
+  selector: string
+  values: ThemeValues
+  vars: ThemeVars
+}
+
+export const theme = createThemeContract(themeVariableNames)
+
+export type ThemeUtility = ReturnType<typeof css>
+
+type ThemeMixLeaf = MixinDescriptor<any, any, any>
+type PreviousThemeMixDepth = [0, 0, 1, 2, 3, 4]
+type NestedThemeMix<value, depth extends number = 4> = depth extends 0
+  ? value | ReadonlyArray<value>
+  : value | ReadonlyArray<NestedThemeMix<value, PreviousThemeMixDepth[depth]>>
+
+export type ThemeMix = NestedThemeMix<ThemeMixLeaf>
+
+export { themeVariableNames }
+
+function createThemeContract<tree extends ThemeVariableTree>(tree: tree): MapLeaves<tree, string> {
+  return mapTreeLeaves(tree, (variableName) => `var(${variableName})`) as MapLeaves<tree, string>
+}
+
+function mapTreeLeaves(
+  tree: ThemeVariableTree,
+  mapLeaf: (value: string) => string,
+): ThemeVariableTree {
+  let output: ThemeVariableTree = {}
+
+  for (let [key, value] of Object.entries(tree)) {
+    if (typeof value === 'string') {
+      output[key] = mapLeaf(value)
+      continue
+    }
+
+    output[key] = mapTreeLeaves(value, mapLeaf)
+  }
+
+  return output
+}

package/src/theme/glyph-contract.ts

@@ -0,0 +1,57 @@
+import type { RemixElement } from '@remix-run/ui'
+
+export const glyphNames = [
+  'add',
+  'alert',
+  'check',
+  'chevronDown',
+  'chevronVertical',
+  'chevronUp',
+  'chevronRight',
+  'close',
+  'copy',
+  'edit',
+  'expand',
+  'info',
+  'menu',
+  'open',
+  'search',
+  'spinner',
+  'trash',
+] as const
+
+export type GlyphName = (typeof glyphNames)[number]
+
+export type GlyphSymbol = RemixElement
+
+export type GlyphValues = {
+  readonly [key in GlyphName]: GlyphSymbol
+}
+
+export type GlyphContract = Readonly<Record<GlyphName, { id: string }>>
+
+const DEFAULT_GLYPH_ID_PREFIX = 'rmx-glyph'
+
+export const glyphContract = Object.freeze(createGlyphContract(DEFAULT_GLYPH_ID_PREFIX))
+
+function createGlyphIds(idPrefix: string): Record<GlyphName, string> {
+  return Object.fromEntries(glyphNames.map((name) => [name, `${idPrefix}-${name}`])) as Record<
+    GlyphName,
+    string
+  >
+}
+
+function createGlyphContract(idPrefix: string): GlyphContract {
+  let ids = createGlyphIds(idPrefix)
+
+  return Object.freeze(
+    Object.fromEntries(
+      glyphNames.map((name) => [
+        name,
+        {
+          id: ids[name],
+        },
+      ]),
+    ) as GlyphContract,
+  )
+}

package/src/theme/presets/rmx-01/glyphs.tsx

@@ -0,0 +1,308 @@
+import { createElement } from '@remix-run/ui'
+import type { RemixNode } from '@remix-run/ui'
+
+import type { GlyphValues } from '../../glyph-contract.ts'
+
+const defaultViewBox = '0 0 16 16'
+
+function symbol(...content: RemixNode[]) {
+  return createElement('symbol', { viewBox: defaultViewBox }, ...content)
+}
+
+export const glyphValues: GlyphValues = {
+  add: symbol(
+    createElement('path', {
+      d: 'M8 3.25v9.5M3.25 8h9.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  alert: symbol(
+    createElement('path', {
+      d: 'M8 2.5 13.75 12.5H2.25Z',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M8 5.75v3.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('circle', {
+      cx: '8',
+      cy: '11.25',
+      fill: 'currentColor',
+      r: '0.75',
+    }),
+  ),
+  check: symbol(
+    createElement('path', {
+      d: 'm3.5 8.25 2.75 2.75L12.5 4.75',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  chevronDown: symbol(
+    createElement('path', {
+      d: 'm3.75 6.25 4.25 4 4.25-4',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  chevronVertical: symbol(
+    createElement('path', {
+      d: 'm3.75 6.5 4.25-4 4.25 4',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm3.75 9.5 4.25 4 4.25-4',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  chevronUp: symbol(
+    createElement('path', {
+      d: 'm3.75 9.75 4.25-4 4.25 4',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  chevronRight: symbol(
+    createElement('path', {
+      d: 'm6 4 4 4-4 4',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  close: symbol(
+    createElement('path', {
+      d: 'm4.5 4.5 7 7m0-7-7 7',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  copy: symbol(
+    createElement('rect', {
+      x: '5.25',
+      y: '3.25',
+      width: '7.5',
+      height: '7.5',
+      rx: '1.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M10.75 12.75h-5.5a2 2 0 0 1-2-2v-5.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  edit: symbol(
+    createElement('path', {
+      d: 'm10.75 3.75 1.5 1.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm4 12 2.5-.5 5.75-5.75a1.06 1.06 0 0 0 0-1.5l-.5-.5a1.06 1.06 0 0 0-1.5 0L4.5 9.5 4 12Z',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  expand: symbol(
+    createElement('path', {
+      d: 'M9.25 3.5h3.25v3.25',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm12.5 3.5-5.5 5.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M6.75 12.5H3.5V9.25',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm3.5 12.5 5.5-5.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  info: symbol(
+    createElement('circle', {
+      cx: '8',
+      cy: '8',
+      fill: 'none',
+      r: '5.75',
+      stroke: 'currentColor',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M8 7.25v3',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('circle', {
+      cx: '8',
+      cy: '5',
+      fill: 'currentColor',
+      r: '0.75',
+    }),
+  ),
+  menu: symbol(
+    createElement('path', {
+      d: 'M3 4.75h10M3 8h10M3 11.25h10',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  open: symbol(
+    createElement('path', {
+      d: 'M6.25 4H4.5A1.5 1.5 0 0 0 3 5.5v6A1.5 1.5 0 0 0 4.5 13h6A1.5 1.5 0 0 0 12 11.5V9.75',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M8 3h5v5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm13 3-6.25 6.25',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  search: symbol(
+    createElement('circle', {
+      cx: '7',
+      cy: '7',
+      fill: 'none',
+      r: '4.25',
+      stroke: 'currentColor',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm10.25 10.25 3 3',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  spinner: symbol(
+    createElement('circle', {
+      cx: '8',
+      cy: '8',
+      fill: 'none',
+      opacity: '0.24',
+      r: '5.25',
+      stroke: 'currentColor',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M8 2.75a5.25 5.25 0 0 1 5.25 5.25',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+  trash: symbol(
+    createElement('path', {
+      d: 'M3.75 4.75h8.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M6.25 4.75V4a1 1 0 0 1 1-1h1.5a1 1 0 0 1 1 1v.75',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'm5 6.25.45 5.1A1.5 1.5 0 0 0 6.94 12.75h2.12a1.5 1.5 0 0 0 1.49-1.4L11 6.25',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeWidth: '1.5',
+    }),
+    createElement('path', {
+      d: 'M7 7.25v3.5M9 7.25v3.5',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeLinecap: 'round',
+      strokeWidth: '1.5',
+    }),
+  ),
+}

package/src/theme/presets/rmx-01/index.ts

@@ -0,0 +1,121 @@
+import { createGlyphSheet } from '../../../components/glyph/glyph.tsx'
+import { createTheme } from '../../runtime.ts'
+
+import { glyphValues } from './glyphs.tsx'
+
+export const RMX_01 = createTheme({
+  space: {
+    none: '0px',
+    px: '1px',
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    xxl: '32px',
+  },
+  radius: {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    full: '9999px',
+  },
+  fontSize: {
+    xxxs: '10px',
+    xxs: '11px',
+    xs: '12px',
+    sm: '13px',
+    md: '14px',
+    lg: '16px',
+    xl: '20px',
+    xxl: '28px',
+  },
+  fontFamily: {
+    sans: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  },
+  lineHeight: {
+    tight: '1.25',
+    normal: '1.45',
+    relaxed: '1.65',
+  },
+  letterSpacing: {
+    tight: '-0.03em',
+    normal: '0',
+    meta: '0.06em',
+    wide: '0.08em',
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  control: {
+    height: {
+      sm: '28px',
+      md: '32px',
+      lg: '36px',
+    },
+  },
+  surface: {
+    lvl0: '#ffffff',
+    lvl1: '#f8f8f8',
+    lvl2: '#f5f5f5',
+    lvl3: '#f3f3f3',
+    lvl4: '#efefef',
+  },
+  shadow: {
+    xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+    sm: '0 1px 2px rgb(0 0 0 / 0.07)',
+    md: '0 6px 18px rgb(0 0 0 / 0.08)',
+    lg: '0 16px 34px rgb(0 0 0 / 0.10)',
+    xl: '0 24px 52px rgb(0 0 0 / 0.14)',
+  },
+  colors: {
+    text: {
+      primary: '#151515',
+      secondary: '#4f4f4f',
+      muted: '#6d6d6d',
+      link: '#1A72FF',
+    },
+    border: {
+      subtle: '#e7e7e7',
+      default: '#d1d1d1',
+      strong: '#b0b0b0',
+    },
+    focus: {
+      ring: '#1A72FF',
+    },
+    overlay: {
+      scrim: 'rgb(0 0 0 / 0.28)',
+    },
+    action: {
+      primary: {
+        background: '#1A72FF',
+        backgroundHover: '#1463e0',
+        backgroundActive: '#0f55c9',
+        foreground: 'rgb(255 255 255 / 0.92)',
+        border: '#1A72FF',
+      },
+      secondary: {
+        background: '#ffffff',
+        backgroundHover: '#fbfbfb',
+        backgroundActive: '#f3f3f3',
+        foreground: '#202020',
+        border: '#d1d1d1',
+      },
+      danger: {
+        background: '#FF3000',
+        backgroundHover: '#e12b00',
+        backgroundActive: '#c52600',
+        foreground: 'rgb(255 255 255 / 0.92)',
+        border: '#FF3000',
+      },
+    },
+  },
+})
+
+export const RMX_01_GLYPHS = createGlyphSheet(glyphValues)