@digiko-npm/designsystem 0.8.2 → 0.9.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/dist/designsystem.css +7537 -7051
- package/dist/designsystem.min.css +2 -2
- package/package.json +3 -1
- package/src/components/combobox.css +11 -14
- package/src/components/hero.css +113 -0
- package/src/components/index.css +56 -46
- package/src/components/prose.css +119 -0
- package/src/components/stat-card.css +3 -0
- package/src/utilities/index.css +2 -0
- package/src/utilities/layout.css +21 -0
- package/src/utilities/sizing.css +71 -0
- package/src/utilities/spacing.css +19 -0
- package/src/utilities/states.css +74 -0
- package/src/utilities/text.css +45 -0
package/src/utilities/text.css
CHANGED
|
@@ -151,6 +151,13 @@
|
|
|
151
151
|
overflow: hidden;
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
+
.ds-line-clamp-1 {
|
|
155
|
+
display: -webkit-box;
|
|
156
|
+
-webkit-line-clamp: 1;
|
|
157
|
+
-webkit-box-orient: vertical;
|
|
158
|
+
overflow: hidden;
|
|
159
|
+
}
|
|
160
|
+
|
|
154
161
|
.ds-line-clamp-3 {
|
|
155
162
|
display: -webkit-box;
|
|
156
163
|
-webkit-line-clamp: 3;
|
|
@@ -158,6 +165,12 @@
|
|
|
158
165
|
overflow: hidden;
|
|
159
166
|
}
|
|
160
167
|
|
|
168
|
+
/* --- Text Extras --- */
|
|
169
|
+
.ds-line-through { text-decoration: line-through; }
|
|
170
|
+
.ds-break-all { word-break: break-all; }
|
|
171
|
+
.ds-list-disc { list-style-type: disc; }
|
|
172
|
+
.ds-list-inside { list-style-position: inside; }
|
|
173
|
+
|
|
161
174
|
/* --- Font Family --- */
|
|
162
175
|
.ds-font-mono { font-family: var(--ds-font-mono); }
|
|
163
176
|
.ds-font-sans { font-family: var(--ds-font-sans); }
|
|
@@ -168,6 +181,7 @@
|
|
|
168
181
|
.ds-border-b { border-block-end: 1px solid var(--ds-color-border); }
|
|
169
182
|
.ds-border-l { border-inline-start: 1px solid var(--ds-color-border); }
|
|
170
183
|
.ds-border-r { border-inline-end: 1px solid var(--ds-color-border); }
|
|
184
|
+
.ds-border-y { border-block-start: 1px solid var(--ds-color-border); border-block-end: 1px solid var(--ds-color-border); }
|
|
171
185
|
.ds-border-none { border: none; }
|
|
172
186
|
|
|
173
187
|
/* --- Border Color --- */
|
|
@@ -188,8 +202,15 @@
|
|
|
188
202
|
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }
|
|
189
203
|
.ds-rounded-xl { border-radius: var(--ds-radius-xl); }
|
|
190
204
|
.ds-rounded-2xl { border-radius: var(--ds-radius-2xl); }
|
|
205
|
+
.ds-rounded-3xl { border-radius: 1.5rem; }
|
|
191
206
|
.ds-rounded-full { border-radius: var(--ds-radius-full); }
|
|
192
207
|
|
|
208
|
+
/* --- Border Radius (directional) --- */
|
|
209
|
+
.ds-rounded-t { border-start-start-radius: var(--ds-radius-md); border-start-end-radius: var(--ds-radius-md); }
|
|
210
|
+
.ds-rounded-b { border-end-start-radius: var(--ds-radius-md); border-end-end-radius: var(--ds-radius-md); }
|
|
211
|
+
.ds-rounded-t-2xl { border-start-start-radius: var(--ds-radius-2xl); border-start-end-radius: var(--ds-radius-2xl); }
|
|
212
|
+
.ds-rounded-b-2xl { border-end-start-radius: var(--ds-radius-2xl); border-end-end-radius: var(--ds-radius-2xl); }
|
|
213
|
+
|
|
193
214
|
/* --- Shadow --- */
|
|
194
215
|
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
|
|
195
216
|
.ds-shadow { box-shadow: var(--ds-shadow-md); }
|
|
@@ -198,7 +219,11 @@
|
|
|
198
219
|
|
|
199
220
|
/* --- Opacity --- */
|
|
200
221
|
.ds-opacity-0 { opacity: 0; }
|
|
222
|
+
.ds-opacity-25 { opacity: 0.25; }
|
|
201
223
|
.ds-opacity-50 { opacity: 0.5; }
|
|
224
|
+
.ds-opacity-60 { opacity: 0.6; }
|
|
225
|
+
.ds-opacity-70 { opacity: 0.7; }
|
|
226
|
+
.ds-opacity-75 { opacity: 0.75; }
|
|
202
227
|
.ds-opacity-100 { opacity: 1; }
|
|
203
228
|
|
|
204
229
|
/* --- Cursor --- */
|
|
@@ -212,6 +237,7 @@
|
|
|
212
237
|
.ds-pointer-events-none { pointer-events: none; }
|
|
213
238
|
.ds-select-none { user-select: none; }
|
|
214
239
|
.ds-whitespace-nowrap { white-space: nowrap; }
|
|
240
|
+
.ds-whitespace-pre-wrap { white-space: pre-wrap; }
|
|
215
241
|
|
|
216
242
|
/* --- Backdrop --- */
|
|
217
243
|
.ds-backdrop-blur {
|
|
@@ -219,6 +245,14 @@
|
|
|
219
245
|
-webkit-backdrop-filter: blur(20px) saturate(1.5);
|
|
220
246
|
}
|
|
221
247
|
|
|
248
|
+
.ds-backdrop-blur-sm {
|
|
249
|
+
backdrop-filter: blur(4px);
|
|
250
|
+
-webkit-backdrop-filter: blur(4px);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* --- Outline --- */
|
|
254
|
+
.ds-outline-none { outline: none; }
|
|
255
|
+
|
|
222
256
|
/* --- Transform --- */
|
|
223
257
|
.-ds-translate-y-1\/2 { transform: translateY(-50%); }
|
|
224
258
|
.-ds-translate-x-1\/2 { transform: translateX(-50%); }
|
|
@@ -249,6 +283,17 @@
|
|
|
249
283
|
transition: transform var(--ds-duration-normal) var(--ds-ease-default);
|
|
250
284
|
}
|
|
251
285
|
|
|
286
|
+
/* --- Duration --- */
|
|
287
|
+
.ds-duration-fast { transition-duration: var(--ds-duration-fast); }
|
|
288
|
+
.ds-duration-normal { transition-duration: var(--ds-duration-normal); }
|
|
289
|
+
.ds-duration-slow { transition-duration: var(--ds-duration-slow); }
|
|
290
|
+
.ds-duration-slower { transition-duration: var(--ds-duration-slower); }
|
|
291
|
+
|
|
292
|
+
/* --- Easing --- */
|
|
293
|
+
.ds-ease-default { transition-timing-function: var(--ds-ease-default); }
|
|
294
|
+
.ds-ease-out { transition-timing-function: var(--ds-ease-out); }
|
|
295
|
+
.ds-ease-out-expo { transition-timing-function: var(--ds-ease-out-expo); }
|
|
296
|
+
|
|
252
297
|
/* --- Animations --- */
|
|
253
298
|
@keyframes ds-fade-in {
|
|
254
299
|
from { opacity: 0; }
|