/
variables.css
93 lines (89 loc) · 3.27 KB
/
variables.css
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
:root {
--color-text: #000;
--color-text-p2: rgba(0 0 0 / 62%);
--color-border-form: rgba(0 0 0 / 42%);
--color-border: rgba(0 0 0 / 20%);
--color-border-p2: rgba(0 0 0 / 10%);
--color-icon: rgba(0 0 0 / 62%);
--color-link: #2f609f;
--color-link-current: #fff;
--color-link-visited: #4f2bbb;
--color-link-visited-current: #fff;
--color-fill: rgba(0 0 0 / 3%);
--color-fill-table-row-odd: rgba(0 0 0 / 8%);
--color-fill-table-row-even: rgba(0 0 0 / 3%);
--color-fill-form-element: var(--color-fill);
--color-fill-current: rgba(0 0 0 / 62%);
--color-fill-disabled: rgba(0 0 0 / 15%);
--color-fill-hover: rgba(37 118 195 / 20%);
--color-fill-focus: rgba(37 118 195 / 30%);
--color-fill-focus-current: rgb(116 173 191);
--color-fill-active: var(--primary);
--highlighter-fill: #fc0;
--shadow: 0 4px 32px rgba(0 0 0 / 17.5%);
--bg: #fff;
--bg-hover: color-mix(in oklch, oklch(from var(--bg) calc(l - 60) c h) 10%, var(--bg) 90%);
--checkable-disabled-fill: #808080;
--primary: #1960a4;
--secondary: #999;
--error: #900;
--error-fill: rgba(149 29 18 / 20%);
--danger: #900;
--warn: #943e00;
--warn-fill: rgba(215 137 88 / 20%);
--success: #070;
--success-fill: rgba(51 117 30 / 20%);
--control-margin-bottom: 1rem;
--control-min-size-touch: 44px;
--control-min-size-desktop: 24px;
--control-label-margin-bottom: 0.25rem;
--radius: 6px;
--gutter: 1rem;
--gutter-static: 15px;
--gutter-static-one-third: calc(var(--gutter-static) / 3);
--gutter-static-two-thirds: calc(var(--gutter-static-one-third) * 2);
--input-horizontal-padding: var(--gutter-static-one-third);
--input-vertical-padding: 0;
--container-max-width: 80rem;
--page-margin-default: 0.4in;
/**
* Font-size
* Size ratios from Fonts Module Level 3
* https://www.w3.org/TR/css-fonts-3/#propdef-font-size
*/
--line-height: 1.5;
--font-size-x-small: 0.8571rem;
--font-size-small: 0.8571rem;
--font-size-medium: 1rem;
--font-size-large: 1.3rem;
--font-size-x-large: 1.7143rem;
--font-size-xx-large: 2.2858rem;
--font-size-form-label: 1.05rem;
/**
* Font-weights
*/
--text-weight-black: 900;
--text-weight-bold: 700;
--text-weight-medium: 600;
--text-weight-regular: 400;
--text-weights-are-bolder: 0;
--text-weight-basis: var(--text-weight-regular);
--text-weight-addition-factor: 200;
--text-weight-headline-basis: 600;
--text-weight-headline-addition-factor: 100;
--text-weight: calc(var(--text-weight-basis) + ( var(--text-weight-addition-factor) * var(--text-weights-are-bolder)));
--text-weight-headline: var(--text-weight-bold);
--text-weight-button: var(--text-weight-bold);
}
/* Lean on min-width queries to create mobile-first CSS. */
@custom-media --small-up (min-width: 321px);
@custom-media --medium-up (min-width: 641px);
@custom-media --large-up (min-width: 1025px);
@custom-media --x-large-up (min-width: 1441px);
@custom-media --xx-large-up (min-width: 1921px);
/* Use these max-width queries as infrequently as possible. */
@custom-media --small (max-width: 640px);
@custom-media --medium-down (max-width: 1024px);
@custom-media --medium (min-width: 641px) and (max-width: 1024px);
@custom-media --large (min-width: 1025px) and (max-width: 1440px);
@custom-media --x-large (min-width: 1441px) and (max-width: 1920px);