@semanticus/semanticus-css 0.7.0 → 0.9.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 (138) hide show
  1. package/README.md +8 -10
  2. package/dist/semanticus-semantics.css +11 -1
  3. package/dist/semanticus.css +13 -1
  4. package/dist/semanticus.palette.amber.css +1 -1
  5. package/dist/semanticus.palette.blue.css +1 -1
  6. package/dist/semanticus.palette.cyan.css +1 -1
  7. package/dist/semanticus.palette.fuchsia.css +1 -1
  8. package/dist/semanticus.palette.green.css +1 -1
  9. package/dist/semanticus.palette.grey.css +1 -1
  10. package/dist/semanticus.palette.indigo.css +1 -1
  11. package/dist/semanticus.palette.jade.css +1 -1
  12. package/dist/semanticus.palette.lime.css +1 -1
  13. package/dist/semanticus.palette.orange.css +1 -1
  14. package/dist/semanticus.palette.pink.css +1 -1
  15. package/dist/semanticus.palette.pumpkin.css +1 -1
  16. package/dist/semanticus.palette.purple.css +1 -1
  17. package/dist/semanticus.palette.red.css +1 -1
  18. package/dist/semanticus.palette.sand.css +1 -1
  19. package/dist/semanticus.palette.slate.css +1 -1
  20. package/dist/semanticus.palette.violet.css +1 -1
  21. package/dist/semanticus.palette.yellow.css +1 -1
  22. package/dist/semanticus.palette.zinc.css +1 -1
  23. package/dist/semanticus.size.pico.css +1 -0
  24. package/package.json +13 -14
  25. package/src/index.css +11 -4
  26. package/src/palettes/amber.css +3 -3
  27. package/src/palettes/blue.css +3 -3
  28. package/src/palettes/cyan.css +3 -3
  29. package/src/palettes/fuchsia.css +3 -3
  30. package/src/palettes/green.css +3 -3
  31. package/src/palettes/grey.css +3 -3
  32. package/src/palettes/indigo.css +3 -3
  33. package/src/palettes/jade.css +3 -3
  34. package/src/palettes/lime.css +3 -3
  35. package/src/palettes/orange.css +3 -3
  36. package/src/palettes/pink.css +3 -3
  37. package/src/palettes/pumpkin.css +3 -3
  38. package/src/palettes/purple.css +3 -3
  39. package/src/palettes/red.css +3 -3
  40. package/src/palettes/sand.css +3 -3
  41. package/src/palettes/slate.css +3 -3
  42. package/src/palettes/violet.css +3 -3
  43. package/src/palettes/yellow.css +3 -3
  44. package/src/palettes/zinc.css +3 -3
  45. package/src/semantics/_misc.css +3 -0
  46. package/src/semantics/attributes/_popover.css +13 -0
  47. package/src/semantics/attributes/_role-group-search.css +140 -0
  48. package/src/semantics/elements/_abbr.css +5 -0
  49. package/src/semantics/elements/_address.css +7 -0
  50. package/src/semantics/elements/_article.css +6 -0
  51. package/src/semantics/{_aside.css → elements/_aside.css} +3 -3
  52. package/src/semantics/elements/_blockquote.css +18 -0
  53. package/src/semantics/{_button.css → elements/_button.css} +2 -2
  54. package/src/semantics/{_code.css → elements/_code.css} +10 -7
  55. package/src/semantics/elements/_del.css +3 -0
  56. package/src/semantics/{_details.css → elements/_details.css} +10 -10
  57. package/src/semantics/elements/_dialog.css +117 -0
  58. package/src/semantics/elements/_footer.css +13 -0
  59. package/src/semantics/elements/_header.css +13 -0
  60. package/src/semantics/elements/_headings.css +34 -0
  61. package/src/semantics/elements/_hgroup.css +14 -0
  62. package/src/semantics/{_hr.css → elements/_hr.css} +1 -1
  63. package/src/semantics/{_input.css → elements/_input.css} +3 -4
  64. package/src/semantics/elements/_ins.css +4 -0
  65. package/src/semantics/{_links.css → elements/_links.css} +11 -4
  66. package/src/semantics/elements/_lists.css +22 -0
  67. package/src/semantics/elements/_main.css +7 -0
  68. package/src/semantics/elements/_mark.css +6 -0
  69. package/src/semantics/{_nav.css → elements/_nav.css} +4 -4
  70. package/src/semantics/elements/_p.css +11 -0
  71. package/src/semantics/{_progress.css → elements/_progress.css} +1 -1
  72. package/src/semantics/elements/_section.css +7 -0
  73. package/src/semantics/elements/_strong.css +4 -0
  74. package/src/semantics/elements/_sub.css +7 -0
  75. package/src/semantics/elements/_sup.css +7 -0
  76. package/src/semantics/{_table.css → elements/_table.css} +7 -2
  77. package/src/semantics/index.css +9 -4
  78. package/src/semantics/modules.css +47 -32
  79. package/src/sizes/pico.css +100 -0
  80. package/src/utilities/_variables.css +19 -214
  81. package/src/utilities/borders/_border-radius.css +24 -0
  82. package/src/utilities/borders/_border-width.css +8 -0
  83. package/src/utilities/colors/_background-colors.css +51 -44
  84. package/src/utilities/colors/_border-colors.css +14 -14
  85. package/src/utilities/colors/_text-colors.css +80 -80
  86. package/src/utilities/effects/_shadows.css +10 -10
  87. package/src/utilities/layout/_flexbox.css +16 -1
  88. package/src/utilities/layout/_misc.css +2 -2
  89. package/src/utilities/modules.css +6 -0
  90. package/src/utilities/spacing/_gap.css +63 -0
  91. package/src/utilities/spacing/_margin.css +145 -0
  92. package/src/utilities/spacing/_padding.css +145 -0
  93. package/src/utilities/typography/_font-sizes.css +0 -15
  94. package/src/variables/_all.css +15 -739
  95. package/src/variables/_breakpoints.css +10 -0
  96. package/src/variables/_colors.css +355 -0
  97. package/src/variables/_components.css +330 -0
  98. package/src/variables/_elements.css +194 -0
  99. package/src/variables/_icons.css +55 -0
  100. package/src/variables/_layout.css +123 -0
  101. package/src/variants/_contrast.css +28 -14
  102. package/src/variants/_ghost.css +36 -29
  103. package/src/variants/_pane-panel-card.css +54 -0
  104. package/src/variants/_secondary.css +25 -12
  105. package/src/variants/_sidebar.css +49 -9
  106. package/src/variants/modules.css +4 -6
  107. package/dist/semanticus-utilities.css +0 -7
  108. package/dist/semanticus-variants.css +0 -1
  109. package/dist/semanticus.size.slim.css +0 -1
  110. package/src/semantics/_article.css +0 -12
  111. package/src/semantics/_dialog.css +0 -157
  112. package/src/semantics/_footer.css +0 -12
  113. package/src/semantics/_header.css +0 -12
  114. package/src/semantics/_main.css +0 -10
  115. package/src/semantics/_role-group-search.css +0 -129
  116. package/src/semantics/_section.css +0 -9
  117. package/src/semantics/_typography.css +0 -146
  118. package/src/sizes/slim.css +0 -41
  119. package/src/utilities/index.css +0 -14
  120. package/src/variables/_shared.css +0 -121
  121. package/src/variants/_card.css +0 -45
  122. package/src/variants/_flow.css +0 -15
  123. package/src/variants/_panel.css +0 -18
  124. package/src/variants/index.css +0 -9
  125. /package/src/semantics/{_aria-busy.css → attributes/_aria-busy.css} +0 -0
  126. /package/src/semantics/{_hidden.css → attributes/_hidden.css} +0 -0
  127. /package/src/semantics/{_role-toolbar.css → attributes/_role-toolbar.css} +0 -0
  128. /package/src/semantics/{_role-tooltip.css → attributes/_role-tooltip.css} +0 -0
  129. /package/src/semantics/{_body.css → elements/_body.css} +0 -0
  130. /package/src/semantics/{_document.css → elements/_document.css} +0 -0
  131. /package/src/semantics/{_embedded.css → elements/_embedded.css} +0 -0
  132. /package/src/semantics/{_figure.css → elements/_figure.css} +0 -0
  133. /package/src/semantics/{_type-checkbox-radio.css → elements/_type-checkbox-radio.css} +0 -0
  134. /package/src/semantics/{_type-color.css → elements/_type-color.css} +0 -0
  135. /package/src/semantics/{_type-date.css → elements/_type-date.css} +0 -0
  136. /package/src/semantics/{_type-file.css → elements/_type-file.css} +0 -0
  137. /package/src/semantics/{_type-range.css → elements/_type-range.css} +0 -0
  138. /package/src/semantics/{_type-search.css → elements/_type-search.css} +0 -0
package/src/utilities/colors/_text-colors.css CHANGED
@@ -1,94 +1,94 @@
1
1
  .link-primary {
2
- color: rgba(var(--primary-rgb), var(--link-opacity, 1)) !important;
3
- -webkit-text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity, 1)) !important;
4
- text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity, 1)) !important;
2
+ color: rgba(var(--color-primary-rgb), var(--link-opacity, 1)) !important;
3
+ -webkit-text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity, 1)) !important;
4
+ text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity, 1)) !important;
5
5
  }
6
6
  .link-primary:hover, .link-primary:focus {
7
- color: rgba(var(--link-hover-color-rgb), var(--link-opacity, 1)) !important;
8
- -webkit-text-decoration-color: rgba(var(--link-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
9
- text-decoration-color: rgba(var(--link-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
7
+ color: rgba(var(--color-primary-emphasis-rgb), var(--link-opacity, 1)) !important;
8
+ -webkit-text-decoration-color: rgba(var(--color-primary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
9
+ text-decoration-color: rgba(var(--color-primary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
10
10
  }
11
11
 
12
12
  .link-secondary {
13
- color: rgba(var(--secondary-rgb), var(--link-opacity, 1)) !important;
14
- -webkit-text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity, 1)) !important;
15
- text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity, 1)) !important;
13
+ color: rgba(var(--color-secondary-rgb), var(--link-opacity, 1)) !important;
14
+ -webkit-text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity, 1)) !important;
15
+ text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity, 1)) !important;
16
16
  }
17
17
  .link-secondary:hover, .link-secondary:focus {
18
- color: rgba(var(--secondary-hover-color-rgb), var(--link-opacity, 1)) !important;
19
- -webkit-text-decoration-color: rgba(var(--secondary-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
20
- text-decoration-color: rgba(var(--secondary-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
18
+ color: rgba(var(--color-secondary-emphasis-rgb), var(--link-opacity, 1)) !important;
19
+ -webkit-text-decoration-color: rgba(var(--color-secondary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
20
+ text-decoration-color: rgba(var(--color-secondary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
21
21
  }
22
22
 
23
23
  .link-success {
24
- color: rgba(var(--success-rgb), var(--link-opacity, 1)) !important;
25
- -webkit-text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity, 1)) !important;
26
- text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity, 1)) !important;
24
+ color: rgba(var(--color-success-rgb), var(--link-opacity, 1)) !important;
25
+ -webkit-text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity, 1)) !important;
26
+ text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity, 1)) !important;
27
27
  }
28
28
  .link-success:hover, .link-success:focus {
29
- color: rgba(var(--success-hover-color-rgb), var(--link-opacity, 1)) !important;
30
- -webkit-text-decoration-color: rgba(var(--success-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
31
- text-decoration-color: rgba(var(--success-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
29
+ color: rgba(var(--color-success-emphasis-rgb), var(--link-opacity, 1)) !important;
30
+ -webkit-text-decoration-color: rgba(var(--color-success-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
31
+ text-decoration-color: rgba(var(--color-success-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
32
32
  }
33
33
 
34
34
  .link-info {
35
- color: rgba(var(--info-rgb), var(--link-opacity, 1)) !important;
36
- -webkit-text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity, 1)) !important;
37
- text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity, 1)) !important;
35
+ color: rgba(var(--color-info-rgb), var(--link-opacity, 1)) !important;
36
+ -webkit-text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity, 1)) !important;
37
+ text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity, 1)) !important;
38
38
  }
39
39
  .link-info:hover, .link-info:focus {
40
- color: rgba(var(--info-hover-color-rgb), var(--link-opacity, 1)) !important;
41
- -webkit-text-decoration-color: rgba(var(--info-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
42
- text-decoration-color: rgba(var(--info-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
40
+ color: rgba(var(--color-info-emphasis-rgb), var(--link-opacity, 1)) !important;
41
+ -webkit-text-decoration-color: rgba(var(--color-info-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
42
+ text-decoration-color: rgba(var(--color-info-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
43
43
  }
44
44
 
45
45
  .link-warning {
46
- color: rgba(var(--warning-rgb), var(--link-opacity, 1)) !important;
47
- -webkit-text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity, 1)) !important;
48
- text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity, 1)) !important;
46
+ color: rgba(var(--color-warning-rgb), var(--link-opacity, 1)) !important;
47
+ -webkit-text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity, 1)) !important;
48
+ text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity, 1)) !important;
49
49
  }
50
50
  .link-warning:hover, .link-warning:focus {
51
- color: rgba(var(--warning-hover-color-rgb), var(--link-opacity, 1)) !important;
52
- -webkit-text-decoration-color: rgba(var(--warning-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
53
- text-decoration-color: rgba(var(--warning-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
51
+ color: rgba(var(--color-warning-emphasis-rgb), var(--link-opacity, 1)) !important;
52
+ -webkit-text-decoration-color: rgba(var(--color-warning-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
53
+ text-decoration-color: rgba(var(--color-warning-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
54
54
  }
55
55
 
56
56
  .link-danger {
57
- color: rgba(var(--danger-rgb), var(--link-opacity, 1)) !important;
58
- -webkit-text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity, 1)) !important;
59
- text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity, 1)) !important;
57
+ color: rgba(var(--color-danger-rgb), var(--link-opacity, 1)) !important;
58
+ -webkit-text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity, 1)) !important;
59
+ text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity, 1)) !important;
60
60
  }
61
61
  .link-danger:hover, .link-danger:focus {
62
- color: rgba(var(--danger-hover-color-rgb), var(--link-opacity, 1)) !important;
63
- -webkit-text-decoration-color: rgba(var(--danger-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
64
- text-decoration-color: rgba(var(--danger-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
62
+ color: rgba(var(--color-danger-emphasis-rgb), var(--link-opacity, 1)) !important;
63
+ -webkit-text-decoration-color: rgba(var(--color-danger-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
64
+ text-decoration-color: rgba(var(--color-danger-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
65
65
  }
66
66
 
67
67
  .link-contrast {
68
- color: rgba(var(--contrast-rgb), var(--link-opacity, 1)) !important;
69
- -webkit-text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity, 1)) !important;
70
- text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity, 1)) !important;
68
+ color: rgba(var(--color-contrast-rgb), var(--link-opacity, 1)) !important;
69
+ -webkit-text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity, 1)) !important;
70
+ text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity, 1)) !important;
71
71
  }
72
72
  .link-contrast:hover, .link-contrast:focus {
73
- color: rgba(var(--contrast-hover-color-rgb), var(--link-opacity, 1)) !important;
74
- -webkit-text-decoration-color: rgba(var(--contrast-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
75
- text-decoration-color: rgba(var(--contrast-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
73
+ color: rgba(var(--color-contrast-emphasis-rgb), var(--link-opacity, 1)) !important;
74
+ -webkit-text-decoration-color: rgba(var(--color-contrast-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
75
+ text-decoration-color: rgba(var(--color-contrast-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
76
76
  }
77
77
 
78
78
  .link-body-emphasis {
79
- color: rgba(var(--emphasis-color-rgb), var(--link-opacity, 1)) !important;
80
- -webkit-text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 1)) !important;
81
- text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 1)) !important;
79
+ color: rgba(var(--color-emphasis-rgb), var(--link-opacity, 1)) !important;
80
+ -webkit-text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
81
+ text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
82
82
  }
83
83
  .link-body-emphasis:hover, .link-body-emphasis:focus {
84
- color: rgba(var(--emphasis-color-rgb), var(--link-opacity, 0.75)) !important;
85
- -webkit-text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 0.75)) !important;
86
- text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 0.75)) !important;
84
+ color: rgba(var(--color-emphasis-rgb), var(--link-opacity, 0.75)) !important;
85
+ -webkit-text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 0.75)) !important;
86
+ text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 0.75)) !important;
87
87
  }
88
88
 
89
89
  .text-primary {
90
90
  --text-opacity: 1;
91
- --color-text: rgba(var(--primary-rgb), var(--text-opacity)) !important;
91
+ --color-text: rgba(var(--color-primary-rgb), var(--text-opacity)) !important;
92
92
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
93
93
 
94
94
  color: var(--color-text) !important;
@@ -96,7 +96,7 @@
96
96
 
97
97
  .text-secondary {
98
98
  --text-opacity: 1;
99
- --color-text: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
99
+ --color-text: rgba(var(--color-secondary-rgb), var(--text-opacity)) !important;
100
100
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
101
101
 
102
102
  color: var(--color-text) !important;
@@ -104,7 +104,7 @@
104
104
 
105
105
  .text-success {
106
106
  --text-opacity: 1;
107
- --color-text: rgba(var(--success-rgb), var(--text-opacity)) !important;
107
+ --color-text: rgba(var(--color-success-rgb), var(--text-opacity)) !important;
108
108
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
109
109
 
110
110
  color: var(--color-text) !important;
@@ -112,7 +112,7 @@
112
112
 
113
113
  .text-info {
114
114
  --text-opacity: 1;
115
- --color-text: rgba(var(--info-rgb), var(--text-opacity)) !important;
115
+ --color-text: rgba(var(--color-info-rgb), var(--text-opacity)) !important;
116
116
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
117
117
 
118
118
  color: var(--color-text) !important;
@@ -120,7 +120,7 @@
120
120
 
121
121
  .text-warning {
122
122
  --text-opacity: 1;
123
- --color-text: rgba(var(--warning-rgb), var(--text-opacity)) !important;
123
+ --color-text: rgba(var(--color-warning-rgb), var(--text-opacity)) !important;
124
124
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
125
125
 
126
126
  color: var(--color-text) !important;
@@ -128,7 +128,7 @@
128
128
 
129
129
  .text-danger {
130
130
  --text-opacity: 1;
131
- --color-text: rgba(var(--danger-rgb), var(--text-opacity)) !important;
131
+ --color-text: rgba(var(--color-danger-rgb), var(--text-opacity)) !important;
132
132
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
133
133
 
134
134
  color: var(--color-text) !important;
@@ -136,7 +136,7 @@
136
136
 
137
137
  .text-contrast {
138
138
  --text-opacity: 1;
139
- --color-text: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
139
+ --color-text: rgba(var(--color-contrast-rgb), var(--text-opacity)) !important;
140
140
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
141
141
 
142
142
  color: var(--color-text) !important;
@@ -144,7 +144,7 @@
144
144
 
145
145
  .text-body {
146
146
  --text-opacity: 1;
147
- --color-text: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
147
+ --color-text: rgba(var(--color-body-rgb), var(--text-opacity)) !important;
148
148
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
149
149
 
150
150
  color: var(--color-text) !important;
@@ -152,7 +152,7 @@
152
152
 
153
153
  .text-muted {
154
154
  --text-opacity: 1;
155
- --color-text: var(--secondary-color) !important;
155
+ --color-text: var(--color-text-muted) !important;
156
156
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
157
157
 
158
158
  color: var(--color-text) !important;
@@ -197,49 +197,49 @@
197
197
  }
198
198
 
199
199
  .text-primary-emphasis {
200
- --color-text: var(--primary-text-emphasis) !important;
200
+ --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
201
201
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
202
202
 
203
203
  color: var(--color-text) !important;
204
204
  }
205
205
 
206
206
  .text-secondary-emphasis {
207
- --color-text: var(--secondary-text-emphasis) !important;
207
+ --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
208
208
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
209
209
 
210
210
  color: var(--color-text) !important;
211
211
  }
212
212
 
213
213
  .text-success-emphasis {
214
- --color-text: var(--success-text-emphasis) !important;
214
+ --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
215
215
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
216
216
 
217
217
  color: var(--color-text) !important;
218
218
  }
219
219
 
220
220
  .text-info-emphasis {
221
- --color-text: var(--info-text-emphasis) !important;
221
+ --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
222
222
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
223
223
 
224
224
  color: var(--color-text) !important;
225
225
  }
226
226
 
227
227
  .text-warning-emphasis {
228
- --color-text: var(--warning-text-emphasis) !important;
228
+ --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
229
229
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
230
230
 
231
231
  color: var(--color-text) !important;
232
232
  }
233
233
 
234
234
  .text-danger-emphasis {
235
- --color-text: var(--danger-text-emphasis) !important;
235
+ --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
236
236
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
237
237
 
238
238
  color: var(--color-text) !important;
239
239
  }
240
240
 
241
241
  .text-contrast-emphasis {
242
- --color-text: var(--contrast-text-emphasis) !important;
242
+ --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
243
243
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
244
244
 
245
245
  color: var(--color-text) !important;
@@ -312,57 +312,57 @@
312
312
  .link-underline-primary {
313
313
  --link-underline-opacity: 1;
314
314
 
315
- -webkit-text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity)) !important;
316
- text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity)) !important;
315
+ -webkit-text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity)) !important;
316
+ text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity)) !important;
317
317
  }
318
318
 
319
319
  .link-underline-secondary {
320
320
  --link-underline-opacity: 1;
321
321
 
322
- -webkit-text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity)) !important;
323
- text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity)) !important;
322
+ -webkit-text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity)) !important;
323
+ text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity)) !important;
324
324
  }
325
325
 
326
326
  .link-underline-success {
327
327
  --link-underline-opacity: 1;
328
328
 
329
- -webkit-text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity)) !important;
330
- text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity)) !important;
329
+ -webkit-text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity)) !important;
330
+ text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity)) !important;
331
331
  }
332
332
 
333
333
  .link-underline-info {
334
334
  --link-underline-opacity: 1;
335
335
 
336
- -webkit-text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity)) !important;
337
- text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity)) !important;
336
+ -webkit-text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity)) !important;
337
+ text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity)) !important;
338
338
  }
339
339
 
340
340
  .link-underline-warning {
341
341
  --link-underline-opacity: 1;
342
342
 
343
- -webkit-text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity)) !important;
344
- text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity)) !important;
343
+ -webkit-text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity)) !important;
344
+ text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity)) !important;
345
345
  }
346
346
 
347
347
  .link-underline-danger {
348
348
  --link-underline-opacity: 1;
349
349
 
350
- -webkit-text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity)) !important;
351
- text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity)) !important;
350
+ -webkit-text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity)) !important;
351
+ text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity)) !important;
352
352
  }
353
353
 
354
354
  .link-underline-contrast {
355
355
  --link-underline-opacity: 1;
356
356
 
357
- -webkit-text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity)) !important;
358
- text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity)) !important;
357
+ -webkit-text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity)) !important;
358
+ text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity)) !important;
359
359
  }
360
360
 
361
361
  .link-underline {
362
362
  --link-underline-opacity: 1;
363
363
 
364
- -webkit-text-decoration-color: rgba(var(--link-color-rgb), var(--link-underline-opacity, 1)) !important;
365
- text-decoration-color: rgba(var(--link-color-rgb), var(--link-underline-opacity, 1)) !important;
364
+ -webkit-text-decoration-color: rgba(var(--color-link-rgb), var(--link-underline-opacity, 1)) !important;
365
+ text-decoration-color: rgba(var(--color-link-rgb), var(--link-underline-opacity, 1)) !important;
366
366
  }
367
367
 
368
368
  .link-underline-opacity-0 {
package/src/utilities/effects/_shadows.css CHANGED
@@ -4,15 +4,15 @@
4
4
  }
5
5
 
6
6
  .shadow {
7
- box-shadow: var(--box-shadow) !important;
7
+ box-shadow: var(--shadow-md) !important;
8
8
  }
9
9
 
10
10
  .shadow-sm {
11
- box-shadow: var(--box-shadow-sm) !important;
11
+ box-shadow: var(--shadow-sm) !important;
12
12
  }
13
13
 
14
14
  .shadow-lg {
15
- box-shadow: var(--box-shadow-lg) !important;
15
+ box-shadow: var(--shadow-lg) !important;
16
16
  }
17
17
 
18
18
  .shadow-none {
@@ -20,29 +20,29 @@
20
20
  }
21
21
 
22
22
  .focus-ring-primary {
23
- --focus-ring-color: rgba(var(--primary-rgb), var(--focus-ring-opacity));
23
+ --focus-ring-color: rgba(var(--color-primary-rgb), var(--focus-ring-opacity));
24
24
  }
25
25
 
26
26
  .focus-ring-secondary {
27
- --focus-ring-color: rgba(var(--secondary-rgb), var(--focus-ring-opacity));
27
+ --focus-ring-color: rgba(var(--color-secondary-rgb), var(--focus-ring-opacity));
28
28
  }
29
29
 
30
30
  .focus-ring-success {
31
- --focus-ring-color: rgba(var(--success-rgb), var(--focus-ring-opacity));
31
+ --focus-ring-color: rgba(var(--color-success-rgb), var(--focus-ring-opacity));
32
32
  }
33
33
 
34
34
  .focus-ring-info {
35
- --focus-ring-color: rgba(var(--info-rgb), var(--focus-ring-opacity));
35
+ --focus-ring-color: rgba(var(--color-info-rgb), var(--focus-ring-opacity));
36
36
  }
37
37
 
38
38
  .focus-ring-warning {
39
- --focus-ring-color: rgba(var(--warning-rgb), var(--focus-ring-opacity));
39
+ --focus-ring-color: rgba(var(--color-warning-rgb), var(--focus-ring-opacity));
40
40
  }
41
41
 
42
42
  .focus-ring-danger {
43
- --focus-ring-color: rgba(var(--danger-rgb), var(--focus-ring-opacity));
43
+ --focus-ring-color: rgba(var(--color-danger-rgb), var(--focus-ring-opacity));
44
44
  }
45
45
 
46
46
  .focus-ring-contrast {
47
- --focus-ring-color: rgba(var(--contrast-rgb), var(--focus-ring-opacity));
47
+ --focus-ring-color: rgba(var(--color-contrast-rgb), var(--focus-ring-opacity));
48
48
  }
package/src/utilities/layout/_flexbox.css CHANGED
@@ -1,3 +1,19 @@
1
+ .flow-h {
2
+ align-items: flex-start;
3
+ display: flex;
4
+ flex-direction: row;
5
+ flex-grow: 1;
6
+ justify-content: stretch;
7
+ }
8
+
9
+ .flow-v {
10
+ align-items: stretch;
11
+ display: flex;
12
+ flex-direction: column;
13
+ width: 100%;
14
+ justify-content: flex-start;
15
+ }
16
+
1
17
  .hstack {
2
18
  display: flex;
3
19
  flex-direction: row;
@@ -843,4 +859,3 @@
843
859
  order: 6 !important;
844
860
  }
845
861
  }
846
-
package/src/utilities/layout/_misc.css CHANGED
@@ -8,8 +8,8 @@
8
8
  display: inline-flex;
9
9
  gap: 0.375rem;
10
10
  align-items: center;
11
- -webkit-text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, 0.5));
12
- text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, 0.5));
11
+ -webkit-text-decoration-color: rgba(var(--color-link-rgb), var(--link-opacity, 0.5));
12
+ text-decoration-color: rgba(var(--color-link-rgb), var(--link-opacity, 0.5));
13
13
  text-underline-offset: 0.25em;
14
14
  -webkit-backface-visibility: hidden;
15
15
  backface-visibility: hidden;
package/src/utilities/modules.css CHANGED
@@ -1,7 +1,13 @@
1
1
  /**
2
2
  * Semanticus CSS Utilities Modules
3
+ *
3
4
  * Just the utility classes (no global variables, no normalize)
4
5
  * Used by the full version which imports global variables and normalize separately
6
+ *
7
+ * Adapted from Bootstrap v5.3.8 utilities (https://getbootstrap.com/)
8
+ * Original work: Copyright (c) 2011-2026 The Bootstrap Authors
9
+ * Modifications: Copyright (c) 2026 Joao Goncalves
10
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
11
  */
6
12
 
7
13
  @import './_variables.css';
package/src/utilities/spacing/_gap.css CHANGED
@@ -2,6 +2,10 @@
2
2
  gap: 0 !important;
3
3
  }
4
4
 
5
+ .gap-d {
6
+ gap: var(--spacer-default) !important;
7
+ }
8
+
5
9
  .gap-1 {
6
10
  gap: var(--spacer-1) !important;
7
11
  }
@@ -26,6 +30,10 @@
26
30
  row-gap: 0 !important;
27
31
  }
28
32
 
33
+ .row-gap-d {
34
+ row-gap: var(--spacer-default) !important;
35
+ }
36
+
29
37
  .row-gap-1 {
30
38
  row-gap: var(--spacer-1) !important;
31
39
  }
@@ -51,6 +59,11 @@
51
59
  column-gap: 0 !important;
52
60
  }
53
61
 
62
+ .column-gap-d {
63
+ -moz-column-gap: var(--spacer-default) !important;
64
+ column-gap: var(--spacer-default) !important;
65
+ }
66
+
54
67
  .column-gap-1 {
55
68
  -moz-column-gap: var(--spacer-1) !important;
56
69
  column-gap: var(--spacer-1) !important;
@@ -80,6 +93,9 @@
80
93
  .gap-sm-0 {
81
94
  gap: 0 !important;
82
95
  }
96
+ .gap-sm-d {
97
+ gap: var(--spacer-default) !important;
98
+ }
83
99
  .gap-sm-1 {
84
100
  gap: var(--spacer-1) !important;
85
101
  }
@@ -98,6 +114,9 @@
98
114
  .row-gap-sm-0 {
99
115
  row-gap: 0 !important;
100
116
  }
117
+ .row-gap-sm-d {
118
+ row-gap: var(--spacer-default) !important;
119
+ }
101
120
  .row-gap-sm-1 {
102
121
  row-gap: var(--spacer-1) !important;
103
122
  }
@@ -117,6 +136,10 @@
117
136
  -moz-column-gap: 0 !important;
118
137
  column-gap: 0 !important;
119
138
  }
139
+ .column-gap-sm-d {
140
+ -moz-column-gap: var(--spacer-default) !important;
141
+ column-gap: var(--spacer-default) !important;
142
+ }
120
143
  .column-gap-sm-1 {
121
144
  -moz-column-gap: var(--spacer-1) !important;
122
145
  column-gap: var(--spacer-1) !important;
@@ -143,6 +166,9 @@
143
166
  .gap-md-0 {
144
167
  gap: 0 !important;
145
168
  }
169
+ .gap-md-d {
170
+ gap: var(--spacer-default) !important;
171
+ }
146
172
  .gap-md-1 {
147
173
  gap: var(--spacer-1) !important;
148
174
  }
@@ -161,6 +187,9 @@
161
187
  .row-gap-md-0 {
162
188
  row-gap: 0 !important;
163
189
  }
190
+ .row-gap-md-d {
191
+ row-gap: var(--spacer-default) !important;
192
+ }
164
193
  .row-gap-md-1 {
165
194
  row-gap: var(--spacer-1) !important;
166
195
  }
@@ -180,6 +209,10 @@
180
209
  -moz-column-gap: 0 !important;
181
210
  column-gap: 0 !important;
182
211
  }
212
+ .column-gap-md-d {
213
+ -moz-column-gap: var(--spacer-default) !important;
214
+ column-gap: var(--spacer-default) !important;
215
+ }
183
216
  .column-gap-md-1 {
184
217
  -moz-column-gap: var(--spacer-1) !important;
185
218
  column-gap: var(--spacer-1) !important;
@@ -206,6 +239,9 @@
206
239
  .gap-lg-0 {
207
240
  gap: 0 !important;
208
241
  }
242
+ .gap-lg-d {
243
+ gap: var(--spacer-default) !important;
244
+ }
209
245
  .gap-lg-1 {
210
246
  gap: var(--spacer-1) !important;
211
247
  }
@@ -224,6 +260,9 @@
224
260
  .row-gap-lg-0 {
225
261
  row-gap: 0 !important;
226
262
  }
263
+ .row-gap-lg-d {
264
+ row-gap: var(--spacer-default) !important;
265
+ }
227
266
  .row-gap-lg-1 {
228
267
  row-gap: var(--spacer-1) !important;
229
268
  }
@@ -243,6 +282,10 @@
243
282
  -moz-column-gap: 0 !important;
244
283
  column-gap: 0 !important;
245
284
  }
285
+ .column-gap-lg-d {
286
+ -moz-column-gap: var(--spacer-default) !important;
287
+ column-gap: var(--spacer-default) !important;
288
+ }
246
289
  .column-gap-lg-1 {
247
290
  -moz-column-gap: var(--spacer-1) !important;
248
291
  column-gap: var(--spacer-1) !important;
@@ -269,6 +312,9 @@
269
312
  .gap-xl-0 {
270
313
  gap: 0 !important;
271
314
  }
315
+ .gap-xl-d {
316
+ gap: var(--spacer-default) !important;
317
+ }
272
318
  .gap-xl-1 {
273
319
  gap: var(--spacer-1) !important;
274
320
  }
@@ -287,6 +333,9 @@
287
333
  .row-gap-xl-0 {
288
334
  row-gap: 0 !important;
289
335
  }
336
+ .row-gap-xl-d {
337
+ row-gap: var(--spacer-default) !important;
338
+ }
290
339
  .row-gap-xl-1 {
291
340
  row-gap: var(--spacer-1) !important;
292
341
  }
@@ -306,6 +355,10 @@
306
355
  -moz-column-gap: 0 !important;
307
356
  column-gap: 0 !important;
308
357
  }
358
+ .column-gap-xl-d {
359
+ -moz-column-gap: var(--spacer-default) !important;
360
+ column-gap: var(--spacer-default) !important;
361
+ }
309
362
  .column-gap-xl-1 {
310
363
  -moz-column-gap: var(--spacer-1) !important;
311
364
  column-gap: var(--spacer-1) !important;
@@ -332,6 +385,9 @@
332
385
  .gap-xxl-0 {
333
386
  gap: 0 !important;
334
387
  }
388
+ .gap-xxl-d {
389
+ gap: var(--spacer-default) !important;
390
+ }
335
391
  .gap-xxl-1 {
336
392
  gap: var(--spacer-1) !important;
337
393
  }
@@ -350,6 +406,9 @@
350
406
  .row-gap-xxl-0 {
351
407
  row-gap: 0 !important;
352
408
  }
409
+ .row-gap-xxl-d {
410
+ row-gap: var(--spacer-default) !important;
411
+ }
353
412
  .row-gap-xxl-1 {
354
413
  row-gap: var(--spacer-1) !important;
355
414
  }
@@ -369,6 +428,10 @@
369
428
  -moz-column-gap: 0 !important;
370
429
  column-gap: 0 !important;
371
430
  }
431
+ .column-gap-xxl-d {
432
+ -moz-column-gap: var(--spacer-default) !important;
433
+ column-gap: var(--spacer-default) !important;
434
+ }
372
435
  .column-gap-xxl-1 {
373
436
  -moz-column-gap: var(--spacer-1) !important;
374
437
  column-gap: var(--spacer-1) !important;