amis-rpc-design/libs/amis/packages/amis-ui/scss/_variables.scss
2023-10-07 19:42:30 +08:00

439 lines
9.0 KiB
SCSS

// 这里只放 sass 里的变量,因为有很多颜色计算,为了保持和之前的兼容性所以还保留这些变量,但后续会通过新增 css 自定义属性的方式逐渐替换
// 类名前缀
$ns: '' !default;
$remFactor: 16px !default;
$devices: (
m: '(max-width: 768px)',
pc: '(min-width: 769px)'
) !default;
// 生成颜色的工具有很多,可以参考这些链接来弄。
// https://tailwind.ink/
// https://www.tailwindshades.com/
// https://tailwind.simeongriggs.dev/
// https://javisperez.github.io/tailwindcolorshades/#/
// v1 版本 {
// color50: tint($color, 0.95);
// color100: tint($color, 0.9);
// color200: tint($color, 0.75);
// color300: tint($color, 0.6);
// color400: tint($color, 0.3);
// color500: $color;
// color600: shade($color, 0.9);
// color700: shade($color, 0.6);
// color800: shade($color, 0.45);
// color900: shade($color, 0.3);
// }
$colors: (
black: #000,
white: #fff,
primary: #007bff,
secondary: #6c757d,
success: #28a745,
info: #007bff,
warning: #fad733,
danger: #dc3545,
light: #f8f9fa,
dark: #343a40,
gray: (
50: #f9fafb,
100: #f3f4f6,
200: #e5e7eb,
300: #d1d5db,
400: #9ca3af,
500: #6b7280,
600: #4b5563,
700: #374151,
800: #1f2937,
900: #111827
),
red: (
50: #fef2f2,
100: #fee2e2,
200: #fecaca,
300: #fca5a5,
400: #f87171,
500: #ef4444,
600: #dc2626,
700: #b91c1c,
800: #991b1b,
900: #7f1d1d
),
yellow: (
50: #fffbeb,
100: #fef3c7,
200: #fde68a,
300: #fcd34d,
400: #fbbf24,
500: #f59e0b,
600: #d97706,
700: #b45309,
800: #92400e,
900: #78350f
),
green: (
50: #ecfdf5,
100: #d1fae5,
200: #a7f3d0,
300: #6ee7b7,
400: #34d399,
500: #10b981,
600: #059669,
700: #047857,
800: #065f46,
900: #064e3b
),
blue: (
50: #eff6ff,
100: #dbeafe,
200: #bfdbfe,
300: #93c5fd,
400: #60a5fa,
500: #3b82f6,
600: #2563eb,
700: #1d4ed8,
800: #1e40af,
900: #1e3a8a
),
cyan: (
50: #ecfeff,
100: #cffafe,
200: #a5f3fc,
300: #67e8f9,
400: #22d3ee,
500: #06b6d4,
600: #0891b2,
700: #0e7490,
800: #155e75,
900: #164e63
),
indigo: (
50: #eef2ff,
100: #e0e7ff,
200: #c7d2fe,
300: #a5b4fc,
400: #818cf8,
500: #6366f1,
600: #4f46e5,
700: #4338ca,
800: #3730a3,
900: #312e81
),
purple: (
50: #f5f3ff,
100: #ede9fe,
200: #ddd6fe,
300: #c4b5fd,
400: #a78bfa,
500: #8b5cf6,
600: #7c3aed,
700: #6d28d9,
800: #5b21b6,
900: #4c1d95
),
pink: (
50: #fdf2f8,
100: #fce7f3,
200: #fbcfe8,
300: #f9a8d4,
400: #f472b6,
500: #ec4899,
600: #db2777,
700: #be185d,
800: #9d174d,
900: #831843
)
) !default;
// 颜色 Alias 不要直接修改, 直接修改 colors 对象。
$white: map-get($colors, white);
$gray50: map-get(
map-get($colors, gray),
50
); // node-sass 不支持多个参数用法,所以先这么写。
$gray100: map-get(map-get($colors, gray), 100) !default;
$gray200: map-get(map-get($colors, gray), 200) !default;
$gray300: map-get(map-get($colors, gray), 300) !default;
$gray400: map-get(map-get($colors, gray), 400) !default;
$gray500: map-get(map-get($colors, gray), 500) !default;
$gray600: map-get(map-get($colors, gray), 600) !default;
$gray700: map-get(map-get($colors, gray), 700) !default;
$gray800: map-get(map-get($colors, gray), 800) !default;
$gray900: map-get(map-get($colors, gray), 900) !default;
$gray: $gray500 !default;
$red: map-get(map-get($colors, red), 500) !default;
$yellow: map-get(map-get($colors, yellow), 500) !default;
$green: map-get(map-get($colors, green), 500) !default;
$blue: map-get(map-get($colors, blue), 500) !default;
$cyan: map-get(map-get($colors, cyan), 500) !default;
$indigo: map-get(map-get($colors, indigo), 500) !default;
$purple: map-get(map-get($colors, purple), 500) !default;
$pink: map-get(map-get($colors, pink), 500) !default;
$black: map-get($colors, black) !default;
$primary: map-get($colors, 'primary') !default;
$secondary: map-get($colors, 'secondary') !default;
$success: map-get($colors, 'success') !default;
$info: map-get($colors, 'info') !default;
$warning: map-get($colors, 'warning') !default;
$danger: map-get($colors, 'danger') !default;
$light: map-get($colors, 'light') !default;
$dark: map-get($colors, 'dark') !default;
$spacing: (
//
// 下面是参考 tailwind
//
px: px2rem(1px),
0: 0,
none: 0,
0.5: px2rem(2px),
1: px2rem(4px),
1.5: px2rem(6px),
2: px2rem(8px),
2.5: px2rem(10px),
3: px2rem(12px),
3.5: px2rem(14px),
4: px2rem(16px),
5: px2rem(20px),
6: px2rem(24px),
7: px2rem(28px),
8: px2rem(32px),
9: px2rem(36px),
10: px2rem(40px),
11: px2rem(44px),
12: px2rem(48px),
14: px2rem(56px),
16: px2rem(64px),
18: px2rem(72px),
20: px2rem(80px),
24: px2rem(96px),
28: px2rem(112px),
32: px2rem(128px),
36: px2rem(144px),
40: px2rem(160px),
44: px2rem(176px),
48: px2rem(192px),
52: px2rem(208px),
56: px2rem(224px),
60: px2rem(240px),
64: px2rem(256px),
72: px2rem(288px),
80: px2rem(320px),
96: px2rem(384px)
) !default;
$inset: map-merge(
$spacing,
(
auto: auto,
'1/2': 50%,
'1/3': 33.333333%,
'2/3': 66.666667%,
'1/4': 25%,
'2/4': 50%,
'3/4': 75%,
'full': 100%
)
) !default;
$widths: map-merge(
$spacing,
(
auto: auto,
1x: 1em,
2x: 2em,
3x: 3em,
'1/2': 50%,
'1/3': 33.333333%,
'2/3': 66.666667%,
'1/4': 25%,
'2/4': 50%,
'3/4': 75%,
'1/5': 20%,
'2/5': 40%,
'3/5': 60%,
'4/5': 80%,
'1/6': 16.666667%,
'2/6': 33.333333%,
'3/6': 50%,
'4/6': 66.666667%,
'5/6': 83.333333%,
'1/12': 8.333333%,
'2/12': 16.666667%,
'3/12': 25%,
'4/12': 33.333333%,
'5/12': 41.666667%,
'6/12': 50%,
'7/12': 58.333333%,
'8/12': 66.666667%,
'9/12': 75%,
'10/12': 83.333333%,
'11/12': 91.666667%,
full: 100%,
screen: 100vw,
min: min-content,
max: max-content
)
) !default;
$minWidths: (
none: none,
0: 0rem,
xs: 20rem,
sm: 24rem,
md: 28rem,
lg: 32rem,
xl: 36rem,
2xl: 42rem,
3xl: 48rem,
4xl: 56rem,
5xl: 64rem,
6xl: 72rem,
7xl: 80rem,
full: 100%,
min: min-content,
max: max-content,
prose: 65ch
) !default;
$maxWidths: (
none: none,
0: 0rem,
xs: 20rem,
sm: 24rem,
md: 28rem,
lg: 32rem,
xl: 36rem,
2xl: 42rem,
3xl: 48rem,
4xl: 56rem,
5xl: 64rem,
6xl: 72rem,
7xl: 80rem,
full: 100%,
min: min-content,
max: max-content,
prose: 65ch
) !default;
$heights: map-merge(
$spacing,
(
auto: auto,
'1/2': 50%,
'1/3': 33.333333%,
'2/3': 66.666667%,
'1/4': 25%,
'2/4': 50%,
'3/4': 75%,
'1/5': 20%,
'2/5': 40%,
'3/5': 60%,
'4/5': 80%,
'1/6': 16.666667%,
'2/6': 33.333333%,
'3/6': 50%,
'4/6': 66.666667%,
'5/6': 83.333333%,
full: 100%,
screen: 100vh
)
) !default;
$maxHeights: map-merge(
$spacing,
(
full: 100%,
screen: 100vh
)
) !default;
$fontSizes: (
xs: 0.75rem 1rem,
sm: 0.875rem 1.25rem,
base: 1rem 1.5rem,
md: 1.125rem 1.75rem,
lg: 1.25rem 1.75rem,
xl: 1.5rem 2rem,
2xl: 1.875rem 2.25rem,
3xl: 2.25rem 2.5rem,
4xl: 3rem 1,
5xl: 3.75rem 1,
6xl: 4.5rem 1,
7xl: 6rem 1,
8xl: 8rem 1
) !default;
$borderColor: $gray300;
$borderRadiuses: (
'none': 0px,
'sm': 0.125rem,
'default': 0.25rem,
'md': 0.375rem,
'lg': 0.5rem,
'xl': 0.75rem,
'2xl': 1rem,
'3xl': 1.5rem,
'full': 9999px
) !default;
$borderWidths: (
'default': 1px,
'0': 0px,
'2': 2px,
'4': 4px,
'8': 8px
) !default;
$boxShadows: (
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'default': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'lg':
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
'xl':
'0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
'none': none
) !default;
// 窗口适配
// @deprecated 不打算支持这么多视图,只区分 pc 和 移动端
// 改用 devices 了
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$text-color: #58666e !default;
// 部分遍历难以用自定义属性替换,所以保留
$Grid-columns: 12 !default;
$Grid-gutterWidth: px2rem(16px) !default;
$zindex-affix: 900 !default;
$zindex-dropdown: 1000 !default;
$zindex-sticky: 900 !default;
$zindex-fixed: 1200 !default;
$zindex-popover: 1300 !default;
$zindex-modal: 1400 !default;
$zindex-contextmenu: 1500 !default;
$zindex-tooltip: 1600 !default;
$zindex-toast: 2000 !default;
$zindex-top: 3000 !default;
$zindex-debug: 4000 !default;
$zindex-spinner-overlay: 11 !default;
$Form--horizontal-columns: 12;
$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
$Number-handler-mode: 'vertical';
$Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;