@xsolla/xui-core 0.116.0 → 0.118.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 (8) hide show
  1. package/index.d.mts +168 -28
  2. package/index.d.ts +168 -28
  3. package/index.js +1153 -1047
  4. package/index.js.flow +169 -33
  5. package/index.js.map +1 -1
  6. package/index.mjs +1152 -1047
  7. package/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/index.mjs CHANGED
@@ -119,8 +119,8 @@ var xsolla_dark_default = {
119
119
  borderPress: "rgba(255, 255, 255, 0)"
120
120
  },
121
121
  tertiary: {
122
- bg: "rgba(85, 220, 246, 0)",
123
- bgHover: "rgba(85, 220, 246, 0.07)",
122
+ bg: "rgba(255, 255, 255, 0)",
123
+ bgHover: "rgba(178, 242, 255, 0.07)",
124
124
  bgPress: "rgba(85, 220, 246, 0.12)",
125
125
  border: "rgba(255, 255, 255, 0)",
126
126
  borderHover: "rgba(255, 255, 255, 0)",
@@ -296,7 +296,7 @@ var xsolla_dark_default = {
296
296
  border: "rgba(255, 255, 255, 0)",
297
297
  borderHover: "rgba(255, 255, 255, 0)",
298
298
  borderDisable: "rgba(255, 255, 255, 0)",
299
- text: "#000000"
299
+ icon: "#000000"
300
300
  },
301
301
  faint: {
302
302
  bg: "rgba(255, 255, 255, 0.15)",
@@ -304,9 +304,23 @@ var xsolla_dark_default = {
304
304
  border: "rgba(255, 255, 255, 0)",
305
305
  borderHover: "rgba(255, 255, 255, 0.16)"
306
306
  },
307
+ slider: {
308
+ bg: "#ffffff",
309
+ bgHover: "#ffffff",
310
+ bgDisable: "rgba(52, 71, 75, 0.85)"
311
+ },
307
312
  switch: {
308
313
  bg: "rgba(255, 255, 255, 0.1)",
309
- bgHover: "rgba(255, 255, 255, 0.15)"
314
+ bgHover: "rgba(255, 255, 255, 0.15)",
315
+ bgDisable: "rgba(255, 255, 255, 0.2)",
316
+ border: "#ffffff",
317
+ borderHover: "#ffffff",
318
+ borderDisable: "rgba(255, 255, 255, 0)"
319
+ },
320
+ knob: {
321
+ bg: "#ffffff",
322
+ bgHover: "#e8eced",
323
+ bgInactive: "#ffffff"
310
324
  },
311
325
  text: {
312
326
  primary: "#ffffff",
@@ -338,7 +352,7 @@ var xsolla_dark_default = {
338
352
  borderActive: "rgba(255, 255, 255, 0)",
339
353
  borderDisable: "rgba(255, 255, 255, 0.16)",
340
354
  text: "#e8eced",
341
- textActive: "#e8eced",
355
+ textActive: "#ffffff",
342
356
  textDisable: "rgba(255, 255, 255, 0.4)"
343
357
  }
344
358
  }
@@ -639,7 +653,7 @@ var xsolla_light_default = {
639
653
  border: "rgba(255, 255, 255, 0)",
640
654
  borderHover: "rgba(255, 255, 255, 0)",
641
655
  borderDisable: "rgba(255, 255, 255, 0)",
642
- text: "#ffffff"
656
+ icon: "#ffffff"
643
657
  },
644
658
  faint: {
645
659
  bg: "rgba(0, 0, 0, 0.15)",
@@ -647,9 +661,23 @@ var xsolla_light_default = {
647
661
  border: "rgba(0, 0, 0, 0)",
648
662
  borderHover: "rgba(0, 0, 0, 0.1)"
649
663
  },
664
+ slider: {
665
+ bg: "#000000",
666
+ bgHover: "#000000",
667
+ bgDisable: "#cccccc"
668
+ },
650
669
  switch: {
651
670
  bg: "rgba(0, 0, 0, 0.1)",
652
- bgHover: "rgba(0, 0, 0, 0.15)"
671
+ bgHover: "rgba(0, 0, 0, 0.15)",
672
+ bgDisable: "rgba(0, 0, 0, 0.2)",
673
+ border: "#ffffff",
674
+ borderHover: "#ffffff",
675
+ borderDisable: "rgba(255, 255, 255, 0)"
676
+ },
677
+ knob: {
678
+ bg: "#ffffff",
679
+ bgHover: "#233134",
680
+ bgInactive: "#ffffff"
653
681
  },
654
682
  text: {
655
683
  primary: "#000000",
@@ -677,11 +705,11 @@ var xsolla_light_default = {
677
705
  bgActive: "rgba(0, 0, 0, 0.1)",
678
706
  bgDisable: "rgba(0, 0, 0, 0.15)",
679
707
  border: "rgba(0, 0, 0, 0.1)",
680
- borderHover: "rgba(0, 0, 0, 0.1)",
708
+ borderHover: "rgba(0, 0, 0, 0.15)",
681
709
  borderActive: "rgba(0, 0, 0, 0.1)",
682
710
  borderDisable: "rgba(0, 0, 0, 0.1)",
683
711
  text: "#000000",
684
- textActive: "#000000",
712
+ textActive: "#ffffff",
685
713
  textDisable: "rgba(255, 255, 255, 0.4)"
686
714
  }
687
715
  }
@@ -762,7 +790,7 @@ var pentagram_dark_default = {
762
790
  },
763
791
  border: {
764
792
  primary: "#ffffff",
765
- secondary: "rgba(255, 255, 255, 0.16)",
793
+ secondary: "rgba(178, 242, 255, 0.1)",
766
794
  brand: "#55dcf6",
767
795
  brandExtra: "#cef655",
768
796
  inverse: "rgba(0, 0, 0, 0.15)",
@@ -805,9 +833,9 @@ var pentagram_dark_default = {
805
833
  borderPress: "rgba(255, 255, 255, 0)"
806
834
  },
807
835
  tertiary: {
808
- bg: "rgba(128, 234, 255, 0)",
809
- bgHover: "rgba(128, 234, 255, 0.07)",
810
- bgPress: "rgba(128, 234, 255, 0.12)",
836
+ bg: "rgba(255, 255, 255, 0)",
837
+ bgHover: "#0b3841",
838
+ bgPress: "#135d6c",
811
839
  border: "rgba(255, 255, 255, 0)",
812
840
  borderHover: "rgba(255, 255, 255, 0)",
813
841
  borderPress: "rgba(255, 255, 255, 0)"
@@ -838,17 +866,17 @@ var pentagram_dark_default = {
838
866
  borderPress: "rgba(255, 255, 255, 0)"
839
867
  },
840
868
  secondary: {
841
- bg: "rgba(255, 255, 255, 0.4)",
842
- bgHover: "rgba(255, 255, 255, 0.34)",
843
- bgPress: "rgba(255, 255, 255, 0.44)",
844
- border: "rgba(255, 255, 255, 0)",
845
- borderHover: "rgba(255, 255, 255, 0)",
869
+ bg: "#34474b",
870
+ bgHover: "#4b6368",
871
+ bgPress: "#233134",
872
+ border: "#4b6368",
873
+ borderHover: "#607f85",
846
874
  borderPress: "rgba(255, 255, 255, 0)"
847
875
  },
848
876
  tertiary: {
849
877
  bg: "rgba(255, 255, 255, 0)",
850
- bgHover: "rgba(255, 255, 255, 0.07)",
851
- bgPress: "rgba(255, 255, 255, 0.12)",
878
+ bgHover: "#233134",
879
+ bgPress: "#34474b",
852
880
  border: "rgba(255, 255, 255, 0)",
853
881
  borderHover: "rgba(255, 255, 255, 0)",
854
882
  borderPress: "rgba(255, 255, 255, 0)"
@@ -982,7 +1010,7 @@ var pentagram_dark_default = {
982
1010
  border: "#22a8c3",
983
1011
  borderHover: "#22a8c3",
984
1012
  borderDisable: "rgba(255, 255, 255, 0)",
985
- text: "#80eaff"
1013
+ icon: "#80eaff"
986
1014
  },
987
1015
  faint: {
988
1016
  bg: "rgba(178, 242, 255, 0.15)",
@@ -1162,12 +1190,12 @@ var pentagram_light_default = {
1162
1190
  borderPress: "rgba(255, 255, 255, 0)"
1163
1191
  },
1164
1192
  tertiary: {
1165
- bg: "rgba(34, 168, 195, 0)",
1166
- bgHover: "rgba(34, 168, 195, 0.07)",
1167
- bgPress: "rgba(34, 168, 195, 0.12)",
1168
- border: "rgba(0, 0, 0, 0)",
1169
- borderHover: "rgba(0, 0, 0, 0)",
1170
- borderPress: "rgba(0, 0, 0, 0)"
1193
+ bg: "rgba(255, 255, 255, 0)",
1194
+ bgHover: "#e5fbff",
1195
+ bgPress: "#ccf6ff",
1196
+ border: "rgba(255, 255, 255, 0)",
1197
+ borderHover: "rgba(255, 255, 255, 0)",
1198
+ borderPress: "rgba(255, 255, 255, 0)"
1171
1199
  },
1172
1200
  ghost: {
1173
1201
  bg: "rgba(0, 0, 0, 0)",
@@ -1180,32 +1208,32 @@ var pentagram_light_default = {
1180
1208
  text: {
1181
1209
  primary: "#000000",
1182
1210
  secondary: "#000000",
1183
- tertiary: "#22a8c3",
1211
+ tertiary: "#1b8398",
1184
1212
  ghost: "#22a8c3",
1185
1213
  disable: "#999999"
1186
1214
  }
1187
1215
  },
1188
1216
  mono: {
1189
1217
  primary: {
1190
- bg: "#000000",
1191
- bgHover: "#141d1f",
1192
- bgPress: "#1b2628",
1218
+ bg: "#141d1f",
1219
+ bgHover: "#233134",
1220
+ bgPress: "#000000",
1193
1221
  border: "rgba(255, 255, 255, 0)",
1194
1222
  borderHover: "rgba(255, 255, 255, 0)",
1195
1223
  borderPress: "rgba(255, 255, 255, 0)"
1196
1224
  },
1197
1225
  secondary: {
1198
- bg: "rgba(0, 0, 0, 0.12)",
1199
- bgHover: "rgba(21, 28, 30, 0.12)",
1200
- bgPress: "rgba(32, 42, 44, 0.12)",
1201
- border: "rgba(255, 255, 255, 0)",
1202
- borderHover: "rgba(255, 255, 255, 0)",
1226
+ bg: "#dadbd7",
1227
+ bgHover: "#e6e7e4",
1228
+ bgPress: "#c1c2bc",
1229
+ border: "#c1c2bc",
1230
+ borderHover: "#dadbd7",
1203
1231
  borderPress: "rgba(255, 255, 255, 0)"
1204
1232
  },
1205
1233
  tertiary: {
1206
- bg: "rgba(0, 0, 0, 0)",
1207
- bgHover: "rgba(21, 28, 30, 0.07)",
1208
- bgPress: "rgba(32, 42, 44, 0.12)",
1234
+ bg: "rgba(255, 255, 255, 0)",
1235
+ bgHover: "#f3f3f2",
1236
+ bgPress: "#e6e7e4",
1209
1237
  border: "rgba(255, 255, 255, 0)",
1210
1238
  borderHover: "rgba(255, 255, 255, 0)",
1211
1239
  borderPress: "rgba(255, 255, 255, 0)"
@@ -1339,7 +1367,7 @@ var pentagram_light_default = {
1339
1367
  border: "#80eaff",
1340
1368
  borderHover: "#b2f2ff",
1341
1369
  borderDisable: "rgba(0, 0, 0, 0)",
1342
- text: "#000000"
1370
+ icon: "#000000"
1343
1371
  },
1344
1372
  faint: {
1345
1373
  bg: "rgba(0, 0, 0, 0.15)",
@@ -1519,9 +1547,9 @@ var ltg_dark_default = {
1519
1547
  borderPress: "rgba(255, 255, 255, 0)"
1520
1548
  },
1521
1549
  tertiary: {
1522
- bg: "rgba(255, 202, 67, 0)",
1523
- bgHover: "rgba(255, 202, 67, 0.07)",
1524
- bgPress: "rgba(255, 202, 67, 0.12)",
1550
+ bg: "#ffffff",
1551
+ bgHover: "rgba(255, 255, 255, 0.76)",
1552
+ bgPress: "rgba(255, 255, 255, 0.5)",
1525
1553
  border: "rgba(255, 255, 255, 0)",
1526
1554
  borderHover: "rgba(255, 255, 255, 0)",
1527
1555
  borderPress: "rgba(255, 255, 255, 0)"
@@ -1537,7 +1565,7 @@ var ltg_dark_default = {
1537
1565
  text: {
1538
1566
  primary: "#000000",
1539
1567
  secondary: "#000000",
1540
- tertiary: "#ffca43",
1568
+ tertiary: "#000000",
1541
1569
  ghost: "#ffca43",
1542
1570
  disable: "#c4d1d4"
1543
1571
  }
@@ -1696,7 +1724,7 @@ var ltg_dark_default = {
1696
1724
  border: "#ffffff",
1697
1725
  borderHover: "#ffffff",
1698
1726
  borderDisable: "#ffffff",
1699
- text: "#ffffff"
1727
+ icon: "#ffffff"
1700
1728
  },
1701
1729
  faint: {
1702
1730
  bg: "rgba(255, 255, 255, 0.15)",
@@ -1704,9 +1732,23 @@ var ltg_dark_default = {
1704
1732
  border: "rgba(255, 255, 255, 0)",
1705
1733
  borderHover: "rgba(255, 255, 255, 0.24)"
1706
1734
  },
1735
+ slider: {
1736
+ bg: "#ffffff",
1737
+ bgHover: "#ffffff",
1738
+ bgDisable: "rgba(255, 255, 255, 0.2)"
1739
+ },
1707
1740
  switch: {
1708
1741
  bg: "rgba(255, 255, 255, 0.1)",
1709
- bgHover: "rgba(255, 255, 255, 0.15)"
1742
+ bgHover: "rgba(255, 255, 255, 0.15)",
1743
+ bgDisable: "rgba(255, 255, 255, 0.2)",
1744
+ border: "#ffffff",
1745
+ borderHover: "#ffffff",
1746
+ borderDisable: "#ffffff"
1747
+ },
1748
+ knob: {
1749
+ bg: "#ffffff",
1750
+ bgHover: "#f6f8f9",
1751
+ bgInactive: "#ffffff"
1710
1752
  },
1711
1753
  text: {
1712
1754
  primary: "#ffffff",
@@ -1790,12 +1832,26 @@ var shadow = {
1790
1832
  };
1791
1833
 
1792
1834
  // src/tokens/fonts.ts
1835
+ var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
1836
+ var displayFontByContext = {
1837
+ b2b: `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
1838
+ b2c: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
1839
+ paystation: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
1840
+ presentation: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`
1841
+ };
1842
+ var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
1793
1843
  var fonts = {
1794
- heading: '"Pilat Wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
1795
- body: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
1844
+ heading: displayFontByContext.b2b,
1845
+ body: bodyFont,
1796
1846
  /** @deprecated Use `heading` or `body` instead */
1797
- primary: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
1847
+ primary: bodyFont
1798
1848
  };
1849
+ var getFonts = (productContext = "b2b") => ({
1850
+ heading: displayFontByContext[productContext],
1851
+ body: bodyFont,
1852
+ /** @deprecated Use `heading` or `body` instead */
1853
+ primary: bodyFont
1854
+ });
1799
1855
  var typography = {
1800
1856
  button: {
1801
1857
  fontFamily: fonts.body,
@@ -2014,34 +2070,73 @@ var isIOS = isNative && typeof global !== "undefined" && global.Platform?.OS ===
2014
2070
  var isAndroid = isNative && typeof global !== "undefined" && global.Platform?.OS === "android";
2015
2071
 
2016
2072
  // src/fonts/fontFaces.ts
2017
- var CDN_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
2073
+ var CDN_STRAPI = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
2074
+ var CDN_MERCHANT = "https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279";
2018
2075
  var fontFacesCSS = `
2019
- /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
2076
+ /* \u2500\u2500 Pilat Wide (B2C headings) \u2500\u2500 */
2020
2077
 
2021
2078
  @font-face {
2022
2079
  font-family: 'Pilat Wide';
2023
- src: url('${CDN_BASE}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
2080
+ src: url('${CDN_STRAPI}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
2024
2081
  font-weight: 400;
2025
2082
  font-style: normal;
2026
2083
  font-display: swap;
2027
2084
  }
2028
2085
  @font-face {
2029
2086
  font-family: 'Pilat Wide';
2030
- src: url('${CDN_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
2087
+ src: url('${CDN_STRAPI}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
2031
2088
  font-weight: 600;
2032
2089
  font-style: normal;
2033
2090
  font-display: swap;
2034
2091
  }
2035
2092
  @font-face {
2036
2093
  font-family: 'Pilat Wide';
2037
- src: url('${CDN_BASE}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
2094
+ src: url('${CDN_STRAPI}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
2038
2095
  font-weight: 700;
2039
2096
  font-style: normal;
2040
2097
  font-display: swap;
2041
2098
  }
2042
2099
  @font-face {
2043
2100
  font-family: 'Pilat Wide';
2044
- src: url('${CDN_BASE}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
2101
+ src: url('${CDN_STRAPI}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
2102
+ font-weight: 800;
2103
+ font-style: normal;
2104
+ font-display: swap;
2105
+ }
2106
+
2107
+ /* \u2500\u2500 Pilat (B2B headings) \u2500\u2500 */
2108
+
2109
+ @font-face {
2110
+ font-family: 'Pilat';
2111
+ src: url('${CDN_MERCHANT}/55a03110b2400b778d485de2c8d064c0.woff2') format('woff2');
2112
+ font-weight: 300;
2113
+ font-style: normal;
2114
+ font-display: swap;
2115
+ }
2116
+ @font-face {
2117
+ font-family: 'Pilat';
2118
+ src: url('${CDN_MERCHANT}/e968c9cc76e48ff6111c90534549bbf9.woff2') format('woff2');
2119
+ font-weight: 400;
2120
+ font-style: normal;
2121
+ font-display: swap;
2122
+ }
2123
+ @font-face {
2124
+ font-family: 'Pilat';
2125
+ src: url('${CDN_MERCHANT}/ed4fe74e88aaacc6978f06a862e75b08.woff2') format('woff2');
2126
+ font-weight: 600;
2127
+ font-style: normal;
2128
+ font-display: swap;
2129
+ }
2130
+ @font-face {
2131
+ font-family: 'Pilat';
2132
+ src: url('${CDN_MERCHANT}/7450f429979af7eaa8fa4d4d91cee927.woff2') format('woff2');
2133
+ font-weight: 700;
2134
+ font-style: normal;
2135
+ font-display: swap;
2136
+ }
2137
+ @font-face {
2138
+ font-family: 'Pilat';
2139
+ src: url('${CDN_MERCHANT}/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');
2045
2140
  font-weight: 800;
2046
2141
  font-style: normal;
2047
2142
  font-display: swap;
@@ -2051,35 +2146,35 @@ var fontFacesCSS = `
2051
2146
 
2052
2147
  @font-face {
2053
2148
  font-family: 'Aktiv Grotesk';
2054
- src: url('${CDN_BASE}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
2149
+ src: url('${CDN_STRAPI}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
2055
2150
  font-weight: 300;
2056
2151
  font-style: normal;
2057
2152
  font-display: swap;
2058
2153
  }
2059
2154
  @font-face {
2060
2155
  font-family: 'Aktiv Grotesk';
2061
- src: url('${CDN_BASE}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
2156
+ src: url('${CDN_STRAPI}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
2062
2157
  font-weight: 400;
2063
2158
  font-style: normal;
2064
2159
  font-display: swap;
2065
2160
  }
2066
2161
  @font-face {
2067
2162
  font-family: 'Aktiv Grotesk';
2068
- src: url('${CDN_BASE}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
2163
+ src: url('${CDN_STRAPI}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
2069
2164
  font-weight: 500;
2070
2165
  font-style: normal;
2071
2166
  font-display: swap;
2072
2167
  }
2073
2168
  @font-face {
2074
2169
  font-family: 'Aktiv Grotesk';
2075
- src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
2170
+ src: url('${CDN_STRAPI}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
2076
2171
  font-weight: 600;
2077
2172
  font-style: normal;
2078
2173
  font-display: swap;
2079
2174
  }
2080
2175
  @font-face {
2081
2176
  font-family: 'Aktiv Grotesk';
2082
- src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
2177
+ src: url('${CDN_STRAPI}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
2083
2178
  font-weight: 700;
2084
2179
  font-style: normal;
2085
2180
  font-display: swap;
@@ -2110,999 +2205,1008 @@ FontLoader.displayName = "FontLoader";
2110
2205
 
2111
2206
  // src/index.tsx
2112
2207
  import { jsx, jsxs } from "react/jsx-runtime";
2113
- var themeConfig = (mode = "dark", productContext = defaultProductContext) => ({
2114
- colors: colors[mode],
2115
- spacing,
2116
- radius,
2117
- shadow,
2118
- fonts,
2119
- typography: {
2120
- primary: fonts.body,
2121
- heading: fonts.heading,
2122
- body: fonts.body
2123
- },
2124
- typographyTokens: getTypographyTokens(productContext),
2125
- productContext,
2126
- sizing: {
2127
- button: (size) => {
2128
- const configs = {
2129
- xl: {
2130
- height: 64,
2131
- padding: 20,
2132
- fontSize: 20,
2133
- sublabelFontSize: 18,
2134
- spinnerSize: 24,
2135
- iconSize: 32,
2136
- iconContainerSize: 64,
2137
- iconPadding: 20,
2138
- loadingPadding: 40,
2139
- borderRadius: 8,
2140
- labelIconSize: 18,
2141
- labelIconGap: 6
2142
- },
2143
- lg: {
2144
- height: 56,
2145
- padding: 20,
2146
- fontSize: 18,
2147
- sublabelFontSize: 16,
2148
- spinnerSize: 24,
2149
- iconSize: 32,
2150
- iconContainerSize: 56,
2151
- iconPadding: 20,
2152
- loadingPadding: 36,
2153
- borderRadius: 8,
2154
- labelIconSize: 16,
2155
- labelIconGap: 6
2156
- },
2157
- md: {
2158
- height: 48,
2159
- padding: 20,
2160
- fontSize: 16,
2161
- sublabelFontSize: 14,
2162
- spinnerSize: 20,
2163
- iconSize: 28,
2164
- iconContainerSize: 48,
2165
- iconPadding: 20,
2166
- loadingPadding: 32,
2167
- borderRadius: 8,
2168
- labelIconSize: 14,
2169
- labelIconGap: 4
2170
- },
2171
- sm: {
2172
- height: 40,
2173
- padding: 20,
2174
- fontSize: 14,
2175
- sublabelFontSize: 12,
2176
- spinnerSize: 16,
2177
- iconSize: 28,
2178
- iconContainerSize: 40,
2179
- iconPadding: 20,
2180
- loadingPadding: 28,
2181
- borderRadius: 4,
2182
- labelIconSize: 12,
2183
- labelIconGap: 4
2184
- },
2185
- xs: {
2186
- height: 32,
2187
- padding: 20,
2188
- fontSize: 12,
2189
- sublabelFontSize: 10,
2190
- spinnerSize: 16,
2191
- iconSize: 24,
2192
- iconContainerSize: 32,
2193
- iconPadding: 20,
2194
- loadingPadding: 28,
2195
- borderRadius: 4,
2196
- labelIconSize: 10,
2197
- labelIconGap: 4
2198
- }
2199
- };
2200
- return configs[size];
2201
- },
2202
- flexButton: (size) => {
2203
- const configs = {
2204
- xl: {
2205
- height: 36,
2206
- padding: 4,
2207
- fontSize: 16,
2208
- spinnerSize: 28,
2209
- iconSize: 20,
2210
- borderRadius: 4
2211
- },
2212
- lg: {
2213
- height: 32,
2214
- padding: 4,
2215
- fontSize: 14,
2216
- spinnerSize: 24,
2217
- iconSize: 18,
2218
- borderRadius: 4
2219
- },
2220
- md: {
2221
- height: 28,
2222
- padding: 2,
2223
- fontSize: 14,
2224
- spinnerSize: 24,
2225
- iconSize: 16,
2226
- borderRadius: 2
2227
- },
2228
- sm: {
2229
- height: 22,
2230
- padding: 2,
2231
- fontSize: 12,
2232
- spinnerSize: 16,
2233
- iconSize: 14,
2234
- borderRadius: 2
2235
- },
2236
- xs: {
2237
- height: 20,
2238
- padding: 2,
2239
- fontSize: 12,
2240
- spinnerSize: 16,
2241
- iconSize: 12,
2242
- borderRadius: 2
2243
- }
2244
- };
2245
- return configs[size];
2246
- },
2247
- checkbox: (size) => {
2248
- const configs = {
2249
- xl: {
2250
- size: 22,
2251
- fontSize: 18,
2252
- descriptionFontSize: 16,
2253
- labelGap: 12,
2254
- textGap: 4,
2255
- borderRadius: 2
2256
- },
2257
- lg: {
2258
- size: 20,
2259
- fontSize: 16,
2260
- descriptionFontSize: 14,
2261
- labelGap: 10,
2262
- textGap: 2,
2263
- borderRadius: 2
2264
- },
2265
- md: {
2266
- size: 18,
2267
- fontSize: 16,
2268
- descriptionFontSize: 14,
2269
- labelGap: 8,
2270
- textGap: 2,
2271
- borderRadius: 2
2272
- },
2273
- sm: {
2274
- size: 16,
2275
- fontSize: 14,
2276
- descriptionFontSize: 12,
2277
- labelGap: 8,
2278
- textGap: 0,
2279
- borderRadius: 2
2280
- }
2281
- };
2282
- return configs[size];
2283
- },
2284
- radio: (size) => {
2285
- const configs = {
2286
- xl: {
2287
- size: 24,
2288
- fontSize: 20,
2289
- lineHeight: 22,
2290
- descriptionFontSize: 18,
2291
- descriptionLineHeight: 20,
2292
- labelGap: 12,
2293
- textGap: 4,
2294
- borderWidth: 2
2295
- },
2296
- lg: {
2297
- size: 20,
2298
- fontSize: 18,
2299
- lineHeight: 20,
2300
- descriptionFontSize: 16,
2301
- descriptionLineHeight: 18,
2302
- labelGap: 10,
2303
- textGap: 2,
2304
- borderWidth: 2
2305
- },
2306
- md: {
2307
- size: 18,
2308
- fontSize: 16,
2309
- lineHeight: 18,
2310
- descriptionFontSize: 14,
2311
- descriptionLineHeight: 16,
2312
- labelGap: 8,
2313
- textGap: 2,
2314
- borderWidth: 1
2315
- },
2316
- sm: {
2317
- size: 16,
2318
- fontSize: 14,
2319
- lineHeight: 16,
2320
- descriptionFontSize: 12,
2321
- descriptionLineHeight: 14,
2322
- labelGap: 8,
2323
- textGap: 0,
2324
- borderWidth: 1
2325
- }
2326
- };
2327
- return configs[size];
2328
- },
2329
- input: (size) => {
2330
- const configs = {
2331
- xl: {
2332
- height: 64,
2333
- paddingVertical: 12,
2334
- paddingHorizontal: 12,
2335
- fontSize: 20,
2336
- iconSize: 18,
2337
- radius: 8,
2338
- borderWidth: 2,
2339
- fieldGap: 8,
2340
- lineHeight: 20
2341
- },
2342
- lg: {
2343
- height: 56,
2344
- paddingVertical: 14,
2345
- paddingHorizontal: 12,
2346
- fontSize: 18,
2347
- iconSize: 18,
2348
- radius: 8,
2349
- borderWidth: 2,
2350
- fieldGap: 6,
2351
- lineHeight: 18
2352
- },
2353
- md: {
2354
- height: 48,
2355
- paddingVertical: 11,
2356
- paddingHorizontal: 12,
2357
- fontSize: 16,
2358
- iconSize: 18,
2359
- radius: 8,
2360
- borderWidth: 1,
2361
- fieldGap: 4,
2362
- lineHeight: 16
2363
- },
2364
- sm: {
2365
- height: 40,
2366
- paddingVertical: 7,
2367
- paddingHorizontal: 10,
2368
- fontSize: 14,
2369
- iconSize: 18,
2370
- radius: 4,
2371
- borderWidth: 1,
2372
- fieldGap: 4,
2373
- lineHeight: 14
2374
- },
2375
- xs: {
2376
- height: 32,
2377
- paddingVertical: 7,
2378
- paddingHorizontal: 10,
2379
- fontSize: 12,
2380
- iconSize: 18,
2381
- radius: 4,
2382
- borderWidth: 1,
2383
- fieldGap: 4,
2384
- lineHeight: 10
2385
- }
2386
- };
2387
- return configs[size];
2388
- },
2389
- inputPin: (size) => {
2390
- const configs = {
2391
- xl: {
2392
- size: 64,
2393
- gap: 10,
2394
- fontSize: 20,
2395
- radius: 8,
2396
- borderWidth: 1,
2397
- fieldGap: 8
2398
- },
2399
- lg: {
2400
- size: 56,
2401
- gap: 8,
2402
- fontSize: 18,
2403
- radius: 8,
2404
- borderWidth: 1,
2405
- fieldGap: 6
2406
- },
2407
- md: {
2408
- size: 48,
2409
- gap: 6,
2410
- fontSize: 16,
2411
- radius: 8,
2412
- borderWidth: 1,
2413
- fieldGap: 4
2414
- },
2415
- sm: {
2416
- size: 40,
2417
- gap: 4,
2418
- fontSize: 14,
2419
- radius: 4,
2420
- borderWidth: 1,
2421
- fieldGap: 4
2422
- },
2423
- xs: {
2424
- size: 32,
2425
- gap: 4,
2426
- fontSize: 12,
2427
- radius: 4,
2428
- borderWidth: 1,
2429
- fieldGap: 4
2430
- }
2431
- };
2432
- return configs[size];
2433
- },
2434
- textarea: (size) => {
2435
- const configs = {
2436
- xl: {
2437
- height: 144,
2438
- padding: spacing.xl,
2439
- fontSize: 20,
2440
- iconSize: 32,
2441
- radius: 8
2442
- },
2443
- lg: {
2444
- height: 128,
2445
- padding: spacing.l,
2446
- fontSize: 18,
2447
- iconSize: 28,
2448
- radius: 8
2449
- },
2450
- md: {
2451
- height: 112,
2452
- padding: spacing.m,
2453
- fontSize: 16,
2454
- iconSize: 24,
2455
- radius: 8
2456
- },
2457
- sm: {
2458
- height: 96,
2459
- padding: spacing.s,
2460
- fontSize: 14,
2461
- iconSize: 20,
2462
- radius: 4
2463
- },
2464
- xs: {
2465
- height: 80,
2466
- padding: spacing.xs,
2467
- fontSize: 12,
2468
- iconSize: 16,
2469
- radius: 4
2470
- }
2471
- };
2472
- return configs[size];
2473
- },
2474
- switch: (size) => {
2475
- const configs = {
2476
- xl: {
2477
- width: 40,
2478
- height: 22,
2479
- knobSize: 18,
2480
- fontSize: 20,
2481
- lineHeight: 22,
2482
- descriptionFontSize: 18,
2483
- descriptionLineHeight: 20,
2484
- labelGap: 12,
2485
- textGap: 4,
2486
- frameBorderRadius: 4,
2487
- knobBorderRadius: 2
2488
- },
2489
- lg: {
2490
- width: 36,
2491
- height: 20,
2492
- knobSize: 16,
2493
- fontSize: 18,
2494
- lineHeight: 20,
2495
- descriptionFontSize: 16,
2496
- descriptionLineHeight: 18,
2497
- labelGap: 10,
2498
- textGap: 2,
2499
- frameBorderRadius: 4,
2500
- knobBorderRadius: 2
2501
- },
2502
- md: {
2503
- width: 32,
2504
- height: 18,
2505
- knobSize: 14,
2506
- fontSize: 16,
2507
- lineHeight: 18,
2508
- descriptionFontSize: 14,
2509
- descriptionLineHeight: 16,
2510
- labelGap: 8,
2511
- textGap: 2,
2512
- frameBorderRadius: 2,
2513
- knobBorderRadius: 2
2514
- },
2515
- sm: {
2516
- width: 28,
2517
- height: 16,
2518
- knobSize: 12,
2519
- fontSize: 14,
2520
- lineHeight: 16,
2521
- descriptionFontSize: 12,
2522
- descriptionLineHeight: 14,
2523
- labelGap: 8,
2524
- textGap: 0,
2525
- frameBorderRadius: 2,
2526
- knobBorderRadius: 2
2527
- }
2528
- };
2529
- return configs[size];
2530
- },
2531
- avatar: (size) => {
2532
- const configs = {
2533
- xl: {
2534
- size: 64,
2535
- fontSize: 24,
2536
- iconSize: 32,
2537
- badgeSize: 20,
2538
- badgeOffsetCircle: { right: -4, top: -4 },
2539
- badgeOffsetSquare: { right: -8, top: -8 },
2540
- borderRadiusSquare: radius.avatarLarge,
2541
- borderRadiusCircle: radius.avatarCircle
2542
- },
2543
- lg: {
2544
- size: 56,
2545
- fontSize: 20,
2546
- iconSize: 28,
2547
- badgeSize: 20,
2548
- badgeOffsetCircle: { right: -4, top: -4 },
2549
- badgeOffsetSquare: { right: -8, top: -8 },
2550
- borderRadiusSquare: radius.avatarLarge,
2551
- borderRadiusCircle: radius.avatarCircle
2552
- },
2553
- md: {
2554
- size: 48,
2555
- fontSize: 18,
2556
- iconSize: 24,
2557
- badgeSize: 20,
2558
- badgeOffsetCircle: { right: -5, top: -5 },
2559
- badgeOffsetSquare: { right: -8, top: -8 },
2560
- borderRadiusSquare: radius.avatarLarge,
2561
- borderRadiusCircle: radius.avatarCircle
2562
- },
2563
- sm: {
2564
- size: 40,
2565
- fontSize: 16,
2566
- iconSize: 20,
2567
- badgeSize: 20,
2568
- badgeOffsetCircle: { right: -6, top: -6 },
2569
- badgeOffsetSquare: { right: -8, top: -8 },
2570
- borderRadiusSquare: radius.avatarLarge,
2571
- borderRadiusCircle: radius.avatarCircle
2572
- },
2573
- xs: {
2574
- size: 32,
2575
- fontSize: 14,
2576
- iconSize: 16,
2577
- badgeSize: 20,
2578
- badgeOffsetCircle: { right: -6, top: -6 },
2579
- badgeOffsetSquare: { right: -8, top: -8 },
2580
- borderRadiusSquare: radius.avatarSmall,
2581
- borderRadiusCircle: radius.avatarCircle
2582
- }
2583
- };
2584
- return configs[size];
2585
- },
2586
- tag: (size) => {
2587
- const configs = {
2588
- xl: {
2589
- height: 48,
2590
- padding: 20,
2591
- fontSize: 20,
2592
- gap: 10,
2593
- iconSize: 24,
2594
- radius: radius.tagLarge
2595
- },
2596
- lg: {
2597
- height: 40,
2598
- padding: 16,
2599
- fontSize: 18,
2600
- gap: 8,
2601
- iconSize: 24,
2602
- radius: radius.tagLarge
2603
- },
2604
- md: {
2605
- height: 32,
2606
- padding: 12,
2607
- fontSize: 16,
2608
- gap: 6,
2609
- iconSize: 16,
2610
- radius: radius.tagSmall
2611
- },
2612
- sm: {
2613
- height: 24,
2614
- padding: 8,
2615
- fontSize: 14,
2616
- gap: 4,
2617
- iconSize: 16,
2618
- radius: radius.tagSmall
2619
- },
2620
- xs: {
2621
- height: 20,
2622
- padding: 6,
2623
- fontSize: 12,
2624
- gap: 4,
2625
- iconSize: 16,
2626
- radius: radius.tagSmall
2627
- }
2628
- };
2629
- return configs[size];
2630
- },
2631
- divider: (size) => {
2632
- const configs = {
2633
- lg: { height: 18, fontSize: 16, lineWeight: 1 },
2634
- md: { height: 16, fontSize: 14, lineWeight: 1 },
2635
- sm: { height: 14, fontSize: 12, lineWeight: 1 }
2636
- };
2637
- return configs[size];
2638
- },
2639
- spinner: (size) => {
2640
- const configs = {
2641
- xl: { size: 96, strokeWidth: 10 },
2642
- lg: { size: 48, strokeWidth: 5 },
2643
- md: { size: 24, strokeWidth: 2 },
2644
- sm: { size: 16, strokeWidth: 2 },
2645
- xs: { size: 8, strokeWidth: 1 }
2646
- };
2647
- return configs[size];
2648
- },
2649
- tabs: (size) => {
2650
- const configs = {
2651
- xl: {
2652
- height: 64,
2653
- fontSize: 20,
2654
- iconSize: 18,
2655
- gap: 6,
2656
- paddingHorizontal: 20
2657
- },
2658
- lg: {
2659
- height: 56,
2660
- fontSize: 18,
2661
- iconSize: 18,
2662
- gap: 6,
2663
- paddingHorizontal: 20
2664
- },
2665
- md: {
2666
- height: 48,
2667
- fontSize: 16,
2668
- iconSize: 18,
2669
- gap: 6,
2670
- paddingHorizontal: 20
2671
- },
2672
- sm: {
2673
- height: 40,
2674
- fontSize: 14,
2675
- iconSize: 18,
2676
- gap: 6,
2677
- paddingHorizontal: 20
2678
- }
2679
- };
2680
- return configs[size];
2681
- },
2682
- segmented: (size) => {
2683
- const configs = {
2684
- xl: {
2685
- height: 64,
2686
- containerPadding: 4,
2687
- containerRadius: 8,
2688
- itemHeight: 56,
2689
- itemPaddingHorizontal: 20,
2690
- itemPaddingVertical: 10,
2691
- itemRadius: 6,
2692
- fontSize: 20,
2693
- lineHeight: 22,
2694
- iconSize: 24,
2695
- gap: 8
2696
- },
2697
- lg: {
2698
- height: 56,
2699
- containerPadding: 4,
2700
- containerRadius: 8,
2701
- itemHeight: 48,
2702
- itemPaddingHorizontal: 20,
2703
- itemPaddingVertical: 10,
2704
- itemRadius: 6,
2705
- fontSize: 18,
2706
- lineHeight: 20,
2707
- iconSize: 24,
2708
- gap: 8
2709
- },
2710
- md: {
2711
- height: 48,
2712
- containerPadding: 4,
2713
- containerRadius: 8,
2714
- itemHeight: 40,
2715
- itemPaddingHorizontal: 16,
2716
- itemPaddingVertical: 8,
2717
- itemRadius: 6,
2718
- fontSize: 16,
2719
- lineHeight: 18,
2720
- iconSize: 24,
2721
- gap: 6
2722
- },
2723
- sm: {
2724
- height: 40,
2725
- containerPadding: 4,
2726
- containerRadius: 4,
2727
- itemHeight: 32,
2728
- itemPaddingHorizontal: 12,
2729
- itemPaddingVertical: 6,
2730
- itemRadius: 2,
2731
- fontSize: 14,
2732
- lineHeight: 16,
2733
- iconSize: 20,
2734
- gap: 4
2735
- }
2736
- };
2737
- return configs[size];
2738
- },
2739
- tabsSegmented: (size) => {
2740
- const configs = {
2741
- xl: {
2742
- height: 64,
2743
- containerPadding: 4,
2744
- containerRadius: 4,
2745
- itemPaddingHorizontal: 16,
2746
- itemPaddingVertical: 18,
2747
- itemRadius: 2,
2748
- fontSize: 20,
2749
- lineHeight: 22,
2750
- iconSize: 24,
2751
- gap: 8
2752
- },
2753
- lg: {
2754
- height: 56,
2755
- containerPadding: 4,
2756
- containerRadius: 4,
2757
- itemPaddingHorizontal: 16,
2758
- itemPaddingVertical: 14,
2759
- itemRadius: 2,
2760
- fontSize: 18,
2761
- lineHeight: 20,
2762
- iconSize: 24,
2763
- gap: 8
2764
- },
2765
- md: {
2766
- height: 48,
2767
- containerPadding: 4,
2768
- containerRadius: 4,
2769
- itemPaddingHorizontal: 12,
2770
- itemPaddingVertical: 11,
2771
- itemRadius: 2,
2772
- fontSize: 16,
2773
- lineHeight: 18,
2774
- iconSize: 24,
2775
- gap: 6
2776
- },
2777
- sm: {
2778
- height: 40,
2779
- containerPadding: 3,
2780
- containerRadius: 2,
2781
- itemPaddingHorizontal: 12,
2782
- itemPaddingVertical: 8,
2783
- itemRadius: 2,
2784
- fontSize: 14,
2785
- lineHeight: 16,
2786
- iconSize: 20,
2787
- gap: 6
2788
- }
2789
- };
2790
- return configs[size];
2791
- },
2792
- checkboxTagGroup: (size) => {
2793
- const configs = {
2794
- xl: {
2795
- height: 64,
2796
- paddingHorizontal: 16,
2797
- paddingVertical: 21,
2798
- fontSize: 20,
2799
- lineHeight: 22,
2800
- gap: 8,
2801
- borderRadius: 4
2802
- },
2803
- lg: {
2804
- height: 56,
2805
- paddingHorizontal: 16,
2806
- paddingVertical: 18,
2807
- fontSize: 18,
2808
- lineHeight: 20,
2809
- gap: 8,
2810
- borderRadius: 4
2811
- },
2812
- md: {
2813
- height: 48,
2814
- paddingHorizontal: 12,
2815
- paddingVertical: 15,
2816
- fontSize: 16,
2817
- lineHeight: 18,
2818
- gap: 8,
2819
- borderRadius: 2
2820
- },
2821
- sm: {
2822
- height: 40,
2208
+ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2209
+ const contextFonts = getFonts(productContext);
2210
+ return {
2211
+ colors: colors[mode],
2212
+ spacing,
2213
+ radius,
2214
+ shadow,
2215
+ fonts: contextFonts,
2216
+ typography: {
2217
+ primary: contextFonts.body,
2218
+ heading: contextFonts.heading,
2219
+ body: contextFonts.body
2220
+ },
2221
+ typographyTokens: getTypographyTokens(productContext),
2222
+ productContext,
2223
+ sizing: {
2224
+ button: (size) => {
2225
+ const configs = {
2226
+ xl: {
2227
+ height: 64,
2228
+ padding: 20,
2229
+ fontSize: 20,
2230
+ sublabelFontSize: 18,
2231
+ spinnerSize: 24,
2232
+ iconSize: 32,
2233
+ iconContainerSize: 64,
2234
+ iconPadding: 20,
2235
+ loadingPadding: 40,
2236
+ borderRadius: 8,
2237
+ labelIconSize: 18,
2238
+ labelIconGap: 6
2239
+ },
2240
+ lg: {
2241
+ height: 56,
2242
+ padding: 20,
2243
+ fontSize: 18,
2244
+ sublabelFontSize: 16,
2245
+ spinnerSize: 24,
2246
+ iconSize: 32,
2247
+ iconContainerSize: 56,
2248
+ iconPadding: 20,
2249
+ loadingPadding: 36,
2250
+ borderRadius: 8,
2251
+ labelIconSize: 16,
2252
+ labelIconGap: 6
2253
+ },
2254
+ md: {
2255
+ height: 48,
2256
+ padding: 20,
2257
+ fontSize: 16,
2258
+ sublabelFontSize: 14,
2259
+ spinnerSize: 20,
2260
+ iconSize: 28,
2261
+ iconContainerSize: 48,
2262
+ iconPadding: 20,
2263
+ loadingPadding: 32,
2264
+ borderRadius: 8,
2265
+ labelIconSize: 14,
2266
+ labelIconGap: 4
2267
+ },
2268
+ sm: {
2269
+ height: 40,
2270
+ padding: 20,
2271
+ fontSize: 14,
2272
+ sublabelFontSize: 12,
2273
+ spinnerSize: 16,
2274
+ iconSize: 28,
2275
+ iconContainerSize: 40,
2276
+ iconPadding: 20,
2277
+ loadingPadding: 28,
2278
+ borderRadius: 4,
2279
+ labelIconSize: 12,
2280
+ labelIconGap: 4
2281
+ },
2282
+ xs: {
2283
+ height: 32,
2284
+ padding: 20,
2285
+ fontSize: 12,
2286
+ sublabelFontSize: 10,
2287
+ spinnerSize: 16,
2288
+ iconSize: 24,
2289
+ iconContainerSize: 32,
2290
+ iconPadding: 20,
2291
+ loadingPadding: 28,
2292
+ borderRadius: 4,
2293
+ labelIconSize: 10,
2294
+ labelIconGap: 4
2295
+ }
2296
+ };
2297
+ return configs[size];
2298
+ },
2299
+ flexButton: (size) => {
2300
+ const configs = {
2301
+ xl: {
2302
+ height: 36,
2303
+ padding: 4,
2304
+ fontSize: 16,
2305
+ spinnerSize: 28,
2306
+ iconSize: 20,
2307
+ borderRadius: 4
2308
+ },
2309
+ lg: {
2310
+ height: 32,
2311
+ padding: 4,
2312
+ fontSize: 14,
2313
+ spinnerSize: 24,
2314
+ iconSize: 18,
2315
+ borderRadius: 4
2316
+ },
2317
+ md: {
2318
+ height: 28,
2319
+ padding: 2,
2320
+ fontSize: 14,
2321
+ spinnerSize: 24,
2322
+ iconSize: 16,
2323
+ borderRadius: 2
2324
+ },
2325
+ sm: {
2326
+ height: 22,
2327
+ padding: 2,
2328
+ fontSize: 12,
2329
+ spinnerSize: 16,
2330
+ iconSize: 14,
2331
+ borderRadius: 2
2332
+ },
2333
+ xs: {
2334
+ height: 20,
2335
+ padding: 2,
2336
+ fontSize: 12,
2337
+ spinnerSize: 16,
2338
+ iconSize: 12,
2339
+ borderRadius: 2
2340
+ }
2341
+ };
2342
+ return configs[size];
2343
+ },
2344
+ checkbox: (size) => {
2345
+ const configs = {
2346
+ xl: {
2347
+ size: 22,
2348
+ fontSize: 18,
2349
+ descriptionFontSize: 16,
2350
+ labelGap: 12,
2351
+ textGap: 4,
2352
+ borderRadius: 2
2353
+ },
2354
+ lg: {
2355
+ size: 20,
2356
+ fontSize: 16,
2357
+ descriptionFontSize: 14,
2358
+ labelGap: 10,
2359
+ textGap: 2,
2360
+ borderRadius: 2
2361
+ },
2362
+ md: {
2363
+ size: 18,
2364
+ fontSize: 16,
2365
+ descriptionFontSize: 14,
2366
+ labelGap: 8,
2367
+ textGap: 2,
2368
+ borderRadius: 2
2369
+ },
2370
+ sm: {
2371
+ size: 16,
2372
+ fontSize: 14,
2373
+ descriptionFontSize: 12,
2374
+ labelGap: 8,
2375
+ textGap: 0,
2376
+ borderRadius: 2
2377
+ }
2378
+ };
2379
+ return configs[size];
2380
+ },
2381
+ radio: (size) => {
2382
+ const configs = {
2383
+ xl: {
2384
+ size: 24,
2385
+ fontSize: 20,
2386
+ lineHeight: 22,
2387
+ descriptionFontSize: 18,
2388
+ descriptionLineHeight: 20,
2389
+ labelGap: 12,
2390
+ textGap: 4,
2391
+ borderWidth: 2
2392
+ },
2393
+ lg: {
2394
+ size: 20,
2395
+ fontSize: 18,
2396
+ lineHeight: 20,
2397
+ descriptionFontSize: 16,
2398
+ descriptionLineHeight: 18,
2399
+ labelGap: 10,
2400
+ textGap: 2,
2401
+ borderWidth: 2
2402
+ },
2403
+ md: {
2404
+ size: 18,
2405
+ fontSize: 16,
2406
+ lineHeight: 18,
2407
+ descriptionFontSize: 14,
2408
+ descriptionLineHeight: 16,
2409
+ labelGap: 8,
2410
+ textGap: 2,
2411
+ borderWidth: 1
2412
+ },
2413
+ sm: {
2414
+ size: 16,
2415
+ fontSize: 14,
2416
+ lineHeight: 16,
2417
+ descriptionFontSize: 12,
2418
+ descriptionLineHeight: 14,
2419
+ labelGap: 8,
2420
+ textGap: 0,
2421
+ borderWidth: 1
2422
+ }
2423
+ };
2424
+ return configs[size];
2425
+ },
2426
+ input: (size) => {
2427
+ const configs = {
2428
+ xl: {
2429
+ height: 64,
2430
+ paddingVertical: 12,
2431
+ paddingHorizontal: 12,
2432
+ fontSize: 20,
2433
+ iconSize: 18,
2434
+ radius: 8,
2435
+ borderWidth: 2,
2436
+ fieldGap: 8,
2437
+ lineHeight: 20
2438
+ },
2439
+ lg: {
2440
+ height: 56,
2441
+ paddingVertical: 14,
2442
+ paddingHorizontal: 12,
2443
+ fontSize: 18,
2444
+ iconSize: 18,
2445
+ radius: 8,
2446
+ borderWidth: 2,
2447
+ fieldGap: 6,
2448
+ lineHeight: 18
2449
+ },
2450
+ md: {
2451
+ height: 48,
2452
+ paddingVertical: 11,
2453
+ paddingHorizontal: 12,
2454
+ fontSize: 16,
2455
+ iconSize: 18,
2456
+ radius: 8,
2457
+ borderWidth: 1,
2458
+ fieldGap: 4,
2459
+ lineHeight: 16
2460
+ },
2461
+ sm: {
2462
+ height: 40,
2463
+ paddingVertical: 7,
2464
+ paddingHorizontal: 10,
2465
+ fontSize: 14,
2466
+ iconSize: 18,
2467
+ radius: 4,
2468
+ borderWidth: 1,
2469
+ fieldGap: 4,
2470
+ lineHeight: 14
2471
+ },
2472
+ xs: {
2473
+ height: 32,
2474
+ paddingVertical: 7,
2475
+ paddingHorizontal: 10,
2476
+ fontSize: 12,
2477
+ iconSize: 18,
2478
+ radius: 4,
2479
+ borderWidth: 1,
2480
+ fieldGap: 4,
2481
+ lineHeight: 10
2482
+ }
2483
+ };
2484
+ return configs[size];
2485
+ },
2486
+ inputPin: (size) => {
2487
+ const configs = {
2488
+ xl: {
2489
+ size: 64,
2490
+ gap: 10,
2491
+ fontSize: 20,
2492
+ radius: 8,
2493
+ borderWidth: 1,
2494
+ fieldGap: 8
2495
+ },
2496
+ lg: {
2497
+ size: 56,
2498
+ gap: 8,
2499
+ fontSize: 18,
2500
+ radius: 8,
2501
+ borderWidth: 1,
2502
+ fieldGap: 6
2503
+ },
2504
+ md: {
2505
+ size: 48,
2506
+ gap: 6,
2507
+ fontSize: 16,
2508
+ radius: 8,
2509
+ borderWidth: 1,
2510
+ fieldGap: 4
2511
+ },
2512
+ sm: {
2513
+ size: 40,
2514
+ gap: 4,
2515
+ fontSize: 14,
2516
+ radius: 4,
2517
+ borderWidth: 1,
2518
+ fieldGap: 4
2519
+ },
2520
+ xs: {
2521
+ size: 32,
2522
+ gap: 4,
2523
+ fontSize: 12,
2524
+ radius: 4,
2525
+ borderWidth: 1,
2526
+ fieldGap: 4
2527
+ }
2528
+ };
2529
+ return configs[size];
2530
+ },
2531
+ textarea: (size) => {
2532
+ const configs = {
2533
+ xl: {
2534
+ height: 144,
2535
+ padding: spacing.xl,
2536
+ fontSize: 20,
2537
+ iconSize: 32,
2538
+ radius: 8
2539
+ },
2540
+ lg: {
2541
+ height: 128,
2542
+ padding: spacing.l,
2543
+ fontSize: 18,
2544
+ iconSize: 28,
2545
+ radius: 8
2546
+ },
2547
+ md: {
2548
+ height: 112,
2549
+ padding: spacing.m,
2550
+ fontSize: 16,
2551
+ iconSize: 24,
2552
+ radius: 8
2553
+ },
2554
+ sm: {
2555
+ height: 96,
2556
+ padding: spacing.s,
2557
+ fontSize: 14,
2558
+ iconSize: 20,
2559
+ radius: 4
2560
+ },
2561
+ xs: {
2562
+ height: 80,
2563
+ padding: spacing.xs,
2564
+ fontSize: 12,
2565
+ iconSize: 16,
2566
+ radius: 4
2567
+ }
2568
+ };
2569
+ return configs[size];
2570
+ },
2571
+ switch: (size) => {
2572
+ const configs = {
2573
+ xl: {
2574
+ width: 40,
2575
+ height: 22,
2576
+ knobSize: 18,
2577
+ fontSize: 20,
2578
+ lineHeight: 22,
2579
+ descriptionFontSize: 18,
2580
+ descriptionLineHeight: 20,
2581
+ labelGap: 12,
2582
+ textGap: 4,
2583
+ frameBorderRadius: 4,
2584
+ knobBorderRadius: 2
2585
+ },
2586
+ lg: {
2587
+ width: 36,
2588
+ height: 20,
2589
+ knobSize: 16,
2590
+ fontSize: 18,
2591
+ lineHeight: 20,
2592
+ descriptionFontSize: 16,
2593
+ descriptionLineHeight: 18,
2594
+ labelGap: 10,
2595
+ textGap: 2,
2596
+ frameBorderRadius: 4,
2597
+ knobBorderRadius: 2
2598
+ },
2599
+ md: {
2600
+ width: 32,
2601
+ height: 18,
2602
+ knobSize: 14,
2603
+ fontSize: 16,
2604
+ lineHeight: 18,
2605
+ descriptionFontSize: 14,
2606
+ descriptionLineHeight: 16,
2607
+ labelGap: 8,
2608
+ textGap: 2,
2609
+ frameBorderRadius: 2,
2610
+ knobBorderRadius: 2
2611
+ },
2612
+ sm: {
2613
+ width: 28,
2614
+ height: 16,
2615
+ knobSize: 12,
2616
+ fontSize: 14,
2617
+ lineHeight: 16,
2618
+ descriptionFontSize: 12,
2619
+ descriptionLineHeight: 14,
2620
+ labelGap: 8,
2621
+ textGap: 0,
2622
+ frameBorderRadius: 2,
2623
+ knobBorderRadius: 2
2624
+ }
2625
+ };
2626
+ return configs[size];
2627
+ },
2628
+ avatar: (size) => {
2629
+ const configs = {
2630
+ xl: {
2631
+ size: 64,
2632
+ fontSize: 24,
2633
+ iconSize: 32,
2634
+ badgeSize: 20,
2635
+ badgeOffsetCircle: { right: -4, top: -4 },
2636
+ badgeOffsetSquare: { right: -8, top: -8 },
2637
+ borderRadiusSquare: radius.avatarLarge,
2638
+ borderRadiusCircle: radius.avatarCircle
2639
+ },
2640
+ lg: {
2641
+ size: 56,
2642
+ fontSize: 20,
2643
+ iconSize: 28,
2644
+ badgeSize: 20,
2645
+ badgeOffsetCircle: { right: -4, top: -4 },
2646
+ badgeOffsetSquare: { right: -8, top: -8 },
2647
+ borderRadiusSquare: radius.avatarLarge,
2648
+ borderRadiusCircle: radius.avatarCircle
2649
+ },
2650
+ md: {
2651
+ size: 48,
2652
+ fontSize: 18,
2653
+ iconSize: 24,
2654
+ badgeSize: 20,
2655
+ badgeOffsetCircle: { right: -5, top: -5 },
2656
+ badgeOffsetSquare: { right: -8, top: -8 },
2657
+ borderRadiusSquare: radius.avatarLarge,
2658
+ borderRadiusCircle: radius.avatarCircle
2659
+ },
2660
+ sm: {
2661
+ size: 40,
2662
+ fontSize: 16,
2663
+ iconSize: 20,
2664
+ badgeSize: 20,
2665
+ badgeOffsetCircle: { right: -6, top: -6 },
2666
+ badgeOffsetSquare: { right: -8, top: -8 },
2667
+ borderRadiusSquare: radius.avatarLarge,
2668
+ borderRadiusCircle: radius.avatarCircle
2669
+ },
2670
+ xs: {
2671
+ size: 32,
2672
+ fontSize: 14,
2673
+ iconSize: 16,
2674
+ badgeSize: 20,
2675
+ badgeOffsetCircle: { right: -6, top: -6 },
2676
+ badgeOffsetSquare: { right: -8, top: -8 },
2677
+ borderRadiusSquare: radius.avatarSmall,
2678
+ borderRadiusCircle: radius.avatarCircle
2679
+ }
2680
+ };
2681
+ return configs[size];
2682
+ },
2683
+ tag: (size) => {
2684
+ const configs = {
2685
+ xl: {
2686
+ height: 48,
2687
+ padding: 20,
2688
+ fontSize: 20,
2689
+ gap: 10,
2690
+ iconSize: 24,
2691
+ radius: radius.tagLarge
2692
+ },
2693
+ lg: {
2694
+ height: 40,
2695
+ padding: 16,
2696
+ fontSize: 18,
2697
+ gap: 8,
2698
+ iconSize: 24,
2699
+ radius: radius.tagLarge
2700
+ },
2701
+ md: {
2702
+ height: 32,
2703
+ padding: 12,
2704
+ fontSize: 16,
2705
+ gap: 6,
2706
+ iconSize: 16,
2707
+ radius: radius.tagSmall
2708
+ },
2709
+ sm: {
2710
+ height: 24,
2711
+ padding: 8,
2712
+ fontSize: 14,
2713
+ gap: 4,
2714
+ iconSize: 16,
2715
+ radius: radius.tagSmall
2716
+ },
2717
+ xs: {
2718
+ height: 20,
2719
+ padding: 6,
2720
+ fontSize: 12,
2721
+ gap: 4,
2722
+ iconSize: 16,
2723
+ radius: radius.tagSmall
2724
+ }
2725
+ };
2726
+ return configs[size];
2727
+ },
2728
+ divider: (size) => {
2729
+ const configs = {
2730
+ lg: { height: 18, fontSize: 16, lineWeight: 1 },
2731
+ md: { height: 16, fontSize: 14, lineWeight: 1 },
2732
+ sm: { height: 14, fontSize: 12, lineWeight: 1 }
2733
+ };
2734
+ return configs[size];
2735
+ },
2736
+ spinner: (size) => {
2737
+ const configs = {
2738
+ xl: { size: 96, strokeWidth: 10 },
2739
+ lg: { size: 48, strokeWidth: 5 },
2740
+ md: { size: 24, strokeWidth: 2 },
2741
+ sm: { size: 16, strokeWidth: 2 },
2742
+ xs: { size: 8, strokeWidth: 1 }
2743
+ };
2744
+ return configs[size];
2745
+ },
2746
+ tabs: (size) => {
2747
+ const configs = {
2748
+ xl: {
2749
+ height: 64,
2750
+ fontSize: 20,
2751
+ iconSize: 18,
2752
+ gap: 6,
2753
+ paddingHorizontal: 20
2754
+ },
2755
+ lg: {
2756
+ height: 56,
2757
+ fontSize: 18,
2758
+ iconSize: 18,
2759
+ gap: 6,
2760
+ paddingHorizontal: 20
2761
+ },
2762
+ md: {
2763
+ height: 48,
2764
+ fontSize: 16,
2765
+ iconSize: 18,
2766
+ gap: 6,
2767
+ paddingHorizontal: 20
2768
+ },
2769
+ sm: {
2770
+ height: 40,
2771
+ fontSize: 14,
2772
+ iconSize: 18,
2773
+ gap: 6,
2774
+ paddingHorizontal: 20
2775
+ }
2776
+ };
2777
+ return configs[size];
2778
+ },
2779
+ segmented: (size) => {
2780
+ const configs = {
2781
+ xl: {
2782
+ height: 64,
2783
+ containerPadding: 4,
2784
+ containerRadius: 8,
2785
+ itemHeight: 56,
2786
+ itemPaddingHorizontal: 20,
2787
+ itemPaddingVertical: 10,
2788
+ itemRadius: 6,
2789
+ fontSize: 20,
2790
+ lineHeight: 22,
2791
+ iconSize: 24,
2792
+ gap: 8
2793
+ },
2794
+ lg: {
2795
+ height: 56,
2796
+ containerPadding: 4,
2797
+ containerRadius: 8,
2798
+ itemHeight: 48,
2799
+ itemPaddingHorizontal: 20,
2800
+ itemPaddingVertical: 10,
2801
+ itemRadius: 6,
2802
+ fontSize: 18,
2803
+ lineHeight: 20,
2804
+ iconSize: 24,
2805
+ gap: 8
2806
+ },
2807
+ md: {
2808
+ height: 48,
2809
+ containerPadding: 4,
2810
+ containerRadius: 8,
2811
+ itemHeight: 40,
2812
+ itemPaddingHorizontal: 16,
2813
+ itemPaddingVertical: 8,
2814
+ itemRadius: 6,
2815
+ fontSize: 16,
2816
+ lineHeight: 18,
2817
+ iconSize: 24,
2818
+ gap: 6
2819
+ },
2820
+ sm: {
2821
+ height: 40,
2822
+ containerPadding: 4,
2823
+ containerRadius: 4,
2824
+ itemHeight: 32,
2825
+ itemPaddingHorizontal: 12,
2826
+ itemPaddingVertical: 6,
2827
+ itemRadius: 2,
2828
+ fontSize: 14,
2829
+ lineHeight: 16,
2830
+ iconSize: 20,
2831
+ gap: 4
2832
+ }
2833
+ };
2834
+ return configs[size];
2835
+ },
2836
+ tabsSegmented: (size) => {
2837
+ const configs = {
2838
+ xl: {
2839
+ height: 64,
2840
+ containerPadding: 4,
2841
+ containerRadius: 4,
2842
+ itemPaddingHorizontal: 16,
2843
+ itemPaddingVertical: 18,
2844
+ itemRadius: 2,
2845
+ fontSize: 20,
2846
+ lineHeight: 22,
2847
+ iconSize: 24,
2848
+ gap: 8
2849
+ },
2850
+ lg: {
2851
+ height: 56,
2852
+ containerPadding: 4,
2853
+ containerRadius: 4,
2854
+ itemPaddingHorizontal: 16,
2855
+ itemPaddingVertical: 14,
2856
+ itemRadius: 2,
2857
+ fontSize: 18,
2858
+ lineHeight: 20,
2859
+ iconSize: 24,
2860
+ gap: 8
2861
+ },
2862
+ md: {
2863
+ height: 48,
2864
+ containerPadding: 4,
2865
+ containerRadius: 4,
2866
+ itemPaddingHorizontal: 12,
2867
+ itemPaddingVertical: 11,
2868
+ itemRadius: 2,
2869
+ fontSize: 16,
2870
+ lineHeight: 18,
2871
+ iconSize: 24,
2872
+ gap: 6
2873
+ },
2874
+ sm: {
2875
+ height: 40,
2876
+ containerPadding: 3,
2877
+ containerRadius: 2,
2878
+ itemPaddingHorizontal: 12,
2879
+ itemPaddingVertical: 8,
2880
+ itemRadius: 2,
2881
+ fontSize: 14,
2882
+ lineHeight: 16,
2883
+ iconSize: 20,
2884
+ gap: 6
2885
+ }
2886
+ };
2887
+ return configs[size];
2888
+ },
2889
+ checkboxTagGroup: (size) => {
2890
+ const configs = {
2891
+ xl: {
2892
+ height: 64,
2893
+ paddingHorizontal: 16,
2894
+ paddingVertical: 21,
2895
+ fontSize: 20,
2896
+ lineHeight: 22,
2897
+ gap: 8,
2898
+ borderRadius: 4
2899
+ },
2900
+ lg: {
2901
+ height: 56,
2902
+ paddingHorizontal: 16,
2903
+ paddingVertical: 18,
2904
+ fontSize: 18,
2905
+ lineHeight: 20,
2906
+ gap: 8,
2907
+ borderRadius: 4
2908
+ },
2909
+ md: {
2910
+ height: 48,
2911
+ paddingHorizontal: 12,
2912
+ paddingVertical: 15,
2913
+ fontSize: 16,
2914
+ lineHeight: 18,
2915
+ gap: 8,
2916
+ borderRadius: 2
2917
+ },
2918
+ sm: {
2919
+ height: 40,
2920
+ paddingHorizontal: 12,
2921
+ paddingVertical: 11,
2922
+ fontSize: 14,
2923
+ lineHeight: 16,
2924
+ gap: 4,
2925
+ borderRadius: 2
2926
+ }
2927
+ };
2928
+ return configs[size];
2929
+ },
2930
+ badge: (size) => {
2931
+ const configs = {
2932
+ xl: {
2933
+ size: 20,
2934
+ fontSize: 12,
2935
+ lineHeight: 14,
2936
+ iconSize: 12,
2937
+ padding: 4
2938
+ },
2939
+ lg: {
2940
+ size: 16,
2941
+ fontSize: 10,
2942
+ lineHeight: 10,
2943
+ iconSize: 10,
2944
+ padding: 4
2945
+ },
2946
+ md: {
2947
+ size: 12,
2948
+ fontSize: 10,
2949
+ lineHeight: 10,
2950
+ iconSize: 8,
2951
+ padding: 4
2952
+ },
2953
+ sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
2954
+ xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 }
2955
+ };
2956
+ return configs[size];
2957
+ },
2958
+ notification: (type) => {
2959
+ const configs = {
2960
+ toast: {
2961
+ width: 400,
2962
+ paddingHorizontal: 20,
2963
+ paddingVertical: 16,
2964
+ gap: 16,
2965
+ titleSize: 18,
2966
+ messageSize: 14,
2967
+ iconSize: 20,
2968
+ iconWrapperSize: 32,
2969
+ radius: radius.card
2970
+ },
2971
+ inline: {
2972
+ width: "100%",
2973
+ paddingHorizontal: 20,
2974
+ paddingVertical: 16,
2975
+ gap: 28,
2976
+ titleSize: 18,
2977
+ messageSize: 14,
2978
+ iconSize: 20,
2979
+ iconWrapperSize: 32,
2980
+ radius: radius.card
2981
+ }
2982
+ };
2983
+ return configs[type];
2984
+ },
2985
+ notificationPanel: () => ({
2986
+ minHeight: 66,
2987
+ iconFrameWidth: 54,
2988
+ iconSize: 24,
2989
+ borderRadius: 8,
2990
+ bodyPaddingHorizontal: 16,
2991
+ bodyPaddingVertical: 12,
2992
+ textGap: 2,
2993
+ contentGap: 24,
2994
+ buttonsGap: 8,
2995
+ closeButtonSize: 32,
2996
+ titleFontSize: 16,
2997
+ titleLineHeight: 20,
2998
+ descriptionFontSize: 14,
2999
+ descriptionLineHeight: 20
3000
+ }),
3001
+ progress: (size) => {
3002
+ const configs = {
3003
+ xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
3004
+ lg: { height: 8, labelSize: 14, helperSize: 12, gap: 8 },
3005
+ md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
3006
+ sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
3007
+ xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
3008
+ xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
3009
+ };
3010
+ return configs[size];
3011
+ },
3012
+ supportingText: (size) => {
3013
+ const configs = {
3014
+ xl: { fontSize: 18, lineHeight: "20px", gap: 6, iconSize: 18 },
3015
+ lg: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
3016
+ md: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
3017
+ sm: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
3018
+ xs: { fontSize: 10, lineHeight: "10px", gap: 4, iconSize: 16 }
3019
+ };
3020
+ return configs[size];
3021
+ },
3022
+ iconWrapper: (size) => {
3023
+ const configs = {
3024
+ xl: { size: 56, iconSize: 32, fontSize: 24 },
3025
+ lg: { size: 48, iconSize: 28, fontSize: 20 },
3026
+ md: { size: 40, iconSize: 24, fontSize: 18 },
3027
+ sm: { size: 32, iconSize: 20, fontSize: 16 },
3028
+ xs: { size: 24, iconSize: 16, fontSize: 14 },
3029
+ xxs: { size: 18, iconSize: 12, fontSize: 12 }
3030
+ };
3031
+ return configs[size];
3032
+ },
3033
+ stepper: (size) => {
3034
+ const configs = {
3035
+ md: {
3036
+ iconSize: 32,
3037
+ titleSize: 16,
3038
+ descSize: 14,
3039
+ gap: 12,
3040
+ currentTitleSize: 20,
3041
+ currentDescSize: 14,
3042
+ currentPadding: 24,
3043
+ tailSize: 5
3044
+ },
3045
+ sm: {
3046
+ iconSize: 24,
3047
+ titleSize: 14,
3048
+ descSize: 12,
3049
+ gap: 8,
3050
+ currentTitleSize: 16,
3051
+ currentDescSize: 12,
3052
+ currentPadding: 20,
3053
+ tailSize: 3
3054
+ }
3055
+ };
3056
+ return configs[size];
3057
+ },
3058
+ contextMenu: (size) => {
3059
+ const configs = {
3060
+ xl: {
3061
+ paddingVertical: 8,
3062
+ itemPaddingHorizontal: 16,
3063
+ itemPaddingVertical: 18,
3064
+ fontSize: 20,
3065
+ lineHeight: 22,
3066
+ descriptionFontSize: 18,
3067
+ iconSize: 18,
3068
+ gap: 12,
3069
+ minWidth: 276,
3070
+ // Search sizing from Figma
3071
+ searchPaddingHorizontal: 16,
3072
+ searchPaddingVertical: 18,
3073
+ searchGap: 18,
3074
+ searchFontSize: 20,
3075
+ searchLineHeight: 22,
3076
+ searchIconSize: 18
3077
+ },
3078
+ lg: {
3079
+ paddingVertical: 8,
3080
+ itemPaddingHorizontal: 14,
3081
+ itemPaddingVertical: 14,
3082
+ fontSize: 18,
3083
+ lineHeight: 20,
3084
+ descriptionFontSize: 16,
3085
+ iconSize: 18,
3086
+ gap: 10,
3087
+ minWidth: 220,
3088
+ // Search sizing from Figma
3089
+ searchPaddingHorizontal: 14,
3090
+ searchPaddingVertical: 14,
3091
+ searchGap: 14,
3092
+ searchFontSize: 18,
3093
+ searchLineHeight: 20,
3094
+ searchIconSize: 18
3095
+ },
3096
+ md: {
3097
+ paddingVertical: 8,
3098
+ itemPaddingHorizontal: 12,
3099
+ itemPaddingVertical: 11,
3100
+ fontSize: 16,
3101
+ lineHeight: 18,
3102
+ descriptionFontSize: 14,
3103
+ iconSize: 18,
3104
+ gap: 8,
3105
+ minWidth: 172,
3106
+ // Search sizing from Figma
3107
+ searchPaddingHorizontal: 12,
3108
+ searchPaddingVertical: 11,
3109
+ searchGap: 10,
3110
+ searchFontSize: 16,
3111
+ searchLineHeight: 18,
3112
+ searchIconSize: 18
3113
+ },
3114
+ sm: {
3115
+ paddingVertical: 8,
3116
+ itemPaddingHorizontal: 10,
3117
+ itemPaddingVertical: 8,
3118
+ fontSize: 14,
3119
+ lineHeight: 16,
3120
+ descriptionFontSize: 12,
3121
+ iconSize: 18,
3122
+ gap: 8,
3123
+ minWidth: 132,
3124
+ // Search sizing from Figma
3125
+ searchPaddingHorizontal: 10,
3126
+ searchPaddingVertical: 7,
3127
+ searchGap: 6,
3128
+ searchFontSize: 14,
3129
+ searchLineHeight: 16,
3130
+ searchIconSize: 18
3131
+ }
3132
+ };
3133
+ return configs[size];
3134
+ },
3135
+ toast: () => {
3136
+ return {
3137
+ minHeight: 64,
2823
3138
  paddingHorizontal: 12,
2824
- paddingVertical: 11,
2825
- fontSize: 14,
2826
- lineHeight: 16,
2827
- gap: 4,
2828
- borderRadius: 2
2829
- }
2830
- };
2831
- return configs[size];
2832
- },
2833
- badge: (size) => {
2834
- const configs = {
2835
- xl: {
2836
- size: 20,
2837
- fontSize: 12,
2838
- lineHeight: 14,
2839
- iconSize: 12,
2840
- padding: 4
2841
- },
2842
- lg: {
2843
- size: 16,
2844
- fontSize: 10,
2845
- lineHeight: 10,
2846
- iconSize: 10,
2847
- padding: 4
2848
- },
2849
- md: { size: 12, fontSize: 10, lineHeight: 10, iconSize: 8, padding: 4 },
2850
- sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
2851
- xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 }
2852
- };
2853
- return configs[size];
2854
- },
2855
- notification: (type) => {
2856
- const configs = {
2857
- toast: {
2858
- width: 400,
2859
- paddingHorizontal: 20,
2860
- paddingVertical: 16,
2861
- gap: 16,
2862
- titleSize: 18,
2863
- messageSize: 14,
2864
- iconSize: 20,
2865
- iconWrapperSize: 32,
2866
- radius: radius.card
2867
- },
2868
- inline: {
2869
- width: "100%",
2870
- paddingHorizontal: 20,
2871
- paddingVertical: 16,
2872
- gap: 28,
2873
- titleSize: 18,
2874
- messageSize: 14,
2875
- iconSize: 20,
2876
- iconWrapperSize: 32,
2877
- radius: radius.card
2878
- }
2879
- };
2880
- return configs[type];
2881
- },
2882
- notificationPanel: () => ({
2883
- minHeight: 66,
2884
- iconFrameWidth: 54,
2885
- iconSize: 24,
2886
- borderRadius: 8,
2887
- bodyPaddingHorizontal: 16,
2888
- bodyPaddingVertical: 12,
2889
- textGap: 2,
2890
- contentGap: 24,
2891
- buttonsGap: 8,
2892
- closeButtonSize: 32,
2893
- titleFontSize: 16,
2894
- titleLineHeight: 20,
2895
- descriptionFontSize: 14,
2896
- descriptionLineHeight: 20
2897
- }),
2898
- progress: (size) => {
2899
- const configs = {
2900
- xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
2901
- lg: { height: 8, labelSize: 14, helperSize: 12, gap: 8 },
2902
- md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
2903
- sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
2904
- xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
2905
- xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
2906
- };
2907
- return configs[size];
2908
- },
2909
- supportingText: (size) => {
2910
- const configs = {
2911
- xl: { fontSize: 18, lineHeight: "20px", gap: 6, iconSize: 18 },
2912
- lg: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
2913
- md: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
2914
- sm: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
2915
- xs: { fontSize: 10, lineHeight: "10px", gap: 4, iconSize: 16 }
2916
- };
2917
- return configs[size];
2918
- },
2919
- iconWrapper: (size) => {
2920
- const configs = {
2921
- xl: { size: 56, iconSize: 32, fontSize: 24 },
2922
- lg: { size: 48, iconSize: 28, fontSize: 20 },
2923
- md: { size: 40, iconSize: 24, fontSize: 18 },
2924
- sm: { size: 32, iconSize: 20, fontSize: 16 },
2925
- xs: { size: 24, iconSize: 16, fontSize: 14 },
2926
- xxs: { size: 18, iconSize: 12, fontSize: 12 }
2927
- };
2928
- return configs[size];
2929
- },
2930
- stepper: (size) => {
2931
- const configs = {
2932
- md: {
2933
- iconSize: 32,
2934
- titleSize: 16,
2935
- descSize: 14,
2936
- gap: 12,
2937
- currentTitleSize: 20,
2938
- currentDescSize: 14,
2939
- currentPadding: 24,
2940
- tailSize: 5
2941
- },
2942
- sm: {
2943
- iconSize: 24,
2944
- titleSize: 14,
2945
- descSize: 12,
2946
- gap: 8,
2947
- currentTitleSize: 16,
2948
- currentDescSize: 12,
2949
- currentPadding: 20,
2950
- tailSize: 3
2951
- }
2952
- };
2953
- return configs[size];
2954
- },
2955
- contextMenu: (size) => {
2956
- const configs = {
2957
- xl: {
2958
3139
  paddingVertical: 8,
2959
- itemPaddingHorizontal: 16,
2960
- itemPaddingVertical: 18,
2961
- fontSize: 20,
2962
- lineHeight: 22,
2963
- descriptionFontSize: 18,
2964
- iconSize: 18,
3140
+ borderRadius: 4,
2965
3141
  gap: 12,
2966
- minWidth: 276,
2967
- // Search sizing from Figma
2968
- searchPaddingHorizontal: 16,
2969
- searchPaddingVertical: 18,
2970
- searchGap: 18,
2971
- searchFontSize: 20,
2972
- searchLineHeight: 22,
2973
- searchIconSize: 18
2974
- },
2975
- lg: {
2976
- paddingVertical: 8,
2977
- itemPaddingHorizontal: 14,
2978
- itemPaddingVertical: 14,
2979
- fontSize: 18,
2980
- lineHeight: 20,
2981
- descriptionFontSize: 16,
2982
- iconSize: 18,
2983
- gap: 10,
2984
- minWidth: 220,
2985
- // Search sizing from Figma
2986
- searchPaddingHorizontal: 14,
2987
- searchPaddingVertical: 14,
2988
- searchGap: 14,
2989
- searchFontSize: 18,
2990
- searchLineHeight: 20,
2991
- searchIconSize: 18
2992
- },
2993
- md: {
2994
- paddingVertical: 8,
2995
- itemPaddingHorizontal: 12,
2996
- itemPaddingVertical: 11,
2997
- fontSize: 16,
2998
- lineHeight: 18,
2999
- descriptionFontSize: 14,
3000
- iconSize: 18,
3001
- gap: 8,
3002
- minWidth: 172,
3003
- // Search sizing from Figma
3004
- searchPaddingHorizontal: 12,
3005
- searchPaddingVertical: 11,
3006
- searchGap: 10,
3007
- searchFontSize: 16,
3008
- searchLineHeight: 18,
3009
- searchIconSize: 18
3010
- },
3011
- sm: {
3012
- paddingVertical: 8,
3013
- itemPaddingHorizontal: 10,
3014
- itemPaddingVertical: 8,
3015
- fontSize: 14,
3016
- lineHeight: 16,
3017
- descriptionFontSize: 12,
3018
- iconSize: 18,
3019
- gap: 8,
3020
- minWidth: 132,
3021
- // Search sizing from Figma
3022
- searchPaddingHorizontal: 10,
3023
- searchPaddingVertical: 7,
3024
- searchGap: 6,
3025
- searchFontSize: 14,
3026
- searchLineHeight: 16,
3027
- searchIconSize: 18
3028
- }
3029
- };
3030
- return configs[size];
3031
- },
3032
- toast: () => {
3033
- return {
3034
- minHeight: 64,
3035
- paddingHorizontal: 12,
3036
- paddingVertical: 8,
3037
- borderRadius: 4,
3038
- gap: 12,
3039
- iconSize: 24,
3040
- closeButtonSize: 24,
3041
- closeIconSize: 20,
3042
- fontSize: 16,
3043
- lineHeight: 20,
3044
- maxWidth: 400,
3045
- containerPadding: 12,
3046
- groupGap: 4
3047
- };
3048
- },
3049
- toggleButtonGroup: (size) => {
3050
- const configs = {
3051
- xl: {
3052
- height: 64,
3053
- paddingHorizontal: 18,
3054
- fontSize: 20,
3055
- lineHeight: 22,
3056
3142
  iconSize: 24,
3057
- gap: 6,
3058
- borderRadius: 8,
3059
- itemGap: 8
3060
- },
3061
- lg: {
3062
- height: 56,
3063
- paddingHorizontal: 16,
3064
- fontSize: 18,
3065
- lineHeight: 20,
3066
- iconSize: 24,
3067
- gap: 4,
3068
- borderRadius: 8,
3069
- itemGap: 8
3070
- },
3071
- md: {
3072
- height: 48,
3073
- paddingHorizontal: 16,
3143
+ closeButtonSize: 24,
3144
+ closeIconSize: 20,
3074
3145
  fontSize: 16,
3075
- lineHeight: 18,
3076
- iconSize: 24,
3077
- gap: 4,
3078
- borderRadius: 8,
3079
- itemGap: 8
3080
- },
3081
- sm: {
3082
- height: 40,
3083
- paddingHorizontal: 12,
3084
- fontSize: 14,
3085
- lineHeight: 16,
3086
- iconSize: 24,
3087
- gap: 2,
3088
- borderRadius: 4,
3089
- itemGap: 4
3090
- },
3091
- xs: {
3092
- height: 32,
3093
- paddingHorizontal: 12,
3094
- fontSize: 14,
3095
- lineHeight: 16,
3096
- iconSize: 24,
3097
- gap: 2,
3098
- borderRadius: 4,
3099
- itemGap: 4
3100
- }
3101
- };
3102
- return configs[size];
3146
+ lineHeight: 20,
3147
+ maxWidth: 400,
3148
+ containerPadding: 12,
3149
+ groupGap: 4
3150
+ };
3151
+ },
3152
+ toggleButtonGroup: (size) => {
3153
+ const configs = {
3154
+ xl: {
3155
+ height: 64,
3156
+ paddingHorizontal: 18,
3157
+ fontSize: 20,
3158
+ lineHeight: 22,
3159
+ iconSize: 24,
3160
+ gap: 6,
3161
+ borderRadius: 8,
3162
+ itemGap: 8
3163
+ },
3164
+ lg: {
3165
+ height: 56,
3166
+ paddingHorizontal: 16,
3167
+ fontSize: 18,
3168
+ lineHeight: 20,
3169
+ iconSize: 24,
3170
+ gap: 4,
3171
+ borderRadius: 8,
3172
+ itemGap: 8
3173
+ },
3174
+ md: {
3175
+ height: 48,
3176
+ paddingHorizontal: 16,
3177
+ fontSize: 16,
3178
+ lineHeight: 18,
3179
+ iconSize: 24,
3180
+ gap: 4,
3181
+ borderRadius: 8,
3182
+ itemGap: 8
3183
+ },
3184
+ sm: {
3185
+ height: 40,
3186
+ paddingHorizontal: 12,
3187
+ fontSize: 14,
3188
+ lineHeight: 16,
3189
+ iconSize: 24,
3190
+ gap: 2,
3191
+ borderRadius: 4,
3192
+ itemGap: 4
3193
+ },
3194
+ xs: {
3195
+ height: 32,
3196
+ paddingHorizontal: 12,
3197
+ fontSize: 14,
3198
+ lineHeight: 16,
3199
+ iconSize: 24,
3200
+ gap: 2,
3201
+ borderRadius: 4,
3202
+ itemGap: 4
3203
+ }
3204
+ };
3205
+ return configs[size];
3206
+ }
3103
3207
  }
3104
- }
3105
- });
3208
+ };
3209
+ };
3106
3210
  var DesignSystemContext = createContext(
3107
3211
  void 0
3108
3212
  );
@@ -3163,6 +3267,7 @@ export {
3163
3267
  defaultProductContext,
3164
3268
  fontFacesCSS,
3165
3269
  fonts,
3270
+ getFonts,
3166
3271
  getTypographyTokens,
3167
3272
  getTypographyVariant,
3168
3273
  isAndroid,