@redseed/redseed-ui-tailwindcss 6.4.0 → 6.4.2

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 (5) hide show
  1. package/components/page_header.css +8 -0
  2. package/components/section.css +24 -0
  3. package/components/section_header.css +4 -4
  4. package/package.json +1 -1
  5. package/tokens.css +9 -0
package/components/page_header.css CHANGED
@@ -16,6 +16,14 @@
16
16
  @apply text-3xl font-semibold text-text-primary lg:mr-4;
17
17
  }
18
18
 
19
+ .rsui-page-header__title-text-container {
20
+ @apply flex flex-row space-x-6 items-center;
21
+ }
22
+
23
+ .rsui-page-header__status {
24
+ @apply flex-shrink-0;
25
+ }
26
+
19
27
  .rsui-page-header__subtitle {
20
28
  @apply text-base text-text-secondary leading-relaxed;
21
29
  }
package/components/section.css CHANGED
@@ -8,30 +8,51 @@
8
8
 
9
9
  .rsui-section--primary {
10
10
  @apply bg-background-primary text-text-primary;
11
+ .rsui-section-header__icon {
12
+ @apply bg-background-secondary-contrast;
13
+ }
11
14
  }
12
15
 
13
16
  .rsui-section--secondary {
14
17
  @apply bg-background-secondary border-border-secondary text-text-primary;
18
+ .rsui-section-header__icon {
19
+ @apply bg-background-secondary-contrast;
20
+ }
15
21
  }
16
22
 
17
23
  .rsui-section--brand {
18
24
  @apply bg-background-brand border-border-brand text-text-primary;
25
+ .rsui-section-header__icon {
26
+ @apply bg-background-brand-contrast;
27
+ }
19
28
  }
20
29
 
21
30
  .rsui-section--success {
22
31
  @apply bg-background-success border-border-success text-text-primary;
32
+ .rsui-section-header__icon {
33
+ @apply bg-background-success-contrast;
34
+ }
23
35
  }
24
36
 
25
37
  .rsui-section--info {
26
38
  @apply bg-background-info border-border-info text-text-primary;
39
+ .rsui-section-header__icon {
40
+ @apply bg-background-info-contrast;
41
+ }
27
42
  }
28
43
 
29
44
  .rsui-section--warning {
30
45
  @apply bg-background-warning border-border-warning text-text-primary;
46
+ .rsui-section-header__icon {
47
+ @apply bg-background-warning-contrast;
48
+ }
31
49
  }
32
50
 
33
51
  .rsui-section--error {
34
52
  @apply bg-background-error border-border-error text-text-primary;
53
+ .rsui-section-header__icon {
54
+ @apply bg-background-error-contrast;
55
+ }
35
56
  }
36
57
 
37
58
  .rsui-section--ai {
@@ -39,6 +60,9 @@
39
60
  background-size: 160% 160%;
40
61
  background-position: 0% 50%;
41
62
  animation: rsui-section-ai-gradient 3s ease-in-out infinite alternate;
63
+ .rsui-section-header__icon {
64
+ @apply bg-background-ai-contrast;
65
+ }
42
66
  }
43
67
 
44
68
  @keyframes rsui-section-ai-gradient {
package/components/section_header.css CHANGED
@@ -8,10 +8,10 @@
8
8
  }
9
9
 
10
10
  .rsui-section-header__icon {
11
- @apply size-10;
11
+ @apply size-10 rounded-full flex items-center justify-center;
12
12
 
13
13
  svg {
14
- @apply size-10;
14
+ @apply size-5 text-text-on-color;
15
15
  }
16
16
  }
17
17
 
@@ -24,11 +24,11 @@
24
24
  }
25
25
 
26
26
  .rsui-section-header__title {
27
- @apply text-lg leading-7 font-semibold line-clamp-2 md:line-clamp-1 text-text-primary;
27
+ @apply text-2xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
28
28
  }
29
29
 
30
30
  .rsui-section-header__subtitle {
31
- @apply text-sm leading-5 line-clamp-3 md:line-clamp-1 text-text-secondary;
31
+ @apply text-sm line-clamp-3 md:line-clamp-1 text-text-secondary;
32
32
  }
33
33
 
34
34
  .rsui-section-header__toolbar {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-tailwindcss",
3
- "version": "6.4.0",
3
+ "version": "6.4.2",
4
4
  "description": "RedSeed UI Tailwindcss",
5
5
  "main": "index.js",
6
6
  "style": "index.css",
package/tokens.css CHANGED
@@ -10,15 +10,24 @@
10
10
  --color-text-ai: var(--Colors-RedSeed-Purple-500);
11
11
 
12
12
  --color-background-primary: var(--Colors-Base-white);
13
+ --color-background-primary-contrast: var(--Colors-Grey-800);
13
14
  --color-background-secondary: var(--Colors-Grey-50);
15
+ --color-background-secondary-contrast: var(--Colors-Grey-800);
14
16
  --color-background-disabled: var(--Colors-Grey-100);
17
+ --color-background-disabled-contrast: var(--Colors-Grey-400);
15
18
  --color-background-brand: var(--Colors-Brand-50);
19
+ --color-background-brand-contrast: var(--Colors-Brand-500);
16
20
  --color-background-success: var(--Colors-Success-50);
21
+ --color-background-success-contrast: var(--Colors-Success-500);
17
22
  --color-background-warning: var(--Colors-Warning-50);
23
+ --color-background-warning-contrast: var(--Colors-Warning-500);
18
24
  --color-background-error: var(--Colors-Error-50);
25
+ --color-background-error-contrast: var(--Colors-Error-500);
19
26
  --color-background-info: var(--Colors-Blue-50);
27
+ --color-background-info-contrast: var(--Colors-Blue-500);
20
28
  --color-background-ai-from: var(--Colors-Background-AI-1);
21
29
  --color-background-ai-to: var(--Colors-Background-AI-2);
30
+ --color-background-ai-contrast: var(--Colors-RedSeed-Purple-500);
22
31
 
23
32
  --color-border-primary: var(--Colors-Grey-300);
24
33
  --color-border-secondary: var(--Colors-Grey-200);