@joanroucoux/cairn-ui 0.5.1 → 0.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.
- package/fesm2022/joanroucoux-cairn-ui.mjs +1281 -467
- package/fesm2022/joanroucoux-cairn-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/tokens.css +18 -6
- package/types/joanroucoux-cairn-ui.d.ts +274 -56
package/package.json
CHANGED
package/styles/tokens.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* can import it without side effects.
|
|
5
5
|
*
|
|
6
6
|
* Monochrome direction: the brand carries no hue, so semantic color is the only color in the
|
|
7
|
-
* interface. Every text token clears 4.5:1 against --background, --card and --
|
|
7
|
+
* interface. Every text token clears 4.5:1 against --background, --card, --elevated, --muted and --soft in both
|
|
8
8
|
* schemes; the ratios are recorded in projects/ui/docs/colors.mdx. Do not edit a value without
|
|
9
9
|
* recomputing them.
|
|
10
10
|
*/
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
--hairline: light-dark(#edefee, #1e2020);
|
|
23
23
|
|
|
24
24
|
/* Text */
|
|
25
|
-
--muted-foreground: light-dark(#5c6462, #
|
|
26
|
-
--subtle-foreground: light-dark(#
|
|
25
|
+
--muted-foreground: light-dark(#5c6462, #989d9b);
|
|
26
|
+
--subtle-foreground: light-dark(#626a68, #8f9593);
|
|
27
27
|
|
|
28
28
|
/* Brand - no hue: --primary is a near-black on light, a near-white on dark */
|
|
29
29
|
--primary: light-dark(#161918, #f2f4f3);
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
--ring: light-dark(#161918, #f2f4f3);
|
|
35
35
|
|
|
36
36
|
/* Semantics - these roles never change meaning, in any theme */
|
|
37
|
-
--positive: light-dark(#
|
|
38
|
-
--negative: light-dark(#
|
|
39
|
-
--stale: light-dark(#
|
|
37
|
+
--positive: light-dark(#047757, #3fbf8f);
|
|
38
|
+
--negative: light-dark(#b5413a, #e96e63);
|
|
39
|
+
--stale: light-dark(#86620d, #c4922a);
|
|
40
40
|
|
|
41
41
|
/* Neutral ramp - allocation bars, where a categorical palette would break the monochrome premise */
|
|
42
42
|
--ramp-1: light-dark(#161918, #f2f4f3);
|
|
@@ -106,6 +106,16 @@
|
|
|
106
106
|
light #f7f8f8, dark #0a0b0b - the --background values. */
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
+
:root {
|
|
110
|
+
--chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c6462' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (prefers-color-scheme: dark) {
|
|
114
|
+
:root {
|
|
115
|
+
--chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23989d9b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
109
119
|
@media (min-width: 64rem) {
|
|
110
120
|
:root {
|
|
111
121
|
--gutter: 2rem;
|
|
@@ -132,8 +142,10 @@
|
|
|
132
142
|
|
|
133
143
|
:root[data-theme='light'] {
|
|
134
144
|
color-scheme: light;
|
|
145
|
+
--chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c6462' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
135
146
|
}
|
|
136
147
|
|
|
137
148
|
:root[data-theme='dark'] {
|
|
138
149
|
color-scheme: dark;
|
|
150
|
+
--chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23989d9b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
139
151
|
}
|