introduce theme attributes and variables
This commit is contained in:
parent
0737c435a8
commit
da976ff4fe
@ -166,6 +166,40 @@
|
||||
--light: var(--light-gray);
|
||||
--dark: var(--near-black);
|
||||
|
||||
/* LIGHT (default) THEME VARIABLES */
|
||||
|
||||
--background: var(--moon-gray);
|
||||
--button-background: var(--light-gray);
|
||||
--circle-background: var(--light-gray);
|
||||
--circle-small-hover-background: var(--white);
|
||||
|
||||
--color-ssb: var(--hot-pink);
|
||||
--color-settings: var(--purple);
|
||||
--color-status: var(--green);
|
||||
--color-info: var(--info);
|
||||
|
||||
--capsule-background: var(--light-gray);
|
||||
|
||||
--text-color-normal: var(--near-black);
|
||||
--text-color-gray: var(--mid-gray);
|
||||
--text-color-light-gray: var(--moon-gray);
|
||||
--text-color-light: var(--white);
|
||||
|
||||
--icon-normal: invert(0%) sepia(1%) saturate(100%) hue-rotate(79deg) brightness(86%) contrast(87%);
|
||||
--icon-gray: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
|
||||
--icon-light: invert();
|
||||
|
||||
/* DARK THEME VARIABLES */
|
||||
|
||||
/*--background-dark: var(--dark-gray);*/
|
||||
--background-dark: #222;
|
||||
--button-background-dark: var(--mid-gray);
|
||||
/*--capsule-background-dark: var(--light-gray);*/
|
||||
--capsule-background-dark: #333;
|
||||
--circle-background-dark: var(--silver);
|
||||
--circle-small-hover-background-dark: var(--moon-gray);
|
||||
|
||||
}
|
||||
/* we need to add shades for each accent colour
|
||||
*
|
||||
* --info-100
|
||||
@ -174,4 +208,3 @@
|
||||
* --info-400
|
||||
* --info-500
|
||||
*/
|
||||
}
|
||||
|
||||
@ -26,6 +26,8 @@
|
||||
* - NAVIGATION
|
||||
* - PARAGRAPHS
|
||||
* - SWITCHES / SLIDERS
|
||||
* - TEXT
|
||||
* - TITLES
|
||||
*
|
||||
\* ------------------------------ */
|
||||
|
||||
@ -128,13 +130,57 @@
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: var(--moon-gray);
|
||||
background-color: var(--background);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* BORDERS
|
||||
*/
|
||||
|
||||
.border-circle-small {
|
||||
border: 4px solid;
|
||||
}
|
||||
|
||||
.border-settings {
|
||||
border-color: var(--color-settings);
|
||||
}
|
||||
|
||||
.border-ssb {
|
||||
border-color: var(--color-ssb);
|
||||
}
|
||||
|
||||
.border-status {
|
||||
border-color: var(--color-status);
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.border-success {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.border-info {
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
.border-danger {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.border-dark-gray {
|
||||
border-color: var(--dark-gray);
|
||||
}
|
||||
|
||||
/*
|
||||
* BUTTONS
|
||||
*/
|
||||
@ -146,7 +192,7 @@ body {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: var(--near-black);
|
||||
color: var(--button-text-color);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
@ -169,37 +215,42 @@ body {
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: var(--light-gray);
|
||||
background-color: var(--button-background);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background-color: var(--primary);
|
||||
color: var(--button-text-hover-color);
|
||||
}
|
||||
|
||||
.button-primary:focus {
|
||||
background-color: var(--primary);
|
||||
color: var(--button-text-hover-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background-color: var(--light-gray);
|
||||
background-color: var(--button-background);
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
background-color: var(--light-silver);
|
||||
color: var(--button-text-hover-color);
|
||||
}
|
||||
|
||||
.button-secondary:focus {
|
||||
background-color: var(--light-silver);
|
||||
color: var(--button-text-hover-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button-warning {
|
||||
background-color: var(--light-gray);
|
||||
background-color: var(--button-background);
|
||||
}
|
||||
|
||||
.button-warning:hover {
|
||||
background-color: var(--light-red);
|
||||
color: var(--button-text-hover-color);
|
||||
}
|
||||
|
||||
.button-warning:focus {
|
||||
@ -213,9 +264,9 @@ body {
|
||||
|
||||
.capsule {
|
||||
padding: 1rem;
|
||||
border: var(--border-width-1) solid;
|
||||
border-style: solid;
|
||||
border-radius: var(--border-radius-3);
|
||||
background-color: var(--light-gray);
|
||||
background-color: var(--capsule-background);
|
||||
/* margin-top: 1rem; */
|
||||
/* margin-bottom: 1rem; */
|
||||
}
|
||||
@ -272,6 +323,7 @@ body {
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
font-size: var(--font-size-5);
|
||||
padding-bottom: 0.3rem;
|
||||
@ -294,7 +346,7 @@ body {
|
||||
|
||||
.circle {
|
||||
align-items: center;
|
||||
background: var(--light-gray);
|
||||
background: var(--circle-background);
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--box-shadow-3);
|
||||
display: flex;
|
||||
@ -307,6 +359,15 @@ body {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.circle-small:hover {
|
||||
background: var(--circle-small-hover-background);
|
||||
}
|
||||
|
||||
.circle-small:focus {
|
||||
background: var(--circle-small-hover-background);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.circle-medium {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
@ -391,30 +452,6 @@ body {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.primary-border {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.success-border {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.info-border {
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
.warning-border {
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
.danger-border {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.dark-gray-border {
|
||||
border-color: var(--dark-gray);
|
||||
}
|
||||
|
||||
/*
|
||||
* GRIDS
|
||||
*/
|
||||
@ -555,6 +592,30 @@ body {
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
|
||||
--background: var(--background);
|
||||
--button-background: var(--button-background);
|
||||
--button-text-color: var(--text-color-normal);
|
||||
--button-text-hover-color: var(--text-color-normal);
|
||||
--circle-background: var(--circle-background);
|
||||
--circle-small-hover-background: var(--circle-small-hover-background);
|
||||
--icon-color: var(--icon-normal);
|
||||
--nav-icon-color: var(--nav-icon-color);
|
||||
--text-color: var(--text-color-normal);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--background: var(--background-dark);
|
||||
--button-background: var(--button-background-dark);
|
||||
--button-text-color: var(--text-color-light);
|
||||
--button-text-hover-color: var(--text-color-normal);
|
||||
--capsule-background: var(--capsule-background-dark);
|
||||
--circle-background: var(--circle-background-dark);
|
||||
--circle-small-hover-background: var(--circle-small-hover-background-dark);
|
||||
--icon-color: var(--icon-light);
|
||||
--nav-icon-color: var(--nav-icon-color-light);
|
||||
--text-color: var(--text-color-light);
|
||||
--text-color-gray: var(--text-color-light-gray);
|
||||
}
|
||||
|
||||
/*
|
||||
@ -573,28 +634,21 @@ html {
|
||||
* FONTS
|
||||
*/
|
||||
|
||||
.font-normal {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.font-near-black {
|
||||
color: var(--near-black);
|
||||
}
|
||||
|
||||
.font-gray {
|
||||
color: var(--mid-gray);
|
||||
color: var(--text-color-gray);
|
||||
}
|
||||
|
||||
.font-light-gray {
|
||||
color: var(--silver);
|
||||
}
|
||||
|
||||
.font-success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.font-warning {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.font-failure {
|
||||
color: var(--danger);
|
||||
/* color: var(--silver); */
|
||||
color: var(--text-color-light-gray);
|
||||
}
|
||||
|
||||
/*
|
||||
@ -637,12 +691,12 @@ form {
|
||||
|
||||
/* icon-active: sets color of icon svg to near-black */
|
||||
.icon-active {
|
||||
filter: invert(0%) sepia(1%) saturate(4171%) hue-rotate(79deg) brightness(86%) contrast(87%);
|
||||
filter: var(--icon-color);
|
||||
}
|
||||
|
||||
/* icon-inactive: sets color of icon svg to gray */
|
||||
.icon-inactive {
|
||||
filter: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
|
||||
filter: var(--icon-gray);
|
||||
}
|
||||
|
||||
/*
|
||||
@ -699,10 +753,11 @@ form {
|
||||
font-family: var(--sans-serif);
|
||||
font-size: var(--font-size-7);
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
/* margin-bottom: 2px; */
|
||||
}
|
||||
|
||||
.label-medium {
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size-3);
|
||||
display: block;
|
||||
}
|
||||
@ -728,7 +783,7 @@ form {
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: var(--font-near-black);
|
||||
/* color: var(--font-near-black); */
|
||||
}
|
||||
|
||||
/*
|
||||
@ -861,6 +916,7 @@ meter::-moz-meter-bar {
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
color: var(--text-color);
|
||||
font-family: var(--sans-serif);
|
||||
font-size: var(--font-size-4);
|
||||
font-weight: normal;
|
||||
@ -976,6 +1032,26 @@ input:checked + .slider:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*
|
||||
* TEXT
|
||||
*/
|
||||
|
||||
.text-info {
|
||||
color: var(--info);
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
/*
|
||||
* TITLES
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user