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

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

@@ -0,0 +1,165 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@layer flow.tokens {
+  :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-layered/colors-dark.css

@@ -0,0 +1,165 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@layer flow.tokens {
+  :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-layered/colors-light-system.css

@@ -0,0 +1,165 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@layer flow.tokens {
+  :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-layered/colors-light.css

@@ -0,0 +1,165 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@layer flow.tokens {
+  :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% );
+  }
+}