@dnax/ui 0.0.46 → 0.0.48

package/components/QBtn.vue

@@ -39,9 +39,9 @@ interface Props {
   type?: "button" | "submit" | "reset"
   /** Rend un lien natif <a> */
   href?: string
-  /** Fond transparent, texte coloré */
+  /** Fond transparent, texte coloré. Gagne sur `outline` (designs exclusifs) */
   flat?: boolean
-  /** Fond transparent + bordure */
+  /** Fond transparent + bordure (ignoré si `flat`, cf. Quasar : le design `flat` retire aussi la bordure) */
   outline?: boolean
   /** Supprime l'ombre portée */
   unelevated?: boolean
@@ -110,8 +110,7 @@ const btnClasses = computed(() =>
     btnVariants({ size: sizeVariant.value }),
     isTokenColor(props.color) && `q-btn--${props.color}`,
     isTokenColor(props.textColor) && `q-btn--text-${props.textColor}`,
-    props.flat && "q-btn--flat",
-    props.outline && "q-btn--outline",
+    props.flat ? "q-btn--flat" : props.outline && "q-btn--outline",
     props.unelevated && "q-btn--unelevated",
     props.dense && "q-btn--dense",
     effectiveRadius.value === true && "q-btn--rounded",

package/components/QContainer.vue

@@ -9,7 +9,7 @@ interface Props {
   maxWidth?: string | number
   /** Supprime la largeur max (pleine largeur, padding conservé) */
   fluid?: boolean
-  /** Padding horizontal (défaut 16px) */
+  /** Padding horizontal (défaut 12px) */
   padding?: string
   /** Effet d'arrière-plan : "grid" | "aurora" | "star" | "falling-stars" | "flickering-grid" | "interactive-grid" | "wave" (vagues qui glissent) */
   backgroundEffect?:
@@ -57,7 +57,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   maxWidth: "1200px",
   fluid: false,
-  padding: "16px",
+  padding: "12px",
 })
 
 const IMG_FIT = new Set(["cover", "contain", "fill", "none", "scale-down"])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -320,10 +320,6 @@ body {
     --muted: #1c2128;
     --border: rgb(255 255 255 / 0.12);
     --q-table-border: rgb(255 255 255 / 0.12);
-    /* Opaque (4 % de blanc composé sur la surface) : un en-tête sticky ne doit pas
-       laisser voir les lignes qui défilent dessous. Fallback avant color-mix. */
-    --q-table-header-bg: #1f242b;
-    --q-table-header-bg: color-mix(in srgb, #fff 4%, var(--card, #161b22));
     --q-table-hover-bg: rgb(255 255 255 / 0.06);
     --q-sidebar-border: rgb(255 255 255 / 0.12);
     --q-translucent-bg: #0f1115;
@@ -3218,10 +3214,10 @@ html.dark body {
 /* ===== QTable ===== */
 .q-table {
   --q-table-border: rgb(0 0 0 / 0.1);
-  /* Opaque : 3 % de noir **composé sur la surface** (un en-tête sticky laissait
-     sinon voir les lignes qui défilent dessous). Fallback avant color-mix. */
-  --q-table-header-bg: #f7f7f7;
-  --q-table-header-bg: color-mix(in srgb, #000 3%, #fff);
+  /* En-tête : la MÊME surface que le tableau (blanc en clair, carte en sombre) — il se
+     distingue par sa bordure basse, pas par un fond grisé. Opaque par construction,
+     donc un en-tête collant ne laisse pas voir les lignes qui défilent dessous. */
+  --q-table-header-bg: var(--card, #fff);
   --q-table-hover-bg: rgb(0 0 0 / 0.04);
 
   position: relative;
@@ -3245,8 +3241,8 @@ html.dark body {
 
 .q-table--dark {
   --q-table-border: rgb(255 255 255 / 0.15);
-  --q-table-header-bg: #2b2b2b;
-  --q-table-header-bg: color-mix(in srgb, #fff 6%, #1d1d1d);
+  /* = la surface du tableau dans cette variante (cf. `background-color` ci-dessous) */
+  --q-table-header-bg: #1d1d1d;
   --q-table-hover-bg: rgb(255 255 255 / 0.06);
   background-color: #1d1d1d;
   color: #fff;
@@ -4449,11 +4445,15 @@ a.q-breadcrumbs__el:hover {
   transition: background-color 0.15s ease;
 }
 
-.q-sidebar__menu-button:hover {
+/* Hover : uniquement sur un item NON actif — sans le `:not(...)`, la règle `:hover`
+   (spécificité 0,2,0) écrasait l'état actif `.q-sidebar__menu-button--active`
+   (0,1,0) : au survol, le fond passait au gris et le texte blanc du primaire devenait
+   illisible. Un item actif garde donc son apparence au survol. */
+.q-sidebar__menu-button:hover:not(.q-sidebar__menu-button--active) {
   background-color: rgb(0 0 0 / 0.05);
 }
 
-.q-sidebar--dark .q-sidebar__menu-button:hover {
+.q-sidebar--dark .q-sidebar__menu-button:hover:not(.q-sidebar__menu-button--active) {
   background-color: rgb(255 255 255 / 0.08);
 }
 
@@ -7311,7 +7311,7 @@ a.q-breadcrumbs__el:hover {
   width: 100%;
   max-width: var(--q-container-max, 1200px);
   margin-inline: auto;
-  padding-inline: var(--q-container-pad, 16px);
+  padding-inline: var(--q-container-pad, 12px);
 }
 
 .q-container--fluid {
@@ -9146,11 +9146,14 @@ a.q-breadcrumbs__el:hover {
   width: 17px;
   height: 17px;
 }
-.q-tiptap__tool:hover:not(:disabled) {
+/* Hover : jamais sur un bouton actif (même règle que QSidebarMenuButton — sans le
+   `:not(...)`, `:hover` (0,2,0) écrasait `.q-tiptap__tool--active` (0,1,0) : le bouton
+   actif perdait son fond et sa couleur primaire au survol). */
+.q-tiptap__tool:hover:not(:disabled):not(.q-tiptap__tool--active) {
   background-color: rgb(0 0 0 / 0.06);
   color: var(--q-tiptap-text);
 }
-.dark .q-tiptap__tool:hover:not(:disabled) {
+.dark .q-tiptap__tool:hover:not(:disabled):not(.q-tiptap__tool--active) {
   background-color: rgb(255 255 255 / 0.08);
 }
 .q-tiptap__tool--active {
@@ -9505,11 +9508,12 @@ a.q-breadcrumbs__el:hover {
   width: 15px;
   height: 15px;
 }
-.q-tiptap__bubble-btn:hover:not(:disabled) {
+/* Idem : un bouton de bulle actif garde son apparence au survol */
+.q-tiptap__bubble-btn:hover:not(:disabled):not(.q-tiptap__bubble-btn--active) {
   background-color: rgb(0 0 0 / 0.06);
   color: var(--q-tiptap-text);
 }
-.dark .q-tiptap__bubble-btn:hover:not(:disabled) {
+.dark .q-tiptap__bubble-btn:hover:not(:disabled):not(.q-tiptap__bubble-btn--active) {
   background-color: rgb(255 255 255 / 0.08);
 }
 .q-tiptap__bubble-btn--active {