@budibase/bbui 1.58.13 → 2.0.0

package/src/Styleguide/Borders.svench

@@ -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>

package/src/Styleguide/Budibase-logo.svelte

@@ -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>

package/src/Styleguide/Color.svench

@@ -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>

package/src/Styleguide/Heading.svelte

@@ -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>
-
-<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>
-
-<h1
-  class="bb-heading"
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge
-  class:white
-  class:grey
-  class:black
-  class:lh>
-  <slot />
-</h1>

package/src/Styleguide/Label.svelte

@@ -1,70 +0,0 @@
-<script>
-  export let forAttr = "",
-    extraSmall = false,
-    small = false,
-    medium = false,
-    large = false,
-    extraLarge = false,
-    white = false,
-    grey = false,
-    black = false;
-</script>
-
-<style>
-  .bb-label {
-    font-family: var(--font-sans);
-    font-weight: 500;
-    text-rendering: var(--text-render);
-    color: var(--ink);
-    font-size: var(--font-size-s);
-    margin-bottom: var(--spacing-s);
-    display: block;
-  }
-
-  .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);
-  }
-
-</style>
-
-<label
-  class="bb-label"
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge
-  class:white
-  class:grey
-  class:black
-  for={forAttr}>
-  <slot />
-</label>

package/src/Styleguide/Logo.svelte

@@ -1,16 +0,0 @@
-<script>
-  import BudibaseLogo from "./Budibase-logo.svelte";
-</script>
-
-<style>
-  .home-logo {
-    cursor: pointer;
-    height: 40px;
-    width: 100px;
-    margin-bottom: 20px;
-  }
-</style>
-
-<div class="home-logo">
-  <BudibaseLogo />
-</div>

package/src/Styleguide/Logo.svench

@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Logo from "./Logo.svelte";
-</script>
-
-<View name="default">
-  <Logo />
-</View>