Introduce Bootstrap proposal

Orange-OpenSource · Sep 12, 2023 · 06d370c · 06d370c
1 parent b590177
commit 06d370c
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 99 deletions.
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -6,21 +6,6 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
-$themed-colors: (
-  "surface": $white,
-  "color": $black,
-  "inverted-surface": $black,
-  "inverted-color": $white,
-  "secondary-surface": $gray-300,
-  "secondary-border": $gray-500,
-  "secondary-text": $gray-700,
-  "primary": $accessible-orange,
-  "success": $functional-green,
-  "info": $functional-blue,
-  "warning": $functional-yellow,
-  "danger": $functional-red,
-) !default;
-
 // scss-docs-start theme-text-map
 $theme-colors-text: (
   "primary": $primary-text-emphasis,
@@ -72,26 +57,29 @@ $background-colors: map-merge(
 ) !default;
 // End mod
 
-$themed-colors-dark: null !default;
+$theme-colors-dark: null !default;
+$theme-colors-rgb-dark: null !default;
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;
 $theme-colors-border-subtle-dark: null !default;
 
 @if $enable-dark-mode {
-  $themed-colors-dark: (
-    "surface": $gray-950,
-    "color": $gray-300,
-    "inverted-surface": $white,
-    "inverted-color": $black,
-    "secondary-surface": $gray-900,
-    "secondary-border": $gray-700,
-    "secondary-text": $gray-500,
-    "primary": $brand-orange,
-    "success": $functional-green-dark,
-    "info": $functional-blue-dark,
-    "warning": $functional-yellow-dark,
-    "danger": $functional-red-dark,
+  // scss-docs-start theme-color-dark-map
+  $theme-colors-dark: (
+    "primary": $primary-dark,
+    "secondary": $secondary-dark,
+    "success": $success-dark,
+    "info": $info-dark,
+    "warning": $warning-dark,
+    "danger": $danger-dark,
+    "light": $light-dark,
+    "dark": $dark-dark,
   ) !default;
+  // scss-docs-end theme-color-dark-map
+
+  // scss-docs-start theme-colors-rgb-dark
+  $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
+  // scss-docs-end theme-colors-rgb-dark
 
   // scss-docs-start theme-text-dark-map
   $theme-colors-text-dark: (

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -22,10 +22,6 @@
     --#{$prefix}#{$color}-rgb: #{$value};
   }
 
-  @each $color, $value in $themed-colors {
-    --#{$prefix}themed-#{$color}: #{$value};
-  }
-
   @each $color, $value in $theme-colors-text {
     --#{$prefix}#{$color}-text-emphasis: #{$value};
   }
@@ -211,8 +207,12 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
-    @each $color, $value in $themed-colors-dark {
-      --#{$prefix}themed-#{$color}: #{$value};
+    @each $color, $value in $theme-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-rgb-dark {
+      --#{$prefix}#{$color}-rgb: #{$value};
     }
 
     @each $color, $value in $theme-colors-text-dark {

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -14,45 +14,56 @@ $functional-red-dark:    #d53f15 !default;
 // End mod
 
 // scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-color-dark-variables
+$primary-dark:                      $orange !default;
+$secondary-dark:                    $black !default;
+$success-dark:                      $functional-green-dark !default;
+$info-dark:                         $functional-blue-dark !default;
+$warning-dark:                      $functional-yellow-dark !default;
+$danger-dark:                       $functional-red-dark !default;
+$light-dark:                        $gray-500 !default;
+$dark-dark:                         $black !default;
+// scss-docs-end theme-color-dark-variables
+
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        $primary !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
-$secondary-text-emphasis-dark:      $white !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
-$success-text-emphasis-dark:        $functional-green-dark !default; // Boosted mod: instead of `tint-color($success, 40%)`
-$info-text-emphasis-dark:           $functional-blue-dark !default; // Boosted mod: instead of `tint-color($info, 40%)`
-$warning-text-emphasis-dark:        $functional-yellow-dark !default; // Boosted mod: instead of `tint-color($warning, 40%)`
-$danger-text-emphasis-dark:         $functional-red-dark !default; // Boosted mod: instead of `tint-color($danger, 40%)`
-$light-text-emphasis-dark:          $gray-700 !default; // Boosted mod: instead of `$gray-100`
-$dark-text-emphasis-dark:           $dark !default; // Boosted mod: instead of `$gray-300`
+$primary-text-emphasis-dark:        $primary-dark !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
+$secondary-text-emphasis-dark:      $secondary-dark !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
+$success-text-emphasis-dark:        $success-dark !default; // Boosted mod: instead of `tint-color($success, 40%)`
+$info-text-emphasis-dark:           $info-dark !default; // Boosted mod: instead of `tint-color($info, 40%)`
+$warning-text-emphasis-dark:        $warning-dark !default; // Boosted mod: instead of `tint-color($warning, 40%)`
+$danger-text-emphasis-dark:         $danger-dark !default; // Boosted mod: instead of `tint-color($danger, 40%)`
+$light-text-emphasis-dark:          $light-dark !default; // Boosted mod: instead of `$gray-100`
+$dark-text-emphasis-dark:           $dark-dark !default; // Boosted mod: instead of `$gray-300`
 // scss-docs-end theme-text-dark-variables
 
 // scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            $primary !default; // Boosted mod: instead of `shade-color($primary, 80%)`
-$secondary-bg-subtle-dark:          $white !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
-$success-bg-subtle-dark:            $functional-green-dark !default; // Boosted mod: instead of `shade-color($success, 80%)`
-$info-bg-subtle-dark:               $functional-blue-dark !default; // Boosted mod: instead of `shade-color($info, 80%)`
-$warning-bg-subtle-dark:            $functional-yellow-dark !default; // Boosted mod: instead of `shade-color($warning, 80%)`
-$danger-bg-subtle-dark:             $functional-red-dark !default; // Boosted mod: instead of `shade-color($danger, 80%)`
-$light-bg-subtle-dark:              $gray-700 !default; // Boosted mod: instead of `$gray-800`
-$dark-bg-subtle-dark:               $dark !default; // Boosted mod: instead of `mix($gray-800, $black)`
+$primary-bg-subtle-dark:            $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 80%)`
+$secondary-bg-subtle-dark:          $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
+$success-bg-subtle-dark:            $success-dark !default; // Boosted mod: instead of `shade-color($success, 80%)`
+$info-bg-subtle-dark:               $info-dark !default; // Boosted mod: instead of `shade-color($info, 80%)`
+$warning-bg-subtle-dark:            $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 80%)`
+$danger-bg-subtle-dark:             $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 80%)`
+$light-bg-subtle-dark:              $light-dark !default; // Boosted mod: instead of `$gray-800`
+$dark-bg-subtle-dark:               $dark-dark !default; // Boosted mod: instead of `mix($gray-800, $black)`
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        $primary !default; // Boosted mod: instead of `shade-color($primary, 40%)`
-$secondary-border-subtle-dark:      $white !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
-$success-border-subtle-dark:        $functional-green-dark !default; // Boosted mod: instead of `shade-color($success, 40%)`
-$info-border-subtle-dark:           $functional-blue-dark !default; // Boosted mod: instead of `shade-color($info, 40%)`
-$warning-border-subtle-dark:        $functional-yellow-dark !default; // Boosted mod: instead of `shade-color($warning, 40%)`
-$danger-border-subtle-dark:         $functional-red-dark !default; // Boosted mod: instead of `shade-color($danger, 40%)`
-$light-border-subtle-dark:          $gray-700 !default; // Boosted mod: instead of `$gray-700`
-$dark-border-subtle-dark:           $dark !default; // Boosted mod: instead of `$gray-800`
+$primary-border-subtle-dark:        $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 40%)`
+$secondary-border-subtle-dark:      $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
+$success-border-subtle-dark:        $success-dark !default; // Boosted mod: instead of `shade-color($success, 40%)`
+$info-border-subtle-dark:           $info-dark !default; // Boosted mod: instead of `shade-color($info, 40%)`
+$warning-border-subtle-dark:        $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 40%)`
+$danger-border-subtle-dark:         $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 40%)`
+$light-border-subtle-dark:          $light-dark !default; // Boosted mod: instead of `$gray-700`
+$dark-border-subtle-dark:           $dark-dark !default; // Boosted mod: instead of `$gray-800`
 // scss-docs-end theme-border-subtle-dark-variables
 
 $body-color-dark:                   $gray-300 !default;
 $body-bg-dark:                      $gray-950 !default; // Boosted mod: instead of `$gray-900`
 $body-secondary-color-dark:         $gray-500 !default; // Boosted mod: instead of `rgba($body-color-dark, .75)`
 $body-secondary-bg-dark:            $gray-900 !default; // Boosted mod: instead of `$gray-800`
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             #414141 !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
+$body-tertiary-color-dark:          $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
+$body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`

diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
@@ -72,8 +72,6 @@ Color palette is used throughout Boosted in multiple ways, either in components
       <figcaption class="py-1">
         <strong>{{ $color.name }}</strong>
         <br>
-        <var>--bs-themed-{{- $color.level -}}</var>
-        <br><br>
         <code>{{ $color.hex }}</code>
         <hr class="my-2 bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
         <var>{{- $color.variable -}}</var>

diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
@@ -22,24 +22,24 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 
 <!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
-<div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
+<div class="p-3 mb-2 fw-bold bg-primary text-black">.bg-primary</div>
 <div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
 <div class="p-3 mb-2 fw-bold bg-success text-white">.bg-success</div>
 <div class="p-3 mb-2 fw-bold bg-danger text-white">.bg-danger</div>
 <div class="p-3 mb-2 fw-bold bg-warning text-white">.bg-warning</div>
 <div class="p-3 mb-2 fw-bold bg-info text-white">.bg-info</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
-<div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-green text-black">.bg-supporting-green</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-purple text-black">.bg-supporting-purple</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-yellow text-black">.bg-supporting-yellow</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-blue text-black">.bg-supporting-blue</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-pink text-black">.bg-supporting-pink</div>
+<div class="p-3 mb-2 fw-bold bg-light text-black">.bg-light</div>
 <div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
 <div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
 <div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
 <div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
-<div class="p-3 mb-2 fw-bold bg-white">.bg-white</div>
+<div class="p-3 mb-2 fw-bold bg-white text-black">.bg-white</div>
 <div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
 {{< /example >}}
 
@@ -118,6 +118,8 @@ Boosted supersedes Bootstrap color variables with Orange brand color.
 
 {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}
+
 <!-- Boosted mod: no background gradient -->
 
 Grayscale colors are also available, but only a subset are used to generate any utilities.

diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
@@ -40,9 +40,9 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 <p class="text-body-tertiary">.text-body-tertiary</p>
 
 <p class="text-black bg-white">.text-black</p>
-<p class="text-white bg-dark">.text-white</p>
+<p class="text-white bg-black">.text-white</p>
 <p class="text-black-50 bg-white">.text-black-50</p>
-<p class="text-white-50 bg-dark">.text-white-50</p>
+<p class="text-white-50 bg-black">.text-white-50</p>
 {{< /example >}}
 
 {{< callout warning >}}
@@ -65,16 +65,17 @@ The `.text-primary` color on dark background (`#ff7900`) can be used in any size
 Here are some compliant combinations examples for texts:
 
 {{< example >}}
+<div class="bg-white py-1" data-bs-theme="light">
+  <p class="text-black">regular black text</p>
+  <p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3</p>
+  <p class="text-body-secondary">regular secondary text</p>
+
+  <p class="text-black fw-bold">bold black text</p>
+  <p class="text-primary fs-4 fw-bold">bold primary text with minimum font-size for contrast with .fs-4</p>
+  <p class="text-body-secondary fw-bold">bold secondary text</p>
+</div>
 
-<p class="text-black">regular black text</p>
-<p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3</p>
-<p class="text-body-secondary">regular secondary text</p>
-
-<p class="text-black fw-bold">bold black text</p>
-<p class="text-primary fs-4 fw-bold">bold primary text with minimum font-size for contrast with .fs-4</p>
-<p class="text-body-secondary fw-bold">bold secondary text</p>
-
-<div class="bg-dark py-1">
+<div class="bg-dark py-1" data-bs-theme="dark">
   <p class="text-white">regular white text on dark</p>
   <p class="text-primary">regular primary text on dark</p>
   <p class="text-light">regular light text on dark</p>
@@ -101,20 +102,6 @@ Here are some compliant combinations examples for non-texts elements, such as SV
   <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
   </svg>
-</p>
-<p class="bg-dark p-2">
-  <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#settings"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
-  </svg>
-  <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
-    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
-  </svg>
   <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
   </svg>
@@ -183,6 +170,8 @@ Boosted supersedes Bootstrap color variables with Orange brand color.
 
 {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}}
+
 Grayscale colors are also available, but only a subset are used to generate any utilities.
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}

diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
@@ -3,19 +3,18 @@
   contrast_color: dark
 - name: secondary
   hex: "#000"
+  contrast_color: white
 - name: success
   hex: "#32c832"
-  contrast_color: dark
 - name: danger
   hex: "#cd3c14"
 - name: warning
   hex: "#fc0"
-  contrast_color: dark
 - name: info
   hex: "#527edb"
-  contrast_color: dark
 - name: light
   hex: "#ddd"
   contrast_color: dark
 - name: dark
   hex: "#000"
+  contrast_color: white