@lightsparkdev/ui 0.0.12 → 1.0.0

package/dist/styles/tokens/typography.d.cts

@@ -0,0 +1,386 @@
+import { Theme } from '@emotion/react';
+
+declare enum TypographyGroup {
+    Lightspark = "Lightspark",
+    LightsparkDocs = "LightsparkDocs",
+    UmameDocs = "UmameDocs",
+    Bridge = "Bridge"
+}
+type TypographyTokenGroups = ReturnType<typeof getTypography>;
+interface FontFamilies {
+    main: string;
+    code: string;
+}
+declare const TokenSize: {
+    readonly Large: "Large";
+    readonly Mlarge: "Mlarge";
+    readonly Medium: "Medium";
+    readonly Schmedium: "Schmedium";
+    readonly Small: "Small";
+    readonly ExtraSmall: "ExtraSmall";
+};
+type TokenSizeKey = (typeof TokenSize)[keyof typeof TokenSize];
+declare const TypographyType: {
+    readonly Display: "Display";
+    readonly Headline: "Headline";
+    readonly Title: "Title";
+    readonly Body: "Body";
+    readonly BodyStrong: "Body Strong";
+    readonly Label: "Label";
+    readonly LabelModerate: "Label Moderate";
+    readonly LabelStrong: "Label Strong";
+    readonly Overline: "Overline";
+    readonly Code: "Code";
+    readonly CodeStrong: "Code Strong";
+};
+type TypographyTypeKey = (typeof TypographyType)[keyof typeof TypographyType];
+type TypographyTokens = {
+    fontFamily: string;
+    fontWeight: string;
+    lineHeight: string;
+    fontSize: string;
+    letterSpacing: string;
+    paragraphSpacing: string;
+    paragraphIndent: string;
+    textCase: string;
+    textDecoration: string;
+};
+declare function getTypography(typographyGroup: TypographyGroup, customFontFamilies?: FontFamilies): {
+    group: TypographyGroup;
+    fontFamilies: FontFamilies;
+    lineHeights: {
+        "7xl": string;
+        "6xl": string;
+        "5xl": string;
+        "4xl": string;
+        "3xl": string;
+        "2xs": string;
+        "2xl": string;
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    } | {
+        "7xl": string;
+        "6xl": string;
+        "5xl": string;
+        "4xl": string;
+        "3xl": string;
+        "2xs": string;
+        "2xl": string;
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    } | {
+        "5xl": string;
+        "4xl": string;
+        "3xl": string;
+        "2xs": string;
+        "2xl": string;
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    } | {
+        "8xl": string;
+        "7xl": string;
+        "6xl": string;
+        "5xl": string;
+        "4xl": string;
+        "3xl": string;
+        "2xl": string;
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    fontWeights: {
+        main: {
+            ExtraBold: number;
+            Bold: number;
+            SemiBold: number;
+            Medium: number;
+        };
+        code: {
+            Bold: number;
+            Regular: number;
+        };
+    };
+    fontSize: {
+        "2xs": string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+    } | {
+        "2xs": string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+    } | {
+        "2xs": string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+    } | {
+        "2xs": string;
+        xs: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+    };
+    letterSpacing: {
+        "tight-max": string;
+        "tight-high": string;
+        "tight-medium": string;
+        "tight-low": string;
+        normal: string;
+        "loose-max": string;
+    } | {
+        "tight-max": string;
+        "tight-high": string;
+        "tight-medium": string;
+        "tight-low": string;
+        normal: string;
+        "loose-max": string;
+    } | {
+        tight: string;
+        normal: string;
+        loose: string;
+    } | {
+        tight: string;
+        normal: string;
+    };
+    textCase: {
+        none: string;
+        uppercase: string;
+    };
+    textDecoration: {
+        none: string;
+    };
+    paragraphIndent: {
+        0: string;
+    };
+    paragraphSpacing: {
+        default: string;
+        0: string;
+        16: string;
+        40: string;
+    };
+    types: {
+        Mobile: {
+            Display?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Headline?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Title?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Body?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Body Strong"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Label?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Label Moderate"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Label Strong"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Overline?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Code?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Code Strong"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+        };
+        Desktop: {
+            Display?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Headline?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Title?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Body?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Body Strong"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Label?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Label Moderate"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Label Strong"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Overline?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            Code?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+            "Code Strong"?: {
+                Large?: TypographyTokens;
+                Mlarge?: TypographyTokens;
+                Medium?: TypographyTokens;
+                Schmedium?: TypographyTokens;
+                Small?: TypographyTokens;
+                ExtraSmall?: TypographyTokens;
+            };
+        };
+    };
+};
+declare const getTypographyString: (theme: Theme, typographyType: TypographyTypeKey, size: TokenSizeKey) => string;
+
+export { FontFamilies, TokenSize, TokenSizeKey, TypographyGroup, TypographyTokenGroups, TypographyType, TypographyTypeKey, getTypography, getTypographyString };