@nattui/react-components 0.0.35 → 0.0.36

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.
@@ -96,21 +96,9 @@
96
96
  background-color: var(--color-primary-9);
97
97
  background-image: linear-gradient(
98
98
  to bottom,
99
- color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
99
+ color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
100
100
  color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
101
101
  );
102
- box-shadow:
103
- 0 0 0 1px var(--color-primary-9) inset,
104
- 0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
105
- 0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
106
- }
107
-
108
- .button__variant_accent:active:enabled,
109
- .button__variant_accent[aria-pressed="true"]:enabled {
110
- box-shadow:
111
- 0 0 0 1px var(--color-primary-9) inset,
112
- 0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
113
- 0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
114
102
  }
115
103
 
116
104
  .button__variant_accent:active:enabled,
@@ -123,7 +111,7 @@
123
111
  background-image: linear-gradient(
124
112
  to bottom,
125
113
  color-mix(in oklab, transparent 100%, #000000 0%) 50%,
126
- color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
114
+ color-mix(in oklab, transparent 100%, #000000 5%) 50%
127
115
  );
128
116
  }
129
117
 
@@ -136,7 +124,7 @@
136
124
  .button__variant_ghost:active:enabled,
137
125
  .button__variant_ghost:hover:enabled,
138
126
  .button__variant_ghost[aria-pressed="true"]:enabled {
139
- background-color: var(--color-gray-4);
127
+ background-color: var(--color-gray-3);
140
128
  }
141
129
 
142
130
  :global(.dark) .button__variant_ghost {
@@ -146,24 +134,12 @@
146
134
  /* Primary */
147
135
  .button__variant_primary {
148
136
  color: var(--color-white);
149
- background-color: var(--color-gray-dark-2);
137
+ background-color: var(--color-gray-dark-1);
150
138
  background-image: linear-gradient(
151
139
  to bottom,
152
- color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
140
+ color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
153
141
  color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
154
142
  );
155
- box-shadow:
156
- 0 0 0 1px var(--color-gray-dark-2) inset,
157
- 0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
158
- 0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
159
- }
160
-
161
- .button__variant_primary:active:enabled,
162
- .button__variant_primary[aria-pressed="true"]:enabled {
163
- box-shadow:
164
- 0 0 0 1px var(--color-gray-dark-2) inset,
165
- 0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
166
- 0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
167
143
  }
168
144
 
169
145
  .button__variant_primary:active:enabled,
@@ -178,20 +154,8 @@
178
154
  background-image: linear-gradient(
179
155
  to bottom,
180
156
  color-mix(in oklab, transparent 100%, #000000 0%) 50%,
181
- color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
157
+ color-mix(in oklab, transparent 100%, #000000 5%) 50%
182
158
  );
183
- box-shadow:
184
- 0 0 0 1px var(--color-gray-light-1) inset,
185
- 0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
186
- 0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
187
- }
188
-
189
- :global(.dark) .button__variant_primary:active:enabled,
190
- :global(.dark) .button__variant_primary[aria-pressed="true"]:enabled {
191
- box-shadow:
192
- 0 0 0 1px var(--color-gray-light-2) inset,
193
- 0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
194
- 0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
195
159
  }
196
160
 
197
161
  :global(.dark) .button__variant_primary:active:enabled,
@@ -209,33 +173,23 @@
209
173
  color-mix(in oklab, transparent 100%, #000000 0%) 50%,
210
174
  color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
211
175
  );
212
- box-shadow:
213
- 0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
214
- /* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
215
- }
216
-
217
- .button__variant_secondary:active:enabled,
218
- .button__variant_secondary[aria-pressed="true"]:enabled {
219
- box-shadow: 0 0 0 1px var(--color-gray-6) inset;
176
+ box-shadow: 0 0 0 1px var(--color-gray-4) inset;
220
177
  }
221
178
 
222
179
  .button__variant_secondary:active:enabled,
223
180
  .button__variant_secondary:hover:enabled,
224
181
  .button__variant_secondary[aria-pressed="true"]:enabled {
225
- background-color: var(--color-gray-3);
182
+ background-color: var(--color-gray-2);
183
+ box-shadow: 0 0 0 1px var(--color-gray-6) inset;
226
184
  }
227
185
 
228
186
  :global(.dark) .button__variant_secondary {
229
187
  color: var(--color-white);
230
- background-color: var(--color-gray-2);
231
188
  background-image: linear-gradient(
232
189
  to bottom,
233
190
  color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
234
191
  color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
235
192
  );
236
- box-shadow:
237
- 0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
238
- /* Top */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
239
193
  }
240
194
 
241
195
  /* ===================================================== */
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ function ButtonSpinner(props) {
7
7
  }
8
8
 
9
9
  // src/button.tsx
10
- import styles2 from "./button.module-NXMK7IBS.module.css";
10
+ import styles2 from "./button.module-4LEXZ25X.module.css";
11
11
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
12
12
  function Button(props) {
13
13
  const {
@@ -79,7 +79,7 @@ var BUTTON_CLASS_NAME = {
79
79
  };
80
80
 
81
81
  // src/input.tsx
82
- import styles3 from "./input.module-45RAFIJZ.module.css";
82
+ import styles3 from "./input.module-JBNVVC6S.module.css";
83
83
  import { jsx as jsx3 } from "react/jsx-runtime";
84
84
  function Input(props) {
85
85
  const {
@@ -207,7 +207,7 @@ var SWITCH_CLASS_NAME = {
207
207
  };
208
208
 
209
209
  // src/textarea.tsx
210
- import inputStyles from "./input.module-45RAFIJZ.module.css";
210
+ import inputStyles from "./input.module-JBNVVC6S.module.css";
211
211
  import styles7 from "./textarea.module-6GUVSFC7.module.css";
212
212
  import { jsx as jsx7 } from "react/jsx-runtime";
213
213
  function Textarea(props) {
@@ -20,9 +20,7 @@
20
20
  outline-offset: -2px;
21
21
  background-color: var(--color-gray-1, #fcfcfc);
22
22
  border-style: none;
23
- box-shadow:
24
- 0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
25
- /* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
23
+ box-shadow: 0 0 0 1px var(--color-gray-4) inset;
26
24
  transition-duration: 150ms;
27
25
  transition-property: box-shadow, opacity;
28
26
  }
@@ -41,9 +39,7 @@
41
39
  .input:enabled:focus,
42
40
  .input:enabled:hover,
43
41
  .input:enabled[data-is-active="true"] {
44
- box-shadow:
45
- 0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
46
- /* Bottom */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
42
+ box-shadow: 0 0 0 1px var(--color-gray-6) inset;
47
43
  }
48
44
 
49
45
  .input[data-is-valid="true"] {
@@ -59,22 +55,6 @@
59
55
  outline-color: var(--color-primary-9, #e93d82);
60
56
  }
61
57
 
62
- :global(.dark) .input {
63
- background-color: var(--color-gray-2, #101010);
64
- box-shadow:
65
- 0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
66
- /* Top */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
67
- }
68
-
69
- :global(.dark) .input:enabled:active,
70
- :global(.dark) .input:enabled:focus,
71
- :global(.dark) .input:enabled:hover,
72
- :global(.dark) .input:enabled[data-is-active="true"] {
73
- box-shadow:
74
- 0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
75
- /* Top */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
76
- }
77
-
78
58
  /* ===================================================== */
79
59
  /* Password */
80
60
  /* ===================================================== */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattui/react-components",
3
- "version": "0.0.35",
3
+ "version": "0.0.36",
4
4
  "description": "A collection of reusable React components built with TypeScript and CSS Modules",
5
5
  "keywords": [
6
6
  "components",