@rovula/ui 0.0.46 → 0.0.48

package/dist/theme/global.css

@@ -1,6 +1,7 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
+@import "./themes/SKL/baseline.css";
 
 @tailwind base;
 @tailwind components;

package/dist/theme/themes/SKL/baseline.css

@@ -0,0 +1,12 @@
+@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/dropdown-menu.css);
+@import url(components/switch.css);

package/dist/theme/themes/SKL/color.css

@@ -0,0 +1,78 @@
+
+:root[data-theme="SKL"] {
+  /* 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: var(--state-color-primary-default);
+  --function-default-hover: var(--state-color-primary-hover);
+  --function-default-hover-bg: var(--state-color-primary-hover-bg);
+  --function-default-stroke: var(--state-color-primary-stroke);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: var(--state-color-primary-default);
+  --function-active-solid: var(--state-color-secondary-default);
+  --function-active-hover: var(--state-color-secondary-hover);
+  --function-active-hover-bg: var(--state-color-secondary-hover-bg);
+  --function-active-stroke:  var(--state-color-secondary-stroke);
+  --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-hightlight: #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);
+  --primary: 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/dist/theme/themes/SKL/components/action-button.css

@@ -0,0 +1,127 @@
+:root[data-theme="SKL"] {
+  /* --------------------------------------------------------------------------------- */
+  /* 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);
+}