@redseed/redseed-ui-tailwindcss 6.7.2 → 7.0.0

package/components/badge.css

@@ -35,7 +35,3 @@
 .rsui-badge--ai {
     @apply text-text-ai bg-linear-45 from-background-ai-from to-background-ai-to border border-border-ai;
 }
-
-.rsui-badge svg {
-    @apply size-4;
-}

package/components/button_card.css

@@ -16,14 +16,6 @@
     @apply border border-text-secondary text-text-secondary;
 }
 
-.rsui-button-card__icon svg {
-    @apply size-5;
-}
-
-.rsui-button-card__icon svg path {
-    @apply stroke-current;
-}
-
 .rsui-button-card__content-text {
     @apply flex flex-col;
 }
@@ -47,4 +39,3 @@
     @apply text-text-disabled;
     @apply group-hover/button-card:text-text-disabled;
 }
-

package/components/card_header.css

@@ -22,8 +22,8 @@
 }
 
 .rsui-card-header__avatar {
-    @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-background-secondary;
-    @apply mt-2.5 md:mt-0;
+    @apply size-12 overflow-hidden flex items-center justify-center;
+    @apply mt-2 md:mt-0;
 }
 
 .rsui-card-header__text {
@@ -61,7 +61,3 @@
 .rsui-card-header__actions-mobile {
     @apply flex flex-wrap gap-3 items-center;
 }
-
-.rsui-card-header__more-actions-icon {
-    @apply size-5 text-text-secondary;
-}

package/components/dropdown_option.css

@@ -2,9 +2,4 @@
     @apply cursor-pointer p-4 bg-background-primary rounded-md text-base text-text-primary transition;
     @apply w-full inline-flex items-center whitespace-nowrap will-change-transform gap-1.5;
     @apply hover:bg-background-secondary;
-}
-
-.rsui-dropdown-option svg {
-    @apply size-6;
-}
-
+}

package/components/empty.css

@@ -3,18 +3,10 @@
     @apply px-3 py-4 rounded-md text-text-primary;
 }
 
-.rsui-empty--wide .rsui-empty__image svg {
-    @apply size-14;
-}
-
 .rsui-empty__image {
     @apply w-full flex items-center justify-center;
 }
 
-.rsui-empty__image svg {
-    @apply size-11;
-}
-
 .rsui-empty__title {
     @apply text-lg font-semibold text-center;
 }

package/components/feed_item.css

@@ -11,11 +11,7 @@
 }
 
 .rsui-feed-item__avatar {
-    @apply relative shrink-0 size-12 rounded-full flex items-center justify-center bg-background-disabled border border-border-secondary;
-}
-
-.rsui-feed-item__avatar > svg {
-    @apply size-7 text-text-secondary;
+    @apply relative shrink-0 flex items-start justify-center size-12;
 }
 
 .rsui-feed-item__avatar-indicator {
@@ -26,14 +22,38 @@
     @apply size-4 rounded-full bg-border-primary border-2 border-background-primary;
 }
 
-.rsui-feed-item__avatar-indicator-dot--online { @apply bg-text-success; }
-.rsui-feed-item__avatar-indicator-dot--busy { @apply bg-text-error; }
+.rsui-feed-item__avatar-indicator-dot--online {
+    @apply bg-text-success;
+}
 
-.rsui-feed-item__body { @apply flex-1 flex flex-col gap-3; }
-.rsui-feed-item__header { @apply flex flex-col; }
-.rsui-feed-item__heading { @apply flex flex-wrap items-center gap-x-2; }
-.rsui-feed-item__heading-text { @apply shrink-0 text-sm font-medium text-text-primary; }
-.rsui-feed-item__heading-subtext { @apply text-xs text-text-secondary; }
-.rsui-feed-item__supporting-text { @apply text-sm font-medium text-text-secondary; }
-.rsui-feed-item__dot { @apply relative shrink-0; }
+.rsui-feed-item__avatar-indicator-dot--busy {
+    @apply bg-text-error;
+}
 
+.rsui-feed-item__body {
+    @apply flex-1 flex flex-col gap-3;
+}
+
+.rsui-feed-item__header {
+    @apply flex flex-col;
+}
+
+.rsui-feed-item__heading {
+    @apply flex flex-wrap items-center gap-x-2;
+}
+
+.rsui-feed-item__heading-text {
+    @apply shrink-0 text-sm font-medium text-text-primary;
+}
+
+.rsui-feed-item__heading-subtext {
+    @apply text-xs text-text-secondary;
+}
+
+.rsui-feed-item__supporting-text {
+    @apply text-sm font-medium text-text-secondary;
+}
+
+.rsui-feed-item__dot {
+    @apply relative shrink-0;
+}

package/components/icon.css

@@ -0,0 +1,249 @@
+.rsui-icon {
+    @apply inline-flex items-center justify-center;
+}
+
+.rsui-icon--xxs {
+    @apply *:size-2;
+}
+
+.rsui-icon--xs {
+    @apply *:size-3;
+}
+
+.rsui-icon--sm {
+    @apply *:size-4;
+}
+
+.rsui-icon--md {
+    @apply *:size-5;
+}
+
+.rsui-icon--lg {
+    @apply *:size-6;
+}
+
+.rsui-icon--xl {
+    @apply *:size-8;
+}
+
+.rsui-icon--xxl {
+    @apply *:size-10;
+}
+
+.rsui-icon--xxxl {
+    @apply *:size-12;
+}
+
+.rsui-icon--xxs.rsui-icon--background {
+    @apply size-4;
+}
+
+.rsui-icon--xs.rsui-icon--background {
+    @apply size-6
+}
+
+.rsui-icon--sm.rsui-icon--background {
+    @apply size-8;
+}
+
+.rsui-icon--md.rsui-icon--background {
+    @apply size-10;
+}
+
+.rsui-icon--lg.rsui-icon--background {
+    @apply size-12;
+}
+
+.rsui-icon--xl.rsui-icon--background {
+    @apply size-16;
+}
+
+.rsui-icon--xxl.rsui-icon--background {
+    @apply size-20;
+}
+
+.rsui-icon--xxxl.rsui-icon--background {
+    @apply size-24;
+}
+
+.rsui-icon--rounded {
+    @apply rounded-xl *:rounded-xl;
+}
+
+.rsui-icon--xxs.rsui-icon--rounded {
+    @apply rounded-md;
+}
+
+.rsui-icon--xs.rsui-icon--rounded {
+    @apply rounded-lg;
+}
+
+.rsui-icon--sm.rsui-icon--rounded {
+    @apply rounded-lg;
+}
+
+.rsui-icon--circle {
+    @apply rounded-full *:rounded-full;
+}
+
+.rsui-icon--primary {
+    @apply *:text-text-primary;
+}
+
+.rsui-icon--secondary {
+    @apply *:text-text-secondary;
+}
+
+.rsui-icon--brand {
+    @apply *:text-text-brand;
+}
+
+.rsui-icon--success {
+    @apply *:text-text-success;
+}
+
+.rsui-icon--info {
+    @apply *:text-text-info;
+}
+
+.rsui-icon--warning {
+    @apply *:text-text-warning;
+}
+
+.rsui-icon--error {
+    @apply *:text-text-error;
+}
+
+.rsui-icon--ai {
+    @apply *:text-text-ai;
+}
+
+.rsui-icon--disabled {
+    @apply *:text-text-disabled;
+}
+
+.rsui-icon--primary.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--secondary.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--brand.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--success.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--info.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--warning.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--error.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--ai.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--disabled.rsui-icon--invert {
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--primary.rsui-icon--background {
+    @apply bg-background-primary-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--secondary.rsui-icon--background {
+    @apply bg-background-secondary-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--success.rsui-icon--background {
+    @apply bg-background-success-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--brand.rsui-icon--background {
+    @apply bg-background-brand-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--info.rsui-icon--background {
+    @apply bg-background-info-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--warning.rsui-icon--background {
+    @apply bg-background-warning-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--error.rsui-icon--background {
+    @apply bg-background-error-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--ai.rsui-icon--background {
+    @apply bg-background-ai-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--disabled.rsui-icon--background {
+    @apply bg-background-disabled-contrast;
+    @apply *:text-text-on-color;
+}
+
+.rsui-icon--primary.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-primary-invert;
+    @apply *:text-text-primary;
+}
+
+.rsui-icon--secondary.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-secondary-invert;
+    @apply *:text-text-secondary;
+}
+
+.rsui-icon--brand.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-brand-invert;
+    @apply *:text-text-brand;
+}
+
+.rsui-icon--success.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-success-invert;
+    @apply *:text-text-success;
+}
+
+.rsui-icon--info.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-info-invert;
+    @apply *:text-text-info;
+}
+
+.rsui-icon--warning.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-warning-invert;
+    @apply *:text-text-warning;
+}
+
+.rsui-icon--error.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-error-invert;
+    @apply *:text-text-error;
+}
+
+.rsui-icon--ai.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-ai-invert;
+    @apply *:text-text-ai;
+}
+
+.rsui-icon--disabled.rsui-icon--background.rsui-icon--invert {
+    @apply bg-background-disabled-invert;
+    @apply *:text-text-disabled;
+}

package/components/image.css

@@ -18,10 +18,6 @@
     @apply flex items-center justify-center text-text-disabled;
 }
 
-.rsui-image__empty-icon {
-    @apply w-1/4;
-}
-
 .rsui-image__message {
     @apply text-text-disabled text-sm;
 }

package/components/linked_list_item.css

@@ -23,14 +23,6 @@
     @apply absolute top-1.5 left-3 size-3 border border-current bg-current rounded-full flex items-center justify-center transition;
 }
 
-.rsui-linked-list-item__active-icon svg,.rsui-linked-list-item__active-icon :is(svg) {
-    @apply size-2 text-text-on-color;
-}
-
-.rsui-linked-list-item__done-icon svg,.rsui-linked-list-item__done-icon :is(svg) {
-    @apply size-2 text-text-on-color;
-}
-
 .rsui-linked-list-item__title {
     @apply font-semibold text-base text-text-primary leading-normal;
 }

package/components/message_box.css

@@ -33,8 +33,3 @@
 .rsui-message-box__close-icon {
     @apply size-10 cursor-pointer rounded-lg flex items-center justify-center hover:bg-border-secondary transition duration-200;
 }
-
-.rsui-message-box__close-icon svg {
-    @apply size-6 text-text-disabled;
-}
-

package/components/meta_info.css

@@ -7,7 +7,7 @@
 }
 
 .rsui-meta-info__label-icon {
-    @apply size-4;
+    @apply flex items-center justify-center;
 }
 
 .rsui-meta-info__label {
@@ -15,11 +15,7 @@
 }
 
 .rsui-meta-info__help {
-    @apply text-text-secondary size-4 cursor-pointer;
-}
-
-.rsui-meta-info__help svg {
-    @apply size-full;
+    @apply flex items-center justify-center text-text-secondary size-4 cursor-pointer;
 }
 
 .rsui-meta-info__value {

package/components/metric_card.css

@@ -7,11 +7,11 @@
 }
 
 .rsui-metric-card__avatar {
-    @apply size-14 rounded-full overflow-hidden flex items-center justify-center pointer-events-auto;
+    @apply size-12 rounded-full overflow-hidden flex items-center justify-center pointer-events-auto;
 }
 
 .rsui-metric-card__icon {
-    @apply text-text-primary transition-transform pointer-events-auto cursor-pointer size-6;
+    @apply text-text-primary transition-transform pointer-events-auto cursor-pointer;
 }
 
 .rsui-metric-card__content {
@@ -25,4 +25,3 @@
 .rsui-metric-card__value {
     @apply text-3xl font-semibold text-text-primary leading-9;
 }
-

package/components/pagination_item_next.css

@@ -1,8 +1,3 @@
 .rsui-pagination-item-next {
     @apply rounded-r-3xl;
 }
-
-.rsui-pagination-item-next svg {
-    @apply size-5;
-}
-

package/components/pagination_item_previous.css

@@ -1,8 +1,3 @@
 .rsui-pagination-item-previous {
     @apply rounded-l-3xl;
 }
-
-.rsui-pagination-item-previous svg {
-    @apply size-5;
-}
-

package/components/section.css

@@ -8,51 +8,30 @@
 
 .rsui-section--primary {
     @apply bg-background-primary text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-secondary-contrast;
-    }
 }
 
 .rsui-section--secondary {
     @apply bg-background-secondary border-border-secondary text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-secondary-contrast;
-    }
 }
 
 .rsui-section--brand {
     @apply bg-background-brand border-border-brand text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-brand-contrast;
-    }
 }
 
 .rsui-section--success {
     @apply bg-background-success border-border-success text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-success-contrast;
-    }
 }
 
 .rsui-section--info {
     @apply bg-background-info border-border-info text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-info-contrast;
-    }
 }
 
 .rsui-section--warning {
     @apply bg-background-warning border-border-warning text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-warning-contrast;
-    }
 }
 
 .rsui-section--error {
     @apply bg-background-error border-border-error text-text-primary;
-    .rsui-section-header__icon {
-        @apply bg-background-error-contrast;
-    }
 }
 
 .rsui-section--ai {
@@ -60,9 +39,6 @@
     background-size: 160% 160%;
     background-position: 0% 50%;
     animation: rsui-section-ai-gradient 3s ease-in-out infinite alternate;
-    .rsui-section-header__icon {
-        @apply bg-background-ai-contrast;
-    }
 }
 
 @keyframes rsui-section-ai-gradient {

package/components/section_header.css

@@ -8,11 +8,7 @@
 }
 
 .rsui-section-header__icon {
-    @apply size-10 rounded-full flex items-center justify-center;
-
-    svg {
-        @apply size-5 text-text-on-color;
-    }
+    @apply flex items-center justify-center;
 }
 
 .rsui-section-header__text {
@@ -47,7 +43,3 @@
 .rsui-section-header__actions-mobile {
     @apply flex flex-wrap gap-space-sm items-center justify-end;
 }
-
-.rsui-section-header__more-actions-icon {
-    @apply size-5 text-text-secondary;
-}

package/components/sorting.css

@@ -4,7 +4,7 @@
 }
 
 .rsui-sorting__icon {
-    @apply size-4 transition;
+    @apply transition;
 }
 
 .rsui-sorting__icon--desc {

package/components/td_user.css

@@ -3,12 +3,7 @@
 }
 
 .rsui-td-user__avatar {
-    @apply flex items-center justify-center size-10 rounded-full overflow-hidden shrink-0;
-    @apply text-text-secondary border border-border-secondary bg-background-disabled;
-}
-
-.rsui-td-user__avatar-icon {
-    @apply size-6;
+    @apply flex items-center justify-center size-10 overflow-hidden shrink-0;
 }
 
 .rsui-td-user__content {
@@ -18,4 +13,3 @@
 .rsui-td-user__supporting-text {
     @apply text-text-secondary;
 }
-

package/components/th.css

@@ -56,11 +56,11 @@
 }
 
 .rsui-th__sort {
-    @apply shrink-0;
+    @apply shrink-0 flex items-center justify-center;
 }
 
 .rsui-th__sort-icon {
-    @apply size-3.5 transition-all;
+    @apply transition-all;
 }
 
 .rsui-th__sort-icon--desc {

package/index.css

@@ -44,6 +44,7 @@
 @import './components/link_primary.css';
 @import './components/link_slot.css';
 @import './components/logo.css';
+@import './components/icon.css';
 @import './components/image.css';
 @import './components/image_16by9.css';
 @import './components/image_3by1.css';
@@ -67,7 +68,6 @@
 @import './components/page_header.css';
 @import './components/radio_card.css';
 @import './components/pagination_item.css';
-@import './components/pagination_item_collapsed.css';
 @import './components/pagination_item_next.css';
 @import './components/pagination_item_previous.css';
 @import './components/read_more.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-tailwindcss",
-  "version": "6.7.2",
+  "version": "7.0.0",
   "description": "RedSeed UI Tailwindcss",
   "main": "index.js",
   "style": "index.css",

package/tokens.css

@@ -7,29 +7,39 @@
     --color-text-warning: var(--Colors-Warning-600);
     --color-text-error: var(--Colors-Error-600);
     --color-text-info: var(--Colors-Blue-600);
-    --color-text-on-color: var(--Colors-Base-white);
     --color-text-ai: var(--Colors-RedSeed-Purple-500);
+    --color-text-on-color: var(--Colors-Base-white);
 
     --color-background-primary: var(--Colors-Base-white);
     --color-background-primary-contrast: var(--Colors-Grey-800);
+    --color-background-primary-invert: var(--Colors-Grey-100);
     --color-background-secondary: var(--Colors-Grey-50);
-    --color-background-tertiary: var(--Colors-Grey-100);
     --color-background-secondary-contrast: var(--Colors-Grey-800);
+    --color-background-secondary-invert: var(--Colors-Grey-50);
+    --color-background-tertiary: var(--Colors-Grey-100);
+    --color-background-tertiary-contrast: var(--Colors-Grey-800);
     --color-background-disabled: var(--Colors-Grey-100);
     --color-background-disabled-contrast: var(--Colors-Grey-400);
+    --color-background-disabled-invert: var(--Colors-Grey-100);
     --color-background-brand: var(--Colors-Brand-50);
     --color-background-brand-contrast: var(--Colors-Brand-500);
+    --color-background-brand-invert: var(--Colors-Brand-25);
     --color-background-success: var(--Colors-Success-50);
     --color-background-success-contrast: var(--Colors-Success-500);
+    --color-background-success-invert: var(--Colors-Success-50);
     --color-background-warning: var(--Colors-Warning-50);
     --color-background-warning-contrast: var(--Colors-Warning-500);
+    --color-background-warning-invert: var(--Colors-Warning-50);
     --color-background-error: var(--Colors-Error-50);
     --color-background-error-contrast: var(--Colors-Error-500);
+    --color-background-error-invert: var(--Colors-Error-50);
     --color-background-info: var(--Colors-Blue-50);
     --color-background-info-contrast: var(--Colors-Blue-500);
+    --color-background-info-invert: var(--Colors-Blue-50);
     --color-background-ai-from: var(--Colors-Background-AI-1);
     --color-background-ai-to: var(--Colors-Background-AI-2);
     --color-background-ai-contrast: var(--Colors-RedSeed-Purple-500);
+    --color-background-ai-invert: var(--Colors-RedSeed-Purple-25);
 
     --color-border-primary: var(--Colors-Grey-400);
     --color-border-secondary: var(--Colors-Grey-300);

package/components/pagination_item_collapsed.css

@@ -1,4 +0,0 @@
-.rsui-pagination-item-collapsed svg {
-    @apply size-4;
-}
-