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