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