@yakad/ui 1.2.55-beta → 1.2.57-beta

package/appBar/appBar.module.css

@@ -7,8 +7,8 @@
     height: 5rem;
     padding: 0 2rem;
     border-bottom: 0.1rem solid #7d7d7d40;
-    background: var(--surfaceContainerColor, #f3edf7);
-    color: var(--onSurfaceColor, #1c1b1f);
-    fill: var(--onSurfaceColor, #1c1b1f);
+    background: rgb(var(--surfaceContainerColor, 243 237 247));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
     user-select: none;
 }

package/button/button.module.css

@@ -67,37 +67,37 @@
     box-shadow: inset 0 0 10rem #7d7d7d30;
 }
 .button:invalid {
-    border: 0.1rem solid var(--errorColor, #b3261e);
+    border: 0.1rem solid rgb(var(--errorColor, 179 38 30));
 }
 .text {
-    color: var(--primaryColor, #0b57d0);
-    fill: var(--primaryColor, #0b57d0);
+    color: rgb(var(--primaryColor, 11 87 208));
+    fill: rgb(var(--primaryColor, 11 87 208));
 }
 
 .outlined {
-    color: var(--primaryColor, #0b57d0);
-    fill: var(--primaryColor, #0b57d0);
+    color: rgb(var(--primaryColor, 11 87 208));
+    fill: rgb(var(--primaryColor, 11 87 208));
     border: 0.1rem solid #7d7d7d70;
 }
 .filled {
-    background: var(--primaryColor, #0b57d0);
-    color: var(--onPrimaryColor, #ffffff);
-    fill: var(--onPrimaryColor, #ffffff);
+    background: rgb(var(--primaryColor, 11 87 208));
+    color: rgb(var(--onPrimaryColor, 255 255 255));
+    fill: rgb(var(--onPrimaryColor, 255 255 255));
 }
 .filledtonal {
-    background: var(--primaryContainerColor, #d3e3fd);
-    color: var(--onPrimaryContainerColor, #041e49);
-    fill: var(--onPrimaryContainerColor, #041e49);
+    background: rgb(var(--primaryContainerColor, 211 227 253));
+    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
+    fill: rgb(var(--onPrimaryContainerColor, 4 30 73));
 }
 .tonal {
-    background: var(--tertiaryColor, #c4eed0);
-    color: var(--onTertiaryColor, #072711);
-    fill: var(--onTertiaryColor, #072711);
+    background: rgb(var(--tertiaryColor, 196 238 208));
+    color: rgb(var(--onTertiaryColor, 7 39 17));
+    fill: rgb(var(--onTertiaryColor, 7 39 17));
 }
 .elevated {
-    background-color: var(--onSecondaryColor, #ffffff);
-    color: var(--primaryColor, #0b57d0);
-    fill: var(--primaryColor, #0b57d0);
+    background-color: rgb(var(--onSecondaryColor, 255 255 255));
+    color: rgb(var(--primaryColor, 11 87 208));
+    fill: rgb(var(--primaryColor, 11 87 208));
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 .link {
@@ -112,9 +112,9 @@
     min-width: unset;
     padding: 1.6rem;
     font-size: 1.6rem;
-    background: var(--primaryContainerColor, #d3e3fd);
-    color: var(--onPrimaryContainerColor, #041e49);
-    fill: var(--onPrimaryContainerColor, #041e49);
+    background: rgb(var(--primaryContainerColor, 211 227 253));
+    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
+    fill: rgb(var(--onPrimaryContainerColor, 4, 30, 73));
 }
 .link:before {
     content: "";
@@ -126,7 +126,7 @@
     height: 0.1rem;
     padding: 0;
     margin: 0 auto;
-    background-color: var(--primaryColor, #1e64d4);
+    background-color: rgb(var(--primaryColor, 30 100 212));
     transition: 0.3s;
 }
 

package/card/card.module.css

@@ -3,9 +3,9 @@
     padding: 3rem;
     box-sizing: border-box;
     border-radius: 2rem;
-    background: var(--surfaceContainerHighestColor, #e6e0e9);
-    color: var(--onSurfaceColor, #1c1b1f);
-    fill: var(--onSurfaceColor, #1c1b1f);
+    background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
     box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
         0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
 }

package/codeField/codeField.module.css

@@ -14,7 +14,7 @@
         )
         0 100%/100% 0.2rem no-repeat;
     color: transparent;
-    text-shadow: 0 0 0 var(--secondaryColor, #625b71);
+    text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
     font: 5ch consolas, monospace;
     letter-spacing: 0.5ch;
 }

package/container/container.module.css

@@ -9,31 +9,34 @@ div.container {
 
 div.container.xs {
     max-width: 44.4rem;
-    padding-left: calc((100% - 44.4rem)/2);
-    padding-right: calc((100% - 44.4rem)/2);
+    padding-left: calc((100% - 44.4rem) / 2);
+    padding-right: calc((100% - 44.4rem) / 2);
 }
 div.container.sm {
     max-width: 60rem;
-    padding-left: calc((100% - 60rem)/2);
-    padding-right: calc((100% - 60rem)/2);
+    padding-left: calc((100% - 60rem) / 2);
+    padding-right: calc((100% - 60rem) / 2);
 }
 div.container.md {
     max-width: 90rem;
-    padding-left: calc((100% - 90rem)/2);
-    padding-right: calc((100% - 90rem)/2);
+    padding-left: calc((100% - 90rem) / 2);
+    padding-right: calc((100% - 90rem) / 2);
 }
 div.container.lg {
     max-width: 120rem;
-    padding-left: calc((100% - 120rem)/2);
-    padding-right: calc((100% - 120rem)/2);
+    padding-left: calc((100% - 120rem) / 2);
+    padding-right: calc((100% - 120rem) / 2);
 }
 div.container.xl {
     max-width: 150rem;
-    padding-left: calc((100% - 150rem)/2);
-    padding-right: calc((100% - 150rem)/2);
+    padding-left: calc((100% - 150rem) / 2);
+    padding-right: calc((100% - 150rem) / 2);
 }
 
 div.container.dotted {
-    background-image: radial-gradient(var(--surfaceContainerLowestColor) 0.8px, var(--surfaceContainerHighestColor) 0.5px);
+    background-image: radial-gradient(
+        rgb(var(--surfaceContainerLowestColor)) 0.8px,
+        rgb(var(--surfaceContainerHighestColor)) 0.5px
+    );
     background-size: 10px 10px;
-}
+}

package/footer/footer.module.css

@@ -1,7 +1,7 @@
 .footer {
-    background: var(--surfaceContainerColor, #f3edf7);
-    color: var(--onSurfaceColor, #1c1b1f);
-    fill: var(--onSurfaceColor, #1c1b1f);
+    background: rgb(var(--surfaceContainerColor, 243 237 247));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
     display: flex;
     flex-direction: row;
     width: 100%;

package/hr/hr.module.css

@@ -5,13 +5,13 @@
     margin: 0.5rem auto;
     background: none;
     border: none;
-    border-top: 0.1rem solid var(--primaryContainerColor, #d3e3fd);
+    border-top: 0.1rem solid rgb(var(--primaryContainerColor, 211 227 253));
 }
 .dotted {
-    border-top: 0.4rem dotted var(--primaryContainerColor, #d3e3fd);
+    border-top: 0.4rem dotted rgb(var(--primaryContainerColor, 211 227 253));
 }
 .dashed {
-    border-top: 0.2rem dashed var(--primaryContainerColor, #d3e3fd);
+    border-top: 0.2rem dashed rgb(var(--primaryContainerColor, 211 227 253));
 }
 .shortLine {
     width: 30rem;

package/inputField/inputField.module.css

@@ -1,165 +1,167 @@
 .label {
-  padding-top: 0.6rem;
-  font-size: 1.3rem;
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
+    padding-top: 0.6rem;
+    font-size: 1.3rem;
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
 }
 .input {
-  box-sizing: border-box;
-  margin: 0rem;
-  border-image: initial;
-  width: 100%;
-  height: inherit;
-  color: var(--onSurfaceColor, #1c1b1f);
-  box-shadow: none;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  caret-color: var(--primaryColor,#0b57d0 );
+    box-sizing: border-box;
+    margin: 0rem;
+    border-image: initial;
+    width: 100%;
+    height: inherit;
+    color: rgb(227 226 230 / 0.87);
+    box-shadow: none;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    caret-color: rgb(var(--primaryColor, 11 87 208));
 }
 .input.outlined {
-  border-top-color: transparent;
-  background-color: transparent;
-  border-width: 0.1rem;
-  border-style: solid;
-  border-radius: 0.4rem;
-  padding: 1.5rem 1.3rem;
-  transition: border 0.2s ease 0s, box-shadow 0.2s ease 0s;
-  text-rendering: auto;
-  letter-spacing: normal;
-  word-spacing: normal;
-  line-height: normal;
-  text-transform: none;
-  text-indent: 0rem;
-  text-shadow: none;
-  display: inline-block;
-  text-align: start;
-  appearance: auto;
-  -webkit-rtl-ordering: logical;
-  cursor: text;
+    border-top-color: transparent;
+    background-color: transparent;
+    border-width: 0.1rem;
+    border-style: solid;
+    border-radius: 0.4rem;
+    padding: 1.5rem 1.3rem;
+    transition: border 0.2s ease 0s, box-shadow 0.2s ease 0s;
+    text-rendering: auto;
+    letter-spacing: normal;
+    word-spacing: normal;
+    line-height: normal;
+    text-transform: none;
+    text-indent: 0rem;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    appearance: auto;
+    -webkit-rtl-ordering: logical;
+    cursor: text;
 }
 .input.filled {
-  display: block;
-  border-right: none;
-  border-left: none;
-  border-top: 2.7rem solid transparent;
-  border-bottom: solid 0.1rem var(--onSurfaceColor, #1c1b1f) ;
-  border-radius: 0.4rem 0.4rem 0rem 0rem;
-  padding: 0rem 1.2rem 1rem;
-  background-color: var(--onSurfaceColor, #1c1b1f);
-  transition: border-bottom 0.2s ease 0s, background-color 0.2s ease 0s;
+    display: block;
+    border-right: none;
+    border-left: none;
+    border-top: 2.7rem solid transparent;
+    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    border-radius: 0.4rem 0.4rem 0rem 0rem;
+    padding: 0rem 1.2rem 1rem;
+    background-color: rgb(227 226 230/ 0.04);
+    transition: border-bottom 0.2s ease 0s, background-color 0.2s ease 0s;
 }
 .input:focus {
-  outline: none;
+    outline: none;
 }
 .input.outlined:focus {
-  border-top-color: transparent;
-  box-shadow: inset 1px 0 var(--primaryColor,#0b57d0 ), inset -1px 0 var(--primaryColor,#0b57d0 ), inset 0 -1px var(--primaryColor,#0b57d0 );
+    border-top-color: transparent;
+    box-shadow: inset 1px 0 rgb(var(--primaryColor, 11 87 208)),
+        inset -1px 0 rgb(var(--primaryColor, 11 87 208)),
+        inset 0 -1px rgb(var(--primaryColor, 11 87 208));
 }
 .input:focus + .span {
-  color: var(--primaryColor,#0b57d0 );
+    color: rgb(var(--primaryColor, 11 87 208));
 }
 .input.outlined:focus + .span::after {
-  box-shadow: inset 0 1px var(--primaryColor,#0b57d0 );
-  border-top-color: var(--primaryColor,#0b57d0 ) !important;
+    box-shadow: inset 0 1px rgb(var(--primaryColor, 11 87 208));
+    border-top-color: rgb(var(--primaryColor, 11 87 208)) !important;
 }
 .input.filled:focus + .span::after {
-  transform: scale(1);
+    transform: scale(1);
 }
 .input.outlined:focus + .span::before {
-  box-shadow: inset 0 1px var(--primaryColor,#0b57d0 );
-  border-top-color: var(--primaryColor,#0b57d0 ) !important;
+    box-shadow: inset 0 1px rgb(var(--primaryColor, 11 87 208));
+    border-top-color: rgb(var(--primaryColor, 11 87 208)) !important;
 }
 
 .input.outlined:not(:focus):placeholder-shown {
-  border-top-color: var(--onSurfaceColor, #1c1b1f);
+    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
 }
 .input.outlined:not(:focus):placeholder-shown + .span {
-  font-size: inherit;
-  line-height: 6.2rem;
+    font-size: inherit;
+    line-height: 6.2rem;
 }
 .input.filled:not(:focus):placeholder-shown + .span {
-  font-size: inherit;
-  line-height: 4.8rem;
+    font-size: inherit;
+    line-height: 4.8rem;
 }
 .input + .span {
-  position: absolute;
-  color: var(--onSurfaceColor, #1c1b1f) ;
-  font-size: 75%;
-  transition: color 0.2s ease 0s, font-size 0.2s ease 0s,
-    line-height 0.2s ease 0s;
+    position: absolute;
+    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    font-size: 75%;
+    transition: color 0.2s ease 0s, font-size 0.2s ease 0s,
+        line-height 0.2s ease 0s;
 }
 .input.outlined + .span {
-  top: 0rem;
-  left: 0rem;
-  display: flex;
-  border-color: var(--onSurfaceColor, #1c1b1f);
-  width: 100%;
-  max-height: 100%;
-  line-height: 1.5rem;
-  cursor: text;
+    top: 0rem;
+    left: 0rem;
+    display: flex;
+    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    width: 100%;
+    max-height: 100%;
+    line-height: 1.5rem;
+    cursor: text;
 }
 .input.filled + .span {
-  inset: 0rem;
-  display: block;
-  box-sizing: border-box;
-  padding: 0.7rem 1.2rem 0rem;
-  line-height: 18px;
-  pointer-events: none;
+    inset: 0rem;
+    display: block;
+    box-sizing: border-box;
+    padding: 0.7rem 1.2rem 0rem;
+    line-height: 18px;
+    pointer-events: none;
 }
 .input.outlined:not(:focus):placeholder-shown + .span::before {
-  border-top-color: transparent;
+    border-top-color: transparent;
 }
 .input.outlined + .span::before {
-  margin-right: 0.4rem;
-  border-left: 0.1 solid transparent;
-  border-radius: 0.4rem 0rem;
-  content: "";
-  display: block;
-  box-sizing: border-box;
-  margin-top: 0.6rem;
-  border-top-width: 0.1rem;
-  border-top-style: solid;
-  border-top-color: var(--onSurfaceColor, #1c1b1f) ;
-  min-width: 1rem;
-  height: 0.8rem;
-  pointer-events: none;
-  box-shadow: transparent 0px 1px inset;
-  transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
+    margin-right: 0.4rem;
+    border-left: 0.1 solid transparent;
+    border-radius: 0.4rem 0rem;
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    margin-top: 0.6rem;
+    border-top-width: 0.1rem;
+    border-top-style: solid;
+    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    min-width: 1rem;
+    height: 0.8rem;
+    pointer-events: none;
+    box-shadow: transparent 0px 1px inset;
+    transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
 }
 
 .input.outlined:not(:focus):placeholder-shown + .span::after {
-  border-top-color: transparent;
+    border-top-color: transparent;
 }
 .input + .span::after {
-  content: "";
-  display: block;
+    content: "";
+    display: block;
 }
 .input.outlined + .span::after {
-  flex-grow: 1;
-  margin-left: 0.4rem;
-  border-right: 0.1rem solid transparent;
-  border-radius: 0rem 0.4rem;
-  box-sizing: border-box;
-  margin-top: 0.6rem;
-  border-top-width: 0.1rem;
-  border-top-style: solid;
-  border-top-color: var(--onSurfaceColor, #1c1b1f);
-  min-width: 1rem;
-  height: 0.8rem;
-  pointer-events: none;
-  box-shadow: transparent 0px 1px inset;
-  transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
+    flex-grow: 1;
+    margin-left: 0.4rem;
+    border-right: 0.1rem solid transparent;
+    border-radius: 0rem 0.4rem;
+    box-sizing: border-box;
+    margin-top: 0.6rem;
+    border-top-width: 0.1rem;
+    border-top-style: solid;
+    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    min-width: 1rem;
+    height: 0.8rem;
+    pointer-events: none;
+    box-shadow: transparent 0px 1px inset;
+    transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
 }
 .input.filled + .span::after {
-  position: absolute;
-  left: 0rem;
-  bottom: 0rem;
-  width: 100%;
-  height: 0.2rem;
-  background-color: var(--primaryColor,#0b57d0 );
-  transform-origin: center bottom;
-  transform: scaleX(0);
-  transition: transform 0.3s ease 0s;
+    position: absolute;
+    left: 0rem;
+    bottom: 0rem;
+    width: 100%;
+    height: 0.2rem;
+    background-color: rgb(var(--primaryColor, 11 87 208));
+    transform-origin: center bottom;
+    transform: scaleX(0);
+    transition: transform 0.3s ease 0s;
 }

package/navigation/navigation.module.css

@@ -2,9 +2,9 @@
     position: fixed;
     max-width: 100%;
     transition: transform 0.3s;
-    background: var(--surfaceContainerColor, #f3edf7);
-    color: var(--onSurfaceColor, #1c1b1f);
-    fill: var(--onSurfaceColor, #1c1b1f);
+    background: rgb(var(--surfaceContainerColor, 243 237 247));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
     overflow-y: auto;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.55-beta",
+    "version": "1.2.57-beta",
     "description": "",
     "main": "./src/index.js",
     "scripts": {

package/page/page.module.css

@@ -4,7 +4,7 @@
     min-height: 100vh;
     box-sizing: border-box;
     width: 100%;
-    background: var(--surfaceColor, #fef7ff);
-    color: var(--onSurfaceColor, #1c1b1f);
-    fill: var(--onSurfaceColor, #1c1b1f);
+    background: rgb(var(--surfaceColor, 254 247 255));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
 }

package/theme/theme.module.css

@@ -1,305 +1,305 @@
 .blue {
-    --LightPrimaryColor: #0b57d0;
-    --LightPrimaryContainerColor: #d3e3fd;
-    --LightSecondaryColor: #625b71;
-    --LightSecondaryContainerColor: #e8def8;
-    --LightTertiaryColor: #c4eed0;
-    --LightSurfaceColor: #222222;
-    --LightErrorColor: #b3261e;
-    --LightErrorContainerColor: #f9dedc;
-    --LightOnPrimaryColor: #ffffff;
-    --LightOnPrimaryContainerColor: #041e49;
-    --LightOnSecondaryColor: #ffffff;
-    --LightOnSecondaryContainerColor: #1e192b;
-    --LightOnTertiaryColor: #072711;
-    --LightOnErrorColor: #ffffff;
-    --LightOnErrorContainerColor: #410e0b;
+    --LightPrimaryColor: 11 87 208;
+    --LightPrimaryContainerColor: 211 227 253;
+    --LightSecondaryColor: 98 91 113;
+    --LightSecondaryContainerColor: 232 222 248;
+    --LightTertiaryColor: 196 238 208;
+    --LightSurfaceColor: 34 34 34;
+    --LightErrorColor: 179 38 30;
+    --LightErrorContainerColor: 249 222 220;
+    --LightOnPrimaryColor: 255 255 255;
+    --LightOnPrimaryContainerColor: 4 30 73;
+    --LightOnSecondaryColor: 255 255 255;
+    --LightOnSecondaryContainerColor: 30 25 43;
+    --LightOnTertiaryColor: 7 39 17;
+    --LightOnErrorColor: 255 255 255;
+    --LightOnErrorContainerColor: 65 14 11;
     /* neutral colors */
-    --LightSurfaceColor: #fef7ff;
-    --LightSurfaceVariantColor: #e7e0ec;
-    --LightSurfaceDimColor: #ded8e1;
-    --LightSurfaceBrightColor: #fef7ff;
-    --LightSurfaceContainerLowestColor: #ffffff;
-    --LightSurfaceContainerLowColor: #f7f2fa;
-    --LightSurfaceContainerColor: #f3edf7;
-    --LightSurfaceContainerHightColor: #ece6f0;
-    --LightSurfaceContainerHighestColor: #e6e0e9;
-    --LightOnSurfaceColor: #1c1b1f;
-    --LightOnSurfaceVariantColor: #49454e;
-    --LightOutlineColor: #79747e;
-    --LightOutlineVariantColor: #c4c7c5;
+    --LightSurfaceColor: 254 247 255;
+    --LightSurfaceVariantColor: 231 224 236;
+    --LightSurfaceDimColor: 222 216 225;
+    --LightSurfaceBrightColor: 254 247 255;
+    --LightSurfaceContainerLowestColor: 255 255 255>;
+    --LightSurfaceContainerLowColor: 247 242 250;
+    --LightSurfaceContainerColor: 243 237 247;
+    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighestColor: 230 224 233;
+    --LightOnSurfaceColor: 28 27 31;
+    --LightOnSurfaceVariantColor: 73 69 78;
+    --LightOutlineColor: 121 116 126;
+    --LightOutlineVariantColor: 196 199 197;
 
-    --DarkPrimaryColor: #a8c7fa;
-    --DarkPrimaryContainerColor: #0842a0;
-    --DarkSecondaryColor: #ccc2dc;
-    --DarkSecondaryContainerColor: #e8def8;
-    --DarkTertiaryColor: #072711;
-    --DarkErrorColor: #f2b8b5;
-    --DarkErrorContainerColor: #8c1d18;
-    --DarkOnPrimaryColor: #062e6f;
-    --DarkOnPrimaryContainerColor: #d3e3fd;
-    --DarkOnSecondaryColor: #332d41;
-    --DarkOnSecondaryContainerColor: #e8def8;
-    --DarkOnTertiaryColor: #c4eed0;
-    --DarkOnErrorColor: #601410;
-    --DarkOnErrorContainerColor: #f9dedc;
+    --DarkPrimaryColor: 168 199 250;
+    --DarkPrimaryContainerColor: 8 66 160;
+    --DarkSecondaryColor: 204 194 220;
+    --DarkSecondaryContainerColor: 232 222 248;
+    --DarkTertiaryColor: 7 39 17;
+    --DarkErrorColor: 242 184 181;
+    --DarkErrorContainerColor: 140 29 24;
+    --DarkOnPrimaryColor: 6 46 111;
+    --DarkOnPrimaryContainerColor: 211 227 253;
+    --DarkOnSecondaryColor: 51 45 65;
+    --DarkOnSecondaryContainerColor: 232 222 248;
+    --DarkOnTertiaryColor: 196 238 208;
+    --DarkOnErrorColor: 96 20 16;
+    --DarkOnErrorContainerColor: 249 222 220;
     /* neutral colors */
-    --DarkSurfaceColor: #141218;
-    --DarkSurfaceVariantColor: #49454f;
-    --DarkSurfaceDimColor: #141218;
-    --DarkSurfaceBrightColor: #3b383e;
-    --DarkSurfaceContainerLowestColor: #0f0d13;
-    --DarkSurfaceContainerLowColor: #1d1b20;
-    --DarkSurfaceContainerColor: #211f26;
-    --DarkSurfaceContainerHightColor: #2b2930;
-    --DarkSurfaceContainerHighestColor: #36343b;
-    --DarkOnSurfaceColor: #e6e1e5;
-    --DarkOnSurfaceVariantColor: #cac4d0;
-    --DarkOutlineColor: #938f99;
-    --DarkOutlineVariantColor: #444746;
+    --DarkSurfaceColor: 20 18 24;
+    --DarkSurfaceVariantColor: 73 69 79;
+    --DarkSurfaceDimColor: 20 18 24;
+    --DarkSurfaceBrightColor: 59 56 62;
+    --DarkSurfaceContainerLowestColor: 15 13 19;
+    --DarkSurfaceContainerLowColor: 29 27 32;
+    --DarkSurfaceContainerColor: 33 31 38;
+    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighestColor: 54 52 59;
+    --DarkOnSurfaceColor: 230 225 229;
+    --DarkOnSurfaceVariantColor: 202 196 208;
+    --DarkOutlineColor: 147 143 153;
+    --DarkOutlineVariantColor: 68 71 70;
 }
 .green {
-    --LightPrimaryColor: #386a20;
-    --LightPrimaryContainerColor: #b8f397;
-    --LightSecondaryColor: #625b71;
-    --LightSecondaryContainerColor: #e8def8;
-    --LightTertiaryColor: #bbebeb;
-    --LightErrorColor: #b3261e;
-    --LightErrorContainerColor: #f9dedc;
-    --LightOnPrimaryColor: #ffffff;
-    --LightOnPrimaryContainerColor: #042100;
-    --LightOnSecondaryColor: #ffffff;
-    --LightOnSecondaryContainerColor: #1e192b;
-    --LightOnTertiaryColor: #002021;
-    --LightOnErrorColor: #ffffff;
-    --LightOnErrorContainerColor: #410e0b;
+    --LightPrimaryColor: 56 106 32;
+    --LightPrimaryContainerColor: 184 243 151;
+    --LightSecondaryColor: 98 91 113;
+    --LightSecondaryContainerColor: 232 222 248;
+    --LightTertiaryColor: 187 235 235;
+    --LightErrorColor: 179 38 30;
+    --LightErrorContainerColor: 249 222 220;
+    --LightOnPrimaryColor: 255 255 255;
+    --LightOnPrimaryContainerColor: 4 33 0;
+    --LightOnSecondaryColor: 255 255 255;
+    --LightOnSecondaryContainerColor: 30 25 43;
+    --LightOnTertiaryColor: 0 32 33;
+    --LightOnErrorColor: 255 255 255;
+    --LightOnErrorContainerColor: 65 14 11;
     /* neutral colors */
-    --LightSurfaceColor: #fef7ff;
-    --LightSurfaceVariantColor: #e7e0ec;
-    --LightSurfaceDimColor: #ded8e1;
-    --LightSurfaceBrightColor: #fef7ff;
-    --LightSurfaceContainerLowestColor: #ffffff;
-    --LightSurfaceContainerLowColor: #f7f2fa;
-    --LightSurfaceContainerColor: #f3edf7;
-    --LightSurfaceContainerHightColor: #ece6f0;
-    --LightSurfaceContainerHighestColor: #e6e0e9;
-    --LightOnSurfaceColor: #1c1b1f;
-    --LightOnSurfaceVariantColor: #49454e;
-    --LightOutlineColor: #79747e;
-    --LightOutlineVariantColor: #c4c7c5;
+    --LightSurfaceColor: 254 247 255;
+    --LightSurfaceVariantColor: 231 224 236;
+    --LightSurfaceDimColor: 222 216 225;
+    --LightSurfaceBrightColor: 254 247 255;
+    --LightSurfaceContainerLowestColor: 255 255 255;
+    --LightSurfaceContainerLowColor: 247 242 250;
+    --LightSurfaceContainerColor: 243 237 247;
+    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighestColor: 230 224 233;
+    --LightOnSurfaceColor: 28 27 31;
+    --LightOnSurfaceVariantColor: 73 69 78;
+    --LightOutlineColor: 121 116 126;
+    --LightOutlineVariantColor: 196 199 197;
 
-    --DarkPrimaryColor: #9cd67d;
-    --DarkPrimaryContainerColor: #205107;
-    --DarkSecondaryColor: #ccc2dc;
-    --DarkSecondaryContainerColor: #e8def8;
-    --DarkTertiaryColor: #002021;
-    --DarkErrorColor: #f2b8b5;
-    --DarkErrorContainerColor: #8c1d18;
-    --DarkOnPrimaryColor: #0c3900;
-    --DarkOnPrimaryContainerColor: #b8f397;
-    --DarkOnSecondaryColor: #332d41;
-    --DarkOnSecondaryContainerColor: #e8def8;
-    --DarkOnTertiaryColor: #bbebeb;
-    --DarkOnErrorColor: #601410;
-    --DarkOnErrorContainerColor: #f9dedc;
+    --DarkPrimaryColor: 156 214 125;
+    --DarkPrimaryContainerColor: 32 81 7;
+    --DarkSecondaryColor: 204 194 220;
+    --DarkSecondaryContainerColor: 232 222 248;
+    --DarkTertiaryColor: 0 32 33;
+    --DarkErrorColor: 242 184 181;
+    --DarkErrorContainerColor: 140 29 24;
+    --DarkOnPrimaryColor: 12 57 0;
+    --DarkOnPrimaryContainerColor: 184 243 151;
+    --DarkOnSecondaryColor: 51 45 65;
+    --DarkOnSecondaryContainerColor: 232 222 248;
+    --DarkOnTertiaryColor: 187 235 235;
+    --DarkOnErrorColor: 96 20 16;
+    --DarkOnErrorContainerColor: 249 222 220;
     /* neutral colors */
-    --DarkSurfaceColor: #141218;
-    --DarkSurfaceVariantColor: #49454f;
-    --DarkSurfaceDimColor: #141218;
-    --DarkSurfaceBrightColor: #3b383e;
-    --DarkSurfaceContainerLowestColor: #0f0d13;
-    --DarkSurfaceContainerLowColor: #1d1b20;
-    --DarkSurfaceContainerColor: #211f26;
-    --DarkSurfaceContainerHightColor: #2b2930;
-    --DarkSurfaceContainerHighestColor: #36343b;
-    --DarkOnSurfaceColor: #e6e1e5;
-    --DarkOnSurfaceVariantColor: #cac4d0;
-    --DarkOutlineColor: #938f99;
-    --DarkOutlineVariantColor: #444746;
+    --DarkSurfaceColor: 20 18 24;
+    --DarkSurfaceVariantColor: 73 69 79;
+    --DarkSurfaceDimColor: 20 18 24;
+    --DarkSurfaceBrightColor: 59 56 62;
+    --DarkSurfaceContainerLowestColor: 15 13 19;
+    --DarkSurfaceContainerLowColor: 29 27 32;
+    --DarkSurfaceContainerColor: 33 31 38;
+    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighestColor: 54 52 59;
+    --DarkOnSurfaceColor: 230 225 229;
+    --DarkOnSurfaceVariantColor: 202 196 208;
+    --DarkOutlineColor: 147 143 153;
+    --DarkOutlineVariantColor: 68 71 70;
 }
 
 .pink {
-    --LightPrimaryColor: #9c4146;
-    --LightPrimaryContainerColor: #ffdadb;
-    --LightSecondaryColor: #625b71;
-    --LightSecondaryContainerColor: #e8def8;
-    --LightTertiaryColor: #fda;
-    --LightErrorColor: #b3261e;
-    --LightErrorContainerColor: #f9dedc;
-    --LightOnPrimaryColor: #ffffff;
-    --LightOnPrimaryContainerColor: #400008;
-    --LightOnSecondaryColor: #ffffff;
-    --LightOnSecondaryContainerColor: #1e192b;
-    --LightOnTertiaryColor: #281800;
-    --LightOnErrorColor: #ffffff;
-    --LightOnErrorContainerColor: #410e0b;
+    --LightPrimaryColor: 156 65 70;
+    --LightPrimaryContainerColor: 255 218 219;
+    --LightSecondaryColor: 98 91 113;
+    --LightSecondaryContainerColor: 232 222 248;
+    --LightTertiaryColor: 255 221 170;
+    --LightErrorColor: 179 38 30;
+    --LightErrorContainerColor: 249 222 220;
+    --LightOnPrimaryColor: 255 255 255;
+    --LightOnPrimaryContainerColor: 64 0 8;
+    --LightOnSecondaryColor: 255 255 255;
+    --LightOnSecondaryContainerColor: 30 25 43;
+    --LightOnTertiaryColor: 40 24 0;
+    --LightOnErrorColor: 255 255 255;
+    --LightOnErrorContainerColor: 65 14 11;
     /* neutral colors */
-    --LightSurfaceColor: #fef7ff;
-    --LightSurfaceVariantColor: #e7e0ec;
-    --LightSurfaceDimColor: #ded8e1;
-    --LightSurfaceBrightColor: #fef7ff;
-    --LightSurfaceContainerLowestColor: #ffffff;
-    --LightSurfaceContainerLowColor: #f7f2fa;
-    --LightSurfaceContainerColor: #f3edf7;
-    --LightSurfaceContainerHightColor: #ece6f0;
-    --LightSurfaceContainerHighestColor: #e6e0e9;
-    --LightOnSurfaceColor: #1c1b1f;
-    --LightOnSurfaceVariantColor: #49454e;
-    --LightOutlineColor: #79747e;
-    --LightOutlineVariantColor: #c4c7c5;
+    --LightSurfaceColor: 254 247 255;
+    --LightSurfaceVariantColor: 231 224 236;
+    --LightSurfaceDimColor: 222 216 225;
+    --LightSurfaceBrightColor: 254 247 255;
+    --LightSurfaceContainerLowestColor: 255 255 255;
+    --LightSurfaceContainerLowColor: 247 242 250;
+    --LightSurfaceContainerColor: 243 237 247;
+    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighestColor: 230 224 233;
+    --LightOnSurfaceColor: 28 27 31;
+    --LightOnSurfaceVariantColor: 73 69 78;
+    --LightOutlineColor: 121 116 126;
+    --LightOutlineVariantColor: 196 199 197;
 
-    --DarkPrimaryColor: #ffb3b5;
-    --DarkPrimaryContainerColor: #7d2a30;
-    --DarkSecondaryColor: #ccc2dc;
-    --DarkSecondaryContainerColor: #e8def8;
-    --DarkTertiaryColor: #281800;
-    --DarkErrorColor: #f2b8b5;
-    --DarkErrorContainerColor: #8c1d18;
-    --DarkOnPrimaryColor: #5f121b;
-    --DarkOnPrimaryContainerColor: #ffdadb;
-    --DarkOnSecondaryColor: #332d41;
-    --DarkOnSecondaryContainerColor: #e8def8;
-    --DarkOnTertiaryColor: #fda;
-    --DarkOnErrorColor: #601410;
-    --DarkOnErrorContainerColor: #f9dedc;
+    --DarkPrimaryColor: 255 179 181;
+    --DarkPrimaryContainerColor: 125 42 48;
+    --DarkSecondaryColor: 204 194 220;
+    --DarkSecondaryContainerColor: 232 222 248;
+    --DarkTertiaryColor: 40 24 0;
+    --DarkErrorColor: 242 184 181;
+    --DarkErrorContainerColor: 140 29 24;
+    --DarkOnPrimaryColor: 95 18 27;
+    --DarkOnPrimaryContainerColor: 255 218 219;
+    --DarkOnSecondaryColor: 51 45 65;
+    --DarkOnSecondaryContainerColor: 232 222 248;
+    --DarkOnTertiaryColor: 255 221 170;
+    --DarkOnErrorColor: 96 20 16;
+    --DarkOnErrorContainerColor: 249 222 220;
     /* neutral colors */
-    --DarkSurfaceColor: #141218;
-    --DarkSurfaceVariantColor: #49454f;
-    --DarkSurfaceDimColor: #141218;
-    --DarkSurfaceBrightColor: #3b383e;
-    --DarkSurfaceContainerLowestColor: #0f0d13;
-    --DarkSurfaceContainerLowColor: #1d1b20;
-    --DarkSurfaceContainerColor: #211f26;
-    --DarkSurfaceContainerHightColor: #2b2930;
-    --DarkSurfaceContainerHighestColor: #36343b;
-    --DarkOnSurfaceColor: #e6e1e5;
-    --DarkOnSurfaceVariantColor: #cac4d0;
-    --DarkOutlineColor: #938f99;
-    --DarkOutlineVariantColor: #444746;
+    --DarkSurfaceColor: 20 18 24;
+    --DarkSurfaceVariantColor: 73 69 79;
+    --DarkSurfaceDimColor: 20 18 24;
+    --DarkSurfaceBrightColor: 59 56 62;
+    --DarkSurfaceContainerLowestColor: 15 13 19;
+    --DarkSurfaceContainerLowColor: 29 27 32;
+    --DarkSurfaceContainerColor: 33 31 38;
+    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighestColor: 54 52 59;
+    --DarkOnSurfaceColor: 230 225 229;
+    --DarkOnSurfaceVariantColor: 202 196 208;
+    --DarkOutlineColor: 147 143 153;
+    --DarkOutlineVariantColor: 68 71 70;
 }
 
 .grow {
-    --LightPrimaryColor: #616200;
-    --LightPrimaryContainerColor: #e8e971;
-    --LightSecondaryColor: #625b71;
-    --LightSecondaryContainerColor: #e8def8;
-    --LightTertiaryColor: #bfedd9;
-    --LightErrorColor: #b3261e;
-    --LightErrorContainerColor: #f9dedc;
-    --LightOnPrimaryColor: #ffffff;
-    --LightOnPrimaryContainerColor: #1d1d00;
-    --LightOnSecondaryColor: #ffffff;
-    --LightOnSecondaryContainerColor: #1e192b;
-    --LightOnTertiaryColor: #002117;
-    --LightOnErrorColor: #ffffff;
-    --LightOnErrorContainerColor: #410e0b;
+    --LightPrimaryColor: 97 98 0;
+    --LightPrimaryContainerColor: 232 233 113;
+    --LightSecondaryColor: 98 91 113;
+    --LightSecondaryContainerColor: 232 222 248;
+    --LightTertiaryColor: 191 237 217;
+    --LightErrorColor: 179 38 30;
+    --LightErrorContainerColor: 249 222 220;
+    --LightOnPrimaryColor: 255 255 255;
+    --LightOnPrimaryContainerColor: 29 29 0;
+    --LightOnSecondaryColor: 255 255 255;
+    --LightOnSecondaryContainerColor: 30 25 43;
+    --LightOnTertiaryColor: 0 33 23;
+    --LightOnErrorColor: 255 255 255;
+    --LightOnErrorContainerColor: 65 14 11;
     /* neutral colors */
-    --LightSurfaceColor: #fef7ff;
-    --LightSurfaceVariantColor: #e7e0ec;
-    --LightSurfaceDimColor: #ded8e1;
-    --LightSurfaceBrightColor: #fef7ff;
-    --LightSurfaceContainerLowestColor: #ffffff;
-    --LightSurfaceContainerLowColor: #f7f2fa;
-    --LightSurfaceContainerColor: #f3edf7;
-    --LightSurfaceContainerHightColor: #ece6f0;
-    --LightSurfaceContainerHighestColor: #e6e0e9;
-    --LightOnSurfaceColor: #1c1b1f;
-    --LightOnSurfaceVariantColor: #49454e;
-    --LightOutlineColor: #79747e;
-    --LightOutlineVariantColor: #c4c7c5;
+    --LightSurfaceColor: 254 247 255;
+    --LightSurfaceVariantColor: 231 224 236;
+    --LightSurfaceDimColor: 222 216 225;
+    --LightSurfaceBrightColor: 254 247 255;
+    --LightSurfaceContainerLowestColor: 255 255 255;
+    --LightSurfaceContainerLowColor: 247 242 250;
+    --LightSurfaceContainerColor: 243 237 247;
+    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighestColor: 230 224 233;
+    --LightOnSurfaceColor: 28 27 31;
+    --LightOnSurfaceVariantColor: 73 69 78;
+    --LightOutlineColor: 121 116 126;
+    --LightOutlineVariantColor: 196 199 197;
 
-    --DarkPrimaryColor: #cbcc58;
-    --DarkPrimaryContainerColor: #494a00;
-    --DarkSecondaryColor: #ccc2dc;
-    --DarkSecondaryContainerColor: #e8def8;
-    --DarkTertiaryColor: #002117;
-    --DarkErrorColor: #f2b8b5;
-    --DarkErrorContainerColor: #8c1d18;
-    --DarkOnPrimaryColor: #323200;
-    --DarkOnPrimaryContainerColor: #e8e971;
-    --DarkOnSecondaryColor: #332d41;
-    --DarkOnSecondaryContainerColor: #e8def8;
-    --DarkOnTertiaryColor: #bfedd9;
-    --DarkOnErrorColor: #601410;
-    --DarkOnErrorContainerColor: #f9dedc;
+    --DarkPrimaryColor: 203 204 88;
+    --DarkPrimaryContainerColor: 73 74 0;
+    --DarkSecondaryColor: 204 194 220;
+    --DarkSecondaryContainerColor: 232 222 248;
+    --DarkTertiaryColor: 0 33 23;
+    --DarkErrorColor: 242 184 181;
+    --DarkErrorContainerColor: 140 29 24;
+    --DarkOnPrimaryColor: 50 50 0;
+    --DarkOnPrimaryContainerColor: 232 233 113;
+    --DarkOnSecondaryColor: 51 45 65;
+    --DarkOnSecondaryContainerColor: 232 222 248;
+    --DarkOnTertiaryColor: 191 237 217;
+    --DarkOnErrorColor: 96 20 16;
+    --DarkOnErrorContainerColor: 249 222 220;
     /* neutral colors */
-    --DarkSurfaceColor: #141218;
-    --DarkSurfaceVariantColor: #49454f;
-    --DarkSurfaceDimColor: #141218;
-    --DarkSurfaceBrightColor: #3b383e;
-    --DarkSurfaceContainerLowestColor: #0f0d13;
-    --DarkSurfaceContainerLowColor: #1d1b20;
-    --DarkSurfaceContainerColor: #211f26;
-    --DarkSurfaceContainerHightColor: #2b2930;
-    --DarkSurfaceContainerHighestColor: #36343b;
-    --DarkOnSurfaceColor: #e6e1e5;
-    --DarkOnSurfaceVariantColor: #cac4d0;
-    --DarkOutlineColor: #938f99;
-    --DarkOutlineVariantColor: #444746;
+    --DarkSurfaceColor: 20 18 24;
+    --DarkSurfaceVariantColor: 73 69 79;
+    --DarkSurfaceDimColor: 20 18 24;
+    --DarkSurfaceBrightColor: 59 56 62;
+    --DarkSurfaceContainerLowestColor: 15 13 19;
+    --DarkSurfaceContainerLowColor: 29 27 32;
+    --DarkSurfaceContainerColor: 33 31 38;
+    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighestColor: 54 52 59;
+    --DarkOnSurfaceColor: 230 225 229;
+    --DarkOnSurfaceVariantColor: 202 196 208;
+    --DarkOutlineColor: 147 143 153;
+    --DarkOutlineVariantColor: 68 71 70;
 }
 .purple {
-    --LightPrimaryColor: #6750a4;
-    --LightPrimaryContainerColor: #eaddff;
-    --LightSecondaryColor: #625b71;
-    --LightSecondaryContainerColor: #e8def8;
-    --LightTertiaryColor: #7d5260;
-    --LightTertiaryContainerColor: #ffd8e4;
-    --LightSurfaceColor: #222222;
-    --LightErrorColor: #b3261e;
-    --LightErrorContainerColor: #f9dedc;
-    --LightOnPrimaryColor: #ffffff;
-    --LightOnPrimaryContainerColor: #21005e;
-    --LightOnSecondaryColor: #ffffff;
-    --LightOnSecondaryContainerColor: #1e192b;
-    --LightOnTertiaryColor: #ffffff;
-    --LightOnTertiaryContainerColor: #370b1e;
-    --LightOnErrorColor: #ffffff;
-    --LightOnErrorContainerColor: #410e0b;
+    --LightPrimaryColor: 103 80 164;
+    --LightPrimaryContainerColor: 234 221 255;
+    --LightSecondaryColor: 98 91 113;
+    --LightSecondaryContainerColor: 232 222 248;
+    --LightTertiaryColor: 125 82 96;
+    --LightTertiaryContainerColor: 255 216 228;
+    --LightSurfaceColor: 34 34 34;
+    --LightErrorColor: 179 38 30;
+    --LightErrorContainerColor: 249 222 220;
+    --LightOnPrimaryColor: 255 255 255;
+    --LightOnPrimaryContainerColor: 33 0 94;
+    --LightOnSecondaryColor: 255 255 255;
+    --LightOnSecondaryContainerColor: 30 25 43;
+    --LightOnTertiaryColor: 255 255 255;
+    --LightOnTertiaryContainerColor: 55 11 30;
+    --LightOnErrorColor: 255 255 255;
+    --LightOnErrorContainerColor: 65 14 11;
     /* neutral colors */
-    --LightSurfaceColor: #fef7ff;
-    --LightSurfaceVariantColor: #e7e0ec;
-    --LightSurfaceDimColor: #ded8e1;
-    --LightSurfaceBrightColor: #fef7ff;
-    --LightSurfaceContainerLowestColor: #ffffff;
-    --LightSurfaceContainerLowColor: #f7f2fa;
-    --LightSurfaceContainerColor: #f3edf7;
-    --LightSurfaceContainerHightColor: #ece6f0;
-    --LightSurfaceContainerHighestColor: #e6e0e9;
-    --LightOnSurfaceColor: #1c1b1f;
-    --LightOnSurfaceVariantColor: #49454e;
-    --LightOutlineColor: #79747e;
-    --LightOutlineVariantColor: #c4c7c5;
+    --LightSurfaceColor: 254 247 255;
+    --LightSurfaceVariantColor: 231 224 236;
+    --LightSurfaceDimColor: 222 216 225;
+    --LightSurfaceBrightColor: 254 247 255;
+    --LightSurfaceContainerLowestColor: 255 255 255;
+    --LightSurfaceContainerLowColor: 247 242 250;
+    --LightSurfaceContainerColor: 243 237 247;
+    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighestColor: 230 224 233;
+    --LightOnSurfaceColor: 28 27 31;
+    --LightOnSurfaceVariantColor: 73 69 78;
+    --LightOutlineColor: 121 116 126;
+    --LightOutlineVariantColor: 196 199 197;
 
-    --DarkPrimaryColor: #d0bcff;
-    --DarkPrimaryContainerColor: #4f378b;
-    --DarkSecondaryColor: #ccc2dc;
-    --DarkSecondaryContainerColor: #e8def8;
-    --DarkTertiaryColor: #efb8c8;
-    --DarkTertiaryContainerColor: #633b48;
-    --DarkErrorColor: #f2b8b5;
-    --DarkErrorContainerColor: #8c1d18;
-    --DarkOnPrimaryColor: #371e73;
-    --DarkOnPrimaryContainerColor: #eaddff;
-    --DarkOnSecondaryColor: #332d41;
-    --DarkOnSecondaryContainerColor: #e8def8;
-    --DarkOnTertiaryColor: #492532;
-    --DarkOnTertiaryContainerColor: #ffd8e4;
-    --DarkOnErrorColor: #601410;
-    --DarkOnErrorContainerColor: #f9dedc;
+    --DarkPrimaryColor: 208 188 255;
+    --DarkPrimaryContainerColor: 79 55 139;
+    --DarkSecondaryColor: 204 194 220;
+    --DarkSecondaryContainerColor: 232 222 248;
+    --DarkTertiaryColor: 239 184 200;
+    --DarkTertiaryContainerColor: 99 59 72;
+    --DarkErrorColor: 242 184 181;
+    --DarkErrorContainerColor: 140 29 24;
+    --DarkOnPrimaryColor: 55 30 115;
+    --DarkOnPrimaryContainerColor: 234 221 255;
+    --DarkOnSecondaryColor: 51 45 65;
+    --DarkOnSecondaryContainerColor: 232 222 248;
+    --DarkOnTertiaryColor: 73 37 50;
+    --DarkOnTertiaryContainerColor: 255 216 228;
+    --DarkOnErrorColor: 96 20 16;
+    --DarkOnErrorContainerColor: 249 222 220;
     /* neutral colors */
-    --DarkSurfaceColor: #141218;
-    --DarkSurfaceVariantColor: #49454f;
-    --DarkSurfaceDimColor: #141218;
-    --DarkSurfaceBrightColor: #3b383e;
-    --DarkSurfaceContainerLowestColor: #0f0d13;
-    --DarkSurfaceContainerLowColor: #1d1b20;
-    --DarkSurfaceContainerColor: #211f26;
-    --DarkSurfaceContainerHightColor: #2b2930;
-    --DarkSurfaceContainerHighestColor: #36343b;
-    --DarkOnSurfaceColor: #e6e1e5;
-    --DarkOnSurfaceVariantColor: #cac4d0;
-    --DarkOutlineColor: #938f99;
-    --DarkOutlineVariantColor: #444746;
+    --DarkSurfaceColor: 20 18 24;
+    --DarkSurfaceVariantColor: 73 69 79;
+    --DarkSurfaceDimColor: 20 18 24;
+    --DarkSurfaceBrightColor: 59 56 62;
+    --DarkSurfaceContainerLowestColor: 15 13 19;
+    --DarkSurfaceContainerLowColor: 29 27 32;
+    --DarkSurfaceContainerColor: 33 31 38;
+    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighestColor: 54 52 59;
+    --DarkOnSurfaceColor: 230 225 229;
+    --DarkOnSurfaceVariantColor: 202 196 208;
+    --DarkOutlineColor: 147 143 153;
+    --DarkOutlineVariantColor: 68 71 70;
 }
 
 .system,
@@ -328,6 +328,7 @@
     --surfaceContainerHightColor: var(--LightSurfaceContainerHightColor);
     --surfaceContainerHighestColor: var(--LightSurfaceContainerHighestColor);
     --onSurfaceColor: var(--LightOnSurfaceColor);
+    --onSurfaceRGBColor: var(--LightOnSurfaceRGBColor);
     --onSurfaceVariantColor: var(--LightOnSurfaceVariantColor);
     --outlineColor: var(--LightOutlineColor);
     --outlineVariantColor: var(--LightOutlineVariantColor);
@@ -357,6 +358,7 @@
     --surfaceContainerHightColor: var(--DarkSurfaceContainerHightColor);
     --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
     --onSurfaceColor: var(--DarkOnSurfaceColor);
+    --onSurfaceRGBColor: var(--DarkOnSurfaceRGBColor);
     --onSurfaceVariantColor: var(--DarkOnSurfaceVariantColor);
     --outlineColor: var(--DarkOutlineColor);
     --outlineVariantColor: var(--DarkOutlineVariantColor);
@@ -387,6 +389,7 @@
         --surfaceContainerHightColor: var(--DarkSurfaceContainerHightColor);
         --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
         --onSurfaceColor: var(--DarkOnSurfaceColor);
+        --onSurfaceRGBColor: var(--DarkOnSurfaceRGBColor);
         --onSurfaceVariantColor: var(--DarkOnSurfaceVariantColor);
         --outlineColor: var(--DarkOutlineColor);
         --outlineVariantColor: var(--DarkOutlineVariantColor);