@netless/telebox-insider 1.0.0-alpha.20 → 1.0.0-alpha.21

package/src/TeleBoxManager/style.scss

@@ -1,4 +1,5 @@
 @import "../scss/variables.scss";
+@import "../scss/mixins.scss";
 
 .#{$namespace}-manager-container {
     position: relative;
@@ -8,7 +9,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: $color-container-background;
+    @include v(
+        background,
+        manager-container-background,
+        $manager-container-background
+    );
 
     &.is-maximized,
     &.is-minimized {
@@ -21,19 +26,31 @@
 .#{$namespace}-manager-stage {
     position: relative;
     overflow: hidden;
-    background: $color-stage-background;
-    box-shadow: $color-stage-shadow;
+    @include v(background, manager-stage-background, $manager-stage-background);
+    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     &.#{$namespace}-manager-container {
-        background: $color-container-background-dark;
+        @include v(
+            background,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
 
         & > .#{$namespace}-manager-stage {
-            background: $color-stage-background-dark;
-            box-shadow: $color-stage-shadow-dark;
+            @include v(
+                background,
+                manager-stage-background-dark,
+                $manager-stage-background-dark
+            );
+            @include v(
+                box-shadow,
+                manager-stage-shadow-dark,
+                $manager-stage-shadow-dark
+            );
         }
     }
 }

package/src/TeleBoxManager/typings.ts

@@ -52,8 +52,12 @@ export type TeleBoxManagerCreateConfig = Pick<
     | "content"
     | "stage"
     | "footer"
+    | "styles"
+    | "bodyStyle"
+    | "stageStyle"
     | "id"
     | "focus"
+    | "enableShadowDOM"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -8,10 +8,12 @@
     height: 26px;
     display: flex;
     align-items: center;
-    background: #fff;
     user-select: none;
-    border-bottom: 1px solid #eeeef7;
     touch-action: manipulation;
+
+    @include v(color, titlebar-color, $titlebar-color);
+    @include v(background-color, titlebar-background, $titlebar-background);
+    @include v(border-bottom, titlebar-border-bottom, $titlebar-border-bottom);
 }
 
 .#{$namespace}-title-area {
@@ -26,6 +28,7 @@
 
 .#{$namespace}-title {
     @include no-user-select;
+    @include v(color, titlebar-color, $titlebar-color);
 
     overflow: hidden;
     margin: 0;
@@ -36,7 +39,6 @@
     white-space: nowrap;
     word-break: keep-all;
     text-overflow: ellipsis;
-    color: #191919;
 }
 
 .#{$namespace}-drag-area {
@@ -85,31 +87,86 @@
 }
 
 .#{$namespace}-titlebar-icon-minimize {
-    background: center / cover no-repeat url("./icons/minimize.svg");
+    background: center / cover no-repeat;
+    @include v(
+        background-image,
+        titlebar-icon-minimize,
+        url("./icons/minimize.svg")
+    );
 }
 
 .#{$namespace}-titlebar-icon-maximize {
-    background: center / cover no-repeat url("./icons/maximize.svg");
+    background: center / cover no-repeat;
+    @include v(
+        background-image,
+        titlebar-icon-maximize,
+        url("./icons/maximize.svg")
+    );
 
     &.is-active {
-        background-image: url("./icons/maximize-active.svg");
+        @include v(
+            background-image,
+            titlebar-icon-maximize-active,
+            url("./icons/maximize-active.svg")
+        );
     }
 }
 
 .#{$namespace}-titlebar-icon-close {
-    background: center / cover no-repeat url("./icons/close.svg");
+    background: center / cover no-repeat;
+    @include v(background-image, titlebar-icon-close, url("./icons/close.svg"));
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     .#{$namespace}-title {
-        color: #e9e9e9;
+        @include v(color, titlebar-color-dark, $titlebar-color-dark);
     }
 
     .#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
+        @include v(color, titlebar-color-dark, $titlebar-color-dark);
+        @include v(
+            background-color,
+            titlebar-background-dark,
+            $titlebar-background-dark
+        );
+        @include v(
+            border-bottom,
+            titlebar-border-bottom-dark,
+            $titlebar-border-bottom-dark
+        );
+    }
+
+    .#{$namespace}-titlebar-icon-minimize {
+        @include v(
+            background-image,
+            titlebar-icon-minimize-dark,
+            url("./icons/minimize.svg")
+        );
+    }
+
+    .#{$namespace}-titlebar-icon-maximize {
+        @include v(
+            background-image,
+            titlebar-icon-maximize-dark,
+            url("./icons/maximize.svg")
+        );
+
+        &.is-active {
+            @include v(
+                background-image,
+                titlebar-icon-maximize-active-dark,
+                url("./icons/maximize-active.svg")
+            );
+        }
+    }
+
+    .#{$namespace}-titlebar-icon-close {
+        @include v(
+            background-image,
+            titlebar-icon-close-dark,
+            url("./icons/close.svg")
+        );
     }
 }

package/src/scss/mixins.scss

@@ -5,3 +5,8 @@
     // iOS Safari
     -webkit-user-select: none;
 }
+
+@mixin v($property, $varName, $val) {
+    #{$property}: $val;
+    #{$property}: var(--tele-#{$varName}, $val);
+}

package/src/scss/variables.scss

@@ -5,10 +5,44 @@ $max-titlebar-z-index: $base-z-index + 5000;
 $stage-z-index: $max-titlebar-z-index + 10;
 $collector-z-index: $stage-z-index + 10;
 
-$color-container-background: #f9f9f9;
-$color-stage-background: #fff;
-$color-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+$manager-container-background: #f9f9f9;
+$manager-container-background-dark: #25282e;
+$manager-stage-background: #fff;
+$manager-stage-background-dark: #272a30;
+$manager-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+$manager-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);
 
-$color-container-background-dark: #25282e;
-$color-stage-background-dark: #272a30;
-$color-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);
+$box-container-background: $manager-container-background;
+$box-container-background-dark: $manager-container-background-dark;
+$box-stage-background: $manager-stage-background;
+$box-stage-background-dark: $manager-stage-background-dark;
+$box-stage-shadow: $manager-stage-shadow;
+$box-stage-shadow-dark: $manager-stage-shadow-dark;
+
+$box-color: #191919;
+$box-color-dark: #e9e9e9;
+$box-border: 1px solid #e3e3ec;
+$box-border-dark: 1px solid #383b42;
+$box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
+$box-shadow-dark: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
+
+$titlebar-color: #191919;
+$titlebar-color-dark: #e9e9e9;
+$titlebar-background: #fff;
+$titlebar-background-dark: #383b42;
+$titlebar-border-bottom: 1px solid #eeeef7;
+$titlebar-border-bottom-dark: none;
+
+$titlebar-tab-color: #7b88a0;
+$titlebar-tab-color-dark: #e9e9e9;
+$titlebar-tab-focus-color: #357bf6;
+$titlebar-tab-focus-color-dark: #357bf6;
+$titlebar-tab-background: transparent;
+$titlebar-tab-background-dark: transparent;
+$titlebar-tab-divider-color: #e5e5f0;
+$titlebar-tab-divider-color-dark: #7b88a0;
+
+$collector-background: #fff;
+$collector-background-dark: #383b42;
+$collector-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
+$collector-shadow-dark: $collector-shadow;