holygrail5 1.0.21 → 1.0.23

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 (42) hide show
  1. package/README.md +72 -0
  2. package/config.json +85 -18
  3. package/dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff +0 -0
  4. package/dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff2 +0 -0
  5. package/dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff +0 -0
  6. package/dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff2 +0 -0
  7. package/dist/assets/fonts/suisse-intl-thin.woff +0 -0
  8. package/dist/assets/fonts/suisse-intl-thin.woff2 +0 -0
  9. package/dist/componentes.html +1 -8
  10. package/dist/developer-guide.md +4 -0
  11. package/dist/guide-styles.css +85 -56
  12. package/dist/index.html +2727 -2690
  13. package/dist/output.css +123 -70
  14. package/dist/skills.html +17 -5
  15. package/dist/themes/dutti-demo.html +76 -39
  16. package/dist/themes/dutti.css +10 -6
  17. package/dist/themes/limited-demo.html +55 -18
  18. package/dist/themes/limited.css +8 -6
  19. package/package.json +2 -2
  20. package/src/.data/.previous-values.json +69 -20
  21. package/src/assets/fonts/SuisseIntlMono-Bold-WebS.woff +0 -0
  22. package/src/assets/fonts/SuisseIntlMono-Bold-WebS.woff2 +0 -0
  23. package/src/assets/fonts/SuisseIntlMono-Regular-WebS.woff +0 -0
  24. package/src/assets/fonts/SuisseIntlMono-Regular-WebS.woff2 +0 -0
  25. package/src/assets/fonts/suisse-intl-thin.woff +0 -0
  26. package/src/assets/fonts/suisse-intl-thin.woff2 +0 -0
  27. package/src/build/asset-manager.js +8 -0
  28. package/src/build/components-generator.js +1 -8
  29. package/src/build/skills-generator.js +12 -4
  30. package/src/build/theme-transformer.js +10 -3
  31. package/src/dev-server.js +28 -13
  32. package/src/docs-generator/guide-styles.css +85 -56
  33. package/src/docs-generator/html-generator.js +188 -183
  34. package/src/docs-generator/sections/colors-section.js +15 -5
  35. package/src/generators/typo-generator.js +1 -2
  36. package/src/generators/utils.js +15 -0
  37. package/themes/_base/_radios.css +7 -6
  38. package/themes/dutti/README.md +17 -0
  39. package/themes/dutti/_variables.css +3 -0
  40. package/themes/dutti/theme.json +2 -1
  41. package/themes/limited/_variables.css +1 -0
  42. package/themes/limited/theme.json +2 -1
package/dist/output.css CHANGED
@@ -56,10 +56,13 @@ p, h1, h2, h3, h4, h5, h6 {
56
56
  }
57
57
  /* Variables CSS Compartidas */
58
58
  :root {
59
+ --hg-typo-font-family-primary-thin: "suisse-thin", Arial, Helvetica, sans-serif;
59
60
  --hg-typo-font-family-primary-light: "suisse-light", Arial, Helvetica, sans-serif;
60
61
  --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
61
62
  --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
62
63
  --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
64
+ --hg-typo-font-family-mono-regular: "suisse-mono-regular", ui-monospace, monospace;
65
+ --hg-typo-font-family-mono-bold: "suisse-mono-bold", ui-monospace, monospace;
63
66
  --hg-typo-line-height-1: 1;
64
67
  --hg-typo-line-height-1-976: 1.976;
65
68
  --hg-typo-line-height-1-2: 1.2;
@@ -2210,151 +2213,176 @@ p, h1, h2, h3, h4, h5, h6 {
2210
2213
  /* Tipografías - Mobile (min-width: 0.0625rem) */
2211
2214
  @media (min-width: 0.0625rem) {
2212
2215
 
2216
+ .title-thin {
2217
+ font-family: var(--hg-typo-font-family-primary-thin);
2218
+ font-weight: var(--hg-typo-font-weight-100);
2219
+ font-size: var(--hg-typo-font-size-24);
2220
+ line-height: var(--hg-typo-line-height-1);
2221
+ }
2222
+
2213
2223
  .title-xxl {
2214
2224
  font-family: var(--hg-typo-font-family-primary-regular);
2215
- font-weight: var(--hg-typo-font-weight-300);
2225
+ font-weight: var(--hg-typo-font-weight-400);
2216
2226
  font-size: var(--hg-typo-font-size-24);
2217
- line-height: var(--hg-typo-line-height-1) !important;
2227
+ line-height: var(--hg-typo-line-height-1);
2218
2228
  }
2219
2229
 
2220
2230
  .h2 {
2221
2231
  font-family: var(--hg-typo-font-family-primary-bold);
2222
2232
  font-weight: var(--hg-typo-font-weight-600);
2223
2233
  font-size: var(--hg-typo-font-size-18);
2224
- line-height: var(--hg-typo-line-height-1-2) !important;
2234
+ line-height: var(--hg-typo-line-height-1-2);
2225
2235
  letter-spacing: var(--hg-typo-letter-spacing-0);
2226
2236
  text-transform: var(--hg-typo-text-transform-none);
2227
2237
  }
2228
2238
 
2229
2239
  .title-l-b {
2230
2240
  font-family: var(--hg-typo-font-family-primary-regular);
2231
- font-weight: var(--hg-typo-font-weight-300);
2241
+ font-weight: var(--hg-typo-font-weight-400);
2232
2242
  font-size: var(--hg-typo-font-size-12);
2233
- line-height: var(--hg-typo-line-height-1-4) !important;
2243
+ line-height: var(--hg-typo-line-height-1-4);
2234
2244
  }
2235
2245
 
2236
2246
  .title-l {
2237
2247
  font-family: var(--hg-typo-font-family-primary-light);
2238
- font-weight: var(--hg-typo-font-weight-100);
2248
+ font-weight: var(--hg-typo-font-weight-300);
2239
2249
  font-size: var(--hg-typo-font-size-12);
2240
- line-height: var(--hg-typo-line-height-1-4) !important;
2250
+ line-height: var(--hg-typo-line-height-1-4);
2241
2251
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2242
2252
  text-transform: var(--hg-typo-text-transform-uppercase);
2243
2253
  }
2244
2254
 
2245
2255
  .title-m {
2246
2256
  font-family: var(--hg-typo-font-family-primary-light);
2247
- font-weight: var(--hg-typo-font-weight-100);
2257
+ font-weight: var(--hg-typo-font-weight-300);
2248
2258
  font-size: var(--hg-typo-font-size-12);
2249
- line-height: var(--hg-typo-line-height-1-4) !important;
2259
+ line-height: var(--hg-typo-line-height-1-4);
2250
2260
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2251
2261
  }
2252
2262
 
2253
2263
  .title-s-b {
2254
2264
  font-family: var(--hg-typo-font-family-primary-regular);
2255
- font-weight: var(--hg-typo-font-weight-300);
2265
+ font-weight: var(--hg-typo-font-weight-400);
2256
2266
  font-size: var(--hg-typo-font-size-10);
2257
- line-height: var(--hg-typo-line-height-1-4) !important;
2267
+ line-height: var(--hg-typo-line-height-1-4);
2258
2268
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2259
2269
  }
2260
2270
 
2261
2271
  .title-s {
2262
2272
  font-family: var(--hg-typo-font-family-primary-light);
2263
- font-weight: var(--hg-typo-font-weight-100);
2273
+ font-weight: var(--hg-typo-font-weight-300);
2264
2274
  font-size: var(--hg-typo-font-size-10);
2265
- line-height: var(--hg-typo-line-height-1-4) !important;
2275
+ line-height: var(--hg-typo-line-height-1-4);
2266
2276
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2267
2277
  text-transform: var(--hg-typo-text-transform-uppercase);
2268
2278
  }
2269
2279
 
2270
2280
  .text-l {
2271
2281
  font-family: var(--hg-typo-font-family-primary-light);
2272
- font-weight: var(--hg-typo-font-weight-100);
2282
+ font-weight: var(--hg-typo-font-weight-300);
2273
2283
  font-size: var(--hg-typo-font-size-13);
2274
- line-height: var(--hg-typo-line-height-1-5) !important;
2284
+ line-height: var(--hg-typo-line-height-1-5);
2275
2285
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2276
2286
  }
2277
2287
 
2278
2288
  .text-m {
2279
2289
  font-family: var(--hg-typo-font-family-primary-light);
2280
- font-weight: var(--hg-typo-font-weight-100);
2290
+ font-weight: var(--hg-typo-font-weight-300);
2281
2291
  font-size: var(--hg-typo-font-size-12);
2282
- line-height: var(--hg-typo-line-height-1-5) !important;
2292
+ line-height: var(--hg-typo-line-height-1-5);
2283
2293
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2284
2294
  }
2285
2295
 
2286
2296
  .p-tag {
2287
2297
  font-family: var(--hg-typo-font-family-primary-light);
2288
- font-weight: var(--hg-typo-font-weight-100);
2298
+ font-weight: var(--hg-typo-font-weight-300);
2289
2299
  font-size: var(--hg-typo-font-size-9);
2290
- line-height: var(--hg-typo-line-height-1) !important;
2300
+ line-height: var(--hg-typo-line-height-1);
2291
2301
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2292
2302
  }
2293
2303
 
2294
2304
  .hg-body-l {
2295
2305
  font-family: var(--hg-typo-font-family-primary-light);
2296
- font-weight: var(--hg-typo-font-weight-100);
2306
+ font-weight: var(--hg-typo-font-weight-300);
2297
2307
  font-size: var(--hg-typo-font-size-12);
2298
- line-height: var(--hg-typo-line-height-1-5) !important;
2308
+ line-height: var(--hg-typo-line-height-1-5);
2299
2309
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2300
2310
  }
2301
2311
 
2302
2312
  .hg-body-l-b {
2303
2313
  font-family: var(--hg-typo-font-family-primary-regular);
2304
- font-weight: var(--hg-typo-font-weight-300);
2314
+ font-weight: var(--hg-typo-font-weight-400);
2305
2315
  font-size: var(--hg-typo-font-size-12);
2306
- line-height: var(--hg-typo-line-height-1-5) !important;
2316
+ line-height: var(--hg-typo-line-height-1-5);
2307
2317
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2308
2318
  }
2309
2319
 
2310
2320
  .hg-body-m {
2311
2321
  font-family: var(--hg-typo-font-family-primary-light);
2312
- font-weight: var(--hg-typo-font-weight-100);
2322
+ font-weight: var(--hg-typo-font-weight-300);
2313
2323
  font-size: var(--hg-typo-font-size-12);
2314
- line-height: var(--hg-typo-line-height-1-5) !important;
2324
+ line-height: var(--hg-typo-line-height-1-5);
2315
2325
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2316
2326
  }
2317
2327
 
2318
2328
  .hg-body-m-b {
2319
2329
  font-family: var(--hg-typo-font-family-primary-regular);
2320
- font-weight: var(--hg-typo-font-weight-300);
2330
+ font-weight: var(--hg-typo-font-weight-400);
2321
2331
  font-size: var(--hg-typo-font-size-12);
2322
- line-height: var(--hg-typo-line-height-1-5) !important;
2332
+ line-height: var(--hg-typo-line-height-1-5);
2323
2333
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2324
2334
  }
2325
2335
 
2326
2336
  .label-m {
2327
2337
  font-family: var(--hg-typo-font-family-primary-light);
2328
- font-weight: var(--hg-typo-font-weight-100);
2338
+ font-weight: var(--hg-typo-font-weight-300);
2329
2339
  font-size: var(--hg-typo-font-size-12);
2330
- line-height: var(--hg-typo-line-height-1) !important;
2340
+ line-height: var(--hg-typo-line-height-1);
2331
2341
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2332
2342
  text-transform: var(--hg-typo-text-transform-uppercase);
2333
2343
  }
2334
2344
 
2335
2345
  .label-m-b {
2336
2346
  font-family: var(--hg-typo-font-family-primary-regular);
2337
- font-weight: var(--hg-typo-font-weight-300);
2347
+ font-weight: var(--hg-typo-font-weight-400);
2338
2348
  font-size: var(--hg-typo-font-size-12);
2339
- line-height: var(--hg-typo-line-height-1) !important;
2349
+ line-height: var(--hg-typo-line-height-1);
2340
2350
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2341
2351
  text-transform: var(--hg-typo-text-transform-uppercase);
2342
2352
  }
2343
2353
 
2344
2354
  .label-s {
2345
2355
  font-family: var(--hg-typo-font-family-primary-light);
2346
- font-weight: var(--hg-typo-font-weight-100);
2356
+ font-weight: var(--hg-typo-font-weight-300);
2347
2357
  font-size: var(--hg-typo-font-size-10);
2348
- line-height: var(--hg-typo-line-height-1) !important;
2358
+ line-height: var(--hg-typo-line-height-1);
2349
2359
  letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2350
2360
  text-transform: var(--hg-typo-text-transform-uppercase);
2351
2361
  }
2352
2362
 
2353
2363
  .label-s-b {
2354
2364
  font-family: var(--hg-typo-font-family-primary-regular);
2355
- font-weight: var(--hg-typo-font-weight-300);
2365
+ font-weight: var(--hg-typo-font-weight-400);
2366
+ font-size: var(--hg-typo-font-size-10);
2367
+ line-height: var(--hg-typo-line-height-1);
2368
+ letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2369
+ text-transform: var(--hg-typo-text-transform-uppercase);
2370
+ }
2371
+
2372
+ .label-mono {
2373
+ font-family: var(--hg-typo-font-family-mono-regular);
2374
+ font-weight: var(--hg-typo-font-weight-400);
2375
+ font-size: var(--hg-typo-font-size-10);
2376
+ line-height: var(--hg-typo-line-height-1-2);
2377
+ letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2378
+ text-transform: var(--hg-typo-text-transform-uppercase);
2379
+ }
2380
+
2381
+ .label-mono-b {
2382
+ font-family: var(--hg-typo-font-family-mono-bold);
2383
+ font-weight: var(--hg-typo-font-weight-700);
2356
2384
  font-size: var(--hg-typo-font-size-10);
2357
- line-height: var(--hg-typo-line-height-1) !important;
2385
+ line-height: var(--hg-typo-line-height-1-2);
2358
2386
  letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2359
2387
  text-transform: var(--hg-typo-text-transform-uppercase);
2360
2388
  }
@@ -2364,151 +2392,176 @@ p, h1, h2, h3, h4, h5, h6 {
2364
2392
  /* Tipografías - Desktop (min-width: 62rem) */
2365
2393
  @media (min-width: 62rem) {
2366
2394
 
2395
+ .title-thin {
2396
+ font-family: var(--hg-typo-font-family-primary-thin);
2397
+ font-weight: var(--hg-typo-font-weight-100);
2398
+ font-size: var(--hg-typo-font-size-24);
2399
+ line-height: var(--hg-typo-line-height-1);
2400
+ }
2401
+
2367
2402
  .title-xxl {
2368
2403
  font-family: var(--hg-typo-font-family-primary-regular);
2369
- font-weight: var(--hg-typo-font-weight-300);
2404
+ font-weight: var(--hg-typo-font-weight-400);
2370
2405
  font-size: var(--hg-typo-font-size-24);
2371
- line-height: var(--hg-typo-line-height-1) !important;
2406
+ line-height: var(--hg-typo-line-height-1);
2372
2407
  }
2373
2408
 
2374
2409
  .h2 {
2375
2410
  font-family: var(--hg-typo-font-family-primary-bold);
2376
2411
  font-weight: var(--hg-typo-font-weight-600);
2377
2412
  font-size: var(--hg-typo-font-size-24);
2378
- line-height: var(--hg-typo-line-height-1-2) !important;
2413
+ line-height: var(--hg-typo-line-height-1-2);
2379
2414
  letter-spacing: var(--hg-typo-letter-spacing-0);
2380
2415
  text-transform: var(--hg-typo-text-transform-none);
2381
2416
  }
2382
2417
 
2383
2418
  .title-l-b {
2384
2419
  font-family: var(--hg-typo-font-family-primary-regular);
2385
- font-weight: var(--hg-typo-font-weight-300);
2420
+ font-weight: var(--hg-typo-font-weight-400);
2386
2421
  font-size: var(--hg-typo-font-size-13);
2387
- line-height: var(--hg-typo-line-height-1-4) !important;
2422
+ line-height: var(--hg-typo-line-height-1-4);
2388
2423
  }
2389
2424
 
2390
2425
  .title-l {
2391
2426
  font-family: var(--hg-typo-font-family-primary-light);
2392
- font-weight: var(--hg-typo-font-weight-100);
2427
+ font-weight: var(--hg-typo-font-weight-300);
2393
2428
  font-size: var(--hg-typo-font-size-13);
2394
- line-height: var(--hg-typo-line-height-1-4) !important;
2429
+ line-height: var(--hg-typo-line-height-1-4);
2395
2430
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2396
2431
  text-transform: var(--hg-typo-text-transform-uppercase);
2397
2432
  }
2398
2433
 
2399
2434
  .title-m {
2400
2435
  font-family: var(--hg-typo-font-family-primary-light);
2401
- font-weight: var(--hg-typo-font-weight-100);
2436
+ font-weight: var(--hg-typo-font-weight-300);
2402
2437
  font-size: var(--hg-typo-font-size-13);
2403
- line-height: var(--hg-typo-line-height-1-4) !important;
2438
+ line-height: var(--hg-typo-line-height-1-4);
2404
2439
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2405
2440
  }
2406
2441
 
2407
2442
  .title-s-b {
2408
2443
  font-family: var(--hg-typo-font-family-primary-regular);
2409
- font-weight: var(--hg-typo-font-weight-300);
2444
+ font-weight: var(--hg-typo-font-weight-400);
2410
2445
  font-size: var(--hg-typo-font-size-10);
2411
- line-height: var(--hg-typo-line-height-1-4) !important;
2446
+ line-height: var(--hg-typo-line-height-1-4);
2412
2447
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2413
2448
  }
2414
2449
 
2415
2450
  .title-s {
2416
2451
  font-family: var(--hg-typo-font-family-primary-light);
2417
- font-weight: var(--hg-typo-font-weight-100);
2452
+ font-weight: var(--hg-typo-font-weight-300);
2418
2453
  font-size: var(--hg-typo-font-size-10);
2419
- line-height: var(--hg-typo-line-height-1-4) !important;
2454
+ line-height: var(--hg-typo-line-height-1-4);
2420
2455
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2421
2456
  text-transform: var(--hg-typo-text-transform-uppercase);
2422
2457
  }
2423
2458
 
2424
2459
  .text-l {
2425
2460
  font-family: var(--hg-typo-font-family-primary-light);
2426
- font-weight: var(--hg-typo-font-weight-100);
2461
+ font-weight: var(--hg-typo-font-weight-300);
2427
2462
  font-size: var(--hg-typo-font-size-13);
2428
- line-height: var(--hg-typo-line-height-1-5) !important;
2463
+ line-height: var(--hg-typo-line-height-1-5);
2429
2464
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2430
2465
  }
2431
2466
 
2432
2467
  .text-m {
2433
2468
  font-family: var(--hg-typo-font-family-primary-light);
2434
- font-weight: var(--hg-typo-font-weight-100);
2469
+ font-weight: var(--hg-typo-font-weight-300);
2435
2470
  font-size: var(--hg-typo-font-size-12);
2436
- line-height: var(--hg-typo-line-height-1-5) !important;
2471
+ line-height: var(--hg-typo-line-height-1-5);
2437
2472
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2438
2473
  }
2439
2474
 
2440
2475
  .p-tag {
2441
2476
  font-family: var(--hg-typo-font-family-primary-light);
2442
- font-weight: var(--hg-typo-font-weight-100);
2477
+ font-weight: var(--hg-typo-font-weight-300);
2443
2478
  font-size: var(--hg-typo-font-size-10);
2444
- line-height: var(--hg-typo-line-height-1) !important;
2479
+ line-height: var(--hg-typo-line-height-1);
2445
2480
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2446
2481
  }
2447
2482
 
2448
2483
  .hg-body-l {
2449
2484
  font-family: var(--hg-typo-font-family-primary-light);
2450
- font-weight: var(--hg-typo-font-weight-100);
2485
+ font-weight: var(--hg-typo-font-weight-300);
2451
2486
  font-size: var(--hg-typo-font-size-13);
2452
- line-height: var(--hg-typo-line-height-1-5) !important;
2487
+ line-height: var(--hg-typo-line-height-1-5);
2453
2488
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2454
2489
  }
2455
2490
 
2456
2491
  .hg-body-l-b {
2457
2492
  font-family: var(--hg-typo-font-family-primary-regular);
2458
- font-weight: var(--hg-typo-font-weight-300);
2493
+ font-weight: var(--hg-typo-font-weight-400);
2459
2494
  font-size: var(--hg-typo-font-size-13);
2460
- line-height: var(--hg-typo-line-height-1-5) !important;
2495
+ line-height: var(--hg-typo-line-height-1-5);
2461
2496
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2462
2497
  }
2463
2498
 
2464
2499
  .hg-body-m {
2465
2500
  font-family: var(--hg-typo-font-family-primary-light);
2466
- font-weight: var(--hg-typo-font-weight-100);
2501
+ font-weight: var(--hg-typo-font-weight-300);
2467
2502
  font-size: var(--hg-typo-font-size-12);
2468
- line-height: var(--hg-typo-line-height-1-5) !important;
2503
+ line-height: var(--hg-typo-line-height-1-5);
2469
2504
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2470
2505
  }
2471
2506
 
2472
2507
  .hg-body-m-b {
2473
2508
  font-family: var(--hg-typo-font-family-primary-regular);
2474
- font-weight: var(--hg-typo-font-weight-300);
2509
+ font-weight: var(--hg-typo-font-weight-400);
2475
2510
  font-size: var(--hg-typo-font-size-12);
2476
- line-height: var(--hg-typo-line-height-1-5) !important;
2511
+ line-height: var(--hg-typo-line-height-1-5);
2477
2512
  letter-spacing: var(--hg-typo-letter-spacing-0-04em);
2478
2513
  }
2479
2514
 
2480
2515
  .label-m {
2481
2516
  font-family: var(--hg-typo-font-family-primary-light);
2482
- font-weight: var(--hg-typo-font-weight-100);
2517
+ font-weight: var(--hg-typo-font-weight-300);
2483
2518
  font-size: var(--hg-typo-font-size-12);
2484
- line-height: var(--hg-typo-line-height-1) !important;
2519
+ line-height: var(--hg-typo-line-height-1);
2485
2520
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2486
2521
  text-transform: var(--hg-typo-text-transform-uppercase);
2487
2522
  }
2488
2523
 
2489
2524
  .label-m-b {
2490
2525
  font-family: var(--hg-typo-font-family-primary-regular);
2491
- font-weight: var(--hg-typo-font-weight-300);
2526
+ font-weight: var(--hg-typo-font-weight-400);
2492
2527
  font-size: var(--hg-typo-font-size-12);
2493
- line-height: var(--hg-typo-line-height-1) !important;
2528
+ line-height: var(--hg-typo-line-height-1);
2494
2529
  letter-spacing: var(--hg-typo-letter-spacing-0-16em);
2495
2530
  text-transform: var(--hg-typo-text-transform-uppercase);
2496
2531
  }
2497
2532
 
2498
2533
  .label-s {
2499
2534
  font-family: var(--hg-typo-font-family-primary-light);
2500
- font-weight: var(--hg-typo-font-weight-100);
2535
+ font-weight: var(--hg-typo-font-weight-300);
2501
2536
  font-size: var(--hg-typo-font-size-10);
2502
- line-height: var(--hg-typo-line-height-1) !important;
2537
+ line-height: var(--hg-typo-line-height-1);
2503
2538
  letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2504
2539
  text-transform: var(--hg-typo-text-transform-uppercase);
2505
2540
  }
2506
2541
 
2507
2542
  .label-s-b {
2508
2543
  font-family: var(--hg-typo-font-family-primary-regular);
2509
- font-weight: var(--hg-typo-font-weight-300);
2544
+ font-weight: var(--hg-typo-font-weight-400);
2545
+ font-size: var(--hg-typo-font-size-10);
2546
+ line-height: var(--hg-typo-line-height-1);
2547
+ letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2548
+ text-transform: var(--hg-typo-text-transform-uppercase);
2549
+ }
2550
+
2551
+ .label-mono {
2552
+ font-family: var(--hg-typo-font-family-mono-regular);
2553
+ font-weight: var(--hg-typo-font-weight-400);
2554
+ font-size: var(--hg-typo-font-size-10);
2555
+ line-height: var(--hg-typo-line-height-1-2);
2556
+ letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2557
+ text-transform: var(--hg-typo-text-transform-uppercase);
2558
+ }
2559
+
2560
+ .label-mono-b {
2561
+ font-family: var(--hg-typo-font-family-mono-bold);
2562
+ font-weight: var(--hg-typo-font-weight-700);
2510
2563
  font-size: var(--hg-typo-font-size-10);
2511
- line-height: var(--hg-typo-line-height-1) !important;
2564
+ line-height: var(--hg-typo-line-height-1-2);
2512
2565
  letter-spacing: var(--hg-typo-letter-spacing-0-06em);
2513
2566
  text-transform: var(--hg-typo-text-transform-uppercase);
2514
2567
  }
package/dist/skills.html CHANGED
@@ -4,15 +4,23 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>HolyGrail5 — Developer Guide</title>
7
- <link href="https://fonts.googleapis.com" rel="preconnect">
8
- <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
9
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Instrument+Sans:regular,100,500,600,700" media="all">
10
7
  <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
11
8
  <link rel="stylesheet" href="output.css">
12
9
  <style>
10
+ /* @font-face de Suisse (esta página no enlaza guide-styles.css, donde
11
+ normalmente viven). Misma convención: una familia por peso, woff2+woff
12
+ con fallback, y el font-weight numérico real de cada cut. */
13
+ @font-face { font-family: "suisse-light"; font-weight: 300; font-display: swap;
14
+ src: local("SuisseIntl-Light"), url('assets/fonts/suisse-intl-light.woff2') format('woff2'), url('assets/fonts/suisse-intl-light.woff') format('woff'); }
15
+ @font-face { font-family: "suisse-regular"; font-weight: 400; font-display: swap;
16
+ src: local("SuisseIntl-Regular"), url('assets/fonts/suisse-intl-regular.woff2') format('woff2'), url('assets/fonts/suisse-intl-regular.woff') format('woff'); }
17
+ @font-face { font-family: "suisse-medium"; font-weight: 500; font-display: swap;
18
+ src: local("SuisseIntl-Medium"), url('assets/fonts/suisse-intl-medium.woff2') format('woff2'), url('assets/fonts/suisse-intl-medium.woff') format('woff'); }
19
+ @font-face { font-family: "suisse-semibold"; font-weight: 600; font-display: swap;
20
+ src: local("SuisseIntl-SemiBold"), url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'), url('assets/fonts/suisse-intl-semibold.woff') format('woff'); }
13
21
  * { box-sizing: border-box; margin: 0; padding: 0; }
14
22
  body {
15
- font-family: 'Instrument Sans', sans-serif !important;
23
+ font-family: var(--hg-typo-font-family-primary-regular);
16
24
  background: #fff;
17
25
  color: #111;
18
26
  -webkit-font-smoothing: antialiased;
@@ -436,7 +444,11 @@ border-color: var(--hg-color-error);
436
444
 
437
445
  &lt;!-- Body variants --&gt;
438
446
  &lt;p class="hg-hg-body-m"&gt;Body medium (12→13px)&lt;/p&gt;
439
- &lt;p class="hg-hg-body-m-b"&gt;Body medium bold (weight 400)&lt;/p&gt;</code></div>
447
+ &lt;p class="hg-hg-body-m-b"&gt;Body medium bold (weight 400)&lt;/p&gt;
448
+
449
+ &lt;!-- Labels mono (Suisse Intl Mono, 10px / 120%) --&gt;
450
+ &lt;span class="label-mono"&gt;Label mono regular&lt;/span&gt;
451
+ &lt;span class="label-mono-b"&gt;Label mono bold&lt;/span&gt;</code></div>
440
452
  <h4 class="sk-md-h3">Cómo funciona</h4>
441
453
  <p class="sk-md-p">Las clases son mobile-first. Los valores base aplican a mobile y un media query <code class="sk-inline-code">@media (min-width: 992px)</code> sobrescribe para desktop.</p>
442
454
  <div class="sk-code-block"><code>/* CSS generado (ejemplo) */