Theme variables | DotNaos UI

The reference below is rendered from the public DotNaos theme contract. Foundation variables keep Tailwind's original names; only semantic colors and corner shapes add DotNaos-specific names inside the appropriate Tailwind namespace.

light

The same semantic roles, different values.

data-theme="light"

Shared surface

Components consume roles instead of fixed colors.

PrimaryNeutral

dark

The same semantic roles, different values.

data-theme="dark"

Shared surface

Components consume roles instead of fixed colors.

PrimaryNeutral

Color and surfaces

Appearance-sensitive roles. These values change between light and dark themes.

--color-bg-0App canvas and primary content background.

--color-bg-1Subtle panels and inset fields.

--color-bg-2Raised or emphasized neutral surfaces.

--color-borderDefault borders and separators.

--color-textPrimary text and icons.

--color-text-mutedSecondary text and subdued icons.

--color-text-invertedStable light text for intentionally dark media or fixed dark surfaces.

--color-text-on-control-strongContrast-safe text and icons on high-emphasis neutral controls.

--color-text-on-accentContrast-safe text on accent and solid status fills.

--color-accentPrimary interaction and selection color.

--color-accent-hoverHover state for accent-filled controls.

--color-dangerDestructive actions and error states.

--color-warningWarnings that require attention.

--color-successSuccessful or healthy states.

--color-text-on-status-fillForeground on solid status badges.

--color-status-muted-fillSolid unknown or neutral status background.

--color-status-accent-fillSolid active status background.

--color-status-success-fillSolid successful status background.

--color-status-warning-fillSolid attention-required status background.

--color-status-danger-fillSolid failed status background.

--color-status-pendingOrange tint for pending lifecycle actions.

--color-text-on-status-pendingForeground on tinted pending lifecycle actions.

--color-controlNeutral control background.

--color-control-hoverHovered neutral control background.

--color-control-activeSelected neutral control background.

--color-control-strongHigh-emphasis neutral control background, inverse to the canvas.

--color-control-strong-hoverHovered high-emphasis neutral control background.

--color-media-controlStable dark control background over images and other media.

--color-media-control-hoverHovered stable dark control background over images and other media.

--color-overlayBackdrop behind dialogs and blocking layers.

--color-focus-ringKeyboard focus indicator.

Spacing

Tailwind's numeric spacing utilities all derive from this base unit.

--spacing4 px base unit for utilities such as gap-3 and p-5.

Radius

Tailwind's native radius scale, overridden with DotNaos values.

--radius-xs2 px

--radius-sm4 px

--radius-md8 px

--radius-lg12 px

--radius-xl20 px

--radius-2xl32 px

--radius-3xl52 px

--radius-4xl84 px

Corner shape

Progressive CSS corner shapes used when the browser supports them.

--corner-shape-squareSquare.shape

--corner-shape-squircleSquircle.shape

--corner-shape-roundRound.shape

--corner-shape-bevelBevel.shape

--corner-shape-scoopScoop.shape

--corner-shape-notchNotch.shape

Typography

Tailwind's native font family and UI type variables.

--font-sansDefault interface font stack.Aa

--font-monoCode and fixed-width data font stack.Aa

--text-xsSmall UI text, 12 px.

--text-xs--line-heightSmall UI line height.line-height

--text-smDefault UI text, 14 px.

--text-sm--line-heightDefault UI line height.line-height

--text-baseLarge UI text, 16 px.

--text-base--line-heightLarge UI line height.line-height

Motion

Tailwind's default transition behavior. Explicit durations use duration-100, duration-200, or duration-300.

--default-transition-durationDefault transition, 200 ms.duration

--default-transition-timing-functionDefault CSS ease curve.timing-function

Elevation

Appearance-sensitive shadows for raised surfaces.

--shadow-smSubtle separation.

--shadow-mdMenus and floating controls.

--shadow-lgDialogs and prominent overlays.

Chat composer

Fixed dark appearance; defaults preserve the approved chat palette in every theme.

--color-chat-textText on the fixed dark chat surfaces.

--color-chat-surfaceComposer surface and contrasting primary-control ink.

--color-chat-borderComposer border and quiet icon hover surface.

--color-chat-border-focusFocused composer border.

--color-chat-caretComposer text caret.

--color-chat-placeholderComposer placeholder.

--color-chat-primaryComposer send and voice control surface.

--color-chat-primary-hoverHovered composer primary control.

--color-chat-focus-ringFocus rings on the fixed dark chat controls.

--color-chat-contextContext usage indicator.

--color-chat-trigger-hoverHovered composer menu trigger.

--color-chat-text-hoverHovered chat trigger and help-link text.

Approval menu

Fixed dark appearance; defaults preserve the approved chat palette in every theme.

--color-approval-warningFull-access approval warning.

--color-approval-dangerDangerous approval choice.

--color-approval-successSuccessful approval choice.

--color-approval-mutedMuted approval choice.

--color-approval-triggerApproval trigger surface.

--color-approval-trigger-hoverHovered approval trigger.

--color-approval-borderApproval popup border.

--color-approval-surfaceApproval popup surface.

--color-approval-shadowApproval popup shadow color.

--color-approval-helpApproval heading and help icon.

--color-approval-choice-hoverHovered approval choice.

--color-approval-info-activeActive approval information icon.

--color-approval-info-surfaceActive approval information surface.

--color-approval-tooltip-borderApproval tooltip border.

--color-approval-tooltip-surfaceApproval tooltip surface.

--color-approval-tooltip-shadowApproval tooltip shadow color.

--color-approval-tooltip-textApproval tooltip text.

Reasoning controls

Fixed dark appearance; defaults preserve the approved chat palette in every theme.

--color-reasoning-foregroundReasoning labels, thumb and hovered stops.

--color-reasoning-triggerChatGPT effort trigger surface.

--color-reasoning-trigger-textChatGPT effort trigger text.

--color-reasoning-trigger-hoverChatGPT trigger hover surface.

--color-reasoning-focusReasoning trigger and action focus ring.

--color-reasoning-borderChatGPT effort popup border.

--color-reasoning-surfaceChatGPT effort popup surface.

--color-reasoning-chevronReasoning label chevron.

--color-reasoning-pro-labelPro text and shimmer endpoints.

--color-reasoning-pro-shimmer-lightLight stop in the Pro label shimmer.

--color-reasoning-pro-shimmer-midMiddle stop in the Pro label shimmer.

--color-reasoning-trackChatGPT unfilled effort track.

--color-reasoning-track-focusFocused effort track outline.

--color-reasoning-accentOrdinary effort labels, fill and active fast mode.

--color-reasoning-stepInactive effort stop.

--color-reasoning-step-passedPassed effort stop.

--color-reasoning-step-haloHovered effort stop halo.

--color-reasoning-thumb-shadowDragged effort thumb shadow.

--color-reasoning-thumb-glowHighlighted effort thumb glow.

--color-reasoning-pro-surfacePro fill beneath the animated gradient.

--color-reasoning-pro-glowRadial glow in the Pro fill.

--color-reasoning-pro-startStart of the Pro fill gradient.

--color-reasoning-pro-middleMiddle of the Pro fill gradient.

--color-reasoning-pro-endEnd of the Pro fill gradient.

--color-reasoning-sparkleAmbient effort sparkle.

--color-reasoning-model-hoverHovered central model button.

--color-reasoning-option-hoverHovered or focused model option.

--color-reasoning-option-focusModel option focus inset.

--color-reasoning-descriptionModel option description.

--color-reasoning-trigger-effortEffort text in the composer trigger.

--color-reasoning-ultraUltra label and active fast-mode lightning.

--color-reasoning-codex-borderCodex effort popup border.

--color-reasoning-codex-surfaceCodex effort popup surface.

--color-reasoning-model-nameCodex model subtitle.

--color-reasoning-codex-trackCodex unfilled effort track.

--color-reasoning-codex-fillCodex ordinary effort fill.

--color-reasoning-ultra-glowRadial glow in the Ultra gradient.

--color-reasoning-ultra-startStart of the Ultra fill gradient.

--color-reasoning-ultra-middleMiddle of the Ultra fill gradient.

--color-reasoning-ultra-endEnd of the Ultra fill gradient.

--color-reasoning-menu-titleModel menu heading.

--color-reasoning-actionInactive reasoning action icon.

--color-reasoning-action-hoverHovered reasoning action surface.

--color-reasoning-action-text-hoverHovered inactive reasoning action icon.

--color-reasoning-fast-startStart of the fast-mode overlay.

--color-reasoning-fast-endEnd of the fast-mode overlay.

--color-reasoning-meteorFast-mode shooting-star highlight.

Content width

Tailwind's native container width scale.

--container-3xl48 rem content width for chat and page layouts.