Packages

phia_ui

0.1.1
0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1

shadcn/ui-inspired component library for Phoenix LiveView with eject-based distribution. CSS-first theme system, 829 components across 20+ categories — Calendar, Chart, Animation, DnD, Editor, Collaboration, Typography, Navigation, Background, Surface, and more.

HexDocs

Current section

Files

Jump to
Readme
14 Versions
1 Dependency
Dependants
Files
Activity
phia_ui priv templates theme theme.css
Raw

priv/templates/theme/theme.css 

/*

 * PhiaUI — TailwindCSS v4 Theme

 *

 * CSS custom properties registered via @theme for automatic utility generation.

 * All color values use the oklch() color space for wide-gamut support.

 *

 * Light mode is the default. Dark mode overrides are applied automatically

 * via the prefers-color-scheme media query — no JavaScript required.

 * When PhiaDarkMode hook is used, the .dark class on <html> also activates

 * dark mode via @custom-variant below.

 *

 * Generated utilities examples:

 *   bg-primary, text-foreground, border-border, ring-ring, bg-muted, etc.

 */



/* Dark mode via .dark class (PhiaDarkMode hook) */

@custom-variant dark (&:where(.dark, .dark *));



@theme {

  /* ── Spacing & Shape ────────────────────────────────────────────────────── */

  --radius: 0.625rem;



  /* ── Semantic Color Tokens — Light Mode ─────────────────────────────────── */



  /* Page surface */

  --color-background:             oklch(1 0 0);

  --color-foreground:             oklch(0.141 0.004 285.82);



  /* Card surface */

  --color-card:                   oklch(1 0 0);

  --color-card-foreground:        oklch(0.141 0.004 285.82);



  /* Popover / dropdown surface */

  --color-popover:                oklch(1 0 0);

  --color-popover-foreground:     oklch(0.141 0.004 285.82);



  /* Primary action */

  --color-primary:                oklch(0.211 0.005 285.82);

  --color-primary-foreground:     oklch(0.985 0 0);



  /* Secondary / ghost */

  --color-secondary:              oklch(0.967 0.001 286.38);

  --color-secondary-foreground:   oklch(0.211 0.005 285.82);



  /* Muted / disabled */

  --color-muted:                  oklch(0.967 0.001 286.38);

  --color-muted-foreground:       oklch(0.552 0.016 286.07);



  /* Accent / hover highlight */

  --color-accent:                 oklch(0.967 0.001 286.38);

  --color-accent-foreground:      oklch(0.211 0.005 285.82);



  /* Destructive / error */

  --color-destructive:            oklch(0.577 0.245 27.325);

  --color-destructive-foreground: oklch(0.985 0 0);



  /* Structural */

  --color-border:                 oklch(0.929 0.004 286.32);

  --color-input:                  oklch(0.929 0.004 286.32);

  --color-ring:                   oklch(0.141 0.004 285.82);



  /* ── Dashboard Shell ────────────────────────────────────────────────────── */

  --color-sidebar-background:     oklch(0.985 0.001 286.38);

}



/* ── CSS Variable Aliases ─────────────────────────────────────────────────── */

/*

 * Short-form aliases for direct CSS custom property references in components

 * (e.g. bg-[--background], bg-[--sidebar-background]).

 * These always resolve to the @theme-managed --color-* tokens, so they

 * automatically pick up dark mode values without any extra overrides.

 */

:root {

  --background: var(--color-background);

  --sidebar-background: var(--color-sidebar-background);

}



/* ── Dark Mode Overrides ──────────────────────────────────────────────────── */



@media (prefers-color-scheme: dark) {

  @theme {

    /* Page surface */

    --color-background:             oklch(0.141 0.004 285.82);

    --color-foreground:             oklch(0.985 0 0);



    /* Card surface */

    --color-card:                   oklch(0.211 0.005 285.82);

    --color-card-foreground:        oklch(0.985 0 0);



    /* Popover / dropdown surface */

    --color-popover:                oklch(0.211 0.005 285.82);

    --color-popover-foreground:     oklch(0.985 0 0);



    /* Primary action */

    --color-primary:                oklch(0.985 0 0);

    --color-primary-foreground:     oklch(0.211 0.005 285.82);



    /* Secondary / ghost */

    --color-secondary:              oklch(0.279 0.007 285.82);

    --color-secondary-foreground:   oklch(0.985 0 0);



    /* Muted / disabled */

    --color-muted:                  oklch(0.279 0.007 285.82);

    --color-muted-foreground:       oklch(0.71 0.01 286.07);



    /* Accent / hover highlight */

    --color-accent:                 oklch(0.279 0.007 285.82);

    --color-accent-foreground:      oklch(0.985 0 0);



    /* Destructive / error */

    --color-destructive:            oklch(0.704 0.191 22.216);

    --color-destructive-foreground: oklch(0.985 0 0);



    /* Structural */

    --color-border:                 oklch(1 0 0 / 10%);

    --color-input:                  oklch(1 0 0 / 15%);

    --color-ring:                   oklch(0.552 0.016 286.07);



    /* ── Dashboard Shell ──────────────────────────────────────────────────── */

    --color-sidebar-background:     oklch(0.211 0.005 285.82);

  }

}