@insymetri/styleguide 0.1.14 → 0.1.15
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/IIButton/IIButton.svelte +1 -1
- package/dist/IICombobox/IICombobox.svelte +1 -1
- package/dist/IICombobox/IIComboboxStories.svelte +1 -1
- package/dist/IIDatePicker/IIDatePicker.svelte +1 -1
- package/dist/IIDropdownInput/IIDropdownInput.svelte +1 -1
- package/dist/IIDropdownMenu/IIDropdownMenuStories.svelte +1 -1
- package/dist/IIIconButton/IIIconButton.svelte +1 -1
- package/dist/IIInput/IIInput.svelte +2 -2
- package/dist/IIMultiSelect/IIMultiSelect.svelte +1 -1
- package/dist/IITabs/IITabs.svelte +1 -1
- package/dist/IITextarea/IITextarea.svelte +1 -1
- package/dist/IIToggle/IIToggle.svelte +1 -1
- package/dist/IIToggle/IIToggleStories.svelte +1 -1
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
const isDisabled = $derived(disabled || loading)
|
|
38
38
|
|
|
39
39
|
const baseClasses =
|
|
40
|
-
'inline-flex items-center justify-center gap-8 whitespace-nowrap rounded-
|
|
40
|
+
'inline-flex items-center justify-center gap-8 whitespace-nowrap rounded-8 cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed'
|
|
41
41
|
|
|
42
42
|
const variantClasses = {
|
|
43
43
|
primary:
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
{placeholder}
|
|
163
163
|
{disabled}
|
|
164
164
|
oninput={handleInput}
|
|
165
|
-
class="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-
|
|
165
|
+
class="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-8 transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-input-bg-disabled motion-reduce:transition-none"
|
|
166
166
|
/>
|
|
167
167
|
<Combobox.Portal>
|
|
168
168
|
{#if filteredItems.length > 0 || emptyContent || loading}
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
/>
|
|
88
88
|
</div>
|
|
89
89
|
<button
|
|
90
|
-
class="px-12 py-5 rounded-
|
|
90
|
+
class="px-12 py-5 rounded-8 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
|
|
91
91
|
onclick={simulateLoading}
|
|
92
92
|
>
|
|
93
93
|
Simulate Load
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
{/if}
|
|
19
19
|
<div class="relative">
|
|
20
20
|
<DatePicker.Input
|
|
21
|
-
class="flex items-center gap-4 py-5 px-12 border border-strong rounded-
|
|
21
|
+
class="flex items-center gap-4 py-5 px-12 border border-strong rounded-8 text-small text-gray-800 bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary"
|
|
22
22
|
>
|
|
23
23
|
{#snippet children({segments})}
|
|
24
24
|
{#each segments as { part, value: segValue }, i (`${part}-${i}`)}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
bind:ref={triggerEl}
|
|
61
61
|
{disabled}
|
|
62
62
|
class={cn(
|
|
63
|
-
'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-
|
|
63
|
+
'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-8 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 disabled:cursor-not-allowed',
|
|
64
64
|
open ? 'border-button-secondary-hover' : 'border-button-secondary',
|
|
65
65
|
className
|
|
66
66
|
)}
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
{label: 'Sign Out', value: 'signout'},
|
|
66
66
|
]}
|
|
67
67
|
onSelect={handleSelect}
|
|
68
|
-
triggerClass="inline-flex items-center gap-4 px-12 py-5 rounded-
|
|
68
|
+
triggerClass="inline-flex items-center gap-4 px-12 py-5 rounded-8 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
|
|
69
69
|
>
|
|
70
70
|
{#snippet children()}
|
|
71
71
|
<IIIcon iconName="user" class="w-14 h-14" />
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
const isDisabled = $derived(disabled || loading)
|
|
29
29
|
|
|
30
30
|
const baseClasses =
|
|
31
|
-
'inline-flex items-center justify-center rounded-
|
|
31
|
+
'inline-flex items-center justify-center rounded-8 cursor-default transition-colors duration-base ease-in-out disabled:cursor-not-allowed'
|
|
32
32
|
|
|
33
33
|
const variantClasses = {
|
|
34
34
|
primary:
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
{#if hasAddons}
|
|
59
59
|
<div
|
|
60
60
|
class={cn(
|
|
61
|
-
'flex items-center bg-input-bg border border-input-border rounded-
|
|
61
|
+
'flex items-center bg-input-bg border border-input-border rounded-8 transition-all duration-fast hover:border-input-border-hover focus-within:border-input-border-hover motion-reduce:transition-none',
|
|
62
62
|
showError && 'border-input-border-error focus-within:border-input-border-error',
|
|
63
63
|
shouldShake && 'animate-shake',
|
|
64
64
|
disabled && 'bg-input-bg-disabled cursor-not-allowed'
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
{type}
|
|
91
91
|
{disabled}
|
|
92
92
|
class={cn(
|
|
93
|
-
'py-5 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-
|
|
93
|
+
'py-5 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-8 transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
|
|
94
94
|
showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
|
|
95
95
|
shouldShake && 'animate-shake'
|
|
96
96
|
)}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
bind:ref={triggerEl}
|
|
76
76
|
{disabled}
|
|
77
77
|
class={cn(
|
|
78
|
-
'flex items-center gap-4 py-5 pl-12 pr-8 border rounded-
|
|
78
|
+
'flex items-center gap-4 py-5 pl-12 pr-8 border rounded-8 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 disabled:cursor-not-allowed',
|
|
79
79
|
open ? 'border-button-secondary-hover' : 'border-button-secondary',
|
|
80
80
|
className
|
|
81
81
|
)}
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
<div class="flex items-center border-b border-primary px-24" style="padding-left: calc(2.4rem - 1.2rem - 1px)">
|
|
70
70
|
<DropdownMenu.Root bind:open={dropdownOpen}>
|
|
71
71
|
<DropdownMenu.Trigger
|
|
72
|
-
class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-
|
|
72
|
+
class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-8 bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
|
|
73
73
|
>
|
|
74
74
|
<span class="text-small-emphasis text-body">{activeLabel}</span>
|
|
75
75
|
<IIIcon iconName="caret-down" class="w-14 h-14 text-secondary shrink-0" />
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
{disabled}
|
|
66
66
|
{rows}
|
|
67
67
|
class={cn(
|
|
68
|
-
'py-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-
|
|
68
|
+
'py-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-8 transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary focus:border-primary focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
|
|
69
69
|
showError && 'border-error focus:border-error focus:ring-error'
|
|
70
70
|
)}
|
|
71
71
|
oninput={handleInput}
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
{disabled}
|
|
43
43
|
aria-label={ariaLabel}
|
|
44
44
|
class={cn(
|
|
45
|
-
'inline-flex items-center justify-center rounded-
|
|
45
|
+
'inline-flex items-center justify-center rounded-8 cursor-default transition-colors duration-base ease-in-out 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 disabled:cursor-not-allowed',
|
|
46
46
|
sizeClasses[size],
|
|
47
47
|
iconSizeClasses[size],
|
|
48
48
|
className
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
<section>
|
|
48
48
|
<h2 class="text-default-emphasis text-primary mb-8">Toolbar Example</h2>
|
|
49
49
|
<p class="text-small text-secondary mb-12">Multiple toggles used together as a formatting toolbar.</p>
|
|
50
|
-
<div class="flex items-center gap-4 p-4 border border-subtle rounded-
|
|
50
|
+
<div class="flex items-center gap-4 p-4 border border-subtle rounded-8 bg-surface inline-flex">
|
|
51
51
|
<IIToggle bind:pressed={filterPressed} aria-label="Filter">
|
|
52
52
|
{#snippet children({pressed})}
|
|
53
53
|
<IIIcon iconName="funnel-fill" />
|