@signozhq/design-tokens 2.0.0 → 2.1.0

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.
Files changed (7) hide show
  1. package/README.md +75 -14
  2. package/dist/Typography/typography-styles.css +1 -0
  3. package/dist/design-tokens.js +773 -33
  4. package/dist/design-tokens.umd.cjs +1 -1
  5. package/dist/index.d.ts +785 -3
  6. package/dist/themes/signoz-tokens.css +1 -0
  7. package/package.json +64 -63
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 04 Dec 2025 11:00:53 GMT
3
+ * Generated on Sat, 24 Jan 2026 12:23:24 GMT
4
4
  */
5
5
  export declare const Color: {
6
6
  BG_ROBIN_50: string;
@@ -279,7 +279,7 @@ export declare const Color: {
279
279
 
280
280
  /**
281
281
  * Do not edit directly
282
- * Generated on Thu, 04 Dec 2025 11:00:53 GMT
282
+ * Generated on Sat, 24 Jan 2026 12:23:24 GMT
283
283
  */
284
284
  export declare const ColorTailwind: {
285
285
  'robin-50': string;
@@ -1771,9 +1771,269 @@ export declare const spacingTokens: {
1771
1771
 
1772
1772
  export declare type SpacingType = (typeof Spacing)[keyof typeof Spacing];
1773
1773
 
1774
+ /**
1775
+ * Semantic Token Constants
1776
+ * DO NOT EDIT DIRECTLY - This file is auto-generated
1777
+ * Generated on Sat, 24 Jan 2026 12:23:24 GMT
1778
+ */
1779
+ export declare const Style: {
1780
+ readonly BACKGROUND: "var(--background)";
1781
+ readonly FOREGROUND: "var(--foreground)";
1782
+ readonly CARD: "var(--card)";
1783
+ readonly CARD_FOREGROUND: "var(--card-foreground)";
1784
+ readonly POPOVER: "var(--popover)";
1785
+ readonly POPOVER_FOREGROUND: "var(--popover-foreground)";
1786
+ readonly PRIMARY: "var(--primary)";
1787
+ readonly SECONDARY: "var(--secondary)";
1788
+ readonly MUTED: "var(--muted)";
1789
+ readonly MUTED_FOREGROUND: "var(--muted-foreground)";
1790
+ readonly ACCENT: "var(--accent)";
1791
+ readonly ACCENT_FOREGROUND: "var(--accent-foreground)";
1792
+ readonly DESTRUCTIVE: "var(--destructive)";
1793
+ readonly DESTRUCTIVE_FOREGROUND: "var(--destructive-foreground)";
1794
+ readonly BORDER: "var(--border)";
1795
+ readonly INPUT: "var(--input)";
1796
+ readonly RING: "var(--ring)";
1797
+ readonly RADIUS: "var(--radius)";
1798
+ readonly CHART_1: "var(--chart-1)";
1799
+ readonly CHART_2: "var(--chart-2)";
1800
+ readonly CHART_3: "var(--chart-3)";
1801
+ readonly CHART_4: "var(--chart-4)";
1802
+ readonly CHART_5: "var(--chart-5)";
1803
+ readonly SIDEBAR: "var(--sidebar)";
1804
+ readonly SIDEBAR_FOREGROUND: "var(--sidebar-foreground)";
1805
+ readonly SIDEBAR_PRIMARY: "var(--sidebar-primary)";
1806
+ readonly SIDEBAR_PRIMARY_FOREGROUND: "var(--sidebar-primary-foreground)";
1807
+ readonly SIDEBAR_ACCENT: "var(--sidebar-accent)";
1808
+ readonly SIDEBAR_ACCENT_FOREGROUND: "var(--sidebar-accent-foreground)";
1809
+ readonly SIDEBAR_BORDER: "var(--sidebar-border)";
1810
+ readonly SIDEBAR_RING: "var(--sidebar-ring)";
1811
+ readonly FONT_SANS: "var(--font-sans)";
1812
+ readonly FONT_SERIF: "var(--font-serif)";
1813
+ readonly FONT_MONO: "var(--font-mono)";
1814
+ readonly BASE_WHITE: "var(--base-white)";
1815
+ readonly BASE_BLACK: "var(--base-black)";
1816
+ readonly L1_BACKGROUND: "var(--l1-background)";
1817
+ readonly L2_BACKGROUND: "var(--l2-background)";
1818
+ readonly L3_BACKGROUND: "var(--l3-background)";
1819
+ readonly L1_BACKGROUND_HOVER: "var(--l1-background-hover)";
1820
+ readonly L2_BACKGROUND_HOVER: "var(--l2-background-hover)";
1821
+ readonly L3_BACKGROUND_HOVER: "var(--l3-background-hover)";
1822
+ readonly L1_FOREGROUND: "var(--l1-foreground)";
1823
+ readonly L1_FOREGROUND_HOVER: "var(--l1-foreground-hover)";
1824
+ readonly L2_FOREGROUND: "var(--l2-foreground)";
1825
+ readonly L2_FOREGROUND_HOVER: "var(--l2-foreground-hover)";
1826
+ readonly L3_FOREGROUND: "var(--l3-foreground)";
1827
+ readonly L3_FOREGROUND_HOVER: "var(--l3-foreground-hover)";
1828
+ readonly L1_BORDER: "var(--l1-border)";
1829
+ readonly L2_BORDER: "var(--l2-border)";
1830
+ readonly L3_BORDER: "var(--l3-border)";
1831
+ readonly PRIMARY_BACKGROUND: "var(--primary-background)";
1832
+ readonly PRIMARY_BACKGROUND_HOVER: "var(--primary-background-hover)";
1833
+ readonly PRIMARY_FOREGROUND: "var(--primary-foreground)";
1834
+ readonly PRIMARY_FOREGROUND_HOVER: "var(--primary-foreground-hover)";
1835
+ readonly SECONDARY_BACKGROUND: "var(--secondary-background)";
1836
+ readonly SECONDARY_BACKGROUND_HOVER: "var(--secondary-background-hover)";
1837
+ readonly SECONDARY_FOREGROUND: "var(--secondary-foreground)";
1838
+ readonly SECONDARY_FOREGROUND_HOVER: "var(--secondary-foreground-hover)";
1839
+ readonly SECONDARY_BORDER: "var(--secondary-border)";
1840
+ readonly SUCCESS_BACKGROUND: "var(--success-background)";
1841
+ readonly SUCCESS_BACKGROUND_HOVER: "var(--success-background-hover)";
1842
+ readonly SUCCESS_FOREGROUND: "var(--success-foreground)";
1843
+ readonly SUCCESS_FOREGROUND_HOVER: "var(--success-foreground-hover)";
1844
+ readonly WARNING_BACKGROUND: "var(--warning-background)";
1845
+ readonly WARNING_BACKGROUND_HOVER: "var(--warning-background-hover)";
1846
+ readonly WARNING_FOREGROUND: "var(--warning-foreground)";
1847
+ readonly WARNING_FOREGROUND_HOVER: "var(--warning-foreground-hover)";
1848
+ readonly DANGER_BACKGROUND: "var(--danger-background)";
1849
+ readonly DANGER_BACKGROUND_HOVER: "var(--danger-background-hover)";
1850
+ readonly DANGER_FOREGROUND: "var(--danger-foreground)";
1851
+ readonly DANGER_FOREGROUND_HOVER: "var(--danger-foreground-hover)";
1852
+ readonly L1_BACKGROUND_TRANSPARENT: "var(--l1-background-transparent)";
1853
+ readonly L1_BACKGROUND_60: "var(--l1-background-60)";
1854
+ readonly L2_BACKGROUND_TRANSPARENT: "var(--l2-background-transparent)";
1855
+ readonly L2_BACKGROUND_60: "var(--l2-background-60)";
1856
+ readonly L3_BACKGROUND_TRANSPARENT: "var(--l3-background-transparent)";
1857
+ readonly L3_BACKGROUND_60: "var(--l3-background-60)";
1858
+ readonly ALERT_STRIP_BUTTON_BACKGROUND: "var(--alert-strip-button-background)";
1859
+ readonly CALLOUT_PRIMARY_BACKGROUND: "var(--callout-primary-background)";
1860
+ readonly CALLOUT_PRIMARY_BORDER: "var(--callout-primary-border)";
1861
+ readonly CALLOUT_PRIMARY_TITLE: "var(--callout-primary-title)";
1862
+ readonly CALLOUT_PRIMARY_DESCRIPTION: "var(--callout-primary-description)";
1863
+ readonly CALLOUT_PRIMARY_ICON: "var(--callout-primary-icon)";
1864
+ readonly CALLOUT_SUCCESS_BACKGROUND: "var(--callout-success-background)";
1865
+ readonly CALLOUT_SUCCESS_BORDER: "var(--callout-success-border)";
1866
+ readonly CALLOUT_SUCCESS_TITLE: "var(--callout-success-title)";
1867
+ readonly CALLOUT_SUCCESS_DESCRIPTION: "var(--callout-success-description)";
1868
+ readonly CALLOUT_SUCCESS_ICON: "var(--callout-success-icon)";
1869
+ readonly CALLOUT_WARNING_BACKGROUND: "var(--callout-warning-background)";
1870
+ readonly CALLOUT_WARNING_BORDER: "var(--callout-warning-border)";
1871
+ readonly CALLOUT_WARNING_TITLE: "var(--callout-warning-title)";
1872
+ readonly CALLOUT_WARNING_DESCRIPTION: "var(--callout-warning-description)";
1873
+ readonly CALLOUT_WARNING_ICON: "var(--callout-warning-icon)";
1874
+ readonly CALLOUT_ERROR_BACKGROUND: "var(--callout-error-background)";
1875
+ readonly CALLOUT_ERROR_BORDER: "var(--callout-error-border)";
1876
+ readonly CALLOUT_ERROR_TITLE: "var(--callout-error-title)";
1877
+ readonly CALLOUT_ERROR_DESCRIPTION: "var(--callout-error-description)";
1878
+ readonly CALLOUT_ERROR_ICON: "var(--callout-error-icon)";
1879
+ readonly ACCENT_PRIMARY: "var(--accent-primary)";
1880
+ readonly ACCENT_PRIMARY_HOVER: "var(--accent-primary-hover)";
1881
+ readonly ACCENT_PRIMARY_FOREGROUND: "var(--accent-primary-foreground)";
1882
+ readonly ACCENT_FOREST: "var(--accent-forest)";
1883
+ readonly ACCENT_FOREST_HOVER: "var(--accent-forest-hover)";
1884
+ readonly ACCENT_FOREST_FOREGROUND: "var(--accent-forest-foreground)";
1885
+ readonly ACCENT_AMBER: "var(--accent-amber)";
1886
+ readonly ACCENT_AMBER_HOVER: "var(--accent-amber-hover)";
1887
+ readonly ACCENT_AMBER_FOREGROUND: "var(--accent-amber-foreground)";
1888
+ readonly ACCENT_CHERRY: "var(--accent-cherry)";
1889
+ readonly ACCENT_CHERRY_HOVER: "var(--accent-cherry-hover)";
1890
+ readonly ACCENT_CHERRY_FOREGROUND: "var(--accent-cherry-foreground)";
1891
+ readonly ACCENT_AQUA: "var(--accent-aqua)";
1892
+ readonly ACCENT_AQUA_HOVER: "var(--accent-aqua-hover)";
1893
+ readonly ACCENT_AQUA_FOREGROUND: "var(--accent-aqua-foreground)";
1894
+ readonly ACCENT_SAKURA: "var(--accent-sakura)";
1895
+ readonly ACCENT_SAKURA_HOVER: "var(--accent-sakura-hover)";
1896
+ readonly ACCENT_SAKURA_FOREGROUND: "var(--accent-sakura-foreground)";
1897
+ readonly ACCENT_SIENNA: "var(--accent-sienna)";
1898
+ readonly ACCENT_SIENNA_HOVER: "var(--accent-sienna-hover)";
1899
+ readonly ACCENT_SIENNA_FOREGROUND: "var(--accent-sienna-foreground)";
1900
+ };
1901
+
1902
+ /**
1903
+ * Semantic Token Tailwind Config
1904
+ * DO NOT EDIT DIRECTLY - This file is auto-generated
1905
+ * Generated on Sat, 24 Jan 2026 12:23:24 GMT
1906
+ */
1907
+ export declare const StyleTailwind: {
1908
+ readonly background: "var(--background)";
1909
+ readonly foreground: "var(--foreground)";
1910
+ readonly card: "var(--card)";
1911
+ readonly 'card-foreground': "var(--card-foreground)";
1912
+ readonly popover: "var(--popover)";
1913
+ readonly 'popover-foreground': "var(--popover-foreground)";
1914
+ readonly primary: "var(--primary)";
1915
+ readonly secondary: "var(--secondary)";
1916
+ readonly muted: "var(--muted)";
1917
+ readonly 'muted-foreground': "var(--muted-foreground)";
1918
+ readonly accent: "var(--accent)";
1919
+ readonly 'accent-foreground': "var(--accent-foreground)";
1920
+ readonly destructive: "var(--destructive)";
1921
+ readonly 'destructive-foreground': "var(--destructive-foreground)";
1922
+ readonly border: "var(--border)";
1923
+ readonly input: "var(--input)";
1924
+ readonly ring: "var(--ring)";
1925
+ readonly radius: "var(--radius)";
1926
+ readonly 'chart-1': "var(--chart-1)";
1927
+ readonly 'chart-2': "var(--chart-2)";
1928
+ readonly 'chart-3': "var(--chart-3)";
1929
+ readonly 'chart-4': "var(--chart-4)";
1930
+ readonly 'chart-5': "var(--chart-5)";
1931
+ readonly sidebar: "var(--sidebar)";
1932
+ readonly 'sidebar-foreground': "var(--sidebar-foreground)";
1933
+ readonly 'sidebar-primary': "var(--sidebar-primary)";
1934
+ readonly 'sidebar-primary-foreground': "var(--sidebar-primary-foreground)";
1935
+ readonly 'sidebar-accent': "var(--sidebar-accent)";
1936
+ readonly 'sidebar-accent-foreground': "var(--sidebar-accent-foreground)";
1937
+ readonly 'sidebar-border': "var(--sidebar-border)";
1938
+ readonly 'sidebar-ring': "var(--sidebar-ring)";
1939
+ readonly 'font-sans': "var(--font-sans)";
1940
+ readonly 'font-serif': "var(--font-serif)";
1941
+ readonly 'font-mono': "var(--font-mono)";
1942
+ readonly 'base-white': "var(--base-white)";
1943
+ readonly 'base-black': "var(--base-black)";
1944
+ readonly 'l1-background': "var(--l1-background)";
1945
+ readonly 'l2-background': "var(--l2-background)";
1946
+ readonly 'l3-background': "var(--l3-background)";
1947
+ readonly 'l1-background-hover': "var(--l1-background-hover)";
1948
+ readonly 'l2-background-hover': "var(--l2-background-hover)";
1949
+ readonly 'l3-background-hover': "var(--l3-background-hover)";
1950
+ readonly 'l1-foreground': "var(--l1-foreground)";
1951
+ readonly 'l1-foreground-hover': "var(--l1-foreground-hover)";
1952
+ readonly 'l2-foreground': "var(--l2-foreground)";
1953
+ readonly 'l2-foreground-hover': "var(--l2-foreground-hover)";
1954
+ readonly 'l3-foreground': "var(--l3-foreground)";
1955
+ readonly 'l3-foreground-hover': "var(--l3-foreground-hover)";
1956
+ readonly 'l1-border': "var(--l1-border)";
1957
+ readonly 'l2-border': "var(--l2-border)";
1958
+ readonly 'l3-border': "var(--l3-border)";
1959
+ readonly 'primary-background': "var(--primary-background)";
1960
+ readonly 'primary-background-hover': "var(--primary-background-hover)";
1961
+ readonly 'primary-foreground': "var(--primary-foreground)";
1962
+ readonly 'primary-foreground-hover': "var(--primary-foreground-hover)";
1963
+ readonly 'secondary-background': "var(--secondary-background)";
1964
+ readonly 'secondary-background-hover': "var(--secondary-background-hover)";
1965
+ readonly 'secondary-foreground': "var(--secondary-foreground)";
1966
+ readonly 'secondary-foreground-hover': "var(--secondary-foreground-hover)";
1967
+ readonly 'secondary-border': "var(--secondary-border)";
1968
+ readonly 'success-background': "var(--success-background)";
1969
+ readonly 'success-background-hover': "var(--success-background-hover)";
1970
+ readonly 'success-foreground': "var(--success-foreground)";
1971
+ readonly 'success-foreground-hover': "var(--success-foreground-hover)";
1972
+ readonly 'warning-background': "var(--warning-background)";
1973
+ readonly 'warning-background-hover': "var(--warning-background-hover)";
1974
+ readonly 'warning-foreground': "var(--warning-foreground)";
1975
+ readonly 'warning-foreground-hover': "var(--warning-foreground-hover)";
1976
+ readonly 'danger-background': "var(--danger-background)";
1977
+ readonly 'danger-background-hover': "var(--danger-background-hover)";
1978
+ readonly 'danger-foreground': "var(--danger-foreground)";
1979
+ readonly 'danger-foreground-hover': "var(--danger-foreground-hover)";
1980
+ readonly 'l1-background-transparent': "var(--l1-background-transparent)";
1981
+ readonly 'l1-background-60': "var(--l1-background-60)";
1982
+ readonly 'l2-background-transparent': "var(--l2-background-transparent)";
1983
+ readonly 'l2-background-60': "var(--l2-background-60)";
1984
+ readonly 'l3-background-transparent': "var(--l3-background-transparent)";
1985
+ readonly 'l3-background-60': "var(--l3-background-60)";
1986
+ readonly 'alert-strip-button-background': "var(--alert-strip-button-background)";
1987
+ readonly 'callout-primary-background': "var(--callout-primary-background)";
1988
+ readonly 'callout-primary-border': "var(--callout-primary-border)";
1989
+ readonly 'callout-primary-title': "var(--callout-primary-title)";
1990
+ readonly 'callout-primary-description': "var(--callout-primary-description)";
1991
+ readonly 'callout-primary-icon': "var(--callout-primary-icon)";
1992
+ readonly 'callout-success-background': "var(--callout-success-background)";
1993
+ readonly 'callout-success-border': "var(--callout-success-border)";
1994
+ readonly 'callout-success-title': "var(--callout-success-title)";
1995
+ readonly 'callout-success-description': "var(--callout-success-description)";
1996
+ readonly 'callout-success-icon': "var(--callout-success-icon)";
1997
+ readonly 'callout-warning-background': "var(--callout-warning-background)";
1998
+ readonly 'callout-warning-border': "var(--callout-warning-border)";
1999
+ readonly 'callout-warning-title': "var(--callout-warning-title)";
2000
+ readonly 'callout-warning-description': "var(--callout-warning-description)";
2001
+ readonly 'callout-warning-icon': "var(--callout-warning-icon)";
2002
+ readonly 'callout-error-background': "var(--callout-error-background)";
2003
+ readonly 'callout-error-border': "var(--callout-error-border)";
2004
+ readonly 'callout-error-title': "var(--callout-error-title)";
2005
+ readonly 'callout-error-description': "var(--callout-error-description)";
2006
+ readonly 'callout-error-icon': "var(--callout-error-icon)";
2007
+ readonly 'accent-primary': "var(--accent-primary)";
2008
+ readonly 'accent-primary-hover': "var(--accent-primary-hover)";
2009
+ readonly 'accent-primary-foreground': "var(--accent-primary-foreground)";
2010
+ readonly 'accent-forest': "var(--accent-forest)";
2011
+ readonly 'accent-forest-hover': "var(--accent-forest-hover)";
2012
+ readonly 'accent-forest-foreground': "var(--accent-forest-foreground)";
2013
+ readonly 'accent-amber': "var(--accent-amber)";
2014
+ readonly 'accent-amber-hover': "var(--accent-amber-hover)";
2015
+ readonly 'accent-amber-foreground': "var(--accent-amber-foreground)";
2016
+ readonly 'accent-cherry': "var(--accent-cherry)";
2017
+ readonly 'accent-cherry-hover': "var(--accent-cherry-hover)";
2018
+ readonly 'accent-cherry-foreground': "var(--accent-cherry-foreground)";
2019
+ readonly 'accent-aqua': "var(--accent-aqua)";
2020
+ readonly 'accent-aqua-hover': "var(--accent-aqua-hover)";
2021
+ readonly 'accent-aqua-foreground': "var(--accent-aqua-foreground)";
2022
+ readonly 'accent-sakura': "var(--accent-sakura)";
2023
+ readonly 'accent-sakura-hover': "var(--accent-sakura-hover)";
2024
+ readonly 'accent-sakura-foreground': "var(--accent-sakura-foreground)";
2025
+ readonly 'accent-sienna': "var(--accent-sienna)";
2026
+ readonly 'accent-sienna-hover': "var(--accent-sienna-hover)";
2027
+ readonly 'accent-sienna-foreground': "var(--accent-sienna-foreground)";
2028
+ };
2029
+
2030
+ export declare type StyleTailwindType = (typeof StyleTailwind)[keyof typeof StyleTailwind];
2031
+
2032
+ export declare type StyleType = typeof Style;
2033
+
1774
2034
  /**
1775
2035
  * Do not edit directly
1776
- * Generated on Thu, 04 Dec 2025 11:00:53 GMT
2036
+ * Generated on Sat, 24 Jan 2026 12:23:24 GMT
1777
2037
  */
1778
2038
  export declare const Typography: {
1779
2039
  FONTFAMILY_INTER: string;
@@ -1985,6 +2245,528 @@ export declare const Typography: {
1985
2245
  PARAGRAPH_SMALL_600_FONTFAMILY: string;
1986
2246
  };
1987
2247
 
2248
+ /**
2249
+ * Typography Styles
2250
+ * DO NOT EDIT DIRECTLY - This file is auto-generated
2251
+ * Generated on Sat, 24 Jan 2026 12:23:24 GMT
2252
+ *
2253
+ * Use these constants to apply complete typography styles in your components
2254
+ *
2255
+ * Usage in React:
2256
+ * import { TypographyStyles } from '@signoz/design-tokens';
2257
+ *
2258
+ * <p style={TypographyStyles.PARAGRAPH_MEDIUM_400}>Your text here</p>
2259
+ */
2260
+ export declare interface TypographyStyle {
2261
+ fontFamily: string;
2262
+ fontSize: string;
2263
+ fontWeight: string;
2264
+ lineHeight: string;
2265
+ letterSpacing: string;
2266
+ }
2267
+
2268
+ export declare type TypographyStyleName = keyof typeof TypographyStyles;
2269
+
2270
+ export declare const TypographyStyles: {
2271
+ readonly LABEL_LARGE_400: {
2272
+ readonly fontFamily: "Inter, sans-serif";
2273
+ readonly fontSize: "18px";
2274
+ readonly fontWeight: "400";
2275
+ readonly lineHeight: "1";
2276
+ readonly letterSpacing: "0px";
2277
+ };
2278
+ readonly LABEL_LARGE_500: {
2279
+ readonly fontFamily: "Inter, sans-serif";
2280
+ readonly fontSize: "18px";
2281
+ readonly fontWeight: "500";
2282
+ readonly lineHeight: "1";
2283
+ readonly letterSpacing: "0px";
2284
+ };
2285
+ readonly LABEL_LARGE_600: {
2286
+ readonly fontFamily: "Inter, sans-serif";
2287
+ readonly fontSize: "18px";
2288
+ readonly fontWeight: "600";
2289
+ readonly lineHeight: "1";
2290
+ readonly letterSpacing: "0px";
2291
+ };
2292
+ readonly LABEL_MEDIUM_400: {
2293
+ readonly fontFamily: "Inter, sans-serif";
2294
+ readonly fontSize: "16px";
2295
+ readonly fontWeight: "400";
2296
+ readonly lineHeight: "1";
2297
+ readonly letterSpacing: "0px";
2298
+ };
2299
+ readonly LABEL_MEDIUM_500: {
2300
+ readonly fontFamily: "Inter, sans-serif";
2301
+ readonly fontSize: "16px";
2302
+ readonly fontWeight: "500";
2303
+ readonly lineHeight: "1";
2304
+ readonly letterSpacing: "0px";
2305
+ };
2306
+ readonly LABEL_MEDIUM_600: {
2307
+ readonly fontFamily: "Inter, sans-serif";
2308
+ readonly fontSize: "16px";
2309
+ readonly fontWeight: "600";
2310
+ readonly lineHeight: "1";
2311
+ readonly letterSpacing: "0px";
2312
+ };
2313
+ readonly LABEL_BASE_400: {
2314
+ readonly fontFamily: "Inter, sans-serif";
2315
+ readonly fontSize: "13px";
2316
+ readonly fontWeight: "400";
2317
+ readonly lineHeight: "1";
2318
+ readonly letterSpacing: "-0.5px";
2319
+ };
2320
+ readonly LABEL_BASE_500: {
2321
+ readonly fontFamily: "Inter, sans-serif";
2322
+ readonly fontSize: "13px";
2323
+ readonly fontWeight: "500";
2324
+ readonly lineHeight: "1";
2325
+ readonly letterSpacing: "-0.5px";
2326
+ };
2327
+ readonly LABEL_BASE_600: {
2328
+ readonly fontFamily: "Inter, sans-serif";
2329
+ readonly fontSize: "13px";
2330
+ readonly fontWeight: "600";
2331
+ readonly lineHeight: "1";
2332
+ readonly letterSpacing: "-0.5px";
2333
+ };
2334
+ readonly LABEL_SMALL_400: {
2335
+ readonly fontFamily: "Inter, sans-serif";
2336
+ readonly fontSize: "11px";
2337
+ readonly fontWeight: "400";
2338
+ readonly lineHeight: "1";
2339
+ readonly letterSpacing: "0px";
2340
+ };
2341
+ readonly LABEL_SMALL_500: {
2342
+ readonly fontFamily: "Inter, sans-serif";
2343
+ readonly fontSize: "11px";
2344
+ readonly fontWeight: "500";
2345
+ readonly lineHeight: "1";
2346
+ readonly letterSpacing: "0px";
2347
+ };
2348
+ readonly LABEL_SMALL_600: {
2349
+ readonly fontFamily: "Inter, sans-serif";
2350
+ readonly fontSize: "11px";
2351
+ readonly fontWeight: "600";
2352
+ readonly lineHeight: "1";
2353
+ readonly letterSpacing: "0px";
2354
+ };
2355
+ readonly UPPERCASE_BASE_400: {
2356
+ readonly fontFamily: "Inter, sans-serif";
2357
+ readonly fontSize: "13px";
2358
+ readonly fontWeight: "400";
2359
+ readonly lineHeight: "1";
2360
+ readonly letterSpacing: "4px";
2361
+ };
2362
+ readonly UPPERCASE_BASE_500: {
2363
+ readonly fontFamily: "Inter, sans-serif";
2364
+ readonly fontSize: "13px";
2365
+ readonly fontWeight: "500";
2366
+ readonly lineHeight: "1";
2367
+ readonly letterSpacing: "4px";
2368
+ };
2369
+ readonly UPPERCASE_BASE_600: {
2370
+ readonly fontFamily: "Inter, sans-serif";
2371
+ readonly fontSize: "13px";
2372
+ readonly fontWeight: "600";
2373
+ readonly lineHeight: "1";
2374
+ readonly letterSpacing: "4px";
2375
+ };
2376
+ readonly UPPERCASE_SMALL_400: {
2377
+ readonly fontFamily: "Inter, sans-serif";
2378
+ readonly fontSize: "11px";
2379
+ readonly fontWeight: "400";
2380
+ readonly lineHeight: "1";
2381
+ readonly letterSpacing: "4px";
2382
+ };
2383
+ readonly UPPERCASE_SMALL_500: {
2384
+ readonly fontFamily: "Inter, sans-serif";
2385
+ readonly fontSize: "11px";
2386
+ readonly fontWeight: "500";
2387
+ readonly lineHeight: "1";
2388
+ readonly letterSpacing: "4px";
2389
+ };
2390
+ readonly UPPERCASE_SMALL_600: {
2391
+ readonly fontFamily: "Inter, sans-serif";
2392
+ readonly fontSize: "11px";
2393
+ readonly fontWeight: "600";
2394
+ readonly lineHeight: "1";
2395
+ readonly letterSpacing: "4px";
2396
+ };
2397
+ readonly CODE_BASE_400: {
2398
+ readonly fontFamily: "SF Mono, monospace";
2399
+ readonly fontSize: "13px";
2400
+ readonly fontWeight: "400";
2401
+ readonly lineHeight: "1";
2402
+ readonly letterSpacing: "0px";
2403
+ };
2404
+ readonly CODE_BASE_500: {
2405
+ readonly fontFamily: "SF Mono, monospace";
2406
+ readonly fontSize: "13px";
2407
+ readonly fontWeight: "500";
2408
+ readonly lineHeight: "1";
2409
+ readonly letterSpacing: "0px";
2410
+ };
2411
+ readonly CODE_BASE_600: {
2412
+ readonly fontFamily: "SF Mono, monospace";
2413
+ readonly fontSize: "13px";
2414
+ readonly fontWeight: "600";
2415
+ readonly lineHeight: "1";
2416
+ readonly letterSpacing: "0px";
2417
+ };
2418
+ readonly CODE_SMALL_400: {
2419
+ readonly fontFamily: "SF Mono, monospace";
2420
+ readonly fontSize: "11px";
2421
+ readonly fontWeight: "400";
2422
+ readonly lineHeight: "1";
2423
+ readonly letterSpacing: "0px";
2424
+ };
2425
+ readonly CODE_SMALL_500: {
2426
+ readonly fontFamily: "SF Mono, monospace";
2427
+ readonly fontSize: "11px";
2428
+ readonly fontWeight: "500";
2429
+ readonly lineHeight: "1";
2430
+ readonly letterSpacing: "0px";
2431
+ };
2432
+ readonly CODE_SMALL_600: {
2433
+ readonly fontFamily: "SF Mono, monospace";
2434
+ readonly fontSize: "11px";
2435
+ readonly fontWeight: "600";
2436
+ readonly lineHeight: "1";
2437
+ readonly letterSpacing: "0px";
2438
+ };
2439
+ readonly PARAGRAPH_MEDIUM_400: {
2440
+ readonly fontFamily: "Inter, sans-serif";
2441
+ readonly fontSize: "16px";
2442
+ readonly fontWeight: "400";
2443
+ readonly lineHeight: "24px";
2444
+ readonly letterSpacing: "0px";
2445
+ };
2446
+ readonly PARAGRAPH_MEDIUM_500: {
2447
+ readonly fontFamily: "Inter, sans-serif";
2448
+ readonly fontSize: "16px";
2449
+ readonly fontWeight: "500";
2450
+ readonly lineHeight: "24px";
2451
+ readonly letterSpacing: "0px";
2452
+ };
2453
+ readonly PARAGRAPH_MEDIUM_600: {
2454
+ readonly fontFamily: "Inter, sans-serif";
2455
+ readonly fontSize: "16px";
2456
+ readonly fontWeight: "600";
2457
+ readonly lineHeight: "24px";
2458
+ readonly letterSpacing: "0px";
2459
+ };
2460
+ readonly PARAGRAPH_BASE_400: {
2461
+ readonly fontFamily: "Inter, sans-serif";
2462
+ readonly fontSize: "13px";
2463
+ readonly fontWeight: "400";
2464
+ readonly lineHeight: "20px";
2465
+ readonly letterSpacing: "-0.5px";
2466
+ };
2467
+ readonly PARAGRAPH_BASE_500: {
2468
+ readonly fontFamily: "Inter, sans-serif";
2469
+ readonly fontSize: "13px";
2470
+ readonly fontWeight: "500";
2471
+ readonly lineHeight: "20px";
2472
+ readonly letterSpacing: "-0.5px";
2473
+ };
2474
+ readonly PARAGRAPH_BASE_600: {
2475
+ readonly fontFamily: "Inter, sans-serif";
2476
+ readonly fontSize: "13px";
2477
+ readonly fontWeight: "600";
2478
+ readonly lineHeight: "20px";
2479
+ readonly letterSpacing: "-0.5px";
2480
+ };
2481
+ readonly PARAGRAPH_SMALL_400: {
2482
+ readonly fontFamily: "Inter, sans-serif";
2483
+ readonly fontSize: "11px";
2484
+ readonly fontWeight: "400";
2485
+ readonly lineHeight: "18px";
2486
+ readonly letterSpacing: "-0.5px";
2487
+ };
2488
+ readonly PARAGRAPH_SMALL_500: {
2489
+ readonly fontFamily: "Inter, sans-serif";
2490
+ readonly fontSize: "11px";
2491
+ readonly fontWeight: "500";
2492
+ readonly lineHeight: "18px";
2493
+ readonly letterSpacing: "-0.5px";
2494
+ };
2495
+ readonly PARAGRAPH_SMALL_600: {
2496
+ readonly fontFamily: "Inter, sans-serif";
2497
+ readonly fontSize: "11px";
2498
+ readonly fontWeight: "600";
2499
+ readonly lineHeight: "18px";
2500
+ readonly letterSpacing: "-0.5px";
2501
+ };
2502
+ };
2503
+
2504
+ export declare const typographyStylesTokens: {
2505
+ "label": {
2506
+ "large": {
2507
+ "400": {
2508
+ "fontFamily": "Inter, sans-serif",
2509
+ "fontSize": "18px",
2510
+ "fontWeight": "400",
2511
+ "lineHeight": "1",
2512
+ "letterSpacing": "0px"
2513
+ },
2514
+ "500": {
2515
+ "fontFamily": "Inter, sans-serif",
2516
+ "fontSize": "18px",
2517
+ "fontWeight": "500",
2518
+ "lineHeight": "1",
2519
+ "letterSpacing": "0px"
2520
+ },
2521
+ "600": {
2522
+ "fontFamily": "Inter, sans-serif",
2523
+ "fontSize": "18px",
2524
+ "fontWeight": "600",
2525
+ "lineHeight": "1",
2526
+ "letterSpacing": "0px"
2527
+ }
2528
+ },
2529
+ "medium": {
2530
+ "400": {
2531
+ "fontFamily": "Inter, sans-serif",
2532
+ "fontSize": "16px",
2533
+ "fontWeight": "400",
2534
+ "lineHeight": "1",
2535
+ "letterSpacing": "0px"
2536
+ },
2537
+ "500": {
2538
+ "fontFamily": "Inter, sans-serif",
2539
+ "fontSize": "16px",
2540
+ "fontWeight": "500",
2541
+ "lineHeight": "1",
2542
+ "letterSpacing": "0px"
2543
+ },
2544
+ "600": {
2545
+ "fontFamily": "Inter, sans-serif",
2546
+ "fontSize": "16px",
2547
+ "fontWeight": "600",
2548
+ "lineHeight": "1",
2549
+ "letterSpacing": "0px"
2550
+ }
2551
+ },
2552
+ "base": {
2553
+ "400": {
2554
+ "fontFamily": "Inter, sans-serif",
2555
+ "fontSize": "13px",
2556
+ "fontWeight": "400",
2557
+ "lineHeight": "1",
2558
+ "letterSpacing": "-0.5px"
2559
+ },
2560
+ "500": {
2561
+ "fontFamily": "Inter, sans-serif",
2562
+ "fontSize": "13px",
2563
+ "fontWeight": "500",
2564
+ "lineHeight": "1",
2565
+ "letterSpacing": "-0.5px"
2566
+ },
2567
+ "600": {
2568
+ "fontFamily": "Inter, sans-serif",
2569
+ "fontSize": "13px",
2570
+ "fontWeight": "600",
2571
+ "lineHeight": "1",
2572
+ "letterSpacing": "-0.5px"
2573
+ }
2574
+ },
2575
+ "small": {
2576
+ "400": {
2577
+ "fontFamily": "Inter, sans-serif",
2578
+ "fontSize": "11px",
2579
+ "fontWeight": "400",
2580
+ "lineHeight": "1",
2581
+ "letterSpacing": "0px"
2582
+ },
2583
+ "500": {
2584
+ "fontFamily": "Inter, sans-serif",
2585
+ "fontSize": "11px",
2586
+ "fontWeight": "500",
2587
+ "lineHeight": "1",
2588
+ "letterSpacing": "0px"
2589
+ },
2590
+ "600": {
2591
+ "fontFamily": "Inter, sans-serif",
2592
+ "fontSize": "11px",
2593
+ "fontWeight": "600",
2594
+ "lineHeight": "1",
2595
+ "letterSpacing": "0px"
2596
+ }
2597
+ }
2598
+ },
2599
+ "uppercase": {
2600
+ "base": {
2601
+ "400": {
2602
+ "fontFamily": "Inter, sans-serif",
2603
+ "fontSize": "13px",
2604
+ "fontWeight": "400",
2605
+ "lineHeight": "1",
2606
+ "letterSpacing": "4px"
2607
+ },
2608
+ "500": {
2609
+ "fontFamily": "Inter, sans-serif",
2610
+ "fontSize": "13px",
2611
+ "fontWeight": "500",
2612
+ "lineHeight": "1",
2613
+ "letterSpacing": "4px"
2614
+ },
2615
+ "600": {
2616
+ "fontFamily": "Inter, sans-serif",
2617
+ "fontSize": "13px",
2618
+ "fontWeight": "600",
2619
+ "lineHeight": "1",
2620
+ "letterSpacing": "4px"
2621
+ }
2622
+ },
2623
+ "small": {
2624
+ "400": {
2625
+ "fontFamily": "Inter, sans-serif",
2626
+ "fontSize": "11px",
2627
+ "fontWeight": "400",
2628
+ "lineHeight": "1",
2629
+ "letterSpacing": "4px"
2630
+ },
2631
+ "500": {
2632
+ "fontFamily": "Inter, sans-serif",
2633
+ "fontSize": "11px",
2634
+ "fontWeight": "500",
2635
+ "lineHeight": "1",
2636
+ "letterSpacing": "4px"
2637
+ },
2638
+ "600": {
2639
+ "fontFamily": "Inter, sans-serif",
2640
+ "fontSize": "11px",
2641
+ "fontWeight": "600",
2642
+ "lineHeight": "1",
2643
+ "letterSpacing": "4px"
2644
+ }
2645
+ }
2646
+ },
2647
+ "code": {
2648
+ "base": {
2649
+ "400": {
2650
+ "fontFamily": "SF Mono, monospace",
2651
+ "fontSize": "13px",
2652
+ "fontWeight": "400",
2653
+ "lineHeight": "1",
2654
+ "letterSpacing": "0px"
2655
+ },
2656
+ "500": {
2657
+ "fontFamily": "SF Mono, monospace",
2658
+ "fontSize": "13px",
2659
+ "fontWeight": "500",
2660
+ "lineHeight": "1",
2661
+ "letterSpacing": "0px"
2662
+ },
2663
+ "600": {
2664
+ "fontFamily": "SF Mono, monospace",
2665
+ "fontSize": "13px",
2666
+ "fontWeight": "600",
2667
+ "lineHeight": "1",
2668
+ "letterSpacing": "0px"
2669
+ }
2670
+ },
2671
+ "small": {
2672
+ "400": {
2673
+ "fontFamily": "SF Mono, monospace",
2674
+ "fontSize": "11px",
2675
+ "fontWeight": "400",
2676
+ "lineHeight": "1",
2677
+ "letterSpacing": "0px"
2678
+ },
2679
+ "500": {
2680
+ "fontFamily": "SF Mono, monospace",
2681
+ "fontSize": "11px",
2682
+ "fontWeight": "500",
2683
+ "lineHeight": "1",
2684
+ "letterSpacing": "0px"
2685
+ },
2686
+ "600": {
2687
+ "fontFamily": "SF Mono, monospace",
2688
+ "fontSize": "11px",
2689
+ "fontWeight": "600",
2690
+ "lineHeight": "1",
2691
+ "letterSpacing": "0px"
2692
+ }
2693
+ }
2694
+ },
2695
+ "paragraph": {
2696
+ "medium": {
2697
+ "400": {
2698
+ "fontFamily": "Inter, sans-serif",
2699
+ "fontSize": "16px",
2700
+ "fontWeight": "400",
2701
+ "lineHeight": "24px",
2702
+ "letterSpacing": "0px"
2703
+ },
2704
+ "500": {
2705
+ "fontFamily": "Inter, sans-serif",
2706
+ "fontSize": "16px",
2707
+ "fontWeight": "500",
2708
+ "lineHeight": "24px",
2709
+ "letterSpacing": "0px"
2710
+ },
2711
+ "600": {
2712
+ "fontFamily": "Inter, sans-serif",
2713
+ "fontSize": "16px",
2714
+ "fontWeight": "600",
2715
+ "lineHeight": "24px",
2716
+ "letterSpacing": "0px"
2717
+ }
2718
+ },
2719
+ "base": {
2720
+ "400": {
2721
+ "fontFamily": "Inter, sans-serif",
2722
+ "fontSize": "13px",
2723
+ "fontWeight": "400",
2724
+ "lineHeight": "20px",
2725
+ "letterSpacing": "-0.5px"
2726
+ },
2727
+ "500": {
2728
+ "fontFamily": "Inter, sans-serif",
2729
+ "fontSize": "13px",
2730
+ "fontWeight": "500",
2731
+ "lineHeight": "20px",
2732
+ "letterSpacing": "-0.5px"
2733
+ },
2734
+ "600": {
2735
+ "fontFamily": "Inter, sans-serif",
2736
+ "fontSize": "13px",
2737
+ "fontWeight": "600",
2738
+ "lineHeight": "20px",
2739
+ "letterSpacing": "-0.5px"
2740
+ }
2741
+ },
2742
+ "small": {
2743
+ "400": {
2744
+ "fontFamily": "Inter, sans-serif",
2745
+ "fontSize": "11px",
2746
+ "fontWeight": "400",
2747
+ "lineHeight": "18px",
2748
+ "letterSpacing": "-0.5px"
2749
+ },
2750
+ "500": {
2751
+ "fontFamily": "Inter, sans-serif",
2752
+ "fontSize": "11px",
2753
+ "fontWeight": "500",
2754
+ "lineHeight": "18px",
2755
+ "letterSpacing": "-0.5px"
2756
+ },
2757
+ "600": {
2758
+ "fontFamily": "Inter, sans-serif",
2759
+ "fontSize": "11px",
2760
+ "fontWeight": "600",
2761
+ "lineHeight": "18px",
2762
+ "letterSpacing": "-0.5px"
2763
+ }
2764
+ }
2765
+ }
2766
+ };
2767
+
2768
+ export declare type TypographyStylesType = typeof TypographyStyles;
2769
+
1988
2770
  export declare const typographyTokens: {
1989
2771
  "fontFamily": {
1990
2772
  "inter": {