@fairmint/ui 0.3.4 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/index3.cjs +5 -3
- package/dist/_virtual/index3.cjs.map +1 -1
- package/dist/_virtual/index3.js +5 -2
- package/dist/_virtual/index3.js.map +1 -1
- package/dist/_virtual/index4.cjs +3 -5
- package/dist/_virtual/index4.cjs.map +1 -1
- package/dist/_virtual/index4.js +2 -5
- package/dist/_virtual/index4.js.map +1 -1
- package/dist/components/generic/Banner/Banner.cjs +131 -43
- package/dist/components/generic/Banner/Banner.cjs.map +1 -1
- package/dist/components/generic/Banner/Banner.d.ts +4 -1
- package/dist/components/generic/Banner/Banner.d.ts.map +1 -1
- package/dist/components/generic/Banner/Banner.js +133 -45
- package/dist/components/generic/Banner/Banner.js.map +1 -1
- package/dist/components/generic/DataTable/DataTable.cjs +2 -2
- package/dist/components/generic/DataTable/DataTable.cjs.map +1 -1
- package/dist/components/generic/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/generic/DataTable/DataTable.js +3 -3
- package/dist/components/generic/DataTable/DataTable.js.map +1 -1
- package/dist/components/generic/StepCard/StepCard.cjs +2 -1
- package/dist/components/generic/StepCard/StepCard.cjs.map +1 -1
- package/dist/components/generic/StepCard/StepCard.js +2 -1
- package/dist/components/generic/StepCard/StepCard.js.map +1 -1
- package/dist/components/layout/PageHeader/PageHeader.cjs +2 -1
- package/dist/components/layout/PageHeader/PageHeader.cjs.map +1 -1
- package/dist/components/layout/PageHeader/PageHeader.d.ts.map +1 -1
- package/dist/components/layout/PageHeader/PageHeader.js +2 -1
- package/dist/components/layout/PageHeader/PageHeader.js.map +1 -1
- package/dist/components/primitives/Table/Table.cjs +4 -2
- package/dist/components/primitives/Table/Table.cjs.map +1 -1
- package/dist/components/primitives/Table/Table.d.ts +3 -1
- package/dist/components/primitives/Table/Table.d.ts.map +1 -1
- package/dist/components/primitives/Table/Table.js +4 -2
- package/dist/components/primitives/Table/Table.js.map +1 -1
- package/dist/fairmint-ui.cjs +2 -0
- package/dist/fairmint-ui.cjs.map +1 -1
- package/dist/fairmint-ui.js +2 -0
- package/dist/fairmint-ui.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/node_modules/@mantine/form/esm/hooks/use-form-status/use-form-status.cjs +1 -1
- package/dist/node_modules/@mantine/form/esm/hooks/use-form-status/use-form-status.js +1 -1
- package/dist/node_modules/prop-types/index.cjs +1 -1
- package/dist/node_modules/prop-types/index.js +1 -1
- package/dist/theme/index.cjs.map +1 -1
- package/dist/theme/index.d.ts +2 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/responsiveTypography.cjs +13 -0
- package/dist/theme/responsiveTypography.cjs.map +1 -0
- package/dist/theme/responsiveTypography.d.ts +40 -0
- package/dist/theme/responsiveTypography.d.ts.map +1 -0
- package/dist/theme/responsiveTypography.js +13 -0
- package/dist/theme/responsiveTypography.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
-
const index = require("../../../../../../_virtual/
|
|
4
|
+
const index = require("../../../../../../_virtual/index3.cjs");
|
|
5
5
|
const getStatus = require("../../get-status/get-status.cjs");
|
|
6
6
|
const clearListState = require("../../lists/clear-list-state.cjs");
|
|
7
7
|
const getPath = require("../../paths/get-path.cjs");
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useRef, useCallback } from "react";
|
|
2
|
-
import isEqual from "../../../../../../_virtual/
|
|
2
|
+
import isEqual from "../../../../../../_virtual/index3.js";
|
|
3
3
|
import { getStatus } from "../../get-status/get-status.js";
|
|
4
4
|
import { clearListState } from "../../lists/clear-list-state.js";
|
|
5
5
|
import { getPath } from "../../paths/get-path.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const index$1 = require("../../_virtual/
|
|
3
|
+
const index$1 = require("../../_virtual/index4.cjs");
|
|
4
4
|
const index = require("./node_modules/react-is/index.cjs");
|
|
5
5
|
const factoryWithTypeCheckers = require("./factoryWithTypeCheckers.cjs");
|
|
6
6
|
const factoryWithThrowingShims = require("./factoryWithThrowingShims.cjs");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as propTypes } from "../../_virtual/
|
|
1
|
+
import { __module as propTypes } from "../../_virtual/index4.js";
|
|
2
2
|
import { __require as requireReactIs } from "./node_modules/react-is/index.js";
|
|
3
3
|
import { __require as requireFactoryWithTypeCheckers } from "./factoryWithTypeCheckers.js";
|
|
4
4
|
import { __require as requireFactoryWithThrowingShims } from "./factoryWithThrowingShims.js";
|
package/dist/theme/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/theme/index.ts"],"sourcesContent":["import { type CSSVariablesResolver, createTheme, type MantineColorsTuple } from \"@mantine/core\";\nimport { fontSizes } from \"./fontSizes\";\nimport { spacing } from \"./spacing\";\n\n/**\n * Fairmint radius scale — single source of truth used by both the Mantine\n * theme config and the exported `radii` constant. Edit here; both stay in sync.\n */\nexport const radii = {\n xs: \"0.25rem\",\n sm: \"0.375rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n} as const;\n\n/**\n * Indigo palette — primary UI color.\n * Used for buttons, links, active navigation, focus rings.\n * Shade [5] (#6366F1) is the default primary.\n */\nconst indigo: MantineColorsTuple = [\n \"#EEF2FF\",\n \"#E0E7FF\",\n \"#C7D2FE\",\n \"#A5B4FC\",\n \"#818CF8\",\n \"#6366F1\",\n \"#4F46E5\",\n \"#4338CA\",\n \"#3730A3\",\n \"#312E81\",\n];\n\n/**\n * Neutral scale — replaces Mantine's default gray.\n * Used for text, borders, backgrounds, disabled states.\n */\nconst neutral: MantineColorsTuple = [\n \"#F8F9FA\",\n \"#F3F4F6\",\n \"#E5E7EB\",\n \"#D2D6DB\",\n \"#9DA4AE\",\n \"#6C737F\",\n \"#4D5761\",\n \"#2F3746\",\n \"#1C2536\",\n \"#111927\",\n];\n\n/**\n * Fairmint brand blue — accent color for gradients and brand elements.\n * Shade [5] (#0A4EFB) is the primary brand blue.\n *\n * NOTE: design/README.md lists #2D00F7 as Fairmint Blue.\n * This library uses #0A4EFB (production value from investorv2).\n */\nconst fairmintBlue: MantineColorsTuple = [\n \"#e6f0ff\",\n \"#cce0ff\",\n \"#99c2ff\",\n \"#66a3ff\",\n \"#3385ff\",\n \"#0A4EFB\",\n \"#083ec9\",\n \"#062e97\",\n \"#041f64\",\n \"#020f32\",\n];\n\n/**\n * Fairmint brand purple — accent color for gradients and brand elements.\n * Shade [5] (#9E03FF) is the primary brand purple.\n *\n * NOTE: design/README.md lists #6739FD as Fairmint Purple.\n * This library uses #9E03FF (production value from investorv2).\n */\nconst fairmintPurple: MantineColorsTuple = [\n \"#f5e6ff\",\n \"#e6ccff\",\n \"#cc99ff\",\n \"#b366ff\",\n \"#9933ff\",\n \"#9E03FF\",\n \"#7e02cc\",\n \"#5f0299\",\n \"#3f0166\",\n \"#200133\",\n];\n\nconst success: MantineColorsTuple = [\n \"#F0FDF9\",\n \"#D1FAE5\",\n \"#A7F3D0\",\n \"#6EE7B7\",\n \"#34D399\",\n \"#10B981\",\n \"#059669\",\n \"#047857\",\n \"#065F46\",\n \"#134E48\",\n];\n\nconst warning: MantineColorsTuple = [\n \"#FFFAEB\",\n \"#FEF0C7\",\n \"#FEDF89\",\n \"#FEC84B\",\n \"#FDB022\",\n \"#F79009\",\n \"#DC6803\",\n \"#B54708\",\n \"#93370D\",\n \"#7A2E0E\",\n];\n\nconst error: MantineColorsTuple = [\n \"#FEF3F2\",\n \"#FEE4E2\",\n \"#FECDCA\",\n \"#FDA29B\",\n \"#F97066\",\n \"#F04438\",\n \"#D92D20\",\n \"#B42318\",\n \"#912018\",\n \"#7A271A\",\n];\n\nconst info: MantineColorsTuple = [\n \"#ECFDFF\",\n \"#CFF9FE\",\n \"#A5F0FC\",\n \"#67E3F9\",\n \"#22CCEE\",\n \"#06AED4\",\n \"#088AB2\",\n \"#0E7090\",\n \"#155B75\",\n \"#164C63\",\n];\n\n/**\n * Typography constants — single source of truth for font families.\n * Use these instead of var(--mantine-font-family-*) in component code.\n * Declared before createTheme so the theme itself references them.\n */\nexport const typography = {\n fontFamily:\n '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n headingFontFamily: '\"Plus Jakarta Sans\", sans-serif',\n} as const;\n\nexport const theme = createTheme({\n primaryColor: \"indigo\",\n colors: { indigo, gray: neutral, fairmintBlue, fairmintPurple, success, warning, error, info },\n\n fontFamily: typography.fontFamily,\n headings: {\n fontFamily: typography.headingFontFamily,\n fontWeight: \"700\",\n },\n\n radius: radii,\n defaultRadius: \"md\",\n spacing,\n fontSizes: {\n xs: fontSizes.xs,\n sm: fontSizes.sm,\n md: fontSizes.md,\n lg: fontSizes.lg,\n xl: fontSizes.xl,\n },\n\n breakpoints: {\n xs: \"30em\",\n sm: \"48em\",\n md: \"64em\",\n lg: \"74em\",\n xl: \"90em\",\n },\n\n components: {\n Button: {\n defaultProps: { size: \"md\" },\n styles: {\n root: {\n fontWeight: 600,\n borderRadius: \"0.75rem\",\n textTransform: \"none\" as const,\n },\n },\n },\n TextInput: {\n defaultProps: { size: \"md\" },\n },\n Card: {\n defaultProps: {\n padding: \"lg\",\n radius: \"xl\",\n withBorder: true,\n },\n },\n Paper: {\n styles: {\n root: { backgroundImage: \"none\" },\n },\n },\n Table: {\n styles: {\n thead: {\n fontSize: \"0.75rem\",\n fontWeight: 600,\n letterSpacing: \"0.5px\",\n textTransform: \"uppercase\" as const,\n },\n },\n },\n Modal: {\n styles: {\n title: {\n fontSize: fontSizes.lg,\n fontWeight: 700,\n lineHeight: 1.3,\n },\n },\n },\n },\n});\n\n/**\n * Fairmint CSS variables resolver for MantineProvider.\n * Publishes --fairmint-* custom properties so components never reference\n * --mantine-* variables directly. All light/dark switching is centralised here.\n */\nexport const fairmintCssVariables: CSSVariablesResolver = () => ({\n variables: {\n \"--fairmint-font-headings\": typography.headingFontFamily,\n \"--fairmint-font-body\": typography.fontFamily,\n \"--fairmint-interactive-focus-ring\": indigo[5],\n },\n light: {\n \"--fairmint-watermark-color\": neutral[1],\n \"--fairmint-color-text-primary\": neutral[9],\n \"--fairmint-color-text-secondary\": neutral[5],\n \"--fairmint-color-text-tertiary\": neutral[4],\n \"--fairmint-color-surface-selected\": indigo[0],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[9]}0F`,\n \"--fairmint-interactive-hover-bg\": neutral[0],\n },\n dark: {\n \"--fairmint-watermark-color\": neutral[7],\n \"--fairmint-color-text-primary\": neutral[0],\n \"--fairmint-color-text-secondary\": neutral[4],\n \"--fairmint-color-text-tertiary\": neutral[5],\n \"--fairmint-color-surface-selected\": indigo[9],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[0]}1A`,\n \"--fairmint-interactive-hover-bg\": neutral[8],\n },\n});\n\n/**\n * Typed JS references to every --fairmint-* CSS custom property.\n * Use these in component code instead of raw \"var(--fairmint-...)\" strings so\n * that renaming a token requires one change here rather than hunting every file.\n *\n * Each value includes a CSS fallback derived from the light-mode token value so\n * that components degrade gracefully when cssVariablesResolver is not wired up\n * (e.g. bare MantineProvider in tests or custom setups). Dark-mode fidelity is\n * lost without the resolver, but nothing renders invisibly.\n */\nexport const fairmintVars = {\n /** Primary body/heading text — titles on tinted surfaces (Chip Banner). */\n colorTextPrimary: `var(--fairmint-color-text-primary, ${neutral[9]})`,\n /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */\n colorTextSecondary: `var(--fairmint-color-text-secondary, ${neutral[5]})`,\n /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */\n colorTextTertiary: `var(--fairmint-color-text-tertiary, ${neutral[4]})`,\n /** Background tint for selected / active rows. Adapts to color scheme. */\n colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${indigo[0]})`,\n /** Large decorative watermark on error/empty pages. Adapts to color scheme. */\n watermarkColor: `var(--fairmint-watermark-color, ${neutral[1]})`,\n /** Heading font family (Plus Jakarta Sans). */\n fontHeadings: `var(--fairmint-font-headings, ${typography.headingFontFamily})`,\n /** Body font family (Inter). */\n fontBody: `var(--fairmint-font-body, ${typography.fontFamily})`,\n} as const;\n\n/**\n * Returns the MantineProvider props required to use @fairmint/ui components.\n * Use this when you need to instantiate MantineProvider directly (e.g. in\n * Storybook decorators or server-rendering setups) instead of FairmintProvider.\n *\n * @example\n * ```tsx\n * import { MantineProvider } from \"@mantine/core\";\n * import { createFairmintMantineProviderProps } from \"@fairmint/ui\";\n *\n * <MantineProvider {...createFairmintMantineProviderProps()}>\n * <App />\n * </MantineProvider>\n * ```\n */\nexport function createFairmintMantineProviderProps(\n colorScheme: \"light\" | \"dark\" | \"auto\" = \"light\",\n) {\n return {\n theme,\n cssVariablesResolver: fairmintCssVariables,\n defaultColorScheme: colorScheme,\n } as const;\n}\n\n/** Brand colors for gradients and custom styling. */\nexport const brandColors = {\n blue: \"#0A4EFB\",\n purple: \"#9E03FF\",\n indigo: \"#6366F1\",\n gradient: \"linear-gradient(90deg, #0A4EFB 0%, #9E03FF 100%)\",\n} as const;\n\nexport const commonColors = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/**\n * Card/row shadow used by WalletList and similar card surfaces.\n * Equivalent to neutralColors[900] at ~10% opacity (#111927 → #1119271A).\n */\nexport const shadowColor = {\n card: \"#1119271A\",\n} as const;\n\n/** Neutral scale for direct access outside Mantine's theme system. Keys are numeric literals. */\nexport const neutralColors = {\n 50: \"#F8F9FA\",\n 100: \"#F3F4F6\",\n 200: \"#E5E7EB\",\n 300: \"#D2D6DB\",\n 400: \"#9DA4AE\",\n 500: \"#6C737F\",\n 600: \"#4D5761\",\n 700: \"#2F3746\",\n 800: \"#1C2536\",\n 900: \"#111927\",\n} as const;\n\n/** Semantic colors for status-based styling. */\nexport const semanticColors = {\n success: \"#10B981\",\n warning: \"#F79009\",\n error: \"#F04438\",\n info: \"#06AED4\",\n} as const;\n\nexport type { AvatarPaletteColor, FairmintColor } from \"./colors\";\nexport { AVATAR_PALETTE, colors } from \"./colors\";\nexport type { FairmintFontSize } from \"./fontSizes\";\nexport { fontSizes } from \"./fontSizes\";\nexport { DEFAULT_FAIRMINT_LOGO_SRC } from \"./logo\";\nexport type { FairmintSpacing } from \"./spacing\";\nexport { spacing } from \"./spacing\";\nexport { overlayZIndexAboveLegacyShell } from \"./zIndex\";\n"],"names":["createTheme","spacing","fontSizes"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/theme/index.ts"],"sourcesContent":["import { type CSSVariablesResolver, createTheme, type MantineColorsTuple } from \"@mantine/core\";\nimport { fontSizes } from \"./fontSizes\";\nimport { spacing } from \"./spacing\";\n\n/**\n * Fairmint radius scale — single source of truth used by both the Mantine\n * theme config and the exported `radii` constant. Edit here; both stay in sync.\n */\nexport const radii = {\n xs: \"0.25rem\",\n sm: \"0.375rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n} as const;\n\n/**\n * Indigo palette — primary UI color.\n * Used for buttons, links, active navigation, focus rings.\n * Shade [5] (#6366F1) is the default primary.\n */\nconst indigo: MantineColorsTuple = [\n \"#EEF2FF\",\n \"#E0E7FF\",\n \"#C7D2FE\",\n \"#A5B4FC\",\n \"#818CF8\",\n \"#6366F1\",\n \"#4F46E5\",\n \"#4338CA\",\n \"#3730A3\",\n \"#312E81\",\n];\n\n/**\n * Neutral scale — replaces Mantine's default gray.\n * Used for text, borders, backgrounds, disabled states.\n */\nconst neutral: MantineColorsTuple = [\n \"#F8F9FA\",\n \"#F3F4F6\",\n \"#E5E7EB\",\n \"#D2D6DB\",\n \"#9DA4AE\",\n \"#6C737F\",\n \"#4D5761\",\n \"#2F3746\",\n \"#1C2536\",\n \"#111927\",\n];\n\n/**\n * Fairmint brand blue — accent color for gradients and brand elements.\n * Shade [5] (#0A4EFB) is the primary brand blue.\n *\n * NOTE: design/README.md lists #2D00F7 as Fairmint Blue.\n * This library uses #0A4EFB (production value from investorv2).\n */\nconst fairmintBlue: MantineColorsTuple = [\n \"#e6f0ff\",\n \"#cce0ff\",\n \"#99c2ff\",\n \"#66a3ff\",\n \"#3385ff\",\n \"#0A4EFB\",\n \"#083ec9\",\n \"#062e97\",\n \"#041f64\",\n \"#020f32\",\n];\n\n/**\n * Fairmint brand purple — accent color for gradients and brand elements.\n * Shade [5] (#9E03FF) is the primary brand purple.\n *\n * NOTE: design/README.md lists #6739FD as Fairmint Purple.\n * This library uses #9E03FF (production value from investorv2).\n */\nconst fairmintPurple: MantineColorsTuple = [\n \"#f5e6ff\",\n \"#e6ccff\",\n \"#cc99ff\",\n \"#b366ff\",\n \"#9933ff\",\n \"#9E03FF\",\n \"#7e02cc\",\n \"#5f0299\",\n \"#3f0166\",\n \"#200133\",\n];\n\nconst success: MantineColorsTuple = [\n \"#F0FDF9\",\n \"#D1FAE5\",\n \"#A7F3D0\",\n \"#6EE7B7\",\n \"#34D399\",\n \"#10B981\",\n \"#059669\",\n \"#047857\",\n \"#065F46\",\n \"#134E48\",\n];\n\nconst warning: MantineColorsTuple = [\n \"#FFFAEB\",\n \"#FEF0C7\",\n \"#FEDF89\",\n \"#FEC84B\",\n \"#FDB022\",\n \"#F79009\",\n \"#DC6803\",\n \"#B54708\",\n \"#93370D\",\n \"#7A2E0E\",\n];\n\nconst error: MantineColorsTuple = [\n \"#FEF3F2\",\n \"#FEE4E2\",\n \"#FECDCA\",\n \"#FDA29B\",\n \"#F97066\",\n \"#F04438\",\n \"#D92D20\",\n \"#B42318\",\n \"#912018\",\n \"#7A271A\",\n];\n\nconst info: MantineColorsTuple = [\n \"#ECFDFF\",\n \"#CFF9FE\",\n \"#A5F0FC\",\n \"#67E3F9\",\n \"#22CCEE\",\n \"#06AED4\",\n \"#088AB2\",\n \"#0E7090\",\n \"#155B75\",\n \"#164C63\",\n];\n\n/**\n * Typography constants — single source of truth for font families.\n * Use these instead of var(--mantine-font-family-*) in component code.\n * Declared before createTheme so the theme itself references them.\n */\nexport const typography = {\n fontFamily:\n '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n headingFontFamily: '\"Plus Jakarta Sans\", sans-serif',\n} as const;\n\nexport const theme = createTheme({\n primaryColor: \"indigo\",\n colors: { indigo, gray: neutral, fairmintBlue, fairmintPurple, success, warning, error, info },\n\n fontFamily: typography.fontFamily,\n headings: {\n fontFamily: typography.headingFontFamily,\n fontWeight: \"700\",\n },\n\n radius: radii,\n defaultRadius: \"md\",\n spacing,\n fontSizes: {\n xs: fontSizes.xs,\n sm: fontSizes.sm,\n md: fontSizes.md,\n lg: fontSizes.lg,\n xl: fontSizes.xl,\n },\n\n breakpoints: {\n xs: \"30em\",\n sm: \"48em\",\n md: \"64em\",\n lg: \"74em\",\n xl: \"90em\",\n },\n\n components: {\n Button: {\n defaultProps: { size: \"md\" },\n styles: {\n root: {\n fontWeight: 600,\n borderRadius: \"0.75rem\",\n textTransform: \"none\" as const,\n },\n },\n },\n TextInput: {\n defaultProps: { size: \"md\" },\n },\n Card: {\n defaultProps: {\n padding: \"lg\",\n radius: \"xl\",\n withBorder: true,\n },\n },\n Paper: {\n styles: {\n root: { backgroundImage: \"none\" },\n },\n },\n Table: {\n styles: {\n thead: {\n fontSize: \"0.75rem\",\n fontWeight: 600,\n letterSpacing: \"0.5px\",\n textTransform: \"uppercase\" as const,\n },\n },\n },\n Modal: {\n styles: {\n title: {\n fontSize: fontSizes.lg,\n fontWeight: 700,\n lineHeight: 1.3,\n },\n },\n },\n },\n});\n\n/**\n * Fairmint CSS variables resolver for MantineProvider.\n * Publishes --fairmint-* custom properties so components never reference\n * --mantine-* variables directly. All light/dark switching is centralised here.\n */\nexport const fairmintCssVariables: CSSVariablesResolver = () => ({\n variables: {\n \"--fairmint-font-headings\": typography.headingFontFamily,\n \"--fairmint-font-body\": typography.fontFamily,\n \"--fairmint-interactive-focus-ring\": indigo[5],\n },\n light: {\n \"--fairmint-watermark-color\": neutral[1],\n \"--fairmint-color-text-primary\": neutral[9],\n \"--fairmint-color-text-secondary\": neutral[5],\n \"--fairmint-color-text-tertiary\": neutral[4],\n \"--fairmint-color-surface-selected\": indigo[0],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[9]}0F`,\n \"--fairmint-interactive-hover-bg\": neutral[0],\n },\n dark: {\n \"--fairmint-watermark-color\": neutral[7],\n \"--fairmint-color-text-primary\": neutral[0],\n \"--fairmint-color-text-secondary\": neutral[4],\n \"--fairmint-color-text-tertiary\": neutral[5],\n \"--fairmint-color-surface-selected\": indigo[9],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[0]}1A`,\n \"--fairmint-interactive-hover-bg\": neutral[8],\n },\n});\n\n/**\n * Typed JS references to every --fairmint-* CSS custom property.\n * Use these in component code instead of raw \"var(--fairmint-...)\" strings so\n * that renaming a token requires one change here rather than hunting every file.\n *\n * Each value includes a CSS fallback derived from the light-mode token value so\n * that components degrade gracefully when cssVariablesResolver is not wired up\n * (e.g. bare MantineProvider in tests or custom setups). Dark-mode fidelity is\n * lost without the resolver, but nothing renders invisibly.\n */\nexport const fairmintVars = {\n /** Primary body/heading text — titles on tinted surfaces (Chip Banner). */\n colorTextPrimary: `var(--fairmint-color-text-primary, ${neutral[9]})`,\n /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */\n colorTextSecondary: `var(--fairmint-color-text-secondary, ${neutral[5]})`,\n /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */\n colorTextTertiary: `var(--fairmint-color-text-tertiary, ${neutral[4]})`,\n /** Background tint for selected / active rows. Adapts to color scheme. */\n colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${indigo[0]})`,\n /** Large decorative watermark on error/empty pages. Adapts to color scheme. */\n watermarkColor: `var(--fairmint-watermark-color, ${neutral[1]})`,\n /** Heading font family (Plus Jakarta Sans). */\n fontHeadings: `var(--fairmint-font-headings, ${typography.headingFontFamily})`,\n /** Body font family (Inter). */\n fontBody: `var(--fairmint-font-body, ${typography.fontFamily})`,\n} as const;\n\n/**\n * Returns the MantineProvider props required to use @fairmint/ui components.\n * Use this when you need to instantiate MantineProvider directly (e.g. in\n * Storybook decorators or server-rendering setups) instead of FairmintProvider.\n *\n * @example\n * ```tsx\n * import { MantineProvider } from \"@mantine/core\";\n * import { createFairmintMantineProviderProps } from \"@fairmint/ui\";\n *\n * <MantineProvider {...createFairmintMantineProviderProps()}>\n * <App />\n * </MantineProvider>\n * ```\n */\nexport function createFairmintMantineProviderProps(\n colorScheme: \"light\" | \"dark\" | \"auto\" = \"light\",\n) {\n return {\n theme,\n cssVariablesResolver: fairmintCssVariables,\n defaultColorScheme: colorScheme,\n } as const;\n}\n\n/** Brand colors for gradients and custom styling. */\nexport const brandColors = {\n blue: \"#0A4EFB\",\n purple: \"#9E03FF\",\n indigo: \"#6366F1\",\n gradient: \"linear-gradient(90deg, #0A4EFB 0%, #9E03FF 100%)\",\n} as const;\n\nexport const commonColors = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/**\n * Card/row shadow used by WalletList and similar card surfaces.\n * Equivalent to neutralColors[900] at ~10% opacity (#111927 → #1119271A).\n */\nexport const shadowColor = {\n card: \"#1119271A\",\n} as const;\n\n/** Neutral scale for direct access outside Mantine's theme system. Keys are numeric literals. */\nexport const neutralColors = {\n 50: \"#F8F9FA\",\n 100: \"#F3F4F6\",\n 200: \"#E5E7EB\",\n 300: \"#D2D6DB\",\n 400: \"#9DA4AE\",\n 500: \"#6C737F\",\n 600: \"#4D5761\",\n 700: \"#2F3746\",\n 800: \"#1C2536\",\n 900: \"#111927\",\n} as const;\n\n/** Semantic colors for status-based styling. */\nexport const semanticColors = {\n success: \"#10B981\",\n warning: \"#F79009\",\n error: \"#F04438\",\n info: \"#06AED4\",\n} as const;\n\nexport type { AvatarPaletteColor, FairmintColor } from \"./colors\";\nexport { AVATAR_PALETTE, colors } from \"./colors\";\nexport type { FairmintFontSize } from \"./fontSizes\";\nexport { fontSizes } from \"./fontSizes\";\nexport { DEFAULT_FAIRMINT_LOGO_SRC } from \"./logo\";\nexport type { FairmintResponsiveTypography } from \"./responsiveTypography\";\nexport { responsiveTypography } from \"./responsiveTypography\";\nexport type { FairmintSpacing } from \"./spacing\";\nexport { spacing } from \"./spacing\";\nexport { overlayZIndexAboveLegacyShell } from \"./zIndex\";\n"],"names":["createTheme","spacing","fontSizes"],"mappings":"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"}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -395,6 +395,8 @@ export { AVATAR_PALETTE, colors } from './colors';
|
|
|
395
395
|
export type { FairmintFontSize } from './fontSizes';
|
|
396
396
|
export { fontSizes } from './fontSizes';
|
|
397
397
|
export { DEFAULT_FAIRMINT_LOGO_SRC } from './logo';
|
|
398
|
+
export type { FairmintResponsiveTypography } from './responsiveTypography';
|
|
399
|
+
export { responsiveTypography } from './responsiveTypography';
|
|
398
400
|
export type { FairmintSpacing } from './spacing';
|
|
399
401
|
export { spacing } from './spacing';
|
|
400
402
|
export { overlayZIndexAboveLegacyShell } from './zIndex';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAe,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIhG;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAiIX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;CAIb,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EhB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,oBAwBjC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY;IACvB,2EAA2E;;IAE3E,qFAAqF;;IAErF,4EAA4E;;IAE5E,0EAA0E;;IAE1E,+EAA+E;;IAE/E,+CAA+C;;IAE/C,gCAAgC;;CAExB,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kCAAkC,CAChD,WAAW,GAAE,OAAO,GAAG,MAAM,GAAG,MAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOjD;AAED,qDAAqD;AACrD,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAEd,CAAC;AAEX,iGAAiG;AACjG,eAAO,MAAM,aAAa;;;;;;;;;;;CAWhB,CAAC;AAEX,gDAAgD;AAChD,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAe,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIhG;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAiIX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;CAIb,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EhB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,oBAwBjC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY;IACvB,2EAA2E;;IAE3E,qFAAqF;;IAErF,4EAA4E;;IAE5E,0EAA0E;;IAE1E,+EAA+E;;IAE/E,+CAA+C;;IAE/C,gCAAgC;;CAExB,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kCAAkC,CAChD,WAAW,GAAE,OAAO,GAAG,MAAM,GAAG,MAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOjD;AAED,qDAAqD;AACrD,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW;;CAEd,CAAC;AAEX,iGAAiG;AACjG,eAAO,MAAM,aAAa;;;;;;;;;;;CAWhB,CAAC;AAEX,gDAAgD;AAChD,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,YAAY,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC"}
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":["import { type CSSVariablesResolver, createTheme, type MantineColorsTuple } from \"@mantine/core\";\nimport { fontSizes } from \"./fontSizes\";\nimport { spacing } from \"./spacing\";\n\n/**\n * Fairmint radius scale — single source of truth used by both the Mantine\n * theme config and the exported `radii` constant. Edit here; both stay in sync.\n */\nexport const radii = {\n xs: \"0.25rem\",\n sm: \"0.375rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n} as const;\n\n/**\n * Indigo palette — primary UI color.\n * Used for buttons, links, active navigation, focus rings.\n * Shade [5] (#6366F1) is the default primary.\n */\nconst indigo: MantineColorsTuple = [\n \"#EEF2FF\",\n \"#E0E7FF\",\n \"#C7D2FE\",\n \"#A5B4FC\",\n \"#818CF8\",\n \"#6366F1\",\n \"#4F46E5\",\n \"#4338CA\",\n \"#3730A3\",\n \"#312E81\",\n];\n\n/**\n * Neutral scale — replaces Mantine's default gray.\n * Used for text, borders, backgrounds, disabled states.\n */\nconst neutral: MantineColorsTuple = [\n \"#F8F9FA\",\n \"#F3F4F6\",\n \"#E5E7EB\",\n \"#D2D6DB\",\n \"#9DA4AE\",\n \"#6C737F\",\n \"#4D5761\",\n \"#2F3746\",\n \"#1C2536\",\n \"#111927\",\n];\n\n/**\n * Fairmint brand blue — accent color for gradients and brand elements.\n * Shade [5] (#0A4EFB) is the primary brand blue.\n *\n * NOTE: design/README.md lists #2D00F7 as Fairmint Blue.\n * This library uses #0A4EFB (production value from investorv2).\n */\nconst fairmintBlue: MantineColorsTuple = [\n \"#e6f0ff\",\n \"#cce0ff\",\n \"#99c2ff\",\n \"#66a3ff\",\n \"#3385ff\",\n \"#0A4EFB\",\n \"#083ec9\",\n \"#062e97\",\n \"#041f64\",\n \"#020f32\",\n];\n\n/**\n * Fairmint brand purple — accent color for gradients and brand elements.\n * Shade [5] (#9E03FF) is the primary brand purple.\n *\n * NOTE: design/README.md lists #6739FD as Fairmint Purple.\n * This library uses #9E03FF (production value from investorv2).\n */\nconst fairmintPurple: MantineColorsTuple = [\n \"#f5e6ff\",\n \"#e6ccff\",\n \"#cc99ff\",\n \"#b366ff\",\n \"#9933ff\",\n \"#9E03FF\",\n \"#7e02cc\",\n \"#5f0299\",\n \"#3f0166\",\n \"#200133\",\n];\n\nconst success: MantineColorsTuple = [\n \"#F0FDF9\",\n \"#D1FAE5\",\n \"#A7F3D0\",\n \"#6EE7B7\",\n \"#34D399\",\n \"#10B981\",\n \"#059669\",\n \"#047857\",\n \"#065F46\",\n \"#134E48\",\n];\n\nconst warning: MantineColorsTuple = [\n \"#FFFAEB\",\n \"#FEF0C7\",\n \"#FEDF89\",\n \"#FEC84B\",\n \"#FDB022\",\n \"#F79009\",\n \"#DC6803\",\n \"#B54708\",\n \"#93370D\",\n \"#7A2E0E\",\n];\n\nconst error: MantineColorsTuple = [\n \"#FEF3F2\",\n \"#FEE4E2\",\n \"#FECDCA\",\n \"#FDA29B\",\n \"#F97066\",\n \"#F04438\",\n \"#D92D20\",\n \"#B42318\",\n \"#912018\",\n \"#7A271A\",\n];\n\nconst info: MantineColorsTuple = [\n \"#ECFDFF\",\n \"#CFF9FE\",\n \"#A5F0FC\",\n \"#67E3F9\",\n \"#22CCEE\",\n \"#06AED4\",\n \"#088AB2\",\n \"#0E7090\",\n \"#155B75\",\n \"#164C63\",\n];\n\n/**\n * Typography constants — single source of truth for font families.\n * Use these instead of var(--mantine-font-family-*) in component code.\n * Declared before createTheme so the theme itself references them.\n */\nexport const typography = {\n fontFamily:\n '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n headingFontFamily: '\"Plus Jakarta Sans\", sans-serif',\n} as const;\n\nexport const theme = createTheme({\n primaryColor: \"indigo\",\n colors: { indigo, gray: neutral, fairmintBlue, fairmintPurple, success, warning, error, info },\n\n fontFamily: typography.fontFamily,\n headings: {\n fontFamily: typography.headingFontFamily,\n fontWeight: \"700\",\n },\n\n radius: radii,\n defaultRadius: \"md\",\n spacing,\n fontSizes: {\n xs: fontSizes.xs,\n sm: fontSizes.sm,\n md: fontSizes.md,\n lg: fontSizes.lg,\n xl: fontSizes.xl,\n },\n\n breakpoints: {\n xs: \"30em\",\n sm: \"48em\",\n md: \"64em\",\n lg: \"74em\",\n xl: \"90em\",\n },\n\n components: {\n Button: {\n defaultProps: { size: \"md\" },\n styles: {\n root: {\n fontWeight: 600,\n borderRadius: \"0.75rem\",\n textTransform: \"none\" as const,\n },\n },\n },\n TextInput: {\n defaultProps: { size: \"md\" },\n },\n Card: {\n defaultProps: {\n padding: \"lg\",\n radius: \"xl\",\n withBorder: true,\n },\n },\n Paper: {\n styles: {\n root: { backgroundImage: \"none\" },\n },\n },\n Table: {\n styles: {\n thead: {\n fontSize: \"0.75rem\",\n fontWeight: 600,\n letterSpacing: \"0.5px\",\n textTransform: \"uppercase\" as const,\n },\n },\n },\n Modal: {\n styles: {\n title: {\n fontSize: fontSizes.lg,\n fontWeight: 700,\n lineHeight: 1.3,\n },\n },\n },\n },\n});\n\n/**\n * Fairmint CSS variables resolver for MantineProvider.\n * Publishes --fairmint-* custom properties so components never reference\n * --mantine-* variables directly. All light/dark switching is centralised here.\n */\nexport const fairmintCssVariables: CSSVariablesResolver = () => ({\n variables: {\n \"--fairmint-font-headings\": typography.headingFontFamily,\n \"--fairmint-font-body\": typography.fontFamily,\n \"--fairmint-interactive-focus-ring\": indigo[5],\n },\n light: {\n \"--fairmint-watermark-color\": neutral[1],\n \"--fairmint-color-text-primary\": neutral[9],\n \"--fairmint-color-text-secondary\": neutral[5],\n \"--fairmint-color-text-tertiary\": neutral[4],\n \"--fairmint-color-surface-selected\": indigo[0],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[9]}0F`,\n \"--fairmint-interactive-hover-bg\": neutral[0],\n },\n dark: {\n \"--fairmint-watermark-color\": neutral[7],\n \"--fairmint-color-text-primary\": neutral[0],\n \"--fairmint-color-text-secondary\": neutral[4],\n \"--fairmint-color-text-tertiary\": neutral[5],\n \"--fairmint-color-surface-selected\": indigo[9],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[0]}1A`,\n \"--fairmint-interactive-hover-bg\": neutral[8],\n },\n});\n\n/**\n * Typed JS references to every --fairmint-* CSS custom property.\n * Use these in component code instead of raw \"var(--fairmint-...)\" strings so\n * that renaming a token requires one change here rather than hunting every file.\n *\n * Each value includes a CSS fallback derived from the light-mode token value so\n * that components degrade gracefully when cssVariablesResolver is not wired up\n * (e.g. bare MantineProvider in tests or custom setups). Dark-mode fidelity is\n * lost without the resolver, but nothing renders invisibly.\n */\nexport const fairmintVars = {\n /** Primary body/heading text — titles on tinted surfaces (Chip Banner). */\n colorTextPrimary: `var(--fairmint-color-text-primary, ${neutral[9]})`,\n /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */\n colorTextSecondary: `var(--fairmint-color-text-secondary, ${neutral[5]})`,\n /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */\n colorTextTertiary: `var(--fairmint-color-text-tertiary, ${neutral[4]})`,\n /** Background tint for selected / active rows. Adapts to color scheme. */\n colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${indigo[0]})`,\n /** Large decorative watermark on error/empty pages. Adapts to color scheme. */\n watermarkColor: `var(--fairmint-watermark-color, ${neutral[1]})`,\n /** Heading font family (Plus Jakarta Sans). */\n fontHeadings: `var(--fairmint-font-headings, ${typography.headingFontFamily})`,\n /** Body font family (Inter). */\n fontBody: `var(--fairmint-font-body, ${typography.fontFamily})`,\n} as const;\n\n/**\n * Returns the MantineProvider props required to use @fairmint/ui components.\n * Use this when you need to instantiate MantineProvider directly (e.g. in\n * Storybook decorators or server-rendering setups) instead of FairmintProvider.\n *\n * @example\n * ```tsx\n * import { MantineProvider } from \"@mantine/core\";\n * import { createFairmintMantineProviderProps } from \"@fairmint/ui\";\n *\n * <MantineProvider {...createFairmintMantineProviderProps()}>\n * <App />\n * </MantineProvider>\n * ```\n */\nexport function createFairmintMantineProviderProps(\n colorScheme: \"light\" | \"dark\" | \"auto\" = \"light\",\n) {\n return {\n theme,\n cssVariablesResolver: fairmintCssVariables,\n defaultColorScheme: colorScheme,\n } as const;\n}\n\n/** Brand colors for gradients and custom styling. */\nexport const brandColors = {\n blue: \"#0A4EFB\",\n purple: \"#9E03FF\",\n indigo: \"#6366F1\",\n gradient: \"linear-gradient(90deg, #0A4EFB 0%, #9E03FF 100%)\",\n} as const;\n\nexport const commonColors = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/**\n * Card/row shadow used by WalletList and similar card surfaces.\n * Equivalent to neutralColors[900] at ~10% opacity (#111927 → #1119271A).\n */\nexport const shadowColor = {\n card: \"#1119271A\",\n} as const;\n\n/** Neutral scale for direct access outside Mantine's theme system. Keys are numeric literals. */\nexport const neutralColors = {\n 50: \"#F8F9FA\",\n 100: \"#F3F4F6\",\n 200: \"#E5E7EB\",\n 300: \"#D2D6DB\",\n 400: \"#9DA4AE\",\n 500: \"#6C737F\",\n 600: \"#4D5761\",\n 700: \"#2F3746\",\n 800: \"#1C2536\",\n 900: \"#111927\",\n} as const;\n\n/** Semantic colors for status-based styling. */\nexport const semanticColors = {\n success: \"#10B981\",\n warning: \"#F79009\",\n error: \"#F04438\",\n info: \"#06AED4\",\n} as const;\n\nexport type { AvatarPaletteColor, FairmintColor } from \"./colors\";\nexport { AVATAR_PALETTE, colors } from \"./colors\";\nexport type { FairmintFontSize } from \"./fontSizes\";\nexport { fontSizes } from \"./fontSizes\";\nexport { DEFAULT_FAIRMINT_LOGO_SRC } from \"./logo\";\nexport type { FairmintSpacing } from \"./spacing\";\nexport { spacing } from \"./spacing\";\nexport { overlayZIndexAboveLegacyShell } from \"./zIndex\";\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":["import { type CSSVariablesResolver, createTheme, type MantineColorsTuple } from \"@mantine/core\";\nimport { fontSizes } from \"./fontSizes\";\nimport { spacing } from \"./spacing\";\n\n/**\n * Fairmint radius scale — single source of truth used by both the Mantine\n * theme config and the exported `radii` constant. Edit here; both stay in sync.\n */\nexport const radii = {\n xs: \"0.25rem\",\n sm: \"0.375rem\",\n md: \"0.5rem\",\n lg: \"0.75rem\",\n xl: \"1rem\",\n} as const;\n\n/**\n * Indigo palette — primary UI color.\n * Used for buttons, links, active navigation, focus rings.\n * Shade [5] (#6366F1) is the default primary.\n */\nconst indigo: MantineColorsTuple = [\n \"#EEF2FF\",\n \"#E0E7FF\",\n \"#C7D2FE\",\n \"#A5B4FC\",\n \"#818CF8\",\n \"#6366F1\",\n \"#4F46E5\",\n \"#4338CA\",\n \"#3730A3\",\n \"#312E81\",\n];\n\n/**\n * Neutral scale — replaces Mantine's default gray.\n * Used for text, borders, backgrounds, disabled states.\n */\nconst neutral: MantineColorsTuple = [\n \"#F8F9FA\",\n \"#F3F4F6\",\n \"#E5E7EB\",\n \"#D2D6DB\",\n \"#9DA4AE\",\n \"#6C737F\",\n \"#4D5761\",\n \"#2F3746\",\n \"#1C2536\",\n \"#111927\",\n];\n\n/**\n * Fairmint brand blue — accent color for gradients and brand elements.\n * Shade [5] (#0A4EFB) is the primary brand blue.\n *\n * NOTE: design/README.md lists #2D00F7 as Fairmint Blue.\n * This library uses #0A4EFB (production value from investorv2).\n */\nconst fairmintBlue: MantineColorsTuple = [\n \"#e6f0ff\",\n \"#cce0ff\",\n \"#99c2ff\",\n \"#66a3ff\",\n \"#3385ff\",\n \"#0A4EFB\",\n \"#083ec9\",\n \"#062e97\",\n \"#041f64\",\n \"#020f32\",\n];\n\n/**\n * Fairmint brand purple — accent color for gradients and brand elements.\n * Shade [5] (#9E03FF) is the primary brand purple.\n *\n * NOTE: design/README.md lists #6739FD as Fairmint Purple.\n * This library uses #9E03FF (production value from investorv2).\n */\nconst fairmintPurple: MantineColorsTuple = [\n \"#f5e6ff\",\n \"#e6ccff\",\n \"#cc99ff\",\n \"#b366ff\",\n \"#9933ff\",\n \"#9E03FF\",\n \"#7e02cc\",\n \"#5f0299\",\n \"#3f0166\",\n \"#200133\",\n];\n\nconst success: MantineColorsTuple = [\n \"#F0FDF9\",\n \"#D1FAE5\",\n \"#A7F3D0\",\n \"#6EE7B7\",\n \"#34D399\",\n \"#10B981\",\n \"#059669\",\n \"#047857\",\n \"#065F46\",\n \"#134E48\",\n];\n\nconst warning: MantineColorsTuple = [\n \"#FFFAEB\",\n \"#FEF0C7\",\n \"#FEDF89\",\n \"#FEC84B\",\n \"#FDB022\",\n \"#F79009\",\n \"#DC6803\",\n \"#B54708\",\n \"#93370D\",\n \"#7A2E0E\",\n];\n\nconst error: MantineColorsTuple = [\n \"#FEF3F2\",\n \"#FEE4E2\",\n \"#FECDCA\",\n \"#FDA29B\",\n \"#F97066\",\n \"#F04438\",\n \"#D92D20\",\n \"#B42318\",\n \"#912018\",\n \"#7A271A\",\n];\n\nconst info: MantineColorsTuple = [\n \"#ECFDFF\",\n \"#CFF9FE\",\n \"#A5F0FC\",\n \"#67E3F9\",\n \"#22CCEE\",\n \"#06AED4\",\n \"#088AB2\",\n \"#0E7090\",\n \"#155B75\",\n \"#164C63\",\n];\n\n/**\n * Typography constants — single source of truth for font families.\n * Use these instead of var(--mantine-font-family-*) in component code.\n * Declared before createTheme so the theme itself references them.\n */\nexport const typography = {\n fontFamily:\n '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n headingFontFamily: '\"Plus Jakarta Sans\", sans-serif',\n} as const;\n\nexport const theme = createTheme({\n primaryColor: \"indigo\",\n colors: { indigo, gray: neutral, fairmintBlue, fairmintPurple, success, warning, error, info },\n\n fontFamily: typography.fontFamily,\n headings: {\n fontFamily: typography.headingFontFamily,\n fontWeight: \"700\",\n },\n\n radius: radii,\n defaultRadius: \"md\",\n spacing,\n fontSizes: {\n xs: fontSizes.xs,\n sm: fontSizes.sm,\n md: fontSizes.md,\n lg: fontSizes.lg,\n xl: fontSizes.xl,\n },\n\n breakpoints: {\n xs: \"30em\",\n sm: \"48em\",\n md: \"64em\",\n lg: \"74em\",\n xl: \"90em\",\n },\n\n components: {\n Button: {\n defaultProps: { size: \"md\" },\n styles: {\n root: {\n fontWeight: 600,\n borderRadius: \"0.75rem\",\n textTransform: \"none\" as const,\n },\n },\n },\n TextInput: {\n defaultProps: { size: \"md\" },\n },\n Card: {\n defaultProps: {\n padding: \"lg\",\n radius: \"xl\",\n withBorder: true,\n },\n },\n Paper: {\n styles: {\n root: { backgroundImage: \"none\" },\n },\n },\n Table: {\n styles: {\n thead: {\n fontSize: \"0.75rem\",\n fontWeight: 600,\n letterSpacing: \"0.5px\",\n textTransform: \"uppercase\" as const,\n },\n },\n },\n Modal: {\n styles: {\n title: {\n fontSize: fontSizes.lg,\n fontWeight: 700,\n lineHeight: 1.3,\n },\n },\n },\n },\n});\n\n/**\n * Fairmint CSS variables resolver for MantineProvider.\n * Publishes --fairmint-* custom properties so components never reference\n * --mantine-* variables directly. All light/dark switching is centralised here.\n */\nexport const fairmintCssVariables: CSSVariablesResolver = () => ({\n variables: {\n \"--fairmint-font-headings\": typography.headingFontFamily,\n \"--fairmint-font-body\": typography.fontFamily,\n \"--fairmint-interactive-focus-ring\": indigo[5],\n },\n light: {\n \"--fairmint-watermark-color\": neutral[1],\n \"--fairmint-color-text-primary\": neutral[9],\n \"--fairmint-color-text-secondary\": neutral[5],\n \"--fairmint-color-text-tertiary\": neutral[4],\n \"--fairmint-color-surface-selected\": indigo[0],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[9]}0F`,\n \"--fairmint-interactive-hover-bg\": neutral[0],\n },\n dark: {\n \"--fairmint-watermark-color\": neutral[7],\n \"--fairmint-color-text-primary\": neutral[0],\n \"--fairmint-color-text-secondary\": neutral[4],\n \"--fairmint-color-text-tertiary\": neutral[5],\n \"--fairmint-color-surface-selected\": indigo[9],\n \"--fairmint-interactive-hover-shadow\": `0 2px 6px ${neutral[0]}1A`,\n \"--fairmint-interactive-hover-bg\": neutral[8],\n },\n});\n\n/**\n * Typed JS references to every --fairmint-* CSS custom property.\n * Use these in component code instead of raw \"var(--fairmint-...)\" strings so\n * that renaming a token requires one change here rather than hunting every file.\n *\n * Each value includes a CSS fallback derived from the light-mode token value so\n * that components degrade gracefully when cssVariablesResolver is not wired up\n * (e.g. bare MantineProvider in tests or custom setups). Dark-mode fidelity is\n * lost without the resolver, but nothing renders invisibly.\n */\nexport const fairmintVars = {\n /** Primary body/heading text — titles on tinted surfaces (Chip Banner). */\n colorTextPrimary: `var(--fairmint-color-text-primary, ${neutral[9]})`,\n /** Secondary / muted text — subtitles, supporting labels. Adapts to color scheme. */\n colorTextSecondary: `var(--fairmint-color-text-secondary, ${neutral[5]})`,\n /** Tertiary / faint text — timestamps, metadata. Adapts to color scheme. */\n colorTextTertiary: `var(--fairmint-color-text-tertiary, ${neutral[4]})`,\n /** Background tint for selected / active rows. Adapts to color scheme. */\n colorSurfaceSelected: `var(--fairmint-color-surface-selected, ${indigo[0]})`,\n /** Large decorative watermark on error/empty pages. Adapts to color scheme. */\n watermarkColor: `var(--fairmint-watermark-color, ${neutral[1]})`,\n /** Heading font family (Plus Jakarta Sans). */\n fontHeadings: `var(--fairmint-font-headings, ${typography.headingFontFamily})`,\n /** Body font family (Inter). */\n fontBody: `var(--fairmint-font-body, ${typography.fontFamily})`,\n} as const;\n\n/**\n * Returns the MantineProvider props required to use @fairmint/ui components.\n * Use this when you need to instantiate MantineProvider directly (e.g. in\n * Storybook decorators or server-rendering setups) instead of FairmintProvider.\n *\n * @example\n * ```tsx\n * import { MantineProvider } from \"@mantine/core\";\n * import { createFairmintMantineProviderProps } from \"@fairmint/ui\";\n *\n * <MantineProvider {...createFairmintMantineProviderProps()}>\n * <App />\n * </MantineProvider>\n * ```\n */\nexport function createFairmintMantineProviderProps(\n colorScheme: \"light\" | \"dark\" | \"auto\" = \"light\",\n) {\n return {\n theme,\n cssVariablesResolver: fairmintCssVariables,\n defaultColorScheme: colorScheme,\n } as const;\n}\n\n/** Brand colors for gradients and custom styling. */\nexport const brandColors = {\n blue: \"#0A4EFB\",\n purple: \"#9E03FF\",\n indigo: \"#6366F1\",\n gradient: \"linear-gradient(90deg, #0A4EFB 0%, #9E03FF 100%)\",\n} as const;\n\nexport const commonColors = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/**\n * Card/row shadow used by WalletList and similar card surfaces.\n * Equivalent to neutralColors[900] at ~10% opacity (#111927 → #1119271A).\n */\nexport const shadowColor = {\n card: \"#1119271A\",\n} as const;\n\n/** Neutral scale for direct access outside Mantine's theme system. Keys are numeric literals. */\nexport const neutralColors = {\n 50: \"#F8F9FA\",\n 100: \"#F3F4F6\",\n 200: \"#E5E7EB\",\n 300: \"#D2D6DB\",\n 400: \"#9DA4AE\",\n 500: \"#6C737F\",\n 600: \"#4D5761\",\n 700: \"#2F3746\",\n 800: \"#1C2536\",\n 900: \"#111927\",\n} as const;\n\n/** Semantic colors for status-based styling. */\nexport const semanticColors = {\n success: \"#10B981\",\n warning: \"#F79009\",\n error: \"#F04438\",\n info: \"#06AED4\",\n} as const;\n\nexport type { AvatarPaletteColor, FairmintColor } from \"./colors\";\nexport { AVATAR_PALETTE, colors } from \"./colors\";\nexport type { FairmintFontSize } from \"./fontSizes\";\nexport { fontSizes } from \"./fontSizes\";\nexport { DEFAULT_FAIRMINT_LOGO_SRC } from \"./logo\";\nexport type { FairmintResponsiveTypography } from \"./responsiveTypography\";\nexport { responsiveTypography } from \"./responsiveTypography\";\nexport type { FairmintSpacing } from \"./spacing\";\nexport { spacing } from \"./spacing\";\nexport { overlayZIndexAboveLegacyShell } from \"./zIndex\";\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const responsiveTypography = {
|
|
4
|
+
h1: { base: "1.75rem", sm: "2.125rem" },
|
|
5
|
+
h2: { base: "1.375rem", sm: "1.625rem" },
|
|
6
|
+
h3: { base: "1.25rem", sm: "1.375rem" },
|
|
7
|
+
h4: { base: "1.125rem", sm: "1.125rem" },
|
|
8
|
+
h5: { base: "1rem", sm: "1rem" },
|
|
9
|
+
h6: { base: "0.875rem", sm: "0.875rem" },
|
|
10
|
+
cardTitle: { base: "1.0625rem", sm: "1.1875rem" }
|
|
11
|
+
};
|
|
12
|
+
exports.responsiveTypography = responsiveTypography;
|
|
13
|
+
//# sourceMappingURL=responsiveTypography.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsiveTypography.cjs","sources":["../../src/theme/responsiveTypography.ts"],"sourcesContent":["/**\n * Fairmint's mobile-first responsive typography scale.\n *\n * `base` is the mobile value used below the `sm` breakpoint (48em / 768px).\n * `sm` is the desktop value used at and above that breakpoint.\n * Keep these values semantic so components can opt into a role instead of\n * choosing a one-off responsive font size.\n */\nexport const responsiveTypography = {\n h1: { base: \"1.75rem\", sm: \"2.125rem\" },\n h2: { base: \"1.375rem\", sm: \"1.625rem\" },\n h3: { base: \"1.25rem\", sm: \"1.375rem\" },\n h4: { base: \"1.125rem\", sm: \"1.125rem\" },\n h5: { base: \"1rem\", sm: \"1rem\" },\n h6: { base: \"0.875rem\", sm: \"0.875rem\" },\n cardTitle: { base: \"1.0625rem\", sm: \"1.1875rem\" },\n} as const;\n\nexport type FairmintResponsiveTypography = keyof typeof responsiveTypography;\n"],"names":[],"mappings":";;AAQO,MAAM,uBAAuB;AAAA,EAClC,IAAI,EAAE,MAAM,WAAW,IAAI,WAAA;AAAA,EAC3B,IAAI,EAAE,MAAM,YAAY,IAAI,WAAA;AAAA,EAC5B,IAAI,EAAE,MAAM,WAAW,IAAI,WAAA;AAAA,EAC3B,IAAI,EAAE,MAAM,YAAY,IAAI,WAAA;AAAA,EAC5B,IAAI,EAAE,MAAM,QAAQ,IAAI,OAAA;AAAA,EACxB,IAAI,EAAE,MAAM,YAAY,IAAI,WAAA;AAAA,EAC5B,WAAW,EAAE,MAAM,aAAa,IAAI,YAAA;AACtC;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fairmint's mobile-first responsive typography scale.
|
|
3
|
+
*
|
|
4
|
+
* `base` is the mobile value used below the `sm` breakpoint (48em / 768px).
|
|
5
|
+
* `sm` is the desktop value used at and above that breakpoint.
|
|
6
|
+
* Keep these values semantic so components can opt into a role instead of
|
|
7
|
+
* choosing a one-off responsive font size.
|
|
8
|
+
*/
|
|
9
|
+
export declare const responsiveTypography: {
|
|
10
|
+
readonly h1: {
|
|
11
|
+
readonly base: "1.75rem";
|
|
12
|
+
readonly sm: "2.125rem";
|
|
13
|
+
};
|
|
14
|
+
readonly h2: {
|
|
15
|
+
readonly base: "1.375rem";
|
|
16
|
+
readonly sm: "1.625rem";
|
|
17
|
+
};
|
|
18
|
+
readonly h3: {
|
|
19
|
+
readonly base: "1.25rem";
|
|
20
|
+
readonly sm: "1.375rem";
|
|
21
|
+
};
|
|
22
|
+
readonly h4: {
|
|
23
|
+
readonly base: "1.125rem";
|
|
24
|
+
readonly sm: "1.125rem";
|
|
25
|
+
};
|
|
26
|
+
readonly h5: {
|
|
27
|
+
readonly base: "1rem";
|
|
28
|
+
readonly sm: "1rem";
|
|
29
|
+
};
|
|
30
|
+
readonly h6: {
|
|
31
|
+
readonly base: "0.875rem";
|
|
32
|
+
readonly sm: "0.875rem";
|
|
33
|
+
};
|
|
34
|
+
readonly cardTitle: {
|
|
35
|
+
readonly base: "1.0625rem";
|
|
36
|
+
readonly sm: "1.1875rem";
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
export type FairmintResponsiveTypography = keyof typeof responsiveTypography;
|
|
40
|
+
//# sourceMappingURL=responsiveTypography.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsiveTypography.d.ts","sourceRoot":"","sources":["../../src/theme/responsiveTypography.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAC;AAEX,MAAM,MAAM,4BAA4B,GAAG,MAAM,OAAO,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const responsiveTypography = {
|
|
2
|
+
h1: { base: "1.75rem", sm: "2.125rem" },
|
|
3
|
+
h2: { base: "1.375rem", sm: "1.625rem" },
|
|
4
|
+
h3: { base: "1.25rem", sm: "1.375rem" },
|
|
5
|
+
h4: { base: "1.125rem", sm: "1.125rem" },
|
|
6
|
+
h5: { base: "1rem", sm: "1rem" },
|
|
7
|
+
h6: { base: "0.875rem", sm: "0.875rem" },
|
|
8
|
+
cardTitle: { base: "1.0625rem", sm: "1.1875rem" }
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
responsiveTypography
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=responsiveTypography.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsiveTypography.js","sources":["../../src/theme/responsiveTypography.ts"],"sourcesContent":["/**\n * Fairmint's mobile-first responsive typography scale.\n *\n * `base` is the mobile value used below the `sm` breakpoint (48em / 768px).\n * `sm` is the desktop value used at and above that breakpoint.\n * Keep these values semantic so components can opt into a role instead of\n * choosing a one-off responsive font size.\n */\nexport const responsiveTypography = {\n h1: { base: \"1.75rem\", sm: \"2.125rem\" },\n h2: { base: \"1.375rem\", sm: \"1.625rem\" },\n h3: { base: \"1.25rem\", sm: \"1.375rem\" },\n h4: { base: \"1.125rem\", sm: \"1.125rem\" },\n h5: { base: \"1rem\", sm: \"1rem\" },\n h6: { base: \"0.875rem\", sm: \"0.875rem\" },\n cardTitle: { base: \"1.0625rem\", sm: \"1.1875rem\" },\n} as const;\n\nexport type FairmintResponsiveTypography = keyof typeof responsiveTypography;\n"],"names":[],"mappings":"AAQO,MAAM,uBAAuB;AAAA,EAClC,IAAI,EAAE,MAAM,WAAW,IAAI,WAAA;AAAA,EAC3B,IAAI,EAAE,MAAM,YAAY,IAAI,WAAA;AAAA,EAC5B,IAAI,EAAE,MAAM,WAAW,IAAI,WAAA;AAAA,EAC3B,IAAI,EAAE,MAAM,YAAY,IAAI,WAAA;AAAA,EAC5B,IAAI,EAAE,MAAM,QAAQ,IAAI,OAAA;AAAA,EACxB,IAAI,EAAE,MAAM,YAAY,IAAI,WAAA;AAAA,EAC5B,WAAW,EAAE,MAAM,aAAa,IAAI,YAAA;AACtC;"}
|