origam 2.18.7 → 2.18.9

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

@@ -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);
@@ -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

@@ -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

@@ -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);
@@ -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

@@ -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/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)));
@@ -697,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;
@@ -1137,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/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/Overlay/OrigamOverlay.vue

@@ -80,6 +80,7 @@ import { SCROLL_STRATEGIES } from "../../enums/Commons/scroll.enum";
 import { animate } from "../../utils/Commons/animation.util";
 import { convertToUnit } from "../../utils/Commons/commons.util";
 import { getScrollParent } from "../../utils/Commons/scroll.util";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },

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.7",
+  "version": "2.18.9",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [