@remix-run/ui 0.2.0 → 0.4.0

package/src/theme/contract.ts

@@ -1,215 +0,0 @@
-import type { css, Handle, MixinDescriptor, RemixElement } from '@remix-run/ui'
-
-export interface ThemeVariableTree {
-  [key: string]: string | ThemeVariableTree
-}
-
-type ThemeVariableGroup<key extends string> = Readonly<Record<key, string>>
-type ThemeActionVariableGroup = ThemeVariableGroup<
-  'background' | 'backgroundHover' | 'backgroundActive' | 'foreground' | 'border'
->
-
-type ThemeVariableNames = {
-  readonly space: ThemeVariableGroup<'none' | 'px' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
-  readonly radius: ThemeVariableGroup<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>
-  readonly fontFamily: ThemeVariableGroup<'sans' | 'mono'>
-  readonly fontSize: ThemeVariableGroup<'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
-  readonly lineHeight: ThemeVariableGroup<'tight' | 'normal' | 'relaxed'>
-  readonly letterSpacing: ThemeVariableGroup<'tight' | 'normal' | 'meta' | 'wide'>
-  readonly fontWeight: ThemeVariableGroup<'normal' | 'medium' | 'semibold' | 'bold'>
-  readonly control: {
-    readonly height: ThemeVariableGroup<'sm' | 'md' | 'lg'>
-  }
-  readonly surface: ThemeVariableGroup<'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4'>
-  readonly shadow: ThemeVariableGroup<'xs' | 'sm' | 'md' | 'lg' | 'xl'>
-  readonly colors: {
-    readonly text: ThemeVariableGroup<'primary' | 'secondary' | 'muted' | 'link'>
-    readonly border: ThemeVariableGroup<'subtle' | 'default' | 'strong'>
-    readonly focus: ThemeVariableGroup<'ring'>
-    readonly overlay: ThemeVariableGroup<'scrim'>
-    readonly action: {
-      readonly primary: ThemeActionVariableGroup
-      readonly secondary: ThemeActionVariableGroup
-      readonly danger: ThemeActionVariableGroup
-    }
-  }
-}
-
-const themeVariableNamesSource: 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',
-      },
-    },
-  },
-} satisfies ThemeVariableTree
-
-export const themeVariableNames: ThemeVariableNames = themeVariableNamesSource
-
-type MapLeaves<source, leaf> = source extends string
-  ? leaf
-  : {
-      [key in keyof source]: MapLeaves<source[key], leaf>
-    }
-
-export type ThemeValue = string | number
-export type ThemeContract = MapLeaves<ThemeVariableNames, string>
-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: ThemeContract = 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>
-
-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

@@ -1,59 +0,0 @@
-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: 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

@@ -1,308 +0,0 @@
-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

@@ -1,123 +0,0 @@
-import { createGlyphSheet } from '../../../components/glyph/glyph.tsx'
-import { createTheme } from '../../runtime.ts'
-import type { GlyphSheetComponent } from '../../../components/glyph/glyph.tsx'
-import type { ThemeComponent } from '../../contract.ts'
-
-import { glyphValues } from './glyphs.tsx'
-
-export const RMX_01: ThemeComponent = 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: GlyphSheetComponent = createGlyphSheet(glyphValues)