@insymetri/styleguide 0.1.84 → 0.1.86
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/IIAlert/IIAlert.svelte +2 -2
- package/dist/IIBadge/IIBadge.svelte +12 -12
- package/dist/IIBadge/IIBadgeStories.svelte +83 -0
- package/dist/IIBadge/IIBadgeStories.svelte.d.ts +18 -0
- package/dist/IIButton/IIButton.svelte +1 -1
- package/dist/IICalendar/IICalendarGrid.svelte +1 -1
- package/dist/IICheckbox/IICheckbox.svelte +3 -3
- package/dist/IICheckboxList/IICheckboxList.svelte +1 -1
- package/dist/IICombobox/IICombobox.svelte +2 -2
- package/dist/IIDateInput/IIDateInput.svelte +1 -1
- package/dist/IIDropdownInput/IIDropdownInput.svelte +1 -1
- package/dist/IIEditableBadges/IIEditableBadges.svelte +3 -19
- package/dist/IIEditableText/IIEditableText.svelte +1 -1
- package/dist/IIIconButton/IIIconButton.svelte +1 -1
- package/dist/IIInput/IIInput.svelte +3 -3
- package/dist/IIMenu/IIMenu.svelte +1 -1
- package/dist/IIMultiSelect/IIMultiSelect.svelte +2 -2
- package/dist/IIOverflowActions/IIOverflowActions.svelte +2 -2
- package/dist/IIPillTabs/IIPillTabs.svelte +2 -2
- package/dist/IIStatusBadge/IIStatusBadge.svelte +4 -4
- package/dist/IISwitch/IISwitch.svelte +3 -3
- package/dist/IITabBar/IITabBar.svelte +2 -2
- package/dist/IITextarea/IITextarea.svelte +1 -1
- package/dist/IIToggle/IIToggle.svelte +1 -1
- package/dist/IITooltip/IITooltip.svelte +1 -1
- package/dist/IIViewFilterChip/IIViewFilterChip.svelte +1 -1
- package/dist/icons.d.ts +1 -0
- package/dist/icons.js +1 -0
- package/dist/style/colors.css +41 -41
- package/dist/style/tailwind/colors.d.ts +0 -1
- package/dist/style/tailwind/colors.js +40 -41
- package/dist/style/tailwind/preset.d.ts +0 -1
- package/dist/style/themes.css +21 -21
- package/dist/utils/menu/menu-styles.d.ts +1 -1
- package/dist/utils/menu/menu-styles.js +1 -1
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
{#if !dismissed}
|
|
38
|
-
<div class={cn('flex gap-12 p-12 rounded-
|
|
38
|
+
<div class={cn('flex gap-12 p-12 rounded-10 border', config.bg, config.border, className)} role="alert">
|
|
39
39
|
<IIIcon iconName={config.icon} size="lg" class={cn('mt-1', config.text)} />
|
|
40
40
|
<div class="flex-auto min-w-0">
|
|
41
41
|
{#if title}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
{#if dismissible}
|
|
49
49
|
<button
|
|
50
50
|
type="button"
|
|
51
|
-
class="shrink-0 p-4 rounded-
|
|
51
|
+
class="shrink-0 p-4 rounded-6 text-secondary hover:bg-hover-overlay transition-colors duration-fast cursor-default"
|
|
52
52
|
onclick={handleDismiss}
|
|
53
53
|
aria-label="Dismiss"
|
|
54
54
|
>
|
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
let {variant = 'grey', size = 'md', children, class: className}: Props = $props()
|
|
16
16
|
|
|
17
17
|
const variantClasses: Record<string, string> = {
|
|
18
|
-
grey: 'bg-badge-grey text-badge-grey',
|
|
19
|
-
blue: 'bg-badge-blue text-badge-blue',
|
|
20
|
-
red: 'bg-badge-red text-badge-red',
|
|
21
|
-
purple: 'bg-badge-purple text-badge-purple',
|
|
22
|
-
green: 'bg-badge-green text-badge-green',
|
|
23
|
-
orange: 'bg-badge-orange text-badge-orange',
|
|
24
|
-
cyan: 'bg-badge-cyan text-badge-cyan',
|
|
25
|
-
pink: 'bg-badge-pink text-badge-pink',
|
|
26
|
-
teal: 'bg-badge-teal text-badge-teal',
|
|
27
|
-
amber: 'bg-badge-amber text-badge-amber',
|
|
28
|
-
yellow: 'bg-badge-yellow text-badge-yellow',
|
|
18
|
+
grey: 'bg-badge-grey border-badge-grey text-badge-grey',
|
|
19
|
+
blue: 'bg-badge-blue border-badge-blue text-badge-blue',
|
|
20
|
+
red: 'bg-badge-red border-badge-red text-badge-red',
|
|
21
|
+
purple: 'bg-badge-purple border-badge-purple text-badge-purple',
|
|
22
|
+
green: 'bg-badge-green border-badge-green text-badge-green',
|
|
23
|
+
orange: 'bg-badge-orange border-badge-orange text-badge-orange',
|
|
24
|
+
cyan: 'bg-badge-cyan border-badge-cyan text-badge-cyan',
|
|
25
|
+
pink: 'bg-badge-pink border-badge-pink text-badge-pink',
|
|
26
|
+
teal: 'bg-badge-teal border-badge-teal text-badge-teal',
|
|
27
|
+
amber: 'bg-badge-amber border-badge-amber text-badge-amber',
|
|
28
|
+
yellow: 'bg-badge-yellow border-badge-yellow text-badge-yellow',
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
const sizeClasses: Record<string, string> = {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
<span
|
|
38
38
|
class={cn(
|
|
39
|
-
'inline-flex items-center rounded-
|
|
39
|
+
'inline-flex items-center rounded-full border font-medium whitespace-nowrap',
|
|
40
40
|
sizeClasses[size],
|
|
41
41
|
variantClasses[variant],
|
|
42
42
|
className
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IIBadge from './IIBadge.svelte'
|
|
3
|
+
import type {BadgeVariant} from './IIBadge.types'
|
|
4
|
+
|
|
5
|
+
const variants: BadgeVariant[] = [
|
|
6
|
+
'grey',
|
|
7
|
+
'blue',
|
|
8
|
+
'red',
|
|
9
|
+
'purple',
|
|
10
|
+
'green',
|
|
11
|
+
'orange',
|
|
12
|
+
'cyan',
|
|
13
|
+
'pink',
|
|
14
|
+
'teal',
|
|
15
|
+
'amber',
|
|
16
|
+
'yellow',
|
|
17
|
+
]
|
|
18
|
+
const sizes = ['sm', 'md'] as const
|
|
19
|
+
|
|
20
|
+
// Representative labels so the gallery reads like real usage.
|
|
21
|
+
const labels: Record<BadgeVariant, string> = {
|
|
22
|
+
grey: 'Draft',
|
|
23
|
+
blue: 'Active',
|
|
24
|
+
red: 'Overdue',
|
|
25
|
+
purple: 'In Review',
|
|
26
|
+
green: 'Approved',
|
|
27
|
+
orange: 'Pending',
|
|
28
|
+
cyan: 'Info',
|
|
29
|
+
pink: 'Highlight',
|
|
30
|
+
teal: 'Verified',
|
|
31
|
+
amber: 'Warning',
|
|
32
|
+
yellow: 'Note',
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<div class="flex flex-col gap-32">
|
|
37
|
+
<!-- Variants × Sizes matrix -->
|
|
38
|
+
<section>
|
|
39
|
+
<h2 class="text-default-emphasis text-primary mb-8">Variants × Sizes</h2>
|
|
40
|
+
<table class="border-collapse">
|
|
41
|
+
<thead>
|
|
42
|
+
<tr>
|
|
43
|
+
<th class="text-left text-tiny text-secondary pr-16 pb-8"></th>
|
|
44
|
+
{#each sizes as size}
|
|
45
|
+
<th class="text-left text-tiny text-secondary px-8 pb-8">{size}</th>
|
|
46
|
+
{/each}
|
|
47
|
+
</tr>
|
|
48
|
+
</thead>
|
|
49
|
+
<tbody>
|
|
50
|
+
{#each variants as variant}
|
|
51
|
+
<tr>
|
|
52
|
+
<td class="text-tiny text-secondary pr-16 py-8 align-middle">{variant}</td>
|
|
53
|
+
{#each sizes as size}
|
|
54
|
+
<td class="px-8 py-8">
|
|
55
|
+
<IIBadge {variant} {size}>{labels[variant]}</IIBadge>
|
|
56
|
+
</td>
|
|
57
|
+
{/each}
|
|
58
|
+
</tr>
|
|
59
|
+
{/each}
|
|
60
|
+
</tbody>
|
|
61
|
+
</table>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<!-- All variants inline -->
|
|
65
|
+
<section>
|
|
66
|
+
<h2 class="text-default-emphasis text-primary mb-8">All Variants</h2>
|
|
67
|
+
<div class="flex items-center gap-8 flex-wrap">
|
|
68
|
+
{#each variants as variant}
|
|
69
|
+
<IIBadge {variant}>{labels[variant]}</IIBadge>
|
|
70
|
+
{/each}
|
|
71
|
+
</div>
|
|
72
|
+
</section>
|
|
73
|
+
|
|
74
|
+
<!-- On a tinted surface — confirms the hairline border reads on non-white backgrounds -->
|
|
75
|
+
<section>
|
|
76
|
+
<h2 class="text-default-emphasis text-primary mb-8">On a tinted surface</h2>
|
|
77
|
+
<div class="flex items-center gap-8 flex-wrap bg-background p-16 rounded-8">
|
|
78
|
+
{#each variants as variant}
|
|
79
|
+
<IIBadge {variant}>{labels[variant]}</IIBadge>
|
|
80
|
+
{/each}
|
|
81
|
+
</div>
|
|
82
|
+
</section>
|
|
83
|
+
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const IIBadgeStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type IIBadgeStories = InstanceType<typeof IIBadgeStories>;
|
|
18
|
+
export default IIBadgeStories;
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
const baseClasses =
|
|
70
|
-
'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary
|
|
70
|
+
'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary'
|
|
71
71
|
|
|
72
72
|
const variantClasses = {
|
|
73
73
|
primary:
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
{#each weekDates as date (date.toString())}
|
|
160
160
|
<Calendar.Cell {date} month={month.value} class="flex-1 p-3">
|
|
161
161
|
<Calendar.Day
|
|
162
|
-
class="flex items-center justify-center aspect-square w-full rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[selected]:hover:bg-primary data-[today]:shadow-[inset_0_0_0_1px_var(--ii-gray-300)] data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[outside-month]:pointer-events-none data-[disabled]:text-tertiary data-[disabled]:
|
|
162
|
+
class="flex items-center justify-center aspect-square w-full rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[selected]:hover:bg-primary data-[today]:shadow-[inset_0_0_0_1px_var(--ii-gray-300)] data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[outside-month]:pointer-events-none data-[disabled]:text-tertiary data-[disabled]:opacity-30 data-[disabled]:pointer-events-none focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none"
|
|
163
163
|
>
|
|
164
164
|
{date.day}
|
|
165
165
|
</Calendar.Day>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
<label class={cn('flex items-center gap-8', className)}>
|
|
36
36
|
<Checkbox.Root
|
|
37
|
-
class={cn('peer', buttonReset, 'cursor-default shrink-0 inline-block data-[disabled]:
|
|
37
|
+
class={cn('peer', buttonReset, 'cursor-default shrink-0 inline-block data-[disabled]:opacity-50')}
|
|
38
38
|
bind:checked
|
|
39
39
|
{onCheckedChange}
|
|
40
40
|
{disabled}
|
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
</div>
|
|
59
59
|
</Checkbox.Root>
|
|
60
60
|
{#if label}
|
|
61
|
-
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50
|
|
61
|
+
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}
|
|
62
62
|
>{label}</span
|
|
63
63
|
>
|
|
64
64
|
{:else if children}
|
|
65
|
-
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50
|
|
65
|
+
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}>
|
|
66
66
|
{@render children()}
|
|
67
67
|
</span>
|
|
68
68
|
{/if}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</script>
|
|
9
9
|
|
|
10
10
|
<div
|
|
11
|
-
class="flex flex-col gap-8 overflow-y-auto p-8 border border-primary rounded-
|
|
11
|
+
class="flex flex-col gap-8 overflow-y-auto p-8 border border-primary rounded-8 bg-background"
|
|
12
12
|
style:max-height={maxHeight}
|
|
13
13
|
>
|
|
14
14
|
{@render children?.()}
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
label={isSimpleItem(item) ? item.label : getItemValue(item)}
|
|
154
154
|
disabled={getItemDisabled?.(item) ?? false}
|
|
155
155
|
class={cn(
|
|
156
|
-
'flex items-center gap-8 px-12 text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50
|
|
156
|
+
'flex items-center gap-8 px-12 text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 motion-reduce:transition-none',
|
|
157
157
|
itemDensityClasses[density.value]
|
|
158
158
|
)}
|
|
159
159
|
>
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
oninput={handleInput}
|
|
191
191
|
onfocus={openOnFocus ? handleFocus : undefined}
|
|
192
192
|
class={cn(
|
|
193
|
-
'w-full box-border py-5 px-12 text-input-text bg-input-bg border border-input-border transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:
|
|
193
|
+
'w-full box-border py-5 px-12 text-input-text bg-input-bg border border-input-border transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:bg-input-bg-disabled motion-reduce:transition-none',
|
|
194
194
|
densityClasses[density.value]
|
|
195
195
|
)}
|
|
196
196
|
/>
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
showError
|
|
99
99
|
? 'border-input-border-error hover:border-input-border-error [&:has(:focus)]:border-input-border-error [&:has(:focus)]:ring-error'
|
|
100
100
|
: 'hover:[&:not(:has(:focus))]:border-button-secondary-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-primary',
|
|
101
|
-
disabled && 'bg-input-bg-disabled
|
|
101
|
+
disabled && 'bg-input-bg-disabled'
|
|
102
102
|
)}
|
|
103
103
|
>
|
|
104
104
|
{#snippet children({segments})}
|
|
@@ -296,7 +296,7 @@
|
|
|
296
296
|
aria-expanded={open}
|
|
297
297
|
{disabled}
|
|
298
298
|
class={cn(
|
|
299
|
-
'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border bg-input-bg cursor-default text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover focus-visible:ring-3 disabled:opacity-50
|
|
299
|
+
'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border bg-input-bg cursor-default text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover focus-visible:ring-3 disabled:opacity-50',
|
|
300
300
|
densityClasses[density.value],
|
|
301
301
|
showError
|
|
302
302
|
? 'border-input-border-error hover:border-input-border-error focus-visible:border-input-border-error focus-visible:ring-error'
|
|
@@ -23,20 +23,6 @@
|
|
|
23
23
|
|
|
24
24
|
let {items, selectedValues, onToggle, emptyText = 'None', disabled = false}: Props = $props()
|
|
25
25
|
|
|
26
|
-
const optionVariantClasses: Record<string, string> = {
|
|
27
|
-
grey: 'bg-badge-grey border-badge-grey text-badge-grey',
|
|
28
|
-
blue: 'bg-badge-blue border-badge-blue text-badge-blue',
|
|
29
|
-
red: 'bg-badge-red border-badge-red text-badge-red',
|
|
30
|
-
purple: 'bg-badge-purple border-badge-purple text-badge-purple',
|
|
31
|
-
green: 'bg-badge-green border-badge-green text-badge-green',
|
|
32
|
-
orange: 'bg-badge-orange border-badge-orange text-badge-orange',
|
|
33
|
-
cyan: 'bg-badge-cyan border-badge-cyan text-badge-cyan',
|
|
34
|
-
pink: 'bg-badge-pink border-badge-pink text-badge-pink',
|
|
35
|
-
teal: 'bg-badge-teal border-badge-teal text-badge-teal',
|
|
36
|
-
amber: 'bg-badge-amber border-badge-amber text-badge-amber',
|
|
37
|
-
yellow: 'bg-badge-yellow border-badge-yellow text-badge-yellow',
|
|
38
|
-
}
|
|
39
|
-
|
|
40
26
|
function getVariantForItem(item: Item): BadgeVariant {
|
|
41
27
|
return item.variant ?? 'grey'
|
|
42
28
|
}
|
|
@@ -74,16 +60,14 @@
|
|
|
74
60
|
type="button"
|
|
75
61
|
class={cn(
|
|
76
62
|
buttonReset,
|
|
77
|
-
'flex items-center justify-between px-
|
|
78
|
-
isSelected && 'border-2',
|
|
79
|
-
optionVariantClasses[variant]
|
|
63
|
+
'flex items-center justify-between gap-8 px-8 py-6 rounded-6 text-left cursor-default transition-colors duration-fast hover:bg-background disabled:opacity-50'
|
|
80
64
|
)}
|
|
81
65
|
onclick={() => handleItemClick(item.value)}
|
|
82
66
|
{disabled}
|
|
83
67
|
>
|
|
84
|
-
<
|
|
68
|
+
<IIBadge {variant}>{item.label}</IIBadge>
|
|
85
69
|
{#if isSelected}
|
|
86
|
-
<IIIcon iconName="check" size="inherit" variant="accent" class="size-
|
|
70
|
+
<IIIcon iconName="check" size="inherit" variant="accent" class="size-12 shrink-0" />
|
|
87
71
|
{/if}
|
|
88
72
|
</button>
|
|
89
73
|
{/each}
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
class={cn(
|
|
136
136
|
buttonReset,
|
|
137
137
|
'cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
|
|
138
|
-
disabled && '
|
|
138
|
+
disabled && 'opacity-60'
|
|
139
139
|
)}
|
|
140
140
|
onclick={startEditing}
|
|
141
141
|
{disabled}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
const isDisabled = $derived(disabled || loading)
|
|
33
33
|
|
|
34
34
|
const baseClasses =
|
|
35
|
-
'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary
|
|
35
|
+
'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary'
|
|
36
36
|
|
|
37
37
|
const variantClasses = {
|
|
38
38
|
primary:
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
showError
|
|
64
64
|
? 'border-input-border-error hover:border-input-border-error focus-within:border-input-border-error focus-within:ring-error'
|
|
65
65
|
: 'hover:not-focus-within:border-button-secondary-hover focus-within:border-accent focus-within:ring-primary',
|
|
66
|
-
disabled && 'bg-input-bg-disabled
|
|
66
|
+
disabled && 'bg-input-bg-disabled'
|
|
67
67
|
)}
|
|
68
68
|
>
|
|
69
69
|
{#if prefix}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
bind:value
|
|
77
77
|
{type}
|
|
78
78
|
{disabled}
|
|
79
|
-
class="py-5 px-12 h-full font-[family-name:var(--font-family)] text-input-text bg-transparent border-0 outline-none w-full box-border placeholder:text-input-placeholder disabled:text-input-text-disabled
|
|
79
|
+
class="py-5 px-12 h-full font-[family-name:var(--font-family)] text-input-text bg-transparent border-0 outline-none w-full box-border placeholder:text-input-placeholder disabled:text-input-text-disabled [&::-webkit-search-cancel-button]:appearance-none"
|
|
80
80
|
{...restProps}
|
|
81
81
|
/>
|
|
82
82
|
{#if suffix}
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
{type}
|
|
106
106
|
{disabled}
|
|
107
107
|
class={cn(
|
|
108
|
-
'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-button-secondary transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder focus:ring-3 disabled:bg-input-bg-disabled disabled:text-input-text-disabled
|
|
108
|
+
'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-button-secondary transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder focus:ring-3 disabled:bg-input-bg-disabled disabled:text-input-text-disabled motion-reduce:transition-none motion-reduce:animate-none',
|
|
109
109
|
densityClasses[density.value],
|
|
110
110
|
showError
|
|
111
111
|
? 'border-input-border-error hover:border-input-border-error focus:border-input-border-error focus:ring-error'
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
// Children triggers own their content layout; default to an inline-flex row so a
|
|
288
288
|
// value + caret sit on one line even when the consumer passes no display class.
|
|
289
289
|
const childrenTriggerClass = `${buttonReset} inline-flex items-center text-left cursor-default`
|
|
290
|
-
const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-
|
|
290
|
+
const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-6 text-secondary cursor-default transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
|
|
291
291
|
</script>
|
|
292
292
|
|
|
293
293
|
{#snippet itemContent(item: MenuItem)}
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
bind:ref={triggerEl}
|
|
86
86
|
{disabled}
|
|
87
87
|
class={cn(
|
|
88
|
-
'flex items-center gap-4 py-5 pl-12 pr-8 border bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50
|
|
88
|
+
'flex items-center gap-4 py-5 pl-12 pr-8 border bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50',
|
|
89
89
|
densityRadius[density.value],
|
|
90
90
|
open ? 'border-button-secondary-hover' : 'border-button-secondary',
|
|
91
91
|
className
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
onCheckedChange={() => toggleValue(item.value)}
|
|
131
131
|
disabled={item.disabled}
|
|
132
132
|
class={cn(
|
|
133
|
-
'flex items-center gap-8 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50
|
|
133
|
+
'flex items-center gap-8 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50',
|
|
134
134
|
values.includes(item.value) && 'text-dropdown-item-selected'
|
|
135
135
|
)}
|
|
136
136
|
>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
{#if overflowing}
|
|
69
69
|
<DropdownMenu.Root bind:open={kebabOpen}>
|
|
70
70
|
<DropdownMenu.Trigger
|
|
71
|
-
class={cn(buttonReset, 'cursor-default inline-flex items-center justify-center p-4 rounded-
|
|
71
|
+
class={cn(buttonReset, 'cursor-default inline-flex items-center justify-center p-4 rounded-6 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none')}
|
|
72
72
|
>
|
|
73
73
|
<IIIcon iconName="dots-three-vertical" size="inherit" />
|
|
74
74
|
</DropdownMenu.Trigger>
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
{#each actions as action (action.label)}
|
|
81
81
|
<DropdownMenu.Item
|
|
82
82
|
disabled={action.disabled}
|
|
83
|
-
class="flex items-center gap-8 px-12 py-8 rounded-
|
|
83
|
+
class="flex items-center gap-8 px-12 py-8 rounded-6 text-small-emphasis text-body cursor-default outline-none transition-all duration-fast hover:bg-background data-[highlighted]:bg-background data-[disabled]:opacity-50 data-[disabled]:pointer-events-none motion-reduce:transition-none"
|
|
84
84
|
onSelect={action.onclick}
|
|
85
85
|
>
|
|
86
86
|
<span>{action.label}</span>
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
{#snippet pill(tab: Tab)}
|
|
62
62
|
<button
|
|
63
63
|
class={cn(
|
|
64
|
-
'flex items-center rounded-
|
|
64
|
+
'flex items-center rounded-full border-none outline-none cursor-default whitespace-nowrap',
|
|
65
65
|
densityClasses[density.value],
|
|
66
66
|
tab.disabled
|
|
67
|
-
? 'bg-surface text-tertiary opacity-50
|
|
67
|
+
? 'bg-surface text-tertiary opacity-50'
|
|
68
68
|
: value === tab.value
|
|
69
69
|
? 'bg-gray-100 text-gray-700'
|
|
70
70
|
: 'bg-surface text-secondary shadow-pill hover:bg-gray-100 hover:text-gray-700'
|
|
@@ -12,15 +12,15 @@
|
|
|
12
12
|
let {level, label, tooltip}: Props = $props()
|
|
13
13
|
|
|
14
14
|
const levelClasses: Record<string, string> = {
|
|
15
|
-
current: 'bg-success-bg text-success',
|
|
16
|
-
attention: 'bg-warning-bg text-warning',
|
|
17
|
-
'at-risk': 'bg-error-bg text-error',
|
|
15
|
+
current: 'bg-success-bg border-success text-success',
|
|
16
|
+
attention: 'bg-warning-bg border-warning text-warning',
|
|
17
|
+
'at-risk': 'bg-error-bg border-error text-error',
|
|
18
18
|
}
|
|
19
19
|
</script>
|
|
20
20
|
|
|
21
21
|
<span
|
|
22
22
|
class={cn(
|
|
23
|
-
'inline-flex items-center px-12 py-4 rounded-full text-tiny-strong whitespace-nowrap transition-all duration-base motion-reduce:transition-none',
|
|
23
|
+
'inline-flex items-center px-12 py-4 rounded-full border text-tiny-strong whitespace-nowrap transition-all duration-base motion-reduce:transition-none',
|
|
24
24
|
levelClasses[level]
|
|
25
25
|
)}
|
|
26
26
|
title={tooltip}
|
|
@@ -31,18 +31,18 @@
|
|
|
31
31
|
<label class={cn('flex items-center gap-12', className)}>
|
|
32
32
|
{#if label}
|
|
33
33
|
<span
|
|
34
|
-
class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50
|
|
34
|
+
class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
|
|
35
35
|
>{label}</span
|
|
36
36
|
>
|
|
37
37
|
{:else if children}
|
|
38
38
|
<span
|
|
39
|
-
class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50
|
|
39
|
+
class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
|
|
40
40
|
>
|
|
41
41
|
{@render children()}
|
|
42
42
|
</span>
|
|
43
43
|
{/if}
|
|
44
44
|
<Switch.Root
|
|
45
|
-
class="group relative w-44 h-24 bg-muted rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-primary data-[disabled]:
|
|
45
|
+
class="group relative w-44 h-24 bg-muted rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-primary data-[disabled]:opacity-50 motion-reduce:transition-none"
|
|
46
46
|
{checked}
|
|
47
47
|
onCheckedChange={newChecked => {
|
|
48
48
|
checked = newChecked
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
<Tabs.Trigger
|
|
64
64
|
value={tab.value}
|
|
65
65
|
disabled={tab.disabled}
|
|
66
|
-
class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:
|
|
66
|
+
class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:opacity-50 motion-reduce:[transition:none] [transition:color_0.15s_ease] after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:[height:1.5px] after:[transition:width_0.15s_ease,background-color_0.15s_ease] data-[state=active]:after:w-full data-[state=active]:after:bg-dark [&:hover:not([data-disabled]):not([data-state=active])]:after:w-3/5 [&:hover:not([data-disabled]):not([data-state=active])]:after:bg-dark-secondary"
|
|
67
67
|
>
|
|
68
68
|
{#if tab.icon}
|
|
69
69
|
<div class="w-[1.25em] h-[1.25em] flex items-center justify-center">
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
<DropdownMenu.Item
|
|
99
99
|
disabled={tab.disabled}
|
|
100
100
|
class={cn(
|
|
101
|
-
'flex items-center justify-between gap-12 px-12 py-8 rounded-
|
|
101
|
+
'flex items-center justify-between gap-12 px-12 py-8 rounded-6 text-small-emphasis text-secondary cursor-default outline-none transition-all duration-fast hover:bg-background hover:text-body data-[highlighted]:bg-background data-[highlighted]:text-body data-[disabled]:opacity-50 data-[disabled]:pointer-events-none motion-reduce:transition-none',
|
|
102
102
|
value === tab.value && 'text-body'
|
|
103
103
|
)}
|
|
104
104
|
onSelect={() => handleSelect(tab)}
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
{disabled}
|
|
66
66
|
{rows}
|
|
67
67
|
class={cn(
|
|
68
|
-
'pt-8 pb-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-button-secondary rounded-[10px] transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary hover:not-focus:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary
|
|
68
|
+
'pt-8 pb-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-button-secondary rounded-[10px] transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary hover:not-focus:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary motion-reduce:transition-none',
|
|
69
69
|
showError && 'border-input-border-error hover:border-input-border-error focus:border-input-border-error focus:ring-error'
|
|
70
70
|
)}
|
|
71
71
|
oninput={handleInput}
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
{disabled}
|
|
56
56
|
aria-label={ariaLabel}
|
|
57
57
|
class={cn(
|
|
58
|
-
'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary text-secondary hover:bg-button-ghost-hover hover:text-button-ghost-hover data-[state=on]:bg-button-ghost-hover data-[state=on]:text-body disabled:opacity-50
|
|
58
|
+
'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary text-secondary hover:bg-button-ghost-hover hover:text-button-ghost-hover data-[state=on]:bg-button-ghost-hover data-[state=on]:text-body disabled:opacity-50',
|
|
59
59
|
resolvedSizeClasses,
|
|
60
60
|
iconSizeClasses[size],
|
|
61
61
|
className
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
<B.Content
|
|
39
39
|
{side}
|
|
40
40
|
sideOffset={6}
|
|
41
|
-
class="z-19 rounded-
|
|
41
|
+
class="z-19 rounded-6 bg-gray-900 text-white text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
|
|
42
42
|
>
|
|
43
43
|
{text}
|
|
44
44
|
</B.Content>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</script>
|
|
28
28
|
|
|
29
29
|
<span
|
|
30
|
-
class="inline-flex items-center gap-4 px-8 h-24 bg-gray-50 border border-gray-200 rounded-
|
|
30
|
+
class="inline-flex items-center gap-4 px-8 h-24 bg-gray-50 border border-gray-200 rounded-full text-tiny text-secondary cursor-default"
|
|
31
31
|
>
|
|
32
32
|
<span class="flex items-center gap-4">
|
|
33
33
|
<span class="font-medium">{fieldLabel}</span>
|
package/dist/icons.d.ts
CHANGED
|
@@ -89,6 +89,7 @@ export declare const icons: {
|
|
|
89
89
|
readonly eye: "<path fill=\"currentColor\" d=\"M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.5 133.5 0 0 1 25 128a133.3 133.3 0 0 1 23.07-30.75C70.33 75.19 97.22 64 128 64s57.67 11.19 79.93 33.25A133.5 133.5 0 0 1 231.05 128c-7.21 13.46-38.62 64-103.05 64m0-112a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32\"/>";
|
|
90
90
|
readonly 'eye-slash': "<path fill=\"currentColor\" d=\"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z\"/>";
|
|
91
91
|
readonly robot: "<path fill=\"currentColor\" d=\"M200 48h-64V16a8 8 0 0 0-16 0v32H56a32 32 0 0 0-32 32v112a32 32 0 0 0 32 32h144a32 32 0 0 0 32-32V80a32 32 0 0 0-32-32m16 144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16Zm-52-56H92a28 28 0 0 0 0 56h72a28 28 0 0 0 0-56m-24 16v24h-24v-24Zm-60 12a12 12 0 0 1 12-12h8v24h-8a12 12 0 0 1-12-12m84 12h-8v-24h8a12 12 0 0 1 0 24m-92-68a12 12 0 1 1 12 12a12 12 0 0 1-12-12m88 0a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"/>";
|
|
92
|
+
readonly lightning: "<path fill=\"currentColor\" d=\"M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26M109.37 214l10.47-52.38a8 8 0 0 0-5.16-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5.16 9.06l52.68 19.75Z\"/>";
|
|
92
93
|
readonly headset: "<path fill=\"currentColor\" d=\"M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z\"/>";
|
|
93
94
|
readonly 'bell-slash': "<path fill=\"currentColor\" d=\"M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z\"/>";
|
|
94
95
|
readonly moon: "<path fill=\"currentColor\" d=\"M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z\"/>";
|
package/dist/icons.js
CHANGED
|
@@ -102,6 +102,7 @@ export const icons = {
|
|
|
102
102
|
'eye-slash': `<path fill="currentColor" d="M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"/>`,
|
|
103
103
|
// Other
|
|
104
104
|
robot: `<path fill="currentColor" d="M200 48h-64V16a8 8 0 0 0-16 0v32H56a32 32 0 0 0-32 32v112a32 32 0 0 0 32 32h144a32 32 0 0 0 32-32V80a32 32 0 0 0-32-32m16 144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16Zm-52-56H92a28 28 0 0 0 0 56h72a28 28 0 0 0 0-56m-24 16v24h-24v-24Zm-60 12a12 12 0 0 1 12-12h8v24h-8a12 12 0 0 1-12-12m84 12h-8v-24h8a12 12 0 0 1 0 24m-92-68a12 12 0 1 1 12 12a12 12 0 0 1-12-12m88 0a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/>`,
|
|
105
|
+
lightning: `<path fill="currentColor" d="M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26M109.37 214l10.47-52.38a8 8 0 0 0-5.16-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5.16 9.06l52.68 19.75Z"/>`,
|
|
105
106
|
// Status & Presence
|
|
106
107
|
headset: `<path fill="currentColor" d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z"/>`,
|
|
107
108
|
'bell-slash': `<path fill="currentColor" d="M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z"/>`,
|
package/dist/style/colors.css
CHANGED
|
@@ -124,40 +124,40 @@
|
|
|
124
124
|
--color-button-accent-text: var(--ii-text-on-accent);
|
|
125
125
|
--color-button-accent-text-disabled: var(--ii-text-tertiary);
|
|
126
126
|
|
|
127
|
-
/*
|
|
128
|
-
--
|
|
129
|
-
--
|
|
130
|
-
--
|
|
131
|
-
--
|
|
132
|
-
--
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--
|
|
136
|
-
--
|
|
137
|
-
--
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
146
|
-
--
|
|
147
|
-
--
|
|
148
|
-
--
|
|
149
|
-
--
|
|
150
|
-
--
|
|
151
|
-
--
|
|
152
|
-
--
|
|
153
|
-
--
|
|
154
|
-
--
|
|
155
|
-
--
|
|
156
|
-
--
|
|
157
|
-
--
|
|
158
|
-
--
|
|
159
|
-
--
|
|
160
|
-
--
|
|
127
|
+
/* Badges — follows the --color-{component}-{variant}-{property} convention */
|
|
128
|
+
--color-badge-grey-bg: rgba(107, 114, 128, 0.1);
|
|
129
|
+
--color-badge-grey-text: rgb(75, 85, 99);
|
|
130
|
+
--color-badge-grey-border: rgba(107, 114, 128, 0.3);
|
|
131
|
+
--color-badge-blue-bg: rgba(17, 115, 212, 0.1);
|
|
132
|
+
--color-badge-blue-text: rgb(17, 115, 212);
|
|
133
|
+
--color-badge-blue-border: rgba(17, 115, 212, 0.3);
|
|
134
|
+
--color-badge-red-bg: rgba(220, 38, 38, 0.1);
|
|
135
|
+
--color-badge-red-text: rgb(185, 28, 28);
|
|
136
|
+
--color-badge-red-border: rgba(220, 38, 38, 0.3);
|
|
137
|
+
--color-badge-purple-bg: rgba(79, 70, 229, 0.1);
|
|
138
|
+
--color-badge-purple-text: rgb(79, 70, 229);
|
|
139
|
+
--color-badge-purple-border: rgba(79, 70, 229, 0.3);
|
|
140
|
+
--color-badge-green-bg: rgba(34, 197, 94, 0.1);
|
|
141
|
+
--color-badge-green-text: rgb(22, 163, 74);
|
|
142
|
+
--color-badge-green-border: rgba(34, 197, 94, 0.3);
|
|
143
|
+
--color-badge-orange-bg: rgba(249, 115, 22, 0.1);
|
|
144
|
+
--color-badge-orange-text: rgb(194, 65, 12);
|
|
145
|
+
--color-badge-orange-border: rgba(249, 115, 22, 0.3);
|
|
146
|
+
--color-badge-cyan-bg: rgba(6, 182, 212, 0.1);
|
|
147
|
+
--color-badge-cyan-text: rgb(14, 116, 144);
|
|
148
|
+
--color-badge-cyan-border: rgba(6, 182, 212, 0.3);
|
|
149
|
+
--color-badge-pink-bg: rgba(236, 72, 153, 0.1);
|
|
150
|
+
--color-badge-pink-text: rgb(190, 24, 93);
|
|
151
|
+
--color-badge-pink-border: rgba(236, 72, 153, 0.3);
|
|
152
|
+
--color-badge-teal-bg: rgba(20, 184, 166, 0.1);
|
|
153
|
+
--color-badge-teal-text: rgb(13, 148, 136);
|
|
154
|
+
--color-badge-teal-border: rgba(20, 184, 166, 0.3);
|
|
155
|
+
--color-badge-amber-bg: rgba(245, 158, 11, 0.1);
|
|
156
|
+
--color-badge-amber-text: rgb(180, 83, 9);
|
|
157
|
+
--color-badge-amber-border: rgba(245, 158, 11, 0.3);
|
|
158
|
+
--color-badge-yellow-bg: rgba(234, 179, 8, 0.1);
|
|
159
|
+
--color-badge-yellow-text: rgb(161, 98, 7);
|
|
160
|
+
--color-badge-yellow-border: rgba(234, 179, 8, 0.3);
|
|
161
161
|
|
|
162
162
|
/* Focus ring */
|
|
163
163
|
--ii-focus-primary: rgba(17, 115, 212, 0.1);
|
|
@@ -168,13 +168,13 @@
|
|
|
168
168
|
--ii-hover-overlay: rgba(0, 0, 0, 0.1);
|
|
169
169
|
|
|
170
170
|
/* Filter chips */
|
|
171
|
-
--
|
|
172
|
-
--
|
|
173
|
-
--
|
|
174
|
-
--
|
|
175
|
-
--
|
|
176
|
-
--
|
|
177
|
-
--
|
|
171
|
+
--color-filter-bg: #eff6ff;
|
|
172
|
+
--color-filter-border: #bfdbfe;
|
|
173
|
+
--color-filter-text: #1d4ed8;
|
|
174
|
+
--color-filter-operator: #3b82f6;
|
|
175
|
+
--color-filter-remove-bg: #dbeafe;
|
|
176
|
+
--color-filter-remove-hover: #bfdbfe;
|
|
177
|
+
--color-filter-remove-icon: #2563eb;
|
|
178
178
|
|
|
179
179
|
/* Tab (TaskBar) */
|
|
180
180
|
--ii-tab-bg: #f6f7f8;
|
|
@@ -70,18 +70,17 @@ export const backgroundColor = {
|
|
|
70
70
|
applicant: 'var(--ii-applicant)',
|
|
71
71
|
'applicant-light': 'var(--ii-applicant-light)',
|
|
72
72
|
// Badges
|
|
73
|
-
'badge-grey': 'var(--
|
|
74
|
-
'badge-blue': 'var(--
|
|
75
|
-
'badge-red': 'var(--
|
|
76
|
-
'badge-purple': 'var(--
|
|
77
|
-
'badge-green': 'var(--
|
|
78
|
-
'badge-orange': 'var(--
|
|
79
|
-
'badge-cyan': 'var(--
|
|
80
|
-
'badge-pink': 'var(--
|
|
81
|
-
'badge-teal': 'var(--
|
|
82
|
-
'badge-amber': 'var(--
|
|
83
|
-
'badge-yellow': 'var(--
|
|
84
|
-
'badge-green-border': 'var(--ii-badge-green-border)',
|
|
73
|
+
'badge-grey': 'var(--color-badge-grey-bg)',
|
|
74
|
+
'badge-blue': 'var(--color-badge-blue-bg)',
|
|
75
|
+
'badge-red': 'var(--color-badge-red-bg)',
|
|
76
|
+
'badge-purple': 'var(--color-badge-purple-bg)',
|
|
77
|
+
'badge-green': 'var(--color-badge-green-bg)',
|
|
78
|
+
'badge-orange': 'var(--color-badge-orange-bg)',
|
|
79
|
+
'badge-cyan': 'var(--color-badge-cyan-bg)',
|
|
80
|
+
'badge-pink': 'var(--color-badge-pink-bg)',
|
|
81
|
+
'badge-teal': 'var(--color-badge-teal-bg)',
|
|
82
|
+
'badge-amber': 'var(--color-badge-amber-bg)',
|
|
83
|
+
'badge-yellow': 'var(--color-badge-yellow-bg)',
|
|
85
84
|
// Input
|
|
86
85
|
'input-bg': 'var(--color-input-bg)',
|
|
87
86
|
'input-bg-disabled': 'var(--color-input-bg-disabled)',
|
|
@@ -111,9 +110,9 @@ export const backgroundColor = {
|
|
|
111
110
|
'hover-overlay': 'var(--ii-hover-overlay)',
|
|
112
111
|
'subtle-bg': 'var(--ii-subtle-bg)',
|
|
113
112
|
// Filter chips
|
|
114
|
-
'filter-bg': 'var(--
|
|
115
|
-
'filter-remove': 'var(--
|
|
116
|
-
'filter-remove-hover': 'var(--
|
|
113
|
+
'filter-bg': 'var(--color-filter-bg)',
|
|
114
|
+
'filter-remove': 'var(--color-filter-remove-bg)',
|
|
115
|
+
'filter-remove-hover': 'var(--color-filter-remove-hover)',
|
|
117
116
|
// Tabs
|
|
118
117
|
'tab-bg': 'var(--ii-tab-bg)',
|
|
119
118
|
'tab-active': 'var(--ii-tab-active)',
|
|
@@ -186,21 +185,21 @@ export const textColor = {
|
|
|
186
185
|
client: 'var(--ii-client)',
|
|
187
186
|
applicant: 'var(--ii-applicant)',
|
|
188
187
|
// Badges
|
|
189
|
-
'badge-grey': 'var(--
|
|
190
|
-
'badge-blue': 'var(--
|
|
191
|
-
'badge-red': 'var(--
|
|
192
|
-
'badge-purple': 'var(--
|
|
193
|
-
'badge-green': 'var(--
|
|
194
|
-
'badge-orange': 'var(--
|
|
195
|
-
'badge-cyan': 'var(--
|
|
196
|
-
'badge-pink': 'var(--
|
|
197
|
-
'badge-teal': 'var(--
|
|
198
|
-
'badge-amber': 'var(--
|
|
199
|
-
'badge-yellow': 'var(--
|
|
188
|
+
'badge-grey': 'var(--color-badge-grey-text)',
|
|
189
|
+
'badge-blue': 'var(--color-badge-blue-text)',
|
|
190
|
+
'badge-red': 'var(--color-badge-red-text)',
|
|
191
|
+
'badge-purple': 'var(--color-badge-purple-text)',
|
|
192
|
+
'badge-green': 'var(--color-badge-green-text)',
|
|
193
|
+
'badge-orange': 'var(--color-badge-orange-text)',
|
|
194
|
+
'badge-cyan': 'var(--color-badge-cyan-text)',
|
|
195
|
+
'badge-pink': 'var(--color-badge-pink-text)',
|
|
196
|
+
'badge-teal': 'var(--color-badge-teal-text)',
|
|
197
|
+
'badge-amber': 'var(--color-badge-amber-text)',
|
|
198
|
+
'badge-yellow': 'var(--color-badge-yellow-text)',
|
|
200
199
|
// Filter chips
|
|
201
|
-
'filter-text': 'var(--
|
|
202
|
-
'filter-operator': 'var(--
|
|
203
|
-
'filter-remove-icon': 'var(--
|
|
200
|
+
'filter-text': 'var(--color-filter-text)',
|
|
201
|
+
'filter-operator': 'var(--color-filter-operator)',
|
|
202
|
+
'filter-remove-icon': 'var(--color-filter-remove-icon)',
|
|
204
203
|
// Page-specific
|
|
205
204
|
'email-text': 'var(--ii-email-text)',
|
|
206
205
|
'manual-text': 'var(--ii-manual-text)',
|
|
@@ -240,19 +239,19 @@ export const borderColor = {
|
|
|
240
239
|
client: 'var(--ii-client-border)',
|
|
241
240
|
applicant: 'var(--ii-applicant-border)',
|
|
242
241
|
// Badges
|
|
243
|
-
'badge-grey': 'var(--
|
|
244
|
-
'badge-blue': 'var(--
|
|
245
|
-
'badge-red': 'var(--
|
|
246
|
-
'badge-purple': 'var(--
|
|
247
|
-
'badge-green': 'var(--
|
|
248
|
-
'badge-orange': 'var(--
|
|
249
|
-
'badge-cyan': 'var(--
|
|
250
|
-
'badge-pink': 'var(--
|
|
251
|
-
'badge-teal': 'var(--
|
|
252
|
-
'badge-amber': 'var(--
|
|
253
|
-
'badge-yellow': 'var(--
|
|
242
|
+
'badge-grey': 'var(--color-badge-grey-border)',
|
|
243
|
+
'badge-blue': 'var(--color-badge-blue-border)',
|
|
244
|
+
'badge-red': 'var(--color-badge-red-border)',
|
|
245
|
+
'badge-purple': 'var(--color-badge-purple-border)',
|
|
246
|
+
'badge-green': 'var(--color-badge-green-border)',
|
|
247
|
+
'badge-orange': 'var(--color-badge-orange-border)',
|
|
248
|
+
'badge-cyan': 'var(--color-badge-cyan-border)',
|
|
249
|
+
'badge-pink': 'var(--color-badge-pink-border)',
|
|
250
|
+
'badge-teal': 'var(--color-badge-teal-border)',
|
|
251
|
+
'badge-amber': 'var(--color-badge-amber-border)',
|
|
252
|
+
'badge-yellow': 'var(--color-badge-yellow-border)',
|
|
254
253
|
// Filter chips
|
|
255
|
-
'filter-border': 'var(--
|
|
254
|
+
'filter-border': 'var(--color-filter-border)',
|
|
256
255
|
// Focus ring
|
|
257
256
|
'focus-primary': 'var(--ii-focus-primary)',
|
|
258
257
|
'focus-error': 'var(--ii-focus-error)',
|
package/dist/style/themes.css
CHANGED
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
--color-button-accent-text: var(--ii-text-on-accent);
|
|
32
32
|
|
|
33
33
|
/* Filter chips */
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
34
|
+
--color-filter-bg: #e8eef6;
|
|
35
|
+
--color-filter-border: #a8c4e0;
|
|
36
|
+
--color-filter-text: #1e3a5f;
|
|
37
|
+
--color-filter-operator: #4a6fa5;
|
|
38
|
+
--color-filter-remove-bg: #d1dfef;
|
|
39
|
+
--color-filter-remove-hover: #a8c4e0;
|
|
40
|
+
--color-filter-remove-icon: #1e3a5f;
|
|
41
41
|
|
|
42
42
|
/* Login */
|
|
43
43
|
--ii-login-gradient-start: #e8eef6;
|
|
@@ -77,13 +77,13 @@
|
|
|
77
77
|
--color-button-accent-text: var(--ii-text-on-accent);
|
|
78
78
|
|
|
79
79
|
/* Filter chips */
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
--
|
|
83
|
-
--
|
|
84
|
-
--
|
|
85
|
-
--
|
|
86
|
-
--
|
|
80
|
+
--color-filter-bg: #e8f5ea;
|
|
81
|
+
--color-filter-border: #a8d5b0;
|
|
82
|
+
--color-filter-text: #2d7a3a;
|
|
83
|
+
--color-filter-operator: #5a9e68;
|
|
84
|
+
--color-filter-remove-bg: #d1ecd6;
|
|
85
|
+
--color-filter-remove-hover: #a8d5b0;
|
|
86
|
+
--color-filter-remove-icon: #2d7a3a;
|
|
87
87
|
|
|
88
88
|
/* Login */
|
|
89
89
|
--ii-login-gradient-start: #e8f5ea;
|
|
@@ -126,13 +126,13 @@
|
|
|
126
126
|
--color-button-accent-text: var(--ii-text-on-accent);
|
|
127
127
|
|
|
128
128
|
/* Filter chips */
|
|
129
|
-
--
|
|
130
|
-
--
|
|
131
|
-
--
|
|
132
|
-
--
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--
|
|
129
|
+
--color-filter-bg: #f3e8ff;
|
|
130
|
+
--color-filter-border: #d8b4fe;
|
|
131
|
+
--color-filter-text: #7c3aed;
|
|
132
|
+
--color-filter-operator: #8b5cf6;
|
|
133
|
+
--color-filter-remove-bg: #e9d5ff;
|
|
134
|
+
--color-filter-remove-hover: #d8b4fe;
|
|
135
|
+
--color-filter-remove-icon: #7c3aed;
|
|
136
136
|
|
|
137
137
|
/* Login */
|
|
138
138
|
--ii-login-gradient-start: #f3e8ff;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const menuStyles: {
|
|
2
|
-
readonly item: "flex items-center gap-8 px-12 py-8 rounded-
|
|
2
|
+
readonly item: "flex items-center gap-8 px-12 py-8 rounded-6 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none";
|
|
3
3
|
readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
|
|
4
4
|
readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
|
|
5
5
|
readonly content: "ii-menu-scroll min-w-48 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from '../cn';
|
|
2
2
|
export const menuStyles = {
|
|
3
|
-
item: 'flex items-center gap-8 px-12 py-8 rounded-
|
|
3
|
+
item: 'flex items-center gap-8 px-12 py-8 rounded-6 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none',
|
|
4
4
|
itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
|
|
5
5
|
itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
|
|
6
6
|
// content: no fixed max-height — IIMenu passes constrainHeight to
|