Skip to content

Commit f68fc20

Browse files
TarunAdobeTarunAdobe
committed
chore(tokens): add modal custom tokens
chore(modal): fixed indentation index.css chore(modal): added mod variables chore(modal): updated package version chore(modal): updated css to use custom tokens for animation chore: updated css properties
1 parent a54c4ad commit f68fc20

File tree

3 files changed

+49
-48
lines changed

3 files changed

+49
-48
lines changed

‎components/modal/index.css

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

1515
.spectrum-Modal {
16-
--spectrum-dialog-confirm-vertical-offset: -2vh;
17-
1816
/* Bug: this must be 0ms, not 0 */
19-
--spectrum-dialog-confirm-exit-animation-delay: 0ms;
20-
21-
/* Distance between top and bottom of dialog and edge of window for fullscreen dialog */
22-
--spectrum-dialog-fullscreen-margin: 32px;
23-
--spectrum-dialog-max-height: 90vh;
24-
--spectrum-dialog-max-width: 90%;
25-
26-
--spectrum-dialog-background-color: var(--spectrum-gray-100);
27-
--spectrum-dialog-confirm-border-radius: var(--spectrum-corner-radius-100);
28-
--spectrum-dialog-confirm-exit-animation-duration: 130ms;
29-
--spectrum-dialog-confirm-entry-animation-duration: 250ms;
30-
--spectrum-dialog-confirm-entry-animation-delay: 160ms;
31-
--spectrum-dialog-transition-animation-duration: 130ms;
17+
--spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
18+
19+
/* Distance between top and bottom of modal and edge of window for fullscreen modal */
20+
--spectrum-modal-fullscreen-margin: 32px;
21+
--spectrum-modal-max-height: 90vh;
22+
--spectrum-modal-max-width: 90%;
23+
24+
--spectrum-modal-background-color: var(--spectrum-gray-100);
25+
--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
26+
--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
27+
--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
28+
--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
29+
--spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
3230
}
3331

3432
/* Used to position the modal */
@@ -62,8 +60,7 @@ governing permissions and limitations under the License.
6260
z-index: 2;
6361

6462
/* Be invisible by default */
65-
transition: visibility 0ms linear
66-
var(--spectrum-dialog-transition-animation-duration);
63+
transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-modal-transition-animation-duration));
6764

6865
&.is-open {
6966
visibility: visible;
@@ -74,61 +71,52 @@ governing permissions and limitations under the License.
7471
@inherit: %spectrum-overlay;
7572

7673
/* Start offset by the animation distance */
77-
transform: translateY(
78-
var(--spectrum-dialog-confirm-entry-animation-distance)
79-
);
74+
transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
8075

8176
/* Appear above underlay */
8277
z-index: 2;
8378

8479
/* Don't be bigger than the screen */
85-
max-block-size: var(--spectrum-dialog-max-height);
86-
max-inline-size: var(--spectrum-dialog-max-width);
80+
max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
81+
max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
8782

88-
background: var(--spectrum-dialog-background-color);
83+
background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
8984

9085
/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
91-
border-radius: var(
92-
--spectrum-dialog-confirm-border-radius
93-
);
86+
border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
9487
overflow: hidden;
9588
outline: none; /* Firefox shows outline */
9689
pointer-events: auto;
9790

9891
/* Exit animations */
99-
transition: opacity var(--spectrum-dialog-confirm-exit-animation-duration)
100-
cubic-bezier(0.5, 0, 1, 1)
101-
var(--spectrum-dialog-confirm-exit-animation-delay),
92+
transition: opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in)
93+
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
10294
visibility 0ms linear
10395
calc(
104-
var(--spectrum-dialog-confirm-exit-animation-delay) +
105-
var(--spectrum-dialog-confirm-exit-animation-duration)
96+
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
97+
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
10698
),
10799
transform 0ms linear
108100
calc(
109-
var(--spectrum-dialog-confirm-exit-animation-delay) +
110-
var(--spectrum-dialog-confirm-exit-animation-duration)
101+
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
102+
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
111103
);
112104

113105
&.is-open {
114106
@inherit: %spectrum-overlay--open;
115107

116108
/* Entry animations */
117-
transition: transform
118-
var(--spectrum-dialog-confirm-entry-animation-duration)
119-
cubic-bezier(0, 0, 0.4, 1)
120-
var(--spectrum-dialog-confirm-entry-animation-delay),
121-
opacity var(--spectrum-dialog-confirm-entry-animation-duration)
122-
cubic-bezier(0, 0, 0.4, 1)
123-
var(--spectrum-dialog-confirm-entry-animation-delay);
109+
transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
110+
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
111+
opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
112+
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
124113

125114
transform: translateY(0);
126115
}
127116
}
128117

129118
/* Responsive modals will fill the screen on small viewports */
130-
@media only screen and (max-device-width: 400px),
131-
only screen and (max-device-height: 350px) {
119+
@media only screen and (max-device-width: 400px), only screen and (max-device-height: 350px) {
132120
.spectrum-Modal--responsive {
133121
inline-size: 100%;
134122
height: 100%;
@@ -146,10 +134,10 @@ governing permissions and limitations under the License.
146134
/** @unofficial */
147135
.spectrum-Modal--fullscreen {
148136
position: fixed;
149-
left: var(--spectrum-dialog-fullscreen-margin);
150-
top: var(--spectrum-dialog-fullscreen-margin);
151-
right: var(--spectrum-dialog-fullscreen-margin);
152-
bottom: var(--spectrum-dialog-fullscreen-margin);
137+
inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
138+
inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
139+
inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
140+
inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
153141
max-inline-size: none;
154142
max-height: none;
155143
}

‎components/modal/metadata/mods.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------------------- |
3+
| `--mod-modal-confirm-exit-animation-delay` |
4+
| `--mod-modal-fullscreen-margin` |
5+
| `--mod-modal-max-height` |
6+
| `--mod-modal-max-width` |
7+
| `--mod-modal-background-color` |
8+
| `--mod-modal-confirm-border-radius` |
9+
| `--mod-modal-confirm-exit-animation-duration` |
10+
| `--mod-modal-confirm-entry-animation-duration` |
11+
| `--mod-modal-confirm-entry-animation-delay` |
12+
| `--mod-modal-transition-animation-duration` |
13+
| `--mod-modal-confirm-entry-animation-distance` |

‎components/modal/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
"@spectrum-css/tokens": ">=11"
2222
},
2323
"devDependencies": {
24-
"@spectrum-css/component-builder-simple": "^2.0.16",
25-
"@spectrum-css/tokens": "^11.2.0",
24+
"@spectrum-css/component-builder-simple": "^2.0.17",
25+
"@spectrum-css/tokens": "^11.3.4",
2626
"gulp": "^4.0.0"
2727
},
2828
"publishConfig": {

0 commit comments

Comments
 (0)