Feat/upgrade style (#365)

* feat: upgrade vars

* feat: replace vars

* feat: remove variables
This commit is contained in:
yuyang 2022-11-25 17:47:11 +08:00 committed by GitHub
parent 4b72175a98
commit b83f188dbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 62 additions and 120 deletions

View File

@ -28,7 +28,7 @@
"qrcode.vue": "^3.2.2",
"qs": "^6.10.5",
"tdesign-icons-vue-next": "^0.1.1",
"tdesign-vue-next": "^0.24.7",
"tdesign-vue-next": "^0.24.9",
"tvision-color": "^1.3.1",
"vue": "^3.2.31",
"vue-clipboard3": "^2.0.0",

View File

@ -84,18 +84,16 @@ const dynamicComponent = computed(() => {
&-title {
font-style: normal;
font-weight: 500;
margin-top: 8px;
color: var(--td-text-color-primary);
font-size: @font-size-xl;
line-height: @line-height-xl;
font: var(--td-font-title-large);
font-weight: 500;
}
&-tip {
margin: 8px 0 32px;
font-size: @font-size-base;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
line-height: @line-height-base;
}
}
</style>

View File

@ -32,7 +32,7 @@ const className = computed(() => {
}
&-circle {
border-radius: @border-radius-50;
border-radius: var(--td-radius-circle);
}
&-layout {

View File

@ -27,17 +27,17 @@ export const defaultDarkColor = [
export const COLOR_TOKEN: TColorSeries = {
DEFAULT: {
'--td-brand-color': '#0052D9',
'--td-brand-color-1': '#e0ebff',
'--td-brand-color-2': '#c0d8ff',
'--td-brand-color-3': '#a1c4ff',
'--td-brand-color-4': '#81b1ff',
'--td-brand-color-5': '#5f9bff',
'--td-brand-color-6': '#3d87ff',
'--td-brand-color-7': '#176eff',
'--td-brand-color-8': '#0052D9',
'--td-brand-color-9': '#0048cd',
'--td-brand-color-10': '#0035b5',
'--td-brand-color': '#0052d9',
'--td-brand-color-1': '#f2f3ff',
'--td-brand-color-2': '#d9e1ff',
'--td-brand-color-3': '#b5c7ff',
'--td-brand-color-4': '#8eabff',
'--td-brand-color-5': '#618dff',
'--td-brand-color-6': '#366ef4',
'--td-brand-color-7': '#0052d9',
'--td-brand-color-8': '#003cab',
'--td-brand-color-9': '#002a7c',
'--td-brand-color-10': '#001a57',
},
CYAN: {

View File

@ -156,10 +156,6 @@ const navToHelper = () => {
</script>
<style lang="less" scoped>
.@{starter-prefix}-header {
&-layout {
height: 64px;
}
&-menu-fixed {
position: fixed;
top: 0;
@ -180,7 +176,6 @@ const navToHelper = () => {
&-logo-container {
cursor: pointer;
display: inline-flex;
height: 64px;
}
}
.header-menu {

View File

@ -136,7 +136,7 @@ const goDetail = () => {
overflow: hidden;
width: 100%;
padding: 16px 24px;
border-radius: @border-radius;
border-radius: var(--td-radius-default);
font-size: 14px;
color: var(--td-text-color-primary);
line-height: 22px;
@ -147,7 +147,7 @@ const goDetail = () => {
background: var(--td-bg-color-container-hover);
.msg-content {
color: var(--td-brand-color-8);
color: var(--td-brand-color);
}
.t-list-item__action {

View File

@ -315,7 +315,7 @@ watchEffect(() => {
display: inline-flex;
max-height: 78px;
padding: 8px;
border-radius: @border-radius;
border-radius: var(--td-radius-default);
border: 2px solid #e3e6eb;
> .t-radio-button__label {
display: inline-flex;

View File

@ -92,17 +92,14 @@ export function constructInitDataset({
placeholderColor,
borderColor,
}: { dateTime: Array<string> } & TChartColor) {
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
const divideNum = 10;
const timeArray = [];
const inArray = [];
const outArray = [];
for (let i = 0; i < divideNum; i++) {
// const [timeArray, inArray, outArray] = dataset;
if (dateTime.length > 0) {
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
} else {
timeArray.push(

View File

@ -23,11 +23,10 @@
h1 {
width: 200px;
font-weight: normal;
font-size: @font-size-base;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
font-weight: normal;
text-align: left;
line-height: 22px;
@media (max-width: @screen-sm-max) {
width: 100px;
@ -49,7 +48,7 @@
display: inline-block;
width: 8px;
height: 8px;
border-radius: @border-radius-50;
border-radius: var(--td-radius-circle);
background: var(--td-success-color-5);
}
@ -74,7 +73,7 @@
h1 {
width: 84px;
font-family: PingFangSC-Regular;
font-family: var(--td-font-family);
font-size: 14px;
color: var(--td-text-color-secondary);
text-align: left;
@ -89,7 +88,7 @@
display: inline-block;
width: 8px;
height: 8px;
border-radius: @border-radius-50;
border-radius: var(--td-radius-circle);
background: var(--td-success-color-5);
}
@ -98,7 +97,7 @@
}
.blue {
color: var(--td-brand-color-8);
color: var(--td-brand-color);
}
}
}

View File

@ -1,7 +1,7 @@
.secondary-notification {
background-color: var(--td-bg-color-container);
border-radius: @border-radius;
padding: @spacer-3 @spacer-4;
border-radius: var(--td-radius-default);
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
.t-tabs__content {
padding-top: 0;
@ -34,7 +34,7 @@
}
.t-tag.t-size-s {
margin-right: @spacer-1;
margin-right: var(--td-comp-margin-s);
margin-left: 0;
}
}
@ -51,7 +51,7 @@
}
.unread {
color: var(--td-brand-color-8);
color: var(--td-brand-color);
}
.msg-action {

View File

@ -274,7 +274,7 @@ const getContainer = () => {
.list-common-table {
background-color: var(--td-bg-color-container);
padding: 30px 32px;
border-radius: @border-radius;
border-radius: var(--td-radius-default);
.table-container {
margin-top: 30px;

View File

@ -45,7 +45,7 @@ const onInput = () => {
<style lang="less" scoped>
.table-tree-container {
background-color: var(--td-bg-color-container);
border-radius: @border-radius;
border-radius: var(--td-radius-default);
.t-tree {
margin-top: 24px;

View File

@ -37,7 +37,6 @@ const navToHelper = () => {
<style lang="less" scoped>
.login-header {
height: 64px;
padding: 0 24px;
display: flex;
justify-content: space-between;
@ -47,7 +46,6 @@ const navToHelper = () => {
.logo {
width: 188px;
height: 64px;
}
.operations-container {

View File

@ -152,7 +152,7 @@
.tip {
font-size: 14px;
color: var(--td-brand-color-8);
color: var(--td-brand-color);
cursor: pointer;
display: inline-flex;
align-items: center;
@ -182,7 +182,7 @@
.tip {
float: right;
font-size: 14px;
color: var(--td-brand-color-8);
color: var(--td-brand-color);
}
}

View File

@ -10,7 +10,7 @@
background: var(--td-bg-color-container);
color: var(--td-text-color-primary);
text-align: left;
border-radius: @border-radius;
border-radius: var(--td-radius-default);
display: flex;
justify-content: space-between;
align-items: center;
@ -35,7 +35,7 @@
.contract {
width: 340px;
height: 88px;
border-radius: @border-radius;
border-radius: var(--td-radius-default);
margin: 8px 0;
&-title {
@ -66,7 +66,7 @@
.user-intro {
padding: 32px 24px;
background: var(--td-brand-color);
border-radius: @border-radius;
border-radius: var(--td-radius-default);
color: var(--td-text-color-primary);
.name {
@ -107,7 +107,7 @@
.product-container {
margin-top: 16px;
border-radius: @border-radius;
border-radius: var(--td-radius-default);
.content {
width: 100%;
@ -122,7 +122,7 @@
.content-container {
margin-top: 16px;
background: var(--td-bg-color-container);
border-radius: @border-radius;
border-radius: var(--td-radius-default);
}
.user-team {

View File

@ -6,12 +6,8 @@
width: fit-content;
}
.t-layout__header {
height: auto;
}
.t-button + .t-button {
margin-left: @spacer;
margin-left: var(--td-comp-margin-s);
}
.t-jumper {
@ -30,7 +26,7 @@
.left-operation-container,
.operation-container {
.t-button + .t-button {
margin-left: @spacer;
margin-left: var(--td-comp-margin-s);
}
}
@ -80,7 +76,7 @@
}
&-content-layout {
padding: @spacer-3;
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
}
&-layout {
@ -93,7 +89,7 @@
z-index: 100;
}
&-tabs-nav + .@{starter-prefix}-content-layout {
padding-top: @spacer-3;
padding-top: var(--td-comp-paddingTB-xxl);
}
&::-webkit-scrollbar {
@ -111,7 +107,7 @@
&-footer-layout {
padding: 0;
margin-bottom: @spacer-3;
margin-bottom: var(--td-comp-margin-xxl);
}
// slideBar
@ -136,10 +132,10 @@
min-height: 100%;
&-mix {
top: 64px;
top: var(--td-comp-size-xxxl);
&-fixed {
top: 64px;
top: var(--td-comp-size-xxxl);
z-index: 0;
}
}
@ -177,7 +173,7 @@
&-logo-normal {
color: var(--td-brand-color);
font-size: @font-size-l;
font: var(--td-font-body-large);
transition: all 0.3s;
}
}

View File

@ -1,16 +1,15 @@
// 对部分样式进行重置
body {
color: var(--td-text-color-secondary);
font-family: -apple-system, BlinkMacSystemFont, @font-family;
font-size: @font-size-base;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
font: var(--td-font-body-medium);
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
}
pre {
font-family: @font-family;
font-family: var(--td-font-family);
}
ul,
@ -63,9 +62,9 @@ a {
}
.t-button-link {
margin-right: @spacer-3;
margin-right: var(--td-comp-margin-xxl);
&:last-child {
margin-right: 0;
}
}
}

View File

@ -1,15 +1,15 @@
:root,
:root[theme-mode='light'] {
--td-brand-color-1: #e0ebff;
--td-brand-color-2: #c0d8ff;
--td-brand-color-3: #a1c4ff;
--td-brand-color-4: #81b1ff;
--td-brand-color-5: #5f9bff;
--td-brand-color-6: #3d87ff;
--td-brand-color-7: #176eff;
--td-brand-color-8: #0052d9;
--td-brand-color-9: #0048cd;
--td-brand-color-10: #0035b5;
--td-brand-color-1: #f2f3ff;
--td-brand-color-2: #d9e1ff;
--td-brand-color-3: #b5c7ff;
--td-brand-color-4: #8eabff;
--td-brand-color-5: #618dff;
--td-brand-color-6: #366ef4;
--td-brand-color-7: #0052d9;
--td-brand-color-8: #003cab;
--td-brand-color-9: #002a7c;
--td-brand-color-10: #001a57;
}
:root[theme-mode='dark'] {

View File

@ -1,47 +1,7 @@
/** 公共前缀 */
@starter-prefix: tdesign-starter;
// 组件库本身只有色彩相关的css token 扩展其他css token使用 待组件库扩充其他token后再做替换 这里使用less vars 避免两种css token让使用者混淆
// tdesign 只保持一套token即可
// Spacer
@spacer: 8px;
@spacer-s: calc(@spacer * 0.5); // 间距-4
@spacer-l: calc(@spacer * 1.5); // 间距-12
@spacer-1: @spacer; // 间距-8
@spacer-2: calc(@spacer * 2); // 间距-16
@spacer-3: calc(@spacer * 3); // 间距-24
@spacer-4: calc(@spacer * 4); // 间距-32
@spacer-5: calc(@spacer * 5); // 间距-大-40
@spacer-6: calc(@spacer * 6); // 间距-大-48
@spacer-7: calc(@spacer * 7); // 间距-大-48
@spacer-8: calc(@spacer * 8); // 间距-大-48
@spacer-9: calc(@spacer * 9); // 间距-大-48
@spacer-10: calc(@spacer * 10); // 间距-大-80
// Font
@font-size: 10px;
@font-size-s: calc(@font-size * 1.2); // 字号-五级字号
@font-size-base: calc(@font-size * 1.4); // 字号-四级字号
@font-size-l: calc(@font-size * 1.6); // 字号-三级字号
@font-size-xl: calc(@font-size * 2); // 字号-二级字号
@font-size-xxl: calc(@font-size * 3.6); // 字号-一级字号
// Line Height
@line-height: 1.5; // 行高-常规
@line-height-s: 20px; // 行高-对应五级文字
@line-height-base: 22px; // 行高-对应四级文字
@line-height-l: 24px; // 行高-对应三级文字
@line-height-xl: 28px; // 行高-对应二级文字
@line-height-xxl: 44px; //行高-对应一级文字
@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
// Border Radius
@border-radius: 3px; // 圆角-全局
@border-radius-50: 50%; // 圆角-全圆角
// 颜色、尺寸、阴影、圆角、字体 variables 请参考 https://tdesign.tencent.com/starter/docs/vue/design-token
// 响应式断点
@screen-sm: 768px;
@screen-md: 992px;