Color stacks

Plus a few nice things that didn’t make our previous release, like an even better search functionality.

This version was released on July 22, 2022

 

We are one more option to render the documentation tokens that didn't make it to the previous release, here it is!

Introducing Color Stacks

Stacks are special mode of rendering your tokens, that take precedent in some well known design systems like Material UI. You can use stacks similarly to other token rendering modes. Here is a preview of what can be done with them!

 

Palette / Blue

Blue 1100
#082036
Blue 1000
#18395d
Blue 900
#245685
Blue 800
#306ca5
Blue 700
#3a79bd
Blue 600
#4587cd
Blue 500
#5196dd
Blue 400
#6aacef
Blue 300
#aad2f4
Blue 200
#cde3f7
Blue 100
#e0f1fe
Blue 0
#ecf8fe

 

You can also stack (pun intended) multiple columns together, making for really nice views. There are now 6 disctinct modes of how to render tokens, with more to come.

Additional improvements

Here are one additional improvements that is connected to the last release:

  • We have improved the new search 2.0 and it can now search categories of documentation alongside pages as well. If you select a category, first page of that category will be selected.

 

As always, if you would like see something new, fixed or improved, join our Discord community - we are always there. Thank you for your support!

 

Full Stack Showcase

There is nothing more in the release notes beyond this content, so we just wanted to show you what happens if you put all stacks in special, dual mode, to the docs. Beware: lot of colors! Have a great weekend!

Palette / Green

Green 1100
#0e2a21
Green 1000
#1c4130
Green 900
#2d6944
Green 800
#3c884d
Green 700
#4ca45a
Green 600
#5ab261
Green 500
#78c767
Green 400
#8fda75
Green 300
#a9e297
Green 200
#ccf0c2
Green 100
#ddf3d9
Green 0
#eef9ec

Palette / Blue

Blue 1100
#082036
Blue 1000
#18395d
Blue 900
#245685
Blue 800
#306ca5
Blue 700
#3a79bd
Blue 600
#4587cd
Blue 500
#5196dd
Blue 400
#6aacef
Blue 300
#aad2f4
Blue 200
#cde3f7
Blue 100
#e0f1fe
Blue 0
#ecf8fe

Palette / Aqua

Aqua 1100
#0b2737
Aqua 1000
#193c4d
Aqua 900
#265d71
Aqua 800
#316c82
Aqua 700
#3a8396
Aqua 600
#4295ab
Aqua 500
#54b5cb
Aqua 400
#6ad3df
Aqua 300
#91e2e1
Aqua 200
#b5f0f1
Aqua 100
#d0f7f8
Aqua 0
#e0fbfb

Palette / Purple

Purple 1100
#1d1e36
Purple 1000
#2b2667
Purple 900
#453e96
Purple 800
#5a52b4
Purple 700
#6b62cc
Purple 600
#7d73e2
Purple 500
#8d84ed
Purple 400
#9e95ec
Purple 300
#c0c2f3
Purple 200
#d8d8f6
Purple 100
#eaeaf8
Purple 0
#f2f2f8

Palette / Neutral

Neutral 1100
#040404
Neutral 1000
#182020
Neutral 900
#293333
Neutral 800
#384141
Neutral 700
#545e5f
Neutral 600
#70797a
Neutral 500
#939a9b
Neutral 400
#b1b6b7
Neutral 300
#c9cccc
Neutral 200
#dfe1e1
Neutral 100
#f3f4f4
Neutral 0
#ffffff

Palette / Teal

Teal 1100
#0b2427
Teal 1000
#1b3e3e
Teal 900
#2a6461
Teal 800
#357a7b
Teal 700
#42948e
Teal 600
#4aa69c
Teal 500
#58c1b2
Teal 400
#6addc6
Teal 300
#97e7d5
Teal 200
#c0f0e6
Teal 100
#d5f6ef
Teal 0
#e9f8f5

Palette / Pink

Pink 1100
#281821
Pink 1000
#4f1930
Pink 900
#872647
Pink 800
#a43b5b
Pink 700
#be4466
Pink 600
#cf517c
Pink 500
#de638b
Pink 400
#ee7fad
Pink 300
#f19bc0
Pink 200
#f4b8d4
Pink 100
#f7dcea
Pink 0
#fbeaf2

Palette / Red

Red 1100
#281212
Red 1000
#641c18
Red 900
#8d2d28
Red 800
#b6403b
Red 700
#ca4b45
Red 600
#dc584a
Red 500
#e56a5b
Red 400
#ef8674
Red 300
#f1a193
Red 200
#f4bbb3
Red 100
#f8d7d3
Red 0
#fbebe9

Palette / Orange

Orange 1100
#2a140f
Orange 1000
#581d09
Orange 900
#8a341a
Orange 800
#bf5c29
Orange 700
#de763a
Orange 600
#e68246
Orange 500
#ee8e53
Orange 400
#f2a069
Orange 300
#f4b388
Orange 200
#f6c7a9
Orange 100
#f7ddce
Orange 0
#fceee4

Palette / Yellow

Yellow 1100
#2a1b08
Yellow 1000
#4e2c0b
Yellow 900
#8b4f1f
Yellow 800
#b0772a
Yellow 700
#d49b35
Yellow 600
#f6be41
Yellow 500
#f8ce4c
Yellow 400
#fad961
Yellow 300
#fbe17f
Yellow 200
#fbe9a4
Yellow 100
#fbeed1
Yellow 0
#fef8e4

Palette / Magenta

Magenta 1100
#271a2c
Magenta 1000
#3f1a4e
Magenta 900
#642a73
Magenta 800
#854091
Magenta 700
#a04da3
Magenta 600
#b659b4
Magenta 500
#cc6bd5
Magenta 400
#e38aef
Magenta 300
#e3b1ee
Magenta 200
#ecc7f4
Magenta 100
#f5e4fa
Magenta 0
#fcf0fe