@rovula/ui 0.1.0 → 0.1.2

package/dist/src/theme/global.css

@@ -1070,6 +1070,14 @@
   --navbar-text-color: var(--primary-foreground);
   --navbar-border-color: var(--primary-foreground);
   --navbar-gap: 16px;
+  --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  /* Footer */
+  --footer-height: 58px;
+  --footer-height-simple: 48px;
+  --footer-bg-color: var(--state-color-primary-default);
+  --footer-text-color: var(--primary-foreground);
+  --footer-border-color: var(--primary-foreground);
+  --footer-gap: 16px;
   /* ------------------------------------------------------------------ */
   /* DropdownMenu Component Tokens                                      */
   /* ------------------------------------------------------------------ */
@@ -3062,30 +3070,30 @@
   /* ------------------------------------------------------------------ */
   /* Typography                                                          */
   /* ------------------------------------------------------------------ */
-  --h1-family: "Poppins";
-  --h2-family: "Poppins";
-  --h3-family: "Poppins";
-  --h4-family: "Poppins";
-  --h5-family: "Poppins";
-  --h6-family: "Poppins";
-  --subtitle2-family: "Poppins";
-  --subtitle3-family: "Poppins";
-  --subtitle4-family: "Poppins";
-  --subtitle5-family: "Poppins";
-  --subtitle6-family: "Poppins";
-  --body1-family: "Poppins";
-  --body2-family: "Poppins";
-  --body3-family: "Poppins";
-  --body4-family: "Poppins";
-  --small1-family: "Poppins";
-  --small2-family: "Poppins";
-  --small3-family: "Poppins";
-  --small4-family: "Poppins";
-  --small5-family: "Poppins";
-  --label-label1-family: "Poppins";
-  --label-label2-family: "Poppins";
-  --button-button-l-family: "Poppins";
-  --button-button-ms-family: "Poppins";
+  --h1-family: "Montserrat";
+  --h2-family: "Montserrat";
+  --h3-family: "Montserrat";
+  --h4-family: "Montserrat";
+  --h5-family: "Montserrat";
+  --h6-family: "Montserrat";
+  --subtitle2-family: "Montserrat";
+  --subtitle3-family: "Montserrat";
+  --subtitle4-family: "Montserrat";
+  --subtitle5-family: "Montserrat";
+  --subtitle6-family: "Montserrat";
+  --body1-family: "Montserrat";
+  --body2-family: "Montserrat";
+  --body3-family: "Montserrat";
+  --body4-family: "Montserrat";
+  --small1-family: "Montserrat";
+  --small2-family: "Montserrat";
+  --small3-family: "Montserrat";
+  --small4-family: "Montserrat";
+  --small5-family: "Montserrat";
+  --label-label1-family: "Montserrat";
+  --label-label2-family: "Montserrat";
+  --button-button-l-family: "Montserrat";
+  --button-button-ms-family: "Montserrat";
   /* --------------------------------------------------------------------------------- */
   /* Action Button Component Tokens                                                    */
   /* --------------------------------------------------------------------------------- */
@@ -3759,6 +3767,10 @@ input[type=number] {
   pointer-events: auto;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .static {
   position: static;
 }
@@ -3880,6 +3892,14 @@ input[type=number] {
   top: 100%;
 }
 
+.-z-10 {
+  z-index: -10;
+}
+
+.-z-\[5\] {
+  z-index: -5;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -3949,6 +3969,10 @@ input[type=number] {
   margin-bottom: 0.25rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -4155,6 +4179,10 @@ input[type=number] {
   height: 15rem;
 }
 
+.h-\[200vh\] {
+  height: 200vh;
+}
+
 .h-\[24px\] {
   height: 24px;
 }
@@ -4187,6 +4215,14 @@ input[type=number] {
   height: 64px;
 }
 
+.h-\[var\(--footer-height\)\] {
+  height: var(--footer-height);
+}
+
+.h-\[var\(--footer-height-simple\)\] {
+  height: var(--footer-height-simple);
+}
+
 .h-\[var\(--navbar-height\)\] {
   height: var(--navbar-height);
 }
@@ -4212,6 +4248,10 @@ input[type=number] {
   max-height: 15rem;
 }
 
+.max-h-\[80vh\] {
+  max-height: 80vh;
+}
+
 .max-h-screen {
   max-height: 100vh;
 }
@@ -4220,6 +4260,14 @@ input[type=number] {
   min-height: 2.5rem;
 }
 
+.min-h-\[14px\] {
+  min-height: 14px;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -4252,6 +4300,10 @@ input[type=number] {
   width: 1.5rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -4473,6 +4525,10 @@ input[type=number] {
   grid-template-columns: repeat(9, minmax(0, 1fr));
 }
 
+.grid-cols-\[repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -4549,10 +4605,19 @@ input[type=number] {
   gap: 1.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-\[2px\] {
   gap: 2px;
 }
 
+.gap-x-\[var\(--footer-gap\)\] {
+  -moz-column-gap: var(--footer-gap);
+       column-gap: var(--footer-gap);
+}
+
 .gap-x-\[var\(--navbar-gap\)\] {
   -moz-column-gap: var(--navbar-gap);
        column-gap: var(--navbar-gap);
@@ -4750,6 +4815,10 @@ input[type=number] {
   border-top-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -5026,6 +5095,10 @@ input[type=number] {
   border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-t-\[var\(--footer-border-color\)\] {
+  border-top-color: var(--footer-border-color);
+}
+
 .border-t-secondary {
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5039,6 +5112,10 @@ input[type=number] {
   background-color: rgb(var(--navbar-bg-color));
 }
 
+.bg-\[var\(--base-color-popup\)\] {
+  background-color: var(--base-color-popup);
+}
+
 .bg-\[var\(--dropdown-menu-default-bg\)\] {
   background-color: var(--dropdown-menu-default-bg);
 }
@@ -5051,6 +5128,10 @@ input[type=number] {
   background-color: var(--dropdown-menu-seperator-bg);
 }
 
+.bg-\[var\(--footer-bg-color\)\] {
+  background-color: var(--footer-bg-color);
+}
+
 .bg-action-button-icon-active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6727,6 +6808,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }
 
+.fill-none {
+  fill: none;
+}
+
 .fill-primary {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -6743,14 +6828,30 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }
 
+.stroke-current {
+  stroke: currentColor;
+}
+
 .stroke-input-default-stroke {
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
 
+.stroke-input-default-text {
+  stroke: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+}
+
 .stroke-input-disable-stroke {
   stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }
 
+.stroke-input-error {
+  stroke: color-mix(in srgb, var(--input-color-error) calc(100% * 1), transparent);
+}
+
+.stroke-input-filled-text {
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
+
 .stroke-primary-default {
   stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -7004,6 +7105,10 @@ input[type=number] {
   vertical-align: middle;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .font-poppins {
   font-family: Poppins, sans-serif;
 }
@@ -7255,6 +7360,10 @@ input[type=number] {
   color: var(--dropdown-menu-selected-text);
 }
 
+.text-\[var\(--footer-text-color\)\] {
+  color: var(--footer-text-color);
+}
+
 .text-\[var\(--loading-process-color\)\] {
   color: var(--loading-process-color);
 }
@@ -7638,6 +7747,11 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[var\(--navbar-shadow-scrolled\)\] {
+  --tw-shadow-color: var(--navbar-shadow-scrolled);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -7727,6 +7841,12 @@ input[type=number] {
   transition-duration: 150ms;
 }
 
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -8266,6 +8386,11 @@ input[type=number] {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-input-active-stroke\/10:hover {
   background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
 }
@@ -8397,6 +8522,14 @@ input[type=number] {
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
 
+.hover\:stroke-input-active-stroke:hover {
+  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+}
+
+.hover\:stroke-input-filled-text:hover {
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
+
 .hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover {
   color: var(--dropdown-menu-hover-text);
 }
@@ -8565,6 +8698,11 @@ input[type=number] {
   --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 
+.hover\:ring-input-error:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
+
 .hover\:placeholder\:text-input-disable-text:hover::-moz-placeholder {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -9058,6 +9196,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
 
+.active\:stroke-input-filled-text:active {
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
+
 .active\:text-action-button-icon-active-pressed:active {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-pressed-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -9804,6 +9946,11 @@ input[type=number] {
   stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
 }
 
+.peer:focus ~ .peer-focus\:text-input-default-text {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .peer:focus ~ .peer-focus\:text-input-filled-text {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -9821,6 +9968,10 @@ input[type=number] {
   font-weight: var(--label-label2-weight, 400);
 }
 
+.peer:active ~ .peer-active\:fill-input-filled-text {
+  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
+
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -10531,6 +10682,31 @@ input[type=number] {
   height: 32px;
 }
 
+.\[\&_svg\]\:text-input-default-text svg {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
+.peer:hover ~ .peer-hover\:\[\&_svg\]\:text-input-filled-text svg {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
+.peer:focus ~ .peer-focus\:\[\&_svg\]\:text-input-filled-text svg {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
+.peer:active ~ .peer-active\:\[\&_svg\]\:text-input-filled-text svg {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
+.peer:disabled ~ .peer-disabled\:\[\&_svg\]\:text-input-disable-stroke svg {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;
 }