@rovula/ui 0.1.4 → 0.1.6

package/src/theme/plugins/utilities/typography.js

@@ -1,6 +1,21 @@
 const plugin = require("tailwindcss/plugin");
 
+const deprecated = {
+  "typography-subtitile1": "typography-subtitle1",
+  "typography-subtitile2": "typography-subtitle2",
+  "typography-subtitile3": "typography-subtitle3",
+  "typography-subtitile4": "typography-subtitle4",
+  "typography-subtitile5": "typography-subtitle5",
+  "typography-subtitile6": "typography-subtitle6",
+};
+
 module.exports = plugin(function ({ addUtilities }) {
+  Object.entries(deprecated).forEach(([oldClass, newClass]) => {
+    console.warn(
+      `[Rovula UI] "${oldClass}" is deprecated. Use "${newClass}" instead.`,
+    );
+  });
+
   addUtilities({
     ".typography-h1": {
       "@apply text-h1": {},
@@ -20,23 +35,42 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-h6": {
       "@apply text-h6": {},
     },
+    ".typography-subtitle1": {
+      "@apply text-subtitle1": {},
+    },
+    ".typography-subtitle2": {
+      "@apply text-subtitle2": {},
+    },
+    ".typography-subtitle3": {
+      "@apply text-subtitle3": {},
+    },
+    ".typography-subtitle4": {
+      "@apply text-subtitle4": {},
+    },
+    ".typography-subtitle5": {
+      "@apply text-subtitle5": {},
+    },
+    ".typography-subtitle6": {
+      "@apply text-subtitle6": {},
+    },
+    // Deprecated aliases, kept for backward compatibility.
     ".typography-subtitile1": {
-      "@apply text-subtitile1": {},
+      "@apply text-subtitle1": {},
     },
     ".typography-subtitile2": {
-      "@apply text-subtitile2": {},
+      "@apply text-subtitle2": {},
     },
     ".typography-subtitile3": {
-      "@apply text-subtitile3": {},
+      "@apply text-subtitle3": {},
     },
     ".typography-subtitile4": {
-      "@apply text-subtitile4": {},
+      "@apply text-subtitle4": {},
     },
     ".typography-subtitile5": {
-      "@apply text-subtitile5": {},
+      "@apply text-subtitle5": {},
     },
     ".typography-subtitile6": {
-      "@apply text-subtitile6": {},
+      "@apply text-subtitle6": {},
     },
     ".typography-body1": {
       "@apply text-body1": {},

package/src/theme/presets/colors.js

@@ -94,7 +94,7 @@ module.exports = {
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),
         "base-popup": withColorMixin("--base-color-popup"),
-        "base-popup-highlight": withColorMixin("--base-color-popup-hightlight"),
+        "base-popup-highlight": withColorMixin("--base-color-popup-highlight"),
         "base-popup-curtain": withColorMixin("--base-color-popup-curtain"),
         "base-popup-foreground": withColorMixin(
           "--base-color-popup-foreground"

package/src/theme/themes/skyller/color.css

@@ -44,7 +44,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);

package/src/theme/themes/skyller/state.css

@@ -28,17 +28,17 @@
   --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);

package/src/theme/themes/variable.css

@@ -15,36 +15,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;
@@ -105,36 +105,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;
@@ -819,16 +819,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;
@@ -1017,9 +1017,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;

package/src/theme/themes/xspector/color.css

@@ -44,7 +44,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);

package/src/theme/themes/xspector/state.css

@@ -28,17 +28,17 @@
   --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);

package/src/theme/tokens/color.css

@@ -39,7 +39,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;

package/src/utils/colors.ts

@@ -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 ----- */