@multiplatform.one/theme 7.43.0 → 7.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.43.0",
+  "version": "7.45.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -59,8 +59,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.43.0",
-    "@multiplatform.one/store": "^7.43.0",
+    "@multiplatform.one/platform": "^7.45.0",
+    "@multiplatform.one/store": "^7.45.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -73,8 +73,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.43.0",
-    "@multiplatform.one/test-utils": "7.43.0",
+    "@multiplatform.one/config": "7.45.0",
+    "@multiplatform.one/test-utils": "7.45.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/createDefaultThemeConfig.ts

@@ -12,7 +12,7 @@ import {
 import { defaultAccentTheme } from "./defaults/accent";
 import { defaultBaseTheme } from "./defaults/base";
 import { defaultBuilderOptions } from "./defaults/builderOptions";
-import { defaultFonts } from "./defaults/fonts";
+import { defaultFonts, withDerivedHeadingCategories } from "./defaults/fonts";
 import { scaleFontSet } from "./scale/scaleFonts";
 import type { Preset } from "./preset.types";
 import { type SizeRecipeInputs } from "./recipeInputs";
@@ -147,11 +147,11 @@ export function createDefaultThemeConfig(
   // pipeline (e.g. the Frappe SPA) where runtime JS themes are required.
   // Always keep themes to ensure TamaguiProvider has valid theme data.
   const themes = options.subset ? subsetThemes(builtThemes, options.subset) : builtThemes;
-  const fonts = {
+  const fonts = withDerivedHeadingCategories({
     ...defaultConfig.fonts,
     ...defaultFonts,
     ...options.fonts,
-  } as Record<string, GenericFont>;
+  } as Record<string, GenericFont>);
   return createThemeConfig(
     {
       ...defaultConfig,

package/src/theme/defaults/fonts.ts

@@ -133,6 +133,7 @@ export function createCategoryFont(
   family: string,
   tables: ScaleFonts = defaultTypeTables,
   scope: "body" | "heading" = "body",
+  face?: GenericFont["face"],
 ): GenericFont {
   const sizes = scope === "heading" ? tables.headingSizes : tables.bodySizes;
   return createFont({
@@ -141,6 +142,7 @@ export function createCategoryFont(
     lineHeight: categoryLineHeights(category, tables, scope),
     weight: scope === "heading" ? headingWeights : bodyWeights,
     letterSpacing: neutralTracking(sizes),
+    ...(face ? { face } : {}),
   }) as GenericFont;
 }
 
@@ -293,3 +295,51 @@ export const defaultFonts = {
   blackletter: defaultBlackletterFont,
   geometric: defaultGeometricFont,
 } as const;
+
+type HeadingSource = {
+  category: FontCategory;
+  family: string;
+  face?: GenericFont["face"];
+};
+
+const derivedHeadingSources = new WeakMap<GenericFont, HeadingSource>();
+
+function deriveHeading(source: HeadingSource, tables: ScaleFonts): GenericFont {
+  const font = createCategoryFont(source.category, source.family, tables, "heading", source.face);
+  derivedHeadingSources.set(font, source);
+  return font;
+}
+
+export function withDerivedHeadingCategories(
+  fonts: Record<string, GenericFont>,
+  tables: ScaleFonts = defaultTypeTables,
+): Record<string, GenericFont> {
+  const result = { ...fonts };
+  for (const [category, key] of Object.entries(headingCategoryFontKeys)) {
+    const source = fonts[category];
+    if (
+      fonts[key] !== defaultFonts[key] ||
+      !source ||
+      source === defaultFonts[category as keyof typeof defaultFonts]
+    )
+      continue;
+    const family = source.family as string | { val: string };
+    result[key] = deriveHeading(
+      {
+        category: category as FontCategory,
+        family: typeof family === "string" ? family : family.val,
+        face: source.face,
+      },
+      tables,
+    );
+  }
+  return result;
+}
+
+export function rescaleDerivedHeadingFont(
+  font: GenericFont,
+  tables: ScaleFonts,
+): GenericFont | undefined {
+  const source = derivedHeadingSources.get(font);
+  return source ? deriveHeading(source, tables) : undefined;
+}

package/src/theme/fieldFocus.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { createThemesBuilder } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+import {
+  FIELD_FOCUS_COLOR,
+  FIELD_FOCUS_REST,
+  FIELD_FOCUS_STYLE,
+  fieldFocusCss,
+  fieldFocusHoldsContrast,
+} from "./fieldFocus";
+
+const themes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+describe("FZ-7717: one field focus look", () => {
+  it("is the accent border at the same width, with no ring, gap or shadow", () => {
+    expect(FIELD_FOCUS_STYLE.borderColor).toBe("$accentColor");
+    expect(FIELD_FOCUS_COLOR).toBe("$accentColor");
+    expect(FIELD_FOCUS_STYLE.outlineWidth).toBe(0);
+    expect(FIELD_FOCUS_REST.outlineWidth).toBe(0);
+    for (const key of Object.keys(FIELD_FOCUS_STYLE)) {
+      expect(key).not.toMatch(/^(borderWidth|outlineOffset|shadow|elevation|boxShadow)/);
+    }
+  });
+
+  it("web css paints the accent border and drops the ring on pointer and keyboard focus", () => {
+    const css = fieldFocusCss("[data-mp-input-box]");
+    expect(css).toContain("[data-mp-input-box]:has(input:focus)");
+    expect(css).toContain("[data-mp-input-box]:focus-visible");
+    expect(css).toContain("border-color: var(--accentColor");
+    expect(css).toContain("outline: none");
+    expect(css).not.toMatch(/outline-offset|box-shadow|border-width/);
+  });
+
+  // WCAG 2.4.7 / 1.4.11: the focused border must hold 3:1 against the field
+  // fill ($background) and the grounds a field sits on, in every colour theme.
+  for (const [name, theme] of Object.entries(themes)) {
+    if (!/^(light|dark)(_(blue|gray|green|orange|pink|purple|red|yellow|neutral))?$/.test(name))
+      continue;
+    it(`${name}: $accentColor holds 3:1 on the field fill and page grounds`, () => {
+      expect(theme.accentColor, name).toBeTruthy();
+      expect(
+        fieldFocusHoldsContrast(theme.accentColor, [
+          theme.background,
+          theme.color1,
+          theme.color2,
+          theme.color3,
+        ]),
+        `${name}: ${theme.accentColor} on ${theme.background}`,
+      ).toBe(true);
+    });
+  }
+});

package/src/theme/fieldFocus.ts

@@ -0,0 +1,54 @@
+import { focusRingColorMeetsContrast } from "./focusState";
+
+/**
+ * FZ-7717: the ONE focus look for every focusable MPO field (Input, TextArea,
+ * Select, Duration, Date and Time, Number, OTP and every other Input.Box).
+ * Clay's pick (rv_a60d41af5f9beea6): the field's own border turns the accent
+ * colour at the width it already has. No ring, no gap, no shadow.
+ *
+ * `$accentColor` is the accent ink, held at 4.5:1 on color1..color3 by
+ * holdAccentFloor, so the border clears the 3:1 focus floor on every field
+ * ground. Fields spread these fragments; they never define their own.
+ */
+export const FIELD_FOCUS_COLOR = "$accentColor";
+
+export const FIELD_FOCUS_STYLE = {
+  borderColor: FIELD_FOCUS_COLOR,
+  outlineWidth: 0,
+  outlineStyle: "solid" as const,
+  outlineColor: "transparent",
+};
+
+/** The same field at rest: no outline left over from a ring recipe. */
+export const FIELD_FOCUS_REST = {
+  outlineWidth: 0,
+  outlineStyle: "solid" as const,
+  outlineColor: "transparent",
+};
+
+/**
+ * Web: the focused element is the inner <input>, not the painted Box, so the
+ * Box takes the look through `:has()`. Covers pointer and keyboard focus;
+ * `:focus-visible` on the Box covers button-like Boxes (Select, Date).
+ * `deep` also lights the Box when any inner control has keyboard focus, for
+ * Boxes whose adornment is the field itself (PhoneInput's country picker).
+ * A Box with a separate inner action (SearchInput's clear) stays shallow.
+ */
+export function fieldFocusCss(box: string, { deep = false }: { deep?: boolean } = {}): string {
+  const selectors = [
+    `${box}:has(input:focus)`,
+    `${box}:has(textarea:focus)`,
+    `${box}:has([data-mp-input-area]:focus)`,
+    `${box}:focus-visible`,
+    ...(deep ? [`${box}:has(:focus-visible)`] : []),
+  ];
+  return `${selectors.join(",\n")} {
+  border-color: var(--accentColor, CanvasText) !important;
+  outline: none !important;
+}`;
+}
+
+/** True when the accent border clears 3:1 against every given field ground. */
+export function fieldFocusHoldsContrast(accent: string, grounds: string[]): boolean {
+  return grounds.every((ground) => focusRingColorMeetsContrast(accent, ground));
+}

package/src/theme/headingCategoryFamilies.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("tamagui", () => ({ createTamagui: (config: unknown) => config }));
+vi.mock("./animations/index", () => ({ animations: {} }));
+
+import { createDefaultFont } from "../font";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { defaultFonts, headingCategoryFontKeys } from "./defaults/fonts";
+import { generateScale } from "./scale/generateScale";
+import { defaultScaleInputs } from "./scale/scaleInputs";
+import { scaleFontSet } from "./scale/scaleFonts";
+
+describe("heading category family registration", () => {
+  it("uses a consumer category family and face without inheriting body metrics", () => {
+    const face = { 400: { normal: "CustomScript" }, 700: { normal: "CustomScriptBold" } };
+    const cursive = createDefaultFont({ family: "Custom Script", face });
+    const config = createDefaultThemeConfig({ fonts: { cursive } });
+    const fonts = config.tamagui.fonts;
+    expect(fonts.headingCursive.family).toBe(cursive.family);
+    expect(fonts.headingCursive.face).toMatchObject(face);
+    expect(fonts.headingCursive.size).toEqual(defaultFonts.headingCursive.size);
+    expect(fonts.headingCursive.weight).toEqual(defaultFonts.headingCursive.weight);
+    expect(fonts.headingCursive.lineHeight).toEqual(defaultFonts.headingCursive.lineHeight);
+  });
+
+  it("keeps each inherited category family on the heading ladder after a preset scale change", () => {
+    const families = Object.fromEntries(
+      Object.keys(headingCategoryFontKeys).map((category) => [
+        category,
+        createDefaultFont({ family: `Loaded-${category}` }),
+      ]),
+    );
+    const config = createDefaultThemeConfig({ fonts: families });
+    const from = generateScale(defaultScaleInputs).fonts;
+    const to = generateScale({ ...defaultScaleInputs, type: 19 }).fonts;
+    const scaled = scaleFontSet(config.tamagui.fonts, from, to);
+    for (const [category, key] of Object.entries(headingCategoryFontKeys)) {
+      expect(scaled[key].family).toBe(`Loaded-${category}`);
+      expect(scaled[key].size).toEqual(to.headingSizes);
+      expect(scaled[key].weight).toEqual(defaultFonts[key].weight);
+    }
+  });
+
+  it("lets an explicit heading category override win", () => {
+    const headingCursive = { ...defaultFonts.headingCursive, family: "Heading Only" };
+    const config = createDefaultThemeConfig({
+      fonts: { cursive: createDefaultFont({ family: "Body Only" }), headingCursive },
+    });
+    expect(config.tamagui.fonts.headingCursive.family).toBe("Heading Only");
+  });
+});

package/src/theme/index.ts

@@ -8,6 +8,7 @@ export * from "./createDefaultThemeConfig";
 export * from "./createThemes";
 export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
+export * from "./fieldFocus";
 export * from "./focusState";
 export * from "./glyphPaint";
 export * from "./fontCategoryMetrics";

package/src/theme/scale/scaleFonts.ts

@@ -6,6 +6,7 @@ import {
   defaultFonts,
   fontFamilyStacks,
   headingCategoryFontKeys,
+  rescaleDerivedHeadingFont,
 } from "../defaults/fonts";
 import type { FontCategory } from "../knobs";
 import type { ScaleFonts } from "./generateScale";
@@ -99,7 +100,7 @@ export function scaleFontSet(
         to,
       );
     } else {
-      out[name] = rescaleFont(font, from, to);
+      out[name] = rescaleDerivedHeadingFont(font, to) ?? rescaleFont(font, from, to);
     }
   }
   return out;

package/types/theme/defaults/fonts.d.ts

@@ -30,7 +30,7 @@ export type FontFamilyCategory = FontCategory;
 /** Scope leading raised to the category's LC-11 floor. */
 export declare function categoryLineHeights(category: FontCategory, tables?: ScaleFonts, scope?: "body" | "heading"): Record<string, number>;
 /** Category family on the selected scope's size and weight ladder. */
-export declare function createCategoryFont(category: FontCategory, family: string, tables?: ScaleFonts, scope?: "body" | "heading"): GenericFont;
+export declare function createCategoryFont(category: FontCategory, family: string, tables?: ScaleFonts, scope?: "body" | "heading", face?: GenericFont["face"]): GenericFont;
 /** Inter `$heading` on a generated scale's heading ladder. */
 export declare function createHeadingFont(tables?: ScaleFonts): import("@tamagui/web").FillInFont<{
     face: {
@@ -442,4 +442,6 @@ export declare const defaultFonts: {
     readonly blackletter: GenericFont;
     readonly geometric: GenericFont;
 };
+export declare function withDerivedHeadingCategories(fonts: Record<string, GenericFont>, tables?: ScaleFonts): Record<string, GenericFont>;
+export declare function rescaleDerivedHeadingFont(font: GenericFont, tables: ScaleFonts): GenericFont | undefined;
 //# sourceMappingURL=fonts.d.ts.map

package/types/theme/defaults/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/theme/defaults/fonts.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/theme/defaults/fonts.ts"],"names":[],"mappings":"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"}

package/types/theme/fieldFocus.d.ts

@@ -0,0 +1,37 @@
+/**
+ * FZ-7717: the ONE focus look for every focusable MPO field (Input, TextArea,
+ * Select, Duration, Date and Time, Number, OTP and every other Input.Box).
+ * Clay's pick (rv_a60d41af5f9beea6): the field's own border turns the accent
+ * colour at the width it already has. No ring, no gap, no shadow.
+ *
+ * `$accentColor` is the accent ink, held at 4.5:1 on color1..color3 by
+ * holdAccentFloor, so the border clears the 3:1 focus floor on every field
+ * ground. Fields spread these fragments; they never define their own.
+ */
+export declare const FIELD_FOCUS_COLOR = "$accentColor";
+export declare const FIELD_FOCUS_STYLE: {
+    borderColor: string;
+    outlineWidth: number;
+    outlineStyle: "solid";
+    outlineColor: string;
+};
+/** The same field at rest: no outline left over from a ring recipe. */
+export declare const FIELD_FOCUS_REST: {
+    outlineWidth: number;
+    outlineStyle: "solid";
+    outlineColor: string;
+};
+/**
+ * Web: the focused element is the inner <input>, not the painted Box, so the
+ * Box takes the look through `:has()`. Covers pointer and keyboard focus;
+ * `:focus-visible` on the Box covers button-like Boxes (Select, Date).
+ * `deep` also lights the Box when any inner control has keyboard focus, for
+ * Boxes whose adornment is the field itself (PhoneInput's country picker).
+ * A Box with a separate inner action (SearchInput's clear) stays shallow.
+ */
+export declare function fieldFocusCss(box: string, { deep }?: {
+    deep?: boolean;
+}): string;
+/** True when the accent border clears 3:1 against every given field ground. */
+export declare function fieldFocusHoldsContrast(accent: string, grounds: string[]): boolean;
+//# sourceMappingURL=fieldFocus.d.ts.map

package/types/theme/fieldFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldFocus.d.ts","sourceRoot":"","sources":["../../src/theme/fieldFocus.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAEhD,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,IAAY,EAAE,GAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAY5F;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAElF"}

package/types/theme/index.d.ts

@@ -8,6 +8,7 @@ export * from "./createDefaultThemeConfig";
 export * from "./createThemes";
 export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
+export * from "./fieldFocus";
 export * from "./focusState";
 export * from "./glyphPaint";
 export * from "./fontCategoryMetrics";

package/types/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}

package/types/theme/scale/scaleFonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaleFonts.d.ts","sourceRoot":"","sources":["../../../src/theme/scale/scaleFonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,GAAG,CAAC,CAqC/F;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EAClC,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,UAAU,GACb,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CA2B7B"}
+{"version":3,"file":"scaleFonts.d.ts","sourceRoot":"","sources":["../../../src/theme/scale/scaleFonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAWhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,GAAG,CAAC,CAqC/F;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EAClC,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,UAAU,GACb,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CA2B7B"}