diff --git a/src/css/common.css b/src/css/common.css
index 809e179d5..a77241dc1 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -45,7 +45,7 @@ body {
box-sizing: border-box;
color: var(--ink-1);
fill: var(--ink-1);
- font-family: Inter, sans-serif;
+ font-family: var(--font-family);
font-size: var(--font-size);
line-height: 1.5;
margin: 0;
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 3f21c6f4b..d30494a0a 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -21,18 +21,28 @@ html, body {
z-index: 10;
}
.tabButton {
+ background-color: transparent;
border: 0;
border-bottom: 3px solid transparent;
+ border-radius: 0;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
+ font-family: var(--font-family);
+ font-size: var(--font-size);
padding: 0.7em 1.4em calc(0.7em - 3px);
text-decoration: none;
- user-select: none;
white-space: nowrap;
}
.tabButton:focus {
outline: 0;
}
+/*
+ * TODO: support keyboard-driven navigation
+ *
+.tabButton:not(:active):focus {
+ background-color: var(--dashboard-tab-focus-surface);
+ }
+ */
.tabButton.selected {
background-color: var(--dashboard-tab-active-surface);
border-bottom: 3px solid var(--dashboard-tab-active-ink);
@@ -91,8 +101,8 @@ body.noDashboard #dashboard-nav {
cursor: pointer;
}
:root.desktop .tabButton:not(.selected):hover {
- background-color: var(--dashboard-tab-surface-hover);
- border-bottom-color: var(--dashboard-tab-border-hover);
+ background-color: var(--dashboard-tab-hover-surface);
+ border-bottom-color: var(--dashboard-tab-hover-border);
}
/* touch-screen devices */
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 4ba88ad8a..2d3ab910c 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -122,11 +122,12 @@
}
/*
- * Font size
+ * Font
*
* */
:root {
--font-size: 14px;
+ --font-family: Inter, sans-serif;
}
:root.mobile {
@@ -139,18 +140,18 @@
* Tool: hsluv.org
*
* */
-:root /* h268 */ {
- --primary-5: 13 4 65; /* S:90 Luv:5 */
- --primary-10: 22 9 92; /* S:90 Luv:10 */
- --primary-20: 40 20 145; /* S:90 Luv:20 */
- --primary-30: 59 32 202; /* S:90 Luv:30 */
- --primary-40: 84 62 234; /* S:90 Luv:40 */
- --primary-50: 112 98 240; /* S:90 Luv:50 */
- --primary-60: 139 130 244; /* S:90 Luv:60 */
- --primary-70: 168 162 247; /* S:90 Luv:70 */
- --primary-80: 196 193 250; /* S:90 Luv:80 */
- --primary-90: 225 224 252; /* S:90 Luv:90 */
- --primary-95: 240 239 254; /* S:90 Luv:95 */
+:root /* h255 */ {
+ --primary-5: 3 16 40; /* S:90 Luv:5 */
+ --primary-10: 5 27 59; /* S:90 Luv:10 */
+ --primary-20: 14 47 95; /* S:90 Luv:20 */
+ --primary-30: 24 69 134; /* S:90 Luv:30 */
+ --primary-40: 34 93 176; /* S:90 Luv:40 */
+ --primary-50: 45 117 219; /* S:90 Luv:50 */
+ --primary-60: 86 143 244; /* S:90 Luv:60 */
+ --primary-70: 137 170 247; /* S:90 Luv:70 */
+ --primary-80: 179 198 250; /* S:90 Luv:80 */
+ --primary-90: 218 226 252; /* S:90 Luv:90 */
+ --primary-95: 236 240 254; /* S:90 Luv:95 */
}
/*
@@ -224,6 +225,9 @@
/* buttons */
--button-surface-rgb: var(--gray-80);
+ --dashboard-tab-active-ink-rgb: var(--primary-40);
+ --dashboard-tab-focus-surface-rgb: var(--primary-90);
+
/* popup panel */
--popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
--popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
@@ -304,6 +308,9 @@
/* buttons */
--button-surface-rgb: var(--gray-30);
+ --dashboard-tab-active-ink-rgb: var(--primary-70);
+ --dashboard-tab-focus-surface-rgb: var(--primary-20);
+
/* popup panel */
--popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
@@ -386,10 +393,11 @@
--notice-surface-shadow: #000 0 2px 8px;
--dashboard-tab-ink: var(--ink-1);
- --dashboard-tab-active-ink: var(--accent-surface-1);
+ --dashboard-tab-active-ink: rgb(var(--dashboard-tab-active-ink-rgb));
--dashboard-tab-active-surface: transparent;
- --dashboard-tab-surface-hover: var(--surface-2);
- --dashboard-tab-border-hover: var(--surface-3);
+ --dashboard-tab-focus-surface: rgb(var(--dashboard-tab-focus-surface-rgb));
+ --dashboard-tab-hover-surface: var(--surface-2);
+ --dashboard-tab-hover-border: var(--surface-3);
/* info levels: normal, fyi, warn, error -- we want same Luv */
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
diff --git a/src/dashboard.html b/src/dashboard.html
index b15840a1e..3840d1d60 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -13,15 +13,15 @@
+ -->