paris 0.18.0 → 0.18.1
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# paris
|
|
2
2
|
|
|
3
|
+
## 0.18.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 389b9ba: fix(tabs): fix glass mode backdrop-filter blur and content bleed-through
|
|
8
|
+
|
|
9
|
+
Restructured glass tab bar from `position: absolute` to `position: sticky` with `backdrop-filter` applied directly on the sticky element. This fixes two bugs: content bleeding through the tab bar on scroll, and the blur effect never rendering due to compositing boundary conflicts. Removed the nested glass layer divs (glassContainer, glassOpacity, glassBlend) and padding-top hacks in favor of natural document flow. Uses `primaryThin` material for theme-aware frosted glass (white in light mode, dark in dark mode).
|
|
10
|
+
|
|
11
|
+
- 706e34c: fix(markdown): use contentPrimary instead of contentAccent for checked checkboxes
|
|
12
|
+
|
|
3
13
|
## 0.18.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "paris",
|
|
3
3
|
"author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
|
|
4
4
|
"description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
|
|
5
|
-
"version": "0.18.
|
|
5
|
+
"version": "0.18.1",
|
|
6
6
|
"homepage": "https://paris.slingshot.fm",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": {
|
|
@@ -142,8 +142,8 @@
|
|
|
142
142
|
top: 2px;
|
|
143
143
|
|
|
144
144
|
&:checked {
|
|
145
|
-
background-color: var(--pte-new-colors-
|
|
146
|
-
border-color: var(--pte-new-colors-
|
|
145
|
+
background-color: var(--pte-new-colors-contentPrimary);
|
|
146
|
+
border-color: var(--pte-new-colors-contentPrimary);
|
|
147
147
|
|
|
148
148
|
&::after {
|
|
149
149
|
content: '✓';
|
|
@@ -32,8 +32,13 @@
|
|
|
32
32
|
|
|
33
33
|
.tabBackground {
|
|
34
34
|
&.glass {
|
|
35
|
-
position:
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: 0;
|
|
36
37
|
width: 100%;
|
|
38
|
+
z-index: 1;
|
|
39
|
+
backdrop-filter: var(--pte-new-blurs-strong);
|
|
40
|
+
-webkit-backdrop-filter: var(--pte-new-blurs-strong);
|
|
41
|
+
background: var(--pte-new-materials-primaryThin-background);
|
|
37
42
|
}
|
|
38
43
|
}
|
|
39
44
|
|
|
@@ -44,32 +49,11 @@
|
|
|
44
49
|
|
|
45
50
|
&.glass {
|
|
46
51
|
position: relative;
|
|
47
|
-
overflow:
|
|
48
|
-
|
|
52
|
+
overflow-y: auto;
|
|
53
|
+
overflow-x: hidden;
|
|
49
54
|
}
|
|
50
55
|
}
|
|
51
56
|
|
|
52
|
-
.glassContainer {
|
|
53
|
-
position: absolute;
|
|
54
|
-
width: 100%;
|
|
55
|
-
height: 100%;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.glassBlend {
|
|
59
|
-
position: absolute;
|
|
60
|
-
width: 100%;
|
|
61
|
-
height: 100%;
|
|
62
|
-
background: var(--pte-new-materials-secondaryRegular-backgroundBlend);
|
|
63
|
-
mix-blend-mode: var(--pte-new-materials-secondaryRegular-mixBlendMode);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.glassOpacity {
|
|
67
|
-
position: absolute;
|
|
68
|
-
width: 100%;
|
|
69
|
-
height: 100%;
|
|
70
|
-
background: var(--pte-new-materials-secondaryRegular-background);
|
|
71
|
-
backdrop-filter: var(--pte-new-blurs-strong);
|
|
72
|
-
}
|
|
73
57
|
|
|
74
58
|
.tabListBorder {
|
|
75
59
|
width: 100%;
|
|
@@ -197,49 +181,7 @@
|
|
|
197
181
|
width: 100%;
|
|
198
182
|
|
|
199
183
|
&.glass {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
padding-top: 64px;
|
|
203
|
-
}
|
|
204
|
-
&.thin {
|
|
205
|
-
padding-top: 61px;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
&.fixed {
|
|
209
|
-
&.thick {
|
|
210
|
-
padding-top: 56px;
|
|
211
|
-
}
|
|
212
|
-
&.thin {
|
|
213
|
-
padding-top: 53px;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
&.compact {
|
|
217
|
-
&.thick {
|
|
218
|
-
padding-top: 48px;
|
|
219
|
-
}
|
|
220
|
-
&.thin {
|
|
221
|
-
padding-top: 45px;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
@container (min-width: 641px) {
|
|
225
|
-
&.auto {
|
|
226
|
-
&.thick {
|
|
227
|
-
padding-top: 56px;
|
|
228
|
-
}
|
|
229
|
-
&.thin {
|
|
230
|
-
padding-top: 53px;
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
@container (max-width: 640px) {
|
|
235
|
-
&.auto {
|
|
236
|
-
&.thick {
|
|
237
|
-
padding-top: 48px;
|
|
238
|
-
}
|
|
239
|
-
&.thin {
|
|
240
|
-
padding-top: 45px;
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
}
|
|
184
|
+
overflow-y: visible;
|
|
185
|
+
height: auto;
|
|
244
186
|
}
|
|
245
187
|
}
|
|
@@ -71,7 +71,86 @@ export const Glass: Story = {
|
|
|
71
71
|
barStyle: 'thin',
|
|
72
72
|
backgroundStyle: 'glass',
|
|
73
73
|
tabs: [
|
|
74
|
-
{
|
|
74
|
+
{
|
|
75
|
+
title: 'Albums',
|
|
76
|
+
content: (
|
|
77
|
+
<div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
78
|
+
<p>Scroll down to see the glass blur effect on the tab bar.</p>
|
|
79
|
+
<div
|
|
80
|
+
style={{
|
|
81
|
+
padding: '12px',
|
|
82
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
83
|
+
borderRadius: '8px',
|
|
84
|
+
}}
|
|
85
|
+
>
|
|
86
|
+
Item 1
|
|
87
|
+
</div>
|
|
88
|
+
<div
|
|
89
|
+
style={{
|
|
90
|
+
padding: '12px',
|
|
91
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
92
|
+
borderRadius: '8px',
|
|
93
|
+
}}
|
|
94
|
+
>
|
|
95
|
+
Item 2
|
|
96
|
+
</div>
|
|
97
|
+
<div
|
|
98
|
+
style={{
|
|
99
|
+
padding: '12px',
|
|
100
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
101
|
+
borderRadius: '8px',
|
|
102
|
+
}}
|
|
103
|
+
>
|
|
104
|
+
Item 3
|
|
105
|
+
</div>
|
|
106
|
+
<div
|
|
107
|
+
style={{
|
|
108
|
+
padding: '12px',
|
|
109
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
110
|
+
borderRadius: '8px',
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
Item 4
|
|
114
|
+
</div>
|
|
115
|
+
<div
|
|
116
|
+
style={{
|
|
117
|
+
padding: '12px',
|
|
118
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
119
|
+
borderRadius: '8px',
|
|
120
|
+
}}
|
|
121
|
+
>
|
|
122
|
+
Item 5
|
|
123
|
+
</div>
|
|
124
|
+
<div
|
|
125
|
+
style={{
|
|
126
|
+
padding: '12px',
|
|
127
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
128
|
+
borderRadius: '8px',
|
|
129
|
+
}}
|
|
130
|
+
>
|
|
131
|
+
Item 6
|
|
132
|
+
</div>
|
|
133
|
+
<div
|
|
134
|
+
style={{
|
|
135
|
+
padding: '12px',
|
|
136
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
137
|
+
borderRadius: '8px',
|
|
138
|
+
}}
|
|
139
|
+
>
|
|
140
|
+
Item 7
|
|
141
|
+
</div>
|
|
142
|
+
<div
|
|
143
|
+
style={{
|
|
144
|
+
padding: '12px',
|
|
145
|
+
background: 'var(--pte-new-colors-overlayMedium)',
|
|
146
|
+
borderRadius: '8px',
|
|
147
|
+
}}
|
|
148
|
+
>
|
|
149
|
+
Item 8
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
),
|
|
153
|
+
},
|
|
75
154
|
{
|
|
76
155
|
title: 'EPs',
|
|
77
156
|
content:
|
|
@@ -101,7 +180,7 @@ export const Glass: Story = {
|
|
|
101
180
|
},
|
|
102
181
|
render: (args) => (
|
|
103
182
|
<div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
|
|
104
|
-
<div style={{ height: '
|
|
183
|
+
<div style={{ height: '300px' }}>
|
|
105
184
|
<Tabs {...args} />
|
|
106
185
|
</div>
|
|
107
186
|
</div>
|
|
@@ -113,12 +113,6 @@ export const Tabs: FC<TabsProps> = ({
|
|
|
113
113
|
{...overrides?.tabBackground}
|
|
114
114
|
className={clsx(styles.tabBackground, styles[backgroundStyle], overrides?.tabBackground?.className)}
|
|
115
115
|
>
|
|
116
|
-
{backgroundStyle === 'glass' && (
|
|
117
|
-
<div className={styles.glassContainer}>
|
|
118
|
-
<div className={styles.glassOpacity} />
|
|
119
|
-
<div className={styles.glassBlend} />
|
|
120
|
-
</div>
|
|
121
|
-
)}
|
|
122
116
|
<TabList
|
|
123
117
|
{...overrides?.tabList}
|
|
124
118
|
style={
|