Skip to content

Commit 98f2c2c

Browse files
coryrylancoryrylan
committed
fix(styles): deprecation removals
Signed-off-by: Cory Rylan <crylan@nvidia.com>
1 parent 8cf8337 commit 98f2c2c

5 files changed

Lines changed: 7 additions & 93 deletions

File tree

‎projects/styles/src/layout.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@
2424
margin: 0;
2525
}
2626

27-
&[nve-layout~='full'],
28-
&[nve-layout~='grow'] {
29-
/** @deprecated - grow is deprecated in favor of full, to distance confusion of flexbox grow behavior */
27+
&[nve-layout~='full'] {
3028
height: 100%;
3129
width: 100%;
3230
/* https://defensivecss.dev/tip/flexbox-min-content-size/ */
@@ -163,14 +161,14 @@
163161
}
164162

165163
/* Fixed Width Layout Gap Spacing */
166-
@each $gap-size in none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl {
164+
@each $gap-size in none, xxs, xs, sm, md, lg, xl, xxl {
167165
&[nve-layout~='gap:$(gap-size)'] {
168166
gap: var(--nve-ref-space-$(gap-size));
169167
}
170168
}
171169

172170
/* Fixed Width Container Padding */
173-
@each $size in none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl {
171+
@each $size in none, xxs, xs, sm, md, lg, xl, xxl {
174172
&[nve-layout~='pad:$(size)'] {
175173
padding: var(--nve-ref-space-$(size));
176174
}

‎projects/styles/src/layout.examples.ts‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -311,14 +311,6 @@ export const GapNone = {
311311
`
312312
}
313313

314-
export const GapXxxs = {
315-
render: () => html`
316-
<section nve-layout="row gap:xxxs">
317-
${new Array(5).fill(html`<nve-card></nve-card>`)}
318-
</section>
319-
`
320-
}
321-
322314
export const GapXxs = {
323315
render: () => html`
324316
<section nve-layout="row gap:xxs">
@@ -375,14 +367,6 @@ export const GapXxl = {
375367
`
376368
}
377369

378-
export const GapXxxl = {
379-
render: () => html`
380-
<section nve-layout="row gap:xxxl">
381-
${new Array(5).fill(html`<nve-card></nve-card>`)}
382-
</section>
383-
`
384-
}
385-
386370
export const PadNone = {
387371
render: () => html`
388372
<section nve-layout="row gap:sm align:stretch pad:none">
@@ -391,14 +375,6 @@ export const PadNone = {
391375
`
392376
}
393377

394-
export const PadXxxs = {
395-
render: () => html`
396-
<section nve-layout="row gap:sm align:stretch pad:xxxs">
397-
${new Array(3).fill(html`<nve-card></nve-card>`)}
398-
</section>
399-
`
400-
}
401-
402378
export const PadXxs = {
403379
render: () => html`
404380
<section nve-layout="row gap:sm align:stretch pad:xxs">
@@ -455,14 +431,6 @@ export const PadXxl = {
455431
`
456432
}
457433

458-
export const PadXxxl = {
459-
render: () => html`
460-
<section nve-layout="row gap:sm align:stretch pad:xxxl">
461-
${new Array(3).fill(html`<nve-card></nve-card>`)}
462-
</section>
463-
`
464-
}
465-
466434
export const PadTop = {
467435
render: () => html`
468436
<section nve-layout="row gap:sm align:stretch pad-top:xxl">

‎projects/styles/src/responsive.examples.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default {
1414

1515
export const GapResponsive = {
1616
render: () => html`
17-
<section nve-layout="row align:center &sm|gap:xs &md|gap:xl &lg|gap:xxl &xl|gap:xxxl">
17+
<section nve-layout="row align:center &sm|gap:xs &md|gap:xl &lg|gap:xxl &xl|gap:xxl">
1818
<nve-card></nve-card>
1919
<nve-card></nve-card>
2020
<nve-card></nve-card>
@@ -24,7 +24,7 @@ export const GapResponsive = {
2424

2525
export const PadResponsive = {
2626
render: () => html`
27-
<section nve-layout="row &sm|pad:xs &md|pad:lg &xl|pad:xxxl">
27+
<section nve-layout="row &sm|pad:xs &md|pad:lg &xl|pad:xxl">
2828
<nve-card nve-layout="full"></nve-card>
2929
</section>
3030
`
@@ -112,7 +112,7 @@ export const ResponsiveGridItems = {
112112
// Responsive Layout - Viewport (@media query based)
113113
export const ViewportGapResponsive = {
114114
render: () => html`
115-
<section nve-layout="row align:center @sm|gap:xs @md|gap:lg @lg|gap:xl @xl|gap:xxxl">
115+
<section nve-layout="row align:center @sm|gap:xs @md|gap:lg @lg|gap:xl @xl|gap:xxl">
116116
<nve-card></nve-card>
117117
<nve-card></nve-card>
118118
<nve-card></nve-card>
@@ -122,7 +122,7 @@ export const ViewportGapResponsive = {
122122

123123
export const ViewportPadResponsive = {
124124
render: () => html`
125-
<section nve-layout="row @sm|pad:xs @md|pad:lg @lg|pad:lg @xl|pad:xxxl">
125+
<section nve-layout="row @sm|pad:xs @md|pad:lg @lg|pad:lg @xl|pad:xxl">
126126
<nve-card nve-layout="full"></nve-card>
127127
</section>
128128
`

‎projects/styles/src/typography.css‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
[nve-text~='heading'],
66
[nve-text~='body'],
77
[nve-text~='label'],
8-
[nve-text~='eyebrow'],
98
[nve-text~='list'],
109
[nve-text~='list'] li {
1110
font-family: var(--nve-ref-font-family) !important;
@@ -303,38 +302,6 @@ ul[nve-text~='nav'] ul li {
303302
line-height: var(--nve-ref-font-line-height-loose) !important;
304303
}
305304

306-
[nve-text~='line-height-3'] {
307-
line-height: var(--nve-ref-font-line-height-300) !important;
308-
}
309-
310-
[nve-text~='line-height-4'] {
311-
line-height: var(--nve-ref-font-line-height-400) !important;
312-
}
313-
314-
[nve-text~='line-height-5'] {
315-
line-height: var(--nve-ref-font-line-height-500) !important;
316-
}
317-
318-
[nve-text~='line-height-6'] {
319-
line-height: var(--nve-ref-font-line-height-600) !important;
320-
}
321-
322-
[nve-text~='line-height-7'] {
323-
line-height: var(--nve-ref-font-line-height-700) !important;
324-
}
325-
326-
[nve-text~='line-height-8'] {
327-
line-height: var(--nve-ref-font-line-height-800) !important;
328-
}
329-
330-
[nve-text~='line-height-9'] {
331-
line-height: var(--nve-ref-font-line-height-900) !important;
332-
}
333-
334-
[nve-text~='line-height-10'] {
335-
line-height: var(--nve-ref-font-line-height-1000) !important;
336-
}
337-
338305
[nve-text~='start'] {
339306
text-align: start !important;
340307
}

‎projects/styles/src/typography.examples.ts‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -240,25 +240,6 @@ export const LineHeightRelative = {
240240
`
241241
}
242242

243-
/**
244-
* @summary Displays fixed line height values for precise vertical rhythm control independent of font size changes.
245-
* @tags test-case
246-
*/
247-
export const LineHeightFixed = {
248-
render: () => html`
249-
<div nve-layout="column">
250-
<p nve-text="line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
251-
<p nve-text="line-height-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
252-
<p nve-text="line-height-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
253-
<p nve-text="line-height-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
254-
<p nve-text="line-height-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
255-
<p nve-text="line-height-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
256-
<p nve-text="line-height-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
257-
<p nve-text="line-height-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
258-
</div>
259-
`
260-
}
261-
262243
/**
263244
* @summary Description list layout with consistent spacing and typography styles.
264245
*/

0 commit comments

Comments
 (0)