delete BBUI Styleguide
This commit is contained in:
Keviin Åberg Kultalahti
parent
f0f10ab2b4
commit
25a56b697e
|
|
@ -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>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 115 40"
|
||||
style="enable-background:new 0 0 115 40;"
|
||||
xml:space="preserve">
|
||||
<path
|
||||
class="st0"
|
||||
d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
|
||||
c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z
|
||||
M10.97,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
|
||||
c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
|
||||
c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
|
||||
c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
|
||||
V28.79z
|
||||
M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
|
||||
c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
|
||||
C40.77,20.14,40.12,20.34,39.53,20.91z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
|
||||
C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z
|
||||
M61.06,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
|
||||
c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
|
||||
M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
|
||||
c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
|
||||
c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
|
||||
c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
|
||||
c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
|
||||
c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
|
||||
c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
|
||||
c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
|
||||
c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
|
||||
c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z
|
||||
M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
|
||||
c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z" />
|
||||
</svg>
|
||||
|
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