ngx-tethys 18.1.0 → 18.2.0-next.0

package/fesm2022/ngx-tethys-watermark.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, Directive, Input, NgModule } from '@angular/core';
+import { inject, ElementRef, DestroyRef, effect, Directive, Input, NgModule } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MutationObserverFactory } from '@angular/cdk/observers';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
+import { ThyThemeStore } from 'ngx-tethys/core';
 import { CommonModule } from '@angular/common';
 import { ThySharedModule } from 'ngx-tethys/shared';
 
@@ -21,7 +22,7 @@ const DEFAULT_WATERMARK_CONFIG = {
 };
 const DEFAULT_CANVAS_CONFIG = {
     degree: 15,
-    color: 'rgba(51, 51, 51, 0.12)',
+    color: ['rgba(51, 51, 51, 0.12)', 'rgb(60, 65, 74)'],
     fontSize: 12,
     textLineHeight: 20,
     gutter: [250, 200]
@@ -32,6 +33,13 @@ const DEFAULT_CANVAS_CONFIG = {
  * @name thyWatermark
  */
 class ThyWatermarkDirective {
+    /**
+     * 水印内容
+     */
+    set thyWatermark(value) {
+        value = value?.replace(/^\"|\"$/g, '');
+        this.content = !!value ? value : '';
+    }
     constructor() {
         this.el = inject(ElementRef);
         /**
@@ -40,13 +48,12 @@ class ThyWatermarkDirective {
         this.thyDisabled = false;
         this.createWatermark$ = new Subject();
         this.destroyRef = inject(DestroyRef);
-    }
-    /**
-     * 水印内容
-     */
-    set thyWatermark(value) {
-        value = value?.replace(/^\"|\"$/g, '');
-        this.content = !!value ? value : '';
+        this.thyThemeStore = inject(ThyThemeStore);
+        effect(() => {
+            if (!this.thyDisabled && this.thyThemeStore.theme()) {
+                this.refreshWatermark();
+            }
+        });
     }
     ngOnInit() {
         if (!this.thyDisabled) {
@@ -90,6 +97,7 @@ class ThyWatermarkDirective {
             ...DEFAULT_CANVAS_CONFIG,
             ...(this.thyCanvasConfig || {})
         };
+        color = this.thyThemeStore.normalizeColor(color);
         const [xGutter, yGutter] = gutter;
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
@@ -181,7 +189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyWatermark]',
                     standalone: true
                 }]
-        }], propDecorators: { thyDisabled: [{
+        }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }], thyWatermark: [{

package/fesm2022/ngx-tethys-watermark.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-watermark.mjs","sources":["../../../src/watermark/config.ts","../../../src/watermark/watermark.directive.ts","../../../src/watermark/watermark.module.ts","../../../src/watermark/ngx-tethys-watermark.ts"],"sourcesContent":["export const DEFAULT_WATERMARK_CONFIG = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    opacity: '0.8',\n    'background-repeat': 'repeat',\n    'pointer-events': 'none',\n    'z-index': 2147483647,\n    'background-image': ''\n};\n\nexport const DEFAULT_CANVAS_CONFIG = {\n    degree: 15,\n    color: 'rgba(51, 51, 51, 0.12)',\n    fontSize: 12,\n    textLineHeight: 20,\n    gutter: [250, 200]\n};\n","import { Directive, Input, ElementRef, OnInit, SimpleChanges, OnChanges, inject, DestroyRef } from '@angular/core';\nimport { Subject, Observable } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DEFAULT_WATERMARK_CONFIG, DEFAULT_CANVAS_CONFIG } from './config';\nimport { MutationObserverFactory } from '@angular/cdk/observers';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nexport interface ThyCanvasConfigType {\n    degree?: number;\n    color?: string;\n    fontSize?: number | string;\n    textLineHeight?: number;\n    gutter?: number[];\n}\n\n/**\n * 水印指令\n * @name thyWatermark\n */\n@Directive({\n    selector: '[thyWatermark]',\n    standalone: true\n})\nexport class ThyWatermarkDirective implements OnInit, OnChanges {\n    private el = inject(ElementRef);\n\n    /**\n     * 是否禁用，默认为 false\n     */\n    @Input({ transform: coerceBooleanProperty })\n    thyDisabled: boolean = false;\n\n    content: string;\n    /**\n     * 水印内容\n     */\n    @Input()\n    set thyWatermark(value: string) {\n        value = value?.replace(/^\\\"|\\\"$/g, '');\n        this.content = !!value ? value : '';\n    }\n\n    /**\n     * canvas样式配置\n     */\n    @Input() thyCanvasConfig: ThyCanvasConfigType;\n\n    private createWatermark$ = new Subject<string>();\n\n    private observer: MutationObserver;\n\n    private canvas: HTMLCanvasElement;\n\n    private wmDiv: HTMLElement;\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    ngOnInit() {\n        if (!this.thyDisabled) {\n            this.createWatermark$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n                this.observeAttributes()\n                    .pipe(takeUntilDestroyed(this.destroyRef))\n                    .subscribe(() => {});\n            });\n            this.createWatermark();\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const { thyWatermark, thyDisabled } = changes;\n        const thyWatermarkChange = () => {\n            if (thyWatermark.firstChange) return;\n            if (thyWatermark.currentValue) {\n                this.refreshWatermark();\n            }\n        };\n        const thyDisabledChange = () => {\n            if (thyDisabled.firstChange) return;\n            thyDisabled?.currentValue ? this.removeWatermark() : this.refreshWatermark();\n        };\n        thyWatermark && thyWatermarkChange();\n        thyDisabled && thyDisabledChange();\n    }\n\n    private refreshWatermark() {\n        this.removeWatermark();\n        this.createWatermark();\n    }\n\n    private removeWatermark() {\n        if (this.wmDiv) {\n            this.wmDiv.remove();\n            this.wmDiv = null;\n        }\n    }\n\n    createCanvas() {\n        let { gutter, fontSize, color, degree, textLineHeight } = {\n            ...DEFAULT_CANVAS_CONFIG,\n            ...(this.thyCanvasConfig || {})\n        };\n\n        const [xGutter, yGutter] = gutter;\n        const canvas = document.createElement('canvas');\n        const ctx = canvas.getContext('2d');\n\n        const getFakeSize = () => {\n            const fakeBox = document.createElement('div');\n            const fakeBoxStyle = {\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                display: 'inline-block',\n                'font-size': `${parseFloat('' + fontSize)}px`,\n                'word-wrap': 'break-word',\n                'font-family': 'inherit',\n                'white-space': 'pre-line'\n            };\n            const styleStr = Object.keys(fakeBoxStyle).reduce((pre, next) => ((pre += `${next}:${fakeBoxStyle[next]};`), pre), '');\n            fakeBox.setAttribute('style', styleStr);\n\n            fakeBox.innerHTML = this.content.replace(/(\\\\n)/gm, '</br>');\n            document.querySelector('body').insertBefore(fakeBox, document.querySelector('body').firstChild);\n            const { width, height } = fakeBox.getBoundingClientRect();\n            fakeBox.remove();\n            return { width, height };\n        };\n        const { width: fakeBoxWidth, height: fakeBoxHeight } = getFakeSize();\n\n        const angle = (degree * Math.PI) / 180;\n        const contentArr = this.content.split('\\\\n');\n        const canvasHeight = Math.sin(angle) * fakeBoxWidth + fakeBoxHeight;\n\n        let start = Math.ceil(Math.sin(angle) * fakeBoxWidth * Math.sin(angle));\n        const canvasWidth = start + fakeBoxWidth;\n        canvas.setAttribute('width', '' + (canvasWidth + xGutter));\n        canvas.setAttribute('height', '' + (canvasHeight + yGutter));\n\n        ctx.font = `${parseFloat('' + fontSize)}px microsoft yahei`;\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'top';\n        ctx.fillStyle = color;\n        ctx.rotate(0 - (degree * Math.PI) / 180);\n        contentArr.map((k, i) => {\n            ctx.fillText(k, -start + Math.ceil(canvasWidth / 2), Math.sin(angle) * canvasWidth + textLineHeight * i);\n            start += Math.sin(angle) * textLineHeight;\n        });\n        this.canvas = canvas;\n        return canvas;\n    }\n\n    private createWatermark(isRefresh = true) {\n        const watermarkDiv = this.wmDiv || document.createElement('div');\n\n        const background = !isRefresh ? this.canvas.toDataURL() : this.createCanvas().toDataURL();\n        const watermarkStyle = {\n            ...DEFAULT_WATERMARK_CONFIG,\n            'background-image': `url(${background})`\n        };\n\n        const styleStr = Object.keys(watermarkStyle).reduce((pre, next) => ((pre += `${next}:${watermarkStyle[next]};`), pre), '');\n        watermarkDiv.setAttribute('style', styleStr);\n\n        if (!this.wmDiv) {\n            const parentNode = this.el.nativeElement;\n            watermarkDiv.classList.add(`_vm`);\n            this.wmDiv = watermarkDiv;\n            parentNode.insertBefore(watermarkDiv, parentNode.firstChild);\n        }\n        this.createWatermark$.next('');\n    }\n\n    private observeAttributes() {\n        this.observer?.disconnect();\n        return new Observable(observe => {\n            const stream = new Subject<MutationRecord[]>();\n            this.observer = new MutationObserverFactory().create(mutations => stream.next(mutations));\n            if (this.observer) {\n                this.observer.observe(this.wmDiv, {\n                    attributes: true\n                });\n            }\n            stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n                if (this.wmDiv) {\n                    this?.observer?.disconnect();\n                    this.createWatermark(false);\n                }\n            });\n            observe.next(stream);\n            return () => {\n                this.observer?.disconnect();\n            };\n        });\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ThySharedModule } from 'ngx-tethys/shared';\nimport { ThyWatermarkDirective } from './watermark.directive';\n\n@NgModule({\n    imports: [CommonModule, ThySharedModule, ThyWatermarkDirective],\n    exports: [ThyWatermarkDirective],\n    providers: []\n})\nexport class ThyWatermarkModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-tethys-watermark.mjs","sources":["../../../src/watermark/config.ts","../../../src/watermark/watermark.directive.ts","../../../src/watermark/watermark.module.ts","../../../src/watermark/ngx-tethys-watermark.ts"],"sourcesContent":["export const DEFAULT_WATERMARK_CONFIG = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    opacity: '0.8',\n    'background-repeat': 'repeat',\n    'pointer-events': 'none',\n    'z-index': 2147483647,\n    'background-image': ''\n};\n\nexport const DEFAULT_CANVAS_CONFIG = {\n    degree: 15,\n    color: ['rgba(51, 51, 51, 0.12)', 'rgb(60, 65, 74)'],\n    fontSize: 12,\n    textLineHeight: 20,\n    gutter: [250, 200]\n};\n","import { Directive, Input, ElementRef, OnInit, SimpleChanges, OnChanges, inject, DestroyRef, effect } from '@angular/core';\nimport { Subject, Observable } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DEFAULT_WATERMARK_CONFIG, DEFAULT_CANVAS_CONFIG } from './config';\nimport { MutationObserverFactory } from '@angular/cdk/observers';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\nimport { ThyThemeStore } from 'ngx-tethys/core';\n\n/**\n * @public\n * 水印样式配置\n */\nexport interface ThyCanvasConfigType {\n    /**\n     * 偏移角度\n     */\n    degree?: number;\n    /**\n     * 字体颜色。如果传的是数组，第一个为默认主题的字体颜色，第二个为黑暗主题的字体颜色\n     */\n    color?: string | string[];\n    /**\n     * 字体大小\n     */\n    fontSize?: number | string;\n    /**\n     * 文本行高\n     */\n    textLineHeight?: number;\n    /**\n     * 横纵间距\n     */\n    gutter?: number[];\n}\n\n/**\n * 水印指令\n * @name thyWatermark\n */\n@Directive({\n    selector: '[thyWatermark]',\n    standalone: true\n})\nexport class ThyWatermarkDirective implements OnInit, OnChanges {\n    private el = inject(ElementRef);\n\n    /**\n     * 是否禁用，默认为 false\n     */\n    @Input({ transform: coerceBooleanProperty })\n    thyDisabled: boolean = false;\n\n    content: string;\n    /**\n     * 水印内容\n     */\n    @Input()\n    set thyWatermark(value: string) {\n        value = value?.replace(/^\\\"|\\\"$/g, '');\n        this.content = !!value ? value : '';\n    }\n\n    /**\n     * 水印样式配置\n     */\n    @Input() thyCanvasConfig: ThyCanvasConfigType;\n\n    private createWatermark$ = new Subject<string>();\n\n    private observer: MutationObserver;\n\n    private canvas: HTMLCanvasElement;\n\n    private wmDiv: HTMLElement;\n\n    private readonly destroyRef = inject(DestroyRef);\n\n    private thyThemeStore = inject(ThyThemeStore);\n\n    constructor() {\n        effect(() => {\n            if (!this.thyDisabled && this.thyThemeStore.theme()) {\n                this.refreshWatermark();\n            }\n        });\n    }\n\n    ngOnInit() {\n        if (!this.thyDisabled) {\n            this.createWatermark$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n                this.observeAttributes()\n                    .pipe(takeUntilDestroyed(this.destroyRef))\n                    .subscribe(() => {});\n            });\n\n            this.createWatermark();\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        const { thyWatermark, thyDisabled } = changes;\n        const thyWatermarkChange = () => {\n            if (thyWatermark.firstChange) return;\n            if (thyWatermark.currentValue) {\n                this.refreshWatermark();\n            }\n        };\n        const thyDisabledChange = () => {\n            if (thyDisabled.firstChange) return;\n            thyDisabled?.currentValue ? this.removeWatermark() : this.refreshWatermark();\n        };\n        thyWatermark && thyWatermarkChange();\n        thyDisabled && thyDisabledChange();\n    }\n\n    private refreshWatermark() {\n        this.removeWatermark();\n        this.createWatermark();\n    }\n\n    private removeWatermark() {\n        if (this.wmDiv) {\n            this.wmDiv.remove();\n            this.wmDiv = null;\n        }\n    }\n\n    createCanvas() {\n        let { gutter, fontSize, color, degree, textLineHeight } = {\n            ...DEFAULT_CANVAS_CONFIG,\n            ...(this.thyCanvasConfig || {})\n        };\n        color = this.thyThemeStore.normalizeColor(color);\n\n        const [xGutter, yGutter] = gutter;\n        const canvas = document.createElement('canvas');\n        const ctx = canvas.getContext('2d');\n\n        const getFakeSize = () => {\n            const fakeBox = document.createElement('div');\n            const fakeBoxStyle = {\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                display: 'inline-block',\n                'font-size': `${parseFloat('' + fontSize)}px`,\n                'word-wrap': 'break-word',\n                'font-family': 'inherit',\n                'white-space': 'pre-line'\n            };\n            const styleStr = Object.keys(fakeBoxStyle).reduce((pre, next) => ((pre += `${next}:${fakeBoxStyle[next]};`), pre), '');\n            fakeBox.setAttribute('style', styleStr);\n\n            fakeBox.innerHTML = this.content.replace(/(\\\\n)/gm, '</br>');\n            document.querySelector('body').insertBefore(fakeBox, document.querySelector('body').firstChild);\n            const { width, height } = fakeBox.getBoundingClientRect();\n            fakeBox.remove();\n            return { width, height };\n        };\n        const { width: fakeBoxWidth, height: fakeBoxHeight } = getFakeSize();\n\n        const angle = (degree * Math.PI) / 180;\n        const contentArr = this.content.split('\\\\n');\n        const canvasHeight = Math.sin(angle) * fakeBoxWidth + fakeBoxHeight;\n\n        let start = Math.ceil(Math.sin(angle) * fakeBoxWidth * Math.sin(angle));\n        const canvasWidth = start + fakeBoxWidth;\n        canvas.setAttribute('width', '' + (canvasWidth + xGutter));\n        canvas.setAttribute('height', '' + (canvasHeight + yGutter));\n\n        ctx.font = `${parseFloat('' + fontSize)}px microsoft yahei`;\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'top';\n        ctx.fillStyle = color;\n        ctx.rotate(0 - (degree * Math.PI) / 180);\n        contentArr.map((k, i) => {\n            ctx.fillText(k, -start + Math.ceil(canvasWidth / 2), Math.sin(angle) * canvasWidth + textLineHeight * i);\n            start += Math.sin(angle) * textLineHeight;\n        });\n        this.canvas = canvas;\n        return canvas;\n    }\n\n    private createWatermark(isRefresh = true) {\n        const watermarkDiv = this.wmDiv || document.createElement('div');\n\n        const background = !isRefresh ? this.canvas.toDataURL() : this.createCanvas().toDataURL();\n        const watermarkStyle = {\n            ...DEFAULT_WATERMARK_CONFIG,\n            'background-image': `url(${background})`\n        };\n\n        const styleStr = Object.keys(watermarkStyle).reduce((pre, next) => ((pre += `${next}:${watermarkStyle[next]};`), pre), '');\n        watermarkDiv.setAttribute('style', styleStr);\n\n        if (!this.wmDiv) {\n            const parentNode = this.el.nativeElement;\n            watermarkDiv.classList.add(`_vm`);\n            this.wmDiv = watermarkDiv;\n            parentNode.insertBefore(watermarkDiv, parentNode.firstChild);\n        }\n        this.createWatermark$.next('');\n    }\n\n    private observeAttributes() {\n        this.observer?.disconnect();\n        return new Observable(observe => {\n            const stream = new Subject<MutationRecord[]>();\n            this.observer = new MutationObserverFactory().create(mutations => stream.next(mutations));\n            if (this.observer) {\n                this.observer.observe(this.wmDiv, {\n                    attributes: true\n                });\n            }\n            stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n                if (this.wmDiv) {\n                    this?.observer?.disconnect();\n                    this.createWatermark(false);\n                }\n            });\n            observe.next(stream);\n            return () => {\n                this.observer?.disconnect();\n            };\n        });\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ThySharedModule } from 'ngx-tethys/shared';\nimport { ThyWatermarkDirective } from './watermark.directive';\n\n@NgModule({\n    imports: [CommonModule, ThySharedModule, ThyWatermarkDirective],\n    exports: [ThyWatermarkDirective],\n    providers: []\n})\nexport class ThyWatermarkModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-tethys.mjs

@@ -1,6 +1,6 @@
 import { Version } from '@angular/core';
 
-const VERSION = new Version('18.1.0');
+const VERSION = new Version('18.2.0-next.0');
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngx-tethys.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys.mjs","sources":["../../../src/version.ts","../../../src/ngx-tethys.ts"],"sourcesContent":["import { Version } from '@angular/core';\n\nexport const VERSION = new Version('18.1.0');\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;MAEa,OAAO,GAAG,IAAI,OAAO,CAAC,QAAQ;;ACF3C;;AAEG;;;;"}
+{"version":3,"file":"ngx-tethys.mjs","sources":["../../../src/version.ts","../../../src/ngx-tethys.ts"],"sourcesContent":["import { Version } from '@angular/core';\n\nexport const VERSION = new Version('18.2.0-next.0');\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;MAEa,OAAO,GAAG,IAAI,OAAO,CAAC,eAAe;;ACFlD;;AAEG;;;;"}

package/form/styles/form-check.scss

@@ -89,7 +89,7 @@ input[type='checkbox'] {
     }
 
     &:disabled {
-        background-color: rgba($color: variables.$black, $alpha: 0.03);
+        background-color: variables.$checkbox-disabled-bg-color;
         cursor: variables.$disabled-cursor;
     }
 }

package/form/styles/forms.scss

@@ -34,7 +34,6 @@
         border-radius: 0;
     }
 
-    // @include box-shadow($input-box-shadow);
     @include transition.transition(bootstrap-variables.$input-transition);
 
     // Unstyle the caret on `<select>`s in IE10+.
@@ -244,9 +243,9 @@
 
     // Avoid using mixin so we can pass custom focus shadow properly
     @if variables.$enable-shadows {
-        box-shadow: variables.$input-box-shadow, bootstrap-variables.$input-focus-box-shadow;
+        box-shadow: variables.$box-shadow-none, variables.$box-shadow-none;
     } @else {
-        box-shadow: bootstrap-variables.$input-focus-box-shadow;
+        box-shadow: variables.$box-shadow-none;
     }
 }
 

package/form/styles/mixin.scss

@@ -23,9 +23,9 @@
         outline: 0;
         // Avoid using mixin so we can pass custom focus shadow properly
         @if variables.$enable-shadows {
-            box-shadow: variables.$input-box-shadow, bootstrap-variables.$input-focus-box-shadow;
+            box-shadow: variables.$box-shadow-none, variables.$box-shadow-none;
         } @else {
-            box-shadow: bootstrap-variables.$input-focus-box-shadow;
+            box-shadow: variables.$box-shadow-none;
         }
     }
     &:not([disabled]):not(.disabled):not(.is-invalid) {
@@ -48,7 +48,6 @@
         display: none;
         width: 100%;
         margin-top: bootstrap-variables.$form-feedback-margin-top;
-        // font-size: $form-feedback-font-size;
         color: $color;
     }
 
@@ -140,7 +139,9 @@
 
             &:focus {
                 ~ .custom-control-label::before {
-                    box-shadow: 0 0 0 1px bootstrap-variables.$body-bg, 0 0 0 bootstrap-variables.$input-focus-width rgba($color, 0.25);
+                    box-shadow:
+                        0 0 0 1px bootstrap-variables.$body-bg,
+                        0 0 0 bootstrap-variables.$input-focus-width rgba($color, 0.25);
                 }
             }
         }
@@ -181,7 +182,7 @@
 }
 
 @mixin set-select-arrow() {
-    content: '\e6b8'; //"\f078";
+    content: '\e6b8';
     font: normal normal normal 14px/1 wtf;
     position: absolute;
     right: 12px;

package/guider/styles/guider-tip.scss

@@ -35,6 +35,7 @@
         flex-direction: column;
         display: flex;
         font-size: 14px;
+        background-color: variables.$bg-panel;
         color: variables.$gray-700;
         letter-spacing: 0;
         line-height: 26px;
@@ -71,7 +72,7 @@
                     box-sizing: border-box;
                     &.active {
                         border: 2px solid variables.$primary;
-                        background-color: variables.$white;
+                        background-color: variables.$bg-default;
                         width: 7px;
                         height: 7px;
                         margin: 0 4px;

package/icon/examples/all/all.component.scss

@@ -1,3 +1,5 @@
+@use 'variables.scss' as variables2;
+
 :host {
     .thy-icon {
         margin-right: 10px;
@@ -25,7 +27,7 @@
         &:hover {
             cursor: pointer;
             border-radius: 4px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
         }
 
         .thy-icon {

package/image/styles/image.scss

@@ -20,7 +20,7 @@ $image-preview-prefix-cls: 'thy-image-preview';
     .#{$image-preview-prefix-cls} {
         pointer-events: none;
         height: 100%;
-        color: variables.$white;
+        color: variables.$image-preview-text-color;
         &-img-wrapper {
             position: absolute;
             top: 0;
@@ -54,7 +54,7 @@ $image-preview-prefix-cls: 'thy-image-preview';
             pointer-events: all;
             bottom: bootstrapVariables.$spacer * 1.25;
             border-radius: bootstrapVariables.$spacer * 0.5;
-            background: variables.$gray-800;
+            background: variables.$image-preview-bg-color;
             left: 50%;
             transform: translateX(-50%);
             &-text {
@@ -71,7 +71,11 @@ $image-preview-prefix-cls: 'thy-image-preview';
         .thy-action {
             pointer-events: all;
             cursor: variables.$hand-cursor;
-            @include basic.action-variant(variables.$white, variables.$white, rgba(variables.$white, 0.2));
+            @include basic.action-variant(
+                variables.$image-preview-action-icon-color,
+                variables.$image-preview-action-icon-color,
+                variables.$image-preview-action-bg-color
+            );
         }
 
         .#{$image-preview-prefix-cls}-exit-fullscreen {
@@ -83,7 +87,7 @@ $image-preview-prefix-cls: 'thy-image-preview';
 
         &-switch-left,
         &-switch-right {
-            color: variables.$gray-500;
+            color: variables.$image-preview-switch-icon-color;
             position: fixed;
             top: 50%;
             z-index: 1;
@@ -93,14 +97,14 @@ $image-preview-prefix-cls: 'thy-image-preview';
             width: bootstrapVariables.$spacer * 2.5;
             height: bootstrapVariables.$spacer * 2.5;
             margin-top: -22px;
-            background: variables.$gray-700;
+            background: variables.$image-preview-switch-bg-color;
             border-radius: 50%;
             cursor: variables.$hand-cursor;
             pointer-events: auto;
             transition: all 0.3s;
             &:hover {
-                color: variables.$gray-700;
-                background: variables.$gray-500;
+                color: variables.$image-preview-switch-icon-hover-color;
+                background: variables.$image-preview-switch-hover-bg-color;
             }
 
             &-disabled {
@@ -109,8 +113,8 @@ $image-preview-prefix-cls: 'thy-image-preview';
                     cursor: variables.$disabled-cursor;
                 }
                 &:hover {
-                    color: variables.$gray-500;
-                    background: variables.$gray-700;
+                    color: variables.$image-preview-switch-icon-color;
+                    background: variables.$image-preview-switch-bg-color;
                 }
             }
         }
@@ -135,7 +139,7 @@ $image-preview-prefix-cls: 'thy-image-preview';
         top: 0;
         width: 100%;
         z-index: 1;
-        background: variables.$gray-800;
+        background: variables.$image-preview-bg-color;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -171,7 +175,7 @@ $image-preview-prefix-cls: 'thy-image-preview';
 }
 
 .#{$image-preview-prefix-cls}-backdrop {
-    background: rgba(variables.$gray-800, 0.95);
+    background: variables.$image-preview-backdrop-bg-color;
 }
 
 .thy-image {

package/input/styles/input-group.scss

@@ -70,7 +70,7 @@
 
         &:not(.disabled) {
             .input-group-suffix {
-                background-color: variables.$white;
+                background-color: variables.$bg-default;
             }
         }
     }

package/input/styles/input.scss

@@ -36,7 +36,7 @@
         position: absolute;
         top: 1px;
         left: variables.$input-padding-x-fixed;
-        background: variables.$white;
+        background: variables.$bg-default;
         padding: 0 5px;
         font-size: variables.$font-size-sm;
         transition: all 0.3s ease-out 0.1s;
@@ -180,7 +180,7 @@
         position: absolute;
         top: 1px;
         left: 10px;
-        background: variables.$white;
+        background: variables.$bg-default;
         padding: 0 5px;
         font-size: variables.$font-size-sm;
         transition: all 0.3s ease-out 0.1s;

package/layout/examples/sidebar/sidebar.component.scss

@@ -14,6 +14,6 @@
     }
 
     .thy-layout-content {
-        background: variables2.$white; // #e4e9f2;
+        background: variables2.$bg-default;
     }
 }

package/layout/styles/layout.scss

@@ -85,7 +85,7 @@
     border-right: variables.$layout-sidebar-border-right;
     display: flex;
     flex-direction: column;
-    background: variables.$white;
+    background: variables.$bg-default;
 
     &.sidebar-theme-light {
         background: variables.$layout-sidebar-background-light;
@@ -201,9 +201,9 @@
         right: 0;
         transform: translateX(50%);
         color: variables.$gray-600;
-        background-color: variables.$white;
+        background-color: variables.$bg-float;
         border-radius: 50%;
-        box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 10%);
+        box-shadow: variables.$float-btn-box-shadow;
         z-index: variables.$z-index-6;
         &:hover {
             visibility: visible;

package/menu/examples/theme/theme.component.scss

@@ -16,14 +16,6 @@
             .content-title {
                 flex: 1;
             }
-            .title {
-                color: variables2.$gray-700;
-                margin-right: 8px;
-                &.testhub {
-                    font-size: 15px;
-                    color: variables2.$gray-800;
-                }
-            }
         }
     }
 }

package/menu/styles/theme.scss

@@ -68,7 +68,7 @@
                 }
 
                 .thy-menu-item-icon {
-                    color: variables.$menu-theme-dark-color;
+                    color: variables.$menu-theme-dark-icon-color;
                 }
 
                 .thy-menu-item-name {
@@ -87,15 +87,15 @@
                 }
 
                 .thy-menu-group-arrow {
-                    color: variables.$menu-theme-dark-color;
+                    color: variables.$menu-theme-dark-icon-color;
                 }
 
                 .thy-menu-group-title-icon {
-                    color: variables.$menu-theme-dark-color;
+                    color: variables.$menu-theme-dark-icon-color;
                 }
 
                 .thy-menu-group-operation {
-                    color: variables.$menu-theme-dark-color;
+                    color: variables.$menu-theme-dark-icon-color;
                 }
             }
         }

package/message/styles/message.scss

@@ -20,7 +20,7 @@
         align-items: center;
         border: variables.$message-border;
         border-radius: variables.$message-border-radius-width;
-        background: variables.$message-bg;
+        background: variables.$bg-panel;
         box-shadow: variables.$message-box-shadow;
 
         &-icon {

package/nav/examples/basic/basic.component.scss

@@ -2,5 +2,5 @@
 
 :host {
     display: block;
-    background: variables2.$white;
+    background: variables2.$bg-default;
 }

package/nav/examples/extra/extra.component.scss

@@ -2,6 +2,6 @@
 
 :host {
     .thy-nav {
-        background: variables2.$white;
+        background: variables2.$bg-default;
     }
 }

package/nav/examples/fill/fill.component.scss

@@ -2,6 +2,6 @@
 
 :host {
     .thy-nav {
-        background: variables2.$white;
+        background: variables2.$bg-default;
     }
 }

package/nav/examples/lite/lite.component.scss

@@ -2,5 +2,5 @@
 
 :host {
     display: block;
-    background: variables2.$white;
+    background: variables2.$bg-default;
 }

package/nav/examples/pills/pills.component.scss

@@ -2,6 +2,6 @@
 
 :host {
     display: block;
-    background: variables2.$white;
+    background: variables2.$bg-default;
     padding: 8px;
 }

package/nav/examples/responsive/responsive.component.scss

@@ -2,6 +2,6 @@
 
 :host {
     .thy-nav {
-        background: variables2.$white;
+        background: variables2.$bg-default;
     }
 }

package/nav/examples/size/size.component.scss

@@ -3,7 +3,7 @@
 .bg-example {
     padding: 12px;
     .thy-nav {
-        background: variables2.$white;
+        background: variables2.$bg-default;
         margin-bottom: 12px;
 
         &.thy-nav-pills {

package/nav/examples/tabs/tabs.component.scss

@@ -2,6 +2,6 @@
 
 :host {
     display: block;
-    background: variables2.$white;
+    background: variables2.$bg-default;
     padding-bottom: 12px;
 }

package/nav/examples/type/type.component.scss

@@ -2,7 +2,7 @@
 
 :host {
     .thy-nav {
-        background: variables2.$white;
+        background: variables2.$bg-default;
         &:not(:last-child) {
             margin-bottom: 20px;
         }

package/nav/examples/vertical/vertical.component.scss

@@ -2,6 +2,6 @@
 
 :host {
     .thy-nav {
-        background: variables2.$white;
+        background: variables2.$bg-default;
     }
 }

package/notify/styles/notify.scss

@@ -1,5 +1,5 @@
-@use "../../styles/variables";
-@use "mixin";
+@use '../../styles/variables';
+@use 'mixin';
 
 .thy-notify-container > div {
     position: fixed;
@@ -14,8 +14,8 @@
         position: relative;
         display: flex;
         border-radius: variables.$notify-border-radius-width;
-        background: variables.$notify-bg;
-        box-shadow: variables.$notify-box-shadow;
+        background: variables.$bg-panel;
+        box-shadow: variables.$box-shadow;
 
         &-icon-container {
             position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tethys",
-  "version": "18.1.0",
+  "version": "18.2.0-next.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/atinc/ngx-tethys.git"

package/pagination/styles/pagination.scss

@@ -84,7 +84,7 @@
             border: variables.$pagination-border-width solid variables.$pagination-border-color;
             @include border-radius.border-radius(variables.$border-radius);
             color: variables.$pagination-jumper-input-color;
-            background: variables.$white;
+            background: variables.$bg-default;
             width: calc(#{variables.$font-size-base} * 3);
             text-align: center;
             margin: 0 6px;
@@ -120,7 +120,7 @@
 
     &:focus {
         outline: bootstrap-variables.$pagination-focus-outline;
-        box-shadow: variables.$pagination-focus-box-shadow;
+        box-shadow: variables.$box-shadow-none;
     }
 }
 

package/popover/styles.scss

@@ -1,5 +1,5 @@
-@use "../styles/variables.scss";
-@use "../styles/mixins/shadow.scss";
+@use '../styles/variables.scss';
+@use '../styles/mixins/shadow.scss';
 
 $offset: 4px;
 .thy-popover-panel {
@@ -29,7 +29,7 @@ $offset: 4px;
 }
 
 .thy-popover-container {
-    background: variables.$white;
+    background: variables.$bg-panel;
     width: 100%;
     border-radius: variables.$border-radius;
     @include shadow.section-box-shadow();

package/property/styles/properties.scss

@@ -79,7 +79,7 @@
                         }
 
                         &:before {
-                            background: variables.$white;
+                            background: variables.$bg-default;
                         }
 
                         &:not(.thy-property-item-content-editing):after {

package/resizable/examples/line/line.component.scss

@@ -1,9 +1,11 @@
+@use 'variables.scss' as variables2;
+
 .container {
     display: flex;
     flex-direction: row;
     height: 200px;
     .left {
-        border-right: 1px solid #eee;
+        border-right: 1px solid variables2.$gray-200;
     }
 
     .right {