Border primary
@@ -59,7 +59,7 @@ description: PaperCSS Borders & Shadows
Border success
Border warning
Border danger
-
Border white
+
Border white
```
diff --git a/docs/static/assets/demo.css b/docs/static/assets/demo.css
index 7098332..eb24ac9 100644
--- a/docs/static/assets/demo.css
+++ b/docs/static/assets/demo.css
@@ -1,5 +1,8 @@
body {
- background-image: url("/img/geometry2.png")
+ background-image: url("/img/geometry2.png")
+}
+html.dark body {
+ background: #41403e;
}
#top {
max-width: 1440px;
@@ -31,7 +34,6 @@ img.no-responsive {
}
.to-top .paper-btn {
padding: .6em 1em;
- background: #fff;
border-top-left-radius: 185px 160px;
border-top-right-radius: 200px 195px;
border-bottom-right-radius: 160px 195px;
diff --git a/src/components/_accordion.scss b/src/components/_accordion.scss
index 6586b0d..0010fd4 100644
--- a/src/components/_accordion.scss
+++ b/src/components/_accordion.scss
@@ -3,13 +3,17 @@
flex-direction: column;
&:nth-of-type(1) {
- border-top: 1px solid $muted-light;
+ @include color('border-top-color', 'muted-light');
+ border-top-style: solid;
+ border-top-width: 1px;
}
.collapsible-body {
+ @include color('border-bottom-color', 'muted-light');
+ @include color('background-color', 'white-dark-light-80');
@include transition;
- background-color: lighten($white-dark, 80%);
- border-bottom: 1px solid $muted-light;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
margin: 0;
max-height: 0;
opacity: 0;
@@ -21,7 +25,7 @@
display: none;
&:checked + label {
- color: $primary;
+ @include color('color', 'primary');
}
&[id^='collapsible']:checked~div.collapsible-body {
@@ -33,8 +37,10 @@
}
label {
- border-bottom: 1px solid $muted-light;
- color: $primary;
+ @include color('color', 'primary');
+ @include color('border-bottom-color', 'muted-light');
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
display: inline-block;
font-weight: 600;
margin: 0 0 -1px;
@@ -42,7 +48,7 @@
text-align: center;
&:hover {
- color: $muted;
+ @include color('color', 'muted');
cursor: pointer;
}
}
diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss
index 9677f0f..2801119 100644
--- a/src/components/_alerts.scss
+++ b/src/components/_alerts.scss
@@ -1,16 +1,18 @@
-@mixin btn-close-color($base-color) {
- color: lighten($base-color, 10%);
+@mixin btn-close-color($base-color-name) {
+ @include color('color', #{$base-color-name}-light-10);
&:hover,
&:active,
&:focus {
- color: darken($base-color, 10%);
+ @include color('color', #{$base-color-name}-dark-10);
}
}
.alert {
+ @include color('border-color', 'primary');
@include border-style();
- border: 2px solid $primary;
+ border-style: solid;
+ border-width: 2px;
margin-bottom: 20px;
padding: 15px;
width: 100%;
@@ -33,9 +35,9 @@
@each $colorName, $color, $color-light in $colors {
.alert-#{$colorName} {
- background-color: $color-light;
- border-color: $color;
- color: $color;
+ @include color('color', #{$colorName}-text);
+ @include color('background-color', #{$colorName}-light);
+ @include color('border-color', #{$colorName});
.btn-close {
@include btn-close-color($color);
diff --git a/src/components/_article.scss b/src/components/_article.scss
index 78191ea..ebaa685 100644
--- a/src/components/_article.scss
+++ b/src/components/_article.scss
@@ -4,15 +4,15 @@ article {
}
.article-meta {
- color: $muted;
+ @include color(color, 'muted-text');
font-size: 15px;
a {
+ @include color(color, 'muted-text');
background-image: none;
- color: $muted-text;
&:hover {
- color: $light-dark;
+ @include color(color, 'light-dark');
}
}
}
diff --git a/src/components/_badges.scss b/src/components/_badges.scss
index cc3a126..6c0246a 100644
--- a/src/components/_badges.scss
+++ b/src/components/_badges.scss
@@ -1,9 +1,10 @@
.badge {
@include border-style();
- background-color: $muted;
- border: 2px solid $primary;
+ @include color('color', 'white');
+ @include color('background-color', 'muted');
+ @include color('border-color', 'primary');
+ border: 2px solid;
border-color: transparent;
- color: $white;
display: inline-block;
font-size: 75%;
font-weight: 700;
@@ -16,6 +17,6 @@
@each $colorName, $color in $colors {
.badge.#{$colorName} {
- background-color: $color;
+ @include color('background-color', #{$colorName});
}
}
diff --git a/src/components/_breadcrumb.scss b/src/components/_breadcrumb.scss
index 61815fa..8d9c9d0 100644
--- a/src/components/_breadcrumb.scss
+++ b/src/components/_breadcrumb.scss
@@ -11,8 +11,8 @@ ul.breadcrumb {
}
a {
+ @include color('color', 'secondary');
background-image: none;
- color: $secondary;
text-decoration: none;
&:hover {
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index 1f10d93..142ea36 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -4,10 +4,13 @@ button,
@include border-style();
@include shadow();
@include transition();
+ @include color('color', 'primary');
+ @include color('border-color', 'primary');
+ @include color('background-color', 'main-background');
align-self: center;
- background: transparent;
- border: 2px solid $primary;
- color: $primary;
+ background-image: none;
+ border-style: solid;
+ border-width: 2px;
cursor: pointer;
display: inline-block;
font-size: 1rem;
@@ -43,7 +46,9 @@ button,
}
&:focus {
- border: 2px solid $secondary;
+ @include color('border-color', 'secondary');
+ border-style: solid;
+ border-width: 2px;
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
}
@@ -60,6 +65,7 @@ button,
}
a {
+ @include color('color', 'secondary');
background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
background-position: 0 90%;
background-repeat: repeat-x;
@@ -67,24 +73,18 @@ a {
text-decoration: none;
&:visited {
- color: $primary;
+ @include color('color', 'primary');
text-decoration: none;
}
}
@each $colorName, $color, $color-light, $color-text in $colors {
- .alert-#{$colorName} {
- background-color: $color-light;
- border-color: $color;
- color: $color;
- }
-
button.btn-#{$colorName},
.paper-btn.btn-#{$colorName},
[type='button'].btn-#{$colorName} {
- background-color: $color-light;
- border-color: $color;
- color: $color-text;
+ @include color('color', #{$colorName}-text);
+ @include color('background-color', #{$colorName}-light);
+ @include color('border-color', #{$colorName});
&:hover {
&:active {
diff --git a/src/components/_cards.scss b/src/components/_cards.scss
index 9a5c424..5e468bf 100644
--- a/src/components/_cards.scss
+++ b/src/components/_cards.scss
@@ -1,7 +1,9 @@
.card {
@include shadow;
+ @include color('border-color', 'muted-light');
backface-visibility: hidden;
- border: 2px solid $muted-light;
+ border-style: solid;
+ border-width: 2px;
display: flex;
flex-direction: column;
position: relative;
@@ -14,16 +16,18 @@
.card-header,
.card-footer {
- background-color: $white-dark;
+ @include color('background-color', 'white-dark');
padding: 0.75rem 1.25rem;
}
.card-header {
- border-bottom: 2px solid $muted-light;
+ @include color('border-color', 'muted-light');
+ border-bottom: 2px solid;
}
.card-footer {
- border-top: 2px solid $muted-light;
+ @include color('border-color', 'muted-light');
+ border-top: 2px solid;
}
.card-body {
diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index 2f987e5..446366c 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -1,20 +1,24 @@
input,
select,
textarea {
+ @include color('color', 'primary');
+ @include color('border-color', 'primary');
background: transparent;
- border: 2px solid $primary;
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
+ border-style: solid;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
- color: $primary;
+ border-width: 2px;
display: block;
font-size: 1rem;
outline: none;
padding: 0.5rem;
&:focus {
- border: 2px solid $secondary;
+ @include color('border-color', 'secondary');
+ border-style: solid;
+ border-width: 2px;
}
&.disabled,
@@ -76,7 +80,9 @@ select {
display: block;
&::before {
- border: 2px solid $primary;
+ @include color('border-color', 'primary');
+ border-style: solid;
+ border-width: 2px;
content: '';
display: inline-block;
height: 1rem;
@@ -147,7 +153,7 @@ select {
width: 0;
&:checked + .paper-switch-slider {
- background-color: $success-light;
+ @include color('background-color', 'success-light');
}
&:checked + .paper-switch-slider::before {
@@ -161,11 +167,13 @@ select {
}
.paper-switch-slider {
- border: 2px solid $primary;
+ @include color('border-color', 'primary');
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
+ border-style: solid;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
+ border-width: 2px;
bottom: 0;
cursor: pointer;
left: 0;
@@ -175,7 +183,7 @@ select {
transition: 0.4s;
&::before {
- background: $secondary;
+ @include color('background', 'secondary');
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px;
@@ -189,11 +197,13 @@ select {
}
.paper-switch-slider.round {
- border: 2px solid $primary;
+ @include color('border-color', 'primary');
border-bottom-left-radius: 0.7rem 1rem;
border-bottom-right-radius: 1rem 0.9rem;
+ border-style: solid;
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem 0.6rem;
+ border-width: 2px;
&::before {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
diff --git a/src/components/_modals.scss b/src/components/_modals.scss
index c2a92c7..d5269a8 100644
--- a/src/components/_modals.scss
+++ b/src/components/_modals.scss
@@ -24,10 +24,13 @@
}
.modal-body {
+ @include color('color', 'primary');
+ @include color('background', 'main-background');
+ @include color('border-color', 'muted-light');
@include transition;
backface-visibility: hidden;
- background: $white;
- border: 2px solid $muted-light;
+
+ border: 2px solid;
left: 50%;
padding: 1.25rem;
position: absolute;
@@ -41,8 +44,8 @@
}
.btn-close {
+ @include color('color', 'primary-light');
@include transition;
- color: $primary-light;
cursor: pointer;
font-size: 30px;
height: 1.1rem;
@@ -55,7 +58,7 @@
&:hover,
&:active,
&:focus {
- color: $primary;
+ @include color('color', 'primary');
}
}
@@ -67,7 +70,7 @@
h5,
.modal-subtitle {
- color: $secondary;
+ @include color('color', 'secondary');
margin-bottom: 0.5rem;
margin-top: 0;
}
@@ -84,7 +87,7 @@
}
.paper-btn {
- background: $white;
+ @include color('background', 'main-background');
display: inline-block;
text-decoration: none;
}
@@ -101,7 +104,7 @@
&:hover,
&:focus,
&:visited {
- color: $primary;
+ @include color('color', 'primary');
text-decoration: none;
}
}
diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss
index 4e23860..63cfce3 100644
--- a/src/components/_navbar.scss
+++ b/src/components/_navbar.scss
@@ -1,5 +1,5 @@
nav {
- background-color: $main-background;
+ @include color('background-color', 'main-background');
display: flex;
padding: 0.3rem;
position: relative;
@@ -13,11 +13,11 @@ nav {
.bar1,
.bar2,
.bar3 {
- background-color: $primary;
- border-bottom: 5px solid $primary;
+ @include color('background-color', 'primary');
+ @include color('border-color', 'primary');
+ @include color('color', 'primary');
border-bottom-left-radius: 15px 5px;
border-bottom-right-radius: 15px 3px;
- color: $primary;
margin: 6px 0;
transition: 0.4s;
width: 2rem;
@@ -70,16 +70,20 @@ nav {
}
a {
+ @include color('color', 'primary');
+ @include color('border-bottom-color', 'primary');
background-image: none;
- border-bottom: 5px solid $primary;
border-bottom-left-radius: 15px 3px;
border-bottom-right-radius: 15px 5px;
- color: $primary;
+ border-bottom-style: solid;
+ border-bottom-width: 5px;
padding-bottom: 0.1rem;
}
a:hover {
- border-bottom: 5px solid $primary-light;
+ @include color('border-color', 'primary-light');
+ border-bottom-style: solid;
+ border-bottom-width: 5px;
}
ul.inline li a {
@@ -135,20 +139,23 @@ nav {
}
.collapsible label {
- border: 2px solid #41403e;
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
+ border-color: #41403e;
+ border-style: solid;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
+ border-width: 2px;
}
- .collapsible > button { // Leaving for backwards compatibility. See docs for proper usage
+ .collapsible > button {
+ // Leaving for backwards compatibility. See docs for proper usage
border: 0;
}
.collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
.collapsible > label {
- background-color: $main-background;
+ @include color('background-color', 'main-background');
display: none;
font-size: 0.5rem;
margin-right: 1rem;
diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss
index e89bbd1..8e03459 100644
--- a/src/components/_popovers.scss
+++ b/src/components/_popovers.scss
@@ -18,8 +18,10 @@
&::after {
@include border-style();
@include transition(opacity);
- background: $light-dark;
- border: 2px solid $primary;
+ @include color('background-color', 'light-dark');
+ @include color('border-color', 'primary');
+ border-style: solid;
+ border-width: 2px;
color: $white;
font-size: 0.7em;
left: 50%;
diff --git a/src/components/_progress.scss b/src/components/_progress.scss
index d2e4df5..934c09a 100644
--- a/src/components/_progress.scss
+++ b/src/components/_progress.scss
@@ -1,6 +1,7 @@
.progress {
@include border-style(5);
- border: 2px solid $primary;
+ @include color('border-color', 'primary');
+ border: 2px solid;
box-shadow: $shadow-hover;
height: 1.2rem;
overflow: hidden;
@@ -9,8 +10,9 @@
.bar {
@include border-style(5);
@include transition;
- background-color: $primary-light;
- border-right: 2px solid $primary;
+ @include color('background-color', 'primary-light');
+ @include color('border-color', 'primary');
+ border-right: 2px solid;
display: flex;
flex-direction: column;
font-size: 0.6rem;
@@ -25,7 +27,7 @@
@each $colorName, $color, $color-light in $colors {
&.#{$colorName} {
- background-color: $color-light;
+ @include color('background-color', #{$colorName}-light);
&.striped {
@include striped-background($color-light);
diff --git a/src/components/_tabs.scss b/src/components/_tabs.scss
index 1720a4e..3e6ddd5 100644
--- a/src/components/_tabs.scss
+++ b/src/components/_tabs.scss
@@ -8,9 +8,11 @@
input {
display: none;
- &:checked+label {
- border-bottom: solid 3px $secondary;
- color: $primary;
+ &:checked + label {
+ @include color(color, 'primary');
+ @include color('border-bottom-color', 'secondary');
+ border-bottom-style: solid;
+ border-bottom-width: 3px;
}
@for $num from 1 through 5 {
@@ -21,7 +23,7 @@
}
label {
- color: $primary-light;
+ @include color('color', primary-light);
display: inline-block;
font-weight: 600;
margin: 0 0 -1px;
@@ -29,7 +31,7 @@
text-align: center;
&:hover {
- color: $muted;
+ @include color('color', muted);
cursor: pointer;
}
}
diff --git a/src/content/_code.scss b/src/content/_code.scss
index 4ed79cd..c661acd 100644
--- a/src/content/_code.scss
+++ b/src/content/_code.scss
@@ -1,24 +1,27 @@
code {
- background-color: lighten($primary, 70%);
+ @include color('color', 'secondary');
+ @include color('background-color', 'primary-light-70');
border-radius: 3px;
- color: $secondary;
font-size: 80%;
padding: 2px 4px;
}
kbd {
- background-color: $primary;
+ @include color('color', 'black');
+ @include color('background-color', 'primary');
border-radius: 3px;
- color: $white;
font-size: 80%;
padding: 2px 4px;
}
pre {
- background-color: lighten($primary, 73%);
- border: 1px solid lighten($primary, 50%);
+ @include color('color', 'black');
+ @include color('background-color', 'primary-light-70');
+ @include color('border-color', 'primary-light-50');
+
border-radius: 3px;
- color: $primary;
+ border-style: solid;
+ border-width: 1px;
display: block;
font-size: 80%;
line-height: 1.5;
@@ -29,8 +32,8 @@ pre {
word-wrap: break-word;
code {
+ @include color('color', 'black');
background: transparent;
- color: inherit;
display: block;
font-size: inherit;
padding: initial;
diff --git a/src/content/_fonts.scss b/src/content/_fonts.scss
index d0f8680..37b88c5 100644
--- a/src/content/_fonts.scss
+++ b/src/content/_fonts.scss
@@ -1,5 +1,5 @@
html {
- color: $font-color;
+ @include color('color', 'primary');
font-family: $body-font, sans-serif;
font-size: $global-font-size;
}
diff --git a/src/content/_images.scss b/src/content/_images.scss
index 27e57a9..593d514 100644
--- a/src/content/_images.scss
+++ b/src/content/_images.scss
@@ -1,6 +1,8 @@
img {
@include border-style();
- border: 2px solid $primary;
+ @include color('border-color', 'primary');
+ border-style: solid;
+ border-width: 2px;
display: block;
height: auto;
max-width: 100%;
diff --git a/src/content/_tables.scss b/src/content/_tables.scss
index 5c83324..f390235 100644
--- a/src/content/_tables.scss
+++ b/src/content/_tables.scss
@@ -29,7 +29,7 @@ table {
}
&.table-hover tbody tr:hover {
- color: $secondary;
+ @include color('color', 'secondary');
}
&.table-alternating tbody tr:nth-of-type(even) {
diff --git a/src/core/_config.scss b/src/core/_config.scss
index d0d8ebd..522f6e1 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -21,12 +21,39 @@ $warning-light: lighten($warning, 30%) !default;
$danger-light: lighten($danger, 45%) !default;
$muted-light: lighten($muted, 35%) !default;
+$primary-dark: darken($primary, 50%) !default;
+$secondary-dark: darken($secondary, 50%) !default;
+$success-dark: darken($success, 30%) !default;
+$warning-dark: darken($warning, 30%) !default;
+$danger-dark: darken($danger, 45%) !default;
+$muted-dark: darken($muted, 35%) !default;
+
+$primary-light-10: lighten($primary, 10%) !default;
+$primary-light-70: lighten($primary, 70%) !default;
+$primary-light-50: lighten($primary, 50%) !default;
+$secondary-light-10: lighten($secondary, 10%) !default;
+$success-light-10: lighten($success, 10%) !default;
+$warning-light-10: lighten($warning, 10%) !default;
+$danger-light-10: lighten($danger, 10%) !default;
+$muted-light-10: lighten($muted, 10%) !default;
+
+$primary-dark-10: darken($primary, 10%) !default;
+$secondary-dark-10: darken($secondary, 10%) !default;
+$success-dark-10: darken($success, 10%) !default;
+$warning-dark-10: darken($warning, 10%) !default;
+$danger-dark-10: darken($danger, 10%) !default;
+$muted-dark-10: darken($muted, 10%) !default;
+
+
$white-dark: rgba(#000, 0.03) !default;
+$white-dark-light-80: lighten($white-dark, 80%) !default;
$light-dark: rgba(#000, 0.7) !default;
$white: rgba(#fff, 1) !default;
$main-background: rgba(#fff, 1) !default;
+$black: rgba(#000, 1) !default;
+$main-background-light: lighten($main-background, 50%) !default;
-$primary-text: #fff !default;
+$primary-text: $primary !default;
$secondary-text: $primary !default;
$success-text: $primary !default;
$warning-text: $primary !default;
@@ -37,6 +64,187 @@ $shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
+// Set dark theme colors
+
+$dark-primary: #fff !default;
+$dark-secondary: #0071de !default;
+
+$dark-success: #189418 !default;
+$dark-warning: #ddcd45 !default;
+$dark-danger: #ff8c86 !default;
+$dark-muted: #868e96 !default;
+
+$dark-primary-light: lighten($dark-primary, 5%) !default;
+$dark-secondary-light: lighten($dark-secondary, 5%) !default;
+$dark-success-light: lighten($dark-success, 5%) !default;
+$dark-warning-light: lighten($dark-warning, 5%) !default;
+$dark-danger-light: lighten($dark-danger, 5%) !default;
+$dark-muted-light: lighten($dark-muted, 5%) !default;
+
+$dark-primary-dark: darken($dark-primary, 50%) !default;
+$dark-secondary-dark: darken($dark-secondary, 50%) !default;
+$dark-success-dark: darken($dark-success, 30%) !default;
+$dark-warning-dark: darken($dark-warning, 30%) !default;
+$dark-danger-dark: darken($dark-danger, 45%) !default;
+$dark-muted-dark: darken($dark-muted, 35%) !default;
+
+$dark-primary-light-10: lighten($dark-primary, 10%) !default;
+$dark-primary-light-70: lighten($dark-primary, 70%) !default;
+$dark-primary-light-50: lighten($dark-primary, 50%) !default;
+$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
+$dark-success-light-10: lighten($dark-success, 10%) !default;
+$dark-warning-light-10: lighten($dark-warning, 10%) !default;
+$dark-danger-light-10: lighten($dark-danger, 10%) !default;
+$dark-muted-light-10: lighten($dark-muted, 10%) !default;
+
+$dark-primary-dark-10: darken($dark-primary, 10%) !default;
+$dark-secondary-dark-10: darken($dark-secondary, 10%) !default;
+$dark-success-dark-10: darken($dark-success, 10%) !default;
+$dark-warning-dark-10: darken($dark-warning, 10%) !default;
+$dark-danger-dark-10: darken($dark-danger, 10%) !default;
+$dark-muted-dark-10: darken($dark-muted, 10%) !default;
+
+$dark-white-dark: rgba(#fff, 0.03) !default;
+$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
+$dark-light-dark: rgba(#fff, 0.7) !default;
+$dark-white: rgba(#fff, 1) !default;
+$dark-main-background: rgba(#41403e, 1) !default;
+$dark-main-background-light: lighten($dark-main-background, 50%) !default;
+$dark-black: rgba(#000, 1) !default;
+
+$dark-primary-text: #41403e !default;
+$dark-secondary-text: #41403e !default;
+$dark-success-text: #41403e !default;
+$dark-warning-text: #41403e !default;
+$dark-danger-text: #41403e !default;
+$dark-muted-text: #41403e !default;
+
+$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
+$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
+
+
+
+$theme-map: (
+ light: (
+ primary: $primary,
+ secondary: $secondary,
+ success: $success,
+ warning: $warning,
+ danger: $danger,
+ muted: $muted,
+ primary-light: $primary-light,
+ secondary-light:$secondary-light,
+ success-light:$success-light,
+ warning-light:$warning-light,
+ danger-light:$danger-light,
+ muted-light:$muted-light,
+ primary-dark: $primary-dark,
+ secondary-dark:$secondary-dark,
+ success-dark:$success-dark,
+ warning-dark:$warning-dark,
+ danger-dark:$danger-dark,
+ muted-dark:$muted-dark,
+ primary-light-10:$primary-light-10,
+ primary-light-50: $primary-light-50,
+ primary-light-70: $primary-light-70,
+ secondary-light-10:$secondary-light-10,
+ success-light-10:$success-light-10,
+ warning-light-10:$warning-light-10,
+ danger-light-10:$danger-light-10,
+ muted-light-10:$muted-light-10,
+ primary-dark-10:$primary-dark-10,
+ secondary-dark-10:$secondary-dark-10,
+ success-dark-10:$success-dark-10,
+ warning-dark-10:$warning-dark-10,
+ danger-dark-10:$danger-dark-10,
+ muted-dark-10:$muted-dark-10,
+ white-dark:$white-dark,
+ white-dark-light-80:$white-dark-light-80,
+ light-dark:$light-dark,
+ white:$white,
+ main-background: $main-background,
+ main-background-light: $main-background-light,
+ black: $black,
+ primary-text:$primary-text,
+ secondary-text:$secondary-text,
+ success-text:$success-text,
+ warning-text:$warning-text,
+ danger-text:$danger-text,
+ muted-text:$muted-text,
+ shadow-color-regular: $shadow-color-regular,
+ shadow-color-hover: $shadow-color-hover,
+ ),
+ dark: (
+ primary: $dark-primary,
+ secondary: $dark-secondary,
+ success: $dark-success,
+ warning: $dark-warning,
+ danger: $dark-danger,
+ muted: $dark-muted,
+ primary-light: $dark-primary-light,
+ secondary-light:$dark-secondary-light,
+ success-light:$dark-success-light,
+ warning-light:$dark-warning-light,
+ danger-light:$dark-danger-light,
+ muted-light:$dark-muted-light,
+ primary-dark: $dark-primary-dark,
+ secondary-dark:$dark-secondary-dark,
+ success-dark:$dark-success-dark,
+ warning-dark:$dark-warning-dark,
+ danger-dark:$dark-danger-dark,
+ muted-dark:$dark-muted-dark,
+ primary-light-10:$dark-primary-light-10,
+ primary-light-50: $dark-primary-light-50,
+ primary-light-70: $dark-primary-light-70,
+ secondary-light-10:$dark-secondary-light-10,
+ success-light-10:$dark-success-light-10,
+ warning-light-10:$dark-warning-light-10,
+ danger-light-10:$dark-danger-light-10,
+ muted-light-10:$dark-muted-light-10,
+ primary-dark-10:$dark-primary-dark-10,
+ secondary-dark-10:$dark-secondary-dark-10,
+ success-dark-10:$dark-success-dark-10,
+ warning-dark-10:$dark-warning-dark-10,
+ danger-dark-10:$dark-danger-dark-10,
+ muted-dark-10:$dark-muted-dark-10,
+ white-dark:$dark-white-dark,
+ white-dark-light-80:$dark-white-dark-light-80,
+ light-dark:$dark-light-dark,
+ white:$dark-white,
+ main-background: $dark-main-background,
+ main-background-light: $dark-main-background-light,
+ black: $dark-black,
+ primary-text:$dark-primary-text,
+ secondary-text:$dark-secondary-text,
+ success-text:$dark-success-text,
+ warning-text:$dark-warning-text,
+ danger-text:$dark-danger-text,
+ muted-text:$dark-muted-text,
+ shadow-color-regular: $dark-shadow-color-regular,
+ shadow-color-hover: $dark-shadow-color-hover,
+ )
+);
+
+
+html {
+ @each $var in map-keys(map-get($theme-map, 'light')) {
+ --#{$var}: #{map-get(map-get($theme-map, 'light'), $var)};
+ }
+}
+
+html.dark {
+ @each $var in map-keys(map-get($theme-map, 'dark')) {
+ --#{$var}: #{map-get(map-get($theme-map, 'dark'), $var)};
+ }
+}
+
+
+@mixin color($property, $varName) {
+ // IE falls back to light theme always
+ #{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
+ #{$property}: var(--#{$varName});
+}
+
// Map to set your color names
/* stylelint-disable */
$colors: (primary, $primary, $primary-light, $primary-text),
@@ -53,11 +261,11 @@ $colors: (primary, $primary, $primary-light, $primary-text),
*/
@each $colorName, $color, $color-light in $colors {
.text-#{$colorName} {
- color: $color;
+ @include color('color',#{$colorName});
}
.background-#{$colorName} {
- background-color: $color-light;
+ @include color('background-color',#{$colorName}-light);
}
}
diff --git a/src/layout/_container.scss b/src/layout/_container.scss
index 63c5429..1ad8451 100644
--- a/src/layout/_container.scss
+++ b/src/layout/_container.scss
@@ -55,7 +55,7 @@ hr {
}
.paper {
- background-color: $main-background;
+ @include color('background-color', 'main-background');
border: 1px solid $primary-light;
box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
margin-bottom: 1rem;
diff --git a/src/utilities/_borders.scss b/src/utilities/_borders.scss
index 42693b0..2acb241 100644
--- a/src/utilities/_borders.scss
+++ b/src/utilities/_borders.scss
@@ -1,6 +1,7 @@
-
.border {
- border: 2px solid $primary;
+ @include color('border-color','primary' );
+ border-style: solid;
+ border-width: 2px;
}
.border,
@@ -35,11 +36,13 @@
}
.child-borders>* {
- border: 2px solid $primary;
+ @include color('border-color', 'primary');
+ border-style: solid;
+ border-width: 2px;
}
.border-white {
- border-color: $white;
+ @include color('border-color', 'white');
}
.border-dotted {
@@ -56,6 +59,6 @@
@each $colorName, $color in $colors {
.border-#{$colorName} {
- border-color: $color;
+ @include color('border-color', #{$colorName});
}
}