@marigold/theme-rui 5.0.0 → 5.0.1
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/ui.css +88 -0
- package/package.json +4 -4
package/dist/ui.css
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* UI Component Utilities
|
|
3
|
+
*
|
|
4
|
+
* This file contains utilities to style UI components consistently,
|
|
5
|
+
* including input and surface styling, state variations, and elevation levels.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* ========================= */
|
|
9
|
+
/* Input */
|
|
10
|
+
/* ========================= */
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
* Provides spacing and text styling for input elements.
|
|
14
|
+
* Visual affordances (borders, backgrounds, shadows) are handled by "ui-surface".
|
|
15
|
+
* Combine both utilities for complete input styling.
|
|
16
|
+
*/
|
|
17
|
+
@utility ui-input {
|
|
18
|
+
@apply h-button w-full min-w-0;
|
|
19
|
+
@apply px-3 py-2;
|
|
20
|
+
@apply text-foreground placeholder:text-placeholder text-sm;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* ========================= */
|
|
24
|
+
/* Surface */
|
|
25
|
+
/* ========================= */
|
|
26
|
+
|
|
27
|
+
/*
|
|
28
|
+
* The "ui-surface" utility defines visual surfaces with distinct background colors.
|
|
29
|
+
* Apply elevation levels to them when needed (uses raised as default).
|
|
30
|
+
*
|
|
31
|
+
* This utility uses background-clip and background-origin with gradient borders.
|
|
32
|
+
* The gradient border transitions from top (lighter) to bottom (darker).
|
|
33
|
+
*/
|
|
34
|
+
@utility ui-surface {
|
|
35
|
+
@apply rounded-surface relative transition-[background,border,box-shadow];
|
|
36
|
+
|
|
37
|
+
/* prettier-ignore */
|
|
38
|
+
background:
|
|
39
|
+
linear-gradient(
|
|
40
|
+
to bottom,
|
|
41
|
+
var(--ui-background-color, #fff),
|
|
42
|
+
var(--ui-background-color, #fff)
|
|
43
|
+
),
|
|
44
|
+
linear-gradient(
|
|
45
|
+
to bottom,
|
|
46
|
+
var(--ui-border-color, var(--color-surface-border)),
|
|
47
|
+
oklch(from var(--ui-border-color, var(--color-surface-border)) calc(l - 0.1) c h)
|
|
48
|
+
);
|
|
49
|
+
background-clip: padding-box, border-box;
|
|
50
|
+
background-origin: padding-box, border-box;
|
|
51
|
+
border: 1px solid transparent;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* ========================= */
|
|
55
|
+
/* State */
|
|
56
|
+
/* ========================= */
|
|
57
|
+
|
|
58
|
+
/*
|
|
59
|
+
* Applies a consistent visual style used for keyboard focus states across components.
|
|
60
|
+
* Used this when the border of the component can be changed.
|
|
61
|
+
*/
|
|
62
|
+
@utility ui-state-focus {
|
|
63
|
+
@apply ring-ring/50 ring-[3px] outline-none;
|
|
64
|
+
--ui-border-color: var(--color-ring);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/*
|
|
68
|
+
* Applies a consistent visual style for invalid elements.
|
|
69
|
+
*/
|
|
70
|
+
@utility ui-state-error {
|
|
71
|
+
/* Overrides the transparent border. Gradient would get too dark. */
|
|
72
|
+
@apply border-destructive shadow-destructive/20;
|
|
73
|
+
@apply focus:border-destructive focus:ring-destructive/20;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*
|
|
77
|
+
* Applies a consistent visual style for disabled elements.
|
|
78
|
+
*/
|
|
79
|
+
@utility ui-state-disabled {
|
|
80
|
+
@apply text-disabled-foreground bg-disabled cursor-not-allowed;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/*
|
|
84
|
+
* Applies a consistent visual style for readonly elements.
|
|
85
|
+
*/
|
|
86
|
+
@utility ui-state-readonly {
|
|
87
|
+
--ui-background-color: var(--color-muted);
|
|
88
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@marigold/theme-rui",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "Marigold RUI Theme",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
@@ -55,10 +55,10 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"tailwindcss-animate": "1.0.7",
|
|
57
57
|
"tailwindcss-react-aria-components": "^2.0.1",
|
|
58
|
-
"@marigold/components": "17.0.
|
|
59
|
-
"@marigold/system": "17.0.
|
|
58
|
+
"@marigold/components": "17.0.1",
|
|
59
|
+
"@marigold/system": "17.0.1"
|
|
60
60
|
},
|
|
61
61
|
"scripts": {
|
|
62
|
-
"build": "cross-env NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && shx cp src/theme.css src/global.css src/utils.css src/variants.css dist/"
|
|
62
|
+
"build": "cross-env NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && shx cp src/theme.css src/global.css src/utils.css src/variants.css src/ui.css dist/"
|
|
63
63
|
}
|
|
64
64
|
}
|