Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add color scheme

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-13 15:12:30 +01:00
parent 5131f2ab04
commit 0f988eadd9
28 changed files with 472 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/base/generic.sass
View File

@@ -1,4 +1,4 @@
$body-background-color: $white !default
$body-background-color: $scheme-main !default
$body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default

2
sass/components/breadcrumb.sass
View File

@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $grey-light !default
$breadcrumb-item-separator-color: $border-hover !default
.breadcrumb
@extend %block

6
sass/components/card.sass
View File

@@ -1,11 +1,11 @@
$card-color: $text !default
$card-background-color: $white !default
$card-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$card-background-color: $scheme-main !default
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-padding: 0.75rem 1rem !default
$card-header-shadow: 0 0.125em 0.25em rgba($black, 0.1) !default
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
$card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default

8
sass/components/dropdown.sass
View File

@@ -1,16 +1,16 @@
$dropdown-menu-min-width: 12rem !default
$dropdown-content-background-color: $white !default
$dropdown-content-background-color: $scheme-main !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$dropdown-content-z: 20 !default
$dropdown-item-color: $grey-dark !default
$dropdown-item-hover-color: $black !default
$dropdown-item-color: $text !default
$dropdown-item-hover-color: $scheme-invert !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default

4
sass/components/list.sass
View File

@@ -1,5 +1,5 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-background-color: $scheme-main !default
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default

6
sass/components/media.sass
View File

@@ -1,3 +1,5 @@
$media-border-color: rgba($border, 0.5) !default
.media
align-items: flex-start
display: flex
@@ -5,7 +7,7 @@
.content:not(:last-child)
margin-bottom: 0.75rem
.media
border-top: 1px solid rgba($border, 0.5)
border-top: 1px solid $media-border-color
display: flex
padding-top: 0.75rem
.content:not(:last-child),
@@ -16,7 +18,7 @@
& + .media
margin-top: 0.5rem
& + .media
border-top: 1px solid rgba($border, 0.5)
border-top: 1px solid $media-border-color
margin-top: 1rem
padding-top: 1rem
// Sizes

27
sass/components/message.sass
View File

@@ -13,7 +13,7 @@ $message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-pre-background-color: $white !default
$message-body-pre-background-color: $scheme-main !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
@@ -40,18 +40,31 @@ $message-colors: $colors !default
@each $name, $pair in $message-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
$light-background: null
@if length($pair) > 2
$light-background: nth($pair, 3)
@else
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$light-background: lighten($color, $color-lightning)
$dark-color: null
@if length($pair) > 3
$dark-color: nth($pair, 4)
@else
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
$dark-color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
&.is-#{$name}
background-color: lighten($color, $color-lightning)
background-color: $light-background
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
color: $dark-color
.message-header
align-items: center

4
sass/components/modal.sass
View File

@@ -1,6 +1,6 @@
$modal-z: 40 !default
$modal-background-background-color: rgba($black, 0.86) !default
$modal-background-background-color: rgba($scheme-invert, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default
$modal-card-body-background-color: $white !default
$modal-card-body-background-color: $scheme-main !default
$modal-card-body-padding: 20px !default
.modal

24
sass/components/navbar.sass
View File

@@ -1,4 +1,4 @@
$navbar-background-color: $white !default
$navbar-background-color: $scheme-main !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default
$navbar-item-color: $text !default
$navbar-item-hover-color: $link !default
$navbar-item-hover-background-color: $white-bis !default
$navbar-item-active-color: $black !default
$navbar-item-hover-background-color: $scheme-main-bis !default
$navbar-item-active-color: $scheme-invert !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default
$navbar-dropdown-background-color: $white !default
$navbar-dropdown-background-color: $scheme-main !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
@@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$navbar-dropdown-item-hover-color: $black !default
$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
@@ -245,7 +245,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($black, 0.1)
box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
padding: 0.5rem 0
&.is-active
display: block
@@ -257,7 +257,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@@ -331,7 +331,7 @@ a.navbar-item,
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px rgba($black, 0.1)
box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
@@ -358,7 +358,7 @@ a.navbar-item,
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
box-shadow: 0 8px 8px rgba($black, 0.1)
box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
@@ -409,7 +409,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-desktop
top: 0
html,

12
sass/components/pagination.sass
View File

@@ -1,5 +1,5 @@
$pagination-color: $grey-darker !default
$pagination-border-color: $grey-lighter !default
$pagination-color: $text-strong !default
$pagination-border-color: $border !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
@@ -17,9 +17,9 @@ $pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
$pagination-disabled-color: $grey !default
$pagination-disabled-background-color: $grey-lighter !default
$pagination-disabled-border-color: $grey-lighter !default
$pagination-disabled-color: $text-light !default
$pagination-disabled-background-color: $border !default
$pagination-disabled-border-color: $border !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
@@ -27,7 +27,7 @@ $pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination
font-size: $size-normal

2
sass/components/panel.sass
View File

@@ -1,7 +1,7 @@
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border-light !default
$panel-radius: $radius-large !default
$panel-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$panel-heading-background-color: $background !default
$panel-heading-color: $text-strong !default

2
sass/components/tabs.sass
View File

@@ -12,7 +12,7 @@ $tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
$tabs-boxed-link-active-background-color: $white !default
$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default

8
sass/elements/box.sass
View File

@@ -1,11 +1,11 @@
$box-color: $text !default
$box-background-color: $white !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box
@extend %block

33
sass/elements/button.sass
View File

@@ -1,8 +1,8 @@
$button-color: $grey-darker !default
$button-background-color: $white !default
$button-color: $text-strong !default
$button-background-color: $scheme-main !default
$button-family: false !default
$button-border-color: $grey-lighter !default
$button-border-color: $border !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
@@ -23,14 +23,14 @@ $button-text-color: $text !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
$button-disabled-background-color: $scheme-main !default
$button-disabled-border-color: $border !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
@@ -206,6 +206,23 @@ $button-static-border-color: $grey-lighter !default
border-color: $color-invert
box-shadow: none
color: $color-invert
// If light and dark colors are provided
@if length($pair) > 3
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
&:hover,
&.is-hovered
background-color: darken($color-light, 2.5%)
border-color: transparent
color: $color-dark
&:active,
&.is-active
background-color: darken($color-light, 5%)
border-color: transparent
color: $color-dark
// Sizes
&.is-small
+button-small

3
sass/elements/notification.sass
View File

@@ -1,4 +1,5 @@
$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
@@ -15,7 +16,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor
code,
pre
background: $white
background: $notification-code-background-color
pre code
background: transparent
& > .delete

12
sass/elements/table.sass
View File

@@ -1,7 +1,7 @@
$table-color: $grey-darker !default
$table-background-color: $white !default
$table-color: $text-strong !default
$table-background-color: $scheme-main !default
$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border: 1px solid $border !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
@@ -15,13 +15,13 @@ $table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $white-bis !default
$table-row-hover-background-color: $scheme-main-bis !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
$table-striped-row-even-background-color: $scheme-main-bis !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
.table
@extend %block

7
sass/elements/tag.sass
View File

@@ -69,6 +69,13 @@ $tag-delete-margin: 1px !default
&.is-#{$name}
background-color: $color
color: $color-invert
// If a light and dark colors are provided
@if length($pair) > 3
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
// Sizes
&.is-normal
font-size: $size-small

6
sass/elements/title.sass
View File

@@ -1,4 +1,4 @@
$title-color: $grey-darker !default
$title-color: $text-strong !default
$title-family: false !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
@@ -8,12 +8,12 @@ $title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
$subtitle-color: $grey-dark !default
$subtitle-color: $text !default
$subtitle-family: false !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default
$subtitle-strong-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default

8
sass/form/file.sass
View File

@@ -1,10 +1,10 @@
$file-border-color: $border !default
$file-radius: $radius !default
$file-cta-background-color: $white-ter !default
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !default
$file-cta-background-color: $scheme-main-ter !default
$file-cta-color: $text !default
$file-cta-hover-color: $text-strong !default
$file-cta-active-color: $text-strong !default
$file-name-border-color: $border !default
$file-name-border-style: solid !default

18
sass/form/shared.sass
View File

@@ -1,14 +1,14 @@
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-color: $text-strong !default
$input-background-color: $scheme-main !default
$input-border-color: $border !default
$input-height: $control-height !default
$input-shadow: inset 0 0.0625em 0.125em rgba($black, 0.05) !default
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
$input-placeholder-color: rgba($input-color, 0.3) !default
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
$input-hover-color: $text-strong !default
$input-hover-border-color: $border-hover !default
$input-focus-color: $grey-darker !default
$input-focus-color: $text-strong !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
@@ -20,8 +20,8 @@ $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
$input-icon-color: $border !default
$input-icon-active-color: $text !default
$input-radius: $radius !default

2
sass/form/tools.sass
View File

@@ -1,4 +1,4 @@
$label-color: $grey-darker !default
$label-color: $text-strong !default
$label-weight: $weight-bold !default
$help-size: $size-small !default

2
sass/layout/footer.sass
View File

@@ -1,4 +1,4 @@
$footer-background-color: $white-bis !default
$footer-background-color: $scheme-main-bis !default
$footer-color: false !default
$footer-padding: 3rem 1.5rem 6rem !default

2
sass/layout/hero.sass
View File

@@ -53,7 +53,7 @@
a
color: $color-invert
&:hover
background-color: rgba($black, 0.1)
background-color: rgba($scheme-invert, 0.1)
li.is-active a
&,
&:hover

21
sass/utilities/derived-variables.sass
View File

@@ -20,15 +20,32 @@ $purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: findColorInvert($primary) !default
$primary-light: findLightColor($primary) !default
$primary-dark: findDarkColor($primary) !default
$info-invert: findColorInvert($info) !default
$info-light: findLightColor($info) !default
$info-dark: findDarkColor($info) !default
$success-invert: findColorInvert($success) !default
$success-light: findLightColor($success) !default
$success-dark: findDarkColor($success) !default
$warning-invert: findColorInvert($warning) !default
$warning-light: findLightColor($warning) !default
$warning-dark: findDarkColor($warning) !default
$danger-invert: findColorInvert($danger) !default
$danger-light: findLightColor($danger) !default
$danger-dark: findDarkColor($danger) !default
$light-invert: findColorInvert($light) !default
$dark-invert: findColorInvert($dark) !default
// General colors
$scheme-main: $white !default
$scheme-main-bis: $white-bis !default
$scheme-main-ter: $white-ter !default
$scheme-invert: $black !default
$scheme-invert-bis: $black-bis !default
$scheme-invert-ter: $black-ter !default
$background: $white-ter !default
$border: $grey-lighter !default
@@ -55,6 +72,8 @@ $pre-background: $background !default
$link: $blue !default
$link-invert: findColorInvert($link) !default
$link-light: findLightColor($link) !default
$link-dark: findDarkColor($link) !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
@@ -81,7 +100,7 @@ $size-large: $size-4 !default
$custom-colors: null !default
$custom-shades: null !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

39
sass/utilities/functions.sass
View File

@@ -10,29 +10,43 @@
// or a colors list with at least one element
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
$color-base: null
$color-invert: null
$color-light: null
$color-dark: null
$value: null
// The param can either be a single color
// or a list of 2 colors
@if type-of($components) == 'color'
$color-base: $components
$value: $components
$color-invert: findColorInvert($color-base)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
$color-invert: null
// Check if the invert color is provided,
// otherwise compute it
@if length($components) > 1
// If Invert, Light and Dark are provided
@if length($components) > 3
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: nth($components, 4)
// If only Invert and Light are provided
@else if length($components) > 2
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: findDarkColor($color-base)
// If only Invert is provided
@else
$color-invert: findColorInvert($color-base)
$value: ($color-base, $color-invert)
$color-invert: nth($components, 2)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
$value: ($color-base, $color-invert, $color-light, $color-dark)
// We only want to merge the map if the color base is an actual color
@if type-of($color-base) == 'color'
// We merge this colors elements as map with Bulma's colors map
// (we can override them this way, no multiple definition for the same name)
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
$merged-colors: map_merge($merged-colors, ($name: $value))
@return $merged-colors
@@ -76,8 +90,9 @@
@function findDarkColor($color)
@if type-of($color) == 'color'
$l: 29%
@if lightness($color) < 29%
$l: lightness($color)
@return change-color($color, $lightness: $l)
$base-l: 29%
$luminance: colorLuminance($color)
$luminance-delta: (0.53 - $luminance)
$target-l: round($base-l + ($luminance-delta * 53))
@return change-color($color, $lightness: max($base-l, $target-l))
@return $text-strong

8
sass/utilities/mixins.sass
View File

@@ -170,7 +170,7 @@
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
background-color: rgba($scheme-invert, 0.2)
border: none
border-radius: $radius-rounded
cursor: pointer
@@ -190,7 +190,7 @@
width: 20px
&::before,
&::after
background-color: $white
background-color: $scheme-main
content: ""
display: block
left: 50%
@@ -206,9 +206,9 @@
width: 2px
&:hover,
&:focus
background-color: rgba($black, 0.3)
background-color: rgba($scheme-invert, 0.3)
&:active
background-color: rgba($black, 0.4)
background-color: rgba($scheme-invert, 0.4)
// Sizes
&.is-small
height: 16px