Phi
Phi
Colors
@dicehub/phiv1.0.0-beta.1

Colors

Phi uses semantic Tailwind color utilities that adapt to light mode, dark mode, and product themes.

Usage

Always use semantic tokens instead of raw Tailwind colors. Select a token by its role. The same class then stays correct when the mode or theme changes.

Tailwind Setup

Register Phi before Tailwind in your application stylesheet.

@import "@dicehub/phi/styles/tailwind";
@import "tailwindcss";

@source "../node_modules/@dicehub/phi/dist";

Correct

<template>
  <section class="bg-phi-base text-phi-default border border-phi-hairline">
    <button class="bg-phi-accent text-phi-accent-contrast hover:bg-phi-accent-hover">
      Save changes
    </button>
    <button class="bg-phi-control text-phi-default">Cancel</button>
  </section>
</template>

Incorrect

<template>
  <!-- Never use raw palette colors or dark: overrides. -->
  <section class="bg-white text-gray-950 dark:bg-gray-900 dark:text-white">
    <button class="bg-blue-600 hover:bg-blue-700">Save changes</button>
  </section>
</template>

Mode

Set data-mode on a parent element. Do not add dark: classes. Phi defines explicit light and dark values for each semantic token.

<html data-mode="light">
  <body><!-- Semantic utilities use their light values. --></body>
</html>

<html data-mode="dark">
  <body><!-- The same utilities now use their dark values. --></body>
</html>

Themes

A theme changes token values but keeps the utility names stable. Set data-theme on the same element as data-mode, or scope it to one product area.

<!-- After adding acme to the theme config -->
<html data-mode="dark" data-theme="acme">
  <body>
    <App />
  </body>
</html>

Available Themes

  • phi — default product-agnostic Phi theme

Theme Generator

The canonical token contract is packages/phi/scripts/theme-generator/config.ts. Generated CSS is checked in and package checks detect drift.

# Show every generated token and its purpose
pnpm --filter @dicehub/phi codegen:themes --list

# Generate the base theme and every configured override
pnpm --filter @dicehub/phi codegen:themes

# Preview or verify without writing files
pnpm --filter @dicehub/phi codegen:themes --dry-run
pnpm --filter @dicehub/phi check:themes

Creating a New Theme

Add the theme name to AVAILABLE_THEMES, then add overrides only to tokens that change. Every token without an override inherits its light and dark values from the base phi theme.

// In scripts/theme-generator/config.ts
export const AVAILABLE_THEMES = ["phi", "acme"] as const;

export const THEME_CONFIG = {
  baseTheme: "phi",
  themes: AVAILABLE_THEMES,
  color: {
    "phi-accent": token(
      "oklch(0.5772 0.2324 260)",
      "oklch(0.51948 0.2324 260)",
      "Primary accent background",
      {
        theme: {
          acme: {
            light: "oklch(0.55 0.16 175)",
            dark: "oklch(0.7 0.14 175)",
          },
        },
      },
    ),
  },
};

Run pnpm --filter @dicehub/phi codegen:themes. The generator emits the scoped data-theme declarations and the package check detects stale output.

Semantic Tokens

Semantic names describe intent, not hue. For example, bg-phi-danger means a destructive indicator. It does not promise a fixed red value.

Surface Hierarchy

Move from the outer canvas to nested surfaces. Do not select a token only because its current shade looks correct.

UtilityPurpose
bg-phi-canvasOutermost page background.
bg-phi-baseDefault component background.
bg-phi-elevatedSurface that sits above the base layer.
bg-phi-recessedInset controls and grouped navigation.
bg-phi-tintQuiet table rows and hover states.
bg-phi-contrastHigh-contrast inverted surface.
Canvas → BaseWorkspace
ElevatedActive work
RecessedGrouped controls
Contrast

Accent

UtilityPurpose
bg-phi-accentPrimary action or selected state.
bg-phi-accent-hoverHover state for an accent surface.
text-phi-accentAccent-colored text on a neutral surface.
text-phi-accent-contrastText and icons on an accent surface.

Semantic Status Colors

Each status has three roles: a solid indicator, a low-emphasis tint, and readable text.

UtilityPurpose
bg-phi-info / fill-phi-infoInformation indicator or icon.
bg-phi-info-tintInformation background.
text-phi-infoInformation text.
bg-phi-success / fill-phi-successSuccess indicator or icon.
bg-phi-success-tintSuccess background.
text-phi-successSuccess text.
bg-phi-warning / fill-phi-warningWarning indicator or icon.
bg-phi-warning-tintWarning background.
text-phi-warningWarning text.
bg-phi-danger / fill-phi-dangerError or destructive indicator.
bg-phi-danger-tintError or destructive background.
text-phi-dangerError or destructive text.

Solid color tokens support bg-*, border-*, ring-*, fill-*, and stroke-*. Text tokens use a separate contrast-safe namespace.

Info Deployment starts in five minutes.
Success Changes are live.
Warning Review the pending update.
Danger The deployment failed.

Text Colors

UtilityPurpose
text-phi-defaultPrimary body text.
text-phi-strongHeadings and important labels.
text-phi-subtleDescriptions and secondary labels.
text-phi-inactiveDisabled or inactive text.
text-phi-placeholderInput placeholder text.
text-phi-inverseText on a high-contrast surface.
text-phi-linkLink text.

Borders & Rings

UtilityPurpose
border-phi-hairline / ring-phi-hairlineSubtle edge between flat surfaces.
border-phi-line / ring-phi-lineDefined edge used with an elevated surface.
ring-phi-focusStrong keyboard focus ring.
ring-phi-focus-softSoft outer focus halo.

Token Reference

This reference comes directly from the generator config. Toggle the page mode to inspect the live result; each card also shows both source values.

Displaying 59 generated tokens

Text Colors 13

text-colorPrimary body text
--text-color-phi-default
Lightoklch(0.205 0 0)
Darkoklch(0.97 0 0)
text-colorText on high-contrast surfaces
--text-color-phi-inverse
Lightoklch(0.97 0 0)
Darkoklch(0.205 0 0)
text-colorHeadings and important labels
--text-color-phi-strong
Lightoklch(0.145 0 0)
Darkoklch(0.985 0 0)
text-colorDescriptions and secondary labels
--text-color-phi-subtle
Lightoklch(0.556 0 0)
Darkoklch(0.708 0 0)
text-colorDisabled or inactive text
--text-color-phi-inactive
Lightoklch(0.87 0 0)
Darkoklch(0.439 0 0)
text-colorInput placeholder text
--text-color-phi-placeholder
Lightoklch(0.708 0 0)
Darkoklch(0.556 0 0)
text-colorAccent-colored text
--text-color-phi-accent
Lightoklch(0.488 0.243 264.376)
Darkoklch(0.707 0.165 254.624)
text-colorText and icons on accent backgrounds
--text-color-phi-accent-contrast
Lightrgb(255, 255, 255)
Darkrgb(255, 255, 255)
text-colorLink text
--text-color-phi-link
Lightoklch(0.424 0.199 265.638)
Darkoklch(0.707 0.165 254.624)
text-colorInformational text
--text-color-phi-info
Lightoklch(0.424 0.199 265.638)
Darkoklch(0.707 0.165 254.624)
text-colorSuccess text
--text-color-phi-success
Lightoklch(0.432 0.095 166.913)
Darkoklch(0.905 0.093 164.15)
text-colorWarning text
--text-color-phi-warning
Lightoklch(0.597 0.144 57.5)
Darkoklch(0.75 0.183 55.934)
text-colorError or destructive text
--text-color-phi-danger
Lightoklch(0.505 0.213 27.518)
Darkoklch(0.704 0.191 22.216)

Surface, State & Theme Colors 30

colorOutermost page canvas
--color-phi-canvas
Lightoklch(0.9875 0 0)
Darkoklch(0.1 0 0)
colorSlightly elevated surface
--color-phi-elevated
Lightoklch(0.98 0 0)
Darkoklch(0.12 0 0)
colorRecessed surface
--color-phi-recessed
Lightoklch(0.96 0 0)
Darkoklch(0.15 0 0)
colorDefault component surface
--color-phi-base
Lightrgb(255, 255, 255)
Darkoklch(0.17 0 0)
colorSubtle tinted surface
--color-phi-tint
Lightoklch(0.97 0 0)
Darkoklch(0.269 0 0)
colorHigh-contrast inverted surface
--color-phi-contrast
Lightoklch(0.085 0 0)
Darkoklch(0.985 0 0)
colorTransient overlay fill
--color-phi-overlay
Lightoklch(0.975 0 0)
Darkoklch(0.269 0 0)
colorForm control and secondary action surface
--color-phi-control
Lightrgb(255, 255, 255)
Darkoklch(0.205 0 0)
colorStrong interactive state
--color-phi-interact
Lightoklch(0.87 0 0)
Darkoklch(0.371 0 0)
colorNeutral filled state
--color-phi-fill
Lightoklch(0.922 0 0)
Darkoklch(0.269 0 0)
colorNeutral hover fill
--color-phi-fill-hover
Lightoklch(0.965 0 0)
Darkoklch(0.371 0 0)
colorPrimary accent background
--color-phi-accent
Lightoklch(0.5772 0.2324 260)
Darkoklch(0.51948 0.2324 260)
colorAccent background hover state
--color-phi-accent-hover
Lightoklch(0.488 0.243 264.376)
Darkoklch(0.488 0.243 264.376)
colorDefined surface edge
--color-phi-line
Lightoklch(0.145 0 0 / 0.1)
Darkoklch(0.32 0 0)
colorSubtle flat-surface edge
--color-phi-hairline
Lightoklch(0.935 0 0)
Darkoklch(0.269 0 0)
colorFocus ring
--color-phi-focus
Lightoklch(0.15 0 0)
Darkoklch(0.935 0 0)
colorSoft focus halo
--color-phi-focus-soft
Lightoklch(0.15 0 0 / 0.16)
Darkoklch(0.935 0 0 / 0.2)
colorShadow edge
--color-phi-shadow-edge
Lightoklch(0 0 0 / 0.12)
Darkoklch(1 0 0 / 0.1)
colorDrop shadow color
--color-phi-shadow-drop
Lightoklch(0 0 0 / 0.08)
Darkoklch(0 0 0 / 0.3)
colorArrow border edge fill for popover and tooltip arrows
--color-phi-arrow-edge
Lightoklch(0.145 0 0 / 0.1)
Darktransparent
colorArrow border stroke fill for popover and tooltip arrows
--color-phi-arrow-stroke
Lighttransparent
Darkoklch(0.32 0 0)
colorInformational background tint
--color-phi-info-tint
Lightoklch(0.932 0.032 255.6 / 0.45)
Darkoklch(0.38 0.145 265.5 / 0.22)
colorInformational indicator
--color-phi-info
Lightoklch(0.685 0.169 237.323)
Darkoklch(0.685 0.169 237.323)
colorSuccess background tint
--color-phi-success-tint
Lightoklch(0.962 0.043 156.7 / 0.57)
Darkoklch(0.393 0.096 152.3 / 0.2)
colorSuccess indicator
--color-phi-success
Lightoklch(0.596 0.145 163.225)
Darkoklch(0.765 0.177 163.223)
colorWarning background tint
--color-phi-warning-tint
Lightoklch(0.931 0.107 94.6 / 0.2)
Darkoklch(0.353 0.079 65 / 0.37)
colorWarning indicator
--color-phi-warning
Lightoklch(0.739 0.177 58.2)
Darkoklch(0.645 0.168 50)
colorError background tint
--color-phi-danger-tint
Lightoklch(0.936 0.032 17.7 / 0.42)
Darkoklch(0.429 0.176 28.7 / 0.17)
colorError or destructive indicator
--color-phi-danger
Lightoklch(0.637 0.237 25.331)
Darkoklch(0.577 0.245 27.325)
colorDestructive hover state
--color-phi-danger-hover
Lightoklch(0.577 0.245 27.325)
Darkoklch(0.505 0.213 27.518)

Component Colors 16

text-colorSubtle orange badge text
--text-color-phi-badge-orange-subtle
Lightoklch(0.47 0.157 37.304)
Darkoklch(0.901 0.076 70.697)
text-colorSubtle teal badge text
--text-color-phi-badge-teal-subtle
Lightoklch(0.437 0.078 188.216)
Darkoklch(0.91 0.096 180.426)
text-colorSubtle neutral badge text
--text-color-phi-badge-neutral-subtle
Lightoklch(0.269 0 0)
Darkoklch(0.922 0 0)
text-colorText on inverted badge backgrounds
--text-color-phi-badge-inverted
Lightrgb(255, 255, 255)
Darkrgb(0, 0, 0)
colorInverted badge fill
--color-phi-badge-inverted
Lightoklch(0.145 0 0)
Darkrgb(255, 255, 255)
colorRed badge fill
--color-phi-badge-red
Lightoklch(0.577 0.245 27.325)
Darkoklch(0.505 0.213 27.518)
colorOrange badge fill
--color-phi-badge-orange
Lightoklch(0.815 0.197 76)
Darkoklch(0.815 0.197 76)
colorGreen badge fill
--color-phi-badge-green
Lightoklch(0.596 0.145 163.225)
Darkoklch(0.508 0.118 165.612)
colorTeal badge fill
--color-phi-badge-teal
Lightoklch(0.549 0.096 184.565)
Darkoklch(0.511 0.096 186.391)
colorSubtle teal badge fill
--color-phi-badge-teal-subtle
Lightoklch(0.95 0.052 180.801)
Darkoklch(0.378 0.077 180.426)
colorBlue badge fill
--color-phi-badge-blue
Lightoklch(0.546 0.245 262.881)
Darkoklch(0.488 0.243 264.376)
colorPurple badge fill
--color-phi-badge-purple
Lightoklch(0.558 0.288 302.321)
Darkoklch(0.496 0.265 301.924)
colorNeutral badge fill
--color-phi-badge-neutral
Lightoklch(0.556 0 0)
Darkoklch(0.439 0 0)
colorInformation banner fill
--color-phi-banner-info
Lightoklch(0.932 0.032 255.585 / 0.7)
Darkoklch(0.379 0.146 265.522 / 0.5)
colorWarning banner fill
--color-phi-banner-warning
Lightoklch(0.973 0.071 103.193)
Darkoklch(0.554 0.135 66.442 / 0.5)
colorError banner fill
--color-phi-banner-danger
Lightoklch(0.936 0.032 17.7 / 0.42)
Darkoklch(0.429 0.176 28.7 / 0.17)