budibase/packages/builder/src/global.css

:root {
    /* Light theme */
    --background: #FFFFFF;
    --ink: #393C44;

    /* Dark theme */
    --hue: 208;
    --saturation: 9%;
    --base-brightness: 16%;
    --ink: hsl(var(--hue), var(--saturation), 90%);
    --background: hsl(var(--hue), var(--saturation), var(--base-brightness));
    --grey-1: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 2%));
    --grey-2: hsl(var(--hue), calc(var(--saturation) + 1%), calc(var(--base-brightness) + 4%));
    --grey-3: hsl(var(--hue), var(--saturation),calc(var(--base-brightness) + 7%));
    --grey-4: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 10%));
    --grey-5: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 25%));
    --grey-6: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 30%));
    --grey-7: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 55%));
    --grey-8: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 60%));
    --grey-9: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 70%));
}

html, body {
    font-family: var(--font-sans);
    color: var(--ink);
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

#app {
    height: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
}

h1 {
    font-size: 36pt;
}

h2 {
    font-size: 30pt;
}

h3 {
    font-size: 24pt;
}

h4 {
    font-size: 18pt;
}

h5 {
    font-size: 14pt;
}

.hoverable:hover {
    cursor: pointer;
}

/* Top bottom spacing */
.bb-margin-m {
    margin-bottom: var(--spacing-m);
}
* + .bb-margin-m {
    margin-top: var(--spacing-m);
}

.bb-margin-xl {
    margin-bottom: var(--spacing-xl);
}

* + .bb-margin-xl {
    margin-top: var(--spacing-xl);
}