@youcan/celeste-tokens 0.8.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/json/spacing.json +28 -0
  2. package/dist/tokens.css +1 -1
  3. package/dist/tokens.scss +161 -0
  4. package/package.json +1 -1
  5. package/src/generate.ts +75 -1
  6. package/src/tokens/spacing.json +28 -0
  7. package/src/tokens-dark/color.json +332 -0
package/dist/json/spacing.json CHANGED
@@ -36,6 +36,34 @@
36
36
  "$value": 16,
37
37
  "$type": "spacing"
38
38
  },
39
+ "20": {
40
+ "$value": 20,
41
+ "$type": "spacing"
42
+ },
43
+ "24": {
44
+ "$value": 24,
45
+ "$type": "spacing"
46
+ },
47
+ "28": {
48
+ "$value": 28,
49
+ "$type": "spacing"
50
+ },
51
+ "32": {
52
+ "$value": 32,
53
+ "$type": "spacing"
54
+ },
55
+ "36": {
56
+ "$value": 36,
57
+ "$type": "spacing"
58
+ },
59
+ "40": {
60
+ "$value": 40,
61
+ "$type": "spacing"
62
+ },
63
+ "44": {
64
+ "$value": 40,
65
+ "$type": "spacing"
66
+ },
39
67
  "48": {
40
68
  "$value": 48,
41
69
  "$type": "spacing"
package/dist/tokens.css CHANGED
@@ -1 +1 @@
1
- @keyframes celeste-fade-in{0%{opacity:0}}@keyframes celeste-fade-out{to{opacity:0}}@keyframes celeste-zoom-in{0%{opacity:0;transform:scale(.95)}}@keyframes celeste-zoom-out{to{opacity:0;transform:scale(.95)}}@keyframes celeste-spin-in{0%{opacity:0;transform:rotate(-30deg)}}@keyframes celeste-spin-out{to{opacity:0;transform:rotate(30deg)}}@keyframes celeste-slide-in-from-top{0%{transform:translateY(-100%)}}@keyframes celeste-slide-in-from-bottom{0%{transform:translateY(100%)}}@keyframes celeste-slide-in-from-left{0%{transform:translateX(-100%)}}@keyframes celeste-slide-in-from-right{0%{transform:translateX(100%)}}@keyframes celeste-slide-out-to-top{to{transform:translateY(-100%)}}@keyframes celeste-slide-out-to-bottom{to{transform:translateY(100%)}}@keyframes celeste-slide-out-to-left{to{transform:translateX(-100%)}}@keyframes celeste-slide-out-to-right{to{transform:translateX(100%)}}@keyframes celeste-bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes celeste-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes celeste-ping{75%,to{transform:scale(2);opacity:0}}@keyframes celeste-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@keyframes celeste-swing{0%,to{transform:rotate(0deg)}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}@keyframes celeste-wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes celeste-flip{0%{transform:perspective(400px) rotateY(-180deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}@keyframes celeste-flip-out{0%{transform:perspective(400px) rotateY(0);opacity:1}to{transform:perspective(400px) rotateY(180deg);opacity:0}}@keyframes celeste-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes celeste-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes celeste-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes celeste-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes celeste-enter{0%{opacity:0;transform:translate3d(0,0,0) scale3d(.95,.95,.95) rotate(0)}}@keyframes celeste-exit{to{opacity:0;transform:translate3d(0,0,0) scale3d(.95,.95,.95) rotate(0)}}@keyframes celeste-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes celeste-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes celeste-rotate-in{0%{opacity:0;transform:rotate(-200deg)}to{opacity:1;transform:rotate(0)}}@keyframes celeste-rotate-out{0%{opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(200deg)}}@keyframes celeste-slide-down{0%{height:0;opacity:0}to{height:100%;opacity:1}}@keyframes celeste-slide-up{0%{height:100%;opacity:1}to{height:0;opacity:0}}@keyframes celeste-slide-left{0%{width:0;opacity:0}to{width:100%;opacity:1}}@keyframes celeste-slide-right{0%{width:100%;opacity:1}to{width:0;opacity:0}}@keyframes celeste-glow{0%,to{box-shadow:0 0 5px rgba(255,255,255,.2)}50%{box-shadow:0 0 20px rgba(255,255,255,.6)}}@keyframes celeste-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes celeste-rubber-band{0%,to{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}}@keyframes celeste-jello{0%,to{transform:skewX(0deg) skewY(0deg)}30%{transform:skewX(25deg) skewY(-25deg)}40%{transform:skewX(-15deg) skewY(15deg)}50%{transform:skewX(15deg) skewY(-15deg)}65%{transform:skewX(-5deg) skewY(5deg)}75%{transform:skewX(5deg) skewY(-5deg)}}@keyframes celeste-heartbeat{0%,28%,70%,to{transform:scale(1)}14%,42%{transform:scale(1.3)}}@font-face{font-family:Cairo;font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-ExtraLight.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Light.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Regular.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Medium.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-SemiBold.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Bold.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-ExtraBold.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Black.woff2)format("woff2")}@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/GeistMono[wght].woff2)format("woff2")}@font-face{font-family:"Geist Mono";font-style:italic;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/GeistMono-Italic[wght].woff2)format("woff2")}@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterVariable.woff2)format("woff2")}@font-face{font-family:InterVariable;font-style:italic;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterVariable-Italic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Thin.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ThinItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraLight.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraLightItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Light.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-LightItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Regular.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Italic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Medium.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-MediumItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-SemiBold.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-SemiBoldItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Bold.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-BoldItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraBold.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraBoldItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Black.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-BlackItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Thin.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ThinItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraLight.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraLightItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Light.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-LightItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Regular.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Italic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Medium.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-MediumItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-SemiBold.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-SemiBoldItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Bold.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-BoldItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraBold.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraBoldItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Black.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-BlackItalic.woff2)format("woff2")}@font-feature-values InterVariable{@character-variant{cv01:1;cv02:2;cv03:3;cv04:4;cv05:5;cv06:6;cv07:7;cv08:8;cv09:9;cv10:10;cv11:11;cv12:12;cv13:13;alt-1:1;alt-3:9;open-4:2;open-6:3;open-9:4;lc-l-with-tail:5;simplified-u:6;alt-double-s:7;uc-i-with-serif:8;uc-g-with-spur:10;single-story-a:11;compact-lc-f:12;compact-lc-t:13}@styleset{ss01:1;ss02:2;ss03:3;ss04:4;ss05:5;ss06:6;ss07:7;ss08:8;open-digits:1;disambiguation:2;disambiguation-except-zero:4;round-quotes-and-commas:3;square-punctuation:7;square-quotes:8;circled-characters:5;squared-characters:6}}@font-feature-values Inter{@character-variant{cv01:1;cv02:2;cv03:3;cv04:4;cv05:5;cv06:6;cv07:7;cv08:8;cv09:9;cv10:10;cv11:11;cv12:12;cv13:13;alt-1:1;alt-3:9;open-4:2;open-6:3;open-9:4;lc-l-with-tail:5;simplified-u:6;alt-double-s:7;uc-i-with-serif:8;uc-g-with-spur:10;single-story-a:11;compact-lc-f:12;compact-lc-t:13}@styleset{ss01:1;ss02:2;ss03:3;ss04:4;ss05:5;ss06:6;ss07:7;ss08:8;open-digits:1;disambiguation:2;disambiguation-except-zero:4;round-quotes-and-commas:3;square-punctuation:7;square-quotes:8;circled-characters:5;squared-characters:6}}@font-feature-values InterDisplay{@character-variant{cv01:1;cv02:2;cv03:3;cv04:4;cv05:5;cv06:6;cv07:7;cv08:8;cv09:9;cv10:10;cv11:11;cv12:12;cv13:13;alt-1:1;alt-3:9;open-4:2;open-6:3;open-9:4;lc-l-with-tail:5;simplified-u:6;alt-double-s:7;uc-i-with-serif:8;uc-g-with-spur:10;single-story-a:11;compact-lc-f:12;compact-lc-t:13}@styleset{ss01:1;ss02:2;ss03:3;ss04:4;ss05:5;ss06:6;ss07:7;ss08:8;open-digits:1;disambiguation:2;disambiguation-except-zero:4;round-quotes-and-commas:3;square-punctuation:7;square-quotes:8;circled-characters:5;squared-characters:6}}:root{--animation-extra-fast:100ms;--animation-fast:200ms;--animation-normal:300ms;--animation-slow:400ms;--animation-extra-slow:500ms;--color-white-alpha-24:rgba(255, 255, 255, 0.24);--color-white-alpha-16:rgba(255, 255, 255, 0.16);--color-white-alpha-10:rgba(255, 255, 255, 0.1);--color-black-alpha-24:rgba(23, 23, 23, 0.24);--color-black-alpha-16:rgba(23, 23, 23, 0.16);--color-black-alpha-10:rgba(23, 23, 23, 0.1);--color-neutral-0:#ffffff;--color-neutral-50:#f7f7f7;--color-neutral-100:#f5f5f5;--color-neutral-200:#ebebeb;--color-neutral-300:#d1d1d1;--color-neutral-400:#a3a3a3;--color-neutral-500:#7b7b7b;--color-neutral-600:#5c5c5c;--color-neutral-700:#333333;--color-neutral-800:#292929;--color-neutral-900:#1c1c1c;--color-neutral-950:#171717;--color-neutral-alpha-10:rgba(163, 163, 163, 0.1);--color-neutral-alpha-16:rgba(163, 163, 163, 0.16);--color-neutral-alpha-24:rgba(163, 163, 163, 0.24);--color-red-50:#ffebec;--color-red-100:#ffd5d8;--color-red-200:#ffc0c5;--color-red-300:#ff97a0;--color-red-400:#ff6875;--color-red-500:#fb3748;--color-red-600:#e93544;--color-red-700:#d02533;--color-red-800:#ad1f2b;--color-red-900:#8b1822;--color-red-950:#681219;--color-red-alpha-10:rgba(251, 55, 72, 0.1);--color-red-alpha-16:rgba(251, 55, 72, 0.16);--color-red-alpha-24:rgba(251, 55, 72, 0.24);--color-orange-50:#fff1eb;--color-orange-100:#ffe3d5;--color-orange-200:#ffd5c0;--color-orange-300:#ffba97;--color-orange-400:#ff9a68;--color-orange-500:#ff8447;--color-orange-600:#e97135;--color-orange-700:#d05e25;--color-orange-800:#ad4e1f;--color-orange-900:#8b3e18;--color-orange-950:#682f12;--color-orange-alpha-10:rgba(255, 145, 71, 0.1);--color-orange-alpha-16:rgba(255, 145, 71, 0.16);--color-orange-alpha-24:rgba(255, 145, 71, 0.24);--color-yellow-50:#fffaeb;--color-yellow-100:#ffefcc;--color-yellow-200:#ffecc0;--color-yellow-300:#ffe097;--color-yellow-400:#ffd268;--color-yellow-500:#f6b51e;--color-yellow-600:#e6a819;--color-yellow-700:#c99a2c;--color-yellow-800:#a78025;--color-yellow-900:#86661d;--color-yellow-950:#624c18;--color-yellow-alpha-10:rgba(251, 198, 75, 0.1);--color-yellow-alpha-16:rgba(251, 198, 75, 0.16);--color-yellow-alpha-24:rgba(251, 198, 75, 0.24);--color-green-50:#e0faec;--color-green-100:#d0fbe9;--color-green-200:#c2f5da;--color-green-300:#84ebb4;--color-green-400:#3ee089;--color-green-500:#1fc16b;--color-green-600:#1daf61;--color-green-700:#178c4e;--color-green-800:#1a7544;--color-green-900:#16643b;--color-green-950:#0b4627;--color-green-alpha-10:rgba(31, 193, 107, 0.1);--color-green-alpha-16:rgba(31, 193, 107, 0.16);--color-green-alpha-24:rgba(31, 193, 107, 0.24);--color-teal-50:#e4fbf8;--color-teal-100:#d0fbf5;--color-teal-200:#c2f5ee;--color-teal-300:#84ebdd;--color-teal-400:#3fdec9;--color-teal-500:#22d3bb;--color-teal-600:#1daf9c;--color-teal-700:#178c7d;--color-teal-800:#1a7569;--color-teal-900:#16645a;--color-teal-950:#0b463e;--color-teal-alpha-10:rgba(34, 211, 187, 0.1);--color-teal-alpha-16:rgba(34, 211, 187, 0.16);--color-teal-alpha-24:rgba(34, 211, 187, 0.24);--color-sky-50:#ebf8ff;--color-sky-100:#d5f1ff;--color-sky-200:#c0eaff;--color-sky-300:#97dcff;--color-sky-400:#68cdff;--color-sky-500:#47c2ff;--color-sky-600:#35ade9;--color-sky-700:#2597d0;--color-sky-800:#1f7ead;--color-sky-900:#18658b;--color-sky-950:#124b68;--color-sky-alpha-10:rgba(71, 194, 255, 0.1);--color-sky-alpha-16:rgba(71, 194, 255, 0.16);--color-sky-alpha-24:rgba(71, 194, 255, 0.24);--color-blue-50:#ebf1ff;--color-blue-100:#d5e2ff;--color-blue-200:#c0d5ff;--color-blue-300:#97baff;--color-blue-400:#6895ff;--color-blue-500:#335cff;--color-blue-600:#3559e9;--color-blue-700:#2547d0;--color-blue-800:#1f3bad;--color-blue-900:#182f8b;--color-blue-950:#122368;--color-blue-alpha-10:rgba(71, 108, 255, 0.1);--color-blue-alpha-16:rgba(71, 108, 255, 0.16);--color-blue-alpha-24:rgba(71, 108, 255, 0.24);--color-purple-50:#efebff;--color-purple-100:#dcd5ff;--color-purple-200:#cac0ff;--color-purple-300:#a897ff;--color-purple-400:#8c71f6;--color-purple-500:#7d52f4;--color-purple-600:#693ee0;--color-purple-700:#5b2cc9;--color-purple-800:#4c25a7;--color-purple-900:#3d1d86;--color-purple-950:#351a75;--color-purple-alpha-10:rgba(120, 77, 239, 0.1);--color-purple-alpha-16:rgba(120, 77, 239, 0.16);--color-purple-alpha-24:rgba(120, 77, 239, 0.24);--color-pink-50:#ffebf4;--color-pink-100:#ffd5ea;--color-pink-200:#ffc0df;--color-pink-300:#ff97cb;--color-pink-400:#ff68b3;--color-pink-500:#fb4ba3;--color-pink-600:#e9358f;--color-pink-700:#d0257a;--color-pink-800:#ad1f66;--color-pink-900:#8b1852;--color-pink-950:#68123d;--color-pink-alpha-10:rgba(251, 75, 163, 0.1);--color-pink-alpha-16:rgba(251, 75, 163, 0.16);--color-pink-alpha-24:rgba(251, 75, 163, 0.24);--color-brand-50:#ffebf4;--color-brand-100:#ffd6e9;--color-brand-200:#ffc2dd;--color-brand-300:#ff99c7;--color-brand-400:#ff66ab;--color-brand-500:#e1116f;--color-brand-600:#cb0f64;--color-brand-700:#b40e59;--color-brand-800:#9e0c4e;--color-brand-900:#870a43;--color-brand-950:#681239;--color-static-white:#ffffff;--color-static-black:#171717;--color-bg-white-0:#ffffff;--color-bg-weak-50:#f7f7f7;--color-bg-strong-950:#171717;--color-bg-surface-800:#292929;--color-bg-soft-200:#ebebeb;--color-bg-sub-300:#d1d1d1;--color-state-faded-light:#ebebeb;--color-state-faded-base:#7b7b7b;--color-state-faded-dark:#292929;--color-state-faded-lighter:#f5f5f5;--color-state-error-base:#fb3748;--color-state-error-light:#ffc0c5;--color-state-error-dark:#681219;--color-state-error-lighter:#ffebec;--color-state-warning-dark:#682f12;--color-state-warning-base:#ff8447;--color-state-warning-light:#ffd5c0;--color-state-warning-lighter:#fff1eb;--color-state-information-dark:#122368;--color-state-information-base:#335cff;--color-state-information-light:#c0d5ff;--color-state-information-lighter:#ebf1ff;--color-state-success-dark:#0b4627;--color-state-success-base:#1fc16b;--color-state-success-light:#c2f5da;--color-state-success-lighter:#e0faec;--color-state-away-dark:#624c18;--color-state-away-base:#f6b51e;--color-state-away-light:#ffecc0;--color-state-away-lighter:#fffaeb;--color-state-feature-dark:#351a75;--color-state-feature-base:#7d52f4;--color-state-feature-light:#cac0ff;--color-state-feature-lighter:#efebff;--color-state-verified-dark:#124b68;--color-state-verified-base:#47c2ff;--color-state-verified-light:#c0eaff;--color-state-verified-lighter:#ebf8ff;--color-state-highlighted-dark:#68123d;--color-state-highlighted-base:#fb4ba3;--color-state-highlighted-light:#ffc0df;--color-state-highlighted-lighter:#ffebf4;--color-state-stable-dark:#0b463e;--color-state-stable-base:#22d3bb;--color-state-stable-light:#c2f5ee;--color-state-stable-lighter:#e4fbf8;--color-text-strong-950:#171717;--color-text-sub-600:#5c5c5c;--color-text-disabled-300:#d1d1d1;--color-text-white-0:#ffffff;--color-text-soft-400:#a3a3a3;--color-stroke-soft-200:#ebebeb;--color-stroke-strong-950:#171717;--color-stroke-white-0:#ffffff;--color-stroke-sub-300:#d1d1d1;--color-icon-sub-600:#5c5c5c;--color-icon-strong-950:#171717;--color-icon-soft-400:#a3a3a3;--color-icon-disabled-300:#d1d1d1;--color-icon-white-0:#ffffff;--color-social-apple:#000000;--color-social-twitter:#010101;--color-social-github:#24292f;--color-social-notion:#1e2226;--color-social-tidal:#000000;--color-social-amazon:#353e47;--color-social-zendesk:#16140d;--color-illustration-strong-400:#a3a3a3;--color-illustration-sub-300:#d1d1d1;--color-illustration-soft-200:#ebebeb;--color-illustration-weak-100:#f5f5f5;--color-illustration-white-0:#ffffff;--color-overlay-overlay:rgba(2, 13, 23, 0.24);--color-primary-base:#e1116f;--color-primary-darker:#b40e59;--color-primary-alpha-10:rgba(251, 75, 163, 0.1);--color-primary-alpha-16:rgba(251, 75, 163, 0.16);--color-primary-dark:#cb0f64;--color-primary-alpha-24:rgba(251, 75, 163, 0.24);--radius-4:4px;--radius-6:6px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-16:16px;--radius-20:20px;--radius-24:24px;--radius-full:999px;--shadow-regular-xs:0 1px 2px 0 #0a0d1408;--shadow-regular-md:0 16px 32px -12px #0e121b1a;--shadow-buttons-primary-focus:0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a;--shadow-buttons-important-focus:0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29;--shadow-buttons-error-focus:0 0 0 2px #ffffff, 0 0 0 4px #fb37481a;--shadow-fancy-buttons-neutral:0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628;--shadow-fancy-buttons-primary:0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f;--shadow-fancy-buttons-error:0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748;--shadow-fancy-buttons-stroke:0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea;--shadow-toggle-switch:0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08;--spacing-0:0;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;--spacing-14:14px;--spacing-16:16px;--spacing-48:48px;--font-families-inter-display:InterDisplay;--font-families-inter:InterVariable;--font-families-cairo:Cairo;--font-families-geist-mono:'Geist Mono';--font-families-sans:InterVariable, Cairo, sans-serif;--font-families-mono:'Geist Mono', monospace;--font-families-display:InterDisplay, Cairo, sans-serif;--line-heights-0:64px;--line-heights-1:56px;--line-heights-2:48px;--line-heights-3:40px;--line-heights-4:32px;--line-heights-5:28px;--line-heights-6:24px;--line-heights-7:20px;--line-heights-8:16px;--line-heights-9:12px;--font-weights-display-0:500;--font-weights-sans-0:400;--font-weights-sans-1:500;--font-size-0:11px;--font-size-1:12px;--font-size-2:14px;--font-size-3:16px;--font-size-4:18px;--font-size-5:20px;--font-size-6:24px;--font-size-7:32px;--font-size-8:40px;--font-size-9:48px;--font-size-10:56px;--letter-spacing-0:-0.01em;--letter-spacing-1:-0.005em;--letter-spacing-2:0em;--letter-spacing-3:-0.015em;--letter-spacing-4:-0.011000000000000001em;--letter-spacing-5:-0.006em;--letter-spacing-6:0.06em;--letter-spacing-7:0.04em;--letter-spacing-8:0.02em;--paragraph-spacing-0:0;--text-case-none:none;--text-case-uppercase:uppercase;--text-decoration-none:none;--paragraph-indent-0:0px;--title-h1-title:500 56px/64px InterDisplay, Cairo, sans-serif;--title-h2-title:500 48px/56px InterDisplay, Cairo, sans-serif;--title-h3-title:500 40px/48px InterDisplay, Cairo, sans-serif;--title-h4-title:500 32px/40px InterDisplay, Cairo, sans-serif;--title-h5-title:500 24px/32px InterDisplay, Cairo, sans-serif;--title-h6-title:500 20px/28px InterDisplay, Cairo, sans-serif;--label-xl:500 24px/32px InterVariable, Cairo, sans-serif;--label-lg:500 18px/24px InterVariable, Cairo, sans-serif;--label-md:500 16px/24px InterVariable, Cairo, sans-serif;--label-sm:500 14px/20px InterVariable, Cairo, sans-serif;--label-xs:500 12px/16px InterVariable, Cairo, sans-serif;--paragraph-xl:400 24px/32px InterVariable, Cairo, sans-serif;--paragraph-lg:400 18px/24px InterVariable, Cairo, sans-serif;--paragraph-md:400 16px/24px InterVariable, Cairo, sans-serif;--paragraph-sm:400 14px/20px InterVariable, Cairo, sans-serif;--paragraph-xs:400 12px/16px InterVariable, Cairo, sans-serif;--subheading-md:500 16px/24px InterVariable, Cairo, sans-serif;--subheading-sm:500 14px/20px InterVariable, Cairo, sans-serif;--subheading-xs:500 12px/16px InterVariable, Cairo, sans-serif;--subheading-xxs:500 11px/12px InterVariable, Cairo, sans-serif;--docs-label:500 18px/32px InterVariable, Cairo, sans-serif;--docs-paragraph:400 18px/32px InterVariable, Cairo, sans-serif}
1
+ @keyframes celeste-fade-in{0%{opacity:0}}@keyframes celeste-fade-out{to{opacity:0}}@keyframes celeste-zoom-in{0%{opacity:0;transform:scale(.95)}}@keyframes celeste-zoom-out{to{opacity:0;transform:scale(.95)}}@keyframes celeste-spin-in{0%{opacity:0;transform:rotate(-30deg)}}@keyframes celeste-spin-out{to{opacity:0;transform:rotate(30deg)}}@keyframes celeste-slide-in-from-top{0%{transform:translateY(-100%)}}@keyframes celeste-slide-in-from-bottom{0%{transform:translateY(100%)}}@keyframes celeste-slide-in-from-left{0%{transform:translateX(-100%)}}@keyframes celeste-slide-in-from-right{0%{transform:translateX(100%)}}@keyframes celeste-slide-out-to-top{to{transform:translateY(-100%)}}@keyframes celeste-slide-out-to-bottom{to{transform:translateY(100%)}}@keyframes celeste-slide-out-to-left{to{transform:translateX(-100%)}}@keyframes celeste-slide-out-to-right{to{transform:translateX(100%)}}@keyframes celeste-bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes celeste-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes celeste-ping{75%,to{transform:scale(2);opacity:0}}@keyframes celeste-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@keyframes celeste-swing{0%,to{transform:rotate(0deg)}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}@keyframes celeste-wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes celeste-flip{0%{transform:perspective(400px) rotateY(-180deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}@keyframes celeste-flip-out{0%{transform:perspective(400px) rotateY(0);opacity:1}to{transform:perspective(400px) rotateY(180deg);opacity:0}}@keyframes celeste-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes celeste-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes celeste-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes celeste-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes celeste-enter{0%{opacity:0;transform:translate3d(0,0,0) scale3d(.95,.95,.95) rotate(0)}}@keyframes celeste-exit{to{opacity:0;transform:translate3d(0,0,0) scale3d(.95,.95,.95) rotate(0)}}@keyframes celeste-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes celeste-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes celeste-rotate-in{0%{opacity:0;transform:rotate(-200deg)}to{opacity:1;transform:rotate(0)}}@keyframes celeste-rotate-out{0%{opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(200deg)}}@keyframes celeste-slide-down{0%{height:0;opacity:0}to{height:100%;opacity:1}}@keyframes celeste-slide-up{0%{height:100%;opacity:1}to{height:0;opacity:0}}@keyframes celeste-slide-left{0%{width:0;opacity:0}to{width:100%;opacity:1}}@keyframes celeste-slide-right{0%{width:100%;opacity:1}to{width:0;opacity:0}}@keyframes celeste-glow{0%,to{box-shadow:0 0 5px rgba(255,255,255,.2)}50%{box-shadow:0 0 20px rgba(255,255,255,.6)}}@keyframes celeste-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes celeste-rubber-band{0%,to{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}}@keyframes celeste-jello{0%,to{transform:skewX(0deg) skewY(0deg)}30%{transform:skewX(25deg) skewY(-25deg)}40%{transform:skewX(-15deg) skewY(15deg)}50%{transform:skewX(15deg) skewY(-15deg)}65%{transform:skewX(-5deg) skewY(5deg)}75%{transform:skewX(5deg) skewY(-5deg)}}@keyframes celeste-heartbeat{0%,28%,70%,to{transform:scale(1)}14%,42%{transform:scale(1.3)}}@font-face{font-family:Cairo;font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-ExtraLight.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Light.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Regular.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Medium.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-SemiBold.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Bold.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-ExtraBold.woff2)format("woff2")}@font-face{font-family:Cairo;font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Cairo-Black.woff2)format("woff2")}@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/GeistMono[wght].woff2)format("woff2")}@font-face{font-family:"Geist Mono";font-style:italic;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/GeistMono-Italic[wght].woff2)format("woff2")}@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterVariable.woff2)format("woff2")}@font-face{font-family:InterVariable;font-style:italic;font-weight:100 900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterVariable-Italic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Thin.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ThinItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraLight.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraLightItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Light.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-LightItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Regular.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Italic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Medium.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-MediumItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-SemiBold.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-SemiBoldItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Bold.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-BoldItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraBold.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-ExtraBoldItalic.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-Black.woff2)format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/Inter-BlackItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Thin.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ThinItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraLight.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:200;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraLightItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Light.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-LightItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Regular.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Italic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Medium.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:500;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-MediumItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-SemiBold.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:600;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-SemiBoldItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Bold.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-BoldItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraBold.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:800;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-ExtraBoldItalic.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-Black.woff2)format("woff2")}@font-face{font-family:InterDisplay;font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.youcan.shop/fonts/InterDisplay-BlackItalic.woff2)format("woff2")}@font-feature-values InterVariable{@character-variant{cv01:1;cv02:2;cv03:3;cv04:4;cv05:5;cv06:6;cv07:7;cv08:8;cv09:9;cv10:10;cv11:11;cv12:12;cv13:13;alt-1:1;alt-3:9;open-4:2;open-6:3;open-9:4;lc-l-with-tail:5;simplified-u:6;alt-double-s:7;uc-i-with-serif:8;uc-g-with-spur:10;single-story-a:11;compact-lc-f:12;compact-lc-t:13}@styleset{ss01:1;ss02:2;ss03:3;ss04:4;ss05:5;ss06:6;ss07:7;ss08:8;open-digits:1;disambiguation:2;disambiguation-except-zero:4;round-quotes-and-commas:3;square-punctuation:7;square-quotes:8;circled-characters:5;squared-characters:6}}@font-feature-values Inter{@character-variant{cv01:1;cv02:2;cv03:3;cv04:4;cv05:5;cv06:6;cv07:7;cv08:8;cv09:9;cv10:10;cv11:11;cv12:12;cv13:13;alt-1:1;alt-3:9;open-4:2;open-6:3;open-9:4;lc-l-with-tail:5;simplified-u:6;alt-double-s:7;uc-i-with-serif:8;uc-g-with-spur:10;single-story-a:11;compact-lc-f:12;compact-lc-t:13}@styleset{ss01:1;ss02:2;ss03:3;ss04:4;ss05:5;ss06:6;ss07:7;ss08:8;open-digits:1;disambiguation:2;disambiguation-except-zero:4;round-quotes-and-commas:3;square-punctuation:7;square-quotes:8;circled-characters:5;squared-characters:6}}@font-feature-values InterDisplay{@character-variant{cv01:1;cv02:2;cv03:3;cv04:4;cv05:5;cv06:6;cv07:7;cv08:8;cv09:9;cv10:10;cv11:11;cv12:12;cv13:13;alt-1:1;alt-3:9;open-4:2;open-6:3;open-9:4;lc-l-with-tail:5;simplified-u:6;alt-double-s:7;uc-i-with-serif:8;uc-g-with-spur:10;single-story-a:11;compact-lc-f:12;compact-lc-t:13}@styleset{ss01:1;ss02:2;ss03:3;ss04:4;ss05:5;ss06:6;ss07:7;ss08:8;open-digits:1;disambiguation:2;disambiguation-except-zero:4;round-quotes-and-commas:3;square-punctuation:7;square-quotes:8;circled-characters:5;squared-characters:6}}:root{--animation-extra-fast:100ms;--animation-fast:200ms;--animation-normal:300ms;--animation-slow:400ms;--animation-extra-slow:500ms;--color-white-alpha-24:rgba(255, 255, 255, 0.24);--color-white-alpha-16:rgba(255, 255, 255, 0.16);--color-white-alpha-10:rgba(255, 255, 255, 0.1);--color-black-alpha-24:rgba(23, 23, 23, 0.24);--color-black-alpha-16:rgba(23, 23, 23, 0.16);--color-black-alpha-10:rgba(23, 23, 23, 0.1);--color-neutral-0:#ffffff;--color-neutral-50:#f7f7f7;--color-neutral-100:#f5f5f5;--color-neutral-200:#ebebeb;--color-neutral-300:#d1d1d1;--color-neutral-400:#a3a3a3;--color-neutral-500:#7b7b7b;--color-neutral-600:#5c5c5c;--color-neutral-700:#333333;--color-neutral-800:#292929;--color-neutral-900:#1c1c1c;--color-neutral-950:#171717;--color-neutral-alpha-10:rgba(163, 163, 163, 0.1);--color-neutral-alpha-16:rgba(163, 163, 163, 0.16);--color-neutral-alpha-24:rgba(163, 163, 163, 0.24);--color-red-50:#ffebec;--color-red-100:#ffd5d8;--color-red-200:#ffc0c5;--color-red-300:#ff97a0;--color-red-400:#ff6875;--color-red-500:#fb3748;--color-red-600:#e93544;--color-red-700:#d02533;--color-red-800:#ad1f2b;--color-red-900:#8b1822;--color-red-950:#681219;--color-red-alpha-10:rgba(251, 55, 72, 0.1);--color-red-alpha-16:rgba(251, 55, 72, 0.16);--color-red-alpha-24:rgba(251, 55, 72, 0.24);--color-orange-50:#fff1eb;--color-orange-100:#ffe3d5;--color-orange-200:#ffd5c0;--color-orange-300:#ffba97;--color-orange-400:#ff9a68;--color-orange-500:#ff8447;--color-orange-600:#e97135;--color-orange-700:#d05e25;--color-orange-800:#ad4e1f;--color-orange-900:#8b3e18;--color-orange-950:#682f12;--color-orange-alpha-10:rgba(255, 145, 71, 0.1);--color-orange-alpha-16:rgba(255, 145, 71, 0.16);--color-orange-alpha-24:rgba(255, 145, 71, 0.24);--color-yellow-50:#fffaeb;--color-yellow-100:#ffefcc;--color-yellow-200:#ffecc0;--color-yellow-300:#ffe097;--color-yellow-400:#ffd268;--color-yellow-500:#f6b51e;--color-yellow-600:#e6a819;--color-yellow-700:#c99a2c;--color-yellow-800:#a78025;--color-yellow-900:#86661d;--color-yellow-950:#624c18;--color-yellow-alpha-10:rgba(251, 198, 75, 0.1);--color-yellow-alpha-16:rgba(251, 198, 75, 0.16);--color-yellow-alpha-24:rgba(251, 198, 75, 0.24);--color-green-50:#e0faec;--color-green-100:#d0fbe9;--color-green-200:#c2f5da;--color-green-300:#84ebb4;--color-green-400:#3ee089;--color-green-500:#1fc16b;--color-green-600:#1daf61;--color-green-700:#178c4e;--color-green-800:#1a7544;--color-green-900:#16643b;--color-green-950:#0b4627;--color-green-alpha-10:rgba(31, 193, 107, 0.1);--color-green-alpha-16:rgba(31, 193, 107, 0.16);--color-green-alpha-24:rgba(31, 193, 107, 0.24);--color-teal-50:#e4fbf8;--color-teal-100:#d0fbf5;--color-teal-200:#c2f5ee;--color-teal-300:#84ebdd;--color-teal-400:#3fdec9;--color-teal-500:#22d3bb;--color-teal-600:#1daf9c;--color-teal-700:#178c7d;--color-teal-800:#1a7569;--color-teal-900:#16645a;--color-teal-950:#0b463e;--color-teal-alpha-10:rgba(34, 211, 187, 0.1);--color-teal-alpha-16:rgba(34, 211, 187, 0.16);--color-teal-alpha-24:rgba(34, 211, 187, 0.24);--color-sky-50:#ebf8ff;--color-sky-100:#d5f1ff;--color-sky-200:#c0eaff;--color-sky-300:#97dcff;--color-sky-400:#68cdff;--color-sky-500:#47c2ff;--color-sky-600:#35ade9;--color-sky-700:#2597d0;--color-sky-800:#1f7ead;--color-sky-900:#18658b;--color-sky-950:#124b68;--color-sky-alpha-10:rgba(71, 194, 255, 0.1);--color-sky-alpha-16:rgba(71, 194, 255, 0.16);--color-sky-alpha-24:rgba(71, 194, 255, 0.24);--color-blue-50:#ebf1ff;--color-blue-100:#d5e2ff;--color-blue-200:#c0d5ff;--color-blue-300:#97baff;--color-blue-400:#6895ff;--color-blue-500:#335cff;--color-blue-600:#3559e9;--color-blue-700:#2547d0;--color-blue-800:#1f3bad;--color-blue-900:#182f8b;--color-blue-950:#122368;--color-blue-alpha-10:rgba(71, 108, 255, 0.1);--color-blue-alpha-16:rgba(71, 108, 255, 0.16);--color-blue-alpha-24:rgba(71, 108, 255, 0.24);--color-purple-50:#efebff;--color-purple-100:#dcd5ff;--color-purple-200:#cac0ff;--color-purple-300:#a897ff;--color-purple-400:#8c71f6;--color-purple-500:#7d52f4;--color-purple-600:#693ee0;--color-purple-700:#5b2cc9;--color-purple-800:#4c25a7;--color-purple-900:#3d1d86;--color-purple-950:#351a75;--color-purple-alpha-10:rgba(120, 77, 239, 0.1);--color-purple-alpha-16:rgba(120, 77, 239, 0.16);--color-purple-alpha-24:rgba(120, 77, 239, 0.24);--color-pink-50:#ffebf4;--color-pink-100:#ffd5ea;--color-pink-200:#ffc0df;--color-pink-300:#ff97cb;--color-pink-400:#ff68b3;--color-pink-500:#fb4ba3;--color-pink-600:#e9358f;--color-pink-700:#d0257a;--color-pink-800:#ad1f66;--color-pink-900:#8b1852;--color-pink-950:#68123d;--color-pink-alpha-10:rgba(251, 75, 163, 0.1);--color-pink-alpha-16:rgba(251, 75, 163, 0.16);--color-pink-alpha-24:rgba(251, 75, 163, 0.24);--color-brand-50:#ffebf4;--color-brand-100:#ffd6e9;--color-brand-200:#ffc2dd;--color-brand-300:#ff99c7;--color-brand-400:#ff66ab;--color-brand-500:#e1116f;--color-brand-600:#cb0f64;--color-brand-700:#b40e59;--color-brand-800:#9e0c4e;--color-brand-900:#870a43;--color-brand-950:#681239;--color-static-white:#ffffff;--color-static-black:#171717;--color-bg-white-0:#ffffff;--color-bg-weak-50:#f7f7f7;--color-bg-strong-950:#171717;--color-bg-surface-800:#292929;--color-bg-soft-200:#ebebeb;--color-bg-sub-300:#d1d1d1;--color-state-faded-light:#ebebeb;--color-state-faded-base:#7b7b7b;--color-state-faded-dark:#292929;--color-state-faded-lighter:#f5f5f5;--color-state-error-base:#fb3748;--color-state-error-light:#ffc0c5;--color-state-error-dark:#681219;--color-state-error-lighter:#ffebec;--color-state-warning-dark:#682f12;--color-state-warning-base:#ff8447;--color-state-warning-light:#ffd5c0;--color-state-warning-lighter:#fff1eb;--color-state-information-dark:#122368;--color-state-information-base:#335cff;--color-state-information-light:#c0d5ff;--color-state-information-lighter:#ebf1ff;--color-state-success-dark:#0b4627;--color-state-success-base:#1fc16b;--color-state-success-light:#c2f5da;--color-state-success-lighter:#e0faec;--color-state-away-dark:#624c18;--color-state-away-base:#f6b51e;--color-state-away-light:#ffecc0;--color-state-away-lighter:#fffaeb;--color-state-feature-dark:#351a75;--color-state-feature-base:#7d52f4;--color-state-feature-light:#cac0ff;--color-state-feature-lighter:#efebff;--color-state-verified-dark:#124b68;--color-state-verified-base:#47c2ff;--color-state-verified-light:#c0eaff;--color-state-verified-lighter:#ebf8ff;--color-state-highlighted-dark:#68123d;--color-state-highlighted-base:#fb4ba3;--color-state-highlighted-light:#ffc0df;--color-state-highlighted-lighter:#ffebf4;--color-state-stable-dark:#0b463e;--color-state-stable-base:#22d3bb;--color-state-stable-light:#c2f5ee;--color-state-stable-lighter:#e4fbf8;--color-text-strong-950:#171717;--color-text-sub-600:#5c5c5c;--color-text-disabled-300:#d1d1d1;--color-text-white-0:#ffffff;--color-text-soft-400:#a3a3a3;--color-stroke-soft-200:#ebebeb;--color-stroke-strong-950:#171717;--color-stroke-white-0:#ffffff;--color-stroke-sub-300:#d1d1d1;--color-icon-sub-600:#5c5c5c;--color-icon-strong-950:#171717;--color-icon-soft-400:#a3a3a3;--color-icon-disabled-300:#d1d1d1;--color-icon-white-0:#ffffff;--color-social-apple:#000000;--color-social-twitter:#010101;--color-social-github:#24292f;--color-social-notion:#1e2226;--color-social-tidal:#000000;--color-social-amazon:#353e47;--color-social-zendesk:#16140d;--color-illustration-strong-400:#a3a3a3;--color-illustration-sub-300:#d1d1d1;--color-illustration-soft-200:#ebebeb;--color-illustration-weak-100:#f5f5f5;--color-illustration-white-0:#ffffff;--color-overlay-overlay:rgba(2, 13, 23, 0.24);--color-primary-base:#e1116f;--color-primary-darker:#b40e59;--color-primary-alpha-10:rgba(251, 75, 163, 0.1);--color-primary-alpha-16:rgba(251, 75, 163, 0.16);--color-primary-dark:#cb0f64;--color-primary-alpha-24:rgba(251, 75, 163, 0.24);--radius-4:4px;--radius-6:6px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-16:16px;--radius-20:20px;--radius-24:24px;--radius-full:999px;--shadow-regular-xs:0 1px 2px 0 #0a0d1408;--shadow-regular-md:0 16px 32px -12px #0e121b1a;--shadow-buttons-primary-focus:0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a;--shadow-buttons-important-focus:0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29;--shadow-buttons-error-focus:0 0 0 2px #ffffff, 0 0 0 4px #fb37481a;--shadow-fancy-buttons-neutral:0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628;--shadow-fancy-buttons-primary:0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f;--shadow-fancy-buttons-error:0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748;--shadow-fancy-buttons-stroke:0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea;--shadow-toggle-switch:0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08;--spacing-0:0;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;--spacing-14:14px;--spacing-16:16px;--spacing-20:20px;--spacing-24:24px;--spacing-28:28px;--spacing-32:32px;--spacing-36:36px;--spacing-40:40px;--spacing-44:40px;--spacing-48:48px;--font-families-inter-display:InterDisplay;--font-families-inter:InterVariable;--font-families-cairo:Cairo;--font-families-geist-mono:'Geist Mono';--font-families-sans:InterVariable, Cairo, sans-serif;--font-families-mono:'Geist Mono', monospace;--font-families-display:InterDisplay, Cairo, sans-serif;--line-heights-0:64px;--line-heights-1:56px;--line-heights-2:48px;--line-heights-3:40px;--line-heights-4:32px;--line-heights-5:28px;--line-heights-6:24px;--line-heights-7:20px;--line-heights-8:16px;--line-heights-9:12px;--font-weights-display-0:500;--font-weights-sans-0:400;--font-weights-sans-1:500;--font-size-0:11px;--font-size-1:12px;--font-size-2:14px;--font-size-3:16px;--font-size-4:18px;--font-size-5:20px;--font-size-6:24px;--font-size-7:32px;--font-size-8:40px;--font-size-9:48px;--font-size-10:56px;--letter-spacing-0:-0.01em;--letter-spacing-1:-0.005em;--letter-spacing-2:0em;--letter-spacing-3:-0.015em;--letter-spacing-4:-0.011000000000000001em;--letter-spacing-5:-0.006em;--letter-spacing-6:0.06em;--letter-spacing-7:0.04em;--letter-spacing-8:0.02em;--paragraph-spacing-0:0;--text-case-none:none;--text-case-uppercase:uppercase;--text-decoration-none:none;--paragraph-indent-0:0px;--title-h1-title:500 56px/64px InterDisplay, Cairo, sans-serif;--title-h2-title:500 48px/56px InterDisplay, Cairo, sans-serif;--title-h3-title:500 40px/48px InterDisplay, Cairo, sans-serif;--title-h4-title:500 32px/40px InterDisplay, Cairo, sans-serif;--title-h5-title:500 24px/32px InterDisplay, Cairo, sans-serif;--title-h6-title:500 20px/28px InterDisplay, Cairo, sans-serif;--label-xl:500 24px/32px InterVariable, Cairo, sans-serif;--label-lg:500 18px/24px InterVariable, Cairo, sans-serif;--label-md:500 16px/24px InterVariable, Cairo, sans-serif;--label-sm:500 14px/20px InterVariable, Cairo, sans-serif;--label-xs:500 12px/16px InterVariable, Cairo, sans-serif;--paragraph-xl:400 24px/32px InterVariable, Cairo, sans-serif;--paragraph-lg:400 18px/24px InterVariable, Cairo, sans-serif;--paragraph-md:400 16px/24px InterVariable, Cairo, sans-serif;--paragraph-sm:400 14px/20px InterVariable, Cairo, sans-serif;--paragraph-xs:400 12px/16px InterVariable, Cairo, sans-serif;--subheading-md:500 16px/24px InterVariable, Cairo, sans-serif;--subheading-sm:500 14px/20px InterVariable, Cairo, sans-serif;--subheading-xs:500 12px/16px InterVariable, Cairo, sans-serif;--subheading-xxs:500 11px/12px InterVariable, Cairo, sans-serif;--docs-label:500 18px/32px InterVariable, Cairo, sans-serif;--docs-paragraph:400 18px/32px InterVariable, Cairo, sans-serif}[data-theme=dark]{--color-bg-white-0:#171717;--color-bg-weak-50:#1c1c1c;--color-bg-strong-950:#ffffff;--color-bg-surface-800:#ebebeb;--color-bg-soft-200:#333333;--color-bg-sub-300:#5c5c5c;--color-state-faded-light:rgba(163, 163, 163, 0.24);--color-state-faded-base:#7b7b7b;--color-state-faded-dark:#d1d1d1;--color-state-faded-lighter:rgba(163, 163, 163, 0.16);--color-state-error-base:#e93544;--color-state-error-light:rgba(251, 55, 72, 0.24);--color-state-error-dark:#ff6875;--color-state-error-lighter:rgba(251, 55, 72, 0.16);--color-state-warning-dark:#ff9a68;--color-state-warning-base:#e97135;--color-state-warning-light:rgba(255, 145, 71, 0.24);--color-state-warning-lighter:rgba(255, 145, 71, 0.16);--color-state-information-dark:#6895ff;--color-state-information-base:#335cff;--color-state-information-light:rgba(71, 108, 255, 0.24);--color-state-information-lighter:rgba(71, 108, 255, 0.16);--color-state-success-dark:#3ee089;--color-state-success-base:#1daf61;--color-state-success-light:rgba(31, 193, 107, 0.16);--color-state-success-lighter:rgba(31, 193, 107, 0.1);--color-state-away-dark:#ffd268;--color-state-away-base:#e6a819;--color-state-away-light:rgba(251, 198, 75, 0.24);--color-state-away-lighter:rgba(251, 198, 75, 0.16);--color-state-feature-dark:#8c71f6;--color-state-feature-base:#7d52f4;--color-state-feature-light:rgba(120, 77, 239, 0.24);--color-state-feature-lighter:rgba(120, 77, 239, 0.16);--color-state-verified-dark:#68cdff;--color-state-verified-base:#35ade9;--color-state-verified-light:rgba(71, 194, 255, 0.24);--color-state-verified-lighter:rgba(71, 194, 255, 0.16);--color-state-highlighted-dark:#ff68b3;--color-state-highlighted-base:#e9358f;--color-state-highlighted-light:rgba(251, 75, 163, 0.24);--color-state-highlighted-lighter:rgba(251, 75, 163, 0.16);--color-state-stable-dark:#3fdec9;--color-state-stable-base:#1daf9c;--color-state-stable-light:rgba(34, 211, 187, 0.24);--color-state-stable-lighter:rgba(34, 211, 187, 0.16);--color-text-strong-950:#ffffff;--color-text-sub-600:#a3a3a3;--color-text-disabled-300:#5c5c5c;--color-text-white-0:#171717;--color-text-soft-400:#7b7b7b;--color-stroke-soft-200:#333333;--color-stroke-strong-950:#ffffff;--color-stroke-white-0:#171717;--color-stroke-sub-300:#5c5c5c;--color-icon-sub-600:#a3a3a3;--color-icon-strong-950:#ffffff;--color-icon-soft-400:#7b7b7b;--color-icon-disabled-300:#5c5c5c;--color-icon-white-0:#171717;--color-social-apple:#ffffff;--color-social-twitter:#ffffff;--color-social-github:#ffffff;--color-social-notion:#ffffff;--color-social-tidal:#ffffff;--color-social-amazon:#ffffff;--color-social-zendesk:#ffffff;--color-illustration-strong-400:#5c5c5c;--color-illustration-sub-300:#333333;--color-illustration-soft-200:#292929;--color-illustration-weak-100:#1c1c1c;--color-illustration-white-0:#171717;--color-overlay-overlay:rgba(82, 88, 102, 0.32)}@media (prefers-color-scheme:dark){[data-theme=system]{--color-bg-white-0:#171717;--color-bg-weak-50:#1c1c1c;--color-bg-strong-950:#ffffff;--color-bg-surface-800:#ebebeb;--color-bg-soft-200:#333333;--color-bg-sub-300:#5c5c5c;--color-state-faded-light:rgba(163, 163, 163, 0.24);--color-state-faded-base:#7b7b7b;--color-state-faded-dark:#d1d1d1;--color-state-faded-lighter:rgba(163, 163, 163, 0.16);--color-state-error-base:#e93544;--color-state-error-light:rgba(251, 55, 72, 0.24);--color-state-error-dark:#ff6875;--color-state-error-lighter:rgba(251, 55, 72, 0.16);--color-state-warning-dark:#ff9a68;--color-state-warning-base:#e97135;--color-state-warning-light:rgba(255, 145, 71, 0.24);--color-state-warning-lighter:rgba(255, 145, 71, 0.16);--color-state-information-dark:#6895ff;--color-state-information-base:#335cff;--color-state-information-light:rgba(71, 108, 255, 0.24);--color-state-information-lighter:rgba(71, 108, 255, 0.16);--color-state-success-dark:#3ee089;--color-state-success-base:#1daf61;--color-state-success-light:rgba(31, 193, 107, 0.16);--color-state-success-lighter:rgba(31, 193, 107, 0.1);--color-state-away-dark:#ffd268;--color-state-away-base:#e6a819;--color-state-away-light:rgba(251, 198, 75, 0.24);--color-state-away-lighter:rgba(251, 198, 75, 0.16);--color-state-feature-dark:#8c71f6;--color-state-feature-base:#7d52f4;--color-state-feature-light:rgba(120, 77, 239, 0.24);--color-state-feature-lighter:rgba(120, 77, 239, 0.16);--color-state-verified-dark:#68cdff;--color-state-verified-base:#35ade9;--color-state-verified-light:rgba(71, 194, 255, 0.24);--color-state-verified-lighter:rgba(71, 194, 255, 0.16);--color-state-highlighted-dark:#ff68b3;--color-state-highlighted-base:#e9358f;--color-state-highlighted-light:rgba(251, 75, 163, 0.24);--color-state-highlighted-lighter:rgba(251, 75, 163, 0.16);--color-state-stable-dark:#3fdec9;--color-state-stable-base:#1daf9c;--color-state-stable-light:rgba(34, 211, 187, 0.24);--color-state-stable-lighter:rgba(34, 211, 187, 0.16);--color-text-strong-950:#ffffff;--color-text-sub-600:#a3a3a3;--color-text-disabled-300:#5c5c5c;--color-text-white-0:#171717;--color-text-soft-400:#7b7b7b;--color-stroke-soft-200:#333333;--color-stroke-strong-950:#ffffff;--color-stroke-white-0:#171717;--color-stroke-sub-300:#5c5c5c;--color-icon-sub-600:#a3a3a3;--color-icon-strong-950:#ffffff;--color-icon-soft-400:#7b7b7b;--color-icon-disabled-300:#5c5c5c;--color-icon-white-0:#171717;--color-social-apple:#ffffff;--color-social-twitter:#ffffff;--color-social-github:#ffffff;--color-social-notion:#ffffff;--color-social-tidal:#ffffff;--color-social-amazon:#ffffff;--color-social-zendesk:#ffffff;--color-illustration-strong-400:#5c5c5c;--color-illustration-sub-300:#333333;--color-illustration-soft-200:#292929;--color-illustration-weak-100:#1c1c1c;--color-illustration-white-0:#171717;--color-overlay-overlay:rgba(82, 88, 102, 0.32)}}
package/dist/tokens.scss CHANGED
@@ -1215,6 +1215,13 @@ $spacing-10: 10px;
1215
1215
  $spacing-12: 12px;
1216
1216
  $spacing-14: 14px;
1217
1217
  $spacing-16: 16px;
1218
+ $spacing-20: 20px;
1219
+ $spacing-24: 24px;
1220
+ $spacing-28: 28px;
1221
+ $spacing-32: 32px;
1222
+ $spacing-36: 36px;
1223
+ $spacing-40: 40px;
1224
+ $spacing-44: 40px;
1218
1225
  $spacing-48: 48px;
1219
1226
  $font-families-inter-display: InterDisplay;
1220
1227
  $font-families-inter: InterVariable;
@@ -1283,3 +1290,157 @@ $subheading-xs: 500 12px/16px InterVariable, Cairo, sans-serif;
1283
1290
  $subheading-xxs: 500 11px/12px InterVariable, Cairo, sans-serif;
1284
1291
  $docs-label: 500 18px/32px InterVariable, Cairo, sans-serif;
1285
1292
  $docs-paragraph: 400 18px/32px InterVariable, Cairo, sans-serif;
1293
+
1294
+ [data-theme="dark"] {
1295
+ --color-bg-white-0: #171717;
1296
+ --color-bg-weak-50: #1c1c1c;
1297
+ --color-bg-strong-950: #ffffff;
1298
+ --color-bg-surface-800: #ebebeb;
1299
+ --color-bg-soft-200: #333333;
1300
+ --color-bg-sub-300: #5c5c5c;
1301
+ --color-state-faded-light: rgba(163, 163, 163, 0.24);
1302
+ --color-state-faded-base: #7b7b7b;
1303
+ --color-state-faded-dark: #d1d1d1;
1304
+ --color-state-faded-lighter: rgba(163, 163, 163, 0.16);
1305
+ --color-state-error-base: #e93544;
1306
+ --color-state-error-light: rgba(251, 55, 72, 0.24);
1307
+ --color-state-error-dark: #ff6875;
1308
+ --color-state-error-lighter: rgba(251, 55, 72, 0.16);
1309
+ --color-state-warning-dark: #ff9a68;
1310
+ --color-state-warning-base: #e97135;
1311
+ --color-state-warning-light: rgba(255, 145, 71, 0.24);
1312
+ --color-state-warning-lighter: rgba(255, 145, 71, 0.16);
1313
+ --color-state-information-dark: #6895ff;
1314
+ --color-state-information-base: #335cff;
1315
+ --color-state-information-light: rgba(71, 108, 255, 0.24);
1316
+ --color-state-information-lighter: rgba(71, 108, 255, 0.16);
1317
+ --color-state-success-dark: #3ee089;
1318
+ --color-state-success-base: #1daf61;
1319
+ --color-state-success-light: rgba(31, 193, 107, 0.16);
1320
+ --color-state-success-lighter: rgba(31, 193, 107, 0.1);
1321
+ --color-state-away-dark: #ffd268;
1322
+ --color-state-away-base: #e6a819;
1323
+ --color-state-away-light: rgba(251, 198, 75, 0.24);
1324
+ --color-state-away-lighter: rgba(251, 198, 75, 0.16);
1325
+ --color-state-feature-dark: #8c71f6;
1326
+ --color-state-feature-base: #7d52f4;
1327
+ --color-state-feature-light: rgba(120, 77, 239, 0.24);
1328
+ --color-state-feature-lighter: rgba(120, 77, 239, 0.16);
1329
+ --color-state-verified-dark: #68cdff;
1330
+ --color-state-verified-base: #35ade9;
1331
+ --color-state-verified-light: rgba(71, 194, 255, 0.24);
1332
+ --color-state-verified-lighter: rgba(71, 194, 255, 0.16);
1333
+ --color-state-highlighted-dark: #ff68b3;
1334
+ --color-state-highlighted-base: #e9358f;
1335
+ --color-state-highlighted-light: rgba(251, 75, 163, 0.24);
1336
+ --color-state-highlighted-lighter: rgba(251, 75, 163, 0.16);
1337
+ --color-state-stable-dark: #3fdec9;
1338
+ --color-state-stable-base: #1daf9c;
1339
+ --color-state-stable-light: rgba(34, 211, 187, 0.24);
1340
+ --color-state-stable-lighter: rgba(34, 211, 187, 0.16);
1341
+ --color-text-strong-950: #ffffff;
1342
+ --color-text-sub-600: #a3a3a3;
1343
+ --color-text-disabled-300: #5c5c5c;
1344
+ --color-text-white-0: #171717;
1345
+ --color-text-soft-400: #7b7b7b;
1346
+ --color-stroke-soft-200: #333333;
1347
+ --color-stroke-strong-950: #ffffff;
1348
+ --color-stroke-white-0: #171717;
1349
+ --color-stroke-sub-300: #5c5c5c;
1350
+ --color-icon-sub-600: #a3a3a3;
1351
+ --color-icon-strong-950: #ffffff;
1352
+ --color-icon-soft-400: #7b7b7b;
1353
+ --color-icon-disabled-300: #5c5c5c;
1354
+ --color-icon-white-0: #171717;
1355
+ --color-social-apple: #ffffff;
1356
+ --color-social-twitter: #ffffff;
1357
+ --color-social-github: #ffffff;
1358
+ --color-social-notion: #ffffff;
1359
+ --color-social-tidal: #ffffff;
1360
+ --color-social-amazon: #ffffff;
1361
+ --color-social-zendesk: #ffffff;
1362
+ --color-illustration-strong-400: #5c5c5c;
1363
+ --color-illustration-sub-300: #333333;
1364
+ --color-illustration-soft-200: #292929;
1365
+ --color-illustration-weak-100: #1c1c1c;
1366
+ --color-illustration-white-0: #171717;
1367
+ --color-overlay-overlay: rgba(82, 88, 102, 0.32);
1368
+ }
1369
+
1370
+ @media (prefers-color-scheme: dark) {
1371
+ [data-theme="system"] {
1372
+ --color-bg-white-0: #171717;
1373
+ --color-bg-weak-50: #1c1c1c;
1374
+ --color-bg-strong-950: #ffffff;
1375
+ --color-bg-surface-800: #ebebeb;
1376
+ --color-bg-soft-200: #333333;
1377
+ --color-bg-sub-300: #5c5c5c;
1378
+ --color-state-faded-light: rgba(163, 163, 163, 0.24);
1379
+ --color-state-faded-base: #7b7b7b;
1380
+ --color-state-faded-dark: #d1d1d1;
1381
+ --color-state-faded-lighter: rgba(163, 163, 163, 0.16);
1382
+ --color-state-error-base: #e93544;
1383
+ --color-state-error-light: rgba(251, 55, 72, 0.24);
1384
+ --color-state-error-dark: #ff6875;
1385
+ --color-state-error-lighter: rgba(251, 55, 72, 0.16);
1386
+ --color-state-warning-dark: #ff9a68;
1387
+ --color-state-warning-base: #e97135;
1388
+ --color-state-warning-light: rgba(255, 145, 71, 0.24);
1389
+ --color-state-warning-lighter: rgba(255, 145, 71, 0.16);
1390
+ --color-state-information-dark: #6895ff;
1391
+ --color-state-information-base: #335cff;
1392
+ --color-state-information-light: rgba(71, 108, 255, 0.24);
1393
+ --color-state-information-lighter: rgba(71, 108, 255, 0.16);
1394
+ --color-state-success-dark: #3ee089;
1395
+ --color-state-success-base: #1daf61;
1396
+ --color-state-success-light: rgba(31, 193, 107, 0.16);
1397
+ --color-state-success-lighter: rgba(31, 193, 107, 0.1);
1398
+ --color-state-away-dark: #ffd268;
1399
+ --color-state-away-base: #e6a819;
1400
+ --color-state-away-light: rgba(251, 198, 75, 0.24);
1401
+ --color-state-away-lighter: rgba(251, 198, 75, 0.16);
1402
+ --color-state-feature-dark: #8c71f6;
1403
+ --color-state-feature-base: #7d52f4;
1404
+ --color-state-feature-light: rgba(120, 77, 239, 0.24);
1405
+ --color-state-feature-lighter: rgba(120, 77, 239, 0.16);
1406
+ --color-state-verified-dark: #68cdff;
1407
+ --color-state-verified-base: #35ade9;
1408
+ --color-state-verified-light: rgba(71, 194, 255, 0.24);
1409
+ --color-state-verified-lighter: rgba(71, 194, 255, 0.16);
1410
+ --color-state-highlighted-dark: #ff68b3;
1411
+ --color-state-highlighted-base: #e9358f;
1412
+ --color-state-highlighted-light: rgba(251, 75, 163, 0.24);
1413
+ --color-state-highlighted-lighter: rgba(251, 75, 163, 0.16);
1414
+ --color-state-stable-dark: #3fdec9;
1415
+ --color-state-stable-base: #1daf9c;
1416
+ --color-state-stable-light: rgba(34, 211, 187, 0.24);
1417
+ --color-state-stable-lighter: rgba(34, 211, 187, 0.16);
1418
+ --color-text-strong-950: #ffffff;
1419
+ --color-text-sub-600: #a3a3a3;
1420
+ --color-text-disabled-300: #5c5c5c;
1421
+ --color-text-white-0: #171717;
1422
+ --color-text-soft-400: #7b7b7b;
1423
+ --color-stroke-soft-200: #333333;
1424
+ --color-stroke-strong-950: #ffffff;
1425
+ --color-stroke-white-0: #171717;
1426
+ --color-stroke-sub-300: #5c5c5c;
1427
+ --color-icon-sub-600: #a3a3a3;
1428
+ --color-icon-strong-950: #ffffff;
1429
+ --color-icon-soft-400: #7b7b7b;
1430
+ --color-icon-disabled-300: #5c5c5c;
1431
+ --color-icon-white-0: #171717;
1432
+ --color-social-apple: #ffffff;
1433
+ --color-social-twitter: #ffffff;
1434
+ --color-social-github: #ffffff;
1435
+ --color-social-notion: #ffffff;
1436
+ --color-social-tidal: #ffffff;
1437
+ --color-social-amazon: #ffffff;
1438
+ --color-social-zendesk: #ffffff;
1439
+ --color-illustration-strong-400: #5c5c5c;
1440
+ --color-illustration-sub-300: #333333;
1441
+ --color-illustration-soft-200: #292929;
1442
+ --color-illustration-weak-100: #1c1c1c;
1443
+ --color-illustration-white-0: #171717;
1444
+ --color-overlay-overlay: rgba(82, 88, 102, 0.32);
1445
+ }
1446
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste-tokens",
3
3
  "type": "module",
4
- "version": "0.8.0",
4
+ "version": "0.9.1",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "repository": {
7
7
  "type": "git",
package/src/generate.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable antfu/no-top-level-await */
2
- import { copyFileSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
2
+ import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
3
3
  import { join, resolve } from 'node:path';
4
4
  import { register } from '@tokens-studio/sd-transforms';
5
5
  import { minify as csso } from 'csso';
@@ -29,6 +29,78 @@ function minify(path: string): void {
29
29
  writeFileSync(path, csso(readFileSync(path, 'utf8')).css, 'utf8');
30
30
  }
31
31
 
32
+ const darkTokensDir = resolve(import.meta.dirname, 'tokens-dark');
33
+
34
+ function collectOverridePaths(node: any, prefix: string[] = []): string[] {
35
+ const paths: string[] = [];
36
+ for (const [key, value] of Object.entries(node)) {
37
+ if (value && typeof value === 'object') {
38
+ if ('$value' in value)
39
+ paths.push([...prefix, key].join('.'));
40
+ else
41
+ paths.push(...collectOverridePaths(value, [...prefix, key]));
42
+ }
43
+ }
44
+ return paths;
45
+ }
46
+
47
+ async function buildDarkMode(): Promise<void> {
48
+ if (!existsSync(darkTokensDir) || !readdirSync(darkTokensDir).some((f: string) => f.endsWith('.json')))
49
+ return;
50
+
51
+ const overridePaths = new Set(
52
+ readdirSync(darkTokensDir)
53
+ .filter((f: string) => f.endsWith('.json'))
54
+ .flatMap((f: string) => collectOverridePaths(JSON.parse(readFileSync(join(darkTokensDir, f), 'utf8')))),
55
+ );
56
+
57
+ const darkSd = new StyleDictionary({
58
+ source: [
59
+ join(import.meta.dirname, 'tokens/**/*.json'),
60
+ join(darkTokensDir, '**/*.json'),
61
+ ],
62
+ preprocessors: ['tokens-studio'],
63
+ hooks: {
64
+ formats: {
65
+ 'css/dark': ({ dictionary }) => {
66
+ const decls = dictionary.allTokens.map(
67
+ (t: any) => ` --${t.name}: ${t.$value ?? t.value};`,
68
+ );
69
+ const body = decls.join('\n');
70
+ const nested = decls.map((l: string) => ` ${l}`).join('\n');
71
+
72
+ return `[data-theme="dark"] {\n${body}\n}\n\n`
73
+ + `@media (prefers-color-scheme: dark) {\n [data-theme="system"] {\n${nested}\n }\n}\n`;
74
+ },
75
+ },
76
+ },
77
+ platforms: {
78
+ cssDark: {
79
+ transformGroup: 'tokens-studio',
80
+ transforms: ['name/kebab'],
81
+ buildPath: dist,
82
+ files: [
83
+ {
84
+ destination: 'tokens.dark.css',
85
+ format: 'css/dark',
86
+ filter: (token: any) => overridePaths.has(token.path.join('.')),
87
+ },
88
+ ],
89
+ },
90
+ },
91
+ });
92
+
93
+ await darkSd.buildAllPlatforms();
94
+
95
+ const darkCss = readFileSync(resolve(dist, 'tokens.dark.css'), 'utf8');
96
+ rmSync(resolve(dist, 'tokens.dark.css'));
97
+
98
+ for (const file of ['tokens.css', 'tokens.scss']) {
99
+ const path = resolve(dist, file);
100
+ writeFileSync(path, `${readFileSync(path, 'utf8')}\n${darkCss}`, 'utf8');
101
+ }
102
+ }
103
+
32
104
  const sd = new StyleDictionary({
33
105
  source: [join(import.meta.dirname, 'tokens/**/*.json')],
34
106
  log: {
@@ -91,6 +163,8 @@ const sd = new StyleDictionary({
91
163
  await sd.cleanAllPlatforms();
92
164
  await sd.buildAllPlatforms();
93
165
 
166
+ await buildDarkMode();
167
+
94
168
  prependStubs(resolve(dist, 'tokens.css'));
95
169
  prependStubs(resolve(dist, 'tokens.scss'));
96
170
 
package/src/tokens/spacing.json CHANGED
@@ -36,6 +36,34 @@
36
36
  "$value": 16,
37
37
  "$type": "spacing"
38
38
  },
39
+ "20": {
40
+ "$value": 20,
41
+ "$type": "spacing"
42
+ },
43
+ "24": {
44
+ "$value": 24,
45
+ "$type": "spacing"
46
+ },
47
+ "28": {
48
+ "$value": 28,
49
+ "$type": "spacing"
50
+ },
51
+ "32": {
52
+ "$value": 32,
53
+ "$type": "spacing"
54
+ },
55
+ "36": {
56
+ "$value": 36,
57
+ "$type": "spacing"
58
+ },
59
+ "40": {
60
+ "$value": 40,
61
+ "$type": "spacing"
62
+ },
63
+ "44": {
64
+ "$value": 40,
65
+ "$type": "spacing"
66
+ },
39
67
  "48": {
40
68
  "$value": 48,
41
69
  "$type": "spacing"
package/src/tokens-dark/color.json ADDED
@@ -0,0 +1,332 @@
1
+ {
2
+ "color": {
3
+ "bg": {
4
+ "white-0": {
5
+ "$value": "{color.neutral.950}",
6
+ "$type": "color"
7
+ },
8
+ "weak-50": {
9
+ "$value": "{color.neutral.900}",
10
+ "$type": "color"
11
+ },
12
+ "strong-950": {
13
+ "$value": "{color.neutral.0}",
14
+ "$type": "color"
15
+ },
16
+ "surface-800": {
17
+ "$value": "{color.neutral.200}",
18
+ "$type": "color"
19
+ },
20
+ "soft-200": {
21
+ "$value": "{color.neutral.700}",
22
+ "$type": "color"
23
+ },
24
+ "sub-300": {
25
+ "$value": "{color.neutral.600}",
26
+ "$type": "color"
27
+ }
28
+ },
29
+ "text": {
30
+ "strong-950": {
31
+ "$value": "{color.neutral.0}",
32
+ "$type": "color"
33
+ },
34
+ "sub-600": {
35
+ "$value": "{color.neutral.400}",
36
+ "$type": "color"
37
+ },
38
+ "soft-400": {
39
+ "$value": "{color.neutral.500}",
40
+ "$type": "color"
41
+ },
42
+ "disabled-300": {
43
+ "$value": "{color.neutral.600}",
44
+ "$type": "color"
45
+ },
46
+ "white-0": {
47
+ "$value": "{color.neutral.950}",
48
+ "$type": "color"
49
+ }
50
+ },
51
+ "icon": {
52
+ "strong-950": {
53
+ "$value": "{color.neutral.0}",
54
+ "$type": "color"
55
+ },
56
+ "sub-600": {
57
+ "$value": "{color.neutral.400}",
58
+ "$type": "color"
59
+ },
60
+ "soft-400": {
61
+ "$value": "{color.neutral.500}",
62
+ "$type": "color"
63
+ },
64
+ "disabled-300": {
65
+ "$value": "{color.neutral.600}",
66
+ "$type": "color"
67
+ },
68
+ "white-0": {
69
+ "$value": "{color.neutral.950}",
70
+ "$type": "color"
71
+ }
72
+ },
73
+ "stroke": {
74
+ "soft-200": {
75
+ "$value": "{color.neutral.700}",
76
+ "$type": "color"
77
+ },
78
+ "strong-950": {
79
+ "$value": "{color.neutral.0}",
80
+ "$type": "color"
81
+ },
82
+ "sub-300": {
83
+ "$value": "{color.neutral.600}",
84
+ "$type": "color"
85
+ },
86
+ "white-0": {
87
+ "$value": "{color.neutral.950}",
88
+ "$type": "color"
89
+ }
90
+ },
91
+ "state": {
92
+ "faded": {
93
+ "dark": {
94
+ "$value": "{color.neutral.300}",
95
+ "$type": "color"
96
+ },
97
+ "base": {
98
+ "$value": "{color.neutral.500}",
99
+ "$type": "color"
100
+ },
101
+ "light": {
102
+ "$value": "{color.neutral.alpha-24}",
103
+ "$type": "color"
104
+ },
105
+ "lighter": {
106
+ "$value": "{color.neutral.alpha-16}",
107
+ "$type": "color"
108
+ }
109
+ },
110
+ "error": {
111
+ "dark": {
112
+ "$value": "{color.red.400}",
113
+ "$type": "color"
114
+ },
115
+ "base": {
116
+ "$value": "{color.red.600}",
117
+ "$type": "color"
118
+ },
119
+ "light": {
120
+ "$value": "{color.red.alpha-24}",
121
+ "$type": "color"
122
+ },
123
+ "lighter": {
124
+ "$value": "{color.red.alpha-16}",
125
+ "$type": "color"
126
+ }
127
+ },
128
+ "warning": {
129
+ "dark": {
130
+ "$value": "{color.orange.400}",
131
+ "$type": "color"
132
+ },
133
+ "base": {
134
+ "$value": "{color.orange.600}",
135
+ "$type": "color"
136
+ },
137
+ "light": {
138
+ "$value": "{color.orange.alpha-24}",
139
+ "$type": "color"
140
+ },
141
+ "lighter": {
142
+ "$value": "{color.orange.alpha-16}",
143
+ "$type": "color"
144
+ }
145
+ },
146
+ "information": {
147
+ "dark": {
148
+ "$value": "{color.blue.400}",
149
+ "$type": "color"
150
+ },
151
+ "base": {
152
+ "$value": "{color.blue.500}",
153
+ "$type": "color"
154
+ },
155
+ "light": {
156
+ "$value": "{color.blue.alpha-24}",
157
+ "$type": "color"
158
+ },
159
+ "lighter": {
160
+ "$value": "{color.blue.alpha-16}",
161
+ "$type": "color"
162
+ }
163
+ },
164
+ "success": {
165
+ "dark": {
166
+ "$value": "{color.green.400}",
167
+ "$type": "color"
168
+ },
169
+ "base": {
170
+ "$value": "{color.green.600}",
171
+ "$type": "color"
172
+ },
173
+ "light": {
174
+ "$value": "{color.green.alpha-16}",
175
+ "$type": "color"
176
+ },
177
+ "lighter": {
178
+ "$value": "{color.green.alpha-10}",
179
+ "$type": "color"
180
+ }
181
+ },
182
+ "away": {
183
+ "dark": {
184
+ "$value": "{color.yellow.400}",
185
+ "$type": "color"
186
+ },
187
+ "base": {
188
+ "$value": "{color.yellow.600}",
189
+ "$type": "color"
190
+ },
191
+ "light": {
192
+ "$value": "{color.yellow.alpha-24}",
193
+ "$type": "color"
194
+ },
195
+ "lighter": {
196
+ "$value": "{color.yellow.alpha-16}",
197
+ "$type": "color"
198
+ }
199
+ },
200
+ "feature": {
201
+ "dark": {
202
+ "$value": "{color.purple.400}",
203
+ "$type": "color"
204
+ },
205
+ "base": {
206
+ "$value": "{color.purple.500}",
207
+ "$type": "color"
208
+ },
209
+ "light": {
210
+ "$value": "{color.purple.alpha-24}",
211
+ "$type": "color"
212
+ },
213
+ "lighter": {
214
+ "$value": "{color.purple.alpha-16}",
215
+ "$type": "color"
216
+ }
217
+ },
218
+ "verified": {
219
+ "dark": {
220
+ "$value": "{color.sky.400}",
221
+ "$type": "color"
222
+ },
223
+ "base": {
224
+ "$value": "{color.sky.600}",
225
+ "$type": "color"
226
+ },
227
+ "light": {
228
+ "$value": "{color.sky.alpha-24}",
229
+ "$type": "color"
230
+ },
231
+ "lighter": {
232
+ "$value": "{color.sky.alpha-16}",
233
+ "$type": "color"
234
+ }
235
+ },
236
+ "highlighted": {
237
+ "dark": {
238
+ "$value": "{color.pink.400}",
239
+ "$type": "color"
240
+ },
241
+ "base": {
242
+ "$value": "{color.pink.600}",
243
+ "$type": "color"
244
+ },
245
+ "light": {
246
+ "$value": "{color.pink.alpha-24}",
247
+ "$type": "color"
248
+ },
249
+ "lighter": {
250
+ "$value": "{color.pink.alpha-16}",
251
+ "$type": "color"
252
+ }
253
+ },
254
+ "stable": {
255
+ "dark": {
256
+ "$value": "{color.teal.400}",
257
+ "$type": "color"
258
+ },
259
+ "base": {
260
+ "$value": "{color.teal.600}",
261
+ "$type": "color"
262
+ },
263
+ "light": {
264
+ "$value": "{color.teal.alpha-24}",
265
+ "$type": "color"
266
+ },
267
+ "lighter": {
268
+ "$value": "{color.teal.alpha-16}",
269
+ "$type": "color"
270
+ }
271
+ }
272
+ },
273
+ "illustration": {
274
+ "strong-400": {
275
+ "$value": "{color.neutral.600}",
276
+ "$type": "color"
277
+ },
278
+ "sub-300": {
279
+ "$value": "{color.neutral.700}",
280
+ "$type": "color"
281
+ },
282
+ "soft-200": {
283
+ "$value": "{color.neutral.800}",
284
+ "$type": "color"
285
+ },
286
+ "weak-100": {
287
+ "$value": "{color.neutral.900}",
288
+ "$type": "color"
289
+ },
290
+ "white-0": {
291
+ "$value": "{color.neutral.950}",
292
+ "$type": "color"
293
+ }
294
+ },
295
+ "overlay": {
296
+ "overlay": {
297
+ "$value": "#52586652",
298
+ "$type": "color"
299
+ }
300
+ },
301
+ "social": {
302
+ "apple": {
303
+ "$value": "#ffffff",
304
+ "$type": "color"
305
+ },
306
+ "twitter": {
307
+ "$value": "#ffffff",
308
+ "$type": "color"
309
+ },
310
+ "github": {
311
+ "$value": "#ffffff",
312
+ "$type": "color"
313
+ },
314
+ "notion": {
315
+ "$value": "#ffffff",
316
+ "$type": "color"
317
+ },
318
+ "tidal": {
319
+ "$value": "#ffffff",
320
+ "$type": "color"
321
+ },
322
+ "amazon": {
323
+ "$value": "#ffffff",
324
+ "$type": "color"
325
+ },
326
+ "zendesk": {
327
+ "$value": "#ffffff",
328
+ "$type": "color"
329
+ }
330
+ }
331
+ }
332
+ }