mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Revert "Added dark theme base file with dart sass using PR#3697"
This reverts commit 5e52e0f8a9.
This commit is contained in:
Hiroyoshi Mori
parent
5e52e0f8a9
commit
822b58de5a
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1
css/theme/bulma-dark-rtl.min.css
vendored
1
css/theme/bulma-dark-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
10313
css/theme/bulma-dark.css
10313
css/theme/bulma-dark.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1
css/theme/bulma-dark.min.css
vendored
1
css/theme/bulma-dark.min.css
vendored
File diff suppressed because one or more lines are too long
@ -46,14 +46,6 @@
|
||||
"rtl-sass": "sass --style=expanded --source-map bulma-rtl.sass css/bulma-rtl.css",
|
||||
"rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
|
||||
"rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
|
||||
"build-dark": "npm run build-dark-sass && npm run build-dark-autoprefix && npm run build-dark-cleancss",
|
||||
"build-dark-autoprefix": "postcss --use autoprefixer --map false --output css/theme/bulma-dark.css css/theme/bulma-dark.css",
|
||||
"build-dark-cleancss": "cleancss -o css/theme/bulma-dark.min.css css/theme/bulma-dark.css",
|
||||
"build-dark-sass": "sass --style=expanded --source-map sass/theme/bulma-dark.sass css/theme/bulma-dark.css",
|
||||
"rtl-dark": "npm run rtl-dark-sass && npm run rtl-dark-autoprefix && npm run rtl-dark-cleancss",
|
||||
"rtl-dark-autoprefix": "postcss --use autoprefixer --map false --output css/theme/bulma-dark-rtl.css css/theme/bulma-dark-rtl.css",
|
||||
"rtl-dark-cleancss": "cleancss -o css/theme/bulma-dark-rtl.min.css css/theme/bulma-dark-rtl.css",
|
||||
"rtl-dark-sass": "sass --style=expanded --source-map sass/theme/bulma-dark-rtl.sass css/theme/bulma-dark-rtl.css",
|
||||
"deploy": "npm run clean && npm run build && npm run rtl",
|
||||
"start": "npm run build-sass -- --watch"
|
||||
},
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
@charset "utf-8"
|
||||
/* Bulma Dark theme for RTL */
|
||||
|
||||
@use "bulma-dark" with ( $rtl: true )
|
||||
@ -1,104 +0,0 @@
|
||||
@charset "utf-8"
|
||||
/* Bulma Dark theme */
|
||||
|
||||
$rtl: false !default
|
||||
@use "../utilities/initial-variables" as initial-variables with ($rtl: $rtl)
|
||||
@use "../utilities/functions" as functions
|
||||
@use "../utilities/theme-functions" as theme-functions
|
||||
|
||||
// -----
|
||||
// Override derived variables
|
||||
// -----
|
||||
|
||||
$primary: rgb(191, 87, 102) // theme-functions.getInvertedColor(initial-variables.$turquoise)
|
||||
|
||||
// info/success/warning/danger are the same colors as Original
|
||||
$info: initial-variables.$cyan
|
||||
$success: initial-variables.$green
|
||||
$warning: initial-variables.$yellow
|
||||
$danger: initial-variables.$red
|
||||
|
||||
$light: rgb(69, 69, 69) // theme-functions.getInvertedColor(initial-variables.$white-ter)
|
||||
$dark: rgb(164, 164, 164) // theme-functions.getInvertedColor(initial-variables.$grey-darker)
|
||||
|
||||
$primary-invert: theme-functions.getInvertedColor($primary)
|
||||
$primary-light: theme-functions.getLighterColor($primary)
|
||||
$primary-dark: theme-functions.getDarkerColor($primary)
|
||||
$info-invert: theme-functions.getInvertedColor($info)
|
||||
$info-light: theme-functions.getLighterColor($info)
|
||||
$info-dark: theme-functions.getDarkerColor($info)
|
||||
$success-invert: theme-functions.getInvertedColor($success)
|
||||
$success-light: theme-functions.getLighterColor($success)
|
||||
$success-dark: theme-functions.getDarkerColor($success)
|
||||
$warning-invert: theme-functions.getInvertedColor($warning)
|
||||
$warning-light: theme-functions.getLighterColor($warning)
|
||||
$warning-dark: theme-functions.getDarkerColor($warning)
|
||||
$danger-invert: theme-functions.getInvertedColor($danger)
|
||||
$danger-light: theme-functions.getLighterColor($danger)
|
||||
$danger-dark: theme-functions.getDarkerColor($danger)
|
||||
$light-invert: theme-functions.getInvertedColor($light)
|
||||
$dark-invert: theme-functions.getInvertedColor($dark)
|
||||
|
||||
// General colors
|
||||
$scheme-main: rgb(64, 64, 64) // theme-functions.getInvertedColor(initial-variables.$white)
|
||||
$scheme-main-bis: rgb(66, 66, 66) // theme-functions.getInvertedColor(initial-variables.$white-bis)
|
||||
$scheme-main-ter: rgb(69, 69, 69) // theme-functions.getInvertedColor(initial-variables.$white-ter)
|
||||
$scheme-invert: rgb(186, 186, 186) // theme-functions.getInvertedColor(initial-variables.$black)
|
||||
$scheme-invert-bis: rgb(182, 182, 182) // theme-functions.getInvertedColor(initial-variables.$black-bis)
|
||||
$scheme-invert-ter: rgb(173, 173, 173) // theme-functions.getInvertedColor(initial-variables.$black-ter)
|
||||
|
||||
$background: $scheme-main-ter
|
||||
$border: rgb(82, 82, 82) // theme-functions.getInvertedColor(initial-variables.$grey-lighter)
|
||||
$border-hover: rgb(101, 101, 101) // theme-functions.getInvertedColor(initial-variables.$grey-light)
|
||||
$border-light: rgb(73, 73, 73) // theme-functions.getInvertedColor(initial-variables.$grey-lightest)
|
||||
$border-light-hover: rgb(101, 101, 101) // theme-functions.getInvertedColor(initial-variables.$grey-light)
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: rgb(154, 154, 154) // theme-functions.getInvertedColor(initial-variables.$grey-dark)
|
||||
$text-invert: rgb(64, 64, 64) // theme-functions.getInvertedColor(functions.findColorInvert(initial-variables.$grey-dark))
|
||||
$text-light: rgb(130, 130, 130) // theme-functions.getInvertedColor(initial-variables.$grey)
|
||||
$text-strong: rgb(164, 164, 164) // theme-functions.getInvertedColor(initial-variables.$grey-darker)
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: rgb(82, 183, 163) // theme-functions.getInvertedColor(darken(initial-variables.$red, 15%))
|
||||
$code-background: $background
|
||||
$pre: $text
|
||||
$pre-background: $background
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: rgb(155, 144, 92) // theme-functions.getInvertedColor(initial-variables.$blue)
|
||||
$link-invert: theme-functions.getInvertedColor($link)
|
||||
$link-light: theme-functions.getLighterColor($link)
|
||||
$link-dark: theme-functions.getDarkerColor($link)
|
||||
$link-visited: rgb(99, 138, 64) // theme-functions.getInvertedColor(initial-variables.$purple)
|
||||
$link-hover: rgb(164, 164, 164) // theme-functions.getInvertedColor(initial-variables.$grey-darker)
|
||||
$link-hover-border: rgb(101, 101, 101) // theme-functions.getInvertedColor(initial-variables.$grey-light)
|
||||
$link-focus: rgb(164, 164, 164) // theme-functions.getInvertedColor(initial-variables.$grey-darker)
|
||||
$link-focus-border: rgb(155, 144, 92) // theme-functions.getInvertedColor(initial-variables.$blue)
|
||||
$link-active: rgb(164, 164, 164) // theme-functions.getInvertedColor(initial-variables.$grey-darker)
|
||||
$link-active-border: rgb(154, 154, 154) // theme-functions.getInvertedColor(initial-variables.$grey-dark)
|
||||
|
||||
$custom-colors: null
|
||||
$custom-shades: null
|
||||
|
||||
// Lists and maps
|
||||
$colors: functions.mergeColorMaps(("white": (rgb(64, 64, 64), rgb(186, 186, 186)), "black": (rgb(186, 186, 186), rgb(64, 64, 64)), "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)
|
||||
// $colors: functions.mergeColorMaps(("white": (theme-functions.getInvertedColor(initial-variables.$white), theme-functions.getInvertedColor(initial-variables.$black)), "black": (theme-functions.getInvertedColor(initial-variables.$black), theme-functions.getInvertedColor(initial-variables.$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)
|
||||
|
||||
$shades: functions.mergeColorMaps(("black-bis": rgb(182, 182, 182), "black-ter": rgb(173, 173, 173), "grey-darker": rgb(164, 164, 164), "grey-dark": rgb(154, 154, 154), "grey": rgb(130, 130, 130), "grey-light": rgb(101, 101, 101), "grey-lighter": rgb(82, 82, 82), "white-ter": rgb(69, 69, 69), "white-bis": rgb(66, 66, 66)), $custom-shades)
|
||||
// $shades: functions.mergeColorMaps(("black-bis": theme-functions.getInvertedColor(initial-variables.$black-bis), "black-ter": theme-functions.getInvertedColor(initial-variables.$black-ter), "grey-darker": theme-functions.getInvertedColor(initial-variables.$grey-darker), "grey-dark": theme-functions.getInvertedColor(initial-variables.$grey-dark), "grey": theme-functions.getInvertedColor(initial-variables.$grey), "grey-light": theme-functions.getInvertedColor(initial-variables.$grey-light), "grey-lighter": theme-functions.getInvertedColor(initial-variables.$grey-lighter), "white-ter": theme-functions.getInvertedColor(initial-variables.$white-ter), "white-bis": theme-functions.getInvertedColor(initial-variables.$white-bis)), $custom-shades)
|
||||
|
||||
@use "../utilities/derived-variables" with ($primary: $primary, $primary-invert: $primary-invert, $primary-light: $primary-light, $primary-dark: $primary-dark, $light: $light, $dark: $dark, $light-invert: $light-invert, $dark-invert: $dark-invert, $scheme-main: $scheme-main, $scheme-main-bis: $scheme-main-bis, $scheme-main-ter: $scheme-main-ter, $scheme-invert: $scheme-invert, $scheme-invert-bis: $scheme-invert-bis, $scheme-invert-ter: $scheme-invert-ter, $background: $background, $border: $border, $border-hover: $border-hover, $border-light: $border-light, $border-light-hover: $border-light-hover, $text: $text, $text-invert: $text-invert, $text-light: $text-light, $text-strong: $text-strong, $code: $code, $code-background: $code-background, $pre: $pre, $pre-background: $pre-background, $link: $link, $link-invert: $link-invert, $link-light: $link-light, $link-dark: $link-dark, $link-visited: $link-visited, $link-hover: $link-hover, $link-hover-border: $link-hover-border, $link-focus: $link-focus, $link-focus-border: $link-focus-border, $link-active: $link-active, $link-active-border: $link-active-border, $colors: $colors, $shades: $shades)
|
||||
@forward "../utilities/mixins"
|
||||
@forward "../utilities/controls"
|
||||
@forward "../utilities/extends"
|
||||
@forward "../base"
|
||||
@forward "../elements"
|
||||
@forward "../form"
|
||||
@forward "../components"
|
||||
@forward "../grid"
|
||||
@forward "../helpers"
|
||||
@forward "../layout"
|
||||
@ -1,41 +0,0 @@
|
||||
// get Invert Value for value of either RGB.
|
||||
// @param integer value of either RGB
|
||||
// @return integer inverted value
|
||||
@function invertValue($value)
|
||||
@return 0.25 * $value + 0.75 * (255 - $value)
|
||||
|
||||
// get Darker Value for value of either RGB.
|
||||
// @param integer value of either RGB
|
||||
// @return integer Darker value
|
||||
@function darkerValue($value)
|
||||
@return 0.9 * $value
|
||||
|
||||
// get Darker Value for value of either RGB.
|
||||
// @param integer value of either RGB
|
||||
// @return integer Darker value
|
||||
@function lighterValue($value)
|
||||
@if 1.2 * $value < 255
|
||||
@return 1.2 * $value
|
||||
@else
|
||||
@return 255
|
||||
|
||||
// get Inverted Color
|
||||
// @param string Color you'd like to get inverted color
|
||||
// @return color inverted color
|
||||
@function getInvertedColor($color)
|
||||
$color-rgb: ('red': red($color), 'green': green($color), 'blue': blue($color))
|
||||
@return rgb(invertValue(map-get($color-rgb, 'red')), invertValue(map-get($color-rgb, 'green')), invertValue(map-get($color-rgb, 'blue')))
|
||||
|
||||
// get Darker Color
|
||||
// @param string Color you'd like to get darker color
|
||||
// @return color darker color
|
||||
@function getDarkerColor($color)
|
||||
$color-rgb: ('red': red($color), 'green': green($color), 'blue': blue($color))
|
||||
@return rgb(darkerValue(map-get($color-rgb, 'red')), darkerValue(map-get($color-rgb, 'green')), darkerValue(map-get($color-rgb, 'blue')))
|
||||
|
||||
// get Lighter Color
|
||||
// @param string Color you'd like to get lighter color
|
||||
// @return color lighter color
|
||||
@function getLighterColor($color)
|
||||
$color-rgb: ('red': red($color), 'green': green($color), 'blue': blue($color))
|
||||
@return rgb(lighterValue(map-get($color-rgb, 'red')), lighterValue(map-get($color-rgb, 'green')), lighterValue(map-get($color-rgb, 'blue')))
|
||||
Loading…
Reference in New Issue
Block a user