@nattui/react-components 0.0.12 → 0.0.13

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.
@@ -2,30 +2,30 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .button {
5
- align-items: safe center;
6
- border-color: transparent;
7
- border-style: solid;
8
- border-width: 1px;
9
- column-gap: 8px;
10
- cursor: pointer;
5
+ position: relative;
11
6
  display: flex;
12
7
  flex-shrink: 0;
8
+ column-gap: 8px;
9
+ align-items: safe center;
10
+ justify-content: safe center;
11
+ overflow: hidden;
13
12
  font-family: var(--font-sans, sans-serif);
14
13
  font-size: 14px;
15
14
  font-weight: 500;
16
- justify-content: safe center;
17
15
  line-height: 1.5;
16
+ cursor: pointer;
17
+ user-select: none;
18
+ outline-width: 0;
19
+ outline-style: solid;
18
20
  outline-color: var(--color-primary-9, #e93d82);
19
21
  outline-offset: 2px;
20
- outline-style: solid;
21
- outline-width: 0;
22
- overflow: hidden;
23
- position: relative;
22
+ border-color: transparent;
23
+ border-style: solid;
24
+ border-width: 1px;
24
25
  transition-duration: 150ms;
25
26
  transition-property:
26
27
  background-color, border-color, box-shadow, color, filter, opacity,
27
28
  translate;
28
- user-select: none;
29
29
  }
30
30
 
31
31
  .button:disabled {
@@ -67,8 +67,8 @@
67
67
  /* Icon only */
68
68
  /* ===================================================== */
69
69
  .button__icon_only {
70
- padding: 0 !important;
71
70
  width: var(--size) !important;
71
+ padding: 0 !important;
72
72
  }
73
73
 
74
74
  /* ===================================================== */
@@ -114,6 +114,7 @@
114
114
  /* ===================================================== */
115
115
  /* Accent */
116
116
  .button__variant_accent {
117
+ color: var(--color-gray-1, #fdfcfd);
117
118
  background-image: linear-gradient(
118
119
  to bottom,
119
120
  var(--color-primary-9, #e93d82),
@@ -123,7 +124,6 @@
123
124
  box-shadow:
124
125
  inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
125
126
  inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
126
- color: var(--color-gray-1, #fdfcfd);
127
127
  }
128
128
 
129
129
  .button__variant_accent:enabled[aria-pressed="true"],
@@ -135,27 +135,28 @@
135
135
 
136
136
  /* Ghost */
137
137
  .button__variant_ghost {
138
- background-color: transparent;
139
138
  color: var(--color-gray-11, #6f6e77);
139
+ background-color: transparent;
140
140
  }
141
141
 
142
142
  .button__variant_ghost:enabled[aria-pressed="true"],
143
143
  .button__variant_ghost:enabled:active {
144
- background-color: var(--color-gray-5, #e9e8ea) !important;
145
144
  color: var(--color-gray-12, #1a1523);
145
+ background-color: var(--color-gray-5, #e9e8ea) !important;
146
146
  }
147
147
 
148
148
  .button__variant_ghost:enabled:hover {
149
+ color: var(--color-gray-12, #1a1523);
149
150
  background-color: color-mix(
150
151
  in oklab,
151
152
  var(--color-gray-5, #e9e8ea) 75%,
152
153
  transparent
153
154
  );
154
- color: var(--color-gray-12, #1a1523);
155
155
  }
156
156
 
157
157
  /* Primary */
158
158
  .button__variant_primary {
159
+ color: var(--color-gray-1, #fdfcfd);
159
160
  background-image: linear-gradient(
160
161
  to bottom,
161
162
  color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
@@ -165,7 +166,6 @@
165
166
  box-shadow:
166
167
  inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
167
168
  inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
168
- color: var(--color-gray-1, #fdfcfd);
169
169
  }
170
170
 
171
171
  .button__variant_primary:enabled[aria-pressed="true"],
@@ -177,6 +177,7 @@
177
177
 
178
178
  /* Secondary */
179
179
  .button__variant_secondary {
180
+ color: var(--color-gray-11, #6f6e77);
180
181
  background-image: linear-gradient(
181
182
  to bottom,
182
183
  var(--color-gray-1, #fdfcfd),
@@ -186,14 +187,13 @@
186
187
  box-shadow:
187
188
  inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
188
189
  inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
189
- color: var(--color-gray-11, #6f6e77);
190
190
  }
191
191
 
192
192
  .button__variant_secondary:enabled[aria-pressed="true"],
193
193
  .button__variant_secondary:enabled:active,
194
194
  .button__variant_secondary:enabled:hover {
195
- border-color: var(--color-gray-8, #c8c7cb);
196
195
  color: var(--color-gray-12, #1a1523);
196
+ border-color: var(--color-gray-8, #c8c7cb);
197
197
  }
198
198
 
199
199
  .button__variant_secondary:enabled[aria-pressed="true"],
@@ -2,29 +2,29 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .input {
5
- appearance: none;
6
- background-color: var(--color-gray-1, #fcfcfc);
7
- border-color: var(--color-gray-5, #e0e0e0);
8
- border-radius: 8px;
9
- border-style: solid;
10
- border-width: 1px;
11
- box-shadow: 0 1px rgba(0, 0, 0, 0.05);
12
- color: var(--color-gray-12, #202020);
13
- cursor: text;
5
+ width: 100%;
6
+ height: 40px;
7
+ padding: 0 12px;
14
8
  font-family: var(--font-sans, sans-serif);
15
9
  font-size: 14px;
16
10
  font-weight: 400;
17
- height: 40px;
18
11
  line-height: 1.5;
12
+ color: var(--color-gray-12, #202020);
13
+ text-decoration: none;
14
+ appearance: none;
15
+ cursor: text;
16
+ outline-width: 0;
17
+ outline-style: solid;
19
18
  outline-color: var(--color-primary-9, #e93d82);
20
19
  outline-offset: 2px;
21
- outline-style: solid;
22
- outline-width: 0;
23
- padding: 0 12px;
24
- text-decoration: none;
20
+ background-color: var(--color-gray-1, #fcfcfc);
21
+ border-color: var(--color-gray-5, #e0e0e0);
22
+ border-style: solid;
23
+ border-width: 1px;
24
+ border-radius: 8px;
25
+ box-shadow: 0 1px rgba(0, 0, 0, 0.05);
25
26
  transition-duration: 150ms;
26
27
  transition-property: background-color, border-color, box-shadow, opacity;
27
- width: 100%;
28
28
  }
29
29
 
30
30
  .input::placeholder {
@@ -2,7 +2,7 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .label {
5
- color: var(--color-gray-11, #646464);
6
- font-size: 13px;
7
5
  width: fit-content;
6
+ font-size: 13px;
7
+ color: var(--color-gray-11, #646464);
8
8
  }