jobdone-shared-files 1.1.19 → 1.1.20-beta.2

package/styleNew/scss/Settings/_color-mode.scss

@@ -0,0 +1,125 @@
+@use "sass:color";
+
+$auto-dark-mode: false;
+
+$grays-light-mode: (
+    "000": $white,
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900,
+    "1000": $black,
+) !default;
+
+$grays-dark-mode: (
+    "000": color.adjust($gray-900, $lightness: -5%),
+    "100": $gray-900,
+    "200": $gray-800,
+    "300": $gray-700,
+    "400": $gray-600,
+    "500": $gray-500,
+    "600": $gray-400,
+    "700": $gray-300,
+    "800": $gray-200,
+    "900": $gray-100,
+    "1000": $white,
+) !default;
+
+
+:root{
+    @each $color, $value in $grays-light-mode {
+        --gray-#{$color}: #{$value};
+    }
+}
+
+// class --------------------------------------------
+@each $color, $value in $grays-light-mode {
+    .bg-gray-#{$color}{
+        background-color: var(--gray-#{$color});
+    }
+    .text-gray-#{$color}{
+        color: var(--gray-#{$color});
+    }
+}
+// class --------------------------------------------
+
+
+// dark setting --------------------------------------------
+@if $auto-dark-mode {
+    @media (prefers-color-scheme: dark) {
+        :root{
+            @each $color, $value in $grays-dark-mode {
+                --gray-#{$color}: #{$value};
+            }
+
+            // copy from bootstrap (5.3.0-alpha1)
+            
+            // scss-docs-start root-dark-mode-vars
+            --bs-body-color: #{$body-color-dark};
+            --bs-body-color-rgb: #{to-rgb($body-color-dark)};
+            --bs-body-bg: #{$body-bg-dark};
+            --bs-body-bg-rgb: #{to-rgb($body-bg-dark)};
+        
+            --bs-emphasis-color: #{$body-emphasis-color-dark};
+            --bs-emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+        
+            --bs-secondary-color: #{$body-secondary-color-dark};
+            --bs-secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+            --bs-secondary-bg: #{$body-secondary-bg-dark};
+            --bs-secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+        
+            --bs-tertiary-color: #{$body-tertiary-color-dark};
+            --bs-tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+            --bs-tertiary-bg: #{$body-tertiary-bg-dark};
+            --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+        
+            --bs-emphasis-color: #{$emphasis-color-dark};
+        
+            --bs-primary-text: #{$primary-text-dark};
+            --bs-secondary-text: #{$secondary-text-dark};
+            --bs-success-text: #{$success-text-dark};
+            --bs-info-text: #{$info-text-dark};
+            --bs-warning-text: #{$warning-text-dark};
+            --bs-danger-text: #{$danger-text-dark};
+            --bs-light-text: #{$light-text-dark};
+            --bs-dark-text: #{$dark-text-dark};
+        
+            --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
+            --bs-secondary-bg-subtle: #{$secondary-bg-subtle-dark};
+            --bs-success-bg-subtle: #{$success-bg-subtle-dark};
+            --bs-info-bg-subtle: #{$info-bg-subtle-dark};
+            --bs-warning-bg-subtle: #{$warning-bg-subtle-dark};
+            --bs-danger-bg-subtle: #{$danger-bg-subtle-dark};
+            --bs-light-bg-subtle: #{$light-bg-subtle-dark};
+            --bs-dark-bg-subtle: #{$dark-bg-subtle-dark};
+        
+            --bs-primary-border-subtle: #{$primary-border-subtle-dark};
+            --bs-secondary-border-subtle: #{$secondary-border-subtle-dark};
+            --bs-success-border-subtle: #{$success-border-subtle-dark};
+            --bs-info-border-subtle: #{$info-border-subtle-dark};
+            --bs-warning-border-subtle: #{$warning-border-subtle-dark};
+            --bs-danger-border-subtle: #{$danger-border-subtle-dark};
+            --bs-light-border-subtle: #{$light-border-subtle-dark};
+            --bs-dark-border-subtle: #{$dark-border-subtle-dark};
+        
+            --bs-heading-color: #{$headings-color-dark};
+        
+            --bs-link-color: #{$link-color-dark};
+            --bs-link-hover-color: #{$link-hover-color-dark};
+            --bs-link-color-rgb: #{to-rgb($link-color-dark)};
+            --bs-link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+        
+            --bs-code-color: #{$code-color-dark};
+        
+            --bs-border-color: #{$border-color-dark};
+            --bs-border-color-translucent: #{$border-color-translucent-dark};
+            // scss-docs-end root-dark-mode-vars
+        }
+    }
+}
+// dark setting --------------------------------------------

package/styleNew/scss/Settings/_custom-variables.scss

@@ -0,0 +1,12 @@
+@use "sass:color";
+
+$gradient-blue: linear-gradient(295deg, #4483E0 13.42%, #C6DDFF 95.81%);
+$gradient-blue-light: linear-gradient(295deg, rgba(#4483E0, .1) 13.42%, rgba(#C6DDFF, .1) 95.81%);
+
+$primary-bg-light: rgba(var(--bs-link-color-rgb), .07);
+$primary-sub-highlight: rgba(var(--bs-link-color-rgb), .5);
+
+$zindex-max: 2000 !default;
+
+
+$table-danger-bg: color.adjust($danger, $lightness: 42%);