@insymetri/styleguide 0.1.90 → 0.1.91
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/IIPillTabs/IIPillTabs.svelte +6 -2
- package/dist/style/colors.css +3 -0
- package/dist/style/dark.css +2 -0
- package/dist/style/tailwind/colors.d.ts +1 -0
- package/dist/style/tailwind/colors.js +1 -0
- package/dist/style/tailwind/preset.d.ts +2 -0
- package/dist/style/tailwind/shadows.d.ts +1 -0
- package/dist/style/tailwind/shadows.js +5 -1
- package/package.json +1 -1
|
@@ -58,6 +58,10 @@
|
|
|
58
58
|
</script>
|
|
59
59
|
|
|
60
60
|
<div bind:this={containerEl} class={cn('min-w-0 relative', className)}>
|
|
61
|
+
<!-- Edges come from `shadow-pill` / `shadow-selected-pill` rather than borders: a shadow
|
|
62
|
+
takes no layout space, so the row doesn't reflow as the selection moves. Uniform font
|
|
63
|
+
weight for the same reason. Selected is a step DOWN from white under a darker
|
|
64
|
+
hairline, so it reads pressed in while its neighbours read raised. -->
|
|
61
65
|
{#snippet pill(tab: Tab)}
|
|
62
66
|
<button
|
|
63
67
|
class={cn(
|
|
@@ -66,8 +70,8 @@
|
|
|
66
70
|
tab.disabled
|
|
67
71
|
? 'bg-surface text-tertiary opacity-50'
|
|
68
72
|
: value === tab.value
|
|
69
|
-
? 'bg-
|
|
70
|
-
: 'bg-surface text-secondary shadow-pill hover:bg-
|
|
73
|
+
? 'bg-background-alt text-body shadow-selected-pill'
|
|
74
|
+
: 'bg-surface text-secondary shadow-pill hover:bg-background-alt hover:text-secondary-strong'
|
|
71
75
|
)}
|
|
72
76
|
style="transition: all var(--transition-fast)"
|
|
73
77
|
disabled={tab.disabled}
|
package/dist/style/colors.css
CHANGED
|
@@ -54,6 +54,9 @@
|
|
|
54
54
|
/* Text */
|
|
55
55
|
--ii-text-primary: #111827;
|
|
56
56
|
--ii-text-accent: #111827;
|
|
57
|
+
/* Between secondary and body. Off the ramp, not a literal, so it follows a
|
|
58
|
+
consuming app's own neutrals. */
|
|
59
|
+
--ii-text-secondary-strong: var(--ii-gray-700);
|
|
57
60
|
--ii-text-secondary: #6b7280;
|
|
58
61
|
--ii-text-tertiary: #9ca3af;
|
|
59
62
|
--ii-text-inverse: white;
|
package/dist/style/dark.css
CHANGED
|
@@ -48,6 +48,8 @@
|
|
|
48
48
|
/* Text — neutral gray, brightest step softened so it doesn't glare on charcoal */
|
|
49
49
|
--ii-text-primary: #dcdce0;
|
|
50
50
|
--ii-text-accent: #ececee;
|
|
51
|
+
/* Ramp inverts here, so gray-700 again lands between secondary and primary. */
|
|
52
|
+
--ii-text-secondary-strong: var(--ii-gray-700);
|
|
51
53
|
--ii-text-secondary: #9a9a9f;
|
|
52
54
|
--ii-text-tertiary: #737377;
|
|
53
55
|
--ii-text-inverse: #17171a;
|
|
@@ -158,6 +158,7 @@ export const textColor = {
|
|
|
158
158
|
// Text hierarchy
|
|
159
159
|
body: 'var(--ii-text-primary)',
|
|
160
160
|
secondary: 'var(--ii-text-secondary)',
|
|
161
|
+
'secondary-strong': 'var(--ii-text-secondary-strong)',
|
|
161
162
|
tertiary: 'var(--ii-text-tertiary)',
|
|
162
163
|
inverse: 'var(--ii-text-inverse)',
|
|
163
164
|
'on-primary': 'var(--ii-text-on-primary)',
|
|
@@ -128,6 +128,7 @@ declare const _default: {
|
|
|
128
128
|
'dropdown-item-selected': string;
|
|
129
129
|
body: string;
|
|
130
130
|
secondary: string;
|
|
131
|
+
'secondary-strong': string;
|
|
131
132
|
tertiary: string;
|
|
132
133
|
inverse: string;
|
|
133
134
|
'on-primary': string;
|
|
@@ -405,6 +406,7 @@ declare const _default: {
|
|
|
405
406
|
boxShadow: {
|
|
406
407
|
none: string;
|
|
407
408
|
pill: string;
|
|
409
|
+
'selected-pill': string;
|
|
408
410
|
subtle: string;
|
|
409
411
|
card: string;
|
|
410
412
|
'comm-hover': string;
|
|
@@ -11,7 +11,11 @@ const T3 = 'var(--ii-shadow-3)';
|
|
|
11
11
|
export const boxShadow = {
|
|
12
12
|
none: 'none',
|
|
13
13
|
// Tier 1 — at rest
|
|
14
|
-
|
|
14
|
+
// Inset hairline + the lift. T1 alone has no spread, so it only darkens the bottom edge;
|
|
15
|
+
// an outset ring would sit in that same band and paint over the glow.
|
|
16
|
+
pill: `inset 0 0 0 1px var(--ii-border), ${T1}`,
|
|
17
|
+
// Selected: same hairline, stronger tone, no lift. Ring-for-ring keeps widths stable.
|
|
18
|
+
'selected-pill': 'inset 0 0 0 1px var(--ii-border-strong)',
|
|
15
19
|
subtle: T1,
|
|
16
20
|
card: T1,
|
|
17
21
|
'comm-hover': T1,
|