@semanticus/semanticus-css 0.3.0 → 0.4.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 (22) hide show
  1. package/README.md +14 -14
  2. package/dist/semanticus-semantics.css +1 -1
  3. package/dist/semanticus-utilities.css +1 -1
  4. package/dist/semanticus-variants.css +1 -1
  5. package/dist/semanticus.css +1 -1
  6. package/package.json +5 -5
  7. package/src/_variables.css +16 -5
  8. package/src/semantics/_dialog.css +2 -2
  9. package/src/semantics/_role-toolbar.css +1 -1
  10. package/src/utilities/display/_display.css +5 -5
  11. package/src/utilities/layout/_flexbox.css +5 -5
  12. package/src/utilities/layout/_grid.css +1 -1
  13. package/src/utilities/media/_object-fit.css +5 -5
  14. package/src/utilities/positioning/_floats.css +5 -5
  15. package/src/utilities/positioning/_position.css +5 -5
  16. package/src/utilities/spacing/_gap.css +5 -5
  17. package/src/utilities/spacing/_margin.css +5 -5
  18. package/src/utilities/spacing/_padding.css +5 -5
  19. package/src/utilities/typography/_font-sizes.css +1 -1
  20. package/src/utilities/typography/_text-alignment.css +5 -5
  21. package/src/variants/_container.css +5 -5
  22. package/src/variants/index.css +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@semanticus/semanticus-css",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities",
5
5
  "author": "Joao Goncalves",
6
6
  "style": "./dist/semanticus.css",
@@ -88,10 +88,10 @@
88
88
  "release:update-cdn-urls": "node scripts/update-cdn-urls.js",
89
89
  "build": "npm run build:css && npm run build:palettes && npm run build:sizes && npm run build:update-size-claims",
90
90
  "build:css": "npm run build:full && npm run build:semantics && npm run build:variants && npm run build:utilities",
91
- "build:full": "lightningcss --bundle --minify --browserslist src/index.css -o dist/semanticus.css --custom-media",
92
- "build:semantics": "lightningcss --bundle --minify --browserslist src/semantics/index.css -o dist/semanticus-semantics.css --custom-media",
93
- "build:variants": "lightningcss --bundle --minify --browserslist src/variants/index.css -o dist/semanticus-variants.css --custom-media",
94
- "build:utilities": "lightningcss --bundle --minify --browserslist src/utilities/index.css -o dist/semanticus-utilities.css --custom-media",
91
+ "build:full": "lightningcss --bundle --minify --browserslist src/index.css -o dist/semanticus.css",
92
+ "build:semantics": "lightningcss --bundle --minify --browserslist src/semantics/index.css -o dist/semanticus-semantics.css",
93
+ "build:variants": "lightningcss --bundle --minify --browserslist src/variants/index.css -o dist/semanticus-variants.css",
94
+ "build:utilities": "lightningcss --bundle --minify --browserslist src/utilities/index.css -o dist/semanticus-utilities.css",
95
95
  "build:palettes": "node scripts/build-palettes.js",
96
96
  "build:sizes": "node scripts/build-sizes.js",
97
97
  "build:update-size-claims": "node scripts/update-size-claims.js",
package/src/_variables.css CHANGED
@@ -18,6 +18,17 @@
18
18
  --transparent: transparent;
19
19
  }
20
20
 
21
+ /* ==========================================================================
22
+ Responsive Breakpoints (custom media queries)
23
+ Used consistently across semantics, variants, and utilities.
24
+ ========================================================================== */
25
+
26
+ @custom-media --breakpoint-sm (min-width: 576px);
27
+ @custom-media --breakpoint-md (min-width: 768px);
28
+ @custom-media --breakpoint-lg (min-width: 1024px);
29
+ @custom-media --breakpoint-xl (min-width: 1280px);
30
+ @custom-media --breakpoint-xxl (min-width: 1536px);
31
+
21
32
  /* ==========================================================================
22
33
  2. Typography & Layout Variables (from Pico Theme)
23
34
  ========================================================================== */
@@ -79,35 +90,35 @@
79
90
  }
80
91
 
81
92
  /* Responsive Font Sizes – progressively increase root font-size at wider viewports */
82
- @media (min-width: 576px) {
93
+ @media (--breakpoint-sm) {
83
94
  :root,
84
95
  :host {
85
96
  --font-size: 106.25%;
86
97
  }
87
98
  }
88
99
 
89
- @media (min-width: 768px) {
100
+ @media (--breakpoint-md) {
90
101
  :root,
91
102
  :host {
92
103
  --font-size: 112.5%;
93
104
  }
94
105
  }
95
106
 
96
- @media (min-width: 1024px) {
107
+ @media (--breakpoint-lg) {
97
108
  :root,
98
109
  :host {
99
110
  --font-size: 118.75%;
100
111
  }
101
112
  }
102
113
 
103
- @media (min-width: 1280px) {
114
+ @media (--breakpoint-xl) {
104
115
  :root,
105
116
  :host {
106
117
  --font-size: 125%;
107
118
  }
108
119
  }
109
120
 
110
- @media (min-width: 1536px) {
121
+ @media (--breakpoint-xxl) {
111
122
  :root,
112
123
  :host {
113
124
  --font-size: 131.25%;
package/src/semantics/_dialog.css CHANGED
@@ -50,11 +50,11 @@ dialog {
50
50
  background: var(--card-bg);
51
51
  box-shadow: var(--card-shadow);
52
52
 
53
- @media (min-width: 576px) {
53
+ @media (--breakpoint-sm) {
54
54
  max-width: 510px;
55
55
  }
56
56
 
57
- @media (min-width: 768px) {
57
+ @media (--breakpoint-md) {
58
58
  max-width: 700px;
59
59
  }
60
60
 
package/src/semantics/_role-toolbar.css CHANGED
@@ -7,7 +7,7 @@
7
7
  display: grid;
8
8
  grid-template-columns: 1fr;
9
9
 
10
- @media (min-width: 425px) {
10
+ @media (--breakpoint-sm) {
11
11
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
12
12
  }
13
13
 
package/src/utilities/display/_display.css CHANGED
@@ -42,7 +42,7 @@
42
42
  display: none !important;
43
43
  }
44
44
 
45
- @media (min-width: 576px) {
45
+ @media (--breakpoint-sm) {
46
46
  .d-sm-inline {
47
47
  display: inline !important;
48
48
  }
@@ -78,7 +78,7 @@
78
78
  }
79
79
  }
80
80
 
81
- @media (min-width: 768px) {
81
+ @media (--breakpoint-md) {
82
82
  .d-md-inline {
83
83
  display: inline !important;
84
84
  }
@@ -114,7 +114,7 @@
114
114
  }
115
115
  }
116
116
 
117
- @media (min-width: 992px) {
117
+ @media (--breakpoint-lg) {
118
118
  .d-lg-inline {
119
119
  display: inline !important;
120
120
  }
@@ -150,7 +150,7 @@
150
150
  }
151
151
  }
152
152
 
153
- @media (min-width: 1200px) {
153
+ @media (--breakpoint-xl) {
154
154
  .d-xl-inline {
155
155
  display: inline !important;
156
156
  }
@@ -186,7 +186,7 @@
186
186
  }
187
187
  }
188
188
 
189
- @media (min-width: 1400px) {
189
+ @media (--breakpoint-xxl) {
190
190
  .d-xxl-inline {
191
191
  display: inline !important;
192
192
  }
package/src/utilities/layout/_flexbox.css CHANGED
@@ -184,7 +184,7 @@
184
184
  order: 6 !important;
185
185
  }
186
186
 
187
- @media (min-width: 576px) {
187
+ @media (--breakpoint-sm) {
188
188
  .flex-sm-fill {
189
189
  flex: 1 1 auto !important;
190
190
  }
@@ -316,7 +316,7 @@
316
316
  }
317
317
  }
318
318
 
319
- @media (min-width: 768px) {
319
+ @media (--breakpoint-md) {
320
320
  .flex-md-fill {
321
321
  flex: 1 1 auto !important;
322
322
  }
@@ -448,7 +448,7 @@
448
448
  }
449
449
  }
450
450
 
451
- @media (min-width: 992px) {
451
+ @media (--breakpoint-lg) {
452
452
  .flex-lg-fill {
453
453
  flex: 1 1 auto !important;
454
454
  }
@@ -580,7 +580,7 @@
580
580
  }
581
581
  }
582
582
 
583
- @media (min-width: 1200px) {
583
+ @media (--breakpoint-xl) {
584
584
  .flex-xl-fill {
585
585
  flex: 1 1 auto !important;
586
586
  }
@@ -712,7 +712,7 @@
712
712
  }
713
713
  }
714
714
 
715
- @media (min-width: 1400px) {
715
+ @media (--breakpoint-xxl) {
716
716
  .flex-xxl-fill {
717
717
  flex: 1 1 auto !important;
718
718
  }
package/src/utilities/layout/_grid.css CHANGED
@@ -8,7 +8,7 @@
8
8
  display: grid;
9
9
  grid-template-columns: 1fr;
10
10
 
11
- @media (min-width: 425px) {
11
+ @media (--breakpoint-sm) {
12
12
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
13
13
  }
14
14
 
package/src/utilities/media/_object-fit.css CHANGED
@@ -23,7 +23,7 @@
23
23
  object-fit: none !important;
24
24
  }
25
25
 
26
- @media (min-width: 576px) {
26
+ @media (--breakpoint-sm) {
27
27
  .object-fit-sm-contain {
28
28
  -o-object-fit: contain !important;
29
29
  object-fit: contain !important;
@@ -46,7 +46,7 @@
46
46
  }
47
47
  }
48
48
 
49
- @media (min-width: 768px) {
49
+ @media (--breakpoint-md) {
50
50
  .object-fit-md-contain {
51
51
  -o-object-fit: contain !important;
52
52
  object-fit: contain !important;
@@ -69,7 +69,7 @@
69
69
  }
70
70
  }
71
71
 
72
- @media (min-width: 992px) {
72
+ @media (--breakpoint-lg) {
73
73
  .object-fit-lg-contain {
74
74
  -o-object-fit: contain !important;
75
75
  object-fit: contain !important;
@@ -92,7 +92,7 @@
92
92
  }
93
93
  }
94
94
 
95
- @media (min-width: 1200px) {
95
+ @media (--breakpoint-xl) {
96
96
  .object-fit-xl-contain {
97
97
  -o-object-fit: contain !important;
98
98
  object-fit: contain !important;
@@ -115,7 +115,7 @@
115
115
  }
116
116
  }
117
117
 
118
- @media (min-width: 1400px) {
118
+ @media (--breakpoint-xxl) {
119
119
  .object-fit-xxl-contain {
120
120
  -o-object-fit: contain !important;
121
121
  object-fit: contain !important;
package/src/utilities/positioning/_floats.css CHANGED
@@ -10,7 +10,7 @@
10
10
  float: none !important;
11
11
  }
12
12
 
13
- @media (min-width: 576px) {
13
+ @media (--breakpoint-sm) {
14
14
  .float-sm-start {
15
15
  float: left !important;
16
16
  }
@@ -22,7 +22,7 @@
22
22
  }
23
23
  }
24
24
 
25
- @media (min-width: 768px) {
25
+ @media (--breakpoint-md) {
26
26
  .float-md-start {
27
27
  float: left !important;
28
28
  }
@@ -34,7 +34,7 @@
34
34
  }
35
35
  }
36
36
 
37
- @media (min-width: 992px) {
37
+ @media (--breakpoint-lg) {
38
38
  .float-lg-start {
39
39
  float: left !important;
40
40
  }
@@ -46,7 +46,7 @@
46
46
  }
47
47
  }
48
48
 
49
- @media (min-width: 1200px) {
49
+ @media (--breakpoint-xl) {
50
50
  .float-xl-start {
51
51
  float: left !important;
52
52
  }
@@ -58,7 +58,7 @@
58
58
  }
59
59
  }
60
60
 
61
- @media (min-width: 1400px) {
61
+ @media (--breakpoint-xxl) {
62
62
  .float-xxl-start {
63
63
  float: left !important;
64
64
  }
package/src/utilities/positioning/_position.css CHANGED
@@ -26,7 +26,7 @@
26
26
  z-index: 1020;
27
27
  }
28
28
 
29
- @media (min-width: 576px) {
29
+ @media (--breakpoint-sm) {
30
30
  .sticky-sm-top {
31
31
  position: sticky;
32
32
  top: 0;
@@ -38,7 +38,7 @@
38
38
  z-index: 1020;
39
39
  }
40
40
  }
41
- @media (min-width: 768px) {
41
+ @media (--breakpoint-md) {
42
42
  .sticky-md-top {
43
43
  position: sticky;
44
44
  top: 0;
@@ -50,7 +50,7 @@
50
50
  z-index: 1020;
51
51
  }
52
52
  }
53
- @media (min-width: 992px) {
53
+ @media (--breakpoint-lg) {
54
54
  .sticky-lg-top {
55
55
  position: sticky;
56
56
  top: 0;
@@ -62,7 +62,7 @@
62
62
  z-index: 1020;
63
63
  }
64
64
  }
65
- @media (min-width: 1200px) {
65
+ @media (--breakpoint-xl) {
66
66
  .sticky-xl-top {
67
67
  position: sticky;
68
68
  top: 0;
@@ -74,7 +74,7 @@
74
74
  z-index: 1020;
75
75
  }
76
76
  }
77
- @media (min-width: 1400px) {
77
+ @media (--breakpoint-xxl) {
78
78
  .sticky-xxl-top {
79
79
  position: sticky;
80
80
  top: 0;
package/src/utilities/spacing/_gap.css CHANGED
@@ -76,7 +76,7 @@
76
76
  column-gap: var(--spacer-5) !important;
77
77
  }
78
78
 
79
- @media (min-width: 576px) {
79
+ @media (--breakpoint-sm) {
80
80
  .gap-sm-0 {
81
81
  gap: 0 !important;
82
82
  }
@@ -139,7 +139,7 @@
139
139
  }
140
140
  }
141
141
 
142
- @media (min-width: 768px) {
142
+ @media (--breakpoint-md) {
143
143
  .gap-md-0 {
144
144
  gap: 0 !important;
145
145
  }
@@ -202,7 +202,7 @@
202
202
  }
203
203
  }
204
204
 
205
- @media (min-width: 992px) {
205
+ @media (--breakpoint-lg) {
206
206
  .gap-lg-0 {
207
207
  gap: 0 !important;
208
208
  }
@@ -265,7 +265,7 @@
265
265
  }
266
266
  }
267
267
 
268
- @media (min-width: 1200px) {
268
+ @media (--breakpoint-xl) {
269
269
  .gap-xl-0 {
270
270
  gap: 0 !important;
271
271
  }
@@ -328,7 +328,7 @@
328
328
  }
329
329
  }
330
330
 
331
- @media (min-width: 1400px) {
331
+ @media (--breakpoint-xxl) {
332
332
  .gap-xxl-0 {
333
333
  gap: 0 !important;
334
334
  }
package/src/utilities/spacing/_margin.css CHANGED
@@ -208,7 +208,7 @@
208
208
  margin-left: auto !important;
209
209
  }
210
210
 
211
- @media (min-width: 576px) {
211
+ @media (--breakpoint-sm) {
212
212
  .m-sm-0 {
213
213
  margin: 0 !important;
214
214
  }
@@ -372,7 +372,7 @@
372
372
  }
373
373
  }
374
374
 
375
- @media (min-width: 768px) {
375
+ @media (--breakpoint-md) {
376
376
  .m-md-0 {
377
377
  margin: 0 !important;
378
378
  }
@@ -536,7 +536,7 @@
536
536
  }
537
537
  }
538
538
 
539
- @media (min-width: 992px) {
539
+ @media (--breakpoint-lg) {
540
540
  .m-lg-0 {
541
541
  margin: 0 !important;
542
542
  }
@@ -700,7 +700,7 @@
700
700
  }
701
701
  }
702
702
 
703
- @media (min-width: 1200px) {
703
+ @media (--breakpoint-xl) {
704
704
  .m-xl-0 {
705
705
  margin: 0 !important;
706
706
  }
@@ -864,7 +864,7 @@
864
864
  }
865
865
  }
866
866
 
867
- @media (min-width: 1400px) {
867
+ @media (--breakpoint-xxl) {
868
868
  .m-xxl-0 {
869
869
  margin: 0 !important;
870
870
  }
package/src/utilities/spacing/_padding.css CHANGED
@@ -178,7 +178,7 @@
178
178
  padding-left: var(--spacer-5) !important;
179
179
  }
180
180
 
181
- @media (min-width: 576px) {
181
+ @media (--breakpoint-sm) {
182
182
  .p-sm-0 {
183
183
  padding: 0 !important;
184
184
  }
@@ -319,7 +319,7 @@
319
319
  }
320
320
  }
321
321
 
322
- @media (min-width: 768px) {
322
+ @media (--breakpoint-md) {
323
323
  .p-md-0 {
324
324
  padding: 0 !important;
325
325
  }
@@ -460,7 +460,7 @@
460
460
  }
461
461
  }
462
462
 
463
- @media (min-width: 992px) {
463
+ @media (--breakpoint-lg) {
464
464
  .p-lg-0 {
465
465
  padding: 0 !important;
466
466
  }
@@ -601,7 +601,7 @@
601
601
  }
602
602
  }
603
603
 
604
- @media (min-width: 1200px) {
604
+ @media (--breakpoint-xl) {
605
605
  .p-xl-0 {
606
606
  padding: 0 !important;
607
607
  }
@@ -742,7 +742,7 @@
742
742
  }
743
743
  }
744
744
 
745
- @media (min-width: 1400px) {
745
+ @media (--breakpoint-xxl) {
746
746
  .p-xxl-0 {
747
747
  padding: 0 !important;
748
748
  }
package/src/utilities/typography/_font-sizes.css CHANGED
@@ -22,7 +22,7 @@
22
22
  font-size: var(--fs-6) !important;
23
23
  }
24
24
 
25
- @media (min-width: 1200px) {
25
+ @media (--breakpoint-xl) {
26
26
  .fs-1 {
27
27
  font-size: 2.5rem !important;
28
28
  }
package/src/utilities/typography/_text-alignment.css CHANGED
@@ -79,7 +79,7 @@
79
79
 
80
80
  /* rtl:end:remove */
81
81
 
82
- @media (min-width: 576px) {
82
+ @media (--breakpoint-sm) {
83
83
  .text-sm-start {
84
84
  text-align: left !important;
85
85
  }
@@ -91,7 +91,7 @@
91
91
  }
92
92
  }
93
93
 
94
- @media (min-width: 768px) {
94
+ @media (--breakpoint-md) {
95
95
  .text-md-start {
96
96
  text-align: left !important;
97
97
  }
@@ -103,7 +103,7 @@
103
103
  }
104
104
  }
105
105
 
106
- @media (min-width: 992px) {
106
+ @media (--breakpoint-lg) {
107
107
  .text-lg-start {
108
108
  text-align: left !important;
109
109
  }
@@ -115,7 +115,7 @@
115
115
  }
116
116
  }
117
117
 
118
- @media (min-width: 1200px) {
118
+ @media (--breakpoint-xl) {
119
119
  .text-xl-start {
120
120
  text-align: left !important;
121
121
  }
@@ -127,7 +127,7 @@
127
127
  }
128
128
  }
129
129
 
130
- @media (min-width: 1400px) {
130
+ @media (--breakpoint-xxl) {
131
131
  .text-xxl-start {
132
132
  text-align: left !important;
133
133
  }
package/src/variants/_container.css CHANGED
@@ -12,25 +12,25 @@
12
12
  }
13
13
 
14
14
  .container {
15
- @media (min-width: 576px) {
15
+ @media (--breakpoint-sm) {
16
16
  max-width: 510px;
17
17
  padding-right: 0;
18
18
  padding-left: 0;
19
19
  }
20
20
 
21
- @media (min-width: 768px) {
21
+ @media (--breakpoint-md) {
22
22
  max-width: 700px;
23
23
  }
24
24
 
25
- @media (min-width: 1024px) {
25
+ @media (--breakpoint-lg) {
26
26
  max-width: 950px;
27
27
  }
28
28
 
29
- @media (min-width: 1280px) {
29
+ @media (--breakpoint-xl) {
30
30
  max-width: 1200px;
31
31
  }
32
32
 
33
- @media (min-width: 1536px) {
33
+ @media (--breakpoint-xxl) {
34
34
  max-width: 1450px;
35
35
  }
36
36
  }
package/src/variants/index.css CHANGED
@@ -3,4 +3,7 @@
3
3
  * Class-based variant styles that extend semantic
4
4
  */
5
5
 
6
+ /* Global variables */
7
+ @import '../_variables.css';
8
+
6
9
  @import "./modules.css";