@semanticus/semanticus-css 1.1.0 → 2.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 (33) hide show
  1. package/README.md +19 -16
  2. package/dist/semanticus-no-utilities.css +16 -1
  3. package/dist/semanticus-semantics.css +1 -1
  4. package/dist/semanticus-utilities.css +1 -1
  5. package/dist/semanticus.css +17 -2
  6. package/package.json +3 -1
  7. package/src/components/_card.css +65 -4
  8. package/src/components/_content-grid.css +95 -0
  9. package/src/{semantics/attributes/_role-toolbar.css → components/_grid.css} +1 -1
  10. package/src/components/_icons.css +2 -3
  11. package/src/components/modules.css +2 -1
  12. package/src/index.css +1 -1
  13. package/src/semantics/attributes/_popover.css +0 -4
  14. package/src/semantics/attributes/_role-group.css +126 -0
  15. package/src/semantics/attributes/_role-search.css +14 -0
  16. package/src/semantics/attributes/_role-status-alert.css +36 -2
  17. package/src/semantics/elements/_details.css +0 -1
  18. package/src/semantics/elements/_nav.css +5 -1
  19. package/src/semantics/modules.css +2 -2
  20. package/src/utilities/effects/_shadows.css +4 -0
  21. package/src/variables/_theme.css +1 -1
  22. package/src/variants/intent/_contrast.css +15 -20
  23. package/src/variants/intent/_danger.css +14 -19
  24. package/src/variants/intent/_info.css +14 -19
  25. package/src/variants/intent/_primary.css +14 -19
  26. package/src/variants/intent/_secondary.css +14 -19
  27. package/src/variants/intent/_success.css +14 -19
  28. package/src/variants/intent/_warning.css +14 -19
  29. package/src/variants/modifiers/_ghost.css +2 -2
  30. package/src/variants/modifiers/_striped.css +8 -8
  31. package/src/variants/modifiers/_subtle.css +2 -2
  32. package/src/components/_pane.css +0 -19
  33. package/src/semantics/attributes/_role-group-search.css +0 -137
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@1.1.0/dist/semanticus.css">
35
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.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@1.1.0/dist/semanticus.palette.blue.css">
39
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@1.1.0/dist/semanticus.size.pico.css">
38
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.0/dist/semanticus.palette.blue.css">
39
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.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-1.1.0.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
44
+ Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-2.0.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 & Sizes](https://semanticus.design/guide/palettes-sizes.html) guide for more options.
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,31 +147,34 @@ 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@1.1.0/dist/semanticus.css">
150
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.0.0/dist/semanticus.css">
151
151
  </head>
152
- <body class="vstack">
153
- <header class="container">
152
+ <body class="content-grid">
153
+ <header>
154
154
  <nav>
155
155
  <h3><a href="#">Acme Corp</a></h3>
156
156
 
157
157
  <ul>
158
158
  <li><a href="#">About</a></li>
159
- <li><a href="#" role="button">Log In</a></li>
159
+ <li><a href="#" role="button" class="secondary">Log In</a></li>
160
160
  </ul>
161
161
  </nav>
162
162
  </header>
163
163
 
164
- <main class="container py-d flex-grow-1">
164
+ <main class="py-d mb-3">
165
165
  <hgroup>
166
166
  <h1>Welcome to Semanticus CSS</h1>
167
167
  <p>A lightweight CSS framework for modern web development.</p>
168
168
  </hgroup>
169
169
 
170
- <button class="secondary">Get Started</button>
170
+ <button>Get Started</button>
171
171
  </main>
172
172
 
173
- <footer class="text-center text-bg-secondary-subtle">
174
- <p>Acme Corp &copy; 2026. All rights reserved.</p>
173
+ <footer class="full-width text-bg-secondary-subtle">
174
+ <nav>
175
+ <p>Acme Corp &copy; 2026</p>
176
+ <a href="#">Contact Us</a>
177
+ </nav>
175
178
  </footer>
176
179
  </body>
177
180
  </html>
@@ -189,7 +192,7 @@ You can override its variables to create your own themes and styles. For example
189
192
  }
190
193
  ```
191
194
 
192
- Check out the [CSS Variables](https://semanticus.design/guide/css-variables.html) guide for more details or the [Theme Builder](https://semanticus.design/theme-builder.html) to help you create your own custom styles.
195
+ 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
196
 
194
197
  ## Browser Support
195
198
 
@@ -218,11 +221,11 @@ Check out this [How to setup the project](docs/about/contributing.md#how-to-setu
218
221
  | Pico (semantics only) | 10.2 KB |
219
222
  | Semanticus (semantics only) | 11.4 KB |
220
223
  | Pico (semantics + classes) | 11.5 KB |
221
- | Semanticus (semantics + components + variants) | 13.6 KB |
224
+ | Semanticus (semantics + components + variants) | 14.3 KB |
222
225
  | Bootstrap (utilities + grid) | 16.3 KB |
223
226
  | Semanticus (utilities + grid) | 10.5 KB |
224
227
  | Bootstrap (full bundle) | 53.8 KB |
225
- | Semanticus (full bundle) | 23.7 KB |
228
+ | Semanticus (full bundle) | 24.4 KB |
226
229
 
227
230
  ## License
228
231