@leabankab/component-library 8.6.0 → 8.7.0

package/dist/theme/token-types.d.ts

@@ -1,6 +1,6 @@
 export type ColorToken = "base" | "subtle" | "muted" | "contrast" | "accent";
-export type BgColorToken = ColorToken | "overlay";
-export type TextColorToken = ColorToken;
+export type BgColorToken = ColorToken | "overlay" | "hover" | "contrast-hover" | "contrast-accent";
+export type TextColorToken = ColorToken | "contrast-hover";
 export type BorderColorToken = ColorToken;
 export type BrandColorToken = "base" | "hover" | "subtle" | "contrast";
 export type StatusColorToken = "base" | "subtle";
@@ -15,8 +15,18 @@ export type ColorPath = `bg.${BgColorToken}` | `text.${TextColorToken}` | `borde
  * - `neutral`: the greys, for something that should carry no meaning.
  * - `success`, `info`, `warning`, `error`: the statuses.
  * - `contrast`: for use on a dark surface.
+ * - `muted`: the warm beige of `bg.muted`, for a tag on the website.
  */
-export type ColorRole = "primary" | "secondary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error" | "contrast";
+export type ColorRole = "primary" | "secondary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error" | "contrast" | "muted";
+/**
+ * The values a website component's `surface` prop can take: the background of
+ * a section or card, named after its `bg` token. `base` is white, `subtle` the
+ * grey, `muted` the beige, `contrast` the near-black and `contrast-accent` the
+ * deep purple. On the last two, text is `text.contrast`. Like `ColorRole`, it
+ * names a role and never a hue, and a component accepts the ones it has a
+ * design for.
+ */
+export type SurfaceRole = "base" | "subtle" | "muted" | "contrast" | "contrast-accent";
 /** Allowed values for MUI `Typography` `color` prop (semantic text tokens). */
 export type TypographyColorToken = `text.${TextColorToken}`;
 /** Common spacing scale factors (8px base via `theme.spacing` / `theme.space`). */

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

@@ -14,3 +14,23 @@ export declare const breakpoints: {
     readonly xl: 1536;
 };
 export type Breakpoint = keyof typeof breakpoints;
+/**
+ * The website's own widths, for the website components only, so a layout on
+ * leabank.no switches where it does today. Named as in the website's theme.
+ * There each is a `max-width` (`mobile` is up to 640px); here, as everywhere in
+ * the library, a CSS Module writes them mobile-first: `@media (min-width:
+ * 640px)` starts above `mobile`, and `max-width: 639.95px` ends below it. That
+ * moves each switch by one pixel, at exactly the width itself.
+ *
+ * They are not part of `Breakpoint`, so `Container` sizes and the responsive
+ * props of `Stack` and `Grid` keep their five steps.
+ */
+export declare const websiteBreakpoints: {
+    readonly mobile: 640;
+    readonly tablet: 768;
+    readonly desktop: 1024;
+    /** The website's `mobileHeader`: below it the header is the mobile one. */
+    readonly header: 1312;
+    readonly wide: 1440;
+};
+export type WebsiteBreakpoint = keyof typeof websiteBreakpoints;

package/dist/theme/tokens/font-family.d.ts

@@ -7,3 +7,9 @@
  * loads.
  */
 export declare const fontFamily = "\"ClashGrotesk\", \"ClashGrotesk Fallback\", sans-serif";
+/**
+ * The stack for code in CMS text (`RichText`'s `code` and `pre`), emitted as
+ * `--lea-font-family-mono`: the website's Courier New, then the platform's own
+ * monospace. Nothing else sets text in it, and no face is shipped for it.
+ */
+export declare const fontFamilyMono = "\"Courier New\", Courier, monospace";

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

@@ -12,3 +12,4 @@ export * from './spacing';
 export * from './text-styles';
 export * from './transitions';
 export * from './type-scale';
+export * from './widths';

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

@@ -5,5 +5,11 @@ export declare const shadows: {
     readonly lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10)";
     readonly xl: "0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10)";
     readonly "2xl": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    /**
+     * The website's shadow: an even 6px halo with no offset, the exact value of
+     * leabank.no. For the website components that float over a section (the
+     * elevated `IconButton`, the partner logo tile, the header dropdown).
+     */
+    readonly soft: "0 0 6px 0 rgba(86, 86, 118, 0.10)";
     readonly inner: "0px 2px 4px 0px rgba(0, 0, 0, 0.05) inset";
 };

package/dist/theme/tokens/text-styles.d.ts

@@ -18,6 +18,10 @@ type TextStyleDefinition = {
  * `label` move one step at a time; `heading` and `display` move two, because
  * neighbouring steps are too close to tell two headings apart.
  *
+ * `title` is a heading in the regular weight, for the website: the title of a
+ * link card (`title-md`) and an uppercase promo title (`title-xl`). It takes
+ * the sizes and line heights of `heading-md` and `heading-xl`.
+ *
  * The Figma text styles `heading/lg` and so on mirror this file.
  */
 export declare const textStyles: {
@@ -32,6 +36,10 @@ export declare const textStyles: {
         lg: TextStyleDefinition;
         xl: TextStyleDefinition;
     };
+    title: {
+        md: TextStyleDefinition;
+        xl: TextStyleDefinition;
+    };
     body: {
         xs: TextStyleDefinition;
         sm: TextStyleDefinition;

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

@@ -0,0 +1,10 @@
+/**
+ * Content widths in pixels, emitted as `--lea-width-{name}`. Not breakpoints:
+ * a width caps how wide content grows, a breakpoint is where a layout changes.
+ *
+ * - `section`: the content column of a website section, 1312px (1440 less 64
+ *   at each side). The Figma variable `width/section` holds the same number.
+ */
+export declare const widths: {
+    readonly section: 1312;
+};

package/dist/theme/types.d.ts

@@ -16,6 +16,12 @@ export type Palette = {
         accent: string;
         /** The see-through layer behind a dialog or drawer. */
         overlay: string;
+        /** Hover on a website card or panel with a light surface. */
+        hover: string;
+        /** Hover on a website card or panel with a dark surface. */
+        "contrast-hover": string;
+        /** The deep purple of a website section or card. Takes `text.contrast`. */
+        "contrast-accent": string;
     };
     text: {
         base: string;
@@ -23,6 +29,8 @@ export type Palette = {
         muted: string;
         accent: string;
         contrast: string;
+        /** Hover on a link on a dark surface, on the website. */
+        "contrast-hover": string;
     };
     border: {
         base: string;
@@ -66,4 +74,4 @@ export type EasingToken = keyof typeof import('./tokens/transitions').easings;
 export type DurationToken = keyof typeof import('./tokens/transitions').durations;
 export type LineHeightToken = keyof typeof import('./tokens/line-heights').lineHeights;
 export type { TextStyleToken } from './tokens/text-styles';
-export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorRole, ColorToken, SpacingFactor, StatusColorToken, TextColorToken, TypographyColorToken, } from './token-types';
+export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorRole, ColorToken, SpacingFactor, StatusColorToken, SurfaceRole, TextColorToken, TypographyColorToken, } from './token-types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leabankab/component-library",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "description": "@leabankab/component-library — Lea Bank's React component library.",
   "engines": {
     "node": ">=20"