@daffodil/design 0.82.0 → 0.83.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 (55) hide show
  1. package/accordion/src/accordion-theme.scss +28 -6
  2. package/article/src/article-theme.scss +118 -64
  3. package/button/src/button/basic/button-theme.scss +21 -16
  4. package/button/src/button/button-base.scss +15 -1
  5. package/button/src/button/flat/flat-theme.scss +2 -2
  6. package/button/src/button/icon/icon-theme.scss +183 -79
  7. package/button/src/button/stroked/stroked-theme.scss +9 -9
  8. package/button/src/button/underline/underline-theme.scss +2 -2
  9. package/card/examples/card-theming/card-theming.component.d.ts +2 -1
  10. package/card/examples/public_api.d.ts +1 -1
  11. package/card/src/card/stroked/stroked-theme.scss +102 -13
  12. package/card/src/card-base-theme.scss +126 -55
  13. package/fesm2022/daffodil-design-accordion.mjs +2 -2
  14. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  15. package/fesm2022/daffodil-design-button.mjs +12 -12
  16. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  17. package/fesm2022/daffodil-design-card-examples.mjs +14 -12
  18. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  19. package/fesm2022/daffodil-design-media-gallery.mjs +57 -18
  20. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  21. package/fesm2022/daffodil-design-notification-examples.mjs +3 -2
  22. package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
  23. package/fesm2022/daffodil-design-notification.mjs +2 -2
  24. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  25. package/fesm2022/daffodil-design-progress-bar-examples.mjs +2 -2
  26. package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
  27. package/fesm2022/daffodil-design-progress-bar.mjs +0 -3
  28. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  29. package/fesm2022/daffodil-design-sidebar.mjs +3 -8
  30. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  31. package/fesm2022/daffodil-design-switch.mjs +33 -8
  32. package/fesm2022/daffodil-design-switch.mjs.map +1 -1
  33. package/fesm2022/daffodil-design-tabs.mjs +4 -4
  34. package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
  35. package/fesm2022/daffodil-design-toast.mjs +14 -13
  36. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  37. package/fesm2022/daffodil-design-tree.mjs +2 -2
  38. package/media-gallery/README.md +3 -3
  39. package/media-gallery/media-gallery/media-gallery.component.d.ts +21 -5
  40. package/media-gallery/public_api.d.ts +3 -3
  41. package/media-gallery/thumbnail/thumbnail.directive.d.ts +23 -6
  42. package/notification/src/notification-theme.scss +62 -23
  43. package/package.json +1 -1
  44. package/progress-bar/README.md +2 -4
  45. package/progress-bar/progress-bar.component.d.ts +0 -3
  46. package/progress-bar/src/progress-bar-theme.scss +17 -8
  47. package/sidebar/public_api.d.ts +10 -11
  48. package/sidebar/sidebar.d.ts +1 -2
  49. package/sidebar/sidebar.module.d.ts +1 -2
  50. package/switch/src/switch-theme.scss +29 -10
  51. package/switch/switch/switch.component.d.ts +31 -6
  52. package/tabs/src/tabs-theme.scss +31 -13
  53. package/toast/src/toast-theme.scss +80 -33
  54. package/toast/toast/toast-template.component.d.ts +3 -1
  55. package/tree/src/tree-theme.scss +39 -13
package/toast/src/toast-theme.scss CHANGED
@@ -3,64 +3,111 @@
3
3
  @use '../../scss/theming';
4
4
 
5
5
  @mixin daff-toast-theme($theme) {
6
- $primary: core.daff-map-get($theme, primary);
7
- $secondary: core.daff-map-get($theme, secondary);
8
- $tertiary: core.daff-map-get($theme, tertiary);
9
6
  $info: core.daff-map-get($theme, informational);
10
7
  $warn: core.daff-map-get($theme, warn);
11
8
  $critical: core.daff-map-get($theme, critical);
12
9
  $success: core.daff-map-get($theme, success);
13
10
  $neutral: core.daff-map-get($theme, 'core', 'neutral');
14
11
  $base: core.daff-map-get($theme, 'core', 'base');
15
- $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
16
- $white: core.daff-map-get($theme, 'core', 'white');
17
12
  $black: core.daff-map-get($theme, 'core', 'black');
13
+ $white: core.daff-map-get($theme, 'core', 'white');
14
+ $type: core.daff-map-get($theme, 'core', 'type');
18
15
 
19
16
  .daff-toast {
20
- background: theming.daff-illuminate($base, $neutral, 1);
21
- box-shadow: 0 -16px 24px -4px rgba($black, 0.04), 0 8px 24px -4px rgba($black, 0.1);
22
- color: theming.daff-text-contrast($base);
17
+ @include theming.light($type) {
18
+ background: theming.daff-color($neutral, 10);
19
+ box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
20
+ 0 8px 24px -4px rgba($black, 0.1);
21
+ color: theming.daff-text-contrast($base);
23
22
 
24
- &::before {
25
- background: theming.daff-illuminate($base, $neutral, 4);
26
- }
23
+ &::before {
24
+ background: theming.daff-color($neutral, 40);
25
+ }
26
+
27
+ &.daff-success {
28
+ background: theming.daff-color($success, 10);
29
+ color: $black;
27
30
 
28
- &.daff-success {
29
- background: theming.daff-color($success, 10);
30
- color: $black;
31
+ .daff-prefix {
32
+ color: theming.daff-color($success);
33
+ }
31
34
 
32
- .daff-prefix {
33
- color: theming.daff-color($success);
35
+ &::before {
36
+ background: theming.daff-color($success);
37
+ }
34
38
  }
35
39
 
36
- &::before {
37
- background: theming.daff-color($success);
40
+ &.daff-warn {
41
+ background: theming.daff-color($warn, 10);
42
+ color: $black;
43
+
44
+ .daff-prefix {
45
+ color: theming.daff-color($warn);
46
+ }
47
+
48
+ &::before {
49
+ background: theming.daff-color($warn);
50
+ }
38
51
  }
39
- }
40
52
 
41
- &.daff-warn {
42
- background: theming.daff-color($warn, 10);
43
- color: $black;
53
+ &.daff-critical {
54
+ background: theming.daff-color($critical, 10);
55
+ color: $black;
56
+
57
+ .daff-prefix {
58
+ color: theming.daff-color($critical);
59
+ }
44
60
 
45
- .daff-prefix {
46
- color: theming.daff-color($warn);
61
+ &::before {
62
+ background: theming.daff-color($critical);
63
+ }
47
64
  }
65
+ }
66
+
67
+ @include theming.dark($type) {
68
+ background: theming.daff-color($neutral, 90);
69
+ box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
70
+ 0 8px 24px -4px rgba($black, 0.1);
71
+ color: theming.daff-text-contrast($base);
48
72
 
49
73
  &::before {
50
- background: theming.daff-color($warn);
74
+ background: theming.daff-color($neutral, 30);
51
75
  }
52
- }
53
76
 
54
- &.daff-critical {
55
- background: theming.daff-color($critical, 10);
56
- color: $black;
77
+ &.daff-success {
78
+ background: theming.daff-color($success, 90);
57
79
 
58
- .daff-prefix {
59
- color: theming.daff-color($critical);
80
+ .daff-prefix {
81
+ color: theming.daff-color($success, 30);
82
+ }
83
+
84
+ &::before {
85
+ background: theming.daff-color($success, 30);
86
+ }
60
87
  }
61
88
 
62
- &::before {
63
- background: theming.daff-color($critical);
89
+ &.daff-warn {
90
+ background: theming.daff-color($warn, 90);
91
+
92
+ .daff-prefix {
93
+ color: theming.daff-color($warn, 30);
94
+ }
95
+
96
+ &::before {
97
+ background: theming.daff-color($warn, 30);
98
+ }
99
+ }
100
+
101
+ &.daff-critical {
102
+ background: theming.daff-color($critical, 90);
103
+
104
+ .daff-prefix {
105
+ color: theming.daff-color($critical, 30);
106
+ }
107
+
108
+ &::before {
109
+ background: theming.daff-color($critical, 30);
110
+ }
64
111
  }
65
112
  }
66
113
  }
package/toast/toast/toast-template.component.d.ts CHANGED
@@ -1,13 +1,15 @@
1
1
  import { ChangeDetectorRef, EventEmitter } from '@angular/core';
2
2
  import { DaffToast } from '../interfaces/toast';
3
+ import { DaffToastOptions } from '../options/daff-toast-options';
3
4
  import { DaffToastPositionService } from '../service/position.service';
4
5
  import * as i0 from "@angular/core";
5
6
  export declare class DaffToastTemplateComponent {
6
7
  private cd;
8
+ private options;
7
9
  private toastPosition;
8
10
  faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
9
11
  private _items;
10
- constructor(cd: ChangeDetectorRef, toastPosition: DaffToastPositionService);
12
+ constructor(cd: ChangeDetectorRef, options: DaffToastOptions, toastPosition: DaffToastPositionService);
11
13
  closeToast: EventEmitter<void>;
12
14
  onCloseToast(event: Event): void;
13
15
  get slideAnimation(): any;
package/tree/src/tree-theme.scss CHANGED
@@ -11,27 +11,53 @@
11
11
  $white: core.daff-map-get($theme, 'core', 'white');
12
12
  $black: core.daff-map-get($theme, 'core', 'black');
13
13
  $neutral: core.daff-map-get($theme, 'core', 'neutral');
14
+ $type: core.daff-map-get($theme, 'core', 'type');
14
15
 
16
+ // stylelint-disable selector-class-pattern
15
17
  .daff-tree-item {
16
18
  $root: &;
17
- background-color: $base;
18
- color: theming.daff-illuminate($base-contrast, $neutral, 2);
19
19
 
20
- &:hover {
21
- background-color: theming.daff-illuminate($base, $neutral, 2);
22
- }
20
+ @include theming.light($type) {
21
+ background-color: $base;
22
+ color: theming.daff-color($neutral, 90);
23
+
24
+ &:hover {
25
+ background-color: theming.daff-color($neutral, 20);
26
+ }
27
+
28
+ &::after {
29
+ border-color: $base;
30
+ }
31
+
32
+ &.selected {
33
+ background-color: theming.daff-color($neutral, 20);
34
+ color: $base-contrast;
23
35
 
24
- &::after {
25
- border-color: currentColor;
36
+ &::before {
37
+ background-color: theming.daff-color($primary);
38
+ }
39
+ }
26
40
  }
27
41
 
28
- // stylelint-disable selector-class-pattern
29
- &.selected {
30
- background-color: theming.daff-illuminate($base, $neutral, 2);
31
- color: $base-contrast;
42
+ @include theming.dark($type) {
43
+ background-color: $base;
44
+ color: theming.daff-color($neutral, 20);
45
+
46
+ &:hover {
47
+ background-color: theming.daff-color($neutral, 90);
48
+ }
49
+
50
+ &::after {
51
+ border-color: $base;
52
+ }
53
+
54
+ &.selected {
55
+ background-color: theming.daff-color($neutral, 90);
56
+ color: $base-contrast;
32
57
 
33
- &::before {
34
- background-color: theming.daff-color($primary);
58
+ &::before {
59
+ background-color: theming.daff-color($primary);
60
+ }
35
61
  }
36
62
  }
37
63
  }