origam 2.18.6 → 2.18.8

package/dist/src/assets/css/tokens/dark.css

@@ -253,7 +253,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -780,7 +780,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -2086,7 +2086,10 @@
   --origam-date-picker-month__weeks---font-size: 0.85rem;
   --origam-date-picker-month__weekday---font-size: 0.85rem;
   --origam-date-picker-month__day---font-size: 0.85rem;
-  --origam-code---background-color: var(--origam-color__surface---sunken);
+  /* #535 — was `surface---sunken`. See the matching comment in light.css:
+   * `surface---raised` clears WCAG AA against Shiki's fixed token colours
+   * with margin in dark mode too (measured worst case 5.79:1, #535 PR). */
+  --origam-code---background-color: var(--origam-color__surface---raised);
   --origam-code---color: var(--origam-color__text---primary);
   --origam-code---border-color: var(--origam-color__border---subtle);
   --origam-code---border-width: var(--origam-border__width---thin);
@@ -2989,7 +2992,7 @@
     --origam-btn---width: auto;
     --origam-btn---min-width: 64px;
     --origam-btn---max-width: 100%;
-    --origam-btn---height: 36px;
+    --origam-btn---height: var(--origam-btn---height-md, 36px);
     --origam-btn---max-height: 100%;
     --origam-btn---height-xs: 20px;
     --origam-btn---height-sm: 28px;
@@ -3516,7 +3519,7 @@
     --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
     --origam-toolbar---max-width: 100%;
     --origam-toolbar---width: 100%;
-    --origam-toolbar---height: var(--origam-space---14);
+    --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
     --origam-toolbar---height-compact: var(--origam-space---10);
     --origam-toolbar---height-default: var(--origam-space---14);
     --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -4822,7 +4825,9 @@
     --origam-date-picker-month__weeks---font-size: 0.85rem;
     --origam-date-picker-month__weekday---font-size: 0.85rem;
     --origam-date-picker-month__day---font-size: 0.85rem;
-    --origam-code---background-color: var(--origam-color__surface---sunken);
+    /* #535 — was `surface---sunken`; see light.css / the top of this file
+     * for the AA rationale (`surface---raised`, measured worst 5.79:1). */
+    --origam-code---background-color: var(--origam-color__surface---raised);
     --origam-code---color: var(--origam-color__text---primary);
     --origam-code---border-color: var(--origam-color__border---subtle);
     --origam-code---border-width: var(--origam-border__width---thin);

package/dist/src/assets/css/tokens/light.css

@@ -155,7 +155,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -682,7 +682,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -1990,7 +1990,12 @@
   --origam-date-picker-month__weeks---font-size: 0.85rem;
   --origam-date-picker-month__weekday---font-size: 0.85rem;
   --origam-date-picker-month__day---font-size: 0.85rem;
-  --origam-code---background-color: var(--origam-color__surface---sunken);
+  /* #535 — was `surface---sunken`. Shiki's fixed per-token colours (see
+   * `code.const.ts`) cannot reach 4.5:1 against several brand `sunken`
+   * surfaces no matter how dark the theme goes; `surface---raised` is the
+   * lightest surface already defined by every theme (own palette, no new
+   * token) and clears AA with margin everywhere it was measured (#535 PR). */
+  --origam-code---background-color: var(--origam-color__surface---raised);
   --origam-code---color: var(--origam-color__text---primary);
   --origam-code---border-color: var(--origam-color__border---subtle);
   --origam-code---border-width: var(--origam-border__width---thin);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -253,7 +253,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -780,7 +780,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -2086,7 +2086,10 @@
   --origam-date-picker-month__weeks---font-size: 0.85rem;
   --origam-date-picker-month__weekday---font-size: 0.85rem;
   --origam-date-picker-month__day---font-size: 0.85rem;
-  --origam-code---background-color: var(--origam-color__surface---sunken);
+  /* #535 — was `surface---sunken`. See the matching comment in light.css:
+   * `surface---raised` clears WCAG AA against Shiki's fixed token colours
+   * with margin in dark mode too (measured worst case 5.79:1, #535 PR). */
+  --origam-code---background-color: var(--origam-color__surface---raised);
   --origam-code---color: var(--origam-color__text---primary);
   --origam-code---border-color: var(--origam-color__border---subtle);
   --origam-code---border-width: var(--origam-border__width---thin);
@@ -2989,7 +2992,7 @@
     --origam-btn---width: auto;
     --origam-btn---min-width: 64px;
     --origam-btn---max-width: 100%;
-    --origam-btn---height: 36px;
+    --origam-btn---height: var(--origam-btn---height-md, 36px);
     --origam-btn---max-height: 100%;
     --origam-btn---height-xs: 20px;
     --origam-btn---height-sm: 28px;
@@ -3516,7 +3519,7 @@
     --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
     --origam-toolbar---max-width: 100%;
     --origam-toolbar---width: 100%;
-    --origam-toolbar---height: var(--origam-space---14);
+    --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
     --origam-toolbar---height-compact: var(--origam-space---10);
     --origam-toolbar---height-default: var(--origam-space---14);
     --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -4822,7 +4825,9 @@
     --origam-date-picker-month__weeks---font-size: 0.85rem;
     --origam-date-picker-month__weekday---font-size: 0.85rem;
     --origam-date-picker-month__day---font-size: 0.85rem;
-    --origam-code---background-color: var(--origam-color__surface---sunken);
+    /* #535 — was `surface---sunken`; see light.css / the top of this file
+     * for the AA rationale (`surface---raised`, measured worst 5.79:1). */
+    --origam-code---background-color: var(--origam-color__surface---raised);
     --origam-code---color: var(--origam-color__text---primary);
     --origam-code---border-color: var(--origam-color__border---subtle);
     --origam-code---border-width: var(--origam-border__width---thin);

package/dist/src/assets/scss/tokens/_light.scss

@@ -155,7 +155,7 @@
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
-  --origam-btn---height: 36px;
+  --origam-btn---height: var(--origam-btn---height-md, 36px);
   --origam-btn---max-height: 100%;
   --origam-btn---height-xs: 20px;
   --origam-btn---height-sm: 28px;
@@ -682,7 +682,7 @@
   --origam-toolbar---border-end-end-radius: var(--origam-radius---none);
   --origam-toolbar---max-width: 100%;
   --origam-toolbar---width: 100%;
-  --origam-toolbar---height: var(--origam-space---14);
+  --origam-toolbar---height: var(--origam-toolbar---height-default, var(--origam-space---14));
   --origam-toolbar---height-compact: var(--origam-space---10);
   --origam-toolbar---height-default: var(--origam-space---14);
   --origam-toolbar---height-prominent: var(--origam-space---20);
@@ -1990,7 +1990,12 @@
   --origam-date-picker-month__weeks---font-size: 0.85rem;
   --origam-date-picker-month__weekday---font-size: 0.85rem;
   --origam-date-picker-month__day---font-size: 0.85rem;
-  --origam-code---background-color: var(--origam-color__surface---sunken);
+  /* #535 — was `surface---sunken`. Shiki's fixed per-token colours (see
+   * `code.const.ts`) cannot reach 4.5:1 against several brand `sunken`
+   * surfaces no matter how dark the theme goes; `surface---raised` is the
+   * lightest surface already defined by every theme (own palette, no new
+   * token) and clears AA with margin everywhere it was measured (#535 PR). */
+  --origam-code---background-color: var(--origam-color__surface---raised);
   --origam-code---color: var(--origam-color__text---primary);
   --origam-code---border-color: var(--origam-color__border---subtle);
   --origam-code---border-width: var(--origam-border__width---thin);

package/dist/src/components/Alert/OrigamAlert.vue

@@ -421,10 +421,6 @@ defineExpose({
       --origam-alert---density: -8px;
     }
 
-    &--density-default {
-      --origam-alert---density: 0px;
-    }
-
     &--density-compact {
       --origam-alert---density: 8px;
     }

package/dist/src/components/Btn/OrigamBtn.vue

@@ -458,7 +458,7 @@ defineExpose({
 		padding: 0 calc(16px + var(--origam-btn---density-padding-x, 0px));
 
 		width: var(--origam-btn---width, auto);
-		min-width: var(--origam-btn---min-width, calc(var(--origam-btn---width, 64px) + var(--origam-btn---density, 0px)));
+		min-width: calc(var(--origam-btn---min-width, 64px) + var(--origam-btn---density, 0px));
 		max-width: var(--origam-btn---max-width, 100%);
 		height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 		min-height: var(--origam-btn---min-height, calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px)));
@@ -551,9 +551,6 @@ defineExpose({
 		}
 
 		&--size-default {
-			--origam-btn---height: var(--origam-btn---height-md, 36px);
-			--origam-btn---font-size: 0.875rem;
-			--origam-btn---min-width: 64px;
 			padding: 0 calc(var(--origam-btn---padding-md, 16px) + var(--origam-btn---density-padding-x, 0px));
 
 			:deep(.origam-icon) {
@@ -589,7 +586,6 @@ defineExpose({
 		}
 
 		&--density-default {
-			--origam-btn---density: 0px;
 			--origam-btn---density-padding-x: 0px;
 		}
 
@@ -701,7 +697,7 @@ defineExpose({
 		&--icon {
 			--origam-btn---border-radius: var(--origam-btn---border-radius-icon, 50%);
 
-			--origam-btn---min-width: 0;
+			--origam-btn---min-width: 0px;
 			--origam-btn---width: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 
 			padding: 0;
@@ -1141,8 +1137,5 @@ defineExpose({
 
 		--origam-btn__prepend---margin-inline-start: calc(var(--origam-btn---height) / -9);
 		--origam-btn__prepend---margin-inline-end: calc(var(--origam-btn---height) / 4.5);
-
-		--origam-btn---min-width: calc(var(--origam-btn---width, 36px) + var(--origam-btn---density, 0px));
-		--origam-btn---min-height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 	}
 </style>

package/dist/src/components/Chart/OrigamChartMap.vue

@@ -79,7 +79,7 @@
 								'origam-chart__map-country--active': hoveredCode === country.code
 							}"
 							:d="country.d"
-							:style="{ fill: country.fill, stroke: borderColor }"
+							:style="{ fill: country.fill, stroke: resolveColor(borderColor) }"
 							:data-cy="`origam-chart-map-country-${ country.code }`"
 							:tabindex="country.hasData ? 0 : -1"
 							:role="country.hasData ? 'button' : undefined"
@@ -223,8 +223,8 @@ defineOptions({
 const props = defineProps({
   mode: { type: null, required: false, default: "choropleth" },
   colorRange: { type: Array, required: false, default: () => ["info", "danger"] },
-  defaultCountryFill: { type: String, required: false, default: "rgba(0,0,0,0.08)" },
-  borderColor: { type: String, required: false, default: "rgba(0,0,0,0.2)" },
+  defaultCountryFill: { type: null, required: false, default: "rgba(0,0,0,0.08)" },
+  borderColor: { type: null, required: false, default: "neutral" },
   lineColor: { type: null, required: false, default: "primary" },
   nodeRadius: { type: Number, required: false, default: 4 },
   routeCurvature: { type: Number, required: false, default: 0.3 },
@@ -371,7 +371,7 @@ const allCountries = computed(() => {
     if (hasData && datum !== void 0) {
       fill = choroplethColorFor(datum.value, min, max);
     } else {
-      fill = props.defaultCountryFill;
+      fill = resolveColor(props.defaultCountryFill);
     }
     return {
       code,

package/dist/src/components/Chip/OrigamChip.vue

@@ -637,9 +637,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style lang="scss" scoped>
-	.origam-chip {
-		--origam-chip---density: 0px;
-	}
-</style>

package/dist/src/components/Code/OrigamCode.vue

@@ -402,7 +402,7 @@ defineExpose({ rebuild, copied, codeRef });
 	.origam-code__copy--compact {
 		flex: none;
 		--origam-btn---min-height: 0;
-		--origam-btn---min-width: 0;
+		--origam-btn---min-width: 0px;
 		--origam-btn---height: auto;
 		--origam-btn---padding-block: var(--origam-code__compact-copy---padding-block);
 		--origam-btn---padding-inline: var(--origam-code__compact-copy---padding-inline);
@@ -445,7 +445,7 @@ defineExpose({ rebuild, copied, codeRef });
 
 	.origam-code__copy {
 		--origam-btn---min-height: 0;
-		--origam-btn---min-width: 0;
+		--origam-btn---min-width: 0px;
 		--origam-btn---border-radius: var(--origam-code__copy---border-radius);
 		--origam-btn---font-size: var(--origam-code__copy---font-size);
 		--origam-btn---color: var(--origam-code__copy---color);

package/dist/src/components/Kbd/OrigamKbd.vue

@@ -172,7 +172,6 @@ defineExpose({
 		&--variant-outlined,
 		&--variant-outlined &__key {
 			--origam-kbd---background-color: var(--origam-kbd--outlined---background-color, var(--origam-color__surface---raised, #fff));
-			--origam-kbd---border-color: var(--origam-color__border---subtle, #d4d4d4);
 			--origam-kbd---border-width: var(--origam-kbd--outlined---border-width, 1px);
 			--origam-kbd---box-shadow: 0 1px 0 0 color-mix(in srgb, currentColor 12%, transparent),
 			                            inset 0 1px 0 0 color-mix(in srgb, white 50%, transparent);

package/dist/src/components/List/OrigamList.vue

@@ -396,10 +396,6 @@ defineExpose({
 			--origam-list-group---prepend-width: var(--origam-list---slim-prepend-width, 28px);
 		}
 
-		&--density-default {
-			--origam-list---density: 0px;
-		}
-
 		&--density-compact {
 			--origam-list---density: -8px;
 		}

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -259,13 +259,6 @@ defineExpose({
 			--origam-stepper---subtitle-font-size: 0.6875rem;
 		}
 
-		&--size-default {
-			--origam-stepper---indicator-size: 32px;
-			--origam-stepper---indicator-font-size: 0.75rem;
-			--origam-stepper---title-font-size: 0.875rem;
-			--origam-stepper---subtitle-font-size: 0.75rem;
-		}
-
 		&--size-large {
 			--origam-stepper---indicator-size: 40px;
 			--origam-stepper---indicator-font-size: 0.875rem;

package/dist/src/components/Table/OrigamTable.vue

@@ -238,13 +238,6 @@ defineExpose({
 			--origam-table__cell---padding-inline: 8px;
 		}
 
-		&--density-default {
-			--origam-table__header-cell---padding-block: 12px;
-			--origam-table__header-cell---padding-inline: 16px;
-			--origam-table__cell---padding-block: 12px;
-			--origam-table__cell---padding-inline: 16px;
-		}
-
 		&--density-comfortable {
 			--origam-table__header-cell---padding-block: 18px;
 			--origam-table__header-cell---padding-inline: 24px;

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -229,27 +229,8 @@ defineExpose({
 			--origam-tabs---height: 56px;
 		}
 
-		&--density-default {
-			--origam-tabs---height: 48px;
-		}
-
 		&--density-compact {
 			--origam-tabs---height: 36px;
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-tabs---height: 48px;
-		--origam-tabs---gap: 0;
-		--origam-tabs---padding-block: 0;
-		--origam-tabs---padding-inline: 0;
-		--origam-tabs---background-color: transparent;
-		--origam-tabs---border-radius: 0;
-		--origam-tabs---border-width: 0;
-		--origam-tabs---border-style: solid;
-		--origam-tabs---border-color: currentColor;
-		--origam-tabs---color: inherit;
-	}
-</style>

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -348,10 +348,6 @@ defineExpose({
 			--origam-toolbar---height: var(--origam-toolbar---height-compact);
 		}
 
-		&--density-default {
-			--origam-toolbar---height: var(--origam-toolbar---height-default);
-		}
-
 		&--flat {
 			--origam-toolbar---box-shadow: var(--origam-toolbar__flat---box-shadow, none);
 		}

package/dist/src/consts/Code/code.const.cjs

@@ -7,8 +7,8 @@ exports.SUPPORTED_LANGS = exports.CODE_LIGHT_THEME = exports.CODE_DEFAULTS = exp
 var _enums = require("../../enums/index.cjs");
 const SUPPORTED_LANGS = exports.SUPPORTED_LANGS = Object.freeze([_enums.CODE_LANG.PLAINTEXT, _enums.CODE_LANG.VUE, _enums.CODE_LANG.TS, _enums.CODE_LANG.JS, _enums.CODE_LANG.TSX, _enums.CODE_LANG.JSX, _enums.CODE_LANG.SCSS, _enums.CODE_LANG.CSS, _enums.CODE_LANG.JSON, _enums.CODE_LANG.BASH, _enums.CODE_LANG.HTML, _enums.CODE_LANG.XML, _enums.CODE_LANG.YAML, _enums.CODE_LANG.MD]);
 const CODE_CACHE_MAX_ENTRIES = exports.CODE_CACHE_MAX_ENTRIES = 64;
-const CODE_LIGHT_THEME = exports.CODE_LIGHT_THEME = "github-light";
-const CODE_DARK_THEME = exports.CODE_DARK_THEME = "github-dark";
+const CODE_LIGHT_THEME = exports.CODE_LIGHT_THEME = "github-light-high-contrast";
+const CODE_DARK_THEME = exports.CODE_DARK_THEME = "github-dark-high-contrast";
 const CODE_DEFAULTS = exports.CODE_DEFAULTS = Object.freeze({
   lang: _enums.CODE_LANG.PLAINTEXT,
   lineNumbers: false,

package/dist/src/consts/Code/code.const.d.ts

@@ -12,12 +12,29 @@ export declare const SUPPORTED_LANGS: ReadonlyArray<CODE_LANG>;
  */
 export declare const CODE_CACHE_MAX_ENTRIES = 64;
 /**
- * Shiki themes used by `useCode`. Light + dark map to the GitHub themes
- * (best contrast / nicest defaults on both modes). Override at the
- * composable level if you need a different palette per app.
+ * Shiki themes used by `useCode`.
+ *
+ * ⛔ #535 — `github-light` / `github-dark` (the previous pair) fail WCAG AA
+ * (4.5:1) on several token categories REGARDLESS of the surface they sit on:
+ * measured against a background as light as pure `#ffffff`, the `github-light`
+ * "parameter/property" hue (`#e36209`) tops out at 3.49:1 — it cannot reach
+ * 4.5:1 by darkening or lightening the background alone, because the DS has
+ * no per-syntax-category token to recolour it (Shiki paints via its own
+ * `--shiki-light`/`--shiki-dark` inline vars, see `code.composable.ts`).
+ * `keyword`/`comment`/`tag` were close misses (~3.9–4.4:1) for the same
+ * reason. `github-light-high-contrast` / `github-dark-high-contrast` are
+ * shiki's own accessibility-tuned variants of the same GitHub palette
+ * (bundled by shiki, zero extra bytes — swapping one theme name for another).
+ * Re-measured (Node, shiki 4.3.1, `codeToHtml` output — no DOM/var()
+ * involved, these are the theme's literal per-token hex, see #535 PR):
+ * worst case across all 8 token categories × 7 marketing brand surfaces ×
+ * both modes is 4.23:1 (light, "comment" on 3 tinted brand backgrounds) —
+ * closed by the companion `--origam-color__surface---raised` background fix
+ * below (worst case then 4.77:1 light / 5.79:1 dark, Playwright-verified
+ * against the built Histoire `OrigamCode` story).
  */
-export declare const CODE_LIGHT_THEME = "github-light";
-export declare const CODE_DARK_THEME = "github-dark";
+export declare const CODE_LIGHT_THEME = "github-light-high-contrast";
+export declare const CODE_DARK_THEME = "github-dark-high-contrast";
 /**
  * Default values used by `OrigamCode`. Centralised so the story / docs /
  * tests pull the same constants and any future drift stays visible.

package/dist/src/consts/Code/code.const.js

@@ -16,8 +16,8 @@ export const SUPPORTED_LANGS = Object.freeze([
   CODE_LANG.MD
 ]);
 export const CODE_CACHE_MAX_ENTRIES = 64;
-export const CODE_LIGHT_THEME = "github-light";
-export const CODE_DARK_THEME = "github-dark";
+export const CODE_LIGHT_THEME = "github-light-high-contrast";
+export const CODE_DARK_THEME = "github-dark-high-contrast";
 export const CODE_DEFAULTS = Object.freeze({
   lang: CODE_LANG.PLAINTEXT,
   lineNumbers: false,

package/dist/src/interfaces/Chart/chart-map.interface.d.ts

@@ -91,14 +91,26 @@ export interface IChartMapProps extends IChartBaseProps {
     colorRange?: [TIntent | string, TIntent | string];
     /**
      * Fill colour for countries that have no value in the dataset.
-     * Default `'rgba(0,0,0,0.08)'`.
+     * Supports intent names and raw CSS strings, resolved the same way as
+     * `borderColor` / `lineColor` (#411 — was applied to `fill` verbatim,
+     * an intent keyword is invalid CSS there and the browser dropped the
+     * declaration, making dataless countries disappear under a theme).
+     * Default stays the literal `'rgba(0,0,0,0.08)'` — no intent token
+     * reproduces it: the literal is a semi-transparent SCRIM composited
+     * over whatever `bgColor` the chart itself renders on top of (so it
+     * self-adjusts to light/dark and to a custom `bgColor`), whereas an
+     * intent resolves to a fixed OPAQUE colour unrelated to the chart's
+     * own background. Swapping the default would trade an adaptive
+     * behaviour for a fixed one, not just move a pixel.
      */
-    defaultCountryFill?: string;
+    defaultCountryFill?: TIntent | string;
     /**
      * Stroke colour applied to all country path outlines.
-     * Default `'rgba(0,0,0,0.2)'`.
+     * Supports intent names and raw CSS strings, resolved the same way as
+     * `lineColor` (#411 — was a hardcoded literal the theme could not reach).
+     * Default `'neutral'`.
      */
-    borderColor?: string;
+    borderColor?: TIntent | string;
     /**
      * Default stroke colour for flight-route arcs.
      * Overridden per route via `IChartMapRouteDatum.color`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.18.6",
+  "version": "2.18.8",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [