Merge pull request #8258 from weseek/imprv/bootstrap-theme-colors

imprv: Bootstrap theme colors

packages/core/scss/bootstrap/_override.scss → apps/app/_obsolete/src/styles/_override.scss

@@ -99,11 +99,6 @@
 //   }
 // }
 
-// Badges
-.badge {
-  @extend .rounded-pill;
-}
-
 // //Modals
 // .modal-open {
 //   width: 100%;

apps/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -31,7 +31,7 @@
 // == Colors
 @include bs.color-mode(light) {
   .grw-page-editor-mode-manager :global {
-    .btn-outline-primary {
+    .btn {
       $color: var(--grw-page-editor-mode-manager-btn-color, var(--grw-primary-700));
       $bg: var(--grw-page-editor-mode-manager-btn-bg, var(--grw-primary-100));
       $bg-rgb: var(--grw-page-editor-mode-manager-btn-bg-rgb, var(--grw-primary-100-rgb));
@@ -51,7 +51,7 @@
 }
 @include bs.color-mode(dark) {
   .grw-page-editor-mode-manager :global {
-    .btn-outline-primary {
+    .btn {
       $color: var(--grw-page-editor-mode-manager-btn-color, var(--grw-primary-300));
       $bg: var(--grw-page-editor-mode-manager-btn-bg, var(--grw-primary-800));
       $bg-rgb: var(--grw-page-editor-mode-manager-btn-bg-rgb, var(--grw-primary-800-rgb));

apps/app/src/components/Navbar/PageEditorModeManager.tsx

@@ -22,7 +22,7 @@ const PageEditorModeButton = React.memo((props: PageEditorModeButtonProps) => {
     currentEditorMode, isBtnDisabled, editorMode, children, onClick,
   } = props;
 
-  const classNames = ['btn btn-outline-primary py-1 px-2 d-flex align-items-center justify-content-center'];
+  const classNames = ['btn py-1 px-2 d-flex align-items-center justify-content-center'];
   if (currentEditorMode === editorMode) {
     classNames.push('active');
   }

apps/app/src/styles/organisms/_wiki.scss

@@ -294,7 +294,7 @@
 
 // == Colors
 .wiki {
-  a {
+  a:not(.alert-link) {
     @extend .link-underline-opacity-25;
     @extend .link-underline-opacity-100-hover;
 
@@ -309,5 +309,6 @@
         var(--bs-link-opacity, 1)
       );
     }
+
   }
 }

packages/core/scss/bootstrap/_variables-dark.scss

@@ -0,0 +1,14 @@
+$success-text-emphasis-dark:        mix(#fff, $success, 20%) !default;
+$info-text-emphasis-dark:           mix(#fff, $info, 20%) !default;
+$warning-text-emphasis-dark:        mix(#fff, $warning, 20%) !default;
+$danger-text-emphasis-dark:         mix(#fff, $danger, 20%) !default;
+
+$success-bg-subtle-dark:            mix($gray-900, $success, 85%) !default;
+$info-bg-subtle-dark:               mix($gray-900, $info, 85%) !default;
+$warning-bg-subtle-dark:            mix($gray-900, $warning, 85%) !default;
+$danger-bg-subtle-dark:             mix($gray-900, $danger, 85%) !default;
+
+$success-border-subtle-dark:        mix($gray-900, $success, 50%) !default;
+$info-border-subtle-dark:           mix($gray-900, $info, 50%) !default;
+$warning-border-subtle-dark:        mix($gray-900, $warning, 50%) !default;
+$danger-border-subtle-dark:         mix($gray-900, $danger, 50%) !default;

packages/core/scss/bootstrap/_variables.scss

@@ -5,6 +5,28 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
+// Color system
+$success:       #4a9017 !default;
+$info:          #4689aa !default;
+$warning:       #c99818 !default;
+$danger:        #de4d4d !default;
+
+$success-text-emphasis:       mix($gray-900, $success, 30%) !default;
+$info-text-emphasis:          mix($gray-900, $info, 30%) !default;
+$warning-text-emphasis:       mix($gray-900, $warning, 30%) !default;
+$danger-text-emphasis:        mix($gray-900, $danger, 30%) !default;
+
+$success-bg-subtle:           mix(#fff, $success, 90%) !default;
+$info-bg-subtle:              mix(#fff, $info, 90%) !default;
+$warning-bg-subtle:           mix(#fff, $warning, 90%) !default;
+$danger-bg-subtle:            mix(#fff, $danger, 90%) !default;
+
+$success-border-subtle:       mix(#fff, $success, 70%) !default;
+$info-border-subtle:          mix(#fff, $info, 70%) !default;
+$warning-border-subtle:       mix(#fff, $warning, 70%) !default;
+$danger-border-subtle:        mix(#fff, $danger, 70%) !default;
+
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.

packages/core/scss/bootstrap/apply.scss

@@ -42,4 +42,5 @@
 @import 'bootstrap/scss/utilities/api';
 
 // override
-@import './override';
+@import './override/badge';
+@import './override/buttons';

packages/core/scss/bootstrap/init.scss

@@ -2,6 +2,7 @@
 
 @import './theming/variables';
 @import './variables';
+@import './variables-dark';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/variables-dark';
 

packages/core/scss/bootstrap/mixins/_button-outline-variant.scss

@@ -0,0 +1,59 @@
+@mixin button-outline-variant-light(
+  $color,
+  $background: mix(#fff, $color, 90%),
+  $border: $color,
+  $hover-background: mix(#fff, $color, 85%),
+  $hover-border: $border,
+  $hover-color: $color,
+  $active-background: mix(#fff, $color, 70%),
+  $active-border: $border,
+  $active-color: $color,
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: $color
+) {
+
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}
+
+@mixin button-outline-variant-dark(
+  $color,
+  $background: mix($gray-900, $color, 85%),
+  $border: mix($gray-900, $color, 50%),
+  $hover-background: mix($gray-900, $color, 80%),
+  $hover-border: $border,
+  $hover-color: $color,
+  $active-background: mix($gray-900, $color, 65%),
+  $active-border: $border,
+  $active-color: $color,
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: $color
+) {
+
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}

packages/core/scss/bootstrap/override/_badge.scss

@@ -0,0 +1,3 @@
+.badge {
+  @extend .rounded-pill;
+}

packages/core/scss/bootstrap/override/_buttons.scss

@@ -0,0 +1,21 @@
+@import '../mixins/button-outline-variant';
+
+:root[data-bs-theme='light'] {
+  @each $color, $value in $theme-colors {
+    @if $color != 'primary' and $color != 'secondary' {
+      .btn-outline-#{$color} {
+        @include button-outline-variant-light($value);
+      }
+    }
+  }
+}
+
+:root[data-bs-theme='dark'] {
+  @each $color, $value in $theme-colors {
+    @if $color != 'primary' and $color != 'secondary' {
+      .btn-outline-#{$color} {
+        @include button-outline-variant-dark($value);
+      }
+    }
+  }
+}

packages/core/scss/bootstrap/theming/_buttons.scss → packages/core/scss/bootstrap/theming/_buttons-dark.scss

@@ -1,15 +1,17 @@
+@import '../mixins/button-outline-variant';
+
 .btn-primary {
   @include button-variant($primary, $primary);
 }
 
-.btn-outline-primary {
-  @include button-outline-variant($primary);
-}
-
 .btn-secondary {
   @include button-variant($secondary, $secondary);
 }
 
+.btn-outline-primary {
+  @include button-outline-variant-dark($primary);
+}
+
 .btn-outline-secondary {
-  @include button-outline-variant($secondary);
+  @include button-outline-variant-dark($secondary);
 }

packages/core/scss/bootstrap/theming/_buttons-light.scss

@@ -0,0 +1,17 @@
+@import '../mixins/button-outline-variant';
+
+.btn-primary {
+  @include button-variant($primary, $primary);
+}
+
+.btn-secondary {
+  @include button-variant($secondary, $secondary);
+}
+
+.btn-outline-primary {
+  @include button-outline-variant-light($primary);
+}
+
+.btn-outline-secondary {
+  @include button-outline-variant-light($secondary);
+}

packages/core/scss/bootstrap/theming/apply.scss → packages/core/scss/bootstrap/theming/apply-dark.scss

@@ -1,5 +1,7 @@
+@import './root';
+@import './root-dark';
 @import './tables';
-@import './buttons';
+@import './buttons-dark';
 @import './pagination';
 @import './progress';
 @import './list-group';

packages/core/scss/bootstrap/theming/apply-light.scss

@@ -0,0 +1,7 @@
+@import './root';
+@import './root-light';
+@import './tables';
+@import './buttons-light';
+@import './pagination';
+@import './progress';
+@import './list-group';

packages/preset-themes/src/styles/default.scss

@@ -27,9 +27,7 @@
 
   @import '@growi/core/scss/bootstrap/init-stage-2';
 
-  @import '@growi/core/scss/bootstrap/theming/root';
-  @import '@growi/core/scss/bootstrap/theming/root-light';
-  @import '@growi/core/scss/bootstrap/theming/apply';
+  @import '@growi/core/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-800-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-900-rgb);
@@ -65,9 +63,7 @@
 
   @import '@growi/core/scss/bootstrap/init-stage-2';
 
-  @import '@growi/core/scss/bootstrap/theming/root';
-  @import '@growi/core/scss/bootstrap/theming/root-dark';
-  @import '@growi/core/scss/bootstrap/theming/apply';
+  @import '@growi/core/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-300-rgb);

packages/preset-themes/src/styles/mono-blue.scss

@@ -27,9 +27,7 @@
 
   @import '@growi/core/scss/bootstrap/init-stage-2';
 
-  @import '@growi/core/scss/bootstrap/theming/root';
-  @import '@growi/core/scss/bootstrap/theming/root-light';
-  @import '@growi/core/scss/bootstrap/theming/apply';
+  @import '@growi/core/scss/bootstrap/theming/apply-light';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-700-rgb);
@@ -64,9 +62,7 @@
 
   @import '@growi/core/scss/bootstrap/init-stage-2';
 
-  @import '@growi/core/scss/bootstrap/theming/root';
-  @import '@growi/core/scss/bootstrap/theming/root-dark';
-  @import '@growi/core/scss/bootstrap/theming/apply';
+  @import '@growi/core/scss/bootstrap/theming/apply-dark';
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);