deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-17 21:26:42 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #199 from seifsay3d/feature-dark-mode

Browse source 
Add dark mode support 🌗
This commit is contained in:
Rhyne 2020-09-13 11:39:37 -04:00 committed by GitHub
parent 6541844c71 6f166e544c
commit 11ea531271
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 359 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.editorconfig
View file

@ -7,3 +7,4 @@ trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2
quote_type = single

6
docs/content/docs/utilities/borders.md
View file

@ -39,7 +39,7 @@ description: PaperCSS Borders & Shadows
<div class="sm-2 col border border-success">Border success</div>
<div class="sm-2 col border border-warning">Border warning</div>
<div class="sm-2 col border border-danger">Border danger</div>
<div class="sm-2 col border background-primary border-white">Border white</div>
<div class="sm-2 col border border-white">Border white</div>
</div>
#### Code:
@ -51,7 +51,7 @@ description: PaperCSS Borders & Shadows
<div class="sm-2 col border border-success">Border success</div>
<div class="sm-2 col border border-warning">Border warning</div>
<div class="sm-2 col border border-danger">Border danger</div>
<div class="sm-2 col border background-primary border-white">Border white</div>
<div class="sm-2 col border border-white">Border white</div>
</div>
<div class="row child-borders">
<div class="sm-2 col border border-primary">Border primary</div>
@ -59,7 +59,7 @@ description: PaperCSS Borders & Shadows
<div class="sm-2 col border border-success">Border success</div>
<div class="sm-2 col border border-warning">Border warning</div>
<div class="sm-2 col border border-danger">Border danger</div>
<div class="sm-2 col border background-primary border-white">Border white</div>
<div class="sm-2 col border border-white">Border white</div>
</div>
```

6
docs/static/assets/demo.css vendored
View file

@ -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;

20
src/components/_accordion.scss
View file

@ -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;
}
}

16
src/components/_alerts.scss
View file

@ -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);

6
src/components/_article.scss
View file

@ -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');
}
}
}

9
src/components/_badges.scss
View file

@ -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});
}
}

2
src/components/_breadcrumb.scss
View file

@ -11,8 +11,8 @@ ul.breadcrumb {
}
a {
@include color('color', 'secondary');
background-image: none;
color: $secondary;
text-decoration: none;
&:hover {

28
src/components/_buttons.scss
View file

@ -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 {

12
src/components/_cards.scss
View file

@ -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 {

26
src/components/_forms.scss
View file

@ -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;

17
src/components/_modals.scss
View file

@ -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;
}
}

27
src/components/_navbar.scss
View file

@ -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;

6
src/components/_popovers.scss
View file

@ -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%;

10
src/components/_progress.scss
View file

@ -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);

12
src/components/_tabs.scss
View file

@ -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;
}
}

19
src/content/_code.scss
View file

@ -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;

2
src/content/_fonts.scss
View file

@ -1,5 +1,5 @@
html {
color: $font-color;
@include color('color', 'primary');
font-family: $body-font, sans-serif;
font-size: $global-font-size;
}

4
src/content/_images.scss
View file

@ -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%;

2
src/content/_tables.scss
View file

@ -29,7 +29,7 @@ table {
}
&.table-hover tbody tr:hover {
color: $secondary;
@include color('color', 'secondary');
}
&.table-alternating tbody tr:nth-of-type(even) {

214
src/core/_config.scss
View file

@ -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);
}
}

2
src/layout/_container.scss
View file

@ -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;

13
src/utilities/_borders.scss
View file

@ -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});
}
}