mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-13 13:59:04 +08:00
style(typography): extract theme vars
This commit is contained in:
07akioni
parent
e002a97c47
commit
d8565d89e2
@ -1,99 +1,105 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
$--header-font-size: (
|
||||
'1': 32px,
|
||||
'2': 26px,
|
||||
'3': 18px,
|
||||
'4': 16px,
|
||||
'5': 14px,
|
||||
'6': 14px
|
||||
);
|
||||
|
||||
$--header-margin: (
|
||||
'1': 24px 0 18px 0,
|
||||
'2': 24px 0 18px 0,
|
||||
'3': 20px 0 16px 0,
|
||||
'4': 20px 0 16px 0,
|
||||
'5': 18px 0 14px 0,
|
||||
'6': 18px 0 14px 0
|
||||
);
|
||||
|
||||
$--header-prefix-width: (
|
||||
'1': 16px,
|
||||
'2': 16px,
|
||||
'3': 12px,
|
||||
'4': 12px,
|
||||
'5': 12px,
|
||||
'6': 12px
|
||||
);
|
||||
|
||||
$--header-bar-width: (
|
||||
'1': 4px,
|
||||
'2': 4px,
|
||||
'3': 3px,
|
||||
'4': 3px,
|
||||
'5': 3px,
|
||||
'6': 3px
|
||||
);
|
||||
|
||||
@mixin header-mixin($level) {
|
||||
$--header-font-size: (
|
||||
'1': 32px,
|
||||
'2': 26px,
|
||||
'3': 18px,
|
||||
'4': 16px,
|
||||
'5': 14px,
|
||||
'6': 14px
|
||||
);
|
||||
|
||||
$--header-margin: (
|
||||
'1': 24px 0 18px 0,
|
||||
'2': 24px 0 18px 0,
|
||||
'3': 20px 0 16px 0,
|
||||
'4': 20px 0 16px 0,
|
||||
'5': 18px 0 14px 0,
|
||||
'6': 18px 0 14px 0
|
||||
);
|
||||
|
||||
$--header-prefix-width: (
|
||||
'1': 16px,
|
||||
'2': 16px,
|
||||
'3': 12px,
|
||||
'4': 12px,
|
||||
'5': 12px,
|
||||
'6': 12px
|
||||
);
|
||||
|
||||
$--header-bar-width: (
|
||||
'1': 4px,
|
||||
'2': 4px,
|
||||
'3': 3px,
|
||||
'4': 3px,
|
||||
'5': 3px,
|
||||
'6': 3px
|
||||
);
|
||||
|
||||
@include b('h' + $level) {
|
||||
font-size: map-get($--header-font-size, $level);
|
||||
font-weight: 500;
|
||||
color: $--n-primary-text-color;
|
||||
&:first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
margin: map-get($--header-margin, $level);
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
@include m(prefix-bar) {
|
||||
position: relative;
|
||||
padding-left: map-get($--header-prefix-width, $level);
|
||||
&::before {
|
||||
content: '';
|
||||
width: map-get($--header-bar-width, $level);
|
||||
border-radius: map-get($--header-bar-width, $level) / 2;
|
||||
background-color: $--n-primary-color;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
@include once {
|
||||
font-size: map-get($--header-font-size, $level);
|
||||
font-weight: 500;
|
||||
margin: map-get($--header-margin, $level);
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
&:first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
&::before {
|
||||
left: -(map-get($--header-prefix-width, $level));
|
||||
}
|
||||
color: map-get($--typography-header-text-color, 'default');
|
||||
@include m(prefix-bar) {
|
||||
@include once {
|
||||
position: relative;
|
||||
padding-left: map-get($--header-prefix-width, $level);
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
&::before {
|
||||
left: -(map-get($--header-prefix-width, $level));
|
||||
}
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
@include once {
|
||||
content: '';
|
||||
width: map-get($--header-bar-width, $level);
|
||||
border-radius: map-get($--header-bar-width, $level) / 2;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
background-color: map-get($--typography-header-prefix-color, 'default');
|
||||
}
|
||||
@include m(default-type) {
|
||||
&::before {
|
||||
background-color: $--n-primary-color;
|
||||
background-color: map-get($--typography-header-prefix-color, 'default');
|
||||
}
|
||||
}
|
||||
@include m(primary-type) {
|
||||
&::before {
|
||||
background-color: $--n-primary-color;
|
||||
background-color: map-get($--typography-header-prefix-color, 'primary');
|
||||
}
|
||||
}
|
||||
@include m(info-type) {
|
||||
&::before {
|
||||
background-color: $--n-info-color;
|
||||
background-color: map-get($--typography-header-prefix-color, 'info');
|
||||
}
|
||||
}
|
||||
@include m(success-type) {
|
||||
&::before {
|
||||
background-color: $--n-success-color;
|
||||
background-color: map-get($--typography-header-prefix-color, 'success');
|
||||
}
|
||||
}
|
||||
@include m(warning-type) {
|
||||
&::before {
|
||||
background-color: $--n-warning-color;
|
||||
background-color: map-get($--typography-header-prefix-color, 'warning');
|
||||
}
|
||||
}
|
||||
@include m(error-type) {
|
||||
&::before {
|
||||
background-color: $--n-error-color;
|
||||
background-color: map-get($--typography-header-prefix-color, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -108,152 +114,172 @@ $--header-bar-width: (
|
||||
@include header-mixin('5');
|
||||
@include header-mixin('6');
|
||||
@include b(p) {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
@include once {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
margin: 12px 0 16px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
margin: 12px 0 16px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
color: $--n-secondary-text-color;
|
||||
color: map-get($--typography-p-text-color, 'default');
|
||||
@include m(primary-depth) {
|
||||
color: $--n-primary-text-color;
|
||||
color: map-get($--typography-p-text-color, 'primary-depth');
|
||||
}
|
||||
@include m(secondary-depth) {
|
||||
color: $--n-secondary-text-color;
|
||||
color: map-get($--typography-p-text-color, 'secondary-depth');
|
||||
}
|
||||
@include m(tertiary-depth) {
|
||||
color: $--n-tertiary-text-color;
|
||||
color: map-get($--typography-p-text-color, 'tertiary-depth');
|
||||
}
|
||||
}
|
||||
@include b(ul) {
|
||||
margin: 12px 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
@include once {
|
||||
@include b(ul) {
|
||||
margin: 12px 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding-left: 1.75em;
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding-left: 1.75em;
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@include b(ol) {
|
||||
margin: 12px 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding-left: 1.75em;
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
@include b(ol) {
|
||||
margin: 12px 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding-left: 1.75em;
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(li) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
line-height: 1.75em;
|
||||
margin-bottom: 0px;
|
||||
font-size: 14px;
|
||||
color: $--n-secondary-text-color;
|
||||
@include once {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
line-height: 1.75em;
|
||||
margin-bottom: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
color: map-get($--typography-li-text-color, 'default');
|
||||
}
|
||||
@include b(a) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
color: $--n-primary-color;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
@include once {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
cursor: pointer;
|
||||
}
|
||||
text-decoration-color: map-get($--typography-a-text-color, 'default');
|
||||
color: map-get($--typography-a-text-color, 'default');
|
||||
}
|
||||
@include b(text) {
|
||||
display: inline-block;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
color: $--n-secondary-text-color;
|
||||
@include once {
|
||||
display: inline-block;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
@include m(strong) {
|
||||
font-weight: 500;
|
||||
}
|
||||
@include m(italic) {
|
||||
font-style: italic;
|
||||
}
|
||||
@include m(underline) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
color: map-get($--typography-text-text-color, 'default');
|
||||
@include m(code) {
|
||||
line-height: 1.4;
|
||||
font-family: $--n-mono-font-family;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
color: $--n-secondary-text-color;
|
||||
padding: .15em .45em 0 .45em;
|
||||
border-radius: 3px;
|
||||
font-size: .9em;
|
||||
@include once {
|
||||
line-height: 1.4;
|
||||
font-family: $--n-mono-font-family;
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
box-sizing: border-box;
|
||||
padding: .15em .45em 0 .45em;
|
||||
border-radius: 3px;
|
||||
font-size: .9em;
|
||||
}
|
||||
color: map-get($--typography-code-text-color, 'default');
|
||||
background-color: $--typography-code-background-color;
|
||||
border: 1px solid $--typography-code-border-color;
|
||||
}
|
||||
@include m(default-type) {
|
||||
@include m(primary-depth) {
|
||||
color: $--n-primary-text-color;
|
||||
color: map-get($--typography-text-text-color, 'primary-depth');
|
||||
}
|
||||
@include m(secondary-depth) {
|
||||
color: $--n-secondary-text-color;
|
||||
color: map-get($--typography-text-text-color, 'secondary-depth');
|
||||
}
|
||||
@include m(tertiary-depth) {
|
||||
color: $--n-tertiary-text-color;
|
||||
color: map-get($--typography-text-text-color, 'tertiary-depth');
|
||||
}
|
||||
}
|
||||
@include not-m(default-type) {
|
||||
@include m(primary-depth) {
|
||||
opacity: $--n-primary-opacity;
|
||||
opacity: map-get($--typography-text-opacity, 'primary-depth');
|
||||
}
|
||||
@include m(secondary-depth) {
|
||||
opacity: $--n-secondary-opacity;
|
||||
opacity: map-get($--typography-text-opacity, 'secondary-depth');
|
||||
}
|
||||
@include m(tertiary-depth) {
|
||||
opacity: $--n-tertiary-opacity;
|
||||
opacity: map-get($--typography-text-opacity, 'tertiary-depth');
|
||||
}
|
||||
}
|
||||
@include m(strong) {
|
||||
font-weight: 500;
|
||||
}
|
||||
@include m(italic) {
|
||||
font-style: italic;
|
||||
}
|
||||
@include m(underline) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@include m(primary-type) {
|
||||
color: $--n-primary-color;
|
||||
color: map-get($--typography-text-text-color, 'primary');
|
||||
}
|
||||
@include m(info-type) {
|
||||
color: $--n-info-color;
|
||||
color: map-get($--typography-text-text-color, 'info');
|
||||
}
|
||||
@include m(success-type) {
|
||||
color: $--n-success-color;
|
||||
color: map-get($--typography-text-text-color, 'success');
|
||||
}
|
||||
@include m(warning-type) {
|
||||
color: $--n-warning-color;
|
||||
color: map-get($--typography-text-text-color, 'warning');
|
||||
}
|
||||
@include m(error-type) {
|
||||
color: $--n-error-color;
|
||||
color: map-get($--typography-text-text-color, 'error');
|
||||
}
|
||||
}
|
||||
@include b(hr) {
|
||||
margin: 12px 0;
|
||||
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
border-top: 1px solid $--n-divider-color;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
@include once {
|
||||
margin: 12px 0;
|
||||
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
border-top: 1px solid map-get($--typography-hr-border-color, 'default');
|
||||
}
|
||||
@include b(blockquote) {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
line-height: 1.75;
|
||||
margin: 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
border-left: 4px solid $--n-border-color;
|
||||
padding-left: 12px;
|
||||
color: $--n-secondary-text-color;
|
||||
@include m(align-text) {
|
||||
margin-left: -16px;
|
||||
@include once {
|
||||
line-height: 1.75;
|
||||
margin: 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding-left: 12px;
|
||||
@include m(align-text) {
|
||||
margin-left: -16px;
|
||||
}
|
||||
}
|
||||
border-left: 4px solid map-get($--typography-blockquote-prefix-color, 'default');
|
||||
color: map-get($--typography-blockquote-text-color, 'default');
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,55 @@
|
||||
@mixin setup-dark-typography {
|
||||
$--typography-code-background-color: $--n-code-background-color !global;
|
||||
|
||||
$--typography-header-text-color: (
|
||||
'default': $--n-primary-text-color
|
||||
) !global;
|
||||
$--typography-header-prefix-color: (
|
||||
'default': $--n-primary-color,
|
||||
'primary': $--n-primary-color,
|
||||
'error': $--n-error-color,
|
||||
'warning': $--n-warning-color,
|
||||
'success': $--n-success-color
|
||||
) !global;
|
||||
$--typography-p-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'primary-depth': $--n-primary-text-color,
|
||||
'secondary-depth': $--n-secondary-text-color,
|
||||
'tertiary-depth': $--n-tertiary-text-color
|
||||
) !global;
|
||||
$--typography-li-text-color: (
|
||||
'default': $--n-secondary-text-color
|
||||
) !global;
|
||||
$--typography-a-text-color: (
|
||||
'default': $--n-primary-color
|
||||
) !global;
|
||||
$--typography-hr-border-color: (
|
||||
'default': $--n-divider-color
|
||||
) !global;
|
||||
$--typography-blockquote-text-color: (
|
||||
'default': $--n-secondary-text-color
|
||||
) !global;
|
||||
$--typography-blockquote-prefix-color: (
|
||||
'default': $--n-border-color
|
||||
) !global;
|
||||
$--typography-text-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'primary-depth': $--n-primary-text-color,
|
||||
'secondary-depth': $--n-secondary-text-color,
|
||||
'tertiary-depth': $--n-tertiary-text-color,
|
||||
'primary': $--n-primary-color,
|
||||
'success': $--n-success-color,
|
||||
'warning': $--n-warning-color,
|
||||
'error': $--n-error-color,
|
||||
'info': $--n-info-color
|
||||
) !global;
|
||||
$--typography-text-opacity: (
|
||||
'primary-depth': $--n-primary-opacity,
|
||||
'secondary-depth': $--n-secondary-opacity,
|
||||
'tertiary-depth': $--n-tertiary-opacity,
|
||||
) !global;
|
||||
$--typography-code-text-color: (
|
||||
'default': $--n-secondary-text-color
|
||||
) !global;
|
||||
$--typography-code-background-color: $--n-code-background-color !global;
|
||||
$--typography-code-border-color: transparent !global;
|
||||
}
|
||||
@ -1,4 +1,55 @@
|
||||
@mixin setup-light-typography {
|
||||
|
||||
$--typography-header-text-color: (
|
||||
'default': $--n-primary-text-color
|
||||
) !global;
|
||||
$--typography-header-prefix-color: (
|
||||
'default': $--n-primary-color,
|
||||
'primary': $--n-primary-color,
|
||||
'error': $--n-error-color,
|
||||
'warning': $--n-warning-color,
|
||||
'success': $--n-success-color
|
||||
) !global;
|
||||
$--typography-p-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'primary-depth': $--n-primary-text-color,
|
||||
'secondary-depth': $--n-secondary-text-color,
|
||||
'tertiary-depth': $--n-tertiary-text-color
|
||||
) !global;
|
||||
$--typography-li-text-color: (
|
||||
'default': $--n-secondary-text-color
|
||||
) !global;
|
||||
$--typography-a-text-color: (
|
||||
'default': $--n-primary-color
|
||||
) !global;
|
||||
$--typography-hr-border-color: (
|
||||
'default': $--n-divider-color
|
||||
) !global;
|
||||
$--typography-blockquote-text-color: (
|
||||
'default': $--n-secondary-text-color
|
||||
) !global;
|
||||
$--typography-blockquote-prefix-color: (
|
||||
'default': $--n-border-color
|
||||
) !global;
|
||||
$--typography-text-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'primary-depth': $--n-primary-text-color,
|
||||
'secondary-depth': $--n-secondary-text-color,
|
||||
'tertiary-depth': $--n-tertiary-text-color,
|
||||
'primary': $--n-primary-color,
|
||||
'success': $--n-success-color,
|
||||
'warning': $--n-warning-color,
|
||||
'error': $--n-error-color,
|
||||
'info': $--n-info-color
|
||||
) !global;
|
||||
$--typography-text-opacity: (
|
||||
'primary-depth': $--n-primary-opacity,
|
||||
'secondary-depth': $--n-secondary-opacity,
|
||||
'tertiary-depth': $--n-tertiary-opacity,
|
||||
) !global;
|
||||
$--typography-code-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
) !global;
|
||||
$--typography-code-background-color: $--n-code-background-color !global;
|
||||
$--typography-code-border-color: $--n-border-color !global;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user