2025/2/8第一次更新

This commit is contained in:
爱吃咸鱼小猫咪
2025-02-08 18:50:38 +08:00
commit d7af560866
26519 changed files with 5046029 additions and 0 deletions
+370
View File
@@ -0,0 +1,370 @@
/** 图鸟变量 */
@use 'sass:map';
@use 'sass:math';
@use '../mixins/function.scss' as *;
// 类型
$types: primary, success, warning, danger, error, info;
// 内置颜色的值
$inner-color-names: 'red', 'purplered', 'purple', 'bluepurple', 'aquablue',
'blue', 'indigo', 'cyan', 'teal', 'green', 'yellowgreen', 'lime', 'yellow',
'orangeyellow', 'orange', 'orangered', 'brown', 'grey', 'gray';
$inner-colors: (
'red': (
'base': #e83a30,
'dark': #ba2e26,
'disabled': #f39c97,
'light': #fad8d6,
),
'purplered': (
'base': #e72f8c,
'dark': #b9266f,
'disabled': #f397c5,
'light': #fad5e8,
),
'purple': (
'base': #892fe8,
'dark': #6e26ba,
'disabled': #c497f3,
'light': #e7d5fa,
),
'bluepurple': (
'base': #5f4fd9,
'dark': #4c3fae,
'disabled': #afa7ec,
'light': #dfdcf7,
),
'aquablue': (
'base': #3646ff,
'dark': #2b38cc,
'disabled': #9aa2ff,
'light': #d7daff,
),
'blue': (
'base': #3d7eff,
'dark': #3165cc,
'disabled': #9ebeff,
'light': #d8e5ff,
),
'indigo': (
'base': #31c9e8,
'dark': #27a1ba,
'disabled': #98e4f3,
'light': #d6f4fa,
),
'cyan': (
'base': #2de8bd,
'dark': #24ba97,
'disabled': #96f3de,
'light': #d5faf2,
),
'teal': (
'base': #24f083,
'dark': #1dc069,
'disabled': #91f7c1,
'light': #d3fce6,
),
'green': (
'base': #31e749,
'dark': #27b93a,
'disabled': #98f3a4,
'light': #d6fadb,
),
'yellowgreen': (
'base': #a4e82f,
'dark': #82ba26,
'disabled': #d1f397,
'light': #edfad5,
),
'lime': (
'base': #d5eb00,
'dark': #aabc00,
'disabled': #e9f57f,
'light': #f7fbcc,
),
'yellow': (
'base': #fff420,
'dark': #ccc21a,
'disabled': #fff88f,
'light': #fffdd2,
),
'orangeyellow': (
'base': #ffca28,
'dark': #cca220,
'disabled': #ffe493,
'light': #fff4d4,
),
'orange': (
'base': #ffa726,
'dark': #cc851e,
'disabled': #ffd392,
'light': #ffedd4,
),
'orangered': (
'base': #ff7043,
'dark': #cc5a36,
'disabled': #ffb7a1,
'light': #ffe2d9,
),
'brown': (
'base': #914f2c,
'dark': #743f23,
'disabled': #c8a795,
'light': #e9dcd5,
),
'grey': (
'base': #78909c,
'dark': #5f7e8b,
'disabled': #c6d1d8,
'light': #e4e9ec,
),
'gray': (
'base': #aaaaaa,
'dark': #838383,
'disabled': #e6e6e6,
'light': #f8f7f8,
),
) !default;
// 炫酷颜色值
$cool-colors: (
'1': (
'begin': #f5317f,
'end': #ff7c6e,
),
'2': (
'begin': #ca26ff,
'end': #f360a7,
),
'3': (
'begin': #a26ffc,
'end': #9d12ff,
),
'4': (
'begin': #aa77f0,
'end': #e871e5,
),
'5': (
'begin': #40a0f7,
'end': #4866e6,
),
'6': (
'begin': #209cff,
'end': #68e0cf,
),
'7': (
'begin': #00c3ff,
'end': #58fff5,
),
'8': (
'begin': #00d1ff,
'end': #69ff97,
),
'9': (
'begin': #0fd893,
'end': #29ecbf,
),
'10': (
'begin': #0fd850,
'end': #f9f047,
),
'11': (
'begin': #24fe41,
'end': #f7fd47,
),
'12': (
'begin': #d6ff7f,
'end': #00f657,
),
'13': (
'begin': #fa709a,
'end': #fee140,
),
'14': (
'begin': #fe5e9c,
'end': #f1aa76,
),
'15': (
'begin': #ff3181,
'end': #ff8331,
),
'16': (
'begin': #ed1c24,
'end': #fece12,
),
);
// 颜色值
$colors: () !default;
$colors: map.deep-merge(
(
'white': #ffffff,
'black': #000000,
'primary': (
'base': #01beff,
),
'success': (
'base': #00d886,
),
'warning': (
'base': #fbbd12,
),
'danger': (
'base': #ff444f,
),
'error': (
'base': #ff444f,
),
'info': (
'base': #9c9c9c,
),
),
$colors
);
$color-white: map.get($colors, 'white') !default;
$color-black: map.get($colors, 'black') !default;
$color-primary: map.get($colors, 'primary', 'base') !default;
$color-success: map.get($colors, 'success', 'base') !default;
$color-warning: map.get($colors, 'warning', 'base') !default;
$color-danger: map.get($colors, 'danger', 'base') !default;
$color-error: map.get($colors, 'error', 'base') !default;
$color-info: map.get($colors, 'info', 'base') !default;
// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level(
$type,
$number,
$mode: 'light',
$mix-color: $color-white
) {
$colors: map.deep-merge(
(
$type: (
'#{$mode}-#{$number}':
mix(
$mix-color,
map.get($colors, $type, 'base'),
math.percentage(math.div($number, 10))
),
),
),
$colors
) !global;
}
// $colors.primary.light-i
@each $type in $types {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, 'light', $color-white);
}
}
// --tn-color-primary-dark-2
@each $type in $types {
@include set-color-mix-level($type, 2, 'dark', $color-black);
}
$text-color: () !default;
$text-color: map.merge(
(
'primary': #080808,
'secondary': #9c9c9c,
'placeholder': #838383,
'disabled': #e6e6e6,
),
$text-color
);
$bg-color: () !default;
$bg-color: map.merge(
(
'': #ffffff,
'page': #f4f4f4,
'overlay': #ffffff,
'mask': rgba(0, 0, 0, 0.5),
),
$bg-color
);
$font-size: () !default;
$font-size: map.merge(
(
'4xl': 32px,
'3xl': 26px,
'2xl': 20px,
'xl': 18px,
'lg': 16px,
'default': 14px,
'sm': 13px,
'xs': 12px,
),
$font-size
);
$padding-margin-size: () !default;
$padding-margin-size: map.merge(
(
'xl': 25px,
'lg': 20px,
'default': 15px,
'sm': 10px,
'xs': 5px,
'0': 0px,
),
$padding-margin-size
);
$border-width: () !default;
$border-width: map.merge(
(
'bold': 3px,
'default': 1px,
),
$border-width
);
$border-radius: () !default;
$border-radius: map.merge(
(
'default': 7.5px,
'round': 2500px,
),
$border-radius
);
$box-shadow: () !default;
$box-shadow: map.merge(
(
'default': (
0px 5px 30px -9.5px,
),
'sm': (
0px 5px 30px -20px,
),
'md': (
0px 5px 10px -1px,
0px 0px 5px -2px,
),
'lg': (
0px 10px 15px -2px,
0px 5px 10px -2px,
),
),
$box-shadow
);
$box-shadow-colors: () !default;
$box-shadow-colors: map.merge(
(
'default': rgba(0, 0, 0, 0.1),
'sm': rgba(0, 0, 0, 0.1),
'md': rgba(0, 0, 0, 0.1),
'lg': rgba(0, 0, 0, 0.1),
),
$box-shadow-colors
);