Base CSS

The base CSS file is the foundation for the theme, defining core variables that establish the default visual style. Custom themes can build upon these core styles to adapt the look and feel of the app to match specific brand guidelines or user preferences like dark mode.

Establishing this base makes it easy to apply changes across the entire app. With these core variables in place, future theme adjustments are straightforward, whether you’re introducing new variables or enhancing existing ones.

---

Variables

The base CSS includes but is not limited to variables in three main categories:

• Color Variables: Use HSL (Hue, Saturation, Lightness) for easy adjustments across themes. Defined colors include background, text (foreground), primary and secondary actions, and more.

• Typography Variables: Font sizes are set using rem units for scalability, with weight properties controlling font weights for headings and body text.

• Layout Variables: Define spacing and sizing, like button padding and border-radius, in rem units for a responsive and adaptable design.

These variables serve as building blocks for your theme and can be extended or modified to suit your needs.

---

Example Base CSS Setup

The following example illustrates a base CSS setup. This file initializes essential color, typography, and layout variables and includes dark mode overrides for an instant switch to a dark theme.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '@hv/ui';

@layer base {
  :root {
    /* Colors */
    --background: 0deg 0% 100%;
    --foreground: 224deg 71% 4%;
    --card: 0deg 0% 100%;
    --card-foreground: 224deg 71% 4%;
    --popover: 0deg 0% 100%;
    --popover-foreground: 224deg 71% 4%;
    --primary: 8deg 82% 71%;
    --primary-foreground: 0deg 0% 100%;
    --secondary: 221deg 39% 11%;
    --secondary-foreground: 210deg 20% 98%;
    --muted: 220deg 14% 96%;
    --muted-foreground: 220deg 9% 20%;
    --footer: 220deg 14% 96%;
    --footer-foreground: 220deg 9% 20%;
    --accent: 220deg 1% 96%;
    --accent-foreground: 8deg 82% 71%;
    --destructive: 0deg 84% 60%;
    --destructive-foreground: 210deg 20% 98%;
    --border: 220deg 13% 91%;
    --input: 220deg 13% 91%;

    /* Typography */
    --heading-6xl: 3.75rem;
    --heading-4xl: 2.25rem;
    --heading-2xl: 1.5rem;
    --heading-xl: 1.25rem;
    --heading-base: 1rem;
    --body-font-size: 1rem;
    --weight-heading: 500;
    --weight-body: 400;

    /* Layout */
    --padding-btn-sm: 0 0.5rem;
    --padding-btn-base: 0.5rem 1rem;
    --padding-btn-lg: 0 2rem;
    --btn-radius: 0.375rem;
  }

  /* Dark Mode Overrides */
  .dark {
    --background: 210deg 20% 18%;
    --foreground: 0deg 0% 90%;
    --card: 210deg 15% 15%;
    --card-foreground: 0deg 0% 90%;
    --popover: 210deg 15% 15%;
    --popover-foreground: 0deg 0% 90%;
    --primary: 8deg 82% 61%;
    --primary-foreground: 0deg 0% 90%;
    --secondary: 221deg 39% 45%;
    --secondary-foreground: 0deg 0% 100%;
    --muted: 220deg 14% 30%;
    --muted-foreground: 220deg 9% 80%;
    --footer: 220deg 14% 30%;
    --footer-foreground: 220deg 9% 80%;
    --accent: 220deg 1% 30%;
    --accent-foreground: 221deg 39% 45%;
    --destructive: 0deg 84% 50%;
    --destructive-foreground: 0deg 0% 100%;
    --border: 220deg 13% 30%;
    --input: 220deg 13% 30%;
  }
}