@eagami/ui 1.3.0 → 1.5.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/README.md +18 -1
- package/fesm2022/eagami-ui.mjs +13557 -4322
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/tokens/_colors.scss +13 -0
- package/src/styles/tokens/_typography.scss +23 -2
- package/types/eagami-ui.d.ts +1966 -284
package/package.json
CHANGED
|
@@ -132,6 +132,19 @@
|
|
|
132
132
|
--color-info-default: var(--color-info-600);
|
|
133
133
|
--color-info-subtle: var(--color-info-50);
|
|
134
134
|
--color-info-muted: var(--color-info-100);
|
|
135
|
+
|
|
136
|
+
// Color-picker mechanics — pure RGB primaries that build the hue wheel and
|
|
137
|
+
// the saturation/value gradient. These are intrinsic to the picker UI, not
|
|
138
|
+
// themeable, but live here so component SCSS stays literal-free.
|
|
139
|
+
--color-picker-hue-red: #ff0000;
|
|
140
|
+
--color-picker-hue-yellow: #ffff00;
|
|
141
|
+
--color-picker-hue-green: #00ff00;
|
|
142
|
+
--color-picker-hue-cyan: #00ffff;
|
|
143
|
+
--color-picker-hue-blue: #0000ff;
|
|
144
|
+
--color-picker-hue-magenta: #ff00ff;
|
|
145
|
+
--color-picker-sv-white: #ffffff;
|
|
146
|
+
--color-picker-sv-black: #000000;
|
|
147
|
+
--color-picker-thumb-halo: rgba(0, 0, 0, 0.25);
|
|
135
148
|
}
|
|
136
149
|
|
|
137
150
|
// ---------------------------------------------------------------------------
|
|
@@ -107,8 +107,29 @@
|
|
|
107
107
|
--text-label-sm-weight: var(--font-weight-medium);
|
|
108
108
|
--text-label-sm-lh: var(--line-height-tight);
|
|
109
109
|
|
|
110
|
-
// Helper / caption
|
|
111
|
-
|
|
110
|
+
// Helper / caption — used for field-level hint and error messages. Sits
|
|
111
|
+
// between `--font-size-xs` (12px) and `--font-size-sm` (14px) at 13px so
|
|
112
|
+
// it stays visually subordinate to the field's label without dropping into
|
|
113
|
+
// the "barely readable" zone that 12px hits on dense forms.
|
|
114
|
+
//
|
|
115
|
+
// STANDARD — every form-like component (anything exposing `errorMsg` and/or
|
|
116
|
+
// `hint`) must render its messages identically. Mirror `<ea-input>` exactly:
|
|
117
|
+
// 1. `<p class="ea-{name}-field__message ea-{name}-field__message--error">`
|
|
118
|
+
// (or `--hint`) with `role="alert"` on the error variant and an `id`
|
|
119
|
+
// matching the field's `aria-describedby`.
|
|
120
|
+
// 2. The first child of the error `<p>` is always
|
|
121
|
+
// `<ea-icon-alert-circle class="ea-{name}-field__message-icon" />`.
|
|
122
|
+
// Hints render text-only (no icon).
|
|
123
|
+
// 3. `__message` uses `display: flex; align-items: center; gap: var(--space-1)`
|
|
124
|
+
// plus the three `--text-helper-*` tokens above. Never hard-code a
|
|
125
|
+
// font-size on `__message`.
|
|
126
|
+
// 4. `__message-icon` uses `flex-shrink: 0; width: 0.875em; height: 0.875em`
|
|
127
|
+
// so the icon scales with the text.
|
|
128
|
+
// 5. Error color is `var(--color-error-default)`. Hint color is component-
|
|
129
|
+
// specific (`--color-text-secondary` or `inherit`) but stays consistent
|
|
130
|
+
// within a component.
|
|
131
|
+
// 6. `AlertCircleIconComponent` must be in the component's `imports: [...]`.
|
|
132
|
+
--text-helper-size: 0.8125rem; // 13px
|
|
112
133
|
--text-helper-weight: var(--font-weight-regular);
|
|
113
134
|
--text-helper-lh: var(--line-height-normal);
|
|
114
135
|
|