@redseed/redseed-ui-tailwindcss 7.64.0 → 7.66.0

package/components/activity_feed.css

@@ -1,5 +1,5 @@
 .rsui-activity-feed {
-    @apply flex flex-col gap-8;
+    @apply flex flex-col gap-space-xl;
 }
 
 .rsui-activity-feed--line > *:not(:last-child) {

package/components/badge.css

@@ -5,7 +5,7 @@
        both broke across two lines inside a rounded-full chip. Every other chip-shaped
        control in the system already declares this: Pill, ButtonSlot, TabSliderItem and
        SwitcherItem. Badge was the only one that did not. */
-    @apply inline-flex items-center justify-center gap-x-1 whitespace-nowrap;
+    @apply inline-flex items-center justify-center gap-x-space-xxs whitespace-nowrap;
     @apply w-fit h-fit rounded-full;
     @apply text-sm font-medium leading-4;
 }
@@ -16,15 +16,15 @@
    top and bottom. The 8 / 10 / 12 progression matches Pill, the other chip in the system.
    Vertical padding is untouched, so no badge changes height. */
 .rsui-badge--xs {
-    @apply text-xs leading-3 px-2 py-0.5;
+    @apply text-xs leading-3 px-space-xs py-0.5;
 }
 
 .rsui-badge--sm {
-    @apply px-2.5 py-1;
+    @apply px-2.5 py-space-xxs;
 }
 
 .rsui-badge--md {
-    @apply px-3 py-2;
+    @apply px-space-sm py-space-xs;
 }
 
 .rsui-badge--secondary {

package/components/badge_group.css

@@ -1,33 +1,33 @@
 .badge-group {
-    @apply pl-1 pr-3 gap-x-3;
+    @apply pl-space-xxs pr-space-sm gap-x-space-sm;
 }
 
 .badge-group--sm {
-    @apply pl-1 py-0.5 pr-2 gap-x-2 text-sm leading-4;
+    @apply pl-space-xxs py-0.5 pr-space-xs gap-x-space-xs text-sm leading-4;
 }
 
 .badge-group--lg {
-    @apply pl-2 pr-4 gap-x-4;
+    @apply pl-space-xs pr-space-md gap-x-space-md;
 }
 
 .badge-group--badge-end {
-    @apply pl-3 pr-1;
+    @apply pl-space-sm pr-space-xxs;
 }
 
 .badge-group--sm.badge-group--badge-end {
-    @apply pl-2 pr-1;
+    @apply pl-space-xs pr-space-xxs;
 }
 
 .badge-group--lg.badge-group--badge-end {
-    @apply pl-4 pr-2;
+    @apply pl-space-md pr-space-xs;
 }
 
 .badge-group--no-text {
-    @apply px-1;
+    @apply px-space-xxs;
 }
 
 .badge-group--no-badge {
-    @apply px-2;
+    @apply px-space-xs;
 }
 
 .badge-group--badge-end .badge-group__badge {

package/components/breadcrumbs.css

@@ -1,9 +1,9 @@
 .rsui-breadcrumbs__list {
-    @apply flex flex-wrap items-center gap-x-2 gap-y-2 list-none m-0 p-0;
+    @apply flex flex-wrap items-center gap-x-space-xs gap-y-space-xs list-none m-0 p-0;
 }
 
 .rsui-breadcrumbs__item {
-    @apply relative select-none pr-4 last:pr-0 last:after:hidden;
+    @apply relative select-none pr-space-md last:pr-0 last:after:hidden;
     @apply text-sm text-text-secondary leading-6;
     @apply after:absolute after:right-0.5 after:content-['\007C'];
     @apply after:w-0.5 after:h-full after:text-text-disabled;

package/components/button_group_item.css

@@ -1,6 +1,6 @@
 .rsui-button-group-item {
     /* default control */
-    @apply inline-flex justify-center items-center select-none outline-hidden p-2 font-semibold text-sm transition cursor-pointer;
+    @apply inline-flex justify-center items-center select-none outline-hidden p-space-xs font-semibold text-sm transition cursor-pointer;
 
     /* default shape */
     @apply first:rounded-l-lg last:rounded-r-lg border-l border-r border-y ring-0;
@@ -31,7 +31,7 @@
 }
 
 .rsui-button-group-item__label {
-    @apply gap-x-2 px-1 inline-flex items-center;
+    @apply gap-x-space-xs px-space-xxs inline-flex items-center;
 }
 
 .rsui-button-group-item svg {

package/components/button_slot.css

@@ -59,7 +59,7 @@
    unchanged (py untouched); only the button's width grows. --xs-icon keeps its own p-1.5
    because a square icon button is correct at that size. */
 .rsui-button-slot--xs {
-    @apply text-sm px-2.5 py-1.5 gap-1;
+    @apply text-sm px-2.5 py-1.5 gap-space-xxs;
 }
 
 /* modifier xs size with icon */
@@ -69,12 +69,12 @@
 
 /* modifier sm size */
 .rsui-button-slot--sm {
-    @apply text-sm px-3 py-2 gap-1;
+    @apply text-sm px-space-sm py-space-xs gap-space-xxs;
 }
 
 /* modifier sm size with icon */
 .rsui-button-slot--sm-icon {
-    @apply p-2;
+    @apply p-space-xs;
 }
 
 /* modifier md size */
@@ -89,17 +89,17 @@
 
 /* modifier lg size */
 .rsui-button-slot--lg {
-    @apply text-base px-4 py-2.5;
+    @apply text-base px-space-md py-2.5;
 }
 
 /* modifier lg size with icon */
 .rsui-button-slot--lg-icon {
-    @apply p-3;
+    @apply p-space-sm;
 }
 
 /* modifier xl size */
 .rsui-button-slot--xl {
-    @apply text-base leading-6 px-4.5 py-3;
+    @apply text-base leading-6 px-4.5 py-space-sm;
 }
 
 /* modifier xl size with icon */
@@ -109,7 +109,7 @@
 
 /* modifier 2xl size */
 .rsui-button-slot--2xl {
-    @apply text-lg leading-7 px-5 py-4;
+    @apply text-lg leading-7 px-5 py-space-md;
 
     /* 2xl size icon */
     & svg {

package/components/card_group.css

@@ -51,16 +51,16 @@
 
 /* Reorderable: add padding to cards to make room for the drag handle */
 .rsui-card-group--handle-left .rsui-card-group__cards > * {
-    @apply pl-8;
+    @apply pl-space-xl;
 }
 
 .rsui-card-group--handle-right .rsui-card-group__cards > * {
-    @apply pr-8;
+    @apply pr-space-xl;
 }
 
 /* Reorderable: drag handle and drag states */
 .rsui-card-group__drag-handle {
-    @apply absolute p-2 rounded cursor-grab text-grey-400 hover:text-grey-600 transition-colors z-10;
+    @apply absolute p-space-xs rounded cursor-grab text-grey-400 hover:text-grey-600 transition-colors z-10;
 
     /* touch-action: none so a touch/pen drag on the handle reorders instead of
        scrolling the page; select-none stops the grab selecting handle text.

package/components/column_picker.css

@@ -10,15 +10,15 @@
 }
 
 .rsui-column-picker__count {
-    @apply inline-flex items-center px-1.5 ml-1 text-xs rounded-md bg-background-disabled text-text-secondary;
+    @apply inline-flex items-center px-1.5 ml-space-xxs text-xs rounded-md bg-background-disabled text-text-secondary;
 }
 
 .rsui-column-picker__list {
-    @apply flex flex-col p-1 min-w-44;
+    @apply flex flex-col p-space-xxs min-w-44;
 }
 
 .rsui-column-picker__item {
-    @apply flex items-center px-2 py-1.5 rounded-md cursor-pointer text-sm text-text-primary;
+    @apply flex items-center px-space-xs py-1.5 rounded-md cursor-pointer text-sm text-text-primary;
     @apply hover:bg-background-secondary;
     @apply focus-visible:bg-background-secondary focus-visible:outline-none;
 }

package/components/comment.css

@@ -4,22 +4,22 @@
 }
 
 .rsui-comment--owned {
-    @apply pl-8 w-full;
+    @apply pl-space-xl w-full;
 }
 
 .rsui-comment--private {
-    @apply pl-8 w-full;
+    @apply pl-space-xl w-full;
 }
 
 .rsui-comment--no-photo {
-    @apply pl-8;
+    @apply pl-space-xl;
 }
 
 .rsui-comment__header {
-    @apply flex flex-row items-center gap-2;
+    @apply flex flex-row items-center gap-space-xs;
 
     /* Add padding bottom to the header when container is at least medium size */
-    @apply @md/comment:pb-1;
+    @apply @md/comment:pb-space-xxs;
 }
 
 .rsui-comment__header--allow-actions {
@@ -27,21 +27,21 @@
 }
 
 .rsui-comment__header-start {
-    @apply flex-1 flex flex-col gap-y-1 gap-x-2;
+    @apply flex-1 flex flex-col gap-y-space-xxs gap-x-space-xs;
 
     /* Flex the header start when container is at least medium size */
     @apply @md/comment:flex-row;
 }
 
 .rsui-comment__header-end {
-    @apply shrink-0 hidden flex-row items-center gap-2 ml-auto;
+    @apply shrink-0 hidden flex-row items-center gap-space-xs ml-auto;
 
     /* Show the header end when container is at least medium size */
     @apply @md/comment:flex;
 }
 
 .rsui-comment__author {
-    @apply flex flex-row gap-2;
+    @apply flex flex-row gap-space-xs;
 }
 
 .rsui-comment__author-photo {
@@ -60,7 +60,7 @@
 }
 
 .rsui-comment__meta {
-    @apply shrink-0 flex flex-row items-center gap-2 ml-8;
+    @apply shrink-0 flex flex-row items-center gap-space-xs ml-space-xl;
 
     /* Remove the margin from the meta when container is at least medium size */
     @apply @md/comment:ml-0;
@@ -74,24 +74,24 @@
 }
 
 .rsui-comment__actions {
-    @apply flex flex-row items-center gap-1;
+    @apply flex flex-row items-center gap-space-xxs;
 }
 
 .rsui-comment__body {
     /* 14px vertical, matching the row rhythm ListItem uses — a comment is a row of prose
        and read tight against its neighbour at 12px. */
-    @apply py-3.5 px-4 rounded-xl border;
-    @apply rounded-tl-none ml-8;
+    @apply py-3.5 px-space-md rounded-xl border;
+    @apply rounded-tl-none ml-space-xl;
     @apply text-text-primary bg-background-primary;
     @apply border-border-primary;
 }
 
 .rsui-comment__body-badge {
-    @apply flex flex-row flex-wrap items-center gap-1 mb-2;
+    @apply flex flex-row flex-wrap items-center gap-space-xxs mb-space-xs;
 }
 
 .rsui-comment__body-link {
-    @apply mt-2 flex justify-end;
+    @apply mt-space-xs flex justify-end;
 }
 
 .rsui-comment__body--owned {
@@ -111,12 +111,12 @@
 }
 
 .rsui-comment__footer {
-    @apply flex flex-row items-center justify-between gap-2;
+    @apply flex flex-row items-center justify-between gap-space-xs;
 
     /* Hide the footer when container is at least medium size */
     @apply @md/comment:hidden;
 }
 
 .rsui-comment__footer-end {
-    @apply shrink-0 flex flex-row items-center gap-2 ml-auto;
+    @apply shrink-0 flex flex-row items-center gap-space-xs ml-auto;
 }

package/components/comments.css

@@ -1,4 +1,4 @@
 .rsui-comments {
     @apply @container/comments;
-    @apply flex flex-col gap-y-3 w-full;
+    @apply flex flex-col gap-y-space-sm w-full;
 }

package/components/drawer.css

@@ -84,7 +84,7 @@
 }
 
 .rsui-drawer__header--padded {
-    @apply p-4;
+    @apply p-space-md;
     padding-top: max(1rem, env(safe-area-inset-top));
 }
 
@@ -95,7 +95,7 @@
 }
 
 .rsui-drawer__body--padded {
-    @apply p-4;
+    @apply p-space-md;
 }
 
 .rsui-drawer__body::-webkit-scrollbar {
@@ -103,13 +103,13 @@
 }
 
 .rsui-drawer__footer {
-    @apply shrink-0 p-0 bg-background-secondary 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 shrink-0 p-0 bg-background-secondary 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-drawer__footer--padded {
-    @apply p-4;
+    @apply p-space-md;
     padding-bottom: max(1rem, env(safe-area-inset-bottom));
 }
 

package/components/dropdown_menu.css

@@ -31,7 +31,7 @@
 }
 
 .rsui-dropdown-menu__container {
-    @apply hidden absolute z-50 mt-2 p-2 origin-top;
+    @apply hidden absolute z-50 mt-space-xs p-space-xs origin-top;
     @apply rounded-xl shadow-full-light bg-background-primary;
     @apply flex flex-col space-y-2;
     @apply w-60 sm:w-72;

package/components/dropdown_option.css

@@ -1,5 +1,5 @@
 .rsui-dropdown-option {
-    @apply cursor-pointer px-2 py-3 sm:p-3 bg-background-primary rounded-lg text-text-primary transition;
+    @apply cursor-pointer px-space-xs py-space-sm sm:p-space-sm bg-background-primary rounded-lg text-text-primary transition;
     @apply text-sm sm:text-base;
     @apply w-full inline-flex items-center whitespace-nowrap will-change-transform gap-1.5;
     @apply hover:bg-background-primary-invert;

package/components/empty.css

@@ -1,6 +1,6 @@
 .rsui-empty {
     @apply w-full flex flex-col items-center justify-center gap-5;
-    @apply px-3 py-4 rounded-xl text-text-primary;
+    @apply px-space-sm py-space-md rounded-xl text-text-primary;
 }
 
 .rsui-empty__image {
@@ -12,9 +12,9 @@
 }
 
 .rsui-empty__description {
-    @apply text-sm text-center *:mb-2;
+    @apply text-sm text-center *:mb-space-xs;
 }
 
 .rsui-empty__action {
-    @apply w-full flex flex-col items-center justify-center gap-4;
+    @apply w-full flex flex-col items-center justify-center gap-space-md;
 }

package/components/feed_item.css

@@ -1,5 +1,5 @@
 .rsui-feed-item {
-    @apply relative flex flex-nowrap gap-3 border border-transparent rounded-lg;
+    @apply relative flex flex-nowrap gap-space-sm border border-transparent rounded-lg;
 }
 
 .rsui-feed-item--clickable {
@@ -10,7 +10,7 @@
 }
 
 .rsui-feed-item--padded {
-    @apply p-2;
+    @apply p-space-xs;
 }
 
 .rsui-feed-item__avatar {
@@ -38,7 +38,7 @@
 }
 
 .rsui-feed-item__body {
-    @apply flex-1 flex flex-col gap-3;
+    @apply flex-1 flex flex-col gap-space-sm;
 }
 
 .rsui-feed-item__header {
@@ -46,7 +46,7 @@
 }
 
 .rsui-feed-item__heading {
-    @apply flex flex-wrap items-center gap-x-2;
+    @apply flex flex-wrap items-center gap-x-space-xs;
 }
 
 .rsui-feed-item__heading-text {

package/components/form_field_checkbox.css

@@ -3,7 +3,7 @@
 }
 
 .rsui-form-field-checkbox__label {
-    @apply ml-2 font-normal leading-6;
+    @apply ml-space-xs font-normal leading-6;
 }
 
 .rsui-form-field-checkbox__check {

package/components/form_field_combobox.css

@@ -34,11 +34,11 @@
 
 .rsui-form-field-combobox__prefix,
 .rsui-form-field-combobox__suffix {
-    @apply flex items-center justify-center px-4 select-none bg-transparent;
+    @apply flex items-center justify-center px-space-md select-none bg-transparent;
 }
 
 .rsui-form-field-combobox__placeholder {
-    @apply absolute inset-0 flex items-center px-4 pr-12 pointer-events-none;
+    @apply absolute inset-0 flex items-center px-space-md pr-space-2xl pointer-events-none;
     @apply text-text-secondary select-none;
 }
 
@@ -57,7 +57,7 @@
 
 .rsui-form-field-combobox__options {
     @apply hidden absolute top-0 w-full z-50;
-    @apply bg-background-primary p-2 mt-2 rounded-lg shadow-full-light;
+    @apply bg-background-primary p-space-xs mt-space-xs rounded-lg shadow-full-light;
     @apply max-h-[80vh] sm:max-h-[60vh] overflow-y-auto;
 }
 .rsui-form-field-combobox__options--open {
@@ -65,14 +65,14 @@
 }
 
 .rsui-form-field-combobox__group-header {
-    @apply px-4 pt-3 pb-1 text-xs font-semibold uppercase tracking-wider text-text-tertiary select-none;
+    @apply px-space-md pt-space-sm pb-space-xxs text-xs font-semibold uppercase tracking-wider text-text-tertiary select-none;
 }
 .rsui-form-field-combobox__group-header:not(:first-child) {
-    @apply border-t border-border-secondary mt-1;
+    @apply border-t border-border-secondary mt-space-xxs;
 }
 
 .rsui-form-field-combobox__option {
-    @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-lg;
+    @apply flex flex-nowrap items-center justify-between cursor-pointer px-space-md py-space-sm rounded-lg;
     @apply bg-background-primary hover:bg-background-secondary text-text-primary transition;
 }
 .rsui-form-field-combobox__option--highlighted {
@@ -107,7 +107,7 @@
 
 .rsui-form-field-combobox input[type='text'] {
     @apply flex-1;
-    @apply text-base text-text-primary transition py-3 px-4 pr-12 outline-hidden focus:outline-hidden;
+    @apply text-base text-text-primary transition py-space-sm px-space-md pr-space-2xl outline-hidden focus:outline-hidden;
     @apply bg-background-primary placeholder-text-secondary;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
 }

package/components/form_field_date_range.css

@@ -24,7 +24,7 @@
 
 .rsui-form-field-date-range__trigger {
     @apply flex-1 flex items-center text-left cursor-pointer;
-    @apply text-base text-text-primary transition py-3 px-3 xs:px-4 pr-12 outline-hidden focus:outline-hidden;
+    @apply text-base text-text-primary transition py-space-sm px-space-sm xs:px-space-md pr-space-2xl outline-hidden focus:outline-hidden;
     @apply bg-background-primary;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:cursor-not-allowed;
 }
@@ -48,8 +48,8 @@
 
 .rsui-form-field-date-range__popover {
     @apply hidden absolute top-0 z-50;
-    @apply bg-background-primary p-4 mt-2 rounded-lg shadow-full-light;
-    @apply flex flex-col sm:flex-row gap-4;
+    @apply bg-background-primary p-space-md mt-space-xs rounded-lg shadow-full-light;
+    @apply flex flex-col sm:flex-row gap-space-md;
     @apply max-h-[80vh] overflow-y-auto;
 }
 
@@ -60,12 +60,12 @@
 /* The preset rail sits inside the popover (MUI's shortcuts placement) rather
    than above the field, so the control stays one control. */
 .rsui-form-field-date-range__presets {
-    @apply flex flex-row sm:flex-col flex-wrap gap-1 shrink-0;
-    @apply sm:border-r sm:border-border-secondary sm:pr-4;
+    @apply flex flex-row sm:flex-col flex-wrap gap-space-xxs shrink-0;
+    @apply sm:border-r sm:border-border-secondary sm:pr-space-md;
 }
 
 .rsui-form-field-date-range__preset {
-    @apply text-left text-sm whitespace-nowrap px-3 py-2 rounded-lg cursor-pointer transition;
+    @apply text-left text-sm whitespace-nowrap px-space-sm py-space-xs rounded-lg cursor-pointer transition;
     @apply text-text-primary hover:bg-background-secondary;
     @apply focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-inset outline-hidden;
     @apply disabled:text-text-disabled disabled:hover:bg-transparent disabled:cursor-not-allowed;
@@ -76,7 +76,7 @@
 }
 
 .rsui-form-field-date-range__calendars {
-    @apply relative flex flex-col gap-2;
+    @apply relative flex flex-col gap-space-xs;
 }
 
 .rsui-form-field-date-range__nav {
@@ -94,11 +94,11 @@
 }
 
 .rsui-form-field-date-range__months {
-    @apply flex flex-col sm:flex-row gap-6;
+    @apply flex flex-col sm:flex-row gap-space-lg;
 }
 
 .rsui-form-field-date-range__month {
-    @apply flex flex-col gap-2;
+    @apply flex flex-col gap-space-xs;
 }
 
 .rsui-form-field-date-range__caption {

package/components/form_field_radio_group.css

@@ -3,7 +3,7 @@
 }
 
 .rsui-form-field-radio-group__items {
-    @apply flex flex-wrap items-center gap-x-8 gap-y-2;
+    @apply flex flex-wrap items-center gap-x-space-xl gap-y-space-xs;
 }
 
 .rsui-form-field-radio-group__items--stacked {
@@ -41,7 +41,7 @@
 }
 
 .rsui-form-field-radio-group__item {
-    @apply relative flex items-center gap-x-2 cursor-pointer;
+    @apply relative flex items-center gap-x-space-xs cursor-pointer;
 }
 
 .rsui-form-field-radio-group__item--disabled {

package/components/form_field_select.css

@@ -26,7 +26,7 @@
 
 .rsui-form-field-select__options {
     @apply hidden absolute top-0 z-50;
-    @apply bg-background-primary p-2 mt-2 rounded-lg shadow-full-light;
+    @apply bg-background-primary p-space-xs mt-space-xs rounded-lg shadow-full-light;
     @apply overflow-y-auto overflow-x-hidden;
 }
 .rsui-form-field-select__options--open {
@@ -34,7 +34,7 @@
 }
 
 .rsui-form-field-select__option {
-    @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-lg;
+    @apply flex flex-nowrap items-center justify-between cursor-pointer px-space-md py-space-sm rounded-lg;
     @apply bg-background-primary hover:bg-background-secondary text-text-primary transition;
 }
 .rsui-form-field-select__option--disabled {
@@ -82,7 +82,7 @@
 .rsui-form-field-select__trigger,
 .rsui-form-field-select--mobile select {
     @apply block w-full min-w-0 border ring-0 bg-none cursor-pointer appearance-none transition;
-    @apply py-3 pl-5 pr-14 truncate;
+    @apply py-space-sm pl-5 pr-14 truncate;
     @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;

package/components/form_field_slot.css

@@ -1,5 +1,5 @@
 .rsui-form-field-slot {
-    @apply flex flex-col gap-y-1 border-0 bg-transparent p-0;
+    @apply flex flex-col gap-y-space-xxs border-0 bg-transparent p-0;
 }
 
 .rsui-form-field-slot.rsui-form-field-radio-group {
@@ -7,15 +7,15 @@
 }
 
 .rsui-form-field-slot--compact {
-    @apply flex-row justify-between gap-x-2;
+    @apply flex-row justify-between gap-x-space-xs;
 }
 
 .rsui-form-field-slot--compact .rsui-form-field-slot__label {
-    @apply pt-3 whitespace-nowrap;
+    @apply pt-space-sm whitespace-nowrap;
 }
 
 .rsui-form-field-slot__asterisk {
-    @apply text-text-error ml-1;
+    @apply text-text-error ml-space-xxs;
 }
 
 .rsui-form-field-slot__label label {
@@ -27,7 +27,7 @@
 }
 
 .rsui-form-field-slot__field {
-    @apply shrink-0 flex flex-col gap-y-1;
+    @apply shrink-0 flex flex-col gap-y-space-xxs;
 }
 
 .rsui-form-field-slot__help {

package/components/form_field_text.css

@@ -15,7 +15,7 @@
 
 .rsui-form-field-text__prefix,
 .rsui-form-field-text__suffix {
-    @apply flex items-center justify-center px-2 xs:px-4 select-none bg-transparent;
+    @apply flex items-center justify-center px-space-xs xs:px-space-md select-none bg-transparent;
 }
 
 .rsui-form-field-text input[type='date'],
@@ -31,7 +31,7 @@
 .rsui-form-field-text input[type='url'],
 .rsui-form-field-text input[type='week'] {
     @apply flex-1;
-    @apply text-base text-text-primary transition py-3 px-3 xs:px-4 outline-hidden focus:outline-hidden;
+    @apply text-base text-text-primary transition py-space-sm px-space-sm xs:px-space-md outline-hidden focus:outline-hidden;
     @apply bg-background-primary placeholder-text-secondary;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
 }

package/components/form_field_textarea.css

@@ -4,7 +4,7 @@
 
 .rsui-form-field-textarea textarea {
     @apply w-full border rounded-xl ring-0 text-base transition resize-none;
-    @apply py-3 px-4 outline-hidden focus:outline-hidden;
+    @apply py-space-sm px-space-md outline-hidden focus:outline-hidden;
     @apply text-text-primary bg-background-primary placeholder-text-secondary border-border-primary;
     @apply focus:border-border-primary;
     @apply focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-offset-2;