@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Variable UI_TOKENSConst

    UI_TOKENS: {
        accent: "--ui-accent";
        accentContrast: "--ui-accent-contrast";
        accentHover: "--ui-accent-hover";
        badgeBg: "--ui-badge-bg";
        badgeDangerBg: "--ui-badge-danger-bg";
        badgeDangerBorder: "--ui-badge-danger-border";
        badgeDangerFg: "--ui-badge-danger-fg";
        badgeLetterSpacing: "--ui-badge-letter-spacing";
        badgeLineHeight: "--ui-badge-line-height";
        badgeNeutralBg: "--ui-badge-neutral-bg";
        badgeNeutralBorder: "--ui-badge-neutral-border";
        badgeNeutralFg: "--ui-badge-neutral-fg";
        badgePadding: "--ui-badge-padding";
        badgeSuccessBg: "--ui-badge-success-bg";
        badgeSuccessBorder: "--ui-badge-success-border";
        badgeSuccessFg: "--ui-badge-success-fg";
        badgeText: "--ui-badge-text";
        badgeWarningBg: "--ui-badge-warning-bg";
        badgeWarningBorder: "--ui-badge-warning-border";
        badgeWarningFg: "--ui-badge-warning-fg";
        bg: "--ui-bg";
        blockPadding: "--ui-block-padding";
        border: "--ui-border";
        borderStrong: "--ui-border-strong";
        captionBg: "--ui-caption-bg";
        captionText: "--ui-caption-text";
        cellHeight: "--ui-cell-height";
        checkboxSize: "--ui-checkbox-size";
        chipBg: "--ui-chip-bg";
        chipDismiss: "--ui-chip-dismiss";
        chipText: "--ui-chip-text";
        controlHeight: "--ui-control-height";
        density: "--ui-density";
        densityScale: "--ui-density-scale";
        error: "--ui-error";
        fallback: "--ui-fallback";
        font: "--ui-font";
        fontBadge: "--ui-font-badge";
        fontBody: "--ui-font-body";
        fontCaption: "--ui-font-caption";
        fontFooter: "--ui-font-footer";
        fontHeader: "--ui-font-header";
        fontSortIcon: "--ui-font-sort-icon";
        gap: "--ui-gap";
        hoverBg: "--ui-hover-bg";
        inlinePadding: "--ui-inline-padding";
        link: "--ui-link";
        linkHover: "--ui-link-hover";
        lsCaption: "--ui-ls-caption";
        lsHeader: "--ui-ls-header";
        muted: "--ui-muted";
        onError: "--ui-on-error";
        onPrimaryContainer: "--ui-on-primary-container";
        onTertiary: "--ui-on-tertiary";
        placeholderBg: "--ui-placeholder-bg";
        placeholderText: "--ui-placeholder-text";
        primaryContainer: "--ui-primary-container";
        radioSize: "--ui-radio-size";
        radius: "--ui-radius";
        resizeHandleWidth: "--ui-resize-handle-width";
        resizeIndicatorWidth: "--ui-resize-indicator-width";
        rowIndexWidth: "--ui-row-index-width";
        secondary: "--ui-secondary";
        selectedBg: "--ui-selected-bg";
        selectedHoverBg: "--ui-selected-hover-bg";
        selectionColWidth: "--ui-selection-col-width";
        shadow: "--ui-shadow";
        shadowDropdown: "--ui-shadow-dropdown";
        shadowLg: "--ui-shadow-lg";
        shadowMd: "--ui-shadow-md";
        shadowSm: "--ui-shadow-sm";
        shadowXl: "--ui-shadow-xl";
        surface: "--ui-surface";
        surface2: "--ui-surface-2";
        surfaceVariant: "--ui-surface-variant";
        tertiary: "--ui-tertiary";
        text: "--ui-text";
        textMuted: "--ui-text-muted";
        thumb: "--ui-thumb";
        track: "--ui-track";
        viewportHeight: "--ui-viewport-height";
    } = ...

    All --ui-* CSS custom property names used by @theredhead/lucid-kit.

    Import these constants when you need to read or override tokens programmatically (e.g. via getComputedStyle or element.style.setProperty).

    Type Declaration

    • Readonlyaccent: "--ui-accent"
    • ReadonlyaccentContrast: "--ui-accent-contrast"
    • ReadonlyaccentHover: "--ui-accent-hover"
    • ReadonlybadgeBg: "--ui-badge-bg"
    • ReadonlybadgeDangerBg: "--ui-badge-danger-bg"
    • ReadonlybadgeDangerBorder: "--ui-badge-danger-border"
    • ReadonlybadgeDangerFg: "--ui-badge-danger-fg"
    • ReadonlybadgeLetterSpacing: "--ui-badge-letter-spacing"
    • ReadonlybadgeLineHeight: "--ui-badge-line-height"
    • ReadonlybadgeNeutralBg: "--ui-badge-neutral-bg"
    • ReadonlybadgeNeutralBorder: "--ui-badge-neutral-border"
    • ReadonlybadgeNeutralFg: "--ui-badge-neutral-fg"
    • ReadonlybadgePadding: "--ui-badge-padding"
    • ReadonlybadgeSuccessBg: "--ui-badge-success-bg"
    • ReadonlybadgeSuccessBorder: "--ui-badge-success-border"
    • ReadonlybadgeSuccessFg: "--ui-badge-success-fg"
    • ReadonlybadgeText: "--ui-badge-text"
    • ReadonlybadgeWarningBg: "--ui-badge-warning-bg"
    • ReadonlybadgeWarningBorder: "--ui-badge-warning-border"
    • ReadonlybadgeWarningFg: "--ui-badge-warning-fg"
    • Readonlybg: "--ui-bg"
    • ReadonlyblockPadding: "--ui-block-padding"
    • Readonlyborder: "--ui-border"
    • ReadonlyborderStrong: "--ui-border-strong"
    • ReadonlycaptionBg: "--ui-caption-bg"
    • ReadonlycaptionText: "--ui-caption-text"
    • ReadonlycellHeight: "--ui-cell-height"
    • ReadonlycheckboxSize: "--ui-checkbox-size"
    • ReadonlychipBg: "--ui-chip-bg"
    • ReadonlychipDismiss: "--ui-chip-dismiss"
    • ReadonlychipText: "--ui-chip-text"
    • ReadonlycontrolHeight: "--ui-control-height"
    • Readonlydensity: "--ui-density"
    • ReadonlydensityScale: "--ui-density-scale"
    • Readonlyerror: "--ui-error"
    • Readonlyfallback: "--ui-fallback"
    • Readonlyfont: "--ui-font"
    • ReadonlyfontBadge: "--ui-font-badge"
    • ReadonlyfontBody: "--ui-font-body"
    • ReadonlyfontCaption: "--ui-font-caption"
    • ReadonlyfontFooter: "--ui-font-footer"
    • ReadonlyfontHeader: "--ui-font-header"
    • ReadonlyfontSortIcon: "--ui-font-sort-icon"
    • Readonlygap: "--ui-gap"
    • ReadonlyhoverBg: "--ui-hover-bg"
    • ReadonlyinlinePadding: "--ui-inline-padding"
    • ReadonlylinkHover: "--ui-link-hover"
    • ReadonlylsCaption: "--ui-ls-caption"
    • ReadonlylsHeader: "--ui-ls-header"
    • Readonlymuted: "--ui-muted"
    • ReadonlyonError: "--ui-on-error"
    • ReadonlyonPrimaryContainer: "--ui-on-primary-container"
    • ReadonlyonTertiary: "--ui-on-tertiary"
    • ReadonlyplaceholderBg: "--ui-placeholder-bg"
    • ReadonlyplaceholderText: "--ui-placeholder-text"
    • ReadonlyprimaryContainer: "--ui-primary-container"
    • ReadonlyradioSize: "--ui-radio-size"
    • Readonlyradius: "--ui-radius"
    • ReadonlyresizeHandleWidth: "--ui-resize-handle-width"
    • ReadonlyresizeIndicatorWidth: "--ui-resize-indicator-width"
    • ReadonlyrowIndexWidth: "--ui-row-index-width"
    • Readonlysecondary: "--ui-secondary"
    • ReadonlyselectedBg: "--ui-selected-bg"
    • ReadonlyselectedHoverBg: "--ui-selected-hover-bg"
    • ReadonlyselectionColWidth: "--ui-selection-col-width"
    • Readonlyshadow: "--ui-shadow"
    • ReadonlyshadowDropdown: "--ui-shadow-dropdown"
    • ReadonlyshadowLg: "--ui-shadow-lg"
    • ReadonlyshadowMd: "--ui-shadow-md"
    • ReadonlyshadowSm: "--ui-shadow-sm"
    • ReadonlyshadowXl: "--ui-shadow-xl"
    • Readonlysurface: "--ui-surface"
    • Readonlysurface2: "--ui-surface-2"
    • ReadonlysurfaceVariant: "--ui-surface-variant"
    • Readonlytertiary: "--ui-tertiary"
    • Readonlytext: "--ui-text"
    • ReadonlytextMuted: "--ui-text-muted"
    • Readonlythumb: "--ui-thumb"
    • Readonlytrack: "--ui-track"
    • ReadonlyviewportHeight: "--ui-viewport-height"
    import { UI_TOKENS } from '@theredhead/lucid-theme';

    const accent = getComputedStyle(el).getPropertyValue(UI_TOKENS.accent);
    el.style.setProperty(UI_TOKENS.surface, '#fff');

    Settings

    Member Visibility