@auldrant/ui 0.6.0 → 0.7.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 +25 -3
- package/dist/auldrant-ui.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -113,7 +113,7 @@ Override primary, white, and black for complete control:
|
|
|
113
113
|
|
|
114
114
|
| Token | Default | Description |
|
|
115
115
|
|-------|---------|-------------|
|
|
116
|
-
| `--aui-base-primary` | `oklch(0.78 0.18
|
|
116
|
+
| `--aui-base-primary` | `oklch(0.78 0.18 160)` | Brand accent color (green) |
|
|
117
117
|
| `--aui-base-white` | `#f5f5f5` | Light endpoint (light-mode background, dark-mode text) |
|
|
118
118
|
| `--aui-base-black` | `#1a1a1a` | Dark endpoint (dark-mode background, light-mode text) |
|
|
119
119
|
| `--aui-base-error` | `oklch(0.78 0.22 27)` | Error/danger semantic color |
|
|
@@ -155,9 +155,31 @@ Custom white/black pairs with lower inherent contrast (e.g. `#e8e8e8` / `#2a2a2a
|
|
|
155
155
|
|
|
156
156
|
### Primary color guidance
|
|
157
157
|
|
|
158
|
-
Use oklch lightness **0.75–0.80** and chroma **0.15–0.22** for the primary color.
|
|
158
|
+
Use oklch lightness **0.75–0.80** and chroma **0.15–0.22** for the primary color. All verified hue families are available as pre-built palettes (see below). Custom hues at these ranges generally pass AAA — verify with a [contrast checker](https://webaim.org/resources/contrastchecker/) if using untested values.
|
|
159
159
|
|
|
160
|
-
|
|
160
|
+
### Pre-built palettes
|
|
161
|
+
|
|
162
|
+
AAA-verified preset classes — apply directly on `<Theme>`:
|
|
163
|
+
|
|
164
|
+
| Class | Value | Notes |
|
|
165
|
+
|-------|-------|-------|
|
|
166
|
+
| *(default)* | `oklch(0.78 0.18 160)` | Green — no class needed |
|
|
167
|
+
| `aui-blue` | `oklch(0.78 0.18 260)` | |
|
|
168
|
+
| `aui-purple` | `oklch(0.78 0.18 300)` | |
|
|
169
|
+
| `aui-teal` | `oklch(0.78 0.15 195)` | Lower chroma for teal gamut |
|
|
170
|
+
| `aui-red` | `oklch(0.78 0.22 27)` | Higher chroma for red vibrancy |
|
|
171
|
+
| `aui-orange` | `oklch(0.78 0.18 55)` | |
|
|
172
|
+
| `aui-yellow` | `oklch(0.78 0.18 95)` | Light mode shifts toward olive/amber (expected) |
|
|
173
|
+
|
|
174
|
+
```tsx
|
|
175
|
+
<Theme class="aui-blue"> {/* override default green with blue */}
|
|
176
|
+
<App />
|
|
177
|
+
</Theme>
|
|
178
|
+
|
|
179
|
+
<Theme> {/* green — the default, no class needed */}
|
|
180
|
+
<App />
|
|
181
|
+
</Theme>
|
|
182
|
+
```
|
|
161
183
|
|
|
162
184
|
### Nestable themes
|
|
163
185
|
|
package/dist/auldrant-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--aui-base-primary: oklch(.78 .18
|
|
1
|
+
:root{--aui-base-primary: oklch(.78 .18 160);--aui-base-white: #f5f5f5;--aui-base-black: #1a1a1a;--aui-base-error: oklch(.78 .22 27);--aui-base-success: oklch(.78 .18 145);--_aui-fg: var(--aui-base-white);--_aui-bg: var(--aui-base-black);--aui-color-text: var(--_aui-fg);--aui-color-text-muted: color-mix(in oklch, var(--_aui-fg) 82%, var(--_aui-bg));--aui-color-background: var(--_aui-bg);--aui-color-background-hover: color-mix(in oklch, var(--_aui-bg) 92%, var(--_aui-fg));--aui-color-surface: color-mix(in oklch, var(--_aui-bg) 97%, var(--_aui-fg));--aui-color-border: color-mix(in oklch, var(--_aui-bg) 50%, var(--_aui-fg));--aui-color-primary: var(--aui-base-primary);--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 85%, var(--_aui-fg));--aui-color-focus-ring: var(--aui-base-primary);--aui-color-error: var(--aui-base-error);--aui-color-success: var(--aui-base-success)}@media(prefers-color-scheme:light){:root{--_aui-fg: var(--aui-base-black);--_aui-bg: var(--aui-base-white);--aui-color-primary: color-mix(in oklch, var(--aui-base-primary) 33%, var(--_aui-fg));--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 25%, var(--_aui-fg));--aui-color-focus-ring: color-mix(in oklch, var(--aui-base-primary) 33%, var(--_aui-fg));--aui-color-error: color-mix(in oklch, var(--aui-base-error) 33%, var(--_aui-fg));--aui-color-success: color-mix(in oklch, var(--aui-base-success) 33%, var(--_aui-fg))}}.aui-blue{--aui-base-primary: oklch(.78 .18 260)}.aui-purple{--aui-base-primary: oklch(.78 .18 300)}.aui-teal{--aui-base-primary: oklch(.78 .15 195)}.aui-red{--aui-base-primary: oklch(.78 .22 27)}.aui-orange{--aui-base-primary: oklch(.78 .18 55)}.aui-yellow{--aui-base-primary: oklch(.78 .18 95)}._button_4gn7y_1{padding:.5em 1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-primary);color:var(--aui-color-background);font:inherit;cursor:pointer}._button_4gn7y_1:hover{background:var(--aui-color-primary-hover)}._card_awzw5_1{display:grid;gap:.5em;padding:1em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-surface)}._field_17xwz_1{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em}._error_17xwz_12{grid-column:2}._form_jr324_1{display:grid;gap:1em}._actions_jr324_6{display:grid;grid-auto-flow:column;justify-content:start;gap:.5em}._status_jr324_13{margin:0;font-size:.875em;color:var(--aui-color-text-muted)}._field_7l9ux_1{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.5em}._label_7l9ux_8{padding-top:.25em}._required_7l9ux_12{color:var(--aui-color-error)}._error_7l9ux_16{grid-column:2}._nav_778nl_1{display:grid;gap:.5em}._title_778nl_6{font-weight:700}._wrapper_1mu6v_1{display:grid;grid-template-columns:1fr auto}._input_1mu6v_6{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}._toggle_1mu6v_13{padding:.375em .75em;border:1px solid var(--aui-color-border);border-top-right-radius:.25em;border-bottom-right-radius:.25em;background:var(--aui-color-background);color:var(--aui-color-text);font:inherit;font-size:.875em;cursor:pointer}._toggle_1mu6v_13:hover:not(:disabled){background:var(--aui-color-background-hover, var(--aui-color-background))}._fieldset_lymkd_1{border:none;padding:0}._legend_lymkd_6{font-weight:700;margin-bottom:.5em}._option_lymkd_11{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;margin-bottom:.25em}._section_4nogy_1{display:grid;gap:1em}._skip_xbsul_1{position:absolute;top:-100%;left:0;padding:.5em 1em;background:var(--aui-color-background);color:var(--aui-color-primary);z-index:1000}._skip_xbsul_1:focus{top:0}._table_dls60_1{width:100%;border-collapse:collapse}._caption_dls60_6{text-align:left;padding:.5em 0;font-weight:700}._table_dls60_1 th,._table_dls60_1 td{padding:.5em;text-align:left;border-bottom:1px solid var(--aui-color-border)}._table_dls60_1 th{font-weight:700;color:var(--aui-color-text)}._table_dls60_1 td{color:var(--aui-color-text)}._focus-ring_4u8pk_3:focus-visible{outline:2px solid var(--aui-color-focus-ring);outline-offset:2px}._disabled_4u8pk_8:disabled{opacity:.5;cursor:not-allowed}._text-input_4u8pk_13{padding:.375em .5em;border:1px solid var(--aui-color-border);border-radius:.25em;background:var(--aui-color-background);color:var(--aui-color-text);font:inherit}._link_4u8pk_22{color:var(--aui-color-primary);text-decoration:underline;cursor:pointer}._link_4u8pk_22:hover{color:var(--aui-color-primary-hover)}._check-input_4u8pk_32{accent-color:var(--aui-color-primary)}._field-error_4u8pk_36{margin:0;font-size:.875em;color:var(--aui-color-error)}._visually-hidden_4u8pk_42{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._wrapper_1kyv1_1{display:grid;gap:.25em}._textarea_1kyv1_6{resize:vertical}._counter_1kyv1_11{justify-self:end;font-size:.875em;color:var(--aui-color-text-muted)}._theme_1x47p_11{display:contents;--aui-color-text: var(--_aui-fg);--aui-color-text-muted: color-mix(in oklch, var(--_aui-fg) 82%, var(--_aui-bg));--aui-color-background: var(--_aui-bg);--aui-color-background-hover: color-mix(in oklch, var(--_aui-bg) 92%, var(--_aui-fg));--aui-color-surface: color-mix(in oklch, var(--_aui-bg) 97%, var(--_aui-fg));--aui-color-border: color-mix(in oklch, var(--_aui-bg) 50%, var(--_aui-fg));--aui-color-primary: var(--aui-base-primary);--aui-color-primary-hover: color-mix(in oklch, var(--aui-base-primary) 85%, var(--_aui-fg));--aui-color-focus-ring: var(--aui-base-primary);--aui-color-error: var(--aui-base-error);--aui-color-success: var(--aui-base-success)}
|