@rovula/ui 0.1.6 → 0.1.8

package/src/theme/tokens/components/dropdown-menu.css

@@ -11,17 +11,17 @@
 
   /* Default State */
   --dropdown-menu-default-bg: transparent;
-  --dropdown-menu-default-text: inherit;
+  --dropdown-menu-default-text: var(--text-g-contrast-high);
 
   /* Hover State */
-  --dropdown-menu-hover-bg: var(--state-color-primary-hover-bg);
-  --dropdown-menu-hover-text: inherit;
+  --dropdown-menu-hover-bg: var(--state-primary-hover-bg);
+  --dropdown-menu-hover-text: var(--text-g-contrast-high);
 
   /* Selected State */
   --dropdown-menu-selected-bg: transparent;
-  --dropdown-menu-selected-text: inherit;
+  --dropdown-menu-selected-text: var(--text-g-contrast-high);
 
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
-  --dropdown-menu-disabled-text: var(--state-color-disable-outline);
+  --dropdown-menu-disabled-text: var(--state-disable-outline);
 }

package/src/theme/tokens/components/footer.css

@@ -2,7 +2,7 @@
   /* Footer */
   --footer-height: 58px;
   --footer-height-simple: 48px;
-  --footer-bg-color: var(--state-color-primary-default);
+  --footer-bg-color: var(--state-primary-default);
   --footer-text-color: var(--primary-foreground);
   --footer-border-color: var(--primary-foreground);
   --footer-gap: 16px;

package/src/theme/tokens/components/loading.css

@@ -6,6 +6,6 @@
   /* Element: [progress, track]                                         */
   /* ------------------------------------------------------------------ */
 
-  --loading-process-color: var(--secondary);
-  --loading-track-color: #9E9E9E7A;
+  --loading-process-color: var(--brand-rvl-yellow);
+  --loading-track-color: var(--transparent-grey-32);
 }

package/src/theme/tokens/components/switch.css

@@ -7,23 +7,23 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --switch-default-color: rgb(from var(--grey-grey-100, #9e9e9e) r g b / 0.32);
-  --switch-thumb-default-color: var(--grey-grey-100, #9e9e9e);
-  --switch-thumb-filter: drop-shadow(0 2px 8px rgba(145, 158, 171, 0.24));
+  --switch-default-color: rgb(from var(--ramps-grey-100, #9e9e9e) r g b / 0.32);
+  --switch-thumb-default-color: var(--ramps-grey-100, #9e9e9e);
+  --switch-thumb-filter: drop-shadow(0 8px 16px #00000014);
 
   /* Hover State */
-  --switch-hover-color: rgb(from var(--grey-grey-80, #b1b1b1) r g b / 0.48);
-  --switch-thumb-hover-color: var(--grey-grey-80, #b1b1b1);
+  --switch-hover-color: rgb(from var(--ramps-grey-80, #b1b1b1) r g b / 0.48);
+  --switch-thumb-hover-color: var(--ramps-grey-80, #b1b1b1);
 
   /* Active State */
-  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
-  --switch-thumb-active-color: var(--state-color-primary-active, #ddcd00);
+  --switch-active-color: rgb(from var(--state-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-primary-active, #ddcd00);
 
   /* Active Hover State */
-  --switch-active-hover-color: rgb(from var(--state-color-primary-text-hover) r g b / 0.48);
-  --switch-thumb-active-hover-color: var(--state-color-primary-text-hover);
+  --switch-active-hover-color: rgb(from var(--state-primary-text-hover) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--state-primary-text-hover);
 
   /* Disabled State */
-  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
-  --switch-thumb-disabled-color: var(--state-color-disable-solid, #454f5b);
+  --switch-disabled-color: rgb(from var(--state-disable-solid) r g b / 0.32);
+  --switch-thumb-disabled-color: var(--state-disable-solid, #454f5b);
 }

package/src/theme/tokens/typography.css

@@ -1,195 +1,195 @@
 :root {
   /* TYPE */
-  --h1-family: "Montserrat";
+  --h1-family: "Poppins";
   --h1-size: 64px;
   --h1-size-rem: 4rem;
   --h1-weight: 700;
   --h1-style: normal;
   --h1-line-height: 80px;
   --h1-line-height-rem: 5rem;
-  --h2-family: "Montserrat";
+  --h2-family: "Poppins";
   --h2-size: 48px;
   --h2-size-rem: 3rem;
   --h2-weight: 700;
   --h2-style: normal;
   --h2-line-height: 60px;
   --h2-line-height-rem: 3.75rem;
-  --h3-family: "Montserrat";
+  --h3-family: "Poppins";
   --h3-size: 32px;
   --h3-size-rem: 2rem;
   --h3-weight: 700;
   --h3-style: normal;
   --h3-line-height: 48px;
   --h3-line-height-rem: 3rem;
-  --h4-family: "Montserrat";
+  --h4-family: "Poppins";
   --h4-size: 24px;
   --h4-size-rem: 1.5rem;
   --h4-weight: 700;
   --h4-style: normal;
   --h4-line-height: 32px;
   --h4-line-height-rem: 2rem;
-  --h5-family: "Montserrat";
+  --h5-family: "Poppins";
   --h5-size: 20px;
   --h5-size-rem: 1.25rem;
   --h5-weight: 700;
   --h5-style: normal;
   --h5-line-height: 28px;
   --h5-line-height-rem: 1.75rem;
-  --h6-family: "Montserrat";
+  --h6-family: "Poppins";
   --h6-size: 18px;
   --h6-size-rem: 1.125rem;
   --h6-weight: 700;
   --h6-style: normal;
   --h6-line-height: 24px;
   --h6-line-height-rem: 1.5rem;
-  --subtitle1-family: "Montserrat";
+  --subtitle1-family: "Poppins";
   --subtitle1-size: 16px;
   --subtitle1-size-rem: 1rem;
   --subtitle1-weight: 400;
   --subtitle1-style: normal;
   --subtitle1-line-height: 24px;
   --subtitle1-line-height-rem: 1.5rem;
-  --subtitle2-family: "Montserrat";
+  --subtitle2-family: "Poppins";
   --subtitle2-size: 16px;
   --subtitle2-size-rem: 1rem;
   --subtitle2-weight: 500;
   --subtitle2-style: normal;
   --subtitle2-line-height: 24px;
   --subtitle2-line-height-rem: 1.5rem;
-  --subtitle3-family: "Montserrat";
+  --subtitle3-family: "Poppins";
   --subtitle3-size: 16px;
   --subtitle3-size-rem: 1rem;
   --subtitle3-weight: 600;
   --subtitle3-style: normal;
   --subtitle3-line-height: 24px;
   --subtitle3-line-height-rem: 1.5rem;
-  --subtitle4-family: "Montserrat";
+  --subtitle4-family: "Poppins";
   --subtitle4-size: 14px;
   --subtitle4-size-rem: 0.875rem;
   --subtitle4-weight: 400;
   --subtitle4-style: normal;
   --subtitle4-line-height: 22px;
   --subtitle4-line-height-rem: 1.375rem;
-  --subtitle5-family: "Montserrat";
+  --subtitle5-family: "Poppins";
   --subtitle5-size: 14px;
   --subtitle5-size-rem: 0.875rem;
   --subtitle5-weight: 500;
   --subtitle5-style: normal;
   --subtitle5-line-height: 22px;
   --subtitle5-line-height-rem: 1.375rem;
-  --subtitle6-family: "Montserrat";
+  --subtitle6-family: "Poppins";
   --subtitle6-size: 14px;
   --subtitle6-size-rem: 0.875rem;
   --subtitle6-weight: 600;
   --subtitle6-style: normal;
   --subtitle6-line-height: 22px;
   --subtitle6-line-height-rem: 1.375rem;
-  --body1-family: "Montserrat";
+  --body1-family: "Poppins";
   --body1-size: 16px;
   --body1-size-rem: 1rem;
   --body1-weight: 400;
   --body1-style: normal;
   --body1-line-height: 20px;
   --body1-line-height-rem: 1.25rem;
-  --body2-family: "Montserrat";
+  --body2-family: "Poppins";
   --body2-size: 16px;
   --body2-size-rem: 1rem;
   --body2-weight: 500;
   --body2-style: normal;
   --body2-line-height: 20px;
   --body2-line-height-rem: 1.25rem;
-  --body3-family: "Montserrat";
+  --body3-family: "Poppins";
   --body3-size: 14px;
   --body3-size-rem: 0.875rem;
   --body3-weight: 400;
   --body3-style: normal;
   --body3-line-height: 18px;
   --body3-line-height-rem: 1.125rem;
-  --body4-family: "Montserrat";
+  --body4-family: "Poppins";
   --body4-size: 14px;
   --body4-size-rem: 0.875rem;
   --body4-weight: 500;
   --body4-style: normal;
   --body4-line-height: 18px;
   --body4-line-height-rem: 1.125rem;
-  --small1-family: "Montserrat";
+  --small1-family: "Poppins";
   --small1-size: 12px;
   --small1-size-rem: 0.75rem;
   --small1-weight: 400;
   --small1-style: normal;
   --small1-line-height: 14px;
   --small1-line-height-rem: 0.875rem;
-  --small2-family: "Montserrat";
+  --small2-family: "Poppins";
   --small2-size: 12px;
   --small2-size-rem: 0.75rem;
   --small2-weight: 500;
   --small2-style: normal;
   --small2-line-height: 14px;
   --small2-line-height-rem: 0.875rem;
-  --small3-family: "Montserrat";
+  --small3-family: "Poppins";
   --small3-size: 12px;
   --small3-size-rem: 0.75rem;
   --small3-weight: 600;
   --small3-style: normal;
   --small3-line-height: 14px;
   --small3-line-height-rem: 0.875rem;
-  --small4-family: "Montserrat";
+  --small4-family: "Poppins";
   --small4-size: 10px;
   --small4-size-rem: 0.625rem;
   --small4-weight: 400;
   --small4-style: normal;
   --small4-line-height: 12px;
   --small4-line-height-rem: 0.75rem;
-  --small5-family: "Montserrat";
+  --small5-family: "Poppins";
   --small5-size: 10px;
   --small5-size-rem: 0.625rem;
   --small5-weight: 500;
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
-  --small6-family: "Montserrat";
+  --small6-family: "Poppins";
   --small6-size: 10px;
   --small6-size-rem: 0.625rem;
   --small6-weight: 600;
   --small6-style: normal;
   --small6-line-height: 12px;
   --small6-line-height-rem: 0.75rem;
-  --small7-family: "Montserrat";
+  --small7-family: "Poppins";
   --small7-size: 8px;
   --small7-size-rem: 0.5rem;
   --small7-weight: 600;
   --small7-style: normal;
   --small7-line-height: 10px;
   --small7-line-height-rem: 0.625rem;
-  --small8-family: "Montserrat";
+  --small8-family: "Poppins";
   --small8-size: 8px;
   --small8-size-rem: 0.5rem;
   --small8-weight: 700;
   --small8-style: normal;
   --small8-line-height: 10px;
   --small8-line-height-rem: 0.625rem;
-  --label-label1-family: "Montserrat";
+  --label-label1-family: "Poppins";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;
   --label-label1-weight: 400;
   --label-label1-style: normal;
   --label-label1-line-height: 12px;
   --label-label1-line-height-rem: 0.75rem;
-  --label-label2-family: "Montserrat";
+  --label-label2-family: "Poppins";
   --label-label2-size: 10px;
   --label-label2-size-rem: 0.625rem;
   --label-label2-weight: 400;
   --label-label2-style: normal;
   --label-label2-line-height: 10px;
   --label-label2-line-height-rem: 0.625rem;
-  --button-button-l-family: "Montserrat";
+  --button-button-l-family: "Poppins";
   --button-button-l-size: 16px;
   --button-button-l-size-rem: 1rem;
   --button-button-l-weight: 700;
   --button-button-l-style: normal;
   --button-button-l-line-height: 24px;
   --button-button-l-line-height-rem: 1.5rem;
-  --button-button-ms-family: "Montserrat";
+  --button-button-ms-family: "Poppins";
   --button-button-ms-size: 14px;
   --button-button-ms-size-rem: 0.875rem;
   --button-button-ms-weight: 700;

package/src/theme/tokens_old/baseline.css

@@ -0,0 +1,13 @@
+@import url(palette.css);
+@import url(state.css);
+@import url(color.css);
+@import url(transparent.css);
+@import url(variables.css);
+@import url(typography.css);
+@import url(components/button.css);
+@import url(components/action-button.css);
+@import url(components/loading.css);
+@import url(components/navbar.css);
+@import url(components/footer.css);
+@import url(components/dropdown-menu.css);
+@import url(components/switch.css);

package/src/theme/tokens_old/color.css

@@ -0,0 +1,78 @@
+
+:root {
+  /* Base from design */
+  --input-color-default-text: #9e9e9e;
+  --input-color-default-stroke: #cfcfcf;
+  --input-color-filled-text: #4f4f4f;
+  --input-color-active-stroke: #9e9e9e;
+  --input-color-disable-text: #919eab;
+  --input-color-disable-stroke: #e7ebed;
+  --input-color-disable-bg: #f2f5f5;
+  --input-color-label-bg: #ffffff;/* #2d2e30; */
+  --input-color-error: #ed2f15;
+
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
+
+  --text-black: #000000;
+  --text-dark: #18283a;
+  --text-medium: #4b5b6d;
+  --text-light: #8e98a4;
+  --text-grey-dark: #4f4f4f;
+  --text-grey-medium: #7e7e7e;
+  --text-grey-light: #9e9e9e;
+  --text-white: #ffffff;
+
+  --base-color-bg: #f5f5f5;
+  --base-color-bg2: #f5f5f5;
+  --base-color-bg3: #d8d8d8;
+  --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
+  --base-color-popup: #ffffff;
+  --base-color-popup-highlight: #343638;
+  --base-color-popup-curtain: rgba(0 0 0 / 0.6);
+  --common-white: #ffffff;
+  --common-black: #000000;
+
+  /* ------- Addon base ---------- */
+  --background: var(--base-color-bg);
+  --foreground: var(--common-black);
+
+  --primary: var(--primary-ramps-primary-100);
+  --secondary: var(--secondary-ramps-secondary-100);
+  --tertiary: var(--tertiary-ramps-tertiary-100);
+  --info: var(--info-info-100);
+  --success: var(--success-success-100);
+  --warning: var(--warning-warning-100);
+  --error: var(--error-error-100);
+  --grey: var(--grey-grey-100);
+  --grey2: var(--grey2-grey2-100);
+
+  --primary-foreground: var(--state-color-primary-text-solid);
+  --secondary-foreground:  var(--state-color-secondary-text-solid);
+  --tertiary-foreground: var(--state-color-tertiary-text-solid);
+  --info-foreground: var(--state-color-info-text-solid);
+  --success-foreground:  var(--state-color-success-text-solid);
+  --warning-foreground:  var(--state-color-warning-text-solid);
+  --error-foreground:  var(--state-color-error-text-solid);
+  --grey-foreground: var(--common-black);
+  --grey2-foreground: var(--common-black);
+
+  --surface: var(--base-color-bg);
+  --surface-foreground: var(--common-black);
+
+  --primary-foreground: var(--common-white);
+  --secondary-foreground: var(--common-white);
+  
+  --base-color-popup-foreground: var(--text-dark);
+}

package/src/theme/tokens_old/components/action-button.css

@@ -0,0 +1,127 @@
+:root {
+  /* --------------------------------------------------------------------------------- */
+  /* Action Button Component Tokens                                                    */
+  /* --------------------------------------------------------------------------------- */
+  /* Naming Convention: --[component]-[mode]-[state]-[property]                        */
+  /* Mone:   [solid, outline, icon]                                                    */
+  /* States: [default, hover, pressed, active, active-pressed active-hover disabled]   */
+  /* --------------------------------------------------------------------------------- */
+
+  /* ------------------------------------------------------------------ */
+  /* Solid Mode Tokens                                                  */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
+
+  /* Hover State */
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
+
+  /* Pressed State */
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
+
+  /* Active State */
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
+
+  /* Active Hover State */
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
+
+  /* Active Pressed State */
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
+
+  /* Disabled State */
+  --action-button-solid-disabled-bg: var(--state-color-disable-solid);
+  --action-button-solid-disabled-border: var(--state-color-disable-solid);
+  --action-button-solid-disabled-text: var(--state-color-disable-outline);
+
+
+  /* ------------------------------------------------------------------ */
+  /* Outline Mode Tokens                                                */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --action-button-outline-default-bg: transparent;
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
+
+  /* Hover State */
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
+
+  /* Pressed State */
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
+
+  /* Active State */
+  --action-button-outline-active-bg: transparent;
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
+
+  /* Active Hover State */
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
+
+  /* Disabled State */
+  --action-button-outline-disabled-bg: transparent;
+  --action-button-outline-disabled-border: var(--state-color-disable-outline);
+  --action-button-outline-disabled-text: var(--state-color-disable-outline);
+
+  /* ------------------------------------------------------------------ */
+  /* Icon Mode Tokens                                                  */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --action-button-icon-default-bg: transparent;
+  --action-button-icon-default-border: transparent;
+  --action-button-icon-default-text: var(--function-default-outline-icon);
+
+  /* Hover State */
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-border: transparent;
+  --action-button-icon-hover-text: var(--function-default-hover);
+
+  /* Pressed State */
+  --action-button-icon-pressed-bg: transparent;
+  --action-button-icon-pressed-border: transparent;
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
+
+  /* Active State */
+  --action-button-icon-active-bg: transparent;
+  --action-button-icon-active-border: transparent;
+  --action-button-icon-active-text: var(--function-active-solid);
+
+  /* Active Hover State */
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-border: transparent;
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-bg: transparent;
+  --action-button-icon-active-pressed-border: transparent;
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
+
+  /* Disabled State */
+  --action-button-icon-disabled-bg: transparent;
+  --action-button-icon-disabled-border: transparent;
+  --action-button-icon-disabled-text: var(--state-color-disable-outline);
+}