vitre-css/vitre-base.css at main · vitre-ui/vitre-css · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
@layer vitre.reset, vitre.theme, vitre.light, vitre.dark, vitre.base;

@layer vitre.reset {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

@layer vitre.theme {
  :root {
    color-scheme: light dark;
    --vitre-font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Ubuntu", "Cantarell", "Noto Sans", "Roboto", ui-sans-serif, system-ui, sans-serif;
    --vitre-font-weight: 400;
    --vitre-leading: 1.65;
    --vitre-measure: 72ch;
    --vitre-width-narrow: 72ch;
    --vitre-width-wide: 72rem;
    --vitre-space-3: 0.75rem;
    --vitre-space-4: 1rem;
    --vitre-step-0: clamp(1rem, 0.97rem + 0.18vw, 1.1rem);
    --vitre-space-6: 2rem;
    --vitre-page-glow: color-mix(in oklab, var(--vitre-primary), transparent 78%);
    --vitre-page-tint: color-mix(in oklab, var(--vitre-bg), var(--vitre-primary) 5%);
    --vitre-hue: 214;
    --vitre-primary: hsl(var(--vitre-hue) 88% 46%);
  }
}

@layer vitre.light {
  :root,
  html[data-theme="light"] {
    color-scheme: light;
    --vitre-bg: hsl(210 32% 98%);
    --vitre-text: hsl(222 38% 14%);
  }
}

@layer vitre.dark {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --vitre-bg: hsl(224 26% 8%);
      --vitre-text: hsl(210 35% 94%);
    }
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --vitre-bg: hsl(224 26% 8%);
    --vitre-text: hsl(210 35% 94%);
  }
}

@layer vitre.base {
  html {
    min-block-size: 100%;
    accent-color: var(--vitre-primary);
    background:
      radial-gradient(circle at top left, var(--vitre-page-glow), transparent 34rem),
      linear-gradient(135deg, var(--vitre-bg), var(--vitre-page-tint));
  }

  body {
    min-block-size: 100%;
    color: var(--vitre-text);
    font-family: var(--vitre-font-sans);
    font-size: var(--vitre-step-0);
    font-weight: var(--vitre-font-weight);
    line-height: var(--vitre-leading);
    text-rendering: optimizeLegibility;
  }

  body > :where(header, main, footer),
  body > :where(article, section, aside, nav) {
    inline-size: min(100% - 2rem, var(--vitre-measure));
    margin-inline: auto;
  }

  body > [data-width="narrow"] {
    inline-size: min(100% - 2rem, var(--vitre-width-narrow));
  }

  body > [data-width="wide"] {
    inline-size: min(100% - 2rem, var(--vitre-width-wide));
  }

  body > [data-width="wide-80"] {
    inline-size: min(100% - 2rem, 80vw);
  }

  body > [data-width="full"] {
    inline-size: min(100% - 2rem, 100%);
  }

  body > header {
    padding-block-start: var(--vitre-space-6);
  }

  body > :where(main, footer) {
    padding-block: var(--vitre-space-6);
  }

  body > nav:first-child {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    box-sizing: border-box;
    inline-size: 100%;
    margin: 0;
    padding-block: var(--vitre-space-3);
    padding-inline: max(var(--vitre-space-4), calc((100% - var(--vitre-measure)) / 2 + var(--vitre-space-4)));
    background: color-mix(in oklab, var(--vitre-bg), transparent 8%);
    backdrop-filter: blur(var(--vitre-backdrop-blur, 18px));
  }

  body > nav:first-child[data-width="narrow"] {
    padding-inline: max(var(--vitre-space-4), calc((100% - var(--vitre-width-narrow)) / 2 + var(--vitre-space-4)));
  }

  body > nav:first-child[data-width="wide"] {
    padding-inline: max(var(--vitre-space-4), calc((100% - var(--vitre-width-wide)) / 2 + var(--vitre-space-4)));
  }

  body > nav:first-child[data-width="wide-80"] {
    padding-inline: max(var(--vitre-space-4), 10vw);
  }
}