alby.css raw

   1  @import "@fontsource-variable/figtree/wght.css";
   2  
   3  .theme-alby {
   4    --app-font-sans: "Figtree Variable", ui-sans-serif, system-ui, sans-serif;
   5    --radius: 0.875rem;
   6  
   7    --primary: oklch(0.852 0.199 91.936);
   8    /* Match default button label color to secondary (`text-secondary-foreground`). */
   9    --primary-foreground: var(--secondary-foreground);
  10    --chart-1: oklch(0.905 0.182 98.111);
  11    --chart-2: oklch(0.795 0.184 86.047);
  12    --chart-3: oklch(0.681 0.162 75.834);
  13    --chart-4: oklch(0.554 0.135 66.442);
  14    --chart-5: oklch(0.476 0.114 61.907);
  15    --sidebar-primary: oklch(0.681 0.162 75.834);
  16    --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
  17  }
  18  
  19  .theme-alby.dark {
  20    --primary: oklch(0.795 0.184 86.047);
  21    /* Primary buttons keep the light yellow fill in dark mode; label stays dark like light theme. */
  22    --primary-foreground: oklch(0.205 0 0);
  23    --secondary: oklch(0.269 0 0);
  24    --secondary-foreground: oklch(0.985 0 0);
  25    --chart-1: oklch(0.905 0.182 98.111);
  26    --chart-2: oklch(0.795 0.184 86.047);
  27    --chart-3: oklch(0.681 0.162 75.834);
  28    --chart-4: oklch(0.554 0.135 66.442);
  29    --chart-5: oklch(0.476 0.114 61.907);
  30    --sidebar-primary: oklch(0.795 0.184 86.047);
  31    --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
  32  }
  33  
  34  /*
  35   * Default (primary) buttons: subtle highlight overlay on top of `bg-primary`.
  36   * Sets `background-image` only so Tailwind's `background-color: var(--primary)`
  37   * remains the base. Matches `data-slot~="button"` so Radix's Slot forwarding
  38   * still picks up `<Button asChild>` (e.g. DialogTrigger asChild) without
  39   * leaking onto unrelated items that also expose `data-variant` (e.g.
  40   * DropdownMenuItem, Badge).
  41   */
  42  .theme-alby
  43    :is(button, a, span)[data-slot~="button"][data-variant="default"]:not(
  44      :disabled,
  45      [aria-disabled="true"]
  46    ) {
  47    background-image: linear-gradient(
  48      180deg,
  49      rgba(255, 255, 255, 0.58) 0%,
  50      rgba(255, 236, 175, 0.22) 100%
  51    );
  52    box-shadow: 0 0 0 1px #ffdf6f;
  53  }
  54  
  55  .theme-alby
  56    :is(button, a, span)[data-slot~="button"][data-variant="default"]:hover:not(
  57      :disabled,
  58      [aria-disabled="true"]
  59    ) {
  60    background-image: linear-gradient(
  61      180deg,
  62      rgba(255, 255, 255, 0.45) 0%,
  63      rgba(255, 224, 140, 0.28) 100%
  64    );
  65    box-shadow: 0 0 0 1px #ffdf6f;
  66  }
  67  
  68  /* Keep keyboard focus ring (Button uses ring via box-shadow); stack with brand stroke. */
  69  .theme-alby
  70    :is(button, a, span)[data-slot~="button"][data-variant="default"]:focus-visible:not(
  71      :disabled,
  72      [aria-disabled="true"]
  73    ) {
  74    box-shadow:
  75      0 0 0 1px #ffdf6f,
  76      0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%);
  77  }
  78