@umami/react-zen 0.8.0 → 0.10.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.
Files changed (6) hide show
  1. package/dist/index.css +283 -144
  2. package/dist/index.d.ts +778 -750
  3. package/dist/index.js +619 -546
  4. package/dist/index.mjs +574 -560
  5. package/dist/zen.css +45 -35
  6. package/package.json +2 -2
package/dist/zen.css CHANGED
@@ -25,9 +25,9 @@
25
25
  --font-size-lg: 1.25rem;
26
26
  --font-size-xl: 1.5rem;
27
27
 
28
- --border-thin: 1px;
29
- --border-medium: 2px;
30
- --border-thick: 4px;
28
+ --border-sm: 1px;
29
+ --border-md: 2px;
30
+ --border-lg: 4px;
31
31
 
32
32
  --border-radius-sm: 0.125rem;
33
33
  --border-radius-md: 0.25rem;
@@ -53,20 +53,20 @@
53
53
  --base-color-900: #171717;
54
54
  --base-color-950: #0a0a0a;
55
55
 
56
- --success-bg-color: #22c55e;
57
- --success-fg-color: var(--base-color-50);
56
+ --success-color: #22c55e;
57
+ --success-font-color: var(--base-color-50);
58
58
 
59
- --danger-bg-color: #ef4444;
60
- --danger-fg-color: var(--base-color-50);
59
+ --danger-color: #ef4444;
60
+ --danger-font-color: var(--base-color-50);
61
61
 
62
- --warning-bg-color: #f97316;
63
- --warning-fg-color: var(--base-color-50);
62
+ --warning-color: #f97316;
63
+ --warning-font-color: var(--base-color-50);
64
64
 
65
- --active-bg-color: #3b82f6;
66
- --active-fg-color: var(--base-color-50);
65
+ --active-color: #3b82f6;
66
+ --active-font-color: var(--base-color-50);
67
67
 
68
- --inactive-bg-color: var(--base-color-400);
69
- --inactive-fg-color: var(--base-color-900);
68
+ --inactive-color: var(--base-color-400);
69
+ --inactive-font-color: var(--base-color-900);
70
70
 
71
71
  /* Settings */
72
72
 
@@ -81,52 +81,62 @@
81
81
  --box-shadow: var(--box-shadow-1);
82
82
 
83
83
  --light-color: var(--base-color-50);
84
+
84
85
  --dark-color: var(--base-color-950);
85
86
 
86
87
  /* Theme settings */
87
88
 
89
+ --background-color: #fff;
90
+
88
91
  --font-color: var(--base-color-950);
89
92
  --font-muted-color: var(--base-color-500);
90
93
  --font-faded-color: var(--base-color-400);
91
94
 
92
- --background-color: #fff;
93
-
94
95
  --border-color: var(--base-color-300);
95
- --border: var(--border-thin) solid var(--border-color);
96
- --outline: var(--border-thin) solid var(--base-color-400);
96
+ --border: var(--border-sm) solid var(--border-color);
97
+
98
+ --outline-color: var(--base-color-400);
99
+ --outline: var(--border-sm) solid var(--outline-color);
97
100
 
98
- --primary-fg-color: var(--base-color-50);
99
- --primary-bg-color: var(--base-color-900);
101
+ --primary-color: var(--base-color-900);
102
+ --primary-font-color: var(--base-color-50);
100
103
 
101
- --secondary-fg-color: var(--font-color);
102
- --secondary-bg-color: var(--base-color-100);
104
+ --secondary-color: var(--base-color-100);
105
+ --secondary-font-color: var(--font-color);
103
106
 
104
- --highlight-fg-color: var(--font-color);
105
- --highlight-bg-color: var(--base-color-50);
107
+ --highlight-color: var(--base-color-50);
108
+ --highlight-font-color: var(--font-color);
106
109
 
107
- --input-bg-color: var(--base-color-200);
110
+ --input-background-color: var(--base-color-200);
108
111
  --input-disabled-color: var(--base-color-100);
109
112
 
110
113
  [data-theme='dark'] {
111
- --font-color: var(--base-color-100);
114
+ --background-color: var(--base-color-950);
115
+
116
+ --font-color: var(--base-color-200);
112
117
  --font-muted-color: var(--base-color-400);
113
118
  --font-faded-color: var(--base-color-500);
114
119
 
115
- --background-color: var(--base-color-950);
116
-
117
120
  --border-color: var(--base-color-700);
118
- --border: 1px solid var(--border-color);
121
+ --border: var(--border-sm) solid var(--border-color);
119
122
 
120
- --primary-bg-color: var(--base-color-50);
121
- --primary-fg-color: var(--base-color-900);
123
+ --outline-color: var(--base-color-600);
124
+ --outline: var(--border-sm) solid var(--outline-color);
122
125
 
123
- --secondary-bg-color: var(--base-color-800);
124
- --secondary-fg-color: var(--font-color);
126
+ --primary-color: var(--base-color-50);
127
+ --primary-font-color: var(--base-color-900);
125
128
 
126
- --highlight-bg-color: var(--base-color-800);
127
- --highlight-fg-color: var(--font-color);
129
+ --secondary-color: var(--base-color-800);
130
+ --secondary-font-color: var(--font-color);
128
131
 
129
- --input-bg-color: var(--base-color-700);
132
+ --highlight-color: var(--base-color-800);
133
+ --highlight-font-color: var(--font-color);
134
+
135
+ --input-background-color: var(--base-color-700);
130
136
  --input-disabled-color: var(--base-color-800);
131
137
  }
138
+
139
+ :where(input, textarea, select) {
140
+ min-width: 240px;
141
+ }
132
142
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@umami/react-zen",
3
- "version": "0.8.0",
4
- "description": "React components built by Umami.",
3
+ "version": "0.10.0",
4
+ "description": "React components built by Umami",
5
5
  "author": "Umami <hello@umami.is>",
6
6
  "license": "MIT",
7
7
  "homepage": "https://umami.is/zen",