@marioschmidt/design-system-components 1.5.0 → 1.6.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/bds/bds.css +1 -1
- package/dist/bds/bds.esm.js +1 -1
- package/dist/{www/build/p-528d0d4c.entry.js → bds/p-36952749.entry.js} +1 -1
- package/dist/bds/{p--fLJB657.js → p-C5tRgziF.js} +1 -1
- package/dist/cjs/bds.cjs.js +1 -1
- package/dist/cjs/ds-button_3.cjs.entry.js +1 -1
- package/dist/cjs/{index-ByPgZNp3.js → index-xSxNHODD.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/components/ds-button.d.ts +1 -1
- package/dist/components/ds-card.d.ts +1 -1
- package/dist/components/ds-icon.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/esm/bds.js +2 -2
- package/dist/esm/ds-button_3.entry.js +1 -1
- package/dist/esm/{index--fLJB657.js → index-C5tRgziF.js} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/www/build/bds.css +1 -1
- package/dist/www/build/bds.esm.js +1 -1
- package/dist/{bds/p-528d0d4c.entry.js → www/build/p-36952749.entry.js} +1 -1
- package/dist/www/build/{p-8c542505.css → p-4fc3517a.css} +1 -1
- package/dist/www/build/{p--fLJB657.js → p-C5tRgziF.js} +1 -1
- package/dist/www/css/README.md +41 -11
- package/dist/www/css/advertorial/components/article.css +1 -1
- package/dist/www/css/advertorial/components/audioplayer.css +1 -1
- package/dist/www/css/advertorial/components/avatar.css +1 -1
- package/dist/www/css/advertorial/components/badge.css +1 -1
- package/dist/www/css/advertorial/components/breadcrumb.css +1 -1
- package/dist/www/css/advertorial/components/breakingnews.css +1 -1
- package/dist/www/css/advertorial/components/button.css +1 -1
- package/dist/www/css/advertorial/components/card.css +1 -1
- package/dist/www/css/advertorial/components/carousel.css +1 -1
- package/dist/www/css/advertorial/components/chip.css +1 -1
- package/dist/www/css/advertorial/components/datepicker.css +1 -1
- package/dist/www/css/advertorial/components/drawers.css +1 -1
- package/dist/www/css/advertorial/components/dropdown.css +1 -1
- package/dist/www/css/advertorial/components/footer.css +1 -1
- package/dist/www/css/advertorial/components/icon.css +1 -1
- package/dist/www/css/advertorial/components/iconbutton.css +1 -1
- package/dist/www/css/advertorial/components/infoelement.css +1 -1
- package/dist/www/css/advertorial/components/inputfield.css +1 -1
- package/dist/www/css/advertorial/components/liveticker.css +1 -1
- package/dist/www/css/advertorial/components/mediaplayer.css +1 -1
- package/dist/www/css/advertorial/components/menu.css +1 -1
- package/dist/www/css/advertorial/components/newsticker.css +1 -1
- package/dist/www/css/advertorial/components/pagination.css +1 -1
- package/dist/www/css/advertorial/components/paywall.css +1 -1
- package/dist/www/css/advertorial/components/quote.css +1 -1
- package/dist/www/css/advertorial/components/radiobutton.css +1 -1
- package/dist/www/css/advertorial/components/search.css +1 -1
- package/dist/www/css/advertorial/components/sectiontitle.css +1 -1
- package/dist/www/css/advertorial/components/separator.css +1 -1
- package/dist/www/css/advertorial/components/skeletons.css +1 -1
- package/dist/www/css/advertorial/components/slider.css +1 -1
- package/dist/www/css/advertorial/components/specialnavi.css +1 -1
- package/dist/www/css/advertorial/components/spinner.css +1 -1
- package/dist/www/css/advertorial/components/tab.css +1 -1
- package/dist/www/css/advertorial/components/table.css +1 -1
- package/dist/www/css/advertorial/components/teaser.css +1 -1
- package/dist/www/css/advertorial/components/toggleswitch.css +1 -1
- package/dist/www/css/advertorial/components/video.css +1 -1
- package/dist/www/css/advertorial/theme.css +1 -1
- package/dist/www/css/advertorial/tokens.css +1 -1
- package/dist/www/css/bild/components/alert.css +1 -1
- package/dist/www/css/bild/components/article.css +1 -1
- package/dist/www/css/bild/components/audioplayer.css +1 -1
- package/dist/www/css/bild/components/avatar.css +1 -1
- package/dist/www/css/bild/components/badge.css +1 -1
- package/dist/www/css/bild/components/breadcrumb.css +1 -1
- package/dist/www/css/bild/components/breakingnews.css +1 -1
- package/dist/www/css/bild/components/button.css +1 -1
- package/dist/www/css/bild/components/card.css +1 -1
- package/dist/www/css/bild/components/carousel.css +1 -1
- package/dist/www/css/bild/components/chip.css +1 -1
- package/dist/www/css/bild/components/datepicker.css +1 -1
- package/dist/www/css/bild/components/drawers.css +1 -1
- package/dist/www/css/bild/components/dropdown.css +1 -1
- package/dist/www/css/bild/components/empties.css +1 -1
- package/dist/www/css/bild/components/footer.css +1 -1
- package/dist/www/css/bild/components/gallery.css +1 -1
- package/dist/www/css/bild/components/icon.css +1 -1
- package/dist/www/css/bild/components/iconbutton.css +1 -1
- package/dist/www/css/bild/components/infoelement.css +1 -1
- package/dist/www/css/bild/components/inputfield.css +1 -1
- package/dist/www/css/bild/components/kicker.css +1 -1
- package/dist/www/css/bild/components/liveticker.css +1 -1
- package/dist/www/css/bild/components/mediaplayer.css +1 -1
- package/dist/www/css/bild/components/menu.css +1 -1
- package/dist/www/css/bild/components/menuitem.css +1 -1
- package/dist/www/css/bild/components/newsticker.css +1 -1
- package/dist/www/css/bild/components/pagination.css +1 -1
- package/dist/www/css/bild/components/partnerlinks.css +1 -1
- package/dist/www/css/bild/components/paywall.css +1 -1
- package/dist/www/css/bild/components/quote.css +1 -1
- package/dist/www/css/bild/components/radiobutton.css +1 -1
- package/dist/www/css/bild/components/search.css +1 -1
- package/dist/www/css/bild/components/sectiontitle.css +1 -1
- package/dist/www/css/bild/components/selection.css +1 -1
- package/dist/www/css/bild/components/separator.css +1 -1
- package/dist/www/css/bild/components/skeletons.css +1 -1
- package/dist/www/css/bild/components/slider.css +1 -1
- package/dist/www/css/bild/components/specialnavi.css +1 -1
- package/dist/www/css/bild/components/spinner.css +1 -1
- package/dist/www/css/bild/components/subheader.css +1 -1
- package/dist/www/css/bild/components/tab.css +1 -1
- package/dist/www/css/bild/components/table.css +1 -1
- package/dist/www/css/bild/components/teaser.css +1 -1
- package/dist/www/css/bild/components/toggleswitch.css +1 -1
- package/dist/www/css/bild/components/video.css +1 -1
- package/dist/www/css/bild/theme.css +7 -7
- package/dist/www/css/bild/tokens.css +1 -1
- package/dist/www/css/bundles/advertorial.css +1 -1
- package/dist/www/css/bundles/bild.css +7 -7
- package/dist/www/css/bundles/sportbild.css +7 -7
- package/dist/www/css/shared/colorprimitive.css +1 -1
- package/dist/www/css/shared/fontprimitive.css +1 -1
- package/dist/www/css/shared/primitives.css +1 -1
- package/dist/www/css/shared/sizeprimitive.css +1 -1
- package/dist/www/css/shared/spaceprimitive.css +1 -1
- package/dist/www/css/sportbild/components/alert.css +1 -1
- package/dist/www/css/sportbild/components/article.css +1 -1
- package/dist/www/css/sportbild/components/audioplayer.css +1 -1
- package/dist/www/css/sportbild/components/avatar.css +1 -1
- package/dist/www/css/sportbild/components/badge.css +1 -1
- package/dist/www/css/sportbild/components/breadcrumb.css +1 -1
- package/dist/www/css/sportbild/components/breakingnews.css +1 -1
- package/dist/www/css/sportbild/components/button.css +1 -1
- package/dist/www/css/sportbild/components/card.css +1 -1
- package/dist/www/css/sportbild/components/carousel.css +1 -1
- package/dist/www/css/sportbild/components/chip.css +1 -1
- package/dist/www/css/sportbild/components/datepicker.css +1 -1
- package/dist/www/css/sportbild/components/drawers.css +1 -1
- package/dist/www/css/sportbild/components/dropdown.css +1 -1
- package/dist/www/css/sportbild/components/empties.css +1 -1
- package/dist/www/css/sportbild/components/footer.css +1 -1
- package/dist/www/css/sportbild/components/gallery.css +1 -1
- package/dist/www/css/sportbild/components/icon.css +1 -1
- package/dist/www/css/sportbild/components/iconbutton.css +1 -1
- package/dist/www/css/sportbild/components/infoelement.css +1 -1
- package/dist/www/css/sportbild/components/inputfield.css +1 -1
- package/dist/www/css/sportbild/components/kicker.css +1 -1
- package/dist/www/css/sportbild/components/liveticker.css +1 -1
- package/dist/www/css/sportbild/components/mediaplayer.css +1 -1
- package/dist/www/css/sportbild/components/menu.css +1 -1
- package/dist/www/css/sportbild/components/menuitem.css +1 -1
- package/dist/www/css/sportbild/components/newsticker.css +1 -1
- package/dist/www/css/sportbild/components/pagination.css +1 -1
- package/dist/www/css/sportbild/components/partnerlinks.css +1 -1
- package/dist/www/css/sportbild/components/paywall.css +1 -1
- package/dist/www/css/sportbild/components/quote.css +1 -1
- package/dist/www/css/sportbild/components/radiobutton.css +1 -1
- package/dist/www/css/sportbild/components/search.css +1 -1
- package/dist/www/css/sportbild/components/sectiontitle.css +1 -1
- package/dist/www/css/sportbild/components/selection.css +1 -1
- package/dist/www/css/sportbild/components/separator.css +1 -1
- package/dist/www/css/sportbild/components/skeletons.css +1 -1
- package/dist/www/css/sportbild/components/slider.css +1 -1
- package/dist/www/css/sportbild/components/specialnavi.css +1 -1
- package/dist/www/css/sportbild/components/spinner.css +1 -1
- package/dist/www/css/sportbild/components/subheader.css +1 -1
- package/dist/www/css/sportbild/components/tab.css +1 -1
- package/dist/www/css/sportbild/components/table.css +1 -1
- package/dist/www/css/sportbild/components/teaser.css +1 -1
- package/dist/www/css/sportbild/components/toggleswitch.css +1 -1
- package/dist/www/css/sportbild/components/video.css +1 -1
- package/dist/www/css/sportbild/theme.css +7 -7
- package/dist/www/css/sportbild/tokens.css +1 -1
- package/dist/www/icons/manifest.json +2 -2
- package/dist/www/index.html +1 -1
- package/package.json +1 -1
package/dist/www/css/README.md
CHANGED
|
@@ -520,26 +520,44 @@ Usage:
|
|
|
520
520
|
<span class="button-label">Click Me</span>
|
|
521
521
|
```
|
|
522
522
|
|
|
523
|
-
### Effect Classes
|
|
523
|
+
### Effect Classes (Mode-Agnostic with var() Support)
|
|
524
524
|
|
|
525
|
-
|
|
525
|
+
Shadow effects use a **mode-agnostic architecture** where the shadow structure is constant but colors adapt to the theme via CSS Custom Properties:
|
|
526
526
|
|
|
527
527
|
```css
|
|
528
|
-
/* Semantic
|
|
529
|
-
[data-color-brand="bild"][data-theme="light"]
|
|
530
|
-
|
|
528
|
+
/* Step 1: Semantic shadow colors (theme-aware) */
|
|
529
|
+
[data-color-brand="bild"][data-theme="light"] {
|
|
530
|
+
--shadow-color-soft-key-sm: var(--color-neutral-0-a-7, rgba(0,0,0,0.07));
|
|
531
|
+
--shadow-color-soft-ambient-sm: var(--color-neutral-0-a-10, rgba(0,0,0,0.1));
|
|
531
532
|
}
|
|
532
533
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
534
|
+
[data-color-brand="bild"][data-theme="dark"] {
|
|
535
|
+
--shadow-color-soft-key-sm: var(--color-neutral-0-a-20, rgba(0,0,0,0.2));
|
|
536
|
+
--shadow-color-soft-ambient-sm: var(--color-neutral-0-a-30, rgba(0,0,0,0.3));
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
/* Step 2: Mode-agnostic shadow effect (no [data-theme] needed!) */
|
|
540
|
+
[data-color-brand="bild"] .shadow-soft-sm {
|
|
541
|
+
box-shadow:
|
|
542
|
+
var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-soft-key-sm),
|
|
543
|
+
var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-375-x, 3px) var(--size-0-p-125-x, 1px) var(--shadow-color-soft-ambient-sm);
|
|
536
544
|
}
|
|
537
545
|
```
|
|
538
546
|
|
|
547
|
+
**Why this architecture?**
|
|
548
|
+
- Shadow **dimensions** (offset, blur, spread) are identical between light/dark modes
|
|
549
|
+
- Only **colors** change per theme
|
|
550
|
+
- Results in **smaller CSS** (no duplicate shadow definitions)
|
|
551
|
+
- Full **var() support** enables runtime theming
|
|
552
|
+
|
|
553
|
+
**Fallback Strategy:**
|
|
554
|
+
- Dimension properties (`--size-*`) get fallbacks (primitive references)
|
|
555
|
+
- Color properties (`--shadow-color-*`) don't get fallbacks (semantic references should fail visibly if theme not set)
|
|
556
|
+
|
|
539
557
|
Usage:
|
|
540
558
|
```html
|
|
541
559
|
<div class="shadow-soft-md">Elevated card</div>
|
|
542
|
-
<div class="
|
|
560
|
+
<div class="shadow-hard-lg">Strong shadow</div>
|
|
543
561
|
```
|
|
544
562
|
|
|
545
563
|
---
|
|
@@ -889,13 +907,25 @@ CSS Custom Properties are supported in all modern browsers:
|
|
|
889
907
|
- Safari 9.1+
|
|
890
908
|
- Edge 15+
|
|
891
909
|
|
|
892
|
-
|
|
910
|
+
### Conditional Fallback Strategy
|
|
911
|
+
|
|
912
|
+
Fallback values are included **conditionally** based on reference type:
|
|
893
913
|
|
|
894
914
|
```css
|
|
915
|
+
/* ✅ WITH fallback: Primitive references (split-loading safety) */
|
|
895
916
|
--text-color-primary: var(--color-neutral-15, #232629);
|
|
896
|
-
|
|
917
|
+
--grid-space-resp-base: var(--space-1-p-5-x, 12px);
|
|
918
|
+
|
|
919
|
+
/* ❌ WITHOUT fallback: Semantic references (fail visible) */
|
|
920
|
+
--button-primary-bg: var(--bg-color-brand-solid);
|
|
897
921
|
```
|
|
898
922
|
|
|
923
|
+
**Rationale:**
|
|
924
|
+
- **Primitive references** get fallbacks → protects against missing `primitives.css` in split-file loading
|
|
925
|
+
- **Semantic references** don't get fallbacks → missing `data-theme` should fail visibly, not silently degrade
|
|
926
|
+
|
|
927
|
+
> See [CLAUDE.md](../../CLAUDE.md#shadow-effects-css-architecture) for detailed fallback architecture.
|
|
928
|
+
|
|
899
929
|
---
|
|
900
930
|
|
|
901
931
|
## 📖 Related Documentation
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*
|
|
4
|
-
* BILD Design System Tokens v1.
|
|
4
|
+
* BILD Design System Tokens v1.6.0
|
|
5
5
|
* Generated by Style Dictionary v5.1.4
|
|
6
6
|
*
|
|
7
7
|
* Brand: Advertorial | Bundle: Theme (Color tokens + Effects for light/dark mode)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*
|
|
4
|
-
* BILD Design System Tokens v1.
|
|
4
|
+
* BILD Design System Tokens v1.6.0
|
|
5
5
|
* Generated by Style Dictionary v5.1.4
|
|
6
6
|
*
|
|
7
7
|
* Brand: Advertorial | Bundle: Tokens (Responsive breakpoints + Typography + Density)
|