Skip to main content

@sabinmarcu/theme

Index

Variables

Variables

theme

theme: { breakpoint: { between-huge-large: `var(--${string})`; between-huge-mobile: `var(--${string})`; between-huge-screen: `var(--${string})`; between-huge-tablet: `var(--${string})`; between-large-huge: `var(--${string})`; between-large-mobile: `var(--${string})`; between-large-screen: `var(--${string})`; between-large-tablet: `var(--${string})`; between-mobile-huge: `var(--${string})`; between-mobile-large: `var(--${string})`; between-mobile-screen: `var(--${string})`; between-mobile-tablet: `var(--${string})`; between-screen-huge: `var(--${string})`; between-screen-large: `var(--${string})`; between-screen-mobile: `var(--${string})`; between-screen-tablet: `var(--${string})`; between-tablet-huge: `var(--${string})`; between-tablet-large: `var(--${string})`; between-tablet-mobile: `var(--${string})`; between-tablet-screen: `var(--${string})`; gt-huge: `var(--${string})`; gt-large: `var(--${string})`; gt-mobile: `var(--${string})`; gt-screen: `var(--${string})`; gt-tablet: `var(--${string})`; gte-huge: `var(--${string})`; gte-large: `var(--${string})`; gte-mobile: `var(--${string})`; gte-screen: `var(--${string})`; gte-tablet: `var(--${string})`; lt-huge: `var(--${string})`; lt-large: `var(--${string})`; lt-mobile: `var(--${string})`; lt-screen: `var(--${string})`; lt-tablet: `var(--${string})`; lte-huge: `var(--${string})`; lte-large: `var(--${string})`; lte-mobile: `var(--${string})`; lte-screen: `var(--${string})`; lte-tablet: `var(--${string})` }; colors: { background: MapLeafNodes<{ depressed: string; elevated: string; page: string; surface: string; text: string }, CSSVarFunction>; error: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; info: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; primary: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; secondary: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; success: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; warning: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction> }; grid: MapLeafNodes<{ l: string; m: string; s: string; xl: string; xs: string; xxl: string; xxs: string }, CSSVarFunction> }

Type declaration

  • breakpoint: { between-huge-large: `var(--${string})`; between-huge-mobile: `var(--${string})`; between-huge-screen: `var(--${string})`; between-huge-tablet: `var(--${string})`; between-large-huge: `var(--${string})`; between-large-mobile: `var(--${string})`; between-large-screen: `var(--${string})`; between-large-tablet: `var(--${string})`; between-mobile-huge: `var(--${string})`; between-mobile-large: `var(--${string})`; between-mobile-screen: `var(--${string})`; between-mobile-tablet: `var(--${string})`; between-screen-huge: `var(--${string})`; between-screen-large: `var(--${string})`; between-screen-mobile: `var(--${string})`; between-screen-tablet: `var(--${string})`; between-tablet-huge: `var(--${string})`; between-tablet-large: `var(--${string})`; between-tablet-mobile: `var(--${string})`; between-tablet-screen: `var(--${string})`; gt-huge: `var(--${string})`; gt-large: `var(--${string})`; gt-mobile: `var(--${string})`; gt-screen: `var(--${string})`; gt-tablet: `var(--${string})`; gte-huge: `var(--${string})`; gte-large: `var(--${string})`; gte-mobile: `var(--${string})`; gte-screen: `var(--${string})`; gte-tablet: `var(--${string})`; lt-huge: `var(--${string})`; lt-large: `var(--${string})`; lt-mobile: `var(--${string})`; lt-screen: `var(--${string})`; lt-tablet: `var(--${string})`; lte-huge: `var(--${string})`; lte-large: `var(--${string})`; lte-mobile: `var(--${string})`; lte-screen: `var(--${string})`; lte-tablet: `var(--${string})` }
    • between-huge-large: `var(--${string})`
    • between-huge-mobile: `var(--${string})`
    • between-huge-screen: `var(--${string})`
    • between-huge-tablet: `var(--${string})`
    • between-large-huge: `var(--${string})`
    • between-large-mobile: `var(--${string})`
    • between-large-screen: `var(--${string})`
    • between-large-tablet: `var(--${string})`
    • between-mobile-huge: `var(--${string})`
    • between-mobile-large: `var(--${string})`
    • between-mobile-screen: `var(--${string})`
    • between-mobile-tablet: `var(--${string})`
    • between-screen-huge: `var(--${string})`
    • between-screen-large: `var(--${string})`
    • between-screen-mobile: `var(--${string})`
    • between-screen-tablet: `var(--${string})`
    • between-tablet-huge: `var(--${string})`
    • between-tablet-large: `var(--${string})`
    • between-tablet-mobile: `var(--${string})`
    • between-tablet-screen: `var(--${string})`
    • gt-huge: `var(--${string})`
    • gt-large: `var(--${string})`
    • gt-mobile: `var(--${string})`
    • gt-screen: `var(--${string})`
    • gt-tablet: `var(--${string})`
    • gte-huge: `var(--${string})`
    • gte-large: `var(--${string})`
    • gte-mobile: `var(--${string})`
    • gte-screen: `var(--${string})`
    • gte-tablet: `var(--${string})`
    • lt-huge: `var(--${string})`
    • lt-large: `var(--${string})`
    • lt-mobile: `var(--${string})`
    • lt-screen: `var(--${string})`
    • lt-tablet: `var(--${string})`
    • lte-huge: `var(--${string})`
    • lte-large: `var(--${string})`
    • lte-mobile: `var(--${string})`
    • lte-screen: `var(--${string})`
    • lte-tablet: `var(--${string})`
  • colors: { background: MapLeafNodes<{ depressed: string; elevated: string; page: string; surface: string; text: string }, CSSVarFunction>; error: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; info: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; primary: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; secondary: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; success: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>; warning: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction> }
    • background: MapLeafNodes<{ depressed: string; elevated: string; page: string; surface: string; text: string }, CSSVarFunction>
    • error: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>
    • info: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>
    • primary: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>
    • secondary: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>
    • success: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>
    • warning: MapLeafNodes<{ base: string; contrast: string; emphasis: string; muted: string }, CSSVarFunction>
  • grid: MapLeafNodes<{ l: string; m: string; s: string; xl: string; xs: string; xxl: string; xxs: string }, CSSVarFunction>