@mythicalos/ui-core 0.1.1 → 0.1.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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/styles.css +13 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythicalos/ui-core",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "mythicalOS framework-agnostic UI core — the pure logic (class derivation, poll scheduling, dialog/toast/gauge helpers), the token-driven component stylesheet, and the <mythical-select> form-associated web component. Zero framework runtime; the Preact and React bindings derive identical output from this package. Apache-2.0.",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
package/styles.css CHANGED
@@ -74,16 +74,16 @@ a:focus-visible, .link:focus-visible, .is-focus {
74
74
  .input.is-err { border-color: var(--my-error); }
75
75
  .input:disabled, .input.is-disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
76
76
  .input.is-dirty { border-color: var(--my-accent); }
77
- .help { font-size: 11px; color: var(--my-muted); margin-top: 4px; }
78
- .emsg { font-size: 11px; color: var(--my-error); margin-top: 4px; display: flex; gap: 4px; align-items: center; }
77
+ .help { font-size: var(--my-fs-micro); color: var(--my-muted); margin-top: 4px; }
78
+ .emsg { font-size: var(--my-fs-micro); color: var(--my-error); margin-top: 4px; display: flex; gap: 4px; align-items: center; }
79
79
  .textarea { resize: vertical; min-height: 64px; }
80
80
  .readonly-input { background: var(--my-surface-hover); }
81
- .rep { font-size: 11px; font-weight: var(--my-fw-bold); color: var(--my-accent-strong); cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; }
81
+ .rep { font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); color: var(--my-accent-strong); cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; }
82
82
 
83
83
  .slot { display: flex; gap: var(--my-sp-2); align-items: center; }
84
84
  .slot .input { flex: 1; }
85
85
  .chip {
86
- font-size: 11px; font-weight: var(--my-fw-bold); border-radius: 99px;
86
+ font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); border-radius: var(--my-r-pill);
87
87
  padding: 3px 11px; background: var(--my-accent-soft); color: var(--my-accent-strong);
88
88
  white-space: nowrap;
89
89
  }
@@ -113,7 +113,7 @@ a:focus-visible, .link:focus-visible, .is-focus {
113
113
  .cb {
114
114
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--my-control-border); /* §1a-3 (checkbox reference) + §1a-12 (v0.5.4 rule 11) */
115
115
  background: var(--my-surface); display: inline-flex; align-items: center; justify-content: center;
116
- color: var(--my-surface); font-size: 11px; font-weight: var(--my-fw-bold); cursor: pointer; padding: 0; flex: none;
116
+ color: var(--my-surface); font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); cursor: pointer; padding: 0; flex: none;
117
117
  }
118
118
  .cb.is-on { background: var(--my-accent); border-color: var(--my-accent); }
119
119
  .cb.is-disabled { background: var(--my-disabled-bg); border-color: var(--my-border); color: var(--my-disabled-ink); cursor: not-allowed; }
@@ -121,13 +121,13 @@ a:focus-visible, .link:focus-visible, .is-focus {
121
121
 
122
122
  /* ── toasts (ds/components-toasts) — bottom-CENTER stack (§1a-10, design.md interaction rules) ── */
123
123
  .toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--my-sp-5); z-index: 50; display: flex; flex-direction: column-reverse; gap: 10px; max-width: 420px; }
124
- .toast { display: flex; gap: 10px; align-items: baseline; border-radius: 8px; padding: 11px 14px; font-size: 13px; animation: my-toast-in 180ms ease-out; }
124
+ .toast { display: flex; gap: 10px; align-items: baseline; border-radius: 8px; padding: 11px 14px; font-size: var(--my-fs-mono); animation: my-toast-in 180ms ease-out; }
125
125
  @keyframes my-toast-in { from { opacity: 0; transform: translateY(12px); } }
126
126
  @media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
127
- .toast .toast-icon { font-style: normal; font-size: 13px; font-weight: var(--my-fw-bold); flex: none; }
127
+ .toast .toast-icon { font-style: normal; font-size: var(--my-fs-mono); font-weight: var(--my-fw-bold); flex: none; }
128
128
  .toast b { font-weight: var(--my-fw-bold); }
129
- .toast .toast-action { font-weight: var(--my-fw-bold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; font-size: 13px; }
130
- .toast .toast-x { margin-left: auto; color: var(--my-muted); cursor: pointer; flex: none; font-size: 12px; background: none; border: 0; }
129
+ .toast .toast-action { font-weight: var(--my-fw-bold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; background: none; border: 0; font-family: inherit; font-size: var(--my-fs-mono); }
130
+ .toast .toast-x { margin-left: auto; color: var(--my-muted); cursor: pointer; flex: none; font-size: var(--my-fs-caption); background: none; border: 0; }
131
131
  .toast .toast-x:hover { color: var(--my-ink); }
132
132
  /* §1a-6 (as corrected by gate r4-adjIII): the canonical v0.5 toast is a border-LESS tone-colored
133
133
  soft fill (design.md "tone-colored soft fill + icon + message") — the v0.4 status borders were
@@ -140,13 +140,13 @@ a:focus-visible, .link:focus-visible, .is-focus {
140
140
  .toast--error .toast-icon, .toast--error .toast-action { color: var(--my-error); }
141
141
  .toast--info { background: var(--my-info-soft); }
142
142
  .toast--info .toast-icon, .toast--info .toast-action { color: var(--my-info); }
143
- .toast-more { font-size: 11px; color: var(--my-muted); text-align: center; }
143
+ .toast-more { font-size: var(--my-fs-micro); color: var(--my-muted); text-align: center; }
144
144
 
145
145
  /* ── dialogs (ds/components-dialogs) ─────────────────────────────────── */
146
146
  .scrim { position: fixed; inset: 0; background: var(--my-scrim); z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--my-sp-5); }
147
147
  .dlg { background: var(--my-surface); border-radius: var(--my-r-modal); box-shadow: var(--my-shadow-modal); padding: var(--my-sp-5); width: 400px; max-width: 100%; }
148
148
  .dlg h2 { font-size: var(--my-fs-h3); font-weight: var(--my-fw-bold); margin: 0 0 6px; }
149
- .dlg p { font-size: 13px; color: var(--my-muted); margin: 0 0 12px; }
149
+ .dlg p { font-size: var(--my-fs-mono); color: var(--my-muted); margin: 0 0 12px; }
150
150
  .dlg ul { list-style: none; font-size: 12.5px; margin: 0 0 4px; padding: 0; }
151
151
  .dlg li { padding: 5px 0; display: flex; gap: 9px; align-items: baseline; }
152
152
  .dlg li i { font-style: normal; flex: none; }
@@ -159,12 +159,12 @@ a:focus-visible, .link:focus-visible, .is-focus {
159
159
  danger-fill hover restyle — the hover keeps the rest fill (token addendum candidate, §9.5). */
160
160
  .danf:hover:not(:disabled) { background: var(--my-error); }
161
161
  .danf:disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
162
- .esc { font-size: 11px; color: var(--my-disabled-ink); margin-top: var(--my-sp-4); }
162
+ .esc { font-size: var(--my-fs-micro); color: var(--my-disabled-ink); margin-top: var(--my-sp-4); }
163
163
 
164
164
  /* ── empty states (ds/layouts-observability + book §7.10) ────────────── */
165
165
  .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--my-sp-8) var(--my-sp-5); text-align: center; }
166
166
  .empty h2 { font-size: var(--my-fs-h2); font-weight: var(--my-fw-bold); margin: var(--my-sp-4) 0 6px; }
167
- .empty p { font-size: 13px; color: var(--my-muted); max-width: 380px; margin: 0 0 var(--my-sp-4); }
167
+ .empty p { font-size: var(--my-fs-mono); color: var(--my-muted); max-width: 380px; margin: 0 0 var(--my-sp-4); }
168
168
  .ebtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
169
169
  /* §1a-8: the spine art rides package-owned tokenized classes — the gauge-block `gfill--nominal`
170
170
  and the literal #C9C3B6 strokes are replaced (empty-state row v1: segments = border, hollow /