@eagami/ui 1.5.0 → 2.0.0
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/fesm2022/eagami-ui.mjs +2092 -506
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +3 -3
- package/src/styles/tokens/_spacing.scss +28 -0
- package/src/styles/tokens/_typography.scss +26 -3
- package/types/eagami-ui.d.ts +627 -72
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eagami/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
|
|
5
5
|
"author": "Michal Wiraszka <michal@eagami.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"@angular/core": "^21.0.0",
|
|
27
27
|
"@angular/forms": "^21.0.0"
|
|
28
28
|
},
|
|
29
|
+
"dependencies": {},
|
|
29
30
|
"engines": {
|
|
30
31
|
"node": ">=20"
|
|
31
32
|
},
|
|
@@ -40,6 +41,5 @@
|
|
|
40
41
|
"default": "./fesm2022/eagami-ui.mjs"
|
|
41
42
|
}
|
|
42
43
|
},
|
|
43
|
-
"type": "module"
|
|
44
|
-
"dependencies": {}
|
|
44
|
+
"type": "module"
|
|
45
45
|
}
|
|
@@ -28,6 +28,34 @@
|
|
|
28
28
|
--space-24: 6rem; // 96px
|
|
29
29
|
--space-32: 8rem; // 128px
|
|
30
30
|
|
|
31
|
+
// ---------------------------------------------------------------------------
|
|
32
|
+
// Negative variants — mirror the positive scale 1:1 with an `n-` infix.
|
|
33
|
+
// Useful for negative margins (container bleeds, overlap tricks, gutter
|
|
34
|
+
// collapsing) so consumers don't have to write `calc(var(--space-2) * -1)`.
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
--space-n-px: -1px;
|
|
37
|
+
--space-n-0-5: -0.125rem; // -2px
|
|
38
|
+
--space-n-1: -0.25rem; // -4px
|
|
39
|
+
--space-n-1-5: -0.375rem; // -6px
|
|
40
|
+
--space-n-2: -0.5rem; // -8px
|
|
41
|
+
--space-n-2-5: -0.625rem; // -10px
|
|
42
|
+
--space-n-3: -0.75rem; // -12px
|
|
43
|
+
--space-n-3-5: -0.875rem; // -14px
|
|
44
|
+
--space-n-4: -1rem; // -16px
|
|
45
|
+
--space-n-5: -1.25rem; // -20px
|
|
46
|
+
--space-n-6: -1.5rem; // -24px
|
|
47
|
+
--space-n-7: -1.75rem; // -28px
|
|
48
|
+
--space-n-8: -2rem; // -32px
|
|
49
|
+
--space-n-9: -2.25rem; // -36px
|
|
50
|
+
--space-n-10: -2.5rem; // -40px
|
|
51
|
+
--space-n-11: -2.75rem; // -44px
|
|
52
|
+
--space-n-12: -3rem; // -48px
|
|
53
|
+
--space-n-14: -3.5rem; // -56px
|
|
54
|
+
--space-n-16: -4rem; // -64px
|
|
55
|
+
--space-n-20: -5rem; // -80px
|
|
56
|
+
--space-n-24: -6rem; // -96px
|
|
57
|
+
--space-n-32: -8rem; // -128px
|
|
58
|
+
|
|
31
59
|
// ---------------------------------------------------------------------------
|
|
32
60
|
// Layout / component-specific semantic spacing
|
|
33
61
|
// ---------------------------------------------------------------------------
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--font-family-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
10
10
|
--font-family-brand: 'Syne', 'DM Sans', system-ui, sans-serif;
|
|
11
11
|
--font-family-serif: 'Georgia', 'Times New Roman', serif;
|
|
12
|
-
--font-family-mono:
|
|
12
|
+
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
13
13
|
|
|
14
14
|
// ---------------------------------------------------------------------------
|
|
15
15
|
// Font sizes (rem, base 16px)
|
|
@@ -133,8 +133,31 @@
|
|
|
133
133
|
--text-helper-weight: var(--font-weight-regular);
|
|
134
134
|
--text-helper-lh: var(--line-height-normal);
|
|
135
135
|
|
|
136
|
-
// Code
|
|
137
|
-
|
|
136
|
+
// Code — inline code styled to read as a chip embedded in body text. Size
|
|
137
|
+
// is relative (em) so it tracks the surrounding text size rather than
|
|
138
|
+
// forcing an absolute value. Apply with `font-size: var(--text-code-size);
|
|
139
|
+
// font-weight: var(--text-code-weight); font-family: var(--text-code-family);
|
|
140
|
+
// color: var(--text-code-color); background-color: var(--text-code-bg);
|
|
141
|
+
// padding: var(--text-code-padding); border-radius: var(--text-code-radius);`
|
|
142
|
+
// on `code` (or `<ea-text variant="code">` when that ships).
|
|
143
|
+
--text-code-size: 0.875em;
|
|
138
144
|
--text-code-weight: var(--font-weight-regular);
|
|
139
145
|
--text-code-family: var(--font-family-mono);
|
|
146
|
+
--text-code-color: var(--color-text-primary);
|
|
147
|
+
--text-code-bg: var(--color-bg-muted);
|
|
148
|
+
--text-code-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
|
|
149
|
+
--text-code-radius: var(--radius-sm);
|
|
150
|
+
|
|
151
|
+
// Kbd — keyboard-key glyph, slightly smaller than inline code and with a
|
|
152
|
+
// raised appearance (border + 1px bottom shadow) to suggest a physical key.
|
|
153
|
+
// Same shape language as `code` so the two read as a family.
|
|
154
|
+
--text-kbd-size: 0.8125em;
|
|
155
|
+
--text-kbd-weight: var(--font-weight-medium);
|
|
156
|
+
--text-kbd-family: var(--font-family-mono);
|
|
157
|
+
--text-kbd-color: var(--color-text-primary);
|
|
158
|
+
--text-kbd-bg: var(--color-bg-base);
|
|
159
|
+
--text-kbd-border: var(--border-width-thin) solid var(--color-border-default);
|
|
160
|
+
--text-kbd-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
|
|
161
|
+
--text-kbd-radius: var(--radius-sm);
|
|
162
|
+
--text-kbd-shadow: 0 1px 0 var(--color-border-default);
|
|
140
163
|
}
|