Skip to content

Commit 553895d

Browse files
jawinnjawinn
authored
refactor(card): rename mod and refactor some usage of mods and vars (#2444)
fix(card): rename misnamed instance of background color mod The custom mod property for the background color was named incorrectly in one of the declarations. refactor(card): cleanup mods and vars around use of preview bg The custom properties and mods were not differentiating between the card background and the preview div background used in the quiet, gallery, and horizontal variations. This did not work well with the horizontal variant which has both a card background and a preview background, when some of the mis-named mods were fixed. A few unset custom properties with spectrum prefixed naming also appeared to be intended as mods, and now have mod equivalents: --spectrum-card-background-color-quiet --spectrum-card-background-color-hover-quiet --spectrum-card-content-margin-top-quiet --spectrum-card-minimum-width-quiet - Creates new custom properties for the preview background colors, that were previously being set through changing a mod value. - Renames --spectrum-card-preview-border-width to --spectrum-card-preview-border-width-selected to match with its usage
1 parent e5133d7 commit 553895d

File tree

2 files changed

+65
-43
lines changed

2 files changed

+65
-43
lines changed

‎components/card/index.css

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ governing permissions and limitations under the License.
5252
--spectrum-card-actions-spacing: var(--spectrum-spacing-300);
5353
--spectrum-card-actions-size: var(--spectrum-card-selection-background-size);
5454
--spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100);
55+
5556
/* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
5657
--spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb);
5758
--spectrum-card-actions-background-color-opacity: var(
@@ -70,14 +71,17 @@ governing permissions and limitations under the License.
7071

7172
/* Selected */
7273
--spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */
74+
7375
/* TODO: These are placeholder until recursive RGB is available */
7476
.spectrum--light &,
7577
.spectrum--lightest & {
7678
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
7779
}
80+
7881
.spectrum--dark & {
7982
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
8083
}
84+
8185
.spectrum--darkest & {
8286
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
8387
}
@@ -86,29 +90,18 @@ governing permissions and limitations under the License.
8690
&--quiet,
8791
&--gallery {
8892
--mod-card-content-margin-top: var(
89-
--spectrum-card-content-margin-top-quiet,
93+
--mod-card-content-margin-top-quiet,
9094
var(--spectrum-spacing-100)
9195
);
9296
--mod-card-minimum-width: var(
93-
--spectrum-card-minimum-width-quiet,
97+
--mod-card-minimum-width-quiet,
9498
var(--spectrum-card-minimum-width)
9599
);
96-
97-
--spectrum-card-preview-border-width: var(--spectrum-border-width-100);
98100
}
99101

100-
&--quiet,
101-
&--gallery,
102-
&--horizontal {
103-
--mod-card-background-color: var(
104-
--spectrum-card-background-color-quiet,
105-
var(--spectrum-background-base-color)
106-
);
107-
--spectrum-card-background-color-hover: var(
108-
--spectrum-card-background-color-hover-quiet,
109-
var(--spectrum-gray-300)
110-
);
111-
}
102+
--spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
103+
--spectrum-card-preview-background-color: var(--spectrum-background-base-color);
104+
--spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
112105

113106
/* Horizontal */
114107
--spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
@@ -137,11 +130,17 @@ governing permissions and limitations under the License.
137130
--highcontrast-card-border-color,
138131
var(--mod-card-border-color, var(--spectrum-card-border-color))
139132
);
133+
134+
/* @deprecation --mod-spectrum-card-background-color has been renamed to
135+
--mod-card-background-color. The fallback will be removed in a future version. */
140136
background-color: var(
141137
--highcontrast-card-background-color,
142138
var(
143-
--mod-spectrum-card-background-color,
144-
var(--spectrum-card-background-color)
139+
--mod-card-background-color,
140+
var(
141+
--mod-spectrum-card-background-color,
142+
var(--spectrum-card-background-color)
143+
)
145144
)
146145
);
147146

@@ -245,6 +244,7 @@ governing permissions and limitations under the License.
245244
var(--spectrum-card-border-color-selected)
246245
)
247246
);
247+
248248
&::before {
249249
background-color: rgba(
250250
var(
@@ -294,7 +294,7 @@ governing permissions and limitations under the License.
294294
.spectrum-Card-actions {
295295
/* Ideally, this would simply apply is-open to the QuickActions component */
296296
visibility: visible;
297-
opacity: 1;
297+
opacity: 100%;
298298
pointer-events: all;
299299
}
300300
}
@@ -570,6 +570,7 @@ governing permissions and limitations under the License.
570570
var(--mod-card-border-width, var(--spectrum-card-border-width))
571571
)
572572
);
573+
573574
/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
574575
and will be removed in a future version. */
575576
padding-block-start: var(
@@ -623,6 +624,7 @@ governing permissions and limitations under the License.
623624
&::after {
624625
border-width: 0;
625626
}
627+
626628
.spectrum-Card-preview::after {
627629
border-color: var(
628630
--mod-card-focus-indicator-color,
@@ -633,9 +635,14 @@ governing permissions and limitations under the License.
633635

634636
&.is-selected {
635637
.spectrum-Card-preview {
638+
/* @deprecation --mod-card-preview-border-width has been renamed to --mod-card-preview-border-width-selected
639+
and the fallback will be removed in a future version. */
636640
border: var(
637-
--mod-card-preview-border-width,
638-
var(--spectrum-card-preview-border-width)
641+
--mod-card-preview-border-width-selected,
642+
var(
643+
--mod-card-preview-border-width,
644+
var(--spectrum-card-preview-border-width-selected)
645+
)
639646
)
640647
solid;
641648
border-color: var(
@@ -672,8 +679,11 @@ governing permissions and limitations under the License.
672679
var(--spectrum-card-corner-radius)
673680
);
674681
background-color: var(
675-
--mod-card-background-color,
676-
var(--spectrum-card-background-color)
682+
--mod-card-preview-background-color,
683+
var(
684+
--mod-card-background-color,
685+
var(--spectrum-card-preview-background-color)
686+
)
677687
);
678688
min-block-size: var(
679689
--mod-card-preview-minimum-height,
@@ -684,8 +694,9 @@ governing permissions and limitations under the License.
684694
margin: 0 auto;
685695
box-sizing: border-box;
686696
position: relative;
697+
/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
687698
transition: background-color
688-
var(--mod-animation-duration-100, var(--spectrum-animation-duration-100));
699+
var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)));
689700
overflow: visible;
690701

691702
/* Use ::before to show the selected overlay */
@@ -729,10 +740,14 @@ governing permissions and limitations under the License.
729740

730741
&:hover {
731742
border-color: transparent;
743+
732744
.spectrum-Card-preview {
733745
background-color: var(
734-
--mod-card-background-color-hover,
735-
var(--spectrum-card-background-color-hover)
746+
--mod-card-preview-background-color-hover,
747+
var(
748+
--mod-card-background-color-hover,
749+
var(--spectrum-card-preview-background-color-hover)
750+
)
736751
);
737752
}
738753
}
@@ -745,8 +760,11 @@ governing permissions and limitations under the License.
745760
.spectrum-Card-preview {
746761
transition: none;
747762
background-color: var(
748-
--mod-card-background-color,
749-
var(--spectrum-card-background-color)
763+
--mod-card-preview-background-color,
764+
var(
765+
--mod-card-background-color,
766+
var(--spectrum-card-preview-background-color)
767+
)
750768
);
751769
}
752770

@@ -796,7 +814,7 @@ governing permissions and limitations under the License.
796814
}
797815

798816
.spectrum-Card--horizontal {
799-
flex-direction: row;
817+
flex-direction: row;
800818

801819
&:hover {
802820
.spectrum-Card-preview {
@@ -824,21 +842,20 @@ governing permissions and limitations under the License.
824842
var(--spectrum-card-horizontal-preview-padding)
825843
);
826844
background-color: var(
827-
--mod-card-background-color,
828-
var(--spectrum-card-background-color)
845+
--mod-card-preview-background-color,
846+
var(--spectrum-card-preview-background-color)
829847
);
830-
831848
border-color: var(
832849
--mod-card-border-color,
833850
var(--spectrum-card-border-color)
834851
);
835852
}
836853

837-
.spectrum-Card-header,
838-
.spectrum-Card-content {
839-
margin-block-start: 0;
840-
block-size: auto;
841-
}
854+
.spectrum-Card-header,
855+
.spectrum-Card-content {
856+
margin-block-start: 0;
857+
block-size: auto;
858+
}
842859

843860
.spectrum-Card-content {
844861
margin-block-end: 0;
@@ -848,12 +865,11 @@ governing permissions and limitations under the License.
848865
padding-inline-end: 0;
849866
}
850867

851-
.spectrum-Card-body {
852-
flex-shrink: 0;
853-
display: flex;
854-
justify-content: center;
855-
flex-direction: column;
856-
868+
.spectrum-Card-body {
869+
flex-shrink: 0;
870+
display: flex;
871+
justify-content: center;
872+
flex-direction: column;
857873
padding-block: 0;
858874
padding-inline: var(
859875
--mod-card-horizontal-body-padding,

‎components/card/metadata/mods.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
| `--mod-card-actions-drop-shadow-y` |
1111
| `--mod-card-actions-size` |
1212
| `--mod-card-actions-spacing` |
13+
| `--mod-card-animation-duration` |
1314
| `--mod-card-background-color` |
1415
| `--mod-card-background-color-hover` |
1516
| `--mod-card-body-font-color` |
@@ -29,6 +30,7 @@
2930
| `--mod-card-border-width` |
3031
| `--mod-card-content-margin-bottom` |
3132
| `--mod-card-content-margin-top` |
33+
| `--mod-card-content-margin-top-quiet` |
3234
| `--mod-card-corner-radius` |
3335
| `--mod-card-divider-color` |
3436
| `--mod-card-focus-indicator-color` |
@@ -42,7 +44,11 @@
4244
| `--mod-card-horizontal-body-padding` |
4345
| `--mod-card-horizontal-preview-padding` |
4446
| `--mod-card-minimum-width` |
47+
| `--mod-card-minimum-width-quiet` |
48+
| `--mod-card-preview-background-color` |
49+
| `--mod-card-preview-background-color-hover` |
4550
| `--mod-card-preview-border-width` |
51+
| `--mod-card-preview-border-width-selected` |
4652
| `--mod-card-preview-minimum-height` |
4753
| `--mod-card-selected-background-color-rgb` |
4854
| `--mod-card-selected-background-opacity` |

0 commit comments

Comments
 (0)