@redseed/redseed-ui-tailwindcss 7.65.0 → 7.66.0

package/components/form_field_tree_select.css

@@ -8,7 +8,7 @@
 
 .rsui-form-field-tree-select__trigger {
     @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
-    @apply py-3 px-5 truncate text-left;
+    @apply py-space-sm px-5 truncate text-left;
     @apply text-base rounded-lg outline-hidden focus:outline-hidden;
     @apply bg-background-primary text-text-primary placeholder-text-secondary border-border-primary;
     @apply focus:border-border-primary;
@@ -21,31 +21,31 @@
 }
 
 .rsui-form-field-tree-select__modal-header {
-    @apply flex flex-col gap-y-2 xs:gap-y-0 xs:flex-row xs:items-center xs:justify-between;
+    @apply flex flex-col gap-y-space-xs xs:gap-y-0 xs:flex-row xs:items-center xs:justify-between;
 }
 
 .rsui-form-field-tree-select__search {
-    @apply mb-4;
+    @apply mb-space-md;
 }
 
 .rsui-form-field-tree-select__tree {
-    @apply max-h-96 flex flex-col gap-3 overflow-y-auto pt-1 pl-1;
+    @apply max-h-96 flex flex-col gap-space-sm overflow-y-auto pt-space-xxs pl-space-xxs;
 }
 
 .rsui-form-field-tree-select-children {
-    @apply flex flex-col gap-3 ml-4 sm:ml-6 md:ml-7;
+    @apply flex flex-col gap-space-sm ml-space-md sm:ml-space-lg md:ml-7;
 }
 
 .rsui-form-field-tree-select-item {
-    @apply flex items-start gap-x-1 sm:gap-x-1 md:gap-x-2;
+    @apply flex items-start gap-x-space-xxs sm:gap-x-space-xxs md:gap-x-space-xs;
 }
 
 .rsui-form-field-tree-select-item__controls {
-    @apply flex items-start gap-x-0 sm:gap-x-1 md:gap-x-2;
+    @apply flex items-start gap-x-0 sm:gap-x-space-xxs md:gap-x-space-xs;
 }
 
 .rsui-form-field-tree-select-item__opener {
-    @apply pt-1 md:pt-0.5 w-5 text-text-secondary;
+    @apply pt-space-xxs md:pt-0.5 w-5 text-text-secondary;
 }
 
 .rsui-form-field-tree-select-item__opener--clickable {
@@ -61,7 +61,7 @@
 }
 
 .rsui-form-field-tree-select-item__name {
-    @apply font-medium select-none cursor-pointer text-xs sm:text-sm md:text-base pt-1 sm:pt-0.5 md:pt-0;
+    @apply font-medium select-none cursor-pointer text-xs sm:text-sm md:text-base pt-space-xxs sm:pt-0.5 md:pt-0;
 }
 
 .rsui-form-field-tree-select-item__name--searched {

package/components/form_field_uploader.css

@@ -2,8 +2,8 @@
     @apply w-fit max-w-80 bg-background-secondary;
     @apply relative select-none;
     @apply rounded-lg border border-border-primary border-dashed;
-    @apply flex flex-nowrap justify-center items-center gap-4;
-    @apply px-4 py-2.5;
+    @apply flex flex-nowrap justify-center items-center gap-space-md;
+    @apply px-space-md py-2.5;
 }
 
 .rsui-form-field-uploader__container--success {
@@ -11,7 +11,7 @@
 }
 
 .rsui-form-field-uploader__content {
-    @apply relative flex flex-nowrap justify-center items-center gap-4;
+    @apply relative flex flex-nowrap justify-center items-center gap-space-md;
     @apply text-text-primary;
 }
 

package/components/form_fieldset.css

@@ -3,11 +3,11 @@
 }
 
 .rsui-form-fieldset__fields {
-    @apply flex flex-col gap-3;
+    @apply flex flex-col gap-space-sm;
 }
 
 .rsui-form-fieldset__fields--padded {
-    @apply mt-3 px-2;
+    @apply mt-space-sm px-space-xs;
 }
 
 .rsui-form-fieldset__fields .rsui-form-field-slot label {
@@ -34,14 +34,14 @@
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='time'],
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='url'],
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='week'] {
-    @apply py-1.5 px-2;
+    @apply py-1.5 px-space-xs;
 }
 
 .rsui-form-fieldset__fields .rsui-form-field-slot--compact select {
-    @apply py-1.5 pl-3 pr-12 text-sm;
+    @apply py-1.5 pl-space-sm pr-space-2xl text-sm;
 }
 
 .rsui-form-fieldset__fields .rsui-form-field-select__icon { @apply right-2; }
 .rsui-form-fieldset__fields .rsui-form-field-select__icon svg { @apply size-5; }
-.rsui-form-fieldset__fields .rsui-form-field-select__option { @apply py-3 px-2; }
+.rsui-form-fieldset__fields .rsui-form-field-select__option { @apply py-space-sm px-space-xs; }
 .rsui-form-fieldset__fields .rsui-form-field-select__option-label { @apply text-sm; }

package/components/form_slot.css

@@ -5,11 +5,11 @@
 }
 
 .rsui-form-slot__image {
-    @apply mb-8;
+    @apply mb-space-xl;
 }
 
 .rsui-form-slot__social-divider {
-    @apply w-full relative flex justify-center mb-2;
+    @apply w-full relative flex justify-center mb-space-xs;
 }
 
 .rsui-form-slot__social-divider-line {
@@ -17,18 +17,18 @@
 }
 
 .rsui-form-slot__social-divider-or {
-    @apply relative z-1 bg-background-primary px-6 text-text-primary;
+    @apply relative z-1 bg-background-primary px-space-lg text-text-primary;
 }
 
 .rsui-form-slot__content {
-    @apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-background-primary shadow-md overflow-hidden rounded-lg;
+    @apply w-full sm:max-w-md px-10 xs:px-space-2xl md:px-space-3xl py-10 bg-background-primary shadow-md overflow-hidden rounded-lg;
 }
 
 .rsui-form-slot__content > * {
-    @apply first:mt-0 mt-4;
+    @apply first:mt-0 mt-space-md;
 }
 
 .rsui-form-slot__content form > * {
-    @apply first:mt-0 mt-4;
+    @apply first:mt-0 mt-space-md;
 }
 

package/components/link_slot.css

@@ -7,7 +7,7 @@
     @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 
     /* default text styles */
-    @apply font-medium text-text-primary gap-2;
+    @apply font-medium text-text-primary gap-space-xs;
 }
 
 .rsui-link-slot--disabled {

package/components/linked_list_item.css

@@ -1,5 +1,5 @@
 .rsui-linked-list-item {
-    @apply pl-9 pr-3 pt-0 pb-2 relative text-text-disabled;
+    @apply pl-9 pr-space-sm pt-0 pb-space-xs relative text-text-disabled;
 }
 
 .rsui-linked-list-item::before {

package/components/list.css

@@ -1,12 +1,12 @@
 .rsui-list__items {
-    @apply mt-6;
+    @apply mt-space-lg;
 }
 
 .rsui-list__empty {
-    @apply mt-6;
+    @apply mt-space-lg;
 }
 
 .rsui-list__control-bottom {
-    @apply mt-3;
+    @apply mt-space-sm;
 }
 

package/components/list_control.css

@@ -1,5 +1,5 @@
 .rsui-list-control {
-    @apply flex flex-wrap justify-between gap-x-2 gap-y-3;
+    @apply flex flex-wrap justify-between gap-x-space-xs gap-y-space-sm;
 }
 
 .rsui-list-control--sm .rsui-list-control__filters {
@@ -49,7 +49,7 @@
 }
 
 .rsui-list-control__filters {
-    @apply grid gap-2;
+    @apply grid gap-space-xs;
 }
 
 .rsui-list-control__sort {

package/components/list_item.css

@@ -3,7 +3,7 @@
        cramped against its neighbours, which is the note that came back from laying these
        out on a real page. Horizontal padding is unchanged. Half-steps are already used
        across the button sizes, so 3.5 is in keeping. */
-    @apply relative flex flex-col rounded-xl px-3 py-3.5 overflow-hidden;
+    @apply relative flex flex-col rounded-xl px-space-sm py-3.5 overflow-hidden;
 }
 
 .rsui-list-item--clickable {
@@ -14,7 +14,7 @@
 }
 
 .rsui-list-item--avatar {
-    @apply pl-12 lg:pl-16 *:pl-2 *:lg:pl-1;
+    @apply pl-space-2xl lg:pl-space-3xl *:pl-space-xs *:lg:pl-space-xxs;
 }
 
 .rsui-list-item--wide .rsui-list-item__status {
@@ -22,7 +22,7 @@
 }
 
 .rsui-list-item__header {
-    @apply relative z-1 flex flex-wrap items-center gap-2 pointer-events-none;
+    @apply relative z-1 flex flex-wrap items-center gap-space-xs pointer-events-none;
 }
 
 .rsui-list-item__bg {
@@ -39,7 +39,7 @@
 }
 
 .rsui-list-item__avatar {
-    @apply absolute top-0 ml-1 -left-10 lg:-left-14;
+    @apply absolute top-0 ml-space-xxs -left-10 lg:-left-14;
     @apply aspect-square overflow-hidden size-9 lg:size-12;
 }
 
@@ -70,7 +70,7 @@
 }
 
 .rsui-list-item__meta {
-    @apply mt-2 flex flex-wrap gap-x-4 gap-y-2;
+    @apply mt-space-xs flex flex-wrap gap-x-space-md gap-y-space-xs;
 }
 
 /* Leading icon. Inline, unlike .rsui-list-item__avatar above, which hangs outside the row
@@ -133,5 +133,5 @@
 }
 
 .rsui-list-item__description {
-    @apply line-clamp-2 mt-2 text-base;
+    @apply line-clamp-2 mt-space-xs text-base;
 }

package/components/message_box.css

@@ -4,7 +4,7 @@
  * against a tall body.
  */
 .rsui-message-box {
-    @apply border rounded-lg overflow-hidden p-4 flex items-start gap-x-3;
+    @apply border rounded-lg overflow-hidden p-space-md flex items-start gap-x-space-sm;
 }
 
 /*
@@ -12,7 +12,7 @@
  * box with no icon and no actions lays out exactly as it did before.
  */
 .rsui-message-box__main {
-    @apply flex-1 flex flex-col gap-y-3;
+    @apply flex-1 flex flex-col gap-y-space-sm;
 }
 
 /*
@@ -31,7 +31,7 @@
  * rhythm. Inert at `sm:flex-nowrap`, where there is only ever one line.
  */
 .rsui-message-box--with-icon {
-    @apply flex-wrap gap-y-3 sm:flex-nowrap;
+    @apply flex-wrap gap-y-space-sm sm:flex-nowrap;
 }
 
 .rsui-message-box--with-icon .rsui-message-box__close {
@@ -78,11 +78,11 @@
 }
 
 .rsui-message-box__head {
-    @apply flex items-center gap-x-2;
+    @apply flex items-center gap-x-space-xs;
 }
 
 .rsui-message-box__content {
-    @apply flex items-start gap-x-2;
+    @apply flex items-start gap-x-space-xs;
 }
 
 /*
@@ -104,7 +104,7 @@
  * puts beside it, which is the only hierarchy this row needs.
  */
 .rsui-message-box__actions {
-    @apply flex flex-wrap items-center gap-x-4 gap-y-2 pt-1;
+    @apply flex flex-wrap items-center gap-x-space-md gap-y-space-xs pt-space-xxs;
 }
 
 .rsui-message-box__dismiss,

package/components/meta_info.css

@@ -13,7 +13,7 @@
    caption floor. Fix the size and 8px becomes correct; that belongs with the MetaInfo
    size ramp in #316, not here. Until then this is the size the component ships at, and
    the gap has to suit it. */
-    @apply flex flex-col gap-y-1;
+    @apply flex flex-col gap-y-space-xxs;
 }
 
 /* gap-x rather than space-x: space-* works by adding margins to children, which is the

package/components/modal.css

@@ -1,7 +1,7 @@
 .rsui-modal {
     @apply fixed inset-0 z-50 overflow-y-auto transition-all;
     @apply flex flex-col;
-    @apply px-4 py-6 md:px-0;
+    @apply px-space-md py-space-lg md:px-0;
     height: 100dvh;
 }
 
@@ -15,7 +15,7 @@
 
 .rsui-modal__content {
     @apply relative max-h-full overflow-scroll overscroll-contain transform transition-all;
-    @apply rounded-xl shadow-full md:w-full md:mx-auto mx-4;
+    @apply rounded-xl shadow-full md:w-full md:mx-auto mx-space-md;
     @apply bg-background-primary;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -26,7 +26,7 @@
 }
 
 .rsui-modal__content--sm {
-    @apply sm:max-w-sm xs:mx-4 sm:mx-auto;
+    @apply sm:max-w-sm xs:mx-space-md sm:mx-auto;
 }
 
 .rsui-modal__content--md {
@@ -62,7 +62,7 @@
 }
 
 .rsui-modal__header--padded {
-    @apply p-4;
+    @apply p-space-md;
 }
 
 .rsui-modal__body {
@@ -72,7 +72,7 @@
 }
 
 .rsui-modal__body--padded {
-    @apply p-4;
+    @apply p-space-md;
 }
 
 .rsui-modal__body::-webkit-scrollbar {
@@ -80,13 +80,13 @@
 }
 
 .rsui-modal__footer {
-    @apply sticky inset-x-0 bottom-0 z-1 p-0 bg-background-secondary shrink-0 flex flex-col items-stretch gap-y-2;
-    @apply sm:flex-row sm:items-center sm:justify-end sm:gap-x-2 sm:gap-y-0;
+    @apply sticky inset-x-0 bottom-0 z-1 p-0 bg-background-secondary shrink-0 flex flex-col items-stretch gap-y-space-xs;
+    @apply sm:flex-row sm:items-center sm:justify-end sm:gap-x-space-xs sm:gap-y-0;
     padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
 .rsui-modal__footer--padded {
-    @apply p-4;
+    @apply p-space-md;
     padding-bottom: max(1rem, env(safe-area-inset-bottom));
 }
 

package/components/pagination.css

@@ -1,13 +1,13 @@
 .rsui-pagination {
-    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-1 bg-background-primary divide-x divide-border-secondary;
+    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-space-xxs bg-background-primary divide-x divide-border-secondary;
 }
 
 .rsui-pagination__previous {
-    @apply size-full flex items-center pr-1;
+    @apply size-full flex items-center pr-space-xxs;
 }
 
 .rsui-pagination__items {
-    @apply size-full flex items-center gap-px px-1;
+    @apply size-full flex items-center gap-px px-space-xxs;
 }
 
 .rsui-pagination__items-group {
@@ -15,7 +15,7 @@
 }
 
 .rsui-pagination__next {
-    @apply size-full flex items-center pl-1;
+    @apply size-full flex items-center pl-space-xxs;
 }
 
 .rsui-pagination-parent {

package/components/pagination_item.css

@@ -1,6 +1,6 @@
 .rsui-pagination-item {
     @apply inline-flex items-center justify-center overflow-hidden select-none;
-    @apply min-w-9 w-fit h-7 p-1 rounded-lg cursor-pointer transition;
+    @apply min-w-9 w-fit h-7 p-space-xxs rounded-lg cursor-pointer transition;
     @apply bg-background-primary hover:bg-background-primary-invert text-text-secondary text-sm;
 
     /* focus state */

package/components/progress_bar.css

@@ -1,5 +1,5 @@
 .rsui-progress-bar {
-    @apply flex items-center gap-3 w-full;
+    @apply flex items-center gap-space-sm w-full;
 }
 
 .rsui-progress-bar__track {

package/components/progress_tracker.css

@@ -3,13 +3,13 @@
 }
 
 .rsui-progress-tracker--sm {
-    @apply gap-8 text-xs;
+    @apply gap-space-xl text-xs;
 }
 
 .rsui-progress-tracker--md {
-    @apply gap-8 sm:gap-12 text-xs sm:text-base;
+    @apply gap-space-xl sm:gap-space-2xl text-xs sm:text-base;
 }
 
 .rsui-progress-tracker--lg {
-    @apply gap-8 sm:gap-16 text-xs sm:text-xl;
+    @apply gap-space-xl sm:gap-space-3xl text-xs sm:text-xl;
 }

package/components/progress_tracker_step.css

@@ -9,21 +9,21 @@
 }
 
 .rsui-progress-tracker-step--sm {
-    @apply gap-2;
+    @apply gap-space-xs;
 
     @apply after:top-3.5;
     @apply after:-left-4;
 }
 
 .rsui-progress-tracker-step--md {
-    @apply gap-2;
+    @apply gap-space-xs;
 
     @apply after:top-3.5 sm:after:top-4.5;
     @apply after:-left-4;
 }
 
 .rsui-progress-tracker-step--lg {
-    @apply gap-2 sm:gap-4;
+    @apply gap-space-xs sm:gap-space-md;
 
     @apply after:top-3.5 sm:after:top-6;
     @apply after:-left-4 sm:after:-left-8;

package/components/radio_card.css

@@ -52,7 +52,7 @@
 }
 
 .rsui-radio-card__title-row {
-    @apply relative text-xl leading-[1.3] font-medium text-text-primary line-clamp-3 min-h-6 pr-8;
+    @apply relative text-xl leading-[1.3] font-medium text-text-primary line-clamp-3 min-h-6 pr-space-xl;
 
     @apply after:content-[''] after:absolute after:top-0 after:right-0;
     @apply after:size-6 after:rounded-full after:transition-all;
@@ -60,7 +60,7 @@
 }
 
 .rsui-radio-card__title-row--radio-start {
-    @apply pl-8 pr-0;
+    @apply pl-space-xl pr-0;
     @apply after:left-0 after:right-auto;
 }
 
@@ -88,7 +88,7 @@
 }
 
 .rsui-radio-card__content-row--radio-start {
-    @apply pl-8 pr-0;
+    @apply pl-space-xl pr-0;
 }
 
 .rsui-radio-card__meta-row {

package/components/read_more.css

@@ -3,6 +3,6 @@
 }
 
 .rsui-read-more__link {
-    @apply mt-4;
+    @apply mt-space-md;
 }
 

package/components/record_count.css

@@ -1,4 +1,4 @@
 .record-count {
-    @apply my-2 text-sm text-text-secondary;
+    @apply my-space-xs text-sm text-text-secondary;
 }
 

package/components/section_header.css

@@ -47,7 +47,7 @@
    between two elements. Same category as the control offsets in checkbox_card and
    card_group, which are also deliberately raw. */
 .rsui-section-header__text--with-toolbar {
-    @apply pt-1;
+    @apply pt-space-xxs;
 }
 
 .rsui-section-header__title {

package/components/section_slider.css

@@ -59,7 +59,7 @@
  * width and still grows if the consumer puts something wider inside.
  */
 .rsui-section-slider__view-all {
-    @apply min-w-64 items-center justify-center gap-3 border-dashed p-space-lg text-center;
+    @apply min-w-64 items-center justify-center gap-space-sm border-dashed p-space-lg text-center;
     @apply font-semibold;
     @apply hover:cursor-pointer hover:shadow-md;
     @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary outline-hidden;
@@ -162,7 +162,7 @@
  * use it.
  */
 .rsui-section-slider__container {
-    @apply relative flex gap-x-3 lg:gap-x-6 overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory scroll-pl-space-lg;
+    @apply relative flex gap-x-space-sm lg:gap-x-space-lg overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory scroll-pl-space-lg;
     @apply focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-primary;
 }
 
@@ -242,7 +242,7 @@
  * be covering content to duplicate a gesture the user already has.
  */
 .rsui-section-slider__actions {
-    @apply hidden lg:flex absolute inset-0 z-10 items-center justify-between px-3 pointer-events-none;
+    @apply hidden lg:flex absolute inset-0 z-10 items-center justify-between px-space-sm pointer-events-none;
 }
 
 /*

package/components/switcher.css

@@ -1,6 +1,6 @@
 .rsui-switcher {
-    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden gap-1;
-    @apply bg-background-disabled p-1 rounded-xl;
+    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden gap-space-xxs;
+    @apply bg-background-disabled p-space-xxs rounded-xl;
 }
 
 .rsui-switcher--full {
@@ -89,7 +89,7 @@
    Every rule below has to out-specify a same-specificity rule above it, so this
    block must stay last in the file. */
 .rsui-switcher--chips {
-    @apply w-full flex-row items-center flex-nowrap gap-2;
+    @apply w-full flex-row items-center flex-nowrap gap-space-xs;
     @apply bg-transparent p-0 rounded-none;
 
     /* The default is overflow-hidden; this row is meant to scroll. Scrollbar

package/components/switcher_item.css

@@ -12,8 +12,8 @@
     color: inherit;
 
     @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-hidden whitespace-nowrap will-change-transform cursor-pointer;
-    @apply font-semibold gap-2 rounded-lg border border-transparent transition;
-    @apply text-base px-3 py-2;
+    @apply font-semibold gap-space-xs rounded-lg border border-transparent transition;
+    @apply text-base px-space-sm py-space-xs;
 
     /* The class list above sets outline-hidden, which previously left the item with no focus
        indicator at all once it became focusable. Drawn inset because .rsui-switcher is

package/components/tab_slider_item.css

@@ -15,7 +15,7 @@
     color: inherit;
 
     @apply inline-flex shrink-0 items-center justify-center select-none cursor-pointer whitespace-nowrap;
-    @apply text-base px-4 py-3 gap-2 border-b-2 border-transparent -mb-px;
+    @apply text-base px-space-md py-space-sm gap-space-xs border-b-2 border-transparent -mb-px;
     @apply text-text-secondary;
 
     /* Focus is drawn inside the box: .rsui-tab-slider is an overflow-x-auto scroller, so an

package/components/table.css

@@ -58,5 +58,5 @@
 }
 
 .rsui-table__footer {
-    @apply w-full border-t border-border-primary overflow-hidden py-3 px-6;
+    @apply w-full border-t border-border-primary overflow-hidden py-space-sm px-space-lg;
 }

package/components/td.css

@@ -1,6 +1,6 @@
 .rsui-td {
     @apply text-left;
-    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
+    @apply py-space-sm px-5 text-sm leading-6 text-text-secondary;
 }
 
 .rsui-td--center {

package/components/td_user.css

@@ -1,5 +1,5 @@
 .rsui-td-user {
-    @apply flex items-center gap-3;
+    @apply flex items-center gap-space-sm;
 }
 
 .rsui-td-user__avatar {

package/components/th.css

@@ -1,6 +1,6 @@
 .rsui-th {
     @apply text-left;
-    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
+    @apply py-space-sm px-5 text-sm leading-6 text-text-secondary;
 }
 
 .rsui-th--center {
@@ -55,7 +55,7 @@
 }
 
 .rsui-th__content {
-    @apply inline-flex gap-1 items-center;
+    @apply inline-flex gap-space-xxs items-center;
 }
 
 /* Sortable header trigger — a real <button> reset to match the header text,
@@ -65,8 +65,8 @@
    valid click target. Focus ring lives here (the th itself is no longer focusable).
    Default justify-start matches the base left-aligned header. */
 .rsui-th__button {
-    @apply flex w-full gap-1 items-center justify-start;
-    @apply py-3 px-5 cursor-pointer m-0;
+    @apply flex w-full gap-space-xxs items-center justify-start;
+    @apply py-space-sm px-5 cursor-pointer m-0;
     @apply focus-visible:outline-2 focus-visible:outline-border-primary;
     font: inherit;
     color: inherit;

package/components/toggle.css

@@ -1,5 +1,5 @@
 .rsui-toggle {
-    @apply flex flex-col gap-y-2 border-0 bg-transparent p-0;
+    @apply flex flex-col gap-y-space-xs border-0 bg-transparent p-0;
 }
 
 .rsui-toggle--disabled label {
@@ -21,7 +21,7 @@
 }
 
 .rsui-toggle__control {
-    @apply justify-between flex items-center gap-x-4;
+    @apply justify-between flex items-center gap-x-space-md;
 }
 
 .rsui-toggle__control--label-end {

package/components/tooltip.css

@@ -55,7 +55,7 @@
 
 /* Content panel — positioned via inline styles (fixed, teleported to body) */
 .rsui-tooltip__content {
-    @apply relative px-3 py-2 w-max max-w-60;
+    @apply relative px-space-sm py-space-xs w-max max-w-60;
     @apply text-sm text-text-on-color bg-background-primary-contrast rounded-lg shadow-lg;
     @apply pointer-events-auto;
 }