@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/button/src/button/icon/icon-theme.scss CHANGED
@@ -36,105 +36,209 @@
36
36
  $white: core.daff-map-get($theme, 'core', 'white');
37
37
  $black: core.daff-map-get($theme, 'core', 'black');
38
38
  $neutral: core.daff-map-get($theme, 'core', 'neutral');
39
+ $type: core.daff-map-get($theme, 'core', 'type');
39
40
 
40
41
  .daff-icon-button {
41
- @include daff-icon-button-theme-variant(
42
- theming.daff-illuminate($base, $neutral, 5),
43
- theming.daff-illuminate($base, $neutral, 6),
44
- theming.daff-illuminate($base, $neutral, 7)
45
- );
46
-
47
- &.daff-primary {
42
+ @include theming.light($type) {
48
43
  @include daff-icon-button-theme-variant(
49
- theming.daff-color($primary),
50
- theming.daff-color($primary, 70),
51
- theming.daff-color($primary, 80)
44
+ theming.daff-color($neutral, 50),
45
+ theming.daff-color($neutral, 60),
46
+ theming.daff-color($neutral, 70)
52
47
  );
53
- }
54
48
 
55
- &.daff-secondary {
56
- @include daff-icon-button-theme-variant(
57
- theming.daff-color($secondary),
58
- theming.daff-color($secondary, 70),
59
- theming.daff-color($secondary, 80)
60
- );
61
- }
49
+ &.daff-primary {
50
+ @include daff-icon-button-theme-variant(
51
+ theming.daff-color($primary),
52
+ theming.daff-color($primary, 70),
53
+ theming.daff-color($primary, 80)
54
+ );
55
+ }
62
56
 
63
- &.daff-tertiary {
64
- @include daff-icon-button-theme-variant(
65
- theming.daff-color($tertiary),
66
- theming.daff-color($tertiary, 70),
67
- theming.daff-color($tertiary, 80)
68
- );
69
- }
57
+ &.daff-secondary {
58
+ @include daff-icon-button-theme-variant(
59
+ theming.daff-color($secondary),
60
+ theming.daff-color($secondary, 70),
61
+ theming.daff-color($secondary, 80)
62
+ );
63
+ }
70
64
 
71
- &.daff-black {
72
- @include daff-icon-button-theme-variant(
73
- $black,
74
- theming.daff-color($neutral, 100),
75
- theming.daff-color($neutral, 80)
76
- );
65
+ &.daff-tertiary {
66
+ @include daff-icon-button-theme-variant(
67
+ theming.daff-color($tertiary),
68
+ theming.daff-color($tertiary, 70),
69
+ theming.daff-color($tertiary, 80)
70
+ );
71
+ }
72
+
73
+ &.daff-black {
74
+ @include daff-icon-button-theme-variant(
75
+ $black,
76
+ theming.daff-color($neutral, 90),
77
+ theming.daff-color($neutral, 80)
78
+ );
79
+ }
80
+
81
+ &.daff-white {
82
+ @include daff-icon-button-theme-variant(
83
+ $white,
84
+ theming.daff-color($neutral, 20),
85
+ theming.daff-color($neutral, 30)
86
+ );
87
+ }
88
+
89
+ &.daff-theme {
90
+ @include daff-icon-button-theme-variant(
91
+ $base,
92
+ theming.daff-color($neutral, 10),
93
+ theming.daff-color($neutral, 20)
94
+ );
95
+ }
96
+
97
+ &.daff-theme-contrast {
98
+ @include daff-icon-button-theme-variant(
99
+ $base-contrast,
100
+ theming.daff-color($neutral, 90),
101
+ theming.daff-color($neutral, 80)
102
+ );
103
+ }
104
+
105
+ &[disabled],
106
+ &.disabled {
107
+ @include daff-icon-button-theme-variant(
108
+ theming.daff-color($neutral, 40),
109
+ theming.daff-color($neutral, 40),
110
+ theming.daff-color($neutral, 40)
111
+ );
112
+
113
+ &:hover {
114
+ color: theming.daff-color($neutral, 40);
115
+ }
116
+ }
117
+
118
+ &.daff-warn {
119
+ @include daff-icon-button-theme-variant(
120
+ theming.daff-color($warn),
121
+ theming.daff-color($warn, 70),
122
+ theming.daff-color($warn, 80)
123
+ );
124
+ }
125
+
126
+ &.daff-critical {
127
+ @include daff-icon-button-theme-variant(
128
+ theming.daff-color($critical),
129
+ theming.daff-color($critical, 70),
130
+ theming.daff-color($critical, 80)
131
+ );
132
+ }
133
+
134
+ &.daff-success {
135
+ @include daff-icon-button-theme-variant(
136
+ theming.daff-color($success),
137
+ theming.daff-color($success, 70),
138
+ theming.daff-color($success, 80)
139
+ );
140
+ }
77
141
  }
78
142
 
79
- &.daff-white {
143
+ @include theming.dark($type) {
80
144
  @include daff-icon-button-theme-variant(
81
- $white,
82
- theming.daff-color($neutral, 20),
145
+ theming.daff-color($neutral, 50),
146
+ theming.daff-color($neutral, 40),
83
147
  theming.daff-color($neutral, 30)
84
148
  );
85
- }
86
149
 
87
- &.daff-theme {
88
- @include daff-icon-button-theme-variant(
89
- $base,
90
- theming.daff-illuminate($base, $neutral, 1),
91
- theming.daff-illuminate($base, $neutral, 2)
92
- );
93
- }
150
+ &.daff-primary {
151
+ @include daff-icon-button-theme-variant(
152
+ theming.daff-color($primary),
153
+ theming.daff-color($primary, 40),
154
+ theming.daff-color($primary, 30)
155
+ );
156
+ }
94
157
 
95
- &.daff-theme-contrast {
96
- @include daff-icon-button-theme-variant(
97
- $base-contrast,
98
- theming.daff-illuminate($base-contrast, $neutral, 1),
99
- theming.daff-illuminate($base-contrast, $neutral, 2)
100
- );
101
- }
158
+ &.daff-secondary {
159
+ @include daff-icon-button-theme-variant(
160
+ theming.daff-color($secondary),
161
+ theming.daff-color($secondary, 40),
162
+ theming.daff-color($secondary, 30)
163
+ );
164
+ }
102
165
 
103
- &[disabled],
104
- &.disabled {
105
- @include daff-icon-button-theme-variant(
106
- theming.daff-illuminate($base, $neutral, 4),
107
- theming.daff-illuminate($base, $neutral, 4),
108
- theming.daff-illuminate($base, $neutral, 4)
109
- );
166
+ &.daff-tertiary {
167
+ @include daff-icon-button-theme-variant(
168
+ theming.daff-color($tertiary),
169
+ theming.daff-color($tertiary, 40),
170
+ theming.daff-color($tertiary, 30)
171
+ );
172
+ }
110
173
 
111
- &:hover {
112
- color: theming.daff-illuminate($base, $neutral, 4);
174
+ &.daff-black {
175
+ @include daff-icon-button-theme-variant(
176
+ $black,
177
+ theming.daff-color($neutral, 100),
178
+ theming.daff-color($neutral, 80)
179
+ );
113
180
  }
114
- }
115
181
 
116
- &.daff-warn {
117
- @include daff-icon-button-theme-variant(
118
- theming.daff-color($warn),
119
- theming.daff-color($warn, 70),
120
- theming.daff-color($warn, 80)
121
- );
122
- }
182
+ &.daff-white {
183
+ @include daff-icon-button-theme-variant(
184
+ $white,
185
+ theming.daff-color($neutral, 20),
186
+ theming.daff-color($neutral, 30)
187
+ );
188
+ }
123
189
 
124
- &.daff-critical {
125
- @include daff-icon-button-theme-variant(
126
- theming.daff-color($critical),
127
- theming.daff-color($critical, 70),
128
- theming.daff-color($critical, 80)
129
- );
130
- }
190
+ &.daff-theme {
191
+ @include daff-icon-button-theme-variant(
192
+ $base,
193
+ theming.daff-color($neutral, 100),
194
+ theming.daff-color($neutral, 80)
195
+ );
196
+ }
131
197
 
132
- &.daff-success {
133
- @include daff-icon-button-theme-variant(
134
- theming.daff-color($success),
135
- theming.daff-color($success, 70),
136
- theming.daff-color($success, 80)
137
- );
198
+ &.daff-theme-contrast {
199
+ @include daff-icon-button-theme-variant(
200
+ $base-contrast,
201
+ theming.daff-color($neutral, 20),
202
+ theming.daff-color($neutral, 30)
203
+ );
204
+ }
205
+
206
+ &[disabled],
207
+ &.disabled {
208
+ @include daff-icon-button-theme-variant(
209
+ theming.daff-color($neutral, 40),
210
+ theming.daff-color($neutral, 40),
211
+ theming.daff-color($neutral, 40)
212
+ );
213
+
214
+ &:hover {
215
+ color: theming.daff-color($neutral, 40);
216
+ }
217
+ }
218
+
219
+ &.daff-warn {
220
+ @include daff-icon-button-theme-variant(
221
+ theming.daff-color($warn),
222
+ theming.daff-color($warn, 40),
223
+ theming.daff-color($warn, 30)
224
+ );
225
+ }
226
+
227
+ &.daff-critical {
228
+ @include daff-icon-button-theme-variant(
229
+ theming.daff-color($critical),
230
+ theming.daff-color($critical, 40),
231
+ theming.daff-color($critical, 30)
232
+ );
233
+ }
234
+
235
+ &.daff-success {
236
+ @include daff-icon-button-theme-variant(
237
+ theming.daff-color($success),
238
+ theming.daff-color($success, 40),
239
+ theming.daff-color($success, 30)
240
+ );
241
+ }
138
242
  }
139
243
  }
140
244
  }
package/button/src/button/stroked/stroked-theme.scss CHANGED
@@ -35,16 +35,16 @@
35
35
 
36
36
  .daff-stroked-button {
37
37
  background: transparent;
38
- border: 1px solid theming.daff-illuminate($base, $neutral, 5);
38
+ border: 1px solid theming.daff-color($neutral, 50);
39
39
  color: currentColor;
40
40
 
41
41
  &::after {
42
- background: rgba(theming.daff-illuminate($base, $neutral, 5), 0.1);
42
+ background: rgba(theming.daff-color($neutral, 50), 0.1);
43
43
  }
44
44
 
45
45
  &:active {
46
46
  &::after {
47
- background: rgba(theming.daff-illuminate($base, $neutral, 5), 0.2);
47
+ background: rgba(theming.daff-color($neutral, 50), 0.2);
48
48
  }
49
49
  }
50
50
 
@@ -86,11 +86,11 @@
86
86
  &[disabled],
87
87
  &.disabled {
88
88
  background-color: transparent;
89
- border-color: theming.daff-illuminate($base, $neutral, 3);
90
- color: theming.daff-illuminate($base, $neutral, 5);
89
+ border-color: theming.daff-color($neutral, 30);
90
+ color: theming.daff-color($neutral, 50);
91
91
 
92
92
  &:hover {
93
- color: theming.daff-illuminate($base, $neutral, 5);
93
+ color: theming.daff-color($neutral, 50);
94
94
 
95
95
  &::after {
96
96
  background-color: transparent;
@@ -154,11 +154,11 @@
154
154
  &[disabled],
155
155
  &.disabled {
156
156
  background-color: transparent;
157
- border-color: theming.daff-illuminate($base, $neutral, 3);
158
- color: theming.daff-illuminate($base, $neutral, 5);
157
+ border-color: theming.daff-color($neutral, 70);
158
+ color: theming.daff-color($neutral);
159
159
 
160
160
  &:hover {
161
- color: theming.daff-illuminate($base, $neutral, 5);
161
+ color: theming.daff-color($neutral);
162
162
 
163
163
  &::after {
164
164
  background-color: transparent;
package/button/src/button/underline/underline-theme.scss CHANGED
@@ -68,7 +68,7 @@
68
68
  &[disabled],
69
69
  &.disabled {
70
70
  @include daff-underline-button-theme-variant(
71
- theming.daff-illuminate($base, $neutral, 4)
71
+ theming.daff-color($neutral, 40)
72
72
  );
73
73
  }
74
74
 
@@ -131,7 +131,7 @@
131
131
  &[disabled],
132
132
  &.disabled {
133
133
  @include daff-underline-button-theme-variant(
134
- theming.daff-illuminate($base, $neutral, 4)
134
+ theming.daff-color($neutral, 60)
135
135
  );
136
136
  }
137
137
 
package/card/examples/card-theming/card-theming.component.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { UntypedFormControl } from '@angular/forms';
2
2
  import * as i0 from "@angular/core";
3
3
  export declare class CardThemingComponent {
4
- colorControl: UntypedFormControl;
4
+ cardControl: UntypedFormControl;
5
+ strokedCardControl: UntypedFormControl;
5
6
  options: {
6
7
  value: string;
7
8
  label: string;
package/card/examples/public_api.d.ts CHANGED
@@ -4,5 +4,5 @@ import { CardThemingComponent } from './card-theming/card-theming.component';
4
4
  import { LinkableCardComponent } from './linkable-card/linkable-card.component';
5
5
  import { RaisedCardComponent } from './raised-card/raised-card.component';
6
6
  import { StrokedCardComponent } from './stroked-card/stroked-card.component';
7
- export declare const CARD_EXAMPLES: (typeof BasicCardComponent | typeof CardThemingComponent | typeof LinkableCardComponent)[];
7
+ export declare const CARD_EXAMPLES: (typeof BasicCardComponent | typeof CardThemingComponent | typeof LinkableCardComponent | typeof RaisedCardComponent)[];
8
8
  export { BasicCardComponent, CardThemingComponent, LinkableCardComponent, RaisedCardComponent, StrokedCardComponent, CardOrientationComponent, };
package/card/src/card/stroked/stroked-theme.scss CHANGED
@@ -2,6 +2,28 @@
2
2
  @use '../../../../scss/core';
3
3
  @use '../../../../scss/theming';
4
4
 
5
+ @mixin stroked-card-theme-variant($color) {
6
+ border: 1px solid $color;
7
+ color: $color;
8
+ }
9
+
10
+ @mixin linkable-stroked-card-theme-variant($hover-color, $opacity: 0.08) {
11
+ .daff-card__wrapper {
12
+ &::after {
13
+ background: rgba($hover-color, $opacity);
14
+ }
15
+ }
16
+
17
+ &:hover,
18
+ &:focus {
19
+ .daff-card__wrapper {
20
+ &::after {
21
+ opacity: 1;
22
+ }
23
+ }
24
+ }
25
+ }
26
+
5
27
  @mixin daff-stroked-card-theme($theme) {
6
28
  $primary: core.daff-map-get($theme, primary);
7
29
  $secondary: core.daff-map-get($theme, secondary);
@@ -11,36 +33,103 @@
11
33
  $white: core.daff-map-get($theme, 'core', 'white');
12
34
  $black: core.daff-map-get($theme, 'core', 'black');
13
35
  $neutral: core.daff-map-get($theme, 'core', 'neutral');
36
+ $type: core.daff-map-get($theme, 'core', 'type');
14
37
 
15
38
  .daff-stroked-card {
16
- border: 1px solid theming.daff-illuminate($base, $neutral, 2);
17
-
18
39
  &.daff-primary {
19
- border: 1px solid theming.daff-illuminate($base-contrast, $primary, 3);
40
+ @include stroked-card-theme-variant(theming.daff-color($primary));
20
41
  }
21
42
 
22
43
  &.daff-secondary {
23
- border: 1px solid theming.daff-illuminate($base-contrast, $secondary, 3);
44
+ @include stroked-card-theme-variant(theming.daff-color($secondary));
24
45
  }
25
46
 
26
47
  &.daff-tertiary {
27
- border: 1px solid theming.daff-illuminate($base-contrast, $tertiary, 3);
48
+ @include stroked-card-theme-variant(theming.daff-color($tertiary));
28
49
  }
29
50
 
30
- &.daff-theme {
31
- border: 1px solid theming.daff-illuminate($base, $neutral, 2);
51
+ &.daff-dark {
52
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 90));
32
53
  }
33
54
 
34
- &.daff-theme-contrast {
35
- border: 1px solid theming.daff-illuminate($base-contrast, $neutral, 2);
55
+ &.daff-light {
56
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 20));
36
57
  }
37
58
 
38
- &.daff-black {
39
- border: 1px solid theming.daff-color($neutral, 90);
59
+ @include theming.light($type) {
60
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 20));
61
+ color: $base-contrast;
62
+
63
+ &.daff-theme {
64
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 20));
65
+ color: $base-contrast;
66
+ }
67
+
68
+ &.daff-theme-contrast {
69
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 90));
70
+ }
40
71
  }
41
72
 
42
- &.daff-white {
43
- border: 1px solid theming.daff-color($neutral, 20);
73
+ @include theming.dark($type) {
74
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 90));
75
+ color: $base-contrast;
76
+
77
+ &.daff-theme {
78
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 90));
79
+ color: $base-contrast;
80
+ }
81
+
82
+ &.daff-theme-contrast {
83
+ @include stroked-card-theme-variant(theming.daff-color($neutral, 20));
84
+ }
85
+ }
86
+ }
87
+
88
+ a {
89
+ &.daff-stroked-card {
90
+ @include theming.light($type) {
91
+ @include linkable-stroked-card-theme-variant(
92
+ theming.daff-color($neutral, 20),
93
+ 0.2
94
+ );
95
+ }
96
+
97
+ @include theming.dark($type) {
98
+ @include linkable-stroked-card-theme-variant(
99
+ theming.daff-color($neutral, 90),
100
+ 0.2
101
+ );
102
+ }
103
+
104
+ &.daff-primary {
105
+ @include linkable-stroked-card-theme-variant(
106
+ theming.daff-color($primary)
107
+ );
108
+ }
109
+
110
+ &.daff-secondary {
111
+ @include linkable-stroked-card-theme-variant(
112
+ theming.daff-color($secondary)
113
+ );
114
+ }
115
+
116
+ &.daff-tertiary {
117
+ @include linkable-stroked-card-theme-variant(
118
+ theming.daff-color($tertiary)
119
+ );
120
+ }
121
+
122
+ &.daff-dark {
123
+ @include linkable-stroked-card-theme-variant(
124
+ theming.daff-color($neutral, 90)
125
+ );
126
+ }
127
+
128
+ &.daff-light {
129
+ @include linkable-stroked-card-theme-variant(
130
+ theming.daff-color($neutral, 20)
131
+ );
132
+ }
44
133
  }
45
134
  }
46
135
  }