@once-ui-system/core 1.0.0

package/dist/tokens/layout.scss

@@ -0,0 +1,268 @@
+:root {
+    --static-space-0:   0;
+    --static-space-1:   1px;
+    --static-space-2:   0.125rem;
+    --static-space-4:   0.25rem;
+    --static-space-8:   0.5rem;
+    --static-space-12:  0.75rem;
+    --static-space-16:  1rem;
+    --static-space-20:  1.25rem;
+    --static-space-24:  1.5rem;
+    --static-space-32:  2rem;
+    --static-space-40:  2.5rem;
+    --static-space-48:  3rem;
+    --static-space-56:  3.5rem;
+    --static-space-64:  4rem;
+    --static-space-80:  5rem;
+    --static-space-104: 6.5rem;
+    --static-space-128: 8rem;
+    --static-space-160: 10rem;
+
+    --static-width-2400: 150rem;
+    --static-width-1600: 100rem;
+    --static-width-1440: 90rem;
+    --static-width-1200: 75rem;
+    --static-width-1024: 64rem;
+    --static-width-880:  55rem;
+    --static-width-768:  48rem;
+    --static-width-640:  40rem;
+    --static-width-560:  35rem;
+    --static-width-400:  25rem;
+    --static-width-320:  20rem;
+
+    --static-height-560: 35rem;
+    --static-height-480: 30rem;
+    --static-height-400: 25rem;
+    --static-height-360: 22.5rem;
+    --static-height-320: 20rem;
+    --static-height-280: 17.5rem;
+    --static-height-240: 15rem;
+    --static-height-220: 13.75rem;
+    --static-height-160: 10rem;
+
+    --responsive-width-xl: var(--static-width-1440);
+    --responsive-width-l:  var(--static-width-1200);
+    --responsive-width-m:  var(--static-width-1024);
+    --responsive-width-s:  var(--static-width-768);
+    --responsive-width-xs: var(--static-width-640);
+
+    --responsive-height-xl: var(--static-height-560);
+    --responsive-height-l:  var(--static-height-480);
+    --responsive-height-m:  var(--static-height-400);
+    --responsive-height-s:  var(--static-height-360);
+    --responsive-height-xs: var(--static-height-280);
+
+    --responsive-space-xl: var(--static-space-80);
+    --responsive-space-l:  var(--static-space-40);
+    --responsive-space-m:  var(--static-space-24);
+    --responsive-space-s:  var(--static-space-16);
+    --responsive-space-xs: var(--static-space-12);
+}
+
+@media (--m) {
+    :root {
+        --responsive-width-xl: var(--static-width-1024);
+        --responsive-width-l:  var(--static-width-1024);
+        --responsive-width-m:  var(--static-width-880);
+        --responsive-width-s:  var(--static-width-768);
+        --responsive-width-xs: var(--static-width-640);
+
+        --responsive-height-xl: var(--static-height-480);
+        --responsive-height-l:  var(--static-height-400);
+        --responsive-height-m:  var(--static-height-360);
+        --responsive-height-s:  var(--static-height-280);
+        --responsive-height-xs: var(--static-height-240);
+
+        --responsive-space-xl: var(--static-space-64);
+        --responsive-space-l:  var(--static-space-24);
+        --responsive-space-m:  var(--static-space-16);
+        --responsive-space-s:  var(--static-space-12);
+        --responsive-space-xs: var(--static-space-8);
+    }
+}
+
+@media (--s) {
+    :root {
+        --responsive-width-xl: var(--static-width-1024);
+        --responsive-width-l:  var(--static-width-1024);
+        --responsive-width-m:  var(--static-width-880);
+        --responsive-width-s:  var(--static-width-768);
+        --responsive-width-xs: var(--static-width-640);
+
+        --responsive-height-xl: var(--static-height-320);
+        --responsive-height-l:  var(--static-height-280);
+        --responsive-height-m:  var(--static-height-240);
+        --responsive-height-s:  var(--static-height-220);
+        --responsive-height-xs: var(--static-height-160);
+
+        --responsive-space-xl: var(--static-space-40);
+        --responsive-space-l:  var(--static-space-16);
+        --responsive-space-m:  var(--static-space-12);
+        --responsive-space-s:  var(--static-space-8);
+        --responsive-space-xs: var(--static-space-4);
+    }
+}
+
+[data-scaling="110"] {
+    --static-space-1:   calc(0.0625rem * 1.1);
+    --static-space-2:   calc(0.125rem * 1.1);
+    --static-space-4:   calc(0.25rem * 1.1);
+    --static-space-8:   calc(0.5rem * 1.1);
+    --static-space-12:  calc(0.75rem * 1.1);
+    --static-space-16:  calc(1rem * 1.1);
+    --static-space-20:  calc(1.25rem * 1.1);
+    --static-space-24:  calc(1.5rem * 1.1);
+    --static-space-32:  calc(2rem * 1.1);
+    --static-space-40:  calc(2.5rem * 1.1);
+    --static-space-48:  calc(3rem * 1.1);
+    --static-space-56:  calc(3.5rem * 1.1);
+    --static-space-64:  calc(4rem * 1.1);
+    --static-space-80:  calc(5rem * 1.1);
+    --static-space-104: calc(6.5rem * 1.1);
+    --static-space-128: calc(8rem * 1.1);
+    --static-space-160: calc(10rem * 1.1);
+
+    --static-width-2400: calc(150rem * 1.1);
+    --static-width-1600: calc(100rem * 1.1);
+    --static-width-1440: calc(90rem * 1.1);
+    --static-width-1200: calc(75rem * 1.1);
+    --static-width-1024: calc(64rem * 1.1);
+    --static-width-880:  calc(55rem * 1.1);
+    --static-width-768:  calc(48rem * 1.1);
+    --static-width-560:  calc(35rem * 1.1);
+    --static-width-400:  calc(25rem * 1.1);
+    --static-width-320:  calc(20rem * 1.1);
+
+    --static-height-560: calc(35rem * 1.1);
+    --static-height-480: calc(30rem * 1.1);
+    --static-height-400: calc(25rem * 1.1);
+    --static-height-360: calc(22.5rem * 1.1);
+    --static-height-320: calc(20rem * 1.1);
+    --static-height-280: calc(17.5rem * 1.1);
+    --static-height-240: calc(15rem * 1.1);
+    --static-height-220: calc(13.75rem * 1.1);
+    --static-height-160: calc(10rem * 1.1);
+}
+
+[data-scaling="105"] {
+    --static-space-1:   calc(0.0625rem * 1.05);
+    --static-space-2:   calc(0.125rem * 1.05);
+    --static-space-4:   calc(0.25rem * 1.05);
+    --static-space-8:   calc(0.5rem * 1.05);
+    --static-space-12:  calc(0.75rem * 1.05);
+    --static-space-16:  calc(1rem * 1.05);
+    --static-space-20:  calc(1.25rem * 1.05);
+    --static-space-24:  calc(1.5rem * 1.05);
+    --static-space-32:  calc(2rem * 1.05);
+    --static-space-40:  calc(2.5rem * 1.05);
+    --static-space-48:  calc(3rem * 1.05);
+    --static-space-56:  calc(3.5rem * 1.05);
+    --static-space-64:  calc(4rem * 1.05);
+    --static-space-80:  calc(5rem * 1.05);
+    --static-space-104: calc(6.5rem * 1.05);
+    --static-space-128: calc(8rem * 1.05);
+    --static-space-160: calc(10rem * 1.05);
+
+    --static-width-2400: calc(150rem * 1.05);
+    --static-width-1600: calc(100rem * 1.05);
+    --static-width-1440: calc(90rem * 1.05);
+    --static-width-1200: calc(75rem * 1.05);
+    --static-width-1024: calc(64rem * 1.05);
+    --static-width-880:  calc(55rem * 1.05);
+    --static-width-768:  calc(48rem * 1.05);
+    --static-width-560:  calc(35rem * 1.05);
+    --static-width-400:  calc(25rem * 1.05);
+    --static-width-320:  calc(20rem * 1.05);
+
+    --static-height-560: calc(35rem * 1.05);
+    --static-height-480: calc(30rem * 1.05);
+    --static-height-400: calc(25rem * 1.05);
+    --static-height-360: calc(22.5rem * 1.05);
+    --static-height-320: calc(20rem * 1.05);
+    --static-height-280: calc(17.5rem * 1.05);
+    --static-height-240: calc(15rem * 1.05);
+    --static-height-220: calc(13.75rem * 1.05);
+    --static-height-160: calc(10rem * 1.05);
+}
+
+[data-scaling="95"] {
+    --static-space-1:   calc(0.0625rem * 0.95);
+    --static-space-2:   calc(0.125rem * 0.95);
+    --static-space-4:   calc(0.25rem * 0.95);
+    --static-space-8:   calc(0.5rem * 0.95);
+    --static-space-12:  calc(0.75rem * 0.95);
+    --static-space-16:  calc(1rem * 0.95);
+    --static-space-20:  calc(1.25rem * 0.95);
+    --static-space-24:  calc(1.5rem * 0.95);
+    --static-space-32:  calc(2rem * 0.95);
+    --static-space-40:  calc(2.5rem * 0.95);
+    --static-space-48:  calc(3rem * 0.95);
+    --static-space-56:  calc(3.5rem * 0.95);
+    --static-space-64:  calc(4rem * 0.95);
+    --static-space-80:  calc(5rem * 0.95);
+    --static-space-104: calc(6.5rem * 0.95);
+    --static-space-128: calc(8rem * 0.95);
+    --static-space-160: calc(10rem * 0.95);
+
+    --static-width-2400: calc(150rem * 0.95);
+    --static-width-1600: calc(100rem * 0.95);
+    --static-width-1440: calc(90rem * 0.95);
+    --static-width-1200: calc(75rem * 0.95);
+    --static-width-1024: calc(64rem * 0.95);
+    --static-width-880:  calc(55rem * 0.95);
+    --static-width-768:  calc(48rem * 0.95);
+    --static-width-560:  calc(35rem * 0.95);
+    --static-width-400:  calc(25rem * 0.95);
+    --static-width-320:  calc(20rem * 0.95);
+
+    --static-height-560: calc(35rem * 0.95);
+    --static-height-480: calc(30rem * 0.95);
+    --static-height-400: calc(25rem * 0.95);
+    --static-height-360: calc(22.5rem * 0.95);
+    --static-height-320: calc(20rem * 0.95);
+    --static-height-280: calc(17.5rem * 0.95);
+    --static-height-240: calc(15rem * 0.95);
+    --static-height-220: calc(13.75rem * 0.95);
+    --static-height-160: calc(10rem * 0.95);
+}
+
+[data-scaling="90"] {
+    --static-space-1:   calc(0.0625rem * 0.9);
+    --static-space-2:   calc(0.125rem * 0.9);
+    --static-space-4:   calc(0.25rem * 0.9);
+    --static-space-8:   calc(0.5rem * 0.9);
+    --static-space-12:  calc(0.75rem * 0.9);
+    --static-space-16:  calc(1rem * 0.9);
+    --static-space-20:  calc(1.25rem * 0.9);
+    --static-space-24:  calc(1.5rem * 0.9);
+    --static-space-32:  calc(2rem * 0.9);
+    --static-space-40:  calc(2.5rem * 0.9);
+    --static-space-48:  calc(3rem * 0.9);
+    --static-space-56:  calc(3.5rem * 0.9);
+    --static-space-64:  calc(4rem * 0.9);
+    --static-space-80:  calc(5rem * 0.9);
+    --static-space-104: calc(6.5rem * 0.9);
+    --static-space-128: calc(8rem * 0.9);
+    --static-space-160: calc(10rem * 0.9);
+
+    --static-width-2400: calc(150rem * 0.9);
+    --static-width-1600: calc(100rem * 0.9);
+    --static-width-1440: calc(90rem * 0.9);
+    --static-width-1200: calc(75rem * 0.9);
+    --static-width-1024: calc(64rem * 0.9);
+    --static-width-880:  calc(55rem * 0.9);
+    --static-width-768:  calc(48rem * 0.9);
+    --static-width-560:  calc(35rem * 0.9);
+    --static-width-400:  calc(25rem * 0.9);
+    --static-width-320:  calc(20rem * 0.9);
+
+    --static-height-560: calc(35rem * 0.9);
+    --static-height-480: calc(30rem * 0.9);
+    --static-height-400: calc(25rem * 0.9);
+    --static-height-360: calc(22.5rem * 0.9);
+    --static-height-320: calc(20rem * 0.9);
+    --static-height-280: calc(17.5rem * 0.9);
+    --static-height-240: calc(15rem * 0.9);
+    --static-height-220: calc(13.75rem * 0.9);
+    --static-height-160: calc(10rem * 0.9);
+}

package/dist/tokens/scheme.scss

@@ -0,0 +1,304 @@
+:root {
+    /* STATIC */
+    --static-transparent: #00000000;
+
+    --static-white:        #ffffff;
+    --static-white-medium: #ffffff4D;
+    --static-black:        #000000;
+    --static-black-medium: #0000004D;
+
+    /* CUSTOM */
+    /* 
+        Insert code for your custom color palette
+        generated at https://once-ui.com/customize
+    */
+
+    /* BASE */
+    /* sand */
+    --scheme-sand-100:  #0D0A00;
+    --scheme-sand-200:  #1B1608;
+    --scheme-sand-300:  #443F30;
+    --scheme-sand-400:  #5E594C;
+    --scheme-sand-500:  #797465;
+    --scheme-sand-600:  #999486;
+    --scheme-sand-700:  #B7B2A4;
+    --scheme-sand-800:  #D7D2C4;
+    --scheme-sand-900:  #E5E0D2;
+    --scheme-sand-1000: #F2EDDF;
+    --scheme-sand-1100: #F8F3E5;
+    --scheme-sand-1200: #FDF9EE;
+
+    --scheme-sand-600-10: #9994861A;
+    --scheme-sand-600-30: #9994864D;
+    --scheme-sand-600-50: #99948680;
+    
+    /* gray */
+    --scheme-gray-100:  #0A0A0A;
+    --scheme-gray-200:  #151515;
+    --scheme-gray-300:  #3F3F3F;
+    --scheme-gray-400:  #595959;
+    --scheme-gray-500:  #757575;
+    --scheme-gray-600:  #959595;
+    --scheme-gray-700:  #B2B2B2;
+    --scheme-gray-800:  #D2D2D2;
+    --scheme-gray-900:  #E0E0E0;
+    --scheme-gray-1000: #EDEDED;
+    --scheme-gray-1100: #F3F3F3;
+    --scheme-gray-1200: #F9F9F9;
+
+    --scheme-gray-600-10: #9595951A;
+    --scheme-gray-600-30: #9595954D;
+    --scheme-gray-600-50: #95959580;
+    
+    /* slate */
+    --scheme-slate-100:  #040816;
+    --scheme-slate-200:  #0F152B;
+    --scheme-slate-300:  #393F55;
+    --scheme-slate-400:  #52586F;
+    --scheme-slate-500:  #6D748A;
+    --scheme-slate-600:  #8E94AA;
+    --scheme-slate-700:  #ACB2C8;
+    --scheme-slate-800:  #CCD2E8;
+    --scheme-slate-900:  #DAE0F6;
+    --scheme-slate-1000: #E9EDFE;
+    --scheme-slate-1100: #F1F3FD;
+    --scheme-slate-1200: #F8F9FD;
+
+    --scheme-slate-600-10: #8E94AA1A;
+    --scheme-slate-600-30: #8E94AA4D;
+    --scheme-slate-600-50: #8E94AA80;
+
+    /* red */
+    --scheme-red-100:  #130507;
+    --scheme-red-200:  #2A0A10;
+    --scheme-red-300:  #830711;
+    --scheme-red-400:  #B6020C;
+    --scheme-red-500:  #E90507;
+    --scheme-red-600:  #FF5F53;
+    --scheme-red-700:  #FF9689;
+    --scheme-red-800:  #FDC6BD;
+    --scheme-red-900:  #FDD8D2;
+    --scheme-red-1000: #FDEAE6;
+    --scheme-red-1100: #FCF1EF;
+    --scheme-red-1200: #FDF9F8;
+
+    --scheme-red-600-10: #FF5F531A;
+    --scheme-red-600-30: #FF5F534D;
+    --scheme-red-600-50: #FF5F5380;
+    
+    /* orange */
+    --scheme-orange-100:  #120605;
+    --scheme-orange-200:  #270D0A;
+    --scheme-orange-300:  #7C1A06;
+    --scheme-orange-400:  #AC2401;
+    --scheme-orange-500:  #DB3400;
+    --scheme-orange-600:  #FD6325;
+    --scheme-orange-700:  #FF9964;
+    --scheme-orange-800:  #FEC8A4;
+    --scheme-orange-900:  #FDDAC2;
+    --scheme-orange-1000: #FDEADD;
+    --scheme-orange-1100: #FCF2E9;
+    --scheme-orange-1200: #FCF9F5;
+
+    --scheme-orange-600-10: #FD63251A;
+    --scheme-orange-600-30: #FD63254D;
+    --scheme-orange-600-50: #FD632580;
+    
+    /* yellow */
+    --scheme-yellow-100:  #100704;
+    --scheme-yellow-200:  #231009;
+    --scheme-yellow-300:  #6B2D09;
+    --scheme-yellow-400:  #924205;
+    --scheme-yellow-500:  #B85B02;
+    --scheme-yellow-600:  #E07B00;
+    --scheme-yellow-700:  #FE9C0B;
+    --scheme-yellow-800:  #FECC55;
+    --scheme-yellow-900:  #FEDE79;
+    --scheme-yellow-1000: #FCEEA7;
+    --scheme-yellow-1100: #FBF5CB;
+    --scheme-yellow-1200: #FBFAEB;
+
+    --scheme-yellow-600-10: #E07B001A;
+    --scheme-yellow-600-30: #E07B004D;
+    --scheme-yellow-600-50: #E07B0080;
+
+    /* moss */
+    --scheme-moss-100:  #080B04;
+    --scheme-moss-200:  #111707;
+    --scheme-moss-300:  #2F460C;
+    --scheme-moss-400:  #3C630A;
+    --scheme-moss-500:  #478309;
+    --scheme-moss-600:  #4FA900;
+    --scheme-moss-700:  #54CC01;
+    --scheme-moss-800:  #76ED53;
+    --scheme-moss-900:  #98F789;
+    --scheme-moss-1000: #C0FDBB;
+    --scheme-moss-1100: #DAFDD7;
+    --scheme-moss-1200: #F0FDEF;
+
+    --scheme-moss-600-10: #4FA9001A;
+    --scheme-moss-600-30: #4FA9004D;
+    --scheme-moss-600-50: #4FA90080;
+
+    /* green */
+    --scheme-green-100:  #040B07;
+    --scheme-green-200:  #081810;
+    --scheme-green-300:  #0D4929;
+    --scheme-green-400:  #0C6731;
+    --scheme-green-500:  #0A8637;
+    --scheme-green-600:  #08AC3A;
+    --scheme-green-700:  #01CF38;
+    --scheme-green-800:  #5FEF61;
+    --scheme-green-900:  #91F88C;
+    --scheme-green-1000: #C0FDBB;
+    --scheme-green-1100: #DAFDD7;
+    --scheme-green-1200: #F0FDEF;
+
+    --scheme-green-600-10: #08AC3A1A;
+    --scheme-green-600-30: #08AC3A4D;
+    --scheme-green-600-50: #08AC3A80;
+
+    /* emerald */
+    --scheme-emerald-100:  #040B0A;
+    --scheme-emerald-200:  #081816;
+    --scheme-emerald-300:  #0D483C;
+    --scheme-emerald-400:  #0C6551;
+    --scheme-emerald-500:  #0A8466;
+    --scheme-emerald-600:  #08A97C;
+    --scheme-emerald-700:  #01CB90;
+    --scheme-emerald-800:  #56ECAD;
+    --scheme-emerald-900:  #84F6C3;
+    --scheme-emerald-1000: #B4FDDA;
+    --scheme-emerald-1100: #D7FCEA;
+    --scheme-emerald-1200: #EEFDF5;
+
+    --scheme-emerald-600-10: #08A97C1A;
+    --scheme-emerald-600-30: #08A97C4D;
+    --scheme-emerald-600-50: #08A97C80;
+
+    /* aqua */
+    --scheme-aqua-100:  #050B0D;
+    --scheme-aqua-200:  #081719;
+    --scheme-aqua-300:  #0C464B;
+    --scheme-aqua-400:  #0C6367;
+    --scheme-aqua-500:  #0B8184;
+    --scheme-aqua-600:  #08A6A5;
+    --scheme-aqua-700:  #01C7C3;
+    --scheme-aqua-800:  #4DE9DC;
+    --scheme-aqua-900:  #78F6E4;
+    --scheme-aqua-1000: #B0FCEE;
+    --scheme-aqua-1100: #D3FCF3;
+    --scheme-aqua-1200: #ECFDF9;
+
+    --scheme-aqua-600-10: #08A6A51A;
+    --scheme-aqua-600-30: #08A6A54D;
+    --scheme-aqua-600-50: #08A6A580;
+
+    /* cyan */
+    --scheme-cyan-100:  #050911;
+    --scheme-cyan-200:  #0A1525;
+    --scheme-cyan-300:  #094074;
+    --scheme-cyan-400:  #045B9C;
+    --scheme-cyan-500:  #0279BE;
+    --scheme-cyan-600:  #049EE2;
+    --scheme-cyan-700:  #17C0FD;
+    --scheme-cyan-800:  #60E4FC;
+    --scheme-cyan-900:  #82F1FC;
+    --scheme-cyan-1000: #B3FAFC;
+    --scheme-cyan-1100: #D4FBFC;
+    --scheme-cyan-1200: #EFFCFD;
+
+    --scheme-cyan-600-10: #049EE21A;
+    --scheme-cyan-600-30: #049EE24D;
+    --scheme-cyan-600-50: #049EE280;
+
+    /* blue */
+    --scheme-blue-100:  #0A071B;
+    --scheme-blue-200:  #0D0B44;
+    --scheme-blue-300:  #0019CB;
+    --scheme-blue-400:  #033CF8;
+    --scheme-blue-500:  #2D69FA;
+    --scheme-blue-600:  #5A93FC;
+    --scheme-blue-700:  #84B5FD;
+    --scheme-blue-800:  #B4D6FB;
+    --scheme-blue-900:  #CBE3FB;
+    --scheme-blue-1000: #E0EFFC;
+    --scheme-blue-1100: #EBF5FC;
+    --scheme-blue-1200: #F6FAFD;
+
+    --scheme-blue-600-10: #5A93FC1A;
+    --scheme-blue-600-30: #5A93FC4D;
+    --scheme-blue-600-50: #5A93FC80;
+
+    /* indigo */
+    --scheme-indigo-100:  #0E0718;
+    --scheme-indigo-200:  #1C0B35;
+    --scheme-indigo-300:  #3D01C5;
+    --scheme-indigo-400:  #5625F7;
+    --scheme-indigo-500:  #7358FA;
+    --scheme-indigo-600:  #9585FA;
+    --scheme-indigo-700:  #B3A9FD;
+    --scheme-indigo-800:  #D2CEFB;
+    --scheme-indigo-900:  #E0DEFA;
+    --scheme-indigo-1000: #EDEDFB;
+    --scheme-indigo-1100: #F3F2FC;
+    --scheme-indigo-1200: #F9F9FD;
+
+    --scheme-indigo-600-10:  #9585FA1A;
+    --scheme-indigo-600-30:  #9585FA4D;
+    --scheme-indigo-600-50:  #9585FA80;
+
+    /* violet */
+    --scheme-violet-100:  #0E0512;
+    --scheme-violet-200:  #210B2B;
+    --scheme-violet-300:  #60099B;
+    --scheme-violet-400:  #7D04E4;
+    --scheme-violet-500:  #9745F7;
+    --scheme-violet-600:  #B07AFA;
+    --scheme-violet-700:  #C7A2FD;
+    --scheme-violet-800:  #DDCBFB;
+    --scheme-violet-900:  #E6DCFB;
+    --scheme-violet-1000: #F0EBFC;
+    --scheme-violet-1100: #F5F3FC;
+    --scheme-violet-1200: #FAF8FD;
+
+    --scheme-violet-600-10:  #B07AFA1A;
+    --scheme-violet-600-30:  #B07AFA4D;
+    --scheme-violet-600-50:  #B07AFA80;
+
+    /* magenta */
+    --scheme-magenta-100:  #100511;
+    --scheme-magenta-200:  #250A26;
+    --scheme-magenta-300:  #70077B;
+    --scheme-magenta-400:  #9902B3;
+    --scheme-magenta-500:  #BD1DE8;
+    --scheme-magenta-600:  #D166FA;
+    --scheme-magenta-700:  #DC98FD;
+    --scheme-magenta-800:  #E8C7FB;
+    --scheme-magenta-900:  #EFD9FB;
+    --scheme-magenta-1000: #F5E9FC;
+    --scheme-magenta-1100: #F8F1FC;
+    --scheme-magenta-1200: #FBF8FD;
+
+    --scheme-magenta-600-10:  #D166FA1A;
+    --scheme-magenta-600-30:  #D166FA4D;
+    --scheme-magenta-600-50:  #D166FA80;
+
+    /* pink */
+    --scheme-pink-100:  #12050B;
+    --scheme-pink-200:  #280A1A;
+    --scheme-pink-300:  #7D074A;
+    --scheme-pink-400:  #AE0169;
+    --scheme-pink-500:  #DE028E;
+    --scheme-pink-600:  #F854BE;
+    --scheme-pink-700:  #FD8BE4;
+    --scheme-pink-800:  #FCC0F1;
+    --scheme-pink-900:  #FCD5F5;
+    --scheme-pink-1000: #FCE7F9;
+    --scheme-pink-1100: #FCF0FA;
+    --scheme-pink-1200: #FDF8FC;
+
+    --scheme-pink-600-10:  #F854BE1A;
+    --scheme-pink-600-30:  #F854BE4D;
+    --scheme-pink-600-50:  #F854BE80;
+}

package/dist/tokens/shadow.scss

@@ -0,0 +1,7 @@
+:root {
+    --shadow-xs: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 1px 2px  rgba(0, 0, 0, 0.08),  0px 2px 4px   rgba(0, 0, 0, 0.08);
+    --shadow-s:  0px 0px 2px rgba(0, 0, 0, 0.12), 0px 1px 4px  rgba(0, 0, 0, 0.08),  0px 4px 8px   rgba(0, 0, 0, 0.08);
+    --shadow-m:  0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px  rgba(0, 0, 0, 0.08),  0px 8px 8px   rgba(0, 0, 0, 0.08);
+    --shadow-l:  0px 2px 4px rgba(0, 0, 0, 0.12), 0px 8px 12px rgba(0, 0, 0, 0.08),  0px 8px 16px  rgba(0, 0, 0, 0.08);
+    --shadow-xl: 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 8px 12px rgba(0, 0, 0, 0.08),  0px 24px 24px rgba(0, 0, 0, 0.08);
+}