@swan-io/lake 12.2.15 → 12.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "12.2.15",
+  "version": "12.3.0",
   "engines": {
     "node": "^22.12.0"
   },

package/src/assets/main.css

@@ -325,6 +325,8 @@ body {
   --font-family-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   --font-family-iban: "Roboto Mono", monospace;
 
+  --letter-spacing-primary: -0.011em; /* Computed by Inter dynamic metrics tool */
+
   --heading-color: var(--color-gray-900);
   --heading-line-height: 1.25;
 

package/src/constants/design.d.ts

@@ -56,6 +56,20 @@ export declare const gradients: {
     readonly vertical: "var(--gradient-vertical)";
     readonly oblique: "var(--gradient-oblique)";
 };
+export declare const fonts: {
+    primary: string;
+    card: string;
+    code: string;
+    iban: string;
+};
+export type Fonts = keyof typeof fonts;
+export declare const primaryFontStyle: {
+    fontFamily: string;
+    letterSpacing: number;
+};
+/**
+ * @deprecated use primaryFontStyle instead
+ */
 export declare const interFontStyle: {
     fontFamily: string;
     letterSpacing: number;
@@ -117,13 +131,6 @@ export declare const radii: {
     readonly 8: number;
 };
 export type Radii = keyof typeof radii;
-export declare const fonts: {
-    primary: string;
-    card: string;
-    code: string;
-    iban: string;
-};
-export type Fonts = keyof typeof fonts;
 export type Animation = {
     enter: AnimationStyles;
     leave: AnimationStyles;

package/src/constants/design.js

@@ -248,120 +248,116 @@ export const gradients = {
     vertical: "var(--gradient-vertical)",
     oblique: "var(--gradient-oblique)",
 };
-export const interFontStyle = {
-    fontFamily: [
-        "Inter",
-        "-apple-system",
-        "system-ui",
-        "BlinkMacSystemFont",
-        "Segoe UI",
-        "Helvetica",
-        "Arial",
-        "sans-serif",
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji",
-    ].join(","),
-    // Computed by Inter dynamic metrics tool
-    letterSpacing: "-0.011em",
+export const fonts = {
+    primary: "var(--font-family-primary)",
+    card: "var( --font-family-card-font)",
+    code: "var(--font-family-code)",
+    iban: "var(--font-family-iban)",
+};
+export const primaryFontStyle = {
+    fontFamily: fonts.primary,
+    letterSpacing: "var(--letter-spacing-primary)",
 };
+/**
+ * @deprecated use primaryFontStyle instead
+ */
+export const interFontStyle = primaryFontStyle;
 const asTextStyle = (x) => {
     return x;
 };
 const h1 = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--heading-color)",
     fontWeight: "var(--heading-1-font-weight)",
     fontSize: "var(--heading-1-font-size)",
     lineHeight: "var(--heading-line-height)",
 });
 const h2 = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--heading-color)",
     fontWeight: "var(--heading-2-font-weight)",
     fontSize: "var(--heading-2-font-size)",
     lineHeight: "var(--heading-line-height)",
 });
 const h3 = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--heading-color)",
     fontWeight: "var(--heading-3-font-weight)",
     fontSize: "var(--heading-3-font-size)",
     lineHeight: "var(--heading-line-height)",
 });
 const h4 = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--heading-color)",
     fontWeight: "var(--heading-4-font-weight)",
     fontSize: "var(--heading-4-font-size)",
     lineHeight: "var(--heading-line-height)",
 });
 const h5 = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--heading-color)",
     fontWeight: "var(--heading-5-font-weight)",
     fontSize: "var(--heading-5-font-size)",
     lineHeight: "var(--heading-line-height)",
 });
 const h6 = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--heading-color)",
     fontWeight: "var(--heading-6-font-weight)",
     fontSize: "var(--heading-6-font-size)",
     lineHeight: "var(--heading-line-height)",
 });
 const semibold = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-semibold-font-weight)",
     fontSize: "var(--text-semibold-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const medium = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-medium-font-weight)",
     fontSize: "var(--text-medium-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const regular = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-regular-font-weight)",
     fontSize: "var(--text-regular-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const light = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-light-font-weight)",
     fontSize: "var(--text-light-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const smallSemibold = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-small-semibold-font-weight)",
     fontSize: "var(--text-small-semibold-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const smallMedium = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-small-medium-font-weight)",
     fontSize: "var(--text-small-medium-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const smallRegular = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--text-color)",
     fontWeight: "var(--text-small-regular-font-weight)",
     fontSize: "var(--text-small-regular-font-size)",
     lineHeight: "var(--text-line-height)",
 });
 const placeholder = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--placeholder-color)",
     fontStyle: "italic",
     fontWeight: "var(--placeholder-font-weight)",
@@ -369,7 +365,7 @@ const placeholder = asTextStyle({
     lineHeight: "var(--placeholder-line-height)",
 });
 const smallPlaceholder = asTextStyle({
-    ...interFontStyle,
+    ...primaryFontStyle,
     color: "var(--placeholder-color)",
     fontStyle: "italic",
     fontWeight: "var(--placeholder-small-font-weight)",
@@ -429,12 +425,6 @@ export const radii = {
     6: "var(--radius-6)",
     8: "var(--radius-8)",
 };
-export const fonts = {
-    primary: "var(--font-family-primary)",
-    card: "var( --font-family-card-font)",
-    code: "var(--font-family-code)",
-    iban: "var(--font-family-iban)",
-};
 const easeInOutQuad = "cubic-bezier(0.45, 0, 0.55, 1)";
 const fadeAndSlideInFromTop = StyleSheet.create({
     enter: {