Skip to content

Commit

Permalink
feat(tray): use spectrum tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@yosevu @Westbrook
yosevu authored and Westbrook committed Jan 28, 2023
1 parent abaa75a commit cdd78b2
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 82 deletions.
2 changes: 1 addition & 1 deletion packages/tray/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"@spectrum-web-components/underlay": "^0.9.5"
},
"devDependencies": {
"@spectrum-css/tray": "^1.0.31"
"@spectrum-css/tray": "^2.0.9"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
30 changes: 20 additions & 10 deletions packages/tray/src/spectrum-tray-wrapper.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,32 @@ governing permissions and limitations under the License.
*/

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host([dir='ltr']) {
left: 0; /* [dir=ltr] .spectrum-Tray-wrapper */
}
:host([dir='rtl']) {
right: 0; /* [dir=rtl] .spectrum-Tray-wrapper */
@media (forced-colors: active) {
.spectrum-Tray {
--highcontrast-tray-background-color: Background;
}
}
:host {
bottom: 0;
display: flex;
inline-size: 100%;
inset-inline-start: 0; /* .spectrum-Tray-wrapper */
justify-content: center;
position: fixed; /* .spectrum-Tray-wrapper */
width: 100%;
z-index: 2;
position: fixed;
}
@media (max-width: 375px) {
@media screen and (orientation: landscape) {
.spectrum-Tray {
border-radius: var(--spectrum-tray-border-radius, 0);
border-top-left-radius: var(
--mod-tray-corner-radius,
var(--spectrum-tray-corner-radius)
);
border-top-right-radius: var(
--mod-tray-corner-radius,
var(--spectrum-tray-corner-radius)
);
max-inline-size: var(
--mod-tray-max-inline-size,
var(--spectrum-tray-max-inline-size)
);
}
}
147 changes: 80 additions & 67 deletions packages/tray/src/spectrum-tray.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,114 +11,127 @@ governing permissions and limitations under the License.
*/

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.tray {
opacity: 0;
pointer-events: none;
transition: transform var(--spectrum-global-animation-duration-100, 0.13s)
ease-in-out,
opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out,
visibility 0ms linear
var(--spectrum-global-animation-duration-100, 0.13s);
visibility: hidden; /* .spectrum-Tray */
}
:host([open]) .tray {
opacity: 1;
pointer-events: auto;
transition-delay: 0ms;
visibility: visible; /* .spectrum-Tray.is-open */
}
:host {
--spectrum-dialog-confirm-exit-animation-delay: 0ms; /* .spectrum-Tray */
--spectrum-tray-margin-top: 64px;
}
:host([dir='ltr']) .spectrum-Tray-wrapper {
left: 0; /* [dir=ltr] .spectrum-Tray-wrapper */
--spectrum-tray-exit-animation-delay: 0ms; /* .spectrum-Tray */
--spectrum-tray-entry-animation-delay: 160ms;
--spectrum-tray-max-inline-size: 375px;
--spectrum-tray-spacing-edge-to-tray-safe-zone: 64px;
--spectrum-tray-entry-animation-duration: var(
--spectrum-animation-duration-500
);
--spectrum-tray-exit-animation-duration: var(
--spectrum-animation-duration-100
);
--spectrum-tray-corner-radius: var(--spectrum-corner-radius-100);
--spectrum-tray-background-color: var(--spectrum-background-layer-2-color);
}
:host([dir='rtl']) .spectrum-Tray-wrapper {
right: 0; /* [dir=rtl] .spectrum-Tray-wrapper */
@media (forced-colors: active) {
.tray {
--highcontrast-tray-background-color: Background;
}
}
.spectrum-Tray-wrapper {
bottom: 0;
display: flex;
inline-size: 100%;
inset-inline-start: 0; /* .spectrum-Tray-wrapper */
justify-content: center;
position: fixed; /* .spectrum-Tray-wrapper */
width: 100%;
z-index: 2;
position: fixed;
}
.tray {
border-radius: var(
--spectrum-tray-full-width-border-radius,
var(--spectrum-alias-border-radius-regular)
)
var(
--spectrum-tray-full-width-border-radius,
var(--spectrum-alias-border-radius-regular)
)
var(--spectrum-tray-border-radius, 0)
var(--spectrum-tray-border-radius, 0);
max-height: calc(100vh - var(--spectrum-tray-margin-top));
max-width: var(--spectrum-tray-max-width, 375px);
min-height: var(
--spectrum-tray-min-height,
var(--spectrum-global-dimension-static-size-800)
background-color: var(
--highcontrast-tray-background-color,
var(--mod-tray-background-color, var(--spectrum-tray-background-color))
);
border-radius: unset;
inline-size: 100%; /* .spectrum-Tray */
margin-block-start: var(
--mod-tray-spacing-edge-to-tray-safe-zone,
var(--spectrum-tray-spacing-edge-to-tray-safe-zone)
);
max-block-size: calc(
100vh -
var(
--mod-tray-spacing-edge-to-tray-safe-zone,
var(--spectrum-tray-spacing-edge-to-tray-safe-zone)
)
);
outline: none;
overflow: auto;
padding: var(--spectrum-tray-padding-y, 0)
var(
--spectrum-tray-padding-x,
var(--spectrum-global-dimension-static-size-100)
);
transform: translateY(100%);
transition: opacity
var(
--spectrum-dialog-confirm-exit-animation-duration,
var(--spectrum-global-animation-duration-100)
--mod-tray-exit-animation-duration,
var(--spectrum-tray-exit-animation-duration)
)
cubic-bezier(0.5, 0, 1, 1)
var(--spectrum-dialog-confirm-exit-animation-delay, 0ms),
visibility 0ms linear
var(
--mod-tray-exit-animation-delay,
var(--spectrum-tray-exit-animation-delay)
),
visibility
var(
--mod-tray-exit-animation-duration,
var(--spectrum-tray-exit-animation-duration)
)
linear
calc(
var(--spectrum-dialog-confirm-exit-animation-delay, 0ms) +
var(
--mod-tray-exit-animation-delay,
var(--spectrum-tray-exit-animation-delay)
) +
var(
--spectrum-dialog-confirm-exit-animation-duration,
var(--spectrum-global-animation-duration-100)
--mod-tray-exit-animation-duration,
var(--spectrum-tray-exit-animation-duration)
)
),
transform
var(
--spectrum-dialog-confirm-exit-animation-duration,
var(--spectrum-global-animation-duration-100)
--mod-tray-exit-animation-duration,
var(--spectrum-tray-exit-animation-duration)
)
cubic-bezier(0.5, 0, 1, 1)
var(--spectrum-dialog-confirm-exit-animation-delay, 0ms);
width: var(--spectrum-tray-width, 100%); /* .spectrum-Tray */
var(
--mod-tray-exit-animation-delay,
var(--spectrum-tray-exit-animation-delay)
);
}
:host([open]) .tray {
transform: translateY(0);
transition: transform
var(
--spectrum-dialog-confirm-entry-animation-duration,
var(--spectrum-global-animation-duration-500)
--mod-tray-entry-animation-duration,
var(--spectrum-tray-entry-animation-duration)
)
cubic-bezier(0, 0, 0.4, 1)
var(
--spectrum-dialog-confirm-entry-animation-delay,
var(--spectrum-global-animation-duration-200)
--mod-tray-entry-animation-delay,
var(--spectrum-tray-entry-animation-delay)
),
opacity
var(
--spectrum-dialog-confirm-entry-animation-duration,
var(--spectrum-global-animation-duration-500)
--spectrum-tray-entry-animation-duration,
var(--mod-tray-entry-animation-duration)
)
cubic-bezier(0, 0, 0.4, 1)
var(
--spectrum-dialog-confirm-entry-animation-delay,
var(--spectrum-global-animation-duration-200)
--mod-tray-entry-animation-delay,
var(--spectrum-tray-entry-animation-delay)
); /* .spectrum-Tray.is-open */
}
@media (max-width: 375px) {
@media screen and (orientation: landscape) {
.tray {
border-radius: var(--spectrum-tray-border-radius, 0);
border-top-left-radius: var(
--mod-tray-corner-radius,
var(--spectrum-tray-corner-radius)
);
border-top-right-radius: var(
--mod-tray-corner-radius,
var(--spectrum-tray-corner-radius)
);
max-inline-size: var(
--mod-tray-max-inline-size,
var(--spectrum-tray-max-inline-size)
);
}
}
1 change: 1 addition & 0 deletions scripts/spectrum-tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const tokenPackages = [
'link',
'tag',
'tooltip',
'tray',
];

const packagePaths = tokenPackages.map((packageName) => {
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4686,10 +4686,10 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-4.0.7.tgz#e1bb615aae9746f71473bdbd58557f6c38c71824"
integrity sha512-QNwYjTiI38UQax7nFiBbgH0AIKR2F2vadPQ8xjik2ik5lxeprq5jrPlddYRZ7veBsysav0xvDiWUkhU948rKKg==

"@spectrum-css/tray@^1.0.31":
version "1.0.31"
resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-1.0.31.tgz#ab3ea714d1d6397a84c66ff91da14c21bf6d276f"
integrity sha512-mdjI8jAsHzIf4gGBWlB3yp/ewp4pp8uMdY4t9UYnYHhiP8e6JV9MUKgAjC4nRowoeFjBozFSwIc/EKePYG3jzg==
"@spectrum-css/tray@^2.0.9":
version "2.0.9"
resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-2.0.9.tgz#415168c0d3440bc1933ff7efe81b3710986bde2d"
integrity sha512-Ans6lw1nAdytJbu3oduqDv2p2jnJOpzlKsAWP6YUM0UfLqIj2Bvb2GYTC5hlBstn2OFWTIOAdqQ9qMKAhN5VEA==

"@spectrum-css/typography@^4.0.23":
version "4.0.23"
Expand Down

0 comments on commit cdd78b2

Please sign in to comment.