@eagami/ui 2.3.0 → 2.4.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/package.json
CHANGED
|
@@ -15,6 +15,23 @@
|
|
|
15
15
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
16
16
|
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
|
17
17
|
|
|
18
|
+
// Bevel — paired inset highlight (top) + inset shadow (bottom) for surfaces
|
|
19
|
+
// that should read as raised/3D (chips, ring rims, keyboard keys, mechanical
|
|
20
|
+
// toggles). Compose with `--shadow-*` for an ambient drop:
|
|
21
|
+
// `box-shadow: var(--shadow-bevel), var(--shadow-sm);`
|
|
22
|
+
--shadow-bevel:
|
|
23
|
+
inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
|
|
24
|
+
--shadow-bevel-strong:
|
|
25
|
+
inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
|
|
26
|
+
|
|
27
|
+
// Well — paired inset shadow (top) + inset highlight (bottom) for surfaces
|
|
28
|
+
// that should read as recessed/sunken (cavity in a ring, depressed switch,
|
|
29
|
+
// inset panel). Inverse lighting of `--shadow-bevel`.
|
|
30
|
+
--shadow-well:
|
|
31
|
+
inset 0 1px 1.5px rgba(0, 0, 0, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.5);
|
|
32
|
+
--shadow-well-strong:
|
|
33
|
+
inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1.5px 1px rgba(255, 255, 255, 0.55);
|
|
34
|
+
|
|
18
35
|
// Focus ring — used for keyboard accessibility across all interactive elements
|
|
19
36
|
--shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
|
|
20
37
|
--shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
|
|
@@ -55,6 +72,18 @@
|
|
|
55
72
|
--shadow-xl:
|
|
56
73
|
0 12px 18px -4px rgba(255, 255, 255, 0.05), 0 5px 8px -4px rgba(255, 255, 255, 0.03);
|
|
57
74
|
--shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.06);
|
|
75
|
+
|
|
76
|
+
// Bevel / well: against a dark surface a bright white highlight reads as a
|
|
77
|
+
// halo. Drop the highlight alpha and crank the shadow alpha so the relief
|
|
78
|
+
// still reads as 3D on the lifted bg-base (neutral-800) without glowing.
|
|
79
|
+
--shadow-bevel:
|
|
80
|
+
inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1.5px rgba(0, 0, 0, 0.6);
|
|
81
|
+
--shadow-bevel-strong:
|
|
82
|
+
inset 0 1.5px 2px rgba(255, 255, 255, 0.22), inset 0 -2px 3px rgba(0, 0, 0, 0.7);
|
|
83
|
+
--shadow-well:
|
|
84
|
+
inset 0 1px 1.5px rgba(0, 0, 0, 0.55), inset 0 -1px 0.5px rgba(255, 255, 255, 0.08);
|
|
85
|
+
--shadow-well-strong:
|
|
86
|
+
inset 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12);
|
|
58
87
|
}
|
|
59
88
|
|
|
60
89
|
@media (prefers-color-scheme: dark) {
|
|
@@ -81,6 +81,17 @@
|
|
|
81
81
|
--text-h4-weight: var(--font-weight-semibold);
|
|
82
82
|
--text-h4-lh: var(--line-height-snug);
|
|
83
83
|
|
|
84
|
+
// Section heading — page-level subsection title (e.g. an `<h2>` under an
|
|
85
|
+
// `<h1>` page title on a docs or marketing page). Same size/weight/lh as
|
|
86
|
+
// `--text-h4-*` but routes through the brand family so the heading reads
|
|
87
|
+
// as part of the brand wordmark rather than the body type. The only
|
|
88
|
+
// composite that pins a font-family; consumers who want to recolour or
|
|
89
|
+
// resize without re-specifying the family can still override per-piece.
|
|
90
|
+
--text-section-heading-size: var(--font-size-xl);
|
|
91
|
+
--text-section-heading-weight: var(--font-weight-semibold);
|
|
92
|
+
--text-section-heading-lh: var(--line-height-snug);
|
|
93
|
+
--text-section-heading-family: var(--font-family-brand);
|
|
94
|
+
|
|
84
95
|
// Body
|
|
85
96
|
--text-body-lg-size: var(--font-size-lg);
|
|
86
97
|
--text-body-lg-weight: var(--font-weight-regular);
|
|
@@ -107,10 +118,16 @@
|
|
|
107
118
|
--text-label-sm-weight: var(--font-weight-medium);
|
|
108
119
|
--text-label-sm-lh: var(--line-height-tight);
|
|
109
120
|
|
|
110
|
-
// Helper / caption —
|
|
111
|
-
// between `--font-size-xs` (12px) and
|
|
112
|
-
//
|
|
113
|
-
// the "barely readable" zone that 12px hits
|
|
121
|
+
// Helper / caption — small subordinate text that sits visually below the
|
|
122
|
+
// primary content of a component. Sits between `--font-size-xs` (12px) and
|
|
123
|
+
// `--font-size-sm` (14px) at 13px so it stays subordinate without dropping
|
|
124
|
+
// into the "barely readable" zone that 12px hits.
|
|
125
|
+
//
|
|
126
|
+
// Primary role: field-level hint and error messages on form-like components
|
|
127
|
+
// (see STANDARD below). Secondary role: short subordinate metadata text
|
|
128
|
+
// inside a component, e.g. `<ea-file-uploader>`'s constraints disclosure
|
|
129
|
+
// ("PNG or JPG up to 5MB") and per-file size label ("245 KB"). For any
|
|
130
|
+
// role bigger than these, reach for a body-* composite instead.
|
|
114
131
|
//
|
|
115
132
|
// STANDARD — every form-like component (anything exposing `errorMsg` and/or
|
|
116
133
|
// `hint`) must render its messages identically. Mirror `<ea-input>` exactly:
|