@phpsoftbox/react-softbox 0.1.1 → 0.3.0

package/dist/{components/Button/Button.module.css → foundations/buttons.css}

@@ -1,45 +1,73 @@
-.button {
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
   border: 1px solid var(--btn-border, rgba(30, 51, 85, 0.6));
   cursor: pointer;
   font-weight: 600;
+  font-family: inherit;
+  line-height: 1;
   padding: 12px 18px;
   border-radius: var(--radius-sm);
+  font-size: var(--font-size-3);
   background: var(--btn-bg, rgba(15, 30, 51, 0.9));
   color: var(--btn-color, var(--color-text));
   box-shadow: var(--btn-shadow, none);
   transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
     color 0.2s ease;
+  text-decoration: none;
 }
 
-.button:focus-visible {
+.btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.3);
 }
 
-.button:hover:not(:disabled) {
+.btn:hover:not(.btn-disabled):not(:disabled) {
   background: var(--btn-bg-hover, var(--btn-bg));
   box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
 }
 
-.button:active:not(:disabled) {
+.btn:active:not(.btn-disabled):not(:disabled) {
   transform: translateY(1px);
 }
 
-.button:disabled {
+.btn:disabled,
+.btn.btn-disabled {
   opacity: 0.6;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
-.solid {
+.btn-solid {
   transform: translateY(0);
 }
 
-.solid:hover:not(:disabled) {
+.btn-solid:hover:not(.btn-disabled):not(:disabled) {
   transform: translateY(-1px);
 }
 
-.outline,
-.ghost {
+.btn-sm {
+  padding: 8px 14px;
+  font-size: var(--font-size-2);
+  border-radius: var(--radius-xs);
+}
+
+.btn-md {
+  padding: 12px 18px;
+  font-size: var(--font-size-3);
+  border-radius: var(--radius-sm);
+}
+
+.btn-lg {
+  padding: 14px 22px;
+  font-size: var(--font-size-4);
+  border-radius: var(--radius-md);
+}
+
+.btn-outline,
+.btn-ghost {
   background: transparent;
   color: var(--btn-accent, var(--color-teal));
   border-color: var(--btn-accent, var(--color-teal));
@@ -48,16 +76,16 @@
   --btn-shadow-hover: none;
 }
 
-.ghost {
+.btn-ghost {
   border-color: transparent;
 }
 
-.outline:hover:not(:disabled),
-.ghost:hover:not(:disabled) {
+.btn-outline:hover:not(.btn-disabled):not(:disabled),
+.btn-ghost:hover:not(.btn-disabled):not(:disabled) {
   background: var(--btn-accent-soft, rgba(20, 201, 214, 0.12));
 }
 
-.variantDefault {
+.btn-default {
   --btn-accent: var(--btn-default-accent, rgba(158, 178, 204, 0.9));
   --btn-accent-soft: var(--btn-default-soft, rgba(30, 51, 85, 0.35));
   --btn-bg: linear-gradient(135deg, var(--btn-default-start, #2a3750), var(--btn-default-end, #1b263c));
@@ -68,7 +96,7 @@
   --btn-shadow-hover: 0 14px 30px rgba(10, 20, 35, 0.28);
 }
 
-.variantPrimary {
+.btn-primary {
   --btn-accent: var(--btn-primary-accent, rgba(20, 201, 214, 0.9));
   --btn-accent-soft: var(--btn-primary-soft, rgba(20, 201, 214, 0.18));
   --btn-bg: linear-gradient(135deg, var(--btn-primary-start, #14c9d6), var(--btn-primary-end, #1e63e9));
@@ -79,7 +107,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(20, 201, 214, 0.4);
 }
 
-.variantInfo {
+.btn-info {
   --btn-accent: var(--btn-info-accent, rgba(30, 99, 233, 0.9));
   --btn-accent-soft: var(--btn-info-soft, rgba(30, 99, 233, 0.18));
   --btn-bg: linear-gradient(135deg, var(--btn-info-start, #4f7bff), var(--btn-info-end, #2e5be6));
@@ -90,7 +118,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(30, 99, 233, 0.4);
 }
 
-.variantSuccess {
+.btn-success {
   --btn-accent: var(--btn-success-accent, rgba(79, 230, 163, 0.9));
   --btn-accent-soft: var(--btn-success-soft, rgba(79, 230, 163, 0.16));
   --btn-bg: linear-gradient(135deg, var(--btn-success-start, #35d092), var(--btn-success-end, #1faf75));
@@ -101,7 +129,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(79, 230, 163, 0.36);
 }
 
-.variantWarning {
+.btn-warning {
   --btn-accent: var(--btn-warning-accent, rgba(246, 200, 106, 0.95));
   --btn-accent-soft: var(--btn-warning-soft, rgba(246, 200, 106, 0.2));
   --btn-bg: linear-gradient(135deg, var(--btn-warning-start, #ffd166), var(--btn-warning-end, #f4a62a));
@@ -112,7 +140,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(246, 200, 106, 0.36);
 }
 
-.variantDanger {
+.btn-danger {
   --btn-accent: var(--btn-danger-accent, rgba(255, 107, 107, 0.95));
   --btn-accent-soft: var(--btn-danger-soft, rgba(255, 107, 107, 0.2));
   --btn-bg: linear-gradient(135deg, var(--btn-danger-start, #ff8f8f), var(--btn-danger-end, #ff5b5b));
@@ -124,7 +152,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .button {
+  .btn {
     transition: none;
   }
 }

package/dist/foundations/index.css

@@ -1,3 +1,5 @@
 @import "./tokens.css";
 @import "./typography.css";
 @import "./layout.css";
+@import "./buttons.css";
+@import "./utilities.css";

package/dist/foundations/tokens.css

@@ -1,6 +1,15 @@
 :root {
   color-scheme: dark;
   --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-size-1: 11px;
+  --font-size-2: 12px;
+  --font-size-3: 13px;
+  --font-size-4: 14px;
+  --font-size-5: 16px;
+  --font-size-6: 18px;
+  --font-size-7: 20px;
+  --font-size-8: 24px;
+  --font-size-9: 28px;
 
   --color-bg: #0b1626;
   --color-surface: #0f1e33;
@@ -14,28 +23,28 @@
 
   --color-on-solid: #06201c;
 
-  --badge-default-bg: rgba(30, 51, 85, 0.45);
-  --badge-default-border: rgba(30, 51, 85, 0.7);
+  --badge-default-bg: #1e3355;
+  --badge-default-border: #2b4268;
   --badge-default-color: var(--color-muted);
 
-  --badge-primary-bg: rgba(79, 230, 163, 0.2);
-  --badge-primary-border: rgba(79, 230, 163, 0.4);
+  --badge-primary-bg: #0f3a2d;
+  --badge-primary-border: #1a6a4f;
   --badge-primary-color: var(--color-mint);
 
-  --badge-info-bg: rgba(30, 99, 233, 0.2);
-  --badge-info-border: rgba(30, 99, 233, 0.45);
+  --badge-info-bg: #122a4d;
+  --badge-info-border: #264a8b;
   --badge-info-color: #9cc0ff;
 
-  --badge-success-bg: rgba(47, 186, 122, 0.16);
-  --badge-success-border: rgba(47, 186, 122, 0.45);
+  --badge-success-bg: #103b2a;
+  --badge-success-border: #1f6b4a;
   --badge-success-color: #2fba7a;
 
-  --badge-warning-bg: rgba(246, 200, 106, 0.18);
-  --badge-warning-border: rgba(246, 200, 106, 0.45);
+  --badge-warning-bg: #5a4318;
+  --badge-warning-border: #8b6425;
   --badge-warning-color: #f6c86a;
 
-  --badge-danger-bg: rgba(255, 107, 107, 0.18);
-  --badge-danger-border: rgba(255, 107, 107, 0.45);
+  --badge-danger-bg: #4c2222;
+  --badge-danger-border: #7a3030;
   --badge-danger-color: #ff6b6b;
 
   --btn-default-start: #4b5d78;
@@ -171,24 +180,24 @@
   --badge-default-border: #c5d2e6;
   --badge-default-color: #4f5d73;
 
-  --badge-primary-bg: rgba(20, 201, 214, 0.22);
-  --badge-primary-border: rgba(20, 201, 214, 0.6);
+  --badge-primary-bg: #c9f3f0;
+  --badge-primary-border: #86d7dc;
   --badge-primary-color: #0a6f7a;
 
-  --badge-info-bg: rgba(30, 99, 233, 0.18);
-  --badge-info-border: rgba(30, 99, 233, 0.55);
+  --badge-info-bg: #cddcff;
+  --badge-info-border: #8aa8ff;
   --badge-info-color: #1e4fb8;
 
-  --badge-success-bg: rgba(79, 230, 163, 0.22);
-  --badge-success-border: rgba(42, 186, 122, 0.6);
+  --badge-success-bg: #c8f0dc;
+  --badge-success-border: #7fceaa;
   --badge-success-color: #1b7f58;
 
-  --badge-warning-bg: rgba(246, 200, 106, 0.25);
-  --badge-warning-border: rgba(246, 200, 106, 0.65);
+  --badge-warning-bg: #ffe0a6;
+  --badge-warning-border: #e0b255;
   --badge-warning-color: #9a6b00;
 
-  --badge-danger-bg: rgba(255, 107, 107, 0.2);
-  --badge-danger-border: rgba(255, 107, 107, 0.6);
+  --badge-danger-bg: #ffc2c2;
+  --badge-danger-border: #e08b8b;
   --badge-danger-color: #b93c3c;
 
   --btn-default-start: #8a9bb6;