@rovula/ui 0.1.4 → 0.1.6

package/dist/esm/types/components/Text/Text.d.ts

@@ -1,6 +1,30 @@
 import React from "react";
 export type TextProps = {
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "subtitle4" | "subtitle5" | "subtitle6"
+    /**
+     * @deprecated Use subtitle1 instead.
+     */
+     | "subtitile1"
+    /**
+     * @deprecated Use subtitle2 instead.
+     */
+     | "subtitile2"
+    /**
+     * @deprecated Use subtitle3 instead.
+     */
+     | "subtitile3"
+    /**
+     * @deprecated Use subtitle4 instead.
+     */
+     | "subtitile4"
+    /**
+     * @deprecated Use subtitle5 instead.
+     */
+     | "subtitile5"
+    /**
+     * @deprecated Use subtitle6 instead.
+     */
+     | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React.ReactNode;
     className?: string;

package/dist/esm/types/components/Text/Text.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "subtitle4" | "subtitle5" | "subtitle6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error" | undefined;
         children?: React.ReactNode;
         className?: string | undefined;

package/dist/esm/types/utils/colors.d.ts

@@ -225,7 +225,7 @@ export declare const THEME_COLOR_KEYS: {
     readonly "base-workspace-stroke": "--base-color-workspace-stroke";
     readonly "base-guideline-stroke": "--base-color-guideline-stroke";
     readonly "base-popup": "--base-color-popup";
-    readonly "base-popup-highlight": "--base-color-popup-hightlight";
+    readonly "base-popup-highlight": "--base-color-popup-highlight";
     readonly "base-popup-curtain": "--base-color-popup-curtain";
     readonly "base-popup-foreground": "--base-color-popup-foreground";
     readonly "common-white": "--common-white";

package/dist/index.d.ts

@@ -277,7 +277,31 @@ declare const TextArea: React__default.ForwardRefExoticComponent<{
 } & Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 
 type TextProps = {
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "subtitle4" | "subtitle5" | "subtitle6"
+    /**
+     * @deprecated Use subtitle1 instead.
+     */
+     | "subtitile1"
+    /**
+     * @deprecated Use subtitle2 instead.
+     */
+     | "subtitile2"
+    /**
+     * @deprecated Use subtitle3 instead.
+     */
+     | "subtitile3"
+    /**
+     * @deprecated Use subtitle4 instead.
+     */
+     | "subtitile4"
+    /**
+     * @deprecated Use subtitle5 instead.
+     */
+     | "subtitile5"
+    /**
+     * @deprecated Use subtitle6 instead.
+     */
+     | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React__default.ReactNode;
     className?: string;
@@ -1313,7 +1337,7 @@ declare const THEME_COLOR_KEYS: {
     readonly "base-workspace-stroke": "--base-color-workspace-stroke";
     readonly "base-guideline-stroke": "--base-color-guideline-stroke";
     readonly "base-popup": "--base-color-popup";
-    readonly "base-popup-highlight": "--base-color-popup-hightlight";
+    readonly "base-popup-highlight": "--base-color-popup-highlight";
     readonly "base-popup-curtain": "--base-color-popup-curtain";
     readonly "base-popup-foreground": "--base-color-popup-foreground";
     readonly "common-white": "--common-white";

package/dist/src/theme/global.css

@@ -232,7 +232,7 @@
   --base-color-workspace-stroke: #e2e2e2;
   --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
-  --base-color-popup-hightlight: #343638;
+  --base-color-popup-highlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
   --common-white: #ffffff;
   --common-black: #000000;
@@ -1136,36 +1136,36 @@
   --brand-columbia-blue-xspector: #adcad6;
   --brand-columbia-blue-report-xspector-light-mode: #adcad6;
   --brand-columbia-blue-skyller: #0891b2;
-  --brand-backgroud-xspector: #1e3249;
-  --brand-backgroud-report-xspector-light-mode: #1e3249;
-  --brand-backgroud-skyller: #60a5fa;
+  --brand-background-xspector: #1e3249;
+  --brand-background-report-xspector-light-mode: #1e3249;
+  --brand-background-skyller: #60a5fa;
   --brand-lemon-glacier-xspector: #f5ff00;
   --brand-lemon-glacier-report-xspector-light-mode: #f5ff00;
   --brand-lemon-glacier-skyller: #fde68a;
   --text-black-xspector: #000000;
   --text-black-report-xspector-light-mode: #000000;
   --text-black-skyller: #000000;
-  --text-dark-xspector: #212b36;
-  --text-dark-report-xspector-light-mode: #18283a;
-  --text-dark-skyller: #a3a3a3;
-  --text-medium-xspector: #637381;
-  --text-medium-report-xspector-light-mode: #4b5b6d;
-  --text-medium-skyller: #737373;
-  --text-light-xspector: #919eab;
-  --text-light-report-xspector-light-mode: #8e98a4;
-  --text-light-skyller: #171717;
-  --text-grey-dark-xspector: #7e7e7e;
-  --text-grey-dark-report-xspector-light-mode: #4f4f4f;
-  --text-grey-dark-skyller: #a3a3a3;
-  --text-grey-medium-xspector: #aaaaaa;
-  --text-grey-medium-report-xspector-light-mode: #7e7e7e;
-  --text-grey-medium-skyller: #737373;
-  --text-grey-light-xspector: #dfe3e8;
-  --text-grey-light-report-xspector-light-mode: #9e9e9e;
-  --text-grey-light-skyller: #171717;
-  --text-white-xspector: #ffffff;
-  --text-white-report-xspector-light-mode: #7e7e7e;
-  --text-white-skyller: #171717;
+  --text-contrast-low-xspector: #212b36;
+  --text-contrast-low-report-xspector-light-mode: #18283a;
+  --text-contrast-low-skyller: #a3a3a3;
+  --text-contrast-medium-xspector: #637381;
+  --text-contrast-medium-report-xspector-light-mode: #4b5b6d;
+  --text-contrast-medium-skyller: #737373;
+  --text-contrast-high-xspector: #919eab;
+  --text-contrast-high-report-xspector-light-mode: #8e98a4;
+  --text-contrast-high-skyller: #171717;
+  --text-g-contrast-low-xspector: #7e7e7e;
+  --text-g-contrast-low-report-xspector-light-mode: #4f4f4f;
+  --text-g-contrast-low-skyller: #a3a3a3;
+  --text-g-contrast-medium-xspector: #aaaaaa;
+  --text-g-contrast-medium-report-xspector-light-mode: #7e7e7e;
+  --text-g-contrast-medium-skyller: #737373;
+  --text-g-contrast-high-xspector: #dfe3e8;
+  --text-g-contrast-high-report-xspector-light-mode: #9e9e9e;
+  --text-g-contrast-high-skyller: #171717;
+  --text-contrast-max-xspector: #ffffff;
+  --text-contrast-max-report-xspector-light-mode: #4f4f4f;
+  --text-contrast-max-skyller: #171717;
   --state-primary-default-xspector: #b1a400;
   --state-primary-default-report-xspector-light-mode: #1e3249;
   --state-primary-default-skyller: #2563eb;
@@ -1226,36 +1226,36 @@
   --state-secondary-text-pressed-xspector: #c5c5c5;
   --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
   --state-secondary-text-pressed-skyller: #1e40af;
-  --state-tertiery-default-xspector: #8aa2ab;
-  --state-tertiery-default-report-xspector-light-mode: #4f4f4f;
-  --state-tertiery-default-skyller: #0891b2;
-  --state-tertiery-hover-xspector: #adcad6;
-  --state-tertiery-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiery-hover-skyller: #52b2c9;
-  --state-tertiery-stroke-xspector: rgba(138 162 171 / 0.48);
-  --state-tertiery-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
-  --state-tertiery-stroke-skyller: rgba(8 145 178 / 0.48);
-  --state-tertiery-hover-bg-xspector: rgba(173 202 214 / 0.08);
-  --state-tertiery-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
-  --state-tertiery-hover-bg-skyller: rgba(82 178 201 / 0.08);
-  --state-tertiery-pressed-xspector: #57656b;
-  --state-tertiery-pressed-report-xspector-light-mode: #b1b1b1;
-  --state-tertiery-pressed-skyller: #06667d;
-  --state-tertiery-active-xspector: #adcad6;
-  --state-tertiery-active-report-xspector-light-mode: #6f6f6f;
-  --state-tertiery-active-skyller: #044959;
-  --state-tertiery-text-solid-xspector: #212b36;
-  --state-tertiery-text-solid-report-xspector-light-mode: #ffffff;
-  --state-tertiery-text-solid-skyller: #ffffff;
-  --state-tertiery-text-outline-xspector: #8aa2ab;
-  --state-tertiery-text-outline-report-xspector-light-mode: #4f4f4f;
-  --state-tertiery-text-outline-skyller: #0891b2;
-  --state-tertiery-text-hover-xspector: #adcad6;
-  --state-tertiery-text-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiery-text-hover-skyller: #52b2c9;
-  --state-tertiery-text-pressed-xspector: #57656b;
-  --state-tertiery-text-pressed-report-xspector-light-mode: #b1b1b1;
-  --state-tertiery-text-pressed-skyller: #06667d;
+  --state-tertiary-default-xspector: #8aa2ab;
+  --state-tertiary-default-report-xspector-light-mode: #4f4f4f;
+  --state-tertiary-default-skyller: #0891b2;
+  --state-tertiary-hover-xspector: #adcad6;
+  --state-tertiary-hover-report-xspector-light-mode: #6f6f6f;
+  --state-tertiary-hover-skyller: #52b2c9;
+  --state-tertiary-stroke-xspector: rgba(138 162 171 / 0.48);
+  --state-tertiary-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
+  --state-tertiary-stroke-skyller: rgba(8 145 178 / 0.48);
+  --state-tertiary-hover-bg-xspector: rgba(173 202 214 / 0.08);
+  --state-tertiary-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
+  --state-tertiary-hover-bg-skyller: rgba(82 178 201 / 0.08);
+  --state-tertiary-pressed-xspector: #57656b;
+  --state-tertiary-pressed-report-xspector-light-mode: #b1b1b1;
+  --state-tertiary-pressed-skyller: #06667d;
+  --state-tertiary-active-xspector: #adcad6;
+  --state-tertiary-active-report-xspector-light-mode: #6f6f6f;
+  --state-tertiary-active-skyller: #044959;
+  --state-tertiary-text-solid-xspector: #212b36;
+  --state-tertiary-text-solid-report-xspector-light-mode: #ffffff;
+  --state-tertiary-text-solid-skyller: #ffffff;
+  --state-tertiary-text-outline-xspector: #8aa2ab;
+  --state-tertiary-text-outline-report-xspector-light-mode: #4f4f4f;
+  --state-tertiary-text-outline-skyller: #0891b2;
+  --state-tertiary-text-hover-xspector: #adcad6;
+  --state-tertiary-text-hover-report-xspector-light-mode: #6f6f6f;
+  --state-tertiary-text-hover-skyller: #52b2c9;
+  --state-tertiary-text-pressed-xspector: #57656b;
+  --state-tertiary-text-pressed-report-xspector-light-mode: #b1b1b1;
+  --state-tertiary-text-pressed-skyller: #06667d;
   --state-info-default-xspector: #1b7df5;
   --state-info-default-report-xspector-light-mode: #1b7df5;
   --state-info-default-skyller: #2563eb;
@@ -1940,16 +1940,16 @@
   --base-modal-modal-xspector: #2d2e30;
   --base-modal-modal-report-xspector-light-mode: #ffffff;
   --base-modal-modal-skyller: #ffffff;
-  --base-modal-modal-hightlight-xspector: #343638;
-  --base-modal-modal-hightlight-report-xspector-light-mode: #f5f5f5;
-  --base-modal-modal-hightlight-skyller: #f5f5f5;
+  --base-modal-modal-highlight-xspector: #343638;
+  --base-modal-modal-highlight-report-xspector-light-mode: #f5f5f5;
+  --base-modal-modal-highlight-skyller: #f5f5f5;
   --base-modal-modal-curtain-xspector: rgba(11 10 10 / 0.64);
   --base-modal-modal-curtain-report-xspector-light-mode: rgba(0 0 0 / 0.64);
   --base-modal-modal-curtain-skyller: rgba(0 0 0 / 0.64);
-  --base-bg-bg1-xspector: #202427;
+  --base-bg-bg1-xspector: #030c15;
   --base-bg-bg1-report-xspector-light-mode: #ffffff;
-  --base-bg-bg1-skyller: #ffffff;
-  --base-bg-bg2-xspector: #282c31;
+  --base-bg-bg1-skyller: #2563eb;
+  --base-bg-bg2-xspector: #051627;
   --base-bg-bg2-report-xspector-light-mode: #f5f5f5;
   --base-bg-bg2-skyller: #fafafa;
   --base-bg-bg3-xspector: #000000;
@@ -2138,9 +2138,24 @@
   --others-35-xspector: #56d364;
   --others-35-report-xspector-light-mode: #56d364;
   --others-35-skyller: #56d364;
-  --brand-new-blue-bg-xspector: #091d33;
-  --brand-new-blue-bg-report-xspector-light-mode: #091d33;
-  --brand-new-blue-bg-skyller: #ffffff;
+  --page-bg-main-bg-xspector: #091d33;
+  --page-bg-main-bg-report-xspector-light-mode: #ffffff;
+  --page-bg-main-bg-skyller: #ffffff;
+  --page-bg-circle-top-g-in-xspector: #003d6c;
+  --page-bg-circle-top-g-in-report-xspector-light-mode: #adcad6;
+  --page-bg-circle-top-g-in-skyller: #cfe4fd;
+  --page-bg-circle-top-g-out-xspector: rgba(9 29 51 / 0);
+  --page-bg-circle-top-g-out-report-xspector-light-mode: rgba(255 255 255 / 0);
+  --page-bg-circle-top-g-out-skyller: rgba(255 255 255 / 0);
+  --page-bg-circle-bottom-g-in-xspector: #003d6c;
+  --page-bg-circle-bottom-g-in-report-xspector-light-mode: #adcad6;
+  --page-bg-circle-bottom-g-in-skyller: #bed0f9;
+  --page-bg-circle-bottom-g-out-xspector: rgba(9 29 51 / 0);
+  --page-bg-circle-bottom-g-out-report-xspector-light-mode: rgba(255 255 255 / 0);
+  --page-bg-circle-bottom-g-out-skyller: rgba(255 255 255 / 0);
+  --text-white-xspector: #ffffff;
+  --text-white-report-xspector-light-mode: #ffffff;
+  --text-white-skyller: #ffffff;
   /* BUTTON RADIUS */
   --button-l-round: 8px;
   --button-l-rem-round: 0.5rem;
@@ -2334,17 +2349,17 @@
   --state-color-secondary-text-outline: var(--state-secondary-text-outline-xspector);
   --state-color-secondary-text-hover: var(--state-secondary-text-hover-xspector);
   --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-xspector);
-  /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
-  --state-color-tertiary-default: var(--state-tertiery-default-xspector);
-  --state-color-tertiary-hover: var(--state-tertiery-hover-xspector);
-  --state-color-tertiary-stroke: var(--state-tertiery-stroke-xspector);
-  --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-xspector);
-  --state-color-tertiary-pressed: var(--state-tertiery-pressed-xspector);
-  --state-color-tertiary-active: var(--state-tertiery-active-xspector);
-  --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-xspector);
-  --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-xspector);
-  --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-xspector);
-  --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-xspector);
+  /* Tertiary */
+  --state-color-tertiary-default: var(--state-tertiary-default-xspector);
+  --state-color-tertiary-hover: var(--state-tertiary-hover-xspector);
+  --state-color-tertiary-stroke: var(--state-tertiary-stroke-xspector);
+  --state-color-tertiary-hover-bg: var(--state-tertiary-hover-bg-xspector);
+  --state-color-tertiary-pressed: var(--state-tertiary-pressed-xspector);
+  --state-color-tertiary-active: var(--state-tertiary-active-xspector);
+  --state-color-tertiary-text-solid: var(--state-tertiary-text-solid-xspector);
+  --state-color-tertiary-text-outline: var(--state-tertiary-text-outline-xspector);
+  --state-color-tertiary-text-hover: var(--state-tertiary-text-hover-xspector);
+  --state-color-tertiary-text-pressed: var(--state-tertiary-text-pressed-xspector);
   /* Info */
   --state-color-info-default: var(--state-info-default-xspector);
   --state-color-info-hover: var(--state-info-hover-xspector);
@@ -2433,7 +2448,7 @@
   --base-color-workspace-stroke: var(--base-bg-stroke1-xspector);
   --base-color-guideline-stroke: var(--base-bg-stroke2-xspector);
   --base-color-popup: var(--base-modal-modal-xspector);
-  --base-color-popup-hightlight: var(--base-modal-modal-hightlight-xspector);
+  --base-color-popup-highlight: var(--base-modal-modal-highlight-xspector);
   --base-color-popup-curtain: var(--base-modal-modal-curtain-xspector);
   --common-white: var(--common-white-xspector);
   --common-black: var(--common-black-xspector);
@@ -2833,17 +2848,17 @@
   --state-color-secondary-text-outline: var(--state-secondary-text-outline-skyller);
   --state-color-secondary-text-hover: var(--state-secondary-text-hover-skyller);
   --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-skyller);
-  /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
-  --state-color-tertiary-default: var(--state-tertiery-default-skyller);
-  --state-color-tertiary-hover: var(--state-tertiery-hover-skyller);
-  --state-color-tertiary-stroke: var(--state-tertiery-stroke-skyller);
-  --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-skyller);
-  --state-color-tertiary-pressed: var(--state-tertiery-pressed-skyller);
-  --state-color-tertiary-active: var(--state-tertiery-active-skyller);
-  --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-skyller);
-  --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-skyller);
-  --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-skyller);
-  --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-skyller);
+  /* Tertiary */
+  --state-color-tertiary-default: var(--state-tertiary-default-skyller);
+  --state-color-tertiary-hover: var(--state-tertiary-hover-skyller);
+  --state-color-tertiary-stroke: var(--state-tertiary-stroke-skyller);
+  --state-color-tertiary-hover-bg: var(--state-tertiary-hover-bg-skyller);
+  --state-color-tertiary-pressed: var(--state-tertiary-pressed-skyller);
+  --state-color-tertiary-active: var(--state-tertiary-active-skyller);
+  --state-color-tertiary-text-solid: var(--state-tertiary-text-solid-skyller);
+  --state-color-tertiary-text-outline: var(--state-tertiary-text-outline-skyller);
+  --state-color-tertiary-text-hover: var(--state-tertiary-text-hover-skyller);
+  --state-color-tertiary-text-pressed: var(--state-tertiary-text-pressed-skyller);
   /* Info */
   --state-color-info-default: var(--state-info-default-skyller);
   --state-color-info-hover: var(--state-info-hover-skyller);
@@ -2932,7 +2947,7 @@
   --base-color-workspace-stroke: var(--base-bg-stroke1-skyller);
   --base-color-guideline-stroke: var(--base-bg-stroke2-skyller);
   --base-color-popup: var(--base-modal-modal-skyller);
-  --base-color-popup-hightlight: var(--base-modal-modal-hightlight-skyller);
+  --base-color-popup-highlight: var(--base-modal-modal-highlight-skyller);
   --base-color-popup-curtain: var(--base-modal-modal-curtain-skyller);
   --common-white: var(--common-white-skyller);
   --common-black: var(--common-black-skyller);
@@ -3688,7 +3703,7 @@ video {
 
 body {
   /* @apply bg-background text-foreground; */
-  /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
+  /* @apply bg-[var(--background)] text-[var(--foreground)]; */
 }
 
 /* hide input number arrow */
@@ -5340,7 +5355,7 @@ input[type=number] {
 
 .bg-base-popup-highlight {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--base-color-popup-highlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
 .bg-base-stroke {
@@ -7412,37 +7427,37 @@ input[type=number] {
   font-weight: var(--small9-weight, 400);
 }
 
-.text-subtitile1 {
+.text-subtitle1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
   font-weight: var(--subtitle1-weight, 400);
 }
 
-.text-subtitile2 {
+.text-subtitle2 {
   font-size: var(--subtitle2-size, 16px);
   line-height: var(--subtitle2-line-height, 24px);
   font-weight: var(--subtitle2-weight, 500);
 }
 
-.text-subtitile3 {
+.text-subtitle3 {
   font-size: var(--subtitle3-size, 16px);
   line-height: var(--subtitle3-line-height, 24px);
   font-weight: var(--subtitle3-weight, 600);
 }
 
-.text-subtitile4 {
+.text-subtitle4 {
   font-size: var(--subtitle4-size, 14px);
   line-height: var(--subtitle4-line-height, 22px);
   font-weight: var(--subtitle4-weight, 400);
 }
 
-.text-subtitile5 {
+.text-subtitle5 {
   font-size: var(--subtitle5-size, 14px);
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
 }
 
-.text-subtitile6 {
+.text-subtitle6 {
   font-size: var(--subtitle6-size, 14px);
   line-height: var(--subtitle6-line-height, 22px);
   font-weight: var(--subtitle6-weight, 600);
@@ -8134,6 +8149,42 @@ input[type=number] {
   font-weight: var(--h6-weight, 700);
 }
 
+.typography-subtitle1 {
+  font-size: var(--subtitle1-size, 16px);
+  line-height: var(--subtitle1-line-height, 24px);
+  font-weight: var(--subtitle1-weight, 400);
+}
+
+.typography-subtitle2 {
+  font-size: var(--subtitle2-size, 16px);
+  line-height: var(--subtitle2-line-height, 24px);
+  font-weight: var(--subtitle2-weight, 500);
+}
+
+.typography-subtitle3 {
+  font-size: var(--subtitle3-size, 16px);
+  line-height: var(--subtitle3-line-height, 24px);
+  font-weight: var(--subtitle3-weight, 600);
+}
+
+.typography-subtitle4 {
+  font-size: var(--subtitle4-size, 14px);
+  line-height: var(--subtitle4-line-height, 22px);
+  font-weight: var(--subtitle4-weight, 400);
+}
+
+.typography-subtitle5 {
+  font-size: var(--subtitle5-size, 14px);
+  line-height: var(--subtitle5-line-height, 22px);
+  font-weight: var(--subtitle5-weight, 500);
+}
+
+.typography-subtitle6 {
+  font-size: var(--subtitle6-size, 14px);
+  line-height: var(--subtitle6-line-height, 22px);
+  font-weight: var(--subtitle6-weight, 600);
+}
+
 .typography-subtitile1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
@@ -8539,6 +8590,16 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.hover\:border-l-input-active-stroke:hover {
+  --tw-border-opacity: 1;
+  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.hover\:border-r-input-active-stroke:hover {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover {
   background-color: var(--dropdown-menu-hover-bg);
 }
@@ -8819,8 +8880,8 @@ 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\:fill-input-filled-text:hover {
+  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
 
 .hover\:stroke-input-filled-text:hover {
@@ -10143,25 +10204,25 @@ input[type=number] {
   background-color: transparent;
 }
 
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
   font-weight: var(--subtitle1-weight, 400);
 }
 
-.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
   font-weight: var(--subtitle1-weight, 400);
 }
 
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle4 {
   font-size: var(--subtitle4-size, 14px);
   line-height: var(--subtitle4-line-height, 22px);
   font-weight: var(--subtitle4-weight, 400);
 }
 
-.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle4 {
   font-size: var(--subtitle4-size, 14px);
   line-height: var(--subtitle4-line-height, 22px);
   font-weight: var(--subtitle4-weight, 400);
@@ -10849,7 +10910,7 @@ input[type=number] {
   transition-property: none;
 }
 
-.data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked'] {
+.data-\[state\=\'checked\'\]\:typography-subtitle5[data-state='checked'] {
   font-size: var(--subtitle5-size, 14px);
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
@@ -11077,6 +11138,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.hover\:\[\&_svg\]\:text-input-filled-text svg:hover {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-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);

package/dist/utils/colors.js

@@ -243,7 +243,7 @@ export const THEME_COLOR_KEYS = {
     "base-workspace-stroke": "--base-color-workspace-stroke",
     "base-guideline-stroke": "--base-color-guideline-stroke",
     "base-popup": "--base-color-popup",
-    "base-popup-highlight": "--base-color-popup-hightlight",
+    "base-popup-highlight": "--base-color-popup-highlight",
     "base-popup-curtain": "--base-color-popup-curtain",
     "base-popup-foreground": "--base-color-popup-foreground",
     /* ----- Common ----- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Avatar/Avatar.styles.ts

@@ -2,12 +2,12 @@ import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
   [
-    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitile2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitle2 truncate",
   ],
   {
     variants: {
       size: {
-        xxs: "w-[24px] h-[24px] typography-subtitile3",
+        xxs: "w-[24px] h-[24px] typography-subtitle3",
         xs: "w-[32px] h-[32px]",
         sm: "w-[40px] h-[40px]",
         md: "w-[48px] h-[48px]",

package/src/components/Button/Buttons.stories.tsx

@@ -173,13 +173,13 @@ export const ShapePreview = {
   render: (args) => (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-2">
-        <span className="w-20 typography-subtitile4">Round</span>
+        <span className="w-20 typography-subtitle4">Round</span>
         <Button {...args} shape="round" size="lg" title="Large" />
         <Button {...args} shape="round" size="md" title="Medium" />
         <Button {...args} shape="round" size="sm" title="Small" />
       </div>
       <div className="flex items-center gap-2">
-        <span className="w-20 typography-subtitile4">Capsule</span>
+        <span className="w-20 typography-subtitle4">Capsule</span>
         <Button {...args} shape="capsule" size="lg" title="Large" />
         <Button {...args} shape="capsule" size="md" title="Medium" />
         <Button {...args} shape="capsule" size="sm" title="Small" />

package/src/components/Calendar/Calendar.tsx

@@ -28,7 +28,7 @@ function Calendar({
       classNames={{
         ...defaultClassNames,
         day_button: cn(defaultClassNames.day_button, "size-9"),
-        day: "typography-subtitile1 ",
+        day: "typography-subtitle1 ",
         today:
           "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid",
         selected: "bg-primary !text-primary-foreground rounded-full ",

package/src/components/Dropdown/Dropdown.tsx

@@ -228,12 +228,12 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
                   label: option.label,
                   handleOnClick: () => handleOptionClick(option),
                   className: cn(
-                    "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors",
+                    "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors",
                     "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
                     "active:opacity-75",
                     "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]",
                     {
-                      "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitile5":
+                      "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5":
                         selectedOption?.value === option.value,
                     },
                     optionItemClassName