Skip to content

Commit fdacb4c

Browse files
nmergetmfranzke
nmerget
and
mfranzke
authored
refactor: backdrop opacity to use new opacity token for documentation (#4269)
* refactor: backdrop opacity to use new opacity token for documentation * fix: wrong path for backdrop.mdx * docs: update patternhub components section with misc --------- Co-authored-by: Maximilian Franzke <[email protected]>
1 parent c9b59ea commit fdacb4c

File tree

21 files changed

+195
-44
lines changed

21 files changed

+195
-44
lines changed

‎packages/components/docs/Backdrop.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Backdrop
2+
3+
There is no `Backdrop` component.
4+
If you need a backdrop like the one in `DBDrawer` you sould apply those styles:
5+
6+
## CSS
7+
8+
```css
9+
.my-backdrop {
10+
background-color: color(
11+
from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b /
12+
var(--db-opacity-lg)
13+
);
14+
}
15+
16+
/* OR */
17+
18+
dialog::backdrop {
19+
background-color: color(
20+
from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b /
21+
var(--db-opacity-lg)
22+
);
23+
}
24+
```
25+
26+
## SCSS
27+
28+
```scss
29+
@use "@db-ux/core-foundations/build/styles/colors";
30+
@use "@db-ux/core-foundations/build/styles/variables";
31+
32+
.my-backdrop {
33+
background-color: color(
34+
from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g
35+
b / #{variables.$db-opacity-lg}
36+
);
37+
}
38+
39+
/* OR */
40+
41+
dialog::backdrop {
42+
background-color: color(
43+
from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g
44+
b / #{variables.$db-opacity-lg}
45+
);
46+
}
47+
```
48+
49+
> **NOTE:** If you want to use the `weak` variant you should use the `db-opacity-sm` variable.

‎packages/components/src/components/accordion-item/accordion-item.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
&[aria-disabled="true"] {
2828
pointer-events: none;
29-
opacity: component.$default-disabled;
29+
opacity: variables.$db-opacity-md;
3030
}
3131

3232
@media screen and (prefers-reduced-motion: no-preference) {

‎packages/components/src/components/button/button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
}
9999

100100
&:disabled {
101-
opacity: component.$default-disabled;
101+
opacity: variables.$db-opacity-md;
102102
}
103103

104104
// States (currently only "loading")

‎packages/components/src/components/custom-select/custom-select.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,8 @@
162162
inset: 0;
163163
content: "";
164164
cursor: default;
165-
background-color: dialog-init.$backdrop-color;
166-
opacity: dialog-init.$backdrop-opacity-strong;
165+
background-color: dialog-init.$backdrop-color-strong;
166+
opacity: variables.$db-opacity-lg;
167167
}
168168
}
169169
}

‎packages/components/src/components/navigation-item/navigation-item.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
}
162162

163163
&[aria-disabled="true"] {
164-
opacity: component.$default-disabled;
164+
opacity: variables.$db-opacity-md;
165165
pointer-events: none;
166166
}
167167
}

‎packages/components/src/components/tab-item/tab-item.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $with-icon-padding-calc: calc(
1818
border-radius: variables.$db-border-radius-sm;
1919

2020
&:has(input:disabled) {
21-
opacity: component.$default-disabled;
21+
opacity: variables.$db-opacity-md;
2222
}
2323

2424
label {

‎packages/components/src/components/tag/tag.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209

210210
&:has(:disabled),
211211
&[data-disabled="true"] {
212-
opacity: component.$default-disabled;
212+
opacity: variables.$db-opacity-md;
213213
pointer-events: none;
214214
}
215215

‎packages/components/src/styles/dialog-init.scss

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
@use "@db-ux/core-foundations/build/styles/colors";
2+
@use "@db-ux/core-foundations/build/styles/variables";
23

3-
$backdrop-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
4+
$backdrop-color-strong: color(
5+
from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g b /
6+
#{variables.$db-opacity-lg}
7+
);
48

5-
$backdrop-opacity-strong: 0.64;
6-
$backdrop-opacity-weak: 0.32;
9+
$backdrop-color-weak: color(
10+
from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g b /
11+
#{variables.$db-opacity-sm}
12+
);
713

814
%dialog-container {
915
position: fixed;
@@ -36,21 +42,20 @@ dialog {
3642
&:not([data-backdrop="none"]) {
3743
&::backdrop,
3844
&::before {
39-
background-color: $backdrop-color;
40-
opacity: $backdrop-opacity-strong;
45+
background-color: $backdrop-color-strong;
4146
}
4247

4348
&[data-backdrop="invisible"] {
4449
&::backdrop,
4550
&::before {
46-
opacity: 0;
51+
background-color: transparent;
4752
}
4853
}
4954

5055
&[data-backdrop="weak"] {
5156
&::backdrop,
5257
&::before {
53-
opacity: $backdrop-opacity-weak;
58+
background-color: $backdrop-color-weak;
5459
}
5560
}
5661
}

‎packages/components/src/styles/internal/_component.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ $min-mobile-header-height: calc(
77
#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
88
);
99

10-
$default-disabled: 0.4;
11-
$placeholder-disabled: 0.75;
12-
1310
$component-border: variables.$db-border-width-3xs solid
1411
colors.$db-adaptive-on-bg-basic-emphasis-60-default;
1512

‎packages/components/src/styles/internal/_form-components.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ $db-min-inline-size: var(
7979
> label {
8080
@extend %db-overwrite-font-size-md;
8181

82-
opacity: component.$placeholder-disabled;
82+
opacity: variables.$db-opacity-xl;
8383
position: absolute;
8484
z-index: 2;
8585
inset-block-start: calc(
@@ -138,7 +138,7 @@ $db-min-inline-size: var(
138138
}
139139

140140
@include placeholder-content($selector) {
141-
opacity: component.$placeholder-disabled;
141+
opacity: variables.$db-opacity-xl;
142142
font-family: var(--db-font-family-sans);
143143
font-style: italic;
144144

@@ -332,7 +332,7 @@ $input-valid-types:
332332
}
333333

334334
@include placeholder-content($selector) {
335-
opacity: component.$placeholder-disabled;
335+
opacity: variables.$db-opacity-xl;
336336
font-family: var(--db-font-family-sans);
337337
font-style: italic;
338338
}
@@ -401,7 +401,7 @@ $input-valid-types:
401401
#{$selector}[aria-disabled="true"]
402402
) {
403403
// Decided against cursor: not-allowed, compare to e.g. https://phabricator.wikimedia.org/T121960
404-
opacity: component.$default-disabled;
404+
opacity: variables.$db-opacity-md;
405405
pointer-events: none;
406406
}
407407

@@ -484,7 +484,7 @@ $input-valid-types:
484484
@include set-required-label(input);
485485

486486
&:has(input:disabled) {
487-
opacity: component.$default-disabled;
487+
opacity: variables.$db-opacity-md;
488488
}
489489

490490
&:is(label),

‎packages/components/src/styles/internal/_link-components.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656

5757
// "disabled" links
5858
&[aria-disabled="true"] {
59-
opacity: component.$default-disabled;
59+
opacity: variables.$db-opacity-md;
6060
pointer-events: none;
6161
}
6262
}

‎packages/foundations/scss/_variables.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,19 @@ $db-border-radius-2xl: var(--db-border-radius-2xl);
6161
$db-border-radius-3xl: var(--db-border-radius-3xl);
6262
$db-border-radius-full: var(--db-border-radius-full);
6363

64+
/* Opacity */
65+
66+
$db-opacity-3xs: var(--db-opacity-3xs);
67+
$db-opacity-2xs: var(--db-opacity-2xs);
68+
$db-opacity-xs: var(--db-opacity-xs);
69+
$db-opacity-sm: var(--db-opacity-sm);
70+
$db-opacity-md: var(--db-opacity-md);
71+
$db-opacity-lg: var(--db-opacity-lg);
72+
$db-opacity-xl: var(--db-opacity-xl);
73+
$db-opacity-2xl: var(--db-opacity-2xl);
74+
$db-opacity-3xl: var(--db-opacity-3xl);
75+
$db-opacity-full: var(--db-opacity-full);
76+
6477
/* Transitions */
6578

6679
$db-transition-duration-extra-slow: var(--db-transition-duration-extra-slow);

‎packages/foundations/scss/defaults/_default-properties.scss

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2989,6 +2989,66 @@
29892989
inherits: true;
29902990
}
29912991

2992+
@property --db-opacity-3xs {
2993+
syntax: "<number>";
2994+
initial-value: 0.08;
2995+
inherits: true;
2996+
}
2997+
2998+
@property --db-opacity-2xs {
2999+
syntax: "<number>";
3000+
initial-value: 0.16;
3001+
inherits: true;
3002+
}
3003+
3004+
@property --db-opacity-xs {
3005+
syntax: "<number>";
3006+
initial-value: 0.24;
3007+
inherits: true;
3008+
}
3009+
3010+
@property --db-opacity-sm {
3011+
syntax: "<number>";
3012+
initial-value: 0.32;
3013+
inherits: true;
3014+
}
3015+
3016+
@property --db-opacity-md {
3017+
syntax: "<number>";
3018+
initial-value: 0.4;
3019+
inherits: true;
3020+
}
3021+
3022+
@property --db-opacity-lg {
3023+
syntax: "<number>";
3024+
initial-value: 0.68;
3025+
inherits: true;
3026+
}
3027+
3028+
@property --db-opacity-xl {
3029+
syntax: "<number>";
3030+
initial-value: 0.76;
3031+
inherits: true;
3032+
}
3033+
3034+
@property --db-opacity-2xl {
3035+
syntax: "<number>";
3036+
initial-value: 0.84;
3037+
inherits: true;
3038+
}
3039+
3040+
@property --db-opacity-3xl {
3041+
syntax: "<number>";
3042+
initial-value: 0.92;
3043+
inherits: true;
3044+
}
3045+
3046+
@property --db-opacity-full {
3047+
syntax: "<number>";
3048+
initial-value: 1;
3049+
inherits: true;
3050+
}
3051+
29923052
@property --db-typography-regular-desktop-headline-3xl {
29933053
syntax: "*";
29943054
initial-value:

‎packages/foundations/scss/defaults/_default-variables.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -505,6 +505,16 @@
505505
both;
506506
--db-transition-straight-emotional: 0.3s cubic-bezier(0.27, 0.05, 0.4, 0.95);
507507
--db-transition-straight-functional: 0.3s cubic-bezier(0.15, 0, 0.45, 1);
508+
--db-opacity-3xs: 0.08;
509+
--db-opacity-2xs: 0.16;
510+
--db-opacity-xs: 0.24;
511+
--db-opacity-sm: 0.32;
512+
--db-opacity-md: 0.4;
513+
--db-opacity-lg: 0.68;
514+
--db-opacity-xl: 0.76;
515+
--db-opacity-2xl: 0.84;
516+
--db-opacity-3xl: 0.92;
517+
--db-opacity-full: 1;
508518
--db-typography-regular-desktop-headline-3xl:
509519
bolder 5rem/1.2 "OpenSans Head", helvetica, arial, sans-serif;
510520
--db-typography-regular-desktop-headline-2xl:

‎showcases/patternhub/.gitignore

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,10 @@ public/docs
3838

3939
styles/db-ux-components.scss
4040
scripts/generated
41+
!pages/components/misc
4142
pages/components/
4243
components/src
4344
components/code-docs/
44-
!pages/components/readme.mdx
45-
!pages/components/validation.mdx
46-
!pages/components/router-usage.mdx
4745
!pages/components/[[...slug]].tsx
4846
!components/src/tsconfig.json
4947
!components/component-parser

‎showcases/patternhub/data/routes.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -246,8 +246,6 @@ export const ROUTES: NavigationItem[] = [
246246
path: '/components',
247247
subNavigation: [
248248
{ label: 'Readme', path: '/components/readme' },
249-
{ label: 'Router usage', path: '/components/router-usage' },
250-
{ label: 'Validation', path: '/components/validation' },
251249
...componentChildren.map((category) => ({
252250
...category,
253251
subNavigation: category?.subNavigation?.map(
@@ -276,7 +274,22 @@ export const ROUTES: NavigationItem[] = [
276274
]
277275
})
278276
)
279-
}))
277+
})),
278+
{
279+
label: 'Misc',
280+
path: '/components/misc',
281+
subNavigation: [
282+
{
283+
label: 'Router usage',
284+
path: '/components/misc/router-usage'
285+
},
286+
{
287+
label: 'Validation',
288+
path: '/components/misc/validation'
289+
},
290+
{ label: 'Backdrop', path: '/components/misc/backdrop' }
291+
]
292+
}
280293
]
281294
}
282295
];

‎showcases/patternhub/pages/components/misc/backdrop.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import DefaultPage from "../../../components/default-page";
2+
import Readme from "../../../../../packages/components/docs/Backdrop.md";
3+
4+
<Readme />
5+
6+
export default ({ children }) => <DefaultPage>{children}</DefaultPage>;

‎showcases/patternhub/pages/components/misc/router-usage.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import DefaultPage from "../../../components/default-page";
2+
import RouterUsage from "../../../../../packages/components/docs/router-usage.md";
3+
4+
<RouterUsage />
5+
6+
export default ({ children }) => <DefaultPage>{children}</DefaultPage>;

‎showcases/patternhub/pages/components/misc/validation.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import DefaultPage from "../../../components/default-page";
2+
import Readme from "../../../../../packages/components/docs/Validation.md";
3+
import ValidationExample from "../../../components/validation-example";
4+
5+
<Readme />
6+
7+
<ValidationExample />
8+
9+
export default ({ children }) => <DefaultPage>{children}</DefaultPage>;

‎showcases/patternhub/pages/components/router-usage.mdx

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)