generative-creative-lab/styles.css at develop · andrewmarconi/generative-creative-lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
@import "tailwindcss";

/* Scan custom templates for Tailwind classes */
@source "./src/cw/core/templates/**/*.html";
@source "./src/cw/diffusion/templates/**/*.html";
@source "./src/cw/tvspots/templates/**/*.html";

/*
 * Theme tokens matching Unfold's runtime CSS variables.
 * Unfold injects actual color values via <style> in <head>;
 * we just need to tell Tailwind these tokens exist so it
 * generates the utility classes (bg-base-900, text-primary-600, etc.).
 */
@theme inline {
  --radius-default: var(--border-radius, 6px);

  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);
  --color-primary-950: var(--color-primary-950);

  --color-base-50: var(--color-base-50);
  --color-base-100: var(--color-base-100);
  --color-base-200: var(--color-base-200);
  --color-base-300: var(--color-base-300);
  --color-base-400: var(--color-base-400);
  --color-base-500: var(--color-base-500);
  --color-base-600: var(--color-base-600);
  --color-base-700: var(--color-base-700);
  --color-base-800: var(--color-base-800);
  --color-base-900: var(--color-base-900);
  --color-base-950: var(--color-base-950);

  --color-font-subtle-light: var(--color-font-subtle-light);
  --color-font-subtle-dark: var(--color-font-subtle-dark);
  --color-font-default-light: var(--color-font-default-light);
  --color-font-default-dark: var(--color-font-default-dark);
  --color-font-important-light: var(--color-font-important-light);
  --color-font-important-dark: var(--color-font-important-dark);
}

/* Match Unfold's dark mode variant */
@custom-variant dark {
  @media not print {
    &:where(.dark, .dark *) {
      @slot;
    }
  }
}