Skip to main content

@sabinmarcu/theme

Framework-free concrete color/grid definitions and stable public references. Importing this package compiles metadata; it does not render CSS or access the DOM.

import { theme, themeDefinition } from '@sabinmarcu/theme';

theme.colors.primary.base; // var(--theme-colors-primary-base)
theme.grid.m; // var(--theme-grid-m)

Vanilla Extract consumers continue using these precise references. The package has no production React, Storybook, Vanilla Extract, or JavaScript color-computation dependency.

Render themeDefinition through createThemeSetup from @sabinmarcu/theme-core. Generic independent-family composition lives in @sabinmarcu/theme-family; this package does not re-export it. The old family, family.runtime, runtime, and ssr entry points are removed.

The root export also provides selector constants, ordered layer names, themeLayerOrder, and themeResetCSS. Applications own reset/stylesheet delivery before first paint. Initial setup accepts nested source inputs; updates preserve omitted sources and CSS computes derived values.

Breakpoints are intrinsic static definitions from theme-core. Website configuration is an extension in @sabinmarcu/website-theme, not a mutable input or part of this concrete color/grid contract.

Package guides​

Use the core guide for direct setup/codecs/inspection and the family guide for independent member values.

Devtools are optional consumers: the native inspector owns the shared modeless window, and the React binding only hosts that core. The concrete theme does not acquire a devtools dependency.

Browser and release boundary​

Native colors require light-dark(), contrast-color(), relative OKLab/OKLCH colors, color-mix(), round(), and typed custom properties. Adaptive backgrounds do not require CSS if() or style queries. Safari 26 is the minimum because of contrast-color(). No JavaScript or legacy-browser fallback is provided; Linux WebKit smoke coverage does not substitute for native macOS/iOS hardware acceptance.

Index

Variables

Variables

constcomponentsLayer

componentsLayer: framework.theme = ...

constframeworkLayer

frameworkLayer: framework = 'framework'

constframeworkSetupLayer

frameworkSetupLayer: framework.setup = ...

constresetLayer

resetLayer: reset = 'reset'

constrootNode

rootNode: :root = ':root'

consttheme

theme: { colors: { background: {}; error: {}; info: {}; primary: {}; secondary: {}; success: {}; warning: {} }; grid: { l: var(--theme-grid-l); s: var(--theme-grid-s); xl: var(--theme-grid-xl); xs: var(--theme-grid-xs); xxl: var(--theme-grid-xxl); xxs: var(--theme-grid-xxs) } } = themeDefinition.contract

Type declaration

  • readonlycolors: { background: {}; error: {}; info: {}; primary: {}; secondary: {}; success: {}; warning: {} }
    • readonlybackground: {}
      • readonlyerror: {}
        • readonlyinfo: {}
          • readonlyprimary: {}
            • readonlysecondary: {}
              • readonlysuccess: {}
                • readonlywarning: {}
                • readonlygrid: { l: var(--theme-grid-l); s: var(--theme-grid-s); xl: var(--theme-grid-xl); xs: var(--theme-grid-xs); xxl: var(--theme-grid-xxl); xxs: var(--theme-grid-xxs) }
                  • l: var(--theme-grid-l)
                  • s: var(--theme-grid-s)
                  • xl: var(--theme-grid-xl)
                  • xs: var(--theme-grid-xs)
                  • xxl: var(--theme-grid-xxl)
                  • xxs: var(--theme-grid-xxs)

                constthemeContractLayer

                themeContractLayer: framework.theme.contract = ...

                constthemeDataAttribute

                themeDataAttribute: theme-variant = 'theme-variant'

                constthemeDefinition

                themeDefinition: Theme<{ colors: { background: VariableDescriptor<VariantSource<string, true>, {}, contextual>; error: VariableDescriptor<VariantSource<string, true>, {}, contextual>; info: VariableDescriptor<VariantSource<string, true>, {}, contextual>; primary: VariableDescriptor<VariantSource<string, true>, {}, contextual>; secondary: VariableDescriptor<VariantSource<string, true>, {}, contextual>; success: VariableDescriptor<VariantSource<string, true>, {}, contextual>; warning: VariableDescriptor<VariantSource<string, true>, {}, contextual> }; grid: GridDescriptor<3> }, theme> = ...

                Shared public token identity; values are delivered by an application-owned harness.

                constthemeFamilyDataAttribute

                themeFamilyDataAttribute: theme-family = 'theme-family'

                constthemeLayer

                themeLayer: framework.theme = ...

                constthemeLayerOrder

                themeLayerOrder: readonly [reset, framework.setup, framework.theme.values, framework.theme.variants, framework.theme.contract] = ...

                constthemeResetCSS

                themeResetCSS: string = ...

                Structural delivery is explicit at the application entry, never a token import side effect.

                constthemeValuesLayer

                themeValuesLayer: framework.theme.values = ...

                constthemeVariants

                themeVariants: readonly [light, dark] = ...

                constthemeVariantsLayer

                themeVariantsLayer: framework.theme.variants = ...