@semanticus/semanticus-css 0.9.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 (144) 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 +24 -15
  29. package/src/components/_card.css +84 -0
  30. package/src/{variants → components}/_sidebar.css +3 -5
  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/attributes/_aria-busy.css +0 -3
  55. package/src/semantics/attributes/_hidden.css +0 -3
  56. package/src/semantics/attributes/_role-group-search.css +11 -14
  57. package/src/semantics/attributes/_role-toolbar.css +2 -5
  58. package/src/semantics/attributes/_role-tooltip.css +6 -9
  59. package/src/semantics/elements/_article.css +0 -3
  60. package/src/semantics/elements/_aside.css +1 -7
  61. package/src/semantics/elements/_blockquote.css +2 -2
  62. package/src/semantics/elements/_body.css +1 -4
  63. package/src/semantics/elements/_button.css +23 -26
  64. package/src/semantics/elements/_code.css +5 -8
  65. package/src/semantics/elements/_del.css +1 -1
  66. package/src/semantics/elements/_details.css +39 -40
  67. package/src/semantics/elements/_dialog.css +13 -17
  68. package/src/semantics/elements/_document.css +10 -4
  69. package/src/semantics/elements/_embedded.css +0 -3
  70. package/src/semantics/elements/_figure.css +0 -3
  71. package/src/semantics/elements/_footer.css +0 -3
  72. package/src/semantics/elements/_header.css +0 -3
  73. package/src/semantics/elements/_headings.css +7 -17
  74. package/src/semantics/elements/_hgroup.css +1 -1
  75. package/src/semantics/elements/_hr.css +1 -4
  76. package/src/semantics/elements/_input.css +33 -36
  77. package/src/semantics/elements/_ins.css +1 -1
  78. package/src/semantics/elements/_links.css +22 -18
  79. package/src/semantics/elements/_main.css +0 -4
  80. package/src/semantics/elements/_mark.css +2 -2
  81. package/src/semantics/elements/_nav.css +5 -8
  82. package/src/semantics/elements/_progress.css +5 -8
  83. package/src/semantics/elements/_section.css +0 -3
  84. package/src/semantics/elements/_small.css +3 -0
  85. package/src/semantics/elements/_table.css +3 -5
  86. package/src/semantics/elements/_type-checkbox-radio.css +19 -22
  87. package/src/semantics/elements/_type-color.css +2 -5
  88. package/src/semantics/elements/_type-date.css +1 -4
  89. package/src/semantics/elements/_type-file.css +7 -10
  90. package/src/semantics/elements/_type-range.css +11 -14
  91. package/src/semantics/elements/_type-search.css +6 -10
  92. package/src/semantics/index.css +2 -5
  93. package/src/semantics/modules.css +1 -7
  94. package/src/sizes/pico.css +20 -33
  95. package/src/utilities/_grid.css +306 -0
  96. package/src/utilities/_variables.css +27 -42
  97. package/src/utilities/borders/_border-radius.css +54 -79
  98. package/src/utilities/borders/_border-style.css +15 -5
  99. package/src/utilities/borders/_border-width.css +0 -28
  100. package/src/utilities/colors/_bg-colors.css +75 -0
  101. package/src/utilities/colors/_border-colors.css +17 -39
  102. package/src/utilities/colors/_subtle-colors.css +145 -0
  103. package/src/utilities/colors/_text-bg-colors.css +62 -0
  104. package/src/utilities/colors/_text-colors.css +32 -409
  105. package/src/utilities/effects/_focus-ring.css +33 -0
  106. package/src/utilities/effects/_shadows.css +0 -33
  107. package/src/utilities/index.css +16 -0
  108. package/src/utilities/layout/_misc.css +2 -5
  109. package/src/utilities/layout/{_grid.css → _ratio.css} +0 -19
  110. package/src/utilities/modules.css +9 -3
  111. package/src/utilities/sizing/_width.css +8 -0
  112. package/src/utilities/spacing/_gap.css +144 -144
  113. package/src/utilities/spacing/_margin.css +324 -324
  114. package/src/utilities/spacing/_padding.css +324 -324
  115. package/src/utilities/typography/_font-sizes.css +6 -6
  116. package/src/variables/_all.css +2 -20
  117. package/src/variables/_elements.css +29 -28
  118. package/src/variables/_theme.css +336 -0
  119. package/src/variants/_variables.css +24 -0
  120. package/src/variants/intent/_contrast.css +46 -0
  121. package/src/variants/intent/_danger.css +38 -0
  122. package/src/variants/intent/_info.css +38 -0
  123. package/src/variants/intent/_primary.css +38 -0
  124. package/src/variants/intent/_secondary.css +38 -0
  125. package/src/variants/intent/_success.css +38 -0
  126. package/src/variants/intent/_warning.css +38 -0
  127. package/src/variants/{_container.css → modifiers/_container.css} +3 -10
  128. package/src/variants/modifiers/_ghost.css +164 -0
  129. package/src/variants/modifiers/_striped.css +11 -0
  130. package/src/variants/modifiers/_subtle.css +133 -0
  131. package/src/variants/modules.css +12 -14
  132. package/src/_normalize.css +0 -214
  133. package/src/semantics/_misc.css +0 -3
  134. package/src/utilities/colors/_background-colors.css +0 -248
  135. package/src/variables/_colors.css +0 -355
  136. package/src/variables/_components.css +0 -330
  137. package/src/variables/_icons.css +0 -55
  138. package/src/variables/_layout.css +0 -123
  139. package/src/variants/_contained.css +0 -43
  140. package/src/variants/_contrast.css +0 -61
  141. package/src/variants/_ghost.css +0 -68
  142. package/src/variants/_pane-panel-card.css +0 -54
  143. package/src/variants/_secondary.css +0 -48
  144. package/src/variants/_striped.css +0 -10
@@ -1,214 +0,0 @@
1
- /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
-
3
- /*
4
- Document
5
- ========
6
- */
7
-
8
- /**
9
- Use a better box model (opinionated).
10
- */
11
-
12
- *,
13
- ::before,
14
- ::after {
15
- box-sizing: border-box;
16
- }
17
-
18
- html {
19
- /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
20
- font-family:
21
- system-ui,
22
- 'Segoe UI',
23
- Roboto,
24
- Helvetica,
25
- Arial,
26
- sans-serif,
27
- 'Apple Color Emoji',
28
- 'Segoe UI Emoji';
29
- line-height: 1.15; /* 1. Correct the line height in all browsers. */
30
- -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
31
- tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
32
- }
33
-
34
- /*
35
- Sections
36
- ========
37
- */
38
-
39
- body {
40
- margin: 0; /* Remove the margin in all browsers. */
41
- }
42
-
43
- /*
44
- Text-level semantics
45
- ====================
46
- */
47
-
48
- /**
49
- Add the correct font weight in Chrome and Safari.
50
- */
51
-
52
- b,
53
- strong {
54
- font-weight: bolder;
55
- }
56
-
57
- /**
58
- 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
59
- 2. Correct the odd 'em' font sizing in all browsers.
60
- */
61
-
62
- code,
63
- kbd,
64
- samp,
65
- pre {
66
- font-family:
67
- ui-monospace,
68
- SFMono-Regular,
69
- Consolas,
70
- 'Liberation Mono',
71
- Menlo,
72
- monospace; /* 1 */
73
-
74
- font-size: 1em; /* 2 */
75
- }
76
-
77
- /**
78
- Add the correct font size in all browsers.
79
- */
80
-
81
- small {
82
- font-size: 80%;
83
- }
84
-
85
- /**
86
- Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
87
- */
88
-
89
- sub,
90
- sup {
91
- font-size: 75%;
92
- line-height: 0;
93
- position: relative;
94
- vertical-align: baseline;
95
- }
96
-
97
- sub {
98
- bottom: -0.25em;
99
- }
100
-
101
- sup {
102
- top: -0.5em;
103
- }
104
-
105
- /*
106
- Tabular data
107
- ============
108
- */
109
-
110
- /**
111
- Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
112
- */
113
-
114
- table {
115
- border-color: currentcolor;
116
- }
117
-
118
- /*
119
- Forms
120
- =====
121
- */
122
-
123
- /**
124
- 1. Change the font styles in all browsers.
125
- 2. Remove the margin in Firefox and Safari.
126
- */
127
-
128
- button,
129
- input,
130
- optgroup,
131
- select,
132
- textarea {
133
- font-family: inherit; /* 1 */
134
- font-size: 100%; /* 1 */
135
- line-height: 1.15; /* 1 */
136
- margin: 0; /* 2 */
137
- }
138
-
139
- /**
140
- Correct the inability to style clickable types in iOS and Safari.
141
- */
142
-
143
- button,
144
- [type='button'],
145
- [type='reset'],
146
- [type='submit'] {
147
- -webkit-appearance: button;
148
- }
149
-
150
- /**
151
- Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
152
- */
153
-
154
- legend {
155
- padding: 0;
156
- }
157
-
158
- /**
159
- Add the correct vertical alignment in Chrome and Firefox.
160
- */
161
-
162
- progress {
163
- vertical-align: baseline;
164
- }
165
-
166
- /**
167
- Correct the cursor style of increment and decrement buttons in Safari.
168
- */
169
-
170
- ::-webkit-inner-spin-button,
171
- ::-webkit-outer-spin-button {
172
- height: auto;
173
- }
174
-
175
- /**
176
- 1. Correct the odd appearance in Chrome and Safari.
177
- 2. Correct the outline style in Safari.
178
- */
179
-
180
- [type='search'] {
181
- -webkit-appearance: textfield; /* 1 */
182
- outline-offset: -2px; /* 2 */
183
- }
184
-
185
- /**
186
- Remove the inner padding in Chrome and Safari on macOS.
187
- */
188
-
189
- ::-webkit-search-decoration {
190
- -webkit-appearance: none;
191
- }
192
-
193
- /**
194
- 1. Correct the inability to style clickable types in iOS and Safari.
195
- 2. Change font properties to 'inherit' in Safari.
196
- */
197
-
198
- ::-webkit-file-upload-button {
199
- -webkit-appearance: button; /* 1 */
200
- font: inherit; /* 2 */
201
- }
202
-
203
- /*
204
- Interactive
205
- ===========
206
- */
207
-
208
- /*
209
- Add the correct display in Chrome and Safari.
210
- */
211
-
212
- summary {
213
- display: list-item;
214
- }
@@ -1,3 +0,0 @@
1
- ::selection {
2
- background-color: var(--color-text-selection);
3
- }
@@ -1,248 +0,0 @@
1
- .text-bg-primary {
2
- --color-text: var(--color-primary-inverse) !important;
3
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
4
-
5
- color: var(--color-text) !important;
6
- background-color: rgba(var(--color-primary-rgb), var(--bg-opacity, 1)) !important;
7
- }
8
-
9
- .text-bg-secondary {
10
- --color-text: var(--color-secondary-inverse) !important;
11
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
12
-
13
- color: var(--color-text) !important;
14
- background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity, 1)) !important;
15
- }
16
-
17
- .text-bg-success {
18
- --color-text: var(--color-success-inverse) !important;
19
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
20
-
21
- color: var(--color-text) !important;
22
- background-color: rgba(var(--color-success-rgb), var(--bg-opacity, 1)) !important;
23
- }
24
-
25
- .text-bg-info {
26
- --color-text: var(--color-info-inverse) !important;
27
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
28
-
29
- color: var(--color-text) !important;
30
- background-color: rgba(var(--color-info-rgb), var(--bg-opacity, 1)) !important;
31
- }
32
-
33
- .text-bg-warning {
34
- --color-text: var(--color-warning-inverse) !important;
35
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
36
-
37
- color: var(--color-text) !important;
38
- background-color: rgba(var(--color-warning-rgb), var(--bg-opacity, 1)) !important;
39
- }
40
-
41
- .text-bg-danger {
42
- --color-text: var(--color-danger-inverse) !important;
43
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
44
-
45
- color: var(--color-text) !important;
46
- background-color: rgba(var(--color-danger-rgb), var(--bg-opacity, 1)) !important;
47
- }
48
-
49
- .text-bg-contrast {
50
- --color-text: var(--color-contrast-inverse) !important;
51
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
52
-
53
- color: var(--color-text) !important;
54
- background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity, 1)) !important;
55
- }
56
-
57
- .text-bg-primary-subtle {
58
- --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
59
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
60
-
61
- color: rgb(var(--color-primary-emphasis-rgb)) !important;
62
- background-color: var(--color-primary-bg-subtle) !important;
63
- }
64
-
65
- .text-bg-secondary-subtle {
66
- --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
67
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
68
-
69
- color: rgb(var(--color-secondary-emphasis-rgb)) !important;
70
- background-color: var(--color-secondary-bg-subtle) !important;
71
- }
72
-
73
- .text-bg-success-subtle {
74
- --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
75
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
76
-
77
- color: rgb(var(--color-success-emphasis-rgb)) !important;
78
- background-color: var(--color-success-bg-subtle) !important;
79
- }
80
-
81
- .text-bg-info-subtle {
82
- --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
83
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
84
-
85
- color: rgb(var(--color-info-emphasis-rgb)) !important;
86
- background-color: var(--color-info-bg-subtle) !important;
87
- }
88
-
89
- .text-bg-warning-subtle {
90
- --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
91
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
92
-
93
- color: rgb(var(--color-warning-emphasis-rgb)) !important;
94
- background-color: var(--color-warning-bg-subtle) !important;
95
- }
96
-
97
- .text-bg-danger-subtle {
98
- --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
99
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
100
-
101
- color: rgb(var(--color-danger-emphasis-rgb)) !important;
102
- background-color: var(--color-danger-bg-subtle) !important;
103
- }
104
-
105
- .text-bg-contrast-subtle {
106
- --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
107
- --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
108
-
109
- color: rgb(var(--color-contrast-emphasis-rgb)) !important;
110
- background-color: var(--color-contrast-bg-subtle) !important;
111
- }
112
-
113
- .bg-primary {
114
- --bg-opacity: 1;
115
-
116
- background-color: rgba(var(--color-primary-rgb), var(--bg-opacity)) !important;
117
- }
118
-
119
- .bg-secondary {
120
- --bg-opacity: 1;
121
-
122
- background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity)) !important;
123
- }
124
-
125
- .bg-success {
126
- --bg-opacity: 1;
127
-
128
- background-color: rgba(var(--color-success-rgb), var(--bg-opacity)) !important;
129
- }
130
-
131
- .bg-info {
132
- --bg-opacity: 1;
133
-
134
- background-color: rgba(var(--color-info-rgb), var(--bg-opacity)) !important;
135
- }
136
-
137
- .bg-warning {
138
- --bg-opacity: 1;
139
-
140
- background-color: rgba(var(--color-warning-rgb), var(--bg-opacity)) !important;
141
- }
142
-
143
- .bg-danger {
144
- --bg-opacity: 1;
145
-
146
- background-color: rgba(var(--color-danger-rgb), var(--bg-opacity)) !important;
147
- }
148
-
149
- .bg-contrast {
150
- --bg-opacity: 1;
151
-
152
- background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity)) !important;
153
- }
154
-
155
- .bg-body {
156
- --bg-opacity: 1;
157
-
158
- background-color: rgba(var(--color-body-bg-rgb), var(--bg-opacity)) !important;
159
- }
160
-
161
- .bg-transparent {
162
- --bg-opacity: 1;
163
-
164
- background-color: transparent !important;
165
- }
166
-
167
- .bg-body-secondary {
168
- --bg-opacity: 1;
169
-
170
- background-color: rgba(var(--color-secondary-bg-rgb), var(--bg-opacity)) !important;
171
- }
172
-
173
- .bg-opacity-10 {
174
- --bg-opacity: 0.1;
175
- }
176
-
177
- .bg-opacity-25 {
178
- --bg-opacity: 0.25;
179
- }
180
-
181
- .bg-opacity-50 {
182
- --bg-opacity: 0.5;
183
- }
184
-
185
- .bg-opacity-75 {
186
- --bg-opacity: 0.75;
187
- }
188
-
189
- .bg-opacity-100 {
190
- --bg-opacity: 1;
191
- }
192
-
193
- .bg-primary-subtle {
194
- background-color: var(--color-primary-bg-subtle) !important;
195
- }
196
-
197
- .bg-secondary-subtle {
198
- background-color: var(--color-secondary-bg-subtle) !important;
199
- }
200
-
201
- .bg-success-subtle {
202
- background-color: var(--color-success-bg-subtle) !important;
203
- }
204
-
205
- .bg-info-subtle {
206
- background-color: var(--color-info-bg-subtle) !important;
207
- }
208
-
209
- .bg-warning-subtle {
210
- background-color: var(--color-warning-bg-subtle) !important;
211
- }
212
-
213
- .bg-danger-subtle {
214
- background-color: var(--color-danger-bg-subtle) !important;
215
- }
216
-
217
- .bg-contrast-subtle {
218
- background-color: var(--color-contrast-bg-subtle) !important;
219
- }
220
-
221
- .bg-gradient {
222
- background-image: var(--gradient) !important;
223
- }
224
-
225
- /* Dark mode: headings should be lighter than inverse text (mix in white) */
226
- @media (prefers-color-scheme: dark) {
227
- .text-bg-primary,
228
- .text-bg-secondary,
229
- .text-bg-success,
230
- .text-bg-info,
231
- .text-bg-warning,
232
- .text-bg-danger,
233
- .text-bg-contrast {
234
- --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
235
- }
236
- }
237
-
238
- [data-theme="dark"] {
239
- .text-bg-primary,
240
- .text-bg-secondary,
241
- .text-bg-success,
242
- .text-bg-info,
243
- .text-bg-warning,
244
- .text-bg-danger,
245
- .text-bg-contrast {
246
- --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
247
- }
248
- }