Commit 0d84cc9d authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Rename and merge colour variable names to improve usability

Towards #164
parent fb22459f
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root { :root {
--inset-shadow: inset 0 0.25em 0.25em var(--shadow); --inset-shadow: inset 0 0.25em 0.25em var(--shadow);
--outset-shadow: linear-gradient(var(--background-input) 60%, var(--shadow-light)); --outset-shadow: linear-gradient(var(--input-background) 60%, var(--shadow));
} }
/* NORMALISE /* NORMALISE
...@@ -96,7 +96,7 @@ canvas { ...@@ -96,7 +96,7 @@ canvas {
} }
hr { hr {
border-color: var(--line); border-color: var(--accent-line);
border-width: 0.05em; border-width: 0.05em;
border-style: solid; border-style: solid;
margin-bottom: 1em; margin-bottom: 1em;
...@@ -119,14 +119,14 @@ figure > img { ...@@ -119,14 +119,14 @@ figure > img {
a, a,
a:visited, a:visited,
.linkish { .linkish {
color: var(--text-strong); color: var(--link-text);
} }
a:hover, a:hover,
a:active, a:active,
.linkish:hover, .linkish:hover,
.linkish:active { .linkish:active {
color: var(--text-subtle); color: var(--link-action);
} }
::selection { ::selection {
...@@ -157,7 +157,7 @@ td, ...@@ -157,7 +157,7 @@ td,
th, th,
input, input,
textarea { textarea {
border-color: var(--border); border-color: var(--input-border);
border-width: 0.07em; border-width: 0.07em;
border-style: solid; border-style: solid;
padding: 0.25em 0.5rem; padding: 0.25em 0.5rem;
...@@ -197,7 +197,7 @@ select { ...@@ -197,7 +197,7 @@ select {
} }
fieldset { fieldset {
border-color: var(--line); border-color: var(--accent-line);
border-width: 0.07em; border-width: 0.07em;
border-style: solid; border-style: solid;
margin: 1em 0; margin: 1em 0;
...@@ -226,7 +226,7 @@ input[type=radio] + label { ...@@ -226,7 +226,7 @@ input[type=radio] + label {
@supports(-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) { @supports(-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) {
input, input,
textarea { textarea {
background-color: var(--background-input); background-color: var(--input-background);
color: var(--text); color: var(--text);
} }
...@@ -257,19 +257,19 @@ input[type=radio] + label { ...@@ -257,19 +257,19 @@ input[type=radio] + label {
input[type=checkbox], input[type=checkbox],
input[type=radio] { input[type=radio] {
background-color: var(--background-input); background-color: var(--input-background);
background-image: linear-gradient(var(--shadow) 0%, var(--background-input) 20%); background-image: linear-gradient(var(--shadow) 0%, var(--input-background) 20%);
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
} }
input[type=radio] { input[type=radio] {
background-image: radial-gradient(circle, var(--background-input) 50%, var(--shadow) 95%); background-image: radial-gradient(circle, var(--input-background) 50%, var(--shadow) 95%);
border-radius: 0.75em; border-radius: 0.75em;
} }
input[type=radio]:checked { input[type=radio]:checked {
background-image: radial-gradient(circle, var(--shadow) 15%, var(--background-input) 50%); background-image: radial-gradient(circle, var(--shadow) 15%, var(--input-background) 50%);
} }
input[type=radio]:focus { input[type=radio]:focus {
...@@ -308,12 +308,12 @@ input[type=radio] + label { ...@@ -308,12 +308,12 @@ input[type=radio] + label {
} }
select { select {
background-color: var(--background-input); background-color: var(--input-background);
background-image: var(--arrow-down), var(--outset-shadow); background-image: var(--arrow-down), var(--outset-shadow);
background-repeat: no-repeat, repeat; background-repeat: no-repeat, repeat;
background-position: right 0.75rem top 50%, 0 0; background-position: right 0.75rem top 50%, 0 0;
background-size: 0.8em 0.8em, 100%; background-size: 0.8em 0.8em, 100%;
border-color: var(--border); border-color: var(--input-border);
border-radius: 0.5em; border-radius: 0.5em;
box-shadow: 0 0.05em 0 0.05em var(--shadow); box-shadow: 0 0.05em 0 0.05em var(--shadow);
color: var(--text); color: var(--text);
...@@ -346,9 +346,9 @@ input[type=radio] + label { ...@@ -346,9 +346,9 @@ input[type=radio] + label {
} }
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
background: var(--background-input); background: var(--input-background);
background-image: var(--outset-shadow); background-image: var(--outset-shadow);
border-color: var(--text-secondary); border-color: var(--placeholder-text);
width: 100%; width: 100%;
height: 1em; height: 1em;
border-radius: 0.5em; border-radius: 0.5em;
...@@ -356,7 +356,7 @@ input[type=radio] + label { ...@@ -356,7 +356,7 @@ input[type=radio] + label {
} }
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
background: var(--background-button); background: var(--button-background);
border-radius: 0.75em; border-radius: 0.75em;
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
...@@ -365,9 +365,9 @@ input[type=radio] + label { ...@@ -365,9 +365,9 @@ input[type=radio] + label {
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
background: var(--background-input); background: var(--input-background);
background-image: var(--outset-shadow); background-image: var(--outset-shadow);
border-color: var(--text-secondary); border-color: var(--placeholder-text);
width: 100%; width: 100%;
height: 1em; height: 1em;
border-radius: 0.5em; border-radius: 0.5em;
...@@ -375,7 +375,7 @@ input[type=radio] + label { ...@@ -375,7 +375,7 @@ input[type=radio] + label {
} }
input[type=range]::-moz-range-thumb { input[type=range]::-moz-range-thumb {
background: var(--background-button); background: var(--button-background);
border-radius: 0.75em; border-radius: 0.75em;
border: none; border: none;
height: 1.5em; height: 1.5em;
...@@ -391,33 +391,33 @@ input[type=radio] + label { ...@@ -391,33 +391,33 @@ input[type=radio] + label {
} }
input[type=range]::-ms-fill-lower { input[type=range]::-ms-fill-lower {
background: var(--background-button); background: var(--button-background);
border: 0.07em solid var(--text-secondary); border: 0.07em solid var(--placeholder-text);
border-radius: 0.75em; border-radius: 0.75em;
} }
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
background: var(--background-input); background: var(--input-background);
background-image: var(--outset-shadow); background-image: var(--outset-shadow);
} }
input[type=range]::-ms-fill-upper { input[type=range]::-ms-fill-upper {
background: var(--background-input); background: var(--input-background);
background-image: var(--outset-shadow); background-image: var(--outset-shadow);
border-color: var(--text-secondary); border-color: var(--placeholder-text);
border: 0.07em solid; border: 0.07em solid;
border-radius: 0.75em; border-radius: 0.75em;
} }
input[type=range]::-ms-thumb { input[type=range]::-ms-thumb {
background: var(--background-button); background: var(--button-background);
border-radius: 0.75em; border-radius: 0.75em;
height: 1em; height: 1em;
width: 1.5em; width: 1.5em;
} }
progress { progress {
color: var(--line); /* bar colour for IE */ color: var(--accent-line); /* bar colour for IE */
display: block; display: block;
height: 1em; height: 1em;
margin-top: 0.25em; margin-top: 0.25em;
...@@ -426,9 +426,9 @@ input[type=radio] + label { ...@@ -426,9 +426,9 @@ input[type=radio] + label {
} }
progress::-webkit-progress-bar { progress::-webkit-progress-bar {
background-color: var(--background-input); background-color: var(--input-background);
background-image: var(--outset-shadow); background-image: var(--outset-shadow);
border: 0.07em solid var(--line); border: 0.07em solid var(--accent-line);
border-radius: 0.5em; border-radius: 0.5em;
} }
progress::-webkit-progress-value { progress::-webkit-progress-value {
...@@ -437,11 +437,11 @@ input[type=radio] + label { ...@@ -437,11 +437,11 @@ input[type=radio] + label {
/* Firefox support is more limited */ /* Firefox support is more limited */
progress::-moz-progress-bar { progress::-moz-progress-bar {
background-color: var(--line); background-color: var(--accent-line);
} }
progress::-webkit-progress-value { progress::-webkit-progress-value {
background-color: var(--line); background-color: var(--accent-line);
} }
} }
...@@ -483,7 +483,7 @@ input[type=file] { ...@@ -483,7 +483,7 @@ input[type=file] {
} }
input::placeholder { input::placeholder {
color: var(--text-secondary); color: var(--placeholder-text);
} }
select { select {
...@@ -503,9 +503,9 @@ button, ...@@ -503,9 +503,9 @@ button,
input[type=button], input[type=button],
input[type=submit], input[type=submit],
input[type=reset] { input[type=reset] {
background-color: var(--background-button); background-color: var(--button-background);
color: var(--text-button); color: var(--button-text);
border: solid 0.14em var(--background-button); border: solid 0.14em var(--button-background);
display: block; display: block;
margin: 1em 0; margin: 1em 0;
} }
...@@ -522,17 +522,17 @@ input[type=submit]:focus, ...@@ -522,17 +522,17 @@ input[type=submit]:focus,
input[type=reset]:hover, input[type=reset]:hover,
input[type=reset]:active, input[type=reset]:active,
input[type=reset]:focus { input[type=reset]:focus {
border-color: var(--background-button-strong); border-color: var(--button-action);
background-color: var(--background-button-strong); background-color: var(--button-action);
} }
button.secondary, button.secondary,
input[type=button].secondary, input[type=button].secondary,
input[type=submit].secondary, input[type=submit].secondary,
input[type=reset].secondary { input[type=reset].secondary {
background-color: var(--background-button-strong); background-color: var(--button-action);
border-color: var(--background-button-strong); border-color: var(--button-action);
color: var(--text-button); color: var(--button-text);
} }
button:hover.secondary, button:hover.secondary,
...@@ -547,9 +547,9 @@ input[type=submit]:focus.secondary, ...@@ -547,9 +547,9 @@ input[type=submit]:focus.secondary,
input[type=reset]:hover.secondary, input[type=reset]:hover.secondary,
input[type=reset]:active.secondary, input[type=reset]:active.secondary,
input[type=reset]:focus.secondary { input[type=reset]:focus.secondary {
background-color: var(--background-button); background-color: var(--button-background);
border-color: var(--background-button); border-color: var(--button-background);
color: var(--text-button); color: var(--button-text);
} }
button svg { button svg {
......
...@@ -17,94 +17,99 @@ ...@@ -17,94 +17,99 @@
--background: var(--mono90); --background: var(--mono90);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--background: var(--mono90); --background: var(--mono90);
} }
} }
/* --background-highlight /* --highlighted-background
- - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */ /* light mode (site darkmode is set to auto or never) */
[data-darkmode="auto"], [data-darkmode="auto"],
[data-darkmode="never"] { [data-darkmode="never"] {
--background-highlight: var(--colour20); --highlighted-background: var(--colour20);
} }
/* dark mode (site) */ /* dark mode (site) */
[data-darkmode="always"] { [data-darkmode="always"] {
--background-highlight: var(--mono80); --highlighted-background: var(--mono80);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--background-highlight: var(--mono80); --highlighted-background: var(--mono80);
} }
} }
/* --background-input /* --input-background
- - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */ /* light mode (site darkmode is set to auto or never) */
[data-darkmode="auto"], [data-darkmode="auto"],
[data-darkmode="never"] { [data-darkmode="never"] {
--background-input: var(--mono0); --input-background: var(--mono0);
} }
/* dark mode (site) */ /* dark mode (site) */
[data-darkmode="always"] { [data-darkmode="always"] {
--background-input: var(--mono90); --input-background: var(--mono90);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--background-input: var(--mono90); --input-background: var(--mono90);
} }
} }
/* --background-header /* --header-background
- - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */ /* light mode (site darkmode is set to auto or never) */
[data-darkmode="auto"], [data-darkmode="auto"],
[data-darkmode="never"] { [data-darkmode="never"] {
--background-header: var(--colour0); --header-background: var(--colour0);
} }
/* dark mode (site) */ /* dark mode (site) */
[data-darkmode="always"] { [data-darkmode="always"] {
--background-header: var(--mono90); --header-background: var(--mono90);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--background-header: var(--mono90); --header-background: var(--mono90);
} }
} }
/* --background-footer /* --footer-background
- - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */ /* light mode (site darkmode is set to auto or never) */
[data-darkmode="auto"], [data-darkmode="auto"],
[data-darkmode="never"] { [data-darkmode="never"] {
--background-footer: var(--colour0); --footer-background: var(--colour0);
} }
/* dark mode (site) */ /* dark mode (site) */
[data-darkmode="always"] { [data-darkmode="always"] {
--background-footer: var(--mono90); --footer-background: var(--mono90);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--background-footer: var(--mono90); --footer-background: var(--mono90);
} }
} }
...@@ -122,242 +127,232 @@ ...@@ -122,242 +127,232 @@
--text: var(--mono15); --text: var(--mono15);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--text: var(--mono15); --text: var(--mono15);
} }
} }
/* --text-secondary /* --placeholder-text
- - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */ /* light mode (site darkmode is set to auto or never) */
[data-darkmode="auto"], [data-darkmode="auto"],
[data-darkmode="never"] { [data-darkmode="never"] {
--text-secondary: var(--mono70); --placeholder-text: var(--mono70);
} }
/* dark mode (site) */ /* dark mode (site) */
[data-darkmode="always"] { [data-darkmode="always"] {
--text-secondary: var(--mono20); --placeholder-text: var(--mono20);
} }
/* when the browser wants darkmode and site darkmode is set to auto */ /* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[data-darkmode="auto"] { [data-darkmode="auto"] {
--text-secondary: var(--mono20); --placeholder-text: var(--mono20);
} }
} }
/* --text-strong /* --link-text
- - - - - - - - - - - - - - - - - - - - - */ - - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */ /* light mode (site darkmode is set to auto or never) */
[data-darkmode="auto"],