|
@@ -69,9 +69,9 @@
|
|
|
|
|
|
|
|
/* Primary Button */
|
|
/* Primary Button */
|
|
|
.button.primary {
|
|
.button.primary {
|
|
|
- background: var(--color-primary);
|
|
|
|
|
- color: var(--text-inverse);
|
|
|
|
|
- border-color: transparent;
|
|
|
|
|
|
|
+ background: var(--bg-surface);
|
|
|
|
|
+ color: var(--color-primary);
|
|
|
|
|
+ border-color: var(--color-primary);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.button.primary:hover:not(:disabled) {
|
|
.button.primary:hover:not(:disabled) {
|
|
@@ -97,6 +97,36 @@
|
|
|
background: #fee2e2; /* Red 100 */
|
|
background: #fee2e2; /* Red 100 */
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* Success Button */
|
|
|
|
|
+.button.success {
|
|
|
|
|
+ background: var(--bg-surface);
|
|
|
|
|
+ color: var(--color-success);
|
|
|
|
|
+ border-color: var(--color-success);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.button.success:hover:not(:disabled) {
|
|
|
|
|
+ background: #ecfdf5; /* Emerald 50 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.button.success:active:not(:disabled) {
|
|
|
|
|
+ background: #d1fae5; /* Emerald 100 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* Warning Button */
|
|
|
|
|
+.button.warning {
|
|
|
|
|
+ background: var(--bg-surface);
|
|
|
|
|
+ color: var(--color-warning);
|
|
|
|
|
+ border-color: var(--color-warning);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.button.warning:hover:not(:disabled) {
|
|
|
|
|
+ background: #fffbeb; /* Amber 50 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.button.warning:active:not(:disabled) {
|
|
|
|
|
+ background: #fef3c7; /* Amber 100 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.button:disabled {
|
|
.button:disabled {
|
|
|
opacity: 0.5;
|
|
opacity: 0.5;
|
|
|
cursor: not-allowed;
|
|
cursor: not-allowed;
|