@sesamehr/react-design-system 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/Layout/Card/Card.d.ts

@@ -2,7 +2,10 @@ import { CardVariants } from './index.ts';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Render as the child element instead of a `<div>` (Radix Slot). */
     asChild?: boolean;
-    /** Which surface it is: `default` is white, `muted` is tinted. */
+    /**
+     * Which surface it is: `default` is white, `muted` is tinted, `highlighted`
+     * is filled with the brand colour and carries its own light text.
+     */
     tone?: CardVariants['tone'];
     /** Drops the border, the shadow and the glass — just the surface and its radius. */
     flat?: boolean;

package/dist/Layout/Card/index.d.ts

@@ -3,9 +3,15 @@ export { Card, type CardProps } from './Card.tsx';
 /**
  * Two things vary, and they are not the same thing.
  *
- * `tone` is which surface it is: white, or tinted for the case the white one
- * cannot serve. White on white needs a border around every row to read as
- * separate things; a tinted surface lets the white ones separate on their own.
+ * `tone` is which surface it is: white, tinted for the case the white one
+ * cannot serve, or filled with the brand colour when the card is the one thing
+ * on the page meant to be looked at first. White on white needs a border around
+ * every row to read as separate things; a tinted surface lets the white ones
+ * separate on their own.
+ *
+ * `highlighted` is the only tone that also sets a text colour, because it is
+ * the only one whose surface is dark enough to need it. Everything inside
+ * inherits it, so the content composes exactly as it would on a white card.
  *
  * `flat` is what it carries on top of that surface. They are kept apart
  * because the combinations are all real: a white card over a tinted one, a
@@ -16,6 +22,6 @@ export { Card, type CardProps } from './Card.tsx';
  * styles keyed off `data-flat` rather than being bent into one.
  */
 export declare const cardVariants: (props?: ({
-    tone?: "default" | "muted" | null | undefined;
+    tone?: "default" | "muted" | "highlighted" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CardVariants = VariantProps<typeof cardVariants>;