Added dark theme base file with dart sass using PR#3697

2024-11-14 11:14:24 +00:00 · 2023-12-06 22:20:44 +09:00 · 2023-12-06 22:20:44 +09:00 · 68cc8d4cd0
commit 68cc8d4cd0
parent 822b58de5a
4 changed files with 157 additions and 0 deletions
--- a/package.json
+++ b/package.json
@ -46,6 +46,14 @@
    "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"
  },
--- a/sass/theme/bulma-dark-rtl.sass
+++ b/sass/theme/bulma-dark-rtl.sass
@ -0,0 +1,4 @@
+@charset "utf-8"
+/* Bulma Dark theme for RTL */
+
+@use "bulma-dark" with ( $rtl: true )
--- a/sass/theme/bulma-dark.sass
+++ b/sass/theme/bulma-dark.sass
@ -0,0 +1,104 @@
+@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"
--- a/sass/utilities/theme-functions.sass
+++ b/sass/utilities/theme-functions.sass
@ -0,0 +1,41 @@
+// 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')))