@redseed/redseed-ui-tailwindcss 6.4.3 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/components/card_group.css +10 -10
  2. package/components/form_field_checkbox.css +1 -1
  3. package/components/form_field_radio_group.css +2 -2
  4. package/components/form_field_suffix.css +1 -2
  5. package/components/link_primary.css +1 -2
  6. package/components/linked_list_item.css +2 -3
  7. package/components/loader.css +1 -2
  8. package/components/progress_circle.css +27 -8
  9. package/components/progress_tracker_step.css +3 -4
  10. package/components/radio_card.css +4 -4
  11. package/components/section.css +2 -2
  12. package/components/sorting.css +0 -5
  13. package/components/toggle.css +29 -7
  14. package/package.json +3 -3
  15. package/tokens.css +10 -6
package/components/card_group.css CHANGED
@@ -1,47 +1,47 @@
1
1
  .rsui-card-group__cards {
2
- @apply grid gap-4 grid-cols-1;
2
+ @apply grid gap-space-lg grid-cols-1;
3
3
  }
4
4
 
5
5
  .rsui-card-group--sm .rsui-card-group__cards {
6
- @apply gap-4 grid-cols-2;
6
+ @apply gap-space-lg grid-cols-2;
7
7
  }
8
8
 
9
9
  .rsui-card-group--md .rsui-card-group__cards,
10
10
  .rsui-card-group--lg .rsui-card-group__cards,
11
11
  .rsui-card-group--xl .rsui-card-group__cards {
12
- @apply gap-4 grid-cols-3;
12
+ @apply gap-space-lg grid-cols-3;
13
13
  }
14
14
 
15
15
  .rsui-card-group--2xl .rsui-card-group__cards,
16
16
  .rsui-card-group--3xl .rsui-card-group__cards {
17
- @apply gap-4 grid-cols-5;
17
+ @apply gap-space-lg grid-cols-5;
18
18
  }
19
19
 
20
20
  .rsui-card-group--compact .rsui-card-group__cards {
21
- @apply gap-4 grid-cols-1;
21
+ @apply gap-space-lg grid-cols-1;
22
22
  }
23
23
 
24
24
  .rsui-card-group--compact.rsui-card-group--xs .rsui-card-group__cards {
25
- @apply gap-4 grid-cols-2;
25
+ @apply gap-space-lg grid-cols-2;
26
26
  }
27
27
 
28
28
  .rsui-card-group--compact.rsui-card-group--sm .rsui-card-group__cards {
29
- @apply gap-4 grid-cols-3;
29
+ @apply gap-space-lg grid-cols-3;
30
30
  }
31
31
 
32
32
  .rsui-card-group--compact.rsui-card-group--md .rsui-card-group__cards,
33
33
  .rsui-card-group--compact.rsui-card-group--lg .rsui-card-group__cards,
34
34
  .rsui-card-group--compact.rsui-card-group--xl .rsui-card-group__cards {
35
- @apply gap-4 grid-cols-4;
35
+ @apply gap-space-lg grid-cols-4;
36
36
  }
37
37
 
38
38
  .rsui-card-group--compact.rsui-card-group--2xl .rsui-card-group__cards,
39
39
  .rsui-card-group--compact.rsui-card-group--3xl .rsui-card-group__cards {
40
- @apply gap-4 grid-cols-6;
40
+ @apply gap-space-lg grid-cols-6;
41
41
  }
42
42
 
43
43
  .rsui-card-group__pagination {
44
- @apply w-full flex items-center justify-center mb-4;
44
+ @apply w-full flex items-center justify-center mb-space-lg;
45
45
  }
46
46
 
47
47
  /* List variant: force single-column full-width cards at all sizes */
package/components/form_field_checkbox.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .rsui-form-field-checkbox__label {
6
- @apply ml-2 font-normal;
6
+ @apply ml-2 font-normal leading-6;
7
7
  }
8
8
 
9
9
  .rsui-form-field-checkbox__label--required {
package/components/form_field_radio_group.css CHANGED
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .rsui-form-field-radio-group__item {
10
- @apply relative flex items-center gap-4 cursor-pointer;
10
+ @apply relative flex items-center gap-x-2 cursor-pointer;
11
11
  }
12
12
 
13
13
  .rsui-form-field-radio-group__item--disabled {
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  .rsui-form-field-radio-group__control--active {
26
- @apply bg-primary-background border-primary-background flex items-center justify-center;
26
+ @apply bg-background-brand-contrast border-border-primary flex items-center justify-center;
27
27
  }
28
28
 
29
29
  .rsui-form-field-radio-group__control--active div {
package/components/form_field_suffix.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .rsui-form-field-suffix .rsui-form-field-text__suffix {
2
2
  @apply border rounded-r-md;
3
- @apply bg-background-secondary border-l-border-primary border-r-border-secondary;
3
+ @apply bg-background-secondary border-background-secondary border-l-border-primary;
4
4
  }
5
-
package/components/link_primary.css CHANGED
@@ -1,4 +1,3 @@
1
1
  .rsui-link-primary {
2
- @apply text-primary-background;
2
+ @apply text-text-primary;
3
3
  }
4
-
package/components/linked_list_item.css CHANGED
@@ -12,11 +12,11 @@
12
12
  }
13
13
 
14
14
  .rsui-linked-list-item--active {
15
- @apply text-primary-background;
15
+ @apply text-text-primary;
16
16
  }
17
17
 
18
18
  .rsui-linked-list-item--done {
19
- @apply text-primary-background;
19
+ @apply text-text-primary;
20
20
  }
21
21
 
22
22
  .rsui-linked-list-item__status {
@@ -38,4 +38,3 @@
38
38
  .rsui-linked-list-item__body {
39
39
  @apply font-normal text-sm text-text-secondary leading-normal;
40
40
  }
41
-
package/components/loader.css CHANGED
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .rsui-loader--primary path {
10
- @apply fill-primary-background;
10
+ @apply fill-text-primary;
11
11
  }
12
12
 
13
13
  .rsui-loader--secondary path {
@@ -17,4 +17,3 @@
17
17
  .rsui-loader--white path {
18
18
  @apply fill-background-primary;
19
19
  }
20
-
package/components/progress_circle.css CHANGED
@@ -2,15 +2,34 @@
2
2
  @apply relative m-0 p-0 bg-background-primary rounded-full before:hidden after:hidden;
3
3
  }
4
4
 
5
- .rsui-progress-circle--sm { @apply size-16 text-xs; }
6
- .rsui-progress-circle--md { @apply size-20 text-sm; }
7
- .rsui-progress-circle--lg { @apply size-24 text-base; }
5
+ .rsui-progress-circle--sm {
6
+ @apply size-16 text-xs;
7
+ }
8
+
9
+ .rsui-progress-circle--md {
10
+ @apply size-20 text-sm;
11
+ }
8
12
 
9
- .rsui-progress-circle svg { @apply w-full h-full -rotate-90 transition-all; }
10
- .rsui-progress-circle svg circle { stroke-linecap: round; }
13
+ .rsui-progress-circle--lg {
14
+ @apply size-24 text-base;
15
+ }
11
16
 
12
- .rsui-progress-circle__background-circle { @apply stroke-border-primary stroke-4 fill-none transition-all; }
13
- .rsui-progress-circle__progress-circle { @apply stroke-primary-background stroke-4 fill-none transition-all duration-0; }
17
+ .rsui-progress-circle svg {
18
+ @apply w-full h-full -rotate-90 transition-all;
19
+ }
14
20
 
15
- .rsui-progress-circle__content { @apply absolute inset-0 w-full h-full flex items-center justify-center; }
21
+ .rsui-progress-circle svg circle {
22
+ stroke-linecap: round;
23
+ }
16
24
 
25
+ .rsui-progress-circle__background-circle {
26
+ @apply stroke-border-primary stroke-4 fill-none transition-all;
27
+ }
28
+
29
+ .rsui-progress-circle__progress-circle {
30
+ @apply stroke-text-primary stroke-4 fill-none transition-all duration-0;
31
+ }
32
+
33
+ .rsui-progress-circle__content {
34
+ @apply absolute inset-0 w-full h-full flex items-center justify-center;
35
+ }
package/components/progress_tracker_step.css CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  .rsui-progress-tracker-step--active::after,
16
16
  .rsui-progress-tracker-step--completed::after {
17
- @apply bg-primary-background;
17
+ @apply bg-background-primary-contrast;
18
18
  }
19
19
 
20
20
  .rsui-progress-tracker-step--clickable {
@@ -27,10 +27,9 @@
27
27
  }
28
28
 
29
29
  .rsui-progress-tracker-step__indicator--completed {
30
- @apply bg-primary-background border-primary-background text-primary-foreground;
30
+ @apply bg-background-primary-contrast border-background-primary-contrast text-text-on-color;
31
31
  }
32
32
 
33
33
  .rsui-progress-tracker-step__indicator--active {
34
- @apply bg-primary-foreground border-primary-background text-primary-background;
34
+ @apply bg-background-primary border-background-primary-contrast text-text-primary;
35
35
  }
36
-
package/components/radio_card.css CHANGED
@@ -7,12 +7,12 @@
7
7
  .rsui-radio-card--flexible { @apply max-w-full w-full; }
8
8
 
9
9
  .rsui-radio-card--selected {
10
- @apply focus-visible:ring-0 border-primary-background;
10
+ @apply focus-visible:ring-0 border-border-primary;
11
11
  }
12
12
 
13
13
  .rsui-radio-card--selected::after {
14
14
  content: '';
15
- @apply absolute inset-0 rounded-md opacity-10 bg-primary-background;
15
+ @apply absolute inset-0 rounded-md opacity-10 bg-background-primary-contrast;
16
16
  }
17
17
 
18
18
  .rsui-radio-card--disabled {
@@ -45,12 +45,12 @@
45
45
  }
46
46
 
47
47
  .rsui-radio-card__title-row--selected::after {
48
- @apply border-6 border-primary-background;
48
+ @apply border-6 border-text-primary;
49
49
  }
50
50
 
51
51
  .group-hover\/radio-card .rsui-radio-card__title-row--selected::after,
52
52
  .group-focus-visible\/radio-card .rsui-radio-card__title-row--selected::after {
53
- @apply border-primary-background;
53
+ @apply border-text-primary;
54
54
  }
55
55
 
56
56
  .rsui-radio-card__title-row--disabled::after {
package/components/section.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .rsui-section {
2
- @apply flex flex-col border border-solid rounded-xl p-6 border-border-primary;
2
+ @apply flex flex-col border border-solid rounded-xl p-space-lg border-border-primary;
3
3
  }
4
4
 
5
5
  .rsui-section--show-gap {
6
- @apply gap-y-4;
6
+ @apply gap-y-space-lg;
7
7
  }
8
8
 
9
9
  .rsui-section--primary {
package/components/sorting.css CHANGED
@@ -3,10 +3,6 @@
3
3
  @apply w-fit text-text-primary;
4
4
  }
5
5
 
6
- .rsui-sorting--primary {
7
- @apply text-primary-foreground;
8
- }
9
-
10
6
  .rsui-sorting__icon {
11
7
  @apply size-4 transition;
12
8
  }
@@ -14,4 +10,3 @@
14
10
  .rsui-sorting__icon--desc {
15
11
  @apply transform rotate-180;
16
12
  }
17
-
package/components/toggle.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rsui-toggle {
2
- @apply flex flex-col space-y-2 border-0 bg-transparent p-0;
2
+ @apply flex flex-col gap-y-2 border-0 bg-transparent p-0;
3
3
  }
4
4
 
5
5
  .rsui-toggle--disabled label {
@@ -10,8 +10,18 @@
10
10
  @apply cursor-not-allowed;
11
11
  }
12
12
 
13
+ .rsui-toggle--sm input {
14
+ @apply w-[2.25rem] h-5 px-0.5;
15
+ @apply before:size-4;
16
+ }
17
+
18
+ .rsui-toggle--md input {
19
+ @apply w-[2.75rem] h-6 px-0.5;
20
+ @apply before:size-5;
21
+ }
22
+
13
23
  .rsui-toggle__control {
14
- @apply justify-between flex items-center space-x-8;
24
+ @apply justify-between flex items-center gap-x-8;
15
25
  }
16
26
 
17
27
  .rsui-toggle label {
@@ -19,11 +29,23 @@
19
29
  }
20
30
 
21
31
  .rsui-toggle input {
22
- @apply appearance-none shrink-0 w-[2.6rem] h-6 px-1 bg-text-secondary border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 flex items-center;
23
- @apply focus:ring-0 focus:ring-transparent focus:checked:border-primary-background;
24
- @apply checked:bg-none checked:bg-primary-background checked:text-primary-foreground checked:border-primary-background checked:before:bg-primary-foreground checked:before:translate-x-full;
25
- @apply disabled:opacity-20 disabled:pointer-events-none;
26
- @apply before:inline-block before:size-4 before:bg-background-primary before:translate-x-0 before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
32
+ /* default styles */
33
+ @apply appearance-none cursor-pointer transition-colors ease-in-out duration-200 ring-0;
34
+ @apply shrink-0 rounded-full flex items-center;
35
+ /* default colors */
36
+ @apply bg-background-tertiary border-background-tertiary text-transparent;
37
+ /* focus styles */
38
+ @apply focus:outline-button-primary;
39
+ /* checked styles */
40
+ @apply checked:before:translate-x-full;
41
+ @apply checked:bg-button-primary checked:border-button-primary;
42
+ /* disabled styles */
43
+ @apply disabled:pointer-events-none;
44
+ @apply disabled:before:bg-background-tertiary;
45
+ /* before pseudo-element styles */
46
+ @apply before:inline-block before:rounded-full before:shadow-sm;
47
+ @apply before:translate-x-0 before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
48
+ @apply before:bg-background-primary;
27
49
  }
28
50
 
29
51
  .rsui-toggle__help {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-tailwindcss",
3
- "version": "6.4.3",
3
+ "version": "6.6.0",
4
4
  "description": "RedSeed UI Tailwindcss",
5
5
  "main": "index.js",
6
6
  "style": "index.css",
@@ -12,7 +12,7 @@
12
12
  "author": "",
13
13
  "license": "ISC",
14
14
  "dependencies": {
15
- "@tailwindcss/vite": "^4.1.15",
16
- "tailwindcss": "^4.1.15"
15
+ "@tailwindcss/vite": "^4.1.16",
16
+ "tailwindcss": "^4.1.16"
17
17
  }
18
18
  }
package/tokens.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --color-background-primary: var(--Colors-Base-white);
13
13
  --color-background-primary-contrast: var(--Colors-Grey-800);
14
14
  --color-background-secondary: var(--Colors-Grey-50);
15
+ --color-background-tertiary: var(--Colors-Grey-100);
15
16
  --color-background-secondary-contrast: var(--Colors-Grey-800);
16
17
  --color-background-disabled: var(--Colors-Grey-100);
17
18
  --color-background-disabled-contrast: var(--Colors-Grey-400);
@@ -29,8 +30,8 @@
29
30
  --color-background-ai-to: var(--Colors-Background-AI-2);
30
31
  --color-background-ai-contrast: var(--Colors-RedSeed-Purple-500);
31
32
 
32
- --color-border-primary: var(--Colors-Grey-300);
33
- --color-border-secondary: var(--Colors-Grey-200);
33
+ --color-border-primary: var(--Colors-Grey-400);
34
+ --color-border-secondary: var(--Colors-Grey-300);
34
35
  --color-border-disabled: var(--Colors-Grey-300);
35
36
  --color-border-brand: var(--Colors-Brand-200);
36
37
  --color-border-success: var(--Colors-Success-200);
@@ -55,8 +56,11 @@
55
56
  --color-button-separator: var(--Colors-Grey-200);
56
57
  --color-button-disabled: var(--Colors-Grey-300);
57
58
 
58
- --color-primary-foreground: var(--Colors-Base-white);
59
- --color-primary-background: var(--Colors-Brand-500);
60
- --color-primary-foreground-hover: var(--Colors-Base-white);
61
- --color-primary-background-hover: var(--Colors-Brand-700);
59
+ /* Spacing */
60
+ --spacing-space-xs: 0.5rem; /* 8px */
61
+ --spacing-space-sm: 0.75rem; /* 12px */
62
+ --spacing-space-md: 1rem; /* 16px */
63
+ --spacing-space-lg: 1.5rem; /* 24px */
64
+ --spacing-space-xl: 2rem; /* 32px */
65
+
62
66
  }