jobdone-shared-files 0.0.1-beta.8 → 0.0.1-beta.80

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

@@ -1,123 +1,123 @@
-$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": darken($gray-900, 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
-        }
-    }
-}
+$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": darken($gray-900, 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/style/scss/Settings/_custom-variables.scss

@@ -1,10 +1,14 @@
-$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: lighten($danger, 42%);
+$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: lighten($danger, 42%);
+
+:root{
+    --backdrop-blur: blur(2px);
+}