Skip to content

Commit 43f05c1

Browse files
TarunAdobeTarunAdobe
committed
chore: merged main
2 parents ad995cd + 0b83f13 commit 43f05c1

File tree

18 files changed

+175
-71
lines changed

18 files changed

+175
-71
lines changed

‎components/commons/metadata/mods.md

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
| Modifiable Custom Properties |
2-
| ------------------------------ |
3-
| `--mod-animation-duration-100` |
4-
| `--mod-focus-indicator-gap` |
5-
| `--mod-line-height-100` |
6-
| `--mod-sans-font-family-stack` |
1+
| Modifiable Custom Properties |
2+
| ----------------------------------------- |
3+
| `--mod-overlay-animation-distance` |
4+
| `--mod-overlay-animation-duration-opened` |

‎components/commons/overlay-coretokens.css

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ governing permissions and limitations under the License.
1414
/* TODO: replace with core tokens */
1515
--spectrum-overlay-animation-distance: 6px;
1616
--spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
17+
--spectrum-overlay-animation-duration-opened: var(--spectrum-animation-duration-0);
1718

1819
visibility: hidden;
1920

@@ -29,26 +30,26 @@ governing permissions and limitations under the License.
2930
%spectrum-overlay--open {
3031
visibility: visible;
3132
opacity: 1;
32-
transition-delay: 0ms;
33+
transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
3334
pointer-events: auto;
3435
}
3536

3637
%spectrum-overlay--bottom--open {
3738
--spectrum-overlay-animation-distance: 6px;
38-
transform: translateY(var(--spectrum-overlay-animation-distance));
39+
transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
3940
}
4041

4142
%spectrum-overlay--top--open {
4243
--spectrum-overlay-animation-distance: 6px;
43-
transform: translateY(calc(-1 * var(--spectrum-overlay-animation-distance)));
44+
transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
4445
}
4546

4647
%spectrum-overlay--right--open {
4748
--spectrum-overlay-animation-distance: 6px;
48-
transform: translateX(var(--spectrum-overlay-animation-distance));
49+
transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
4950
}
5051

5152
%spectrum-overlay--left--open {
5253
--spectrum-overlay-animation-distance: 6px;
53-
transform: translateX(calc(-1 * var(--spectrum-overlay-animation-distance)));
54+
transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
5455
}

‎components/modal/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

‎components/modal/index.css

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +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%;
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);
2530
}
2631

2732
/* Used to position the modal */
@@ -55,8 +60,7 @@ governing permissions and limitations under the License.
5560
z-index: 2;
5661

5762
/* Be invisible by default */
58-
transition: visibility 0ms linear
59-
var(--spectrum-global-animation-duration-100);
63+
transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-modal-transition-animation-duration));
6064

6165
&.is-open {
6266
visibility: visible;
@@ -67,60 +71,52 @@ governing permissions and limitations under the License.
6771
@inherit: %spectrum-overlay;
6872

6973
/* Start offset by the animation distance */
70-
transform: translateY(
71-
var(--spectrum-dialog-confirm-entry-animation-distance)
72-
);
74+
transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
7375

7476
/* Appear above underlay */
7577
z-index: 2;
7678

7779
/* Don't be bigger than the screen */
78-
max-block-size: var(--spectrum-dialog-max-height);
79-
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));
82+
83+
background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
8084

8185
/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
82-
border-radius: var(
83-
--spectrum-dialog-confirm-border-radius,
84-
var(--spectrum-corner-radius-100)
85-
);
86+
border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
8687
overflow: hidden;
8788
outline: none; /* Firefox shows outline */
8889
pointer-events: auto;
8990

9091
/* Exit animations */
91-
transition: opacity var(--spectrum-dialog-confirm-exit-animation-duration)
92-
cubic-bezier(0.5, 0, 1, 1)
93-
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)),
9494
visibility 0ms linear
9595
calc(
96-
var(--spectrum-dialog-confirm-exit-animation-delay) +
97-
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))
9898
),
9999
transform 0ms linear
100100
calc(
101-
var(--spectrum-dialog-confirm-exit-animation-delay) +
102-
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))
103103
);
104104

105105
&.is-open {
106106
@inherit: %spectrum-overlay--open;
107107

108108
/* Entry animations */
109-
transition: transform
110-
var(--spectrum-dialog-confirm-entry-animation-duration)
111-
cubic-bezier(0, 0, 0.4, 1)
112-
var(--spectrum-dialog-confirm-entry-animation-delay),
113-
opacity var(--spectrum-dialog-confirm-entry-animation-duration)
114-
cubic-bezier(0, 0, 0.4, 1)
115-
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));
116113

117114
transform: translateY(0);
118115
}
119116
}
120117

121118
/* Responsive modals will fill the screen on small viewports */
122-
@media only screen and (max-device-width: 400px),
123-
only screen and (max-device-height: 350px) {
119+
@media only screen and (max-device-width: 400px), only screen and (max-device-height: 350px) {
124120
.spectrum-Modal--responsive {
125121
inline-size: 100%;
126122
height: 100%;
@@ -138,10 +134,10 @@ governing permissions and limitations under the License.
138134
/** @unofficial */
139135
.spectrum-Modal--fullscreen {
140136
position: fixed;
141-
left: var(--spectrum-dialog-fullscreen-margin);
142-
top: var(--spectrum-dialog-fullscreen-margin);
143-
right: var(--spectrum-dialog-fullscreen-margin);
144-
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));
145141
max-inline-size: none;
146142
max-height: none;
147143
}

‎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-background-color` |
4+
| `--mod-modal-confirm-border-radius` |
5+
| `--mod-modal-confirm-entry-animation-delay` |
6+
| `--mod-modal-confirm-entry-animation-distance` |
7+
| `--mod-modal-confirm-entry-animation-duration` |
8+
| `--mod-modal-confirm-exit-animation-delay` |
9+
| `--mod-modal-confirm-exit-animation-duration` |
10+
| `--mod-modal-fullscreen-margin` |
11+
| `--mod-modal-max-height` |
12+
| `--mod-modal-max-width` |
13+
| `--mod-modal-transition-animation-duration` |

‎components/modal/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
"build": "gulp"
1919
},
2020
"peerDependencies": {
21-
"@spectrum-css/vars": ">=9"
21+
"@spectrum-css/tokens": ">=11"
2222
},
2323
"devDependencies": {
24-
"@spectrum-css/component-builder": "^4.0.14",
25-
"@spectrum-css/vars": "^9.0.8",
24+
"@spectrum-css/component-builder-simple": "^2.0.17",
25+
"@spectrum-css/tokens": "^11.3.4",
2626
"gulp": "^4.0.0"
2727
},
2828
"publishConfig": {

‎components/modal/stories/template.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
33

44
import "../index.css";
5-
import "../skin.css";
65

76
export const Template = ({
87
rootClass = "spectrum-Modal",

‎components/modal/skin.css renamed to ‎components/modal/themes/express.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@ Copyright 2023 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
6-
76
Unless required by applicable law or agreed to in writing, software distributed under
87
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
98
OF ANY KIND, either express or implied. See the License for the specific language
109
governing permissions and limitations under the License.
1110
*/
1211

13-
.spectrum-Modal {
14-
background: var(--spectrum-gray-100);
12+
@container (--system: express) {
1513
}

‎components/modal/themes/spectrum.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
Unless required by applicable law or agreed to in writing, software distributed under
7+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
8+
OF ANY KIND, either express or implied. See the License for the specific language
9+
governing permissions and limitations under the License.
10+
*/
11+
12+
@container (--system: spectrum) {
13+
}

‎components/overlay/index.css

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ governing permissions and limitations under the License.
1010
*/
1111

1212
%spectrum-overlay {
13-
--spectrum-overlay-animation-distance: var(--spectrum-picker-m-texticon-popover-offset-y);
13+
--spectrum-overlay-animation-distance: 6px;
14+
--spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
15+
--spectrum-overlay-animation-duration-opened: var(--spectrum-animation-duration-0);
1416

1517
visibility: hidden;
1618

1719
opacity: 0;
1820

19-
transition: transform var(--spectrum-global-animation-duration-100) ease-in-out,
20-
opacity var(--spectrum-global-animation-duration-100) ease-in-out,
21-
visibility 0ms linear var(--spectrum-global-animation-duration-100);
21+
transition: transform var(--spectrum-overlay-animation-duration) ease-in-out,
22+
opacity var(--spectrum-overlay-animation-duration) ease-in-out,
23+
visibility 0ms linear var(--spectrum-overlay-animation-duration);
2224

2325
pointer-events: none;
2426
}
@@ -28,23 +30,23 @@ governing permissions and limitations under the License.
2830

2931
opacity: 1;
3032

31-
transition-delay: 0ms;
33+
transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
3234

3335
pointer-events: auto;
3436
}
3537

3638
%spectrum-overlay--bottom--open {
37-
transform: translateY(var(--spectrum-overlay-animation-distance));
39+
transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
3840
}
3941

4042
%spectrum-overlay--top--open {
41-
transform: translateY(calc(-1 * var(--spectrum-overlay-animation-distance)));
43+
transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
4244
}
4345

4446
%spectrum-overlay--right--open {
45-
transform: translateX(var(--spectrum-overlay-animation-distance));
47+
transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
4648
}
4749

4850
%spectrum-overlay--left--open {
49-
transform: translateX(calc(-1 * var(--spectrum-overlay-animation-distance)));
51+
transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
5052
}

‎components/overlay/metadata/mods.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
| Modifiable Custom Properties |
2+
| ----------------------------------------- |
3+
| `--mod-overlay-animation-distance` |
4+
| `--mod-overlay-animation-duration-opened` |

‎components/tokens/custom-express/custom-large-vars.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@ governing permissions and limitations under the License.
1515
.spectrum--express.spectrum--large {
1616
--spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0";
1717
--spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
18+
1819
--spectrum-dialog-confirm-border-radius: 8px;
20+
21+
--spectrum-dial-border-radius: 15px;
1922
}

‎components/tokens/custom-express/custom-medium-vars.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@ governing permissions and limitations under the License.
1515
.spectrum--express.spectrum--medium {
1616
--spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
1717
--spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
18+
1819
--spectrum-dialog-confirm-border-radius: 6px;
20+
21+
--spectrum-dial-border-radius: 12px;
1922
}

‎components/tokens/custom-spectrum/custom-dark-vars.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,14 @@ governing permissions and limitations under the License.
3939

4040
--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
4141
--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15);
42+
43+
--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
44+
--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
45+
--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
46+
--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
47+
48+
--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
49+
--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
50+
--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
51+
--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
4252
}

‎components/tokens/custom-spectrum/custom-darkest-vars.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,14 @@ governing permissions and limitations under the License.
3939

4040
--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08);
4141
--spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2);
42+
43+
--spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
44+
--spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
45+
--spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000);
46+
--spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
47+
48+
--spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
49+
--spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
50+
--spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900);
51+
--spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
4252
}

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,32 @@ governing permissions and limitations under the License.
8787
--spectrum-treeview-item-indentation-large: 25px;
8888
--spectrum-treeview-item-indentation-extra-large: 30px;
8989
--spectrum-treeview-indicator-inset-block-start: 6px;
90-
91-
--spectrum-dialog-confirm-hero-height: 160px;
90+
91+
--spectrum-dialog-confirm-entry-animation-distance: 25px;
92+
--spectrum-dialog-confirm-hero-height: 160px;
9293
--spectrum-dialog-confirm-border-radius: 5px;
9394
--spectrum-dialog-confirm-title-text-size: 19px;
9495
--spectrum-dialog-confirm-description-text-size: 15px;
9596
--spectrum-dialog-confirm-padding-grid: 24px;
97+
98+
--spectrum-datepicker-initial-width: 160px;
99+
--spectrum-datepicker-generic-padding: 15px;
100+
--spectrum-datepicker-dash-line-height: 30px;
101+
--spectrum-datepicker-width-quiet-first: 90px;
102+
--spectrum-datepicker-width-quiet-second: 20px;
103+
--spectrum-datepicker-datetime-width-first: 45px;
104+
--spectrum-datepicker-invalid-icon-to-button: 10px;
105+
--spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
106+
--spectrum-datepicker-input-datetime-width: 30px;
107+
108+
--spectrum-pagination-textfield-width: 60px;
109+
--spectrum-pagination-item-inline-spacing: 6px;
110+
111+
--spectrum-dial-border-radius: 20px;
112+
--spectrum-dial-handle-position: 10px;
113+
--spectrum-dial-handle-block-margin: 20px;
114+
--spectrum-dial-handle-inline-margin: 20px;
115+
--spectrum-dial-controls-margin: 10px;
116+
--spectrum-dial-label-gap-y: 6px;
117+
--spectrum-dial-label-container-top-to-text: 5px;
96118
}

0 commit comments

Comments
 (0)