@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/themes-CUV79qWU.d.cts

@@ -0,0 +1,503 @@
+import { CSSObject } from "@emotion/react";
+import { ElementType } from "react";
+//#region src/theme/utils/createTheme.d.ts
+/**
+ * Recursive partial of a theme shape. Plain objects recurse; arrays and
+ * functions are replaced wholesale by `createTheme`, so they stay intact here.
+ */
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends ((...args: never[]) => unknown) ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K]; };
+/** Sparse theme patch accepted by `createTheme` and `ThemeProvider`'s `themes` prop. */
+type ThemeOverride = DeepPartial<Theme>;
+/**
+ * Builds a theme by deep-merging sparse `overrides` onto `base`.
+ *
+ * - Recurses only where both sides are plain objects; arrays (`shadows`,
+ *   `fontSizes`) and functions replace wholesale.
+ * - `undefined` override values are ignored — a key can be added or replaced,
+ *   never removed.
+ * - Neither argument is mutated; untouched branches keep referential identity.
+ */
+declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
+//#endregion
+//#region src/theme/themes.d.ts
+/** Design-system's own style-object shape — Emotion stays an internal implementation detail. */
+type CSSObject$1 = CSSObject;
+/**
+ * Re-opens a named scale interface as an anonymous mapped type. Named
+ * interfaces have no implicit index signature, which styled-system's
+ * Record-based `Theme` constraint requires — the mapped copy restores it
+ * while keeping the literal keys (and any consumer-augmented keys).
+ */
+type OpenScale<T> = { [K in keyof T]: T[K]; };
+/** One semantic color of `theme.palette`. */
+interface PaletteEntry {
+  main: string;
+  light: string;
+  dark: string;
+  contrastText: string;
+}
+interface ThemePalette {
+  default: PaletteEntry;
+  primary: PaletteEntry;
+  secondary: PaletteEntry;
+  success: PaletteEntry;
+  error: PaletteEntry;
+  info: PaletteEntry;
+  warning: PaletteEntry;
+}
+interface ThemeText {
+  inherit: string;
+  initial: string;
+  primary: string;
+  secondary: string;
+  disabled: string;
+  error: string;
+  success: string;
+  info: string;
+  warning: string;
+}
+interface ThemeBackground {
+  backdrop: string;
+  /** App bar / sticky header surface. Light in light theme; `backdrop` stays dark for scrims. */
+  appBar: string;
+  glass: string;
+  modal: string;
+  default: string;
+  primary: string;
+  secondary?: string;
+  paper: string;
+  terminal: string;
+  grid: string;
+  transparent: string;
+}
+interface ThemeBorder {
+  default?: string;
+  light?: string;
+  primary: string;
+  dark?: string;
+}
+interface ThemeFonts {
+  body: string;
+  heading: string;
+  mono: string;
+}
+/** Skeleton placeholder tokens. `highlight` is the wave-animation shimmer band. */
+interface ThemeSkeleton {
+  highlight: string;
+}
+/** Switch control tokens. The thumb stays light in both modes so it reads on any track. */
+interface ThemeSwitch {
+  /** Thumb fill. Its elevation shadow composites from `theme.shadow.color`. */
+  thumb: string;
+}
+/**
+ * Shadow tokens — the single base color every shadow composites from
+ * (the `theme.shadows` elevation array and component shadows alike).
+ */
+interface ThemeShadow {
+  /** Opaque base color of all shadows. */
+  color: string;
+  /** Alpha applied per elevation step in the default `theme.shadows` array. */
+  opacity: number;
+}
+/** Stacking order for layered UI — ascending: appBar < drawer < modal. */
+interface ThemeZOrder {
+  appBar: number;
+  drawer: number;
+  modal: number;
+}
+interface ThemeRadii {
+  sq: string;
+  sm: string;
+  md: string;
+  lg: string;
+}
+interface ThemeBorderWidths {
+  none: string;
+  thin: string;
+  base: string;
+  thick: string;
+}
+interface ThemeAvatarSizes {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+interface ThemeFontWeights {
+  thin: number;
+  extraLight: number;
+  light: number;
+  normal: number;
+  medium: number;
+  semiBold: number;
+  bold: number;
+  extraBold: number;
+  black: number;
+}
+interface ThemeLineHeights {
+  none: number;
+  tight: number;
+  snug: number;
+  base: number;
+  relaxed: number;
+  loose: number;
+}
+interface ThemeLetterSpacings {
+  tighter: string;
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+  widest: string;
+}
+interface ThemeSpace {
+  auto: string;
+  0: number | string;
+  0.5: number | string;
+  1: number | string;
+  1.5: number | string;
+  2: number | string;
+  3: number | string;
+  4: number | string;
+  5: number | string;
+  6: number | string;
+  7: number | string;
+  8: number | string;
+  9: number | string;
+  10: number | string;
+}
+/** One padding/font preset of `theme.sizes`. */
+interface SizeEntry {
+  paddingTop: Exclude<keyof ThemeSpace, 'auto'>;
+  paddingBottom: Exclude<keyof ThemeSpace, 'auto'>;
+  paddingLeft: Exclude<keyof ThemeSpace, 'auto'>;
+  paddingRight: Exclude<keyof ThemeSpace, 'auto'>;
+  /** Index into `theme.fontSizes`. */
+  fontSize: number;
+}
+interface ThemeSizes {
+  sm: SizeEntry;
+  md: SizeEntry;
+  lg: SizeEntry;
+}
+/**
+ * Square glyph dimension per density key — Icon token sizes and the
+ * Checkbox/Radio glyphs. Mapped over `ThemeSizes` so augmenting a size key
+ * forces the matching icon size to be supplied.
+ */
+type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/** Style of one typography variant. */
+interface TypographyVariantStyle {
+  element: ElementType;
+  fontSize?: number;
+  fontWeight?: string;
+  letterSpacing?: string;
+  textTransform?: CSSObject$1['textTransform'];
+}
+interface ThemeTypographyVariants {
+  h1: TypographyVariantStyle;
+  h2: TypographyVariantStyle;
+  h3: TypographyVariantStyle;
+  h4: TypographyVariantStyle;
+  h5: TypographyVariantStyle;
+  h6: TypographyVariantStyle;
+  subtitle1: TypographyVariantStyle;
+  subtitle2: TypographyVariantStyle;
+  body1: TypographyVariantStyle;
+  body2: TypographyVariantStyle;
+  caption: TypographyVariantStyle;
+  overline: TypographyVariantStyle;
+  button: TypographyVariantStyle;
+  inherit: TypographyVariantStyle;
+}
+/**
+ * Optional theme-driven component defaults. Components carry their own
+ * literal fallbacks (`size = 'md'`, `variant = 'outside'`, …) and resolve
+ * them through `themeDefault(theme, key, fallback)` — set any key here (or
+ * via `ThemeProvider`'s `defaults` prop) to override that fallback globally,
+ * e.g. when your theme uses entirely different size or palette keys.
+ */
+interface ThemeDefaults {
+  /** Density token for sized components. Fallback: `'md'`. */
+  size?: keyof ThemeSizes;
+  /** Compact density for dense secondary UI (table pagination actions). Fallback: `'sm'`. */
+  compactSize?: keyof ThemeSizes;
+  /** Accent palette color (buttons, links, progress, pagination…). Fallback: `'primary'`. */
+  color?: keyof ThemePalette;
+  /** Neutral palette color for toggle controls (checkbox, radio, switch…). Fallback: `'default'`. */
+  neutralColor?: keyof ThemePalette;
+  /** Body text color. Fallback: `'initial'`. */
+  textColor?: keyof ThemeText;
+  /** Accent text color (icons, input labels). Fallback: `'primary'`. */
+  accentTextColor?: keyof ThemeText;
+  /** General control background (switch track). Fallback: `'default'`. */
+  bg?: keyof ThemeBackground;
+  /** Elevated surface background (paper, cards). Fallback: `'paper'`. */
+  surfaceBg?: keyof ThemeBackground;
+  /** Input surface background (selects, text inputs). Fallback: `'terminal'`. */
+  inputBg?: keyof ThemeBackground;
+  /** Corner radius for grouped controls. Fallback: `'md'`. */
+  borderRadius?: keyof ThemeRadii;
+  /** Corner radius for surfaces. Fallback: `'sq'`. */
+  surfaceRadius?: keyof ThemeRadii;
+  /** Avatar size step. Fallback: `'md'`. */
+  avatarSize?: keyof ThemeAvatarSizes;
+  /** Icon glyph size step. Fallback: `'lg'`. */
+  iconSize?: keyof ThemeIconSizes;
+  /** Border/ring color. Fallback: `'primary'`. */
+  borderColor?: keyof ThemeBorder;
+  /** Border/ring width. Fallback: `'thin'`. */
+  borderWidth?: keyof ThemeBorderWidths;
+  /** Button visual variant. Fallback: `'contained'`. */
+  buttonVariant?: keyof ButtonVariants;
+  /** Switch thumb/track layout. Fallback: `'outside'`. */
+  switchVariant?: 'outside' | 'inside';
+  /** Input frame style (TextInput, Select, NativeSelect). Fallback: `'default'`. */
+  inputVariant?: 'default' | 'outlined' | 'text' | 'underline';
+  /** Avatar shape. Fallback: `'circular'`. */
+  avatarVariant?: 'circular' | 'rounded' | 'square';
+  /** Link underline behavior. Fallback: `'always'`. */
+  linkUnderline?: 'always' | 'hover' | 'none';
+  /** Card surface treatment. Fallback: `'paper'`. */
+  cardVariant?: 'paper' | 'bracketBox' | 'interactive';
+  /** Pagination item visual variant. Fallback: `'text'`. */
+  paginationVariant?: 'text' | 'outlined';
+  /** Pagination item shape. Fallback: `'circular'`. */
+  paginationShape?: 'circular' | 'rounded';
+}
+/**
+ * A style contributed from `theme.components` — a plain CSS object, or a
+ * callback receiving the theme and the styled root's resolved props
+ * (`ownerState`) for conditional styling.
+ */
+type ComponentStyle<OwnerState> = CSSObject$1 | ((args: {
+  theme: Theme;
+  ownerState: OwnerState;
+}) => CSSObject$1);
+/** One theme-contributed variant: applied when every key in `props` matches the render props. */
+interface ComponentVariant<OwnerState> {
+  props: Partial<OwnerState>;
+  style: ComponentStyle<OwnerState>;
+}
+/** Per-component customization: default prop values, per-slot CSS, extra variants. */
+interface ComponentConfig<OwnerState = Record<string, unknown>, Slot extends string = 'root'> {
+  /** Default prop values — explicit props and group context always win. */
+  defaultProps?: Partial<OwnerState>;
+  /** Per-slot CSS merged after the component's own styles (theme wins). */
+  styleOverrides?: Partial<Record<Slot, ComponentStyle<OwnerState>>>;
+  /** Extra variants matched by props. Replaced wholesale by `createTheme`, never merged. */
+  variants?: ReadonlyArray<ComponentVariant<OwnerState>>;
+}
+/** Button's variant values — augment to register new ones (then style them via `variants`). */
+interface ButtonVariants {
+  contained: true;
+  outlined: true;
+  text: true;
+}
+/** The resolved props Button's styled roots receive — what `ownerState` exposes. */
+interface ButtonOwnerState {
+  variant?: keyof ButtonVariants;
+  color?: keyof ThemePalette;
+  size?: keyof ThemeSizes;
+  shape?: 'square' | 'rounded' | 'pill';
+  fullWidth?: boolean;
+  disabled?: boolean;
+}
+/** Token-typed Typography props a theme may set for Card's title/caption slots. */
+interface CardSlotTypographyProps {
+  variant?: keyof ThemeTypographyVariants;
+  color?: keyof ThemeText;
+  fontFamily?: keyof ThemeFonts;
+  mb?: keyof ThemeSpace;
+}
+/** Token-typed Icon props a theme may set for Card's icon slot. */
+interface CardSlotIconProps {
+  color?: keyof ThemeText;
+  size?: string | number;
+}
+/** Card's resolved props / theme-settable defaults. */
+interface CardOwnerState {
+  variant?: 'paper' | 'bracketBox' | 'interactive';
+  /** Merged under any per-instance `titleProps` (instance wins). */
+  titleProps?: CardSlotTypographyProps;
+  /** Merged under any per-instance `captionProps` (instance wins). */
+  captionProps?: CardSlotTypographyProps;
+  /** Merged under any per-instance `iconProps` (instance wins). */
+  iconProps?: CardSlotIconProps;
+}
+/**
+ * Pressable's resolved props / theme-settable defaults. Only the three keys it
+ * actually resolves through `useDefaultProps` — the disabled state reaches the
+ * styled root as `isDisabled` and is never read from here, so exposing it would
+ * promise theme authors an override that does nothing.
+ */
+interface PressableOwnerState {
+  feedback?: 'none' | 'opacity' | 'highlight';
+  color?: keyof ThemePalette;
+  /** Opacity held content fades to under `feedback: 'opacity'`. */
+  activeOpacity?: number;
+}
+/**
+ * Per-component theme customization, keyed by component name. Augment this
+ * interface to register additional components (including your own, when their
+ * styled roots are created with this package's `styled(tag, { name })`).
+ */
+interface ThemeComponents {
+  AppBar?: ComponentConfig;
+  Avatar?: ComponentConfig<Record<string, unknown>, 'root' | 'img'>;
+  Backdrop?: ComponentConfig;
+  Button?: ComponentConfig<ButtonOwnerState, 'root' | 'label' | 'icon' | 'loader'>;
+  ButtonGroup?: ComponentConfig;
+  Card?: ComponentConfig<CardOwnerState, 'root' | 'title' | 'caption' | 'icon'>;
+  Checkbox?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
+  CircularProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'circle'>;
+  Drawer?: ComponentConfig;
+  Flex?: ComponentConfig;
+  FocusTrap?: ComponentConfig;
+  Form?: ComponentConfig;
+  FormControl?: ComponentConfig;
+  FormHelperText?: ComponentConfig;
+  FormLabel?: ComponentConfig;
+  Grid?: ComponentConfig;
+  Icon?: ComponentConfig;
+  Image?: ComponentConfig;
+  LinearProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'dash' | 'bar' | 'traveler' | 'segment' | 'secondaryBar'>;
+  Link?: ComponentConfig;
+  MenuItem?: ComponentConfig<Record<string, unknown>, 'root' | 'check'>;
+  Modal?: ComponentConfig;
+  NativeSelect?: ComponentConfig<Record<string, unknown>, 'root' | 'select' | 'icon'>;
+  Pagination?: ComponentConfig<Record<string, unknown>, 'root' | 'list'>;
+  PaginationItem?: ComponentConfig<Record<string, unknown>, 'root' | 'ellipsis'>;
+  Paper?: ComponentConfig;
+  Popover?: ComponentConfig<Record<string, unknown>, 'root' | 'positioner'>;
+  Pressable?: ComponentConfig<PressableOwnerState>;
+  Quote?: ComponentConfig;
+  Radio?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
+  Select?: ComponentConfig<Record<string, unknown>, 'root' | 'value' | 'valueArea' | 'valueGhost' | 'listbox'>;
+  Sidebar?: ComponentConfig<Record<string, unknown>, 'root' | 'rail' | 'panel'>;
+  SidebarItem?: ComponentConfig;
+  Skeleton?: ComponentConfig<Record<string, unknown>, 'root' | 'content'>;
+  Switch?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'track' | 'thumb'>;
+  Table?: ComponentConfig;
+  TableBody?: ComponentConfig;
+  TableCell?: ComponentConfig;
+  TableContainer?: ComponentConfig;
+  TableFooter?: ComponentConfig;
+  TableHead?: ComponentConfig;
+  TablePagination?: ComponentConfig;
+  TablePaginationActions?: ComponentConfig;
+  TableRow?: ComponentConfig;
+  TableSortLabel?: ComponentConfig<Record<string, unknown>, 'root' | 'icon'>;
+  TextInput?: ComponentConfig<Record<string, unknown>, 'root' | 'input'>;
+  ToggleButton?: ComponentConfig;
+  ToggleButtonGroup?: ComponentConfig;
+  Typography?: ComponentConfig;
+  View?: ComponentConfig;
+}
+interface Theme {
+  name: string;
+  /** Optional overrides for component default token/variant keys — see `ThemeDefaults`. */
+  defaults?: OpenScale<ThemeDefaults>;
+  /** Optional per-component customization — see `ThemeComponents`. */
+  components?: OpenScale<ThemeComponents>;
+  space: OpenScale<ThemeSpace>;
+  border: OpenScale<ThemeBorder>;
+  text: OpenScale<ThemeText>;
+  background: OpenScale<ThemeBackground>;
+  typography: OpenScale<ThemeTypographyVariants>;
+  fonts: OpenScale<ThemeFonts>;
+  lineHeights: OpenScale<ThemeLineHeights>;
+  letterSpacings: OpenScale<ThemeLetterSpacings>;
+  fontSizes: number[];
+  radii: OpenScale<ThemeRadii>;
+  borderWidths: OpenScale<ThemeBorderWidths>;
+  avatar: OpenScale<ThemeAvatarSizes>;
+  icon: ThemeIconSizes;
+  skeleton: OpenScale<ThemeSkeleton>;
+  switch: OpenScale<ThemeSwitch>;
+  shadow: OpenScale<ThemeShadow>;
+  sizes: { [K in keyof ThemeSizes]: OpenScale<ThemeSizes[K]>; };
+  colorScheme: 'light' | 'dark';
+  blur: string;
+  logoFilter: string;
+  /** mix-blend-mode for the AboutHero portrait — screen on dark, multiply on light. */
+  portraitBlend: string;
+  /** opacity for the AboutHero portrait. */
+  portraitOpacity: number;
+  shadows: string[];
+  fontWeights: OpenScale<ThemeFontWeights>;
+  palette: OpenScale<ThemePalette>;
+  zOrder: OpenScale<ThemeZOrder>;
+}
+/** The semantic color keys of `theme.palette`. */
+type PaletteColor = keyof ThemePalette;
+/** The variant keys of `theme.typography`. */
+type TypographyVariant = keyof ThemeTypographyVariants;
+declare const radii: {
+  sq: string;
+  sm: string;
+  md: string;
+  lg: string;
+};
+declare const borderWidths: {
+  none: string;
+  thin: string;
+  base: string;
+  thick: string;
+};
+declare const zOrder: {
+  appBar: number;
+  drawer: number;
+  modal: number;
+};
+declare const fontSizes: number[];
+declare const lineHeights: {
+  none: number;
+  tight: number;
+  snug: number;
+  base: number;
+  relaxed: number;
+  loose: number;
+};
+declare const letterSpacings: {
+  tighter: string;
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+  widest: string;
+};
+declare const fonts: {
+  body: string;
+  heading: string;
+  mono: string;
+};
+declare const fontWeights: {
+  thin: number;
+  extraLight: number;
+  light: number;
+  normal: number;
+  medium: number;
+  semiBold: number;
+  bold: number;
+  extraBold: number;
+  black: number;
+};
+declare const avatar: {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+};
+declare const icon: ThemeIconSizes;
+declare const sizes: ThemeSizes;
+declare const space: ThemeSpace;
+declare const typography: ThemeTypographyVariants;
+/**
+ * The package's complete default theme (dark-schemed). Raw hex only — palettes
+ * belong to the consumer, who builds brand themes with `createTheme(baseTheme, …)`.
+ */
+declare const baseTheme: Theme;
+//#endregion
+export { DeepPartial as $, ThemeSizes as A, baseTheme as B, ThemeFonts as C, ThemePalette as D, ThemeLineHeights as E, ThemeTypographyVariants as F, icon as G, fontSizes as H, ThemeZOrder as I, radii as J, letterSpacings as K, TypographyVariant as L, ThemeSpace as M, ThemeSwitch as N, ThemeRadii as O, ThemeText as P, zOrder as Q, TypographyVariantStyle as R, ThemeFontWeights as S, ThemeLetterSpacings as T, fontWeights as U, borderWidths as V, fonts as W, space as X, sizes as Y, typography as Z, ThemeBackground as _, CardSlotIconProps as a, ThemeComponents as b, ComponentStyle as c, PaletteColor as d, ThemeOverride as et, PaletteEntry as f, ThemeAvatarSizes as g, Theme as h, CardOwnerState as i, ThemeSkeleton as j, ThemeShadow as k, ComponentVariant as l, SizeEntry as m, ButtonVariants as n, CardSlotTypographyProps as o, PressableOwnerState as p, lineHeights as q, CSSObject$1 as r, ComponentConfig as s, ButtonOwnerState as t, createTheme as tt, OpenScale as u, ThemeBorder as v, ThemeIconSizes as w, ThemeDefaults as x, ThemeBorderWidths as y, avatar as z };