roving-grid-demos/base.css at main · JonoMacC/roving-grid-demos · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
html {
  min-block-size: 100%;
  /* Foundations */
  /* Tokens from GitHub Primer Web Primitives */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;

  /* Neutral */
  --white: hsl(0 0% 100%);
  --black: hsl(210 13% 12%);
  --gray-000: hsl(210 25% 98%);
  --gray-100: hsl(216, 33%, 97%);
  --gray-200: hsl(214 13% 90%);
  --gray-300: hsl(213 11% 84%);
  --gray-400: hsl(210 8% 62%);
  --gray-500: hsl(212 8% 45%);
  --gray-600: hsl(212 9% 38%);
  --gray-700: hsl(210 12% 30%);
  --gray-800: hsl(210 13% 21%);
  --gray-900: hsl(210 12% 16%);

  /* Colors */
  --blue-000: hsl(210 100% 97%);
  --blue-100: hsl(210 100% 93%);
  --blue-200: hsl(213 100% 89%);
  --blue-300: hsl(212 100% 74%);
  --blue-400: hsl(212 100% 56%);
  --blue-500: hsl(212 97% 43%);
  --blue-600: hsl(212 100% 39%);
  --blue-700: hsl(212 94% 28%);
  --blue-800: hsl(212 94% 20%);
  --blue-900: hsl(212 88% 16%);

  --green-000: hsl(136 100% 97%);
  --green-100: hsl(134 100% 93%);
  --green-200: hsl(134 73% 85%);
  --green-300: hsl(135 68% 72%);
  --green-400: hsl(134 62% 51%);
  --green-500: hsl(134 61% 41%);
  --green-600: hsl(134 60% 33%);
  --green-700: hsl(134 66% 26%);
  --green-800: hsl(134 61% 22%);
  --green-900: hsl(134 56% 18%);

  --yellow-000: hsl(53 100% 97%);
  --yellow-100: hsl(53 100% 93%);
  --yellow-200: hsl(52 100% 85%);
  --yellow-300: hsl(50 100% 75%);
  --yellow-400: hsl(48 100% 68%);
  --yellow-500: hsl(46 100% 62%);
  --yellow-600: hsl(46 95% 53%);
  --yellow-700: hsl(46 92% 45%);
  --yellow-800: hsl(46 100% 35%);
  --yellow-900: hsl(46 77% 25%);

  --red-000: hsl(353 100% 97%);
  --red-100: hsl(353 100% 93%);
  --red-200: hsl(353 95% 84%);
  --red-300: hsl(354 92% 72%);
  --red-400: hsl(354 79% 60%);
  --red-500: hsl(354 66% 54%);
  --red-600: hsl(355 70% 47%);
  --red-700: hsl(356 72% 41%);
  --red-800: hsl(357 70% 36%);
  --red-900: hsl(356 72% 31%);

  --purple-000: hsl(260 100% 97%);
  --purple-100: hsl(258 89% 93%);
  --purple-200: hsl(261 84% 86%);
  --purple-300: hsl(261 76% 76%);
  --purple-400: hsl(261 55% 61%);
  --purple-500: hsl(261 51% 51%);
  --purple-600: hsl(261 53% 42%);
  --purple-700: hsl(263 55% 35%);
  --purple-800: hsl(261 58% 27%);
  --purple-900: hsl(262 61% 19%);
}

:root {
  color-scheme: light dark;

  /* Semantic */
  --shadow: var(--gray-400);
  --surface-000: var(--white);
  --surface-100: var(--gray-000);
  --surface-200: var(--gray-100);
  --surface-300: var(--gray-200);
  --surface-400: var(--gray-300);
  --surface-500: var(--gray-400);
  --focus: var(--blue-500);
  --hover: var(--blue-200);
  --active: var(--blue-100);
  --text: var(--black);
  --text-hover: var(--gray-700);
  --text-light: var(--gray-500);
  --text-faint: var(--gray-300);
  --text-output: var(--yellow-900);
  --tip-surface: var(--blue-100);
  --tip-border: var(--blue-300);
  --tip-text: var(--blue-700);
  --tip-info: var(--blue-500);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow: var(--black);
    --surface-000: var(--black);
    --surface-100: var(--gray-900);
    --surface-200: var(--gray-800);
    --surface-300: var(--gray-700);
    --surface-400: var(--gray-600);
    --surface-500: var(--gray-500);
    --focus: var(--blue-400);
    --hover: var(--blue-800);
    --active: var(--blue-900);
    --text: var(--white);
    --text-hover: var(--blue-300);
    --text-light: var(--gray-500);
    --text-faint: var(--gray-700);
    --text-output: var(--yellow-300);
    --tip-surface: var(--blue-900);
    --tip-border: var(--blue-400);
    --tip-text: var(--blue-200);
    --tip-info: var(--blue-400);
  }
}

* {
  box-sizing: inherit;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}