Skip to content

Commit

Permalink
fix: fix dark mode tokens of mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
novlan1 committed Sep 9, 2023
1 parent 19be7ba commit 7d61249
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 33 deletions.
4 changes: 2 additions & 2 deletions style/mobile/components/badge/v2/_index.less
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
}

&__content {
color: @badge-context-text-color;
color: @badge-content-text-color;
}

&__content:not(:empty) + .t-has-count {
Expand All @@ -103,6 +103,6 @@
&__content-text {
display: block;
line-height: 24px;
color: @badge-context-text-color;
color: @badge-content-text-color;
}
}
2 changes: 1 addition & 1 deletion style/mobile/components/badge/v2/_var.less
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@badge-border-radius: var(--td-badge-border-radius, 2px);
@border-bubble-border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px);
@badge-dot-size: var(--td-badge-dot-size, 8px);
@badge-context-text-color: var(--td-badge-context-text-color, @text-color-primary);
@badge-content-text-color: var(--td-badge-content-text-color, @text-color-primary);

// large
@badge-large-font-size: var(--td-badge-large-font-size, @font-size-s);
Expand Down
2 changes: 1 addition & 1 deletion style/mobile/components/table/_var.less
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
@scroll-track-color: #fff;
@border-radius-default: 0;
@border-radius-circle: 50%;
@table-header-bg-color: @bg-color-container;
@table-header-bg-color: #fff;
@table-bg: @bg-color-container;
@table--text-color: @text-color-primary;
@table-head-text-color: @text-color-placeholder;
Expand Down
45 changes: 16 additions & 29 deletions style/mobile/theme/_dark.less
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@

// 文字 & 图标 颜色
--td-font-white-1: rgba(255, 255, 255, 90%);
--td-font-white-2: rgba(255, 255, 255, 55%);
--td-font-white-3: rgba(255, 255, 255, 35%);
--td-font-white-4: rgba(255, 255, 255, 22%);
--td-font-white-2: rgba(255, 255, 255, 60%);
--td-font-white-3: rgba(255, 255, 255, 40%);
--td-font-white-4: rgba(255, 255, 255, 26%);
--td-font-gray-1: rgba(0, 0, 0, 90%);
--td-font-gray-2: rgba(0, 0, 0, 60%);
--td-font-gray-3: rgba(0, 0, 0, 40%);
Expand All @@ -70,37 +70,33 @@
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功

// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
--td-brand-color-hover: var(--td-brand-color-7); // hover态
--td-brand-color-focus: var(--td-brand-color-2); // focus态,包括鼠标和键盘
// 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
--td-brand-color-focus: var(--td-brand-color-1); // focus态,包括鼠标和键盘
--td-brand-color-active: var(--td-brand-color-9); // 点击态
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
--td-brand-color-light-hover: var(--td-brand-color-2);
--td-brand-color-light-active: var(--td-brand-color-2); // 浅色的选中态

// 警告色扩展
--td-warning-color-hover: var(--td-warning-color-4);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-active: var(--td-warning-color-4);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-hover: var(--td-warning-color-2);
--td-warning-color-light-active: var(--td-warning-color-2);

// 失败/错误色扩展
--td-error-color-hover: var(--td-error-color-5);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-active: var(--td-error-color-5);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-hover: var(--td-error-color-2);
--td-error-color-light-active: var(--td-error-color-2);

// 成功色扩展
--td-success-color-hover: var(--td-success-color-4);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-active: var(--td-success-color-4);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-hover: var(--td-success-color-2);
--td-success-color-light-active: var(--td-success-color-2);

// 遮罩
--td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出
Expand All @@ -109,18 +105,11 @@
// 背景色
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
--td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
--td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover
--td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active
--td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select
--td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
--td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件
--td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover
--td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active
--td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); // 色彩 - 次级组件 - hover
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active
--td-bg-color-container-active: var(--td-gray-color-12); // 色彩 - 容器 - active
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
--td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled

// 特殊组件背景色,目前只用于 button、input 组件多主题场景,浅色主题下固定为白色,深色主题下为 transparent 适配背景颜色
Expand All @@ -131,7 +120,7 @@
--td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
--td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
--td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
--td-text-color-anti: #fff; // 色彩-文字-反色
--td-text-color-anti: var(--td-font-gray-1); // 色彩-文字-反色
--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接

Expand Down Expand Up @@ -160,8 +149,6 @@

// 滚动条颜色
--td-scrollbar-color: rgba(255, 255, 255, 10%);
// 滚动条悬浮颜色( hover )
--td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
// 滚动条轨道颜色,不能是带透明度,否则纵向滚动时,横向滚动条会穿透
--td-scroll-track-color: #333;
}

0 comments on commit 7d61249

Please sign in to comment.