@semanticus/semanticus-css 0.7.0 → 0.8.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 (84) hide show
  1. package/README.md +8 -10
  2. package/dist/semanticus-semantics.css +11 -1
  3. package/dist/semanticus.css +14 -2
  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 +3 -7
  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/_aside.css +2 -2
  46. package/src/semantics/_details.css +1 -1
  47. package/src/semantics/_input.css +2 -2
  48. package/src/semantics/_links.css +1 -1
  49. package/src/semantics/_progress.css +1 -1
  50. package/src/semantics/_typography.css +3 -3
  51. package/src/semantics/index.css +9 -4
  52. package/src/sizes/pico.css +95 -0
  53. package/src/utilities/_variables.css +19 -214
  54. package/src/utilities/borders/_border-radius.css +24 -0
  55. package/src/utilities/borders/_border-width.css +8 -0
  56. package/src/utilities/colors/_background-colors.css +51 -44
  57. package/src/utilities/colors/_border-colors.css +14 -14
  58. package/src/utilities/colors/_text-colors.css +80 -80
  59. package/src/utilities/effects/_shadows.css +10 -10
  60. package/src/utilities/layout/_flexbox.css +16 -1
  61. package/src/utilities/layout/_misc.css +2 -2
  62. package/src/utilities/modules.css +6 -0
  63. package/src/utilities/spacing/_gap.css +63 -0
  64. package/src/utilities/spacing/_margin.css +145 -0
  65. package/src/utilities/spacing/_padding.css +145 -0
  66. package/src/utilities/typography/_font-sizes.css +0 -15
  67. package/src/variables/_all.css +15 -739
  68. package/src/variables/_breakpoints.css +10 -0
  69. package/src/variables/_colors.css +366 -0
  70. package/src/variables/_components.css +318 -0
  71. package/src/variables/_elements.css +199 -0
  72. package/src/variables/_icons.css +43 -0
  73. package/src/variables/{_shared.css → _layout.css} +71 -64
  74. package/src/variants/_contrast.css +1 -1
  75. package/src/variants/_ghost.css +8 -8
  76. package/src/variants/_secondary.css +1 -1
  77. package/src/variants/modules.css +0 -1
  78. package/dist/semanticus-utilities.css +0 -7
  79. package/dist/semanticus-variants.css +0 -1
  80. package/dist/semanticus.size.slim.css +0 -1
  81. package/src/sizes/slim.css +0 -41
  82. package/src/utilities/index.css +0 -14
  83. package/src/variants/_flow.css +0 -15
  84. package/src/variants/index.css +0 -9
package/src/utilities/borders/_border-width.css CHANGED
@@ -1,3 +1,11 @@
1
+ .border-0 {
2
+ border-width: 0 !important;
3
+ }
4
+
5
+ .border-d {
6
+ border-width: var(--border-width-default) !important;
7
+ }
8
+
1
9
  .border-1 {
2
10
  border-width: var(--border-width-1) !important;
3
11
  }
package/src/utilities/colors/_background-colors.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
4
4
 
5
5
  color: var(--color-text) !important;
6
- background-color: rgba(var(--primary-rgb), var(--bg-opacity, 1)) !important;
6
+ background-color: rgba(var(--color-primary-rgb), var(--bg-opacity, 1)) !important;
7
7
  }
8
8
 
9
9
  .text-bg-secondary {
@@ -11,7 +11,7 @@
11
11
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
12
12
 
13
13
  color: var(--color-text) !important;
14
- background-color: rgba(var(--secondary-rgb), var(--bg-opacity, 1)) !important;
14
+ background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity, 1)) !important;
15
15
  }
16
16
 
17
17
  .text-bg-success {
@@ -19,7 +19,7 @@
19
19
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
20
20
 
21
21
  color: var(--color-text) !important;
22
- background-color: rgba(var(--success-rgb), var(--bg-opacity, 1)) !important;
22
+ background-color: rgba(var(--color-success-rgb), var(--bg-opacity, 1)) !important;
23
23
  }
24
24
 
25
25
  .text-bg-info {
@@ -27,7 +27,7 @@
27
27
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
28
28
 
29
29
  color: var(--color-text) !important;
30
- background-color: rgba(var(--info-rgb), var(--bg-opacity, 1)) !important;
30
+ background-color: rgba(var(--color-info-rgb), var(--bg-opacity, 1)) !important;
31
31
  }
32
32
 
33
33
  .text-bg-warning {
@@ -35,7 +35,7 @@
35
35
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
36
36
 
37
37
  color: var(--color-text) !important;
38
- background-color: rgba(var(--warning-rgb), var(--bg-opacity, 1)) !important;
38
+ background-color: rgba(var(--color-warning-rgb), var(--bg-opacity, 1)) !important;
39
39
  }
40
40
 
41
41
  .text-bg-danger {
@@ -43,7 +43,7 @@
43
43
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
44
44
 
45
45
  color: var(--color-text) !important;
46
- background-color: rgba(var(--danger-rgb), var(--bg-opacity, 1)) !important;
46
+ background-color: rgba(var(--color-danger-rgb), var(--bg-opacity, 1)) !important;
47
47
  }
48
48
 
49
49
  .text-bg-contrast {
@@ -51,104 +51,111 @@
51
51
  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
52
52
 
53
53
  color: var(--color-text) !important;
54
- background-color: rgba(var(--contrast-rgb), var(--bg-opacity, 1)) !important;
54
+ background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity, 1)) !important;
55
55
  }
56
56
 
57
57
  .text-bg-primary-subtle {
58
- --color-text: var(--primary-text-emphasis) !important;
58
+ --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
59
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
59
60
 
60
- color: var(--primary-text-emphasis) !important;
61
- background-color: var(--primary-bg-subtle) !important;
61
+ color: rgb(var(--color-primary-emphasis-rgb)) !important;
62
+ background-color: var(--color-primary-bg-subtle) !important;
62
63
  }
63
64
 
64
65
  .text-bg-secondary-subtle {
65
- --color-text: var(--secondary-text-emphasis) !important;
66
+ --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
67
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
66
68
 
67
- color: var(--secondary-text-emphasis) !important;
68
- background-color: var(--secondary-bg-subtle) !important;
69
+ color: rgb(var(--color-secondary-emphasis-rgb)) !important;
70
+ background-color: var(--color-secondary-bg-subtle) !important;
69
71
  }
70
72
 
71
73
  .text-bg-success-subtle {
72
- --color-text: var(--success-text-emphasis) !important;
74
+ --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
75
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
73
76
 
74
- color: var(--success-text-emphasis) !important;
75
- background-color: var(--success-bg-subtle) !important;
77
+ color: rgb(var(--color-success-emphasis-rgb)) !important;
78
+ background-color: var(--color-success-bg-subtle) !important;
76
79
  }
77
80
 
78
81
  .text-bg-info-subtle {
79
- --color-text: var(--info-text-emphasis) !important;
82
+ --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
83
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
80
84
 
81
- color: var(--info-text-emphasis) !important;
82
- background-color: var(--info-bg-subtle) !important;
85
+ color: rgb(var(--color-info-emphasis-rgb)) !important;
86
+ background-color: var(--color-info-bg-subtle) !important;
83
87
  }
84
88
 
85
89
  .text-bg-warning-subtle {
86
- --color-text: var(--warning-text-emphasis) !important;
90
+ --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
91
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
87
92
 
88
- color: var(--warning-text-emphasis) !important;
89
- background-color: var(--warning-bg-subtle) !important;
93
+ color: rgb(var(--color-warning-emphasis-rgb)) !important;
94
+ background-color: var(--color-warning-bg-subtle) !important;
90
95
  }
91
96
 
92
97
  .text-bg-danger-subtle {
93
- --color-text: var(--danger-text-emphasis) !important;
98
+ --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
99
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
94
100
 
95
- color: var(--danger-text-emphasis) !important;
96
- background-color: var(--danger-bg-subtle) !important;
101
+ color: rgb(var(--color-danger-emphasis-rgb)) !important;
102
+ background-color: var(--color-danger-bg-subtle) !important;
97
103
  }
98
104
 
99
105
  .text-bg-contrast-subtle {
100
- --color-text: var(--contrast-text-emphasis) !important;
106
+ --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
107
+ --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
101
108
 
102
- color: var(--contrast-text-emphasis) !important;
103
- background-color: var(--contrast-bg-subtle) !important;
109
+ color: rgb(var(--color-contrast-emphasis-rgb)) !important;
110
+ background-color: var(--color-contrast-bg-subtle) !important;
104
111
  }
105
112
 
106
113
  .bg-primary {
107
114
  --bg-opacity: 1;
108
115
 
109
- background-color: rgba(var(--primary-rgb), var(--bg-opacity)) !important;
116
+ background-color: rgba(var(--color-primary-rgb), var(--bg-opacity)) !important;
110
117
  }
111
118
 
112
119
  .bg-secondary {
113
120
  --bg-opacity: 1;
114
121
 
115
- background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) !important;
122
+ background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity)) !important;
116
123
  }
117
124
 
118
125
  .bg-success {
119
126
  --bg-opacity: 1;
120
127
 
121
- background-color: rgba(var(--success-rgb), var(--bg-opacity)) !important;
128
+ background-color: rgba(var(--color-success-rgb), var(--bg-opacity)) !important;
122
129
  }
123
130
 
124
131
  .bg-info {
125
132
  --bg-opacity: 1;
126
133
 
127
- background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important;
134
+ background-color: rgba(var(--color-info-rgb), var(--bg-opacity)) !important;
128
135
  }
129
136
 
130
137
  .bg-warning {
131
138
  --bg-opacity: 1;
132
139
 
133
- background-color: rgba(var(--warning-rgb), var(--bg-opacity)) !important;
140
+ background-color: rgba(var(--color-warning-rgb), var(--bg-opacity)) !important;
134
141
  }
135
142
 
136
143
  .bg-danger {
137
144
  --bg-opacity: 1;
138
145
 
139
- background-color: rgba(var(--danger-rgb), var(--bg-opacity)) !important;
146
+ background-color: rgba(var(--color-danger-rgb), var(--bg-opacity)) !important;
140
147
  }
141
148
 
142
149
  .bg-contrast {
143
150
  --bg-opacity: 1;
144
151
 
145
- background-color: rgba(var(--contrast-rgb), var(--bg-opacity)) !important;
152
+ background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity)) !important;
146
153
  }
147
154
 
148
155
  .bg-body {
149
156
  --bg-opacity: 1;
150
157
 
151
- background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) !important;
158
+ background-color: rgba(var(--color-body-bg-rgb), var(--bg-opacity)) !important;
152
159
  }
153
160
 
154
161
  .bg-transparent {
@@ -160,7 +167,7 @@
160
167
  .bg-body-secondary {
161
168
  --bg-opacity: 1;
162
169
 
163
- background-color: rgba(var(--secondary-bg-rgb), var(--bg-opacity)) !important;
170
+ background-color: rgba(var(--color-secondary-bg-rgb), var(--bg-opacity)) !important;
164
171
  }
165
172
 
166
173
  .bg-opacity-10 {
@@ -184,31 +191,31 @@
184
191
  }
185
192
 
186
193
  .bg-primary-subtle {
187
- background-color: var(--primary-bg-subtle) !important;
194
+ background-color: var(--color-primary-bg-subtle) !important;
188
195
  }
189
196
 
190
197
  .bg-secondary-subtle {
191
- background-color: var(--secondary-bg-subtle) !important;
198
+ background-color: var(--color-secondary-bg-subtle) !important;
192
199
  }
193
200
 
194
201
  .bg-success-subtle {
195
- background-color: var(--success-bg-subtle) !important;
202
+ background-color: var(--color-success-bg-subtle) !important;
196
203
  }
197
204
 
198
205
  .bg-info-subtle {
199
- background-color: var(--info-bg-subtle) !important;
206
+ background-color: var(--color-info-bg-subtle) !important;
200
207
  }
201
208
 
202
209
  .bg-warning-subtle {
203
- background-color: var(--warning-bg-subtle) !important;
210
+ background-color: var(--color-warning-bg-subtle) !important;
204
211
  }
205
212
 
206
213
  .bg-danger-subtle {
207
- background-color: var(--danger-bg-subtle) !important;
214
+ background-color: var(--color-danger-bg-subtle) !important;
208
215
  }
209
216
 
210
217
  .bg-contrast-subtle {
211
- background-color: var(--contrast-bg-subtle) !important;
218
+ background-color: var(--color-contrast-bg-subtle) !important;
212
219
  }
213
220
 
214
221
  .bg-gradient {
package/src/utilities/colors/_border-colors.css CHANGED
@@ -1,69 +1,69 @@
1
1
  .border-primary {
2
2
  --border-opacity: 1;
3
3
 
4
- border-color: rgba(var(--primary-rgb), var(--border-opacity)) !important;
4
+ border-color: rgba(var(--color-primary-rgb), var(--border-opacity)) !important;
5
5
  }
6
6
 
7
7
  .border-secondary {
8
8
  --border-opacity: 1;
9
9
 
10
- border-color: rgba(var(--secondary-rgb), var(--border-opacity)) !important;
10
+ border-color: rgba(var(--color-secondary-rgb), var(--border-opacity)) !important;
11
11
  }
12
12
 
13
13
  .border-success {
14
14
  --border-opacity: 1;
15
15
 
16
- border-color: rgba(var(--success-rgb), var(--border-opacity)) !important;
16
+ border-color: rgba(var(--color-success-rgb), var(--border-opacity)) !important;
17
17
  }
18
18
 
19
19
  .border-info {
20
20
  --border-opacity: 1;
21
21
 
22
- border-color: rgba(var(--info-rgb), var(--border-opacity)) !important;
22
+ border-color: rgba(var(--color-info-rgb), var(--border-opacity)) !important;
23
23
  }
24
24
 
25
25
  .border-warning {
26
26
  --border-opacity: 1;
27
27
 
28
- border-color: rgba(var(--warning-rgb), var(--border-opacity)) !important;
28
+ border-color: rgba(var(--color-warning-rgb), var(--border-opacity)) !important;
29
29
  }
30
30
 
31
31
  .border-danger {
32
32
  --border-opacity: 1;
33
33
 
34
- border-color: rgba(var(--danger-rgb), var(--border-opacity)) !important;
34
+ border-color: rgba(var(--color-danger-rgb), var(--border-opacity)) !important;
35
35
  }
36
36
 
37
37
  .border-contrast {
38
38
  --border-opacity: 1;
39
39
 
40
- border-color: rgba(var(--contrast-rgb), var(--border-opacity)) !important;
40
+ border-color: rgba(var(--color-contrast-rgb), var(--border-opacity)) !important;
41
41
  }
42
42
 
43
43
  .border-primary-subtle {
44
- border-color: var(--primary-border-subtle) !important;
44
+ border-color: var(--color-primary-border-subtle) !important;
45
45
  }
46
46
 
47
47
  .border-secondary-subtle {
48
- border-color: var(--secondary-border-subtle) !important;
48
+ border-color: var(--color-secondary-border-subtle) !important;
49
49
  }
50
50
 
51
51
  .border-success-subtle {
52
- border-color: var(--success-border-subtle) !important;
52
+ border-color: var(--color-success-border-subtle) !important;
53
53
  }
54
54
 
55
55
  .border-info-subtle {
56
- border-color: var(--info-border-subtle) !important;
56
+ border-color: var(--color-info-border-subtle) !important;
57
57
  }
58
58
 
59
59
  .border-warning-subtle {
60
- border-color: var(--warning-border-subtle) !important;
60
+ border-color: var(--color-warning-border-subtle) !important;
61
61
  }
62
62
 
63
63
  .border-danger-subtle {
64
- border-color: var(--danger-border-subtle) !important;
64
+ border-color: var(--color-danger-border-subtle) !important;
65
65
  }
66
66
 
67
67
  .border-contrast-subtle {
68
- border-color: var(--contrast-border-subtle) !important;
68
+ border-color: var(--color-contrast-border-subtle) !important;
69
69
  }