@alicloud/console-base-theme 1.9.9-beta.0 → 1.9.9-beta.2

package/build/cjs/global-style-dark-scrollbar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+// 暗色模式下 cb 的滚动条样式
+var _default = exports.default = (0, _styledComponents.createGlobalStyle)(["body.theme-dark .J_console_base_container{&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:4px;}&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;&:hover{background:rgba(255,255,255,0.3);}}}#);"]);

package/build/cjs/index.js

@@ -5,12 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  mixinTopNavButtonDarkFix: true,
   ThemeStyleLight: true,
   ThemeStyleDark: true,
   GlobalStyleFontFamilyForJa: true,
+  GlobalStyleDarkScrollbar: true,
   toggleBodyClass: true
 };
+Object.defineProperty(exports, "GlobalStyleDarkScrollbar", {
+  enumerable: true,
+  get: function get() {
+    return _globalStyleDarkScrollbar.default;
+  }
+});
 Object.defineProperty(exports, "GlobalStyleFontFamilyForJa", {
   enumerable: true,
   get: function get() {
@@ -29,14 +35,12 @@ Object.defineProperty(exports, "ThemeStyleLight", {
     return _globalStyleThemeLight.default;
   }
 });
-exports.mixinTopNavButtonDarkFix = void 0;
 Object.defineProperty(exports, "toggleBodyClass", {
   enumerable: true,
   get: function get() {
     return _util.toggleBodyClass;
   }
 });
-var _styledComponents = require("styled-components");
 var _var = require("./var");
 Object.keys(_var).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -64,6 +68,5 @@ Object.keys(_mixin).forEach(function (key) {
 var _globalStyleThemeLight = _interopRequireDefault(require("./global-style-theme-light"));
 var _globalStyleThemeDark = _interopRequireDefault(require("./global-style-theme-dark"));
 var _globalStyleFontFamilyForJa = _interopRequireDefault(require("./global-style-font-family-for-ja"));
-var _util = require("./util");
-// 主题黑的时候，在顶栏上的 button 背景色不能是标准的... FIXME 我需要调整颜色的策略 primary-secondary-tertiary 区分 container 和 control
-var mixinTopNavButtonDarkFix = exports.mixinTopNavButtonDarkFix = (0, _styledComponents.css)([".theme-dark &{background-color:rgba(255,255,255,0.08);}"]);
+var _globalStyleDarkScrollbar = _interopRequireDefault(require("./global-style-dark-scrollbar"));
+var _util = require("./util");

package/build/cjs/mixin/button.js

@@ -49,12 +49,12 @@ var mixinButtonMenuStateHover = exports.mixinButtonMenuStateHover = (0, _styledC
 var mixinButtonMenuColorStateActive = exports.mixinButtonMenuColorStateActive = (0, _styledComponents.css)(["color:", ";color:var(--cb-color-button-menu-text-active,", ");"], _var.COLOR.BUTTON_MENU_TEXT_ACTIVE, _var.COLOR.BUTTON_MENU_TEXT_ACTIVE);
 var mixinButtonMenuBgStateActive = exports.mixinButtonMenuBgStateActive = (0, _styledComponents.css)(["background-color:", ";background-color:var(--cb-color-button-menu-bg-active,", ");"], _var.COLOR.BUTTON_MENU_BG_ACTIVE, _var.COLOR.BUTTON_MENU_BG_ACTIVE);
 var mixinButtonMenuBorderStateActive = exports.mixinButtonMenuBorderStateActive = (0, _styledComponents.css)(["border-color:", ";border-color:var(--cb-color-button-menu-border-active,", ");"], _var.COLOR.BUTTON_MENU_BORDER_ACTIVE, _var.COLOR.BUTTON_MENU_BORDER_ACTIVE);
-var mixinButtonMenuStateActive = exports.mixinButtonMenuStateActive = (0, _styledComponents.css)(["", " ", " ", ""], mixinButtonMenuColorStateActive, mixinButtonMenuBgStateActive, mixinButtonMenuBorderStateActive);
+var mixinButtonMenuStateActive = exports.mixinButtonMenuStateActive = (0, _styledComponents.css)(["font-weight:500;", " ", " ", ""], mixinButtonMenuColorStateActive, mixinButtonMenuBgStateActive, mixinButtonMenuBorderStateActive);
 var mixinButtonMenuColorStateDisabled = exports.mixinButtonMenuColorStateDisabled = (0, _styledComponents.css)(["color:", ";color:var(--cb-color-button-menu-text-disabled,", ");"], _var.COLOR.BUTTON_MENU_TEXT_DISABLED, _var.COLOR.BUTTON_MENU_TEXT_DISABLED);
 var mixinButtonMenuBgStateDisabled = exports.mixinButtonMenuBgStateDisabled = (0, _styledComponents.css)(["background-color:", ";background-color:var(--cb-color-button-menu-bg-disabled,", ");"], _var.COLOR.BUTTON_MENU_BG_DISABLED, _var.COLOR.BUTTON_MENU_BG_DISABLED);
 var mixinButtonMenuBorderStateDisabled = exports.mixinButtonMenuBorderStateDisabled = (0, _styledComponents.css)(["border-color:", ";border-color:var(--cb-color-button-menu-border-disabled,", ");"], _var.COLOR.BUTTON_MENU_BORDER_DISABLED, _var.COLOR.BUTTON_MENU_BORDER_DISABLED);
 var mixinButtonMenuStateDisabled = exports.mixinButtonMenuStateDisabled = (0, _styledComponents.css)(["", " ", " ", ""], mixinButtonMenuColorStateDisabled, mixinButtonMenuBgStateDisabled, mixinButtonMenuBorderStateDisabled);
-var mixinButtonMenu = exports.mixinButtonMenu = (0, _styledComponents.css)(["", " &:link,&:visited{", "}&:hover{", "}&:active{font-weight:500;", "}&:disabled{", "}"], mixinButtonMenuStateNormal, mixinButtonMenuColorStateNormal, mixinButtonMenuStateHover, mixinButtonMenuStateActive, mixinButtonMenuStateDisabled);
+var mixinButtonMenu = exports.mixinButtonMenu = (0, _styledComponents.css)(["", " &:link,&:visited{", "}&:hover{", "}&:active{", "}&:disabled{", "}"], mixinButtonMenuStateNormal, mixinButtonMenuColorStateNormal, mixinButtonMenuStateHover, mixinButtonMenuStateActive, mixinButtonMenuStateDisabled);
 var mixinButtonPrimaryColorStateNormal = exports.mixinButtonPrimaryColorStateNormal = (0, _styledComponents.css)(["color:", ";color:var(--cb-color-button-primary-text,", ");"], _var.COLOR.BUTTON_PRIMARY_TEXT, _var.COLOR.BUTTON_PRIMARY_TEXT);
 var mixinButtonPrimaryBgStateNormal = exports.mixinButtonPrimaryBgStateNormal = (0, _styledComponents.css)(["background-color:", ";background-color:var(--cb-color-button-primary-bg,", ");"], _var.COLOR.BUTTON_PRIMARY_BG, _var.COLOR.BUTTON_PRIMARY_BG);
 var mixinButtonPrimaryBorderStateNormal = exports.mixinButtonPrimaryBorderStateNormal = (0, _styledComponents.css)(["border-color:", ";border-color:var(--cb-color-button-primary-border,", ");"], _var.COLOR.BUTTON_PRIMARY_BORDER, _var.COLOR.BUTTON_PRIMARY_BORDER);

package/build/esm/global-style-dark-scrollbar/index.js

@@ -0,0 +1,4 @@
+import { createGlobalStyle } from 'styled-components';
+
+// 暗色模式下 cb 的滚动条样式
+export default createGlobalStyle(["body.theme-dark .J_console_base_container{&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:4px;}&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;&:hover{background:rgba(255,255,255,0.3);}}}#);"]);

package/build/esm/index.js

@@ -1,10 +1,7 @@
-import { css } from 'styled-components';
 export * from './var';
 export * from './mixin';
 export { default as ThemeStyleLight } from './global-style-theme-light';
 export { default as ThemeStyleDark } from './global-style-theme-dark';
 export { default as GlobalStyleFontFamilyForJa } from './global-style-font-family-for-ja';
-export { toggleBodyClass } from './util';
-
-// 主题黑的时候，在顶栏上的 button 背景色不能是标准的... FIXME 我需要调整颜色的策略 primary-secondary-tertiary 区分 container 和 control
-export var mixinTopNavButtonDarkFix = css([".theme-dark &{background-color:rgba(255,255,255,0.08);}"]);
+export { default as GlobalStyleDarkScrollbar } from './global-style-dark-scrollbar';
+export { toggleBodyClass } from './util';

package/build/esm/mixin/button.js

@@ -41,12 +41,12 @@ export var mixinButtonMenuStateHover = css(["", " ", " ", ""], mixinButtonMenuCo
 export var mixinButtonMenuColorStateActive = css(["color:", ";color:var(--cb-color-button-menu-text-active,", ");"], COLOR.BUTTON_MENU_TEXT_ACTIVE, COLOR.BUTTON_MENU_TEXT_ACTIVE);
 export var mixinButtonMenuBgStateActive = css(["background-color:", ";background-color:var(--cb-color-button-menu-bg-active,", ");"], COLOR.BUTTON_MENU_BG_ACTIVE, COLOR.BUTTON_MENU_BG_ACTIVE);
 export var mixinButtonMenuBorderStateActive = css(["border-color:", ";border-color:var(--cb-color-button-menu-border-active,", ");"], COLOR.BUTTON_MENU_BORDER_ACTIVE, COLOR.BUTTON_MENU_BORDER_ACTIVE);
-export var mixinButtonMenuStateActive = css(["", " ", " ", ""], mixinButtonMenuColorStateActive, mixinButtonMenuBgStateActive, mixinButtonMenuBorderStateActive);
+export var mixinButtonMenuStateActive = css(["font-weight:500;", " ", " ", ""], mixinButtonMenuColorStateActive, mixinButtonMenuBgStateActive, mixinButtonMenuBorderStateActive);
 export var mixinButtonMenuColorStateDisabled = css(["color:", ";color:var(--cb-color-button-menu-text-disabled,", ");"], COLOR.BUTTON_MENU_TEXT_DISABLED, COLOR.BUTTON_MENU_TEXT_DISABLED);
 export var mixinButtonMenuBgStateDisabled = css(["background-color:", ";background-color:var(--cb-color-button-menu-bg-disabled,", ");"], COLOR.BUTTON_MENU_BG_DISABLED, COLOR.BUTTON_MENU_BG_DISABLED);
 export var mixinButtonMenuBorderStateDisabled = css(["border-color:", ";border-color:var(--cb-color-button-menu-border-disabled,", ");"], COLOR.BUTTON_MENU_BORDER_DISABLED, COLOR.BUTTON_MENU_BORDER_DISABLED);
 export var mixinButtonMenuStateDisabled = css(["", " ", " ", ""], mixinButtonMenuColorStateDisabled, mixinButtonMenuBgStateDisabled, mixinButtonMenuBorderStateDisabled);
-export var mixinButtonMenu = css(["", " &:link,&:visited{", "}&:hover{", "}&:active{font-weight:500;", "}&:disabled{", "}"], mixinButtonMenuStateNormal, mixinButtonMenuColorStateNormal, mixinButtonMenuStateHover, mixinButtonMenuStateActive, mixinButtonMenuStateDisabled);
+export var mixinButtonMenu = css(["", " &:link,&:visited{", "}&:hover{", "}&:active{", "}&:disabled{", "}"], mixinButtonMenuStateNormal, mixinButtonMenuColorStateNormal, mixinButtonMenuStateHover, mixinButtonMenuStateActive, mixinButtonMenuStateDisabled);
 export var mixinButtonPrimaryColorStateNormal = css(["color:", ";color:var(--cb-color-button-primary-text,", ");"], COLOR.BUTTON_PRIMARY_TEXT, COLOR.BUTTON_PRIMARY_TEXT);
 export var mixinButtonPrimaryBgStateNormal = css(["background-color:", ";background-color:var(--cb-color-button-primary-bg,", ");"], COLOR.BUTTON_PRIMARY_BG, COLOR.BUTTON_PRIMARY_BG);
 export var mixinButtonPrimaryBorderStateNormal = css(["border-color:", ";border-color:var(--cb-color-button-primary-border,", ");"], COLOR.BUTTON_PRIMARY_BORDER, COLOR.BUTTON_PRIMARY_BORDER);

package/build/types/global-style-dark-scrollbar/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;

package/build/types/index.d.ts

@@ -3,6 +3,6 @@ export * from './mixin';
 export { default as ThemeStyleLight } from './global-style-theme-light';
 export { default as ThemeStyleDark } from './global-style-theme-dark';
 export { default as GlobalStyleFontFamilyForJa } from './global-style-font-family-for-ja';
+export { default as GlobalStyleDarkScrollbar } from './global-style-dark-scrollbar';
 export { toggleBodyClass } from './util';
-export declare const mixinTopNavButtonDarkFix: import("styled-components").FlattenSimpleInterpolation;
 export type { IPropsEllipsisLines as EllipsisLinesProps } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-theme",
-  "version": "1.9.9-beta.0",
+  "version": "1.9.9-beta.2",
   "description": "控制台主题 - 基于 css variable 和 styled-components",
   "license": "MIT",
   "sideEffects": false,