@cronos-labs/ui 0.2.0

package/dist/tokens.d.ts

@@ -0,0 +1,252 @@
+export declare const desktopViewportQuery: string;
+export declare const tokens: {
+    readonly colors: {
+        readonly light: "#ffffff";
+        readonly background: "#ffffff";
+        readonly backgroundDark: "#020304";
+        readonly backgroundDarkMuted: "#0c0c10";
+        readonly surfaceBlack: "#060606";
+        readonly dark: "#061121";
+        readonly ink: "#000000";
+        readonly inkSoft: "#000c33";
+        readonly body: "#082038";
+        readonly grey: "#172d4a";
+        readonly border: "#d1d3d7";
+        readonly surface: "#f5f5f5";
+        readonly surfaceDark: "#121212";
+        readonly surfaceDarkLayer: "#171717";
+        readonly surfaceDarkElevated: "#1a1a1a";
+        readonly surfaceDarkPanel: "#141414";
+        readonly surfaceDarkHover: "#1c1c1c";
+        readonly surfaceDarkPressed: "#202020";
+        readonly surfaceDarkSelected: "#232323";
+        readonly surfaceDarkMuted: "#272727";
+        readonly surfacePillDark: "#2c2c2c";
+        readonly brandPrimary: "#129dff";
+        readonly brandPrimaryBright: "#62d9ff";
+        readonly brandPrimarySurface: "#c9efff";
+        readonly brandSecondary: "#1cf1d8";
+        readonly brandSky: "#4cdbff";
+        readonly brandSkyBright: "#81e3ff";
+        readonly brandSkyMuted: "#c7f2ff";
+        readonly brandSkySoft: "#aaeaff";
+        readonly brandSkySurface: "#effbfe";
+        readonly brandSkySurfaceLight: "#e5faff";
+        readonly brandSkyTintSubtle: "rgb(76 219 255 / 0.1)";
+        readonly brandSkyTintSoft: "rgb(76 219 255 / 0.13)";
+        readonly brandSkyTintStrong: "rgb(76 219 255 / 0.14)";
+        readonly brandSkyDivider: "rgb(76 219 255 / 0.4)";
+        readonly footerBadgeSurface: "#a7ebff";
+        readonly footerTextMuted: "#1a4e5d";
+        readonly footerDivider: "rgb(26 78 93 / 0.32)";
+        readonly accentSky: "#2abee4";
+        readonly success: "#25d66d";
+        readonly navSurface: "#0b192e";
+        readonly surfaceGlass: "rgb(255 255 255 / 0.3)";
+        readonly surfaceGlassStrong: "rgb(255 255 255 / 0.6)";
+        readonly overlayBorderSubtle: "rgb(255 255 255 / 0.12)";
+        readonly overlayBorderSoft: "rgb(255 255 255 / 0.16)";
+        readonly overlayBorderMuted: "rgb(255 255 255 / 0.14)";
+        readonly overlayBorderStrong: "rgb(255 255 255 / 0.18)";
+        readonly overlayBorderFaint: "rgb(255 255 255 / 0.06)";
+        readonly overlayGuide: "rgb(255 255 255 / 0.4)";
+        readonly overlaySurfaceDark: "rgb(44 44 44 / 0.2)";
+        readonly overlaySurfaceSubtle: "rgb(255 255 255 / 0.05)";
+        readonly overlaySurfaceSoft: "rgb(255 255 255 / 0.06)";
+        readonly overlaySurfaceTrack: "rgb(255 255 255 / 0.07)";
+        readonly overlaySurfaceStrong: "rgb(255 255 255 / 0.08)";
+        readonly overlayTextMuted: "rgb(255 255 255 / 0.5)";
+        readonly overlayTextSubtle: "rgb(255 255 255 / 0.58)";
+        readonly overlayTextSoft: "rgb(255 255 255 / 0.72)";
+        readonly overlayTextStrong: "rgb(255 255 255 / 0.84)";
+        readonly overlayTextHigh: "rgb(255 255 255 / 0.86)";
+        readonly borderDarkSubtle: "#2a2a2a";
+        readonly borderDarkDefault: "#2b2b2b";
+        readonly borderDarkStrong: "#2d2d2d";
+        readonly borderDarkEmphasis: "#3a3a3a";
+        readonly borderDarkInput: "#33373d";
+        readonly scrollbarThumb: "#5a5f67";
+        readonly textDarkMuted: "#717780";
+        readonly textDarkSubtle: "#7d828b";
+        readonly textDarkSecondary: "#818791";
+        readonly textDarkLabel: "#8e9899";
+        readonly textDarkDisabled: "#ababad";
+        readonly textDarkHigh: "#d3d3d3";
+        readonly textLightMuted: "#d7dcde";
+        readonly textLightSoft: "#f2f6fa";
+        readonly heroTextMuted: "rgb(6 17 33 / 0.72)";
+        readonly textMutedStrong: "rgb(0 0 0 / 0.62)";
+        readonly surfaceGlassSoft: "rgb(255 255 255 / 0.22)";
+        readonly accentGold: "#ffb819";
+        readonly accentGoldBright: "#ffbf28";
+        readonly accentGoldSoft: "#feb312";
+        readonly accentGoldTint: "#ffff8d";
+        readonly accentHighlight: "#ffff5f";
+        readonly accentPositive: "#1ee17f";
+        readonly accentPositiveSoft: "#7eecce";
+        readonly accentPositiveTintSubtle: "rgb(30 225 127 / 0.08)";
+        readonly accentPositiveTintSoft: "rgb(30 225 127 / 0.13)";
+        readonly accentPositiveTintStrong: "rgb(30 225 127 / 0.2)";
+        readonly accentNegative: "#fa2961";
+        readonly accentNegativeTintSubtle: "rgb(250 41 97 / 0.08)";
+        readonly accentNegativeTintSoft: "rgb(239 68 68 / 0.13)";
+        readonly accentNegativeTintStrong: "rgb(250 41 97 / 0.2)";
+        readonly accentLavender: "#e6a6ff";
+        readonly accentLavenderSoft: "#fcc2ff";
+        readonly accentLavenderTintSubtle: "rgb(168 85 247 / 0.08)";
+        readonly accentLavenderTintSoft: "rgb(168 85 247 / 0.13)";
+        readonly accentPink: "#ff5ecc";
+        readonly warning: "#ff981f";
+        readonly warningTintStrong: "rgb(255 152 31 / 0.2)";
+        readonly error: "#a31443";
+        readonly brandPrimaryTintSubtle: "rgb(18 157 255 / 0.04)";
+        readonly brandPrimaryTintSoft: "rgb(18 157 255 / 0.18)";
+        readonly brandPrimaryTintBorder: "rgb(18 157 255 / 0.22)";
+        readonly focusRing: "rgb(0 61 202 / 0.18)";
+    };
+    readonly sizes: {
+        readonly zero: "0";
+        readonly xxxs: "6px";
+        readonly xxs: "8px";
+        readonly xs: "12px";
+        readonly sm: "16px";
+        readonly md: "20px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly xxl: "40px";
+        readonly xxxl: "48px";
+        readonly '4xl': "56px";
+        readonly '5xl': "64px";
+    };
+    readonly mediaQueries: {
+        readonly xs: "@media (min-width: 420px)";
+        readonly sm: "@media (min-width: 768px)";
+        readonly md: "@media (min-width: 1024px)";
+        readonly lg: "@media (min-width: 1024px)";
+    };
+    readonly breakpoints: {
+        readonly xs: 420;
+        readonly sm: 768;
+        readonly md: 1024;
+        readonly lg: 1024;
+    };
+    readonly borderRadius: {
+        readonly default: "8px";
+        readonly input: "12px";
+        readonly card: "16px";
+        readonly cardLg: "20px";
+        readonly control: "18px";
+        readonly panel: "26px";
+        readonly panelSm: "22px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly capsule: "40px";
+        readonly pill: "999px";
+    };
+    readonly fontWeight: {
+        readonly default: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+        readonly black: 900;
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly base: "\"Red Hat Display\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+            readonly instrument: "\"Instrument Sans\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+            readonly supporting: "\"Manrope\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+            readonly ui: "\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+        };
+        readonly fontSize: {
+            readonly eyebrow: "0.75rem";
+            readonly supporting: "0.82rem";
+            readonly label: "0.85rem";
+            readonly bodySm: "0.875rem";
+            readonly footnote: "0.9rem";
+            readonly body: "1rem";
+            readonly bodyLg: "1.05rem";
+            readonly bodyXl: "1.25rem";
+            readonly metric: "1.1rem";
+            readonly sectionTitle: "1.875rem";
+            readonly cardTitle: "1rem";
+            readonly displaySm: "3rem";
+            readonly displayMd: "4.5rem";
+            readonly displayLg: "5.9rem";
+        };
+        readonly lineHeight: {
+            readonly tight: 0.9;
+            readonly snug: 1.2;
+            readonly compact: 1.4;
+            readonly default: 1.5;
+            readonly relaxed: 1.6;
+            readonly sectionTitle: "2.25rem";
+            readonly cardTitle: "1.5rem";
+            readonly bodySm: "1.25rem";
+        };
+        readonly letterSpacing: {
+            readonly wide: "0.08em";
+        };
+    };
+    readonly shadow: {
+        readonly sm: "0 8px 24px rgba(17, 17, 17, 0.08)";
+        readonly md: "0 12px 32px rgba(17, 17, 17, 0.12)";
+        readonly lg: "0 24px 64px rgba(0, 0, 0, 0.28)";
+        readonly overlayModal: "0 24px 80px rgba(0, 0, 0, 0.48)";
+        readonly tooltip: "0 10px 24px rgba(0, 0, 0, 0.34)";
+        readonly glass: "0 10px 11.9px rgba(0, 61, 202, 0.1)";
+        readonly button: "0 10px 24px rgba(0, 61, 202, 0.08)";
+        readonly skyGlow: "0 18px 36px rgb(76 219 255 / 0.12)";
+        readonly positiveGlow: "0 18px 36px rgb(30 225 127 / 0.12)";
+        readonly negativeGlow: "0 18px 36px rgb(250 41 97 / 0.12)";
+        readonly lavenderGlow: "0 18px 36px rgb(230 166 255 / 0.12)";
+    };
+    readonly effects: {
+        readonly blur: {
+            readonly sm: "2px";
+            readonly md: "6px";
+            readonly lg: "10px";
+        };
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly tooltip: "140ms";
+            readonly fast: "180ms";
+            readonly normal: "240ms";
+            readonly surface: "580ms";
+            readonly slow: "1200ms";
+        };
+        readonly easing: {
+            readonly standard: "ease";
+            readonly emphasized: "cubic-bezier(0.16, 1, 0.3, 1)";
+            readonly emphasizedInOut: "cubic-bezier(0.76, 0, 0.24, 1)";
+        };
+    };
+    readonly layout: {
+        readonly maxContentWidth: "1200px";
+        readonly landingContentWidth: "1120px";
+        readonly landingWideWidth: "1196px";
+        readonly readingWidth: "720px";
+        readonly bodyContentWidth: "760px";
+        readonly featureContentWidth: "1024px";
+        readonly formInlineWidth: "360px";
+        readonly formCardWidth: "480px";
+        readonly pagePaddingInline: "16px";
+        readonly pagePaddingInlineWide: "80px";
+        readonly pagePaddingBlock: "24px";
+        readonly pagePaddingBlockLg: "32px";
+        readonly pagePaddingBlockXl: "64px";
+        readonly headerReservedSpace: "84px";
+        readonly headerReservedSpaceLg: "80px";
+        readonly brandLogoMarkSize: "49px";
+        readonly brandLogoGap: "13px";
+        readonly brandWordmarkWidth: "138px";
+        readonly brandWordmarkHeight: "24.333px";
+        readonly headerActionWidth: "154px";
+    };
+    readonly zIndex: {
+        readonly base: 0;
+        readonly sticky: 10;
+        readonly overlay: 100;
+    };
+};

package/dist/tokens.js

@@ -0,0 +1,253 @@
+const breakpoints = {
+    xs: 420,
+    sm: 768,
+    md: 1024,
+    lg: 1024,
+};
+export const desktopViewportQuery = `(min-width: ${breakpoints.lg}px)`;
+export const tokens = {
+    colors: {
+        light: '#ffffff',
+        background: '#ffffff',
+        backgroundDark: '#020304',
+        backgroundDarkMuted: '#0c0c10',
+        surfaceBlack: '#060606',
+        dark: '#061121',
+        ink: '#000000',
+        inkSoft: '#000c33',
+        body: '#082038',
+        grey: '#172d4a',
+        border: '#d1d3d7',
+        surface: '#f5f5f5',
+        surfaceDark: '#121212',
+        surfaceDarkLayer: '#171717',
+        surfaceDarkElevated: '#1a1a1a',
+        surfaceDarkPanel: '#141414',
+        surfaceDarkHover: '#1c1c1c',
+        surfaceDarkPressed: '#202020',
+        surfaceDarkSelected: '#232323',
+        surfaceDarkMuted: '#272727',
+        surfacePillDark: '#2c2c2c',
+        brandPrimary: '#129dff',
+        brandPrimaryBright: '#62d9ff',
+        brandPrimarySurface: '#c9efff',
+        brandSecondary: '#1cf1d8',
+        brandSky: '#4cdbff',
+        brandSkyBright: '#81e3ff',
+        brandSkyMuted: '#c7f2ff',
+        brandSkySoft: '#aaeaff',
+        brandSkySurface: '#effbfe',
+        brandSkySurfaceLight: '#e5faff',
+        brandSkyTintSubtle: 'rgb(76 219 255 / 0.1)',
+        brandSkyTintSoft: 'rgb(76 219 255 / 0.13)',
+        brandSkyTintStrong: 'rgb(76 219 255 / 0.14)',
+        brandSkyDivider: 'rgb(76 219 255 / 0.4)',
+        footerBadgeSurface: '#a7ebff',
+        footerTextMuted: '#1a4e5d',
+        footerDivider: 'rgb(26 78 93 / 0.32)',
+        accentSky: '#2abee4',
+        success: '#25d66d',
+        navSurface: '#0b192e',
+        surfaceGlass: 'rgb(255 255 255 / 0.3)',
+        surfaceGlassStrong: 'rgb(255 255 255 / 0.6)',
+        overlayBorderSubtle: 'rgb(255 255 255 / 0.12)',
+        overlayBorderSoft: 'rgb(255 255 255 / 0.16)',
+        overlayBorderMuted: 'rgb(255 255 255 / 0.14)',
+        overlayBorderStrong: 'rgb(255 255 255 / 0.18)',
+        overlayBorderFaint: 'rgb(255 255 255 / 0.06)',
+        overlayGuide: 'rgb(255 255 255 / 0.4)',
+        overlaySurfaceDark: 'rgb(44 44 44 / 0.2)',
+        overlaySurfaceSubtle: 'rgb(255 255 255 / 0.05)',
+        overlaySurfaceSoft: 'rgb(255 255 255 / 0.06)',
+        overlaySurfaceTrack: 'rgb(255 255 255 / 0.07)',
+        overlaySurfaceStrong: 'rgb(255 255 255 / 0.08)',
+        overlayTextMuted: 'rgb(255 255 255 / 0.5)',
+        overlayTextSubtle: 'rgb(255 255 255 / 0.58)',
+        overlayTextSoft: 'rgb(255 255 255 / 0.72)',
+        overlayTextStrong: 'rgb(255 255 255 / 0.84)',
+        overlayTextHigh: 'rgb(255 255 255 / 0.86)',
+        borderDarkSubtle: '#2a2a2a',
+        borderDarkDefault: '#2b2b2b',
+        borderDarkStrong: '#2d2d2d',
+        borderDarkEmphasis: '#3a3a3a',
+        borderDarkInput: '#33373d',
+        scrollbarThumb: '#5a5f67',
+        textDarkMuted: '#717780',
+        textDarkSubtle: '#7d828b',
+        textDarkSecondary: '#818791',
+        textDarkLabel: '#8e9899',
+        textDarkDisabled: '#ababad',
+        textDarkHigh: '#d3d3d3',
+        textLightMuted: '#d7dcde',
+        textLightSoft: '#f2f6fa',
+        heroTextMuted: 'rgb(6 17 33 / 0.72)',
+        textMutedStrong: 'rgb(0 0 0 / 0.62)',
+        surfaceGlassSoft: 'rgb(255 255 255 / 0.22)',
+        accentGold: '#ffb819',
+        accentGoldBright: '#ffbf28',
+        accentGoldSoft: '#feb312',
+        accentGoldTint: '#ffff8d',
+        accentHighlight: '#ffff5f',
+        accentPositive: '#1ee17f',
+        accentPositiveSoft: '#7eecce',
+        accentPositiveTintSubtle: 'rgb(30 225 127 / 0.08)',
+        accentPositiveTintSoft: 'rgb(30 225 127 / 0.13)',
+        accentPositiveTintStrong: 'rgb(30 225 127 / 0.2)',
+        accentNegative: '#fa2961',
+        accentNegativeTintSubtle: 'rgb(250 41 97 / 0.08)',
+        accentNegativeTintSoft: 'rgb(239 68 68 / 0.13)',
+        accentNegativeTintStrong: 'rgb(250 41 97 / 0.2)',
+        accentLavender: '#e6a6ff',
+        accentLavenderSoft: '#fcc2ff',
+        accentLavenderTintSubtle: 'rgb(168 85 247 / 0.08)',
+        accentLavenderTintSoft: 'rgb(168 85 247 / 0.13)',
+        accentPink: '#ff5ecc',
+        warning: '#ff981f',
+        warningTintStrong: 'rgb(255 152 31 / 0.2)',
+        error: '#a31443',
+        brandPrimaryTintSubtle: 'rgb(18 157 255 / 0.04)',
+        brandPrimaryTintSoft: 'rgb(18 157 255 / 0.18)',
+        brandPrimaryTintBorder: 'rgb(18 157 255 / 0.22)',
+        focusRing: 'rgb(0 61 202 / 0.18)',
+    },
+    sizes: {
+        zero: '0',
+        xxxs: '6px',
+        xxs: '8px',
+        xs: '12px',
+        sm: '16px',
+        md: '20px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '40px',
+        xxxl: '48px',
+        '4xl': '56px',
+        '5xl': '64px',
+    },
+    mediaQueries: {
+        xs: `@media (min-width: ${breakpoints.xs}px)`,
+        sm: `@media (min-width: ${breakpoints.sm}px)`,
+        md: `@media (min-width: ${breakpoints.md}px)`,
+        lg: `@media (min-width: ${breakpoints.lg}px)`,
+    },
+    breakpoints,
+    borderRadius: {
+        default: '8px',
+        input: '12px',
+        card: '16px',
+        cardLg: '20px',
+        control: '18px',
+        panel: '26px',
+        panelSm: '22px',
+        lg: '24px',
+        xl: '32px',
+        capsule: '40px',
+        pill: '999px',
+    },
+    fontWeight: {
+        default: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+    typography: {
+        fontFamily: {
+            base: '"Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            instrument: '"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            supporting: '"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            ui: '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        },
+        fontSize: {
+            eyebrow: '0.75rem',
+            supporting: '0.82rem',
+            label: '0.85rem',
+            bodySm: '0.875rem',
+            footnote: '0.9rem',
+            body: '1rem',
+            bodyLg: '1.05rem',
+            bodyXl: '1.25rem',
+            metric: '1.1rem',
+            sectionTitle: '1.875rem',
+            cardTitle: '1rem',
+            displaySm: '3rem',
+            displayMd: '4.5rem',
+            displayLg: '5.9rem',
+        },
+        lineHeight: {
+            tight: 0.9,
+            snug: 1.2,
+            compact: 1.4,
+            default: 1.5,
+            relaxed: 1.6,
+            sectionTitle: '2.25rem',
+            cardTitle: '1.5rem',
+            bodySm: '1.25rem',
+        },
+        letterSpacing: {
+            wide: '0.08em',
+        },
+    },
+    shadow: {
+        sm: '0 8px 24px rgba(17, 17, 17, 0.08)',
+        md: '0 12px 32px rgba(17, 17, 17, 0.12)',
+        lg: '0 24px 64px rgba(0, 0, 0, 0.28)',
+        overlayModal: '0 24px 80px rgba(0, 0, 0, 0.48)',
+        tooltip: '0 10px 24px rgba(0, 0, 0, 0.34)',
+        glass: '0 10px 11.9px rgba(0, 61, 202, 0.1)',
+        button: '0 10px 24px rgba(0, 61, 202, 0.08)',
+        skyGlow: '0 18px 36px rgb(76 219 255 / 0.12)',
+        positiveGlow: '0 18px 36px rgb(30 225 127 / 0.12)',
+        negativeGlow: '0 18px 36px rgb(250 41 97 / 0.12)',
+        lavenderGlow: '0 18px 36px rgb(230 166 255 / 0.12)',
+    },
+    effects: {
+        blur: {
+            sm: '2px',
+            md: '6px',
+            lg: '10px',
+        },
+    },
+    motion: {
+        duration: {
+            tooltip: '140ms',
+            fast: '180ms',
+            normal: '240ms',
+            surface: '580ms',
+            slow: '1200ms',
+        },
+        easing: {
+            standard: 'ease',
+            emphasized: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            emphasizedInOut: 'cubic-bezier(0.76, 0, 0.24, 1)',
+        },
+    },
+    layout: {
+        maxContentWidth: '1200px',
+        landingContentWidth: '1120px',
+        landingWideWidth: '1196px',
+        readingWidth: '720px',
+        bodyContentWidth: '760px',
+        featureContentWidth: '1024px',
+        formInlineWidth: '360px',
+        formCardWidth: '480px',
+        pagePaddingInline: '16px',
+        pagePaddingInlineWide: '80px',
+        pagePaddingBlock: '24px',
+        pagePaddingBlockLg: '32px',
+        pagePaddingBlockXl: '64px',
+        headerReservedSpace: '84px',
+        headerReservedSpaceLg: '80px',
+        brandLogoMarkSize: '49px',
+        brandLogoGap: '13px',
+        brandWordmarkWidth: '138px',
+        brandWordmarkHeight: '24.333px',
+        headerActionWidth: '154px',
+    },
+    zIndex: {
+        base: 0,
+        sticky: 10,
+        overlay: 100,
+    },
+};

package/dist/typography.d.ts

@@ -0,0 +1,11 @@
+export declare const displayHeroTitleTypography: import("styled-components").RuleSet<object>;
+export declare const pageHeroTitleTypography: import("styled-components").RuleSet<object>;
+export declare const articleHeroTitleTypography: import("styled-components").RuleSet<object>;
+export declare const sectionTitleTypography: import("styled-components").RuleSet<object>;
+export declare const articleSectionTitleTypography: import("styled-components").RuleSet<object>;
+export declare const cardTitleTypography: import("styled-components").RuleSet<object>;
+export declare const leadBodyTypography: import("styled-components").RuleSet<object>;
+export declare const articleBodyTypography: import("styled-components").RuleSet<object>;
+export declare const compactBodyTypography: import("styled-components").RuleSet<object>;
+export declare const eyebrowTypography: import("styled-components").RuleSet<object>;
+export declare const metaTypography: import("styled-components").RuleSet<object>;

package/dist/typography.js

@@ -0,0 +1,106 @@
+import { css } from 'styled-components';
+export const displayHeroTitleTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 3rem;
+  font-weight: ${({ theme }) => theme.fontWeight.extrabold};
+  line-height: 1;
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 5.5rem;
+  }
+`;
+export const pageHeroTitleTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 2.5rem;
+  font-weight: ${({ theme }) => theme.fontWeight.extrabold};
+  line-height: 1.1;
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 3.25rem;
+  }
+`;
+export const articleHeroTitleTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 3rem;
+  font-weight: ${({ theme }) => theme.fontWeight.extrabold};
+  line-height: 1.1;
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 3.625rem;
+    line-height: 1.2;
+  }
+`;
+export const sectionTitleTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 2.25rem;
+  font-weight: ${({ theme }) => theme.fontWeight.extrabold};
+  line-height: 1.111;
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 3.25rem;
+    line-height: 1.12;
+  }
+`;
+export const articleSectionTitleTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 2.25rem;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: 1.111;
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 2.5rem;
+    line-height: 1.1;
+  }
+`;
+export const cardTitleTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 1.25rem;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: 1.2;
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 1.5rem;
+  }
+`;
+export const leadBodyTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: ${({ theme }) => theme.typography.fontSize.body};
+  line-height: ${({ theme }) => theme.typography.lineHeight.default};
+  letter-spacing: 0;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: ${({ theme }) => theme.typography.fontSize.bodyXl};
+  }
+`;
+export const articleBodyTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: 1.125rem;
+  line-height: ${({ theme }) => theme.typography.lineHeight.default};
+  letter-spacing: 0;
+`;
+export const compactBodyTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: ${({ theme }) => theme.typography.fontSize.body};
+  line-height: 1.25;
+  letter-spacing: 0;
+`;
+export const eyebrowTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: ${({ theme }) => theme.typography.fontSize.eyebrow};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: 1.333;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+`;
+export const metaTypography = css `
+  font-family: ${({ theme }) => theme.typography.fontFamily.base};
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  line-height: ${({ theme }) => theme.typography.lineHeight.bodySm};
+  letter-spacing: 0;
+`;

package/eslint-config.js

@@ -0,0 +1 @@
+export { createReactEslintConfig } from './dist/config/eslintConfig.js';