@eagami/ui 1.0.1 → 1.0.2
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/README.md +1 -1
- package/package.json +1 -1
- package/src/styles/tokens/_colors.scss +22 -22
- package/src/styles/tokens/_elevation.scss +19 -11
package/README.md
CHANGED
|
@@ -103,7 +103,7 @@ See [`src/styles/tokens/`](src/styles/tokens/) for the full token reference.
|
|
|
103
103
|
|
|
104
104
|
## Framework integration
|
|
105
105
|
|
|
106
|
-
|
|
106
|
+
`@eagami/ui` is an Angular library, but its design tokens, rules, and component API conventions are framework-agnostic. For projects that can't consume the Angular package directly yet still want to adhere to the same design system, two self-contained integration guides are provided — each copy-and-paste ready and written to be readable by both human developers and AI coding agents:
|
|
107
107
|
|
|
108
108
|
- **[design-system-flutter.md](design-system-flutter.md)** — Dart `ThemeExtension`, `MaterialApp` wiring, reduced-motion handling, and widget API conventions for Flutter projects
|
|
109
109
|
- **[design-system-react.md](design-system-react.md)** — CSS custom properties, TypeScript constants, and component prop conventions for React projects (plain CSS, CSS Modules, styled-components, emotion, or Tailwind)
|
package/package.json
CHANGED
|
@@ -8,28 +8,28 @@
|
|
|
8
8
|
// ---------------------------------------------------------------------------
|
|
9
9
|
|
|
10
10
|
// Primary
|
|
11
|
-
--color-primary-50: #
|
|
12
|
-
--color-primary-100: #
|
|
13
|
-
--color-primary-200: #
|
|
14
|
-
--color-primary-300: #
|
|
15
|
-
--color-primary-400: #
|
|
16
|
-
--color-primary-500: #
|
|
17
|
-
--color-primary-600: #
|
|
18
|
-
--color-primary-700: #
|
|
19
|
-
--color-primary-800: #
|
|
20
|
-
--color-primary-900: #
|
|
11
|
+
--color-primary-50: #ecf3f9;
|
|
12
|
+
--color-primary-100: #d1e3f0;
|
|
13
|
+
--color-primary-200: #abcbe3;
|
|
14
|
+
--color-primary-300: #7dafd4;
|
|
15
|
+
--color-primary-400: #4b91c3;
|
|
16
|
+
--color-primary-500: #3674a1;
|
|
17
|
+
--color-primary-600: #2a5b7e;
|
|
18
|
+
--color-primary-700: #204560;
|
|
19
|
+
--color-primary-800: #162f41;
|
|
20
|
+
--color-primary-900: #0d1c26;
|
|
21
21
|
|
|
22
22
|
// Secondary
|
|
23
|
-
--color-secondary-50: #
|
|
24
|
-
--color-secondary-100: #
|
|
25
|
-
--color-secondary-200: #
|
|
26
|
-
--color-secondary-300: #
|
|
27
|
-
--color-secondary-400: #
|
|
28
|
-
--color-secondary-500: #
|
|
29
|
-
--color-secondary-600: #
|
|
30
|
-
--color-secondary-700: #
|
|
31
|
-
--color-secondary-800: #
|
|
32
|
-
--color-secondary-900: #
|
|
23
|
+
--color-secondary-50: #f2eff5;
|
|
24
|
+
--color-secondary-100: #dfd9e8;
|
|
25
|
+
--color-secondary-200: #c4b9d5;
|
|
26
|
+
--color-secondary-300: #a493be;
|
|
27
|
+
--color-secondary-400: #8169a5;
|
|
28
|
+
--color-secondary-500: #665086;
|
|
29
|
+
--color-secondary-600: #503f69;
|
|
30
|
+
--color-secondary-700: #3d3050;
|
|
31
|
+
--color-secondary-800: #292136;
|
|
32
|
+
--color-secondary-900: #181320;
|
|
33
33
|
|
|
34
34
|
// Neutral (Gray)
|
|
35
35
|
--color-neutral-0: #ffffff;
|
|
@@ -163,8 +163,8 @@
|
|
|
163
163
|
--color-brand-default: var(--color-primary-400);
|
|
164
164
|
--color-brand-hover: var(--color-primary-300);
|
|
165
165
|
--color-brand-active: var(--color-primary-200);
|
|
166
|
-
--color-brand-subtle: rgba(
|
|
167
|
-
--color-brand-muted: rgba(
|
|
166
|
+
--color-brand-subtle: rgba(75, 145, 195, 0.1);
|
|
167
|
+
--color-brand-muted: rgba(75, 145, 195, 0.2);
|
|
168
168
|
|
|
169
169
|
// Status `*-subtle` / `*-muted` — light pastels in light mode become
|
|
170
170
|
// unreadable behind light text in dark mode. Re-tint as a low-alpha wash of
|
|
@@ -34,18 +34,26 @@
|
|
|
34
34
|
--z-index-tooltip: 700;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
// Dark mode — black shadows
|
|
38
|
-
//
|
|
39
|
-
//
|
|
40
|
-
//
|
|
41
|
-
//
|
|
37
|
+
// Dark mode — black drop shadows are nearly invisible against a near-black
|
|
38
|
+
// page, so flip the shadow color to white at low alpha. The soft fade is what
|
|
39
|
+
// reads as a cast shadow; against a dark page, white-at-low-alpha blends to a
|
|
40
|
+
// muted dark gray that mirrors the role black-at-low-alpha plays in light mode.
|
|
41
|
+
// xl and 2xl have tighter offset/blur than light mode so the lighter fade
|
|
42
|
+
// doesn't sprawl into a halo. The `:not([data-theme='light'])` clause lets
|
|
43
|
+
// consumers force light mode via `<html data-theme="light">` even when the OS
|
|
44
|
+
// prefers dark, and the matching `[data-theme='dark']` block forces dark mode
|
|
45
|
+
// regardless of OS.
|
|
42
46
|
@mixin dark-elevation-tokens {
|
|
43
|
-
--shadow-xs: 0 1px 2px 0 rgba(
|
|
44
|
-
--shadow-sm:
|
|
45
|
-
|
|
46
|
-
--shadow-
|
|
47
|
-
|
|
48
|
-
--shadow-
|
|
47
|
+
--shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.04);
|
|
48
|
+
--shadow-sm:
|
|
49
|
+
0 1px 3px 0 rgba(255, 255, 255, 0.05), 0 1px 2px -1px rgba(255, 255, 255, 0.04);
|
|
50
|
+
--shadow-md:
|
|
51
|
+
0 4px 6px -1px rgba(255, 255, 255, 0.06), 0 2px 4px -2px rgba(255, 255, 255, 0.04);
|
|
52
|
+
--shadow-lg:
|
|
53
|
+
0 8px 12px -2px rgba(255, 255, 255, 0.08), 0 3px 5px -3px rgba(255, 255, 255, 0.05);
|
|
54
|
+
--shadow-xl:
|
|
55
|
+
0 12px 18px -4px rgba(255, 255, 255, 0.1), 0 5px 8px -4px rgba(255, 255, 255, 0.06);
|
|
56
|
+
--shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.12);
|
|
49
57
|
}
|
|
50
58
|
|
|
51
59
|
@media (prefers-color-scheme: dark) {
|