@infonomic/uikit 5.23.0 → 5.25.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.
@@ -28,66 +28,34 @@
28
28
  stroke: var(--gray-800);
29
29
  }
30
30
 
31
- .stroke-gray:is(:global(.dark) *) {
32
- stroke: var(--gray-300);
33
- }
34
-
35
31
  .stroke-contrast {
36
32
  stroke: var(--gray-950);
37
33
  }
38
34
 
39
- .stroke-contrast:is(:global(.dark) *) {
40
- stroke: var(--gray-100);
41
- }
42
-
43
35
  .stroke-primary {
44
36
  stroke: var(--primary-500);
45
37
  }
46
38
 
47
- .stroke-primary:is(:global(.dark) *) {
48
- stroke: var(--primary-400);
49
- }
50
-
51
39
  .stroke-secondary {
52
40
  stroke: var(--secondary-500);
53
41
  }
54
42
 
55
- .stroke-secondary:is(:global(.dark) *) {
56
- stroke: var(--secondary-400);
57
- }
58
-
59
43
  .stroke-success {
60
44
  stroke: var(--green-500);
61
45
  }
62
46
 
63
- .stroke-success:is(:global(.dark) *) {
64
- stroke: var(--green-400);
65
- }
66
-
67
47
  .stroke-info {
68
48
  stroke: var(--blue-500);
69
49
  }
70
50
 
71
- .stroke-info:is(:global(.dark) *) {
72
- stroke: var(--blue-400);
73
- }
74
-
75
51
  .stroke-warning {
76
52
  stroke: var(--yellow-500);
77
53
  }
78
54
 
79
- .stroke-warning:is(:global(.dark) *) {
80
- stroke: var(--yellow-400);
81
- }
82
-
83
55
  .stroke-danger {
84
56
  stroke: var(--red-500);
85
57
  }
86
58
 
87
- .stroke-danger:is(:global(.dark) *) {
88
- stroke: var(--red-400);
89
- }
90
-
91
59
  .fill-none {
92
60
  fill: none;
93
61
  }
@@ -100,63 +68,99 @@
100
68
  fill: black;
101
69
  }
102
70
 
103
- .fill-contrast:is(:global(.dark) *) {
104
- fill: white;
105
- }
106
-
107
71
  .fill-gray {
108
72
  stroke: var(--gray-700);
109
73
  }
110
74
 
111
- .fill-gray:is(:global(.dark) *) {
112
- stroke: var(--gray-300);
113
- }
114
-
115
75
  .fill-primary {
116
76
  fill: var(--primary-500);
117
77
  }
118
78
 
119
- .fill-primary:is(:global(.dark) *) {
120
- fill: var(--primary-400);
121
- }
122
-
123
79
  .fill-secondary {
124
80
  fill: var(--secondary-500);
125
81
  }
126
82
 
127
- .fill-secondary:is(:global(.dark) *) {
128
- fill: var(--secondary-400);
129
- }
130
-
131
83
  .fill-success {
132
84
  fill: var(--green-500);
133
85
  }
134
86
 
135
- .fill-success:is(:global(.dark) *) {
136
- fill: var(--green-400);
137
- }
138
-
139
87
  .fill-info {
140
88
  fill: var(--blue-500);
141
89
  }
142
90
 
143
- .fill-info:is(:global(.dark) *) {
144
- fill: var(--blue-400);
145
- }
146
-
147
91
  .fill-warning {
148
92
  fill: var(--yellow-500);
149
93
  }
150
94
 
151
- .fill-warning:is(:global(.dark) *) {
152
- fill: var(--yellow-400);
153
- }
154
-
155
95
  .fill-danger {
156
96
  fill: var(--red-500);
157
97
  }
158
98
 
159
- .fill-danger:is(:global(.dark) *) {
160
- fill: var(--red-400);
99
+ :global(.dark),
100
+ :global([data-theme="dark"]),
101
+ :global([data-theme="dark"]) ::backdrop {
102
+ .stroke-gray {
103
+ stroke: var(--gray-300);
104
+ }
105
+
106
+ .stroke-contrast {
107
+ stroke: var(--gray-100);
108
+ }
109
+
110
+ .stroke-primary {
111
+ stroke: var(--primary-400);
112
+ }
113
+
114
+ .stroke-secondary {
115
+ stroke: var(--secondary-400);
116
+ }
117
+
118
+ .stroke-success {
119
+ stroke: var(--green-400);
120
+ }
121
+
122
+ .stroke-info {
123
+ stroke: var(--blue-400);
124
+ }
125
+
126
+ .stroke-warning {
127
+ stroke: var(--yellow-400);
128
+ }
129
+
130
+ .stroke-danger {
131
+ stroke: var(--red-400);
132
+ }
133
+
134
+ .fill-contrast {
135
+ fill: white;
136
+ }
137
+
138
+ .fill-gray {
139
+ stroke: var(--gray-300);
140
+ }
141
+
142
+ .fill-primary {
143
+ fill: var(--primary-400);
144
+ }
145
+
146
+ .fill-secondary {
147
+ fill: var(--secondary-400);
148
+ }
149
+
150
+ .fill-success {
151
+ fill: var(--green-400);
152
+ }
153
+
154
+ .fill-info {
155
+ fill: var(--blue-400);
156
+ }
157
+
158
+ .fill-warning {
159
+ fill: var(--yellow-400);
160
+ }
161
+
162
+ .fill-danger {
163
+ fill: var(--red-400);
164
+ }
161
165
  }
162
- }
166
+ }
@@ -381,7 +381,7 @@
381
381
  */
382
382
  .dark,
383
383
  [data-theme="dark"],
384
- [data-theme="dark"] ::backdrop {
384
+ [data-theme="dark"]::backdrop {
385
385
  /* PRIMARY INTENT TOKENS (Dark Mode)
386
386
  ----------------------------------------------------------------- */
387
387
 
@@ -46,7 +46,7 @@
46
46
  */
47
47
  .dark,
48
48
  [data-theme="dark"],
49
- [data-theme="dark"] ::backdrop {
49
+ [data-theme="dark"]::backdrop {
50
50
  --background: var(--canvas-900);
51
51
  --foreground: var(--gray-50);
52
52
  --shadow: var(--shadow-lg);
@@ -23,7 +23,7 @@
23
23
  */
24
24
  .dark,
25
25
  [data-theme="dark"],
26
- [data-theme="dark"] ::backdrop {
26
+ [data-theme="dark"]::backdrop {
27
27
  --text: var(--gray-50);
28
28
  --headings: var(--gray-50);
29
29
  --muted: oklch(from var(--foreground) calc(l * 0.75) c h);
@@ -43,4 +43,4 @@
43
43
  --muted: oklch(from var(--foreground) calc(l * 2) c h);
44
44
  --error: var(--red-500);
45
45
  }
46
- }
46
+ }
@@ -45,8 +45,12 @@
45
45
  }
46
46
  }
47
47
 
48
- .content:is(:global(.dark) *) {
49
- background: var(--canvas-800);
48
+ .dark,
49
+ [data-theme="dark"],
50
+ [data-theme="dark"]::backdrop {
51
+ .content {
52
+ background: var(--canvas-800);
53
+ }
50
54
  }
51
55
 
52
56
  .content-components {
@@ -185,4 +189,4 @@
185
189
  transform: translateX(0);
186
190
  }
187
191
  }
188
- }
192
+ }