@softize/opus 29.0.0 → 31.0.0

package/src/ui/theme.css

@@ -15,8 +15,8 @@
  *    utilitários `rounded-*` — neutraliza o rename do v4 e mantém a escala monotônica.
  * 4. Escala shadow-* recomposta diretamente em duas camadas claras, difusas e com spread
  *    negativo — preserva inclusive modifiers como `shadow-lg/30` (ver docs/elevation-scale.md).
- * 5. Bordas mais leves no light: --border/--input em 92.5% (upstream 89.8%) — par do
- *    canvas quase-branco; superfícies elevadas usam a mesma borda real dos demais papéis.
+ * 5. Bordas mais leves no light: --border/--input em 92% (upstream 89.8%) — par do
+ *    canvas branco; superfícies elevadas usam a mesma borda real dos demais papéis.
  * 6. Radius base em 0.75rem — identidade mais arredondada; os componentes continuam usando
  *    diretamente a escala Tailwind, sem tokens por papel (ver docs/radius-scale.md).
  * Tudo o mais (semânticas e contratos das primitives) segue o upstream.
@@ -62,9 +62,9 @@
   --appearance-layer-contrast: var(--appearance-light-layer-contrast);
 
   /* Escala neutra derivada (luminosidade em número, 0 a 100). No claro a superfície elevada
-     parte do branco; o canvas desce dela conforme o contraste entre camadas e o controle fica
-     entre os dois. Estados neutros, muted e bordas descem a partir do canvas — a superfície
-     mais escura — na direção do texto, em passos que o contraste amplia. O texto secundário
+     parte do branco; canvas e controle também são brancos no preset. O contraste entre camadas
+     separa esses papéis. Estados neutros, muted e bordas preservam a base de calibração anterior,
+     um ponto abaixo do canvas, e avançam na direção do texto em passos que o contraste amplia. O texto secundário
      recebe só uma fração da saturação e escurece junto com as superfícies e com a intensidade,
      para que nem o ajuste nem o matiz escolhido pelo app reduzam a leitura. */
   --neutral-saturation: calc(var(--appearance-color-intensity) * 0.2%);
@@ -72,18 +72,18 @@
   --neutral-step: calc(1 + var(--appearance-contrast) * 0.01);
   --neutral-layer-l: calc(95 + var(--appearance-surface-brightness) * 0.05);
   --neutral-canvas-l: calc(
-    var(--neutral-layer-l) - 2.5 - var(--appearance-layer-contrast) * 0.025
+    var(--neutral-layer-l) - var(--appearance-layer-contrast) * 0.025
   );
   --neutral-control-l: calc(
-    var(--neutral-canvas-l) + 1 + var(--appearance-layer-contrast) * 0.01
+    var(--neutral-canvas-l) + var(--appearance-layer-contrast) * 0.01
   );
-  --neutral-muted-l: calc(var(--neutral-canvas-l) - 1.4 * var(--neutral-step));
-  --neutral-hover-l: calc(var(--neutral-canvas-l) - 2 * var(--neutral-step));
-  --neutral-selected-l: calc(var(--neutral-canvas-l) - 5 * var(--neutral-step));
+  --neutral-muted-l: calc(var(--neutral-canvas-l) - 1 - 2.5 * var(--neutral-step));
+  --neutral-hover-l: calc(var(--neutral-canvas-l) - 1 - 3.3 * var(--neutral-step));
+  --neutral-selected-l: calc(var(--neutral-canvas-l) - 1 - 5 * var(--neutral-step));
   --neutral-pressed-l: calc(
-    var(--neutral-canvas-l) - 6.5 * var(--neutral-step)
+    var(--neutral-canvas-l) - 1 - 8 * var(--neutral-step)
   );
-  --neutral-line-l: calc(var(--neutral-canvas-l) - 5 * var(--neutral-step));
+  --neutral-line-l: calc(var(--neutral-canvas-l) - 1 - 7 * var(--neutral-step));
   --neutral-ring-l: calc(var(--neutral-line-l) - 6.5 * var(--neutral-step));
   --neutral-muted-foreground-l: calc(
     45.1 - (96.1 - var(--neutral-muted-l)) * 0.8 -
@@ -136,6 +136,11 @@
     var(--neutral-hue) var(--neutral-text-saturation)
       calc(var(--neutral-muted-foreground-l) * 1%)
   );
+  --sidebar-global: var(--background);
+  --sidebar: hsl(
+    var(--neutral-hue) var(--neutral-saturation)
+      calc((var(--neutral-canvas-l) - 1) * 1%)
+  );
   --accent: var(--interaction-hover);
   --accent-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 9%);
   --destructive: hsl(0 84.2% 60.2%);
@@ -212,7 +217,7 @@
   --appearance-surface-brightness: var(--appearance-dark-surface-brightness);
   --appearance-layer-contrast: var(--appearance-dark-layer-contrast);
 
-  /* No escuro o brilho leva o canvas do preto, em 0, até um escuro suave, em 100. Elevação com
+  /* No escuro o brilho move o canvas em uma faixa escura. Elevação com
      contraste de verdade (dialog e card "sobem" da página): a camada sobe do canvas conforme o
      contraste entre camadas e o controle fica entre os dois. Estados neutros, muted e bordas
      sobem a partir da camada — a superfície mais clara — na direção do texto. Mesmos papéis do
@@ -221,20 +226,22 @@
   --neutral-saturation: calc(var(--appearance-color-intensity) * 0.2%);
   --neutral-text-saturation: calc(var(--appearance-color-intensity) * 0.08%);
   --neutral-step: calc(1 + var(--appearance-contrast) * 0.006);
-  --neutral-canvas-l: calc(var(--appearance-surface-brightness) * 0.078);
+  /* Redução proporcional aplicada uma vez às superfícies e linhas, sem escurecer o texto. */
+  --neutral-surface-scale: 0.95;
+  --neutral-canvas-l: calc(5.5 + var(--appearance-surface-brightness) * 0.078);
   --neutral-layer-l: calc(
-    var(--neutral-canvas-l) + 6.1 + var(--appearance-layer-contrast) * 0.03
+    var(--neutral-canvas-l) + 2 + var(--appearance-layer-contrast) * 0.03
   );
   --neutral-control-l: calc(
-    var(--neutral-canvas-l) + 3.8 + var(--appearance-layer-contrast) * 0.018
+    var(--neutral-canvas-l) + 1 + var(--appearance-layer-contrast) * 0.018
   );
-  --neutral-muted-l: calc(var(--neutral-layer-l) + 4.9 * var(--neutral-step));
-  --neutral-hover-l: calc(var(--neutral-layer-l) + 4.9 * var(--neutral-step));
+  --neutral-muted-l: calc(var(--neutral-layer-l) + 3.5 * var(--neutral-step));
+  --neutral-hover-l: calc(var(--neutral-layer-l) + 5.5 * var(--neutral-step));
   --neutral-selected-l: calc(
-    var(--neutral-layer-l) + 8.5 * var(--neutral-step)
+    var(--neutral-layer-l) + 7.1 * var(--neutral-step)
   );
-  --neutral-pressed-l: calc(var(--neutral-layer-l) + 11 * var(--neutral-step));
-  --neutral-line-l: calc(var(--neutral-layer-l) + 6.5 * var(--neutral-step));
+  --neutral-pressed-l: calc(var(--neutral-layer-l) + 9.6 * var(--neutral-step));
+  --neutral-line-l: calc(var(--neutral-layer-l) + 9.6 * var(--neutral-step));
   --neutral-ring-l: calc(var(--neutral-line-l) + 19.5 * var(--neutral-step));
   --neutral-muted-foreground-l: calc(
     63.9 + max(0, var(--neutral-muted-l) - 14.9) * 1.6 +
@@ -243,50 +250,52 @@
 
   --background: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-canvas-l) * 1%)
+      calc(var(--neutral-canvas-l) * var(--neutral-surface-scale) * 1%)
   );
   --foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   --card: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-layer-l) * 1%)
+      calc(var(--neutral-layer-l) * var(--neutral-surface-scale) * 1%)
   );
   --card-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   --control: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-control-l) * 1%)
+      calc(var(--neutral-control-l) * var(--neutral-surface-scale) * 1%)
   );
   --interaction-hover: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-hover-l) * 1%)
+      calc(var(--neutral-hover-l) * var(--neutral-surface-scale) * 1%)
   );
   --interaction-selected: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-selected-l) * 1%)
+      calc(var(--neutral-selected-l) * var(--neutral-surface-scale) * 1%)
   );
   --interaction-pressed: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-pressed-l) * 1%)
+      calc(var(--neutral-pressed-l) * var(--neutral-surface-scale) * 1%)
   );
   --popover: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-layer-l) * 1%)
+      calc(var(--neutral-layer-l) * var(--neutral-surface-scale) * 1%)
   );
   --popover-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   --primary: hsl(0 0% 98%);
   --primary-foreground: hsl(0 0% 9%);
   --secondary: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-muted-l) * 1%)
+      calc(var(--neutral-muted-l) * var(--neutral-surface-scale) * 1%)
   );
   --secondary-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   --muted: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-muted-l) * 1%)
+      calc(var(--neutral-muted-l) * var(--neutral-surface-scale) * 1%)
   );
   --muted-foreground: hsl(
     var(--neutral-hue) var(--neutral-text-saturation)
       calc(var(--neutral-muted-foreground-l) * 1%)
   );
+  --sidebar-global: var(--background);
+  --sidebar: var(--card);
   --accent: var(--interaction-hover);
   --accent-foreground: hsl(var(--neutral-hue) var(--neutral-saturation) 98%);
   /* Vermelho CLARO no escuro (era 30.6% — calibrado só pra FUNDO, com texto branco).
@@ -302,15 +311,15 @@
   --context-danger-emphasis: hsl(0 91% 71%);
   --border: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-line-l) * 1%)
+      calc(var(--neutral-line-l) * var(--neutral-surface-scale) * 1%)
   );
   --input: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-line-l) * 1%)
+      calc(var(--neutral-line-l) * var(--neutral-surface-scale) * 1%)
   );
   --ring: hsl(
     var(--neutral-hue) var(--neutral-saturation)
-      calc(var(--neutral-ring-l) * 1%)
+      calc(var(--neutral-ring-l) * var(--neutral-surface-scale) * 1%)
   );
 }
 
@@ -346,6 +355,8 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-control: var(--control);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-global: var(--sidebar-global);
   --color-interaction-hover: var(--interaction-hover);
   --color-interaction-selected: var(--interaction-selected);
   --color-interaction-pressed: var(--interaction-pressed);