g3-toolkit API Reference
    Preparing search index...

    Variable DESIGN_TOKENSConst

    DESIGN_TOKENS: {
        deemphasizedOpacity: "0.25";
        easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)";
        easeOut: "cubic-bezier(0.16, 1, 0.3, 1)";
        focusRingOffset: "2px";
        focusRingWidth: "2px";
        fontFamily: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
        fontMono: "'IBM Plex Mono', 'Fira Code', 'Consolas', monospace";
        fontSizeLg: "0.9375rem";
        fontSizeMd: "0.8125rem";
        fontSizeSm: "0.75rem";
        fontSizeXl: "1.125rem";
        fontSizeXs: "0.6875rem";
        fontWeight: "400";
        fontWeightMedium: "500";
        fontWeightSemibold: "600";
        lineHeight: "1.5";
        radiusFull: "9999px";
        radiusLg: "8px";
        radiusMd: "6px";
        radiusSm: "4px";
        selectionBarWidth: "3px";
        selectionFillAlpha: "0.10";
        selectionGapWidth: "2px";
        selectionHaloWidth: "3px";
        shadowInset: "inset 0 1px 2px rgba(0,0,0,0.06)";
        shadowLg: "0 4px 16px rgba(0,0,0,0.12)";
        shadowMd: "0 2px 8px rgba(0,0,0,0.08)";
        shadowSm: "0 1px 2px rgba(0,0,0,0.06)";
        space1: "4px";
        space2: "8px";
        space3: "12px";
        space4: "16px";
        space5: "20px";
        space6: "24px";
        space8: "32px";
        transitionBase: "200ms ease";
        transitionFast: "120ms ease";
        transitionSlow: "300ms ease";
        zDropdown: "400";
        zModal: "1000";
        zOverlay: "800";
        zSticky: "100";
        zTooltip: "1200";
    } = ...

    Design tokens: spacing, typography, shadows, radii, transitions.

    These extend the color-only G3tTheme with the spatial and typographic constants needed for a polished UI. Injected as CSS custom properties alongside the color tokens.

    Type Declaration

    • ReadonlydeemphasizedOpacity: "0.25"
    • ReadonlyeaseInOut: "cubic-bezier(0.65, 0, 0.35, 1)"
    • ReadonlyeaseOut: "cubic-bezier(0.16, 1, 0.3, 1)"
    • ReadonlyfocusRingOffset: "2px"
    • ReadonlyfocusRingWidth: "2px"
    • ReadonlyfontFamily: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    • ReadonlyfontMono: "'IBM Plex Mono', 'Fira Code', 'Consolas', monospace"
    • ReadonlyfontSizeLg: "0.9375rem"
    • ReadonlyfontSizeMd: "0.8125rem"
    • ReadonlyfontSizeSm: "0.75rem"
    • ReadonlyfontSizeXl: "1.125rem"
    • ReadonlyfontSizeXs: "0.6875rem"
    • ReadonlyfontWeight: "400"
    • ReadonlyfontWeightMedium: "500"
    • ReadonlyfontWeightSemibold: "600"
    • ReadonlylineHeight: "1.5"
    • ReadonlyradiusFull: "9999px"
    • ReadonlyradiusLg: "8px"
    • ReadonlyradiusMd: "6px"
    • ReadonlyradiusSm: "4px"
    • ReadonlyselectionBarWidth: "3px"
    • ReadonlyselectionFillAlpha: "0.10"
    • ReadonlyselectionGapWidth: "2px"
    • ReadonlyselectionHaloWidth: "3px"
    • ReadonlyshadowInset: "inset 0 1px 2px rgba(0,0,0,0.06)"
    • ReadonlyshadowLg: "0 4px 16px rgba(0,0,0,0.12)"
    • ReadonlyshadowMd: "0 2px 8px rgba(0,0,0,0.08)"
    • ReadonlyshadowSm: "0 1px 2px rgba(0,0,0,0.06)"
    • Readonlyspace1: "4px"
    • Readonlyspace2: "8px"
    • Readonlyspace3: "12px"
    • Readonlyspace4: "16px"
    • Readonlyspace5: "20px"
    • Readonlyspace6: "24px"
    • Readonlyspace8: "32px"
    • ReadonlytransitionBase: "200ms ease"
    • ReadonlytransitionFast: "120ms ease"
    • ReadonlytransitionSlow: "300ms ease"
    • ReadonlyzDropdown: "400"
    • ReadonlyzModal: "1000"
    • ReadonlyzOverlay: "800"
    • ReadonlyzSticky: "100"
    • ReadonlyzTooltip: "1200"

    Settings

    Member Visibility