Theming

Customize

Color modes live in one sheet: src/scss/base/_themes.scss. Light is the full palette on :root. Dark is a patch — only the tokens that change. Structural values (type, radii, blur) stay on light.

1. Global `:root`

:root {
  --tg-primary: #c084fc;
  --tg-primary-rgb: 192, 132, 252;
  --tg-body-bg: #c8c2d4;
  --spacing: 0.25rem;
  --radius-md: 12px;
  --font-sans: "Inter", system-ui, sans-serif;
  --tg-neu-shadow-drop: 8px 8px 16px #a6a6a6, -8px -8px 16px #e0e0e0;
  --tg-glass-blur: blur(24px);
}

Keep the matching *-rgb channel in sync. Light and dark palettes live in src/scss/base/_themes.scss. btn-dark uses --tg-dark (always a dark fill), not page ink.

2. Spacing scale

Double --spacing and p-4, gap-4, and g-4 all grow. Left is default; right is --spacing: 0.5rem.

Default

p-4 gap-4

--spacing: 0.5rem

p-4 gap-4

3. Scoped brand

.demo-aurora

badge-primary text-primary link

.demo-aurora {
  --tg-primary: #c084fc;
  --tg-primary-rgb: 192, 132, 252;
}

4. Radius and clay

Tight radii

--radius-md: 6px;
--radius-lg: 10px;

Warm clay

morph-neu-inset

--tg-body-bg: #d7c4b0;
--tg-neu-shadow-drop: 8px 8px 16px #b59d86,
  -8px -8px 16px #f3e6d6;

5. Nested themes

theme-dark island

Canvas, ink, and shadows flip even if the page is light.

theme-light island

Force the default palette inside a dark page.

CSS variables catalog

Public API is --tg-{name} from the light map in src/scss/base/_themes.scss, plus structural tokens in _tokens.scss. --clr-*, --glass-*, --hybrid-*, and --neu-shadow-* are aliases of those --tg-* values. Dark mode only patches ink, canvas, shadows, and glass/hybrid fills — pastels inherit from light.

Brand and semantic

Token	Role
`--tg-primary`	Brand fill, focus, `btn-primary`
`--tg-primary-rgb`	RGB channels for tints
`--tg-secondary`	Muted accent / `btn-secondary`
`--tg-secondary-rgb`	RGB channels
`--tg-success`	Success accent
`--tg-success-rgb`	RGB channels
`--tg-info`	Info accent
`--tg-info-rgb`	RGB channels
`--tg-warning`	Warning accent
`--tg-warning-rgb`	RGB channels
`--tg-danger`	Danger accent
`--tg-danger-rgb`	RGB channels
`--tg-dark`	Always-dark fill for `btn-dark`
`--tg-dark-rgb`	RGB channels

Named palette

Token	Role
`--tg-blue`	Named blue
`--tg-indigo`	Named indigo
`--tg-purple`	Named purple
`--tg-pink`	Named pink
`--tg-red`	Named red
`--tg-orange`	Named orange
`--tg-yellow`	Named yellow
`--tg-green`	Named green
`--tg-teal`	Named teal
`--tg-cyan`	Named cyan
`--tg-gray`	Mid gray
`--tg-gray-dark`	Dark gray alias in the map
`--tg-gray-100` … `--tg-gray-900`	Gray ramp

Body, ink, and links

Token	Role
`--tg-body-color`	Page ink (also `--clr-dark`)
`--tg-body-color-rgb`	RGB channels
`--tg-body-bg`	Canvas / neu fill
`--tg-body-bg-rgb`	RGB channels
`--tg-heading-color`	Heading ink
`--tg-code-color`	Inline code ink
`--tg-link-color`	`link-primary` color
`--tg-link-color-rgb`	RGB channels
`--tg-link-decoration`	Link underline
`--tg-link-hover-color`	Link hover
`--tg-link-hover-color-rgb`	RGB channels
`--tg-emphasis-color`	Strongest ink
`--tg-emphasis-color-rgb`	RGB channels
`--tg-secondary-color`	Muted copy / `text-muted`
`--tg-secondary-color-rgb`	RGB channels
`--tg-secondary-bg`	Muted surface
`--tg-secondary-bg-rgb`	RGB channels
`--tg-tertiary-color`	Quiet copy
`--tg-tertiary-color-rgb`	RGB channels
`--tg-tertiary-bg`	Quiet surface
`--tg-tertiary-bg-rgb`	RGB channels
`--tg-highlight-bg`	Mark / highlight fill
`--tg-highlight-color`	Highlight ink

Emphasis, subtle fills, and subtle borders

Token	Role
`--tg-primary-text-emphasis`	Stronger brand ink
`--tg-secondary-text-emphasis` `--tg-success-text-emphasis` `--tg-info-text-emphasis` `--tg-warning-text-emphasis` `--tg-danger-text-emphasis` `--tg-light-text-emphasis` `--tg-dark-text-emphasis`	Semantic emphasis ink
`--tg-primary-bg-subtle`	Tinted brand surface
`--tg-secondary-bg-subtle` `--tg-success-bg-subtle` `--tg-info-bg-subtle` `--tg-warning-bg-subtle` `--tg-danger-bg-subtle` `--tg-light-bg-subtle` `--tg-dark-bg-subtle`	Semantic subtle fills
`--tg-primary-border-subtle`	Tinted brand edge
`--tg-secondary-border-subtle` `--tg-success-border-subtle` `--tg-info-border-subtle` `--tg-warning-border-subtle` `--tg-danger-border-subtle` `--tg-light-border-subtle` `--tg-dark-border-subtle`	Semantic subtle borders

Glass, hybrid, and neu

Token	Role
`--tg-glass-bg`	Default glass fill
`--tg-glass-bg-raised`	Raised glass / surface
`--tg-glass-bg-pressed`	Pressed glass
`--tg-glass-blur`	Frost amount, e.g. `blur(20px)` — used by `tg-glass` / `tg-glass-frosted`
`--tg-glass-menu-blur`	Stronger blur for select menus (default `blur(28px)`)
`--tg-glass-menu-bg`	Denser translucent fill for nested select menus
`--tg-glass-border`	Glass edge
`--tg-glass-shadow`	Outer drop + inset highlight stack
`--tg-glass-ripple`	Click ripple on glass/hybrid buttons
`--tg-hybrid-bg`	Hybrid fill on neu shadows
`--tg-hybrid-bg-pressed`	Pressed hybrid
`--tg-neu-shadow-drop`	Raised clay (`5px 5px 13px` family)
`--tg-neu-shadow-inset`	Sunken clay
`--tg-neu-shadow-lift`	Deeper raised clay / interactive lift

Border, radius, shadow, and focus

Token	Role
`--tg-border-width` `--tg-border-style`	Default border drawing
`--tg-border-color` `--tg-border-color-translucent`	Default edges
`--tg-border-subtle` `--tg-hr-color` `--tg-code-bg`	Dividers and code chips
`--tg-border-radius` `--tg-border-radius-sm` `--tg-border-radius-lg` `--tg-border-radius-xl` `--tg-border-radius-xxl` `--tg-border-radius-2xl` `--tg-border-radius-pill`	Theme radius aliases
`--radius-sm` `--radius-md` `--radius-lg` `--radius-squircle` `--radius-pill`	Structural radii used by components
`--tg-box-shadow` `--tg-box-shadow-sm` `--tg-box-shadow-lg` `--tg-box-shadow-inset`	Generic shadows
`--tg-focus-ring-width` `--tg-focus-ring-opacity` `--tg-focus-ring-color` `--tg-focus-ring-blur`	Focus ring
`--tg-form-valid-color` `--tg-form-valid-border-color`	Valid field
`--tg-form-invalid-color` `--tg-form-invalid-border-color`	Invalid field

Type, spacing, and breakpoints

Token	Role
`--tg-body-font-family` `--tg-body-font-size` `--tg-body-font-weight` `--tg-body-line-height`	Body type
`--tg-font-sans-serif` `--tg-font-monospace` `--tg-gradient`	Family aliases and optional gradient
`--font-sans` `--font-display` `--font-serif` `--font-mono`	Structural families
`--font-weight-normal` `--font-weight-medium` `--font-weight-bold`	Weights
`--fs-xs` … `--fs-6xl`	Type scale
`--line-height-tight` `--line-height-relaxed` `--line-height-loose`	Leading
`--letter-spacing-tight` `--letter-spacing-relaxed` `--letter-spacing-loose` `--letter-spacing-wide`	Tracking
`--spacing`	Drives `p-`, `m-`, `gap-`, `g-`
`--sz-1` … `--sz-12`	Named spacing steps
`--max-w-xs` … `--max-w-2xl` `--max-w-prose`	Measure
`--ease` `--duration` `--focus-offset`	Motion and focus offset
`--z-base` `--z-sticky` `--z-overlay`	Stacking
`--tg-breakpoint-sm` `--tg-breakpoint-md` `--tg-breakpoint-lg` `--tg-breakpoint-xl` `--tg-breakpoint-xxl`	576 / 768 / 992 / 1200 / 1400

Sass

Compile from the package entry. Partials are loaded with @use in a fixed order from tactileglass.scss.

@use 'tactileglass-css/src/scss/tactileglass.scss';

Override tokens after import with CSS variables (preferred), or fork theme maps in base/_themes.scss and recompile:

$tg-theme-light / $tg-theme-dark — color modes
$tg-colors — semantic utility / component palette
$tg-breakpoints + tg-infix — responsive utility generation

There is no Bootstrap-style $enable-* option map yet; carve unused layers by forking the entry @use list if you need a smaller sheet.

Optimize

Ship dist/tactileglass.min.css in production (npm run build).
Purge unused selectors with your bundler / Lightning CSS / PurgeCSS — class names are static Bootstrap-style strings.
Prefer CSS variable overrides over duplicating component CSS.
Optional: compile a custom entry that drops unused component partials (alerts, pagination, …) if your app never uses them.