Skip to content

Commit f235b39

Browse files
jounijouni
authored
feat: Aura theme foundation (#10142)
1 parent 5c269fa commit f235b39

File tree

10 files changed

+428
-2
lines changed

10 files changed

+428
-2
lines changed

‎dev/aura.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Aura</title>
9+
<link rel="stylesheet" href="../packages/aura/aura.css" />
10+
</head>
11+
<body>
12+
13+
<h1>Aura</h1>
14+
<h2>Aura</h2>
15+
<h3>Aura</h3>
16+
<h4>Aura</h4>
17+
<h5>Aura</h5>
18+
<h6>Aura</h6>
19+
20+
</body>
21+
</html>

‎packages/aura/aura.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
html {
2-
/* Global custom properties */
1+
@import './src/color.css';
2+
@import './src/palette.css';
3+
@import './src/size.css';
4+
@import './src/typography.css';
5+
6+
:where(html) {
7+
cursor: default;
38
}

‎packages/aura/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"main": "aura.css",
2020
"type": "module",
2121
"files": [
22+
"src",
2223
"*.css"
2324
],
2425
"keywords": [

‎packages/aura/src/color.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
:where(html) {
2+
--aura-contrast: 1;
3+
4+
--aura-accent-light: hsl(220, 80%, 47%);
5+
--aura-accent-dark: hsl(220, 75%, 55%);
6+
7+
--_color-base: light-dark(
8+
oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),
9+
oklch(from var(--aura-background-dark) 1 c h)
10+
);
11+
--vaadin-color: light-dark(
12+
color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent),
13+
color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent)
14+
);
15+
--vaadin-color-subtle: light-dark(
16+
color-mix(in srgb, var(--_color-base) calc(55% + 10% * var(--aura-contrast)), transparent),
17+
color-mix(in srgb, var(--_color-base) calc(57% + 10% * var(--aura-contrast)), transparent)
18+
);
19+
--vaadin-color-disabled: color-mix(in srgb, var(--_color-base) calc(30% + 10% * var(--aura-contrast)), transparent);
20+
21+
--_border-color-base: light-dark(
22+
oklch(from var(--aura-background-light) 0.1 c h),
23+
oklch(from var(--aura-background-dark) 0.85 c h)
24+
);
25+
--vaadin-border-color: color-mix(
26+
in srgb,
27+
var(--_border-color-base) calc(14% + 6% * var(--aura-contrast)),
28+
transparent
29+
);
30+
--vaadin-border-color-subtle: light-dark(
31+
color-mix(in srgb, var(--_border-color-base) max(5%, 5% + 3% * var(--aura-contrast)), transparent),
32+
color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 5% * var(--aura-contrast)), transparent)
33+
);
34+
35+
--aura-background-light: oklch(from var(--aura-accent-light) min(1, l + (1 - l) * 0.9) calc(c * 0.05) h);
36+
--aura-background-dark: oklch(from var(--aura-accent-dark) max(0, l/2 - (1 - l) * 0.2) calc(c * 0.05) h);
37+
--aura-background: light-dark(var(--aura-background-light), var(--aura-background-dark));
38+
39+
--_bg-alt: oklch(
40+
from var(--aura-background) calc(l + c) min(c, c * 2 - l/20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4)
41+
);
42+
--_bg-accent: radial-gradient(
43+
circle at 0% 0%,
44+
light-dark(
45+
oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3 - l/20) h),
46+
oklch(from var(--aura-background-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
47+
),
48+
transparent 30%
49+
);
50+
--aura-app-background:
51+
var(--_bg-accent), radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt));
52+
53+
--aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
54+
--vaadin-focus-ring-color: var(--aura-accent-color);
55+
accent-color: var(--aura-accent-color);
56+
/* Workaround Safari 17 limitation and compute these separately for light and dark */
57+
--aura-accent-contrast: light-dark(
58+
oklch(from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0),
59+
oklch(from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0)
60+
);
61+
62+
--aura-accent-text-light: color-mix(
63+
in srgb,
64+
var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
65+
var(--vaadin-color)
66+
);
67+
--aura-accent-text-dark: color-mix(
68+
in srgb,
69+
var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
70+
var(--vaadin-color)
71+
);
72+
--aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
73+
74+
/* TODO probably broken for Safari 17 */
75+
--vaadin-user-color: var(--aura-accent-color);
76+
77+
--vaadin-background-container: color-mix(
78+
in srgb,
79+
var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))),
80+
transparent
81+
);
82+
83+
--vaadin-background-container-strong: color-mix(
84+
in srgb,
85+
var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))),
86+
transparent
87+
);
88+
89+
color: var(--vaadin-color);
90+
background: var(--aura-app-background);
91+
background-size: 100vw 100vh;
92+
background-attachment: fixed;
93+
}
94+
95+
@supports (color: hsl(0 0 0)) {
96+
:where(html) {
97+
--_safari-17-deg: 1;
98+
}
99+
}
100+
101+
:where(h1, h2, h3, h4, h5, h6) {
102+
color: var(--vaadin-color);
103+
}

‎packages/aura/src/fonts/InstrumentSans/InstrumentSans.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
3+
4+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
5+
This license is included in the LICENSE.txt file, and is also available with a FAQ at: https://openfontlicense.org
6+
*/
7+
@font-face {
8+
font-family: 'Instrument Sans';
9+
src: url(./InstrumentSans.woff2) format('woff2');
10+
font-display: swap;
11+
font-style: normal;
12+
font-weight: 400 700;
13+
}

‎packages/aura/src/fonts/InstrumentSans/InstrumentSans.woff2‎

86.4 KB
Binary file not shown.

‎packages/aura/src/fonts/InstrumentSans/LICENSE.txt‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
2+
3+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4+
This license is copied below, and is also available with a FAQ at:
5+
https://openfontlicense.org
6+
7+
8+
-----------------------------------------------------------
9+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10+
-----------------------------------------------------------
11+
12+
PREAMBLE
13+
The goals of the Open Font License (OFL) are to stimulate worldwide
14+
development of collaborative font projects, to support the font creation
15+
efforts of academic and linguistic communities, and to provide a free and
16+
open framework in which fonts may be shared and improved in partnership
17+
with others.
18+
19+
The OFL allows the licensed fonts to be used, studied, modified and
20+
redistributed freely as long as they are not sold by themselves. The
21+
fonts, including any derivative works, can be bundled, embedded,
22+
redistributed and/or sold with any software provided that any reserved
23+
names are not used by derivative works. The fonts and derivatives,
24+
however, cannot be released under any other type of license. The
25+
requirement for fonts to remain under this license does not apply
26+
to any document created using the fonts or their derivatives.
27+
28+
DEFINITIONS
29+
"Font Software" refers to the set of files released by the Copyright
30+
Holder(s) under this license and clearly marked as such. This may
31+
include source files, build scripts and documentation.
32+
33+
"Reserved Font Name" refers to any names specified as such after the
34+
copyright statement(s).
35+
36+
"Original Version" refers to the collection of Font Software components as
37+
distributed by the Copyright Holder(s).
38+
39+
"Modified Version" refers to any derivative made by adding to, deleting,
40+
or substituting -- in part or in whole -- any of the components of the
41+
Original Version, by changing formats or by porting the Font Software to a
42+
new environment.
43+
44+
"Author" refers to any designer, engineer, programmer, technical
45+
writer or other person who contributed to the Font Software.
46+
47+
PERMISSION & CONDITIONS
48+
Permission is hereby granted, free of charge, to any person obtaining
49+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50+
redistribute, and sell modified and unmodified copies of the Font
51+
Software, subject to the following conditions:
52+
53+
1) Neither the Font Software nor any of its individual components,
54+
in Original or Modified Versions, may be sold by itself.
55+
56+
2) Original or Modified Versions of the Font Software may be bundled,
57+
redistributed and/or sold with any software, provided that each copy
58+
contains the above copyright notice and this license. These can be
59+
included either as stand-alone text files, human-readable headers or
60+
in the appropriate machine-readable metadata fields within text or
61+
binary files as long as those fields can be easily viewed by the user.
62+
63+
3) No Modified Version of the Font Software may use the Reserved Font
64+
Name(s) unless explicit written permission is granted by the corresponding
65+
Copyright Holder. This restriction only applies to the primary font name as
66+
presented to the users.
67+
68+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69+
Software shall not be used to promote, endorse or advertise any
70+
Modified Version, except to acknowledge the contribution(s) of the
71+
Copyright Holder(s) and the Author(s) or with their explicit written
72+
permission.
73+
74+
5) The Font Software, modified or unmodified, in part or in whole,
75+
must be distributed entirely under this license, and must not be
76+
distributed under any other license. The requirement for fonts to
77+
remain under this license does not apply to any document created
78+
using the Font Software.
79+
80+
TERMINATION
81+
This license becomes null and void if any of the above conditions are
82+
not met.
83+
84+
DISCLAIMER
85+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93+
OTHER DEALINGS IN THE FONT SOFTWARE.

‎packages/aura/src/palette.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
:where(html) {
2+
--aura-red: light-dark(
3+
oklch(from var(--aura-accent-light) 0.55 c calc(clamp(380 - rem(h, 6), h + 20, 420 - rem(h, 6)) + 20)),
4+
oklch(from var(--aura-accent-dark) 0.7 c calc(clamp(380 - rem(h, 6), h + 20, 420 - rem(h, 6)) + 20))
5+
);
6+
--aura-orange: light-dark(
7+
oklch(from var(--aura-accent-light) 0.8 min(c + 0.1, 0.4) clamp(80 - rem(h, 6), h, 90 + rem(h, 6))),
8+
oklch(from var(--aura-accent-dark) 0.75 min(c + 0.1, 0.4) clamp(80 - rem(h, 6), h, 90 + rem(h, 6)))
9+
);
10+
--aura-yellow: light-dark(
11+
oklch(from var(--aura-accent-light) 0.9 min(c + 0.1, 0.4) clamp(100 - rem(h, 6), h, 105 - rem(h, 6))),
12+
oklch(from var(--aura-accent-dark) 0.85 min(c + 0.1, 0.4) clamp(100 - rem(h, 6), h, 105 - rem(h, 6)))
13+
);
14+
--aura-green: light-dark(
15+
oklch(from var(--aura-accent-light) 0.5 min(c + 0.05, 0.4) clamp(130 - rem(h, 6), h, 160 - rem(h, 6))),
16+
oklch(from var(--aura-accent-dark) 0.7 min(c + 0.05, 0.4) clamp(130 - rem(h, 6), h, 160 - rem(h, 6)))
17+
);
18+
--aura-blue: light-dark(
19+
oklch(from var(--aura-accent-light) 0.55 min(c + 0.05, 0.4) clamp(220 - rem(h, 6), h, 260 - rem(h, 6))),
20+
oklch(from var(--aura-accent-dark) 0.7 min(c + 0.05, 0.4) clamp(220 - rem(h, 6), h, 260 - rem(h, 6)))
21+
);
22+
--aura-purple: light-dark(
23+
oklch(from var(--aura-accent-light) 0.55 min(c + 0.05, 0.4) clamp(280 - rem(h, 6), h, 350 - rem(h, 6))),
24+
oklch(from var(--aura-accent-dark) 0.7 min(c + 0.05, 0.4) clamp(280 - rem(h, 6), h, 350 - rem(h, 6)))
25+
);
26+
27+
--aura-red-text: color-mix(in srgb, var(--aura-red) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
28+
--aura-orange-text: color-mix(
29+
in srgb,
30+
var(--aura-orange) calc(60% - 15% * var(--aura-contrast)),
31+
var(--vaadin-color)
32+
);
33+
--aura-yellow-text: color-mix(
34+
in srgb,
35+
var(--aura-yellow) calc(55% - 15% * var(--aura-contrast)),
36+
var(--vaadin-color)
37+
);
38+
--aura-green-text: color-mix(in srgb, var(--aura-green) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
39+
--aura-blue-text: color-mix(in srgb, var(--aura-blue) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
40+
--aura-purple-text: color-mix(
41+
in srgb,
42+
var(--aura-purple) calc(70% - 15% * var(--aura-contrast)),
43+
var(--vaadin-color)
44+
);
45+
}

‎packages/aura/src/size.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
:where(html) {
2+
--aura-base-size: 16;
3+
--_size-ref: 16;
4+
--aura-base-radius: 3;
5+
--vaadin-radius-s: min(0.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
6+
--vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
7+
--vaadin-radius-l: round(var(--aura-base-radius) * 1.5px + 10px, 1px);
8+
}
9+
10+
:where(html, [theme]) {
11+
--vaadin-padding-xs: round(
12+
var(--aura-base-size) * 0.25 * pow(var(--aura-base-size) / var(--_size-ref), 0.5) * 1px,
13+
1px
14+
);
15+
--vaadin-padding-s: round(
16+
var(--aura-base-size) * 0.5 * pow(var(--aura-base-size) / var(--_size-ref), 0.75) * 1px,
17+
1px
18+
);
19+
--vaadin-padding-m: round(
20+
var(--aura-base-size) * 0.75 * pow(var(--aura-base-size) / var(--_size-ref), 0.3) * 1px,
21+
1px
22+
);
23+
24+
--vaadin-padding-l: calc(var(--aura-base-size) * 1px);
25+
--vaadin-padding-xl: round(
26+
var(--aura-base-size) * 1.5 * pow(var(--aura-base-size) / var(--_size-ref), 0.1) * 1px,
27+
1px
28+
);
29+
30+
--vaadin-padding-container: round(var(--vaadin-padding-s) / 1.4, 1px)
31+
max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
32+
33+
--vaadin-gap-xs: var(--vaadin-padding-xs);
34+
--vaadin-gap-s: var(--vaadin-padding-s);
35+
--vaadin-gap-m: var(--vaadin-padding-m);
36+
--vaadin-gap-l: var(--vaadin-padding-l);
37+
--vaadin-gap-xl: var(--vaadin-padding-xl);
38+
}
39+
40+
@media (pointer: coarse) {
41+
:where(html) {
42+
--aura-base-size: 19;
43+
}
44+
}

0 commit comments

Comments
 (0)