Release #78-2

Few more nice things that didn't make it to release #78!

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

Palette / Blue / Blue 1100
#082036
rgb(8, 32, 54)
Palette / Blue / Blue 1000
#18395d
rgb(24, 57, 93)
Palette / Blue / Blue 900
#245685
rgb(36, 86, 133)
Palette / Blue / Blue 800
#306ca5
rgb(48, 108, 165)
Palette / Blue / Blue 700
#3a79bd
rgb(58, 121, 189)
Palette / Blue / Blue 600
#4587cd
rgb(69, 135, 205)
Palette / Blue / Blue 500
#5196dd
rgb(81, 150, 221)
Palette / Blue / Blue 400
#6aacef
rgb(106, 172, 239)
Palette / Blue / Blue 300
#aad2f4
rgb(170, 210, 244)
Palette / Blue / Blue 200
#cde3f7
rgb(205, 227, 247)
Palette / Blue / Blue 100
#e0f1fe
rgb(224, 241, 254)
Palette / Blue / Blue 0
#ecf8fe
rgb(236, 248, 254)

 

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

Palette / Green / Green 1100
#0e2a21
rgb(14, 42, 33)
Palette / Green / Green 1000
#1c4130
rgb(28, 65, 48)
Palette / Green / Green 900
#2d6944
rgb(45, 105, 68)
Palette / Green / Green 800
#3c884d
rgb(60, 136, 77)
Palette / Green / Green 700
#4ca45a
rgb(76, 164, 90)
Palette / Green / Green 600
#5ab261
rgb(90, 178, 97)
Palette / Green / Green 500
#78c767
rgb(120, 199, 103)
Palette / Green / Green 400
#8fda75
rgb(143, 218, 117)
Palette / Green / Green 300
#a9e297
rgb(169, 226, 151)
Palette / Green / Green 200
#ccf0c2
rgb(204, 240, 194)
Palette / Green / Green 100
#ddf3d9
rgb(221, 243, 217)
Palette / Green / Green 0
#eef9ec
rgb(238, 249, 236)

Palette / Blue

Palette / Blue / Blue 1100
#082036
rgb(8, 32, 54)
Palette / Blue / Blue 1000
#18395d
rgb(24, 57, 93)
Palette / Blue / Blue 900
#245685
rgb(36, 86, 133)
Palette / Blue / Blue 800
#306ca5
rgb(48, 108, 165)
Palette / Blue / Blue 700
#3a79bd
rgb(58, 121, 189)
Palette / Blue / Blue 600
#4587cd
rgb(69, 135, 205)
Palette / Blue / Blue 500
#5196dd
rgb(81, 150, 221)
Palette / Blue / Blue 400
#6aacef
rgb(106, 172, 239)
Palette / Blue / Blue 300
#aad2f4
rgb(170, 210, 244)
Palette / Blue / Blue 200
#cde3f7
rgb(205, 227, 247)
Palette / Blue / Blue 100
#e0f1fe
rgb(224, 241, 254)
Palette / Blue / Blue 0
#ecf8fe
rgb(236, 248, 254)

Palette / Aqua

Palette / Aqua / Aqua 1100
#0b2737
rgb(11, 39, 55)
Palette / Aqua / Aqua 1000
#193c4d
rgb(25, 60, 77)
Palette / Aqua / Aqua 900
#265d71
rgb(38, 93, 113)
Palette / Aqua / Aqua 800
#316c82
rgb(49, 108, 130)
Palette / Aqua / Aqua 700
#3a8396
rgb(58, 131, 150)
Palette / Aqua / Aqua 600
#4295ab
rgb(66, 149, 171)
Palette / Aqua / Aqua 500
#54b5cb
rgb(84, 181, 203)
Palette / Aqua / Aqua 400
#6ad3df
rgb(106, 211, 223)
Palette / Aqua / Aqua 300
#91e2e1
rgb(145, 226, 225)
Palette / Aqua / Aqua 200
#b5f0f1
rgb(181, 240, 241)
Palette / Aqua / Aqua 100
#d0f7f8
rgb(208, 247, 248)
Palette / Aqua / Aqua 0
#e0fbfb
rgb(224, 251, 251)

Palette / Purple

Palette / Purple / Purple 1100
#1d1e36
rgb(29, 30, 54)
Palette / Purple / Purple 1000
#2b2667
rgb(43, 38, 103)
Palette / Purple / Purple 900
#453e96
rgb(69, 62, 150)
Palette / Purple / Purple 800
#5a52b4
rgb(90, 82, 180)
Palette / Purple / Purple 700
#6b62cc
rgb(107, 98, 204)
Palette / Purple / Purple 600
#7d73e2
rgb(125, 115, 226)
Palette / Purple / Purple 500
#8d84ed
rgb(141, 132, 237)
Palette / Purple / Purple 400
#9e95ec
rgb(158, 149, 236)
Palette / Purple / Purple 300
#c0c2f3
rgb(192, 194, 243)
Palette / Purple / Purple 200
#d8d8f6
rgb(216, 216, 246)
Palette / Purple / Purple 100
#eaeaf8
rgb(234, 234, 248)
Palette / Purple / Purple 0
#f2f2f8
rgb(242, 242, 248)

Palette / Neutral

Palette / Neutral / Neutral 1100
#040404
rgb(4, 4, 4)
Palette / Neutral / Neutral 1000
#182020
rgb(24, 32, 32)
Palette / Neutral / Neutral 900
#293333
rgb(41, 51, 51)
Palette / Neutral / Neutral 800
#384141
rgb(56, 65, 65)
Palette / Neutral / Neutral 700
#545e5f
rgb(84, 94, 95)
Palette / Neutral / Neutral 600
#70797a
rgb(112, 121, 122)
Palette / Neutral / Neutral 500
#939a9b
rgb(147, 154, 155)
Palette / Neutral / Neutral 400
#b1b6b7
rgb(177, 182, 183)
Palette / Neutral / Neutral 300
#c9cccc
rgb(201, 204, 204)
Palette / Neutral / Neutral 200
#dfe1e1
rgb(223, 225, 225)
Palette / Neutral / Neutral 100
#f3f4f4
rgb(243, 244, 244)
Palette / Neutral / Neutral 0
#ffffff
rgb(255, 255, 255)

Palette / Teal

Palette / Teal / Teal 1100
#0b2427
rgb(11, 36, 39)
Palette / Teal / Teal 1000
#1b3e3e
rgb(27, 62, 62)
Palette / Teal / Teal 900
#2a6461
rgb(42, 100, 97)
Palette / Teal / Teal 800
#357a7b
rgb(53, 122, 123)
Palette / Teal / Teal 700
#42948e
rgb(66, 148, 142)
Palette / Teal / Teal 600
#4aa69c
rgb(74, 166, 156)
Palette / Teal / Teal 500
#58c1b2
rgb(88, 193, 178)
Palette / Teal / Teal 400
#6addc6
rgb(106, 221, 198)
Palette / Teal / Teal 300
#97e7d5
rgb(151, 231, 213)
Palette / Teal / Teal 200
#c0f0e6
rgb(192, 240, 230)
Palette / Teal / Teal 100
#d5f6ef
rgb(213, 246, 239)
Palette / Teal / Teal 0
#e9f8f5
rgb(233, 248, 245)

Palette / Pink

Palette / Pink / Pink 1100
#281821
rgb(40, 24, 33)
Palette / Pink / Pink 1000
#4f1930
rgb(79, 25, 48)
Palette / Pink / Pink 900
#872647
rgb(135, 38, 71)
Palette / Pink / Pink 800
#a43b5b
rgb(164, 59, 91)
Palette / Pink / Pink 700
#be4466
rgb(190, 68, 102)
Palette / Pink / Pink 600
#cf517c
rgb(207, 81, 124)
Palette / Pink / Pink 500
#de638b
rgb(222, 99, 139)
Palette / Pink / Pink 400
#ee7fad
rgb(238, 127, 173)
Palette / Pink / Pink 300
#f19bc0
rgb(241, 155, 192)
Palette / Pink / Pink 200
#f4b8d4
rgb(244, 184, 212)
Palette / Pink / Pink 100
#f7dcea
rgb(247, 220, 234)
Palette / Pink / Pink 0
#fbeaf2
rgb(251, 234, 242)

Palette / Red

Palette / Red / Red 1100
#281212
rgb(40, 18, 18)
Palette / Red / Red 1000
#641c18
rgb(100, 28, 24)
Palette / Red / Red 900
#8d2d28
rgb(141, 45, 40)
Palette / Red / Red 800
#b6403b
rgb(182, 64, 59)
Palette / Red / Red 700
#ca4b45
rgb(202, 75, 69)
Palette / Red / Red 600
#dc584a
rgb(220, 88, 74)
Palette / Red / Red 500
#e56a5b
rgb(229, 106, 91)
Palette / Red / Red 400
#ef8674
rgb(239, 134, 116)
Palette / Red / Red 300
#f1a193
rgb(241, 161, 147)
Palette / Red / Red 200
#f4bbb3
rgb(244, 187, 179)
Palette / Red / Red 100
#f8d7d3
rgb(248, 215, 211)
Palette / Red / Red 0
#fbebe9
rgb(251, 235, 233)

Palette / Orange

Palette / Orange / Orange 1100
#2a140f
rgb(42, 20, 15)
Palette / Orange / Orange 1000
#581d09
rgb(88, 29, 9)
Palette / Orange / Orange 900
#8a341a
rgb(138, 52, 26)
Palette / Orange / Orange 800
#bf5c29
rgb(191, 92, 41)
Palette / Orange / Orange 700
#de763a
rgb(222, 118, 58)
Palette / Orange / Orange 600
#e68246
rgb(230, 130, 70)
Palette / Orange / Orange 500
#ee8e53
rgb(238, 142, 83)
Palette / Orange / Orange 400
#f2a069
rgb(242, 160, 105)
Palette / Orange / Orange 300
#f4b388
rgb(244, 179, 136)
Palette / Orange / Orange 200
#f6c7a9
rgb(246, 199, 169)
Palette / Orange / Orange 100
#f7ddce
rgb(247, 221, 206)
Palette / Orange / Orange 0
#fceee4
rgb(252, 238, 228)

Palette / Yellow

Palette / Yellow / Yellow 1100
#2a1b08
rgb(42, 27, 8)
Palette / Yellow / Yellow 1000
#4e2c0b
rgb(78, 44, 11)
Palette / Yellow / Yellow 900
#8b4f1f
rgb(139, 79, 31)
Palette / Yellow / Yellow 800
#b0772a
rgb(176, 119, 42)
Palette / Yellow / Yellow 700
#d49b35
rgb(212, 155, 53)
Palette / Yellow / Yellow 600
#f6be41
rgb(246, 190, 65)
Palette / Yellow / Yellow 500
#f8ce4c
rgb(248, 206, 76)
Palette / Yellow / Yellow 400
#fad961
rgb(250, 217, 97)
Palette / Yellow / Yellow 300
#fbe17f
rgb(251, 225, 127)
Palette / Yellow / Yellow 200
#fbe9a4
rgb(251, 233, 164)
Palette / Yellow / Yellow 100
#fbeed1
rgb(251, 238, 209)
Palette / Yellow / Yellow 0
#fef8e4
rgb(254, 248, 228)

Palette / Magenta

Palette / Magenta / Magenta 1100
#271a2c
rgb(39, 26, 44)
Palette / Magenta / Magenta 1000
#3f1a4e
rgb(63, 26, 78)
Palette / Magenta / Magenta 900
#642a73
rgb(100, 42, 115)
Palette / Magenta / Magenta 800
#854091
rgb(133, 64, 145)
Palette / Magenta / Magenta 700
#a04da3
rgb(160, 77, 163)
Palette / Magenta / Magenta 600
#b659b4
rgb(182, 89, 180)
Palette / Magenta / Magenta 500
#cc6bd5
rgb(204, 107, 213)
Palette / Magenta / Magenta 400
#e38aef
rgb(227, 138, 239)
Palette / Magenta / Magenta 300
#e3b1ee
rgb(227, 177, 238)
Palette / Magenta / Magenta 200
#ecc7f4
rgb(236, 199, 244)
Palette / Magenta / Magenta 100
#f5e4fa
rgb(245, 228, 250)
Palette / Magenta / Magenta 0
#fcf0fe
rgb(252, 240, 254)