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

package/dist/core/input.css

@@ -0,0 +1,92 @@
+:root {
+  --rvc-input-border-radius: var(--rvc-base-border-radius);
+  --rvc-input-border-width: var(--rvc-base-border-width);
+  --rvc-input-border-color: var(--rvc-base-border-color);
+  --rvc-input-font-size: var(--rvc-base-input-font-size);
+  --rvc-input-font-weight: var(--rvc-base-input-font-weight);
+  --rvc-input-box-shadow: var(--rvc-base-box-shadow);
+  --rvc-input-color: var(--rvc-base-input-color);
+  --rvc-input-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-input-icon-size: var(--rvc-base-input-icon-size);
+  --rvc-input-icon-color: var(--rvc-base-input-icon-color);
+  --rvc-input-padding-x: var(--rvc-base-input-padding-x);
+  --rvc-input-height: var(--rvc-base-input-height);
+  --rvc-input-placeholder-color: var(--rvc-base-input-placeholder-color);
+
+  /* Small variant */
+  --rvc-input-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
+  --rvc-input-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
+  --rvc-input-icon-size-sm: calc(var(--rvc-base-input-icon-size) * 0.85);
+  --rvc-input-height-sm: 1.875rem;
+}
+
+@layer components {
+  .rvc-input {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    input {
+      border-radius: var(--rvc-input-border-radius);
+      border-width: var(--rvc-input-border-width);
+      border-color: var(--rvc-input-border-color);
+      padding-inline: var(--rvc-input-padding-x);
+      background-color: var(--rvc-input-bg-color);
+      font-size: var(--rvc-input-font-size);
+      font-weight: var(--rvc-input-font-weight);
+      color: var(--rvc-input-color);
+      box-shadow: var(--rvc-input-box-shadow);
+      height: var(--rvc-input-height);
+      background-image: none;
+      width: 100%;
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      outline-width: 0;
+
+      &:nth-child(2) {
+        padding-left: calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem);
+      }
+
+      &::placeholder {
+        color: var(--rvc-input-placeholder-color);
+      }
+    }
+
+    &:has(svg:last-child) input {
+      padding-right: calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem);
+    }
+
+    .rvc-input-prefix, svg {
+      color: var(--rvc-input-icon-color);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      align-self: center;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .rvc-input-prefix {
+      margin-left: var(--rvc-input-padding-x);
+      justify-self: start;
+    }
+
+    svg {
+      width: var(--rvc-input-icon-size);
+      height: var(--rvc-input-icon-size);
+      justify-self: end;
+
+      &:last-child:not(:first-child) {
+        margin-right: var(--rvc-input-padding-x);
+      }
+    }
+
+    &.rvc-input-sm {
+      --rvc-input-font-size: var(--rvc-input-font-size-sm);
+      --rvc-input-padding-x: var(--rvc-input-padding-x-sm);
+      --rvc-input-icon-size: var(--rvc-input-icon-size-sm);
+      --rvc-input-height: var(--rvc-input-height-sm);
+    }
+  }
+}

package/dist/core/pagination.css

@@ -0,0 +1,48 @@
+:root {
+  --rvc-pagination-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-pagination-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-pagination-border-radius: var(--radius-md);
+  --rvc-pagination-size: calc(var(--spacing) * 6);
+  --rvc-pagination-font-size: var(--text-sm);
+  --rvc-pagination-font-weight: var(--font-weight-normal);
+  --rvc-pagination-font-weight-active: var(--font-weight-semibold);
+  --rvc-pagination-color: var(--color-slate-600);
+  --rvc-pagination-color-active: var(--color-slate-800);
+  --rvc-pagination-bg-color: transparent;
+  --rvc-pagination-bg-color-hover: var(--color-slate-100);
+  --rvc-pagination-info-color: var(--color-slate-400);
+  --rvc-pagination-info-font-size: var(--text-sm);
+}
+
+@layer components {
+  .rvc-pagination {
+    .rvc-pagination-button {
+      border-radius: var(--rvc-pagination-border-radius);
+      width: var(--rvc-pagination-size);
+      height: var(--rvc-pagination-size);
+      font-size: var(--rvc-pagination-font-size);
+      font-weight: var(--rvc-pagination-font-weight);
+      color: var(--rvc-pagination-color);
+      background-color: var(--rvc-pagination-bg-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      transition: color, background-color var(--rvc-pagination-transition-duration) var(--rvc-pagination-transition-timing-function);
+
+      &.rvc-pagination-button-active {
+        font-weight: var(--rvc-pagination-font-weight-active);
+        color: var(--rvc-pagination-color-active);
+      }
+
+      &:not([disabled]):hover {
+        background-color: var(--rvc-pagination-bg-color-hover);
+      }
+    }
+
+    .rvc-pagination-info {
+      font-size: var(--rvc-pagination-info-font-size);
+      color: var(--rvc-pagination-info-color);
+    }
+  }
+}

package/dist/core/radio.css

@@ -0,0 +1,61 @@
+:root {
+  --rvc-radio-input-box-shadow: var(--rvc-base-box-shadow);
+  --rvc-radio-input-border-color: var(--rvc-base-border-color);
+  --rvc-radio-gap: calc(var(--spacing) * 2);
+  --rvc-radio-font-size: var(--text-base);
+  --rvc-radio-font-weight: var(--font-weight-medium);
+  --rvc-radio-color: var(--color-slate-950);
+  --rvc-radio-input-size: calc(var(--spacing) * 4);
+  --rvc-radio-input-border-radius: calc(infinity * 1px);
+  --rvc-radio-input-border-width: 1px;
+  --rvc-radio-input-checked-bg-color: var(--color-indigo-600);
+  --rvc-radio-input-checked-border-color: var(--color-indigo-600);
+  --rvc-radio-input-checked-icon-color: var(--color-white);
+}
+
+@layer components {
+  .rvc-radio {
+    gap: var(--rvc-radio-gap);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+
+    label {
+      font-size: var(--rvc-radio-font-size);
+      font-weight: var(--rvc-radio-font-weight);
+      color: var(--rvc-radio-color);
+    }
+
+    .rvc-radio-input {
+      width: var(--rvc-radio-input-size);
+      height: var(--rvc-radio-input-size);
+      border-radius: var(--rvc-radio-input-border-radius);
+      border-width: var(--rvc-radio-input-border-width);
+      border-color: var(--rvc-radio-input-border-color);
+      box-shadow: var(--rvc-radio-input-box-shadow);
+      margin-top: calc(var(--spacing) * 1);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &::before {
+        content: "";
+        width: calc(var(--spacing) * 1.5);
+        height: calc(var(--spacing) * 1.5);
+        border-radius: calc(infinity * 1px);
+        background-color: var(--rvc-radio-input-checked-icon-color);
+        opacity: 0;
+      }
+    }
+
+    input:checked + .rvc-radio-input {
+      background-color: var(--rvc-radio-input-checked-bg-color);
+      border-color: var(--rvc-radio-input-checked-border-color);
+
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+}

package/dist/core/select.css

@@ -0,0 +1,81 @@
+:root {
+  --rvc-select-border-radius: var(--rvc-base-border-radius);
+  --rvc-select-border-width: var(--rvc-base-border-width);
+  --rvc-select-border-color: var(--rvc-base-border-color);
+  --rvc-select-font-size: var(--rvc-base-input-font-size);
+  --rvc-select-font-weight: var(--rvc-base-input-font-weight);
+  --rvc-select-box-shadow: var(--rvc-base-box-shadow);
+  --rvc-select-color: var(--rvc-base-input-color);
+  --rvc-select-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-select-icon-size: var(--rvc-base-input-icon-size);
+  --rvc-select-icon-color: var(--rvc-base-input-icon-color);
+  --rvc-select-padding-x: var(--rvc-base-input-padding-x);
+  --rvc-select-height: var(--rvc-base-input-height);
+  --rvc-select-placeholder-color: var(--rvc-base-input-placeholder-color);
+
+  /* Small variant */
+  --rvc-select-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
+  --rvc-select-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
+  --rvc-select-icon-size-sm: calc(var(--rvc-base-input-icon-size) * 0.85);
+  --rvc-select-height-sm: 1.875rem;
+}
+
+@layer components {
+  .rvc-select {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    select {
+      border-radius: var(--rvc-select-border-radius);
+      border-width: var(--rvc-select-border-width);
+      border-color: var(--rvc-select-border-color);
+      padding-right: calc(var(--rvc-select-padding-x) + var(--rvc-select-icon-size) + 0.25rem);
+      padding-left: var(--rvc-select-padding-x);
+      background-color: var(--rvc-select-bg-color);
+      background-image: none;
+      font-size: var(--rvc-select-font-size);
+      font-weight: var(--rvc-select-font-weight);
+      color: var(--rvc-select-color);
+      box-shadow: var(--rvc-select-box-shadow);
+      height: var(--rvc-select-height);
+      width: 100%;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      outline-width: 0;
+
+      &:nth-child(2) {
+        padding-left: calc(var(--rvc-select-padding-x) + var(--rvc-select-icon-size) + 0.25rem);
+      }
+    }
+
+    svg {
+      width: var(--rvc-select-icon-size);
+      height: var(--rvc-select-icon-size);
+      color: var(--rvc-select-icon-color);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      align-self: center;
+      justify-self: end;
+      pointer-events: none;
+      z-index: 1;
+
+      &:first-child {
+        justify-self: start;
+        margin-left: var(--rvc-select-padding-x);
+      }
+
+      &:last-child {
+        margin-right: var(--rvc-select-padding-x);
+      }
+    }
+
+    &.rvc-select-sm {
+      --rvc-select-font-size: var(--rvc-select-font-size-sm);
+      --rvc-select-padding-x: var(--rvc-select-padding-x-sm);
+      --rvc-select-icon-size: var(--rvc-select-icon-size-sm);
+      --rvc-select-height: var(--rvc-select-height-sm);
+    }
+  }
+}

package/dist/core/styles.css

@@ -0,0 +1,92 @@
+@import "./accordion.css";
+@import "./alert.css";
+@import "./badge.css";
+@import "./button.css";
+@import "./checkbox.css";
+@import "./empty-state.css";
+@import "./input.css";
+@import "./pagination.css";
+@import "./radio.css";
+@import "./select.css";
+@import "./table.css";
+@import "./tabs.css";
+@import "./textarea.css";
+
+:root {
+  /* Base Focus Variables */
+  --rvc-base-focus-outline-style: dashed;
+  --rvc-base-focus-outline-offset: 0.0625rem;
+  --rvc-base-focus-outline-width: 0.0625rem;
+  --rvc-base-focus-outline-color: var(--color-indigo-600);
+
+  /* Base Variables */
+  --rvc-base-border-radius: var(--radius-md);
+  --rvc-base-transition-duration: var(--default-transition-duration);
+  --rvc-base-transition-timing-function: var(--default-transition-timing-function);
+  --rvc-base-loading-animation: var(--animate-spin);
+  --rvc-base-border-width: 1px;
+  --rvc-base-border-style: solid;
+  --rvc-base-border-color: #d6dce9;
+  --rvc-base-border-dark-color: var(--color-slate-300);
+  --rvc-base-box-shadow: none;
+  --rvc-base-font-size: 0.9375rem;
+  --rvc-base-line-height: 1.5rem;
+
+  /* Dialogs Variables */
+  --rvc-dialog-backdrop-bg-color: --alpha(var(--color-slate-900) / 50%);
+  --rvc-dialog-padding-x: calc(var(--spacing) * 4);
+  --rvc-dialog-padding-y: calc(var(--spacing) * 4);
+  --rvc-dialog-header-bg-color: var(--color-white);
+  --rvc-dialog-close-size: calc(var(--spacing) * 6);
+  --rvc-dialog-close-color: var(--color-slate-700);
+  --rvc-dialog-close-color-hover: var(--color-slate-900);
+  --rvc-dialog-title-color: var(--color-slate-900);
+  --rvc-dialog-title-font-size: var(--text-xl);
+  --rvc-dialog-title-font-weight: var(--font-weight-bold);
+  --rvc-dialog-title-font-family: var(--font-sans);
+  --rvc-dialog-content-bg-color: var(--color-white);
+  --rvc-dialog-footer-bg-color: var(--color-slate-50);
+  --rvc-dialog-footer-gap: calc(var(--spacing) * 2);
+
+  /* Input Variables */
+  --rvc-base-input-color: var(--color-slate-600);
+  --rvc-base-input-bg-color: var(--color-white);
+  --rvc-base-input-icon-color: var(--color-slate-400);
+  --rvc-base-input-icon-size: calc(var(--spacing) * 5);
+  --rvc-base-input-padding-x: calc(var(--spacing) * 3);
+  --rvc-base-input-font-size: var(--rvc-base-font-size);
+  --rvc-base-input-font-weight: var(--font-weight-normal);
+  --rvc-base-input-height: calc(var(--spacing) * 9);
+  --rvc-base-input-placeholder-color: var(--color-slate-400);
+}
+
+@media (width >= 40rem) {
+  :root {
+    --rvc-dialog-padding-x: calc(var(--spacing) * 6);
+    --rvc-dialog-padding-y: calc(var(--spacing) * 4);
+    --rvc-dialog-footer-gap: calc(var(--spacing) * 3);
+  }
+}
+
+@layer utilities {
+  [class^="rvc-"] *:focus,
+  [class^="rvc-"]:focus {
+    outline-style: var(--rvc-base-focus-outline-style);
+    outline-width: var(--rvc-base-focus-outline-offset);
+    outline-offset: var(--rvc-base-focus-outline-width);
+    outline-color: var(--rvc-base-focus-outline-color);
+  }
+}
+
+@utility rvc-focus {
+  outline-style: var(--rvc-base-focus-outline-style);
+  outline-width: var(--rvc-base-focus-outline-offset);
+  outline-offset: var(--rvc-base-focus-outline-width);
+  outline-color: var(--rvc-base-focus-outline-color);
+}
+
+@layer base {
+  button, [role=button] {
+    cursor: pointer;
+  }
+}

package/dist/core/table.css

@@ -0,0 +1,87 @@
+:root {
+  --rvc-table-wrapper-border-radius: 0;
+  --rvc-table-head-border-color: var(--rvc-base-border-dark-color);
+  --rvc-table-border-color: var(--rvc-base-border-color);
+  --rvc-table-border-style: var(--rvc-base-border-style);
+  --rvc-table-border-width: var(--rvc-base-border-width);
+  --rvc-table-head-bg-color: var(--color-slate-200);
+  --rvc-table-bg-color: var(--color-slate-50);
+  --rvc-table-font-size: var(--text-sm);
+  --rvc-table-head-font-size: var(--text-sm);
+  --rvc-table-head-font-weight: var(--font-weight-medium);
+  --rvc-table-font-weight: var(--font-weight-normal);
+  --rvc-table-padding-x: calc(var(--spacing) * 2);
+  --rvc-table-padding-y: calc(var(--spacing) * 3);
+  --rvc-table-white-space: nowrap;
+  --rvc-table-line-height: 1.1;
+  --rvc-table-spinner-size: calc(var(--spacing) * 5);
+}
+
+@layer components {
+  .rvc-table-wrapper {
+    overflow-x: auto;
+    padding-bottom: calc(var(--spacing) * 4);
+    border-radius: var(--rvc-table-wrapper-border-radius);
+  }
+
+  .rvc-table {
+    &.rvc-table-striped {
+      thead th {
+        padding-inline: var(--rvc-table-padding-x);
+        background-color: var(--rvc-table-head-bg-color);
+      }
+
+      tr:nth-of-type(even) td {
+        background-color: var(--rvc-table-bg-color);
+      }
+
+      td {
+        padding-inline: var(--rvc-table-padding-x);
+      }
+    }
+
+    &:not(.rvc-table-striped) {
+      thead th {
+        border-bottom: var(--rvc-table-border-width) var(--rvc-table-border-style) var(--rvc-table-head-border-color);
+
+        &:not(:first-child,:last-child) {
+          padding-inline: var(--rvc-table-padding-x);
+        }
+      }
+
+      tr:not(:last-child) td {
+        border-bottom: var(--rvc-table-border-width) var (--rvc-table-border-style) var(--rvc-table-border-color);
+      }
+
+      td:not(:first-child,:last-child) {
+        padding-inline: var(--rvc-table-padding-x);
+      }
+    }
+
+    th {
+      padding-block: var(--rvc-table-padding-y);
+      font-weight: var(--rvc-table-head-font-weight);
+      font-size: var(--rvc-table-head-font-size);
+      line-height: var(--rvc-table-line-height);
+      white-space: var(--rvc-table-white-space);
+    }
+
+    td {
+      padding-block: var(--rvc-table-padding-y);
+      font-weight: var(--rvc-table-font-weight);
+      font-size: var(--rvc-table-font-size);
+      line-height: var(--rvc-table-line-height);
+      white-space: var(--rvc-table-white-space);
+    }
+
+    .rvc-table-spinner {
+      animation: spin 1s linear infinite;
+      width: var(--rvc-table-spinner-size);
+      height: var(--rvc-table-spinner-size);
+    }
+
+    td.rvc-table-state {
+      border-bottom: var(--rvc-table-border-width) var(--rvc-table-border-style) var(--rvc-table-border-color);
+    }
+  }
+}

package/dist/core/tabs.css

@@ -0,0 +1,74 @@
+:root {
+  --rvc-tabs-border-width: var(--rvc-base-border-width);
+  --rvc-tabs-border-color: var(--rvc-base-border-color);
+  --rvc-tabs-tab-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-tabs-tab-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-tabs-tab-button-border-radius: var(--rvc-base-border-radius);
+  --rvc-tabs-gap: calc(var(--spacing) * 10);
+  --rvc-tabs-buttons-gap: calc(var(--spacing) * 4);
+  --rvc-tabs-tab-color: var(--color-slate-600);
+  --rvc-tabs-tab-font-weight: var(--font-weight-medium);
+  --rvc-tabs-tab-border-width: 2px;
+  --rvc-tabs-tab-padding-bottom: calc(var(--spacing) * 4);
+  --rvc-tabs-tab-color-hover: var(--color-slate-700);
+  --rvc-tabs-tab-border-color-hover: var(--color-slate-600);
+  --rvc-tabs-tab-active-color: var(--color-indigo-600);
+  --rvc-tabs-tab-active-border-color: var(--color-indigo-600);
+  --rvc-tabs-tab-button-height: calc(var(--spacing) * 9);
+  --rvc-tabs-tab-button-padding-x: calc(var(--spacing) * 3);
+  --rvc-tabs-tab-active-button-bg-color: var(--color-indigo-100);
+}
+
+@layer components {
+  .rvc-tabs {
+    border-bottom: var(--rvc-tabs-border-width) solid var(--rvc-tabs-border-color);
+
+    &.rvc-tabs-buttons {
+      border-bottom: 0;
+
+      .rvc-tabs-nav {
+        gap: var(--rvc-tabs-buttons-gap);
+        margin-bottom: 0;
+      }
+
+      .rvc-tab {
+        padding-inline: var(--rvc-tabs-tab-button-padding-x);
+        height: var(--rvc-tabs-tab-button-height);
+        border-radius: var(--rvc-tabs-tab-button-border-radius);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-bottom: 0;
+        padding-bottom: 0;
+
+        &.rvc-tab-active {
+          background-color: var(--rvc-tabs-tab-active-button-bg-color);
+        }
+      }
+    }
+
+    .rvc-tabs-nav {
+      display: flex;
+      gap: var(--rvc-tabs-gap);
+      margin-bottom: calc(var(--rvc-tabs-border-width) * -1);
+    }
+
+    .rvc-tab {
+      color: var(--rvc-tabs-tab-color);
+      font-weight: var(--rvc-tabs-tab-font-weight);
+      border-bottom: var(--rvc-tabs-tab-border-width) solid transparent;
+      padding-bottom: var(--rvc-tabs-tab-padding-bottom);
+      transition: all var(--rvc-tabs-tab-transition-duration) var(--rvc-tabs-tab-transition-timing-function);
+
+      &:hover {
+        color: var(--rvc-tabs-tab-color-hover);
+        border-color: var(--rvc-tabs-tab-border-color-hover);
+      }
+
+      &.rvc-tab-active {
+        color: var(--rvc-tabs-tab-active-color);
+        border-color: var(--rvc-tabs-tab-active-border-color);
+      }
+    }
+  }
+}

package/dist/core/textarea.css

@@ -0,0 +1,48 @@
+:root {
+  --rvc-textarea-border-radius: var(--rvc-base-border-radius);
+  --rvc-textarea-border-width: var(--rvc-base-border-width);
+  --rvc-textarea-border-color: var(--rvc-base-border-color);
+  --rvc-textarea-font-size: var(--rvc-base-input-font-size);
+  --rvc-textarea-font-weight: var(--rvc-base-input-font-weight);
+  --rvc-textarea-box-shadow: var(--rvc-base-box-shadow);
+  --rvc-textarea-color: var(--rvc-base-input-color);
+  --rvc-textarea-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-textarea-padding-x: var(--rvc-base-input-padding-x);
+  --rvc-textarea-padding-y: calc(var(--spacing) * 1.5);
+  --rvc-textarea-height: var(--rvc-base-input-height);
+  --rvc-textarea-placeholder-color: var(--rvc-base-input-placeholder-color);
+
+  /* Small variant */
+  --rvc-textarea-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
+  --rvc-textarea-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
+  --rvc-textarea-padding-y-sm: calc(var(--spacing) * 1.125);
+  --rvc-textarea-height-sm: 1.875rem;
+}
+
+@layer components {
+  .rvc-textarea {
+    border-radius: var(--rvc-textarea-border-radius);
+    border-width: var(--rvc-textarea-border-width);
+    border-color: var(--rvc-textarea-border-color);
+    padding: var(--rvc-textarea-padding-y) var(--rvc-textarea-padding-x);
+    background-color: var(--rvc-textarea-bg-color);
+    font-size: var(--rvc-textarea-font-size);
+    font-weight: var(--rvc-textarea-font-weight);
+    color: var(--rvc-textarea-color);
+    box-shadow: var(--rvc-textarea-box-shadow);
+    min-height: var(--rvc-textarea-height);
+    display: block;
+    background-image: none;
+    width: 100%;
+    position: relative;
+    appearance: none;
+    outline-width: 0;
+
+    &.rvc-textarea-sm {
+      --rvc-textarea-font-size: var(--rvc-textarea-font-size-sm);
+      --rvc-textarea-padding-x: var(--rvc-textarea-padding-x-sm);
+      --rvc-textarea-padding-y: var(--rvc-textarea-padding-y-sm);
+      --rvc-textarea-height: var(--rvc-textarea-height-sm);
+    }
+  }
+}

package/dist/core/theme.css

@@ -0,0 +1,11 @@
+@theme {
+  --color-primary-500: #d9ff00;
+  --color-primary-600: #c1e012;
+  --color-secondary-500: #6366f1;
+  --color-secondary-600: #4f46e5;
+  --color-tertiary-500: #64748b;
+  --color-tertiary-600: #475569;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --font-sans: "Inter", sans-serif;
+}

package/dist/dialogs/drawer.css

@@ -0,0 +1,72 @@
+:root {
+  --rvc-drawer-backdrop-bg-color: var(--rvc-dialog-backdrop-bg-color);
+  --rvc-drawer-padding-x: var(--rvc-dialog-padding-x);
+  --rvc-drawer-padding-y: var(--rvc-dialog-padding-y);
+  --rvc-drawer-border-color: var(--rvc-base-border-color);
+  --rvc-drawer-border-width: var(--rvc-base-border-width);
+  --rvc-drawer-border-style: var(--rvc-base-border-style);
+  --rvc-drawer-header-bg-color: var(--rvc-dialog-header-bg-color);
+  --rvc-drawer-title-font-size: var(--rvc-dialog-title-font-size);
+  --rvc-drawer-title-font-weight: var(--rvc-dialog-title-font-weight);
+  --rvc-drawer-title-font-family: var(--rvc-dialog-title-font-family);
+  --rvc-drawer-title-color: var(--rvc-dialog-title-color);
+  --rvc-drawer-close-size: var(--rvc-dialog-close-size);
+  --rvc-drawer-close-color: var(--rvc-dialog-close-color);
+  --rvc-drawer-close-color-hover: var(--rvc-dialog-close-color-hover);
+  --rvc-drawer-content-bg-color: var(--rvc-dialog-content-bg-color);
+  --rvc-drawer-footer-bg-color: var(--rvc-dialog-footer-bg-color);
+  --rvc-drawer-footer-gap: var(--rvc-dialog-footer-gap);
+  --rvc-drawer-footer-justify-content: space-between;
+}
+
+@layer components {
+  .rvc-drawer {
+    z-index: 500;
+    position: relative;
+
+    .rvc-drawer-backdrop {
+      background-color: var(--rvc-drawer-backdrop-bg-color);
+    }
+
+    .rvc-drawer-header {
+      padding: var(--rvc-drawer-padding-y) var(--rvc-drawer-padding-x);
+      border-bottom-width: var(--rvc-drawer-border-width);
+      border-bottom-style: var(--rvc-drawer-border-style);
+      border-color: var(--rvc-drawer-border-color);
+      background-color: var(--rvc-drawer-header-bg-color);
+    }
+
+    .rvc-drawer-title {
+      font-size: var(--rvc-drawer-title-font-size);
+      font-weight: var(--rvc-drawer-title-font-weight);
+      font-family: var(--rvc-drawer-title-font-family);
+      color: var(--rvc-drawer-title-color);
+    }
+
+    .rvc-drawer-close {
+      width: var(--rvc-drawer-close-size);
+      height: var(--rvc-drawer-close-size);
+      color: var(--rvc-drawer-close-color);
+
+      &:hover {
+        color: var(--rvc-drawer-close-color-hover);
+      }
+    }
+
+    .rvc-drawer-content {
+      padding-block: var(--rvc-drawer-padding-y);
+      padding-inline: var(--rvc-drawer-padding-x);
+      background-color: var(--rvc-drawer-content-bg-color);
+    }
+
+    .rvc-drawer-footer {
+      padding: var(--rvc-drawer-padding-y) var(--rvc-drawer-padding-x);
+      border-top-width: var(--rvc-drawer-border-width);
+      border-top-style: var(--rvc-drawer-border-style);
+      border-color: var(--rvc-drawer-border-color);
+      background-color: var(--rvc-drawer-footer-bg-color);
+      gap: var(--rvc-drawer-footer-gap);
+      justify-content: var(--rvc-drawer-footer-justify-content);
+    }
+  }
+}