@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/accordion/src/accordion-theme.scss CHANGED
@@ -5,17 +5,39 @@
5
5
  @mixin daff-accordion-theme($theme) {
6
6
  $neutral: core.daff-map-get($theme, 'core', 'neutral');
7
7
  $base: core.daff-map-get($theme, 'core', 'base');
8
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
9
+ $type: core.daff-map-get($theme, 'core', 'type');
8
10
 
9
11
  .daff-accordion-item {
10
- border-top: 1px solid theming.daff-illuminate($base, $neutral, 2);
12
+ @include theming.light($type) {
13
+ border-top: 1px solid theming.daff-color($neutral, 20);
11
14
 
12
- &:last-child {
13
- border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
15
+ &:last-child {
16
+ border-bottom: 1px solid theming.daff-color($neutral, 20);
17
+ }
18
+
19
+ .daff-accordion-item__header {
20
+ color: $base-contrast;
21
+
22
+ &::after {
23
+ border-color: $base-contrast;
24
+ }
25
+ }
14
26
  }
15
27
 
16
- &__header {
17
- &::after {
18
- border-color: currentColor;
28
+ @include theming.dark($type) {
29
+ border-top: 1px solid theming.daff-color($neutral, 80);
30
+
31
+ &:last-child {
32
+ border-bottom: 1px solid theming.daff-color($neutral, 80);
33
+ }
34
+
35
+ .daff-accordion-item__header {
36
+ color: $base-contrast;
37
+
38
+ &::after {
39
+ border-color: $base-contrast;
40
+ }
19
41
  }
20
42
  }
21
43
  }
package/article/src/article-theme.scss CHANGED
@@ -5,104 +5,158 @@
5
5
 
6
6
  @mixin daff-article-theme($theme) {
7
7
  $primary: core.daff-map-get($theme, primary);
8
- $secondary: core.daff-map-get($theme, secondary);
9
- $tertiary: core.daff-map-get($theme, tertiary);
10
- $base: core.daff-map-get($theme, 'core', 'base');
11
- $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
12
- $white: core.daff-map-get($theme, 'core', 'white');
13
- $black: core.daff-map-get($theme, 'core', 'black');
14
8
  $neutral: core.daff-map-get($theme, 'core', 'neutral');
9
+ $type: core.daff-map-get($theme, 'core', 'type');
15
10
 
16
- $text-color: theming.daff-illuminate($base-contrast, $neutral, 2);
17
- $table-border-color: theming.daff-illuminate($base, $neutral, 2);
11
+ $link-color-light: theming.daff-color($primary);
12
+ $link-color-dark: theming.daff-color($primary, 40);
13
+ $text-color-light: theming.daff-color($neutral, 90);
14
+ $text-color-dark: theming.daff-color($neutral, 10);
15
+ $table-border-light: theming.daff-color($neutral, 20);
16
+ $table-border-dark: theming.daff-color($neutral, 80);
18
17
 
19
18
  .daff-article {
20
- color: $text-color;
19
+ @include theming.light($type) {
20
+ color: $text-color-light;
21
21
 
22
- &__meta {
23
- color: theming.daff-illuminate($base-contrast, $neutral, 3);
24
- }
25
-
26
- @include stopsArticleCascade(a) {
27
- color: theming.daff-color($primary);
22
+ @include stopsArticleCascade(a) {
23
+ color: $link-color-light;
24
+ text-decoration-color: $link-color-light;
25
+ }
28
26
 
29
27
  code {
30
- background: theming.daff-illuminate($base, $primary, 1);
31
- color: theming.daff-illuminate($base-contrast, $primary, 4);
28
+ background: rgba(theming.daff-color($neutral, 20), 0.5);
32
29
  }
33
- }
34
30
 
35
- pre {
36
- background: theming.daff-illuminate($base, $neutral, 1);
37
- border: 1px solid theming.daff-illuminate($base, $neutral, 2);
38
- color: $base-contrast;
31
+ pre {
32
+ background: rgba(theming.daff-color($neutral, 20), 0.3);
33
+ border: 1px solid theming.daff-color($neutral, 20);
39
34
 
40
- code {
41
- background: none;
42
- border: none;
35
+ code {
36
+ background: none;
37
+ border: none;
38
+ }
39
+ }
40
+
41
+ hr {
42
+ background: theming.daff-color($neutral, 20);
43
43
  }
44
- }
45
44
 
46
- code {
47
- background: rgba(theming.daff-illuminate($base, $neutral, 2), 0.5);
48
- color: $base-contrast;
45
+ blockquote {
46
+ background: rgba(theming.daff-color($primary), 0.1);
47
+ border-left: 4px solid theming.daff-color($primary, 50);
48
+ color: theming.daff-color($primary, 100);
49
49
 
50
- @include stopsArticleCascade(a) {
51
- color: theming.daff-color($primary, 70);
50
+ code {
51
+ background: rgba(theming.daff-color($primary), 0.12);
52
+ color: theming.daff-color($primary, 100);
53
+
54
+ @include stopsArticleCascade(a) {
55
+ color: theming.daff-color($primary, 70);
56
+ text-decoration-color: theming.daff-color($primary, 70);
57
+ }
58
+ }
52
59
  }
53
- }
54
60
 
55
- hr {
56
- background: theming.daff-illuminate($base, $neutral, 2);
57
- }
61
+ table {
62
+ border: 1px solid $table-border-light;
63
+
64
+ th {
65
+ background: theming.daff-color($neutral, 10);
66
+ }
58
67
 
59
- blockquote {
60
- background: rgba(theming.daff-color($primary), 0.1);
61
- border-left: 4px solid theming.daff-illuminate($base, $primary, 5);
62
- color: theming.daff-illuminate($base-contrast, $primary, 1);
68
+ th,
69
+ td {
70
+ &:not(:last-child) {
71
+ border-right: 1px solid $table-border-light;
72
+ }
73
+ }
63
74
 
64
- code {
65
- background: rgba(theming.daff-color($primary), 0.15);
66
- color: $base-contrast;
75
+ thead {
76
+ th {
77
+ border-bottom: 1px solid $table-border-light;
78
+ }
79
+ }
80
+
81
+ tr {
82
+ &:not(:last-child) {
83
+ th,
84
+ td {
85
+ border-bottom: 1px solid $table-border-light;
86
+ }
87
+ }
88
+ }
67
89
  }
90
+ }
91
+
92
+ @include theming.dark($type) {
93
+ color: $text-color-dark;
68
94
 
69
95
  @include stopsArticleCascade(a) {
70
- color: theming.daff-illuminate($base, $primary, 7);
96
+ color: $link-color-dark;
97
+ text-decoration-color: $link-color-dark;
71
98
  }
72
99
 
73
- @include stopsArticleCascade(a) {
100
+ code {
101
+ background: rgba(theming.daff-color($neutral, 20), 0.15);
102
+ }
103
+
104
+ pre {
105
+ background: rgba(theming.daff-color($neutral, 20), 0.15);
106
+ border: 1px solid rgba(theming.daff-color($neutral, 20), 0.15);
107
+
74
108
  code {
75
- background: rgba(theming.daff-color($primary), 0.15);
76
- color: theming.daff-illuminate($base-contrast, $primary, 4);
109
+ background: none;
110
+ border: none;
77
111
  }
78
112
  }
79
- }
80
-
81
- table {
82
- border: 1px solid $table-border-color;
83
113
 
84
- th {
85
- background: theming.daff-illuminate($base, $neutral, 1);
114
+ hr {
115
+ background: theming.daff-color($neutral, 80);
86
116
  }
87
117
 
88
- th,
89
- td {
90
- &:not(:last-child) {
91
- border-right: 1px solid $table-border-color;
118
+ blockquote {
119
+ background: rgba(theming.daff-color($primary), 0.12);
120
+ border-left: 4px solid theming.daff-color($primary, 40);
121
+ color: theming.daff-color($primary, 10);
122
+
123
+ code {
124
+ background: rgba(theming.daff-color($primary), 0.18);
125
+ color: theming.daff-color($primary, 10);
126
+
127
+ @include stopsArticleCascade(a) {
128
+ color: theming.daff-color($primary, 40);
129
+ text-decoration-color: theming.daff-color($primary, 40);
130
+ }
92
131
  }
93
132
  }
94
133
 
95
- thead {
134
+ table {
135
+ border: 1px solid $table-border-dark;
136
+
96
137
  th {
97
- border-bottom: 1px solid $table-border-color;
138
+ background: theming.daff-color($neutral, 90);
139
+ }
140
+
141
+ th,
142
+ td {
143
+ &:not(:last-child) {
144
+ border-right: 1px solid $table-border-dark;
145
+ }
146
+ }
147
+
148
+ thead {
149
+ th {
150
+ border-bottom: 1px solid $table-border-dark;
151
+ }
98
152
  }
99
- }
100
153
 
101
- tr {
102
- &:not(:last-child) {
103
- th,
104
- td {
105
- border-bottom: 1px solid $table-border-color;
154
+ tr {
155
+ &:not(:last-child) {
156
+ th,
157
+ td {
158
+ border-bottom: 1px solid $table-border-dark;
159
+ }
106
160
  }
107
161
  }
108
162
  }
package/button/src/button/basic/button-theme.scss CHANGED
@@ -93,30 +93,30 @@
93
93
  &.daff-theme {
94
94
  @include daff-button-theme-variant(
95
95
  $base,
96
- theming.daff-illuminate($base, $neutral, 2),
97
- theming.daff-illuminate($base, $neutral, 3)
96
+ theming.daff-color($neutral, 20),
97
+ theming.daff-color($neutral, 30),
98
98
  );
99
99
  }
100
100
 
101
101
  &.daff-theme-contrast {
102
102
  @include daff-button-theme-variant(
103
103
  $base-contrast,
104
- theming.daff-illuminate($base-contrast, $neutral, 2),
105
- theming.daff-illuminate($base-contrast, $neutral, 3)
104
+ theming.daff-color($neutral, 90),
105
+ theming.daff-color($neutral, 80),
106
106
  );
107
107
  }
108
108
 
109
109
  &[disabled],
110
110
  &.disabled {
111
111
  @include daff-button-theme-variant(
112
- theming.daff-illuminate($base, $neutral, 3),
113
- theming.daff-illuminate($base, $neutral, 3),
114
- theming.daff-illuminate($base, $neutral, 3),
112
+ theming.daff-color($neutral, 30),
113
+ theming.daff-color($neutral, 30),
114
+ theming.daff-color($neutral, 30),
115
115
  );
116
- color: theming.daff-illuminate($base, $neutral, 5);
116
+ color: theming.daff-color($neutral, 50);
117
117
 
118
118
  &:hover {
119
- color: theming.daff-illuminate($base, $neutral, 5);
119
+ color: theming.daff-color($neutral, 50);
120
120
  }
121
121
  }
122
122
 
@@ -195,26 +195,31 @@
195
195
  &.daff-theme {
196
196
  @include daff-button-theme-variant(
197
197
  $base,
198
- theming.daff-illuminate($base, $neutral, 2),
199
- theming.daff-illuminate($base, $neutral, 3)
198
+ theming.daff-color($neutral, 90),
199
+ theming.daff-color($neutral, 80),
200
200
  );
201
201
  }
202
202
 
203
203
  &.daff-theme-contrast {
204
204
  @include daff-button-theme-variant(
205
205
  $base-contrast,
206
- theming.daff-illuminate($base-contrast, $neutral, 2),
207
- theming.daff-illuminate($base-contrast, $neutral, 3)
206
+ theming.daff-color($neutral, 20),
207
+ theming.daff-color($neutral, 30),
208
208
  );
209
209
  }
210
210
 
211
211
  &[disabled],
212
212
  &.disabled {
213
213
  @include daff-button-theme-variant(
214
- theming.daff-illuminate($base, $neutral, 3),
215
- theming.daff-illuminate($base, $neutral, 3),
216
- theming.daff-illuminate($base, $neutral, 3)
214
+ theming.daff-color($neutral, 70),
215
+ theming.daff-color($neutral, 70),
216
+ theming.daff-color($neutral, 70),
217
217
  );
218
+ color: theming.daff-color($neutral, 50);
219
+
220
+ &:hover {
221
+ color: theming.daff-color($neutral, 50);
222
+ }
218
223
  }
219
224
 
220
225
  &.daff-warn {
package/button/src/button/button-base.scss CHANGED
@@ -37,7 +37,9 @@
37
37
  }
38
38
 
39
39
  .daff-button__loading {
40
- max-width: 1.5rem;
40
+ > * {
41
+ width: 100%;
42
+ }
41
43
  }
42
44
 
43
45
  .daff-button__content {
@@ -72,6 +74,10 @@
72
74
  line-height: 2rem;
73
75
  height: 2rem;
74
76
  padding: 0 1rem;
77
+
78
+ .daff-button__loading {
79
+ width: 1rem;
80
+ }
75
81
  }
76
82
 
77
83
  &.daff-md {
@@ -79,6 +85,10 @@
79
85
  line-height: 3rem;
80
86
  height: 3rem;
81
87
  padding: 0 1.5rem;
88
+
89
+ .daff-button__loading {
90
+ width: 1.5rem;
91
+ }
82
92
  }
83
93
 
84
94
  &.daff-lg {
@@ -86,5 +96,9 @@
86
96
  line-height: 3.5rem;
87
97
  height: 3.5rem;
88
98
  padding: 0 1.5rem;
99
+
100
+ .daff-button__loading {
101
+ width: 2rem;
102
+ }
89
103
  }
90
104
  }
package/button/src/button/flat/flat-theme.scss CHANGED
@@ -81,7 +81,7 @@
81
81
 
82
82
  &[disabled],
83
83
  &.disabled {
84
- color: theming.daff-illuminate($base, $neutral, 5);
84
+ color: theming.daff-color($neutral, 50);
85
85
 
86
86
  &::after {
87
87
  background: transparent;
@@ -164,7 +164,7 @@
164
164
 
165
165
  &[disabled],
166
166
  &.disabled {
167
- color: theming.daff-illuminate($base, $neutral, 5);
167
+ color: theming.daff-color($neutral, 50);
168
168
 
169
169
  &::after {
170
170
  background: transparent;