Skip to content

Commit 0afb8fc

Browse files
jenndiazjenndiaz
committed
chore(underlay): mods
1 parent 3a3b1bc commit 0afb8fc

File tree

2 files changed

+38
-20
lines changed

2 files changed

+38
-20
lines changed

‎components/underlay/index.css

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,35 @@ governing permissions and limitations under the License.
1313
@import '../overlay/index.css';
1414

1515
.spectrum-Underlay {
16-
/* Bug: this must be 0ms, not 0 */
17-
--spectrum-dialog-confirm-background-entry-animation-delay: var(--spectrum-animation-duration-0);
18-
--spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */
19-
--spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); /* wrong in DNA */
20-
--spectrum-dialog-background-exit-animation-duration: var(--spectrum-animation-duration-100);
21-
--spectrum-dialog-confirm-background-entry-animation-duration: var(--spectrum-animation-duration-600);
22-
--spectrum-dialog-confirm-background-exit-animation-duration: var(----spectrum-animation-duration-300);
23-
--spectrum-dialog-confirm-background-exit-animation-delay: var(--spectrum-animation-duration-200);
16+
--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); /* Bug: this must be 0ms, not 0 */
17+
--spectrum-underlay-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */
18+
--spectrum-underlay-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); /* wrong in DNA */
19+
--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
20+
--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
21+
--spectrum-underlay-background-exit-animation-duration: var(----spectrum-animation-duration-300);
22+
--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
23+
24+
--spectrum-underlay-background-color-rgb: var(--spectrum-black-rgb);
25+
--spectrum-underlay-background-opacity-light: var(--spectrum-transparent-black-400-opacity);
26+
--spectrum-underlay-background-opacity-dark: 0.5;
27+
--spectrum-underlay-background-opacity-darkest: 0.6;
28+
29+
2430

2531
.spectrum--light &,
2632
.spectrum--lightest & {
27-
--spectrum-dialog-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-transparent-black-400-opacity));
33+
--spectrum-underlay-background-color: rgba(var(--mod-underlay-background-color-rgb, var(--spectrum-underlay-background-color-rgb)),
34+
var(--mod-underlay-background-opacity-light, var(--spectrum-underlay-background-opacity-light)));
2835
}
2936

3037
.spectrum--dark & {
31-
--spectrum-dialog-background-color: rgba(var(--spectrum-black-rgb), 0.5);
38+
--spectrum-underlay-background-color: rgba(var(--mod-underlay-background-color-rgb, var(--spectrum-underlay-background-color-rgb)),
39+
var(--mod-underlay-background-opacity-dark, var(--spectrum-underlay-background-opacity-dark)));
3240
}
3341

3442
.spectrum--darkest & {
35-
--spectrum-dialog-background-color: rgba(var(--spectrum-black-rgb), 0.6);
43+
--spectrum-underlay-background-color: rgba(var(--mod-underlay-background-color-rgb, var(--spectrum-underlay-background-color-rgb)),
44+
var(--mod-underlay-background-opacity-darkest, var(--spectrum-underlay-background-opacity-darkest)));
3645
}
3746
}
3847

@@ -43,28 +52,28 @@ governing permissions and limitations under the License.
4352
inset-block: 0;
4453
inset-inline: 0;
4554

46-
background-color: var(--mod-dialog-background-color, var(--spectrum-dialog-background-color));
55+
background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color));
4756

4857
/* Float above things by default */
4958
z-index: 1;
5059

5160
overflow: hidden;
5261

5362
/* Exit animations */
54-
transition: opacity var(--mod-dialog-confirm-background-exit-animation-duration, var(--spectrum-dialog-confirm-background-exit-animation-duration))
55-
var(--mod-dialog-confirm-background-exit-animation-ease, var(--spectrum-dialog-confirm-background-exit-animation-ease))
56-
var(--mod-dialog-confirm-background-exit-animation-delay, var(--spectrum-dialog-confirm-background-exit-animation-delay)),
63+
transition: opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))
64+
var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease))
65+
var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
5766
visibility 0ms
5867
linear calc(
59-
var(--mod-dialog-confirm-background-exit-animation-delay, var(--spectrum-dialog-confirm-background-exit-animation-delay)) +
60-
var(--mod-dialog-confirm-background-exit-animation-duration, var(--spectrum-dialog-confirm-background-exit-animation-duration)));
68+
var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) +
69+
var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
6170
}
6271

6372
.spectrum-Underlay.is-open {
6473
@inherit: %spectrum-overlay--open;
6574

6675
/* Entry animations */
67-
transition: opacity var(--mod-dialog-confirm-background-entry-animation-duration, var(--spectrum-dialog-confirm-background-entry-animation-duration))
68-
var(--mod-dialog-confirm-background-entry-animation-ease, var(--spectrum-dialog-confirm-background-entry-animation-ease))
69-
var(--mod-dialog-confirm-background-entry-animation-delay, var(--spectrum-dialog-confirm-background-entry-animation-delay));
76+
transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration))
77+
var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease))
78+
var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
7079
}

‎components/underlay/metadata/mods.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------------------------- |
3+
| `--mod-underlay-background-color` |
4+
| `--mod-underlay-background-entry-animation-delay` |
5+
| `--mod-underlay-background-entry-animation-duration` |
6+
| `--mod-underlay-background-entry-animation-ease` |
7+
| `--mod-underlay-background-exit-animation-delay` |
8+
| `--mod-underlay-background-exit-animation-duration` |
9+
| `--mod-underlay-background-exit-animation-ease` |

0 commit comments

Comments
 (0)