@mittwald/flow-design-tokens 0.2.0-alpha.92 → 0.2.0-alpha.921

package/dist/css/colors-dark-system.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root:not([data-theme]), :root[data-theme='system'] {
+  --color--gray--100: #1B1F24;
+  --color--gray--200: #292F37;
+  --color--gray--300: #3A434E;
+  --color--gray--400: #5E6C7A;
+  --color--gray--500: #8FA1B4;
+  --color--gray--600: #B7C9DB;
+  --color--gray--700: #DCE9F7;
+  --color--gray--800: #E5EFF8;
+  --color--gray--900: #F4F8FC;
+  --color--gray--1000: #FFFFFF;
+  --color--gray--1100: #FFFFFF;
+  --color--gray--1200: #FFFFFF;
+  --color--hosting-blue--100: #00205C;
+  --color--hosting-blue--200: #002A7B;
+  --color--hosting-blue--300: #003FB8;
+  --color--hosting-blue--400: #0054F5;
+  --color--hosting-blue--500: #1A68FF;
+  --color--hosting-blue--600: #3D80FF;
+  --color--hosting-blue--700: #6197FF;
+  --color--hosting-blue--800: #85AFFF;
+  --color--hosting-blue--900: #ABC6FF;
+  --color--hosting-blue--1000: #E0EBFF;
+  --color--hosting-blue--1100: #F0F5FF;
+  --color--amaranth-red--100: #540B1B;
+  --color--amaranth-red--200: #710F24;
+  --color--amaranth-red--300: #AB1737;
+  --color--amaranth-red--400: #E1244C;
+  --color--amaranth-red--500: #E54366;
+  --color--amaranth-red--600: #EA637F;
+  --color--amaranth-red--700: #EE8299;
+  --color--amaranth-red--800: #F2A2B3;
+  --color--amaranth-red--900: #F7C1CC;
+  --color--amaranth-red--1000: #FBE0E6;
+  --color--amaranth-red--1100: #FDF0F3;
+  --color--royal-orange--100: #763200;
+  --color--royal-orange--200: #8F3D00;
+  --color--royal-orange--300: #C25200;
+  --color--royal-orange--400: #F56800;
+  --color--royal-orange--500: #FF8225;
+  --color--royal-orange--600: #FF9343;
+  --color--royal-orange--700: #FFA562;
+  --color--royal-orange--800: #FFC89F;
+  --color--royal-orange--900: #FFD9BD;
+  --color--royal-orange--1000: #FFEBDC;
+  --color--royal-orange--1100: #FFF4EB;
+  --color--espelkamp-green--100: #00291C;
+  --color--espelkamp-green--200: #003B29;
+  --color--espelkamp-green--300: #005F42;
+  --color--espelkamp-green--400: #00825B;
+  --color--espelkamp-green--500: #00A673;
+  --color--espelkamp-green--600: #00DE9A;
+  --color--espelkamp-green--700: #17FFB8;
+  --color--espelkamp-green--800: #4FFFC9;
+  --color--espelkamp-green--900: #87FFDA;
+  --color--espelkamp-green--1000: #C0FFEB;
+  --color--espelkamp-green--1100: #DCFFF4;
+  --color--soft-contrast-violet--100: #302a6f;
+  --color--soft-contrast-violet--200: #483b9f;
+  --color--soft-contrast-violet--300: #5d4abf;
+  --color--soft-contrast-violet--400: #715DEE;
+  --color--soft-contrast-violet--500: #8574F0;
+  --color--soft-contrast-violet--600: #998BF3;
+  --color--soft-contrast-violet--700: #AEA2F5;
+  --color--soft-contrast-violet--800: #C2B9F8;
+  --color--soft-contrast-violet--900: #D6D0FA;
+  --color--soft-contrast-violet--1000: #EAE7FD;
+  --color--soft-contrast-violet--1100: #F4F3FE;
+  --color--mittwald-navy--100: #0E142E;
+  --color--mittwald-navy--200: #131B3D;
+  --color--mittwald-navy--300: #1D285C;
+  --color--mittwald-navy--400: #27367B;
+  --color--mittwald-navy--500: #32459E;
+  --color--mittwald-navy--600: #3D55C1;
+  --color--mittwald-navy--700: #5F73CC;
+  --color--mittwald-navy--800: #8291D7;
+  --color--mittwald-navy--900: #A5B0E2;
+  --color--mittwald-navy--1000: #C8CFEE;
+  --color--mittwald-navy--1100: #E4E7F6;
+  --color--bright-lilac--100: #470062;
+  --color--bright-lilac--200: #5f0083;
+  --color--bright-lilac--300: #9000c5;
+  --color--bright-lilac--400: #bc08ff;
+  --color--bright-lilac--500: #ce4bff;
+  --color--bright-lilac--600: #e08dff;
+  --color--bright-lilac--700: #e6a1ff;
+  --color--bright-lilac--800: #ebb6ff;
+  --color--bright-lilac--900: #f1caff;
+  --color--bright-lilac--1000: #f6dfff;
+  --color--bright-lilac--1100: #f9e9ff;
+  --color--super-teal--100: #00424a;
+  --color--super-teal--200: #004f59;
+  --color--super-teal--300: #006b78;
+  --color--super-teal--400: #008696;
+  --color--super-teal--500: #00a1b5;
+  --color--super-teal--600: #00d3ed;
+  --color--super-teal--700: #26e7ff;
+  --color--super-teal--800: #5eedff;
+  --color--super-teal--900: #96f3ff;
+  --color--super-teal--1000: #cffaff;
+  --color--super-teal--1100: #ebfdff;
+  --color--categorical--sea-green: #0fb5ae;
+  --color--categorical--palatinate-blue: #4046ca;
+  --color--categorical--tangerine: #f68511;
+  --color--categorical--magenta: #de3d82;
+  --color--categorical--tropical-indigo: #7e84fa;
+  --color--categorical--malachite: #72e06a;
+  --color--categorical--azure: #147af3;
+  --color--categorical--violet: #7326d3;
+  --color--categorical--yellow: #e8c600;
+  --color--categorical--alloy-orange: #cb5d00;
+  --color--categorical--green: #008f5d;
+  --color--categorical--lime: #bce931;
+  --color--transparent: transparent;
+  --color--code-syntax--keyword: #ff7b72;
+  --color--code-syntax--type: #d2a8ff;
+  --color--code-syntax--variable: #79c0ff;
+  --color--code-syntax--property: #d2a8ff;
+  --color--code-syntax--string: #a5d6ff;
+  --color--code-syntax--number: #79c0ff;
+  --color--code-syntax--comment: #a0a7b0;
+  --color--code-syntax--function: #d2a8ff;
+  --color--code-syntax--operator: #ff7b72;
+  --color--code-syntax--invalid: #f97583;
+  --color--black-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--black-alpha--200: rgb(255 255 255 / 25%);
+  --color--black-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--black-alpha--400: rgb(255 255 255 / 50%);
+  --color--black-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--black-alpha--600: rgb(255 255 255 / 75%);
+  --color--black-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--black-alpha--800: rgb(255 255 255 / 100%);
+  --color--white-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--white-alpha--200: rgb(0 0 0 / 25%);
+  --color--white-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--white-alpha--400: rgb(0 0 0 / 50%);
+  --color--white-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--white-alpha--600: rgb(0 0 0 / 75%);
+  --color--white-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--white-alpha--800: rgb(0 0 0 / 100%);
+  --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--static-black-alpha--200: rgb(0 0 0 / 25%);
+  --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--static-black-alpha--400: rgb(0 0 0 / 50%);
+  --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--static-black-alpha--600: rgb(0 0 0 / 75%);
+  --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--static-black-alpha--800: rgb(0 0 0 / 100%);
+  --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--static-white-alpha--200: rgb(255 255 255 / 25%);
+  --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--static-white-alpha--400: rgb(255 255 255 / 50%);
+  --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--static-white-alpha--600: rgb(255 255 255 / 75%);
+  --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--static-white-alpha--800: rgb(255 255 255 / 100%);
+  --color--gradient: radial-gradient(circle at 18% 20%, #3D55C159, transparent 22%), radial-gradient(circle at 82% 18%, #00A1B54D, transparent 18%), radial-gradient(circle at 70% 82%, #715DEE47, transparent 24%), linear-gradient(180deg, #06070A 0%, #0A0E18 45%, #0F1424 100%);
+  --color--background-gradient: linear-gradient(180deg,rgba(18, 21, 24, 1) 0%, rgba(35, 41, 64, 1) 80%);
+}

package/dist/css/colors-dark.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root[data-theme='dark'] {
+  --color--gray--100: #1B1F24;
+  --color--gray--200: #292F37;
+  --color--gray--300: #3A434E;
+  --color--gray--400: #5E6C7A;
+  --color--gray--500: #8FA1B4;
+  --color--gray--600: #B7C9DB;
+  --color--gray--700: #DCE9F7;
+  --color--gray--800: #E5EFF8;
+  --color--gray--900: #F4F8FC;
+  --color--gray--1000: #FFFFFF;
+  --color--gray--1100: #FFFFFF;
+  --color--gray--1200: #FFFFFF;
+  --color--hosting-blue--100: #00205C;
+  --color--hosting-blue--200: #002A7B;
+  --color--hosting-blue--300: #003FB8;
+  --color--hosting-blue--400: #0054F5;
+  --color--hosting-blue--500: #1A68FF;
+  --color--hosting-blue--600: #3D80FF;
+  --color--hosting-blue--700: #6197FF;
+  --color--hosting-blue--800: #85AFFF;
+  --color--hosting-blue--900: #ABC6FF;
+  --color--hosting-blue--1000: #E0EBFF;
+  --color--hosting-blue--1100: #F0F5FF;
+  --color--amaranth-red--100: #540B1B;
+  --color--amaranth-red--200: #710F24;
+  --color--amaranth-red--300: #AB1737;
+  --color--amaranth-red--400: #E1244C;
+  --color--amaranth-red--500: #E54366;
+  --color--amaranth-red--600: #EA637F;
+  --color--amaranth-red--700: #EE8299;
+  --color--amaranth-red--800: #F2A2B3;
+  --color--amaranth-red--900: #F7C1CC;
+  --color--amaranth-red--1000: #FBE0E6;
+  --color--amaranth-red--1100: #FDF0F3;
+  --color--royal-orange--100: #763200;
+  --color--royal-orange--200: #8F3D00;
+  --color--royal-orange--300: #C25200;
+  --color--royal-orange--400: #F56800;
+  --color--royal-orange--500: #FF8225;
+  --color--royal-orange--600: #FF9343;
+  --color--royal-orange--700: #FFA562;
+  --color--royal-orange--800: #FFC89F;
+  --color--royal-orange--900: #FFD9BD;
+  --color--royal-orange--1000: #FFEBDC;
+  --color--royal-orange--1100: #FFF4EB;
+  --color--espelkamp-green--100: #00291C;
+  --color--espelkamp-green--200: #003B29;
+  --color--espelkamp-green--300: #005F42;
+  --color--espelkamp-green--400: #00825B;
+  --color--espelkamp-green--500: #00A673;
+  --color--espelkamp-green--600: #00DE9A;
+  --color--espelkamp-green--700: #17FFB8;
+  --color--espelkamp-green--800: #4FFFC9;
+  --color--espelkamp-green--900: #87FFDA;
+  --color--espelkamp-green--1000: #C0FFEB;
+  --color--espelkamp-green--1100: #DCFFF4;
+  --color--soft-contrast-violet--100: #302a6f;
+  --color--soft-contrast-violet--200: #483b9f;
+  --color--soft-contrast-violet--300: #5d4abf;
+  --color--soft-contrast-violet--400: #715DEE;
+  --color--soft-contrast-violet--500: #8574F0;
+  --color--soft-contrast-violet--600: #998BF3;
+  --color--soft-contrast-violet--700: #AEA2F5;
+  --color--soft-contrast-violet--800: #C2B9F8;
+  --color--soft-contrast-violet--900: #D6D0FA;
+  --color--soft-contrast-violet--1000: #EAE7FD;
+  --color--soft-contrast-violet--1100: #F4F3FE;
+  --color--mittwald-navy--100: #0E142E;
+  --color--mittwald-navy--200: #131B3D;
+  --color--mittwald-navy--300: #1D285C;
+  --color--mittwald-navy--400: #27367B;
+  --color--mittwald-navy--500: #32459E;
+  --color--mittwald-navy--600: #3D55C1;
+  --color--mittwald-navy--700: #5F73CC;
+  --color--mittwald-navy--800: #8291D7;
+  --color--mittwald-navy--900: #A5B0E2;
+  --color--mittwald-navy--1000: #C8CFEE;
+  --color--mittwald-navy--1100: #E4E7F6;
+  --color--bright-lilac--100: #470062;
+  --color--bright-lilac--200: #5f0083;
+  --color--bright-lilac--300: #9000c5;
+  --color--bright-lilac--400: #bc08ff;
+  --color--bright-lilac--500: #ce4bff;
+  --color--bright-lilac--600: #e08dff;
+  --color--bright-lilac--700: #e6a1ff;
+  --color--bright-lilac--800: #ebb6ff;
+  --color--bright-lilac--900: #f1caff;
+  --color--bright-lilac--1000: #f6dfff;
+  --color--bright-lilac--1100: #f9e9ff;
+  --color--super-teal--100: #00424a;
+  --color--super-teal--200: #004f59;
+  --color--super-teal--300: #006b78;
+  --color--super-teal--400: #008696;
+  --color--super-teal--500: #00a1b5;
+  --color--super-teal--600: #00d3ed;
+  --color--super-teal--700: #26e7ff;
+  --color--super-teal--800: #5eedff;
+  --color--super-teal--900: #96f3ff;
+  --color--super-teal--1000: #cffaff;
+  --color--super-teal--1100: #ebfdff;
+  --color--categorical--sea-green: #0fb5ae;
+  --color--categorical--palatinate-blue: #4046ca;
+  --color--categorical--tangerine: #f68511;
+  --color--categorical--magenta: #de3d82;
+  --color--categorical--tropical-indigo: #7e84fa;
+  --color--categorical--malachite: #72e06a;
+  --color--categorical--azure: #147af3;
+  --color--categorical--violet: #7326d3;
+  --color--categorical--yellow: #e8c600;
+  --color--categorical--alloy-orange: #cb5d00;
+  --color--categorical--green: #008f5d;
+  --color--categorical--lime: #bce931;
+  --color--transparent: transparent;
+  --color--code-syntax--keyword: #ff7b72;
+  --color--code-syntax--type: #d2a8ff;
+  --color--code-syntax--variable: #79c0ff;
+  --color--code-syntax--property: #d2a8ff;
+  --color--code-syntax--string: #a5d6ff;
+  --color--code-syntax--number: #79c0ff;
+  --color--code-syntax--comment: #a0a7b0;
+  --color--code-syntax--function: #d2a8ff;
+  --color--code-syntax--operator: #ff7b72;
+  --color--code-syntax--invalid: #f97583;
+  --color--black-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--black-alpha--200: rgb(255 255 255 / 25%);
+  --color--black-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--black-alpha--400: rgb(255 255 255 / 50%);
+  --color--black-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--black-alpha--600: rgb(255 255 255 / 75%);
+  --color--black-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--black-alpha--800: rgb(255 255 255 / 100%);
+  --color--white-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--white-alpha--200: rgb(0 0 0 / 25%);
+  --color--white-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--white-alpha--400: rgb(0 0 0 / 50%);
+  --color--white-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--white-alpha--600: rgb(0 0 0 / 75%);
+  --color--white-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--white-alpha--800: rgb(0 0 0 / 100%);
+  --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--static-black-alpha--200: rgb(0 0 0 / 25%);
+  --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--static-black-alpha--400: rgb(0 0 0 / 50%);
+  --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--static-black-alpha--600: rgb(0 0 0 / 75%);
+  --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--static-black-alpha--800: rgb(0 0 0 / 100%);
+  --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--static-white-alpha--200: rgb(255 255 255 / 25%);
+  --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--static-white-alpha--400: rgb(255 255 255 / 50%);
+  --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--static-white-alpha--600: rgb(255 255 255 / 75%);
+  --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--static-white-alpha--800: rgb(255 255 255 / 100%);
+  --color--gradient: radial-gradient(circle at 18% 20%, #3D55C159, transparent 22%), radial-gradient(circle at 82% 18%, #00A1B54D, transparent 18%), radial-gradient(circle at 70% 82%, #715DEE47, transparent 24%), linear-gradient(180deg, #06070A 0%, #0A0E18 45%, #0F1424 100%);
+  --color--background-gradient: linear-gradient(180deg,rgba(18, 21, 24, 1) 0%, rgba(35, 41, 64, 1) 80%);
+}

package/dist/css/colors-light-system.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root:not([data-theme]), :root[data-theme='system'] {
+  --color--gray--100: #FFFFFF;
+  --color--gray--200: #F4F8FC;
+  --color--gray--300: #E5EFF8;
+  --color--gray--400: #DCE9F7;
+  --color--gray--500: #B7C9DB;
+  --color--gray--600: #8FA1B4;
+  --color--gray--700: #5E6C7A;
+  --color--gray--800: #3A434E;
+  --color--gray--900: #292F37;
+  --color--gray--1000: #1B1F24;
+  --color--gray--1100: #121518;
+  --color--gray--1200: #000000;
+  --color--hosting-blue--100: #F0F5FF;
+  --color--hosting-blue--200: #E0EBFF;
+  --color--hosting-blue--300: #ABC6FF;
+  --color--hosting-blue--400: #85AFFF;
+  --color--hosting-blue--500: #6197FF;
+  --color--hosting-blue--600: #3D80FF;
+  --color--hosting-blue--700: #1A68FF;
+  --color--hosting-blue--800: #0054F5;
+  --color--hosting-blue--900: #003FB8;
+  --color--hosting-blue--1000: #002A7B;
+  --color--hosting-blue--1100: #00205C;
+  --color--amaranth-red--100: #FDF0F3;
+  --color--amaranth-red--200: #FBE0E6;
+  --color--amaranth-red--300: #F7C1CC;
+  --color--amaranth-red--400: #F2A2B3;
+  --color--amaranth-red--500: #EE8299;
+  --color--amaranth-red--600: #EA637F;
+  --color--amaranth-red--700: #E54366;
+  --color--amaranth-red--800: #E1244C;
+  --color--amaranth-red--900: #AB1737;
+  --color--amaranth-red--1000: #710F24;
+  --color--amaranth-red--1100: #540B1B;
+  --color--royal-orange--100: #FFF4EB;
+  --color--royal-orange--200: #FFEBDC;
+  --color--royal-orange--300: #FFD9BD;
+  --color--royal-orange--400: #FFC89F;
+  --color--royal-orange--500: #FFA562;
+  --color--royal-orange--600: #FF9343;
+  --color--royal-orange--700: #FF8225;
+  --color--royal-orange--800: #F56800;
+  --color--royal-orange--900: #C25200;
+  --color--royal-orange--1000: #8F3D00;
+  --color--royal-orange--1100: #763200;
+  --color--espelkamp-green--100: #DCFFF4;
+  --color--espelkamp-green--200: #C0FFEB;
+  --color--espelkamp-green--300: #87FFDA;
+  --color--espelkamp-green--400: #4FFFC9;
+  --color--espelkamp-green--500: #17FFB8;
+  --color--espelkamp-green--600: #00DE9A;
+  --color--espelkamp-green--700: #00A673;
+  --color--espelkamp-green--800: #00825B;
+  --color--espelkamp-green--900: #005F42;
+  --color--espelkamp-green--1000: #003B29;
+  --color--espelkamp-green--1100: #00291C;
+  --color--soft-contrast-violet--100: #F4F3FE;
+  --color--soft-contrast-violet--200: #EAE7FD;
+  --color--soft-contrast-violet--300: #D6D0FA;
+  --color--soft-contrast-violet--400: #C2B9F8;
+  --color--soft-contrast-violet--500: #AEA2F5;
+  --color--soft-contrast-violet--600: #998BF3;
+  --color--soft-contrast-violet--700: #8574F0;
+  --color--soft-contrast-violet--800: #715DEE;
+  --color--soft-contrast-violet--900: #5d4abf;
+  --color--soft-contrast-violet--1000: #483b9f;
+  --color--soft-contrast-violet--1100: #302a6f;
+  --color--mittwald-navy--100: #E4E7F6;
+  --color--mittwald-navy--200: #C8CFEE;
+  --color--mittwald-navy--300: #A5B0E2;
+  --color--mittwald-navy--400: #8291D7;
+  --color--mittwald-navy--500: #5F73CC;
+  --color--mittwald-navy--600: #3D55C1;
+  --color--mittwald-navy--700: #32459E;
+  --color--mittwald-navy--800: #27367B;
+  --color--mittwald-navy--900: #1D285C;
+  --color--mittwald-navy--1000: #131B3D;
+  --color--mittwald-navy--1100: #0E142E;
+  --color--bright-lilac--100: #f9e9ff;
+  --color--bright-lilac--200: #f6dfff;
+  --color--bright-lilac--300: #f1caff;
+  --color--bright-lilac--400: #ebb6ff;
+  --color--bright-lilac--500: #e6a1ff;
+  --color--bright-lilac--600: #e08dff;
+  --color--bright-lilac--700: #ce4bff;
+  --color--bright-lilac--800: #bc08ff;
+  --color--bright-lilac--900: #9000c5;
+  --color--bright-lilac--1000: #5f0083;
+  --color--bright-lilac--1100: #470062;
+  --color--super-teal--100: #ebfdff;
+  --color--super-teal--200: #cffaff;
+  --color--super-teal--300: #96f3ff;
+  --color--super-teal--400: #5eedff;
+  --color--super-teal--500: #26e7ff;
+  --color--super-teal--600: #00d3ed;
+  --color--super-teal--700: #00a1b5;
+  --color--super-teal--800: #008696;
+  --color--super-teal--900: #006b78;
+  --color--super-teal--1000: #004f59;
+  --color--super-teal--1100: #00424a;
+  --color--categorical--sea-green: #0fb5ae;
+  --color--categorical--palatinate-blue: #4046ca;
+  --color--categorical--tangerine: #f68511;
+  --color--categorical--magenta: #de3d82;
+  --color--categorical--tropical-indigo: #7e84fa;
+  --color--categorical--malachite: #72e06a;
+  --color--categorical--azure: #147af3;
+  --color--categorical--violet: #7326d3;
+  --color--categorical--yellow: #e8c600;
+  --color--categorical--alloy-orange: #cb5d00;
+  --color--categorical--green: #008f5d;
+  --color--categorical--lime: #bce931;
+  --color--transparent: transparent;
+  --color--code-syntax--keyword: #cf222e;
+  --color--code-syntax--type: #6f42c1;
+  --color--code-syntax--variable: #005cc5;
+  --color--code-syntax--property: #6f42c1;
+  --color--code-syntax--string: #032f62;
+  --color--code-syntax--number: #005cc5;
+  --color--code-syntax--comment: #6a737d;
+  --color--code-syntax--function: #8250df;
+  --color--code-syntax--operator: #c12f3f;
+  --color--code-syntax--invalid: #cb2431;
+  --color--black-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--black-alpha--200: rgb(0 0 0 / 25%);
+  --color--black-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--black-alpha--400: rgb(0 0 0 / 50%);
+  --color--black-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--black-alpha--600: rgb(0 0 0 / 75%);
+  --color--black-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--black-alpha--800: rgb(0 0 0 / 100%);
+  --color--white-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--white-alpha--200: rgb(255 255 255 / 25%);
+  --color--white-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--white-alpha--400: rgb(255 255 255 / 50%);
+  --color--white-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--white-alpha--600: rgb(255 255 255 / 75%);
+  --color--white-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--white-alpha--800: rgb(255 255 255 / 100%);
+  --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--static-black-alpha--200: rgb(0 0 0 / 25%);
+  --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--static-black-alpha--400: rgb(0 0 0 / 50%);
+  --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--static-black-alpha--600: rgb(0 0 0 / 75%);
+  --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--static-black-alpha--800: rgb(0 0 0 / 100%);
+  --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--static-white-alpha--200: rgb(255 255 255 / 25%);
+  --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--static-white-alpha--400: rgb(255 255 255 / 50%);
+  --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--static-white-alpha--600: rgb(255 255 255 / 75%);
+  --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--static-white-alpha--800: rgb(255 255 255 / 100%);
+  --color--gradient: radial-gradient(circle at 27.74% 38.09%,#d8e9f8,transparent 60%),radial-gradient(circle at 63.98% 99.4%,#e4b8ff,transparent 37%),radial-gradient(circle at 79.7% 64.93%,#d8e9f8,transparent 52%),radial-gradient(circle at 10.9% 91.41%,#d8e9f8,transparent 56%),radial-gradient(circle at 3.68% 3.26%,#0056ff,transparent 31%),radial-gradient(circle at 99.62% 17.78%,#48c7d8,transparent 26%),radial-gradient(circle at 58.65% 24.91%,#d8e9f8,transparent 55%),radial-gradient(circle at 53.23% 52.72%,#d8e9f8,transparent 100%),radial-gradient(circle at 50% 50%,#fff,#fff 100%);
+  --color--background-gradient: linear-gradient( 180deg, rgba(244, 248, 252, 1) 20%, rgba(208, 214, 243, 1) 100% );
+}

package/dist/css/colors-light.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root[data-theme='light'] {
+  --color--gray--100: #FFFFFF;
+  --color--gray--200: #F4F8FC;
+  --color--gray--300: #E5EFF8;
+  --color--gray--400: #DCE9F7;
+  --color--gray--500: #B7C9DB;
+  --color--gray--600: #8FA1B4;
+  --color--gray--700: #5E6C7A;
+  --color--gray--800: #3A434E;
+  --color--gray--900: #292F37;
+  --color--gray--1000: #1B1F24;
+  --color--gray--1100: #121518;
+  --color--gray--1200: #000000;
+  --color--hosting-blue--100: #F0F5FF;
+  --color--hosting-blue--200: #E0EBFF;
+  --color--hosting-blue--300: #ABC6FF;
+  --color--hosting-blue--400: #85AFFF;
+  --color--hosting-blue--500: #6197FF;
+  --color--hosting-blue--600: #3D80FF;
+  --color--hosting-blue--700: #1A68FF;
+  --color--hosting-blue--800: #0054F5;
+  --color--hosting-blue--900: #003FB8;
+  --color--hosting-blue--1000: #002A7B;
+  --color--hosting-blue--1100: #00205C;
+  --color--amaranth-red--100: #FDF0F3;
+  --color--amaranth-red--200: #FBE0E6;
+  --color--amaranth-red--300: #F7C1CC;
+  --color--amaranth-red--400: #F2A2B3;
+  --color--amaranth-red--500: #EE8299;
+  --color--amaranth-red--600: #EA637F;
+  --color--amaranth-red--700: #E54366;
+  --color--amaranth-red--800: #E1244C;
+  --color--amaranth-red--900: #AB1737;
+  --color--amaranth-red--1000: #710F24;
+  --color--amaranth-red--1100: #540B1B;
+  --color--royal-orange--100: #FFF4EB;
+  --color--royal-orange--200: #FFEBDC;
+  --color--royal-orange--300: #FFD9BD;
+  --color--royal-orange--400: #FFC89F;
+  --color--royal-orange--500: #FFA562;
+  --color--royal-orange--600: #FF9343;
+  --color--royal-orange--700: #FF8225;
+  --color--royal-orange--800: #F56800;
+  --color--royal-orange--900: #C25200;
+  --color--royal-orange--1000: #8F3D00;
+  --color--royal-orange--1100: #763200;
+  --color--espelkamp-green--100: #DCFFF4;
+  --color--espelkamp-green--200: #C0FFEB;
+  --color--espelkamp-green--300: #87FFDA;
+  --color--espelkamp-green--400: #4FFFC9;
+  --color--espelkamp-green--500: #17FFB8;
+  --color--espelkamp-green--600: #00DE9A;
+  --color--espelkamp-green--700: #00A673;
+  --color--espelkamp-green--800: #00825B;
+  --color--espelkamp-green--900: #005F42;
+  --color--espelkamp-green--1000: #003B29;
+  --color--espelkamp-green--1100: #00291C;
+  --color--soft-contrast-violet--100: #F4F3FE;
+  --color--soft-contrast-violet--200: #EAE7FD;
+  --color--soft-contrast-violet--300: #D6D0FA;
+  --color--soft-contrast-violet--400: #C2B9F8;
+  --color--soft-contrast-violet--500: #AEA2F5;
+  --color--soft-contrast-violet--600: #998BF3;
+  --color--soft-contrast-violet--700: #8574F0;
+  --color--soft-contrast-violet--800: #715DEE;
+  --color--soft-contrast-violet--900: #5d4abf;
+  --color--soft-contrast-violet--1000: #483b9f;
+  --color--soft-contrast-violet--1100: #302a6f;
+  --color--mittwald-navy--100: #E4E7F6;
+  --color--mittwald-navy--200: #C8CFEE;
+  --color--mittwald-navy--300: #A5B0E2;
+  --color--mittwald-navy--400: #8291D7;
+  --color--mittwald-navy--500: #5F73CC;
+  --color--mittwald-navy--600: #3D55C1;
+  --color--mittwald-navy--700: #32459E;
+  --color--mittwald-navy--800: #27367B;
+  --color--mittwald-navy--900: #1D285C;
+  --color--mittwald-navy--1000: #131B3D;
+  --color--mittwald-navy--1100: #0E142E;
+  --color--bright-lilac--100: #f9e9ff;
+  --color--bright-lilac--200: #f6dfff;
+  --color--bright-lilac--300: #f1caff;
+  --color--bright-lilac--400: #ebb6ff;
+  --color--bright-lilac--500: #e6a1ff;
+  --color--bright-lilac--600: #e08dff;
+  --color--bright-lilac--700: #ce4bff;
+  --color--bright-lilac--800: #bc08ff;
+  --color--bright-lilac--900: #9000c5;
+  --color--bright-lilac--1000: #5f0083;
+  --color--bright-lilac--1100: #470062;
+  --color--super-teal--100: #ebfdff;
+  --color--super-teal--200: #cffaff;
+  --color--super-teal--300: #96f3ff;
+  --color--super-teal--400: #5eedff;
+  --color--super-teal--500: #26e7ff;
+  --color--super-teal--600: #00d3ed;
+  --color--super-teal--700: #00a1b5;
+  --color--super-teal--800: #008696;
+  --color--super-teal--900: #006b78;
+  --color--super-teal--1000: #004f59;
+  --color--super-teal--1100: #00424a;
+  --color--categorical--sea-green: #0fb5ae;
+  --color--categorical--palatinate-blue: #4046ca;
+  --color--categorical--tangerine: #f68511;
+  --color--categorical--magenta: #de3d82;
+  --color--categorical--tropical-indigo: #7e84fa;
+  --color--categorical--malachite: #72e06a;
+  --color--categorical--azure: #147af3;
+  --color--categorical--violet: #7326d3;
+  --color--categorical--yellow: #e8c600;
+  --color--categorical--alloy-orange: #cb5d00;
+  --color--categorical--green: #008f5d;
+  --color--categorical--lime: #bce931;
+  --color--transparent: transparent;
+  --color--code-syntax--keyword: #cf222e;
+  --color--code-syntax--type: #6f42c1;
+  --color--code-syntax--variable: #005cc5;
+  --color--code-syntax--property: #6f42c1;
+  --color--code-syntax--string: #032f62;
+  --color--code-syntax--number: #005cc5;
+  --color--code-syntax--comment: #6a737d;
+  --color--code-syntax--function: #8250df;
+  --color--code-syntax--operator: #c12f3f;
+  --color--code-syntax--invalid: #cb2431;
+  --color--black-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--black-alpha--200: rgb(0 0 0 / 25%);
+  --color--black-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--black-alpha--400: rgb(0 0 0 / 50%);
+  --color--black-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--black-alpha--600: rgb(0 0 0 / 75%);
+  --color--black-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--black-alpha--800: rgb(0 0 0 / 100%);
+  --color--white-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--white-alpha--200: rgb(255 255 255 / 25%);
+  --color--white-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--white-alpha--400: rgb(255 255 255 / 50%);
+  --color--white-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--white-alpha--600: rgb(255 255 255 / 75%);
+  --color--white-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--white-alpha--800: rgb(255 255 255 / 100%);
+  --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
+  --color--static-black-alpha--200: rgb(0 0 0 / 25%);
+  --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
+  --color--static-black-alpha--400: rgb(0 0 0 / 50%);
+  --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
+  --color--static-black-alpha--600: rgb(0 0 0 / 75%);
+  --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
+  --color--static-black-alpha--800: rgb(0 0 0 / 100%);
+  --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
+  --color--static-white-alpha--200: rgb(255 255 255 / 25%);
+  --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
+  --color--static-white-alpha--400: rgb(255 255 255 / 50%);
+  --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
+  --color--static-white-alpha--600: rgb(255 255 255 / 75%);
+  --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
+  --color--static-white-alpha--800: rgb(255 255 255 / 100%);
+  --color--gradient: radial-gradient(circle at 27.74% 38.09%,#d8e9f8,transparent 60%),radial-gradient(circle at 63.98% 99.4%,#e4b8ff,transparent 37%),radial-gradient(circle at 79.7% 64.93%,#d8e9f8,transparent 52%),radial-gradient(circle at 10.9% 91.41%,#d8e9f8,transparent 56%),radial-gradient(circle at 3.68% 3.26%,#0056ff,transparent 31%),radial-gradient(circle at 99.62% 17.78%,#48c7d8,transparent 26%),radial-gradient(circle at 58.65% 24.91%,#d8e9f8,transparent 55%),radial-gradient(circle at 53.23% 52.72%,#d8e9f8,transparent 100%),radial-gradient(circle at 50% 50%,#fff,#fff 100%);
+  --color--background-gradient: linear-gradient( 180deg, rgba(244, 248, 252, 1) 20%, rgba(208, 214, 243, 1) 100% );
+}