Skip to content

Commit cf2fd53

Browse files
joduplessisjoduplessis
authored
feat: Toast: card effect (#348)
- **Toast stack effect** — toasts now render as a layered card stack (opacity + scale gradient for depth, clamped to 3 visible layers) with a new `paused` prop and `suffix` slot on `ToastMessage`. Progress bar switched from JS-driven `setTimeout` + width transition to pure CSS animation, fixing restart/pause behaviour. - **Color token refresh** — accent hue shifted (245 → 280) across the `color.json` ramp; knock-on CSS updates landed across ~85 component stylesheets to keep contrast and hover states correct. - **Color-relative button hovers** — `button.css` rewritten to derive hover/active from the base color rather than hardcoded values, making variants consistent without per-variant overrides. - **Context rename** — `fold.context.tsx` → `app.context.tsx` (re-exported from `contexts/index.ts`). - **Tighter stack distance** — reduced default spacing between stacked toasts.
1 parent 7d0a41b commit cf2fd53

98 files changed

Lines changed: 1375 additions & 986 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.storybook/preview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import { Preview } from '@storybook/react';
3-
import { FoldProvider, DarkModeToggle, Icon } from '../packages/core'
3+
import { AppProvider, DarkModeToggle, Icon } from '../packages/core'
44
import '../packages/core/dist/styles.css'
55
import '../packages/pro/dist/styles.css'
66

77
export const decorators = [
88
(Story) => (
9-
<FoldProvider>
9+
<AppProvider>
1010
<div
1111
id="mockup-dark-mode-container"
1212
style={{
@@ -25,7 +25,7 @@ export const decorators = [
2525
</div>
2626
<Story />
2727
</div>
28-
</FoldProvider>
28+
</AppProvider>
2929
),
3030
]
3131

‎package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/src/accordion/accordion.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@
2323
/* heading */
2424

2525
.f-accordion__item {
26-
border: var(--f-accordion-border-width) solid;
26+
border: var(--f-accordion-border-width) solid;
2727
border-color: var(--f-accordion-border-color);
28-
background: var(--f-accordion-background);
28+
background: var(--f-accordion-background);
2929
border-radius: var(--f-accordion-border-radius);
3030
}
3131

@@ -73,7 +73,7 @@
7373
}
7474

7575
.f-accordion__item .f-accordion-heading__heading .f-accordion-heading__heading-icon {
76-
transition: transform .2s;
76+
transition: transform 0.2s;
7777
}
7878

7979
.f-accordion__item .f-accordion-heading__heading:hover {
@@ -111,7 +111,7 @@
111111

112112
.f-accordion__item.is-active .f-accordion-heading__heading {
113113
border-bottom-left-radius: 0;
114-
border-bottom-right-radius: 0;
114+
border-bottom-right-radius: 0;
115115
}
116116

117117
.f-accordion__item.is-active .f-accordion-heading__heading > *,
@@ -141,7 +141,7 @@
141141
border: none;
142142
}
143143

144-
.f-accordion__item .f-accordion__content-inner {
144+
.f-accordion__item .f-accordion__content-inner {
145145
color: var(--f-accordion-color);
146146
border: none;
147147
padding: var(--f-accordion-spacing);

‎packages/core/src/affix/affix.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
position: sticky;
44
}
55

6-
.f-affix.is-stuck {}
6+
.f-affix.is-stuck {
7+
}

‎packages/core/src/alert/alert.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { ReactPortal, useContext } from 'react'
22
import { Button, Heading, IconLib, Modal, ModalClose, Portal, Text, useId } from '../'
3-
import { FoldContext } from '../contexts'
3+
import { AppContext } from '../contexts'
44

55
export type AlertOptions = {
66
icon?: string
@@ -14,7 +14,7 @@ export type AlertOptions = {
1414
}
1515

1616
export const useAlert = () => {
17-
const { setAlert } = useContext(FoldContext)
17+
const { setAlert } = useContext(AppContext)
1818
return { alert: setAlert }
1919
}
2020

‎packages/core/src/attachment/attachment.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
--f-attachment-icon-background: var(--f-color-surface-strong);
88
--f-attachment-icon-color: var(--f-color-accent);
99
--f-attachment-thumb-background: var(--f-color-surface);
10-
--f-attachment-thumb-size: var(--f-size-28);
10+
--f-attachment-thumb-size: var(--f-size-28);
1111
--f-attachment-thumb-overlay: var(--f-color-overlay);
12-
--f-attachment-padding: var(--f-size-2);
13-
--f-attachment-spacing: var(--f-size-2);
12+
--f-attachment-padding: var(--f-size-2);
13+
--f-attachment-spacing: var(--f-size-2);
1414
}
1515

1616
.f-attachment {
@@ -106,33 +106,33 @@
106106
/* error */
107107

108108
.f-attachment.is-error {
109-
color: var(--f-color-danger) !important;
109+
color: var(--f-color-danger) !important;
110110
border-color: var(--f-color-danger);
111111
}
112112

113113
.f-attachment.is-error .f-attachment__icon {
114-
color: var(--f-color-danger) !important;
114+
color: var(--f-color-danger) !important;
115115
}
116116

117117
/* sizes */
118118
/* xs & xl not supported yet */
119119

120-
.f-attachment.sm .f-attachment__icon {
121-
width: var(--f-size-12);
122-
height: var(--f-size-12);
120+
.f-attachment.sm .f-attachment__icon {
121+
width: var(--f-size-12);
122+
height: var(--f-size-12);
123123
}
124124

125-
.f-attachment.md .f-attachment__icon {
126-
width: var(--f-size-14);
127-
height: var(--f-size-14);
125+
.f-attachment.md .f-attachment__icon {
126+
width: var(--f-size-14);
127+
height: var(--f-size-14);
128128
}
129129

130-
.f-attachment.lg .f-attachment__icon {
131-
width: var(--f-size-16);
132-
height: var(--f-size-16);
130+
.f-attachment.lg .f-attachment__icon {
131+
width: var(--f-size-16);
132+
height: var(--f-size-16);
133133
}
134134

135-
/* thumb */
135+
/* thumb */
136136

137137
.f-attachment-thumb {
138138
background: var(--f-attachment-thumb-background);
@@ -144,8 +144,8 @@
144144
border: 1px solid;
145145
border-color: var(--f-attachment-border-color);
146146
border-radius: var(--f-attachment-border-radius);
147-
width: var(--f-attachment-thumb-size);
148-
height: var(--f-attachment-thumb-size);
147+
width: var(--f-attachment-thumb-size);
148+
height: var(--f-attachment-thumb-size);
149149
}
150150

151151
.f-attachment-thumb .f-progress {
@@ -176,17 +176,17 @@
176176
top: 0px;
177177
left: 0px;
178178
border-radius: var(--f-attachment-border-radius);
179-
width: var(--f-attachment-thumb-size);
180-
height: var(--f-attachment-thumb-size);
179+
width: var(--f-attachment-thumb-size);
180+
height: var(--f-attachment-thumb-size);
181181
}
182182

183183
.f-attachment-thumb__details {
184184
position: absolute;
185185
top: 0px;
186186
left: 0px;
187187
border-radius: var(--f-attachment-border-radius);
188-
width: 100%;
189-
height: 100%;
188+
width: 100%;
189+
height: 100%;
190190
border: 1px solid transparent;
191191
gap: var(--f-space-1);
192192
}
@@ -199,12 +199,12 @@
199199
/* error */
200200

201201
.f-attachment-thumb.is-error {
202-
color: var(--f-color-danger) !important;
202+
color: var(--f-color-danger) !important;
203203
border-color: var(--f-color-danger);
204204
}
205205

206206
.f-attachment-thumb.is-error > * {
207-
color: var(--f-color-danger) !important;
207+
color: var(--f-color-danger) !important;
208208
}
209209

210210
.f-attachment-thumb__tools {
@@ -214,21 +214,21 @@
214214
top: 0px;
215215
left: 0px;
216216
border-radius: var(--f-attachment-border-radius);
217-
width: 100%;
218-
height: 100%;
217+
width: 100%;
218+
height: 100%;
219219
visibility: hidden;
220220
}
221221

222222
.f-attachment-thumb__tools:after {
223-
content: " ";
223+
content: ' ';
224224
position: absolute;
225225
top: 0px;
226226
left: 0px;
227227
border-radius: var(--f-attachment-border-radius);
228228
background-color: var(--f-attachment-thumb-overlay);
229-
width: 100%;
229+
width: 100%;
230230
height: 100%;
231-
z-index: 0;
231+
z-index: 0;
232232
}
233233

234234
.f-attachment-thumb:hover .f-attachment-thumb__tools {
@@ -237,7 +237,7 @@
237237
}
238238

239239
.f-attachment-thumb__tool {
240-
padding: var(--f-space-1);
241-
z-index: 1;
240+
padding: var(--f-space-1);
241+
z-index: 1;
242242
position: relative;
243243
}

‎packages/core/src/attachment/attachment.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { Text } from '../text/text'
55
import { CoreViewProps } from '../types'
66
import { IconLib } from '../icon'
77

8-
export const FOLD_ATTACHMENT_MIME_TYPES = 'FOLD_ATTACHMENT_MIME_TYPES'
8+
export const F_ATTACHMENT_MIME_TYPES = 'F_ATTACHMENT_MIME_TYPES'
99

10-
windowObject[FOLD_ATTACHMENT_MIME_TYPES] = {
10+
windowObject[F_ATTACHMENT_MIME_TYPES] = {
1111
DESCRIPTION: {
1212
'audio/aac': 'AAC audio',
1313
'application/x-abiword': 'AbiWorddocument',
@@ -200,7 +200,7 @@ export const Attachment = (props: AttachmentProps) => {
200200
[props.className, size]
201201
)
202202

203-
const icon: string = mime ? windowObject[FOLD_ATTACHMENT_MIME_TYPES].ICON[mime] : error ? 'warning' : 'paperclip'
203+
const icon: string = mime ? windowObject[F_ATTACHMENT_MIME_TYPES].ICON[mime] : error ? 'warning' : 'paperclip'
204204

205205
return (
206206
<View
@@ -267,10 +267,10 @@ export const Attachment = (props: AttachmentProps) => {
267267
size="sm"
268268
as="span"
269269
className="f-attachment__text-meta">
270-
<span>{windowObject[FOLD_ATTACHMENT_MIME_TYPES].DESCRIPTION[mime]}</span>
270+
<span>{windowObject[F_ATTACHMENT_MIME_TYPES].DESCRIPTION[mime]}</span>
271271
</Text>
272272
)}
273-
{filesize && (
273+
{!!filesize && (
274274
<Text
275275
size="sm"
276276
as="span"
@@ -311,7 +311,7 @@ export const AttachmentThumb = (props: AttachmentThumbProps) => {
311311
},
312312
[props.className]
313313
)
314-
const icon: string = mime ? windowObject[FOLD_ATTACHMENT_MIME_TYPES].ICON[mime] : error ? 'warning' : 'paperclip'
314+
const icon: string = mime ? windowObject[F_ATTACHMENT_MIME_TYPES].ICON[mime] : error ? 'warning' : 'paperclip'
315315

316316
return (
317317
<View

0 commit comments

Comments
 (0)