@7365admin1/layer-common 3.2.2-staging.131 → 3.2.2-staging.132

package/components/Button/Close.vue

@@ -1,6 +1,6 @@
 <template>
-    <v-btn v-if="!prop.iconOnly" text="Close" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
-    <v-btn v-else icon="mdi-close" size="small" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
+    <v-btn v-if="!prop.iconOnly" text="Close" variant="flat" class="screen-btn-ghost" :height="prop.height" @click="emit('click')" />
+    <v-btn v-else icon="mdi-close" variant="flat" size="small" class="screen-modal__close" :height="prop.height" @click="emit('click')" />
 </template>
 
 <script setup lang="ts">

package/components/Card/MemberInfoSummary.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card flat border="sm grey-lighten-2" color="grey-lighten-3" class="w-100">
+    <v-card flat class="w-100 member-summary">
         <v-card-text>
             <v-row no-gutters>
                 <v-col cols="10" no-gutters>
@@ -13,7 +13,7 @@
                     </v-row>
                 </v-col>
                 <v-col cols="2" class="d-flex align-center justify-center">
-                    <v-btn icon="mdi-trash-outline" size="small" color="red" @click="emit('remove')" />
+                    <v-btn class="member-summary__remove" icon="mdi-trash-outline" variant="text" size="small" @click="emit('remove')" />
                 </v-col>
             </v-row>
         </v-card-text>
@@ -45,4 +45,29 @@ const displayFields: Record<keyof TMemberInfo, string> = {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+ * Was `border="sm grey-lighten-2" color="grey-lighten-3"` - two LITERAL light
+ * greys, i.e. a pale slab with a pale frame drawn straight across the dark
+ * theme. The design draws an added-member row as an inset on the card it sits
+ * in, so it takes `--hover` (the neutral wash the chips and avatars use) on
+ * `--border`, at the inner radius.
+ *
+ * The remove action was `color="red"` - not a token, and a solid red circle the
+ * design never draws. It is the `--err` glyph the rest of the layer uses.
+ */
+.member-summary {
+    background: var(--hover);
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+    color: var(--text);
+}
+
+.member-summary :deep(.v-card-text) {
+    font-size: var(--fs-cell);
+}
+
+.member-summary__remove {
+    color: var(--err);
+}
+</style>

package/components/Card/Toggle.vue

@@ -1,7 +1,7 @@
 <template>
-    <v-card flat border="md black">
+    <v-card flat class="screen-card toggle-card">
         <v-card-text class="d-flex justify-space-between align-center py-0">
-            <p>{{ label }}</p>
+            <p class="toggle-card__label">{{ label }}</p>
             <v-switch v-model="toggle" :color="toggleColor" hide-details />
         </v-card-text>
     </v-card>
@@ -22,4 +22,16 @@ defineProps({
 const toggle = defineModel({default: false})
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+ * Was `border="md black"` - a 2px LITERAL black frame, which is a black box
+ * drawn across the dark theme. The design draws a settings row as the ordinary
+ * 1px card, so this is `.screen-card` plus the design's cell type on the label
+ * (Vuetify's `<p>` inherits the body size, not the design's).
+ */
+.toggle-card__label {
+    font-size: var(--fs-cell);
+    color: var(--text);
+    margin: 0;
+}
+</style>

package/components/ChecklistItemRow.vue

@@ -10,7 +10,7 @@
         "
         :disabled="readOnly"
         size="small"
-        class="me-2"
+        class="me-2 checklist-action"
         icon
         @click.stop="handleReject"
       >
@@ -27,6 +27,7 @@
         "
         :disabled="readOnly"
         size="small"
+        class="checklist-action"
         icon
         @click.stop="handleApprove"
       >
@@ -52,3 +53,26 @@ function handleApprove() {
   emit("approve", props.item);
 }
 </script>
+
+<style scoped>
+/*
+ * The reject/approve pair is the design's bordered icon square (`.screen-icon-btn`
+ * geometry) rather than Vuetify's pill: 36px, `--r-inner`, `--border`.
+ *
+ * `color="error"` / `color="success"` are LEFT ALONE - unlike `--success`/`--error`,
+ * which are not CSS tokens, Vuetify's `success`/`error` theme names are mapped in
+ * `utils/theme.ts` to the design's `ok`/`err`, so the chosen state already paints
+ * the right tone. Only the un-chosen (outlined) state was factory Vuetify.
+ */
+.checklist-action.v-btn {
+  width: var(--icon-btn);
+  height: var(--icon-btn);
+  min-width: var(--icon-btn);
+  border-radius: var(--r-inner);
+}
+
+.checklist-action.v-btn--variant-outlined {
+  border: 1px solid var(--border);
+  color: var(--text2);
+}
+</style>

package/components/LocalPagination.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="arrow-navigation">
-        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
+        <v-btn class="pager-arrow" icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
         <v-btn
-icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
+class="pager-arrow" icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
             @click="increment" />
     </div>
 </template>
@@ -28,4 +28,28 @@ const props = defineProps({
         default: 0
     }
 });
-</script>
+</script>
+
+<style scoped>
+/*
+ * The pager sits in EVERY converted table's toolbar (TableMain's `right`
+ * slot), so it was the last piece of factory Vuetify on an otherwise
+ * on-design card: Vuetify's own `on-surface` ink and its comfortable-density
+ * box. The design draws a toolbar arrow borderless - so this is ink, size and
+ * hover only, no border and no fill invented.
+ */
+.arrow-navigation :deep(.pager-arrow) {
+    width: var(--icon-btn);
+    height: var(--icon-btn);
+    border-radius: var(--r-inner);
+    color: var(--text2);
+}
+
+.arrow-navigation :deep(.pager-arrow:hover) {
+    background: var(--hover);
+}
+
+.arrow-navigation :deep(.pager-arrow.v-btn--disabled) {
+    color: var(--muted);
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.131",
+  "version": "3.2.2-staging.132",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",