@saasicat/ui-vue 0.24.1 → 0.24.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "description": "Vue 3 components, resource clients and composables for the SuperAdmin UI shell. Provides boot and manifest loaders, navigation, actions and standard pages.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.24.1"
+    "@saasicat/types": "^0.24.2"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",

package/src/components/bundle-editor/BundleFeaturesEditor.vue

@@ -208,7 +208,12 @@ function onToggle(featureKey: string): void {
     margin-left: 4px;
 }
 .bd-feature-pill.on .bd-feature-key {
-    color: var(--sa-color-accent);
+    /* `-strong`, not the bare accent: the pill's `on` surface is a 24 % tint of
+     * blue over the dark card, and the brand does not change between themes —
+     * 2.92:1 there. The selected states around this one were moved to
+     * `-strong` already; this descendant was missed because it sets a colour
+     * and no background, which is a shape no contrast check reads. */
+    color: var(--sa-color-accent-strong);
 }
 .bd-feature-pill.overlap .bd-feature-key {
     color: var(--sa-color-negative-fg);

package/src/components/dialogs/PilotCreateDialog.vue

@@ -170,7 +170,7 @@
                                 >
                                     <span
                                         class="pl-plan-opt__dot"
-                                        :style="{ background: p.color ?? '#94a3b8' }"
+                                        :style="{ background: p.color ?? IDENTITY_NEUTRAL }"
                                     />
                                     <div class="pl-plan-opt__text">
                                         <span class="pl-plan-opt__key">{{ p.value }}</span>
@@ -263,6 +263,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import MfaPromptDialog from '../MfaPromptDialog.vue';
+import { IDENTITY_NEUTRAL } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PilotCopy, PilotCreatePayload, PilotCreateResult } from './types.js';

package/src/components/dialogs/PilotEditDialog.vue

@@ -46,7 +46,7 @@
                         >
                             <span
                                 class="pl-plan-opt__dot"
-                                :style="{ background: p.color ?? '#94a3b8' }"
+                                :style="{ background: p.color ?? IDENTITY_NEUTRAL }"
                             />
                             <div class="pl-plan-opt__text">
                                 <span class="pl-plan-opt__key">{{ p.value }}</span>
@@ -148,6 +148,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import MfaPromptDialog from '../MfaPromptDialog.vue';
+import { IDENTITY_NEUTRAL } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PilotRow } from '../../pages-standard/PilotsPage.vue';

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -85,7 +85,10 @@
                     :style="planChipStyle(p)"
                     @click="togglePlan(p.key)"
                 >
-                    <span class="pc-plan-opt__mark" :style="{ background: p.color ?? '#64748b' }" />
+                    <span
+                        class="pc-plan-opt__mark"
+                        :style="{ background: p.color ?? IDENTITY_NEUTRAL }"
+                    />
                     {{ p.label }}
                 </button>
             </div>
@@ -265,7 +268,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { identityChipStyle } from '../../client/identity-accents.js';
+import { IDENTITY_NEUTRAL, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PromoCodeDurationType, PromoCodePlanOption, PromoCodeValueType } from './types.js';

package/src/components/plan-detail/PlanDetail.vue

@@ -825,23 +825,61 @@ async function executeTerminate(): Promise<void> {
     );
     border-color: var(--sa-color-border);
 }
+/* The marker block at the head of a diff row.
+ *
+ * Every rule below carries BOTH halves of its pair, and that is deliberate:
+ * the geometry used to live here and the background one rule further down,
+ * which made neither rule judgeable on its own. `theme-role-contrast` needs a
+ * background and a colour in the same body to measure anything, so the split
+ * hid `--sa-color-fg-on-accent` on `--sa-color-positive-strong` — white on
+ * green-500, 2.54:1, in BOTH themes — for as long as the component existed.
+ *
+ * A tint plus the tone's `-fg`, not a solid plus white: `-strong` is the rung
+ * chosen to read as a COLOUR against its theme's surface, which puts it in the
+ * middle of the lightness range — and nothing reads on the middle. That is
+ * what `<tone>-fg` and `-surface-strong` are for. */
 .pd-diff-icon {
     width: 32px;
     align-self: stretch;
     display: grid;
     place-items: center;
     flex: 0 0 32px;
-    color: var(--sa-color-fg-on-accent);
+    background: var(--sa-color-bg-sunken);
+    color: var(--sa-color-fg-body);
     font: 700 var(--sa-text-lg) var(--sa-font-body);
 }
 .pd-diff-row.add .pd-diff-icon {
-    background: var(--sa-color-positive-strong);
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .pd-diff-row.rm .pd-diff-icon {
-    background: var(--sa-color-negative-strong);
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
 }
+/* Unchanged, and deliberately not brought into line with the two above: it was
+ * already readable (14.6:1) and `--sa-color-bg-sunken` is what the `mod` row
+ * itself starts its gradient with, so a neutral tint here would leave the
+ * marker with almost nothing to stand against in the light theme. It only
+ * gains the foreground it was already inheriting, so the rule can be read. */
 .pd-diff-row.mod .pd-diff-icon {
     background: var(--sa-color-inverse-surface);
+    color: var(--sa-color-inverse-fg);
+}
+/* The single-version listing marks WHAT a row is rather than what changed, so
+ * it reads the catalogue-entity roles. These three were the last colour
+ * literals in a template: `style="background: #f59e0b"` and friends, painted
+ * white by the base rule above at 2.15:1, 2.77:1 and 4.23:1. */
+.pd-diff-row.plain .pd-diff-icon.feature {
+    background: var(--sa-color-feature-surface);
+    color: var(--sa-color-feature-fg);
+}
+.pd-diff-row.plain .pd-diff-icon.quota {
+    background: var(--sa-color-quota-surface);
+    color: var(--sa-color-quota-fg);
+}
+.pd-diff-row.plain .pd-diff-icon.bundle {
+    background: var(--sa-color-bundle-surface);
+    color: var(--sa-color-bundle-fg);
 }
 .pd-diff-body {
     flex: 1;

package/src/components/plan-detail/PlanVersionDiffPanel.vue

@@ -66,7 +66,7 @@
                     :key="'cf-' + f"
                     class="pd-diff-row plain"
                 >
-                    <div class="pd-diff-icon" style="background: #8b5cf6">·</div>
+                    <div class="pd-diff-icon feature">·</div>
                     <div class="pd-diff-body">
                         <span class="pd-diff-label">{{ featureLabel(f) }}</span>
                         <code class="pd-diff-key">{{ f }}</code>
@@ -88,7 +88,7 @@
                     :key="'cq-' + k"
                     class="pd-diff-row plain"
                 >
-                    <div class="pd-diff-icon" style="background: #0ea5e9">·</div>
+                    <div class="pd-diff-icon quota">·</div>
                     <div class="pd-diff-body">
                         <span class="pd-diff-label">{{ quotaLabel(k) }}</span>
                         <code class="pd-diff-key">{{ k }}</code>
@@ -111,7 +111,7 @@
                     :key="'cb-' + b"
                     class="pd-diff-row plain"
                 >
-                    <div class="pd-diff-icon" style="background: #f59e0b">·</div>
+                    <div class="pd-diff-icon bundle">·</div>
                     <div class="pd-diff-body">
                         <span class="pd-diff-label">{{ bundleLabel(b) }}</span>
                         <code class="pd-diff-key">{{ b }}</code>

package/src/components/plan-version-editor/PlanCatalogPreview.vue

@@ -25,9 +25,13 @@
 
         <div class="pve-prev-window" :class="`pve-prev-window--${previewMode}`">
             <div class="pve-prev-chrome">
-                <span class="pve-prev-dot" style="background: #ef4444" />
-                <span class="pve-prev-dot" style="background: #f59e0b" />
-                <span class="pve-prev-dot" style="background: #10b981" />
+                <!-- The same window controls as MarketingCatalogPreview, drawn
+                     a second time, and the same reason for the `-strong`
+                     rungs. The chrome itself is duplicated markup and belongs
+                     in one component; that is a Phase 4 job, not a colour one. -->
+                <span class="pve-prev-dot" style="background: var(--sa-color-negative-strong)" />
+                <span class="pve-prev-dot" style="background: var(--sa-color-warning-strong)" />
+                <span class="pve-prev-dot" style="background: var(--sa-color-positive-strong)" />
                 <div class="pve-prev-url">{{ catalogUrl }}</div>
             </div>
             <div class="pve-prev-body">

package/src/pages-standard/MarketingCatalogPage.vue

@@ -1724,8 +1724,13 @@ async function onLocaleChange(loc: string): Promise<void> {
         color 0.12s;
 }
 .sa-marketing-tf-chip em {
+    /* No colour of its own — the mono face and the smaller step already set it
+     * apart from the chip's label, and a colour here does not follow the chip.
+     * `--sa-color-fg-subtle` stayed put when :hover moved the chip's surface to
+     * a 22 % accent tint, which measured 2.92:1 in the dark theme: a foreground
+     * declared without the background it will end up on is a pair nothing can
+     * check, and this one was wrong in exactly the state nobody screenshots. */
     font-style: normal;
-    color: var(--sa-color-fg-subtle);
     font: 500 var(--sa-text-xs) var(--sa-font-mono);
 }
 .sa-marketing-tf-chip:hover:not(:disabled) {

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -1,9 +1,23 @@
 <template>
     <div class="sa-marketing-window">
         <div class="sa-marketing-chrome">
-            <span class="sa-marketing-chrome-dot" style="background: #ef4444" />
-            <span class="sa-marketing-chrome-dot" style="background: #f59e0b" />
-            <span class="sa-marketing-chrome-dot" style="background: #10b981" />
+            <!-- The window controls of the browser this mock-up draws. Their hue
+                 is fixed by what they depict rather than by what they mean, and
+                 the `-strong` rungs are exactly that hue — the three replaced
+                 the same three literals byte for byte. Only the amber differs
+                 between themes, and it lifts one rung in the dark one. -->
+            <span
+                class="sa-marketing-chrome-dot"
+                style="background: var(--sa-color-negative-strong)"
+            />
+            <span
+                class="sa-marketing-chrome-dot"
+                style="background: var(--sa-color-warning-strong)"
+            />
+            <span
+                class="sa-marketing-chrome-dot"
+                style="background: var(--sa-color-positive-strong)"
+            />
             <div class="sa-marketing-chrome-url">{{ previewUrl }}</div>
         </div>
         <div class="sa-marketing-canvas">

package/src/ui/theme/tokens.semantic.dark.css

@@ -120,9 +120,11 @@ body.body--dark {
     --sa-color-feature-fg: var(--sa-violet-200);
     --sa-color-feature-surface: color-mix(in srgb, var(--sa-violet-500) 16%, transparent);
     --sa-color-quota: var(--sa-sky-500);
+    --sa-color-quota-fg: var(--sa-sky-200);
     --sa-color-quota-surface: color-mix(in srgb, var(--sa-sky-500) 16%, transparent);
     --sa-color-quota-border: color-mix(in srgb, var(--sa-sky-500) 36%, transparent);
     --sa-color-bundle: var(--sa-amber-500);
+    --sa-color-bundle-fg: var(--sa-amber-200);
     --sa-color-bundle-surface: color-mix(in srgb, var(--sa-amber-500) 16%, transparent);
 
     /* The identity ramp, one rung lighter throughout — see the light file for

package/src/ui/theme/tokens.semantic.light.css

@@ -141,16 +141,25 @@
     --sa-color-scheduled-surface-strong: var(--sa-indigo-100);
     --sa-color-scheduled-border: var(--sa-indigo-200);
 
-    /* ── Catalogue entities. Not statuses: these two say WHAT a row is, and
+    /* ── Catalogue entities. Not statuses: these three say WHAT a row is, and
      * the plan editor, the matrix, the review and the discovery page all need
-     * to agree, or the same dot means two things on two screens. ────────── */
+     * to agree, or the same dot means two things on two screens.
+     *
+     * Each one has the same three slots a status tone has: the colour itself,
+     * a tinted SURFACE, and an `-fg` that is readable on that surface. Only
+     * `feature` had the third, and the two that were missing are why a diff
+     * marker painted white on `--sa-sky-500` (2.77:1) and on `--sa-amber-500`
+     * (2.15:1): with no role to point at, the panel reached past the layer for
+     * the primitive and wrote it into the template. ───────────────────────── */
     --sa-color-feature: var(--sa-violet-500);
     --sa-color-feature-fg: var(--sa-violet-700);
     --sa-color-feature-surface: var(--sa-violet-50);
     --sa-color-quota: var(--sa-sky-500);
+    --sa-color-quota-fg: var(--sa-sky-700);
     --sa-color-quota-surface: var(--sa-sky-50);
     --sa-color-quota-border: var(--sa-sky-200);
     --sa-color-bundle: var(--sa-amber-500);
+    --sa-color-bundle-fg: var(--sa-amber-700);
     --sa-color-bundle-surface: var(--sa-amber-100);
 
     /* ── Identity. A CATEGORICAL ramp: the only job of these seven is to be