@transcodes/ui-components 0.1.0

package/dist/ui-components.css

@@ -0,0 +1 @@
+[data-theme=dark]{--ink-black: #ffffff;--ink-dark: #e5e5e5;--ink-medium: #a3a3a3;--ink-light: #737373;--ink-faint: #525252;--paper-white: #1a1a1a;--paper-cream: #2d2d2d;--paper-warm: #404040;--accent-primary: #a78bfa;--accent-primary-hover: #c4b5fd;--accent-primary-pressed: #8b5cf6;--accent-success: #4ade80;--accent-success-hover: #86efac;--accent-success-pressed: #22c55e;--semantic-warning: #fbbf24;--semantic-warning-hover: #fcd34d;--semantic-info: #38bdf8;--semantic-info-hover: #7dd3fc;--error-base: #f87171;--error-bg: rgba(248, 113, 113, .12);--error-border: rgba(248, 113, 113, .3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-.25rem)}75%{transform:translate(.25rem)}}@keyframes inkFloat{0%,to{transform:translate(0) scale(1);opacity:.5}50%{transform:translate(.625rem,-.625rem) scale(1.1);opacity:.7}}@keyframes inkDrift{0%,to{transform:translate(0) rotate(0);opacity:.4}33%{transform:translate(-.5rem,.5rem) rotate(-5deg);opacity:.6}66%{transform:translate(.375rem,-.375rem) rotate(3deg);opacity:.5}}@keyframes inkSpread{0%{transform:scale(0);opacity:.4}to{transform:scale(var(--ink-effect-spread-scale, 2.5));opacity:0}}.page-container{position:relative;width:100%;max-width:var(--page-container-max-width);margin:0 auto;padding:0 var(--page-container-padding);animation:fadeInUp .6s var(--transition-smooth) both}.page-container--wide{max-width:var(--page-container-max-width-wide)}.page-card{background:var(--paper-white);padding:var(--page-card-padding);border-radius:var(--page-card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.page-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--space-fixed-2xs);background:linear-gradient(135deg,var(--alpha-primary08) 0%,transparent 50%,var(--alpha-primary04) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.page-card--centered{text-align:center}.page-decoration{position:absolute;border-radius:50%;filter:blur(3.75rem);pointer-events:none;z-index:0}.page-decoration--primary{background:var(--alpha-primary15)}.page-decoration--success{background:var(--alpha-success15)}.page-decoration--float{animation:inkFloat 4s ease-in-out infinite}.page-decoration--drift{animation:inkDrift 5s ease-in-out infinite}.button{height:var(--button-height);padding:0 var(--space-lg);font-family:var(--font-body);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--button-radius);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.button-primary{background:var(--accent-primary);color:var(--paper-white)}.button-primary:hover:not(:disabled){background:var(--accent-primary-hover);box-shadow:var(--shadow-button-hover-primary);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-success{background:var(--accent-success);color:var(--paper-white)}.button-success:hover:not(:disabled){background:var(--accent-success-hover);box-shadow:var(--shadow-button-hover-success);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-secondary{height:var(--button-height-secondary);background:transparent;color:var(--ink-dark);border:var(--space-fixed-2xs) solid var(--ink-faint)}.button-secondary:hover:not(:disabled){color:var(--accent-primary);border-color:var(--accent-primary);background:var(--alpha-primary04)}.button:disabled{cursor:not-allowed;opacity:.7}.text-button{display:inline-flex;align-items:center;justify-content:center;height:var(--button-text-height);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:var(--button-text-font-size);font-weight:500;color:var(--ink-dark);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.text-button:hover{background:var(--paper-cream);color:var(--accent-primary)}.text-button-sm{height:auto;padding:var(--space-xs) var(--space-sm);font-size:.8125rem}.text-button-md{height:auto;padding:var(--space-sm) var(--space-md)}.button-content{display:flex;align-items:center;justify-content:center;gap:var(--button-content-gap)}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.button-text{flex:1;text-align:center}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);border:var(--button-spinner-border-width) solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.button-ink{position:relative;overflow:hidden}.button-ink:after{content:"";position:absolute;top:50%;left:50%;width:21.875rem;height:21.875rem;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);border-radius:50%;pointer-events:none;transition:transform var(--ink-effect-ripple-duration, .6s) var(--ink-effect-ripple-easing, cubic-bezier(.4, 0, .2, 1)),opacity var(--ink-effect-fade-duration, .3s) ease;opacity:0}.button-ink:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.button-ink:active:after{transform:translate(-50%,-50%) scale(.8);opacity:.8}.card{background:var(--paper-white);padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.container{position:relative;width:100%;max-width:var(--container-max-width)}.container-wide{max-width:var(--container-max-width-wide)}.form-header{text-align:center;margin-bottom:var(--form-header-margin-bottom)}.form-title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing);animation:slideDown .4s var(--transition-smooth) .2s both}.form-subtitle{font-size:var(--form-subtitle-font-size);color:var(--ink-medium);margin-top:var(--space-sm);animation:fadeInUp .4s var(--transition-smooth) .4s both}.form-fields{display:flex;flex-direction:column;gap:var(--form-fields-gap)}.form-footer{margin-top:var(--form-footer-margin-top);text-align:center;animation:fadeInUp .4s var(--transition-smooth) .6s both}.field-group{display:flex;flex-direction:column;gap:var(--field-group-gap)}.field-label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);transition:color var(--transition-fast)}.field-group.focused .field-label{color:var(--accent-primary)}.required-mark{color:var(--accent-primary);margin-left:var(--space-2xs)}.input{width:100%;padding:var(--input-padding-y) var(--input-padding-x);font-family:var(--font-body);font-size:var(--input-font-size);color:var(--ink-black);background:var(--paper-cream);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--input-radius);transition:background var(--transition-smooth),border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.input::placeholder{color:var(--ink-faint)}.input:hover{background:var(--paper-warm)}.input:focus{outline:none;background:var(--paper-white);border-color:var(--ink-faint);box-shadow:var(--shadow-input-focus)}.label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);margin-bottom:var(--space-sm);transition:color var(--transition-fast)}.title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing)}.error-message{display:flex;align-items:flex-start;gap:var(--feedback-error-gap);padding:var(--feedback-error-padding);background:var(--error-bg);border:var(--space-fixed-2xs) solid var(--error-border);border-radius:var(--feedback-error-radius);color:var(--error-base);animation:slideDown .3s var(--transition-smooth) both}.error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-error-icon-size);height:var(--feedback-error-icon-size);color:var(--error-base)}.error-message.shake{animation:shake .4s var(--transition-smooth)}.notice{display:flex;align-items:flex-start;gap:var(--feedback-notice-gap);padding:var(--feedback-notice-padding);border-radius:var(--feedback-notice-radius);animation:slideUp .4s var(--transition-smooth) both}.notice-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-notice-icon-size);height:var(--feedback-notice-icon-size)}.notice-success{background:#357a4614;border:var(--space-fixed-2xs) solid rgba(53,122,70,.2);color:var(--accent-success)}.notice-warning{background:#b4530914;border:var(--space-fixed-2xs) solid rgba(180,83,9,.2);color:var(--semantic-warning)}.notice-info{background:#0369a114;border:var(--space-fixed-2xs) solid rgba(3,105,161,.2);color:var(--semantic-info)}