Skip to content

Commit bec02e7

Browse files
marissahuysentruytmarissahuysentruyt
committed
fix(dialog,tokens): custom tokens created
- adds new takeover-dialog tokens to control the desktop/mobile spacing - rebuilds mods
1 parent e46283f commit bec02e7

File tree

7 files changed

+32
-20
lines changed

7 files changed

+32
-20
lines changed

‎components/dialog/index.css

+10-16
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ governing permissions and limitations under the License.
5555

5656
/* Fullscreen/fullscreenTakeover */
5757
--spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl);
58-
--spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500);
59-
--spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400);
60-
--spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500);
58+
--spectrum-takeover-dialog-grid-spacing: var(--spectrum-takeover-dialog-spacing-grid-padding);
59+
--spectrum-takeover-dialog-spacing-header-content-gap: var(--spectrum-takeover-dialog-spacing-header-gap);
60+
--spectrum-takeover-dialog-spacing-title-to-content: var(--spectrum-takeover-dialog-spacing-title-to-body);
6161
--spectrum-takeover-dialog-inline-size: var(--spectrum-takeover-dialog-width);
6262
--spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height);
6363
}
@@ -270,25 +270,19 @@ governing permissions and limitations under the License.
270270
max-block-size: none;
271271
max-inline-size: none;
272272

273-
.spectrum--large & {
274-
--spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300);
275-
--spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400);
276-
--spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400);
277-
}
278-
279273
.spectrum-Dialog-grid {
280274
display: grid;
281275
grid-template-columns:
282-
var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding))
276+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
283277
1fr
284278
auto
285279
auto
286-
var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding));
280+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
287281
grid-template-rows:
288-
var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding))
282+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
289283
auto
290284
1fr
291-
var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding));
285+
var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
292286
grid-template-areas:
293287
". . . . ."
294288
". heading header buttonGroup ."
@@ -298,9 +292,9 @@ governing permissions and limitations under the License.
298292

299293
.spectrum-Dialog-header {
300294
grid-area: heading;
301-
gap: var(--mod-takeover-dialog-spacing-header-gap, var(--spectrum-takeover-dialog-spacing-header-gap));
302-
margin-inline-end: var(--mod-takeover-dialog-spacing-header-gap, var(--spectrum-takeover-dialog-spacing-header-gap));
303-
margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-body);
295+
gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
296+
margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
297+
margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content);
304298
}
305299

306300
.spectrum-Dialog-heading {

‎components/dialog/metadata/mods.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@
2222
| `--mod-standard-dialog-spacing-grid-padding` |
2323
| `--mod-standard-dialog-spacing-title-to-description` |
2424
| `--mod-standard-dialog-spacing-title-to-header-content` |
25-
| `--mod-takeover-dialog-spacing-grid-padding` |
26-
| `--mod-takeover-dialog-spacing-header-gap` |
25+
| `--mod-takeover-dialog-grid-spacing` |
26+
| `--mod-takeover-dialog-spacing-header-content-gap` |
2727
| `--mod-takeover-dialog-title-font-size` |

‎tokens/custom-spectrum/custom-large-vars.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,10 @@ governing permissions and limitations under the License.
8888
--spectrum-dialog-confirm-description-text-size: 15px;
8989
--spectrum-dialog-confirm-padding-grid: 24px;
9090

91-
--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
91+
--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
92+
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
93+
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
94+
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);
9295

9396
--spectrum-datepicker-initial-width: 160px;
9497
--spectrum-datepicker-generic-padding: 15px;

‎tokens/custom-spectrum/custom-medium-vars.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,10 @@ governing permissions and limitations under the License.
8787
--spectrum-dialog-confirm-description-text-size: 14px;
8888
--spectrum-dialog-confirm-padding-grid: 40px;
8989

90-
--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500);
90+
--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
91+
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
92+
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
93+
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);
9194

9295
--spectrum-datepicker-initial-width: 128px;
9396
--spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);

‎tokens/dist/css/spectrum/custom-large-vars.css

+3
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@
7575
--spectrum-dialog-confirm-padding-grid:24px;
7676

7777
--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
78+
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
79+
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
80+
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);
7881

7982
--spectrum-datepicker-initial-width:160px;
8083
--spectrum-datepicker-generic-padding:15px;

‎tokens/dist/css/spectrum/custom-medium-vars.css

+3
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@
7474
--spectrum-dialog-confirm-padding-grid:40px;
7575

7676
--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
77+
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
78+
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
79+
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);
7780

7881
--spectrum-datepicker-initial-width:128px;
7982
--spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);

‎tokens/dist/index.css

+6
Original file line numberDiff line numberDiff line change
@@ -2580,6 +2580,9 @@
25802580
--spectrum-dialog-confirm-padding-grid:24px;
25812581

25822582
--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
2583+
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
2584+
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
2585+
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);
25832586

25842587
--spectrum-datepicker-initial-width:160px;
25852588
--spectrum-datepicker-generic-padding:15px;
@@ -4172,6 +4175,9 @@
41724175
--spectrum-dialog-confirm-padding-grid:40px;
41734176

41744177
--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
4178+
--spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
4179+
--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
4180+
--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);
41754181

41764182
--spectrum-datepicker-initial-width:128px;
41774183
--spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);

0 commit comments

Comments
 (0)