@kvell-group/ui 1.18.16 → 1.18.17

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.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@kvell-group/ui",
3
3
  "author": "Kvell Group",
4
4
  "private": false,
5
- "version": "1.18.16",
5
+ "version": "1.18.17",
6
6
  "type": "module",
7
7
  "main": "src/index.ts",
8
8
  "types": "src/index.ts",
@@ -37,6 +37,46 @@
37
37
  --badge-lh: var(--mantine-line-height-caption-l);
38
38
  --badge-ls: var(--mantine-spacing-caption-l);
39
39
  }
40
+
41
+ &[data-variant='gray'] {
42
+ --badge-bg: var(--color-background-badge-gray);
43
+ --badge-color: var(--color-text-base-secondary);
44
+ }
45
+
46
+ &[data-variant='blue'] {
47
+ --badge-bg: var(--color-background-badge-blue);
48
+ --badge-color: var(--color-text-accent-blue-inverted);
49
+ }
50
+
51
+ &[data-variant='green'] {
52
+ --badge-bg: var(--color-background-badge-green);
53
+ --badge-color: var(--color-text-accent-green-inverted);
54
+ }
55
+
56
+ &[data-variant='orange'] {
57
+ --badge-bg: var(--color-background-badge-orange);
58
+ --badge-color: var(--color-text-accent-orange-inverted);
59
+ }
60
+
61
+ &[data-variant='red'] {
62
+ --badge-bg: var(--color-background-badge-red);
63
+ --badge-color: var(--color-text-accent-red-inverted);
64
+ }
65
+
66
+ &[data-variant='purple'] {
67
+ --badge-bg: var(--color-background-badge-purple);
68
+ --badge-color: var(--color-text-accent-purple-inverted);
69
+ }
70
+
71
+ &[data-variant='white'] {
72
+ --badge-bg: var(--color-background-badge-white);
73
+ --badge-color: var(--color-text-base-secondary);
74
+ }
75
+
76
+ &[data-variant='white-destructive'] {
77
+ --badge-bg: var(--color-background-badge-white);
78
+ --badge-color: var(--color-text-status-destructive);
79
+ }
40
80
  }
41
81
 
42
82
  .section {
@@ -47,9 +47,13 @@
47
47
  --color-background-accent-gray-accent: #717684;
48
48
  --color-background-accent-gray-subtle: #e9eaec;
49
49
  --color-background-accent-green-accent: #26bd6c;
50
+ --color-background-badge-blue: #e3eafd;
50
51
  --color-background-badge-gray: #e9eaec;
51
52
  --color-background-badge-green: #d1fae4;
52
53
  --color-background-badge-orange: #fdead8;
54
+ --color-background-badge-purple: #ecdffb;
55
+ --color-background-badge-red: #fce5e4;
56
+ --color-background-badge-white: #ffffff;
53
57
  --color-background-button-primary: #14151a;
54
58
  --color-background-button-primary-hover: #1f2228;
55
59
  --color-background-button-primary-disabled: #e9eaec;
@@ -72,14 +76,18 @@
72
76
  --color-border-action-focus-destructive-light: #f08b85;
73
77
  --color-border-base-alpha: #0a0f2914;
74
78
  --color-text-accent-blue-accent: #4778f5;
79
+ --color-text-accent-blue-inverted: #133a9a;
75
80
  --color-text-accent-green-inverted: #166e3f;
76
81
  --color-text-accent-orange-inverted: #ae590a;
82
+ --color-text-accent-purple-inverted: #5314a3;
83
+ --color-text-accent-red-inverted: #9a1c13;
77
84
  --color-text-base-primary: #14151a;
78
85
  --color-text-base-secondary: #0f132499;
79
86
  --color-text-base-tertiary: #0d112666;
80
87
  --color-text-base-quaternary: #0a0f2940;
81
88
  --color-text-base-inverted: #ffffff;
82
89
  --color-text-status-destructive: #e6483d;
90
+ --color-text-status-info: #4778f5;
83
91
  --color-icon-base-secondary: #0f132499;
84
92
  --color-icon-base-tertiary: #0d112666;
85
93
  --color-icon-base-quaternary: #0a0f2940;
@@ -87,6 +95,7 @@
87
95
  --color-icon-status-success: #26bd6c;
88
96
  --color-icon-status-warning: #f48e2f;
89
97
  --color-icon-status-destructive-secondary: #e6483db2;
98
+ --color-icon-status-info-secondary: #3368f099;
90
99
  --shadow-focus-ring-light: 0px 0px 0px 2px #c8b2ff80;
91
100
  --shadow-focus-ring-light-destructive: 0px 0px 0px 2px #ffb2b299;
92
101
  }