Skip to content

Commit c75201f

Browse files
francisrupertfrancisrupert
committed
docs(layout-and-spacing): improve to focus on understanding new layout and spacing system
1 parent fa090ef commit c75201f

14 files changed

Lines changed: 332 additions & 300 deletions

File tree

‎apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPost.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ const blogLink = computed(() => {
9898
:where(th) {
9999
font: var(--dt-text-label-xs);
100100
color: var(--dt-color-foreground-secondary);
101-
text-transform: uppercase;
102101
line-height: var(--dt-font-line-height-100);
103102
}
104103
@@ -120,8 +119,9 @@ const blogLink = computed(() => {
120119
121120
:where(code, kbd) {
122121
background-color: var(--dt-color-background-default);
123-
color: var(--dt-color-blue-800);
122+
color: var(--dt-color-foreground-info);
124123
font: var(--dt-text-code-xs);
124+
font-size: 85%;
125125
}
126126
}
127127
}

‎apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient.svg‎

Lines changed: 8 additions & 7 deletions
Loading

‎apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphic.svg‎

Lines changed: 43 additions & 0 deletions
Loading

‎apps/dialtone-documentation/docs/.vuepress/public/assets/images/icons.svg‎

Lines changed: 5 additions & 10 deletions
Loading

‎apps/dialtone-documentation/docs/.vuepress/public/assets/images/illustrations.svg‎

Lines changed: 41 additions & 2 deletions
Loading

‎apps/dialtone-documentation/docs/.vuepress/public/assets/images/layout-and-spacing.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,6 @@ html body {
396396
:where(th) {
397397
font: var(--dt-text-label-xs);
398398
color: var(--dt-color-foreground-secondary);
399-
text-transform: uppercase;
400399
line-height: var(--dt-font-line-height-100);
401400
}
402401

@@ -419,8 +418,9 @@ html body {
419418

420419
:where(code, kbd) {
421420
background-color: var(--dt-color-background-default);
422-
color: var(--dt-color-blue-800);
421+
color: var(--dt-color-foreground-info);
423422
font: var(--dt-text-code-xs);
423+
font-size: 85%;
424424
}
425425
}
426426
}
@@ -515,33 +515,46 @@ code {
515515
.d-docsite--ordered-list &,
516516
.d-docsite--list-element &,
517517
.d-docsite--preview-header & {
518-
font-size: 95%;
518+
font-size: 85%;
519519
}
520+
520521
}
521522

522523
.d-docsite-article {
523-
> table:not([class]) {
524-
border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
524+
> table:not([class]) {
525+
color: var(--dt-color-foreground-tertiary);
525526
border-collapse: collapse;
526-
margin: var(--dt-size-200) 0;
527+
margin: var(--dt-spacing-200) 0;
527528
inline-size: 100%;
529+
font: var(--dt-text-body-sm);
528530

529-
th {
530-
font: var(--dt-text-label-sm);
531+
:where(th) {
532+
font: var(--dt-text-label-xs);
531533
color: var(--dt-color-foreground-secondary);
534+
line-height: var(--dt-font-line-height-100);
532535
}
533536

534-
th, td {
537+
538+
:where(th, td) {
535539
text-align: start;
536-
border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
537-
border-inline: 0;
538-
padding: var(--dt-size-450);
540+
border-block-end: var(--dt-size-border-100) solid var(--dt-color-border-default);
541+
padding: var(--dt-spacing-200);
542+
vertical-align: baseline;
543+
}
544+
545+
:where(thead th) {
546+
border-block-end-width: var(--dt-size-border-200);
547+
}
548+
549+
:where(tbody tr:last-of-type) :where(td, th) {
550+
border-block-end: none;
539551
}
540552

541-
code {
553+
:where(code, kbd) {
542554
background-color: var(--dt-color-background-default);
543-
padding: var(--dt-size-200);
555+
color: var(--dt-color-foreground-info);
544556
font: var(--dt-text-code-xs);
557+
font-size: 85%;
545558
}
546559
}
547560

@@ -573,7 +586,7 @@ code {
573586
:where(:is(.d-docsite--paragraph, .d-docsite--unordered-list, .d-docsite--ordered-list, .d-docsite--list-element, .d-docsite--preview-header) > code) {
574587
font: var(--dt-text-code-sm);
575588
padding: var(--dt-spacing-25) var(--dt-spacing-50);
576-
color: var(--dt-color-blue-800);
589+
color: var(--dt-color-foreground-info);
577590
border-radius: var(--dt-size-radius-200);
578591
border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
579592
user-select: all;
@@ -584,7 +597,7 @@ code {
584597
}
585598

586599
.d-docsite-code {
587-
color: var(--dt-color-blue-800) !important;
600+
color: var(--dt-color-foreground-info) !important;
588601
font-weight: var(--dt-font-weight-normal) !important;
589602
user-select: all;
590603
}

‎apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:root {
88
--code-c-text: var(--dt-color-foreground-secondary);
99
--code-c-bg: blue;
10-
--code-c-highlight-bg:var(--dt-color-blue-800);
10+
--code-c-highlight-bg:var(--dt-color-foreground-info);
1111
--code-c-line-number: gray;
1212
}
1313

@@ -42,17 +42,17 @@ div[class*="language-"] {
4242

4343
code:not(.d-code--md, .d-code--sm, .d-prose *) {
4444
padding: var(--dt-size-200) var(--dt-size-300);
45-
color: var(--dt-color-blue-800);
45+
color: var(--dt-color-foreground-info);
4646
background-color: var(--dt-color-surface-info);
47-
border-radius: var(--dt-size-100);
47+
border-radius: var(--dt-size-radius-200);
4848
user-select: all;
4949
}
5050

5151
code[class*="language-"],
5252
pre[class*="language-"] {
5353
margin: 0;
5454
color: var(--dt-color-foreground-secondary);
55-
font: var(--dt-text-code-sm);
55+
font: var(--dt-text-code-xs);
5656
line-height: var(--dt-font-line-height-400);
5757
white-space: pre;
5858
text-align: start;
@@ -67,7 +67,7 @@ pre[class*="language-"] {
6767
}
6868

6969
div[class*=language-] pre {
70-
font: var(--dt-text-code-sm);
70+
font: var(--dt-text-code-xs);
7171
line-height: var(--dt-font-line-height-400);
7272
}
7373

@@ -99,7 +99,7 @@ pre[class*="language-"] {
9999
}
100100

101101
.token.punctuation {
102-
color: var(--dt-color-blue-800);
102+
color: var(--dt-color-foreground-info);
103103
}
104104

105105
.token.namespace {
@@ -113,7 +113,7 @@ pre[class*="language-"] {
113113
.token.constant,
114114
.token.symbol,
115115
.token.deleted {
116-
color: var(--dt-color-blue-800);
116+
color: var(--dt-color-foreground-info);
117117
}
118118

119119
.token.selector,

‎apps/dialtone-documentation/docs/_data/site-nav.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@
7272
}
7373
]
7474
},
75+
{
76+
"text": "Layout and Spacing",
77+
"link": "/foundations/size-and-space/",
78+
"icon": "list-spacing-expanded"
79+
},
7580
{
7681
"text": "Gradient",
7782
"link": "/foundations/gradient/",
@@ -101,11 +106,6 @@
101106
"text": "Illustrations",
102107
"link": "/foundations/illustrations/",
103108
"icon": "image"
104-
},
105-
{
106-
"text": "Size and Space",
107-
"link": "/foundations/size-and-space/",
108-
"icon": "list-spacing-expanded"
109109
}
110110
]
111111
}

‎apps/dialtone-documentation/docs/foundations/colors/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ keywords: ["colour", "colors", "palette", "theme", "purple", "red", "blue", "gre
99
<div class="d-d-grid d-g-600 d-g-cols1 md:d-g-cols3 d-ai-center">
1010
<div>
1111
<h2 class="d-docsite--header-3">Expanded</h2>
12-
<p class="d-docsite--paragraph">Product</p>
12+
<p class="d-docsite--paragraph"><dt-link to="/foundations/colors/usage/">Color in Product</dt-link></p>
1313
</div>
1414
<div class="d-gc2">
1515
<svg-loader name="color--expanded" class="d-bar-500" />
@@ -19,7 +19,7 @@ keywords: ["colour", "colors", "palette", "theme", "purple", "red", "blue", "gre
1919
<div class="d-d-grid d-g-600 d-g-cols1 md:d-g-cols3 d-ai-center">
2020
<div>
2121
<h2 class="d-docsite--header-3">Focused</h2>
22-
<p class="d-docsite--paragraph">Brand</p>
22+
<p class="d-docsite--paragraph"><dt-link to="/foundations/colors/marketing/">Color in Marketing</dt-link></p>
2323
</div>
2424
<div class="d-gc2">
2525
<svg-loader name="color--focused" class="d-bar-500" />

0 commit comments

Comments
 (0)