@team_yumi/ramen 0.4.0-next.20231219-decd25b-61c12120c13e6cf198e03e06cba26629 → 0.4.0-next.20231227-5618a4f-e5f6b9ce4a5e711b5af6aa6a9a1429bf

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.
Files changed (9) hide show
  1. package/components/mobile/x-modal/root.d.ts +84 -0
  2. package/index.css +63 -58
  3. package/index.js +2 -2
  4. package/index.mobile.d.ts +1 -1
  5. package/models/Collections/IBoxBackgroundThone.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/themes/default.theme.css +128 -116
  8. package/components/mobile/xmodal/root.d.ts +0 -26
  9. /package/components/mobile/{xmodal → x-modal}/index.d.ts +0 -0
package/index.mobile.d.ts CHANGED
@@ -11,7 +11,7 @@ declare const _default: {
11
11
  XBody: import("react").FC<import("./components/mobile/xbody/root").IProps>;
12
12
  XFooter: import("react").FC<import("./components/mobile/xfooter/root").IProps>;
13
13
  XPage: import("react").FC<import("./components/mobile/xpage/root").IProps>;
14
- XModal: import("react").FC<import("./components/mobile/xmodal/root").IProps>;
14
+ XModal: import("react").FC<import("./components/mobile/x-modal/root").IProps>;
15
15
  XSelect: import("react").FC<import("./components/mobile/xselect/root").IProps>;
16
16
  XSelectMultiple: import("react").ForwardRefExoticComponent<Pick<import("./components/mobile/xselect-multiple/root").IProps, "size" | "icon" | "disabled" | "hasError" | "onChange" | "title" | "subtitle" | "values" | "defaultValues" | "okText" | "options" | "showCounter" | "showSelecteds" | "showOnlyModal"> & import("react").RefAttributes<XSelectMultipleRef>>;
17
17
  XFloatButton: import("react").FC<import("./components/mobile/xfloat-button/root").IProps>;
package/models/Collections/IBoxBackgroundThone.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const IBoxBackgroundThone: readonly ["darkest", "medium", "dim", "lightest", "light", "dark-30", "dark", "none"];
1
+ export declare const IBoxBackgroundThone: readonly ["darkest", "medium", "dim", "lightest", "light", "dark-30", "dark-10", "dark", "none"];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team_yumi/ramen",
3
- "version": "0.4.0-next.20231219-decd25b-61c12120c13e6cf198e03e06cba26629",
3
+ "version": "0.4.0-next.20231227-5618a4f-e5f6b9ce4a5e711b5af6aa6a9a1429bf",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "react": ">=16.8.0"
package/themes/default.theme.css CHANGED
@@ -4,36 +4,36 @@
4
4
  * @DEPRECATED Use the new color tokens instead
5
5
  */
6
6
  --color-neutral-darkest: #000000;
7
- --color-neutral-dark: #1F1F1F;
8
- --color-neutral-medium: #5C5C5C;
7
+ --color-neutral-dark: #1f1f1f;
8
+ --color-neutral-medium: #5c5c5c;
9
9
  --color-neutral-dim: #999999;
10
10
  --color-neutral-light: #f0f0f0;
11
11
  --color-neutral-lightest: #ffffff;
12
12
 
13
- --color-error-darkest: #6B0E0E;
13
+ --color-error-darkest: #6b0e0e;
14
14
  --color-error-dark: #542020;
15
- --color-error-medium: #B21717;
16
- --color-error-dim: #DD4242;
15
+ --color-error-medium: #b21717;
16
+ --color-error-dim: #dd4242;
17
17
  --color-error-light: #f4abab;
18
- --color-error-lightest: #F8DADA;
18
+ --color-error-lightest: #f8dada;
19
19
 
20
- --color-warning-darkest: #7F6003;
20
+ --color-warning-darkest: #7f6003;
21
21
  --color-warning-dark: #bb941e;
22
- --color-warning-medium: #D4A106;
23
- --color-warning-dim: #FFCB30;
22
+ --color-warning-medium: #d4a106;
23
+ --color-warning-dim: #ffcb30;
24
24
  --color-warning-light: #f7e4d7;
25
- --color-warning-lightest: #FFF5D6;
25
+ --color-warning-lightest: #fff5d6;
26
26
 
27
27
  --color-success-darkest: #004214;
28
28
  --color-success-dark: #1b3f19;
29
- --color-success-medium: #006E21;
30
- --color-success-dim: #2B994C;
29
+ --color-success-medium: #006e21;
30
+ --color-success-dim: #2b994c;
31
31
  --color-success-light: #99cea9;
32
- --color-success-lightest: #D5EBDC;
32
+ --color-success-lightest: #d5ebdc;
33
33
 
34
34
  --color-info-medium: #285792;
35
35
  --color-info-light: #91caff;
36
- --color-info-lightest: #DDE6F2;
36
+ --color-info-lightest: #dde6f2;
37
37
 
38
38
  --color-hyperblue-darkest: #1a31dc;
39
39
  --color-hyperblue-lightest: #3083ff;
@@ -42,75 +42,73 @@
42
42
  --color-turquoise: #2ddfa6;
43
43
 
44
44
  /* Connect theme */
45
- --color-cnnt-blue: #1A31DC;
46
- --color-cnnt-mid-blue: #0574FF;
47
- --color-cnnt-light-blue: #4BAAF9;
48
- --color-cnnt-gradient: linear-gradient(74.39deg, #0A1FBA 0%, #2D66F6 48.96%, #4BAAF9 100%);
45
+ --color-cnnt-blue: #1a31dc;
46
+ --color-cnnt-mid-blue: #0574ff;
47
+ --color-cnnt-light-blue: #4baaf9;
48
+ --color-cnnt-gradient: linear-gradient(74.39deg, #0a1fba 0%, #2d66f6 48.96%, #4baaf9 100%);
49
49
 
50
50
  --color-gradient-arcus: linear-gradient(80deg, #32e0a1 20%, #e8f409 80%);
51
51
  }
52
52
 
53
-
54
-
55
53
  :root {
56
54
  /**
57
55
  * @tokens Colors
58
56
  * @presenter Color
59
57
  */
60
- --global-success-green-100: #002C0D;
58
+ --global-success-green-100: #002c0d;
61
59
  --global-success-green-90: #004214;
62
- --global-success-green-80: #00581B;
63
- --global-success-green-70: #006E21;
60
+ --global-success-green-80: #00581b;
61
+ --global-success-green-70: #006e21;
64
62
  --global-success-green-60: #008428;
65
- --global-success-green-50: #2B994C;
66
- --global-success-green-40: #55AD70;
67
- --global-success-green-30: #80C294;
68
- --global-success-green-20: #AAD6B8;
69
- --global-success-green-10: #D5EBDC;
63
+ --global-success-green-50: #2b994c;
64
+ --global-success-green-40: #55ad70;
65
+ --global-success-green-30: #80c294;
66
+ --global-success-green-20: #aad6b8;
67
+ --global-success-green-10: #d5ebdc;
70
68
 
71
69
  --global-error-red-100: #470909;
72
- --global-error-red-90: #6B0E0E;
73
- --global-error-red-80: #8F1313;
74
- --global-error-red-70: #B21717;
75
- --global-error-red-60: #D61C1C;
76
- --global-error-red-50: #DD4242;
77
- --global-error-red-40: #E46868;
78
- --global-error-red-30: #EB8E8E;
79
- --global-error-red-20: #F1B4B4;
80
- --global-error-red-10: #F8DADA;
81
-
82
- --global-warning-orange-100: #451F04;
83
- --global-warning-orange-90: #682E06;
84
- --global-warning-orange-80: #8B3E09;
85
- --global-warning-orange-70: #AD4D0B;
86
- --global-warning-orange-60: #D05D0D;
87
- --global-warning-orange-50: #D87835;
88
- --global-warning-orange-40: #E0935E;
89
- --global-warning-orange-30: #E8AE86;
90
- --global-warning-orange-20: #EFC9AF;
91
- --global-warning-orange-10: #F7E4D7;
70
+ --global-error-red-90: #6b0e0e;
71
+ --global-error-red-80: #8f1313;
72
+ --global-error-red-70: #b21717;
73
+ --global-error-red-60: #d61c1c;
74
+ --global-error-red-50: #dd4242;
75
+ --global-error-red-40: #e46868;
76
+ --global-error-red-30: #eb8e8e;
77
+ --global-error-red-20: #f1b4b4;
78
+ --global-error-red-10: #f8dada;
79
+
80
+ --global-warning-orange-100: #451f04;
81
+ --global-warning-orange-90: #682e06;
82
+ --global-warning-orange-80: #8b3e09;
83
+ --global-warning-orange-70: #ad4d0b;
84
+ --global-warning-orange-60: #d05d0d;
85
+ --global-warning-orange-50: #d87835;
86
+ --global-warning-orange-40: #e0935e;
87
+ --global-warning-orange-30: #e8ae86;
88
+ --global-warning-orange-20: #efc9af;
89
+ --global-warning-orange-10: #f7e4d7;
92
90
 
93
91
  --global-alert-yellow-100: #554002;
94
- --global-alert-yellow-90: #7F6003;
95
- --global-alert-yellow-80: #AA8105;
96
- --global-alert-yellow-70: #D4A106;
97
- --global-alert-yellow-60: #FFC107;
98
- --global-alert-yellow-50: #FFCB30;
99
- --global-alert-yellow-40: #FFD65A;
100
- --global-alert-yellow-30: #FFE083;
101
- --global-alert-yellow-20: #FFEAAD;
102
- --global-alert-yellow-10: #FFF5D6;
103
-
104
- --global-info-blue-100: #10233A;
92
+ --global-alert-yellow-90: #7f6003;
93
+ --global-alert-yellow-80: #aa8105;
94
+ --global-alert-yellow-70: #d4a106;
95
+ --global-alert-yellow-60: #ffc107;
96
+ --global-alert-yellow-50: #ffcb30;
97
+ --global-alert-yellow-40: #ffd65a;
98
+ --global-alert-yellow-30: #ffe083;
99
+ --global-alert-yellow-20: #ffeaad;
100
+ --global-alert-yellow-10: #fff5d6;
101
+
102
+ --global-info-blue-100: #10233a;
105
103
  --global-info-blue-90: #183457;
106
104
  --global-info-blue-80: #204675;
107
105
  --global-info-blue-70: #285792;
108
- --global-info-blue-60: #3069AF;
109
- --global-info-blue-50: #5382BC;
110
- --global-info-blue-40: #759BCA;
111
- --global-info-blue-30: #98B4D7;
112
- --global-info-blue-20: #BACDE4;
113
- --global-info-blue-10: #DDE6F2;
106
+ --global-info-blue-60: #3069af;
107
+ --global-info-blue-50: #5382bc;
108
+ --global-info-blue-40: #759bca;
109
+ --global-info-blue-30: #98b4d7;
110
+ --global-info-blue-20: #bacde4;
111
+ --global-info-blue-10: #dde6f2;
114
112
  /**
115
113
  * @tokens-end
116
114
  */
@@ -120,16 +118,17 @@
120
118
  * @presenter Color
121
119
  */
122
120
  --neutral-black: #000000;
123
- --neutral-dark-90: #1F1F1F;
124
- --neutral-dark-80: #3D3D3D;
125
- --neutral-dark-70: #5C5C5C;
126
- --neutral-dark-60: #7A7A7A;
121
+ --neutral-dark-90: #1f1f1f;
122
+ --neutral-dark-80: #3d3d3d;
123
+ --neutral-dark-70: #5c5c5c;
124
+ --neutral-dark-60: #7a7a7a;
127
125
  --neutral-dark-50: #999999;
128
- --neutral-dark-40: #B8B8B8;
129
- --neutral-dark-30: #D6D6D6;
130
- --neutral-dark-20: #F5F5F5;
131
- --neutral-white: #FFFFFF;
132
- /**
126
+ --neutral-dark-40: #b8b8b8;
127
+ --neutral-dark-30: #d6d6d6;
128
+ --neutral-dark-20: #f5f5f5;
129
+ --neutral-dark-10: rgba(0, 0, 0, 10);
130
+ --neutral-white: #ffffff;
131
+ /**
133
132
  * @tokens-end
134
133
  */
135
134
 
@@ -137,8 +136,22 @@
137
136
  * @tokens Colors:Gradient
138
137
  * @presenter Color
139
138
  */
140
- --global-loading-skeleton: linear-gradient(90deg, #EBEBEB 0%, #F6F5F5 28.65%, #F4F4F4 56.77%, #EFEFEF 80.21%, #F0F0F0 100%, #EDEDED 100%);
141
- --global-loading-skeleton-dark: linear-gradient(90deg, #373737 0%, #504E4E 41.15%, #3F3F3F 71.87%, #373737 100%);
139
+ --global-loading-skeleton: linear-gradient(
140
+ 90deg,
141
+ #ebebeb 0%,
142
+ #f6f5f5 28.65%,
143
+ #f4f4f4 56.77%,
144
+ #efefef 80.21%,
145
+ #f0f0f0 100%,
146
+ #ededed 100%
147
+ );
148
+ --global-loading-skeleton-dark: linear-gradient(
149
+ 90deg,
150
+ #373737 0%,
151
+ #504e4e 41.15%,
152
+ #3f3f3f 71.87%,
153
+ #373737 100%
154
+ );
142
155
  /**
143
156
  * @tokens-end
144
157
  */
@@ -147,12 +160,12 @@
147
160
  * @tokens Colors:Ramen
148
161
  * @presenter Color
149
162
  */
150
- --ramen-darkest: #1B1A1A;
151
- --ramen-dark: #30B7CA;
152
- --ramen-medium: #21D49B;
153
- --ramen-gradient: linear-gradient(220deg, #21D49B 15.77%, #30B7CA 84.05%);
154
- --ramen-linear-gradient: linear-gradient(90deg, #22D39F 0.38%, #30B9C8 24.22%);
155
- /**
163
+ --ramen-darkest: #1b1a1a;
164
+ --ramen-dark: #30b7ca;
165
+ --ramen-medium: #21d49b;
166
+ --ramen-gradient: linear-gradient(220deg, #21d49b 15.77%, #30b7ca 84.05%);
167
+ --ramen-linear-gradient: linear-gradient(90deg, #22d39f 0.38%, #30b9c8 24.22%);
168
+ /**
156
169
  * @tokens-end
157
170
  */
158
171
 
@@ -160,51 +173,50 @@
160
173
  * @tokens Colors:XTag
161
174
  * @presenter Color
162
175
  */
163
- --xtag-color-green: #11A279;
164
- --xtag-color-sky-blue: #4A96FF;
165
- --xtag-color-orange: #FF953B;
166
- --xtag-color-red: #EB4849;
167
- --xtag-color-purple: #4D54C8;
168
- --xtag-color-pink: #F15DDB;
169
- --xtag-color-green-check: #2B994C;
170
- --xtag-color-red-refuse: #DD4242;
171
- --xtag-color-yellow: #FFD65A;
172
- --xtag-state-color-pink-lightest: #FFD8F9;
173
- --xtag-state-color-pink-medium: #F15DDB;
176
+ --xtag-color-green: #11a279;
177
+ --xtag-color-sky-blue: #4a96ff;
178
+ --xtag-color-orange: #ff953b;
179
+ --xtag-color-red: #eb4849;
180
+ --xtag-color-purple: #4d54c8;
181
+ --xtag-color-pink: #f15ddb;
182
+ --xtag-color-green-check: #2b994c;
183
+ --xtag-color-red-refuse: #dd4242;
184
+ --xtag-color-yellow: #ffd65a;
185
+ --xtag-state-color-pink-lightest: #ffd8f9;
186
+ --xtag-state-color-pink-medium: #f15ddb;
174
187
  --xtag-state-color-orange-lightest: #f7e4d7;
175
- --xtag-state-color-orange-medium: #D87835;
188
+ --xtag-state-color-orange-medium: #d87835;
176
189
 
177
- /**
190
+ /**
178
191
  * @tokens-end
179
192
  */
180
193
 
181
- /**
194
+ /**
182
195
  * @tokens Colors:XIcon
183
196
  * @presenter Color
184
197
  */
185
- --xicon-color-green: #11A279;
186
- --xicon-color-sky-blue: #4A96FF;
187
- --xicon-color-orange: #FF953B;
188
- --xicon-color-red: #EB4849;
189
- --xicon-color-purple: #4D54C8;
190
- --xicon-color-pink: #F15DDB;
191
- --xicon-color-green-check: #2B994C;
192
- --xicon-color-red-refuse: #DD4242;
193
- --xicon-color-yellow: #FFD65A;
198
+ --xicon-color-green: #11a279;
199
+ --xicon-color-sky-blue: #4a96ff;
200
+ --xicon-color-orange: #ff953b;
201
+ --xicon-color-red: #eb4849;
202
+ --xicon-color-purple: #4d54c8;
203
+ --xicon-color-pink: #f15ddb;
204
+ --xicon-color-green-check: #2b994c;
205
+ --xicon-color-red-refuse: #dd4242;
206
+ --xicon-color-yellow: #ffd65a;
194
207
  --xicon-color-turquoise: #2ddfa6;
195
- /**
208
+ /**
196
209
  * @tokens-end
197
210
  */
198
211
 
199
-
200
- --xcard-border-color-green: #11A279;
201
- --xcard-border-color-sky-blue: #4A96FF;
202
- --xcard-border-color-orange: #FF953B;
203
- --xcard-border-color-red: #EB4849;
204
- --xcard-border-color-purple: #4D54C8;
205
- --xcard-border-color-pink: #F15DDB;
206
- --xcard-border-color-green-check: #2B994C;
207
- --xcard-border-color-red-refuse: #DD4242;
208
- --xcard-border-color-yellow: #FFD65A;
212
+ --xcard-border-color-green: #11a279;
213
+ --xcard-border-color-sky-blue: #4a96ff;
214
+ --xcard-border-color-orange: #ff953b;
215
+ --xcard-border-color-red: #eb4849;
216
+ --xcard-border-color-purple: #4d54c8;
217
+ --xcard-border-color-pink: #f15ddb;
218
+ --xcard-border-color-green-check: #2b994c;
219
+ --xcard-border-color-red-refuse: #dd4242;
220
+ --xcard-border-color-yellow: #ffd65a;
209
221
  --xcard-border-color-turquoise: #2ddfa6;
210
222
  }
package/components/mobile/xmodal/root.d.ts DELETED
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { Collections } from './../../../models';
3
- export interface IAction {
4
- key: string;
5
- text?: string;
6
- type?: (typeof Collections.IType)[number];
7
- icon?: (typeof Collections.IIcon)[number];
8
- disabled?: boolean;
9
- loading?: boolean;
10
- render?: (key: string) => React.ReactNode;
11
- }
12
- export interface IProps {
13
- children?: React.ReactNode;
14
- headerChildren?: React.ReactNode;
15
- icon?: (typeof Collections.IIcon)[number];
16
- title?: string;
17
- subtitle?: string;
18
- size?: (typeof Collections.ISize)[number];
19
- visible: boolean;
20
- closable?: boolean;
21
- onClose?: () => void;
22
- actions?: Array<IAction>;
23
- onActionClick?: (key: string) => void;
24
- }
25
- declare const XModal: React.FC<IProps>;
26
- export default XModal;