@sveltia/ui 0.31.2 → 0.31.3

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 (4) hide show
  1. package/dist/components/util/app-shell.svelte +34 -11
  2. package/dist/styles/core.scss +30 -12
  3. package/dist/styles/variables.scss +4 -0
  4. package/package.json +1 -1
package/dist/components/util/app-shell.svelte CHANGED
@@ -205,6 +205,10 @@
205
205
  --sui-line-height-compact: 1.5;
206
206
  --sui-line-height-comfortable: 1.75;
207
207
  --sui-word-spacing-normal: 0.1ex;
208
+ --sui-heading-margin: 0;
209
+ --sui-heading-font-family: var(--sui-font-family-default);
210
+ --sui-heading-font-weight: var(--sui-font-weight-bold);
211
+ --sui-heading-line-height: var(--sui-line-height-default);
208
212
  --sui-paragraph-margin: 1.75em;
209
213
  --sui-control-small-border-width: 1px;
210
214
  --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
@@ -468,28 +472,47 @@
468
472
  outline-color: var(--sui-primary-accent-color-translucent);
469
473
  z-index: 2;
470
474
  }
471
- :global(:is(h1, h2, h3, h4, h5, h6)) {
472
- margin: 0;
473
- font-weight: var(--sui-font-weight-bold, bold);
474
- line-height: var(--sui-line-height-default);
475
- }
476
475
  :global(h1) {
477
- font-size: 32px;
476
+ margin: var(--sui-h1-margin, var(--sui-heading-margin));
477
+ font-size: var(--sui-h1-font-size, 32px);
478
+ font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
479
+ font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
480
+ line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
478
481
  }
479
482
  :global(h2) {
480
- font-size: 28px;
483
+ margin: var(--sui-h2-margin, var(--sui-heading-margin));
484
+ font-size: var(--sui-h2-font-size, 28px);
485
+ font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
486
+ font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
487
+ line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
481
488
  }
482
489
  :global(h3) {
483
- font-size: 24px;
490
+ margin: var(--sui-h3-margin, var(--sui-heading-margin));
491
+ font-size: var(--sui-h3-font-size, 24px);
492
+ font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
493
+ font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
494
+ line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
484
495
  }
485
496
  :global(h4) {
486
- font-size: 20px;
497
+ margin: var(--sui-h4-margin, var(--sui-heading-margin));
498
+ font-size: var(--sui-h4-font-size, 20px);
499
+ font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
500
+ font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
501
+ line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
487
502
  }
488
503
  :global(h5) {
489
- font-size: 16px;
504
+ margin: var(--sui-h5-margin, var(--sui-heading-margin));
505
+ font-size: var(--sui-h5-font-size, 16px);
506
+ font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
507
+ font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
508
+ line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
490
509
  }
491
510
  :global(h6) {
492
- font-size: 12px;
511
+ margin: var(--sui-h6-margin, var(--sui-heading-margin));
512
+ font-size: var(--sui-h6-font-size, 12px);
513
+ font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
514
+ font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
515
+ line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
493
516
  }
494
517
  :global(strong) {
495
518
  font-weight: var(--sui-font-weight-bold, bold);
package/dist/styles/core.scss CHANGED
@@ -48,34 +48,52 @@
48
48
  z-index: 2;
49
49
  }
50
50
 
51
- :is(h1, h2, h3, h4, h5, h6) {
52
- margin: 0;
53
- font-weight: var(--sui-font-weight-bold, bold);
54
- line-height: var(--sui-line-height-default);
55
- }
56
-
57
51
  h1 {
58
- font-size: 32px;
52
+ margin: var(--sui-h1-margin, var(--sui-heading-margin));
53
+ font-size: var(--sui-h1-font-size, 32px);
54
+ font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
55
+ font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
56
+ line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
59
57
  }
60
58
 
61
59
  h2 {
62
- font-size: 28px;
60
+ margin: var(--sui-h2-margin, var(--sui-heading-margin));
61
+ font-size: var(--sui-h2-font-size, 28px);
62
+ font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
63
+ font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
64
+ line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
63
65
  }
64
66
 
65
67
  h3 {
66
- font-size: 24px;
68
+ margin: var(--sui-h3-margin, var(--sui-heading-margin));
69
+ font-size: var(--sui-h3-font-size, 24px);
70
+ font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
71
+ font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
72
+ line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
67
73
  }
68
74
 
69
75
  h4 {
70
- font-size: 20px;
76
+ margin: var(--sui-h4-margin, var(--sui-heading-margin));
77
+ font-size: var(--sui-h4-font-size, 20px);
78
+ font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
79
+ font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
80
+ line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
71
81
  }
72
82
 
73
83
  h5 {
74
- font-size: 16px;
84
+ margin: var(--sui-h5-margin, var(--sui-heading-margin));
85
+ font-size: var(--sui-h5-font-size, 16px);
86
+ font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
87
+ font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
88
+ line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
75
89
  }
76
90
 
77
91
  h6 {
78
- font-size: 12px;
92
+ margin: var(--sui-h6-margin, var(--sui-heading-margin));
93
+ font-size: var(--sui-h6-font-size, 12px);
94
+ font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
95
+ font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
96
+ line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
79
97
  }
80
98
 
81
99
  strong {
package/dist/styles/variables.scss CHANGED
@@ -167,6 +167,10 @@
167
167
  --sui-line-height-compact: 1.5;
168
168
  --sui-line-height-comfortable: 1.75;
169
169
  --sui-word-spacing-normal: 0.1ex;
170
+ --sui-heading-margin: 0;
171
+ --sui-heading-font-family: var(--sui-font-family-default);
172
+ --sui-heading-font-weight: var(--sui-font-weight-bold);
173
+ --sui-heading-line-height: var(--sui-line-height-default);
170
174
  --sui-paragraph-margin: 1.75em;
171
175
  // Controls
172
176
  --sui-control-small-border-width: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.31.2",
3
+ "version": "0.31.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {