Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(theme): update base/vars.less order #2163

Merged
merged 2 commits into from
Sep 23, 2024
Merged

fix(theme): update base/vars.less order #2163

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14c72bc
fix(theme): update base/vars.less order
shenjunjian Sep 21, 2024
6eadae5
fix(theme): fix
shenjunjian Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 32 additions & 27 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
--tv-base-color-warn-11: #9e6d3f;
--tv-base-color-warn-12: #d6a981;
--tv-base-color-warn-13: #f2d8c2;
--tv-base-color-warn-secondary-1: #ffb700; /* 次要告警色 黄色系 */
--tv-base-color-warn-secondary-1: #ffb700; // 次要告警色 黄色系

--tv-base-color-info-1: #f0f7ff;
--tv-base-color-info-2: #deecff; // 提示-背景色 / 边框色
Expand Down Expand Up @@ -322,8 +322,8 @@

/* 2.6.4 active/选中 */
--tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5 分页选中背景色/左侧导航选中背景色
--tv-color-bg-active-control: var(--tv-base-color-brand-6);// 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
--tv-color-bg-active-primary: var(--tv-base-color-brand);// 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
--tv-color-bg-active-control: var(--tv-base-color-brand-6); // 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
--tv-color-bg-active-primary: var(--tv-base-color-brand); // 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
--tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
--tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #deecff 时间选择选中背景色
--tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
Expand Down Expand Up @@ -367,15 +367,41 @@
/* 3.4 字重 */
--tv-font-weight-thin: 200;
--tv-font-weight-regular: 400;
--tv-font-weight-medium: 600;
--tv-font-weight-bold: 600;

/** 4. 圆角变量 **/
--tv-border-radius-sm: 4px;
--tv-border-radius-md: 6px;
--tv-border-radius-lg: 8px;
--tv-border-radius-round: 50%;
--tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。

/** 5. 阴影变量 **/
/** 5. 边框 **/
--tv-border-width: 1px;

/** 6. 间距变量 space ----margin、padding、top、 left 、 right、bottom **/
--tv-space-base: 4px;
--tv-space-xs: 2px;
--tv-space-sm: var(--tv-space-base);
--tv-space-md: calc(var(--tv-space-base) * 2);
--tv-space-lg: calc(var(--tv-space-base) * 3);
--tv-space-xl: calc(var(--tv-space-base) * 4);

/** 7. 尺寸变量 size **/

/** 尺寸系数 calc */
--tv-size-base: 4px;

/** 7.1 表单类组件的 height */
--tv-size-height-xs: 24px; // mini 尺寸
--tv-size-height-sm: 28px; // small 尺寸
--tv-size-height-md: 32px; // medium 尺寸 - 默认
--tv-size-height-lg: 40px; // large 尺寸
--tv-size-height-xl: 48px; // xLarge 尺寸

/** 7.2 图标大小 width, height **/
--tv-icon-size: 16px;

/** 8. 阴影变量 box-shadow **/
--tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影
--tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影

Expand All @@ -399,27 +425,6 @@
--tv-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 右侧抽屉
--tv-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16);

/** 6. 边框 **/
--tv-border-weight: 1px;

/** 7. 间距变量 ----margin、padding、top、 left 、 right、bottom **/
--tv-space-base: 4px;
--tv-space-xs: 2px;
--tv-space-sm: var(--tv-space-base);
--tv-space-md: calc(var(--tv-space-base) * 2);
--tv-space-lg: calc(var(--tv-space-base) * 3);
--tv-space-xl: calc(var(--tv-space-base) * 4);

/** 8. 尺寸变量 ---- width、 height **/
--tv-size-base: 4px;

/** 以下变量仅用于表单类组件的 height */
--tv-size-height-xs: 24px; // mini 尺寸
--tv-size-height-sm: 28px; // small 尺寸
--tv-size-height-md: 32px; // medium 尺寸 - 默认
--tv-size-height-lg: 40px; // large 尺寸
--tv-size-height-xl: 48px; // xLarge 尺寸

/** 9. 滚动条变量 **/
--tv-size-scrollbar-width: 8px; // 滚动条宽度
--tv-size-scrollbar-height: 80px; // 滚动条高度
Expand Down
Loading