diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less index 9a449ec0ba..c6d29a3091 100644 --- a/packages/theme/src/base/old-theme.less +++ b/packages/theme/src/base/old-theme.less @@ -400,6 +400,7 @@ --tv-border-radius-md: 2px; // 默认 --tv-border-radius-lg: 4px; --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 + --tv-border-radius-brand: 2px; // 品牌相关。用于圆角，按钮、分页等场景 /** 5. 边框 **/ --tv-border-width: 1px; diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less index 63f7b4b9ee..20f95e80ee 100644 --- a/packages/theme/src/base/vars.less +++ b/packages/theme/src/base/vars.less @@ -400,7 +400,8 @@ --tv-border-radius-sm: 4px; --tv-border-radius-md: 6px; // 默认 --tv-border-radius-lg: 8px; - --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 + --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 + --tv-border-radius-brand: var(--tv-border-radius-round); // 品牌相关。用于圆角，按钮、分页等场景 /** 5. 边框 **/ --tv-border-width: 1px; diff --git a/packages/theme/src/date-table/vars.less b/packages/theme/src/date-table/vars.less index c078b50fd4..7758b1f6cf 100644 --- a/packages/theme/src/date-table/vars.less +++ b/packages/theme/src/date-table/vars.less @@ -31,9 +31,9 @@ // 表头文本色 --tv-DateTable-th-text-color: var(--tv-color-text-weaken, #808080); // 单元格圆角 - --tv-DateTable-td-border-radius: var(--tv-border-radius-round, 999px); + --tv-DateTable-td-border-radius: var(--tv-border-radius-brand, 999px); // 选中项的圆角 - --tv-DateTable-border-radius-current-select: var(--tv-border-radius-round, 999px); + --tv-DateTable-border-radius-current-select: var(--tv-border-radius-brand, 999px); // 上个月文本色 --tv-DateTable-td-pre-month-text-color: var(--tv-color-text-weaken, #808080); // 选中日期文本色 @@ -60,7 +60,7 @@ // 今天的高度 --tv-DateTable-td-today-height: var(--tv-size-height-sm, 28px); // 今天的圆角 - --tv-DateTable-td-today-border-radius: var(--tv-border-radius-round, 999px); + --tv-DateTable-td-today-border-radius: var(--tv-border-radius-brand, 999px); // 今天的边框色 --tv-DateTable-td-today-circle-border-color: var(--tv-color-border-active, #191919); @@ -71,13 +71,13 @@ // 单元格顶部间距 --tv-DateTable-td-span-top: 3px; // 开始日期圆角 - --tv-DateTable-start-date-border-radius: var(--tv-border-radius-round, 999px); + --tv-DateTable-start-date-border-radius: var(--tv-border-radius-brand, 999px); // 选中日期圆角 - --tv-DateTable-cell-border-radius-selected: var(--tv-border-radius-round, 999px); + --tv-DateTable-cell-border-radius-selected: var(--tv-border-radius-brand, 999px); // 行高 --tv-DateTable-tr-line-height: var(--tv-line-height-number, 1.5); // 禁用单元格圆角 - --tv-DateTable-td-border-radius-disabled: var(--tv-border-radius-round, 999px); + --tv-DateTable-td-border-radius-disabled: var(--tv-border-radius-brand, 999px); // 星期行高 --tv-DateTable-week-height: var(--tv-size-height-md, 32px); } diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less index 6bf30962ac..342fb6486d 100644 --- a/packages/theme/src/dropdown/vars.less +++ b/packages/theme/src/dropdown/vars.less @@ -36,11 +36,11 @@ // 按钮组时，下拉按钮的左侧内边距 --tv-Dropdown-caret-button-padding-left: var(--tv-space-base, 4px); // 按钮组时，左侧按钮圆角 - --tv-Dropdown-caret-button-border-radius: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) + --tv-Dropdown-caret-button-border-radius: 0 var(--tv-border-radius-brand, 999px) var(--tv-border-radius-brand, 999px) 0; // 按钮组时，右侧按钮圆角 - --tv-Dropdown-title-button-border-radius: var(--tv-border-radius-round, 999px) 0 0 - var(--tv-border-radius-round, 999px); + --tv-Dropdown-title-button-border-radius: var(--tv-border-radius-brand, 999px) 0 0 + var(--tv-border-radius-brand, 999px); // 按钮组时，文本按钮内边距 --tv-Dropdown-title-button-padding: 0px 0px 0px 24px; } diff --git a/packages/theme/src/guide/vars.less b/packages/theme/src/guide/vars.less index 40f8ea2a95..52fe6ed487 100644 --- a/packages/theme/src/guide/vars.less +++ b/packages/theme/src/guide/vars.less @@ -44,7 +44,7 @@ // 引导框按钮默认样式边框色 --tv-Guide-button-border-color: var(--tv-color-border-secondary); // 引导框按钮默认样式圆角 - --tv-Guide-button-border-radius: var(--tv-border-radius-round); + --tv-Guide-button-border-radius: var(--tv-border-radius-brand); // 引导框按钮默认样式背景色 --tv-Guide-button-bg-color: var(--tv-color-bg-secondary); // 引导框按钮默认样式悬浮边框色 diff --git a/packages/theme/src/month-table/vars.less b/packages/theme/src/month-table/vars.less index f67d68e49b..6efcbdb4be 100644 --- a/packages/theme/src/month-table/vars.less +++ b/packages/theme/src/month-table/vars.less @@ -28,17 +28,17 @@ ) 0; // 单元格圆角（选中） - --tv-MonthTable-cell-border-radius: var(--tv-border-radius-round, 999px); + --tv-MonthTable-cell-border-radius: var(--tv-border-radius-brand, 999px); // 单元格圆角（开始月份） - --tv-MonthTable-cell-border-radius-start: var(--tv-border-radius-round, 999px) 0 0 - var(--tv-border-radius-round, 999px); + --tv-MonthTable-cell-border-radius-start: var(--tv-border-radius-brand, 999px) 0 0 + var(--tv-border-radius-brand, 999px); // 单元格圆角（结束月份） - --tv-MonthTable-cell-border-radius-end: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) 0; + --tv-MonthTable-cell-border-radius-end: 0 var(--tv-border-radius-brand, 999px) var(--tv-border-radius-brand, 999px) 0; // 选中月份每行第一个单元格的圆角 - --tv-MonthTable-cell-border-radius-first: var(--tv-border-radius-round, 999px) 0 0 - var(--tv-border-radius-round, 999px); + --tv-MonthTable-cell-border-radius-first: var(--tv-border-radius-brand, 999px) 0 0 + var(--tv-border-radius-brand, 999px); // 选中月份每行最后一个单元格的圆角 - --tv-MonthTable-cell-border-radius-last: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) 0; + --tv-MonthTable-cell-border-radius-last: 0 var(--tv-border-radius-brand, 999px) var(--tv-border-radius-brand, 999px) 0; // 单元格边框色（选中） --tv-MonthTable-cell-border-color-today: var(--tv-color-border-active, #191919); diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less index eb889796dd..9a3aeab959 100644 --- a/packages/theme/src/pager/vars.less +++ b/packages/theme/src/pager/vars.less @@ -62,7 +62,7 @@ // 分页页码项默认悬浮边框色 --tv-Pager-page-item-border-color-hover: transparent; // 分页页码项项圆角 - --tv-Pager-page-item-border-radius: var(--tv-border-radius-round); + --tv-Pager-page-item-border-radius: var(--tv-border-radius-brand); // 分页页码悬浮字重 --tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-bold); // 分页页码项最小宽度 diff --git a/packages/theme/src/time-spinner/vars.less b/packages/theme/src/time-spinner/vars.less index 4fcbf606d4..a708f99abb 100644 --- a/packages/theme/src/time-spinner/vars.less +++ b/packages/theme/src/time-spinner/vars.less @@ -36,7 +36,7 @@ // 时间项内间距 --tv-TimeSpinner-item-padding: 3.5px 0; // 时间项圆角 - --tv-TimeSpinner-item-border-radius: var(--tv-border-radius-round, 999px); + --tv-TimeSpinner-item-border-radius: var(--tv-border-radius-brand, 999px); // 时间项背景色（悬浮） --tv-TimeSpinner-item-bg-color-hover: var(--tv-color-bg-hover-1); // 时间项背景色（选中/激活）