@khipu/design-system 0.2.0-alpha.31 → 0.2.0-alpha.33

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-06-04T13:33:39.898Z
+ * Generated: 2026-06-09T13:05:49.029Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -48,16 +48,20 @@
   --kds-color-success-main: #2E7D32;
   --kds-color-success-light: #4CAF50;
   --kds-color-success-dark: #1B5E20;
+  --kds-color-success-contrast: #FFFFFF;
   --kds-color-warning-main: #EF6C00;
   --kds-color-warning-light: #FF9800;
   --kds-color-warning-dark: #E65100;
+  --kds-color-warning-contrast: #FFFFFF;
   --kds-color-warning-warm: #8A6D1A;
   --kds-color-error-main: #D32F2F;
   --kds-color-error-light: #EF5350;
   --kds-color-error-dark: #C62828;
+  --kds-color-error-contrast: #FFFFFF;
   --kds-color-info-main: #0288D1;
   --kds-color-info-light: #03A9F4;
   --kds-color-info-dark: #01579B;
+  --kds-color-info-contrast: #FFFFFF;
   --kds-color-info-blue: #5A5FE0;
 
   /* Text colors */
@@ -5983,6 +5987,9 @@ div.kds-invoice-header,
     place-items: center;
     color: #fff;
     flex-shrink: 0;
+    /* Clip the slightly-oversized logo (see `.kds-invoice-merchant img`) to the
+       rounded square so it can fully cover the deep-purple background. */
+    overflow: hidden;
 }
 
 .kds-invoice-merchant i {
@@ -6002,8 +6009,11 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-merchant img {
-    width: 100%;
-    height: 100%;
+    /* Slightly larger than the container (+2px, centered by the grid) so the
+       logo overflows under the parent's rounded clip and the deep-purple
+       background never peeks through at the corners when the logo shrinks. */
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
     object-fit: cover;
     border-radius: var(--kds-radius-md);
 }
@@ -6206,6 +6216,39 @@ a.kds-btn-success:disabled {
     box-shadow: none;
 }
 
+/* -- Button Warning (amber CTA) -- */
+button.kds-btn-warning,
+a.kds-btn-warning {
+    background: var(--kds-color-warning-main);
+    color: var(--kds-color-warning-contrast);
+    border: none;
+}
+
+button.kds-btn-warning:hover:not(:disabled),
+a.kds-btn-warning:hover:not(:disabled) {
+    background: var(--kds-color-warning-dark);
+}
+
+button.kds-btn-warning:active:not(:disabled),
+button.kds-btn-warning:focus-visible:not(:disabled),
+a.kds-btn-warning:active:not(:disabled),
+a.kds-btn-warning:focus-visible:not(:disabled) {
+    background: var(--kds-color-warning-dark);
+    outline: 2px solid var(--kds-color-warning-main);
+    outline-offset: 2px;
+}
+
+button.kds-btn-warning:disabled,
+a.kds-btn-warning:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
+button.kds-btn-warning::after {
+    display: none;
+}
+
 /* -- Field Helper Text -- */
 .kds-field-helper {
     font-size: var(--kds-font-size-xs);
@@ -7416,7 +7459,8 @@ a.kds-copy-all-btn.copied:hover {
     margin-bottom: var(--kds-spacing-4);
 }
 
-.kds-payment-total .kds-payment-amount .kds-payment-total-decimal-sup {
+.kds-payment-total .kds-payment-amount .kds-payment-total-decimal-sup,
+.kds-invoice-amount .kds-payment-total-decimal-sup {
     font-size: var(--kds-font-size-decimal-sup);
     font-weight: var(--kds-font-weight-semibold);
     position: relative;