this.gui 1.0.17 → 1.0.18

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 (19) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/this-gui.es.js +727 -647
  3. package/dist/this-gui.umd.js +17 -17
  4. package/package.json +2 -1
  5. package/src/App.jsx +19 -43
  6. package/src/CreatePage.jsx +61 -0
  7. package/src/MDXEditor.jsx +51 -0
  8. package/src/PageDashboard.jsx +56 -0
  9. package/src/SiteBuilder.jsx +95 -26
  10. package/src/scripts/postinstall.js +41 -30
  11. package/src/stories/Atoms/Button/Button.css +259 -58
  12. package/src/stories/Atoms/Button/Button.jsx +8 -11
  13. package/src/stories/Atoms/Button/Button.stories.jsx +65 -40
  14. package/src/stories/Atoms/Container/Container.css +420 -39
  15. package/src/stories/Atoms/Container/Container.jsx +98 -36
  16. package/src/stories/Atoms/Container/Container.stories.jsx +120 -79
  17. package/src/stories/Atoms/Link/Link.css +6 -26
  18. package/src/stories/Atoms/Link/Link.jsx +11 -21
  19. package/src/themes/styles/neurons/light.css +94 -204
package/src/stories/Atoms/Button/Button.css CHANGED
@@ -1,5 +1,21 @@
1
1
  /* src/stories/Atoms/Button/Button.css */
2
2
 
3
+ :root {
4
+ /* Button Sizes */
5
+ --button-font-size: var(--font-size-base);
6
+ --button-padding-vertical: 11px;
7
+ --button-padding-horizontal: 21px;
8
+ --button-padding: var(--button-padding-vertical) var(--button-padding-horizontal);
9
+ /* Align button sizes with global small and large font sizes */
10
+ --button-font-size-large: var(--font-size-large); /* Use the global large font size */
11
+ --button-font-size-small: var(--font-size-small); /* Use the global small font size */
12
+ --button-padding-vertical-large: calc(var(--button-padding-vertical) * 1.1);
13
+ --button-padding-horizontal-large: calc(var(--button-padding-horizontal) * 1.1);
14
+ --button-padding-large: var(--button-padding-vertical-large) var(--button-padding-horizontal-large);
15
+ --button-padding-vertical-small: calc(var(--button-padding-vertical) * 0.9);
16
+ --button-padding-horizontal-small: calc(var(--button-padding-horizontal) * 0.9);
17
+ --button-padding-small: var(--button-padding-vertical-small) var(--button-padding-horizontal-small);
18
+ }
3
19
  /* Base styles */
4
20
  .button {
5
21
  display: inline-block;
@@ -13,116 +29,301 @@
13
29
  border: 1px solid transparent;
14
30
  box-shadow: var(--box-shadow);
15
31
  margin-right: 10px;
16
- background-color: var(--button-bg-color, transparent);
17
32
  color: var(--button-text-color, var(--text-color));
18
- border-color: var(--button-border-color, transparent);
19
33
  }
20
34
 
21
- /* Hover Effects */
22
- .button:hover {
23
- background-color: var(--button-bg-hover-color, var(--button-bg-color));
24
- color: var(--button-text-hover-color, var(--button-text-color));
25
- border-color: var(--button-border-hover-color, var(--button-border-color));
35
+ .button--small {
36
+ font-size: var(--button-font-size-small);
37
+ padding: var(--button-padding-small);
38
+ }
39
+
40
+ .button--medium {
41
+ font-size: var(--button-font-size);
42
+ padding: var(--button-padding);
43
+ }
44
+
45
+ .button--large {
46
+ font-size: var(--button-font-size-large);
47
+ padding: var(--button-padding-large);
26
48
  }
27
49
 
28
- /* Primary Variant */
29
- .button--primary {
50
+ /* Solid variant */
51
+ .button--solid {
52
+ background-color: var(--button-bg-color, var(--primary-color));
53
+ color: var(--button-text-color, var(--text-color-inverse));
54
+ }
55
+
56
+ /* Outline variant */
57
+ .button--outline {
58
+ background-color: transparent;
59
+ border: 1px solid var(--button-border-color, var(--primary-color));
60
+ color: var(--button-border-color, var(--primary-color));
61
+ }
62
+
63
+ /* Colors (referencing global theme colors) */
64
+ .button--primary-color {
30
65
  --button-bg-color: var(--primary-color);
31
- --button-text-color: var(--text-color-inverse);
32
66
  --button-border-color: var(--primary-color);
33
- --button-bg-hover-color: var(--primary-color-hover);
67
+ --button-text-color: var(--text-color-inverse);
68
+ }
69
+
70
+ .button--secondary-color {
71
+ --button-bg-color: var(--secondary-color);
72
+ --button-border-color: var(--secondary-color);
73
+ --button-text-color: var(--text-color-inverse);
34
74
  }
35
75
 
36
- /* Secondary Variant */
37
- .button--secondary {
38
- --button-bg-color: transparent;
39
- --button-text-color: var(--secondary-color);
40
- --button-border-color: var(--secondary-border-color);
41
- --button-text-hover-color: var(--primary-color-hover);
42
- --button-border-hover-color: var(--primary-color);
76
+ /* Colors (referencing global theme colors) */
77
+ .button--primary-color {
78
+ --button-bg-color: var(--primary-color);
79
+ --button-border-color: var(--primary-color);
80
+ --button-text-color: var(--text-color-inverse);
43
81
  }
44
82
 
45
- /* Semantic Color Modifiers */
83
+ .button--secondary-color {
84
+ --button-bg-color: var(--secondary-color);
85
+ --button-border-color: var(--secondary-color);
86
+ --button-text-color: var(--text-color-inverse);
87
+ }
46
88
 
47
- /* For Primary Variant: Set background colors based on semantic colors */
48
- .button--primary.button--info {
89
+ .button--info-color {
49
90
  --button-bg-color: var(--info-color);
50
91
  --button-border-color: var(--info-color);
51
- --button-bg-hover-color: var(--info-color-hover);
92
+ --button-text-color: var(--text-color-inverse);
52
93
  }
53
94
 
54
- .button--primary.button--warning {
95
+ .button--warning-color {
55
96
  --button-bg-color: var(--warning-color);
56
97
  --button-border-color: var(--warning-color);
57
- --button-bg-hover-color: var(--warning-color-hover);
98
+ --button-text-color: var(--text-color-inverse);
58
99
  }
59
100
 
60
- .button--primary.button--alert {
101
+ .button--alert-color {
61
102
  --button-bg-color: var(--alert-color);
62
103
  --button-border-color: var(--alert-color);
63
- --button-bg-hover-color: var(--alert-color-hover);
64
- --button-text-color: #2C2C2C; /* Dark text for better readability */
104
+ --button-text-color: var(--dark-color);
65
105
  }
66
106
 
67
- .button--primary.button--success {
107
+ .button--success-color {
68
108
  --button-bg-color: var(--success-color);
69
109
  --button-border-color: var(--success-color);
70
- --button-bg-hover-color: var(--success-color-hover);
110
+ --button-text-color: var(--text-color-inverse);
71
111
  }
72
112
 
73
- .button--primary.button--neutral {
113
+ .button--neutral-color {
74
114
  --button-bg-color: var(--neutral-color);
75
115
  --button-border-color: var(--neutral-color);
76
- --button-bg-hover-color: var(--neutral-color-hover);
116
+ --button-text-color: var(--text-color-inverse);
77
117
  }
78
118
 
79
- .button--primary.button--dark {
119
+ .button--dark-color {
80
120
  --button-bg-color: var(--dark-color);
81
121
  --button-border-color: var(--dark-color);
82
- --button-bg-hover-color: var(--dark-color-hover);
122
+ --button-text-color: var(--text-color-inverse);
83
123
  }
84
124
 
85
- /* For Secondary Variant: Set text and border colors based on semantic colors */
86
- .button--secondary.button--info {
87
- --button-text-color: var(--info-color);
125
+ .button--outline.button--info-color {
88
126
  --button-border-color: var(--info-color);
89
- --button-text-hover-color: var(--info-color-hover);
90
- --button-border-hover-color: var(--info-color-hover);
127
+ --button-text-color: var(--info-color);
91
128
  }
92
129
 
93
- .button--secondary.button--warning {
94
- --button-text-color: var(--warning-color);
130
+ .button--outline.button--warning-color {
95
131
  --button-border-color: var(--warning-color);
96
- --button-text-hover-color: var(--warning-color-hover);
97
- --button-border-hover-color: var(--warning-color-hover);
132
+ --button-text-color: var(--warning-color);
98
133
  }
99
134
 
100
- .button--secondary.button--alert {
101
- --button-text-color: var(--alert-color);
135
+ .button--outline.button--alert-color {
102
136
  --button-border-color: var(--alert-color);
103
- --button-text-hover-color: var(--alert-color-hover);
104
- --button-border-hover-color: var(--alert-color-hover);
137
+ --button-text-color: var(--alert-color);
105
138
  }
106
139
 
107
- .button--secondary.button--success {
108
- --button-text-color: var(--success-color);
140
+ .button--outline.button--success-color {
109
141
  --button-border-color: var(--success-color);
110
- --button-text-hover-color: var(--success-color-hover);
111
- --button-border-hover-color: var(--success-color-hover);
142
+ --button-text-color: var(--success-color);
112
143
  }
113
144
 
114
- .button--secondary.button--neutral {
115
- --button-text-color: var(--neutral-color);
145
+ .button--outline.button--neutral-color {
116
146
  --button-border-color: var(--neutral-color);
117
- --button-text-hover-color: var(--neutral-color-hover);
118
- --button-border-hover-color: var(--neutral-color-hover);
147
+ --button-text-color: var(--neutral-color);
119
148
  }
120
149
 
121
- .button--secondary.button--dark {
122
- --button-text-color: var(--dark-color);
150
+ .button--outline.button--dark-color {
123
151
  --button-border-color: var(--dark-color);
124
- --button-text-hover-color: var(--dark-color-hover);
125
- --button-border-hover-color: var(--dark-color-hover);
152
+ --button-text-color: var(--dark-color);
153
+ }
154
+
155
+ /* Additional Palettes */
156
+ .button--classy-color-1 {
157
+ --button-bg-color: var(--classy-color-1);
158
+ --button-border-color: var(--classy-color-1);
159
+ --button-text-color: var(--text-color-inverse);
160
+ }
161
+
162
+ .button--classy-color-2 {
163
+ --button-bg-color: var(--classy-color-2);
164
+ --button-border-color: var(--classy-color-2);
165
+ --button-text-color: var(--text-color-inverse);
166
+ }
167
+
168
+ .button--classy-color-3 {
169
+ --button-bg-color: var(--classy-color-3);
170
+ --button-border-color: var(--classy-color-3);
171
+ --button-text-color: var(--text-color-inverse);
172
+ }
173
+
174
+ .button--classy-color-4 {
175
+ --button-bg-color: var(--classy-color-4);
176
+ --button-border-color: var(--classy-color-4);
177
+ --button-text-color: var(--text-color-inverse);
178
+ }
179
+
180
+ .button--classy-color-5 {
181
+ --button-bg-color: var(--classy-color-5);
182
+ --button-border-color: var(--classy-color-5);
183
+ --button-text-color: var(--text-color-inverse);
184
+ }
185
+
186
+ .button--small-switch-color-1 {
187
+ --button-bg-color: var(--small-switch-color-1);
188
+ --button-border-color: var(--small-switch-color-1);
189
+ --button-text-color: var(--text-color-inverse);
190
+ }
191
+
192
+ .button--small-switch-color-2 {
193
+ --button-bg-color: var(--small-switch-color-2);
194
+ --button-border-color: var(--small-switch-color-2);
195
+ --button-text-color: var(--text-color-inverse);
196
+ }
197
+
198
+ .button--natural-color-1 {
199
+ --button-bg-color: var(--natural-color-1);
200
+ --button-border-color: var(--natural-color-1);
201
+ --button-text-color: var(--text-color-inverse);
202
+ }
203
+
204
+ .button--natural-color-2 {
205
+ --button-bg-color: var(--natural-color-2);
206
+ --button-border-color: var(--natural-color-2);
207
+ --button-text-color: var(--text-color-inverse);
208
+ }
209
+
210
+ .button--natural-color-3 {
211
+ --button-bg-color: var(--natural-color-3);
212
+ --button-border-color: var(--natural-color-3);
213
+ --button-text-color: var(--text-color-inverse);
214
+ }
215
+
216
+ .button--grey-friend-1 {
217
+ --button-bg-color: var(--grey-friend-1);
218
+ --button-border-color: var(--grey-friend-1);
219
+ --button-text-color: var(--text-color-inverse);
220
+ }
221
+
222
+ .button--grey-friend-2 {
223
+ --button-bg-color: var(--grey-friend-2);
224
+ --button-border-color: var(--grey-friend-2);
225
+ --button-text-color: var(--text-color-inverse);
226
+ }
227
+
228
+ .button--shade-1 {
229
+ --button-bg-color: var(--shade-1);
230
+ --button-border-color: var(--shade-1);
231
+ --button-text-color: var(--text-color-inverse);
232
+ }
233
+
234
+ .button--shade-2 {
235
+ --button-bg-color: var(--shade-2);
236
+ --button-border-color: var(--shade-2);
237
+ --button-text-color: var(--text-color-inverse);
238
+ }
239
+
240
+ .button--shade-3 {
241
+ --button-bg-color: var(--shade-3);
242
+ --button-border-color: var(--shade-3);
243
+ --button-text-color: var(--text-color-inverse);
244
+ }
245
+
246
+ .button--shade-4 {
247
+ --button-bg-color: var(--shade-4);
248
+ --button-border-color: var(--shade-4);
249
+ --button-text-color: var(--text-color-inverse);
250
+ }
251
+
252
+ /* Color handling for outline variant */
253
+ .button--outline.button--primary-color {
254
+ --button-border-color: var(--primary-color);
255
+ --button-text-color: var(--primary-color);
256
+ }
257
+
258
+ .button--outline.button--classy-color-1 {
259
+ --button-border-color: var(--classy-color-1);
260
+ --button-text-color: var(--classy-color-1);
261
+ }
262
+
263
+ .button--outline.button--classy-color-2 {
264
+ --button-border-color: var(--classy-color-2);
265
+ --button-text-color: var(--classy-color-2);
266
+ }
267
+
268
+ .button--outline.button--classy-color-3 {
269
+ --button-border-color: var(--classy-color-3);
270
+ --button-text-color: var(--classy-color-3);
271
+ }
272
+
273
+ .button--outline.button--classy-color-4 {
274
+ --button-border-color: var(--classy-color-4);
275
+ --button-text-color: var(--classy-color-4);
276
+ }
277
+
278
+ .button--outline.button--classy-color-5 {
279
+ --button-border-color: var(--classy-color-5);
280
+ --button-text-color: var(--classy-color-5);
281
+ }
282
+
283
+ /* Additional Outline Variants */
284
+ .button--outline.button--natural-color-1 {
285
+ --button-border-color: var(--natural-color-1);
286
+ --button-text-color: var(--natural-color-1);
287
+ }
288
+
289
+ .button--outline.button--natural-color-2 {
290
+ --button-border-color: var(--natural-color-2);
291
+ --button-text-color: var(--natural-color-2);
292
+ }
293
+
294
+ .button--outline.button--natural-color-3 {
295
+ --button-border-color: var(--natural-color-3);
296
+ --button-text-color: var(--natural-color-3);
297
+ }
298
+
299
+ .button--outline.button--grey-friend-1 {
300
+ --button-border-color: var(--grey-friend-1);
301
+ --button-text-color: var(--grey-friend-1);
302
+ }
303
+
304
+ .button--outline.button--grey-friend-2 {
305
+ --button-border-color: var(--grey-friend-2);
306
+ --button-text-color: var(--grey-friend-2);
307
+ }
308
+
309
+ .button--outline.button--shade-1 {
310
+ --button-border-color: var(--shade-1);
311
+ --button-text-color: var(--shade-1);
312
+ }
313
+
314
+ .button--outline.button--shade-2 {
315
+ --button-border-color: var(--shade-2);
316
+ --button-text-color: var(--shade-2);
317
+ }
318
+
319
+ .button--outline.button--shade-3 {
320
+ --button-border-color: var(--shade-3);
321
+ --button-text-color: var(--shade-3);
322
+ }
323
+
324
+ .button--outline.button--shade-4 {
325
+ --button-border-color: var(--shade-4);
326
+ --button-text-color: var(--shade-4);
126
327
  }
127
328
 
128
329
  /* No Border Modifier */
package/src/stories/Atoms/Button/Button.jsx CHANGED
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
4
4
  import './Button.css'; // Ensure styles are imported
5
5
 
6
6
  export const Button = ({
7
- variant = 'primary', // 'primary', 'secondary'
8
- color, // 'info', 'warning', 'alert', 'success', 'neutral', 'dark'
7
+ variant = 'solid', // 'solid' or 'outline'
8
+ color = 'primary-color', // Default to primary color
9
9
  size = 'medium',
10
10
  label = '',
11
11
  noBorder = false,
@@ -15,7 +15,7 @@ export const Button = ({
15
15
  ...props
16
16
  }) => {
17
17
  const variantClass = `button--${variant}`;
18
- const colorClass = color ? `button--${color}` : '';
18
+ const colorClass = `button--${color}`;
19
19
  const sizeClass = `button--${size}`;
20
20
  const borderClass = noBorder ? 'button--no-border' : '';
21
21
 
@@ -29,15 +29,12 @@ export const Button = ({
29
29
  };
30
30
 
31
31
  Button.propTypes = {
32
- variant: PropTypes.oneOf(['primary', 'secondary']),
32
+ variant: PropTypes.oneOf(['solid', 'outline']), // Updated variants
33
33
  color: PropTypes.oneOf([
34
- 'info',
35
- 'warning',
36
- 'alert',
37
- 'success',
38
- 'neutral',
39
- 'dark',
40
- ]),
34
+ 'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
35
+ 'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5', 'small-switch-color-1', 'small-switch-color-2',
36
+ 'natural-color-1', 'natural-color-2', 'natural-color-3', 'grey-friend-1', 'grey-friend-2', 'shade-1', 'shade-2', 'shade-3', 'shade-4'
37
+ ]), // Updated color prop
41
38
  size: PropTypes.oneOf(['small', 'medium', 'large']),
42
39
  label: PropTypes.string,
43
40
  noBorder: PropTypes.bool,
package/src/stories/Atoms/Button/Button.stories.jsx CHANGED
@@ -10,29 +10,47 @@ export default {
10
10
  variant: {
11
11
  control: {
12
12
  type: 'select',
13
- options: ['primary', 'secondary'],
13
+ options: ['solid', 'outline'],
14
14
  },
15
15
  description: 'Variant of the button.',
16
16
  table: {
17
- type: { summary: 'primary | secondary' },
18
- defaultValue: { summary: 'primary' },
17
+ type: { summary: 'solid | outline' },
18
+ defaultValue: { summary: 'solid' },
19
19
  },
20
20
  },
21
21
  color: {
22
22
  control: {
23
23
  type: 'select',
24
24
  options: [
25
+ 'primary-color',
26
+ 'secondary-color',
25
27
  'info',
26
28
  'warning',
27
29
  'alert',
28
30
  'success',
29
31
  'neutral',
30
32
  'dark',
33
+ 'classy-color-1',
34
+ 'classy-color-2',
35
+ 'classy-color-3',
36
+ 'classy-color-4',
37
+ 'classy-color-5',
38
+ 'small-switch-color-1',
39
+ 'small-switch-color-2',
40
+ 'natural-color-1',
41
+ 'natural-color-2',
42
+ 'natural-color-3',
43
+ 'grey-friend-1',
44
+ 'grey-friend-2',
45
+ 'shade-1',
46
+ 'shade-2',
47
+ 'shade-3',
48
+ 'shade-4'
31
49
  ],
32
50
  },
33
51
  description: 'Semantic color accent of the button.',
34
52
  table: {
35
- type: { summary: `'info' | 'warning' | 'alert' | 'success' | 'neutral' | 'dark'` },
53
+ type: { summary: 'color variants from theme' },
36
54
  },
37
55
  },
38
56
  size: {
@@ -94,45 +112,47 @@ export default {
94
112
 
95
113
  /**
96
114
  *
97
- * Shows the default primary and secondary buttons without any semantic color accent.
115
+ * Shows the default solid and outline buttons without any semantic color accent.
98
116
  */
99
117
  export const DefaultButtons = () => (
100
118
  <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
101
- <Button variant="primary" size="medium">
102
- Primary Default
119
+ <Button variant="solid" size="medium">
120
+ Solid Default
103
121
  </Button>
104
- <Button variant="secondary" size="medium">
105
- Secondary Default
122
+ <Button variant="outline" size="medium">
123
+ Outline Default
106
124
  </Button>
107
- <Button variant="primary" size="medium" noBorder>
108
- Primary No Border
125
+ <Button variant="solid" size="medium" noBorder>
126
+ Solid No Border
109
127
  </Button>
110
- <Button variant="secondary" size="medium" noBorder>
111
- Secondary No Border
128
+ <Button variant="outline" size="medium" noBorder>
129
+ Outline No Border
112
130
  </Button>
113
131
  </div>
114
132
  );
115
133
 
116
134
  /**
117
135
  *
118
- * Demonstrates primary buttons with all semantic colors and sizes.
136
+ * Demonstrates solid buttons with all color options and sizes.
119
137
  */
120
- export const PrimaryButtons = () => (
138
+ export const SolidButtons = () => (
121
139
  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
122
- <h3>Primary Buttons</h3>
123
- {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
140
+ <h3>Solid Buttons</h3>
141
+ {[
142
+ 'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
143
+ 'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
144
+ 'small-switch-color-1', 'small-switch-color-2', 'natural-color-1', 'natural-color-2', 'natural-color-3',
145
+ 'grey-friend-1', 'grey-friend-2', 'shade-1', 'shade-2', 'shade-3', 'shade-4'
146
+ ].map((color) => (
124
147
  <div key={color} style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
125
- <Button variant="primary" color={color} size="small">
126
- Primary {color} Small
148
+ <Button variant="solid" color={color} size="small">
149
+ Solid {color} Small
127
150
  </Button>
128
- <Button variant="primary" color={color} size="medium">
129
- Primary {color} Medium
151
+ <Button variant="solid" color={color} size="medium">
152
+ Solid {color} Medium
130
153
  </Button>
131
- <Button variant="primary" color={color} size="large">
132
- Primary {color} Large
133
- </Button>
134
- <Button variant="primary" color={color} size="medium" noBorder>
135
- Primary {color} No Border
154
+ <Button variant="solid" color={color} size="large">
155
+ Solid {color} Large
136
156
  </Button>
137
157
  </div>
138
158
  ))}
@@ -141,24 +161,29 @@ export const PrimaryButtons = () => (
141
161
 
142
162
  /**
143
163
  *
144
- * Demonstrates secondary buttons with all semantic colors and sizes.
164
+ * Demonstrates outline buttons with all color options and sizes.
145
165
  */
146
- export const SecondaryButtons = () => (
166
+ export const OutlineButtons = () => (
147
167
  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
148
- <h3>Secondary Buttons</h3>
149
- {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
168
+ <h3>Outline Buttons</h3>
169
+ {[
170
+ 'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
171
+ 'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
172
+ 'small-switch-color-1', 'small-switch-color-2', 'natural-color-1', 'natural-color-2', 'natural-color-3',
173
+ 'grey-friend-1', 'grey-friend-2', 'shade-1', 'shade-2', 'shade-3', 'shade-4'
174
+ ].map((color) => (
150
175
  <div key={color} style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
151
- <Button variant="secondary" color={color} size="small">
152
- Secondary {color} Small
176
+ <Button variant="outline" color={color} size="small">
177
+ Outline {color} Small
153
178
  </Button>
154
- <Button variant="secondary" color={color} size="medium">
155
- Secondary {color} Medium
179
+ <Button variant="outline" color={color} size="medium">
180
+ Outline {color} Medium
156
181
  </Button>
157
- <Button variant="secondary" color={color} size="large">
158
- Secondary {color} Large
182
+ <Button variant="outline" color={color} size="large">
183
+ Outline {color} Large
159
184
  </Button>
160
- <Button variant="secondary" color={color} size="medium" noBorder>
161
- Secondary {color} No Border
185
+ <Button variant="outline" color={color} size="medium" noBorder>
186
+ Outline {color} No Border
162
187
  </Button>
163
188
  </div>
164
189
  ))}
@@ -174,8 +199,8 @@ const Template = (args) => <Button {...args} />;
174
199
 
175
200
  export const Playground = Template.bind({});
176
201
  Playground.args = {
177
- variant: 'primary',
178
- color: 'info',
202
+ variant: 'solid',
203
+ color: 'primary-color', // Default color
179
204
  size: 'medium',
180
205
  label: 'Click Me',
181
206
  noBorder: false,