contain-css-svelte 1.4.1 → 1.4.3

package/dist/vars/affordances.css

@@ -43,7 +43,10 @@
   --checkbox-transition: 400ms;
   --checked-weight: var(--bold);
   --grab-bar-hover-base-color-percentage: 88%;
-  --grab-bar-hover-color-mix: var(--hover-color-mix, white);
+  --grab-bar-hover-color-mix: var(
+    --hover-color-mix,
+    var(--grab-bar-fg, var(--sidebar-fg, var(--fg)))
+  );
   --grab-bar-active-base-color-percentage: 80%;
   --grab-bar-active-color-mix: var(--active-color-mix, black);
   --grab-bar-shadow-color: color-mix(
@@ -52,14 +55,14 @@
     transparent
   );
   --grab-bar-hover-bg: color-mix(
-    in oklch,
+    in oklab,
     var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
       var(--grab-bar-hover-base-color-percentage, 88%),
     var(--grab-bar-hover-color-mix, white)
       calc(100% - var(--grab-bar-hover-base-color-percentage, 88%))
   );
   --grab-bar-active-bg: color-mix(
-    in oklch,
+    in oklab,
     var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
       var(--grab-bar-active-base-color-percentage, 80%),
     var(--grab-bar-active-color-mix, black)
@@ -81,7 +84,9 @@
   --scrollbar-track-bg: transparent;
 
   --hover-base-color-percentage: 90%;
-  --hover-color-mix: white;
+  /* --hover-color-mix is deliberately unset: hovers mix toward each
+     element's own text color (see clickable-hover-affordance). Set it to
+     force one direction, e.g. black. */
   --active-base-color-percentage: 90%;
   --active-color-mix: black;
   --disabled-base-color-percentage: 50%;

package/dist/vars/code.css

@@ -4,4 +4,16 @@
   --code-tab-size: 4;
   --code-width: min(75em, 100%);
   --code-height: auto;
+  /* Token backgrounds must be explicit: each token's color-props chain ends
+     with no fallback, and an unset custom property inherits, so without these
+     an ancestor's --bg would paint behind every token. Themes that style
+     tokens already set these; this covers themes that don't. */
+  --code-comment-bg: transparent;
+  --code-string-bg: transparent;
+  --code-keyword-bg: transparent;
+  --code-attr-name-bg: transparent;
+  --code-tag-bg: transparent;
+  --code-function-bg: transparent;
+  --code-variable-bg: transparent;
+  --code-operator-bg: transparent;
 }

package/dist/vars/colors.css

@@ -3,16 +3,24 @@
   --muted-text-amount: 20%;
   --white: #fff;
   --black: #222;
-  --primary-bg: var(--material-color-blue-600);
-  --primary-color: var(--material-color-blue-600);
+  --primary-bg: var(--material-color-indigo-600);
+  --primary-color: var(--material-color-indigo-600);
   --primary-fg: var(--white);
-  --secondary-bg: var(--material-color-blue-grey-100);
-  --secondary-color: var(--material-color-blue-grey-100);
-  --secondary-fg: var(--material-color-grey-900);
+  --secondary-bg: var(--material-color-indigo-50);
+  --secondary-color: var(--material-color-indigo-50);
+  --secondary-fg: var(--material-color-indigo-900);
   --inactive-bg: var(--material-color-grey-400);
   --inactive-fg: var(--material-color-grey-900);
 
-  /* Fallback colors - themes can override these */
+  /* Fallback colors - themes can override these.
+
+     Neutral on purpose: this file is the base every theme (and every app
+     with no theme at all) inherits before anything else runs, so a tint
+     here reaches apps that never asked for it. A theme that wants a
+     particular cast -- indigo, warm, whatever -- sets --bg/--fg itself
+     (see themes/light.css); --border-color below already derives from
+     whatever --bg/--fg a theme (or an app) actually provides, so a themed
+     app gets a themed border for free without this file picking a hue. */
   --bg: var(--material-color-grey-50);
   --fg: var(--material-color-grey-900);
 
@@ -23,21 +31,26 @@
     var(--menu-fg, var(--fg)) 6%
   );
   --shadow-color: color-mix(in srgb, var(--fg) 10%, rgba(34, 34, 34, 0.2));
-  --border-color: var(--fg);
-  --warning-bg: var(--material-color-orange-600);
-  --warning-color: var(--material-color-orange-600);
-  --warning-fg: var(--white);
+  /* Derived from the page pair rather than hard-coded, so a theme that only
+     sets --bg/--fg (light or dark) still gets a visible but quiet border. */
+  --border-color: color-mix(in oklab, var(--fg) 35%, var(--bg));
+  /* Semantic pairs meet WCAG AA (4.5:1) for button-sized text. Warning is
+     amber with dark text: no orange dark enough for white text still reads
+     as "warning" rather than "danger". */
+  --warning-bg: var(--material-color-amber-400);
+  --warning-color: var(--material-color-amber-400);
+  --warning-fg: var(--material-color-grey-900);
   --warning-text-transform: uppercase;
 
   /* Semantic color variants */
-  --danger-bg: var(--material-color-red-600);
-  --danger-color: var(--material-color-red-600);
+  --danger-bg: var(--material-color-red-700);
+  --danger-color: var(--material-color-red-700);
   --danger-fg: var(--white);
-  --success-bg: var(--material-color-green-600);
-  --success-color: var(--material-color-green-600);
+  --success-bg: var(--material-color-green-800);
+  --success-color: var(--material-color-green-800);
   --success-fg: var(--white);
-  --info-bg: var(--material-color-light-blue-600);
-  --info-color: var(--material-color-light-blue-600);
+  --info-bg: var(--material-color-light-blue-800);
+  --info-color: var(--material-color-light-blue-800);
   --info-fg: var(--white);
 
   --surface-bg: var(--bg);
@@ -48,7 +61,12 @@
      affordances.css. The color-props(menu-item, menu, button, control) chain
      resolves it to --menu-bg / --bg at the element, keeping per-instance
      --menu-bg overrides working. */
-  --focus-color: var(--material-color-blue-a400);
+  /* --focus-color intentionally not defaulted here either: both consumers
+     (_affordances.scss's outline rule, Tag's close-button outline) already
+     fall back to the browser's own focus ring / currentColor when it's
+     unset, which is exactly the neutral behavior an un-themed app should
+     get. A theme that wants a specific ring sets --focus-color itself
+     (see themes/light.css, themes/material.css, themes/purple.css). */
   --tooltip-border: none;
 }
 
@@ -59,7 +77,10 @@ body {
 
 a {
   background-color: var(--link-bg, transparent);
-  color: var(--link-fg, var(--material-color-blue-a400));
+  /* Same reasoning as --surface-link-fg above: derive from the theme's own
+     --primary-bg (always defined, even for an app with no theme at all)
+     rather than hard-coding a hue here too. */
+  color: var(--link-fg, var(--primary-bg));
 }
 
 /* Color definitions */

package/dist/vars/defaults.css

@@ -297,16 +297,24 @@
   --muted-text-amount: 20%;
   --white: #fff;
   --black: #222;
-  --primary-bg: var(--material-color-blue-600);
-  --primary-color: var(--material-color-blue-600);
+  --primary-bg: var(--material-color-indigo-600);
+  --primary-color: var(--material-color-indigo-600);
   --primary-fg: var(--white);
-  --secondary-bg: var(--material-color-blue-grey-100);
-  --secondary-color: var(--material-color-blue-grey-100);
-  --secondary-fg: var(--material-color-grey-900);
+  --secondary-bg: var(--material-color-indigo-50);
+  --secondary-color: var(--material-color-indigo-50);
+  --secondary-fg: var(--material-color-indigo-900);
   --inactive-bg: var(--material-color-grey-400);
   --inactive-fg: var(--material-color-grey-900);
 
-  /* Fallback colors - themes can override these */
+  /* Fallback colors - themes can override these.
+
+     Neutral on purpose: this file is the base every theme (and every app
+     with no theme at all) inherits before anything else runs, so a tint
+     here reaches apps that never asked for it. A theme that wants a
+     particular cast -- indigo, warm, whatever -- sets --bg/--fg itself
+     (see themes/light.css); --border-color below already derives from
+     whatever --bg/--fg a theme (or an app) actually provides, so a themed
+     app gets a themed border for free without this file picking a hue. */
   --bg: var(--material-color-grey-50);
   --fg: var(--material-color-grey-900);
 
@@ -317,21 +325,26 @@
     var(--menu-fg, var(--fg)) 6%
   );
   --shadow-color: color-mix(in srgb, var(--fg) 10%, rgba(34, 34, 34, 0.2));
-  --border-color: var(--fg);
-  --warning-bg: var(--material-color-orange-600);
-  --warning-color: var(--material-color-orange-600);
-  --warning-fg: var(--white);
+  /* Derived from the page pair rather than hard-coded, so a theme that only
+     sets --bg/--fg (light or dark) still gets a visible but quiet border. */
+  --border-color: color-mix(in oklab, var(--fg) 35%, var(--bg));
+  /* Semantic pairs meet WCAG AA (4.5:1) for button-sized text. Warning is
+     amber with dark text: no orange dark enough for white text still reads
+     as "warning" rather than "danger". */
+  --warning-bg: var(--material-color-amber-400);
+  --warning-color: var(--material-color-amber-400);
+  --warning-fg: var(--material-color-grey-900);
   --warning-text-transform: uppercase;
 
   /* Semantic color variants */
-  --danger-bg: var(--material-color-red-600);
-  --danger-color: var(--material-color-red-600);
+  --danger-bg: var(--material-color-red-700);
+  --danger-color: var(--material-color-red-700);
   --danger-fg: var(--white);
-  --success-bg: var(--material-color-green-600);
-  --success-color: var(--material-color-green-600);
+  --success-bg: var(--material-color-green-800);
+  --success-color: var(--material-color-green-800);
   --success-fg: var(--white);
-  --info-bg: var(--material-color-light-blue-600);
-  --info-color: var(--material-color-light-blue-600);
+  --info-bg: var(--material-color-light-blue-800);
+  --info-color: var(--material-color-light-blue-800);
   --info-fg: var(--white);
 
   --surface-bg: var(--bg);
@@ -342,7 +355,12 @@
      affordances.css. The color-props(menu-item, menu, button, control) chain
      resolves it to --menu-bg / --bg at the element, keeping per-instance
      --menu-bg overrides working. */
-  --focus-color: var(--material-color-blue-a400);
+  /* --focus-color intentionally not defaulted here either: both consumers
+     (_affordances.scss's outline rule, Tag's close-button outline) already
+     fall back to the browser's own focus ring / currentColor when it's
+     unset, which is exactly the neutral behavior an un-themed app should
+     get. A theme that wants a specific ring sets --focus-color itself
+     (see themes/light.css, themes/material.css, themes/purple.css). */
   --tooltip-border: none;
 }
 body {
@@ -351,7 +369,10 @@ body {
 }
 a {
   background-color: var(--link-bg, transparent);
-  color: var(--link-fg, var(--material-color-blue-a400));
+  /* Same reasoning as --surface-link-fg above: derive from the theme's own
+     --primary-bg (always defined, even for an app with no theme at all)
+     rather than hard-coding a hue here too. */
+  color: var(--link-fg, var(--primary-bg));
 }
 /* Color definitions */
 :root {
@@ -701,6 +722,18 @@ a {
   --code-tab-size: 4;
   --code-width: min(75em, 100%);
   --code-height: auto;
+  /* Token backgrounds must be explicit: each token's color-props chain ends
+     with no fallback, and an unset custom property inherits, so without these
+     an ancestor's --bg would paint behind every token. Themes that style
+     tokens already set these; this covers themes that don't. */
+  --code-comment-bg: transparent;
+  --code-string-bg: transparent;
+  --code-keyword-bg: transparent;
+  --code-attr-name-bg: transparent;
+  --code-tag-bg: transparent;
+  --code-function-bg: transparent;
+  --code-variable-bg: transparent;
+  --code-operator-bg: transparent;
 }
 :root {
   --shadow-blur: 4px;
@@ -747,7 +780,10 @@ a {
   --checkbox-transition: 400ms;
   --checked-weight: var(--bold);
   --grab-bar-hover-base-color-percentage: 88%;
-  --grab-bar-hover-color-mix: var(--hover-color-mix, white);
+  --grab-bar-hover-color-mix: var(
+    --hover-color-mix,
+    var(--grab-bar-fg, var(--sidebar-fg, var(--fg)))
+  );
   --grab-bar-active-base-color-percentage: 80%;
   --grab-bar-active-color-mix: var(--active-color-mix, black);
   --grab-bar-shadow-color: color-mix(
@@ -756,14 +792,14 @@ a {
     transparent
   );
   --grab-bar-hover-bg: color-mix(
-    in oklch,
+    in oklab,
     var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
       var(--grab-bar-hover-base-color-percentage, 88%),
     var(--grab-bar-hover-color-mix, white)
       calc(100% - var(--grab-bar-hover-base-color-percentage, 88%))
   );
   --grab-bar-active-bg: color-mix(
-    in oklch,
+    in oklab,
     var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
       var(--grab-bar-active-base-color-percentage, 80%),
     var(--grab-bar-active-color-mix, black)
@@ -785,7 +821,9 @@ a {
   --scrollbar-track-bg: transparent;
 
   --hover-base-color-percentage: 90%;
-  --hover-color-mix: white;
+  /* --hover-color-mix is deliberately unset: hovers mix toward each
+     element's own text color (see clickable-hover-affordance). Set it to
+     force one direction, e.g. black. */
   --active-base-color-percentage: 90%;
   --active-color-mix: black;
   --disabled-base-color-percentage: 50%;

package/dist/vars/themes/dark.css

@@ -11,9 +11,9 @@
   --sidebar-fg: var(--material-color-blue-grey-50);
   --menu-bg: var(--material-color-blue-grey-900);
   --menu-fg: var(--material-color-blue-grey-50);
-  --primary-bg: var(--material-color-light-blue-100);
-  --primary-color: var(--material-color-light-blue-100);
-  --primary-fg: var(--material-color-blue-grey-800);
+  --primary-bg: var(--material-color-indigo-200);
+  --primary-color: var(--material-color-indigo-200);
+  --primary-fg: var(--material-color-indigo-900);
   --secondary-bg: var(--material-color-blue-grey-300);
   --secondary-color: var(--material-color-blue-grey-300);
   --secondary-fg: var(--material-color-blue-grey-800);

package/dist/vars/themes/light.css

@@ -1,50 +1,53 @@
 /* light mode */
 
 :root {
-  --fg: var(--material-color-grey-800);
-  --bg: #fafafa;
-  --surface-bg: var(--material-color-grey-100);
-  --surface-fg: var(--material-color-grey-800);
+  --fg: #1b1d2e;
+  --bg: #fcfcff;
+  --surface-bg: #f4f5fb;
+  --surface-fg: #1b1d2e;
   --container-bg: var(--surface-bg);
   --container-fg: var(--surface-fg);
-  --sidebar-bg: var(--material-color-grey-100);
-  --sidebar-fg: var(--material-color-grey-900);
+  --sidebar-bg: #eef0fa;
+  --sidebar-fg: #1b1d2e;
 
-  --menu-fg: var(--material-color-grey-900);
-  --menu-bg: var(--material-color-grey-100);
-  --primary-bg: var(--material-color-blue-500);
-  --primary-color: var(--material-color-blue-500);
-  --primary-fg: var(--material-color-grey-100);
-  --secondary-bg: var(--material-color-grey-400);
-  --secondary-color: var(--material-color-grey-400);
-  --secondary-fg: var(--material-color-grey-900);
+  --menu-fg: #1b1d2e;
+  --menu-bg: #ffffff;
+  --primary-bg: var(--material-color-indigo-600);
+  --primary-color: var(--material-color-indigo-600);
+  --primary-fg: var(--white);
+  --secondary-bg: var(--material-color-indigo-50);
+  --secondary-color: var(--material-color-indigo-50);
+  --secondary-fg: var(--material-color-indigo-900);
   --stripe-bg: color-mix(in srgb, var(--menu-bg) 94%, var(--menu-fg) 6%);
-  --hover-color-mix: #444;
   --active-color-mix: black;
   --stripe-fg: var(--menu-fg);
-  --control-bg: var(--material-color-grey-300);
-  --control-fg: var(--material-color-grey-900);
-  --tab-bg: var(--material-color-grey-200);
-  --tab-fg: var(--material-color-grey-800);
+  --control-bg: var(--material-color-indigo-50);
+  --control-fg: var(--material-color-indigo-900);
+  --tab-bg: var(--material-color-indigo-50);
+  --tab-fg: var(--material-color-indigo-900);
   --tab-active-bg: #ffffff;
-  --tab-active-fg: var(--material-color-blue-700);
-  --tab-bar-fg: var(--material-color-grey-900);
+  --tab-active-fg: var(--material-color-indigo-700);
+  --tab-bar-fg: #1b1d2e;
 
   /* Semantic colors for light mode */
-  --warning-bg: var(--material-color-orange-600);
-  --warning-color: var(--material-color-orange-600);
-  --warning-fg: var(--white);
-  --danger-bg: var(--material-color-red-600);
-  --danger-color: var(--material-color-red-600);
+  --warning-bg: var(--material-color-amber-400);
+  --warning-color: var(--material-color-amber-400);
+  --warning-fg: var(--material-color-grey-900);
+  --danger-bg: var(--material-color-red-700);
+  --danger-color: var(--material-color-red-700);
   --danger-fg: var(--white);
-  --success-bg: var(--material-color-green-600);
-  --success-color: var(--material-color-green-600);
+  --success-bg: var(--material-color-green-800);
+  --success-color: var(--material-color-green-800);
   --success-fg: var(--white);
-  --info-bg: var(--material-color-light-blue-600);
-  --info-color: var(--material-color-light-blue-600);
+  --info-bg: var(--material-color-light-blue-800);
+  --info-color: var(--material-color-light-blue-800);
   --info-fg: var(--white);
 
-  --border-color: var(--material-color-grey-400);
+  --border-color: var(--material-color-indigo-300);
+  --focus-color: var(--material-color-indigo-a200);
+  --tooltip-bg: var(--material-color-indigo-900);
+  --tooltip-fg: var(--white);
+  --tooltip-arrow-color: var(--tooltip-bg);
   --input-bg: #fefefe;
   --input-fg: var(--material-color-grey-900);
   --slider-track-bg: color-mix(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",