@kaizen/components 1.69.1 → 1.69.2

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 (5) hide show
  1. package/dist/cjs/__rc__/Button/Button.module.css.cjs +1 -1
  2. package/dist/esm/__rc__/Button/Button.module.css.mjs +1 -1
  3. package/dist/styles.css +1901 -1876
  4. package/package.json +1 -1
  5. package/src/__rc__/Button/Button.module.css +44 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.69.1",
3
+ "version": "1.69.2",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/__rc__/Button/Button.module.css CHANGED
@@ -114,6 +114,12 @@
114
114
  --button-bg-color: var(--color-gray-300);
115
115
  --button-border-color: var(--color-black);
116
116
  }
117
+
118
+ &.isDisabled {
119
+ --button-bg-color: var(--color-white);
120
+ --button-border-color: var(--color-gray-400);
121
+ --button-text-color: var(--color-gray-400);
122
+ }
117
123
  }
118
124
 
119
125
  .tertiary {
@@ -121,19 +127,31 @@
121
127
  --button-border-color: transparent;
122
128
  --button-text-color: var(--color-purple-800);
123
129
 
130
+ &[data-hovered],
131
+ &[data-pressed],
132
+ &[data-pending] {
133
+ --button-text-color: var(--color-blue-500);
134
+ }
135
+
124
136
  &[data-hovered] {
125
- --button-bg-color: var(--color-gray-200);
126
- --button-border-color: var(--color-gray-200);
137
+ --button-bg-color: var(--color-blue-200);
138
+ --button-border-color: var(--color-blue-200);
127
139
  }
128
140
 
129
141
  &[data-pressed] {
130
- --button-bg-color: var(--color-gray-300);
131
- --button-border-color: var(--color-gray-300);
142
+ --button-bg-color: var(--color-blue-100);
143
+ --button-border-color: var(--color-blue-100);
132
144
  }
133
145
 
134
146
  &[data-pending] {
135
- --button-bg-color: var(--color-gray-300);
136
- --button-border-color: var(--color-gray-300);
147
+ --button-bg-color: var(--color-blue-100);
148
+ --button-border-color: var(--color-blue-100);
149
+ }
150
+
151
+ &.isDisabled {
152
+ --button-bg-color: transparent;
153
+ --button-border-color: transparent;
154
+ --button-text-color: var(--color-gray-400);
137
155
  }
138
156
  }
139
157
 
@@ -151,19 +169,25 @@
151
169
  --button-text-color: var(--color-purple-800);
152
170
 
153
171
  &[data-hovered] {
154
- --button-bg-color: var(--color-white);
155
- --button-border-color: var(--color-white);
172
+ --button-bg-color: var(--color-gray-200);
173
+ --button-border-color: var(--color-gray-200);
156
174
  }
157
175
 
158
176
  &[data-pressed] {
159
- --button-bg-color: var(--color-white);
160
- --button-border-color: var(--color-white);
177
+ --button-bg-color: var(--color-gray-300);
178
+ --button-border-color: var(--color-gray-300);
161
179
  }
162
180
 
163
181
  &[data-pending] {
164
182
  --button-bg-color: var(--color-white);
165
183
  --button-border-color: var(--color-white);
166
184
  }
185
+
186
+ &.isDisabled {
187
+ --button-bg-color: rgba(var(--color-white-rgb), 0.2);
188
+ --button-border-color: transparent;
189
+ --button-text-color: rgba(var(--color-purple-800-rgb), 0.7);
190
+ }
167
191
  }
168
192
 
169
193
  .secondaryReversed {
@@ -185,6 +209,12 @@
185
209
  --button-bg-color: rgba(var(--color-white-rgb), 0.1);
186
210
  --button-border-color: var(--color-white);
187
211
  }
212
+
213
+ &.isDisabled {
214
+ --button-bg-color: transparent;
215
+ --button-border-color: rgba(var(--color-white), 0.2);
216
+ --button-text-color: rgba(var(--color-white-rgb), 0.2);
217
+ }
188
218
  }
189
219
 
190
220
  .tertiaryReversed {
@@ -206,16 +236,11 @@
206
236
  --button-bg-color: rgba(var(--color-white-rgb), 0.1);
207
237
  --button-border-color: transparent;
208
238
  }
209
- }
210
239
 
211
- .isDisabled {
212
- --button-bg-color: var(--color-gray-400);
213
- --button-border-color: var(--color-gray-400);
214
- --button-text-color: var(--color-white);
215
-
216
- &[data-hovered] {
217
- --button-bg-color: var(--color-gray-400);
218
- --button-border-color: var(--color-gray-400);
240
+ &.isDisabled {
241
+ --button-bg-color: transparent;
242
+ --button-border-color: transparent;
243
+ --button-text-color: rgba(var(--color-white-rgb), 0.2);
219
244
  }
220
245
  }
221
246