@semanticus/semanticus-css 2.2.0 → 3.1.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 (150) hide show
  1. package/README.md +23 -22
  2. package/dist/semanticus-no-utilities.css +1 -1
  3. package/dist/semanticus-semantics.css +1 -1
  4. package/dist/semanticus-utilities.css +1 -1
  5. package/dist/semanticus.css +2 -2
  6. package/dist/semanticus.palette.amber.css +1 -1
  7. package/dist/semanticus.palette.azure.css +1 -1
  8. package/dist/semanticus.palette.blue.css +1 -1
  9. package/dist/semanticus.palette.cyan.css +1 -1
  10. package/dist/semanticus.palette.fuchsia.css +1 -1
  11. package/dist/semanticus.palette.green.css +1 -1
  12. package/dist/semanticus.palette.grey.css +1 -1
  13. package/dist/semanticus.palette.indigo.css +1 -1
  14. package/dist/semanticus.palette.jade.css +1 -1
  15. package/dist/semanticus.palette.lime.css +1 -1
  16. package/dist/semanticus.palette.orange.css +1 -1
  17. package/dist/semanticus.palette.pink.css +1 -1
  18. package/dist/semanticus.palette.pumpkin.css +1 -1
  19. package/dist/semanticus.palette.purple.css +1 -1
  20. package/dist/semanticus.palette.red.css +1 -1
  21. package/dist/semanticus.palette.sand.css +1 -1
  22. package/dist/semanticus.palette.slate.css +1 -1
  23. package/dist/semanticus.palette.violet.css +1 -1
  24. package/dist/semanticus.palette.yellow.css +1 -1
  25. package/dist/semanticus.palette.zinc.css +1 -1
  26. package/dist/semanticus.size.pico.css +1 -1
  27. package/package.json +1 -1
  28. package/src/components/_card.css +55 -46
  29. package/src/components/_icons.css +2 -2
  30. package/src/components/_pane.css +15 -8
  31. package/src/components/_sidebar.css +6 -6
  32. package/src/components/_variables.css +28 -0
  33. package/src/components/modules.css +2 -0
  34. package/src/index.css +1 -1
  35. package/src/palettes/amber.css +22 -26
  36. package/src/palettes/azure.css +22 -26
  37. package/src/palettes/blue.css +22 -26
  38. package/src/palettes/cyan.css +22 -26
  39. package/src/palettes/fuchsia.css +25 -26
  40. package/src/palettes/green.css +22 -26
  41. package/src/palettes/grey.css +22 -26
  42. package/src/palettes/indigo.css +22 -26
  43. package/src/palettes/jade.css +22 -26
  44. package/src/palettes/lime.css +22 -26
  45. package/src/palettes/orange.css +22 -26
  46. package/src/palettes/pink.css +22 -26
  47. package/src/palettes/pumpkin.css +25 -26
  48. package/src/palettes/purple.css +22 -26
  49. package/src/palettes/red.css +22 -26
  50. package/src/palettes/sand.css +22 -26
  51. package/src/palettes/slate.css +22 -26
  52. package/src/palettes/violet.css +22 -26
  53. package/src/palettes/yellow.css +22 -26
  54. package/src/palettes/zinc.css +22 -26
  55. package/src/semantics/attributes/_aria-busy.css +1 -10
  56. package/src/semantics/attributes/_aria-disabled.css +2 -23
  57. package/src/semantics/attributes/_disabled.css +3 -0
  58. package/src/semantics/attributes/_popover.css +4 -3
  59. package/src/semantics/attributes/_role-group-search.css +135 -0
  60. package/src/semantics/attributes/_role-list.css +23 -0
  61. package/src/semantics/attributes/_role-status-alert.css +28 -22
  62. package/src/semantics/attributes/_role-tooltip.css +11 -8
  63. package/src/semantics/elements/_address.css +2 -2
  64. package/src/semantics/elements/_aside.css +4 -3
  65. package/src/semantics/elements/_blockquote.css +6 -6
  66. package/src/semantics/elements/_body.css +0 -2
  67. package/src/semantics/elements/_buttons.css +100 -0
  68. package/src/semantics/elements/_code.css +18 -8
  69. package/src/semantics/elements/_del.css +1 -1
  70. package/src/semantics/elements/_details.css +147 -162
  71. package/src/semantics/elements/_dialog.css +24 -17
  72. package/src/semantics/elements/_fieldset.css +27 -0
  73. package/src/semantics/elements/_figure.css +1 -1
  74. package/src/semantics/elements/_footer.css +0 -1
  75. package/src/semantics/elements/_header.css +0 -1
  76. package/src/semantics/elements/_headings.css +86 -9
  77. package/src/semantics/elements/_hgroup.css +2 -2
  78. package/src/semantics/elements/_hr.css +2 -2
  79. package/src/semantics/elements/_inputs.css +14 -0
  80. package/src/semantics/elements/_ins.css +1 -1
  81. package/src/semantics/elements/_label.css +4 -0
  82. package/src/semantics/elements/_links.css +34 -41
  83. package/src/semantics/elements/_lists.css +10 -8
  84. package/src/semantics/elements/_mark.css +2 -2
  85. package/src/semantics/elements/_nav.css +65 -35
  86. package/src/semantics/elements/_p.css +2 -2
  87. package/src/semantics/elements/_progress.css +18 -11
  88. package/src/semantics/elements/{_document.css → _root.css} +12 -9
  89. package/src/semantics/elements/_section.css +0 -1
  90. package/src/semantics/elements/_small.css +27 -0
  91. package/src/semantics/elements/_table.css +20 -6
  92. package/src/semantics/elements/inputs/_checkbox-radio.css +30 -0
  93. package/src/semantics/elements/inputs/_checkbox.css +19 -0
  94. package/src/semantics/elements/{_type-color.css → inputs/_color.css} +5 -3
  95. package/src/semantics/elements/inputs/_common.css +87 -0
  96. package/src/semantics/elements/inputs/_date.css +53 -0
  97. package/src/semantics/elements/inputs/_file.css +35 -0
  98. package/src/semantics/elements/inputs/_input.css +47 -0
  99. package/src/semantics/elements/inputs/_radio.css +11 -0
  100. package/src/semantics/elements/inputs/_range.css +69 -0
  101. package/src/semantics/elements/inputs/_search.css +48 -0
  102. package/src/semantics/elements/inputs/_select.css +32 -0
  103. package/src/semantics/elements/inputs/_switch.css +46 -0
  104. package/src/semantics/elements/inputs/_textarea.css +30 -0
  105. package/src/semantics/modules.css +9 -13
  106. package/src/sizes/pico.css +24 -23
  107. package/src/utilities/_grid.css +917 -179
  108. package/src/utilities/_variables.css +21 -14
  109. package/src/utilities/borders/_border-radius.css +9 -9
  110. package/src/utilities/borders/_border-style.css +10 -10
  111. package/src/utilities/colors/_bg-colors.css +22 -38
  112. package/src/utilities/colors/_border-colors.css +20 -26
  113. package/src/utilities/colors/_subtle-colors.css +55 -61
  114. package/src/utilities/colors/_text-bg-colors.css +35 -35
  115. package/src/utilities/colors/_text-colors.css +24 -46
  116. package/src/utilities/effects/_focus-ring.css +14 -11
  117. package/src/utilities/layout/_misc.css +4 -3
  118. package/src/utilities/sizing/_width.css +48 -0
  119. package/src/utilities/spacing/_gap.css +0 -43
  120. package/src/utilities/spacing/_margin.css +0 -1
  121. package/src/utilities/spacing/_padding.css +0 -1
  122. package/src/utilities/typography/_font-sizes.css +6 -6
  123. package/src/variables/_all.css +3 -4
  124. package/src/variables/_theme.css +394 -237
  125. package/src/variants/_intent.css +8 -0
  126. package/src/variants/_variables.css +109 -9
  127. package/src/variants/intent/_common.css +33 -0
  128. package/src/variants/intent/_contrast.css +30 -31
  129. package/src/variants/intent/_danger.css +7 -30
  130. package/src/variants/intent/_info.css +7 -30
  131. package/src/variants/intent/_primary.css +7 -30
  132. package/src/variants/intent/_secondary.css +7 -30
  133. package/src/variants/intent/_success.css +7 -30
  134. package/src/variants/intent/_warning.css +7 -30
  135. package/src/variants/modifiers/_ghost.css +52 -152
  136. package/src/variants/modifiers/_striped.css +6 -5
  137. package/src/variants/modifiers/_subtle.css +55 -113
  138. package/src/variants/modules.css +1 -7
  139. package/src/semantics/attributes/_role-group.css +0 -126
  140. package/src/semantics/attributes/_role-search.css +0 -14
  141. package/src/semantics/elements/_article.css +0 -3
  142. package/src/semantics/elements/_button.css +0 -124
  143. package/src/semantics/elements/_input.css +0 -302
  144. package/src/semantics/elements/_main.css +0 -3
  145. package/src/semantics/elements/_type-checkbox-radio.css +0 -139
  146. package/src/semantics/elements/_type-date.css +0 -37
  147. package/src/semantics/elements/_type-file.css +0 -23
  148. package/src/semantics/elements/_type-range.css +0 -87
  149. package/src/semantics/elements/_type-search.css +0 -30
  150. package/src/variables/_elements.css +0 -195
package/README.md CHANGED
@@ -26,16 +26,16 @@ Enable authors to write clean, semantic HTML that looks great by default, guide
26
26
  ### Option 1: CDN (quick start)
27
27
 
28
28
  ```html
29
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.css">
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.0/dist/semanticus.css">
30
30
 
31
31
  <!-- costumize it with a palette or size variation if needed -->
32
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.palette.blue.css">
33
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.size.pico.css">
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.0/dist/semanticus.palette.blue.css">
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.0/dist/semanticus.size.pico.css">
34
34
  ```
35
35
 
36
36
  ### Option 2: Install manually
37
37
 
38
- Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-2.2.0.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
38
+ Download the [distribution files](https://registry.npmjs.org/@semanticus%2Fsemanticus-css/-/semanticus-css-3.1.0.tgz), move the ones you need to your **stylesheets** folder and include them in your HTML `<head>`:
39
39
 
40
40
  ```html
41
41
  <link rel="stylesheet" href="/css/semanticus.css">
@@ -68,7 +68,7 @@ Check out the [Palettes](https://semanticus.design/guide/palettes.html) and [Siz
68
68
 
69
69
  ## How It Works
70
70
 
71
- Semanticus CSS is built on four complementary layers:
71
+ **Semanticus CSS** is built on four complementary layers:
72
72
 
73
73
  ### 1. Semantic Styling
74
74
 
@@ -81,7 +81,7 @@ Beautiful default styles for plain **ARIA-centric** HTML — simply write plain
81
81
  <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
82
82
  </hgroup>
83
83
 
84
- <button>Click me</button>
84
+ <button>Get Started</button>
85
85
  </article>
86
86
  ```
87
87
 
@@ -96,7 +96,7 @@ Minimal set of reusable building blocks that extend the **Semantic Styling** - a
96
96
  <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
97
97
  </hgroup>
98
98
 
99
- <button>Click me</button>
99
+ <button>Get Started</button>
100
100
  </article>
101
101
  ```
102
102
 
@@ -105,13 +105,13 @@ Minimal set of reusable building blocks that extend the **Semantic Styling** - a
105
105
  CSS classes that tweak the **Semantic Styling** and **Components** - throw in a [variant](https://semanticus.design/docs/variants/) when you want to add or reduce visual flair.
106
106
 
107
107
  ```html
108
- <article class="card secondary">
108
+ <article class="card secondary subtle">
109
109
  <hgroup>
110
110
  <h1>Hello World</h1>
111
111
  <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
112
112
  </hgroup>
113
113
 
114
- <button class="ghost">Click me</button>
114
+ <button class="contrast">Get Started</button>
115
115
  </article>
116
116
  ```
117
117
 
@@ -120,13 +120,13 @@ CSS classes that tweak the **Semantic Styling** and **Components** - throw in a
120
120
  [Utility](https://semanticus.design/docs/utilities/) classes adapted to the same **CSS variables** as the **Semantic Styling** and **Components** for a consistent design - use them when you need fine-grained control over **spacing**, **layout**, **colors**, and more.
121
121
 
122
122
  ```html
123
- <article class="card secondary text-center w-75 mx-auto">
124
- <hgroup class="p-3">
123
+ <article class="card secondary subtle shadow text-center w-75 mx-auto">
124
+ <hgroup>
125
125
  <h1>Hello World</h1>
126
126
  <p>Look at me, I'm <strong>bold</strong> and <em>stylish!</em></p>
127
127
  </hgroup>
128
128
 
129
- <button class="ghost">Click me</button>
129
+ <button class="info ghost">Get Started</button>
130
130
  </article>
131
131
  ```
132
132
 
@@ -141,16 +141,16 @@ Here's an off-to-a-great-start HTML template using semantic styling, its variant
141
141
  <meta charset="UTF-8">
142
142
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
143
143
  <meta name="color-scheme" content="light dark">
144
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@2.2.0/dist/semanticus.css">
144
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticus/semanticus-css@3.1.0/dist/semanticus.css">
145
145
  </head>
146
146
  <body class="content-grid">
147
147
  <header>
148
148
  <nav>
149
- <h3><a href="#">Acme Corp</a></h3>
149
+ <a href="#" class="fs-3"><strong>Acme Corp</strong></a>
150
150
 
151
151
  <ul>
152
152
  <li><a href="#">About</a></li>
153
- <li><a href="#" role="button" class="secondary">Log In</a></li>
153
+ <li><a href="#" role="button" class="contrast">Log In</a></li>
154
154
  </ul>
155
155
  </nav>
156
156
  </header>
@@ -158,7 +158,7 @@ Here's an off-to-a-great-start HTML template using semantic styling, its variant
158
158
  <main class="py-d mb-3">
159
159
  <hgroup>
160
160
  <h1>Welcome to Semanticus CSS</h1>
161
- <p>A lightweight CSS framework for modern web development.</p>
161
+ <p>ARIA-centric, semantic HTML enhanced by atomic utilities.</p>
162
162
  </hgroup>
163
163
 
164
164
  <button>Get Started</button>
@@ -180,7 +180,8 @@ You can override its variables to create your own themes and styles. For example
180
180
 
181
181
  ```css
182
182
  :root {
183
- --color-primary: #4f46e5;
183
+ --primary-background-color: #4f46e5;
184
+ --primary-color: white;
184
185
  --border-radius: 0.75rem;
185
186
  --font-family: "Inter", sans-serif;
186
187
  }
@@ -198,7 +199,7 @@ Semanticus CSS targets modern browsers based on the following [Browserslist](htt
198
199
 
199
200
  ## Development
200
201
 
201
- Check out this [How to setup the project](docs/about/contributing.md#how-to-setup-the-project) inside the contributing guide.
202
+ Check out this [How to setup the project](docs/guide/contributing.md#how-to-setup-the-project) inside the contributing guide.
202
203
 
203
204
  ## About
204
205
 
@@ -217,13 +218,13 @@ It aims to address the friction that often appears shortly after installing **Pi
217
218
  | Bundle | Gzip |
218
219
  | --- | --- |
219
220
  | Pico (semantics only) | 10.2 KB |
220
- | Semanticus (semantics only) | 11.4 KB |
221
+ | Semanticus (semantics only) | 10.9 KB |
221
222
  | Pico (semantics + classes) | 11.5 KB |
222
- | Semanticus (semantics + components + variants) | 14.3 KB |
223
+ | Semanticus (semantics + components + variants) | 13.8 KB |
223
224
  | Bootstrap (utilities + grid) | 16.3 KB |
224
- | Semanticus (utilities + grid) | 10.5 KB |
225
+ | Semanticus (utilities + grid) | 10.6 KB |
225
226
  | Bootstrap (full bundle) | 53.8 KB |
226
- | Semanticus (full bundle) | 24.4 KB |
227
+ | Semanticus (full bundle) | 24.0 KB |
227
228
 
228
229
  ## License
229
230