@langchain/macaw-tokens 1.0.0-beta.9 → 1.1.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.
- package/dist/tokens.css +54 -31
- package/dist/tokens.json +46 -26
- package/package.json +7 -2
package/dist/tokens.css
CHANGED
|
@@ -136,9 +136,13 @@
|
|
|
136
136
|
--bg-surface-level-3: var(--neutral-100);
|
|
137
137
|
--bg-surface-level-4: var(--neutral-200);
|
|
138
138
|
--bg-disabled: var(--neutral-100);
|
|
139
|
-
--bg-elevated: var(--white); /*
|
|
140
|
-
--bg-
|
|
141
|
-
--bg-
|
|
139
|
+
--bg-elevated: var(--white); /* raised cards, panes, controls */
|
|
140
|
+
--bg-input: var(--neutral-25);
|
|
141
|
+
--bg-input-disabled: var(--bg-disabled);
|
|
142
|
+
--bg-popover: var(--neutral-25);
|
|
143
|
+
--bg-sidebar: var(--neutral-50);
|
|
144
|
+
--bg-elevated-hover: var(--neutral-100);
|
|
145
|
+
--bg-elevated-selected: var(--neutral-100);
|
|
142
146
|
--bg-overlay: rgba(0, 0, 0, 0.5); /* backdrop / modal scrim */
|
|
143
147
|
|
|
144
148
|
/* BRAND */
|
|
@@ -186,7 +190,7 @@
|
|
|
186
190
|
--border-faint: var(--neutral-50);
|
|
187
191
|
--border-strong: var(--neutral-600);
|
|
188
192
|
--border-disabled: var(--neutral-200);
|
|
189
|
-
--border-focus: var(--brand-
|
|
193
|
+
--border-focus: var(--brand-500); /* focus ring */
|
|
190
194
|
--border-error: var(--red-300);
|
|
191
195
|
--border-error-strong: var(--red-600);
|
|
192
196
|
--border-brand: var(--brand-400);
|
|
@@ -204,7 +208,7 @@
|
|
|
204
208
|
--text-tertiary-hover: var(--neutral-700);
|
|
205
209
|
--text-quaternary: var(--neutral-500);
|
|
206
210
|
--text-disabled: var(--neutral-300);
|
|
207
|
-
--text-placeholder: var(--neutral-
|
|
211
|
+
--text-placeholder: var(--neutral-500);
|
|
208
212
|
--text-error-primary: var(--red-700);
|
|
209
213
|
--text-error-secondary: var(--red-600);
|
|
210
214
|
--text-error-tertiary: var(--red-500);
|
|
@@ -249,6 +253,10 @@
|
|
|
249
253
|
/* SHADOW */
|
|
250
254
|
/* Low-elevation shadow color for custom composed shadows. */
|
|
251
255
|
--shadow-color-subtle: rgba(16, 24, 40, 0.05);
|
|
256
|
+
--shadow-xs: 0 1px 1px 0 rgba(16, 24, 40, 0.02);
|
|
257
|
+
--shadow-default:
|
|
258
|
+
0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
259
|
+
--shadow-slider-thumb: var(--shadow-default);
|
|
252
260
|
--shadow-sm:
|
|
253
261
|
0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
|
|
254
262
|
--shadow-md:
|
|
@@ -256,6 +264,10 @@
|
|
|
256
264
|
--shadow-lg:
|
|
257
265
|
0 10px 15px -3px rgba(16, 24, 40, 0.1),
|
|
258
266
|
0 4px 6px -2px rgba(16, 24, 40, 0.05);
|
|
267
|
+
--shadow-xl:
|
|
268
|
+
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
269
|
+
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
270
|
+
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
259
271
|
|
|
260
272
|
/* RADIUS */
|
|
261
273
|
--radius-none: 0px;
|
|
@@ -728,16 +740,20 @@ html.dark,
|
|
|
728
740
|
--purple-950: #f9f7ff;
|
|
729
741
|
|
|
730
742
|
/* BACKGROUND COLORS */
|
|
731
|
-
--bg-surface-level-1: var(--neutral-
|
|
732
|
-
--bg-surface-level-1-hover: var(--neutral-
|
|
733
|
-
--bg-surface-level-2: var(--neutral-
|
|
734
|
-
--bg-surface-level-2-hover: var(--neutral-
|
|
735
|
-
--bg-surface-level-3: var(--neutral-
|
|
736
|
-
--bg-surface-level-4: var(--neutral-
|
|
737
|
-
--bg-disabled: var(--neutral-
|
|
738
|
-
--bg-elevated: var(--neutral-
|
|
739
|
-
--bg-
|
|
740
|
-
--bg-
|
|
743
|
+
--bg-surface-level-1: var(--neutral-50);
|
|
744
|
+
--bg-surface-level-1-hover: var(--neutral-100);
|
|
745
|
+
--bg-surface-level-2: var(--neutral-100);
|
|
746
|
+
--bg-surface-level-2-hover: var(--neutral-200);
|
|
747
|
+
--bg-surface-level-3: var(--neutral-200);
|
|
748
|
+
--bg-surface-level-4: var(--neutral-300);
|
|
749
|
+
--bg-disabled: var(--neutral-200);
|
|
750
|
+
--bg-elevated: var(--neutral-50);
|
|
751
|
+
--bg-input: var(--neutral-100);
|
|
752
|
+
--bg-input-disabled: var(--neutral-50);
|
|
753
|
+
--bg-popover: var(--neutral-100);
|
|
754
|
+
--bg-sidebar: var(--neutral-35);
|
|
755
|
+
--bg-elevated-hover: var(--neutral-200);
|
|
756
|
+
--bg-elevated-selected: var(--neutral-300);
|
|
741
757
|
--bg-overlay: rgba(0, 0, 0, 0.7);
|
|
742
758
|
|
|
743
759
|
/* BRAND */
|
|
@@ -768,7 +784,7 @@ html.dark,
|
|
|
768
784
|
/* CONTROL */
|
|
769
785
|
--bg-control-active: var(--brand-500);
|
|
770
786
|
--bg-control-active-hover: var(--brand-600);
|
|
771
|
-
--bg-control-thumb: var(--
|
|
787
|
+
--bg-control-thumb: var(--neutral-900);
|
|
772
788
|
--bg-control-disabled: var(--neutral-200);
|
|
773
789
|
--text-control-active-foreground: var(--bg-control-thumb);
|
|
774
790
|
|
|
@@ -777,13 +793,17 @@ html.dark,
|
|
|
777
793
|
--bg-selected-hover: var(--brand-100);
|
|
778
794
|
|
|
779
795
|
/* BORDER */
|
|
780
|
-
--border-default: var(--neutral-
|
|
781
|
-
--border-subtle: var(--neutral-
|
|
782
|
-
--border-muted: var(--neutral-
|
|
783
|
-
--border-faint: var(--neutral-
|
|
796
|
+
--border-default: var(--neutral-400);
|
|
797
|
+
--border-subtle: var(--neutral-300);
|
|
798
|
+
--border-muted: var(--neutral-200);
|
|
799
|
+
--border-faint: var(--neutral-100);
|
|
784
800
|
--border-strong: var(--neutral-600);
|
|
785
|
-
--border-disabled: var(--neutral-
|
|
786
|
-
--border-focus:
|
|
801
|
+
--border-disabled: var(--neutral-300);
|
|
802
|
+
--border-focus: color-mix(
|
|
803
|
+
in srgb,
|
|
804
|
+
var(--brand-700) 80%,
|
|
805
|
+
var(--neutral-500)
|
|
806
|
+
);
|
|
787
807
|
--border-error: var(--red-200);
|
|
788
808
|
--border-error-strong: var(--red-600);
|
|
789
809
|
--border-brand: var(--brand-400);
|
|
@@ -801,7 +821,7 @@ html.dark,
|
|
|
801
821
|
--text-tertiary-hover: var(--neutral-700);
|
|
802
822
|
--text-quaternary: var(--neutral-500);
|
|
803
823
|
--text-disabled: var(--neutral-400);
|
|
804
|
-
--text-placeholder: var(--neutral-
|
|
824
|
+
--text-placeholder: var(--neutral-500);
|
|
805
825
|
--text-error-primary: var(--red-700);
|
|
806
826
|
--text-error-secondary: var(--red-600);
|
|
807
827
|
--text-error-tertiary: var(--red-500);
|
|
@@ -842,14 +862,17 @@ html.dark,
|
|
|
842
862
|
--border-status-red: #500601;
|
|
843
863
|
--border-status-orange: #7c2b09;
|
|
844
864
|
|
|
845
|
-
/* SHADOW —
|
|
846
|
-
|
|
847
|
-
--shadow-
|
|
848
|
-
--shadow-
|
|
849
|
-
--shadow-
|
|
850
|
-
|
|
851
|
-
--shadow-
|
|
852
|
-
|
|
865
|
+
/* SHADOW — surface contrast and borders replace decorative elevation. */
|
|
866
|
+
--shadow-color-subtle: transparent;
|
|
867
|
+
--shadow-xs: 0 0 #0000;
|
|
868
|
+
--shadow-default: 0 0 #0000;
|
|
869
|
+
--shadow-slider-thumb: 0 0 #0000;
|
|
870
|
+
--shadow-sm: 0 0 #0000;
|
|
871
|
+
--shadow-md: 0 0 #0000;
|
|
872
|
+
--shadow-lg: 0 0 #0000;
|
|
873
|
+
--shadow-xl: 0 0 #0000;
|
|
874
|
+
--shadow-2xl: 0 0 #0000;
|
|
875
|
+
--shadow-inner: 0 0 #0000;
|
|
853
876
|
|
|
854
877
|
/* SCROLLBAR */
|
|
855
878
|
--scrollbar-thumb: rgba(255, 255, 255, 0.3);
|
package/dist/tokens.json
CHANGED
|
@@ -117,8 +117,12 @@
|
|
|
117
117
|
"--bg-surface-level-4": "var(--neutral-200)",
|
|
118
118
|
"--bg-disabled": "var(--neutral-100)",
|
|
119
119
|
"--bg-elevated": "var(--white)",
|
|
120
|
-
"--bg-
|
|
121
|
-
"--bg-
|
|
120
|
+
"--bg-input": "var(--neutral-25)",
|
|
121
|
+
"--bg-input-disabled": "var(--bg-disabled)",
|
|
122
|
+
"--bg-popover": "var(--neutral-25)",
|
|
123
|
+
"--bg-sidebar": "var(--neutral-50)",
|
|
124
|
+
"--bg-elevated-hover": "var(--neutral-100)",
|
|
125
|
+
"--bg-elevated-selected": "var(--neutral-100)",
|
|
122
126
|
"--bg-overlay": "rgba(0, 0, 0, 0.5)",
|
|
123
127
|
"--bg-brand": "var(--brand-400)",
|
|
124
128
|
"--bg-brand-hover": "var(--brand-500)",
|
|
@@ -150,7 +154,7 @@
|
|
|
150
154
|
"--border-faint": "var(--neutral-50)",
|
|
151
155
|
"--border-strong": "var(--neutral-600)",
|
|
152
156
|
"--border-disabled": "var(--neutral-200)",
|
|
153
|
-
"--border-focus": "var(--brand-
|
|
157
|
+
"--border-focus": "var(--brand-500)",
|
|
154
158
|
"--border-error": "var(--red-300)",
|
|
155
159
|
"--border-error-strong": "var(--red-600)",
|
|
156
160
|
"--border-brand": "var(--brand-400)",
|
|
@@ -166,7 +170,7 @@
|
|
|
166
170
|
"--text-tertiary-hover": "var(--neutral-700)",
|
|
167
171
|
"--text-quaternary": "var(--neutral-500)",
|
|
168
172
|
"--text-disabled": "var(--neutral-300)",
|
|
169
|
-
"--text-placeholder": "var(--neutral-
|
|
173
|
+
"--text-placeholder": "var(--neutral-500)",
|
|
170
174
|
"--text-error-primary": "var(--red-700)",
|
|
171
175
|
"--text-error-secondary": "var(--red-600)",
|
|
172
176
|
"--text-error-tertiary": "var(--red-500)",
|
|
@@ -203,9 +207,15 @@
|
|
|
203
207
|
"--border-status-red": "#fda29b",
|
|
204
208
|
"--border-status-orange": "#f9b072",
|
|
205
209
|
"--shadow-color-subtle": "rgba(16, 24, 40, 0.05)",
|
|
210
|
+
"--shadow-xs": "0 1px 1px 0 rgba(16, 24, 40, 0.02)",
|
|
211
|
+
"--shadow-default": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
212
|
+
"--shadow-slider-thumb": "var(--shadow-default)",
|
|
206
213
|
"--shadow-sm": "0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06)",
|
|
207
214
|
"--shadow-md": "0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.06)",
|
|
208
215
|
"--shadow-lg": "0 10px 15px -3px rgba(16, 24, 40, 0.1),\n 0 4px 6px -2px rgba(16, 24, 40, 0.05)",
|
|
216
|
+
"--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
217
|
+
"--shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
218
|
+
"--shadow-inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
|
209
219
|
"--radius-none": "0px",
|
|
210
220
|
"--radius-xs": "3px",
|
|
211
221
|
"--radius-sm": "4px",
|
|
@@ -587,16 +597,20 @@
|
|
|
587
597
|
"--purple-800": "#e3d9ff",
|
|
588
598
|
"--purple-900": "#f1ecff",
|
|
589
599
|
"--purple-950": "#f9f7ff",
|
|
590
|
-
"--bg-surface-level-1": "var(--neutral-
|
|
591
|
-
"--bg-surface-level-1-hover": "var(--neutral-
|
|
592
|
-
"--bg-surface-level-2": "var(--neutral-
|
|
593
|
-
"--bg-surface-level-2-hover": "var(--neutral-
|
|
594
|
-
"--bg-surface-level-3": "var(--neutral-
|
|
595
|
-
"--bg-surface-level-4": "var(--neutral-
|
|
596
|
-
"--bg-disabled": "var(--neutral-
|
|
597
|
-
"--bg-elevated": "var(--neutral-
|
|
598
|
-
"--bg-
|
|
599
|
-
"--bg-
|
|
600
|
+
"--bg-surface-level-1": "var(--neutral-50)",
|
|
601
|
+
"--bg-surface-level-1-hover": "var(--neutral-100)",
|
|
602
|
+
"--bg-surface-level-2": "var(--neutral-100)",
|
|
603
|
+
"--bg-surface-level-2-hover": "var(--neutral-200)",
|
|
604
|
+
"--bg-surface-level-3": "var(--neutral-200)",
|
|
605
|
+
"--bg-surface-level-4": "var(--neutral-300)",
|
|
606
|
+
"--bg-disabled": "var(--neutral-200)",
|
|
607
|
+
"--bg-elevated": "var(--neutral-50)",
|
|
608
|
+
"--bg-input": "var(--neutral-100)",
|
|
609
|
+
"--bg-input-disabled": "var(--neutral-50)",
|
|
610
|
+
"--bg-popover": "var(--neutral-100)",
|
|
611
|
+
"--bg-sidebar": "var(--neutral-35)",
|
|
612
|
+
"--bg-elevated-hover": "var(--neutral-200)",
|
|
613
|
+
"--bg-elevated-selected": "var(--neutral-300)",
|
|
600
614
|
"--bg-overlay": "rgba(0, 0, 0, 0.7)",
|
|
601
615
|
"--bg-brand": "var(--brand-500)",
|
|
602
616
|
"--bg-brand-hover": "var(--brand-400)",
|
|
@@ -617,18 +631,18 @@
|
|
|
617
631
|
"--bg-warning-strong": "var(--orange-600)",
|
|
618
632
|
"--bg-control-active": "var(--brand-500)",
|
|
619
633
|
"--bg-control-active-hover": "var(--brand-600)",
|
|
620
|
-
"--bg-control-thumb": "var(--
|
|
634
|
+
"--bg-control-thumb": "var(--neutral-900)",
|
|
621
635
|
"--bg-control-disabled": "var(--neutral-200)",
|
|
622
636
|
"--text-control-active-foreground": "var(--bg-control-thumb)",
|
|
623
637
|
"--bg-selected": "var(--brand-50)",
|
|
624
638
|
"--bg-selected-hover": "var(--brand-100)",
|
|
625
|
-
"--border-default": "var(--neutral-
|
|
626
|
-
"--border-subtle": "var(--neutral-
|
|
627
|
-
"--border-muted": "var(--neutral-
|
|
628
|
-
"--border-faint": "var(--neutral-
|
|
639
|
+
"--border-default": "var(--neutral-400)",
|
|
640
|
+
"--border-subtle": "var(--neutral-300)",
|
|
641
|
+
"--border-muted": "var(--neutral-200)",
|
|
642
|
+
"--border-faint": "var(--neutral-100)",
|
|
629
643
|
"--border-strong": "var(--neutral-600)",
|
|
630
|
-
"--border-disabled": "var(--neutral-
|
|
631
|
-
"--border-focus": "var(--brand-500)",
|
|
644
|
+
"--border-disabled": "var(--neutral-300)",
|
|
645
|
+
"--border-focus": "color-mix(\n in srgb,\n var(--brand-700) 80%,\n var(--neutral-500)\n )",
|
|
632
646
|
"--border-error": "var(--red-200)",
|
|
633
647
|
"--border-error-strong": "var(--red-600)",
|
|
634
648
|
"--border-brand": "var(--brand-400)",
|
|
@@ -644,7 +658,7 @@
|
|
|
644
658
|
"--text-tertiary-hover": "var(--neutral-700)",
|
|
645
659
|
"--text-quaternary": "var(--neutral-500)",
|
|
646
660
|
"--text-disabled": "var(--neutral-400)",
|
|
647
|
-
"--text-placeholder": "var(--neutral-
|
|
661
|
+
"--text-placeholder": "var(--neutral-500)",
|
|
648
662
|
"--text-error-primary": "var(--red-700)",
|
|
649
663
|
"--text-error-secondary": "var(--red-600)",
|
|
650
664
|
"--text-error-tertiary": "var(--red-500)",
|
|
@@ -680,10 +694,16 @@
|
|
|
680
694
|
"--border-status-yellow": "#5b4300",
|
|
681
695
|
"--border-status-red": "#500601",
|
|
682
696
|
"--border-status-orange": "#7c2b09",
|
|
683
|
-
"--shadow-color-subtle": "
|
|
684
|
-
"--shadow-
|
|
685
|
-
"--shadow-
|
|
686
|
-
"--shadow-
|
|
697
|
+
"--shadow-color-subtle": "transparent",
|
|
698
|
+
"--shadow-xs": "0 0 #0000",
|
|
699
|
+
"--shadow-default": "0 0 #0000",
|
|
700
|
+
"--shadow-slider-thumb": "0 0 #0000",
|
|
701
|
+
"--shadow-sm": "0 0 #0000",
|
|
702
|
+
"--shadow-md": "0 0 #0000",
|
|
703
|
+
"--shadow-lg": "0 0 #0000",
|
|
704
|
+
"--shadow-xl": "0 0 #0000",
|
|
705
|
+
"--shadow-2xl": "0 0 #0000",
|
|
706
|
+
"--shadow-inner": "0 0 #0000",
|
|
687
707
|
"--scrollbar-thumb": "rgba(255, 255, 255, 0.3)",
|
|
688
708
|
"--scrollbar-thumb-hover": "rgba(255, 255, 255, 0.5)",
|
|
689
709
|
"--syntax-plain": "#cbd5e1",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@langchain/macaw-tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Framework-independent CSS design tokens for Macaw.",
|
|
5
5
|
"homepage": "https://github.com/langchain-ai/macaw-design-system#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -29,7 +29,12 @@
|
|
|
29
29
|
"./package.json": "./package.json"
|
|
30
30
|
},
|
|
31
31
|
"publishConfig": {
|
|
32
|
-
"access": "public"
|
|
32
|
+
"access": "public",
|
|
33
|
+
"provenance": true,
|
|
34
|
+
"tag": "latest"
|
|
35
|
+
},
|
|
36
|
+
"engines": {
|
|
37
|
+
"node": ">=26"
|
|
33
38
|
},
|
|
34
39
|
"nx": {
|
|
35
40
|
"targets": {
|