@tidbcloud/uikit 2.0.0-beta.7 → 2.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.8
4
+
5
+ ### Minor Changes
6
+
7
+ - add new theming color
8
+
3
9
  ## 2.0.0-beta.7
4
10
 
5
11
  ### Patch Changes
@@ -1,9 +1,9 @@
1
1
  import { default as React } from 'react';
2
2
  import { BoxProps } from '../../primitive/index.js';
3
- import { Colors } from '../../theme/index.js';
3
+ import { Color } from '../../theme/index.js';
4
4
 
5
5
  export interface DotProps extends BoxProps {
6
- color: keyof typeof Colors;
6
+ color: Color;
7
7
  size?: number;
8
8
  }
9
9
  export declare const Dot: React.FC<DotProps>;
@@ -1,9 +1,9 @@
1
1
  import { default as React } from 'react';
2
2
  import { BoxProps } from '../../primitive/index.js';
3
- import { Colors } from '../../theme/index.js';
3
+ import { Color } from '../../theme/index.js';
4
4
 
5
5
  export interface DotProps extends BoxProps {
6
- color: keyof typeof Colors;
6
+ color: Color;
7
7
  size?: number;
8
8
  }
9
9
  export declare const Dot: React.FC<DotProps>;
@@ -1,129 +1,249 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const gray = [
4
- "#FDFDFD",
5
- "#F9F9F9",
6
- "#F4F4F4",
7
- "#EDEDED",
8
- "#E6E6E6",
9
- "#BBBBBB",
10
- "#737373",
11
- "#555555",
12
- "#333333",
13
- "#191919"
3
+ const carbon = [
4
+ "#FFFFFF",
5
+ "#F9FAFB",
6
+ "#F3F5F7",
7
+ "#EDF0F1",
8
+ "#E3E8EA",
9
+ "#C8CED0",
10
+ "#9FAAAD",
11
+ "#6C7679",
12
+ "#3D4143",
13
+ "#262A2C"
14
14
  ];
15
- const blue = [
16
- "#FAFDFF",
17
- "#F3FAFE",
18
- "#E7F7FE",
19
- "#CEEDFC",
20
- "#B6E4FB",
21
- "#85D2F8",
22
- "#54C0F5",
23
- "#0CA6F2",
24
- "#0B88E0",
25
- "#095EB2"
15
+ const peacock = [
16
+ "#FBFDFE",
17
+ "#F4FAFD",
18
+ "#EAF5FA",
19
+ "#E0F0F8",
20
+ "#C0E1F1",
21
+ "#96CDE9",
22
+ "#6CBAE0",
23
+ "#2D9CD2",
24
+ "#1480B8",
25
+ "#0B628D"
26
26
  ];
27
- const cyan = blue;
28
- const sky = blue;
29
27
  const red = [
30
28
  "#FFFCFC",
31
29
  "#FEF7F7",
32
- "#FDEFEF",
30
+ "#FCEFEF",
33
31
  "#FBE7E7",
34
- "#F8CECE",
35
- "#F3AEAE",
36
- "#F08D83",
37
- "#E65C5C",
38
- "#C5434E",
39
- "#851D38"
32
+ "#F7CECE",
33
+ "#F3ADAD",
34
+ "#EE8D8D",
35
+ "#EB6565",
36
+ "#BF404B",
37
+ "#931F33"
40
38
  ];
41
39
  const green = [
42
40
  "#FCFEFC",
43
- "#F6FDF8",
41
+ "#F6FCF8",
44
42
  "#EEFAF2",
45
43
  "#E5F7EB",
46
44
  "#CBF0D7",
47
- "#A8E5BD",
48
- "#7BE092",
45
+ "#A8E5BC",
46
+ "#86DBA2",
49
47
  "#52CC7A",
50
- "#3BAF6D",
51
- "#1A7653"
52
- ];
53
- const purple = [
54
- "#F9F5FF",
55
- "#F3E4FD",
56
- "#E5CAFC",
57
- "#D1ADF7",
58
- "#BE96EF",
59
- "#A273E5",
60
- "#7D54C4",
61
- "#5D39A4",
62
- "#402484",
63
- "#2B166D"
64
- ];
65
- const slate = [
66
- "#FDFDFD",
67
- "#F9FAFB",
68
- "#F4F6F8",
69
- "#ECF0F4",
70
- "#E5ECEF",
71
- "#CBD7DD",
72
- "#85A1AE",
73
- "#517889",
74
- "#305C70",
75
- "#18475C"
48
+ "#3BAF6B",
49
+ "#1B7E4D"
76
50
  ];
77
51
  const yellow = [
78
52
  "#FFFDFA",
79
- "#FEFBF4",
80
- "#FEF7E8",
53
+ "#FEFBF3",
54
+ "#FEF6E8",
81
55
  "#FDF2DC",
82
- "#FBE6BA",
83
- "#F9D48B",
84
- "#F7C550",
56
+ "#FBE5BA",
57
+ "#F9D58B",
58
+ "#F6C35D",
85
59
  "#F2AA18",
86
60
  "#D08A11",
87
- "#8C5307"
88
- ];
89
- const themeColors = {
90
- gray,
91
- sky,
92
- cyan,
93
- red,
94
- yellow,
95
- green,
96
- slate,
97
- blue,
98
- purple
99
- };
100
- const Colors = {
101
- black: "#111111",
102
- white: "#FFFFFF",
103
- transparent: "transparent",
104
- red: themeColors.red[5],
105
- yellow: themeColors.yellow[5],
106
- green: themeColors.green[5],
107
- blue: themeColors.blue[5],
108
- purple: themeColors.purple[5],
109
- gray: themeColors.gray[5],
110
- cyan: themeColors.cyan[5],
111
- hover: themeColors.gray[2],
112
- disabled: themeColors.gray[5],
113
- /** primary theme color */
114
- primary: themeColors.blue[7],
115
- success: themeColors.green[7],
116
- alert: themeColors.red[7],
117
- warning: themeColors.yellow[7]
118
- };
119
- exports.Colors = Colors;
61
+ "#AE6D0C"
62
+ ];
63
+ const aqua = [
64
+ "#FBFEFE",
65
+ "#F5FCFC",
66
+ "#ECF9F9",
67
+ "#E2F5F5",
68
+ "#C6ECEC",
69
+ "#9FDFDF",
70
+ "#79D2D2",
71
+ "#40BFBF",
72
+ "#29A3A3",
73
+ "#24868F"
74
+ ];
75
+ const purple = [
76
+ "#FEFCFE",
77
+ "#FBF8FD",
78
+ "#F8F0FC",
79
+ "#F5E9FA",
80
+ "#EAD3F6",
81
+ "#DCB5EF",
82
+ "#CE98E9",
83
+ "#B96CE0",
84
+ "#8A40BF",
85
+ "#6E3399"
86
+ ];
87
+ const rosy = [
88
+ "#FFFBFC",
89
+ "#FEF6F9",
90
+ "#FDEDF2",
91
+ "#FCE3EC",
92
+ "#F9C8D8",
93
+ "#F5A3BE",
94
+ "#F17EA5",
95
+ "#EB477E",
96
+ "#CA3372",
97
+ "#A02156"
98
+ ];
99
+ const violet = [
100
+ "#FCFCFE",
101
+ "#F7F7FD",
102
+ "#F0EFFB",
103
+ "#E8E7F9",
104
+ "#D1CEF3",
105
+ "#B2ADEB",
106
+ "#948DE2",
107
+ "#665CD6",
108
+ "#4A40BF",
109
+ "#383399"
110
+ ];
111
+ const thyme = [
112
+ "#FCFEFD",
113
+ "#F8FBFA",
114
+ "#F2F8F5",
115
+ "#EBF4F0",
116
+ "#D7EAE0",
117
+ "#BCDBCC",
118
+ "#A2CDB8",
119
+ "#7AB899",
120
+ "#609F85",
121
+ "#3A7864"
122
+ ];
123
+ const airy = [
124
+ "#FDFDFE",
125
+ "#F9FBFD",
126
+ "#F4F7FB",
127
+ "#EEF4F9",
128
+ "#DEE8F2",
129
+ "#C7D9EA",
130
+ "#B1CAE2",
131
+ "#90B3D5",
132
+ "#698CB7",
133
+ "#385E94"
134
+ ];
135
+ const mauve = [
136
+ "#FDFDFE",
137
+ "#FAF9FC",
138
+ "#F5F4F8",
139
+ "#F0EEF5",
140
+ "#E1DDEB",
141
+ "#CDC7DD",
142
+ "#B8B1D0",
143
+ "#9A8FBC",
144
+ "#6F6699",
145
+ "#4A476B"
146
+ ];
147
+ const navy = [
148
+ "#FAFBFD",
149
+ "#F3F5F9",
150
+ "#E8EBF3",
151
+ "#DCE0ED",
152
+ "#BAC2DA",
153
+ "#8B99C1",
154
+ "#5D70A9",
155
+ "#183384",
156
+ "#10246E",
157
+ "#0B195F"
158
+ ];
159
+ const sky = [
160
+ "#FAFDFF",
161
+ "#F3FBFE",
162
+ "#E7F6FE",
163
+ "#DBF2FD",
164
+ "#B6E4FB",
165
+ "#85D3F9",
166
+ "#55C1F6",
167
+ "#0CA6F2",
168
+ "#0881D0",
169
+ "#0967AA"
170
+ ];
171
+ const magenta = [
172
+ "#FEFAFD",
173
+ "#FCF3FA",
174
+ "#F9E6F4",
175
+ "#F6DAEF",
176
+ "#EDB5DF",
177
+ "#E184C9",
178
+ "#D454B4",
179
+ "#C20A94",
180
+ "#AA098F",
181
+ "#8F0879"
182
+ ];
183
+ const ocher = [
184
+ "#FEFCFB",
185
+ "#FDF9F4",
186
+ "#FBF2E9",
187
+ "#F9ECDE",
188
+ "#F4D9BE",
189
+ "#ECBF92",
190
+ "#E4A567",
191
+ "#D97F26",
192
+ "#C26522",
193
+ "#9F4C11"
194
+ ];
195
+ const mustard = [
196
+ "#FDFEFC",
197
+ "#FAFDF7",
198
+ "#F5FAEF",
199
+ "#F0F8E7",
200
+ "#E0F1D0",
201
+ "#CCE8B0",
202
+ "#B8DF90",
203
+ "#99D161",
204
+ "#788946",
205
+ "#5C9933"
206
+ ];
207
+ const blue = [
208
+ "#FAFBFE",
209
+ "#F3F6FC",
210
+ "#E7EDF9",
211
+ "#DAE3F6",
212
+ "#B6C8EC",
213
+ "#85A3DF",
214
+ "#547ED3",
215
+ "#0B47C0",
216
+ "#0938A8",
217
+ "#03247C"
218
+ ];
219
+ const gray = [
220
+ "#FFFFFF",
221
+ "#FCFCFC",
222
+ "#F9F9F9",
223
+ "#F5F5F5",
224
+ "#ECECEC",
225
+ "#D9D9D9",
226
+ "#B3B3B3",
227
+ "#8C8C8C",
228
+ "#4D4D4D",
229
+ "#292929"
230
+ ];
231
+ exports.airy = airy;
232
+ exports.aqua = aqua;
120
233
  exports.blue = blue;
121
- exports.cyan = cyan;
234
+ exports.carbon = carbon;
122
235
  exports.gray = gray;
123
236
  exports.green = green;
237
+ exports.magenta = magenta;
238
+ exports.mauve = mauve;
239
+ exports.mustard = mustard;
240
+ exports.navy = navy;
241
+ exports.ocher = ocher;
242
+ exports.peacock = peacock;
124
243
  exports.purple = purple;
125
244
  exports.red = red;
245
+ exports.rosy = rosy;
126
246
  exports.sky = sky;
127
- exports.slate = slate;
128
- exports.themeColors = themeColors;
247
+ exports.thyme = thyme;
248
+ exports.violet = violet;
129
249
  exports.yellow = yellow;
@@ -1,32 +1,22 @@
1
- import { MantineThemeOther } from '@mantine/core';
2
1
  import { Tuple } from '@mantine/styles/lib/theme/types';
3
2
 
4
3
  export type ShadingColor = Tuple<string, 10>;
5
- export declare const gray: ShadingColor;
6
- export declare const blue: ShadingColor;
7
- /**
8
- * we do not have cyan for now
9
- */
10
- export declare const cyan: [string, string, string, string, string, string, string, string, string, string];
11
- export declare const sky: [string, string, string, string, string, string, string, string, string, string];
4
+ export declare const carbon: ShadingColor;
5
+ export declare const peacock: ShadingColor;
12
6
  export declare const red: ShadingColor;
13
7
  export declare const green: ShadingColor;
14
- export declare const purple: ShadingColor;
15
- export declare const slate: ShadingColor;
16
8
  export declare const yellow: ShadingColor;
17
- export declare const themeColors: {
18
- gray: [string, string, string, string, string, string, string, string, string, string];
19
- sky: [string, string, string, string, string, string, string, string, string, string];
20
- cyan: [string, string, string, string, string, string, string, string, string, string];
21
- red: [string, string, string, string, string, string, string, string, string, string];
22
- yellow: [string, string, string, string, string, string, string, string, string, string];
23
- green: [string, string, string, string, string, string, string, string, string, string];
24
- slate: [string, string, string, string, string, string, string, string, string, string];
25
- blue: [string, string, string, string, string, string, string, string, string, string];
26
- purple: [string, string, string, string, string, string, string, string, string, string];
27
- };
28
- /**
29
- * @deprecated
30
- * Do not use this directly, use theme.other instead
31
- */
32
- export declare const Colors: MantineThemeOther;
9
+ export declare const aqua: ShadingColor;
10
+ export declare const purple: ShadingColor;
11
+ export declare const rosy: ShadingColor;
12
+ export declare const violet: ShadingColor;
13
+ export declare const thyme: ShadingColor;
14
+ export declare const airy: ShadingColor;
15
+ export declare const mauve: ShadingColor;
16
+ export declare const navy: ShadingColor;
17
+ export declare const sky: ShadingColor;
18
+ export declare const magenta: ShadingColor;
19
+ export declare const ocher: ShadingColor;
20
+ export declare const mustard: ShadingColor;
21
+ export declare const blue: ShadingColor;
22
+ export declare const gray: ShadingColor;
@@ -1,32 +1,22 @@
1
- import { MantineThemeOther } from '@mantine/core';
2
1
  import { Tuple } from '@mantine/styles/lib/theme/types';
3
2
 
4
3
  export type ShadingColor = Tuple<string, 10>;
5
- export declare const gray: ShadingColor;
6
- export declare const blue: ShadingColor;
7
- /**
8
- * we do not have cyan for now
9
- */
10
- export declare const cyan: [string, string, string, string, string, string, string, string, string, string];
11
- export declare const sky: [string, string, string, string, string, string, string, string, string, string];
4
+ export declare const carbon: ShadingColor;
5
+ export declare const peacock: ShadingColor;
12
6
  export declare const red: ShadingColor;
13
7
  export declare const green: ShadingColor;
14
- export declare const purple: ShadingColor;
15
- export declare const slate: ShadingColor;
16
8
  export declare const yellow: ShadingColor;
17
- export declare const themeColors: {
18
- gray: [string, string, string, string, string, string, string, string, string, string];
19
- sky: [string, string, string, string, string, string, string, string, string, string];
20
- cyan: [string, string, string, string, string, string, string, string, string, string];
21
- red: [string, string, string, string, string, string, string, string, string, string];
22
- yellow: [string, string, string, string, string, string, string, string, string, string];
23
- green: [string, string, string, string, string, string, string, string, string, string];
24
- slate: [string, string, string, string, string, string, string, string, string, string];
25
- blue: [string, string, string, string, string, string, string, string, string, string];
26
- purple: [string, string, string, string, string, string, string, string, string, string];
27
- };
28
- /**
29
- * @deprecated
30
- * Do not use this directly, use theme.other instead
31
- */
32
- export declare const Colors: MantineThemeOther;
9
+ export declare const aqua: ShadingColor;
10
+ export declare const purple: ShadingColor;
11
+ export declare const rosy: ShadingColor;
12
+ export declare const violet: ShadingColor;
13
+ export declare const thyme: ShadingColor;
14
+ export declare const airy: ShadingColor;
15
+ export declare const mauve: ShadingColor;
16
+ export declare const navy: ShadingColor;
17
+ export declare const sky: ShadingColor;
18
+ export declare const magenta: ShadingColor;
19
+ export declare const ocher: ShadingColor;
20
+ export declare const mustard: ShadingColor;
21
+ export declare const blue: ShadingColor;
22
+ export declare const gray: ShadingColor;