@semanticus/semanticus-css 0.8.0 → 1.0.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 (166) hide show
  1. package/NOTICE +16 -16
  2. package/README.md +128 -29
  3. package/dist/semanticus-no-utilities.css +11 -0
  4. package/dist/semanticus-semantics.css +3 -4
  5. package/dist/semanticus-utilities.css +11 -0
  6. package/dist/semanticus.css +4 -12
  7. package/dist/semanticus.palette.amber.css +1 -1
  8. package/dist/semanticus.palette.azure.css +1 -0
  9. package/dist/semanticus.palette.blue.css +1 -1
  10. package/dist/semanticus.palette.cyan.css +1 -1
  11. package/dist/semanticus.palette.fuchsia.css +1 -1
  12. package/dist/semanticus.palette.green.css +1 -1
  13. package/dist/semanticus.palette.grey.css +1 -1
  14. package/dist/semanticus.palette.indigo.css +1 -1
  15. package/dist/semanticus.palette.jade.css +1 -1
  16. package/dist/semanticus.palette.lime.css +1 -1
  17. package/dist/semanticus.palette.orange.css +1 -1
  18. package/dist/semanticus.palette.pink.css +1 -1
  19. package/dist/semanticus.palette.pumpkin.css +1 -1
  20. package/dist/semanticus.palette.purple.css +1 -1
  21. package/dist/semanticus.palette.red.css +1 -1
  22. package/dist/semanticus.palette.sand.css +1 -1
  23. package/dist/semanticus.palette.slate.css +1 -1
  24. package/dist/semanticus.palette.violet.css +1 -1
  25. package/dist/semanticus.palette.yellow.css +1 -1
  26. package/dist/semanticus.palette.zinc.css +1 -1
  27. package/dist/semanticus.size.pico.css +1 -1
  28. package/package.json +28 -16
  29. package/src/components/_card.css +84 -0
  30. package/src/components/_sidebar.css +49 -0
  31. package/src/components/modules.css +2 -0
  32. package/src/index.css +8 -10
  33. package/src/no-utilities.css +22 -0
  34. package/src/palettes/amber.css +28 -53
  35. package/src/palettes/azure.css +31 -0
  36. package/src/palettes/blue.css +28 -53
  37. package/src/palettes/cyan.css +28 -53
  38. package/src/palettes/fuchsia.css +28 -53
  39. package/src/palettes/green.css +28 -53
  40. package/src/palettes/grey.css +28 -53
  41. package/src/palettes/indigo.css +28 -53
  42. package/src/palettes/jade.css +28 -53
  43. package/src/palettes/lime.css +28 -53
  44. package/src/palettes/orange.css +28 -53
  45. package/src/palettes/pink.css +28 -53
  46. package/src/palettes/pumpkin.css +28 -53
  47. package/src/palettes/purple.css +28 -53
  48. package/src/palettes/red.css +28 -53
  49. package/src/palettes/sand.css +28 -53
  50. package/src/palettes/slate.css +28 -53
  51. package/src/palettes/violet.css +28 -53
  52. package/src/palettes/yellow.css +28 -53
  53. package/src/palettes/zinc.css +28 -53
  54. package/src/semantics/{_aria-busy.css → attributes/_aria-busy.css} +0 -3
  55. package/src/semantics/{_hidden.css → attributes/_hidden.css} +0 -3
  56. package/src/semantics/attributes/_popover.css +13 -0
  57. package/src/semantics/attributes/_role-group-search.css +137 -0
  58. package/src/semantics/{_role-toolbar.css → attributes/_role-toolbar.css} +2 -5
  59. package/src/semantics/{_role-tooltip.css → attributes/_role-tooltip.css} +6 -9
  60. package/src/semantics/elements/_abbr.css +5 -0
  61. package/src/semantics/elements/_address.css +7 -0
  62. package/src/semantics/elements/_article.css +3 -0
  63. package/src/semantics/elements/_aside.css +10 -0
  64. package/src/semantics/elements/_blockquote.css +18 -0
  65. package/src/semantics/elements/_body.css +5 -0
  66. package/src/semantics/{_button.css → elements/_button.css} +23 -26
  67. package/src/semantics/{_code.css → elements/_code.css} +11 -11
  68. package/src/semantics/elements/_del.css +3 -0
  69. package/src/semantics/{_details.css → elements/_details.css} +42 -43
  70. package/src/semantics/elements/_dialog.css +113 -0
  71. package/src/semantics/{_document.css → elements/_document.css} +10 -4
  72. package/src/semantics/{_embedded.css → elements/_embedded.css} +0 -3
  73. package/src/semantics/{_figure.css → elements/_figure.css} +0 -3
  74. package/src/semantics/elements/_footer.css +10 -0
  75. package/src/semantics/elements/_header.css +10 -0
  76. package/src/semantics/elements/_headings.css +24 -0
  77. package/src/semantics/elements/_hgroup.css +14 -0
  78. package/src/semantics/{_hr.css → elements/_hr.css} +1 -4
  79. package/src/semantics/{_input.css → elements/_input.css} +34 -38
  80. package/src/semantics/elements/_ins.css +4 -0
  81. package/src/semantics/elements/_links.css +61 -0
  82. package/src/semantics/elements/_lists.css +22 -0
  83. package/src/semantics/elements/_main.css +3 -0
  84. package/src/semantics/elements/_mark.css +6 -0
  85. package/src/semantics/{_nav.css → elements/_nav.css} +5 -8
  86. package/src/semantics/elements/_p.css +11 -0
  87. package/src/semantics/{_progress.css → elements/_progress.css} +5 -8
  88. package/src/semantics/elements/_section.css +4 -0
  89. package/src/semantics/elements/_small.css +3 -0
  90. package/src/semantics/elements/_strong.css +4 -0
  91. package/src/semantics/elements/_sub.css +7 -0
  92. package/src/semantics/elements/_sup.css +7 -0
  93. package/src/semantics/{_table.css → elements/_table.css} +10 -7
  94. package/src/semantics/{_type-checkbox-radio.css → elements/_type-checkbox-radio.css} +19 -22
  95. package/src/semantics/{_type-color.css → elements/_type-color.css} +2 -5
  96. package/src/semantics/{_type-date.css → elements/_type-date.css} +1 -4
  97. package/src/semantics/elements/_type-file.css +23 -0
  98. package/src/semantics/{_type-range.css → elements/_type-range.css} +11 -14
  99. package/src/semantics/elements/_type-search.css +30 -0
  100. package/src/semantics/index.css +2 -5
  101. package/src/semantics/modules.css +46 -37
  102. package/src/sizes/pico.css +21 -29
  103. package/src/utilities/_grid.css +306 -0
  104. package/src/utilities/_variables.css +27 -42
  105. package/src/utilities/borders/_border-radius.css +54 -79
  106. package/src/utilities/borders/_border-style.css +15 -5
  107. package/src/utilities/borders/_border-width.css +0 -28
  108. package/src/utilities/colors/_bg-colors.css +75 -0
  109. package/src/utilities/colors/_border-colors.css +17 -39
  110. package/src/utilities/colors/_subtle-colors.css +145 -0
  111. package/src/utilities/colors/_text-bg-colors.css +62 -0
  112. package/src/utilities/colors/_text-colors.css +32 -409
  113. package/src/utilities/effects/_focus-ring.css +33 -0
  114. package/src/utilities/effects/_shadows.css +0 -33
  115. package/src/utilities/index.css +16 -0
  116. package/src/utilities/layout/_misc.css +2 -5
  117. package/src/utilities/layout/{_grid.css → _ratio.css} +0 -19
  118. package/src/utilities/modules.css +9 -3
  119. package/src/utilities/sizing/_width.css +8 -0
  120. package/src/utilities/spacing/_gap.css +144 -144
  121. package/src/utilities/spacing/_margin.css +324 -324
  122. package/src/utilities/spacing/_padding.css +324 -324
  123. package/src/utilities/typography/_font-sizes.css +6 -6
  124. package/src/variables/_all.css +2 -20
  125. package/src/variables/_elements.css +29 -33
  126. package/src/variables/_theme.css +336 -0
  127. package/src/variants/_variables.css +24 -0
  128. package/src/variants/intent/_contrast.css +46 -0
  129. package/src/variants/intent/_danger.css +38 -0
  130. package/src/variants/intent/_info.css +38 -0
  131. package/src/variants/intent/_primary.css +38 -0
  132. package/src/variants/intent/_secondary.css +38 -0
  133. package/src/variants/intent/_success.css +38 -0
  134. package/src/variants/intent/_warning.css +38 -0
  135. package/src/variants/{_container.css → modifiers/_container.css} +3 -10
  136. package/src/variants/modifiers/_ghost.css +164 -0
  137. package/src/variants/modifiers/_striped.css +11 -0
  138. package/src/variants/modifiers/_subtle.css +133 -0
  139. package/src/variants/modules.css +12 -15
  140. package/src/_normalize.css +0 -214
  141. package/src/semantics/_article.css +0 -12
  142. package/src/semantics/_aside.css +0 -16
  143. package/src/semantics/_body.css +0 -8
  144. package/src/semantics/_dialog.css +0 -157
  145. package/src/semantics/_footer.css +0 -12
  146. package/src/semantics/_header.css +0 -12
  147. package/src/semantics/_links.css +0 -50
  148. package/src/semantics/_main.css +0 -10
  149. package/src/semantics/_role-group-search.css +0 -129
  150. package/src/semantics/_section.css +0 -9
  151. package/src/semantics/_type-file.css +0 -26
  152. package/src/semantics/_type-search.css +0 -34
  153. package/src/semantics/_typography.css +0 -146
  154. package/src/utilities/colors/_background-colors.css +0 -248
  155. package/src/variables/_colors.css +0 -366
  156. package/src/variables/_components.css +0 -318
  157. package/src/variables/_icons.css +0 -43
  158. package/src/variables/_layout.css +0 -128
  159. package/src/variants/_card.css +0 -45
  160. package/src/variants/_contained.css +0 -43
  161. package/src/variants/_contrast.css +0 -47
  162. package/src/variants/_ghost.css +0 -61
  163. package/src/variants/_panel.css +0 -18
  164. package/src/variants/_secondary.css +0 -35
  165. package/src/variants/_sidebar.css +0 -11
  166. package/src/variants/_striped.css +0 -10
package/src/utilities/_variables.css CHANGED
@@ -1,54 +1,39 @@
1
- /*!
2
- * Adapted from Bootstrap v5.3.8 utilities (https://getbootstrap.com/)
3
- * Copyright (c) 2011-2026 The Bootstrap Authors
4
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
- */
6
-
7
- /* ==========================================================================
8
- Theme-independent variables
9
- ========================================================================== */
10
-
11
1
  :root,
12
2
  :host {
3
+ --max-z-index: 1050;
4
+
5
+ /* Grid */
6
+ --grid-gutter-x: var(--spacing);
7
+ --grid-gutter-y: 0;
8
+
13
9
  /* Gradient */
14
10
  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
15
11
 
16
12
  /* Borders & radii */
17
- --border-style: solid;
18
- --border-radius-default: var(--border-radius);
19
- --border-radius-sm: var(--border-radius-default);
20
- --border-radius-lg: calc(var(--border-radius-default) * 2);
21
- --border-radius-xl: calc(var(--border-radius-default) * 4);
22
- --border-radius-xxl: calc(var(--border-radius-default) * 8);
23
13
  --border-radius-pill: 50rem;
14
+ --border-radius-1: var(--radius);
15
+ --border-radius-2: calc(var(--radius) * 2);
16
+ --border-radius-3: calc(var(--radius) * 4);
17
+ --border-radius-4: calc(var(--radius) * 6);
18
+ --border-radius-5: calc(var(--radius) * 8);
24
19
 
25
20
  /* Border-width scale */
26
- --border-width-default: var(--border-width);
27
- --border-width-0: 0;
28
- --border-width-1: var(--border-width-default);
29
- --border-width-2: calc(var(--border-width-default) * 2);
30
- --border-width-3: calc(var(--border-width-default) * 3);
31
- --border-width-4: calc(var(--border-width-default) * 4);
32
- --border-width-5: calc(var(--border-width-default) * 5);
21
+ --border-style: solid;
22
+ --border-width-1: var(--border-size);
23
+ --border-width-2: calc(var(--border-size) * 2);
24
+ --border-width-3: calc(var(--border-size) * 3);
25
+ --border-width-4: calc(var(--border-size) * 4);
26
+ --border-width-5: calc(var(--border-size) * 5);
33
27
 
34
28
  /* Spacing scale */
35
- --spacer-default: var(--spacing);
36
- --spacer-0: 0;
37
- --spacer-1: calc(var(--spacer-default) * 0.25);
38
- --spacer-2: calc(var(--spacer-default) * 0.5);
39
- --spacer-3: var(--spacer-default);
40
- --spacer-4: calc(var(--spacer-default) * 1.5);
41
- --spacer-5: calc(var(--spacer-default) * 3);
42
-
43
- /* Focus ring */
44
- --focus-ring-width: var(--outline-width);
45
- --focus-ring-opacity: 0.25;
46
-
47
- /* Auto-switching mappings (resolved at computed-value time via Semanticus CSS) */
48
- --emphasis-color: rgb(var(--color-contrast-rgb));
49
- --secondary-color: var(--color-text-muted);
50
- --border-color: var(--color-border-muted);
51
- --focus-ring-color: var(--color-primary-focus);
52
-
53
- --max-z-index: 1050;
29
+ --spacing-1: calc(var(--spacing) * 0.25);
30
+ --spacing-2: calc(var(--spacing) * 0.5);
31
+ --spacing-3: var(--spacing);
32
+ --spacing-4: calc(var(--spacing) * 1.5);
33
+ --spacing-5: calc(var(--spacing) * 3);
34
+
35
+ /* Shadows */
36
+ --shadow-sm: light-dark(0 0.0625rem 0.125rem rgba(129, 145, 181, 0.1), 0 0.0625rem 0.125rem rgba(7, 8.5, 12, 0.1));
37
+ --shadow-md: light-dark(0.0625rem 0.125rem 0.5rem rgba(129, 145, 181, 0.15), 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15));
38
+ --shadow-lg: light-dark(0.125rem 0.25rem 1rem rgba(129, 145, 181, 0.2), 0.125rem 0.25rem 1rem rgba(7, 8.5, 12, 0.2));
54
39
  }
package/src/utilities/borders/_border-radius.css CHANGED
@@ -1,33 +1,29 @@
1
1
  .rounded {
2
- border-radius: var(--border-radius) !important;
2
+ border-radius: var(--radius) !important;
3
3
  }
4
4
 
5
5
  .rounded-0 {
6
6
  border-radius: 0 !important;
7
7
  }
8
8
 
9
- .rounded-d {
10
- border-radius: var(--border-radius-default) !important;
11
- }
12
-
13
9
  .rounded-1 {
14
- border-radius: var(--border-radius-sm) !important;
10
+ border-radius: var(--border-radius-1) !important;
15
11
  }
16
12
 
17
13
  .rounded-2 {
18
- border-radius: var(--border-radius) !important;
14
+ border-radius: var(--border-radius-2) !important;
19
15
  }
20
16
 
21
17
  .rounded-3 {
22
- border-radius: var(--border-radius-lg) !important;
18
+ border-radius: var(--border-radius-3) !important;
23
19
  }
24
20
 
25
21
  .rounded-4 {
26
- border-radius: var(--border-radius-xl) !important;
22
+ border-radius: var(--border-radius-4) !important;
27
23
  }
28
24
 
29
25
  .rounded-5 {
30
- border-radius: var(--border-radius-xxl) !important;
26
+ border-radius: var(--border-radius-5) !important;
31
27
  }
32
28
 
33
29
  .rounded-circle {
@@ -39,8 +35,8 @@
39
35
  }
40
36
 
41
37
  .rounded-top {
42
- border-top-left-radius: var(--border-radius) !important;
43
- border-top-right-radius: var(--border-radius) !important;
38
+ border-top-left-radius: var(--radius) !important;
39
+ border-top-right-radius: var(--radius) !important;
44
40
  }
45
41
 
46
42
  .rounded-top-0 {
@@ -48,34 +44,29 @@
48
44
  border-top-right-radius: 0 !important;
49
45
  }
50
46
 
51
- .rounded-top-d {
52
- border-top-left-radius: var(--border-radius-default) !important;
53
- border-top-right-radius: var(--border-radius-default) !important;
54
- }
55
-
56
47
  .rounded-top-1 {
57
- border-top-left-radius: var(--border-radius-sm) !important;
58
- border-top-right-radius: var(--border-radius-sm) !important;
48
+ border-top-left-radius: var(--border-radius-1) !important;
49
+ border-top-right-radius: var(--border-radius-1) !important;
59
50
  }
60
51
 
61
52
  .rounded-top-2 {
62
- border-top-left-radius: var(--border-radius) !important;
63
- border-top-right-radius: var(--border-radius) !important;
53
+ border-top-left-radius: var(--border-radius-2) !important;
54
+ border-top-right-radius: var(--border-radius-2) !important;
64
55
  }
65
56
 
66
57
  .rounded-top-3 {
67
- border-top-left-radius: var(--border-radius-lg) !important;
68
- border-top-right-radius: var(--border-radius-lg) !important;
58
+ border-top-left-radius: var(--border-radius-3) !important;
59
+ border-top-right-radius: var(--border-radius-3) !important;
69
60
  }
70
61
 
71
62
  .rounded-top-4 {
72
- border-top-left-radius: var(--border-radius-xl) !important;
73
- border-top-right-radius: var(--border-radius-xl) !important;
63
+ border-top-left-radius: var(--border-radius-4) !important;
64
+ border-top-right-radius: var(--border-radius-4) !important;
74
65
  }
75
66
 
76
67
  .rounded-top-5 {
77
- border-top-left-radius: var(--border-radius-xxl) !important;
78
- border-top-right-radius: var(--border-radius-xxl) !important;
68
+ border-top-left-radius: var(--border-radius-5) !important;
69
+ border-top-right-radius: var(--border-radius-5) !important;
79
70
  }
80
71
 
81
72
  .rounded-top-circle {
@@ -89,8 +80,8 @@
89
80
  }
90
81
 
91
82
  .rounded-end {
92
- border-top-right-radius: var(--border-radius) !important;
93
- border-bottom-right-radius: var(--border-radius) !important;
83
+ border-top-right-radius: var(--radius) !important;
84
+ border-bottom-right-radius: var(--radius) !important;
94
85
  }
95
86
 
96
87
  .rounded-end-0 {
@@ -98,34 +89,29 @@
98
89
  border-bottom-right-radius: 0 !important;
99
90
  }
100
91
 
101
- .rounded-end-d {
102
- border-top-right-radius: var(--border-radius-default) !important;
103
- border-bottom-right-radius: var(--border-radius-default) !important;
104
- }
105
-
106
92
  .rounded-end-1 {
107
- border-top-right-radius: var(--border-radius-sm) !important;
108
- border-bottom-right-radius: var(--border-radius-sm) !important;
93
+ border-top-right-radius: var(--border-radius-1) !important;
94
+ border-bottom-right-radius: var(--border-radius-1) !important;
109
95
  }
110
96
 
111
97
  .rounded-end-2 {
112
- border-top-right-radius: var(--border-radius) !important;
113
- border-bottom-right-radius: var(--border-radius) !important;
98
+ border-top-right-radius: var(--border-radius-2) !important;
99
+ border-bottom-right-radius: var(--border-radius-2) !important;
114
100
  }
115
101
 
116
102
  .rounded-end-3 {
117
- border-top-right-radius: var(--border-radius-lg) !important;
118
- border-bottom-right-radius: var(--border-radius-lg) !important;
103
+ border-top-right-radius: var(--border-radius-3) !important;
104
+ border-bottom-right-radius: var(--border-radius-3) !important;
119
105
  }
120
106
 
121
107
  .rounded-end-4 {
122
- border-top-right-radius: var(--border-radius-xl) !important;
123
- border-bottom-right-radius: var(--border-radius-xl) !important;
108
+ border-top-right-radius: var(--border-radius-4) !important;
109
+ border-bottom-right-radius: var(--border-radius-4) !important;
124
110
  }
125
111
 
126
112
  .rounded-end-5 {
127
- border-top-right-radius: var(--border-radius-xxl) !important;
128
- border-bottom-right-radius: var(--border-radius-xxl) !important;
113
+ border-top-right-radius: var(--border-radius-5) !important;
114
+ border-bottom-right-radius: var(--border-radius-5) !important;
129
115
  }
130
116
 
131
117
  .rounded-end-circle {
@@ -139,8 +125,8 @@
139
125
  }
140
126
 
141
127
  .rounded-bottom {
142
- border-bottom-right-radius: var(--border-radius) !important;
143
- border-bottom-left-radius: var(--border-radius) !important;
128
+ border-bottom-right-radius: var(--radius) !important;
129
+ border-bottom-left-radius: var(--radius) !important;
144
130
  }
145
131
 
146
132
  .rounded-bottom-0 {
@@ -148,34 +134,29 @@
148
134
  border-bottom-left-radius: 0 !important;
149
135
  }
150
136
 
151
- .rounded-bottom-d {
152
- border-bottom-right-radius: var(--border-radius-default) !important;
153
- border-bottom-left-radius: var(--border-radius-default) !important;
154
- }
155
-
156
137
  .rounded-bottom-1 {
157
- border-bottom-right-radius: var(--border-radius-sm) !important;
158
- border-bottom-left-radius: var(--border-radius-sm) !important;
138
+ border-bottom-right-radius: var(--border-radius-1) !important;
139
+ border-bottom-left-radius: var(--border-radius-1) !important;
159
140
  }
160
141
 
161
142
  .rounded-bottom-2 {
162
- border-bottom-right-radius: var(--border-radius) !important;
163
- border-bottom-left-radius: var(--border-radius) !important;
143
+ border-bottom-right-radius: var(--border-radius-2) !important;
144
+ border-bottom-left-radius: var(--border-radius-2) !important;
164
145
  }
165
146
 
166
147
  .rounded-bottom-3 {
167
- border-bottom-right-radius: var(--border-radius-lg) !important;
168
- border-bottom-left-radius: var(--border-radius-lg) !important;
148
+ border-bottom-right-radius: var(--border-radius-3) !important;
149
+ border-bottom-left-radius: var(--border-radius-3) !important;
169
150
  }
170
151
 
171
152
  .rounded-bottom-4 {
172
- border-bottom-right-radius: var(--border-radius-xl) !important;
173
- border-bottom-left-radius: var(--border-radius-xl) !important;
153
+ border-bottom-right-radius: var(--border-radius-4) !important;
154
+ border-bottom-left-radius: var(--border-radius-4) !important;
174
155
  }
175
156
 
176
157
  .rounded-bottom-5 {
177
- border-bottom-right-radius: var(--border-radius-xxl) !important;
178
- border-bottom-left-radius: var(--border-radius-xxl) !important;
158
+ border-bottom-right-radius: var(--border-radius-5) !important;
159
+ border-bottom-left-radius: var(--border-radius-5) !important;
179
160
  }
180
161
 
181
162
  .rounded-bottom-circle {
@@ -189,8 +170,8 @@
189
170
  }
190
171
 
191
172
  .rounded-start {
192
- border-bottom-left-radius: var(--border-radius) !important;
193
- border-top-left-radius: var(--border-radius) !important;
173
+ border-bottom-left-radius: var(--radius) !important;
174
+ border-top-left-radius: var(--radius) !important;
194
175
  }
195
176
 
196
177
  .rounded-start-0 {
@@ -198,34 +179,29 @@
198
179
  border-top-left-radius: 0 !important;
199
180
  }
200
181
 
201
- .rounded-start-d {
202
- border-bottom-left-radius: var(--border-radius-default) !important;
203
- border-top-left-radius: var(--border-radius-default) !important;
204
- }
205
-
206
182
  .rounded-start-1 {
207
- border-bottom-left-radius: var(--border-radius-sm) !important;
208
- border-top-left-radius: var(--border-radius-sm) !important;
183
+ border-bottom-left-radius: var(--border-radius-1) !important;
184
+ border-top-left-radius: var(--border-radius-1) !important;
209
185
  }
210
186
 
211
187
  .rounded-start-2 {
212
- border-bottom-left-radius: var(--border-radius) !important;
213
- border-top-left-radius: var(--border-radius) !important;
188
+ border-bottom-left-radius: var(--border-radius-2) !important;
189
+ border-top-left-radius: var(--border-radius-2) !important;
214
190
  }
215
191
 
216
192
  .rounded-start-3 {
217
- border-bottom-left-radius: var(--border-radius-lg) !important;
218
- border-top-left-radius: var(--border-radius-lg) !important;
193
+ border-bottom-left-radius: var(--border-radius-3) !important;
194
+ border-top-left-radius: var(--border-radius-3) !important;
219
195
  }
220
196
 
221
197
  .rounded-start-4 {
222
- border-bottom-left-radius: var(--border-radius-xl) !important;
223
- border-top-left-radius: var(--border-radius-xl) !important;
198
+ border-bottom-left-radius: var(--border-radius-4) !important;
199
+ border-top-left-radius: var(--border-radius-4) !important;
224
200
  }
225
201
 
226
202
  .rounded-start-5 {
227
- border-bottom-left-radius: var(--border-radius-xxl) !important;
228
- border-top-left-radius: var(--border-radius-xxl) !important;
203
+ border-bottom-left-radius: var(--border-radius-5) !important;
204
+ border-top-left-radius: var(--border-radius-5) !important;
229
205
  }
230
206
 
231
207
  .rounded-start-circle {
@@ -237,4 +213,3 @@
237
213
  border-bottom-left-radius: var(--border-radius-pill) !important;
238
214
  border-top-left-radius: var(--border-radius-pill) !important;
239
215
  }
240
-
package/src/utilities/borders/_border-style.css CHANGED
@@ -1,5 +1,7 @@
1
1
  .border {
2
- border: var(--border-width) var(--border-style) var(--border-color) !important;
2
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
3
+
4
+ border: var(--border-size) var(--border-style) var(--border-color) !important;
3
5
  }
4
6
 
5
7
  .border-0 {
@@ -7,7 +9,9 @@
7
9
  }
8
10
 
9
11
  .border-top {
10
- border-top: var(--border-width) var(--border-style) var(--border-color) !important;
12
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
13
+
14
+ border-top: var(--border-size) var(--border-style) var(--border-color) !important;
11
15
  }
12
16
 
13
17
  .border-top-0 {
@@ -15,7 +19,9 @@
15
19
  }
16
20
 
17
21
  .border-end {
18
- border-right: var(--border-width) var(--border-style) var(--border-color) !important;
22
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
23
+
24
+ border-right: var(--border-size) var(--border-style) var(--border-color) !important;
19
25
  }
20
26
 
21
27
  .border-end-0 {
@@ -23,7 +29,9 @@
23
29
  }
24
30
 
25
31
  .border-bottom {
26
- border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
32
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
33
+
34
+ border-bottom: var(--border-size) var(--border-style) var(--border-color) !important;
27
35
  }
28
36
 
29
37
  .border-bottom-0 {
@@ -31,7 +39,9 @@
31
39
  }
32
40
 
33
41
  .border-start {
34
- border-left: var(--border-width) var(--border-style) var(--border-color) !important;
42
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
43
+
44
+ border-left: var(--border-size) var(--border-style) var(--border-color) !important;
35
45
  }
36
46
 
37
47
  .border-start-0 {
package/src/utilities/borders/_border-width.css CHANGED
@@ -1,11 +1,3 @@
1
- .border-0 {
2
- border-width: 0 !important;
3
- }
4
-
5
- .border-d {
6
- border-width: var(--border-width-default) !important;
7
- }
8
-
9
1
  .border-1 {
10
2
  border-width: var(--border-width-1) !important;
11
3
  }
@@ -25,23 +17,3 @@
25
17
  .border-5 {
26
18
  border-width: var(--border-width-5) !important;
27
19
  }
28
-
29
- .border-opacity-10 {
30
- --border-opacity: 0.1;
31
- }
32
-
33
- .border-opacity-25 {
34
- --border-opacity: 0.25;
35
- }
36
-
37
- .border-opacity-50 {
38
- --border-opacity: 0.5;
39
- }
40
-
41
- .border-opacity-75 {
42
- --border-opacity: 0.75;
43
- }
44
-
45
- .border-opacity-100 {
46
- --border-opacity: 1;
47
- }
package/src/utilities/colors/_bg-colors.css ADDED
@@ -0,0 +1,75 @@
1
+ .bg-transparent {
2
+ --color-background: transparent;
3
+ }
4
+
5
+ .bg-gradient {
6
+ background-image: var(--gradient) !important;
7
+ }
8
+
9
+ .bg-body {
10
+ --color-background: oklch(from var(--color-background) l c h / var(--color-background-opacity));
11
+
12
+ background-color: var(--color-background) !important;
13
+ }
14
+
15
+ .bg-primary {
16
+ --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
17
+
18
+ background-color: var(--color-background) !important;
19
+ }
20
+
21
+ .bg-secondary {
22
+ --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
23
+
24
+ background-color: var(--color-background) !important;
25
+ }
26
+
27
+ .bg-success {
28
+ --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
29
+
30
+ background-color: var(--color-background) !important;
31
+ }
32
+
33
+ .bg-info {
34
+ --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
35
+
36
+ background-color: var(--color-background) !important;
37
+ }
38
+
39
+ .bg-warning {
40
+ --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
41
+
42
+ background-color: var(--color-background) !important;
43
+ }
44
+
45
+ .bg-danger {
46
+ --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
47
+
48
+ background-color: var(--color-background) !important;
49
+ }
50
+
51
+ .bg-contrast {
52
+ --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
53
+
54
+ background-color: var(--color-background) !important;
55
+ }
56
+
57
+ .bg-opacity-10 {
58
+ --color-background-opacity: 10%;
59
+ }
60
+
61
+ .bg-opacity-25 {
62
+ --color-background-opacity: 25%;
63
+ }
64
+
65
+ .bg-opacity-50 {
66
+ --color-background-opacity: 50%;
67
+ }
68
+
69
+ .bg-opacity-75 {
70
+ --color-background-opacity: 75%;
71
+ }
72
+
73
+ .bg-opacity-100 {
74
+ --color-background-opacity: 100%;
75
+ }
package/src/utilities/colors/_border-colors.css CHANGED
@@ -1,69 +1,47 @@
1
1
  .border-primary {
2
- --border-opacity: 1;
3
-
4
- border-color: rgba(var(--color-primary-rgb), var(--border-opacity)) !important;
2
+ --color-border: var(--color-primary-fill);
5
3
  }
6
4
 
7
5
  .border-secondary {
8
- --border-opacity: 1;
9
-
10
- border-color: rgba(var(--color-secondary-rgb), var(--border-opacity)) !important;
6
+ --color-border: var(--color-secondary-fill);
11
7
  }
12
8
 
13
9
  .border-success {
14
- --border-opacity: 1;
15
-
16
- border-color: rgba(var(--color-success-rgb), var(--border-opacity)) !important;
10
+ --color-border: var(--color-success-fill);
17
11
  }
18
12
 
19
13
  .border-info {
20
- --border-opacity: 1;
21
-
22
- border-color: rgba(var(--color-info-rgb), var(--border-opacity)) !important;
14
+ --color-border: var(--color-info-fill);
23
15
  }
24
16
 
25
17
  .border-warning {
26
- --border-opacity: 1;
27
-
28
- border-color: rgba(var(--color-warning-rgb), var(--border-opacity)) !important;
18
+ --color-border: var(--color-warning-fill);
29
19
  }
30
20
 
31
21
  .border-danger {
32
- --border-opacity: 1;
33
-
34
- border-color: rgba(var(--color-danger-rgb), var(--border-opacity)) !important;
22
+ --color-border: var(--color-danger-fill);
35
23
  }
36
24
 
37
25
  .border-contrast {
38
- --border-opacity: 1;
39
-
40
- border-color: rgba(var(--color-contrast-rgb), var(--border-opacity)) !important;
41
- }
42
-
43
- .border-primary-subtle {
44
- border-color: var(--color-primary-border-subtle) !important;
45
- }
46
-
47
- .border-secondary-subtle {
48
- border-color: var(--color-secondary-border-subtle) !important;
26
+ --color-border: var(--color-contrast-fill);
49
27
  }
50
28
 
51
- .border-success-subtle {
52
- border-color: var(--color-success-border-subtle) !important;
29
+ .border-opacity-10 {
30
+ --color-border-opacity: 10%;
53
31
  }
54
32
 
55
- .border-info-subtle {
56
- border-color: var(--color-info-border-subtle) !important;
33
+ .border-opacity-25 {
34
+ --color-border-opacity: 25%;
57
35
  }
58
36
 
59
- .border-warning-subtle {
60
- border-color: var(--color-warning-border-subtle) !important;
37
+ .border-opacity-50 {
38
+ --color-border-opacity: 50%;
61
39
  }
62
40
 
63
- .border-danger-subtle {
64
- border-color: var(--color-danger-border-subtle) !important;
41
+ .border-opacity-75 {
42
+ --color-border-opacity: 75%;
65
43
  }
66
44
 
67
- .border-contrast-subtle {
68
- border-color: var(--color-contrast-border-subtle) !important;
45
+ .border-opacity-100 {
46
+ --color-border-opacity: 100%;
69
47
  }