Skip to content

Commit 82045b7

Browse files
gracetxgaoxelaint
gracetxgao
and
xelaint
authored
feat(design): create daff-map-get function (#3358)
Co-authored-by: xelaint <[email protected]>
1 parent db4e9ef commit 82045b7

File tree

58 files changed

+440
-428
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+440
-428
lines changed

‎apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
@use 'theme' as daff-theme;
33

44
@mixin daffio-feature-comparison-theme($theme) {
5-
$secondary: map.get($theme, secondary);
6-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
7-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
5+
$secondary: daff-theme.daff-map-get($theme, secondary);
6+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
7+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
88

99
.daffio-feature-comparison {
1010
background: $base;

‎apps/daffio/src/app/core/footer/footer/footer-theme.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
@use 'sass:map';
33

44
@mixin daffio-footer-theme($theme) {
5-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
6-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
7-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
8-
$secondary: map.get($theme, secondary);
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
6+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
7+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
8+
$secondary: daff-theme.daff-map-get($theme, secondary);
99

1010
.daffio-footer {
1111
border-top: 1px solid daff-theme.daff-illuminate($base, $neutral, 2);

‎apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'theme' as daff-theme;
22

33
@mixin daffio-simple-footer-theme($theme) {
4-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
6-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
4+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
5+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
6+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
77

88
.daffio-simple-footer {
99
border-top: 1px solid daff-theme.daff-illuminate($base, $neutral, 2);

‎apps/daffio/src/app/core/footer/sub-footer/sub-footer-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use 'theme' as daff-theme;
33

44
@mixin daffio-sub-footer-theme($theme) {
5-
$secondary: map.get($theme, secondary);
5+
$secondary: daff-theme.daff-map-get($theme, secondary);
66

77
.daffio-sub-footer {
88
background: linear-gradient(

‎apps/daffio/src/app/core/header/components/header/header-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use 'theme' as daff-theme;
33

44
@mixin daffio-header-theme($theme) {
5-
$primary: map.get($theme, primary);
5+
$primary: daff-theme.daff-map-get($theme, primary);
66

77
.daffio-header-item {
88
&.active {

‎apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
@use 'theme' as daff-theme;
33

44
@mixin daffio-sidebar-footer-theme($theme) {
5-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
6-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
7-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
8-
$primary: map.get($theme, primary);
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
6+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
7+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
8+
$primary: daff-theme.daff-map-get($theme, primary);
99

1010
.daffio-sidebar-footer {
1111
background: daff-theme.daff-illuminate($base, $neutral, 2);

‎apps/daffio/src/app/design/device/iphone/iphone.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @import 'theme';
22
// @use 'utilities' as *;
33

4-
// $phoneColor: daff-map-deep-get($theme, 'core.base');
4+
// $phoneColor: daff-map-get($theme, "core", "base");
55
// $phoneShadow: daff-illuminate($phoneColor, $daff-neutral, 3);
66

77
// .iphone {

‎apps/daffio/src/app/docs/api/components/api-list-section/api-list-section-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'theme' as daff-theme;
22

33
@mixin daffio-api-list-section-theme($theme) {
4-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
6-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
4+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
5+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
6+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
77

88
.daffio-api-list-section {
99
&__item {

‎apps/daffio/src/app/docs/api/components/api-list/api-list-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'theme' as daff-theme;
22

33
@mixin daffio-api-list-theme($theme) {
4-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
6-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
4+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
5+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
6+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
77

88
.daffio-api-list {
99
&__package-name {

‎apps/daffio/src/app/docs/api/components/api-package/api-package-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'theme' as daff-theme;
22

33
@mixin daffio-api-package-theme($theme) {
4-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
6-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
4+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
5+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
6+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
77

88
.daffio-api-package {
99
&__subpackage-name {

‎apps/daffio/src/app/docs/components/table-of-contents/table-of-contents-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'theme' as daff-theme;
22

33
@mixin daffio-table-of-contents-theme($theme) {
4-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
6-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
4+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
5+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
6+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
77

88
.daffio-table-of-contents {
99
&__item {

‎apps/daffio/src/app/newsletter/newsletter-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'theme' as daff-theme;
22

33
@mixin daffio-newsletter-theme($theme) {
4-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
6-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
4+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
5+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
6+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
77

88
.daffio-newsletter {
99
&__input {

‎apps/daffio/src/scss/type-descriptors/_mixins.scss

+21-9
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
@use 'utilities' as daff;
44

55
// stylelint-disable selector-class-pattern
6-
$primary: map.get(daff-theme.$theme, primary);
7-
$secondary: map.get(daff-theme.$theme, secondary);
8-
$tertiary: map.get(daff-theme.$theme, tertiary);
9-
$base: daff-theme.daff-map-deep-get(daff-theme.$theme, 'core.base');
10-
$base-contrast: daff-theme.daff-map-deep-get(daff-theme.$theme, 'core.base-contrast');
6+
$primary: daff-theme.daff-map-get(daff-theme.$theme, primary);
7+
$secondary: daff-theme.daff-map-get(daff-theme.$theme, secondary);
8+
$tertiary: daff-theme.daff-map-get(daff-theme.$theme, tertiary);
9+
$base: daff-theme.daff-map-get(daff-theme.$theme, 'core', 'base');
10+
$base-contrast: daff-theme.daff-map-get(
11+
daff-theme.$theme,
12+
'core',
13+
'base-contrast'
14+
);
1115

1216
@mixin type-theming($color) {
1317
background: $color;
@@ -35,18 +39,26 @@ $base-contrast: daff-theme.daff-map-deep-get(daff-theme.$theme, 'core.base-contr
3539
}
3640

3741
&.const {
38-
@include type-theming(daff-theme.daff-illuminate($base-contrast, $secondary, 3));
42+
@include type-theming(
43+
daff-theme.daff-illuminate($base-contrast, $secondary, 3)
44+
);
3945
}
4046

4147
&.enum {
42-
@include type-theming(daff-theme.daff-illuminate($base-contrast, $primary, 3));
48+
@include type-theming(
49+
daff-theme.daff-illuminate($base-contrast, $primary, 3)
50+
);
4351
}
4452

4553
&.package {
46-
@include type-theming(daff-theme.daff-illuminate($base-contrast, daff-theme.$daff-yellow, 3));
54+
@include type-theming(
55+
daff-theme.daff-illuminate($base-contrast, daff-theme.$daff-yellow, 3)
56+
);
4757
}
4858

4959
&.function {
50-
@include type-theming(daff-theme.daff-illuminate($base-contrast, $tertiary, 3));
60+
@include type-theming(
61+
daff-theme.daff-illuminate($base-contrast, $tertiary, 3)
62+
);
5163
}
5264
}

‎apps/demo/src/scss/demo-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ $tertiary: daff-theme.daff-configure-palette(daff-theme.$daff-turquoise, 60);
77

88
$theme: daff-theme.daff-configure-theme($primary, $secondary, $tertiary, 'light');
99

10-
$black: daff-theme.daff-map-deep-get($theme, 'core.black');
11-
$white: daff-theme.daff-map-deep-get($theme, 'core.white');
12-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
10+
$black: daff-theme.daff-map-get($theme, 'core', 'black');
11+
$white: daff-theme.daff-map-get($theme, 'core', 'white');
12+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');

‎apps/design-land/src/app/core/code-preview/component/code-preview-theme.scss

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@use 'sass:map';
22
@use 'theme' as daff-theme;
33

4-
54
@mixin code-preview-theme($theme) {
6-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
7-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
8-
$primary: map.get(daff-theme.$theme, primary);
9-
$font-color: daff-theme.daff-map-deep-get($theme, 'core.font-color');
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
6+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
7+
$primary: daff-theme.daff-map-get(daff-theme.$theme, primary);
8+
$font-color: daff-theme.daff-map-get($theme, 'core', 'font-color');
109
$border: 1px solid daff-theme.daff-illuminate($base, $neutral, 2);
1110

1211
.design-land-code-preview {
@@ -28,4 +27,4 @@
2827
}
2928
}
3029
}
31-
}
30+
}

‎apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport-theme.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
@use 'theme' as daff-theme;
33

44
@mixin sidebar-viewport-theme($theme) {
5-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
6-
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
7-
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
8-
$primary: map.get($theme, primary);
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
6+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
7+
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
8+
$primary: daff-theme.daff-map-get($theme, primary);
99

1010
.design-land-sidebar-viewport {
1111
&__sidebar {
@@ -25,4 +25,4 @@
2525
color: $base;
2626
}
2727
}
28-
}
28+
}

‎apps/design-land/src/app/foundations/color/color-theme.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
@use 'theme' as daff-theme;
22

33
@mixin color-theme($theme) {
4-
$white: daff-theme.daff-map-deep-get($theme, 'core.white');
5-
$black: daff-theme.daff-map-deep-get($theme, 'core.black');
4+
$white: daff-theme.daff-map-get($theme, 'core', 'white');
5+
$black: daff-theme.daff-map-get($theme, 'core', 'black');
66

77
.dl-color {
88
&__palette {
99
> * {
10-
&:nth-child(n+6) {
10+
&:nth-child(n + 6) {
1111
color: daff-theme.$white;
1212
}
1313
}
14-
14+
1515
&.brand-yellow {
1616
> * {
1717
color: daff-theme.$black;
18-
18+
1919
&:last-child {
2020
color: daff-theme.$white;
2121
}

‎apps/design-land/src/app/typography/typography-theme.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
@use 'theme' as daff-theme;
33

44
@mixin typography-theme($theme) {
5-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
66

77
.dl-typography {
88
&__typescale-card {
99
border: 1px solid daff-theme.daff-color($neutral, 20);
1010
}
11-
11+
1212
&__desktop-subheading,
1313
&__mobile-subheading {
1414
color: daff-theme.daff-color($neutral);
1515
}
16-
}
17-
}
16+
}
17+
}

‎libs/branding/src/lib/logo/logo-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
@use 'theme' as daff-theme;
33

44
@mixin daff-logo-theme($theme) {
5-
$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
6-
$base: branding-theme.daff-map-deep-get($theme, 'core.base');
7-
$base-contrast: branding-theme.daff-map-deep-get($theme, 'core.base-contrast');
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
6+
$base: branding-theme.daff-map-get($theme, 'core', 'base');
7+
$base-contrast: branding-theme.daff-map-get($theme, 'core', 'base-contrast');
88

99
.daff-branding-logo {
1010
fill: daff-theme.daff-illuminate($base-contrast, $neutral, 1);

‎libs/branding/src/scss/branding-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ $tertiary-dark: daff-theme.daff-configure-palette(daff-theme.$daff-turquoise, 50
1313

1414
$theme-dark: daff-theme.daff-configure-theme($primary-dark, $secondary-dark, $tertiary-dark, 'dark');
1515

16-
$black: daff-theme.daff-map-deep-get($theme, 'core.black');
17-
$white: daff-theme.daff-map-deep-get($theme, 'core.white');
16+
$black: daff-theme.daff-map-get($theme, 'core', 'black');
17+
$white: daff-theme.daff-map-get($theme, 'core', 'white');

‎libs/design/accordion/src/accordion-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
@use '../../scss/theming';
44

55
@mixin daff-accordion-theme($theme) {
6-
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
7-
$base: core.daff-map-deep-get($theme, 'core.base');
6+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
7+
$base: core.daff-map-get($theme, 'core', 'base');
88

99
.daff-accordion-item {
1010
border-top: 1px solid theming.daff-illuminate($base, $neutral, 2);

‎libs/design/article/src/article-theme.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
@use '../../scss/theming';
55

66
@mixin daff-article-theme($theme) {
7-
$primary: map.get($theme, primary);
8-
$secondary: map.get($theme, secondary);
9-
$tertiary: map.get($theme, tertiary);
10-
$base: core.daff-map-deep-get($theme, 'core.base');
11-
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
12-
$white: core.daff-map-deep-get($theme, 'core.white');
13-
$black: core.daff-map-deep-get($theme, 'core.black');
14-
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
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+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
1515

1616
$text-color: theming.daff-illuminate($base-contrast, $neutral, 2);
1717
$table-border-color: theming.daff-illuminate($base, $neutral, 2);

‎libs/design/breadcrumb/src/breadcrumb-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
@use '../../scss/theming';
44

55
@mixin daff-breadcrumb-theme($theme) {
6-
$base: core.daff-map-deep-get($theme, 'core.base');
7-
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
8-
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
6+
$base: core.daff-map-get($theme, 'core', 'base');
7+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
8+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
99

1010
.daff-breadcrumb__item {
1111
color: theming.daff-illuminate($base-contrast, $neutral, 4);

0 commit comments

Comments
 (0)