@rolster/react-components 18.12.10 → 18.13.0

package/dist/esm/components/atoms/Amount/Amount.css

@@ -1,8 +1,8 @@
 .rls-amount {
   display: flex;
-  justify-content: var(--rls-amount-text-align);
-  column-gap: var(--sizing-x2);
+  justify-content: var(--rlc-amount-text-align);
+  column-gap: var(--rls-sizing-x2);
 }
 .rls-amount[rls-theme] {
-  color: var(--color-rolster-500);
+  color: var(--rls-theme-color-500);
 }

package/dist/esm/components/atoms/Avatar/Avatar.css

@@ -3,15 +3,15 @@
   display: flex;
   justify-content: center;
   overflow: hidden;
-  font-size: var(--rls-avatar-font-size);
-  width: var(--rls-avatar-width);
-  height: var(--rls-avatar-height);
-  background: var(--gradient-rolster-500);
-  color: var(--color-light-500);
-  border-radius: var(--rls-avatar-border-radius);
+  font-size: var(--rlc-avatar-font-size);
+  width: var(--rlc-avatar-width);
+  height: var(--rlc-avatar-height);
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-theme-font-500);
+  border-radius: var(--rlc-avatar-border-radius);
 }
 .rls-avatar--skeleton {
-  background: var(--color-rolster-100);
+  background: var(--rls-theme-color-100);
 }
 .rls-avatar--skeleton > * {
   display: none;

package/dist/esm/components/atoms/Badge/Badge.css

@@ -2,14 +2,14 @@
   position: relative;
   display: inline-block;
   width: auto;
-  padding: var(--sizing-x2);
+  padding: var(--rls-sizing-x2);
   box-sizing: border-box;
-  font-size: var(--caption-font-size);
-  letter-spacing: var(--caption-letter-spacing);
-  line-height: var(--caption-line-height);
-  color: var(--color-rolster-500);
-  background: var(--color-rolster-100);
-  border-radius: var(--sizing-x2);
+  font-size: var(--rls-caption-font-size);
+  letter-spacing: var(--rls-caption-letter-spacing);
+  line-height: var(--rls-caption-line-height);
+  color: var(--rls-theme-color-500);
+  background: var(--rls-theme-color-100);
+  border-radius: var(--rls-sizing-x2);
 }
 .rls-badge > span {
   font-size: inherit;

package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css

@@ -1,16 +1,16 @@
 .rls-breadcrumb {
-  --pvt-link-font-color: var(--color-theme-300);
+  --pvt-link-font-color: var(--rls-app-color-300);
   display: -webkit-box;
   width: 100%;
-  height: var(--rls-breadcrumb-height);
-  line-height: var(--rls-breadcrumb-height);
-  padding: 0rem var(--sizing-x8);
+  height: var(--rlc-breadcrumb-height);
+  line-height: var(--rlc-breadcrumb-height);
+  padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
   user-select: none;
   overflow: auto;
   overflow-y: hidden;
-  color: var(--color-theme-300);
-  font-weight: var(--font-weight-medium);
+  color: var(--rls-app-color-300);
+  font-weight: var(--rls-font-weight-medium);
 }
 .rls-breadcrumb::-webkit-scrollbar {
   width: 0rem;
@@ -23,8 +23,8 @@
   cursor: pointer;
   font-weight: inherit;
   color: inherit;
-  font-size: var(--body-font-size);
-  letter-spacing: var(--body-letter-spacing);
+  font-size: var(--rls-body-font-size);
+  letter-spacing: var(--rls-body-letter-spacing);
 }
 .rls-breadcrumb__label:first-child::before {
   display: none;
@@ -33,10 +33,10 @@
   font-family: -rolster-icons;
   display: inline-block;
   content: '\e911';
-  margin: 0rem var(--sizing-x2);
+  margin: 0rem var(--rls-sizing-x2);
   cursor: default;
   color: inherit;
-  font-size: var(--sizing-x12);
+  font-size: var(--rls-sizing-x12);
   font-weight: normal;
   font-style: normal;
   letter-spacing: normal;
@@ -44,7 +44,7 @@
   -webkit-font-smoothing: antialiased;
 }
 .rls-breadcrumb__label--active {
-  --pvt-link-font-color: var(--color-rolster-500);
+  --pvt-link-font-color: var(--rls-theme-color-500);
 }
 .rls-breadcrumb__label__a {
   display: inline-block;
@@ -52,6 +52,6 @@
   color: var(--pvt-link-font-color);
 }
 .rls-breadcrumb__label__a:hover {
-  color: var(--color-rolster-500);
+  color: var(--rls-theme-color-500);
   text-decoration: underline;
 }

package/dist/esm/components/atoms/Button/Button.css

@@ -1,24 +1,26 @@
 .rls-button {
   --pvt-button-content-background: none;
   --pvt-button-content-border: none;
-  --pvt-button-content-font-color: var(--color-rolster-500);
+  --pvt-button-content-font-color: var(--rls-theme-color-500);
   --pvt-button-content-animation: none;
   --pvt-button-content-visibility: hidden;
-  --pvt-button-ripple-background: var(--color-rolster-700);
-  --pvt-ghost-background: none;
-  --pvt-ghost-font-color: var(--color-rolster-500);
-  --pvt-ghost-border: none;
-  --pvt-flat-background: var(--color-rolster-100);
-  --pvt-flat-font-color: var(--color-rolster-500);
+  --pvt-button-ripple-background: var(--rls-theme-color-700);
+  --pvt-raised-background: var(--rls-theme-gradient-500);
+  --pvt-raised-font-color: var(--rls-theme-font-500);
+  --pvt-raised-border: none;
+  --pvt-flat-background: var(--rls-theme-color-200);
+  --pvt-flat-font-color: var(--rls-theme-color-500);
   --pvt-flat-border: none;
+  --pvt-stroked-background: transparent;
+  --pvt-stroked-font-color: var(--rls-theme-color-500);
+  --pvt-stroked-border: var(--rls-theme-border-1-500);
   --pvt-outline-background: transparent;
-  --pvt-outline-font-color: var(--color-theme-300);
-  --pvt-outline-border: var(--border-1-theme-300);
-  --pvt-raised-background: var(--gradient-rolster-500);
-  --pvt-raised-font-color: var(--color-light-500);
-  --pvt-raised-border: none;
+  --pvt-outline-font-color: var(--rls-app-color-300);
+  --pvt-outline-border: var(--rls-app-border-1-300);
+  --pvt-ghost-background: none;
+  --pvt-ghost-font-color: var(--rls-theme-color-500);
+  --pvt-ghost-border: none;
   position: relative;
-  float: left;
   padding: 0rem;
   overflow: hidden;
   outline: none;
@@ -26,38 +28,56 @@
 }
 .rls-button:not(:disabled):not(:active) {
   --pvt-button-content-animation: ripple-squarecenter 1000ms
-    var(--standard-curve);
+    var(--rls-standard-curve);
 }
 .rls-button:not(:disabled):focus {
   --pvt-button-content-visibility: visible;
 }
 .rls-button:not(:disabled):hover {
-  --pvt-ghost-background: var(--color-rolster-100);
-  --pvt-ghost-font-color: var(--color-rolster-500);
-  --pvt-ghost-border: none;
-  --pvt-flat-background: var(--color-rolster-100);
-  --pvt-flat-font-color: var(--color-rolster-700);
+  --pvt-raised-background: var(--rls-theme-color-700);
+  --pvt-raised-font-color: var(--rls-theme-font-900);
+  --pvt-raised-border: none;
+  --pvt-flat-background: var(--rls-theme-color-500);
+  --pvt-flat-font-color: var(--rls-theme-font-500);
   --pvt-flat-border: none;
+  --pvt-stroked-background: var(--rls-theme-color-100);
+  --pvt-stroked-font-color: var(--rls-theme-color-700);
+  --pvt-stroked-border: var(--rls-theme-border-1-700);
   --pvt-outline-background: transparent;
-  --pvt-outline-font-color: var(--color-rolster-500);
-  --pvt-outline-border: var(--border-1-rolster-500);
-  --pvt-raised-background: var(--color-rolster-700);
-  --pvt-raised-font-color: var(--color-light-500);
-  --pvt-raised-border: none;
+  --pvt-outline-font-color: var(--rls-theme-color-500);
+  --pvt-outline-border: var(--rls-theme-border-1-500);
+  --pvt-ghost-background: var(--rls-theme-color-200);
+  --pvt-ghost-font-color: var(--rls-theme-font-100);
+  --pvt-ghost-border: none;
 }
 .rls-button:disabled {
-  opacity: 0.5;
+  --pvt-raised-background: var(--rls-theme-color-200);
+  --pvt-raised-font-color: var(--rls-theme-color-400);
+  --pvt-raised-border: none;
+  --pvt-flat-background: var(--rls-theme-color-100);
+  --pvt-flat-font-color: var(--rls-theme-color-300);
+  --pvt-flat-border: none;
+  --pvt-stroked-background: transparent;
+  --pvt-stroked-font-color: var(--rls-theme-color-300);
+  --pvt-stroked-border: var(--rls-theme-border-1-300);
+  --pvt-outline-background: transparent;
+  --pvt-outline-font-color: var(--rls-app-color-100);
+  --pvt-outline-border: var(--rls-app-border-1-100);
+  --pvt-ghost-background: transparent;
+  --pvt-ghost-font-color: var(--rls-theme-color-300);
+  --pvt-ghost-border: none;
   pointer-events: none;
 }
 .rls-button__content {
   display: flex;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
-  line-height: var(--sizing-x20);
-  height: var(--sizing-x20);
-  padding: var(--rls-button-content-padding);
+  line-height: var(--rls-sizing-x20);
+  height: var(--rls-sizing-x20);
+  padding: var(--rlc-button-content-padding);
   box-sizing: border-box;
-  border-radius: var(--rls-button-content-radius);
+  border-radius: var(--rlc-button-content-radius);
   color: var(--pvt-button-content-font-color);
   border: var(--pvt-button-content-border);
   background: var(--pvt-button-content-background);
@@ -68,52 +88,53 @@
   content: '';
   top: 50%;
   left: 50%;
-  padding-top: calc(100% - var(--sizing-x8));
-  padding-left: calc(100% - var(--sizing-x8));
-  margin-top: calc(-50% + var(--sizing-x4));
-  margin-left: calc(-50% + var(--sizing-x4));
+  padding-top: calc(100% - var(--rls-sizing-x8));
+  padding-left: calc(100% - var(--rls-sizing-x8));
+  margin-top: calc(-50% + var(--rls-sizing-x4));
+  margin-left: calc(-50% + var(--rls-sizing-x4));
   border-radius: 50%;
   opacity: 0.26;
   transform: scale(0);
-  z-index: var(--z-index-2);
+  z-index: var(--rls-z-index-2);
   background: var(--pvt-button-ripple-background);
   animation: var(--pvt-button-content-animation);
   visibility: var(--pvt-button-content-visibility);
 }
-.rls-button__content--ghost {
-  --pvt-button-content-font-color: var(--pvt-ghost-font-color);
-  --pvt-button-content-background: var(--pvt-ghost-background);
-  --pvt-button-content-border: var(--pvt-ghost-border);
+.rls-button__content--raised {
+  --pvt-button-content-background: var(--pvt-raised-background);
+  --pvt-button-content-font-color: var(--pvt-raised-font-color);
+  --pvt-button-content-border: var(--pvt-raised-border);
+  --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
 .rls-button__content--flat {
   --pvt-button-content-font-color: var(--pvt-flat-font-color);
   --pvt-button-content-background: var(--pvt-flat-background);
   --pvt-button-content-border: var(--pvt-flat-border);
-  --pvt-button-ripple-background: var(--color-rolster-500);
+  --pvt-button-ripple-background: var(--rls-theme-font-900);
+}
+.rls-button__content--stroked {
+  --pvt-button-content-font-color: var(--pvt-stroked-font-color);
+  --pvt-button-content-background: var(--pvt-stroked-background);
+  --pvt-button-content-border: var(--pvt-stroked-border);
 }
 .rls-button__content--outline {
   --pvt-button-content-font-color: var(--pvt-outline-font-color);
   --pvt-button-content-background: var(--pvt-outline-background);
   --pvt-button-content-border: var(--pvt-outline-border);
 }
-.rls-button__content--raised {
-  --pvt-button-content-background: var(--pvt-raised-background);
-  --pvt-button-content-font-color: var(--pvt-raised-font-color);
-  --pvt-button-content-border: var(--pvt-raised-border);
-  --pvt-button-ripple-background: var(--color-light-500);
-}
-.rls-button .rls-icon {
-  margin: auto var(--sizing-x2);
+.rls-button__content--ghost {
+  --pvt-button-content-font-color: var(--pvt-ghost-font-color);
+  --pvt-button-content-background: var(--pvt-ghost-background);
+  --pvt-button-content-border: var(--pvt-ghost-border);
 }
 .rls-button__label {
-  padding: 0rem var(--sizing-x2);
+  padding: 0rem var(--rls-sizing-x2);
   line-height: initial;
   width: auto;
-  margin: auto 0rem;
-  font-size: var(--button-font-size);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--button-letter-spacing);
-  text-transform: var(--rls-button-label-text-transform);
+  font-size: var(--rls-button-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  letter-spacing: var(--rls-button-letter-spacing);
+  text-transform: var(--rlc-button-label-text-transform);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

package/dist/esm/components/atoms/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { RlsComponent } from '../../definitions';
 import './Button.css';
-export type ButtonType = 'raised' | 'flat' | 'outline' | 'ghost';
+export type ButtonType = 'raised' | 'flat' | 'stroked' | 'outline' | 'ghost';
 interface ButtonProps extends RlsComponent {
     type: ButtonType;
     disabled?: boolean;

package/dist/esm/components/atoms/Button/Button.js

@@ -3,6 +3,6 @@ import { renderClassStatus } from '../../../helpers/css';
 import { RlsIcon } from '../Icon/Icon';
 import './Button.css';
 export function RlsButton({ type, children, disabled, prefixIcon, suffixIcon, rlsTheme, onClick }) {
-    return (_jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: _jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && _jsx(RlsIcon, { value: prefixIcon }), children && (_jsx("div", { className: "rls-button__label", children: children })), suffixIcon && _jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (_jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: _jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && _jsx(RlsIcon, { value: prefixIcon }), children && _jsx("div", { className: "rls-button__label", children: children }), suffixIcon && _jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 //# sourceMappingURL=Button.js.map

package/dist/esm/components/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,cAAc,CAAC;AAYtB,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACK;IACZ,OAAO,CACL,iBACE,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,OAAO,eACL,QAAQ,EACnB,QAAQ,EAAE,QAAQ,YAElB,eAAK,SAAS,EAAE,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,CAAC,aAC/D,UAAU,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,EAC5C,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,CACpD,EACA,UAAU,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,IACzC,GACC,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,cAAc,CAAC;AAYtB,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACK;IACZ,OAAO,CACL,iBACE,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,OAAO,eACL,QAAQ,EACnB,QAAQ,EAAE,QAAQ,YAElB,eAAK,SAAS,EAAE,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,CAAC,aAC/D,UAAU,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,EAC5C,QAAQ,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,EAC/D,UAAU,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,IACzC,GACC,CACV,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/ButtonAction/ButtonAction.css

@@ -2,16 +2,16 @@
   --pvt-tooltip-transition-delay: 0ms;
   --pvt-tooltip-opacity: 0;
   position: relative;
-  width: var(--sizing-x16);
-  height: var(--sizing-x16);
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
   border: none;
   outline: none;
-  padding: var(--sizing-x2);
+  padding: var(--rls-sizing-x2);
   box-sizing: border-box;
   user-select: none;
   cursor: default;
   background: transparent;
-  color: var(--rls-action-color);
+  color: var(--rlc-action-color);
 }
 .rls-button-action::before {
   position: absolute;
@@ -23,14 +23,14 @@
   visibility: hidden;
   border-radius: 50%;
   transform: scale(0);
-  background: var(--rls-action-ripple-color);
-  padding-top: calc(120% - var(--sizing-x4));
-  padding-left: calc(120% - var(--sizing-x4));
-  margin-top: calc(-60% + var(--sizing-x2));
-  margin-left: calc(-60% + var(--sizing-x2));
+  background: var(--rlc-action-ripple-color);
+  padding-top: calc(120% - var(--rls-sizing-x4));
+  padding-left: calc(120% - var(--rls-sizing-x4));
+  margin-top: calc(-60% + var(--rls-sizing-x2));
+  margin-left: calc(-60% + var(--rls-sizing-x2));
 }
 .rls-button-action:not(:active)::before {
-  animation: ripple-button-action 1000ms var(--standard-curve);
+  animation: ripple-button-action 1000ms var(--rls-standard-curve);
 }
 .rls-button-action:focus::before {
   visibility: visible;
@@ -41,14 +41,14 @@
   top: 50%;
   left: 50%;
   opacity: 0.24;
-  width: var(--rls-action-ripple-dimension);
-  height: var(--rls-action-ripple-dimension);
-  margin-top: var(--rls-action-ripple-position);
-  margin-left: var(--rls-action-ripple-position);
+  width: var(--rlc-action-ripple-dimension);
+  height: var(--rlc-action-ripple-dimension);
+  margin-top: var(--rlc-action-ripple-position);
+  margin-left: var(--rlc-action-ripple-position);
   border-radius: 50%;
-  background: var(--rls-action-ripple-color);
+  background: var(--rlc-action-ripple-color);
   transform: scale(0);
-  transition: transform 160ms 0ms var(--sharp-curve);
+  transition: transform 160ms 0ms var(--rls-sharp-curve);
 }
 .rls-button-action:not(:disabled):hover {
   --pvt-tooltip-opacity: 1;
@@ -63,18 +63,18 @@
 }
 .rls-button-action__tooltip {
   position: absolute;
-  top: calc(100% + var(--sizing-x6));
+  top: calc(100% + var(--rls-sizing-x6));
   left: 50%;
   width: auto;
   float: initial;
-  padding: var(--sizing-x4);
-  border-radius: var(--sizing-x2);
+  padding: var(--rls-sizing-x4);
+  border-radius: var(--rls-sizing-x2);
   white-space: nowrap;
   pointer-events: none;
   transform: translateX(-50%);
-  background: var(--color-dark-500);
-  color: var(--color-light-500);
-  transition: opacity 200ms 0ms var(--deceleration-curve);
+  background: var(--rls-dark-color-500);
+  color: var(--rls-light-color-500);
+  transition: opacity 200ms 0ms var(--rls-deceleration-curve);
   opacity: var(--pvt-tooltip-opacity);
   transition-delay: var(--pvt-tooltip-transition-delay);
 }

package/dist/esm/components/atoms/CheckBox/CheckBox.css

@@ -3,31 +3,31 @@
   position: relative;
   float: left;
   display: flex;
-  width: var(--sizing-x12);
-  height: var(--sizing-x12);
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
   box-sizing: border-box;
   outline: none;
-  border-radius: var(--sizing-x2);
-  border: var(--border-1-theme-300);
+  border-radius: var(--rls-sizing-x2);
+  border: var(--rls-app-border-1-300);
 }
 .rls-checkbox:hover {
   cursor: pointer;
 }
 .rls-checkbox--checked {
   --pvt-component-transform: scale(1);
-  border: var(--border-1-rolster-500);
+  border: var(--rls-theme-border-1-500);
 }
 .rls-checkbox--disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 .rls-checkbox__component {
-  border-radius: var(--sizing-x1);
+  border-radius: var(--rls-sizing-x1);
   width: 7rem;
   height: 7rem;
   margin: auto;
-  background: var(--gradient-rolster-500);
+  background: var(--rls-theme-gradient-500);
   transform: var(--pvt-component-transform);
   transform-origin: 50% 50%;
-  transition: all 160ms 0ms var(--standard-curve);
+  transition: all 160ms 0ms var(--rls-standard-curve);
 }

package/dist/esm/components/atoms/Icon/Icon.css

@@ -1,20 +1,19 @@
 .rls-icon {
   --pvt-icon-display: block;
   position: relative;
-  float: left;
-  font-size: var(--rls-icon-font-size);
-  width: var(--rls-icon-width);
-  height: var(--rls-icon-height);
-  line-height: var(--rls-icon-height);
+  font-size: var(--rlc-icon-font-size);
+  width: var(--rlc-icon-width);
+  height: var(--rlc-icon-height);
+  line-height: var(--rlc-icon-height);
 }
 .rls-icon--skeleton {
   --pvt-icon-display: none;
-  background: var(--theme-rolster-300);
-  border-radius: var(--sizing-x2);
+  background: var(--rls-theme-color-300);
+  border-radius: var(--rls-sizing-x2);
 }
 .rls-icon > i {
   display: var(--pvt-icon-display);
-  color: var(--rls-icon-color);
+  color: var(--rlc-icon-color);
   float: left;
   width: 100%;
   height: 100%;

package/dist/esm/components/atoms/Input/Input.css

@@ -1,12 +1,12 @@
 .rls-input {
-  --pvt-value-font-color: var(--rls-input-font-color);
+  --pvt-value-font-color: var(--rlc-input-font-color);
   --pvt-value-opacity: 1;
   --pvt-component-font-color: transparent;
   position: relative;
   width: 100%;
 }
 .rls-input--focused {
-  --pvt-component-font-color: var(--rls-input-font-color);
+  --pvt-component-font-color: var(--rlc-input-font-color);
   --pvt-value-font-color: transparent;
 }
 .rls-input--disabled {
@@ -15,17 +15,17 @@
 .rls-input__component {
   position: relative;
   width: 100%;
-  height: var(--rls-input-height);
-  line-height: var(--rls-input-height);
+  height: var(--rlc-input-height);
+  line-height: var(--rlc-input-height);
   padding: 0rem;
   cursor: text;
   border: none;
   outline: none;
   background: transparent;
   color: var(--pvt-component-font-color);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--rls-font-weight-medium);
   font-size: var(--rls-input-font-size);
-  text-align: var(--rls-input-text-align);
+  text-align: var(--rlc-input-text-align);
   letter-spacing: var(--rls-input-letter-spacing);
 }
 .rls-input__component::-webkit-outer-spin-button,
@@ -34,11 +34,11 @@
   -webkit-appearance: none;
 }
 .rls-input__component::placeholder {
-  color: var(--color-theme-100);
+  color: var(--rls-app-color-100);
 }
 .rls-input__component::selection {
-  background: var(--color-rolster-700);
-  color: var(--color-light-500);
+  background: var(--rls-theme-color-700);
+  color: var(--rls-light-color-500);
 }
 .rls-input__component:disabled {
   opacity: 0.5;
@@ -48,16 +48,16 @@
   top: 0rem;
   left: 0rem;
   width: 100%;
-  height: var(--rls-input-height);
-  line-height: var(--rls-input-height);
+  height: var(--rlc-input-height);
+  line-height: var(--rlc-input-height);
   background: transparent;
   pointer-events: none;
   overflow: hidden;
   white-space: nowrap;
   opacity: var(--pvt-value-opacity);
   color: var(--pvt-value-font-color);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--rls-font-weight-medium);
   font-size: var(--rls-input-font-size);
-  text-align: var(--rls-input-text-align);
+  text-align: var(--rlc-input-text-align);
   letter-spacing: var(--rls-input-letter-spacing);
 }

package/dist/esm/components/atoms/InputMoney/InputMoney.css

@@ -2,6 +2,6 @@
   position: relative;
   float: left;
   width: 100%;
-  padding: var(--rls-input-parent-padding);
+  padding: var(--rlc-input-parent-padding);
   box-sizing: border-box;
 }

package/dist/esm/components/atoms/InputNumber/InputNumber.css

@@ -2,6 +2,6 @@
   position: relative;
   float: left;
   width: 100%;
-  padding: var(--rls-input-parent-padding);
+  padding: var(--rlc-input-parent-padding);
   box-sizing: border-box;
 }

package/dist/esm/components/atoms/InputPassword/InputPassword.css

@@ -2,22 +2,22 @@
   position: relative;
   float: left;
   width: 100%;
-  padding: var(--rls-input-parent-padding);
+  padding: var(--rlc-input-parent-padding);
   box-sizing: border-box;
 }
 .rls-input-password__component {
   position: relative;
   float: left;
   width: 100%;
-  height: var(--sizing-x12);
-  line-height: var(--sizing-x12);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
   padding: 0rem;
   cursor: text;
   border: none;
   outline: none;
   background: transparent;
-  color: var(--rls-input-font-color);
-  font-weight: var(--font-weight-medium);
+  color: var(--rlc-input-font-color);
+  font-weight: var(--rls-font-weight-medium);
   font-size: var(--rls-input-font-size);
   letter-spacing: var(--rls-input-letter-spacing);
 }
@@ -27,11 +27,11 @@
   -webkit-appearance: none;
 }
 .rls-input-password__component::placeholder {
-  color: var(--color-theme-100);
+  color: var(--rls-app-color-100);
 }
 .rls-input-password__component::selection {
-  background: var(--color-rolster-700);
-  color: var(--color-light-500);
+  background: var(--rls-theme-color-700);
+  color: var(--rls-light-color-500);
 }
 .rls-input-password__component:disabled {
   opacity: 0.5;

package/dist/esm/components/atoms/InputText/InputText.css

@@ -2,6 +2,6 @@
   position: relative;
   float: left;
   width: 100%;
-  padding: var(--rls-input-parent-padding);
+  padding: var(--rlc-input-parent-padding);
   box-sizing: border-box;
 }

package/dist/esm/components/atoms/Label/Label.css

@@ -1,3 +1,3 @@
 .rls-label[rls-theme] {
-  color: var(--color-rolster-500);
+  color: var(--rls-theme-color-500);
 }

package/dist/esm/components/atoms/MessageIcon/MessageIcon.css

@@ -1,12 +1,12 @@
 .rls-message-icon {
-  --rls-icon-color: var(--color-rolster-500);
-  --rls-icon-width: var(--sizing-x8);
-  --rls-icon-height: var(--sizing-x8);
-  --rls-icon-font-size: var(--sizing-x8);
+  --rlc-icon-color: var(--rls-theme-color-500);
+  --rlc-icon-width: var(--rls-sizing-x8);
+  --rlc-icon-height: var(--rls-sizing-x8);
+  --rlc-icon-font-size: var(--rls-sizing-x8);
   display: flex;
   align-items: center;
-  column-gap: var(--sizing-x2);
+  column-gap: var(--rls-sizing-x2);
 }
 .rls-message-icon span {
-  color: var(--color-theme-300);
+  color: var(--rls-app-color-300);
 }