Defaults Core

The `defaults.css` file applies structural styles and basic appearance to HTML elements using design tokens. It provides consistent typography, form styling, an

<article>
  <span eyebrow>Default typography</span>
  <h2>A useful heading</h2>
  <p>Readable body copy with an <a href="/guide">ordinary link</a>.</p>
  <button type="button">Native button</button>
</article>

<article class="prose">
  <blockquote>Good defaults make semantics easy.</blockquote>
  <ul><li>Readable rhythm</li><li><mark>Visible emphasis</mark></li></ul>
  <p><abbr title="Cascading Style Sheets">CSS</abbr> remains native HTML.</p>
</article>

Overview

The defaults.css file applies structural styles and basic appearance to HTML elements using design tokens. It provides consistent typography, form styling, and component foundations while maintaining separation between structure and theme colors.

Key Features

• Layer Organization: Uses @layer defaults for cascade control
• Token Integration: Consumes variables from theme and tokens layers
• Structural Focus: Defines spacing, typography, and layout without colors
• Component Foundations: Basic styles for buttons, inputs, cards
• Accessibility: Focus management and reduced motion support

Typography System

Base Body Styles

• Font Family: System UI fonts with smoothing
• Line Height: Configurable via --body-line-height (default: 1.5)
• Font Smoothing: Cross-browser smoothing via --font-smoothing-webkit and --font-smoothing-moz
• Scroll Behavior: Smooth scrolling via --scroll-behavior
• Text Rendering: Optimized for legibility
• Hyphenation: Automatic for better text flow

Heading Hierarchy

h1 { font-size: var(--font-size-h1, 2.5rem); }
h2 { font-size: var(--font-size-h2, 2.0rem); }
h3 { font-size: var(--font-size-h3, 1.75rem); }
h4 { font-size: var(--font-size-h4, 1.5rem); }
h5 { font-size: var(--font-size-h5, 1.25rem); }
h6 { font-size: var(--font-size-h6, 1.0rem); }

Text Elements

• Paragraphs: Standard line height and color
• Lists: Proper indentation and spacing
• Links: Underline styling with transitions
• Code: Monospace font with background/border structure

Form Elements

Input Structure

• Padding: Consistent internal spacing
• Borders: Standardized width and radius
• Transitions: Smooth color and shadow changes
• Width: Full width by default

Button Structure

• Padding: Vertical and horizontal spacing
• Border Radius: Medium radius
• Transitions: Multi-property animations
• Hover Effects: Transform and shadow changes

Select Elements

• Arrow Spacing: Reserved space for custom arrow
• Appearance: Consistent with input styling

Checkbox/Radio

• Custom Appearance: Removed native styling
• Sizing: Fixed square geometry without inheriting text-input padding
• Indicators: A checkmark for checkboxes and a centered dot for radios
• Tokens: --choice-control-*, --checkbox-indicator-*, and --radio-indicator-size control geometry and color

Layout Components

Container

.container {
  width: min(100% - var(--space-container-padding), var(--width-container-max));
  margin-inline: auto;
}

Box Utility

.box {
  padding: var(--b-p, 0);
  margin: var(--b-m, 0);
  border-width: var(--b-bw, 0);
  /* Additional properties for flexible box styling */
}

Component Foundations

Button Component

• Base Styling: Surface background with outline border
• Hover States: Semantic background/border change with a small lift
• Active States: Press transform, active outline, and inset feedback
• Focus States: Thick outline with offset
• Disabled States: Reduced opacity and muted colors

Native buttons, input buttons, .button, and .form-button share the same interaction inputs: --button-*-background, --button-*-border-color, --button-*-color, --button-transition-*, --transform-button-*, and --shadow-button-*. Color variants can replace state colors without replacing the motion or focus contract.

Input Field Component

• Background: Subtle surface
• Focus Ring: Box shadow with theme color
• Placeholder: Muted text color
• Validation: Error state styling

Card Component

• Structure: Rounded container with padding
• Shadow: Subtle elevation
• Auto-Contrast: Dynamic text color calculation

Accessibility Features

Focus Management

• Visible Focus: Outline-based focus indicators
• Offset: Proper spacing from element bounds
• Consistency: Unified focus ring across components

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Target Scrolling

:target {
  scroll-margin-block-start: var(--space-target-margin, 5ex);
}

View Transitions

Basic structure for page transitions:

• Duration/Timing: Configurable via variables
• Fade Effects: Simple opacity transitions
• Z-index Management: Proper layering

Color Integration Strategy

Separation of Concerns

• Structure in Defaults: Spacing, sizing, layout
• Colors in Theme: Applied via CSS custom properties
• Dynamic Colors: Auto-contrast calculations

Theme Variable Usage

.button {
  background-color: var(--surface-default);
  color: var(--text-default);
  border-color: var(--outline-default);
}

Table Styling

Structure Only

• Width: Full width
• Borders: Consistent border model
• Cell Padding: Standardized spacing
• Header Styling: Font weight and positioning

Color Integration

• Header Background: Theme-based
• Row Hover: Dynamic background with auto-contrast
• Border Colors: Outline system

Code and Content Elements

Code Blocks

• Font: Monospace
• Padding: Block-level spacing
• Overflow: Horizontal scrolling
• Border Radius: Consistent with forms

Inline Code

• Padding: Inline spacing
• Background/Border: Subtle differentiation

Blockquotes

• Indentation: Logical left border
• Spacing: Consistent margins

Utility Classes

Basic Utilities

• .display-none: Hide elements
• .container: Centered content wrapper
• .box: Flexible box styling
• .cq-container: Container query setup

Component Classes

• .button: Base button styling
• .input-field: Legacy form-control alias normalized by components/form.css
• .card: Basic card structure
• .contrast-pair: Auto-contrast text on colored backgrounds

Responsive Considerations

Container Queries Setup

.cq-container, .cq {
  container-type: var(--cq-type, inline-size);
  container-name: var(--cq-name, default);
}

Breakpoint Integration

Components can respond to global breakpoint state set in base.css.

Browser Support

The defaults layer follows the shared Browser Support baseline. Container-responsive enhancements retain their ordinary block or inline layout when a particular query does not apply.

Integration with Framework

This layer provides the structural foundation that other layers enhance:

• Base Layer: Provides tokens and resets
• Theme Layer: Adds semantic colors
• Components Layer: Adds interactive behavior
• Utilities Layer: Adds helper classes

Customization

Override default variables to customize:

:root {
  --font-size-h1: 3rem; /* Larger headings */
  --space-container-padding: 2rem; /* More side padding */
  --radius-md: 8px; /* Rounder corners */
  --choice-control-size: 1.25rem; /* Larger checkboxes and radios */
}