@reshape-biotech/design-system 0.0.49 → 0.0.51
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/dist/components/activity/Activity.svelte +1 -1
- package/dist/components/datepicker/DatePicker.stories.svelte +227 -0
- package/dist/components/datepicker/DatePicker.stories.svelte.d.ts +19 -0
- package/dist/components/datepicker/DatePicker.svelte +2 -2
- package/dist/components/tag/Tag.svelte +5 -3
- package/dist/components/tag/Tag.svelte.d.ts +1 -1
- package/dist/tailwind.preset.d.ts +133 -0
- package/dist/tokens.d.ts +266 -0
- package/dist/tokens.js +104 -6
- package/package.json +3 -2
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
+
import { userEvent, within } from '@storybook/test';
|
|
4
|
+
import { DateTime } from 'luxon';
|
|
5
|
+
import DatePicker from './DatePicker.svelte';
|
|
6
|
+
import Dropdown from '../dropdown/Dropdown.svelte';
|
|
7
|
+
import Button from '../button/Button.svelte';
|
|
8
|
+
import { Icon } from '../icons';
|
|
9
|
+
|
|
10
|
+
const { Story } = defineMeta({
|
|
11
|
+
component: DatePicker,
|
|
12
|
+
title: 'Design System/DatePicker',
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
parameters: {
|
|
15
|
+
design: {
|
|
16
|
+
type: 'figma',
|
|
17
|
+
url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System%3A-V1?node-id=4381-32638&t=Epi2Ul7Cw7sCJpGy-0'
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
let selectedDate = $state<DateTime | undefined>(undefined);
|
|
23
|
+
let loggedDate = $state<string | undefined>(undefined);
|
|
24
|
+
|
|
25
|
+
function handleDateSelection(date: DateTime) {
|
|
26
|
+
loggedDate = date.toFormat('yyyy-MM-dd');
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// States for the dropdown story
|
|
30
|
+
let dropdownDate = $state<DateTime | undefined>(undefined);
|
|
31
|
+
let displayText = $state('Select a date');
|
|
32
|
+
let isOpen = $state(false);
|
|
33
|
+
|
|
34
|
+
// States for the form test
|
|
35
|
+
let formDropdownDate = $state<DateTime | undefined>(undefined);
|
|
36
|
+
let formDisplayText = $state('Select a date');
|
|
37
|
+
let formIsOpen = $state(false);
|
|
38
|
+
|
|
39
|
+
function handleDropdownSelection(date: DateTime) {
|
|
40
|
+
dropdownDate = date;
|
|
41
|
+
displayText = date.toFormat('MMM dd, yyyy');
|
|
42
|
+
isOpen = false;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function handleFormDateSelection(date: DateTime) {
|
|
46
|
+
formDropdownDate = date;
|
|
47
|
+
formDisplayText = date.toFormat('MMM dd, yyyy');
|
|
48
|
+
formIsOpen = false;
|
|
49
|
+
}
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<Story name="Default">
|
|
53
|
+
<div class="p-4">
|
|
54
|
+
<DatePicker bind:selectedDate />
|
|
55
|
+
</div>
|
|
56
|
+
</Story>
|
|
57
|
+
|
|
58
|
+
<Story name="With Selected Date">
|
|
59
|
+
<div class="p-4">
|
|
60
|
+
<DatePicker selectedDate={DateTime.local(2023, 10, 15)} />
|
|
61
|
+
</div>
|
|
62
|
+
</Story>
|
|
63
|
+
|
|
64
|
+
<Story name="With Date Change Handler">
|
|
65
|
+
<div class="p-4">
|
|
66
|
+
<div class="mb-4">
|
|
67
|
+
<DatePicker {selectedDate} onClick={handleDateSelection} />
|
|
68
|
+
</div>
|
|
69
|
+
{#if loggedDate}
|
|
70
|
+
<div class="mt-4 rounded bg-neutral p-2">
|
|
71
|
+
<p>Selected date: <strong>{loggedDate}</strong></p>
|
|
72
|
+
</div>
|
|
73
|
+
{/if}
|
|
74
|
+
</div>
|
|
75
|
+
</Story>
|
|
76
|
+
|
|
77
|
+
<Story name="Month Navigation">
|
|
78
|
+
<div class="p-4">
|
|
79
|
+
<DatePicker selectedDate={DateTime.local()} />
|
|
80
|
+
<div class="mt-4 text-sm text-tertiary">
|
|
81
|
+
<p>Click the arrow buttons to navigate between months</p>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</Story>
|
|
85
|
+
|
|
86
|
+
<Story
|
|
87
|
+
name="Interaction Test"
|
|
88
|
+
play={async ({ canvasElement }) => {
|
|
89
|
+
const canvas = within(canvasElement);
|
|
90
|
+
|
|
91
|
+
// Click next month button
|
|
92
|
+
const nextMonthButton = canvas.getAllByRole('button')[1]; // Second button is next month
|
|
93
|
+
await userEvent.click(nextMonthButton);
|
|
94
|
+
|
|
95
|
+
// Wait a moment
|
|
96
|
+
await new Promise((resolve) => setTimeout(resolve, 300));
|
|
97
|
+
|
|
98
|
+
// Click a date (the 15th of the month)
|
|
99
|
+
const dateButtons = canvas.getAllByRole('button').filter((button) => {
|
|
100
|
+
// Find buttons with just numbers as their text content
|
|
101
|
+
const text = button.textContent?.trim();
|
|
102
|
+
return text && !isNaN(Number(text));
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
// Find the button with text "15" if it exists
|
|
106
|
+
const date15Button = dateButtons.find((button) => button.textContent?.trim() === '15');
|
|
107
|
+
|
|
108
|
+
if (date15Button) {
|
|
109
|
+
await userEvent.click(date15Button);
|
|
110
|
+
}
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
<div class="p-4">
|
|
114
|
+
<DatePicker bind:selectedDate />
|
|
115
|
+
{#if selectedDate}
|
|
116
|
+
<div class="mt-4 rounded bg-neutral p-2">
|
|
117
|
+
<p>Selected date: <strong>{selectedDate.toFormat('yyyy-MM-dd')}</strong></p>
|
|
118
|
+
</div>
|
|
119
|
+
{/if}
|
|
120
|
+
</div>
|
|
121
|
+
</Story>
|
|
122
|
+
|
|
123
|
+
<Story name="Multiple DatePickers">
|
|
124
|
+
<div class="flex flex-col gap-4 p-4 md:flex-row">
|
|
125
|
+
<div>
|
|
126
|
+
<h3 class="mb-2 text-sm font-medium">Start Date</h3>
|
|
127
|
+
<DatePicker selectedDate={DateTime.local().minus({ days: 7 })} />
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
<h3 class="mb-2 text-sm font-medium">End Date</h3>
|
|
131
|
+
<DatePicker selectedDate={DateTime.local()} />
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</Story>
|
|
135
|
+
|
|
136
|
+
<Story name="In Dropdown">
|
|
137
|
+
<div class="p-4">
|
|
138
|
+
<Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
|
|
139
|
+
{#snippet trigger({ Trigger })}
|
|
140
|
+
<Trigger>
|
|
141
|
+
<Icon iconName="CalendarBlank" class="mr-2" size={16} />
|
|
142
|
+
{displayText}
|
|
143
|
+
</Trigger>
|
|
144
|
+
{/snippet}
|
|
145
|
+
|
|
146
|
+
{#snippet content()}
|
|
147
|
+
<DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
|
|
148
|
+
{/snippet}
|
|
149
|
+
</Dropdown>
|
|
150
|
+
|
|
151
|
+
{#if dropdownDate}
|
|
152
|
+
<div class="mt-4 rounded bg-neutral p-2">
|
|
153
|
+
<p>You selected: <strong>{dropdownDate.toFormat('MMMM dd, yyyy')}</strong></p>
|
|
154
|
+
</div>
|
|
155
|
+
{/if}
|
|
156
|
+
</div>
|
|
157
|
+
</Story>
|
|
158
|
+
|
|
159
|
+
<Story
|
|
160
|
+
name="Form Submit Prevention Test"
|
|
161
|
+
play={async ({ canvasElement }) => {
|
|
162
|
+
const canvas = within(canvasElement);
|
|
163
|
+
|
|
164
|
+
// Setup spy on form submission
|
|
165
|
+
const form = canvas.getByTestId('test-form');
|
|
166
|
+
let submissionCount = 0;
|
|
167
|
+
form.addEventListener('submit', (e) => {
|
|
168
|
+
e.preventDefault();
|
|
169
|
+
submissionCount++;
|
|
170
|
+
console.log('Form was submitted!');
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
// First open the dropdown
|
|
174
|
+
const dropdownTrigger = canvas.getByTestId('form-date-trigger');
|
|
175
|
+
await userEvent.click(dropdownTrigger);
|
|
176
|
+
|
|
177
|
+
// Click prev/next month and verify no submission
|
|
178
|
+
const buttons = document.querySelectorAll('button');
|
|
179
|
+
const prevMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretLeft'));
|
|
180
|
+
const nextMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretRight'));
|
|
181
|
+
|
|
182
|
+
if (prevMonthButton) {
|
|
183
|
+
await userEvent.click(prevMonthButton);
|
|
184
|
+
console.log('Clicked prev month, submission count:', submissionCount);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
if (nextMonthButton) {
|
|
188
|
+
await userEvent.click(nextMonthButton);
|
|
189
|
+
console.log('Clicked next month, submission count:', submissionCount);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// Success message if no form submission occurred
|
|
193
|
+
if (submissionCount === 0) {
|
|
194
|
+
console.log('TEST PASSED: Month navigation did not trigger form submission');
|
|
195
|
+
} else {
|
|
196
|
+
console.error('TEST FAILED: Month navigation triggered form submission');
|
|
197
|
+
}
|
|
198
|
+
}}
|
|
199
|
+
>
|
|
200
|
+
<div class="p-4">
|
|
201
|
+
<form data-testid="test-form" onsubmit={(e) => e.preventDefault()}>
|
|
202
|
+
<div class="mb-4">
|
|
203
|
+
<label for="name" class="mb-1 block text-sm font-medium">Name</label>
|
|
204
|
+
<input id="name" type="text" class="input input-bordered w-full" />
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="mb-4">
|
|
208
|
+
<Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
|
|
209
|
+
{#snippet trigger({ Trigger })}
|
|
210
|
+
<Trigger>
|
|
211
|
+
<div data-testid="form-date-trigger" class="flex items-center gap-2">
|
|
212
|
+
<Icon iconName="CalendarBlank" class="mr-2" size={16} />
|
|
213
|
+
{formDisplayText}
|
|
214
|
+
</div>
|
|
215
|
+
</Trigger>
|
|
216
|
+
{/snippet}
|
|
217
|
+
|
|
218
|
+
{#snippet content()}
|
|
219
|
+
<DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
|
|
220
|
+
{/snippet}
|
|
221
|
+
</Dropdown>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<button type="submit" class="btn btn-primary mt-4">Submit Form</button>
|
|
225
|
+
</form>
|
|
226
|
+
</div>
|
|
227
|
+
</Story>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import DatePicker from './DatePicker.svelte';
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
12
|
+
};
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
14
|
+
}
|
|
15
|
+
declare const DatePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
+
[evt: string]: CustomEvent<any>;
|
|
17
|
+
}, {}, {}, string>;
|
|
18
|
+
type DatePicker = InstanceType<typeof DatePicker>;
|
|
19
|
+
export default DatePicker;
|
|
@@ -95,11 +95,11 @@
|
|
|
95
95
|
<div class="calendar">
|
|
96
96
|
<div class="calendar-header">
|
|
97
97
|
<div class="month-year">
|
|
98
|
-
<IconButton onclick={previousMonth}>
|
|
98
|
+
<IconButton onclick={previousMonth} type="button">
|
|
99
99
|
<Icon iconName="CaretLeft" color="secondary" size="0.75rem" />
|
|
100
100
|
</IconButton>
|
|
101
101
|
<h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
|
|
102
|
-
<IconButton onclick={nextMonth}>
|
|
102
|
+
<IconButton onclick={nextMonth} type="button">
|
|
103
103
|
<Icon iconName="CaretRight" color="secondary" size="0.75rem" />
|
|
104
104
|
</IconButton>
|
|
105
105
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
6
6
|
children: Snippet;
|
|
7
|
-
variant?: 'default' | 'outline' | 'transparent';
|
|
7
|
+
variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
|
|
8
8
|
size?: 'sm' | 'md';
|
|
9
9
|
tooltip?: string;
|
|
10
10
|
onclick?: (event: MouseEvent) => void;
|
|
@@ -29,13 +29,15 @@
|
|
|
29
29
|
const variants = {
|
|
30
30
|
default: 'bg-neutral text-primary',
|
|
31
31
|
outline: 'bg-transparent text-secondary border',
|
|
32
|
-
transparent: 'bg-transparent text-secondary'
|
|
32
|
+
transparent: 'bg-transparent text-secondary',
|
|
33
|
+
'default-inverse': 'bg-base-inverse text-secondary-inverse'
|
|
33
34
|
};
|
|
34
35
|
|
|
35
36
|
const buttonClassVariants = {
|
|
36
37
|
default: 'hover:bg-neutral-hover',
|
|
37
38
|
outline: 'hover:bg-neutral hover:text-primary',
|
|
38
|
-
transparent: 'hover:bg-neutral hover:text-primary'
|
|
39
|
+
transparent: 'hover:bg-neutral hover:text-primary',
|
|
40
|
+
'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse'
|
|
39
41
|
};
|
|
40
42
|
|
|
41
43
|
let variantClassName = $derived(variants[variant]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
interface Props {
|
|
3
3
|
children: Snippet;
|
|
4
|
-
variant?: 'default' | 'outline' | 'transparent';
|
|
4
|
+
variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
|
|
5
5
|
size?: 'sm' | 'md';
|
|
6
6
|
tooltip?: string;
|
|
7
7
|
onclick?: (event: MouseEvent) => void;
|
|
@@ -165,6 +165,86 @@ declare const config: {
|
|
|
165
165
|
12: string;
|
|
166
166
|
16: string;
|
|
167
167
|
};
|
|
168
|
+
pink: {
|
|
169
|
+
1: string;
|
|
170
|
+
2: string;
|
|
171
|
+
3: string;
|
|
172
|
+
4: {
|
|
173
|
+
default: string;
|
|
174
|
+
10: string;
|
|
175
|
+
25: string;
|
|
176
|
+
};
|
|
177
|
+
5: {
|
|
178
|
+
default: string;
|
|
179
|
+
10: string;
|
|
180
|
+
25: string;
|
|
181
|
+
};
|
|
182
|
+
6: string;
|
|
183
|
+
};
|
|
184
|
+
plum: {
|
|
185
|
+
1: string;
|
|
186
|
+
2: string;
|
|
187
|
+
3: string;
|
|
188
|
+
4: {
|
|
189
|
+
default: string;
|
|
190
|
+
10: string;
|
|
191
|
+
25: string;
|
|
192
|
+
};
|
|
193
|
+
5: {
|
|
194
|
+
default: string;
|
|
195
|
+
10: string;
|
|
196
|
+
25: string;
|
|
197
|
+
};
|
|
198
|
+
6: string;
|
|
199
|
+
};
|
|
200
|
+
lilac: {
|
|
201
|
+
1: string;
|
|
202
|
+
2: string;
|
|
203
|
+
3: string;
|
|
204
|
+
4: {
|
|
205
|
+
default: string;
|
|
206
|
+
10: string;
|
|
207
|
+
25: string;
|
|
208
|
+
};
|
|
209
|
+
5: {
|
|
210
|
+
default: string;
|
|
211
|
+
10: string;
|
|
212
|
+
25: string;
|
|
213
|
+
};
|
|
214
|
+
6: string;
|
|
215
|
+
};
|
|
216
|
+
lime: {
|
|
217
|
+
1: string;
|
|
218
|
+
2: string;
|
|
219
|
+
3: string;
|
|
220
|
+
4: {
|
|
221
|
+
default: string;
|
|
222
|
+
10: string;
|
|
223
|
+
25: string;
|
|
224
|
+
};
|
|
225
|
+
5: {
|
|
226
|
+
default: string;
|
|
227
|
+
10: string;
|
|
228
|
+
25: string;
|
|
229
|
+
};
|
|
230
|
+
6: string;
|
|
231
|
+
};
|
|
232
|
+
pear: {
|
|
233
|
+
1: string;
|
|
234
|
+
2: string;
|
|
235
|
+
3: string;
|
|
236
|
+
4: {
|
|
237
|
+
default: string;
|
|
238
|
+
10: string;
|
|
239
|
+
25: string;
|
|
240
|
+
};
|
|
241
|
+
5: {
|
|
242
|
+
default: string;
|
|
243
|
+
10: string;
|
|
244
|
+
25: string;
|
|
245
|
+
};
|
|
246
|
+
6: string;
|
|
247
|
+
};
|
|
168
248
|
};
|
|
169
249
|
backgroundColor: {
|
|
170
250
|
'dark-neutral': string;
|
|
@@ -193,6 +273,16 @@ declare const config: {
|
|
|
193
273
|
'dark-orange-hover': string;
|
|
194
274
|
'dark-sky': string;
|
|
195
275
|
'dark-sky-hover': string;
|
|
276
|
+
'dark-pink': string;
|
|
277
|
+
'dark-pink-hover': string;
|
|
278
|
+
'dark-plum': string;
|
|
279
|
+
'dark-plum-hover': string;
|
|
280
|
+
'dark-lilac': string;
|
|
281
|
+
'dark-lilac-hover': string;
|
|
282
|
+
'dark-lime': string;
|
|
283
|
+
'dark-lime-hover': string;
|
|
284
|
+
'dark-pear': string;
|
|
285
|
+
'dark-pear-hover': string;
|
|
196
286
|
'dark-primary': string;
|
|
197
287
|
'dark-secondary': string;
|
|
198
288
|
'dark-base': string;
|
|
@@ -227,6 +317,8 @@ declare const config: {
|
|
|
227
317
|
'danger-inverse-hover': string;
|
|
228
318
|
blue: string;
|
|
229
319
|
'blue-hover': string;
|
|
320
|
+
'blue-inverse': string;
|
|
321
|
+
'blue-inverse-hover': string;
|
|
230
322
|
orange: string;
|
|
231
323
|
'orange-hover': string;
|
|
232
324
|
'orange-inverse': string;
|
|
@@ -235,6 +327,26 @@ declare const config: {
|
|
|
235
327
|
'sky-hover': string;
|
|
236
328
|
'sky-inverse': string;
|
|
237
329
|
'sky-inverse-hover': string;
|
|
330
|
+
pink: string;
|
|
331
|
+
'pink-hover': string;
|
|
332
|
+
'pink-inverse': string;
|
|
333
|
+
'pink-inverse-hover': string;
|
|
334
|
+
plum: string;
|
|
335
|
+
'plum-hover': string;
|
|
336
|
+
'plum-inverse': string;
|
|
337
|
+
'plum-inverse-hover': string;
|
|
338
|
+
lilac: string;
|
|
339
|
+
'lilac-hover': string;
|
|
340
|
+
'lilac-inverse': string;
|
|
341
|
+
'lilac-inverse-hover': string;
|
|
342
|
+
lime: string;
|
|
343
|
+
'lime-hover': string;
|
|
344
|
+
'lime-inverse': string;
|
|
345
|
+
'lime-inverse-hover': string;
|
|
346
|
+
pear: string;
|
|
347
|
+
'pear-hover': string;
|
|
348
|
+
'pear-inverse': string;
|
|
349
|
+
'pear-inverse-hover': string;
|
|
238
350
|
};
|
|
239
351
|
borderColor: {
|
|
240
352
|
'dark-static': string;
|
|
@@ -263,6 +375,11 @@ declare const config: {
|
|
|
263
375
|
'icon-blue': string;
|
|
264
376
|
'icon-orange': string;
|
|
265
377
|
'icon-sky': string;
|
|
378
|
+
'icon-pink': string;
|
|
379
|
+
'icon-plum': string;
|
|
380
|
+
'icon-lilac': string;
|
|
381
|
+
'icon-lime': string;
|
|
382
|
+
'icon-pear': string;
|
|
266
383
|
'dark-primary': string;
|
|
267
384
|
'dark-secondary': string;
|
|
268
385
|
'dark-tertiary': string;
|
|
@@ -273,6 +390,14 @@ declare const config: {
|
|
|
273
390
|
'dark-success': string;
|
|
274
391
|
'dark-warning': string;
|
|
275
392
|
'dark-danger': string;
|
|
393
|
+
'dark-blue': string;
|
|
394
|
+
'dark-orange': string;
|
|
395
|
+
'dark-sky': string;
|
|
396
|
+
'dark-pink': string;
|
|
397
|
+
'dark-plum': string;
|
|
398
|
+
'dark-lilac': string;
|
|
399
|
+
'dark-lime': string;
|
|
400
|
+
'dark-pear': string;
|
|
276
401
|
primary: string;
|
|
277
402
|
secondary: string;
|
|
278
403
|
tertiary: string;
|
|
@@ -283,6 +408,14 @@ declare const config: {
|
|
|
283
408
|
success: string;
|
|
284
409
|
warning: string;
|
|
285
410
|
danger: string;
|
|
411
|
+
blue: string;
|
|
412
|
+
orange: string;
|
|
413
|
+
sky: string;
|
|
414
|
+
pink: string;
|
|
415
|
+
plum: string;
|
|
416
|
+
lilac: string;
|
|
417
|
+
lime: string;
|
|
418
|
+
pear: string;
|
|
286
419
|
};
|
|
287
420
|
boxShadow: {
|
|
288
421
|
input: string;
|
package/dist/tokens.d.ts
CHANGED
|
@@ -160,6 +160,86 @@ export declare const colors: {
|
|
|
160
160
|
12: string;
|
|
161
161
|
16: string;
|
|
162
162
|
};
|
|
163
|
+
pink: {
|
|
164
|
+
1: string;
|
|
165
|
+
2: string;
|
|
166
|
+
3: string;
|
|
167
|
+
4: {
|
|
168
|
+
default: string;
|
|
169
|
+
10: string;
|
|
170
|
+
25: string;
|
|
171
|
+
};
|
|
172
|
+
5: {
|
|
173
|
+
default: string;
|
|
174
|
+
10: string;
|
|
175
|
+
25: string;
|
|
176
|
+
};
|
|
177
|
+
6: string;
|
|
178
|
+
};
|
|
179
|
+
plum: {
|
|
180
|
+
1: string;
|
|
181
|
+
2: string;
|
|
182
|
+
3: string;
|
|
183
|
+
4: {
|
|
184
|
+
default: string;
|
|
185
|
+
10: string;
|
|
186
|
+
25: string;
|
|
187
|
+
};
|
|
188
|
+
5: {
|
|
189
|
+
default: string;
|
|
190
|
+
10: string;
|
|
191
|
+
25: string;
|
|
192
|
+
};
|
|
193
|
+
6: string;
|
|
194
|
+
};
|
|
195
|
+
lilac: {
|
|
196
|
+
1: string;
|
|
197
|
+
2: string;
|
|
198
|
+
3: string;
|
|
199
|
+
4: {
|
|
200
|
+
default: string;
|
|
201
|
+
10: string;
|
|
202
|
+
25: string;
|
|
203
|
+
};
|
|
204
|
+
5: {
|
|
205
|
+
default: string;
|
|
206
|
+
10: string;
|
|
207
|
+
25: string;
|
|
208
|
+
};
|
|
209
|
+
6: string;
|
|
210
|
+
};
|
|
211
|
+
lime: {
|
|
212
|
+
1: string;
|
|
213
|
+
2: string;
|
|
214
|
+
3: string;
|
|
215
|
+
4: {
|
|
216
|
+
default: string;
|
|
217
|
+
10: string;
|
|
218
|
+
25: string;
|
|
219
|
+
};
|
|
220
|
+
5: {
|
|
221
|
+
default: string;
|
|
222
|
+
10: string;
|
|
223
|
+
25: string;
|
|
224
|
+
};
|
|
225
|
+
6: string;
|
|
226
|
+
};
|
|
227
|
+
pear: {
|
|
228
|
+
1: string;
|
|
229
|
+
2: string;
|
|
230
|
+
3: string;
|
|
231
|
+
4: {
|
|
232
|
+
default: string;
|
|
233
|
+
10: string;
|
|
234
|
+
25: string;
|
|
235
|
+
};
|
|
236
|
+
5: {
|
|
237
|
+
default: string;
|
|
238
|
+
10: string;
|
|
239
|
+
25: string;
|
|
240
|
+
};
|
|
241
|
+
6: string;
|
|
242
|
+
};
|
|
163
243
|
};
|
|
164
244
|
export declare const borderColor: {
|
|
165
245
|
'dark-static': string;
|
|
@@ -188,6 +268,11 @@ export declare const textColor: {
|
|
|
188
268
|
'icon-blue': string;
|
|
189
269
|
'icon-orange': string;
|
|
190
270
|
'icon-sky': string;
|
|
271
|
+
'icon-pink': string;
|
|
272
|
+
'icon-plum': string;
|
|
273
|
+
'icon-lilac': string;
|
|
274
|
+
'icon-lime': string;
|
|
275
|
+
'icon-pear': string;
|
|
191
276
|
'dark-primary': string;
|
|
192
277
|
'dark-secondary': string;
|
|
193
278
|
'dark-tertiary': string;
|
|
@@ -198,6 +283,14 @@ export declare const textColor: {
|
|
|
198
283
|
'dark-success': string;
|
|
199
284
|
'dark-warning': string;
|
|
200
285
|
'dark-danger': string;
|
|
286
|
+
'dark-blue': string;
|
|
287
|
+
'dark-orange': string;
|
|
288
|
+
'dark-sky': string;
|
|
289
|
+
'dark-pink': string;
|
|
290
|
+
'dark-plum': string;
|
|
291
|
+
'dark-lilac': string;
|
|
292
|
+
'dark-lime': string;
|
|
293
|
+
'dark-pear': string;
|
|
201
294
|
primary: string;
|
|
202
295
|
secondary: string;
|
|
203
296
|
tertiary: string;
|
|
@@ -208,6 +301,14 @@ export declare const textColor: {
|
|
|
208
301
|
success: string;
|
|
209
302
|
warning: string;
|
|
210
303
|
danger: string;
|
|
304
|
+
blue: string;
|
|
305
|
+
orange: string;
|
|
306
|
+
sky: string;
|
|
307
|
+
pink: string;
|
|
308
|
+
plum: string;
|
|
309
|
+
lilac: string;
|
|
310
|
+
lime: string;
|
|
311
|
+
pear: string;
|
|
211
312
|
};
|
|
212
313
|
export declare const backgroundColor: {
|
|
213
314
|
'dark-neutral': string;
|
|
@@ -236,6 +337,16 @@ export declare const backgroundColor: {
|
|
|
236
337
|
'dark-orange-hover': string;
|
|
237
338
|
'dark-sky': string;
|
|
238
339
|
'dark-sky-hover': string;
|
|
340
|
+
'dark-pink': string;
|
|
341
|
+
'dark-pink-hover': string;
|
|
342
|
+
'dark-plum': string;
|
|
343
|
+
'dark-plum-hover': string;
|
|
344
|
+
'dark-lilac': string;
|
|
345
|
+
'dark-lilac-hover': string;
|
|
346
|
+
'dark-lime': string;
|
|
347
|
+
'dark-lime-hover': string;
|
|
348
|
+
'dark-pear': string;
|
|
349
|
+
'dark-pear-hover': string;
|
|
239
350
|
'dark-primary': string;
|
|
240
351
|
'dark-secondary': string;
|
|
241
352
|
'dark-base': string;
|
|
@@ -270,6 +381,8 @@ export declare const backgroundColor: {
|
|
|
270
381
|
'danger-inverse-hover': string;
|
|
271
382
|
blue: string;
|
|
272
383
|
'blue-hover': string;
|
|
384
|
+
'blue-inverse': string;
|
|
385
|
+
'blue-inverse-hover': string;
|
|
273
386
|
orange: string;
|
|
274
387
|
'orange-hover': string;
|
|
275
388
|
'orange-inverse': string;
|
|
@@ -278,6 +391,26 @@ export declare const backgroundColor: {
|
|
|
278
391
|
'sky-hover': string;
|
|
279
392
|
'sky-inverse': string;
|
|
280
393
|
'sky-inverse-hover': string;
|
|
394
|
+
pink: string;
|
|
395
|
+
'pink-hover': string;
|
|
396
|
+
'pink-inverse': string;
|
|
397
|
+
'pink-inverse-hover': string;
|
|
398
|
+
plum: string;
|
|
399
|
+
'plum-hover': string;
|
|
400
|
+
'plum-inverse': string;
|
|
401
|
+
'plum-inverse-hover': string;
|
|
402
|
+
lilac: string;
|
|
403
|
+
'lilac-hover': string;
|
|
404
|
+
'lilac-inverse': string;
|
|
405
|
+
'lilac-inverse-hover': string;
|
|
406
|
+
lime: string;
|
|
407
|
+
'lime-hover': string;
|
|
408
|
+
'lime-inverse': string;
|
|
409
|
+
'lime-inverse-hover': string;
|
|
410
|
+
pear: string;
|
|
411
|
+
'pear-hover': string;
|
|
412
|
+
'pear-inverse': string;
|
|
413
|
+
'pear-inverse-hover': string;
|
|
281
414
|
};
|
|
282
415
|
export declare const outlineColor: {
|
|
283
416
|
'dark-static': string;
|
|
@@ -459,6 +592,86 @@ export declare const tokens: {
|
|
|
459
592
|
12: string;
|
|
460
593
|
16: string;
|
|
461
594
|
};
|
|
595
|
+
pink: {
|
|
596
|
+
1: string;
|
|
597
|
+
2: string;
|
|
598
|
+
3: string;
|
|
599
|
+
4: {
|
|
600
|
+
default: string;
|
|
601
|
+
10: string;
|
|
602
|
+
25: string;
|
|
603
|
+
};
|
|
604
|
+
5: {
|
|
605
|
+
default: string;
|
|
606
|
+
10: string;
|
|
607
|
+
25: string;
|
|
608
|
+
};
|
|
609
|
+
6: string;
|
|
610
|
+
};
|
|
611
|
+
plum: {
|
|
612
|
+
1: string;
|
|
613
|
+
2: string;
|
|
614
|
+
3: string;
|
|
615
|
+
4: {
|
|
616
|
+
default: string;
|
|
617
|
+
10: string;
|
|
618
|
+
25: string;
|
|
619
|
+
};
|
|
620
|
+
5: {
|
|
621
|
+
default: string;
|
|
622
|
+
10: string;
|
|
623
|
+
25: string;
|
|
624
|
+
};
|
|
625
|
+
6: string;
|
|
626
|
+
};
|
|
627
|
+
lilac: {
|
|
628
|
+
1: string;
|
|
629
|
+
2: string;
|
|
630
|
+
3: string;
|
|
631
|
+
4: {
|
|
632
|
+
default: string;
|
|
633
|
+
10: string;
|
|
634
|
+
25: string;
|
|
635
|
+
};
|
|
636
|
+
5: {
|
|
637
|
+
default: string;
|
|
638
|
+
10: string;
|
|
639
|
+
25: string;
|
|
640
|
+
};
|
|
641
|
+
6: string;
|
|
642
|
+
};
|
|
643
|
+
lime: {
|
|
644
|
+
1: string;
|
|
645
|
+
2: string;
|
|
646
|
+
3: string;
|
|
647
|
+
4: {
|
|
648
|
+
default: string;
|
|
649
|
+
10: string;
|
|
650
|
+
25: string;
|
|
651
|
+
};
|
|
652
|
+
5: {
|
|
653
|
+
default: string;
|
|
654
|
+
10: string;
|
|
655
|
+
25: string;
|
|
656
|
+
};
|
|
657
|
+
6: string;
|
|
658
|
+
};
|
|
659
|
+
pear: {
|
|
660
|
+
1: string;
|
|
661
|
+
2: string;
|
|
662
|
+
3: string;
|
|
663
|
+
4: {
|
|
664
|
+
default: string;
|
|
665
|
+
10: string;
|
|
666
|
+
25: string;
|
|
667
|
+
};
|
|
668
|
+
5: {
|
|
669
|
+
default: string;
|
|
670
|
+
10: string;
|
|
671
|
+
25: string;
|
|
672
|
+
};
|
|
673
|
+
6: string;
|
|
674
|
+
};
|
|
462
675
|
};
|
|
463
676
|
borderColor: {
|
|
464
677
|
'dark-static': string;
|
|
@@ -487,6 +700,11 @@ export declare const tokens: {
|
|
|
487
700
|
'icon-blue': string;
|
|
488
701
|
'icon-orange': string;
|
|
489
702
|
'icon-sky': string;
|
|
703
|
+
'icon-pink': string;
|
|
704
|
+
'icon-plum': string;
|
|
705
|
+
'icon-lilac': string;
|
|
706
|
+
'icon-lime': string;
|
|
707
|
+
'icon-pear': string;
|
|
490
708
|
'dark-primary': string;
|
|
491
709
|
'dark-secondary': string;
|
|
492
710
|
'dark-tertiary': string;
|
|
@@ -497,6 +715,14 @@ export declare const tokens: {
|
|
|
497
715
|
'dark-success': string;
|
|
498
716
|
'dark-warning': string;
|
|
499
717
|
'dark-danger': string;
|
|
718
|
+
'dark-blue': string;
|
|
719
|
+
'dark-orange': string;
|
|
720
|
+
'dark-sky': string;
|
|
721
|
+
'dark-pink': string;
|
|
722
|
+
'dark-plum': string;
|
|
723
|
+
'dark-lilac': string;
|
|
724
|
+
'dark-lime': string;
|
|
725
|
+
'dark-pear': string;
|
|
500
726
|
primary: string;
|
|
501
727
|
secondary: string;
|
|
502
728
|
tertiary: string;
|
|
@@ -507,6 +733,14 @@ export declare const tokens: {
|
|
|
507
733
|
success: string;
|
|
508
734
|
warning: string;
|
|
509
735
|
danger: string;
|
|
736
|
+
blue: string;
|
|
737
|
+
orange: string;
|
|
738
|
+
sky: string;
|
|
739
|
+
pink: string;
|
|
740
|
+
plum: string;
|
|
741
|
+
lilac: string;
|
|
742
|
+
lime: string;
|
|
743
|
+
pear: string;
|
|
510
744
|
};
|
|
511
745
|
backgroundColor: {
|
|
512
746
|
'dark-neutral': string;
|
|
@@ -535,6 +769,16 @@ export declare const tokens: {
|
|
|
535
769
|
'dark-orange-hover': string;
|
|
536
770
|
'dark-sky': string;
|
|
537
771
|
'dark-sky-hover': string;
|
|
772
|
+
'dark-pink': string;
|
|
773
|
+
'dark-pink-hover': string;
|
|
774
|
+
'dark-plum': string;
|
|
775
|
+
'dark-plum-hover': string;
|
|
776
|
+
'dark-lilac': string;
|
|
777
|
+
'dark-lilac-hover': string;
|
|
778
|
+
'dark-lime': string;
|
|
779
|
+
'dark-lime-hover': string;
|
|
780
|
+
'dark-pear': string;
|
|
781
|
+
'dark-pear-hover': string;
|
|
538
782
|
'dark-primary': string;
|
|
539
783
|
'dark-secondary': string;
|
|
540
784
|
'dark-base': string;
|
|
@@ -569,6 +813,8 @@ export declare const tokens: {
|
|
|
569
813
|
'danger-inverse-hover': string;
|
|
570
814
|
blue: string;
|
|
571
815
|
'blue-hover': string;
|
|
816
|
+
'blue-inverse': string;
|
|
817
|
+
'blue-inverse-hover': string;
|
|
572
818
|
orange: string;
|
|
573
819
|
'orange-hover': string;
|
|
574
820
|
'orange-inverse': string;
|
|
@@ -577,6 +823,26 @@ export declare const tokens: {
|
|
|
577
823
|
'sky-hover': string;
|
|
578
824
|
'sky-inverse': string;
|
|
579
825
|
'sky-inverse-hover': string;
|
|
826
|
+
pink: string;
|
|
827
|
+
'pink-hover': string;
|
|
828
|
+
'pink-inverse': string;
|
|
829
|
+
'pink-inverse-hover': string;
|
|
830
|
+
plum: string;
|
|
831
|
+
'plum-hover': string;
|
|
832
|
+
'plum-inverse': string;
|
|
833
|
+
'plum-inverse-hover': string;
|
|
834
|
+
lilac: string;
|
|
835
|
+
'lilac-hover': string;
|
|
836
|
+
'lilac-inverse': string;
|
|
837
|
+
'lilac-inverse-hover': string;
|
|
838
|
+
lime: string;
|
|
839
|
+
'lime-hover': string;
|
|
840
|
+
'lime-inverse': string;
|
|
841
|
+
'lime-inverse-hover': string;
|
|
842
|
+
pear: string;
|
|
843
|
+
'pear-hover': string;
|
|
844
|
+
'pear-inverse': string;
|
|
845
|
+
'pear-inverse-hover': string;
|
|
580
846
|
};
|
|
581
847
|
boxShadow: {
|
|
582
848
|
input: string;
|
package/dist/tokens.js
CHANGED
|
@@ -95,6 +95,46 @@ export const colors = {
|
|
|
95
95
|
8: 'rgba(18, 25, 42, 0.08)',
|
|
96
96
|
12: 'rgba(18, 25, 42, 0.12)',
|
|
97
97
|
16: 'rgba(18, 25, 42, 0.16)'
|
|
98
|
+
},
|
|
99
|
+
pink: {
|
|
100
|
+
1: '#fdedf4',
|
|
101
|
+
2: '#f9c6dd',
|
|
102
|
+
3: '#f284b6',
|
|
103
|
+
4: { default: '#f06da8', 10: '#f06da81A', 25: '#f06da840' },
|
|
104
|
+
5: { default: '#ec4892', 10: '#ec48921A', 25: '#ec489240' },
|
|
105
|
+
6: '#bf3b77'
|
|
106
|
+
},
|
|
107
|
+
plum: {
|
|
108
|
+
1: '#f9edf8',
|
|
109
|
+
2: '#ecc6ea',
|
|
110
|
+
3: '#d583d2',
|
|
111
|
+
4: { default: '#cd6bc9', 10: '#cd6bc91A', 25: '#cd6bc940' },
|
|
112
|
+
5: { default: '#c146bc', 10: '#c146bc1A', 25: '#c146bc40' },
|
|
113
|
+
6: '#9d3998'
|
|
114
|
+
},
|
|
115
|
+
lilac: {
|
|
116
|
+
1: '#f5ecfd',
|
|
117
|
+
2: '#dfc5f7',
|
|
118
|
+
3: '#b982ee',
|
|
119
|
+
4: { default: '#ac69eb', 10: '#ac69eb1A', 25: '#ac69eb40' },
|
|
120
|
+
5: { default: '#9744e6', 10: '#9744e61A', 25: '#9744e640' },
|
|
121
|
+
6: '#7a37ba'
|
|
122
|
+
},
|
|
123
|
+
lime: {
|
|
124
|
+
1: '#f2f8e8',
|
|
125
|
+
2: '#d5eab6',
|
|
126
|
+
3: '#a5d162',
|
|
127
|
+
4: { default: '#93c843', 10: '#93c8431A', 25: '#93c84340' },
|
|
128
|
+
5: { default: '#78ba14', 10: '#78ba141A', 25: '#78ba1440' },
|
|
129
|
+
6: '#619710'
|
|
130
|
+
},
|
|
131
|
+
pear: {
|
|
132
|
+
1: '#f8f8e7',
|
|
133
|
+
2: '#e9eab6',
|
|
134
|
+
3: '#cfd161',
|
|
135
|
+
4: { default: '#c6c842', 10: '#c6c8421A', 25: '#c6c84240' },
|
|
136
|
+
5: { default: '#b8ba13', 10: '#b8ba131A', 25: '#b8ba1340' },
|
|
137
|
+
6: '#95970F'
|
|
98
138
|
}
|
|
99
139
|
};
|
|
100
140
|
const lightTextColor = {
|
|
@@ -107,7 +147,15 @@ const lightTextColor = {
|
|
|
107
147
|
accent: colors.periwinkle[6],
|
|
108
148
|
success: colors.green[6],
|
|
109
149
|
warning: colors.yellow[6],
|
|
110
|
-
danger: colors.red[6]
|
|
150
|
+
danger: colors.red[6],
|
|
151
|
+
blue: colors.blue[6],
|
|
152
|
+
orange: colors.orange[6],
|
|
153
|
+
sky: colors.sky[6],
|
|
154
|
+
pink: colors.pink[6],
|
|
155
|
+
plum: colors.plum[6],
|
|
156
|
+
lilac: colors.lilac[6],
|
|
157
|
+
lime: colors.lime[6],
|
|
158
|
+
pear: colors.pear[6]
|
|
111
159
|
};
|
|
112
160
|
const lightIconColor = {
|
|
113
161
|
'icon-primary': colors.base.midnight.default,
|
|
@@ -121,7 +169,12 @@ const lightIconColor = {
|
|
|
121
169
|
'icon-danger': colors.red[5].default,
|
|
122
170
|
'icon-blue': colors.blue[5].default,
|
|
123
171
|
'icon-orange': colors.orange[5].default,
|
|
124
|
-
'icon-sky': colors.sky[5].default
|
|
172
|
+
'icon-sky': colors.sky[5].default,
|
|
173
|
+
'icon-pink': colors.pink[5].default,
|
|
174
|
+
'icon-plum': colors.plum[5].default,
|
|
175
|
+
'icon-lilac': colors.lilac[5].default,
|
|
176
|
+
'icon-lime': colors.lime[5].default,
|
|
177
|
+
'icon-pear': colors.pear[5].default
|
|
125
178
|
};
|
|
126
179
|
const lightBorderColor = {
|
|
127
180
|
static: colors.base.midnight[8],
|
|
@@ -168,6 +221,8 @@ const lightBackgroundColor = {
|
|
|
168
221
|
'danger-inverse-hover': colors.red[6],
|
|
169
222
|
blue: colors.blue[5][10],
|
|
170
223
|
'blue-hover': colors.blue[5][25],
|
|
224
|
+
'blue-inverse': colors.blue[5].default,
|
|
225
|
+
'blue-inverse-hover': colors.blue[6],
|
|
171
226
|
orange: colors.orange[5][10],
|
|
172
227
|
'orange-hover': colors.orange[5][25],
|
|
173
228
|
'orange-inverse': colors.orange[5].default,
|
|
@@ -175,7 +230,27 @@ const lightBackgroundColor = {
|
|
|
175
230
|
sky: colors.sky[5][10],
|
|
176
231
|
'sky-hover': colors.sky[5][25],
|
|
177
232
|
'sky-inverse': colors.sky[5].default,
|
|
178
|
-
'sky-inverse-hover': colors.sky[6]
|
|
233
|
+
'sky-inverse-hover': colors.sky[6],
|
|
234
|
+
pink: colors.pink[5][10],
|
|
235
|
+
'pink-hover': colors.pink[5][25],
|
|
236
|
+
'pink-inverse': colors.pink[5].default,
|
|
237
|
+
'pink-inverse-hover': colors.pink[6],
|
|
238
|
+
plum: colors.plum[5][10],
|
|
239
|
+
'plum-hover': colors.plum[5][25],
|
|
240
|
+
'plum-inverse': colors.plum[5].default,
|
|
241
|
+
'plum-inverse-hover': colors.plum[6],
|
|
242
|
+
lilac: colors.lilac[5][10],
|
|
243
|
+
'lilac-hover': colors.lilac[5][25],
|
|
244
|
+
'lilac-inverse': colors.lilac[5].default,
|
|
245
|
+
'lilac-inverse-hover': colors.lilac[6],
|
|
246
|
+
lime: colors.lime[5][10],
|
|
247
|
+
'lime-hover': colors.lime[5][25],
|
|
248
|
+
'lime-inverse': colors.lime[5].default,
|
|
249
|
+
'lime-inverse-hover': colors.lime[6],
|
|
250
|
+
pear: colors.pear[5][10],
|
|
251
|
+
'pear-hover': colors.pear[5][25],
|
|
252
|
+
'pear-inverse': colors.pear[5].default,
|
|
253
|
+
'pear-inverse-hover': colors.pear[6]
|
|
179
254
|
};
|
|
180
255
|
const darkTextColor = {
|
|
181
256
|
'dark-primary': colors.base.white.default,
|
|
@@ -187,7 +262,15 @@ const darkTextColor = {
|
|
|
187
262
|
'dark-accent': colors.periwinkle[3].default,
|
|
188
263
|
'dark-success': colors.green[3],
|
|
189
264
|
'dark-warning': colors.yellow[3],
|
|
190
|
-
'dark-danger': colors.red[3]
|
|
265
|
+
'dark-danger': colors.red[3],
|
|
266
|
+
'dark-blue': colors.blue[3],
|
|
267
|
+
'dark-orange': colors.orange[3],
|
|
268
|
+
'dark-sky': colors.sky[3],
|
|
269
|
+
'dark-pink': colors.pink[3],
|
|
270
|
+
'dark-plum': colors.plum[3],
|
|
271
|
+
'dark-lilac': colors.lilac[3],
|
|
272
|
+
'dark-lime': colors.lime[3],
|
|
273
|
+
'dark-pear': colors.pear[3]
|
|
191
274
|
};
|
|
192
275
|
const darkIconColor = {
|
|
193
276
|
'dark-primary': colors.base.white.default,
|
|
@@ -200,7 +283,12 @@ const darkIconColor = {
|
|
|
200
283
|
'dark-danger': colors.red[4].default,
|
|
201
284
|
'dark-blue': colors.blue[4].default,
|
|
202
285
|
'dark-orange': colors.orange[4].default,
|
|
203
|
-
'dark-sky': colors.sky[4].default
|
|
286
|
+
'dark-sky': colors.sky[4].default,
|
|
287
|
+
'dark-pink': colors.pink[5].default,
|
|
288
|
+
'dark-plum': colors.plum[5].default,
|
|
289
|
+
'dark-lilac': colors.lilac[5].default,
|
|
290
|
+
'dark-lime': colors.lime[5].default,
|
|
291
|
+
'dark-pear': colors.sky[5].default
|
|
204
292
|
};
|
|
205
293
|
const darkBorderColor = {
|
|
206
294
|
'dark-static': colors.base.white[10],
|
|
@@ -251,7 +339,17 @@ const darkBackgroundColor = {
|
|
|
251
339
|
'dark-orange': colors.orange[4][10],
|
|
252
340
|
'dark-orange-hover': colors.orange[4][25],
|
|
253
341
|
'dark-sky': colors.sky[4][10],
|
|
254
|
-
'dark-sky-hover': colors.sky[4][25]
|
|
342
|
+
'dark-sky-hover': colors.sky[4][25],
|
|
343
|
+
'dark-pink': colors.pink[4][10],
|
|
344
|
+
'dark-pink-hover': colors.pink[4][25],
|
|
345
|
+
'dark-plum': colors.plum[4][10],
|
|
346
|
+
'dark-plum-hover': colors.plum[4][25],
|
|
347
|
+
'dark-lilac': colors.lilac[4][10],
|
|
348
|
+
'dark-lilac-hover': colors.lilac[4][25],
|
|
349
|
+
'dark-lime': colors.lime[4][10],
|
|
350
|
+
'dark-lime-hover': colors.lime[4][25],
|
|
351
|
+
'dark-pear': colors.pear[4][10],
|
|
352
|
+
'dark-pear-hover': colors.pear[4][25]
|
|
255
353
|
};
|
|
256
354
|
export const borderColor = {
|
|
257
355
|
...lightBorderColor,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reshape-biotech/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.51",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build",
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
"vitest": "^3.0.6"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"bits-ui": "^1.3.2"
|
|
77
|
+
"bits-ui": "^1.3.2",
|
|
78
|
+
"echarts": "^5.6.0"
|
|
78
79
|
}
|
|
79
80
|
}
|