UI-Kit/src/css/basic-variables.css at main · Accesserty/UI-Kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/*************************
    Basic
*************************/

:root {
  /* colors */
  --color-black: oklch(0.1398 0 0);
  --color-white: oklch(0.994 0 0);
  --color-pure-black: oklch(0 0 0);
  --color-pure-white: oklch(1 0 0);

  --color-gray-50: oklch(0.9731 0 0);
  --color-gray-100: oklch(0.9466 0 0);
  --color-gray-200: oklch(0.8689 0 0);
  --color-gray-300: oklch(0.7894 0 0);
  --color-gray-400: oklch(0.7079 0 0);
  --color-gray-500: oklch(0.6239 0 0);
  --color-gray-600: oklch(0.537 0 0);
  --color-gray-700: oklch(0.4464 0 0);
  --color-gray-800: oklch(0.351 0 0);
  --color-gray-900: oklch(0.2484 0 0);

  --color-blue-50: oklch(0.9828 0.008535318967846529 247.91230844328572);
  --color-blue-100: oklch(0.8608 0.07184533104304036 248.67189806368867);
  --color-blue-200: oklch(0.7797 0.1169846984699502 249.18791780935626);
  --color-blue-300: oklch(0.7031 0.16 251.4);
  --color-blue-400: oklch(0.638 0.19786592615268672 254.3915939453434);
  --color-blue-500: oklch(0.5586 0.1907218934980594 256.0020354109037);
  --color-blue-600: oklch(0.4628 0.156 255.66);
  --color-blue-700: oklch(0.3643 0.11800168747763046 254.52465804333002);
  --color-blue-800: oklch(0.2586 0.07670613100095396 251.70043546201316);
  --color-blue-900: oklch(0.1378 0.031 239.31);

  --color-green-50: oklch(0.9716 0.021 134.08);
  --color-green-100: oklch(0.8513 0.111 135.44);
  --color-green-200: oklch(0.7985 0.15 136.26);
  --color-green-300: oklch(0.7514 0.185 137.04);
  --color-green-400: oklch(0.6601 0.171 137.18);
  --color-green-500: oklch(0.5457 0.139 137.11);
  --color-green-600: oklch(0.422 0.104 136.86);
  --color-green-700: oklch(0.2917 0.066 136.57);
  --color-green-800: oklch(0.1438 0.023 136.35);
  --color-green-900: oklch(0 0 0);

  --color-yellow-50: oklch(0.9759 0.02381894414643337 83.06060570742507);
  --color-yellow-100: oklch(0.8698 0.128 81.2);
  --color-yellow-200: oklch(0.8315 0.15681888825079074 78.05241467152487);
  --color-yellow-300: oklch(0.7973 0.17 71.82);
  --color-yellow-400: oklch(0.6852 0.147 71.58);
  --color-yellow-500: oklch(0.5589 0.119 72.49);
  --color-yellow-600: oklch(0.425 0.09000059639475037 74.1750818737353);
  --color-yellow-700: oklch(0.2794 0.058 78.3);
  --color-yellow-800: oklch(0.1016 0.020819354526502735 93.48657333418616);
  --color-yellow-900: oklch(0 0 0);

  --color-red-50: oklch(0.9779 0.010749906051195026 17.34037927927983);
  --color-red-100: oklch(0.8391 0.086 19.11);
  --color-red-200: oklch(0.7447 0.149 21.38);
  --color-red-300: oklch(0.6709 0.208 24.76);
  --color-red-400: oklch(0.6281 0.245 28.22);
  --color-red-500: oklch(0.5722 0.233 29.08);
  --color-red-600: oklch(0.4747 0.193 29.04);
  --color-red-700: oklch(0.3717 0.15 28.95);
  --color-red-800: oklch(0.2611 0.104 28.78);
  --color-red-900: oklch(0.1363 0.053 28.14);

  --color-purple-300: oklch(0.7221 0.112 291.14);
  --color-purple-500: oklch(0.502 0.206 283.57);

  /* Space & Shape */
  --radius: 0.25rem;
  --radius-inner: 0.1875rem;

  --spacing-xxxs: 0.125rem;
  /* 2px */
  --spacing-xxs: 0.25rem;
  /* 4px */
  --spacing-xs: 0.375rem;
  /* 6px */
  --spacing-s: 0.625rem;
  /* 10px */
  --spacing-m: 1rem;
  /* 16px */
  --spacing-l: 1.625rem;
  /* 26px */
  --spacing-xl: 2.625rem;
  /* 42px */
  --spacing-xxl: 4rem;
  /* 64px */
  --spacing-xxxl: 7.5rem;
  /* 120px */

  /* Font */
  --font-size-base: 1rem;
  --font-family: "Noto Sans TC", sans-serif;

  /* Breakpoint */
  --breakpoint-375: 375px;
  --breakpoint-480: 480px;
  --breakpoint-768: 768px;
  --breakpoint-992: 992px;
  --breakpoint-1280: 1280px;
  --breakpoint-1440: 1440px;
  --breakpoint-1600: 1600px;
  --breakpoint-1920: 1920px;

}