@redseed/redseed-ui-vue3 11.0.2 → 11.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "11.0.2",
+    "version": "11.1.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Icon/IconSlot.vue

@@ -125,9 +125,9 @@ const defaultSize = computed(() =>
 )
 
 /**
- * Default color is primary if no color is specified.
+ * Whether the consumer named a tone at all.
  */
-const defaultColor = computed(() =>
+const hasNoTone = computed(() =>
     !props.primary
     && !props.secondary
     && !props.brand
@@ -158,7 +158,29 @@ const iconClass = computed(() => [
         /**
          * Colors
          */
-        'rsui-icon--primary': props.primary || defaultColor.value,
+        /**
+         * No tone means INHERIT, not primary.
+         *
+         * The tone rules paint the svg (`*:text-…`), and a colour on the svg wins over
+         * anything around it — so defaulting to `primary` made an icon inside a coloured
+         * control render near-black while the control beside it was green. A colour on the
+         * wrapper would have been inherited and therefore overridable, which is the
+         * property that was missing. With no class at all the svg's own `currentColor`
+         * resolves against whatever encloses it. See #428.
+         *
+         * Anywhere the surroundings are already primary ink — body text, headings, most of
+         * a page — that is the same colour it was. Only icons in a coloured control move.
+         *
+         * `background` is the exception, and it is not a leftover. It paints a CONTRAST
+         * SURFACE behind the glyph, and which surface is a question only a tone can answer:
+         * `.rsui-icon--primary.rsui-icon--background` is `bg-background-primary-contrast`.
+         * Without a fallback `IconCircleBackground` and `IconRoundedBackground` — neither
+         * of which passes a tone — would render with no background at all.
+         *
+         * `invert` needed the same partner and no longer does: it carries
+         * `*:text-text-on-color` itself now, which is what it always meant.
+         */
+        'rsui-icon--primary': props.primary || (hasNoTone.value && props.background),
         'rsui-icon--secondary': props.secondary,
         'rsui-icon--brand': props.brand,
         'rsui-icon--success': props.success,