@sorayasm/vietri-ds 0.3.2 → 0.4.0

package/dist/types/components/Footer/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,KAAU,EACV,KAAU,EACV,UAA2B,EAC3B,MAAM,EACN,KAAK,EACL,aAAsC,GACvC,EAAE,WAAW,2CA+Ib"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,KAAU,EACV,KAAU,EACV,UAA2B,EAC3B,MAAM,EACN,KAAK,EACL,aAAsC,GACvC,EAAE,WAAW,2CAmJb"}

package/dist/types/components/Hero/Hero.d.ts

@@ -10,6 +10,12 @@ export interface HeroProps {
     /** Heading level of the title (h1–h6). A page's hero is normally h1. */
     level?: HeadingLevel;
     align?: "left" | "center";
+    /**
+     * Draws a short rule under the title, in the theme's `accentLarge` (or the primary
+     * color). It is decorative. The title itself stays in the text color, so it is
+     * readable over any photo.
+     */
+    accentRule?: boolean;
     /**
      * Address of a background image. It is decorative (it carries no text
      * alternative), so do not put information in it. A dark layer (the theme's
@@ -26,6 +32,6 @@ export interface HeroProps {
  * text on top, or a background image under a dark layer. Outlined and text
  * buttons inside it take the text color of the surface, so they stay visible.
  */
-export declare function Hero({ title, eyebrow, description, actions, level, align, image, imagePosition, }: HeroProps): import("react/jsx-runtime").JSX.Element;
+export declare function Hero({ title, eyebrow, description, actions, level, align, accentRule, image, imagePosition, }: HeroProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Hero.d.ts.map

package/dist/types/components/Hero/Hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/components/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uCAAuC;IACvC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,KAAS,EACT,KAAc,EACd,KAAK,EACL,aAAwB,GACzB,EAAE,SAAS,2CA8FX"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/components/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uCAAuC;IACvC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,KAAS,EACT,KAAc,EACd,UAAkB,EAClB,KAAK,EACL,aAAwB,GACzB,EAAE,SAAS,2CAkHX"}

package/dist/types/theme/components.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeOptions } from "@mui/material/styles";
+import { type ThemeOptions } from "@mui/material/styles";
 import "./augmentation";
 /**
  * Visual identity of the MUI components. It lives in the theme so it

package/dist/types/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,gBAAgB,CAAC;AAGxB;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CA2JjD,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,gBAAgB,CAAC;AAGxB;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAwLjD,CAAC"}

package/dist/types/theme/palettes.d.ts

@@ -3,7 +3,7 @@
  *
  * Each theme (editorial, streaming, observatory) has its own identity:
  *   - editorial    → the portfolio: black, white and gold
- *   - streaming    → "El Blues es Femenino": deep purple, orange, teal, violet, lavender, magenta
+ *   - streaming    → "El Blues es Femenino": deep violet and orange
  *   - observatory  → the Mujeres del Blues Observatory: teal, cyan, amber, coral, red, purple
  *
  * Every pair that carries text meets WCAG AA (4.5:1). Brand colors that are
@@ -42,11 +42,32 @@ export interface ThemeColors {
     actionHover: GradientStops;
     /** Text on action fills. */
     onAction: string;
+    /**
+     * Optional color of the line of outlined buttons (a neutral one, so that the
+     * line does not compete with the orange of the action). The label of those buttons
+     * uses the text color. Hover and focus use the primary color. Needs 3:1 on the page
+     * and on the cards.
+     */
+    outline?: string;
+    /**
+     * A brighter accent for the fill of large buttons, where the label is white and
+     * bold (at least 18.7px, which counts as large text and only needs 3:1), and for
+     * the short rule under a hero title. Can be livelier than `action`. Optional.
+     */
+    accentLarge?: string;
+    /** Hover of `accentLarge`. */
+    accentLargeHover?: string;
     /** Fill of footers, headers and banners. */
     surface: GradientStops;
+    /** Optional middle color of the surface gradient (at 60%). */
+    surfaceMid?: string;
+    /** Angle of the surface gradient in degrees. Default 135. */
+    surfaceAngle?: number;
+    /** Optional 4px rule along the top edge of footers. Decorative: it carries no text. */
+    surfaceRule?: string;
     /**
-     * Dark color laid over a hero image so the text stays readable. At 85% or
-     * more it keeps the text above 4.5:1 even over a pure white photo.
+     * Color laid over a hero image so the text stays readable. At 74% or more it
+     * keeps white text above 4.5:1 even over a pure white photo.
      */
     scrim: string;
     /** Text on surfaces. */
@@ -73,13 +94,18 @@ export interface ThemeColors {
 /** Portfolio — black, white and gold. */
 export declare const editorialColors: ThemeColors;
 /**
- * El Blues es Femenino — deep purple, orange, teal, violet, lavender and magenta.
- * Fills are flat, except the surface (footer and banners): a calm gradient from
- * a deep teal to the raised purple of the cards.
+ * El Blues es Femenino — deep violet and orange.
+ *
+ * Orange carries everything you can press, in three versions chosen by where it
+ * sits: a burnt orange for button fills with white text, a light orange for links,
+ * outlines and arrows on the dark backgrounds, and the brand orange for large text
+ * and large buttons (a bold white label of 19px reaches 3.25:1, enough for large text).
  *
- * Orange carries the actions, in two versions: a burnt orange for button fills
- * (white text on it) and a lighter one for links, outlines and focus rings on the
- * dark backgrounds. The brand orange (#F35F1C) is too light for white text.
+ * Everything else is violet and lilac: a flat deep violet footer with a thin orange
+ * rule along its top, lilac lines on outlined buttons, white text. The rule of thumb:
+ * orange is for acting, and it goes as a surface or over a dark flat background. On
+ * the violet of a hero, or on a gradient, lines and texts are lilac or white, because
+ * orange there gives 3.75:1 and vibrates.
  */
 export declare const streamingColors: ThemeColors;
 /** Observatory — teal, cyan, amber, coral, red and deep purple. Flat colors. */

package/dist/types/theme/palettes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../../../src/theme/palettes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,8EAA8E;AAC9E,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IAEvB,uBAAuB;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IAEb,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IAEpB,gEAAgE;IAChE,MAAM,EAAE,aAAa,CAAC;IACtB,WAAW,EAAE,aAAa,CAAC;IAC3B,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IAEjB,4CAA4C;IAC5C,OAAO,EAAE,aAAa,CAAC;IACvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;IAEtB,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAEvC,MAAM,EAAE,YAAY,CAAC;IACrB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IAEjB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAWD,yCAAyC;AACzC,eAAO,MAAM,eAAe,EAAE,WAoC7B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,WAyD7B,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,EAAE,WAmD/B,CAAC"}
+{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../../../src/theme/palettes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,8EAA8E;AAC9E,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IAEvB,uBAAuB;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IAEb,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IAEpB,gEAAgE;IAChE,MAAM,EAAE,aAAa,CAAC;IACtB,WAAW,EAAE,aAAa,CAAC;IAC3B,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,4CAA4C;IAC5C,OAAO,EAAE,aAAa,CAAC;IACvB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;IAEtB,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAEvC,MAAM,EAAE,YAAY,CAAC;IACrB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IAEjB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAWD,yCAAyC;AACzC,eAAO,MAAM,eAAe,EAAE,WAoC7B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,EAAE,WAiE7B,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,EAAE,WAmD/B,CAAC"}

package/dist/types/theme/tokens.d.ts

@@ -5,7 +5,7 @@
  */
 import type { GradientStops, ThemeColors } from "./palettes";
 export type { GradientStops };
-export declare function linearGradient(from: string, to: string, angle?: number): string;
+export declare function linearGradient(from: string, to: string, angle?: number, mid?: string): string;
 export interface Gradients {
     /** Footers, headers and banners. */
     surface: string;
@@ -17,7 +17,7 @@ export interface Gradients {
  * Turns a palette's color pairs into CSS. When both colors of a pair are
  * equal the result looks flat, so flat themes and gradient themes share code.
  */
-export declare function createGradients(colors: Pick<ThemeColors, "surface" | "action" | "actionHover">): Gradients;
+export declare function createGradients(colors: Pick<ThemeColors, "surface" | "action" | "actionHover"> & Partial<Pick<ThemeColors, "surfaceMid" | "surfaceAngle">>): Gradients;
 export declare const tokens: {
     readonly spacing: 8;
     readonly radius: {

package/dist/types/theme/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7D,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,SAAM,GAAG,MAAM,CAE5E;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC,GAC9D,SAAS,CAMX;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BT,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7D,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,SAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAG1F;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC,GAC7D,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,cAAc,CAAC,CAAC,GAC1D,SAAS,CAWX;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BT,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sorayasm/vietri-ds",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",