@juwel-development/design-system 3.2.0 → 3.3.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 +32 -0
- package/dist/design-system.js +319 -138
- package/dist/index.css +1 -1
- package/dist/types/Arrangement/Stack/Stack.d.ts +19 -6
- package/dist/types/Display/Collection/Collection.d.ts +30 -0
- package/dist/types/Interaction/Tabs/Tabs.d.ts +79 -0
- package/dist/types/Interaction/Tabs/TabsCompositionError.d.ts +3 -0
- package/dist/types/Layout/Sidebar/Sidebar.d.ts +69 -0
- package/dist/types/index.d.ts +3 -0
- package/package.json +1 -1
- package/src/Arrangement/Stack/Stack.tsx +30 -10
- package/src/Display/Collection/Collection.tsx +58 -0
- package/src/Interaction/Tabs/Tabs.tsx +284 -0
- package/src/Interaction/Tabs/TabsCompositionError.ts +6 -0
- package/src/Layout/Cover/Cover.tsx +3 -3
- package/src/Layout/Sidebar/Sidebar.tsx +224 -0
- package/src/Theme/renderTokens.ts +31 -0
- package/src/index.ts +3 -0
- package/src/tokens.css +15 -0
- package/src/tokens.dark.css +15 -0
- package/src/tokens.light.css +15 -0
package/src/tokens.light.css
CHANGED
|
@@ -166,6 +166,11 @@
|
|
|
166
166
|
--space-band: 4em;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
/* Collection's vertical item padding, measured against inherited type. */
|
|
170
|
+
:root {
|
|
171
|
+
--space-collection-item: 1em;
|
|
172
|
+
}
|
|
173
|
+
|
|
169
174
|
/* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
|
|
170
175
|
:root {
|
|
171
176
|
--gutter: clamp(1.5rem, 5vw, 4rem);
|
|
@@ -186,3 +191,13 @@
|
|
|
186
191
|
--tick-length: 0.9rem;
|
|
187
192
|
--tick-thickness: 1px;
|
|
188
193
|
}
|
|
194
|
+
|
|
195
|
+
/* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
|
|
196
|
+
:root {
|
|
197
|
+
--tab-marker-thickness: 2px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
:root {
|
|
201
|
+
--tab-inset-inline: 1em;
|
|
202
|
+
--tab-inset-block: 0.5em;
|
|
203
|
+
}
|