mirror of https://github.com/Budibase/budibase.git
Keviin Åberg Kultalahti
5 years ago
10 changed files with 0 additions and 1046 deletions
@ -1,72 +0,0 @@ |
|||
<script> |
|||
export let extraSmall = false, |
|||
small = false, |
|||
medium = false, |
|||
large = false, |
|||
extraLarge = false, |
|||
white = false, |
|||
grey = false, |
|||
black = false, |
|||
lh = false |
|||
</script> |
|||
|
|||
<p |
|||
class="bb-body" |
|||
class:extraSmall |
|||
class:small |
|||
class:medium |
|||
class:large |
|||
class:extraLarge |
|||
class:white |
|||
class:grey |
|||
class:black |
|||
class:lh> |
|||
<slot /> |
|||
</p> |
|||
|
|||
<style> |
|||
.bb-body { |
|||
font-family: var(--font-sans); |
|||
font-weight: 400; |
|||
text-rendering: var(--text-render); |
|||
color: var(--ink); |
|||
font-size: var(--font-size-m); |
|||
line-height: 0; |
|||
} |
|||
|
|||
.extraSmall { |
|||
font-size: var(--font-size-xs); |
|||
} |
|||
|
|||
.small { |
|||
font-size: var(--font-size-s); |
|||
} |
|||
|
|||
.medium { |
|||
font-size: var(--font-size-m); |
|||
} |
|||
|
|||
.large { |
|||
font-size: var(--font-size-l); |
|||
} |
|||
|
|||
.extraLarge { |
|||
font-size: var(--font-size-xl); |
|||
} |
|||
|
|||
.white { |
|||
color: white; |
|||
} |
|||
|
|||
.grey { |
|||
color: var(--grey-6); |
|||
} |
|||
|
|||
.black { |
|||
color: var(--ink); |
|||
} |
|||
|
|||
.lh { |
|||
line-height: 1.75; |
|||
} |
|||
</style> |
|||
@ -1,175 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
</script> |
|||
|
|||
<h1>Borders</h1> |
|||
<p>Budibase has 2 border variables, light and dark.</p> |
|||
<p><strong>Light</strong> is for layouts.</p> |
|||
<p><strong>Dark</strong> is for components.</p> |
|||
<code>border: var(--border-light);</code> |
|||
<div class="border-light"></div> |
|||
<code>border: var(--border-dark);</code> |
|||
<div class="border-dark"></div> |
|||
|
|||
<hr> |
|||
|
|||
<h2>Border Radius</h2> |
|||
<p>Budibase has 5 border-radius variables:</p> |
|||
|
|||
<table> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Var</th> |
|||
<th>rem</th> |
|||
<th>px</th> |
|||
<th>Visual</th> |
|||
</tr> |
|||
<tr> |
|||
<td>Extra Small</td> |
|||
<td>var(--border-radius-xs)</td> |
|||
<td>0.125</td> |
|||
<td>2</td> |
|||
<td><div class="border-radius-xs">Extra small</div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Small</td> |
|||
<td>var(--border-radius-s)</td> |
|||
<td>0.35</td> |
|||
<td>5.6px</td> |
|||
<td><div class="border-radius-s">Small</div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Medium</td> |
|||
<td>var(--border-radius-m)</td> |
|||
<td>0.5</td> |
|||
<td>8</td> |
|||
<td><div class="border-radius-m">Medium</div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Large</td> |
|||
<td>var(--border-radius-l)</td> |
|||
<td>1</td> |
|||
<td>16</td> |
|||
<td><div class="border-radius-l">Large</div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Extra Large</td> |
|||
<td>var(--border-radius-xl)</td> |
|||
<td>100</td> |
|||
<td>1600</td> |
|||
<td><div class="border-radius-xl">Extra large</div></td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<style> |
|||
|
|||
table { |
|||
font-family: var(--font-sans); |
|||
border-collapse: collapse; |
|||
width: 100%; |
|||
} |
|||
|
|||
code { |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
padding: var(--spacing-s) var(--spacing-l); |
|||
margin: var(--spacing-xl) 0 var(--spacing-s) 0; |
|||
background-color: var(--grey-2); |
|||
color: var(--red-dark); |
|||
border-radius: var(--spacing-xs); |
|||
} |
|||
|
|||
td, th { |
|||
border: 1px solid var(--grey-4); |
|||
text-align: left; |
|||
padding: var(--spacing-m); |
|||
width: 20%; |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
background-color: var(--grey-3); |
|||
} |
|||
|
|||
hr { |
|||
margin: var(--layout-xl) 0px; |
|||
} |
|||
|
|||
.border-light { |
|||
width: 40rem; |
|||
height: 10rem; |
|||
background-color: white; |
|||
border: var(--border-light); |
|||
} |
|||
|
|||
.border-dark { |
|||
width: 40rem; |
|||
height: 10rem; |
|||
background-color: white; |
|||
border: var(--border-dark); |
|||
} |
|||
|
|||
.border-radius-xs { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-family: var(--font-sans); |
|||
width: 8rem; |
|||
height: 3rem; |
|||
background-color: black; |
|||
border-radius: var(--border-radius-xs); |
|||
margin-right: var(--spacing-l); |
|||
} |
|||
|
|||
.border-radius-s { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-family: var(--font-sans); |
|||
width: 8rem; |
|||
height: 3rem; |
|||
background-color: black; |
|||
border-radius: var(--border-radius-s); |
|||
margin-right: var(--spacing-l); |
|||
} |
|||
|
|||
.border-radius-m { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-family: var(--font-sans); |
|||
width: 8rem; |
|||
height: 3rem; |
|||
background-color: black; |
|||
border-radius: var(--border-radius-m); |
|||
margin-right: var(--spacing-l); |
|||
} |
|||
|
|||
.border-radius-l { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-family: var(--font-sans); |
|||
width: 8rem; |
|||
height: 3rem; |
|||
background-color: black; |
|||
border-radius: var(--border-radius-l); |
|||
margin-right: var(--spacing-l); |
|||
} |
|||
|
|||
.border-radius-xl { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-family: var(--font-sans); |
|||
width: 8rem; |
|||
height: 3rem; |
|||
background-color: black; |
|||
border-radius: var(--border-radius-xl); |
|||
margin-right: var(--spacing-l); |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,201 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
</script> |
|||
|
|||
<View name="Base"> |
|||
<div class="white">white</div> |
|||
<div class="grey1">var(--grey-1)</div> |
|||
<div class="grey2">var(--grey-2)</div> |
|||
<div class="grey3">var(--grey-3)</div> |
|||
<div class="grey4">var(--grey-4)</div> |
|||
<div class="grey5">var(--grey-5)</div> |
|||
<div class="grey6">var(--grey-6)</div> |
|||
<div class="grey7">var(--grey-7)</div> |
|||
<div class="grey8">var(--grey-8)</div> |
|||
<div class="grey9">var(--grey-9)</div> |
|||
<div class="ink">var(--ink)</div> |
|||
</View> |
|||
|
|||
<View name="Blue"> |
|||
<div class="blue-light">var(--blue-light)</div> |
|||
<div class="blue">var(--blue)</div> |
|||
<div class="blue-dark">var(--blue-dark)</div> |
|||
</View> |
|||
|
|||
<View name="Yellow"> |
|||
<div class="yellow-light">var(--yellow-light)</div> |
|||
<div class="yellow">var(--yellow)</div> |
|||
<div class="yellow-dark">var(--yellow-dark)</div> |
|||
</View> |
|||
|
|||
<View name="Red"> |
|||
<div class="red-light">var(--red-light)</div> |
|||
<div class="red">var(--red)</div> |
|||
<div class="red-dark">var(--red-dark)</div> |
|||
</View> |
|||
|
|||
<View name="Orange"> |
|||
<div class="orange-light">var(--orange-light)</div> |
|||
<div class="orange">var(--orange)</div> |
|||
<div class="orange-dark">var(--orange-dark)</div> |
|||
</View> |
|||
|
|||
<View name="Green"> |
|||
<div class="green-light">var(--green-light)</div> |
|||
<div class="green">var(--green)</div> |
|||
<div class="green-dark">var(--green-dark)</div> |
|||
</View> |
|||
|
|||
<View name="Purple"> |
|||
<div class="purple-light">var(--purple-light)</div> |
|||
<div class="purple">var(--purple)</div> |
|||
<div class="purple-dark">var(--purple-dark)</div> |
|||
</View> |
|||
|
|||
<style> |
|||
div { |
|||
height: 100px; |
|||
width: 800px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: var(--font-sans); |
|||
} |
|||
|
|||
.white { |
|||
background-color: white; |
|||
} |
|||
|
|||
.grey1 { |
|||
background-color: var(--grey-1); |
|||
} |
|||
|
|||
.grey1 { |
|||
background-color: var(--grey-1); |
|||
} |
|||
|
|||
.grey2 { |
|||
background-color: var(--grey-2); |
|||
} |
|||
|
|||
.grey3 { |
|||
background-color: var(--grey-3); |
|||
} |
|||
|
|||
.grey4 { |
|||
background-color: var(--grey-4); |
|||
} |
|||
|
|||
.grey5 { |
|||
background-color: var(--grey-5); |
|||
} |
|||
|
|||
.grey6 { |
|||
background-color: var(--grey-6); |
|||
} |
|||
|
|||
.grey7 { |
|||
background-color: var(--grey-7); |
|||
color: white; |
|||
} |
|||
|
|||
.grey8 { |
|||
background-color: var(--grey-8); |
|||
color: white; |
|||
} |
|||
|
|||
.grey9 { |
|||
background-color: var(--grey-9); |
|||
color: white; |
|||
} |
|||
|
|||
.ink { |
|||
background-color: var(--ink); |
|||
color: white; |
|||
} |
|||
|
|||
.blue { |
|||
background-color: var(--blue); |
|||
color: white; |
|||
} |
|||
|
|||
.blue-light { |
|||
background-color: var(--blue-light); |
|||
} |
|||
|
|||
.blue-dark { |
|||
background-color: var(--blue-dark); |
|||
color: white; |
|||
} |
|||
|
|||
.yellow { |
|||
background-color: var(--yellow); |
|||
color: white; |
|||
} |
|||
|
|||
.yellow-light { |
|||
background-color: var(--yellow-light); |
|||
} |
|||
|
|||
.yellow-dark { |
|||
background-color: var(--yellow-dark); |
|||
color: white; |
|||
} |
|||
|
|||
.red { |
|||
background-color: var(--red); |
|||
color: white; |
|||
} |
|||
|
|||
.red-light { |
|||
background-color: var(--red-light); |
|||
} |
|||
|
|||
.red-dark { |
|||
background-color: var(--red-dark); |
|||
color: white; |
|||
} |
|||
|
|||
.orange { |
|||
background-color: var(--orange); |
|||
color: white; |
|||
} |
|||
|
|||
.orange-light { |
|||
background-color: var(--orange-light); |
|||
} |
|||
|
|||
.orange-dark { |
|||
background-color: var(--orange-dark); |
|||
color: white; |
|||
} |
|||
|
|||
.green { |
|||
background-color: var(--green); |
|||
color: white; |
|||
} |
|||
|
|||
.green-light { |
|||
background-color: var(--green-light); |
|||
} |
|||
|
|||
.green-dark { |
|||
background-color: var(--green-dark); |
|||
color: white; |
|||
} |
|||
|
|||
.purple { |
|||
background-color: var(--purple); |
|||
color: white; |
|||
} |
|||
|
|||
.purple-light { |
|||
background-color: var(--purple-light); |
|||
} |
|||
|
|||
.purple-dark { |
|||
background-color: var(--purple-dark); |
|||
color: white; |
|||
} |
|||
|
|||
</style> |
|||
@ -1,74 +0,0 @@ |
|||
<script> |
|||
export let extraSmall = false, |
|||
small = false, |
|||
medium = false, |
|||
large = false, |
|||
extraLarge = false, |
|||
white = false, |
|||
grey = false, |
|||
black = false, |
|||
lh = false |
|||
</script> |
|||
|
|||
<h1 |
|||
class="bb-heading" |
|||
class:extraSmall |
|||
class:small |
|||
class:medium |
|||
class:large |
|||
class:extraLarge |
|||
class:white |
|||
class:grey |
|||
class:black |
|||
class:lh> |
|||
<slot /> |
|||
</h1> |
|||
|
|||
<style> |
|||
.bb-heading { |
|||
font-family: var(--font-sans); |
|||
font-weight: 600; |
|||
text-rendering: var(--text-render); |
|||
color: var(--ink); |
|||
font-size: var(--heading-font-size-m); |
|||
line-height: 0; |
|||
} |
|||
|
|||
.extraSmall { |
|||
font-size: var(--heading-font-size-xs); |
|||
} |
|||
|
|||
.small { |
|||
font-size: var(--heading-font-size-s); |
|||
} |
|||
|
|||
.medium { |
|||
font-size: var(--heading-font-size-m); |
|||
} |
|||
|
|||
.large { |
|||
font-size: var(--heading-font-size-l); |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.extraLarge { |
|||
font-size: var(--heading-font-size-xl); |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.white { |
|||
color: white; |
|||
} |
|||
|
|||
.grey { |
|||
color: var(--grey-6); |
|||
} |
|||
|
|||
.black { |
|||
color: var(--ink); |
|||
} |
|||
|
|||
.lh { |
|||
line-height: 1.3; |
|||
} |
|||
</style> |
|||
@ -1,14 +0,0 @@ |
|||
<script> |
|||
import "@spectrum-css/fieldlabel/dist/index-vars.css" |
|||
</script> |
|||
|
|||
<label |
|||
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-Form-itemLabel`}> |
|||
<slot /> |
|||
</label> |
|||
|
|||
<style> |
|||
label { |
|||
white-space: nowrap; |
|||
} |
|||
</style> |
|||
@ -1,16 +0,0 @@ |
|||
<script> |
|||
import BudibaseLogo from "./Budibase-logo.svelte" |
|||
</script> |
|||
|
|||
<div class="home-logo"> |
|||
<BudibaseLogo /> |
|||
</div> |
|||
|
|||
<style> |
|||
.home-logo { |
|||
cursor: pointer; |
|||
height: 40px; |
|||
width: 100px; |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
@ -1,8 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
import Logo from "./Logo.svelte"; |
|||
</script> |
|||
|
|||
<View name="default"> |
|||
<Logo /> |
|||
</View> |
|||
@ -1,191 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
</script> |
|||
|
|||
<h1>2 Scales, 1 Spatial System</h1> |
|||
<p>Budibase has 2 scales, spacing and layout, and follows a 4pt grid system.</p> |
|||
<p><strong>Spacing</strong> is used for smaller, more refined spacing needs, specifically within the context of a component.</p> |
|||
<p><strong>Layout</strong> is used for laying out your page and positing components within that page.</p> |
|||
<p>Spacing and layout will mostly exist alongside margin and padding.</p> |
|||
<p><code>margin: var(--spacing-s);</code></p> |
|||
<code>padding: var(--spacing-s) var(--spacing-l);</code> |
|||
|
|||
<hr> |
|||
|
|||
<h2>Spacing</h2> |
|||
|
|||
<table> |
|||
<tr> |
|||
<th>Var</th> |
|||
<th>rem</th> |
|||
<th>px</th> |
|||
<th>Visual</th> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--spacing-xs)</td> |
|||
<td>0.25</td> |
|||
<td>4</td> |
|||
<td><div class="xs"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--spacing-s)</td> |
|||
<td>0.5</td> |
|||
<td>8</td> |
|||
<td><div class="s"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--spacing-m)</td> |
|||
<td>.75</td> |
|||
<td>12</td> |
|||
<td><div class="m"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--spacing-l)</td> |
|||
<td>1</td> |
|||
<td>16</td> |
|||
<td><div class="l"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--spacing-xl)</td> |
|||
<td>1.25</td> |
|||
<td>20</td> |
|||
<td><div class="xl"></div></td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<hr> |
|||
|
|||
<h2>Layout</h2> |
|||
|
|||
<table> |
|||
<tr> |
|||
<th>Var</th> |
|||
<th>rem</th> |
|||
<th>px</th> |
|||
<th>Visual</th> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--layout-xs)</td> |
|||
<td>1.25</td> |
|||
<td>20</td> |
|||
<td><div class="layout-xs"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--layout-s)</td> |
|||
<td>1.5</td> |
|||
<td>24</td> |
|||
<td><div class="layout-s"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--layout-m)</td> |
|||
<td>2</td> |
|||
<td>32</td> |
|||
<td><div class="layout-m"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--layout-l)</td> |
|||
<td>3</td> |
|||
<td>48</td> |
|||
<td><div class="layout-l"></div></td> |
|||
</tr> |
|||
<tr> |
|||
<td>var(--layout-xl)</td> |
|||
<td>4</td> |
|||
<td>64</td> |
|||
<td><div class="layout-xl"></div></td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<style> |
|||
|
|||
table { |
|||
font-family: var(--font-sans); |
|||
border-collapse: collapse; |
|||
width: 100%; |
|||
} |
|||
|
|||
code { |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
padding: var(--spacing-s) var(--spacing-l); |
|||
margin: var(--spacing-s) 0; |
|||
background-color: var(--grey-2); |
|||
color: var(--red-dark); |
|||
border-radius: var(--spacing-xs); |
|||
} |
|||
|
|||
td, th { |
|||
border: 1px solid var(--grey-4); |
|||
text-align: left; |
|||
padding: var(--spacing-m); |
|||
width: 25%; |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
background-color: var(--grey-3); |
|||
} |
|||
|
|||
hr { |
|||
margin: var(--layout-xl) 0px; |
|||
} |
|||
|
|||
.xs { |
|||
height: var(--spacing-xs); |
|||
width: var(--spacing-xs); |
|||
background-color: var(--purple); |
|||
} |
|||
|
|||
.s { |
|||
height: var(--spacing-s); |
|||
width: var(--spacing-s); |
|||
background-color: var(--purple); |
|||
} |
|||
|
|||
.m { |
|||
height: var(--spacing-m); |
|||
width: var(--spacing-m); |
|||
background-color: var(--purple); |
|||
} |
|||
|
|||
.l { |
|||
height: var(--spacing-l); |
|||
width: var(--spacing-l); |
|||
background-color: var(--purple); |
|||
} |
|||
|
|||
.xl { |
|||
height: var(--spacing-xl); |
|||
width: var(--spacing-xl); |
|||
background-color: var(--purple); |
|||
} |
|||
|
|||
.layout-xs { |
|||
height: var(--layout-xs); |
|||
width: var(--layout-xs); |
|||
background-color: var(--blue); |
|||
} |
|||
|
|||
.layout-s { |
|||
height: var(--layout-s); |
|||
width: var(--layout-s); |
|||
background-color: var(--blue); |
|||
} |
|||
|
|||
.layout-m { |
|||
height: var(--layout-m); |
|||
width: var(--layout-m); |
|||
background-color: var(--blue); |
|||
} |
|||
|
|||
.layout-l { |
|||
height: var(--layout-l); |
|||
width: var(--layout-l); |
|||
background-color: var(--blue); |
|||
} |
|||
|
|||
.layout-xl { |
|||
height: var(--layout-xl); |
|||
width: var(--layout-xl); |
|||
background-color: var(--blue); |
|||
} |
|||
</style> |
|||
@ -1,227 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
import Heading from "./Heading.svelte"; |
|||
import Body from "./Body.svelte"; |
|||
import Label from "./Label.svelte"; |
|||
|
|||
const username = "bbuserexample"; |
|||
</script> |
|||
|
|||
<style> |
|||
.typography-container { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
|
|||
.typography-column { |
|||
padding: var(--spacing-l); |
|||
} |
|||
|
|||
.typography-column--grey { |
|||
background-color: var(--grey-5); |
|||
} |
|||
|
|||
.label-wrapper { |
|||
padding: var(--spacing-m); |
|||
} |
|||
</style> |
|||
|
|||
<h1 class="bb-heading bb-heading--large bb-heading--heavy">Typography</h1> |
|||
<p> |
|||
Budibase uses Inter as its typeface and three types can be used, |
|||
<strong>heading</strong> |
|||
, |
|||
<strong>body</strong> |
|||
and |
|||
<strong>label</strong> |
|||
</p> |
|||
<p>Each type has 5 sizes, xs, s, m l and xl.</p> |
|||
<p>Each type is available in the colors white, grey or black.</p> |
|||
|
|||
<View name="Heading"> |
|||
<div class="typography-container"> |
|||
<div class="typography-column"> |
|||
<Heading extraLarge black>Heading Extra Large Black</Heading> |
|||
|
|||
<Heading large black>Heading Large Black</Heading> |
|||
|
|||
<Heading medium black>Heading Medium Black</Heading> |
|||
|
|||
<Heading small black>Heading Small Black</Heading> |
|||
|
|||
<Heading extraSmall black>Heading Extra Small Black</Heading> |
|||
</div> |
|||
|
|||
<div class="typography-column"> |
|||
<Heading extraLarge grey>Heading Extra Large Grey</Heading> |
|||
|
|||
<Heading large grey>Heading Large Grey</Heading> |
|||
|
|||
<Heading medium grey>Heading Medium Grey</Heading> |
|||
|
|||
<Heading small grey>Heading Small Grey</Heading> |
|||
|
|||
<Heading extraSmall grey>Heading Extra Small Grey</Heading> |
|||
</div> |
|||
|
|||
<div class="typography-column typography-column--grey"> |
|||
<Heading extraLarge white>Heading Extra Large White</Heading> |
|||
|
|||
<Heading large white>Heading Large White</Heading> |
|||
|
|||
<Heading medium white>Heading Medium White</Heading> |
|||
|
|||
<Heading small white>Heading Small White</Heading> |
|||
|
|||
<Heading extraSmall white>Heading Extra Small White</Heading> |
|||
</div> |
|||
|
|||
<div class="typography-column"> |
|||
<Heading extraLarge black lh>Heading Extra Large Black Line Height</Heading> |
|||
|
|||
<Heading large black lh>Heading Large Black Line Height</Heading> |
|||
|
|||
<Heading medium black lh>Heading Medium Black Line Height</Heading> |
|||
|
|||
<Heading small black lh>Heading Small Black Line Height</Heading> |
|||
|
|||
<Heading extraSmall black lh>Heading Extra Small Black Line Height</Heading> |
|||
</div> |
|||
</div> |
|||
</View> |
|||
|
|||
<View name="Body"> |
|||
<div class="typography-container"> |
|||
<div class="typography-column"> |
|||
<Body extraLarge black>Body Extra Large Black</Body> |
|||
|
|||
<Body large black>Body Large Black</Body> |
|||
|
|||
<Body medium black>Body Medium Black</Body> |
|||
|
|||
<Body small black>Body Small Black</Body> |
|||
|
|||
<Body extraSmall black>Body Extra Small Black</Body> |
|||
</div> |
|||
|
|||
<div class="typography-column"> |
|||
<Body extraLarge lh black>Body Extra Large Black Line-height</Body> |
|||
|
|||
<Body large lh black>Body Large Black Line-height</Body> |
|||
|
|||
<Body medium lh black>Body Medium Black Line-height</Body> |
|||
|
|||
<Body small lh black>Body Small Black Line-height</Body> |
|||
|
|||
<Body extraSmall lh black>Body Extra Small Black Line-height</Body> |
|||
</div> |
|||
|
|||
<div class="typography-column"> |
|||
<Body extraLarge grey>Body Extra Large Grey</Body> |
|||
|
|||
<Body large grey>Body Large Grey</Body> |
|||
|
|||
<Body medium grey>Body Medium Grey</Body> |
|||
|
|||
<Body small grey>Body Small Grey</Body> |
|||
|
|||
<Body extraSmall grey>Body Extra Small Grey</Body> |
|||
</div> |
|||
|
|||
<div class="typography-column typography-column--grey"> |
|||
<Body extraLarge white>Body Extra Large White</Body> |
|||
|
|||
<Body large white>Body Large White</Body> |
|||
|
|||
<Body medium white>Body Medium White</Body> |
|||
|
|||
<Body small white>Body Small White</Body> |
|||
|
|||
<Body extraSmall white>Body Extra Small White</Body> |
|||
</div> |
|||
</div> |
|||
</View> |
|||
|
|||
<View name="Label"> |
|||
<div class="typography-container"> |
|||
<div class="label-wrapper"> |
|||
<Label extraLarge black forAttr={username}>Label Extra Large Black</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label large black forAttr={username}>Label Large Black</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label medium black forAttr={username}>Label Medium Black</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label small black forAttr={username}>Label Small Black</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label extraSmall black forAttr={username}>Label Extra Small Black</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="typography-container"> |
|||
<div class="label-wrapper"> |
|||
<Label extraLarge grey forAttr={username}>Label Extra Large Grey</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label large grey forAttr={username}>Label Large Grey</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label medium grey forAttr={username}>Label Medium Grey</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label small grey forAttr={username}>Label Small Grey</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label extraSmall grey forAttr={username}>Label Extra Small Grey</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="typography-container typography-column--grey"> |
|||
<div class="label-wrapper"> |
|||
<Label extraLarge white forAttr={username}>Label Extra Large White</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label large white forAttr={username}>Label Large White</Label> |
|||
|
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label medium white forAttr={username}>Label Medium White</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label small white forAttr={username}>Label Small White</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
|
|||
<div class="label-wrapper"> |
|||
<Label extraSmall white forAttr={username}>Label Extra Small White</Label> |
|||
<input type="text" /> |
|||
</div> |
|||
</div> |
|||
</View> |
|||
Loading…
Reference in new issue