@robuust-digital/vue-components 1.3.2 → 2.0.0-rc.0

package/dist/core/alert.css

@@ -0,0 +1,169 @@
+:root {
+  /* Base Alert variables */
+  --rvc-alert-border-radius: var(--rvc-base-border-radius);
+  --rvc-alert-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-alert-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-alert-padding-x: calc(var(--spacing) * 6);
+  --rvc-alert-padding-y: calc(var(--spacing) * 6);
+  --rvc-alert-font-size: var(--text-base);
+  --rvc-alert-gap: calc(var(--spacing) * 1.5);
+  --rvc-alert-anchor-decoration: underline;
+  --rvc-alert-icon-size: calc(var(--spacing) * 6);
+  --rvc-alert-title-font-weight: var(--font-weight-medium);
+  --rvc-alert-transition-property: color, background-color, border-color;
+
+  /* Default color variables */
+  --rvc-alert-bg-color: var(--color-blue-50);
+  --rvc-alert-color: var(--color-blue-700);
+  --rvc-alert-icon-color: var(--color-blue-400);
+  --rvc-alert-icon-color-hover: var(--color-blue-800);
+  --rvc-alert-title-color: var(--color-blue-800);
+  --rvc-alert-close-bg-color: var(--color-blue-100);
+  --rvc-alert-close-bg-color-hover: var(--color-blue-200);
+  --rvc-alert-anchor-color: inherit;
+  --rvc-alert-anchor-color-hover: var(--color-blue-600);
+
+  /* Warning variant */
+  --rvc-alert-bg-color-warning: var(--color-yellow-50);
+  --rvc-alert-color-warning: var(--color-yellow-700);
+  --rvc-alert-icon-color-warning: var(--color-yellow-400);
+  --rvc-alert-icon-color-warning-hover: var(--color-yellow-800);
+  --rvc-alert-title-color-warning: var(--color-yellow-800);
+  --rvc-alert-close-bg-color-warning: var(--color-yellow-100);
+  --rvc-alert-close-bg-color-warning-hover: var(--color-yellow-200);
+  --rvc-alert-anchor-color-warning-hover: var(--color-yellow-600);
+
+  /* Success variant */
+  --rvc-alert-bg-color-success: var(--color-green-50);
+  --rvc-alert-color-success: var(--color-green-700);
+  --rvc-alert-icon-color-success: var(--color-green-400);
+  --rvc-alert-icon-color-success-hover: var(--color-green-800);
+  --rvc-alert-title-color-success: var(--color-green-800);
+  --rvc-alert-close-bg-color-success: var(--color-green-100);
+  --rvc-alert-close-bg-color-success-hover: var(--color-green-200);
+  --rvc-alert-anchor-color-success-hover: var(--color-green-600);
+
+  /* Danger variant */
+  --rvc-alert-bg-color-danger: var(--color-red-50);
+  --rvc-alert-color-danger: var(--color-red-700);
+  --rvc-alert-icon-color-danger: var(--color-red-400);
+  --rvc-alert-icon-color-danger-hover: var(--color-red-800);
+  --rvc-alert-title-color-danger: var(--color-red-800);
+  --rvc-alert-close-bg-color-danger: var(--color-red-100);
+  --rvc-alert-close-bg-color-danger-hover: var(--color-red-200);
+  --rvc-alert-anchor-color-danger-hover: var(--color-red-600);
+}
+
+@layer components {
+  .rvc-alert {
+    gap: var(--rvc-alert-gap);
+    padding-inline: var(--rvc-alert-padding-x);
+    padding-block: var(--rvc-alert-padding-y);
+    border-radius: var(--rvc-alert-border-radius);
+    font-size: var(--rvc-alert-font-size);
+    background-color: var(--rvc-alert-bg-color);
+    color: var(--rvc-alert-color);
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    a {
+      text-decoration: var(--rvc-alert-anchor-decoration);
+      transition-property: var(--rvc-alert-transition-property);
+      transition-duration: var(--rvc-alert-transition-duration);
+      transition-timing-function: var(--rvc-alert-transition-timing-function);
+      color: var(--rvc-alert-anchor-color);
+
+      &:hover {
+        color: var(--rvc-alert-anchor-color-hover);
+      }
+    }
+
+    ul, ol {
+      list-style-position: inside;
+      margin: 0;
+      padding-left: calc(var(--spacing) * 2);
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    .rvc-alert-close {
+      background-color: var(--rvc-alert-close-bg-color);
+      color: var(--rvc-alert-icon-color);
+      border-bottom-left-radius: var(--rvc-alert-border-radius);
+      transition-property: var(--rvc-alert-transition-property);
+      transition-duration: var(--rvc-alert-transition-duration);
+      transition-timing-function: var(--rvc-alert-transition-timing-function);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: calc(var(--spacing) * 1.5);
+
+      &:hover {
+        background-color: var(--rvc-alert-close-bg-color-hover);
+        color: var(--rvc-alert-icon-color-hover);
+      }
+    }
+
+    .rvc-alert-icon {
+      width: var(--rvc-alert-icon-size);
+      height: var(--rvc-alert-icon-size);
+      color: var(--rvc-alert-icon-color);
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .rvc-alert-title {
+      color: var(--rvc-alert-title-color);
+      font-weight: var(--rvc-alert-title-font-weight);
+      display: block;
+      margin-bottom: calc(var(--spacing) * 2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.rvc-alert-warning {
+      --rvc-alert-bg-color: var(--rvc-alert-bg-color-warning);
+      --rvc-alert-color: var(--rvc-alert-color-warning);
+      --rvc-alert-icon-color: var(--rvc-alert-icon-color-warning);
+      --rvc-alert-icon-color-hover: var(--rvc-alert-icon-color-warning-hover);
+      --rvc-alert-title-color: var(--rvc-alert-title-color-warning);
+      --rvc-alert-close-bg-color: var(--rvc-alert-close-bg-color-warning);
+      --rvc-alert-close-bg-color-hover: var(--rvc-alert-close-bg-color-warning-hover);
+      --rvc-alert-anchor-color-hover: var(--rvc-alert-anchor-color-warning-hover);
+    }
+
+    &.rvc-alert-success {
+      --rvc-alert-bg-color: var(--rvc-alert-bg-color-success);
+      --rvc-alert-color: var(--rvc-alert-color-success);
+      --rvc-alert-icon-color: var(--rvc-alert-icon-color-success);
+      --rvc-alert-icon-color-hover: var(--rvc-alert-icon-color-success-hover);
+      --rvc-alert-title-color: var(--rvc-alert-title-color-success);
+      --rvc-alert-close-bg-color: var(--rvc-alert-close-bg-color-success);
+      --rvc-alert-close-bg-color-hover: var(--rvc-alert-close-bg-color-success-hover);
+      --rvc-alert-anchor-color-hover: var(--rvc-alert-anchor-color-success-hover);
+    }
+
+    &.rvc-alert-danger {
+      --rvc-alert-bg-color: var(--rvc-alert-bg-color-danger);
+      --rvc-alert-color: var(--rvc-alert-color-danger);
+      --rvc-alert-icon-color: var(--rvc-alert-icon-color-danger);
+      --rvc-alert-icon-color-hover: var(--rvc-alert-icon-color-danger-hover);
+      --rvc-alert-title-color: var(--rvc-alert-title-color-danger);
+      --rvc-alert-close-bg-color: var(--rvc-alert-close-bg-color-danger);
+      --rvc-alert-close-bg-color-hover: var(--rvc-alert-close-bg-color-danger-hover);
+      --rvc-alert-anchor-color-hover: var(--rvc-alert-anchor-color-danger-hover);
+    }
+  }
+}

package/dist/core/badge.css

@@ -0,0 +1,121 @@
+:root {
+  /* Base Badge variables */
+  --rvc-badge-height: calc(var(--spacing) * 8);
+  --rvc-badge-padding-x: calc(var(--spacing) * 3);
+  --rvc-badge-padding-y: calc(var(--spacing) * 1.5);
+  --rvc-badge-font-weight: var(--font-weight-medium);
+  --rvc-badge-border-radius: calc(infinity * 1px);
+  --rvc-badge-font-size: var(--text-base);
+  --rvc-badge-gap: calc(var(--spacing) * 1);
+
+  /* Default color variables */
+  --rvc-badge-bg-color: #fcffc4;
+  --rvc-badge-color: #576d07;
+
+  /* Gray variant */
+  --rvc-badge-bg-color-gray: var(--color-slate-100);
+  --rvc-badge-color-gray: var(--color-slate-700);
+
+  /* Red variant */
+  --rvc-badge-bg-color-red: var(--color-red-100);
+  --rvc-badge-color-red: var(--color-red-700);
+
+  /* Yellow variant */
+  --rvc-badge-bg-color-yellow: var(--color-yellow-100);
+  --rvc-badge-color-yellow: var(--color-yellow-700);
+
+  /* Green variant */
+  --rvc-badge-bg-color-green: var(--color-green-100);
+  --rvc-badge-color-green: var(--color-green-700);
+
+  /* Blue variant */
+  --rvc-badge-bg-color-blue: var(--color-blue-100);
+  --rvc-badge-color-blue: var(--color-blue-700);
+
+  /* Violet variant */
+  --rvc-badge-bg-color-violet: var(--color-violet-100);
+  --rvc-badge-color-violet: var(--color-violet-700);
+
+  /* Purple variant */
+  --rvc-badge-bg-color-purple: var(--color-purple-100);
+  --rvc-badge-color-purple: var(--color-purple-700);
+
+  /* Pink variant */
+  --rvc-badge-bg-color-pink: var(--color-pink-100);
+  --rvc-badge-color-pink: var(--color-pink-700);
+
+  /* Small variant */
+  --rvc-badge-height-sm: calc(var(--spacing) * 6);
+  --rvc-badge-padding-x-sm: calc(var(--spacing) * 2);
+  --rvc-badge-padding-y-sm: calc(var(--spacing) * 1);
+  --rvc-badge-font-size-sm: var(--text-sm);
+}
+
+@layer components {
+  .rvc-badge {
+    height: var(--rvc-badge-height);
+    padding-inline: var(--rvc-badge-padding-x);
+    padding-block: var(--rvc-badge-padding-y);
+    font-weight: var(--rvc-badge-font-weight);
+    border-radius: var(--rvc-badge-border-radius);
+    font-size: var(--rvc-badge-font-size);
+    gap: var(--rvc-badge-gap);
+    background-color: var(--rvc-badge-bg-color);
+    color: var(--rvc-badge-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+    width: fit-content;
+    white-space: nowrap;
+    text-decoration: none;
+
+    &.rvc-badge-gray {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-gray);
+      --rvc-badge-color: var(--rvc-badge-color-gray);
+    }
+
+    &.rvc-badge-red {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-red);
+      --rvc-badge-color: var(--rvc-badge-color-red);
+    }
+
+    &.rvc-badge-yellow {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-yellow);
+      --rvc-badge-color: var(--rvc-badge-color-yellow);
+    }
+
+    &.rvc-badge-green {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-green);
+      --rvc-badge-color: var(--rvc-badge-color-green);
+    }
+
+    &.rvc-badge-blue {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-blue);
+      --rvc-badge-color: var(--rvc-badge-color-blue);
+    }
+
+    &.rvc-badge-violet {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-violet);
+      --rvc-badge-color: var(--rvc-badge-color-violet);
+    }
+
+    &.rvc-badge-purple {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-purple);
+      --rvc-badge-color: var(--rvc-badge-color-purple);
+    }
+
+    &.rvc-badge-pink {
+      --rvc-badge-bg-color: var(--rvc-badge-bg-color-pink);
+      --rvc-badge-color: var(--rvc-badge-color-pink);
+    }
+
+    &.rvc-badge-sm {
+      --rvc-badge-height: var(--rvc-badge-height-sm);
+      --rvc-badge-padding-x: var(--rvc-badge-padding-x-sm);
+      --rvc-badge-padding-y: var(--rvc-badge-padding-y-sm);
+      --rvc-badge-font-size: var(--rvc-badge-font-size-sm);
+    }
+  }
+}

package/dist/core/button.css

@@ -0,0 +1,393 @@
+:root {
+  /* Base Button variables */
+  --rvc-button-border-radius: var(--rvc-base-border-radius);
+  --rvc-button-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-button-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-button-icon-loading-animation: var(--rvc-base-loading-animation);
+  --rvc-button-border-width: var(--rvc-base-border-width);
+  --rvc-button-box-shadow: var(--rvc-base-box-shadow);
+  --rvc-button-height: calc(var(--spacing) * 9);
+  --rvc-button-padding-x: calc(var(--spacing) * 3);
+  --rvc-button-gap: calc(var(--spacing) * 1.5);
+  --rvc-button-font-weight: var(--font-weight-semibold);
+  --rvc-button-font-size: var(--text-base);
+  --rvc-button-transition-property: color, background-color, border-color;
+  --rvc-button-icon-size: calc(var(--spacing) * 5);
+  --rvc-button-icon-loading-size: calc(var(--spacing) * 4);
+  --rvc-button-bg-color: var(--color-primary-500);
+  --rvc-button-color: var(--color-black);
+  --rvc-button-bg-color-hover: var(--color-primary-600);
+  --rvc-button-color-hover: var(--color-black);
+  --rvc-button-border-color: transparent;
+  --rvc-button-border-color-hover: transparent;
+  --rvc-button-icon-color: var(--color-slate-500);
+  --rvc-button-icon-color-hover: var(--color-slate-950);
+
+  /* Secondary variant */
+  --rvc-button-bg-color-secondary: var(--color-secondary-600);
+  --rvc-button-color-secondary: var(--color-white);
+  --rvc-button-bg-color-secondary-hover: var(--color-secondary-500);
+  --rvc-button-color-secondary-hover: var(--color-white);
+  --rvc-button-border-color-secondary: transparent;
+  --rvc-button-border-color-secondary-hover: transparent;
+  --rvc-button-icon-color-secondary: --alpha(var(--color-white) / 80%);
+  --rvc-button-icon-color-secondary-hover: var(--color-white);
+
+  /* Tertiary variant */
+  --rvc-button-bg-color-tertiary: var(--color-tertiary-600);
+  --rvc-button-color-tertiary: var(--color-white);
+  --rvc-button-bg-color-tertiary-hover: var(--color-tertiary-500);
+  --rvc-button-color-tertiary-hover: var(--color-white);
+  --rvc-button-border-color-tertiary: transparent;
+  --rvc-button-border-color-tertiary-hover: transparent;
+  --rvc-button-icon-color-tertiary: --alpha(var(--color-white) / 80%);
+  --rvc-button-icon-color-tertiary-hover: var(--color-white);
+
+  /* Light variant */
+  --rvc-button-bg-color-light: var(--color-white);
+  --rvc-button-color-light: var(--color-black);
+  --rvc-button-bg-color-light-hover: var(--color-slate-50);
+  --rvc-button-color-light-hover: var(--color-black);
+  --rvc-button-border-color-light: var(--color-slate-200);
+  --rvc-button-border-color-light-hover: var(--color-slate-200);
+  --rvc-button-icon-color-light: var(--color-slate-500);
+  --rvc-button-icon-color-light-hover: var(--color-slate-950);
+
+  /* Dark variant */
+  --rvc-button-bg-color-dark: var(--color-slate-950);
+  --rvc-button-color-dark: var(--color-white);
+  --rvc-button-bg-color-dark-hover: var(--color-slate-800);
+  --rvc-button-color-dark-hover: var(--color-white);
+  --rvc-button-border-color-dark: transparent;
+  --rvc-button-border-color-dark-hover: transparent;
+  --rvc-button-icon-color-dark: --alpha(var(--color-white) / 80%);
+  --rvc-button-icon-color-dark-hover: var(--color-white);
+
+  /* Red variant */
+  --rvc-button-bg-color-red: var(--color-red-600);
+  --rvc-button-color-red: var(--color-white);
+  --rvc-button-bg-color-red-hover: var(--color-red-500);
+  --rvc-button-color-red-hover: var(--color-white);
+  --rvc-button-border-color-red: transparent;
+  --rvc-button-border-color-red-hover: transparent;
+  --rvc-button-icon-color-red: --alpha(var(--color-white) / 80%);
+  --rvc-button-icon-color-red-hover: var(--color-white);
+
+  /* Red-soft variant */
+  --rvc-button-bg-color-red-soft: var(--color-red-50);
+  --rvc-button-color-red-soft: var(--color-red-700);
+  --rvc-button-bg-color-red-soft-hover: var(--color-red-200);
+  --rvc-button-color-red-soft-hover: var(--color-red-700);
+  --rvc-button-border-color-red-soft: var(--color-red-200);
+  --rvc-button-border-color-red-soft-hover: var(--color-red-200);
+  --rvc-button-icon-color-red-soft: var(--color-red-500);
+  --rvc-button-icon-color-red-soft-hover: var(--color-red-700);
+
+  /* Yellow variant */
+  --rvc-button-bg-color-yellow: var(--color-yellow-300);
+  --rvc-button-color-yellow: var(--color-slate-950);
+  --rvc-button-bg-color-yellow-hover: var(--color-yellow-400);
+  --rvc-button-color-yellow-hover: var(--color-slate-950);
+  --rvc-button-border-color-yellow: transparent;
+  --rvc-button-border-color-yellow-hover: transparent;
+  --rvc-button-icon-color-yellow: var(--color-slate-700);
+  --rvc-button-icon-color-yellow-hover: var(--color-slate-950);
+
+  /* Yellow-soft variant */
+  --rvc-button-bg-color-yellow-soft: var(--color-yellow-50);
+  --rvc-button-color-yellow-soft: var(--color-yellow-700);
+  --rvc-button-bg-color-yellow-soft-hover: var(--color-yellow-200);
+  --rvc-button-color-yellow-soft-hover: var(--color-yellow-700);
+  --rvc-button-border-color-yellow-soft: var(--color-yellow-200);
+  --rvc-button-border-color-yellow-soft-hover: var(--color-yellow-200);
+  --rvc-button-icon-color-yellow-soft: var(--color-yellow-500);
+  --rvc-button-icon-color-yellow-soft-hover: var(--color-yellow-700);
+
+  /* Green variant */
+  --rvc-button-bg-color-green: var(--color-green-600);
+  --rvc-button-color-green: var(--color-white);
+  --rvc-button-bg-color-green-hover: var(--color-green-500);
+  --rvc-button-color-green-hover: var(--color-white);
+  --rvc-button-border-color-green: transparent;
+  --rvc-button-border-color-green-hover: transparent;
+  --rvc-button-icon-color-green: --alpha(var(--color-white) / 80%);
+  --rvc-button-icon-color-green-hover: var(--color-white);
+
+  /* Green-soft variant */
+  --rvc-button-bg-color-green-soft: var(--color-green-50);
+  --rvc-button-color-green-soft: var(--color-green-700);
+  --rvc-button-bg-color-green-soft-hover: var(--color-green-200);
+  --rvc-button-color-green-soft-hover: var(--color-green-700);
+  --rvc-button-border-color-green-soft: var(--color-green-200);
+  --rvc-button-border-color-green-soft-hover: var(--color-green-200);
+  --rvc-button-icon-color-green-soft: var(--color-green-500);
+  --rvc-button-icon-color-green-soft-hover: var(--color-green-700);
+
+  /* Blue variant */
+  --rvc-button-bg-color-blue: var(--color-blue-600);
+  --rvc-button-color-blue: var(--color-white);
+  --rvc-button-bg-color-blue-hover: var(--color-blue-500);
+  --rvc-button-color-blue-hover: var(--color-white);
+  --rvc-button-border-color-blue: transparent;
+  --rvc-button-border-color-blue-hover: transparent;
+  --rvc-button-icon-color-blue: --alpha(var(--color-white) / 80%);
+  --rvc-button-icon-color-blue-hover: var(--color-white);
+
+  /* Blue-soft variant */
+  --rvc-button-bg-color-blue-soft: var(--color-blue-50);
+  --rvc-button-color-blue-soft: var(--color-blue-700);
+  --rvc-button-bg-color-blue-soft-hover: var(--color-blue-200);
+  --rvc-button-color-blue-soft-hover: var(--color-blue-700);
+  --rvc-button-border-color-blue-soft: var(--color-blue-200);
+  --rvc-button-border-color-blue-soft-hover: var(--color-blue-200);
+  --rvc-button-icon-color-blue-soft: var(--color-blue-500);
+  --rvc-button-icon-color-blue-soft-hover: var(--color-blue-700);
+
+  /* Clear variant */
+  --rvc-button-bg-color-clear: transparent;
+  --rvc-button-color-clear: var(--color-indigo-600);
+  --rvc-button-bg-color-clear-hover: transparent;
+  --rvc-button-color-clear-hover: var(--color-indigo-700);
+  --rvc-button-border-color-clear: transparent;
+  --rvc-button-border-color-clear-hover: transparent;
+  --rvc-button-icon-color-clear: var(--color-indigo-600);
+  --rvc-button-icon-color-clear-hover: var(--color-indigo-700);
+
+  /* Small variant */
+  --rvc-button-height-sm: 1.875rem;
+  --rvc-button-padding-x-sm: calc(var(--spacing) * 2.5);
+  --rvc-button-font-size-sm: var(--text-sm);
+  --rvc-button-icon-size-sm: calc(var(--spacing) * 4);
+  --rvc-button-icon-loading-size-sm: calc(var(--spacing) * 3);
+}
+
+@layer components {
+  .rvc-button {
+    height: var(--rvc-button-height);
+    border-width: var(--rvc-button-border-width);
+    border-color: var(--rvc-button-border-color);
+    transition-property: var(--rvc-button-transition-property);
+    transition-duration: var(--rvc-button-transition-duration);
+    transition-timing-function: var(--rvc-button-transition-timing-function);
+    padding-inline: var(--rvc-button-padding-x);
+    gap: var(--rvc-button-gap);
+    border-radius: var(--rvc-button-border-radius);
+    font-weight: var(--rvc-button-font-weight);
+    font-size: var(--rvc-button-font-size);
+    background-color: var(--rvc-button-bg-color);
+    color: var(--rvc-button-color);
+    box-shadow: var(--rvc-button-box-shadow);
+    appearance: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-style: solid;
+    position: relative;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--rvc-button-bg-color-hover);
+      color: var(--rvc-button-color-hover);
+      border-color: var(--rvc-button-border-color-hover);
+
+      & .rvc-button-icon {
+        color: var(--rvc-button-icon-color-hover);
+      }
+    }
+
+    &:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .rvc-button-icon {
+      width: var(--rvc-button-icon-size);
+      height: var(--rvc-button-icon-size);
+      color: var(--rvc-button-icon-color);
+      transition-property: var(--rvc-button-transition-property);
+      transition-duration: var(--rvc-button-transition-duration);
+      transition-timing-function: var(--rvc-button-transition-timing-function);
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .rvc-button-icon.rvc-button-icon-loading {
+      width: var(--rvc-button-icon-loading-size);
+      height: var(--rvc-button-icon-loading-size);
+      animation: var(--rvc-button-icon-loading-animation);
+    }
+
+    &.rvc-button-icon-only {
+      padding: 0;
+      aspect-ratio: 1 / 1;
+    }
+
+    &.rvc-button-reverse {
+      flex-direction: row-reverse;
+    }
+
+    &.rvc-button-secondary {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-secondary);
+      --rvc-button-color: var(--rvc-button-color-secondary);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-secondary-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-secondary-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-secondary);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-secondary-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-secondary);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-secondary-hover);
+    }
+
+    &.rvc-button-tertiary {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-tertiary);
+      --rvc-button-color: var(--rvc-button-color-tertiary);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-tertiary-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-tertiary-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-tertiary);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-tertiary-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-tertiary);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-tertiary-hover);
+    }
+
+    &.rvc-button-light {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-light);
+      --rvc-button-color: var(--rvc-button-color-light);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-light-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-light-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-light);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-light-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-light);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-light-hover);
+    }
+
+    &.rvc-button-dark {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-dark);
+      --rvc-button-color: var(--rvc-button-color-dark);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-dark-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-dark-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-dark);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-dark-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-dark);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-dark-hover);
+    }
+
+    &.rvc-button-red {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-red);
+      --rvc-button-color: var(--rvc-button-color-red);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-red-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-red-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-red);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-red-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-red);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-red-hover);
+    }
+
+    &.rvc-button-red-soft {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-red-soft);
+      --rvc-button-color: var(--rvc-button-color-red-soft);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-red-soft-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-red-soft-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-red-soft);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-red-soft-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-red-soft);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-red-soft-hover);
+    }
+
+    &.rvc-button-yellow {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-yellow);
+      --rvc-button-color: var(--rvc-button-color-yellow);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-yellow-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-yellow-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-yellow);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-yellow-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-yellow);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-yellow-hover);
+    }
+
+    &.rvc-button-yellow-soft {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-yellow-soft);
+      --rvc-button-color: var(--rvc-button-color-yellow-soft);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-yellow-soft-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-yellow-soft-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-yellow-soft);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-yellow-soft-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-yellow-soft);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-yellow-soft-hover);
+    }
+
+    &.rvc-button-green {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-green);
+      --rvc-button-color: var(--rvc-button-color-green);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-green-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-green-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-green);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-green-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-green);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-green-hover);
+    }
+
+    &.rvc-button-green-soft {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-green-soft);
+      --rvc-button-color: var(--rvc-button-color-green-soft);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-green-soft-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-green-soft-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-green-soft);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-green-soft-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-green-soft);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-green-soft-hover);
+    }
+
+    &.rvc-button-blue {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-blue);
+      --rvc-button-color: var(--rvc-button-color-blue);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-blue-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-blue-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-blue);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-blue-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-blue);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-blue-hover);
+    }
+
+    &.rvc-button-blue-soft {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-blue-soft);
+      --rvc-button-color: var(--rvc-button-color-blue-soft);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-blue-soft-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-blue-soft-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-blue-soft);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-blue-soft-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-blue-soft);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-blue-soft-hover);
+    }
+
+    &.rvc-button-clear {
+      --rvc-button-bg-color: var(--rvc-button-bg-color-clear);
+      --rvc-button-color: var(--rvc-button-color-clear);
+      --rvc-button-bg-color-hover: var(--rvc-button-bg-color-clear-hover);
+      --rvc-button-color-hover: var(--rvc-button-color-clear-hover);
+      --rvc-button-border-color: var(--rvc-button-border-color-clear);
+      --rvc-button-border-color-hover: var(--rvc-button-border-color-clear-hover);
+      --rvc-button-icon-color: var(--rvc-button-icon-color-clear);
+      --rvc-button-icon-color-hover: var(--rvc-button-icon-color-clear-hover);
+
+      padding-inline: 0;
+      box-shadow: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &.rvc-button-sm {
+      --rvc-button-height: var(--rvc-button-height-sm);
+      --rvc-button-padding-x: var(--rvc-button-padding-x-sm);
+      --rvc-button-font-size: var(--rvc-button-font-size-sm);
+      --rvc-button-icon-size: var(--rvc-button-icon-size-sm);
+      --rvc-button-icon-loading-size: var(--rvc-button-icon-loading-size-sm);
+
+      &.rvc-button-icon-only {
+        padding: 0;
+      }
+    }
+  }
+}