Skip to content

Commit a7961ca

Browse files
didoodidoo
committed
updated temporary CSS files (components + themed tokens) in showcase public folder
1 parent 930a9cc commit a7961ca

File tree

5 files changed

+1656
-451
lines changed

5 files changed

+1656
-451
lines changed

‎showcase/public/assets/styles/@hashicorp/design-system-components-common.css‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -256,19 +256,19 @@
256256
}
257257

258258
.hds-font-weight-regular {
259-
font-weight: 400;
259+
font-weight: var(--token-typography-font-weight-regular);
260260
}
261261

262262
.hds-font-weight-medium {
263-
font-weight: 500;
263+
font-weight: var(--token-typography-font-weight-medium);
264264
}
265265

266266
.hds-font-weight-semibold {
267-
font-weight: 600;
267+
font-weight: var(--token-typography-font-weight-semibold);
268268
}
269269

270270
.hds-font-weight-bold {
271-
font-weight: 700;
271+
font-weight: var(--token-typography-font-weight-bold);
272272
}
273273

274274
.hds-typography-display-500 {
@@ -335,10 +335,10 @@
335335
padding: 0;
336336
}
337337

338-
.hds-typography-code-100 {
339-
font-family: var(--token-typography-code-100-font-family);
340-
font-size: var(--token-typography-code-100-font-size);
341-
line-height: var(--token-typography-code-100-line-height);
338+
.hds-typography-code-300 {
339+
font-family: var(--token-typography-code-300-font-family);
340+
font-size: var(--token-typography-code-300-font-size);
341+
line-height: var(--token-typography-code-300-line-height);
342342
margin: 0;
343343
padding: 0;
344344
}
@@ -351,10 +351,10 @@
351351
padding: 0;
352352
}
353353

354-
.hds-typography-code-300 {
355-
font-family: var(--token-typography-code-300-font-family);
356-
font-size: var(--token-typography-code-300-font-size);
357-
line-height: var(--token-typography-code-300-line-height);
354+
.hds-typography-code-100 {
355+
font-family: var(--token-typography-code-100-font-family);
356+
font-size: var(--token-typography-code-100-font-size);
357+
line-height: var(--token-typography-code-100-line-height);
358358
margin: 0;
359359
padding: 0;
360360
}
@@ -1511,8 +1511,10 @@
15111511

15121512
.hds-app-footer__copyright {
15131513
display: flex;
1514+
flex-wrap: wrap;
15141515
gap: 6px;
15151516
align-items: center;
1517+
justify-content: center;
15161518
color: var(--app-footer-copyright-text-color);
15171519
}
15181520
.hds-app-footer__copyright .hds-icon {
@@ -4967,6 +4969,7 @@ button.hds-button[href]::after {
49674969
* SPDX-License-Identifier: MPL-2.0
49684970
*/
49694971
.hds-form-file-input {
4972+
width: 100%;
49704973
margin: -4px 0 -4px -4px;
49714974
padding: 3px 0 3px 3px;
49724975
color: var(--token-color-foreground-primary);

‎showcase/public/assets/styles/@hashicorp/design-system-components.css‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -360,9 +360,11 @@
360360
--token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
361361
--token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */
362362
--token-typography-display-500-line-height: 1.2666; /** 38px */
363+
--token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */
363364
--token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
364365
--token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */
365366
--token-typography-display-400-line-height: 1.3333; /** 32px */
367+
--token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
366368
--token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
367369
--token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */
368370
--token-typography-display-300-line-height: 1.3333; /** 24px */
@@ -374,6 +376,7 @@
374376
--token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
375377
--token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */
376378
--token-typography-display-100-line-height: 1.3846; /** 18px */
379+
--token-typography-display-100-letter-spacing: 0px; /** this is `tracking` */
377380
--token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
378381
--token-typography-body-300-font-size: 1rem; /** 16px/1rem */
379382
--token-typography-body-300-line-height: 1.5; /** 24px */
@@ -383,17 +386,21 @@
383386
--token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
384387
--token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */
385388
--token-typography-body-100-line-height: 1.3846; /** 18px */
386-
--token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace;
387-
--token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */
388-
--token-typography-code-100-line-height: 1.23; /** 16px */
389-
--token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace;
390-
--token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
391-
--token-typography-code-200-line-height: 1.125; /** 18px */
392389
--token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace;
393390
--token-typography-code-300-font-size: 1rem; /** 16px/1rem */
394391
--token-typography-code-300-line-height: 1.25; /** 20px */
392+
--token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace;
393+
--token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
394+
--token-typography-code-200-line-height: 1.125; /** 18px */
395+
--token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace;
396+
--token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */
397+
--token-typography-code-100-line-height: 1.23; /** 16px */
395398
}
396399

400+
/**
401+
* Copyright (c) HashiCorp, Inc.
402+
* SPDX-License-Identifier: MPL-2.0
403+
*/
397404
/**
398405
* Do not edit directly, this file was auto-generated.
399406
*/
@@ -647,19 +654,19 @@
647654
}
648655

649656
.hds-font-weight-regular {
650-
font-weight: 400;
657+
font-weight: var(--token-typography-font-weight-regular);
651658
}
652659

653660
.hds-font-weight-medium {
654-
font-weight: 500;
661+
font-weight: var(--token-typography-font-weight-medium);
655662
}
656663

657664
.hds-font-weight-semibold {
658-
font-weight: 600;
665+
font-weight: var(--token-typography-font-weight-semibold);
659666
}
660667

661668
.hds-font-weight-bold {
662-
font-weight: 700;
669+
font-weight: var(--token-typography-font-weight-bold);
663670
}
664671

665672
.hds-typography-display-500 {
@@ -726,10 +733,10 @@
726733
padding: 0;
727734
}
728735

729-
.hds-typography-code-100 {
730-
font-family: var(--token-typography-code-100-font-family);
731-
font-size: var(--token-typography-code-100-font-size);
732-
line-height: var(--token-typography-code-100-line-height);
736+
.hds-typography-code-300 {
737+
font-family: var(--token-typography-code-300-font-family);
738+
font-size: var(--token-typography-code-300-font-size);
739+
line-height: var(--token-typography-code-300-line-height);
733740
margin: 0;
734741
padding: 0;
735742
}
@@ -742,10 +749,10 @@
742749
padding: 0;
743750
}
744751

745-
.hds-typography-code-300 {
746-
font-family: var(--token-typography-code-300-font-family);
747-
font-size: var(--token-typography-code-300-font-size);
748-
line-height: var(--token-typography-code-300-line-height);
752+
.hds-typography-code-100 {
753+
font-family: var(--token-typography-code-100-font-family);
754+
font-size: var(--token-typography-code-100-font-size);
755+
line-height: var(--token-typography-code-100-line-height);
749756
margin: 0;
750757
padding: 0;
751758
}
@@ -1902,8 +1909,10 @@
19021909

19031910
.hds-app-footer__copyright {
19041911
display: flex;
1912+
flex-wrap: wrap;
19051913
gap: 6px;
19061914
align-items: center;
1915+
justify-content: center;
19071916
color: var(--app-footer-copyright-text-color);
19081917
}
19091918
.hds-app-footer__copyright .hds-icon {
@@ -5358,6 +5367,7 @@ button.hds-button[href]::after {
53585367
* SPDX-License-Identifier: MPL-2.0
53595368
*/
53605369
.hds-form-file-input {
5370+
width: 100%;
53615371
margin: -4px 0 -4px -4px;
53625372
padding: 3px 0 3px 3px;
53635373
color: var(--token-color-foreground-primary);

0 commit comments

Comments
 (0)