@khipu/design-system 0.2.0-alpha.44 → 0.2.0-alpha.46

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.
@@ -13,7 +13,7 @@
13
13
  *
14
14
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
15
15
  * Source: design-system/src/tokens/tokens.json
16
- * Generated: 2026-06-11T20:11:47.479Z
16
+ * Generated: 2026-06-12T15:00:55.820Z
17
17
  *
18
18
  * To regenerate:
19
19
  * cd design-system && npm run tokens:generate
@@ -2209,6 +2209,74 @@
2209
2209
  pointer-events: none;
2210
2210
  }
2211
2211
 
2212
+ /* ========================================
2213
+ KDS COPY BUTTON
2214
+ Chip compacto que muestra un valor + icono copy y lo copia al click.
2215
+ Acción inline (distinto de KdsCopyRow). Look del copy button de khenshin.
2216
+ ======================================== */
2217
+
2218
+ .kds-theme-root .kds-copy-button {
2219
+ display: inline-flex;
2220
+ align-items: center;
2221
+ gap: var(--kds-spacing-1);
2222
+ padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
2223
+ border: none;
2224
+ border-radius: var(--kds-radius-button);
2225
+ background: var(--kds-alert-info-bg);
2226
+ color: var(--kds-color-info-dark);
2227
+ font-family: var(--kds-font-family-secondary);
2228
+ font-size: var(--kds-font-size-sm);
2229
+ font-weight: var(--kds-font-weight-medium);
2230
+ line-height: var(--kds-line-height-normal);
2231
+ cursor: pointer;
2232
+ transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard),
2233
+ color var(--kds-transition-shorter) var(--kds-easing-standard);
2234
+ }
2235
+
2236
+ .kds-theme-root .kds-copy-button .material-symbols-outlined {
2237
+ font-size: 1rem;
2238
+ color: var(--kds-color-info-main);
2239
+ flex-shrink: 0;
2240
+ }
2241
+
2242
+ .kds-theme-root .kds-copy-button.copied {
2243
+ background: var(--kds-alert-success-bg);
2244
+ color: var(--kds-alert-success-text);
2245
+ animation: kds-copy-button-pulse var(--kds-transition-short) var(--kds-easing-standard);
2246
+ }
2247
+
2248
+ .kds-theme-root .kds-copy-button.copied .material-symbols-outlined {
2249
+ color: var(--kds-color-success-main);
2250
+ /* el check entra con un pop al copiar */
2251
+ animation: kds-copy-button-pop var(--kds-transition-short) var(--kds-easing-standard);
2252
+ }
2253
+
2254
+ @keyframes kds-copy-button-pulse {
2255
+ 0% {
2256
+ transform: scale(1);
2257
+ }
2258
+ 50% {
2259
+ transform: scale(1.04);
2260
+ }
2261
+ 100% {
2262
+ transform: scale(1);
2263
+ }
2264
+ }
2265
+
2266
+ @keyframes kds-copy-button-pop {
2267
+ 0% {
2268
+ transform: scale(0.3);
2269
+ opacity: 0;
2270
+ }
2271
+ 60% {
2272
+ transform: scale(1.25);
2273
+ opacity: 1;
2274
+ }
2275
+ 100% {
2276
+ transform: scale(1);
2277
+ }
2278
+ }
2279
+
2212
2280
  /* ========================================
2213
2281
  Link Styles
2214
2282
  ======================================== */