@semanticus/semanticus-css 1.0.0 → 1.2.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.
- package/README.md +10 -10
- package/dist/semanticus-no-utilities.css +1 -1
- package/dist/semanticus-semantics.css +1 -1
- package/dist/semanticus-utilities.css +1 -1
- package/dist/semanticus.css +2 -2
- package/package.json +2 -1
- package/src/components/_card-list.css +60 -0
- package/src/components/_card.css +8 -48
- package/src/components/_icons.css +59 -0
- package/src/components/modules.css +3 -0
- package/src/index.css +1 -1
- package/src/semantics/attributes/_aria-disabled.css +25 -0
- package/src/semantics/attributes/_role-group.css +125 -0
- package/src/semantics/attributes/_role-search.css +14 -0
- package/src/semantics/attributes/_role-status-alert.css +122 -0
- package/src/semantics/attributes/_role-tooltip.css +1 -1
- package/src/semantics/elements/_button.css +2 -5
- package/src/semantics/elements/_dialog.css +7 -27
- package/src/semantics/elements/_nav.css +5 -1
- package/src/semantics/modules.css +4 -1
- package/src/utilities/effects/_shadows.css +4 -0
- package/src/variables/_theme.css +6 -6
- package/src/variants/intent/_contrast.css +15 -19
- package/src/variants/intent/_danger.css +14 -18
- package/src/variants/intent/_info.css +14 -18
- package/src/variants/intent/_primary.css +14 -18
- package/src/variants/intent/_secondary.css +14 -18
- package/src/variants/intent/_success.css +14 -18
- package/src/variants/intent/_warning.css +14 -18
- package/src/variants/modifiers/_ghost.css +3 -3
- package/src/variants/modifiers/_striped.css +8 -8
- package/src/variants/modifiers/_subtle.css +2 -2
- package/src/variants/modules.css +0 -1
- package/src/semantics/attributes/_role-group-search.css +0 -137
- /package/src/{variants/modifiers → components}/_container.css +0 -0
package/README.md
CHANGED
|
@@ -32,16 +32,16 @@ Enable authors to write clean, semantic HTML that looks great by default, guide
|
|
|
32
32
|
### Option 1: CDN (quick start)
|
|
33
33
|
|
|
34
34
|
```html
|
|
35
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@
|
|
35
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@1.2.0/dist/semanticus.css">
|
|
36
36
|
|
|
37
37
|
<!-- costumize it with a palette or size variation if needed -->
|
|
38
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@
|
|
39
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@
|
|
38
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@1.2.0/dist/semanticus.palette.blue.css">
|
|
39
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@1.2.0/dist/semanticus.size.pico.css">
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
### Option 2: Install manually
|
|
43
43
|
|
|
44
|
-
Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-
|
|
44
|
+
Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-1.2.0.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
|
|
45
45
|
|
|
46
46
|
```html
|
|
47
47
|
<link rel="stylesheet" href="/css/semanticus.css">
|
|
@@ -70,7 +70,7 @@ import '@semanticus/semanticus-css/sizes/pico';
|
|
|
70
70
|
|
|
71
71
|
> **Note:** The `import` syntax requires a bundler that supports CSS imports (e.g., Vite, Webpack, Rollup, or Parcel).
|
|
72
72
|
|
|
73
|
-
Check out the [Palettes
|
|
73
|
+
Check out the [Palettes](https://semanticus.design/guide/palettes.html) and [Sizes](https://semanticus.design/guide/sizes.html) guides for more options.
|
|
74
74
|
|
|
75
75
|
## How It Works
|
|
76
76
|
|
|
@@ -147,7 +147,7 @@ Here's an off-to-a-great-start HTML template using semantic styling, its variant
|
|
|
147
147
|
<meta charset="UTF-8">
|
|
148
148
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
149
149
|
<meta name="color-scheme" content="light dark">
|
|
150
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@
|
|
150
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@1.2.0/dist/semanticus.css">
|
|
151
151
|
</head>
|
|
152
152
|
<body class="vstack">
|
|
153
153
|
<header class="container">
|
|
@@ -189,7 +189,7 @@ You can override its variables to create your own themes and styles. For example
|
|
|
189
189
|
}
|
|
190
190
|
```
|
|
191
191
|
|
|
192
|
-
Check out the [CSS Variables](https://semanticus.design/guide/css-variables.html) guide for more details or the [
|
|
192
|
+
Check out the [CSS Variables](https://semanticus.design/guide/css-variables.html) guide for more details or the [Palettes](https://semanticus.design/guide/palettes.html) and [Sizes](https://semanticus.design/guide/sizes.html) builders to help you create your own custom styles.
|
|
193
193
|
|
|
194
194
|
## Browser Support
|
|
195
195
|
|
|
@@ -216,13 +216,13 @@ Check out this [How to setup the project](docs/about/contributing.md#how-to-setu
|
|
|
216
216
|
| Bundle | Gzip |
|
|
217
217
|
| --- | --- |
|
|
218
218
|
| Pico (semantics only) | 10.2 KB |
|
|
219
|
-
| Semanticus (semantics only) | 11.
|
|
219
|
+
| Semanticus (semantics only) | 11.4 KB |
|
|
220
220
|
| Pico (semantics + classes) | 11.5 KB |
|
|
221
|
-
| Semanticus (semantics + components + variants) | 13.
|
|
221
|
+
| Semanticus (semantics + components + variants) | 13.6 KB |
|
|
222
222
|
| Bootstrap (utilities + grid) | 16.3 KB |
|
|
223
223
|
| Semanticus (utilities + grid) | 10.5 KB |
|
|
224
224
|
| Bootstrap (full bundle) | 53.8 KB |
|
|
225
|
-
| Semanticus (full bundle) | 23.
|
|
225
|
+
| Semanticus (full bundle) | 23.7 KB |
|
|
226
226
|
|
|
227
227
|
## License
|
|
228
228
|
|