mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: use expressive typography

Browse source
This commit is contained in:
Eric Liu 2020-10-17 10:17:11 -07:00
commit 58574a47af
2 changed files with 31 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/src/layouts/ComponentLayout.svelte
View file

@ -180,7 +180,8 @@
target="_blank" target="_blank"
> >
auto-generated auto-generated
</Link>. </Link>
from a build script.
</p> </p>
</Column> </Column>
</Row> </Row>

64
docs/src/pages/_layout.svelte
View file

@ -36,34 +36,28 @@
<style global> <style global>
.bx--col > h1 { .bx--col > h1 {
font-size: var(--cds-productive-heading-07-font-size); font-size: var(--cds-display-01-font-size);
font-weight: var(--cds-productive-heading-07-font-weight); font-weight: var(--cds-display-01-font-weight);
letter-spacing: var(--cds-productive-heading-07-letter-spacing); letter-spacing: var(--cds-display-01-letter-spacing);
line-height: var(--cds-productive-heading-07-line-height); line-height: var(--cds-display-01-line-height);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--cds-layout-01);
} }
.big-paragraph { .big-paragraph {
font-size: 1.5rem; font-size: var(--cds-expressive-heading-03-font-size);
font-weight: var(--cds-productive-heading-03-font-weight); font-weight: var(--cds-expressive-heading-03-font-weight);
letter-spacing: var(--cds-productive-heading-03-letter-spacing); letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
line-height: var(--cds-productive-heading-03-line-height); line-height: var(--cds-expressive-heading-03-line-height);
margin-top: var(--cds-layout-03); margin-top: var(--cds-layout-03);
margin-bottom: var(--cds-layout-05); margin-bottom: var(--cds-layout-06);
} }
.big-link,
.bx--col > .big-paragraph > code { .bx--col > .big-paragraph > code {
font-size: var(--cds-productive-heading-03-font-size); font-size: var(--cds-expressive-heading-03-font-size);
font-weight: var(--cds-productive-heading-03-font-weight); font-weight: var(--cds-expressive-heading-03-font-weight);
letter-spacing: var(--cds-productive-heading-03-letter-spacing); letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
line-height: var(--cds-productive-heading-03-line-height); line-height: var(--cds-expressive-heading-03-line-height);
}
.big-link {
font-size: 1.5rem;
font-weight: var(--cds-productive-heading-03-font-weight);
letter-spacing: var(--cds-productive-heading-03-letter-spacing);
line-height: var(--cds-productive-heading-03-line-height);
} }
.bx--col > p { .bx--col > p {
@ -81,28 +75,28 @@
} }
.bx--col > h2 { .bx--col > h2 {
font-size: var(--cds-productive-heading-06-font-size); font-size: var(--cds-expressive-heading-05-font-size);
font-weight: var(--cds-productive-heading-06-font-weight); font-weight: var(--cds-expressive-heading-05-font-weight);
letter-spacing: var(--cds-productive-heading-06-letter-spacing); letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
line-height: var(--cds-productive-heading-06-line-height); line-height: var(--cds-expressive-heading-05-line-height);
padding-top: var(--cds-layout-03); padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--cds-layout-01);
} }
.bx--col > h3 { .bx--col > h3 {
font-size: var(--cds-productive-heading-04-font-size); font-size: var(--cds-expressive-heading-04-font-size);
font-weight: var(--cds-productive-heading-04-font-weight); font-weight: var(--cds-expressive-heading-04-font-weight);
letter-spacing: var(--cds-productive-heading-04-letter-spacing); letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
line-height: var(--cds-productive-heading-04-line-height); line-height: var(--cds-expressive-heading-04-line-height);
padding-top: var(--cds-layout-03); padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-02); margin-bottom: var(--cds-layout-01);
} }
.bx--col > h4 { .bx--col > h4 {
font-size: var(--cds-productive-heading-02-font-size); font-size: var(--cds-expressive-heading-02-font-size);
font-weight: var(--cds-productive-heading-02-font-weight); font-weight: var(--cds-expressive-heading-02-font-weight);
letter-spacing: var(--cds-productive-heading-02-letter-spacing); letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
line-height: var(--cds-productive-heading-02-line-height); line-height: var(--cds-expressive-heading-02-line-height);
padding-top: var(--cds-layout-04); padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--cds-layout-01);
} }