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

Jump to bottom

feat(theme): add old theme vars #2503

Merged
merged 3 commits into from
Nov 11, 2024
Merged

feat(theme): add old theme vars #2503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c449897
feat(theme): add old theme vars
MomoPoppy Nov 8, 2024
412b6f1
feat(button): [button] add old vars for button
MomoPoppy Nov 8, 2024
7b93e2c
Merge branch 'dev' into feat-old-vars-1028
MomoPoppy Nov 8, 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
2 changes: 1 addition & 1 deletion packages/theme/src/action-menu/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.inject-ActionMenu-vars() {
// 文本字号
--tv-ActionMenu-font-size: var(--tv-font-size-md, 14px);
--tv-ActionMenu-font-size: var(--tv-font-size-default, 14px);
// 文本色（默认）
--tv-ActionMenu-text-color: var(--tv-color-text-link, #1476ff);
// 文本色（card 类型）
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/alert/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
--tv-Alert-title-margin-bottom: var(--tv-space-sm);

// 警告的描述字号
--tv-Alert-desc-font-size: var(--tv-font-size-md);
--tv-Alert-desc-font-size: var(--tv-font-size-default);
// 警告的描述字重
--tv-Alert-desc-font-weight: var(--tv-font-weight-regular);
// 警告的描述颜色
Expand All @@ -71,7 +71,7 @@
--tv-Alert-close-icon-right: var(--tv-space-lg);

// 警告的关闭文本的大小
--tv-Alert-close-text-font-size: var(--tv-font-size-md);
--tv-Alert-close-text-font-size: var(--tv-font-size-default);

//-------------------------------------------------------Normal 场景：---------------------------------------

Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/anchor/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
// 锚点默认文本色
--tv-Anchor-text-color: var(--tv-color-text-secondary, #595959);
// 锚点默认字号
--tv-Anchor-font-size: var(--tv-font-size-md, 14px);
--tv-Anchor-font-size: var(--tv-font-size-default, 14px);
// 选中锚点项默认文本色
--tv-Anchor-link-text-color-active: var(--tv-color-text, #191919);
// 锚点项左默认外边距
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/autocomplete/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
// 行高
--tv-Autocomplete-line-height: var(--tv-line-height-number, 1.5);
// 字号
--tv-Autocomplete-font-size: var(--tv-font-size-md, 14px);
--tv-Autocomplete-font-size: var(--tv-font-size-default, 14px);
// 文本色
--tv-Autocomplete-text-color: var(--tv-color-text, #191919);
// 文本色(选中）
Expand All @@ -25,7 +25,7 @@
// 面板垂直外间距
--tv-Autocomplete-panel-margin-y: var(--tv-space-sm, 4px);
// 面板圆角
--tv-Autocomplete-panel-border-radius: var(--tv-border-radius-md, 6px);
--tv-Autocomplete-panel-border-radius: var(--tv-border-radius-default, 6px);
// 面板背景色
--tv-Autocomplete-panel-bg-color: var(--tv-color-bg-secondary, #fff);
// 面板阴影
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/base-select/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
// 文本色
--tv-BaseSelect-text-color: var(--tv-color-text, #191919);
// 字号
--tv-BaseSelect-font-size: var(--tv-font-size-md, 14px);
--tv-BaseSelect-font-size: var(--tv-font-size-default, 14px);
// 行高
--tv-BaseSelect-line-height: var(--tv-line-height-number, 1.5);

Expand Down Expand Up @@ -45,12 +45,12 @@
// 尾部文本色
--tv-BaseSelect-suffix-text-color: var(--tv-color-text-weaken, #808080);
// 输入框高度（默认尺寸）
--tv-BaseSelect-input-height: var(--tv-size-height-md, 32px);
--tv-BaseSelect-input-height: var(--tv-size-height-default, 32px);

// 多选标签容器内边距
--tv-BaseSelect-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px);
// 多选标签容器高度
--tv-BaseSelect-tags-height: var(--tv-size-height-md, 32px);
--tv-BaseSelect-tags-height: var(--tv-size-height-default, 32px);
// 标签外边距
--tv-BaseSelect-tag-margin: var(--tv-space-xs, 2px);

Expand Down
476 changes: 241 additions & 235 deletions packages/theme/src/base/old-theme.less
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,8 @@
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
--tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色
--tv-color-bg-dark:var(--tv-base-color-brand);// #191919; 深色背景色 顶部导航/ 深色tab/深色提示背景色(目前使用的这个色，找设计师确认）
--tv-color-bg-active-dark:var(--tv-base-color-common-3);// #f5f5f5 深色背景悬浮色

/* 2.6.2 禁用 */
--tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
Expand All @@ -326,6 +328,7 @@
--tv-color-bg-hover-1: var(--tv-base-color-brand-2); // #deecff 浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
--tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
--tv-color-bg-hover-3: var(--tv-base-color-brand-1); // #f0f7ff 悬浮背景色
--tv-color-bg-hover-dark:var(--tv-base-color-common-11); // #191919 深色背景悬浮色 （这个颜色待和设计师确认，原本tab用的#191919）

/* 2.6.4 active/选中 */
--tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5 分页选中背景色/左侧导航选中背景色
Expand All @@ -334,6 +337,7 @@
--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 表格选中背景色
--tv-color-bg-active-dark: var(--tv-base-color-common-11); // #191919 深色背景色激活色（待确认）

/** 2.7 边框色/分割线颜色 **/

Expand Down Expand Up @@ -363,6 +367,7 @@
--tv-font-size-lg: 16px;
--tv-font-size-xl: 18px;
--tv-font-size-xxl: 20px;
--tv-font-size-default:var(--tv-font-size-md);

--tv-font-size-heading-xs: 16px; // 卡片标题
--tv-font-size-heading-sm: 18px; // 页面标题
Expand All @@ -385,6 +390,7 @@
--tv-border-radius-md: 6px; // 默认
--tv-border-radius-lg: 8px;
--tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。
--tv-border-radius-default:var(--tv-border-radius-md);

/** 5. 边框 **/
--tv-border-width: 1px;
Expand All @@ -408,6 +414,7 @@
--tv-size-height-md: 32px; // medium 尺寸 - 默认
--tv-size-height-lg: 40px; // large 尺寸
--tv-size-height-xl: 48px; // xLarge 尺寸
--tv-size-height-default:var(--tv-size-height-md);

/** 7.2 图标大小 width, height **/
--tv-icon-size: 16px;
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/breadcrumb/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.inject-Breadcrumb-vars() {
// 字号
--tv-Breadcrumb-font-size: var(--tv-font-size-md);
--tv-Breadcrumb-font-size: var(--tv-font-size-default);
// 文本行高
--tv-Breadcrumb-text-line-height: var(--tv-line-height-number);
// 文本色
Expand Down
8 changes: 4 additions & 4 deletions packages/theme/src/bulletin-board/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.inject-BulletinBoard-vars() {
// 公告栏字号
--tv-BulletinBoard-font-size: var(--tv-font-size-md);
--tv-BulletinBoard-font-size: var(--tv-font-size-default);
// 标题字号
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
// 标题字重
Expand All @@ -28,7 +28,7 @@
// 子项日期文字颜色
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
// 子项日期文字尺寸
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-md);
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default);
// new标签背景颜色
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
// new标签文字颜色
Expand All @@ -44,9 +44,9 @@
// 更多按钮图标悬浮颜色
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
// 更多按钮文字尺寸
--tv-BulletinBoard-more-font-size: var(--tv-font-size-md);
--tv-BulletinBoard-more-font-size: var(--tv-font-size-default);
// 更多按钮图标尺寸
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-md);
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default);
// tabs标签文字颜色
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
// tabs标签背景颜色
Expand Down
8 changes: 4 additions & 4 deletions packages/theme/src/button-group/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.inject-ButtonGroup-vars() {
// 按钮组圆角
--tv-ButtonGroup-border-radius: var(--tv-border-radius-md);
--tv-ButtonGroup-border-radius: var(--tv-border-radius-default);
// 按钮组字体行高
--tv-ButtonGroup-line-height-number: var(--tv-line-height-number);
// 默认按钮未选中项背景色
Expand All @@ -22,9 +22,9 @@
// 空数据文本色
--tv-ButtonGroup-empty-text-color: var(--tv-color-text-weaken);
// 未指定尺寸的按钮项高度
--tv-ButtonGroup-item-btn-height: var(--tv-size-height-md);
--tv-ButtonGroup-item-btn-height: var(--tv-size-height-default);
// 按钮组默认字号
--tv-ButtonGroup-item-btn-font-size: var(--tv-font-size-md);
--tv-ButtonGroup-item-btn-font-size: var(--tv-font-size-default);
// 按钮项禁用背景色
--tv-ButtonGroup-item-btn-disabled-bg-color: var(--tv-color-bg-disabled);
// 按钮项禁用文本色
Expand Down Expand Up @@ -58,7 +58,7 @@
// 按钮角标字体颜色
--tv-ButtonGroup-item-sup-font-color: var(--tv-color-text-white);
// 按钮角标字体大小
--tv-ButtonGroup-item-sup-font-size: var(--tv-font-size-md);
--tv-ButtonGroup-item-sup-font-size: var(--tv-font-size-default);

// medium尺寸
--tv-ButtonGroup-medium-size: var(--tv-size-height-lg);
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/button/old-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
@button-prefix-cls: ~'@{css-prefix}button';

.@{button-prefix-cls} {
// 默认时按钮字重
--tv-Button-border-radius: 6px;
// 默认时按钮圆角
--tv-Button-border-radius: 2px;
}
14 changes: 7 additions & 7 deletions packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@

//--------------------------------------------------- 场景2、尺寸 height, font-size,padding-x,min-width,仅图标时的 icon-size
// 默认时按钮字号
--tv-Button-font-size: var(--tv-font-size-md);
--tv-Button-font-size: var(--tv-font-size-default);
// 默认时按钮高度
--tv-Button-height: var(--tv-size-height-md);
--tv-Button-height: var(--tv-size-height-default);
// 默认时按钮水平间距
--tv-Button-padding-x: 24px; // space变量不存在，是否替换成 space-base * 6 这种？
// 默认时按钮最小宽度
--tv-Button-min-width: 96px; // 是否替换成 size-base * 24 这种？
// 默认时按钮内图标的大小
--tv-Button-size-icon-font-size: 18px;
// 超大按钮字号
--tv-Button-font-size-large: var(--tv-font-size-md);
--tv-Button-font-size-large: var(--tv-font-size-default);
// 超大按钮高度
--tv-Button-height-large: var(--tv-size-height-xl);
// 超大按钮水平间距
Expand All @@ -48,7 +48,7 @@
// 超大按钮内图标的大小
--tv-Button-size-icon-font-size-large: 28px;
// 中等按钮字号
--tv-Button-font-size-medium: var(--tv-font-size-md);
--tv-Button-font-size-medium: var(--tv-font-size-default);
// 中等按钮高度
--tv-Button-height-medium: var(--tv-size-height-lg);
// 中等按钮水平间距
Expand Down Expand Up @@ -310,7 +310,7 @@
// 仅图标且default主题时， 外边框的悬浮色
--tv-Button-border-color-only-icon-default-hover: var(--tv-color-border-secondary);
// 仅图标且有边框时，边框的圆角大
--tv-Button-border-radius-only-icon: var(--tv-border-radius-md);
--tv-Button-border-radius-only-icon: var(--tv-border-radius-default);

// 仅图标且无边框时，背景阴影的圆角
--tv-Button-border-radius-only-icon-ontext: var(--tv-border-radius-sm);
Expand All @@ -324,7 +324,7 @@
// 纯文字时，文字的禁用色
--tv-Button-text-color-ontext-disabled: var(--tv-color-text-disabled);
// 纯文字时，字体大小
--tv-Button-font-size-ontext: var(--tv-font-size-md);
--tv-Button-font-size-ontext: var(--tv-font-size-default);

// 混排有边框和无边框时，图标右边距
--tv-Button-margin-right-isicon-svg: var(--tv-space-sm);
Expand All @@ -334,7 +334,7 @@
// 混排无边框时,文字的禁用色
--tv-Button-text-color-isicon-ontext-disabled: var(--tv-color-text-disabled);
//混排无边框时，字体大小
--tv-Button-font-size-isicon-ontext: var(--tv-font-size-md);
--tv-Button-font-size-isicon-ontext: var(--tv-font-size-default);

//------------------------------------------------------ 场景5、 其它场景-----------------------------------------
// 相邻按钮的默认的左外边距
Expand Down
Loading
Loading