-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
styles.gleam
208 lines (192 loc) · 35.5 KB
/
styles.gleam
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
// IMPORTS ---------------------------------------------------------------------
import gleam/dict.{type Dict}
import lustre/element.{type Element}
import lustre/element/html
import lustre/ui.{type Theme}
import lustre/ui/colour.{type Scale} as _
import gleam_community/colour
import gleam/string
// ELEMENTS --------------------------------------------------------------------
/// Render a `<style />` element that sets up all the CSS variables derived from
/// a theme. You *need* to include this element in your app for any of the elements
/// to work and look correct.
///
pub fn theme(theme: Theme) -> Element(msg) {
theme_to_dict(theme)
|> dict.fold(theme_css, string.replace)
|> html.style([], _)
}
/// Render a `<style />` element that sets up the styles for all the elements
/// provided by this library. If you prefer, this stylesheet is also provided
/// as a static CSS file in the `priv` directory of this package.
///
pub fn elements() -> Element(msg) {
html.style([], element_css)
}
// ATTRIBUTES ------------------------------------------------------------------
// UTILS -----------------------------------------------------------------------
fn theme_to_dict(theme: Theme) -> Dict(String, String) {
dict.new()
|> dict.merge(scale_to_dict(theme.primary, "primary"))
|> dict.merge(scale_to_dict(theme.greyscale, "greyscale"))
|> dict.merge(scale_to_dict(theme.error, "error"))
|> dict.merge(scale_to_dict(theme.success, "success"))
|> dict.merge(scale_to_dict(theme.warning, "warning"))
|> dict.merge(scale_to_dict(theme.info, "info"))
}
fn scale_to_dict(scale: Scale, prefix: String) -> Dict(String, String) {
dict.from_list([
#(
"$("
<> prefix
<> ".app_background)",
colour.to_css_rgba_string(scale.app_background),
),
#(
"$("
<> prefix
<> ".app_background_subtle)",
colour.to_css_rgba_string(scale.app_background_subtle),
),
#(
"$("
<> prefix
<> ".app_border)",
colour.to_css_rgba_string(scale.app_border),
),
#(
"$("
<> prefix
<> ".element_background)",
colour.to_css_rgba_string(scale.element_background),
),
#(
"$("
<> prefix
<> ".element_background_hover)",
colour.to_css_rgba_string(scale.element_background_hover),
),
#(
"$("
<> prefix
<> ".element_background_strong)",
colour.to_css_rgba_string(scale.element_background_strong),
),
#(
"$("
<> prefix
<> ".element_border_subtle)",
colour.to_css_rgba_string(scale.element_border_subtle),
),
#(
"$("
<> prefix
<> ".element_border_strong)",
colour.to_css_rgba_string(scale.element_border_strong),
),
#(
"$("
<> prefix
<> ".solid_background)",
colour.to_css_rgba_string(scale.solid_background),
),
#(
"$("
<> prefix
<> ".solid_background_hover)",
colour.to_css_rgba_string(scale.solid_background_hover),
),
#(
"$("
<> prefix
<> ".text_high_contrast)",
colour.to_css_rgba_string(scale.text_high_contrast),
),
#(
"$("
<> prefix
<> ".text_low_contrast)",
colour.to_css_rgba_string(scale.text_low_contrast),
),
])
}
// CONSTANTS -------------------------------------------------------------------
const theme_css: String = "
:root {
--primary-app-background: $(primary.app_background);
--primary-app-background-subtle: $(primary.app_background_subtle);
--primary-app-border: $(primary.app_border);
--primary-element-background: $(primary.element_background);
--primary-element-background-hover: $(primary.element_background_hover);
--primary-element-background-strong: $(primary.element_background_strong);
--primary-element-border-subtle: $(primary.element_border_subtle);
--primary-element-border-strong: $(primary.element_border_strong);
--primary-solid-background: $(primary.solid_background);
--primary-solid-background-hover: $(primary.solid_background_hover);
--primary-text-high-contrast: $(primary.text_high_contrast);
--primary-text-low-contrast: $(primary.text_low_contrast);
--greyscale-app-background: $(greyscale.app_background);
--greyscale-app-background-subtle: $(greyscale.app_background_subtle);
--greyscale-app-border: $(greyscale.app_border);
--greyscale-element-background: $(greyscale.element_background);
--greyscale-element-background-hover: $(greyscale.element_background_hover);
--greyscale-element-background-strong: $(greyscale.element_background_strong);
--greyscale-element-border-subtle: $(greyscale.element_border_subtle);
--greyscale-element-border-strong: $(greyscale.element_border_strong);
--greyscale-solid-background: $(greyscale.solid_background);
--greyscale-solid-background-hover: $(greyscale.solid_background_hover);
--greyscale-text-high-contrast: $(greyscale.text_high_contrast);
--greyscale-text-low-contrast: $(greyscale.text_low_contrast);
--error-app-background: $(error.app_background);
--error-app-background-subtle: $(error.app_background_subtle);
--error-app-border: $(error.app_border);
--error-element-background: $(error.element_background);
--error-element-background-hover: $(error.element_background_hover);
--error-element-background-strong: $(error.element_background_strong);
--error-element-border-subtle: $(error.element_border_subtle);
--error-element-border-strong: $(error.element_border_strong);
--error-solid-background: $(error.solid_background);
--error-solid-background-hover: $(error.solid_background_hover);
--error-text-high-contrast: $(error.text_high_contrast);
--error-text-low-contrast: $(error.text_low_contrast);
--success-app-background: $(success.app_background);
--success-app-background-subtle: $(success.app_background_subtle);
--success-app-border: $(success.app_border);
--success-element-background: $(success.element_background);
--success-element-background-hover: $(success.element_background_hover);
--success-element-background-strong: $(success.element_background_strong);
--success-element-border-subtle: $(success.element_border_subtle);
--success-element-border-strong: $(success.element_border_strong);
--success-solid-background: $(success.solid_background);
--success-solid-background-hover: $(success.solid_background_hover);
--success-text-high-contrast: $(success.text_high_contrast);
--success-text-low-contrast: $(success.text_low_contrast);
--warning-app-background: $(warning.app_background);
--warning-app-background-subtle: $(warning.app_background_subtle);
--warning-app-border: $(warning.app_border);
--warning-element-background: $(warning.element_background);
--warning-element-background-hover: $(warning.element_background_hover);
--warning-element-background-strong: $(warning.element_background_strong);
--warning-element-border-subtle: $(warning.element_border_subtle);
--warning-element-border-strong: $(warning.element_border_strong);
--warning-solid-background: $(warning.solid_background);
--warning-solid-background-hover: $(warning.solid_background_hover);
--warning-text-high-contrast: $(warning.text_high_contrast);
--warning-text-low-contrast: $(warning.text_low_contrast);
--info-app-background: $(info.app_background);
--info-app-background-subtle: $(info.app_background_subtle);
--info-app-border: $(info.app_border);
--info-element-background: $(info.element_background);
--info-element-background-hover: $(info.element_background_hover);
--info-element-background-strong: $(info.element_background_strong);
--info-element-border-subtle: $(info.element_border_subtle);
--info-element-border-strong: $(info.element_border_strong);
--info-solid-background: $(info.solid_background);
--info-solid-background-hover: $(info.solid_background_hover);
--info-text-high-contrast: $(info.text_high_contrast);
--info-text-low-contrast: $(info.text_low_contrast);
}
"
const element_css: String = "
*,:after,:before{border:0 solid;box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}.bg-app{background-color:var(--app-background)}.bg-app-subtle{background-color:var(--app-background-subtle)}.bg-element{background-color:var(--element-background)}.bg-element-hover{background-color:var(--element-background-hover)}.bg-element-strong{background-color:var(--element-background-strong)}.bg-solid{background-color:var(--solid-background)}.bg-solid-hover{background-color:var(--solid-background-hover)}.border-app{border:1px solid var(--app-border)}.border-element-subtle{border:1px solid var(--element-border-subtle)}.border-element-strong{border:1px solid var(--element-border-strong)}.text-high-contrast{color:var(--text-high-contrast)}.text-low-contrast{color:var(--text-low-contrast)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-md{font-size:var(--text-md)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.text-5xl{font-size:var(--text-5xl)}.p-2xs{padding:var(--space-2xs)}.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.p-2xl{padding:var(--space-2xl)}.p-3xl{padding:var(--space-3xl)}.p-4xl{padding:var(--space-4xl)}.p-5xl{padding:var(--space-5xl)}.px-2xs{padding-left:var(--space-2xs);padding-right:var(--space-2xs)}.px-xs{padding-left:var(--space-xs);padding-right:var(--space-xs)}.px-sm{padding-left:var(--space-sm);padding-right:var(--space-sm)}.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.px-xl{padding-left:var(--space-xl);padding-right:var(--space-xl)}.px-2xl{padding-left:var(--space-2xl);padding-right:var(--space-2xl)}.px-3xl{padding-left:var(--space-3xl);padding-right:var(--space-3xl)}.px-4xl{padding-left:var(--space-4xl);padding-right:var(--space-4xl)}.px-5xl{padding-left:var(--space-5xl);padding-right:var(--space-5xl)}.py-2xs{padding-bottom:var(--space-2xs);padding-top:var(--space-2xs)}.py-xs{padding-bottom:var(--space-xs);padding-top:var(--space-xs)}.py-sm{padding-bottom:var(--space-sm);padding-top:var(--space-sm)}.py-md{padding-bottom:var(--space-md);padding-top:var(--space-md)}.py-lg{padding-bottom:var(--space-lg);padding-top:var(--space-lg)}.py-xl{padding-bottom:var(--space-xl);padding-top:var(--space-xl)}.py-2xl{padding-bottom:var(--space-2xl);padding-top:var(--space-2xl)}.py-3xl{padding-bottom:var(--space-3xl);padding-top:var(--space-3xl)}.py-4xl{padding-bottom:var(--space-4xl);padding-top:var(--space-4xl)}.py-5xl{padding-bottom:var(--space-5xl);padding-top:var(--space-5xl)}.pt-2xs{padding-top:var(--space-2xs)}.pt-xs{padding-top:var(--space-xs)}.pt-sm{padding-top:var(--space-sm)}.pt-md{padding-top:var(--space-md)}.pt-lg{padding-top:var(--space-lg)}.pt-xl{padding-top:var(--space-xl)}.pt-2xl{padding-top:var(--space-2xl)}.pt-3xl{padding-top:var(--space-3xl)}.pt-4xl{padding-top:var(--space-4xl)}.pt-5xl{padding-top:var(--space-5xl)}.pr-2xs{padding-right:var(--space-2xs)}.pr-xs{padding-right:var(--space-xs)}.pr-sm{padding-right:var(--space-sm)}.pr-md{padding-right:var(--space-md)}.pr-lg{padding-right:var(--space-lg)}.pr-xl{padding-right:var(--space-xl)}.pr-2xl{padding-right:var(--space-2xl)}.pr-3xl{padding-right:var(--space-3xl)}.pr-4xl{padding-right:var(--space-4xl)}.pr-5xl{padding-right:var(--space-5xl)}.pb-2xs{padding-bottom:var(--space-2xs)}.pb-xs{padding-bottom:var(--space-xs)}.pb-sm{padding-bottom:var(--space-sm)}.pb-md{padding-bottom:var(--space-md)}.pb-lg{padding-bottom:var(--space-lg)}.pb-xl{padding-bottom:var(--space-xl)}.pb-2xl{padding-bottom:var(--space-2xl)}.pb-3xl{padding-bottom:var(--space-3xl)}.pb-4xl{padding-bottom:var(--space-4xl)}.pb-5xl{padding-bottom:var(--space-5xl)}.m-2xs{margin:var(--space-2xs)}.m-xs{margin:var(--space-xs)}.m-sm{margin:var(--space-sm)}.m-md{margin:var(--space-md)}.m-lg{margin:var(--space-lg)}.m-xl{margin:var(--space-xl)}.m-2xl{margin:var(--space-2xl)}.m-3xl{margin:var(--space-3xl)}.m-4xl{margin:var(--space-4xl)}.m-5xl{margin:var(--space-5xl)}.mx-2xs{margin-left:var(--space-2xs);margin-right:var(--space-2xs)}.mx-xs{margin-left:var(--space-xs);margin-right:var(--space-xs)}.mx-sm{margin-left:var(--space-sm);margin-right:var(--space-sm)}.mx-md{margin-left:var(--space-md);margin-right:var(--space-md)}.mx-lg{margin-left:var(--space-lg);margin-right:var(--space-lg)}.mx-xl{margin-left:var(--space-xl);margin-right:var(--space-xl)}.mx-2xl{margin-left:var(--space-2xl);margin-right:var(--space-2xl)}.mx-3xl{margin-left:var(--space-3xl);margin-right:var(--space-3xl)}.mx-4xl{margin-left:var(--space-4xl);margin-right:var(--space-4xl)}.mx-5xl{margin-left:var(--space-5xl);margin-right:var(--space-5xl)}.my-2xs{margin-bottom:var(--space-2xs);margin-top:var(--space-2xs)}.my-xs{margin-bottom:var(--space-xs);margin-top:var(--space-xs)}.my-sm{margin-bottom:var(--space-sm);margin-top:var(--space-sm)}.my-md{margin-bottom:var(--space-md);margin-top:var(--space-md)}.my-lg{margin-bottom:var(--space-lg);margin-top:var(--space-lg)}.my-xl{margin-bottom:var(--space-xl);margin-top:var(--space-xl)}.my-2xl{margin-bottom:var(--space-2xl);margin-top:var(--space-2xl)}.my-3xl{margin-bottom:var(--space-3xl);margin-top:var(--space-3xl)}.my-4xl{margin-bottom:var(--space-4xl);margin-top:var(--space-4xl)}.my-5xl{margin-bottom:var(--space-5xl);margin-top:var(--space-5xl)}.mt-2xs{margin-top:var(--space-2xs)}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-2xl{margin-top:var(--space-2xl)}.mt-3xl{margin-top:var(--space-3xl)}.mt-4xl{margin-top:var(--space-4xl)}.mt-5xl{margin-top:var(--space-5xl)}.mr-2xs{margin-right:var(--space-2xs)}.mr-xs{margin-right:var(--space-xs)}.mr-sm{margin-right:var(--space-sm)}.mr-md{margin-right:var(--space-md)}.mr-lg{margin-right:var(--space-lg)}.mr-xl{margin-right:var(--space-xl)}.mr-2xl{margin-right:var(--space-2xl)}.mr-3xl{margin-right:var(--space-3xl)}.mr-4xl{margin-right:var(--space-4xl)}.mr-5xl{margin-right:var(--space-5xl)}.mb-2xs{margin-bottom:var(--space-2xs)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.mb-3xl{margin-bottom:var(--space-3xl)}.mb-4xl{margin-bottom:var(--space-4xl)}.mb-5xl{margin-bottom:var(--space-5xl)}.ml-2xs{margin-left:var(--space-2xs)}.ml-xs{margin-left:var(--space-xs)}.ml-sm{margin-left:var(--space-sm)}.ml-md{margin-left:var(--space-md)}.ml-lg{margin-left:var(--space-lg)}.ml-xl{margin-left:var(--space-xl)}.ml-2xl{margin-left:var(--space-2xl)}.ml-3xl{margin-left:var(--space-3xl)}.ml-4xl{margin-left:var(--space-4xl)}.ml-5xl{margin-left:var(--space-5xl)}.font-base{font-family:var(--font-base)}.font-alt{font-family:var(--font-alt)}.font-mono{font-family:var(--font-mono)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}:root{--primary-app-background:#fdfdff;--primary-app-background-subtle:#fafaff;--primary-app-border:#d0d0fa;--primary-element-background:#f3f3ff;--primary-element-background-hover:#ebebfe;--primary-element-background-strong:#e0e0fd;--primary-element-border-subtle:#babbf5;--primary-element-border-strong:#9b9ef0;--primary-solid-background:#5b5bd6;--primary-solid-background-hover:#5353ce;--primary-text-high-contrast:#272962;--primary-text-low-contrast:#4747c2;--greyscale-app-background:#fcfcfd;--greyscale-app-background-subtle:#f9f9fb;--greyscale-app-border:#dddde3;--greyscale-element-background:#f2f2f5;--greyscale-element-background-hover:#ebebef;--greyscale-element-background-strong:#e4e4e9;--greyscale-element-border-subtle:#d3d4db;--greyscale-element-border-strong:#b9bbc6;--greyscale-solid-background:#8b8d98;--greyscale-solid-background-hover:#7e808a;--greyscale-text-high-contrast:#1c2024;--greyscale-text-low-contrast:#60646c;--error-app-background:#fffcfc;--error-app-background-subtle:#fff7f7;--error-app-border:#f9c6c6;--error-element-background:#ffefef;--error-element-background-hover:#ffe5e5;--error-element-background-strong:#fdd8d8;--error-element-border-subtle:#f3aeaf;--error-element-border-strong:#eb9091;--error-solid-background:#e5484d;--error-solid-background-hover:#d93d42;--error-text-high-contrast:#641723;--error-text-low-contrast:#c62a2f;--success-app-background:#fbfefc;--success-app-background-subtle:#f2fcf5;--success-app-border:#b4dfc4;--success-element-background:#e9f9ee;--success-element-background-hover:#ddf3e4;--success-element-background-strong:#ccebd7;--success-element-border-subtle:#92ceac;--success-element-border-strong:#5bb98c;--success-solid-background:#30a46c;--success-solid-background-hover:#299764;--success-text-high-contrast:#193b2d;--success-text-low-contrast:#18794e;--warning-app-background:#fdfdf9;--warning-app-background-subtle:#fffbe0;--warning-app-border:#ecdd85;--warning-element-background:#fff8c6;--warning-element-background-hover:#fcf3af;--warning-element-background-strong:#f7ea9b;--warning-element-border-subtle:#dac56e;--warning-element-border-strong:#c9aa45;--warning-solid-background:#fbe32d;--warning-solid-background-hover:#f9da10;--warning-text-high-contrast:#473b1f;--warning-text-low-contrast:#775f28;--info-app-background:#fbfdff;--info-app-background-subtle:#f5faff;--info-app-border:#b7d9f8;--info-element-background:#edf6ff;--info-element-background-hover:#e1f0ff;--info-element-background-strong:#cee7fe;--info-element-border-subtle:#96c7f2;--info-element-border-strong:#5eb0ef;--info-solid-background:#0091ff;--info-solid-background-hover:#0880ea;--info-text-high-contrast:#113264;--info-text-low-contrast:#0b68cb;--app-background:var(--primary-app-background);--app-background-subtle:var(--primary-app-background-subtle);--app-border:var(--primary-app-border);--element-background:var(--primary-element-background);--element-background-hover:var(--primary-element-background-hover);--element-background-strong:var(--primary-element-background-strong);--element-border-subtle:var(--primary-element-border-subtle);--element-border-strong:var(--primary-element-border-strong);--solid-background:var(--primary-solid-background);--solid-background-hover:var(--primary-solid-background-hover);--text-high-contrast:var(--primary-text-high-contrast);--text-low-contrast:var(--primary-text-low-contrast);--text-xs:calc(var(--text-sm)/1.25);--text-sm:calc(var(--text-md)/1.25);--text-md:14px;--text-lg:calc(var(--text-md)*1.25);--text-xl:calc(var(--text-lg)*1.25);--text-2xl:calc(var(--text-xl)*1.25);--text-3xl:calc(var(--text-2xl)*1.25);--text-4xl:calc(var(--text-3xl)*1.25);--text-5xl:calc(var(--text-4xl)*1.25);--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.25rem;--space-xl:2rem;--space-2xl:3.25rem;--space-3xl:5.25rem;--space-4xl:8.5rem;--space-5xl:13.75rem;--font-base:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-alt:ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--border-radius:4px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}[data-variant=primary]{--app-background:var(--primary-app-background);--app-background-subtle:var(--primary-app-background-subtle);--app-border:var(--primary-app-border);--element-background:var(--primary-element-background);--element-background-hover:var(--primary-element-background-hover);--element-background-strong:var(--primary-element-background-strong);--element-border-subtle:var(--primary-element-border-subtle);--element-border-strong:var(--primary-element-border-strong);--solid-background:var(--primary-solid-background);--solid-background-hover:var(--primary-solid-background-hover);--text-high-contrast:var(--primary-text-high-contrast);--text-low-contrast:var(--primary-text-low-contrast);color:var(--text-high-contrast)}[data-variant=greyscale]{--app-background:var(--greyscale-app-background);--app-background-subtle:var(--greyscale-app-background-subtle);--app-border:var(--greyscale-app-border);--element-background:var(--greyscale-element-background);--element-background-hover:var(--greyscale-element-background-hover);--element-background-strong:var(--greyscale-element-background-strong);--element-border-subtle:var(--greyscale-element-border-subtle);--element-border-strong:var(--greyscale-element-border-strong);--solid-background:var(--greyscale-solid-background);--solid-background-hover:var(--greyscale-solid-background-hover);--text-high-contrast:var(--greyscale-text-high-contrast);--text-low-contrast:var(--greyscale-text-low-contrast);color:var(--text-high-contrast)}[data-variant=error]{--app-background:var(--error-app-background);--app-background-subtle:var(--error-app-background-subtle);--app-border:var(--error-app-border);--element-background:var(--error-element-background);--element-background-hover:var(--error-element-background-hover);--element-background-strong:var(--error-element-background-strong);--element-border-subtle:var(--error-element-border-subtle);--element-border-strong:var(--error-element-border-strong);--solid-background:var(--error-solid-background);--solid-background-hover:var(--error-solid-background-hover);--text-high-contrast:var(--error-text-high-contrast);--text-low-contrast:var(--error-text-low-contrast);color:var(--text-high-contrast)}[data-variant=success]{--app-background:var(--success-app-background);--app-background-subtle:var(--success-app-background-subtle);--app-border:var(--success-app-border);--element-background:var(--success-element-background);--element-background-hover:var(--success-element-background-hover);--element-background-strong:var(--success-element-background-strong);--element-border-subtle:var(--success-element-border-subtle);--element-border-strong:var(--success-element-border-strong);--solid-background:var(--success-solid-background);--solid-background-hover:var(--success-solid-background-hover);--text-high-contrast:var(--success-text-high-contrast);--text-low-contrast:var(--success-text-low-contrast);color:var(--text-high-contrast)}[data-variant=warning]{--app-background:var(--warning-app-background);--app-background-subtle:var(--warning-app-background-subtle);--app-border:var(--warning-app-border);--element-background:var(--warning-element-background);--element-background-hover:var(--warning-element-background-hover);--element-background-strong:var(--warning-element-background-strong);--element-border-subtle:var(--warning-element-border-subtle);--element-border-strong:var(--warning-element-border-strong);--solid-background:var(--warning-solid-background);--solid-background-hover:var(--warning-solid-background-hover);--text-high-contrast:var(--warning-text-high-contrast);--text-low-contrast:var(--warning-text-low-contrast);color:var(--text-high-contrast)}[data-variant=info]{--app-background:var(--info-app-background);--app-background-subtle:var(--info-app-background-subtle);--app-border:var(--info-app-border);--element-background:var(--info-element-background);--element-background-hover:var(--info-element-background-hover);--element-background-strong:var(--info-element-background-strong);--element-border-subtle:var(--info-element-border-subtle);--element-border-strong:var(--info-element-border-strong);--solid-background:var(--info-solid-background);--solid-background-hover:var(--info-solid-background-hover);--text-high-contrast:var(--info-text-high-contrast);--text-low-contrast:var(--info-text-low-contrast);color:var(--text-high-contrast)}.lustre-ui-alert{--bg:var(--element-background);--border:var(--element-border-subtle);--text:var(--text-high-contrast);background-color:var(--bg);border:1px solid var(--border);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:var(--space-sm)}.lustre-ui-alert.clear{--bg:unsert}.lustre-ui-aside{--align:start;--gap:var(--space-md);--dir:row;--wrap:wrap;--min:60%;align-items:var(--align);display:flex;flex-direction:var(--dir);flex-wrap:var(--wrap);gap:var(--gap)}.lustre-ui-aside.content-first{--dir:row;--wrap:wrap}.lustre-ui-aside.content-last{--dir:row-reverse;--wrap:wrap-reverse}.lustre-ui-aside.align-start{--align:start}.lustre-ui-aside.align-center,.lustre-ui-aside.align-centre{--align:center}.lustre-ui-aside.align-end{--align:end}.lustre-ui-aside.stretch{--align:stretch}.lustre-ui-aside.packed{--gap:0}.lustre-ui-aside.tight{--gap:var(--space-xs)}.lustre-ui-aside.relaxed{--gap:var(--space-md)}.lustre-ui-aside.loose{--gap:var(--space-lg)}.lustre-ui-aside>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--min)}.lustre-ui-aside>:last-child{flex-grow:1;max-height:-moz-max-content;max-height:max-content}.lustre-ui-box{--gap:var(--space-sm);padding:var(--gap)}.lustre-ui-box.packed{--gap:0}.lustre-ui-box.tight{--gap:var(--space-xs)}.lustre-ui-box.relaxed{--gap:var(--space-md)}.lustre-ui-box.loose{--gap:var(--space-lg)}.lustre-ui-breadcrumbs{--gap:var(--space-sm);--align:center;align-items:var(--align);display:flex;flex-wrap:nowrap;gap:var(--gap);justify-content:start;overflow-x:auto}.lustre-ui-breadcrumbs.tight{--gap:var(--space-xs)}.lustre-ui-breadcrumbs.relaxed{--gap:var(--space-sm)}.lustre-ui-breadcrumbs.loose{--gap:var(--space-md)}.lustre-ui-breadcrumbs.align-start{--align:start}.lustre-ui-breadcrumbs.align-center,.lustre-ui-breadcrumbs.align-centre{--align:center}.lustre-ui-breadcrumbs.align-end{--align:end}.lustre-ui-breadcrumbs>*{flex:0 0 auto}.lustre-ui-breadcrumbs:not(:has(.active))>:last-child,.lustre-ui-breadcrumbs>.active{color:var(--text-low-contrast)}.lustre-ui-button{--bg-active:var(--element-background-strong);--bg-hover:var(--element-background-hover);--bg:var(--element-background);--border-active:var(--bg-active);--border:var(--bg);--text:var(--text-high-contrast);--padding-y:var(--space-xs);--padding-x:var(--space-sm);background-color:var(--bg);border:1px solid var(--border,var(--bg),var(--element-border-subtle));border-radius:var(--border-radius);color:var(--text);padding:var(--padding-y) var(--padding-x)}.lustre-ui-button:focus-within,.lustre-ui-button:hover{background-color:var(--bg-hover)}.lustre-ui-button:focus-within:active,.lustre-ui-button:hover:active{background-color:var(--bg-active);border-color:var(--border-active)}.lustre-ui-button.small{--padding-y:var(--space-2xs);--padding-x:var(--space-xs)}.lustre-ui-button.solid{--bg-active:var(--solid-background-hover);--bg-hover:var(--solid-background-hover);--bg:var(--solid-background);--border-active:var(--solid-background-hover);--border:var(--solid-background);--text:#fff}.lustre-ui-button.solid:focus-within:active,.lustre-ui-button.solid:hover:active{--bg-active:color-mix(in srgb,var(--solid-background-hover) 90%,#000);--border-active:color-mix(in srgb,var(--solid-background-hover) 90%,#000)}.lustre-ui-button.soft{--bg-active:var(--element-background-strong);--bg-hover:var(--element-background-hover);--bg:var(--element-background);--border-active:var(--bg-active);--border:var(--bg);--text:var(--text-high-contrast)}.lustre-ui-button.outline{--bg:unset;--border:var(--element-border-subtle)}.lustre-ui-button.clear{--bg:unset;--border:unset}.lustre-ui-centre{--display:flex;align-items:center;display:var(--display);justify-content:center}.lustre-ui-centre.inline{--display:inline-flex}.lustre-ui-cluster{--gap:var(--space-md);--dir:flex-start;--align:center;align-items:var(--align);display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:var(--dir)}.lustre-ui-cluster.packed{--gap:0}.lustre-ui-cluster.tight{--gap:var(--space-xs)}.lustre-ui-cluster.relaxed{--gap:var(--space-md)}.lustre-ui-cluster.loose{--gap:var(--space-lg)}.lustre-ui-cluster.from-start{--dir:flex-start}.lustre-ui-cluster.from-end{--dir:flex-end}.lustre-ui-cluster.align-start{--align:start}.lustre-ui-cluster.align-center,.lustre-ui-cluster.align-centre{--align:center}.lustre-ui-cluster.align-end{--align:end}.lustre-ui-cluster.stretch{--align:stretch}.lustre-ui-field{--label:var(--text-high-contrast);--label-align:start;--message:var(--text-low-contrast);--message-align:end;--text-size:var(--text-md)}.lustre-ui-field.small{--text-size:var(--text-sm)}.lustre-ui-field.label-start{--label-align:start}.lustre-ui-field.label-center,.lustre-ui-field.label-centre{--label-align:center}.lustre-ui-field.label-end{--label-align:end}.lustre-ui-field.message-start{--message-align:start}.lustre-ui-field.message-center,.lustre-ui-field.message-centre{--message-align:center}.lustre-ui-field.message-end{--message-align:end}.lustre-ui-field:has(input:disabled)>:is(.label,.message){opacity:.5}.lustre-ui-field>:not(input){color:var(--label);font-size:var(--text-size)}.lustre-ui-field>.label{display:inline-flex;justify-content:var(--label-align)}.lustre-ui-field>.message{color:var(--message);display:inline-flex;justify-content:var(--message-align)}.lustre-ui-group{align-items:stretch;display:inline-flex}.lustre-ui-group>:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)!important}.lustre-ui-group>:not(:first-child):not(:last-child){border-radius:0!important}.lustre-ui-group>:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0!important}.lustre-ui-icon{--size:1em;display:inline;height:var(--size);width:var(--size)}.lustre-ui-icon.xs{--size:var(--text-xs)}.lustre-ui-icon.sm{--size:var(--text-sm)}.lustre-ui-icon.md{--size:var(--text-md)}.lustre-ui-icon.lg{--size:var(--text-lg)}.lustre-ui-icon.xl{--size:var(--text-xl)}.lustre-ui-input{--border-active:var(--element-border-strong);--border:var(--element-border-subtle);--outline:var(--element-border-subtle);--text:var(--text-high-contrast);--text-placeholder:var(--text-low-contrast);--padding-y:var(--space-xs);--padding-x:var(--space-sm);border:1px solid var(--border,var(--bg),var(--element-border-subtle));border-radius:var(--border-radius);color:var(--text);padding:var(--padding-y) var(--padding-x)}.lustre-ui-input:hover{border-color:var(--border-active)}.lustre-ui-input:focus-within{border-color:var(--border-active);outline:1px solid var(--outline);outline-offset:2px}.lustre-ui-input::-moz-placeholder{color:var(--text-placeholder)}.lustre-ui-input::placeholder{color:var(--text-placeholder)}.lustre-ui-input:disabled{opacity:.5}.lustre-ui-input.clear{--border:unset}.lustre-ui-sequence{--gap:var(--space-md);--break:30rem;display:flex;flex-wrap:wrap;gap:var(--gap)}.lustre-ui-sequence.packed{--gap:0}.lustre-ui-sequence.tight{--gap:var(--space-xs)}.lustre-ui-sequence.relaxed{--gap:var(--space-md)}.lustre-ui-sequence.loose{--gap:var(--space-lg)}.lustre-ui-sequence[data-split-at=\"10\"]>:nth-last-child(n+10),.lustre-ui-sequence[data-split-at=\"10\"]>:nth-last-child(n+10)~*,.lustre-ui-sequence[data-split-at=\"3\"]>:nth-last-child(n+3),.lustre-ui-sequence[data-split-at=\"3\"]>:nth-last-child(n+3)~*,.lustre-ui-sequence[data-split-at=\"4\"]>:nth-last-child(n+4),.lustre-ui-sequence[data-split-at=\"4\"]>:nth-last-child(n+4)~*,.lustre-ui-sequence[data-split-at=\"5\"]>:nth-last-child(n+5),.lustre-ui-sequence[data-split-at=\"5\"]>:nth-last-child(n+5)~*,.lustre-ui-sequence[data-split-at=\"6\"]>:nth-last-child(n+6),.lustre-ui-sequence[data-split-at=\"6\"]>:nth-last-child(n+6)~*,.lustre-ui-sequence[data-split-at=\"7\"]>:nth-last-child(n+7),.lustre-ui-sequence[data-split-at=\"7\"]>:nth-last-child(n+7)~*,.lustre-ui-sequence[data-split-at=\"8\"]>:nth-last-child(n+8),.lustre-ui-sequence[data-split-at=\"8\"]>:nth-last-child(n+8)~*,.lustre-ui-sequence[data-split-at=\"9\"]>:nth-last-child(n+9),.lustre-ui-sequence[data-split-at=\"9\"]>:nth-last-child(n+9)~*{flex-basis:100%}.lustre-ui-sequence>*{flex-basis:calc((var(--break) - 100%)*999);flex-grow:1}.lustre-ui-stack{--gap:var(--space-md);display:flex;flex-direction:column;gap:var(--gap);justify-content:flex-start}.lustre-ui-stack.packed{--gap:0}.lustre-ui-stack.tight{--gap:var(--space-xs)}.lustre-ui-stack.relaxed{--gap:var(--space-md)}.lustre-ui-stack.loose{--gap:var(--space-lg)}.lustre-ui-tag{--bg-active:var(--element-background-strong);--bg-hover:var(--element-background-hover);--bg:var(--element-background);--border-active:var(--bg-active);--border:var(--bg);--text:var(--text-high-contrast);background-color:var(--bg);border:1px solid var(--border,var(--bg),var(--element-border-subtle));border-radius:var(--border-radius);color:var(--text);font-size:var(--text-sm);padding:0 var(--space-xs)}.lustre-ui-tag:is(button,a,[tabindex]){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lustre-ui-tag:is(button,a,[tabindex]):focus-within,.lustre-ui-tag:is(button,a,[tabindex]):hover{background-color:var(--bg-hover)}.lustre-ui-tag:is(button,a,[tabindex]):focus-within:active,.lustre-ui-tag:is(button,a,[tabindex]):hover:active{background-color:var(--bg-active);border-color:var(--border-active)}.lustre-ui-tag.solid{--bg-active:var(--solid-background-hover);--bg-hover:var(--solid-background-hover);--bg:var(--solid-background);--border-active:var(--solid-background-hover);--border:var(--solid-background);--text:#fff}.lustre-ui-tag.solid:is(button,a,[tabindex]):focus-within:active,.lustre-ui-tag.solid:is(button,a,[tabindex]):hover:active{--bg-active:color-mix(in srgb,var(--solid-background-hover) 90%,#000);--border-active:color-mix(in srgb,var(--solid-background-hover) 90%,#000)}.lustre-ui-tag.soft{--bg-active:var(--element-background-strong);--bg-hover:var(--element-background-hover);--bg:var(--element-background);--border-active:var(--bg-active);--border:var(--bg);--text:var(--text-high-contrast)}.lustre-ui-tag.outline{--bg:unset;--border:var(--element-border-subtle)}
"