ngx-tethys 18.1.0-next.1 → 18.2.0-next.0

package/styles/bootstrap/utilities/_background.scss

@@ -1,11 +1,29 @@
-@use "../../mixins/background-variant";
-@use "../../variables";
-@use "../functions-variables";
+@use '../../mixins/background-variant';
+@use '../../variables';
+@use '../functions-variables';
 
 // stylelint-disable declaration-no-important
 
-@each $color, $value in functions-variables.$theme-colors {
-    @include background-variant.bg-variant('.bg-#{$color}', $value, true);
+$bg-colors: () !default;
+$bg-colors: map-merge(
+    (
+        '.bg-lighter': variables.$bg-lighter,
+        '.bg-bright': variables.$bg-bright,
+        '.bg-content': variables.$bg-content,
+        '.bg-primary': variables.$bg-primary,
+        '.bg-secondary': variables.$bg-secondary,
+        '.bg-success': variables.$bg-success,
+        '.bg-info': variables.$bg-info,
+        '.bg-warning': variables.$bg-warning,
+        '.bg-danger': variables.$bg-danger,
+        '.bg-light': variables.$bg-light,
+        '.bg-dark': variables.$bg-dark
+    ),
+    $bg-colors
+);
+
+@each $color, $value in $bg-colors {
+    @include background-variant.bg-variant($color, $value, true);
 }
 
 @if variables.$enable-gradients {
@@ -18,6 +36,10 @@
     background-color: variables.$white !important;
 }
 
+.bg-default {
+    background-color: variables.$bg-default !important;
+}
+
 .bg-transparent {
     background-color: transparent !important;
 }

package/styles/bootstrap/utilities/_text.scss

@@ -1,17 +1,15 @@
-@use "sass:map";
-@use "../../mixins/utilities";
-@use "../../variables";
-@use "../functions-variables";
-@use "../mixins/breakpoints";
-@use "../mixins/text-hide";
-@use "../mixins/text-truncate";
-@use "../variables" as bootstrap-variables;
+@use 'sass:map';
+@use '../../mixins/utilities';
+@use '../../variables';
+@use '../functions-variables';
+@use '../mixins/breakpoints';
+@use '../mixins/text-hide';
+@use '../mixins/text-truncate';
+@use '../variables' as bootstrap-variables;
 
 // stylelint-disable declaration-no-important
 
-//
 // Text
-//
 
 .text-monospace {
     font-family: variables.$font-family-monospace !important;
@@ -84,27 +82,27 @@
 }
 
 // Contextual colors
-
-.text-white {
-    color: variables.$white !important;
-}
-
-@each $color, $value in functions-variables.$theme-colors {
-    @include utilities.text-emphasis-variant('.text-#{$color}', $value, true);
-}
-
-.text-body {
-    color: variables.$body-color !important;
-}
-.text-muted {
-    color: bootstrap-variables.$text-muted !important;
-}
-
-.text-black-50 {
-    color: rgba(variables.$black, 0.5) !important;
-}
-.text-white-50 {
-    color: rgba(variables.$white, 0.5) !important;
+$text-colors: () !default;
+$text-colors: map-merge(
+    (
+        '.text-placeholder': variables.$text-placeholder,
+        '.text-body': variables.$text-body,
+        '.text-desc': variables.$text-desc,
+        '.text-muted': variables.$text-muted,
+        '.text-white': variables.$text-white,
+        '.text-primary': variables.$text-primary,
+        '.text-secondary': variables.$text-secondary,
+        '.text-success': variables.$text-success,
+        '.text-info': variables.$text-info,
+        '.text-warning': variables.$text-warning,
+        '.text-danger': variables.$text-danger,
+        '.text-light': variables.$text-light,
+        '.text-dark': variables.$text-dark
+    ),
+    $text-colors
+);
+@each $color, $value in $text-colors {
+    @include utilities.text-emphasis-variant($color, $value, true);
 }
 
 // Misc

package/styles/index.scss

@@ -1,4 +1,5 @@
 @use './basic.scss';
+@forward './theme/index.scss';
 @forward './modules/index.scss';
 @forward './bootstrap/root.scss';
 @forward './bootstrap/grid.scss';
@@ -83,7 +84,7 @@
 @forward '../watermark/styles/watermark.scss';
 @forward '../property/styles/properties.scss';
 @forward '../typography/styles/typography.scss';
-@forward '../carousel/styles/index.scss';
+@forward '../carousel/styles/carousel.scss';
 @forward '../checkbox/styles/checkbox.scss';
 @forward '../color-picker/styles/color-picker.scss';
 @forward '../comment/styles/comment.scss';

package/styles/mixins/background-variant.scss

@@ -1,6 +1,5 @@
-@use "sass:color";
-@use "../mixins/hover";
-@use "../bootstrap/variables";
+@use '../mixins/hover';
+@use '../bootstrap/variables';
 
 // stylelint-disable declaration-no-important
 
@@ -10,13 +9,6 @@
     #{$parent} {
         background-color: $color !important;
     }
-    a#{$parent},
-    button#{$parent} {
-        @include hover.hover-focus() {
-            background-color: color.adjust($color, $lightness: -10%) !important;
-        }
-    }
-    // @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
 }
 
 @mixin bg-gradient-variant($parent, $color) {

package/styles/mixins/utilities.scss

@@ -1,19 +1,10 @@
-@use "sass:color";
-@use "../mixins/hover";
-@use "../bootstrap/variables";
+@use '../mixins/hover';
+@use '../bootstrap/variables';
 
 @mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
     #{$parent} {
         color: $color !important;
     }
-    @if variables.$emphasized-link-hover-darken-percentage != 0 {
-        a#{$parent} {
-            @include hover.hover-focus() {
-                color: color.adjust($color, $lightness: - (variables.$emphasized-link-hover-darken-percentage)) !important;
-            }
-        }
-    }
-    // @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
 }
 
 @mixin absolute-vertical-align-middle($clearLeft) {

package/styles/modules/cdk/drag-drop.scss

@@ -1,5 +1,5 @@
-@use "../../mixins/shadow";
-@use "../../variables";
+@use '../../mixins/shadow';
+@use '../../variables';
 
 // 使用 `cdk` 的 `drag-drop` 时的样式
 // 添加在每个cdkDrag组件上的样式
@@ -55,17 +55,15 @@
 .cdk-drag-placeholder:not(.thy-tree-node) {
     color: transparent !important;
     background: variables.$gray-200 !important;
-    // margin-left: -20px;
-    // padding-left: 20px;
 
     &:hover {
-        box-shadow: none;
+        box-shadow: variables.$box-shadow-none;
     }
 
     * {
         color: transparent !important;
         visibility: hidden;
-        box-shadow: none;
+        box-shadow: variables.$box-shadow-none;
     }
 }
 
@@ -73,8 +71,8 @@
 .thy-sortable-drag,
 .cdk-drag-preview {
     box-sizing: border-box;
-    background: variables.$white !important;
-    @include shadow.item-box-shadow();
+    background: variables.$bg-panel !important;
+    box-shadow: variables.$cdk-drag-preview-box-shadow;
 }
 
 .cdk-drag-animating {

package/styles/modules/close.scss

@@ -55,7 +55,7 @@ button.close {
     @include close.set-close-link-variant(variables.$gray-400, variables.$danger);
     @include close.set-close-link-size(variables.$font-size-base);
     .remove-link-icon {
-        background: variables.$white;
+        background: variables.$bg-default;
         border-radius: 50%;
     }
 }

package/styles/modules/reboot.scss

@@ -306,7 +306,7 @@ table {
 caption {
     padding-top: variables.$table-cell-padding;
     padding-bottom: variables.$table-cell-padding;
-    color: bootstrap-variables.$text-muted;
+    color: variables.$text-muted;
     text-align: left;
     caption-side: bottom;
 }

package/styles/modules/tables.scss

@@ -221,7 +221,7 @@
         &.table-draggable-ignore-item {
             @include hover.hover {
                 cursor: inherit;
-                box-shadow: none;
+                box-shadow: variables.$box-shadow-none;
 
                 td {
                     .table-draggable-icon {

package/styles/modules/utils.scss

@@ -20,23 +20,6 @@
     cursor: variables.$hand-cursor;
 }
 
-// .thy-dot {
-//     display: inline-block;
-//     width: 6px;
-//     height: 6px;
-//     border-radius: 50%;
-// }
-
-// 新增比 light 更亮的2个背景色
-@include background-variant.bg-variant('.bg-lighter', variables.$gray-100);
-@include background-variant.bg-variant('.bg-bright', variables.$gray-80);
-@include background-variant.bg-variant('.bg-content', variables.$layout-content-background);
-
-// text-placeholder #cacaca
-@include utilities.text-emphasis-variant('.text-placeholder', variables.$gray-400);
-@include utilities.text-emphasis-variant('.text-body', variables.$gray-800);
-@include utilities.text-emphasis-variant('.text-desc', variables.$gray-500);
-
 // 保证 wtf 图标和字体对齐
 .wtf {
     vertical-align: -0.045em;

package/styles/theme/dark.scss

@@ -0,0 +1,70 @@
+:root[theme='dark'] {
+    // palette
+    --gray-10: #2a2e34;
+    --gray-70: #32363d;
+    --gray-80: #30353c;
+    --gray-100: #393e46;
+    --gray-200: #3c414a;
+    --gray-300: #464c57;
+    --gray-400: #5b6370;
+    --gray-500: #666e7d;
+    --gray-600: #6f7a8a;
+    --gray-700: #87909e;
+    --gray-800: #bcc4d1;
+
+    // background
+    --bg-color-default: #2a2e34;
+    --bg-color-panel: #30353c;
+    --bg-color-float: #393e46;
+
+    // text
+    --text-color: #bcc4d1;
+
+    // image preview
+    --image-preview-bg-color: #32363d;
+    --image-preview-backdrop-bg-color: #3c414a;
+    --image-preview-text-color: #bcc4de;
+    --image-preview-action-bg-color: rgba(188, 196, 209, 0.1);
+    --image-preview-action-icon-color: #6f7a8a;
+    --image-preview-switch-bg-color: #464c57;
+    --image-preview-switch-hover-bg-color: #5b6370;
+    --image-preview-switch-icon-color: #6f7a8a;
+    --image-preview-switch-icon-hover-color: #87909e;
+
+    // menu dark
+    --menu-theme-dark-text-color: #bcc4d1;
+    --menu-theme-dark-icon-color: #87909e;
+    --menu-theme-dark-divider-color: #3c414a;
+
+    // carousel
+    --carousel-control-bg-color: #32363d4d;
+    --carousel-control-hover-bg-color: #32363d99;
+    --carousel-dot-bg-color: #32363d4d;
+
+    // layout
+    --layout-header-box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.2);
+    --layout-sidebar-light-bg-color: #30353c;
+
+    // table
+    --table-fixed-column-left-box-shadow: 6px 0 6px 0 rgba(0, 0, 0, 0.1);
+    --table-fixed-column-right-box-shadow: -6px 0 6px 0 rgba(0, 0, 0, 0.1);
+
+    // segment
+    --segment-active-bg-color: #464c57;
+
+    // tooltip
+    --tooltip-bg-color: #464c57;
+
+    // calendar
+    --calendar-active-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
+
+    // checkbox
+    --checkbox-disabled-bg-color: #393e46;
+
+    // avatar
+    --avatar-disabled-color: #87909e;
+
+    // float btn
+    --float-btn-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    --float-btn-hover-box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
+}

package/styles/theme/default.scss

@@ -0,0 +1,70 @@
+:root {
+    // palette
+    --gray-10: #fff;
+    --gray-70: #f7f7f7;
+    --gray-80: #fafafa;
+    --gray-100: #f5f5f5;
+    --gray-200: #eee;
+    --gray-300: #ddd;
+    --gray-400: #cacaca;
+    --gray-500: #aaa;
+    --gray-600: #999;
+    --gray-700: #666;
+    --gray-800: #333;
+
+    // background
+    --bg-color-default: #fff;
+    --bg-color-panel: #fff;
+    --bg-color-float: #fff;
+
+    // text
+    --text-color: #333;
+
+    // image preview
+    --image-preview-bg-color: #333;
+    --image-preview-backdrop-bg-color: rgba(51, 51, 51, 0.95);
+    --image-preview-text-color: #fff;
+    --image-preview-action-bg-color: rgba(255, 255, 255, 0.2);
+    --image-preview-action-icon-color: #fff;
+    --image-preview-switch-bg-color: #666;
+    --image-preview-switch-hover-bg-color: #aaa;
+    --image-preview-switch-icon-color: #aaa;
+    --image-preview-switch-icon-hover-color: #666;
+
+    // menu dark
+    --menu-theme-dark-text-color: #ddd;
+    --menu-theme-dark-icon-color: #ddd;
+    --menu-theme-dark-divider-color: #666;
+
+    // carousel
+    --carousel-control-bg-color: #f7f7f74d;
+    --carousel-control-hover-bg-color: #f7f7f799;
+    --carousel-dot-bg-color: #ffffff80;
+
+    // layout
+    --layout-header-box-shadow: 0 4px 8px 0px rgba(0 0 0 / 3%);
+    --layout-sidebar-light-bg-color: #fbfbfb;
+
+    // table
+    --table-fixed-column-left-box-shadow: 6px 0 6px 0 rgba(0, 0, 0, 0.05);
+    --table-fixed-column-right-box-shadow: -6px 0 6px 0 rgba(0, 0, 0, 0.05);
+
+    // segment
+    --segment-active-bg-color: #fff;
+
+    // tooltip
+    --tooltip-bg-color: #000000bf;
+
+    // calendar
+    --calendar-active-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
+
+    // checkbox
+    --checkbox-disabled-bg-color: rgba(0, 0, 0, 0.03);
+
+    // avatar
+    --avatar-disabled-color: #f5f5f5;
+
+    // float btn
+    --float-btn-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    --float-btn-hover-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+}

package/styles/theme/index.scss

@@ -0,0 +1,2 @@
+@use './default.scss';
+@use './dark.scss';