@cdx-ui/components 0.0.1-beta.102 → 0.0.1-beta.103

package/src/styles/primitives.ts

@@ -1,143 +0,0 @@
-// packages/components/src/styles/primitives.ts
-// Semantic constants for Forge UI component styling.
-
-// ─── Colors ──────────────────────────────────────────────
-// Surface & background
-/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
-export const COLOR_BG_PRIMARY = 'bg-white';
-/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
-export const COLOR_BG_SUBTLE = 'bg-slate-50';
-/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
-export const COLOR_BG_MUTED = 'bg-slate-100';
-/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
-export const COLOR_BG_INVERSE = 'bg-slate-900';
-
-// Border
-/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
-export const COLOR_BORDER_DEFAULT = 'border-slate-200';
-/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
-export const COLOR_BORDER_STRONG = 'border-slate-300';
-/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
-export const COLOR_BORDER_FOCUS = 'border-slate-900';
-/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
-export const COLOR_BORDER_INVALID = 'border-red-500';
-
-// Text
-/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
-export const COLOR_TEXT_PRIMARY = 'text-slate-900';
-/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
-export const COLOR_TEXT_SECONDARY = 'text-slate-500';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export const COLOR_TEXT_MUTED = 'text-slate-400';
-/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
-export const COLOR_TEXT_INVERSE = 'text-white';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
-/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
-export const COLOR_TEXT_INVALID = 'text-red-600';
-
-// Brand / Action
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
-export const COLOR_BRAND_HOVER = 'bg-slate-800';
-/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
-export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
-
-// Accent (for checked states, active indicators)
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
-export const COLOR_ACCENT_BORDER = 'border-slate-900';
-
-/**
- * @deprecated Use semantic token classes directly instead. Map each color key to its
- * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
- * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
- * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
- * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
- * - `border` → `border-stroke-{color}` (--color-stroke-{color})
- * - `text` → `text-content-{color}` (--color-content-{color})
- * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
- *
- * See Button/styles.ts for a complete migration example.
- */
-export const SEMANTIC_COLORS = {
-  action: {
-    bg: 'bg-slate-900',
-    bgHover: 'bg-slate-800',
-    bgActive: 'bg-slate-700',
-    border: 'border-slate-900',
-    text: 'text-slate-900',
-    ring: 'ring-slate-400/50',
-  },
-  danger: {
-    bg: 'bg-red-600',
-    bgHover: 'bg-red-700',
-    bgActive: 'bg-red-800',
-    border: 'border-red-600',
-    text: 'text-red-600',
-    ring: 'ring-red-400/50',
-  },
-  warning: {
-    bg: 'bg-amber-500',
-    bgHover: 'bg-amber-600',
-    bgActive: 'bg-amber-700',
-    border: 'border-amber-500',
-    text: 'text-amber-600',
-    ring: 'ring-amber-400/50',
-  },
-  success: {
-    bg: 'bg-green-600',
-    bgHover: 'bg-green-700',
-    bgActive: 'bg-green-800',
-    border: 'border-green-600',
-    text: 'text-green-600',
-    ring: 'ring-green-400/50',
-  },
-  info: {
-    bg: 'bg-sky-500',
-    bgHover: 'bg-sky-600',
-    bgActive: 'bg-sky-700',
-    border: 'border-sky-500',
-    text: 'text-sky-600',
-    ring: 'ring-sky-400/50',
-  },
-} as const;
-
-// ─── Focus ───────────────────────────────────────────────
-/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
-export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
-
-// ─── Radius ──────────────────────────────────────────────
-/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
-export const RADIUS_SM = 'rounded-lg';
-/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
-export const RADIUS_MD = 'rounded-xl';
-/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
-export const RADIUS_FULL = 'rounded-full';
-
-// ─── Shadows ─────────────────────────────────────────────
-
-/** @deprecated Use `shadow-sm` directly instead */
-export const SHADOW_SM = 'shadow-sm';
-/** @deprecated Use `shadow-md` directly instead */
-export const SHADOW_MD = 'shadow-md';
-
-// ─── Sizing ──────────────────────────────────────────────
-// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
-// Only two sizes: 'default' (regular) and 'small' (compact).
-// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
-/** @deprecated */
-export const SIZE_SCALE = {
-  default: { height: 'h-10', px: 'px-4', gap: 'gap-2', text: 'text-base' },
-  small: { height: 'h-8', px: 'px-3', gap: 'gap-1.5', text: 'text-sm' },
-} as const;
-
-// ─── Transitions ─────────────────────────────────────────
-export const TRANSITION_COLORS = 'transition-colors duration-150';
-
-// ─── Disabled ────────────────────────────────────────────
-export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
-export const DISABLED_CURSOR =
-  'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';