preons
Version:
Functional css library and utility belt
2,203 lines • 86 kB
JSON
preons:
baseline: 1.6rem
rules:
theme-colors:
&a1
black: "#000000"
white: "#ffffff"
transparent: transparent
hotpinkxl: "#f188bc"
hotpinkl: "#f36fb0"
hotpink: "#ea2889"
hotpinkd: "#cc0f6d"
hotpinkxd: "#900148"
greyxl: "#f0f2ff"
greyl: "#dedbe2"
grey: "#b2b6ca"
greyd: "#5a5573"
greyxd: "#4d4c51"
yellowxl: "#f8f8b7"
yellowl: "#f1f16f"
yellow: "#eaea28"
yellowd: "#d6d615"
yellowxd: "#b2b211"
redxl: "#f3a6a6"
redl: "#ec7272"
red: "#e53e3e"
redd: "#cd1c1c"
redxd: "#991515"
purplexl: "#c493f4"
purplel: "#a65eef"
purple: "#8928ea"
purpled: "#6c13c4"
purplexd: "#5810a0"
orangexl: "#f4c493"
orangel: "#efa65e"
orange: "#ea8928"
oranged: "#d67515"
orangexd: "#b26211"
limexl: "#c4f493"
limel: "#a6ef5e"
lime: "#89ea28"
limed: "#6cc413"
limexd: "#4e8e0e"
lilacxl: "#f3effd"
lilacl: "#e6dff7"
lilac: "#c4b4ea"
lilacd: "#b3a0de"
lilacxd: "#988bb7"
greenxl: "#00ce00"
greenl: "#00a700"
green: "#008000"
greend: "#006c00"
greenxd: "#005900"
bluexl: "#99c8fb"
bluel: "#68a9f1"
blue: "#2889ea"
blued: "#126eca"
bluexd: "#0c59a7"
off-whitel: "#fbfbff"
off-white: "#f3f3f7"
off-whited: "#e4e7f7"
border-style:
&a4
solid: solid
dotted: dotted
dashed: dashed
list-style:
&a6
circle: circle
disc: disc
square: square
decimal: decimal
none: none
decimal-leading-zero: decimal-leading-zero
overflow:
&a8
scroll: scroll
hidden: hidden
visible: visible
auto: auto
none: none
scaled:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
negative-scaled:
1x: -1rem
2x: -2rem
3x: -3rem
4x: -4rem
5x: -5rem
6x: -6rem
7x: -7rem
8x: -8rem
9x: -9rem
10x: -10rem
baselined:
&a5
"1": $baseline * 0.5
"2": $baseline * 1
"3": $baseline * 1.5
"4": $baseline * 2
"5": $baseline * 2.5
"6": $baseline * 3
"7": $baseline * 3.5
"8": $baseline * 4
"9": $baseline * 4.5
"10": $baseline * 5
"11": $baseline * 5.5
"12": $baseline * 6
decimal:
&a7
"0": 0
"-10": 0.1
"-20": 0.2
"-30": 0.3
"-40": 0.4
"-50": 0.5
"-60": 0.6
"-70": 0.7
"-80": 0.8
"-90": 0.9
"-100": 1
percentaged:
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
discrete-percentage:
-1-12: 100% / 12
-2-12: 100% / 12 * 2
-3-12: 100% / 12 * 3
-4-12: 100% / 12 * 4
-5-12: 100% / 12 * 5
-6-12: 100% / 12 * 6
-7-12: 100% / 12 * 7
-8-12: 100% / 12 * 8
-9-12: 100% / 12 * 9
-10-12: 100% / 12 * 10
-11-12: 100% / 12 * 11
-12-12: 100% / 12 * 12
special-sizes:
n: none
-au: auto
tiny:
&a3
"0": 0
"1": 1px
"2": 2px
"3": 3px
"4": 4px
"5": 5px
"6": 6px
"7": 7px
"8": 8px
"9": 9px
"10": 10px
discrete:
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
vh:
-10vh: 10vh
-20vh: 20vh
-30vh: 30vh
-40vh: 40vh
-50vh: 50vh
-60vh: 60vh
-70vh: 70vh
-80vh: 80vh
-90vh: 90vh
-100vh: 100vh
vw:
-10vw: 10vw
-20vw: 20vw
-30vw: 30vw
-40vw: 40vw
-50vw: 50vw
-60vw: 60vw
-70vw: 70vw
-80vw: 80vw
-90vw: 90vw
-100vw: 100vw
negative-discrete:
-bigx: -16rem
-xbigx: 22rem
-xxbigx: -32rem
-xxxbigx: -44rem
-superx: -56rem
-xsuperx: -68rem
-xxsuperx: -80rem
-xxxsuperx: -100rem
alignment:
&a2
center: center
right: right
left: left
override:
&a9
"0": 0
"1": 1
"2": 2
"3": 3
"4": 4
"5": 5
"10": 10
"20": 20
"30": 30
"999": 999
"9999": 9999
properties:
background-attachment:
class: bga-
values:
sc: scroll
fi: fixed
lo: local
in: initial
inherit: inherit
mappings:
bga-sc: scroll
bga-fi: fixed
bga-lo: local
bga-in: initial
bga-inherit: inherit
background-color:
class: bg-
rule: theme-colors
values: *a1
mappings:
bg-black: "#000000"
bg-white: "#ffffff"
bg-transparent: transparent
bg-hotpinkxl: "#f188bc"
bg-hotpinkl: "#f36fb0"
bg-hotpink: "#ea2889"
bg-hotpinkd: "#cc0f6d"
bg-hotpinkxd: "#900148"
bg-greyxl: "#f0f2ff"
bg-greyl: "#dedbe2"
bg-grey: "#b2b6ca"
bg-greyd: "#5a5573"
bg-greyxd: "#4d4c51"
bg-yellowxl: "#f8f8b7"
bg-yellowl: "#f1f16f"
bg-yellow: "#eaea28"
bg-yellowd: "#d6d615"
bg-yellowxd: "#b2b211"
bg-redxl: "#f3a6a6"
bg-redl: "#ec7272"
bg-red: "#e53e3e"
bg-redd: "#cd1c1c"
bg-redxd: "#991515"
bg-purplexl: "#c493f4"
bg-purplel: "#a65eef"
bg-purple: "#8928ea"
bg-purpled: "#6c13c4"
bg-purplexd: "#5810a0"
bg-orangexl: "#f4c493"
bg-orangel: "#efa65e"
bg-orange: "#ea8928"
bg-oranged: "#d67515"
bg-orangexd: "#b26211"
bg-limexl: "#c4f493"
bg-limel: "#a6ef5e"
bg-lime: "#89ea28"
bg-limed: "#6cc413"
bg-limexd: "#4e8e0e"
bg-lilacxl: "#f3effd"
bg-lilacl: "#e6dff7"
bg-lilac: "#c4b4ea"
bg-lilacd: "#b3a0de"
bg-lilacxd: "#988bb7"
bg-greenxl: "#00ce00"
bg-greenl: "#00a700"
bg-green: "#008000"
bg-greend: "#006c00"
bg-greenxd: "#005900"
bg-bluexl: "#99c8fb"
bg-bluel: "#68a9f1"
bg-blue: "#2889ea"
bg-blued: "#126eca"
bg-bluexd: "#0c59a7"
bg-off-whitel: "#fbfbff"
bg-off-white: "#f3f3f7"
bg-off-whited: "#e4e7f7"
background-size:
class: bs-
values:
auto: auto
inherit: inherit
cover: cover
contain: contain
initial: initial
mappings:
bs-auto: auto
bs-inherit: inherit
bs-cover: cover
bs-contain: contain
bs-initial: initial
background-position:
class: bgp-
rule: alignment
values: *a2
mappings:
bgp-center: center
bgp-right: right
bgp-left: left
background-position-x:
class: bgpx-
rule: alignment
values: *a2
mappings:
bgpx-center: center
bgpx-right: right
bgpx-left: left
background-position-y:
class: bgpy-
rule: alignment
values: *a2
mappings:
bgpy-center: center
bgpy-right: right
bgpy-left: left
background-repeat:
class: bgr-
values:
rx: repeat-x
rp: repeat
sp: space
ro: round
nr: no-repeat
mappings:
bgr-rx: repeat-x
bgr-rp: repeat
bgr-sp: space
bgr-ro: round
bgr-nr: no-repeat
border-bottom-width:
class: bwb
rule: tiny
values: *a3
mappings:
bwb0: 0
bwb1: 1px
bwb2: 2px
bwb3: 3px
bwb4: 4px
bwb5: 5px
bwb6: 6px
bwb7: 7px
bwb8: 8px
bwb9: 9px
bwb10: 10px
border-top-width:
class: bwt
rule: tiny
values: *a3
mappings:
bwt0: 0
bwt1: 1px
bwt2: 2px
bwt3: 3px
bwt4: 4px
bwt5: 5px
bwt6: 6px
bwt7: 7px
bwt8: 8px
bwt9: 9px
bwt10: 10px
border-right-width:
class: bwr
rule: tiny
values: *a3
mappings:
bwr0: 0
bwr1: 1px
bwr2: 2px
bwr3: 3px
bwr4: 4px
bwr5: 5px
bwr6: 6px
bwr7: 7px
bwr8: 8px
bwr9: 9px
bwr10: 10px
border-left-width:
class: bwl
rule: tiny
values: *a3
mappings:
bwl0: 0
bwl1: 1px
bwl2: 2px
bwl3: 3px
bwl4: 4px
bwl5: 5px
bwl6: 6px
bwl7: 7px
bwl8: 8px
bwl9: 9px
bwl10: 10px
border-width:
class: bwa
rule: tiny
values: *a3
mappings:
bwa0: 0
bwa1: 1px
bwa2: 2px
bwa3: 3px
bwa4: 4px
bwa5: 5px
bwa6: 6px
bwa7: 7px
bwa8: 8px
bwa9: 9px
bwa10: 10px
border-bottom-color:
class: bcb-
rule: theme-colors
values: *a1
mappings:
bcb-black: "#000000"
bcb-white: "#ffffff"
bcb-transparent: transparent
bcb-hotpinkxl: "#f188bc"
bcb-hotpinkl: "#f36fb0"
bcb-hotpink: "#ea2889"
bcb-hotpinkd: "#cc0f6d"
bcb-hotpinkxd: "#900148"
bcb-greyxl: "#f0f2ff"
bcb-greyl: "#dedbe2"
bcb-grey: "#b2b6ca"
bcb-greyd: "#5a5573"
bcb-greyxd: "#4d4c51"
bcb-yellowxl: "#f8f8b7"
bcb-yellowl: "#f1f16f"
bcb-yellow: "#eaea28"
bcb-yellowd: "#d6d615"
bcb-yellowxd: "#b2b211"
bcb-redxl: "#f3a6a6"
bcb-redl: "#ec7272"
bcb-red: "#e53e3e"
bcb-redd: "#cd1c1c"
bcb-redxd: "#991515"
bcb-purplexl: "#c493f4"
bcb-purplel: "#a65eef"
bcb-purple: "#8928ea"
bcb-purpled: "#6c13c4"
bcb-purplexd: "#5810a0"
bcb-orangexl: "#f4c493"
bcb-orangel: "#efa65e"
bcb-orange: "#ea8928"
bcb-oranged: "#d67515"
bcb-orangexd: "#b26211"
bcb-limexl: "#c4f493"
bcb-limel: "#a6ef5e"
bcb-lime: "#89ea28"
bcb-limed: "#6cc413"
bcb-limexd: "#4e8e0e"
bcb-lilacxl: "#f3effd"
bcb-lilacl: "#e6dff7"
bcb-lilac: "#c4b4ea"
bcb-lilacd: "#b3a0de"
bcb-lilacxd: "#988bb7"
bcb-greenxl: "#00ce00"
bcb-greenl: "#00a700"
bcb-green: "#008000"
bcb-greend: "#006c00"
bcb-greenxd: "#005900"
bcb-bluexl: "#99c8fb"
bcb-bluel: "#68a9f1"
bcb-blue: "#2889ea"
bcb-blued: "#126eca"
bcb-bluexd: "#0c59a7"
bcb-off-whitel: "#fbfbff"
bcb-off-white: "#f3f3f7"
bcb-off-whited: "#e4e7f7"
border-top-color:
class: bct-
rule: theme-colors
values: *a1
mappings:
bct-black: "#000000"
bct-white: "#ffffff"
bct-transparent: transparent
bct-hotpinkxl: "#f188bc"
bct-hotpinkl: "#f36fb0"
bct-hotpink: "#ea2889"
bct-hotpinkd: "#cc0f6d"
bct-hotpinkxd: "#900148"
bct-greyxl: "#f0f2ff"
bct-greyl: "#dedbe2"
bct-grey: "#b2b6ca"
bct-greyd: "#5a5573"
bct-greyxd: "#4d4c51"
bct-yellowxl: "#f8f8b7"
bct-yellowl: "#f1f16f"
bct-yellow: "#eaea28"
bct-yellowd: "#d6d615"
bct-yellowxd: "#b2b211"
bct-redxl: "#f3a6a6"
bct-redl: "#ec7272"
bct-red: "#e53e3e"
bct-redd: "#cd1c1c"
bct-redxd: "#991515"
bct-purplexl: "#c493f4"
bct-purplel: "#a65eef"
bct-purple: "#8928ea"
bct-purpled: "#6c13c4"
bct-purplexd: "#5810a0"
bct-orangexl: "#f4c493"
bct-orangel: "#efa65e"
bct-orange: "#ea8928"
bct-oranged: "#d67515"
bct-orangexd: "#b26211"
bct-limexl: "#c4f493"
bct-limel: "#a6ef5e"
bct-lime: "#89ea28"
bct-limed: "#6cc413"
bct-limexd: "#4e8e0e"
bct-lilacxl: "#f3effd"
bct-lilacl: "#e6dff7"
bct-lilac: "#c4b4ea"
bct-lilacd: "#b3a0de"
bct-lilacxd: "#988bb7"
bct-greenxl: "#00ce00"
bct-greenl: "#00a700"
bct-green: "#008000"
bct-greend: "#006c00"
bct-greenxd: "#005900"
bct-bluexl: "#99c8fb"
bct-bluel: "#68a9f1"
bct-blue: "#2889ea"
bct-blued: "#126eca"
bct-bluexd: "#0c59a7"
bct-off-whitel: "#fbfbff"
bct-off-white: "#f3f3f7"
bct-off-whited: "#e4e7f7"
border-left-color:
class: bcl-
rule: theme-colors
values: *a1
mappings:
bcl-black: "#000000"
bcl-white: "#ffffff"
bcl-transparent: transparent
bcl-hotpinkxl: "#f188bc"
bcl-hotpinkl: "#f36fb0"
bcl-hotpink: "#ea2889"
bcl-hotpinkd: "#cc0f6d"
bcl-hotpinkxd: "#900148"
bcl-greyxl: "#f0f2ff"
bcl-greyl: "#dedbe2"
bcl-grey: "#b2b6ca"
bcl-greyd: "#5a5573"
bcl-greyxd: "#4d4c51"
bcl-yellowxl: "#f8f8b7"
bcl-yellowl: "#f1f16f"
bcl-yellow: "#eaea28"
bcl-yellowd: "#d6d615"
bcl-yellowxd: "#b2b211"
bcl-redxl: "#f3a6a6"
bcl-redl: "#ec7272"
bcl-red: "#e53e3e"
bcl-redd: "#cd1c1c"
bcl-redxd: "#991515"
bcl-purplexl: "#c493f4"
bcl-purplel: "#a65eef"
bcl-purple: "#8928ea"
bcl-purpled: "#6c13c4"
bcl-purplexd: "#5810a0"
bcl-orangexl: "#f4c493"
bcl-orangel: "#efa65e"
bcl-orange: "#ea8928"
bcl-oranged: "#d67515"
bcl-orangexd: "#b26211"
bcl-limexl: "#c4f493"
bcl-limel: "#a6ef5e"
bcl-lime: "#89ea28"
bcl-limed: "#6cc413"
bcl-limexd: "#4e8e0e"
bcl-lilacxl: "#f3effd"
bcl-lilacl: "#e6dff7"
bcl-lilac: "#c4b4ea"
bcl-lilacd: "#b3a0de"
bcl-lilacxd: "#988bb7"
bcl-greenxl: "#00ce00"
bcl-greenl: "#00a700"
bcl-green: "#008000"
bcl-greend: "#006c00"
bcl-greenxd: "#005900"
bcl-bluexl: "#99c8fb"
bcl-bluel: "#68a9f1"
bcl-blue: "#2889ea"
bcl-blued: "#126eca"
bcl-bluexd: "#0c59a7"
bcl-off-whitel: "#fbfbff"
bcl-off-white: "#f3f3f7"
bcl-off-whited: "#e4e7f7"
border-right-color:
class: bcr-
rule: theme-colors
values: *a1
mappings:
bcr-black: "#000000"
bcr-white: "#ffffff"
bcr-transparent: transparent
bcr-hotpinkxl: "#f188bc"
bcr-hotpinkl: "#f36fb0"
bcr-hotpink: "#ea2889"
bcr-hotpinkd: "#cc0f6d"
bcr-hotpinkxd: "#900148"
bcr-greyxl: "#f0f2ff"
bcr-greyl: "#dedbe2"
bcr-grey: "#b2b6ca"
bcr-greyd: "#5a5573"
bcr-greyxd: "#4d4c51"
bcr-yellowxl: "#f8f8b7"
bcr-yellowl: "#f1f16f"
bcr-yellow: "#eaea28"
bcr-yellowd: "#d6d615"
bcr-yellowxd: "#b2b211"
bcr-redxl: "#f3a6a6"
bcr-redl: "#ec7272"
bcr-red: "#e53e3e"
bcr-redd: "#cd1c1c"
bcr-redxd: "#991515"
bcr-purplexl: "#c493f4"
bcr-purplel: "#a65eef"
bcr-purple: "#8928ea"
bcr-purpled: "#6c13c4"
bcr-purplexd: "#5810a0"
bcr-orangexl: "#f4c493"
bcr-orangel: "#efa65e"
bcr-orange: "#ea8928"
bcr-oranged: "#d67515"
bcr-orangexd: "#b26211"
bcr-limexl: "#c4f493"
bcr-limel: "#a6ef5e"
bcr-lime: "#89ea28"
bcr-limed: "#6cc413"
bcr-limexd: "#4e8e0e"
bcr-lilacxl: "#f3effd"
bcr-lilacl: "#e6dff7"
bcr-lilac: "#c4b4ea"
bcr-lilacd: "#b3a0de"
bcr-lilacxd: "#988bb7"
bcr-greenxl: "#00ce00"
bcr-greenl: "#00a700"
bcr-green: "#008000"
bcr-greend: "#006c00"
bcr-greenxd: "#005900"
bcr-bluexl: "#99c8fb"
bcr-bluel: "#68a9f1"
bcr-blue: "#2889ea"
bcr-blued: "#126eca"
bcr-bluexd: "#0c59a7"
bcr-off-whitel: "#fbfbff"
bcr-off-white: "#f3f3f7"
bcr-off-whited: "#e4e7f7"
border-color:
class: bca-
rule: theme-colors
values: *a1
mappings:
bca-black: "#000000"
bca-white: "#ffffff"
bca-transparent: transparent
bca-hotpinkxl: "#f188bc"
bca-hotpinkl: "#f36fb0"
bca-hotpink: "#ea2889"
bca-hotpinkd: "#cc0f6d"
bca-hotpinkxd: "#900148"
bca-greyxl: "#f0f2ff"
bca-greyl: "#dedbe2"
bca-grey: "#b2b6ca"
bca-greyd: "#5a5573"
bca-greyxd: "#4d4c51"
bca-yellowxl: "#f8f8b7"
bca-yellowl: "#f1f16f"
bca-yellow: "#eaea28"
bca-yellowd: "#d6d615"
bca-yellowxd: "#b2b211"
bca-redxl: "#f3a6a6"
bca-redl: "#ec7272"
bca-red: "#e53e3e"
bca-redd: "#cd1c1c"
bca-redxd: "#991515"
bca-purplexl: "#c493f4"
bca-purplel: "#a65eef"
bca-purple: "#8928ea"
bca-purpled: "#6c13c4"
bca-purplexd: "#5810a0"
bca-orangexl: "#f4c493"
bca-orangel: "#efa65e"
bca-orange: "#ea8928"
bca-oranged: "#d67515"
bca-orangexd: "#b26211"
bca-limexl: "#c4f493"
bca-limel: "#a6ef5e"
bca-lime: "#89ea28"
bca-limed: "#6cc413"
bca-limexd: "#4e8e0e"
bca-lilacxl: "#f3effd"
bca-lilacl: "#e6dff7"
bca-lilac: "#c4b4ea"
bca-lilacd: "#b3a0de"
bca-lilacxd: "#988bb7"
bca-greenxl: "#00ce00"
bca-greenl: "#00a700"
bca-green: "#008000"
bca-greend: "#006c00"
bca-greenxd: "#005900"
bca-bluexl: "#99c8fb"
bca-bluel: "#68a9f1"
bca-blue: "#2889ea"
bca-blued: "#126eca"
bca-bluexd: "#0c59a7"
bca-off-whitel: "#fbfbff"
bca-off-white: "#f3f3f7"
bca-off-whited: "#e4e7f7"
border-style:
class: bsa-
rule: border-style
values: *a4
mappings:
bsa-solid: solid
bsa-dotted: dotted
bsa-dashed: dashed
border-bottom-style:
class: bsb-
rule: border-style
values: *a4
mappings:
bsb-solid: solid
bsb-dotted: dotted
bsb-dashed: dashed
border-top-style:
class: bst-
rule: border-style
values: *a4
mappings:
bst-solid: solid
bst-dotted: dotted
bst-dashed: dashed
border-right-style:
class: bsr-
rule: border-style
values: *a4
mappings:
bsr-solid: solid
bsr-dotted: dotted
bsr-dashed: dashed
border-left-style:
class: bsl-
rule: border-style
values: *a4
mappings:
bsl-solid: solid
bsl-dotted: dotted
bsl-dashed: dashed
border-radius:
class: bra
values:
"1": .5rem
"2": 1rem
"3": 2rem
"4": 3rem
"5": 4rem
"6": 5rem
"-50": 50%
mappings:
bra1: .5rem
bra2: 1rem
bra3: 2rem
bra4: 3rem
bra5: 4rem
bra6: 5rem
bra-50: 50%
clear:
class: c
values:
b: both
mappings:
cb: both
color:
class: null
rule: theme-colors
values: *a1
mappings:
black: "#000000"
white: "#ffffff"
transparent: transparent
hotpinkxl: "#f188bc"
hotpinkl: "#f36fb0"
hotpink: "#ea2889"
hotpinkd: "#cc0f6d"
hotpinkxd: "#900148"
greyxl: "#f0f2ff"
greyl: "#dedbe2"
grey: "#b2b6ca"
greyd: "#5a5573"
greyxd: "#4d4c51"
yellowxl: "#f8f8b7"
yellowl: "#f1f16f"
yellow: "#eaea28"
yellowd: "#d6d615"
yellowxd: "#b2b211"
redxl: "#f3a6a6"
redl: "#ec7272"
red: "#e53e3e"
redd: "#cd1c1c"
redxd: "#991515"
purplexl: "#c493f4"
purplel: "#a65eef"
purple: "#8928ea"
purpled: "#6c13c4"
purplexd: "#5810a0"
orangexl: "#f4c493"
orangel: "#efa65e"
orange: "#ea8928"
oranged: "#d67515"
orangexd: "#b26211"
limexl: "#c4f493"
limel: "#a6ef5e"
lime: "#89ea28"
limed: "#6cc413"
limexd: "#4e8e0e"
lilacxl: "#f3effd"
lilacl: "#e6dff7"
lilac: "#c4b4ea"
lilacd: "#b3a0de"
lilacxd: "#988bb7"
greenxl: "#00ce00"
greenl: "#00a700"
green: "#008000"
greend: "#006c00"
greenxd: "#005900"
bluexl: "#99c8fb"
bluel: "#68a9f1"
blue: "#2889ea"
blued: "#126eca"
bluexd: "#0c59a7"
off-whitel: "#fbfbff"
off-white: "#f3f3f7"
off-whited: "#e4e7f7"
cursor:
class: null
values:
pointer: pointer
help: help
wait: wait
crosshair: crosshair
not-allowed: not-allowed
zoom-in: zoom-in
grab: grab
mappings:
pointer: pointer
help: help
wait: wait
crosshair: crosshair
not-allowed: not-allowed
zoom-in: zoom-in
grab: grab
display:
class: d-
values:
bl: block
in: inline
inbl: inline-block
ta: table
fl: flex
infl: inline-flex
no: none
mappings:
d-bl: block
d-in: inline
d-inbl: inline-block
d-ta: table
d-fl: flex
d-infl: inline-flex
d-no: none
float:
class: fl
values:
r: right
l: left
n: none
mappings:
flr: right
fll: left
fln: none
font-family:
class: ff-
values:
raleway: "#{Raleway, sans-serif}"
exo: "#{Exo, sans-serif}"
josefin: "#{'Josefin Sans', sans-serif}"
kanit: "#{'Kanit', sans-serif}"
martel: "#{'Martel', serif}"
prompt: "#{'Prompt', sans-serif}"
roboto-mono: "#{'Roboto Monp', monospace}"
mappings:
ff-raleway: "#{Raleway, sans-serif}"
ff-exo: "#{Exo, sans-serif}"
ff-josefin: "#{'Josefin Sans', sans-serif}"
ff-kanit: "#{'Kanit', sans-serif}"
ff-martel: "#{'Martel', serif}"
ff-prompt: "#{'Prompt', sans-serif}"
ff-roboto-mono: "#{'Roboto Monp', monospace}"
font-size:
class: fs
values:
"1": .90rem
"2": 1.2rem
"3": 1.60rem
"4": 2.133rem
"5": 2.843rem
"6": 3.790rem
"7": 5.522rem
"8": 6.734rem
"9": 8.976rem
"10": 11.966rem
mappings:
fs1: .90rem
fs2: 1.2rem
fs3: 1.60rem
fs4: 2.133rem
fs5: 2.843rem
fs6: 3.790rem
fs7: 5.522rem
fs8: 6.734rem
fs9: 8.976rem
fs10: 11.966rem
font-style:
class: fst-
values:
no: normal
it: italic
mappings:
fst-no: normal
fst-it: italic
font-weight:
class: fw
values:
"1": 100
"2": 200
"3": 300
"4": 400
"5": 500
"6": 600
"7": 700
"8": 800
"9": 900
l: 300
n: 400
b: 700
mappings:
fw1: 100
fw2: 200
fw3: 300
fw4: 400
fw5: 500
fw6: 600
fw7: 700
fw8: 800
fw9: 900
fwl: 300
fwn: 400
fwb: 700
height:
class: h
rule:
- scaled
- percentaged
- discrete-percentage
- discrete
- special-sizes
- vh
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-1-12: 100% / 12
-2-12: 100% / 12 * 2
-3-12: 100% / 12 * 3
-4-12: 100% / 12 * 4
-5-12: 100% / 12 * 5
-6-12: 100% / 12 * 6
-7-12: 100% / 12 * 7
-8-12: 100% / 12 * 8
-9-12: 100% / 12 * 9
-10-12: 100% / 12 * 10
-11-12: 100% / 12 * 11
-12-12: 100% / 12 * 12
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
n: none
-au: auto
-10vh: 10vh
-20vh: 20vh
-30vh: 30vh
-40vh: 40vh
-50vh: 50vh
-60vh: 60vh
-70vh: 70vh
-80vh: 80vh
-90vh: 90vh
-100vh: 100vh
mappings:
h0: 0
h1: $baseline * 1
h2: $baseline * 2
h3: $baseline * 3
h4: $baseline * 4
h5: $baseline * 5
h6: $baseline * 6
h7: $baseline * 7
h8: $baseline * 8
h9: $baseline * 9
h10: $baseline * 10
h11: $baseline * 11
h12: $baseline * 12
h-5: 5%
h-10: 10%
h-15: 15%
h-20: 20%
h-25: 25%
h-30: 30%
h-35: 35%
h-40: 40%
h-45: 45%
h-50: 50%
h-55: 55%
h-60: 60%
h-65: 65%
h-70: 70%
h-75: 75%
h-80: 80%
h-85: 85%
h-90: 90%
h-95: 95%
h-100: 100%
h-1-12: 100% / 12
h-2-12: 100% / 12 * 2
h-3-12: 100% / 12 * 3
h-4-12: 100% / 12 * 4
h-5-12: 100% / 12 * 5
h-6-12: 100% / 12 * 6
h-7-12: 100% / 12 * 7
h-8-12: 100% / 12 * 8
h-9-12: 100% / 12 * 9
h-10-12: 100% / 12 * 10
h-11-12: 100% / 12 * 11
h-12-12: 100% / 12 * 12
h-wire: 1px
h-xthin: 2px
h-thin: 3px
h-xxxsmall: 5px
h-xxsmall: 0.8rem
h-xsmall: 1rem
h-small: 1.6rem
h-icon: 2.4rem
h-medium: 7rem
h-big: 16rem
h-xbig: 22rem
h-xxbig: 32rem
h-xxxbig: 44rem
h-super: 58rem
h-xsuper: 72rem
h-xxsuper: 90rem
h-xxxsuper: 116rem
hn: none
h-au: auto
h-10vh: 10vh
h-20vh: 20vh
h-30vh: 30vh
h-40vh: 40vh
h-50vh: 50vh
h-60vh: 60vh
h-70vh: 70vh
h-80vh: 80vh
h-90vh: 90vh
h-100vh: 100vh
max-height:
class: maxh
rule:
- percentaged
- discrete
- special-sizes
values:
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
n: none
-au: auto
mappings:
maxh-5: 5%
maxh-10: 10%
maxh-15: 15%
maxh-20: 20%
maxh-25: 25%
maxh-30: 30%
maxh-35: 35%
maxh-40: 40%
maxh-45: 45%
maxh-50: 50%
maxh-55: 55%
maxh-60: 60%
maxh-65: 65%
maxh-70: 70%
maxh-75: 75%
maxh-80: 80%
maxh-85: 85%
maxh-90: 90%
maxh-95: 95%
maxh-100: 100%
maxh-wire: 1px
maxh-xthin: 2px
maxh-thin: 3px
maxh-xxxsmall: 5px
maxh-xxsmall: 0.8rem
maxh-xsmall: 1rem
maxh-small: 1.6rem
maxh-icon: 2.4rem
maxh-medium: 7rem
maxh-big: 16rem
maxh-xbig: 22rem
maxh-xxbig: 32rem
maxh-xxxbig: 44rem
maxh-super: 58rem
maxh-xsuper: 72rem
maxh-xxsuper: 90rem
maxh-xxxsuper: 116rem
maxhn: none
maxh-au: auto
min-height:
class: minh
rule:
- percentaged
- discrete
- special-sizes
values:
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
n: none
-au: auto
mappings:
minh-5: 5%
minh-10: 10%
minh-15: 15%
minh-20: 20%
minh-25: 25%
minh-30: 30%
minh-35: 35%
minh-40: 40%
minh-45: 45%
minh-50: 50%
minh-55: 55%
minh-60: 60%
minh-65: 65%
minh-70: 70%
minh-75: 75%
minh-80: 80%
minh-85: 85%
minh-90: 90%
minh-95: 95%
minh-100: 100%
minh-wire: 1px
minh-xthin: 2px
minh-thin: 3px
minh-xxxsmall: 5px
minh-xxsmall: 0.8rem
minh-xsmall: 1rem
minh-small: 1.6rem
minh-icon: 2.4rem
minh-medium: 7rem
minh-big: 16rem
minh-xbig: 22rem
minh-xxbig: 32rem
minh-xxxbig: 44rem
minh-super: 58rem
minh-xsuper: 72rem
minh-xxsuper: 90rem
minh-xxxsuper: 116rem
minhn: none
minh-au: auto
width:
class: w
rule:
- scaled
- percentaged
- discrete-percentage
- discrete
- special-sizes
- vw
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-1-12: 100% / 12
-2-12: 100% / 12 * 2
-3-12: 100% / 12 * 3
-4-12: 100% / 12 * 4
-5-12: 100% / 12 * 5
-6-12: 100% / 12 * 6
-7-12: 100% / 12 * 7
-8-12: 100% / 12 * 8
-9-12: 100% / 12 * 9
-10-12: 100% / 12 * 10
-11-12: 100% / 12 * 11
-12-12: 100% / 12 * 12
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
n: none
-au: auto
-10vw: 10vw
-20vw: 20vw
-30vw: 30vw
-40vw: 40vw
-50vw: 50vw
-60vw: 60vw
-70vw: 70vw
-80vw: 80vw
-90vw: 90vw
-100vw: 100vw
mappings:
w0: 0
w1: $baseline * 1
w2: $baseline * 2
w3: $baseline * 3
w4: $baseline * 4
w5: $baseline * 5
w6: $baseline * 6
w7: $baseline * 7
w8: $baseline * 8
w9: $baseline * 9
w10: $baseline * 10
w11: $baseline * 11
w12: $baseline * 12
w-5: 5%
w-10: 10%
w-15: 15%
w-20: 20%
w-25: 25%
w-30: 30%
w-35: 35%
w-40: 40%
w-45: 45%
w-50: 50%
w-55: 55%
w-60: 60%
w-65: 65%
w-70: 70%
w-75: 75%
w-80: 80%
w-85: 85%
w-90: 90%
w-95: 95%
w-100: 100%
w-1-12: 100% / 12
w-2-12: 100% / 12 * 2
w-3-12: 100% / 12 * 3
w-4-12: 100% / 12 * 4
w-5-12: 100% / 12 * 5
w-6-12: 100% / 12 * 6
w-7-12: 100% / 12 * 7
w-8-12: 100% / 12 * 8
w-9-12: 100% / 12 * 9
w-10-12: 100% / 12 * 10
w-11-12: 100% / 12 * 11
w-12-12: 100% / 12 * 12
w-wire: 1px
w-xthin: 2px
w-thin: 3px
w-xxxsmall: 5px
w-xxsmall: 0.8rem
w-xsmall: 1rem
w-small: 1.6rem
w-icon: 2.4rem
w-medium: 7rem
w-big: 16rem
w-xbig: 22rem
w-xxbig: 32rem
w-xxxbig: 44rem
w-super: 58rem
w-xsuper: 72rem
w-xxsuper: 90rem
w-xxxsuper: 116rem
wn: none
w-au: auto
w-10vw: 10vw
w-20vw: 20vw
w-30vw: 30vw
w-40vw: 40vw
w-50vw: 50vw
w-60vw: 60vw
w-70vw: 70vw
w-80vw: 80vw
w-90vw: 90vw
w-100vw: 100vw
max-width:
class: maxw
rule:
- percentaged
- discrete
- special-sizes
values:
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
n: none
-au: auto
mappings:
maxw-5: 5%
maxw-10: 10%
maxw-15: 15%
maxw-20: 20%
maxw-25: 25%
maxw-30: 30%
maxw-35: 35%
maxw-40: 40%
maxw-45: 45%
maxw-50: 50%
maxw-55: 55%
maxw-60: 60%
maxw-65: 65%
maxw-70: 70%
maxw-75: 75%
maxw-80: 80%
maxw-85: 85%
maxw-90: 90%
maxw-95: 95%
maxw-100: 100%
maxw-wire: 1px
maxw-xthin: 2px
maxw-thin: 3px
maxw-xxxsmall: 5px
maxw-xxsmall: 0.8rem
maxw-xsmall: 1rem
maxw-small: 1.6rem
maxw-icon: 2.4rem
maxw-medium: 7rem
maxw-big: 16rem
maxw-xbig: 22rem
maxw-xxbig: 32rem
maxw-xxxbig: 44rem
maxw-super: 58rem
maxw-xsuper: 72rem
maxw-xxsuper: 90rem
maxw-xxxsuper: 116rem
maxwn: none
maxw-au: auto
min-width:
class: minw
rule:
- scaled
- percentaged
- discrete
- special-sizes
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
n: none
-au: auto
mappings:
minw0: 0
minw1: $baseline * 1
minw2: $baseline * 2
minw3: $baseline * 3
minw4: $baseline * 4
minw5: $baseline * 5
minw6: $baseline * 6
minw7: $baseline * 7
minw8: $baseline * 8
minw9: $baseline * 9
minw10: $baseline * 10
minw11: $baseline * 11
minw12: $baseline * 12
minw-5: 5%
minw-10: 10%
minw-15: 15%
minw-20: 20%
minw-25: 25%
minw-30: 30%
minw-35: 35%
minw-40: 40%
minw-45: 45%
minw-50: 50%
minw-55: 55%
minw-60: 60%
minw-65: 65%
minw-70: 70%
minw-75: 75%
minw-80: 80%
minw-85: 85%
minw-90: 90%
minw-95: 95%
minw-100: 100%
minw-wire: 1px
minw-xthin: 2px
minw-thin: 3px
minw-xxxsmall: 5px
minw-xxsmall: 0.8rem
minw-xsmall: 1rem
minw-small: 1.6rem
minw-icon: 2.4rem
minw-medium: 7rem
minw-big: 16rem
minw-xbig: 22rem
minw-xxbig: 32rem
minw-xxxbig: 44rem
minw-super: 58rem
minw-xsuper: 72rem
minw-xxsuper: 90rem
minw-xxxsuper: 116rem
minwn: none
minw-au: auto
bottom:
class: b
rule:
- scaled
- negative-scaled
- percentaged
- discrete
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
1x: -1rem
2x: -2rem
3x: -3rem
4x: -4rem
5x: -5rem
6x: -6rem
7x: -7rem
8x: -8rem
9x: -9rem
10x: -10rem
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
mappings:
b0: 0
b1: $baseline * 1
b2: $baseline * 2
b3: $baseline * 3
b4: $baseline * 4
b5: $baseline * 5
b6: $baseline * 6
b7: $baseline * 7
b8: $baseline * 8
b9: $baseline * 9
b10: $baseline * 10
b11: $baseline * 11
b12: $baseline * 12
b1x: -1rem
b2x: -2rem
b3x: -3rem
b4x: -4rem
b5x: -5rem
b6x: -6rem
b7x: -7rem
b8x: -8rem
b9x: -9rem
b10x: -10rem
b-5: 5%
b-10: 10%
b-15: 15%
b-20: 20%
b-25: 25%
b-30: 30%
b-35: 35%
b-40: 40%
b-45: 45%
b-50: 50%
b-55: 55%
b-60: 60%
b-65: 65%
b-70: 70%
b-75: 75%
b-80: 80%
b-85: 85%
b-90: 90%
b-95: 95%
b-100: 100%
b-wire: 1px
b-xthin: 2px
b-thin: 3px
b-xxxsmall: 5px
b-xxsmall: 0.8rem
b-xsmall: 1rem
b-small: 1.6rem
b-icon: 2.4rem
b-medium: 7rem
b-big: 16rem
b-xbig: 22rem
b-xxbig: 32rem
b-xxxbig: 44rem
b-super: 58rem
b-xsuper: 72rem
b-xxsuper: 90rem
b-xxxsuper: 116rem
left:
class: l
rule:
- scaled
- negative-scaled
- percentaged
- discrete
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
1x: -1rem
2x: -2rem
3x: -3rem
4x: -4rem
5x: -5rem
6x: -6rem
7x: -7rem
8x: -8rem
9x: -9rem
10x: -10rem
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
mappings:
l0: 0
l1: $baseline * 1
l2: $baseline * 2
l3: $baseline * 3
l4: $baseline * 4
l5: $baseline * 5
l6: $baseline * 6
l7: $baseline * 7
l8: $baseline * 8
l9: $baseline * 9
l10: $baseline * 10
l11: $baseline * 11
l12: $baseline * 12
l1x: -1rem
l2x: -2rem
l3x: -3rem
l4x: -4rem
l5x: -5rem
l6x: -6rem
l7x: -7rem
l8x: -8rem
l9x: -9rem
l10x: -10rem
l-5: 5%
l-10: 10%
l-15: 15%
l-20: 20%
l-25: 25%
l-30: 30%
l-35: 35%
l-40: 40%
l-45: 45%
l-50: 50%
l-55: 55%
l-60: 60%
l-65: 65%
l-70: 70%
l-75: 75%
l-80: 80%
l-85: 85%
l-90: 90%
l-95: 95%
l-100: 100%
l-wire: 1px
l-xthin: 2px
l-thin: 3px
l-xxxsmall: 5px
l-xxsmall: 0.8rem
l-xsmall: 1rem
l-small: 1.6rem
l-icon: 2.4rem
l-medium: 7rem
l-big: 16rem
l-xbig: 22rem
l-xxbig: 32rem
l-xxxbig: 44rem
l-super: 58rem
l-xsuper: 72rem
l-xxsuper: 90rem
l-xxxsuper: 116rem
top:
class: t
rule:
- scaled
- negative-scaled
- percentaged
- discrete
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
1x: -1rem
2x: -2rem
3x: -3rem
4x: -4rem
5x: -5rem
6x: -6rem
7x: -7rem
8x: -8rem
9x: -9rem
10x: -10rem
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
mappings:
t0: 0
t1: $baseline * 1
t2: $baseline * 2
t3: $baseline * 3
t4: $baseline * 4
t5: $baseline * 5
t6: $baseline * 6
t7: $baseline * 7
t8: $baseline * 8
t9: $baseline * 9
t10: $baseline * 10
t11: $baseline * 11
t12: $baseline * 12
t1x: -1rem
t2x: -2rem
t3x: -3rem
t4x: -4rem
t5x: -5rem
t6x: -6rem
t7x: -7rem
t8x: -8rem
t9x: -9rem
t10x: -10rem
t-5: 5%
t-10: 10%
t-15: 15%
t-20: 20%
t-25: 25%
t-30: 30%
t-35: 35%
t-40: 40%
t-45: 45%
t-50: 50%
t-55: 55%
t-60: 60%
t-65: 65%
t-70: 70%
t-75: 75%
t-80: 80%
t-85: 85%
t-90: 90%
t-95: 95%
t-100: 100%
t-wire: 1px
t-xthin: 2px
t-thin: 3px
t-xxxsmall: 5px
t-xxsmall: 0.8rem
t-xsmall: 1rem
t-small: 1.6rem
t-icon: 2.4rem
t-medium: 7rem
t-big: 16rem
t-xbig: 22rem
t-xxbig: 32rem
t-xxxbig: 44rem
t-super: 58rem
t-xsuper: 72rem
t-xxsuper: 90rem
t-xxxsuper: 116rem
right:
class: r
rule:
- scaled
- negative-scaled
- percentaged
- discrete
values:
"0": 0
"1": $baseline * 1
"2": $baseline * 2
"3": $baseline * 3
"4": $baseline * 4
"5": $baseline * 5
"6": $baseline * 6
"7": $baseline * 7
"8": $baseline * 8
"9": $baseline * 9
"10": $baseline * 10
"11": $baseline * 11
"12": $baseline * 12
1x: -1rem
2x: -2rem
3x: -3rem
4x: -4rem
5x: -5rem
6x: -6rem
7x: -7rem
8x: -8rem
9x: -9rem
10x: -10rem
"-5": 5%
"-10": 10%
"-15": 15%
"-20": 20%
"-25": 25%
"-30": 30%
"-35": 35%
"-40": 40%
"-45": 45%
"-50": 50%
"-55": 55%
"-60": 60%
"-65": 65%
"-70": 70%
"-75": 75%
"-80": 80%
"-85": 85%
"-90": 90%
"-95": 95%
"-100": 100%
-wire: 1px
-xthin: 2px
-thin: 3px
-xxxsmall: 5px
-xxsmall: 0.8rem
-xsmall: 1rem
-small: 1.6rem
-icon: 2.4rem
-medium: 7rem
-big: 16rem
-xbig: 22rem
-xxbig: 32rem
-xxxbig: 44rem
-super: 58rem
-xsuper: 72rem
-xxsuper: 90rem
-xxxsuper: 116rem
mappings:
r0: 0
r1: $baseline * 1
r2: $baseline * 2
r3: $baseline * 3
r4: $baseline * 4
r5: $baseline * 5
r6: $baseline * 6
r7: $baseline * 7
r8: $baseline * 8
r9: $baseline * 9
r10: $baseline * 10
r11: $baseline * 11
r12: $baseline * 12
r1x: -1rem
r2x: -2rem
r3x: -3rem
r4x: -4rem
r5x: -5rem
r6x: -6rem
r7x: -7rem
r8x: -8rem
r9x: -9rem
r10x: -10rem
r-5: 5%
r-10: 10%
r-15: 15%
r-20: 20%
r-25: 25%
r-30: 30%
r-35: 35%
r-40: 40%
r-45: 45%
r-50: 50%
r-55: 55%
r-60: 60%
r-65: 65%
r-70: 70%
r-75: 75%
r-80: 80%
r-85: 85%
r-90: 90%
r-95: 95%
r-100: 100%
r-wire: 1px
r-xthin: 2px
r-th