@stats-forge/github-stats-forge-core 0.0.2 → 0.2.0

package/build/common/Card.js

@@ -1,6 +1,35 @@
+import { atRule, cssComment, el, renderMarkup, rule, style } from '../markup/index.js';
+import { ACCENT, firefoxFontSize, font, TITLE_BAND, TITLE_FIREFOX_SIZE } from './brand.js';
 import { getCardColors, isPrefixedHexColor, isValidGradient } from './color.js';
-import { encodeHTML } from './html.js';
 import { flexLayout } from './render.js';
+/** Stops every animation, whether the reader asked or the card did. */
+const NO_MOTION = {
+    'animation-duration': '0s !important',
+    'animation-delay': '0s !important',
+};
+/**
+ * Retrieves css animations for a card.
+ *
+ * @returns Animation css.
+ */
+const getAnimations = () => [
+    cssComment('Animations'),
+    atRule('@keyframes scaleInAnimation', rule('from', { transform: 'translate(-5px, 5px) scale(0)' }), rule('to', { transform: 'translate(-5px, 5px) scale(1)' })),
+    atRule('@keyframes fadeInAnimation', rule('from', { opacity: 0 }), rule('to', { opacity: 1 })),
+    atRule('@media (prefers-reduced-motion: reduce)', rule('*', NO_MOTION)),
+];
+/** One `linearGradient` definition, built from an angle followed by its stops. */
+const buildGradientDef = (id, bgColor) => {
+    const gradients = bgColor.slice(1);
+    return el('linearGradient', {
+        id,
+        gradientTransform: `rotate(${String(bgColor[0])})`,
+        gradientUnits: 'userSpaceOnUse',
+    }, gradients.map((grad, index) => el('stop', {
+        offset: `${(index * 100) / (gradients.length - 1)}%`,
+        'stop-color': `#${grad}`,
+    })));
+};
 class Card {
     width;
     height;
@@ -19,32 +48,19 @@ class Card {
     a11yDesc;
     /**
      * Creates a new card instance.
-     *
-     * The caller must ensure that the passed `titlePrefixIcon` is properly sanitized!
-     *
-     * @param props Card arguments.
-     * @param props.width Card width.
-     * @param props.height Card height.
-     * @param props.border_radius Card border radius.
-     * @param props.colors Card colors for light and dark mode.
-     * @param props.colors.light Card colors for light mode.
-     * @param props.colors.dark Card colors for dark mode, or `null` when no dark-mode override is needed.
-     * @param props.customTitle Card custom title.
-     * @param props.defaultTitle Card default title.
-     * @param props.titlePrefixIcon Sanitized card title prefix icon.
      */
-    constructor({ width = 100, height = 100, border_radius = 4.5, colors = { light: getCardColors({}), dark: null }, customTitle, defaultTitle = '', titlePrefixIcon, }) {
+    constructor({ width = 100, height = 100, border_radius = 8, colors = { light: getCardColors({}), dark: null }, customTitle, defaultTitle = '', titlePrefixIcon, }) {
         this.width = width;
         this.height = height;
         this.hideBorder = false;
         this.hideTitle = false;
-        this.border_radius = parseFloat(String(border_radius));
+        this.border_radius = Number.parseFloat(String(border_radius));
         this.colors = colors;
-        this.title = customTitle === undefined ? defaultTitle : customTitle;
-        this.css = '';
-        this.darkCss = '';
+        this.title = customTitle ?? defaultTitle;
+        this.css = [];
+        this.darkCss = [];
         this.paddingX = 25;
-        this.paddingY = 35;
+        this.paddingY = 30;
         this.titlePrefixIcon = titlePrefixIcon;
         this.animations = true;
         this.a11yTitle = '';
@@ -53,11 +69,6 @@ class Card {
     disableAnimations() {
         this.animations = false;
     }
-    /**
-     * @param props The props object.
-     * @param props.title Accessibility title.
-     * @param props.desc Accessibility description.
-     */
     setAccessibilityLabel({ title, desc }) {
         this.a11yTitle = title;
         this.a11yDesc = desc;
@@ -68,26 +79,14 @@ class Card {
      * Each builder receives the colors of its own color scheme,
      * so a card never handles a missing dark palette itself:
      * `dark` runs only when the card has dark colors, and always with non-null ones.
-     *
-     * @warning The caller must ensure that the returned CSS strings are properly sanitized!
-     *
-     * @param props The props object.
-     * @param props.light Builds the CSS applied unconditionally (light/default mode).
-     * @param props.dark Builds the CSS placed inside a `@media (prefers-color-scheme: dark)` block.
      */
     setCSS({ light, dark }) {
         this.css = light(this.colors.light);
-        this.darkCss = this.colors.dark ? dark(this.colors.dark) : '';
+        this.darkCss = this.colors.dark ? dark(this.colors.dark) : [];
     }
-    /**
-     * @param value Whether to hide the border or not.
-     */
     setHideBorder(value) {
         this.hideBorder = value;
     }
-    /**
-     * @param value Whether to hide the title or not.
-     */
     setHideTitle(value) {
         if (value && !this.hideTitle) {
             this.height -= 30;
@@ -97,69 +96,61 @@ class Card {
         }
         this.hideTitle = value;
     }
-    /**
-     * @param text The title to set.
-     */
     setTitle(text) {
         this.title = text;
     }
-    /**
-     * @returns The rendered card title.
-     */
+    /** @returns The rendered card title. */
     renderTitle() {
-        const titleText = `
-      <text
-        x="0"
-        y="0"
-        class="header"
-        data-testid="header"
-      >${encodeHTML(this.title)}</text>
-    `;
-        const prefixIcon = `
-      <svg
-        class="icon"
-        x="0"
-        y="-13"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        height="16"
-      >
-        ${String(this.titlePrefixIcon)}
-      </svg>
-    `;
-        return `
-      <g
-        data-testid="card-title"
-        transform="translate(${this.paddingX}, ${this.paddingY})"
-      >
-        ${flexLayout({
-            items: [this.titlePrefixIcon ? prefixIcon : '', titleText],
+        return el('g', {
+            'data-testid': 'card-title',
+            transform: `translate(${this.paddingX}, ${this.paddingY})`,
+        }, flexLayout({
+            items: [
+                this.titlePrefixIcon &&
+                    el('svg', {
+                        class: 'title-icon',
+                        x: 0,
+                        y: -13,
+                        viewBox: '0 0 16 16',
+                        version: '1.1',
+                        width: 16,
+                        height: 16,
+                    }, this.titlePrefixIcon),
+                el('text', { x: 0, y: 0, class: 'header', 'data-testid': 'header' }, this.title),
+            ],
             gap: 25,
-        }).join('')}
-      </g>
-    `;
+        }), el('rect', {
+            'data-testid': 'title-accent',
+            class: 'title-accent',
+            x: 0,
+            y: ACCENT.y,
+            width: ACCENT.width,
+            height: ACCENT.height,
+            rx: ACCENT.height / 2,
+        }));
+    }
+    /** Where the body starts, and so where the title band ends. */
+    get bodyOffset() {
+        return this.hideTitle ? this.paddingX : this.paddingY + 25;
     }
     /**
-     * @returns The rendered card gradient.
+     * The band behind the title. Its top corners follow the card's own and its bottom
+     * ones stay square, so it meets the body as an edge rather than a floating box.
+     *
+     * @returns The rendered title band.
      */
+    renderTitleBand() {
+        const height = this.bodyOffset - TITLE_BAND.gap;
+        const innerWidth = this.width - 1;
+        const r = Math.min(this.border_radius, height, innerWidth / 2);
+        return el('path', {
+            'data-testid': 'title-band',
+            class: 'title-band',
+            d: `M0.5 ${0.5 + r}a${r} ${r} 0 0 1 ${r} ${-r}h${innerWidth - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${height - r - 0.5}h${-innerWidth}z`,
+        });
+    }
+    /** @returns The card's gradient definitions, or nothing when no color is a gradient. */
     renderGradient() {
-        const buildGradientDef = (id, bgColor) => {
-            const gradients = bgColor.slice(1);
-            return `
-          <linearGradient
-            id="${id}"
-            gradientTransform="rotate(${String(bgColor[0])})"
-            gradientUnits="userSpaceOnUse"
-          >
-            ${gradients
-                .map((grad, index) => {
-                const offset = (index * 100) / (gradients.length - 1);
-                return `<stop offset="${offset}%" stop-color="#${grad}" />`;
-            })
-                .join(',')}
-          </linearGradient>`;
-        };
         if (typeof this.colors.light.bgColor === 'object' &&
             !isValidGradient(this.colors.light.bgColor)) {
             throw new Error(`Invalid gradient: ${this.colors.light.bgColor.join(',')}`);
@@ -169,66 +160,32 @@ class Card {
             !isValidGradient(this.colors.dark.bgColor)) {
             throw new Error(`Invalid dark gradient: ${this.colors.dark.bgColor.join(',')}`);
         }
-        return `
-        <defs>
-          ${typeof this.colors.light.bgColor === 'object' ? buildGradientDef('gradient', this.colors.light.bgColor) : ''}
-          ${this.colors.dark && typeof this.colors.dark.bgColor === 'object' ? buildGradientDef('gradient-dark', this.colors.dark.bgColor) : ''}
-        </defs>
-        `;
+        const defs = [
+            typeof this.colors.light.bgColor === 'object' &&
+                buildGradientDef('gradient', this.colors.light.bgColor),
+            this.colors.dark &&
+                typeof this.colors.dark.bgColor === 'object' &&
+                buildGradientDef('gradient-dark', this.colors.dark.bgColor),
+        ].filter(Boolean);
+        return defs.length === 0 ? undefined : el('defs', {}, defs);
     }
-    /**
-     * Retrieves css animations for a card.
-     *
-     * @returns Animation css.
-     */
-    getAnimations = () => {
-        return `
-      /* Animations */
-      @keyframes scaleInAnimation {
-        from {
-          transform: translate(-5px, 5px) scale(0);
-        }
-        to {
-          transform: translate(-5px, 5px) scale(1);
-        }
-      }
-      @keyframes fadeInAnimation {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-    `;
-    };
     /**
      * Builds the @media (prefers-color-scheme: dark) CSS block for the card.
-     * Returns an empty string when no dark colors are set.
+     * Returns nothing when no dark colors are set.
      */
     renderDarkMediaBlock() {
         if (!this.colors.dark) {
-            return '';
+            return undefined;
         }
         const bgFill = typeof this.colors.dark.bgColor === 'object'
             ? 'url(#gradient-dark)'
             : this.colors.dark.bgColor;
-        return `
-          @media (prefers-color-scheme: dark) {
-            .header { fill: ${this.colors.dark.titleColor}; }
-            .card-bg { fill: ${bgFill}; stroke: ${this.colors.dark.borderColor}; }
-            ${this.darkCss}
-          }`;
+        return atRule('@media (prefers-color-scheme: dark)', rule('.header', { fill: this.colors.dark.titleColor }), rule('.title-icon', { fill: this.colors.dark.iconColor }), rule('.title-accent', { fill: this.colors.dark.iconColor }), rule('.title-band', { fill: this.colors.dark.titleColor }), rule('.card-bg', { fill: bgFill, stroke: this.colors.dark.borderColor }), this.darkCss);
     }
-    /**
-     * The caller must ensure that the passed `body` string is properly sanitized!
-     *
-     * @param body The sanitized inner body of the card.
-     * @returns The rendered card.
-     */
+    /** @returns The rendered card. */
     render(body) {
         if (!Number.isFinite(this.border_radius)) {
-            throw new Error(`Invalid border radius: "${this.border_radius}"`);
+            throw new TypeError(`Invalid border radius: "${this.border_radius}"`);
         }
         if (!isPrefixedHexColor(this.colors.light.titleColor)) {
             throw new Error(`Invalid title color: "${this.colors.light.titleColor}"`);
@@ -241,65 +198,41 @@ class Card {
             : isPrefixedHexColor(this.colors.light.bgColor))) {
             throw new Error(`Invalid background color: ${String(this.colors.light.bgColor)}`);
         }
-        return `
-      <svg
-        width="${this.width}"
-        height="${this.height}"
-        viewBox="0 0 ${this.width} ${this.height}"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        role="img"
-        aria-labelledby="titleId descId"
-      >
-        <title id="titleId">${encodeHTML(this.a11yTitle)}</title>
-        <desc id="descId">${encodeHTML(this.a11yDesc)}</desc>
-        <style>
-          .header {
-            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
-            fill: ${this.colors.light.titleColor};
-            animation: fadeInAnimation 0.8s ease-in-out forwards;
-          }
-          @supports(-moz-appearance: auto) {
-            /* Selector detects Firefox */
-            .header { font-size: 15.5px; }
-          }
-          ${this.css}
-          ${this.renderDarkMediaBlock()}
-
-          ${this.getAnimations()}
-          ${this.animations
-            ? ''
-            : `* { animation-duration: 0s !important; animation-delay: 0s !important; }`}
-        </style>
-
-        ${this.renderGradient()}
-
-        <rect
-          data-testid="card-bg"
-          class="card-bg"
-          x="0.5"
-          y="0.5"
-          rx="${this.border_radius}"
-          height="99%"
-          stroke="${this.colors.light.borderColor}"
-          width="${this.width - 1}"
-          fill="${typeof this.colors.light.bgColor === 'object'
-            ? 'url(#gradient)'
-            : this.colors.light.bgColor}"
-          stroke-opacity="${this.hideBorder ? 0 : 1}"
-        />
-
-        ${this.hideTitle ? '' : this.renderTitle()}
-
-        <g
-          data-testid="main-card-body"
-          transform="translate(0, ${this.hideTitle ? this.paddingX : this.paddingY + 20})"
-        >
-          ${body}
-        </g>
-      </svg>
-    `;
+        return renderMarkup(el('svg', {
+            width: this.width,
+            height: this.height,
+            viewBox: `0 0 ${this.width} ${this.height}`,
+            fill: 'none',
+            xmlns: 'http://www.w3.org/2000/svg',
+            role: 'img',
+            'aria-labelledby': 'title-id desc-id',
+        }, el('title', { id: 'title-id' }, this.a11yTitle), el('desc', { id: 'desc-id' }, this.a11yDesc), style(rule('.header', {
+            font: font('semibold', 'title'),
+            fill: this.colors.light.titleColor,
+            animation: 'fadeInAnimation 0.8s ease-in-out forwards',
+        }), cssComment('The icon reads against the title rather than with it, so it keeps its own color.'), rule('.title-icon', {
+            fill: this.colors.light.iconColor,
+            animation: 'fadeInAnimation 0.8s ease-in-out forwards',
+        }), rule('.title-accent', {
+            fill: this.colors.light.iconColor,
+            animation: 'fadeInAnimation 0.8s ease-in-out forwards',
+        }), rule('.title-band', { fill: this.colors.light.titleColor, opacity: TITLE_BAND.opacity }), firefoxFontSize(['.header'], TITLE_FIREFOX_SIZE), this.css, this.renderDarkMediaBlock(), getAnimations(), !this.animations && rule('*', NO_MOTION)), this.renderGradient(), el('rect', {
+            'data-testid': 'card-bg',
+            class: 'card-bg',
+            x: 0.5,
+            y: 0.5,
+            rx: this.border_radius,
+            height: '99%',
+            stroke: this.colors.light.borderColor,
+            width: this.width - 1,
+            fill: typeof this.colors.light.bgColor === 'object'
+                ? 'url(#gradient)'
+                : this.colors.light.bgColor,
+            'stroke-opacity': this.hideBorder ? 0 : 1,
+        }), !this.hideTitle && this.renderTitleBand(), !this.hideTitle && this.renderTitle(), el('g', {
+            'data-testid': 'main-card-body',
+            transform: `translate(0, ${this.bodyOffset})`,
+        }, body)));
     }
 }
 export { Card };
-export default Card;

package/build/common/I18n.d.ts

@@ -6,19 +6,13 @@ type TranslationsMap = Record<string, Record<string, string>>;
 declare class I18n<Translations extends TranslationsMap = TranslationsMap> {
     locale: string;
     translations: Translations;
-    /**
-     * @param props Constructor arguments.
-     * @param props.locale Locale.
-     * @param props.translations Translations.
-     */
     constructor({ locale, translations, }: {
         locale?: string | undefined;
         translations: Translations;
     });
     /**
-     * Get translation.
+     * Get translation, falling back to the English string when the locale has no entry for the key.
      *
-     * @param str String to translate.
      * @returns Translated string.
      */
     t(str: keyof Translations & string): string;

package/build/common/I18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"I18n.d.ts","sourceRoot":"","sources":["../../src/common/I18n.ts"],"names":[],"mappings":"AAEA,uDAAuD;AACvD,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9D;;GAEG;AACH,cAAM,IAAI,CAAC,YAAY,SAAS,eAAe,GAAG,eAAe;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAE3B;;;;OAIG;gBACS,EACV,MAAM,EACN,YAAY,GACb,EAAE;QAED,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC5B,YAAY,EAAE,YAAY,CAAC;KAC5B;IAKD;;;;;OAKG;IACH,CAAC,CAAC,GAAG,EAAE,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM;CAa5C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"I18n.d.ts","sourceRoot":"","sources":["../../src/common/I18n.ts"],"names":[],"mappings":"AAEA,uDAAuD;AACvD,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9D;;GAEG;AACH,cAAM,IAAI,CAAC,YAAY,SAAS,eAAe,GAAG,eAAe;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAE3B,YAAY,EACV,MAAM,EACN,YAAY,GACb,EAAE;QAED,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC5B,YAAY,EAAE,YAAY,CAAC;KAC5B,EAGA;IAED;;;;OAIG;IACH,CAAC,CAAC,GAAG,EAAE,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAiB1C;CACF;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/build/common/I18n.js

@@ -5,27 +5,26 @@ const FALLBACK_LOCALE = 'en';
 class I18n {
     locale;
     translations;
-    /**
-     * @param props Constructor arguments.
-     * @param props.locale Locale.
-     * @param props.translations Translations.
-     */
     constructor({ locale, translations, }) {
         this.locale = locale || FALLBACK_LOCALE;
         this.translations = translations;
     }
     /**
-     * Get translation.
+     * Get translation, falling back to the English string when the locale has no entry for the key.
      *
-     * @param str String to translate.
      * @returns Translated string.
      */
     t(str) {
         const translation = this.translations[str];
+        // A key the type says is present can still be missing at runtime: a card passes
+        // a locale table it built, and `i18n.test.ts` covers exactly that.
+        // oxlint-disable-next-line typescript/no-unnecessary-condition
         if (!translation) {
             throw new Error(`${str} Translation string not found`);
         }
-        const localized = translation[this.locale];
+        // A key is written in `en` first and translated afterwards, so a locale the key has
+        // not reached yet reads the English string rather than failing the whole card.
+        const localized = translation[this.locale] ?? translation[FALLBACK_LOCALE];
         if (!localized) {
             throw new Error(`'${str}' translation not found for locale '${this.locale}'`);
         }

package/build/common/brand.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The visual vocabulary every card draws with: one font stack, one type scale,
+ * one set of widths and the accent rule that marks a card as this tool's.
+ * A card composes from here; it never writes a `font` shorthand or a size of its own.
+ */
+import type { CssChild } from '../markup/index.ts';
+/** The type scale, in px. */
+declare const FONT_SIZE: {
+    readonly display: 22;
+    readonly title: 18;
+    readonly lead: 16;
+    readonly body: 14;
+    readonly meta: 13;
+    readonly small: 12;
+    readonly micro: 11;
+};
+/**
+ * The one size off the scale. Firefox is given 15.5px rather than the scale's next step down,
+ * because that half pixel is inherited tuning for long titles and nothing here can test the
+ * wrapping it protects; it lives with the scale so `brand.ts` still owns every size a card draws.
+ */
+declare const TITLE_FIREFOX_SIZE = 15.5;
+/** `regular` labels, `semibold` the values they label, `bold` the rank glyph alone. */
+declare const FONT_WEIGHT: {
+    readonly regular: 400;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+type FontSize = keyof typeof FONT_SIZE;
+type FontWeight = keyof typeof FONT_WEIGHT;
+/** @returns The `font` shorthand for one step of the scale. */
+declare const font: (weight: FontWeight, size: FontSize) => string;
+/**
+ * Firefox lays Segoe UI out wider than the other engines, so text that fits
+ * elsewhere overflows there; each affected selector steps down a size.
+ *
+ * @returns The `@supports` block that detects Firefox and resizes those selectors.
+ */
+declare const firefoxFontSize: (selectors: Array<string>, size: FontSize | number) => CssChild;
+/**
+ * The widths a card may default to. A card picks the step nearest what its layout
+ * needs, so cards stacked in a README share an edge instead of forming a ragged one.
+ */
+declare const CARD_WIDTH: {
+    readonly compact: 300;
+    readonly standard: 400;
+    readonly wide: 500;
+};
+/** The tinted band behind every card title: the mark a card is recognized by. */
+declare const TITLE_BAND: {
+    /** Enough to read as a band on every theme, little enough to leave the title legible. */
+    readonly opacity: 0.08;
+    /** Clear air the band leaves between its foot and the first row of the body. */
+    readonly gap: 9;
+};
+/** The rule under the title icon, sitting inside the band. */
+declare const ACCENT: {
+    readonly width: 32;
+    readonly height: 2;
+    /** Below the title's descenders, clear of the band's foot. */
+    readonly y: 8;
+};
+/**
+ * The title icon each card wears. They are distinct on purpose: with the band
+ * and the shared type, the icon is what tells one card from another at a glance.
+ */
+declare const CARD_ICON: {
+    contributedTo: import("../markup/element.ts").MarkupElement;
+    gist: import("../markup/element.ts").MarkupElement;
+    repo: import("../markup/element.ts").MarkupElement;
+    stats: import("../markup/element.ts").MarkupElement;
+    topLanguages: import("../markup/element.ts").MarkupElement;
+    wakatime: import("../markup/element.ts").MarkupElement;
+};
+export { ACCENT, CARD_ICON, CARD_WIDTH, FONT_SIZE, FONT_WEIGHT, firefoxFontSize, font, TITLE_BAND, TITLE_FIREFOX_SIZE, };
+//# sourceMappingURL=brand.d.ts.map

package/build/common/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/common/brand.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAO1D,6BAA6B;AAC7B,QAAA,MAAM,SAAS;aACb,OAAO,EAAE,EAAE;aACX,KAAK,EAAE,EAAE;aACT,IAAI,EAAE,EAAE;aACR,IAAI,EAAE,EAAE;aACR,IAAI,EAAE,EAAE;aACR,KAAK,EAAE,EAAE;aACT,KAAK,EAAE,EAAE;CACD,CAAC;AAEX;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,OAAO,CAAC;AAEhC,uFAAuF;AACvF,QAAA,MAAM,WAAW;aACf,OAAO,EAAE,GAAG;aACZ,QAAQ,EAAE,GAAG;aACb,IAAI,EAAE,GAAG;CACD,CAAC;AAEX,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AACvC,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAE3C,+DAA+D;AAC/D,QAAA,MAAM,IAAI,WAAY,UAAU,QAAQ,QAAQ,KAAG,MAC0B,CAAC;AAE9E;;;;;GAKG;AACH,QAAA,MAAM,eAAe,cAAe,KAAK,CAAC,MAAM,CAAC,QAAQ,QAAQ,GAAG,MAAM,KAAG,QAO5E,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,UAAU;aACd,OAAO,EAAE,GAAG;aACZ,QAAQ,EAAE,GAAG;aACb,IAAI,EAAE,GAAG;CACD,CAAC;AAEX,iFAAiF;AACjF,QAAA,MAAM,UAAU;IACd,yFAAyF;aACzF,OAAO,EAAE,IAAI;IACb,gFAAgF;aAChF,GAAG,EAAE,CAAC;CACE,CAAC;AAEX,8DAA8D;AAC9D,QAAA,MAAM,MAAM;aACV,KAAK,EAAE,EAAE;aACT,MAAM,EAAE,CAAC;IACT,8DAA8D;aAC9D,CAAC,EAAE,CAAC;CACI,CAAC;AAEX;;;GAGG;AACH,QAAA,MAAM,SAAS;;;;;;;CAOkB,CAAC;AAElC,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,eAAe,EACf,IAAI,EACJ,UAAU,EACV,kBAAkB,GACnB,CAAC"}

package/build/common/brand.js

@@ -0,0 +1,73 @@
+import { atRule, cssComment, rule } from '../markup/index.js';
+import { icons } from './icons.js';
+const FONT_STACK = `'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif`;
+/** The type scale, in px. */
+const FONT_SIZE = {
+    display: 22,
+    title: 18,
+    lead: 16,
+    body: 14,
+    meta: 13,
+    small: 12,
+    micro: 11,
+};
+/**
+ * The one size off the scale. Firefox is given 15.5px rather than the scale's next step down,
+ * because that half pixel is inherited tuning for long titles and nothing here can test the
+ * wrapping it protects; it lives with the scale so `brand.ts` still owns every size a card draws.
+ */
+const TITLE_FIREFOX_SIZE = 15.5;
+/** `regular` labels, `semibold` the values they label, `bold` the rank glyph alone. */
+const FONT_WEIGHT = {
+    regular: 400,
+    semibold: 600,
+    bold: 700,
+};
+/** @returns The `font` shorthand for one step of the scale. */
+const font = (weight, size) => `${String(FONT_WEIGHT[weight])} ${String(FONT_SIZE[size])}px ${FONT_STACK}`;
+/**
+ * Firefox lays Segoe UI out wider than the other engines, so text that fits
+ * elsewhere overflows there; each affected selector steps down a size.
+ *
+ * @returns The `@supports` block that detects Firefox and resizes those selectors.
+ */
+const firefoxFontSize = (selectors, size) => {
+    const px = typeof size === 'number' ? size : FONT_SIZE[size];
+    return atRule('@supports(-moz-appearance: auto)', cssComment('Selector detects Firefox'), selectors.map((selector) => rule(selector, { 'font-size': `${String(px)}px` })));
+};
+/**
+ * The widths a card may default to. A card picks the step nearest what its layout
+ * needs, so cards stacked in a README share an edge instead of forming a ragged one.
+ */
+const CARD_WIDTH = {
+    compact: 300,
+    standard: 400,
+    wide: 500,
+};
+/** The tinted band behind every card title: the mark a card is recognized by. */
+const TITLE_BAND = {
+    /** Enough to read as a band on every theme, little enough to leave the title legible. */
+    opacity: 0.08,
+    /** Clear air the band leaves between its foot and the first row of the body. */
+    gap: 9,
+};
+/** The rule under the title icon, sitting inside the band. */
+const ACCENT = {
+    width: 32,
+    height: 2,
+    /** Below the title's descenders, clear of the band's foot. */
+    y: 8,
+};
+/**
+ * The title icon each card wears. They are distinct on purpose: with the band
+ * and the shared type, the icon is what tells one card from another at a glance.
+ */
+const CARD_ICON = {
+    contributedTo: icons.prs_merged,
+    gist: icons.gist,
+    repo: icons.repo,
+    stats: icons.pulse,
+    topLanguages: icons.code,
+    wakatime: icons.clock,
+};
+export { ACCENT, CARD_ICON, CARD_WIDTH, FONT_SIZE, FONT_WEIGHT, firefoxFontSize, font, TITLE_BAND, TITLE_FIREFOX_SIZE, };