@becket-ui/tokens 0.1.0

package/styled-system/types/system-types.d.ts

@@ -0,0 +1,151 @@
+/* eslint-disable */
+import type {  ConditionalValue, Nested  } from './conditions';
+import type {  AtRule, Globals, PropertiesFallback  } from './csstype';
+import type {  SystemProperties, CssVarProperties  } from './style-props';
+
+type String = string & {}
+type Number = number & {}
+
+export type Pretty<T> = { [K in keyof T]: T[K] } & {}
+
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
+
+export type DistributiveUnion<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]
+} & DistributiveOmit<U, keyof T>
+
+export type Assign<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] : T[K]
+} & U
+
+/* -----------------------------------------------------------------------------
+ * Native css properties
+ * -----------------------------------------------------------------------------*/
+
+type CornerShapeValue = 'round' | 'square' | 'bevel' | 'scoop' | 'notch' | 'squircle' | `superellipse(${number})`
+
+export interface ModernCssProperties {
+  /**
+   * Controls whether the entire element should be draggable instead of its contents.
+   */
+  WebkitUserDrag?: Globals | 'auto' | 'element' | 'none'
+
+  /**
+   * Specifies whether an element can be used to drag the entire app window (Electron).
+   */
+  WebkitAppRegion?: Globals | 'drag' | 'no-drag'
+
+  /**
+   * Sets the horizontal spacing between table borders.
+   */
+  WebkitBorderHorizontalSpacing?: Globals | String | Number
+
+  /**
+   * Sets the vertical spacing between table borders.
+   */
+  WebkitBorderVerticalSpacing?: Globals | String | Number
+
+  /**
+   * Controls the display of text content for security purposes (e.g., password fields).
+   */
+  WebkitTextSecurity?: Globals | 'none' | 'circle' | 'disc' | 'square'
+
+  /**
+   * Specifies the shape of a box's corners within the area defined by the border-radius property.
+   * @experimental
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape
+   */
+  cornerShape?:
+    | Globals
+    | CornerShapeValue
+    | `${CornerShapeValue} ${CornerShapeValue}`
+    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`
+    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`
+    | String
+}
+
+export type CssProperty = keyof PropertiesFallback
+
+export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}
+
+export interface CssKeyframes {
+  [name: string]: {
+    [time: string]: CssProperties
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Conditional css properties
+ * -----------------------------------------------------------------------------*/
+
+interface GenericProperties {
+  [key: string]: ConditionalValue<String | Number | boolean>
+}
+
+/* -----------------------------------------------------------------------------
+ * Native css props
+ * -----------------------------------------------------------------------------*/
+
+export type NestedCssProperties = Nested<CssProperties>
+
+export type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>
+
+export interface GlobalStyleObject {
+  [selector: string]: SystemStyleObject
+}
+export interface ExtendableGlobalStyleObject {
+  [selector: string]: SystemStyleObject | undefined
+  extend?: GlobalStyleObject | undefined
+}
+
+/* -----------------------------------------------------------------------------
+ * Composition (text styles, layer styles)
+ * -----------------------------------------------------------------------------*/
+
+type FilterStyleObject<P extends string> = {
+  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown
+}
+
+export type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>
+
+/* -----------------------------------------------------------------------------
+ * Font face
+ * -----------------------------------------------------------------------------*/
+
+export type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>
+
+export type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>
+
+export interface GlobalFontface {
+  [name: string]: FontfaceRule | FontfaceRule[]
+}
+
+export interface ExtendableGlobalFontface {
+  [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined
+  extend?: GlobalFontface | undefined
+}
+
+/* -----------------------------------------------------------------------------
+ * Jsx style props
+ * -----------------------------------------------------------------------------*/
+interface WithCss {
+  css?: SystemStyleObject | SystemStyleObject[]
+}
+
+export type JsxStyleProps = SystemStyleObject & WithCss
+
+export interface PatchedHTMLProps {
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+  htmlContent?: string
+}
+
+export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
+
+type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps
+
+export type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
+  WithHTMLProps<T>,
+  P
+>

package/theme/index.d.ts

@@ -0,0 +1,56 @@
+export type BecketColorValue = string | { dark?: string; light?: string };
+
+export type BecketThemeColors = {
+  primary?: string;
+  secondary?: string;
+  tertiary?: string;
+  primaryHover?: string;
+  background?: BecketColorValue;
+  text?: BecketColorValue;
+  muted?: BecketColorValue;
+  border?: BecketColorValue;
+  /** @deprecated Prefer `background: { light }`. */
+  lightBackground?: string;
+  /** @deprecated Prefer `text: { light }`. */
+  lightText?: string;
+  danger?: string;
+  warning?: string;
+  success?: string;
+  neutral?: Partial<
+    Record<'50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900', string>
+  >;
+};
+
+export type BecketThemeRadii = Partial<
+  Record<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full', string>
+>;
+
+export type BecketThemeFontSizes = Partial<
+  Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl', string>
+>;
+
+export type BecketThemeSpacing = Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>>;
+
+export type BecketDensityBox = { px?: string; py?: string };
+
+export type BecketThemeDensity = {
+  button?: Partial<Record<'sm' | 'md', BecketDensityBox>>;
+  field?: Partial<Record<'sm' | 'md' | 'lg', BecketDensityBox>>;
+  tag?: Partial<Record<'sm' | 'md' | 'lg', BecketDensityBox>>;
+};
+
+export type BecketTheme = {
+  colors?: BecketThemeColors;
+  radii?: BecketThemeRadii;
+  fontSizes?: BecketThemeFontSizes;
+  spacing?: BecketThemeSpacing;
+  sizes?: { field?: string };
+  fonts?: { sans?: string; mono?: string };
+  density?: BecketThemeDensity;
+};
+
+/** Unlayered `:root` / light-theme CSS. Import or inject after `@becket-ui/tokens/index.css`. */
+export function defineBecketTheme(config?: BecketTheme): string;
+
+export const BECKET_PUBLIC_COLOR_KEYS: readonly string[];
+export const BECKET_PUBLIC_NEUTRAL_STEPS: readonly string[];

package/theme/index.mjs

@@ -0,0 +1,168 @@
+/** Public CSS-variable theming. No Panda, no theme provider. */
+
+const PREFIX = '--beckui--';
+
+const COLOR_FLAT = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'primaryHover',
+  'lightBackground',
+  'lightText',
+  'danger',
+  'warning',
+  'success',
+];
+
+const COLOR_THEMED = ['background', 'text', 'muted', 'border'];
+const NEUTRAL_STEPS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
+const RADII = ['none', 'sm', 'md', 'lg', 'xl', 'full'];
+const FONT_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
+const SPACING = ['xs', 'sm', 'md', 'lg', 'xl'];
+const FONTS = ['sans', 'mono'];
+const DENSITY_SIZES = {
+  button: ['sm', 'md'],
+  field: ['sm', 'md', 'lg'],
+  tag: ['sm', 'md', 'lg'],
+};
+
+function kebab(value) {
+  return value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+}
+
+function cssVar(parts) {
+  return `${PREFIX}${parts.map(kebab).join('-')}`;
+}
+
+function assertAllowedKeys(object, allowed, label) {
+  for (const key of Object.keys(object)) {
+    if (!allowed.includes(key)) {
+      throw new Error(`Unknown Becket theme key "${label}.${key}"`);
+    }
+  }
+}
+
+function pushDecl(decls, name, value) {
+  if (value == null || value === '') return;
+  decls.push(`  ${name}: ${value};`);
+}
+
+function pushThemed(rootDecls, lightDecls, name, value) {
+  if (value == null || value === '') return;
+  if (typeof value === 'object') {
+    if (value.dark) pushDecl(rootDecls, name, value.dark);
+    if (value.light) pushDecl(lightDecls, name, value.light);
+    return;
+  }
+  pushDecl(rootDecls, name, value);
+}
+
+function colorDecls(colors, rootDecls, lightDecls) {
+  assertAllowedKeys(colors, [...COLOR_FLAT, ...COLOR_THEMED, 'neutral'], 'colors');
+
+  for (const key of COLOR_FLAT) {
+    const value = colors[key];
+    if (value == null) continue;
+    if (typeof value === 'object') {
+      throw new Error(`colors.${key} must be a CSS color string`);
+    }
+    pushDecl(rootDecls, cssVar(['colors', key]), value);
+  }
+
+  for (const key of COLOR_THEMED) {
+    pushThemed(rootDecls, lightDecls, cssVar(['colors', key]), colors[key]);
+  }
+
+  if (colors.neutral) {
+    assertAllowedKeys(colors.neutral, NEUTRAL_STEPS, 'colors.neutral');
+    for (const step of NEUTRAL_STEPS) {
+      pushDecl(rootDecls, cssVar(['colors', 'neutral', step]), colors.neutral[step]);
+    }
+  }
+}
+
+function densityDecls(density, decls) {
+  assertAllowedKeys(density, ['button', 'field', 'tag'], 'density');
+  for (const component of Object.keys(DENSITY_SIZES)) {
+    const sizes = density[component];
+    if (!sizes) continue;
+    const allowed = DENSITY_SIZES[component];
+    assertAllowedKeys(sizes, allowed, `density.${component}`);
+    for (const size of allowed) {
+      const box = sizes[size];
+      if (!box) continue;
+      assertAllowedKeys(box, ['px', 'py'], `density.${component}.${size}`);
+      if (box.px) decls.push(`  --beckui-${component}-px-${size}: ${box.px};`);
+      if (box.py) decls.push(`  --beckui-${component}-py-${size}: ${box.py};`);
+    }
+  }
+}
+
+function sheet(selector, decls) {
+  if (!decls.length) return '';
+  return `${selector} {\n${decls.join('\n')}\n}\n`;
+}
+
+/**
+ * Emit unlayered `:root` / `html[data-theme='light']` overrides. Import or
+ * inject **after** `@becket-ui/tokens/index.css` so these win over `@layer tokens`.
+ *
+ * @param {import('./index.d.ts').BecketTheme} config
+ * @returns {string}
+ */
+export function defineBecketTheme(config = {}) {
+  assertAllowedKeys(
+    config,
+    ['colors', 'radii', 'fontSizes', 'spacing', 'sizes', 'fonts', 'density'],
+    'theme',
+  );
+
+  const rootDecls = [];
+  const lightDecls = [];
+
+  if (config.colors) colorDecls(config.colors, rootDecls, lightDecls);
+
+  if (config.radii) {
+    assertAllowedKeys(config.radii, RADII, 'radii');
+    for (const key of RADII) {
+      pushDecl(rootDecls, cssVar(['radii', key]), config.radii[key]);
+    }
+  }
+
+  if (config.fontSizes) {
+    assertAllowedKeys(config.fontSizes, FONT_SIZES, 'fontSizes');
+    for (const key of FONT_SIZES) {
+      pushDecl(rootDecls, cssVar(['font-sizes', key]), config.fontSizes[key]);
+    }
+  }
+
+  if (config.spacing) {
+    assertAllowedKeys(config.spacing, SPACING, 'spacing');
+    for (const key of SPACING) {
+      pushDecl(rootDecls, cssVar(['spacing', key]), config.spacing[key]);
+    }
+  }
+
+  if (config.sizes) {
+    assertAllowedKeys(config.sizes, ['field'], 'sizes');
+    pushDecl(rootDecls, cssVar(['sizes', 'field']), config.sizes.field);
+  }
+
+  if (config.fonts) {
+    assertAllowedKeys(config.fonts, FONTS, 'fonts');
+    for (const key of FONTS) {
+      pushDecl(rootDecls, cssVar(['fonts', key]), config.fonts[key]);
+    }
+  }
+
+  if (config.density) densityDecls(config.density, rootDecls);
+
+  const css = `${sheet(':root', rootDecls)}${sheet("html[data-theme='light']", lightDecls)}`;
+  if (!css) {
+    return '/* defineBecketTheme: empty config, Becket defaults unchanged */\n';
+  }
+  return css;
+}
+
+export const BECKET_PUBLIC_COLOR_KEYS = [...COLOR_FLAT, ...COLOR_THEMED];
+export const BECKET_PUBLIC_NEUTRAL_STEPS = NEUTRAL_STEPS;

package/theme.example.css

@@ -0,0 +1,68 @@
+/**
+ * Becket public theme contract (copy, then import AFTER index.css).
+ *
+ *   import '@becket-ui/tokens/index.css';
+ *   import './becket-theme.css'; // this file, renamed
+ *
+ * Or generate the same vars with:
+ *   import { defineBecketTheme } from '@becket-ui/tokens/theme';
+ *
+ * Unlayered :root wins over @layer tokens. Do not depend on Panda leftover
+ * names (rose-500, spacing-11, sizes-md, …) — those are not public API.
+ *
+ * Light/dark: `background` / `text` / `muted` are semantic. Override them on
+ * :root (dark) and html[data-theme='light'] (light), or pass { dark, light }
+ * to defineBecketTheme. lightBackground / lightText still exist as aliases.
+ */
+
+:root {
+  /* Brand aliases — override these to recolor the kit */
+  /* --beckui--colors-primary: oklch(0.75 0.15 78); */
+  /* --beckui--colors-secondary: oklch(0.70 0.13 125); */
+  /* --beckui--colors-tertiary: oklch(0.60 0.16 48); */
+  /* --beckui--colors-primary-hover follows primary via color-mix */
+
+  /* Semantic surfaces (dark = :root default) */
+  /* --beckui--colors-background: var(--beckui--colors-neutral-900); */
+  /* --beckui--colors-text: var(--beckui--colors-neutral-50); */
+  /* --beckui--colors-muted: var(--beckui--colors-neutral-300); */
+  /* --beckui--colors-border: var(--beckui--colors-neutral-200); */
+
+  /* Neutral scale 50–900 */
+  /* --beckui--colors-neutral-50: oklch(0.96 0.012 78); */
+  /* --beckui--colors-neutral-900: oklch(0.22 0.015 60); */
+
+  /* Status — never aliases of primary */
+  /* --beckui--colors-danger: oklch(0.62 0.20 25); */
+  /* --beckui--colors-warning: oklch(0.78 0.14 95); */
+  /* --beckui--colors-success: oklch(0.68 0.16 145); */
+
+  /* Type + layout spacing (Stack gap). Do not use these to densify buttons. */
+  /* --beckui--fonts-sans: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; */
+  /* --beckui--fonts-mono: 'JetBrains Mono', 'Menlo', 'Consolas', 'monospace'; */
+  /* --beckui--font-sizes-sm: 0.875rem; */
+  /* --beckui--font-sizes-md: 1rem; */
+  /* --beckui--spacing-xs: var(--beckui--spacing-1); */
+  /* --beckui--spacing-sm: var(--beckui--spacing-2); */
+  /* --beckui--spacing-md: var(--beckui--spacing-3); */
+  /* --beckui--spacing-lg: var(--beckui--spacing-5); */
+  /* --beckui--spacing-xl: var(--beckui--spacing-8); */
+  /* --beckui--radii-sm: 4px; */
+  /* --beckui--radii-md: 8px; */
+  /* --beckui--radii-lg: 12px; */
+  /* --beckui--sizes-field: 12.5rem; */
+
+  /* Component density (not Stack gap) */
+  /* --beckui-button-px-md: 1rem; */
+  /* --beckui-button-py-md: 0.5rem; */
+  /* --beckui-field-px-md: 0.75rem; */
+  /* --beckui-field-py-md: 0.5rem; */
+  /* --beckui-tag-px-md: 0.75rem; */
+  /* --beckui-tag-py-md: 0.25rem; */
+}
+
+html[data-theme='light'] {
+  /* --beckui--colors-background: var(--beckui--colors-neutral-50); */
+  /* --beckui--colors-text: var(--beckui--colors-neutral-900); */
+  /* --beckui--colors-muted: var(--beckui--colors-neutral-600); */
+}