@dereekb/dbx-web 13.17.0 → 13.18.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 (40) hide show
  1. package/_index.scss +4 -1
  2. package/eslint/package.json +4 -4
  3. package/fesm2022/dereekb-dbx-web-mapbox.mjs +2 -2
  4. package/fesm2022/dereekb-dbx-web-mapbox.mjs.map +1 -1
  5. package/fesm2022/dereekb-dbx-web-style-demo.mjs +1698 -0
  6. package/fesm2022/dereekb-dbx-web-style-demo.mjs.map +1 -0
  7. package/fesm2022/dereekb-dbx-web-table.mjs +1 -1
  8. package/fesm2022/dereekb-dbx-web-table.mjs.map +1 -1
  9. package/fesm2022/dereekb-dbx-web.mjs +460 -333
  10. package/fesm2022/dereekb-dbx-web.mjs.map +1 -1
  11. package/lib/button/_button.scss +74 -98
  12. package/lib/extension/pdf/_pdf.scss +5 -5
  13. package/lib/extension/table/_table.scss +2 -2
  14. package/lib/interaction/detach/_detach.scss +22 -2
  15. package/lib/interaction/dialog/_dialog.scss +4 -8
  16. package/lib/interaction/popup/_popup.scss +1 -2
  17. package/lib/interaction/prompt/_prompt.scss +7 -2
  18. package/lib/layout/avatar/_avatar.scss +8 -0
  19. package/lib/layout/bar/_bar.scss +41 -2
  20. package/lib/layout/card/_card.scss +191 -3
  21. package/lib/layout/column/_column.scss +3 -3
  22. package/lib/layout/content/_content.scss +24 -9
  23. package/lib/layout/list/_list.scss +83 -6
  24. package/lib/layout/section/_section.scss +7 -8
  25. package/lib/layout/style/_style.scss +44 -9
  26. package/lib/layout/text/_text.scss +73 -29
  27. package/lib/loading/_loading.scss +9 -2
  28. package/lib/router/layout/navbar/_navbar.scss +14 -0
  29. package/lib/router/layout/sidenav/_sidenav.scss +2 -2
  30. package/lib/style/_core.scss +4 -0
  31. package/lib/style/_corners.scss +79 -0
  32. package/lib/style/_root-variables.scss +17 -0
  33. package/lib/style/_shapes.scss +56 -0
  34. package/lib/style/_style-demo.scss +183 -0
  35. package/lib/style/_variables.scss +8 -1
  36. package/package.json +11 -7
  37. package/style-demo/README.md +12 -0
  38. package/types/dereekb-dbx-web-style-demo.d.ts +883 -0
  39. package/types/dereekb-dbx-web.d.ts +170 -79
  40. package/lib/style/_m2-visual-compat.scss +0 -120
package/lib/style/_m2-visual-compat.scss DELETED
@@ -1,120 +0,0 @@
1
- /// Applies M3 "small" (8px) corner rounding to components that default to
2
- /// larger radii in M3 (buttons default to "full"/pill, dialogs to 28px, etc).
3
- /// This gives a modern but restrained look.
4
- @mixin dbx-components-shapes() {
5
- // Buttons: M3 default is "full" (pill). Small = 8px.
6
- --mat-button-filled-container-shape: 8px;
7
- --mat-button-outlined-container-shape: 8px;
8
- --mat-button-text-container-shape: 8px;
9
- --mat-button-protected-container-shape: 8px;
10
- --mat-button-tonal-container-shape: 8px;
11
-
12
- // FAB: M3 default is "large" (16px). Small = 8px.
13
- --mat-fab-container-shape: 8px;
14
- --mat-fab-small-container-shape: 8px;
15
-
16
- // Dialog: M3 default is "extra-large" (28px). Small = 8px.
17
- --mat-dialog-container-shape: 8px;
18
-
19
- // Card: M3 default is "medium" (12px). Small = 8px.
20
- --mat-card-elevated-container-shape: 8px;
21
- --mat-card-filled-container-shape: 8px;
22
- --mat-card-outlined-container-shape: 8px;
23
-
24
- // Sidenav: M3 default is "large" (16px). No rounding for dbx-components.
25
- --mat-sidenav-container-shape: 0;
26
-
27
- // Chip: Small = 8px.
28
- --mat-chip-container-shape-radius: 8px;
29
-
30
- // Form fields: Small = 8px.
31
- --mat-form-field-filled-container-shape: 8px;
32
- --mat-form-field-outlined-container-shape: 8px;
33
-
34
- // Snackbar: Small = 8px.
35
- --mat-snack-bar-container-shape: 8px;
36
-
37
- // Menu / Select / Autocomplete: Small = 8px.
38
- --mat-menu-container-shape: 8px;
39
- --mat-autocomplete-container-shape: 8px;
40
-
41
- // Expansion panel
42
- --mat-expansion-container-shape: 8px;
43
-
44
- // Datepicker
45
- --mat-datepicker-calendar-container-shape: 8px;
46
-
47
- // Bottom sheet
48
- --mat-bottom-sheet-container-shape: 8px;
49
-
50
- // Tooltip
51
- --mat-tooltip-container-shape: 8px;
52
-
53
- // List: active indicator defaults to "full" (pill). Small = 8px.
54
- --mat-list-active-indicator-shape: 2px;
55
- }
56
-
57
- /// Opt-in mixin that restores M2-era visual defaults (shapes, border radii)
58
- /// when using M3 theming. Include inside your theme root selector.
59
- ///
60
- /// Usage:
61
- /// ```scss
62
- /// @mixin my-theme($root-selector) {
63
- /// @include dbx.theme($root-selector, $theme);
64
- /// #{$root-selector} {
65
- /// @include dbx.m2-visual-compat();
66
- /// }
67
- /// }
68
- /// ```
69
- @mixin m2-visual-compat() {
70
- // Buttons: M2 ~4px vs M3 "full" (pill)
71
- --mat-button-filled-container-shape: 4px;
72
- --mat-button-outlined-container-shape: 4px;
73
- --mat-button-text-container-shape: 4px;
74
- --mat-button-protected-container-shape: 4px;
75
- --mat-button-tonal-container-shape: 4px;
76
-
77
- // FAB: M2 ~4px vs M3 fully rounded
78
- --mat-fab-container-shape: 4px;
79
- --mat-fab-small-container-shape: 4px;
80
-
81
- // Dialog: M2 ~4px vs M3 ~28px
82
- --mat-dialog-container-shape: 4px;
83
-
84
- // Card: M2 ~4px vs M3 ~12px
85
- --mat-card-elevated-container-shape: 4px;
86
- --mat-card-filled-container-shape: 4px;
87
- --mat-card-outlined-container-shape: 4px;
88
-
89
- // Sidenav: M2 had no rounding vs M3 "large" (16px)
90
- --mat-sidenav-container-shape: 0;
91
-
92
- // Chip: M2 ~16px (pill) vs M3 ~8px
93
- --mat-chip-container-shape-radius: 16px;
94
-
95
- // Form fields: M2 ~4px vs M3 varies
96
- --mat-form-field-filled-container-shape: 4px;
97
- --mat-form-field-outlined-container-shape: 4px;
98
-
99
- // Snackbar: M2 ~4px
100
- --mat-snack-bar-container-shape: 4px;
101
-
102
- // Menu / Autocomplete
103
- --mat-menu-container-shape: 4px;
104
- --mat-autocomplete-container-shape: 4px;
105
-
106
- // Expansion panel
107
- --mat-expansion-container-shape: 4px;
108
-
109
- // Datepicker
110
- --mat-datepicker-calendar-container-shape: 4px;
111
-
112
- // Bottom sheet
113
- --mat-bottom-sheet-container-shape: 4px;
114
-
115
- // Tooltip
116
- --mat-tooltip-container-shape: 4px;
117
-
118
- // List: active indicator defaults to "full" (pill). M2 had no rounding.
119
- --mat-list-active-indicator-shape: 0;
120
- }