@db-ux/core-foundations 3.0.5 → 3.0.7
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.
- package/build/styles/_screen-sizes.scss +7 -7
- package/build/styles/_variables.scss +0 -3
- package/build/styles/absolute.scss +0 -1
- package/build/styles/colors/_placeholder.scss +2 -3
- package/build/styles/colors/_variables.scss +2 -8
- package/build/styles/colors/speaking-colors/additional/_blue.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_burgundy.speaking-colors.scss +0 -1
- package/build/styles/colors/speaking-colors/additional/_cyan.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_green.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_light-green.speaking-colors.scss +0 -1
- package/build/styles/colors/speaking-colors/additional/_orange.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_pink.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_red.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_turquoise.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_violet.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/additional/_yellow.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/semantic/_brand.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/semantic/_critical.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/semantic/_informational.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/semantic/_neutral.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/semantic/_successful.speaking-colors.scss +1 -1
- package/build/styles/colors/speaking-colors/semantic/_warning.speaking-colors.scss +1 -1
- package/build/styles/defaults/default-icons.scss +1 -1
- package/build/styles/defaults/default-required.scss +1 -3
- package/build/styles/defaults/default-theme.scss +0 -1
- package/build/styles/density/_densities.scss +1 -1
- package/build/styles/density/_variables.scss +0 -1
- package/build/styles/fonts/_font-sizes.scss +1 -1
- package/build/styles/fonts/absolute.scss +0 -1
- package/build/styles/fonts/rollup.scss +0 -1
- package/build/styles/fonts/webpack.scss +0 -1
- package/build/styles/helpers/_functions.scss +2 -2
- package/build/styles/icons/_icon-helpers.scss +10 -12
- package/build/styles/icons/absolute.scss +0 -1
- package/build/styles/icons/rollup.scss +0 -1
- package/build/styles/icons/webpack.scss +0 -1
- package/build/styles/rollup.scss +0 -1
- package/build/styles/webpack.scss +0 -1
- package/build/tailwind/theme/_variables.scss +1 -1
- package/build/tailwind/theme/dimensions.scss +2 -2
- package/package.json +1 -1
|
@@ -43,13 +43,13 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
|
|
|
43
43
|
$screen: $db-screen-size-sm;
|
|
44
44
|
|
|
45
45
|
/* stylelint-disable at-rule-empty-line-before */
|
|
46
|
-
@if
|
|
46
|
+
@if $size == "xs" {
|
|
47
47
|
$screen: $db-screen-size-xs;
|
|
48
|
-
} @else if
|
|
48
|
+
} @else if $size == "md" {
|
|
49
49
|
$screen: $db-screen-size-md;
|
|
50
|
-
} @else if
|
|
50
|
+
} @else if $size == "lg" {
|
|
51
51
|
$screen: $db-screen-size-lg;
|
|
52
|
-
} @else if
|
|
52
|
+
} @else if $size == "xl" {
|
|
53
53
|
$screen: $db-screen-size-xl;
|
|
54
54
|
}
|
|
55
55
|
/* stylelint-enable at-rule-empty-line-before */
|
|
@@ -60,7 +60,7 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
|
|
|
60
60
|
@mixin screen($size: "sm", $width: "min") {
|
|
61
61
|
$screen: get-screen-size($size);
|
|
62
62
|
|
|
63
|
-
@if
|
|
63
|
+
@if $width == "min" {
|
|
64
64
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
65
65
|
@media screen and (min-width: #{helpers.px-to-em($screen)}) {
|
|
66
66
|
&:not([data-force-mobile]),
|
|
@@ -89,11 +89,11 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
|
|
|
89
89
|
$min: "";
|
|
90
90
|
$max: "";
|
|
91
91
|
|
|
92
|
-
@if
|
|
92
|
+
@if map.get($data, "min") {
|
|
93
93
|
$min: "#{helpers.px-to-em(get-screen-size(map.get($data, "min")))} < ";
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
@if
|
|
96
|
+
@if map.get($data, "max") {
|
|
97
97
|
$max: " <= #{helpers.px-to-em(get-screen-size(map.get($data, "max")))}";
|
|
98
98
|
}
|
|
99
99
|
|
|
@@ -49,7 +49,6 @@ $db-border-width-lg: var(--db-border-width-lg);
|
|
|
49
49
|
$db-border-width-xl: var(--db-border-width-xl);
|
|
50
50
|
$db-border-width-2xl: var(--db-border-width-2xl);
|
|
51
51
|
$db-border-width-3xl: var(--db-border-width-3xl);
|
|
52
|
-
|
|
53
52
|
$db-border-radius-3xs: var(--db-border-radius-3xs);
|
|
54
53
|
$db-border-radius-2xs: var(--db-border-radius-2xs);
|
|
55
54
|
$db-border-radius-xs: var(--db-border-radius-xs);
|
|
@@ -81,12 +80,10 @@ $db-transition-duration-slow: var(--db-transition-duration-slow);
|
|
|
81
80
|
$db-transition-duration-medium: var(--db-transition-duration-medium);
|
|
82
81
|
$db-transition-duration-fast: var(--db-transition-duration-fast);
|
|
83
82
|
$db-transition-duration-extra-fast: var(--db-transition-duration-extra-fast);
|
|
84
|
-
|
|
85
83
|
$db-transition-timing-emotional: var(--db-transition-timing-emotional);
|
|
86
84
|
$db-transition-timing-functional: var(--db-transition-timing-functional);
|
|
87
85
|
$db-transition-timing-show: var(--db-transition-timing-show);
|
|
88
86
|
$db-transition-timing-hide: var(--db-transition-timing-hide);
|
|
89
|
-
|
|
90
87
|
$db-transition-straight-emotional: var(--db-transition-straight-emotional);
|
|
91
88
|
$db-transition-straight-functional: var(--db-transition-straight-functional);
|
|
92
89
|
$db-transition-straight-show: var(--db-transition-straight-show);
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
--db-icon-color: #{$on};
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
@if
|
|
16
|
+
@if $hovered {
|
|
17
17
|
@include functions.hover {
|
|
18
18
|
background-color: #{$hovered};
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
@if
|
|
22
|
+
@if $pressed {
|
|
23
23
|
@include functions.active {
|
|
24
24
|
background-color: #{$pressed};
|
|
25
25
|
}
|
|
@@ -198,7 +198,6 @@
|
|
|
198
198
|
@each $bg in variables.$background-colors {
|
|
199
199
|
%db-#{$variant}-bg-#{$bg} {
|
|
200
200
|
@extend %db-#{$variant}-variables;
|
|
201
|
-
|
|
202
201
|
@include set-current-colors(
|
|
203
202
|
var(--db-#{$variant}-bg-#{$bg}-default),
|
|
204
203
|
var(--db-#{$variant}-on-bg-basic-emphasis-100-default)
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
$variants:
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
$variant-colors:
|
|
5
|
-
"neutral", "critical", "successful", "warning", "informational";
|
|
6
|
-
|
|
1
|
+
$variants: "neutral", "brand", "critical", "successful", "warning", "informational";
|
|
2
|
+
$variant-colors: "neutral", "critical", "successful", "warning", "informational";
|
|
7
3
|
$on-background-colors:
|
|
8
4
|
"emphasis-100", "emphasis-90", "emphasis-80", "emphasis-70", "emphasis-60",
|
|
9
5
|
"emphasis-50";
|
|
10
|
-
|
|
11
6
|
$background-colors:
|
|
12
7
|
"basic-level-1", "basic-level-2", "basic-level-3", "basic-transparent-semi",
|
|
13
8
|
"basic-transparent-full";
|
|
@@ -43,7 +38,6 @@ $db-adaptive-bg-basic-level-3-hovered: var(
|
|
|
43
38
|
$db-adaptive-bg-basic-level-3-pressed: var(
|
|
44
39
|
--db-adaptive-bg-basic-level-3-pressed
|
|
45
40
|
);
|
|
46
|
-
|
|
47
41
|
$db-adaptive-bg-basic-transparent-full-default: var(
|
|
48
42
|
--db-adaptive-bg-basic-transparent-full-default
|
|
49
43
|
);
|
|
@@ -7,7 +7,6 @@ $db-blue-bg-basic-level-2-pressed: var(--db-blue-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-blue-bg-basic-level-3-default: var(--db-blue-bg-basic-level-3-default);
|
|
8
8
|
$db-blue-bg-basic-level-3-hovered: var(--db-blue-bg-basic-level-3-hovered);
|
|
9
9
|
$db-blue-bg-basic-level-3-pressed: var(--db-blue-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-blue-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-blue-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-blue-origin-pressed: var(--db-blue-origin-pressed);
|
|
|
116
115
|
$db-blue-on-origin-default: var(--db-blue-on-origin-default);
|
|
117
116
|
$db-blue-on-origin-hovered: var(--db-blue-on-origin-hovered);
|
|
118
117
|
$db-blue-on-origin-pressed: var(--db-blue-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-blue-bg-vibrant-default: var(--db-blue-bg-vibrant-default);
|
|
121
121
|
$db-blue-bg-vibrant-hovered: var(--db-blue-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-cyan-bg-basic-level-2-pressed: var(--db-cyan-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-cyan-bg-basic-level-3-default: var(--db-cyan-bg-basic-level-3-default);
|
|
8
8
|
$db-cyan-bg-basic-level-3-hovered: var(--db-cyan-bg-basic-level-3-hovered);
|
|
9
9
|
$db-cyan-bg-basic-level-3-pressed: var(--db-cyan-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-cyan-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-cyan-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-cyan-origin-pressed: var(--db-cyan-origin-pressed);
|
|
|
116
115
|
$db-cyan-on-origin-default: var(--db-cyan-on-origin-default);
|
|
117
116
|
$db-cyan-on-origin-hovered: var(--db-cyan-on-origin-hovered);
|
|
118
117
|
$db-cyan-on-origin-pressed: var(--db-cyan-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-cyan-bg-vibrant-default: var(--db-cyan-bg-vibrant-default);
|
|
121
121
|
$db-cyan-bg-vibrant-hovered: var(--db-cyan-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-green-bg-basic-level-2-pressed: var(--db-green-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-green-bg-basic-level-3-default: var(--db-green-bg-basic-level-3-default);
|
|
8
8
|
$db-green-bg-basic-level-3-hovered: var(--db-green-bg-basic-level-3-hovered);
|
|
9
9
|
$db-green-bg-basic-level-3-pressed: var(--db-green-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-green-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-green-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-green-origin-pressed: var(--db-green-origin-pressed);
|
|
|
116
115
|
$db-green-on-origin-default: var(--db-green-on-origin-default);
|
|
117
116
|
$db-green-on-origin-hovered: var(--db-green-on-origin-hovered);
|
|
118
117
|
$db-green-on-origin-pressed: var(--db-green-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-green-bg-vibrant-default: var(--db-green-bg-vibrant-default);
|
|
121
121
|
$db-green-bg-vibrant-hovered: var(--db-green-bg-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-light-green-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-light-green-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-light-green-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-light-green-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-light-green-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -7,7 +7,6 @@ $db-orange-bg-basic-level-2-pressed: var(--db-orange-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-orange-bg-basic-level-3-default: var(--db-orange-bg-basic-level-3-default);
|
|
8
8
|
$db-orange-bg-basic-level-3-hovered: var(--db-orange-bg-basic-level-3-hovered);
|
|
9
9
|
$db-orange-bg-basic-level-3-pressed: var(--db-orange-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-orange-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-orange-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-orange-origin-pressed: var(--db-orange-origin-pressed);
|
|
|
116
115
|
$db-orange-on-origin-default: var(--db-orange-on-origin-default);
|
|
117
116
|
$db-orange-on-origin-hovered: var(--db-orange-on-origin-hovered);
|
|
118
117
|
$db-orange-on-origin-pressed: var(--db-orange-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-orange-bg-vibrant-default: var(--db-orange-bg-vibrant-default);
|
|
121
121
|
$db-orange-bg-vibrant-hovered: var(--db-orange-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-pink-bg-basic-level-2-pressed: var(--db-pink-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-pink-bg-basic-level-3-default: var(--db-pink-bg-basic-level-3-default);
|
|
8
8
|
$db-pink-bg-basic-level-3-hovered: var(--db-pink-bg-basic-level-3-hovered);
|
|
9
9
|
$db-pink-bg-basic-level-3-pressed: var(--db-pink-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-pink-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-pink-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-pink-origin-pressed: var(--db-pink-origin-pressed);
|
|
|
116
115
|
$db-pink-on-origin-default: var(--db-pink-on-origin-default);
|
|
117
116
|
$db-pink-on-origin-hovered: var(--db-pink-on-origin-hovered);
|
|
118
117
|
$db-pink-on-origin-pressed: var(--db-pink-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-pink-bg-vibrant-default: var(--db-pink-bg-vibrant-default);
|
|
121
121
|
$db-pink-bg-vibrant-hovered: var(--db-pink-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-red-bg-basic-level-2-pressed: var(--db-red-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-red-bg-basic-level-3-default: var(--db-red-bg-basic-level-3-default);
|
|
8
8
|
$db-red-bg-basic-level-3-hovered: var(--db-red-bg-basic-level-3-hovered);
|
|
9
9
|
$db-red-bg-basic-level-3-pressed: var(--db-red-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-red-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-red-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-red-origin-pressed: var(--db-red-origin-pressed);
|
|
|
116
115
|
$db-red-on-origin-default: var(--db-red-on-origin-default);
|
|
117
116
|
$db-red-on-origin-hovered: var(--db-red-on-origin-hovered);
|
|
118
117
|
$db-red-on-origin-pressed: var(--db-red-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-red-bg-vibrant-default: var(--db-red-bg-vibrant-default);
|
|
121
121
|
$db-red-bg-vibrant-hovered: var(--db-red-bg-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-turquoise-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-turquoise-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-turquoise-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-turquoise-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-turquoise-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -140,6 +139,7 @@ $db-turquoise-origin-pressed: var(--db-turquoise-origin-pressed);
|
|
|
140
139
|
$db-turquoise-on-origin-default: var(--db-turquoise-on-origin-default);
|
|
141
140
|
$db-turquoise-on-origin-hovered: var(--db-turquoise-on-origin-hovered);
|
|
142
141
|
$db-turquoise-on-origin-pressed: var(--db-turquoise-on-origin-pressed);
|
|
142
|
+
|
|
143
143
|
// vibrant
|
|
144
144
|
$db-turquoise-bg-vibrant-default: var(--db-turquoise-bg-vibrant-default);
|
|
145
145
|
$db-turquoise-bg-vibrant-hovered: var(--db-turquoise-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-violet-bg-basic-level-2-pressed: var(--db-violet-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-violet-bg-basic-level-3-default: var(--db-violet-bg-basic-level-3-default);
|
|
8
8
|
$db-violet-bg-basic-level-3-hovered: var(--db-violet-bg-basic-level-3-hovered);
|
|
9
9
|
$db-violet-bg-basic-level-3-pressed: var(--db-violet-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-violet-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-violet-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-violet-origin-pressed: var(--db-violet-origin-pressed);
|
|
|
116
115
|
$db-violet-on-origin-default: var(--db-violet-on-origin-default);
|
|
117
116
|
$db-violet-on-origin-hovered: var(--db-violet-on-origin-hovered);
|
|
118
117
|
$db-violet-on-origin-pressed: var(--db-violet-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-violet-bg-vibrant-default: var(--db-violet-bg-vibrant-default);
|
|
121
121
|
$db-violet-bg-vibrant-hovered: var(--db-violet-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-yellow-bg-basic-level-2-pressed: var(--db-yellow-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-yellow-bg-basic-level-3-default: var(--db-yellow-bg-basic-level-3-default);
|
|
8
8
|
$db-yellow-bg-basic-level-3-hovered: var(--db-yellow-bg-basic-level-3-hovered);
|
|
9
9
|
$db-yellow-bg-basic-level-3-pressed: var(--db-yellow-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-yellow-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-yellow-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-yellow-origin-pressed: var(--db-yellow-origin-pressed);
|
|
|
116
115
|
$db-yellow-on-origin-default: var(--db-yellow-on-origin-default);
|
|
117
116
|
$db-yellow-on-origin-hovered: var(--db-yellow-on-origin-hovered);
|
|
118
117
|
$db-yellow-on-origin-pressed: var(--db-yellow-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-yellow-bg-vibrant-default: var(--db-yellow-bg-vibrant-default);
|
|
121
121
|
$db-yellow-bg-vibrant-hovered: var(--db-yellow-bg-vibrant-hovered);
|
|
@@ -7,7 +7,6 @@ $db-brand-bg-basic-level-2-pressed: var(--db-brand-bg-basic-level-2-pressed);
|
|
|
7
7
|
$db-brand-bg-basic-level-3-default: var(--db-brand-bg-basic-level-3-default);
|
|
8
8
|
$db-brand-bg-basic-level-3-hovered: var(--db-brand-bg-basic-level-3-hovered);
|
|
9
9
|
$db-brand-bg-basic-level-3-pressed: var(--db-brand-bg-basic-level-3-pressed);
|
|
10
|
-
|
|
11
10
|
$db-brand-bg-basic-transparent-full-default: var(
|
|
12
11
|
--db-brand-bg-basic-transparent-full-default
|
|
13
12
|
);
|
|
@@ -116,6 +115,7 @@ $db-brand-origin-pressed: var(--db-brand-origin-pressed);
|
|
|
116
115
|
$db-brand-on-origin-default: var(--db-brand-on-origin-default);
|
|
117
116
|
$db-brand-on-origin-hovered: var(--db-brand-on-origin-hovered);
|
|
118
117
|
$db-brand-on-origin-pressed: var(--db-brand-on-origin-pressed);
|
|
118
|
+
|
|
119
119
|
// vibrant
|
|
120
120
|
$db-brand-vibrant-default: var(--db-brand-vibrant-default);
|
|
121
121
|
$db-brand-vibrant-hovered: var(--db-brand-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-critical-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-critical-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-critical-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-critical-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-critical-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -134,6 +133,7 @@ $db-critical-origin-pressed: var(--db-critical-origin-pressed);
|
|
|
134
133
|
$db-critical-on-origin-default: var(--db-critical-on-origin-default);
|
|
135
134
|
$db-critical-on-origin-hovered: var(--db-critical-on-origin-hovered);
|
|
136
135
|
$db-critical-on-origin-pressed: var(--db-critical-on-origin-pressed);
|
|
136
|
+
|
|
137
137
|
// vibrant
|
|
138
138
|
$db-critical-vibrant-default: var(--db-critical-vibrant-default);
|
|
139
139
|
$db-critical-vibrant-hovered: var(--db-critical-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-informational-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-informational-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-informational-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-informational-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-informational-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -140,6 +139,7 @@ $db-informational-origin-pressed: var(--db-informational-origin-pressed);
|
|
|
140
139
|
$db-informational-on-origin-default: var(--db-informational-on-origin-default);
|
|
141
140
|
$db-informational-on-origin-hovered: var(--db-informational-on-origin-hovered);
|
|
142
141
|
$db-informational-on-origin-pressed: var(--db-informational-on-origin-pressed);
|
|
142
|
+
|
|
143
143
|
// vibrant
|
|
144
144
|
$db-informational-vibrant-default: var(--db-informational-vibrant-default);
|
|
145
145
|
$db-informational-vibrant-hovered: var(--db-informational-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-neutral-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-neutral-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-neutral-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-neutral-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-neutral-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -134,6 +133,7 @@ $db-neutral-origin-pressed: var(--db-neutral-origin-pressed);
|
|
|
134
133
|
$db-neutral-on-origin-default: var(--db-neutral-on-origin-default);
|
|
135
134
|
$db-neutral-on-origin-hovered: var(--db-neutral-on-origin-hovered);
|
|
136
135
|
$db-neutral-on-origin-pressed: var(--db-neutral-on-origin-pressed);
|
|
136
|
+
|
|
137
137
|
// vibrant
|
|
138
138
|
$db-neutral-vibrant-default: var(--db-neutral-vibrant-default);
|
|
139
139
|
$db-neutral-vibrant-hovered: var(--db-neutral-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-successful-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-successful-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-successful-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-successful-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-successful-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -140,6 +139,7 @@ $db-successful-origin-pressed: var(--db-successful-origin-pressed);
|
|
|
140
139
|
$db-successful-on-origin-default: var(--db-successful-on-origin-default);
|
|
141
140
|
$db-successful-on-origin-hovered: var(--db-successful-on-origin-hovered);
|
|
142
141
|
$db-successful-on-origin-pressed: var(--db-successful-on-origin-pressed);
|
|
142
|
+
|
|
143
143
|
// vibrant
|
|
144
144
|
$db-successful-vibrant-default: var(--db-successful-vibrant-default);
|
|
145
145
|
$db-successful-vibrant-hovered: var(--db-successful-vibrant-hovered);
|
|
@@ -25,7 +25,6 @@ $db-warning-bg-basic-level-3-hovered: var(
|
|
|
25
25
|
$db-warning-bg-basic-level-3-pressed: var(
|
|
26
26
|
--db-warning-bg-basic-level-3-pressed
|
|
27
27
|
);
|
|
28
|
-
|
|
29
28
|
$db-warning-bg-basic-transparent-full-default: var(
|
|
30
29
|
--db-warning-bg-basic-transparent-full-default
|
|
31
30
|
);
|
|
@@ -134,6 +133,7 @@ $db-warning-origin-pressed: var(--db-warning-origin-pressed);
|
|
|
134
133
|
$db-warning-on-origin-default: var(--db-warning-on-origin-default);
|
|
135
134
|
$db-warning-on-origin-hovered: var(--db-warning-on-origin-hovered);
|
|
136
135
|
$db-warning-on-origin-pressed: var(--db-warning-on-origin-pressed);
|
|
136
|
+
|
|
137
137
|
// vibrant
|
|
138
138
|
$db-warning-vibrant-default: var(--db-warning-vibrant-default);
|
|
139
139
|
$db-warning-vibrant-hovered: var(--db-warning-vibrant-hovered);
|
|
@@ -6,11 +6,9 @@
|
|
|
6
6
|
@use "../fonts";
|
|
7
7
|
@use "../screen-sizes";
|
|
8
8
|
@use "../colors/default-color-icons";
|
|
9
|
-
|
|
10
9
|
@forward "../colors/default-color-mappings";
|
|
11
10
|
@forward "../normalize";
|
|
12
|
-
|
|
13
|
-
@include screen-sizes.get-breakpoint-properties();
|
|
11
|
+
@include screen-sizes.get-breakpoint-properties;
|
|
14
12
|
|
|
15
13
|
/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
|
|
16
14
|
@layer #{helpers.$layer-variables} {
|
|
@@ -30,7 +30,7 @@ $cursor-pointer: var(--db-overwrite-cursor, pointer);
|
|
|
30
30
|
@mixin hover() {
|
|
31
31
|
/* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
|
|
32
32
|
&:hover:not(:disabled, [aria-disabled="true"]) {
|
|
33
|
-
@include cursor-pointer
|
|
33
|
+
@include cursor-pointer {
|
|
34
34
|
@content;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -38,7 +38,7 @@ $cursor-pointer: var(--db-overwrite-cursor, pointer);
|
|
|
38
38
|
|
|
39
39
|
@mixin active() {
|
|
40
40
|
&:active:not(:disabled, [aria-disabled="true"]) {
|
|
41
|
-
@include cursor-pointer
|
|
41
|
+
@include cursor-pointer {
|
|
42
42
|
@content;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -7,10 +7,8 @@
|
|
|
7
7
|
$default-icon-size: 24;
|
|
8
8
|
$default-icon-size-rem: #{helpers.px-to-rem($default-icon-size)};
|
|
9
9
|
$default-icon-variants: "default", "filled";
|
|
10
|
-
|
|
11
10
|
$default-icon-content: var(--db-icon, attr(data-icon));
|
|
12
11
|
$default-icon-content-after: var(--db-icon-trailing, attr(data-icon-trailing));
|
|
13
|
-
|
|
14
12
|
$default-icon-margin-end: var(
|
|
15
13
|
--db-icon-margin-end,
|
|
16
14
|
#{variables.$db-spacing-fixed-xs}
|
|
@@ -19,7 +17,6 @@ $default-icon-margin-start: var(
|
|
|
19
17
|
--db-icon-margin-start,
|
|
20
18
|
#{variables.$db-spacing-fixed-xs}
|
|
21
19
|
);
|
|
22
|
-
|
|
23
20
|
$default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
|
|
24
21
|
|
|
25
22
|
@function get-icon-font-size($font-size, $line-height) {
|
|
@@ -27,15 +24,15 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
|
|
|
27
24
|
}
|
|
28
25
|
|
|
29
26
|
@function get-icon-size($icon-font-size) {
|
|
30
|
-
@if
|
|
27
|
+
@if $icon-font-size < 20 {
|
|
31
28
|
@return 16;
|
|
32
29
|
}
|
|
33
30
|
|
|
34
|
-
@if
|
|
31
|
+
@if $icon-font-size < 24 {
|
|
35
32
|
@return 20;
|
|
36
33
|
}
|
|
37
34
|
|
|
38
|
-
@if
|
|
35
|
+
@if $icon-font-size < 32 {
|
|
39
36
|
@return 24;
|
|
40
37
|
}
|
|
41
38
|
|
|
@@ -44,6 +41,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
|
|
|
44
41
|
|
|
45
42
|
@mixin icon-content($icon) {
|
|
46
43
|
content: $icon;
|
|
44
|
+
|
|
47
45
|
// Hiding icon from screenreaders, https://www.w3.org/TR/css-content-3/#alt
|
|
48
46
|
// TODO: remove the @support wrapper as soon as we drop our partly-support for Firefox < version 128 (Enterprise ESR / Extended Support Release; expected to end in 2025, September / https://whattrainisitnow.com/calendar/)
|
|
49
47
|
@supports (content: ""/"") {
|
|
@@ -59,7 +57,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
|
|
|
59
57
|
@mixin set-icon($icon: "", $position: "before") {
|
|
60
58
|
$pos: "leading";
|
|
61
59
|
|
|
62
|
-
@if
|
|
60
|
+
@if $position == "after" {
|
|
63
61
|
$pos: "trailing";
|
|
64
62
|
}
|
|
65
63
|
|
|
@@ -109,18 +107,18 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
|
|
|
109
107
|
}
|
|
110
108
|
|
|
111
109
|
@mixin variant-icons($variant) {
|
|
112
|
-
@include has-no-icon
|
|
110
|
+
@include has-no-icon {
|
|
113
111
|
&::before {
|
|
114
|
-
@if
|
|
112
|
+
@if $variant == "critical" {
|
|
115
113
|
--db-icon: "exclamation_mark_circle";
|
|
116
114
|
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
117
|
-
} @else if
|
|
115
|
+
} @else if $variant == "informational" or $variant == "neutral" {
|
|
118
116
|
--db-icon: "information_circle";
|
|
119
117
|
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
120
|
-
} @else if
|
|
118
|
+
} @else if $variant == "warning" {
|
|
121
119
|
--db-icon: "exclamation_mark_triangle";
|
|
122
120
|
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
123
|
-
} @else if
|
|
121
|
+
} @else if $variant == "successful" {
|
|
124
122
|
--db-icon: "check_circle";
|
|
125
123
|
}
|
|
126
124
|
}
|
package/build/styles/rollup.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
// stylelint-disable-next-line scss/at-rule-no-unknown
|
|
4
4
|
@theme {
|
|
5
|
-
@include variables.
|
|
5
|
+
@include variables.get-variables;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
@layer densities {
|
|
@@ -12,6 +12,6 @@
|
|
|
12
12
|
[data-density="regular"],
|
|
13
13
|
.db-density-functional,
|
|
14
14
|
[data-density="functional"] {
|
|
15
|
-
@include variables.
|
|
15
|
+
@include variables.get-variables;
|
|
16
16
|
}
|
|
17
17
|
}
|