@yakad/ui 1.2.55-beta → 1.2.56-s-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.56s-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));
 }