Skip to content

Commit 099c9f2

Browse files
jenndiazjenndiaz
committed
chore(coachmark): add mods
1 parent 4eb3a56 commit 099c9f2

File tree

2 files changed

+62
-42
lines changed

2 files changed

+62
-42
lines changed

‎components/coachmark/index.css

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,9 @@ governing permissions and limitations under the License.
2525
--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
2626
--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
2727

28-
--spectrum-coarchmark-title-color: var(--spectrum-heading-color);
28+
--spectrum-coachmark-title-color: var(--spectrum-heading-color);
2929
--spectrum-coachmark-title-text-size: var(--spectrum-coach-mark-title-size);
30-
--spectrum-coachmark-title-font-family: var(
31-
--spectrum-heading-sans-serif-font-family-stack
32-
);
30+
--spectrum-coachmark-title-font-family: var(--spectrum-heading-sans-serif-font-family-stack);
3331
--spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style);
3432
--spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
3533

@@ -58,35 +56,32 @@ governing permissions and limitations under the License.
5856
--mod-buttongroup-justify-content: flex-end;
5957
--mod-popover-content-area-spacing-vertical: 0;
6058
--mod-button-edge-to-visual-only: 7px;
61-
}
62-
63-
.spectrum-Popover {
64-
width: inherit; /* don't leave this here */
59+
--mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
6560
}
6661

6762
.spectrum-CoachMark {
6863
position: relative;
69-
min-inline-size: var(--spectrum-coachmark-min-width);
64+
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
7065
max-inline-size: 380px; /* TODO: Replace with new token or modifier*/
7166
inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width));
7267
}
7368

7469
.spectrum-CoachMark--mobile {
7570
position: relative;
76-
min-inline-size: var(--spectrum-coachmark-min-width-mobile);
71+
min-inline-size: var(--mod-coachmark-min-width-mobile, var(--spectrum-coachmark-min-width-mobile));
7772
max-inline-size: 380px; /* TODO: Replace with new token or modifier*/
7873
inline-size: var(--mod-coachmark-width-mobile, var(--spectrum-coachmark-width-mobile));
7974
}
8075

8176

8277
.spectrum-CoachMark--mobile .spectrum-CoachMark-image-wrapper{
8378
block-size: 121px; /* TODO: Replace with new token */
84-
inline-size: calc(var(--mod-coachmark-width-mobile, var(--spectrum-coachmark-width-mobile)) - (var(--spectrum-coachmark-border-size) * 2));
79+
inline-size: calc(var(--mod-coachmark-width-mobile, var(--spectrum-coachmark-width-mobile)) - (var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2));
8580
}
8681

8782
.spectrum-CoachMark-image-wrapper {
8883
block-size: 166px; /* TODO: Replace with new token */
89-
inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - (var(--spectrum-coachmark-border-size) * 2));
84+
inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - (var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2));
9085
object-fit: cover;
9186
object-position: center;
9287
border-start-start-radius: inherit;
@@ -98,74 +93,70 @@ governing permissions and limitations under the License.
9893
width: 100%;
9994
height: 100%;
10095
object-fit: cover;
101-
border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
102-
border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
96+
border-start-start-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)));
97+
border-start-end-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)));
10398
}
10499

105100
.spectrum-CoachMark-header,
106101
.spectrum-CoachMark-content,
107102
.spectrum-CoachMark-footer {
108103
padding-block: 0;
109-
padding-inline: var(--spectrum-coachmark-padding);
104+
padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
110105
}
111106

112107
.spectrum-CoachMark-header {
113-
padding-block-start: var(--spectrum-coachmark-padding);
108+
padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));;
114109
display: flex;
115110
justify-content: space-between;
116111
align-items: flex-end;
117-
margin-block-end: var(--spectrum-coachmark-header-to-body);
112+
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
118113
}
119114

120115
.spectrum-CoachMark-action-menu {
121116
white-space: nowrap;
122117
z-index: 1;
123-
margin-inline-start: var(--spectrum-coachmark-heading-to-action-button)
118+
margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button))
124119
}
125120

126121
.spectrum-CoachMark-content {
127-
margin-block-end: var(--spectrum-coachmark-body-to-footer);
128-
color: var(--spectrum-coachmark-content-font-color);
129-
font-size: var(--spectrum-coachmark-content-font-size);
130-
font-weight: var(--spectrum-coachmark-content-font-weight);
131-
font-family: var(--spectrum-coachmark-content-font-family);
132-
font-style: var(--spectrum-coachmark-content-font-style);
133-
line-height: var(--spectrum-coachmark-content-line-height);
122+
margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer));
123+
color: var(--mod-coachmark-content-font-color, var(--spectrum-coachmark-content-font-color));
124+
font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size));
125+
font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight));
126+
font-family: var(--mod-coachmark-content-font-family, var(--spectrum-coachmark-content-font-family));
127+
font-style: var(--mod-coachmark-content-font-style, var(--spectrum-coachmark-content-font-style));
128+
line-height: var(--mod-coachmark-content-line-height, var(--spectrum-coachmark-content-line-height));
134129
}
135130

136131
.spectrum-CoachMark-footer {
137132
display: grid;
138133
grid-template-columns: 30% 70%;
139134
align-items: end;
140135
margin-block-start: 0;
141-
padding-block-end: var(--spectrum-coachmark-padding);
136+
padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
142137

143138
.spectrum-ButtonGroup {
144139
grid-column-start: 2;
145-
--mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
146140
}
147141
}
148142

149143
.spectrum-CoachMark-title {
150-
color: var(--spectrum-coarchmark-title-color);
151-
font-size: var(--spectrum-coachmark-title-text-size);
152-
font-weight: var(--spectrum-coachmark-title-text-font-weight);
153-
font-family: var(--spectrum-coachmark-title-font-family);
154-
font-style: var(--spectrum-coachmark-title-font-style);
155-
line-height: var(--spectrum-coachmark-title-text-line-height);
144+
color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color));
145+
font-size: var(--mod-coachmark-title-text-size, var(--spectrum-coachmark-title-text-size));
146+
font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight));
147+
font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family));
148+
font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style));
149+
line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height));
156150
margin-block-end: 0;
157151
}
158152

159153
.spectrum-CoachMark-step {
160154
justify-self: start;
161-
color: var(--spectrum-coachmark-step-color);
162-
font-size: var(--spectrum-coachmark-step-text-size);
163-
font-weight: var(--spectrum-coachmark-step-text-font-weight);
164-
font-style: var(--spectrum-coachmark-step-font-style);
165-
line-height: var(--spectrum-coachmark-step-text-line-height);
155+
color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color));
156+
font-size: var(--mod-coachmark-step-text-size, var(--spectrum-coachmark-step-text-size));
157+
font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight));
158+
font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style));
159+
line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height));
166160
white-space: nowrap;
167-
margin-block-end: calc(
168-
var(--spectrum-coachmark-step-step-to-bottom) -
169-
var(--spectrum-coachmark-padding)
170-
);
161+
margin-block-end: calc(var(--mod-coachmark-step-step-to-bottom, var(--spectrum-coachmark-step-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));
171162
}

‎components/coachmark/metadata/mods.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,36 @@
11
| Modifiable Custom Properties |
22
| --------------------------------------------- |
3+
| `--mod-button-edge-to-visual-only` |
34
| `--mod-buttongroup-justify-content` |
45
| `--mod-buttongroup-spacing-horizontal` |
6+
| `--mod-coachmark-body-to-footer` |
7+
| `--mod-coachmark-border-radius` |
8+
| `--mod-coachmark-border-size` |
9+
| `--mod-coachmark-content-font-color` |
10+
| `--mod-coachmark-content-font-family` |
11+
| `--mod-coachmark-content-font-size` |
12+
| `--mod-coachmark-content-font-style` |
13+
| `--mod-coachmark-content-font-weight` |
14+
| `--mod-coachmark-content-line-height` |
15+
| `--mod-coachmark-header-to-body` |
16+
| `--mod-coachmark-heading-to-action-button` |
17+
| `--mod-coachmark-min-width` |
18+
| `--mod-coachmark-min-width-mobile` |
19+
| `--mod-coachmark-padding` |
20+
| `--mod-coachmark-step-color` |
21+
| `--mod-coachmark-step-font-style` |
22+
| `--mod-coachmark-step-step-to-bottom` |
23+
| `--mod-coachmark-step-text-font-weight` |
24+
| `--mod-coachmark-step-text-line-height` |
25+
| `--mod-coachmark-step-text-size` |
26+
| `--mod-coachmark-title-color` |
27+
| `--mod-coachmark-title-font-family` |
28+
| `--mod-coachmark-title-font-style` |
29+
| `--mod-coachmark-title-text-font-weight` |
30+
| `--mod-coachmark-title-text-line-height` |
31+
| `--mod-coachmark-title-text-size` |
532
| `--mod-coachmark-width` |
633
| `--mod-coachmark-width-mobile` |
34+
| `--mod-popover-border-width` |
735
| `--mod-popover-content-area-spacing-vertical` |
36+
| `--mod-popover-corner-radius` |

0 commit comments

Comments
 (0)