@fluityy/designsystem 0.2.3 → 0.2.4
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/components/CodeBlock/CodeBlock.d.ts +7 -0
- package/dist/components/Toast/Toast.d.ts +6 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.js +494 -396
- package/dist/index.js.map +1 -1
- package/dist/styles.css +14 -5
- package/dist/theme/ThemeProvider.d.ts +7 -2
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
--flui-color-neutral-700: #363b49;
|
|
38
38
|
--flui-color-neutral-800: #22262f;
|
|
39
39
|
--flui-color-neutral-900: #13151b;
|
|
40
|
+
--flui-color-neutral-950: #0e1015;
|
|
41
|
+
--flui-color-neutral-1000: #050608;
|
|
40
42
|
--flui-color-success-500: #1f9d55;
|
|
41
43
|
--flui-color-success-600: #157f43;
|
|
42
44
|
--flui-color-warning-500: #d9920a;
|
|
@@ -110,15 +112,15 @@
|
|
|
110
112
|
*/
|
|
111
113
|
|
|
112
114
|
[data-theme="dark"] {
|
|
113
|
-
--flui-semantic-bg-base: var(--flui-color-neutral-
|
|
114
|
-
--flui-semantic-bg-subtle: var(--flui-color-neutral-
|
|
115
|
-
--flui-semantic-bg-muted: var(--flui-color-neutral-
|
|
115
|
+
--flui-semantic-bg-base: var(--flui-color-neutral-1000);
|
|
116
|
+
--flui-semantic-bg-subtle: var(--flui-color-neutral-950);
|
|
117
|
+
--flui-semantic-bg-muted: var(--flui-color-neutral-800);
|
|
116
118
|
--flui-semantic-fg-default: var(--flui-color-neutral-50);
|
|
117
|
-
--flui-semantic-fg-muted: var(--flui-color-neutral-
|
|
119
|
+
--flui-semantic-fg-muted: var(--flui-color-neutral-300);
|
|
118
120
|
--flui-semantic-border-default: var(--flui-color-neutral-700);
|
|
119
121
|
--flui-semantic-border-strong: var(--flui-color-neutral-600);
|
|
120
122
|
--flui-semantic-primary-subtle: var(--flui-color-brand-800);
|
|
121
|
-
--flui-semantic-warning-on-warning: var(--flui-color-neutral-
|
|
123
|
+
--flui-semantic-warning-on-warning: var(--flui-color-neutral-950);
|
|
122
124
|
}
|
|
123
125
|
|
|
124
126
|
/* tokens.brand-emerald.css */
|
|
@@ -211,7 +213,10 @@
|
|
|
211
213
|
--color-brand-600: var(--flui-color-brand-600);
|
|
212
214
|
--color-neutral-100: var(--flui-color-neutral-100);
|
|
213
215
|
--color-neutral-500: var(--flui-color-neutral-500);
|
|
216
|
+
--color-neutral-800: var(--flui-color-neutral-800);
|
|
214
217
|
--color-neutral-900: var(--flui-color-neutral-900);
|
|
218
|
+
--color-neutral-950: var(--flui-color-neutral-950);
|
|
219
|
+
--color-neutral-1000: var(--flui-color-neutral-1000);
|
|
215
220
|
|
|
216
221
|
/* espaçamento */
|
|
217
222
|
--spacing-1: var(--flui-space-1);
|
|
@@ -262,3 +267,7 @@
|
|
|
262
267
|
from { opacity: 0; transform: translateY(8px); }
|
|
263
268
|
to { opacity: 1; transform: translateY(0); }
|
|
264
269
|
}
|
|
270
|
+
@keyframes flui-slide-down {
|
|
271
|
+
from { opacity: 1; transform: translateY(0); }
|
|
272
|
+
to { opacity: 0; transform: translateY(8px); }
|
|
273
|
+
}
|
|
@@ -6,14 +6,17 @@ export type ColorMode = "light" | "dark" | "system";
|
|
|
6
6
|
* tokens/brands/*.json — daí o tipo aberto (string) para temas customizados.
|
|
7
7
|
*/
|
|
8
8
|
export type Brand = "default" | (string & {});
|
|
9
|
+
export type RadiusScale = "sharp" | "default" | "soft" | "round";
|
|
9
10
|
interface ThemeContextValue {
|
|
10
11
|
/** Preferência escolhida (pode ser "system"). */
|
|
11
12
|
mode: ColorMode;
|
|
12
13
|
/** Modo efetivo já resolvido ("light" | "dark"). */
|
|
13
14
|
resolvedMode: "light" | "dark";
|
|
14
15
|
brand: Brand;
|
|
16
|
+
radius: RadiusScale;
|
|
15
17
|
setMode: (mode: ColorMode) => void;
|
|
16
18
|
setBrand: (brand: Brand) => void;
|
|
19
|
+
setRadius: (radius: RadiusScale) => void;
|
|
17
20
|
/** Alterna entre claro e escuro (resolve "system" antes). */
|
|
18
21
|
toggleMode: () => void;
|
|
19
22
|
}
|
|
@@ -23,12 +26,14 @@ export interface ThemeProviderProps {
|
|
|
23
26
|
defaultMode?: ColorMode;
|
|
24
27
|
/** Marca inicial caso não haja preferência salva. Padrão: "default". */
|
|
25
28
|
defaultBrand?: Brand;
|
|
29
|
+
/** Escala de radius inicial caso não haja preferência salva. Padrão: "default". */
|
|
30
|
+
defaultRadius?: RadiusScale;
|
|
26
31
|
/**
|
|
27
|
-
* Onde aplicar os atributos data-theme / data-brand.
|
|
32
|
+
* Onde aplicar os atributos data-theme / data-brand / data-radius.
|
|
28
33
|
* Padrão: document.documentElement (escopo global do app).
|
|
29
34
|
*/
|
|
30
35
|
target?: () => HTMLElement | null;
|
|
31
36
|
}
|
|
32
|
-
export declare function ThemeProvider({ children, defaultMode, defaultBrand, target, }: ThemeProviderProps): import("react").JSX.Element;
|
|
37
|
+
export declare function ThemeProvider({ children, defaultMode, defaultBrand, defaultRadius, target, }: ThemeProviderProps): import("react").JSX.Element;
|
|
33
38
|
export declare function useTheme(): ThemeContextValue;
|
|
34
39
|
export {};
|