@fluityy/designsystem 0.2.3 → 0.2.5
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 +517 -393
- package/dist/index.js.map +1 -1
- package/dist/styles.css +19 -7
- package/dist/theme/ThemeProvider.d.ts +7 -2
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -35,8 +35,12 @@
|
|
|
35
35
|
--flui-color-neutral-500: #6b7385;
|
|
36
36
|
--flui-color-neutral-600: #4c5263;
|
|
37
37
|
--flui-color-neutral-700: #363b49;
|
|
38
|
+
--flui-color-neutral-750: #2c303c;
|
|
38
39
|
--flui-color-neutral-800: #22262f;
|
|
40
|
+
--flui-color-neutral-850: #1a1d25;
|
|
39
41
|
--flui-color-neutral-900: #13151b;
|
|
42
|
+
--flui-color-neutral-950: #0e1015;
|
|
43
|
+
--flui-color-neutral-1000: #050608;
|
|
40
44
|
--flui-color-success-500: #1f9d55;
|
|
41
45
|
--flui-color-success-600: #157f43;
|
|
42
46
|
--flui-color-warning-500: #d9920a;
|
|
@@ -110,15 +114,15 @@
|
|
|
110
114
|
*/
|
|
111
115
|
|
|
112
116
|
[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-
|
|
117
|
+
--flui-semantic-bg-base: var(--flui-color-neutral-1000);
|
|
118
|
+
--flui-semantic-bg-subtle: var(--flui-color-neutral-950);
|
|
119
|
+
--flui-semantic-bg-muted: var(--flui-color-neutral-800);
|
|
116
120
|
--flui-semantic-fg-default: var(--flui-color-neutral-50);
|
|
117
|
-
--flui-semantic-fg-muted: var(--flui-color-neutral-
|
|
118
|
-
--flui-semantic-border-default: var(--flui-color-neutral-
|
|
119
|
-
--flui-semantic-border-strong: var(--flui-color-neutral-
|
|
121
|
+
--flui-semantic-fg-muted: var(--flui-color-neutral-300);
|
|
122
|
+
--flui-semantic-border-default: var(--flui-color-neutral-850);
|
|
123
|
+
--flui-semantic-border-strong: var(--flui-color-neutral-750);
|
|
120
124
|
--flui-semantic-primary-subtle: var(--flui-color-brand-800);
|
|
121
|
-
--flui-semantic-warning-on-warning: var(--flui-color-neutral-
|
|
125
|
+
--flui-semantic-warning-on-warning: var(--flui-color-neutral-950);
|
|
122
126
|
}
|
|
123
127
|
|
|
124
128
|
/* tokens.brand-emerald.css */
|
|
@@ -211,7 +215,11 @@
|
|
|
211
215
|
--color-brand-600: var(--flui-color-brand-600);
|
|
212
216
|
--color-neutral-100: var(--flui-color-neutral-100);
|
|
213
217
|
--color-neutral-500: var(--flui-color-neutral-500);
|
|
218
|
+
--color-neutral-800: var(--flui-color-neutral-800);
|
|
219
|
+
--color-neutral-850: var(--flui-color-neutral-850);
|
|
214
220
|
--color-neutral-900: var(--flui-color-neutral-900);
|
|
221
|
+
--color-neutral-950: var(--flui-color-neutral-950);
|
|
222
|
+
--color-neutral-1000: var(--flui-color-neutral-1000);
|
|
215
223
|
|
|
216
224
|
/* espaçamento */
|
|
217
225
|
--spacing-1: var(--flui-space-1);
|
|
@@ -262,3 +270,7 @@
|
|
|
262
270
|
from { opacity: 0; transform: translateY(8px); }
|
|
263
271
|
to { opacity: 1; transform: translateY(0); }
|
|
264
272
|
}
|
|
273
|
+
@keyframes flui-slide-down {
|
|
274
|
+
from { opacity: 1; transform: translateY(0); }
|
|
275
|
+
to { opacity: 0; transform: translateY(8px); }
|
|
276
|
+
}
|
|
@@ -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 {};
|