@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/input/Input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -125,6 +124,14 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes inputNotchAnimate {
+  0%, 100% {
+    border-color: var(--pk-input-gradient-from);
+  }
+  50% {
+    border-color: var(--pk-input-gradient-to);
+  }
+}
 .prokodo-Input {
   position: relative;
   display: flex;
@@ -132,79 +139,129 @@
   height: 100%;
   width: 100%;
 }
+.prokodo-Input--primary {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-brand);
+  --pk-input-gradient-to: var(--pk-color-accent);
+  --pk-input-label-focused-fg: var(--pk-color-brand);
+  --pk-input-border-focus: var(--pk-color-brand);
+}
+.prokodo-Input--secondary {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-accent);
+  --pk-input-gradient-to: var(--pk-color-brand);
+  --pk-input-label-focused-fg: var(--pk-color-accent);
+  --pk-input-border-focus: var(--pk-color-accent);
+}
+.prokodo-Input--success {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-success);
+  --pk-input-gradient-to: #10CCB8;
+  --pk-input-label-focused-fg: var(--pk-color-success);
+  --pk-input-border-focus: var(--pk-color-success);
+}
+.prokodo-Input--warning {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-warning);
+  --pk-input-gradient-to: #f7cc6a;
+  --pk-input-label-focused-fg: var(--pk-color-warning);
+  --pk-input-border-focus: var(--pk-color-warning);
+}
+.prokodo-Input--error {
+  --pk-input-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-input-gradient-from: var(--pk-color-error);
+  --pk-input-gradient-to: #ff6b6b;
+  --pk-input-label-focused-fg: var(--pk-color-error);
+  --pk-input-border-focus: var(--pk-color-error);
+}
+.prokodo-Input--info, .prokodo-Input--inherit, .prokodo-Input--white {
+  --pk-input-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-input-gradient-from: var(--pk-color-muted);
+  --pk-input-gradient-to: var(--pk-color-border);
+  --pk-input-label-focused-fg: var(--pk-color-muted);
+  --pk-input-border-focus: var(--pk-color-border);
+}
+html[data-theme="dark"] .prokodo-Input--info, [data-theme="dark"] .prokodo-Input--info, .pk-theme-dark .prokodo-Input--info, html[data-theme="dark"] .prokodo-Input--inherit, [data-theme="dark"] .prokodo-Input--inherit, .pk-theme-dark .prokodo-Input--inherit, html[data-theme="dark"] .prokodo-Input--white, [data-theme="dark"] .prokodo-Input--white, .pk-theme-dark .prokodo-Input--white {
+  --pk-input-gradient-from: var(--pk-palette-grey-100);
+  --pk-input-gradient-to: var(--pk-palette-grey-200);
+}
 .prokodo-Input__label {
+  --pk-label-gradient-from: var(--pk-input-gradient-from);
+  --pk-label-gradient-to: var(--pk-input-gradient-to);
+  position: absolute;
+  left: var(--pk-space-xl);
+  font-size: 1.125rem;
+  top: calc(var(--pk-space-xl) + var(--pk-space-xs));
+  transform: translateY(-50%) scale(1);
+  padding: 0;
   transform-origin: top left;
-  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-  padding-bottom: 0.5rem;
-  color: var(--color-grey-600);
-  z-index: 1;
+  transition: transform var(--pk-timing-normal) ease, color var(--pk-timing-normal) ease;
+  color: var(--pk-input-label-fg);
+  z-index: 2;
   pointer-events: none;
 }
-@media screen and (min-width: 960px) {
-  .prokodo-Input__label {
-    position: absolute;
-    left: 1.5rem;
-    font-size: 1.125rem;
-    top: 1.75rem;
-    /* start centered vertically, at full size */
-    transform: translateY(-50%) scale(1);
-    padding: 0;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Input__label--is-focused {
-    /* lift up and shrink */
-    transform: translateY(-150%) scale(0.75);
-    color: var(--color-primary-500);
-    /* white background behind text so it “floats” */
-    background-color: var(--color-white);
-    padding: 0 0.25rem;
-  }
-  html[data-theme=dark] .prokodo-Input__label--is-focused {
-    background-color: rgb(16, 19, 27);
-  }
+.prokodo-Input__label--is-focused {
+  top: 0;
+  transform: translateY(-50%) scale(0.75);
+  color: var(--pk-input-label-focused-fg);
 }
 .prokodo-Input__inner {
   position: relative;
 }
 .prokodo-Input__field {
   position: relative;
-  box-shadow: var(--elevation-1);
-  border-radius: 1.5rem;
+  box-shadow: var(--pk-input-shadow);
+  border-radius: var(--pk-input-radius);
+  transition: box-shadow var(--pk-timing-normal) ease;
+}
+.prokodo-Input__field:hover {
+  box-shadow: 0 4px 12px var(--pk-input-shadow-color-focus), 0 0 5px var(--pk-input-shadow-color-focus);
+}
+.prokodo-Input__field:hover fieldset {
+  animation: inputNotchAnimate 2s linear infinite;
+  border-color: var(--pk-input-gradient-from);
+}
+.prokodo-Input__field:focus-within {
+  box-shadow: 0 4px 12px var(--pk-input-shadow-color-focus), 0 0 5px var(--pk-input-shadow-color-focus);
+}
+.prokodo-Input__field:focus-within fieldset {
+  animation: none;
+  border-color: var(--pk-input-border-focus);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--is-focused), .prokodo-Input__field:has(.prokodo-Input__input--focused) {
+  box-shadow: 0 4px 12px var(--pk-input-shadow-color-focus), 0 0 5px var(--pk-input-shadow-color-focus);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--is-focused) fieldset, .prokodo-Input__field:has(.prokodo-Input__input--focused) fieldset {
+  animation: none;
+  border-color: var(--pk-input-border-focus);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--disabled) {
+  box-shadow: var(--pk-input-shadow);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--disabled):hover {
+  box-shadow: var(--pk-input-shadow);
+}
+.prokodo-Input__field:has(.prokodo-Input__input--disabled):hover fieldset {
+  animation: none;
+  border-color: var(--pk-input-border);
 }
 .prokodo-Input__input {
-  width: calc(100% - 0.25rem + 4px);
+  width: calc(100% - var(--pk-space-xs) + 4px);
   padding: 0;
   text-align: left;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: source-over;
-          mask-composite: add;
   border: none;
-  color: var(--color-grey-900);
-  border-radius: 1.5rem;
-  background: var(--gradient-border-7);
-  /* Standard :autofill selector (supported in modern browsers) */
-  /* Chrome / Edge / Opera / Safari (WebKit/Blink) */
-  /* Firefox (legacy) */
-  /* Optional: border style when autofilled */
-  /* Optional: gleiche Styles für Textareas, falls autocomplete genutzt wird */
+  color: var(--pk-input-fg);
+  border-radius: var(--pk-input-radius);
+  background: transparent;
 }
 .prokodo-Input__input input:-webkit-autofill, .prokodo-Input__input textarea:-webkit-autofill {
-  background-color: var(--color-white);
-  color: var(--color-grey-900);
+  background-color: var(--pk-input-bg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input input:autofill,
 .prokodo-Input__input textarea:autofill {
-  background-color: var(--color-white);
-  color: var(--color-grey-900);
-}
-html[data-theme=dark] .prokodo-Input__input input:-webkit-autofill, html[data-theme=dark] .prokodo-Input__input textarea:-webkit-autofill {
-  background-color: rgb(16, 19, 27);
-}
-html[data-theme=dark] .prokodo-Input__input input:autofill,
-html[data-theme=dark] .prokodo-Input__input textarea:autofill {
-  background-color: rgb(16, 19, 27);
+  background-color: var(--pk-input-bg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input input:-webkit-autofill,
 .prokodo-Input__input input:-webkit-autofill:hover,
@@ -212,66 +269,44 @@ html[data-theme=dark] .prokodo-Input__input textarea:autofill {
 .prokodo-Input__input textarea:-webkit-autofill,
 .prokodo-Input__input textarea:-webkit-autofill:hover,
 .prokodo-Input__input textarea:-webkit-autofill:focus {
-  /* Paint over the browser’s autofill background */
-  box-shadow: 0 0 0 1000px var(--color-white) inset;
-  /* Text color inside autofilled field */
-  -webkit-text-fill-color: var(--color-grey-900);
-  /* Long transition hack so the yellow flash is not visible */
+  box-shadow: 0 0 0 1000px var(--pk-input-bg) inset;
+  -webkit-text-fill-color: var(--pk-input-fg);
   -webkit-transition: background-color 9999s ease-out, color 9999s ease-out;
   transition: background-color 9999s ease-out, color 9999s ease-out;
 }
 .prokodo-Input__input input:-moz-autofill,
 .prokodo-Input__input textarea:-moz-autofill {
-  box-shadow: 0 0 0 1000px var(--color-white) inset;
-  background-color: var(--color-white);
-  color: var(--color-grey-900);
-}
-html[data-theme=dark] .prokodo-Input__input input:-moz-autofill,
-html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
-  background-color: rgb(16, 19, 27);
+  box-shadow: 0 0 0 1000px var(--pk-input-bg) inset;
+  background-color: var(--pk-input-bg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input input:is(:-webkit-autofill, :-webkit-autofill), .prokodo-Input__input textarea:is(:-webkit-autofill, :-webkit-autofill) {
-  border-color: none; /* adjust as needed */
+  border-color: none;
 }
 .prokodo-Input__input input:is(:autofill, :-webkit-autofill),
 .prokodo-Input__input textarea:is(:autofill, :-webkit-autofill) {
-  border-color: none; /* adjust as needed */
+  border-color: none;
 }
 .prokodo-Input__input textarea:-webkit-autofill,
 .prokodo-Input__input textarea:-moz-autofill {
-  box-shadow: 0 0 0 1000px #ffffff inset;
-  -webkit-text-fill-color: #000000;
-  color: #000000 !important;
-}
-.prokodo-Input__input--is-focused {
-  background: var(--gradient-border-4);
-}
-.prokodo-Input__input:hover {
-  background: var(--gradient-border-4);
+  box-shadow: 0 0 0 1000px var(--pk-input-bg) inset;
+  -webkit-text-fill-color: var(--pk-input-fg);
+  color: var(--pk-input-fg);
 }
 .prokodo-Input__input--multiline {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.prokodo-Input__input--focused {
-  background: var(--gradient-border-4);
-}
-.prokodo-Input__input--disabled {
-  background: var(--gradient-border-8);
-}
-.prokodo-Input__input--disabled:hover {
-  background: var(--gradient-border-8);
-}
 .prokodo-Input__input__node {
-  width: calc(100% - 1rem - 1rem - 0.25rem);
-  padding: 0.875rem 1rem;
+  width: calc(100% - var(--pk-input-padding-x) - var(--pk-input-trailing-pr, var(--pk-input-padding-x)) - var(--pk-space-xs));
+  padding: var(--pk-input-padding-y) var(--pk-input-trailing-pr, var(--pk-input-padding-x)) var(--pk-input-padding-y) var(--pk-input-padding-x);
   margin: 2px;
   border: none;
   outline: none;
-  border-radius: 1.5rem;
-  color: var(--color-grey-900);
-  background-color: var(--color-white);
+  border-radius: var(--pk-input-radius);
+  color: var(--pk-input-fg);
+  background-color: var(--pk-input-bg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -292,16 +327,11 @@ html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
     font-size: 1rem;
   }
 }
-html[data-theme=dark] .prokodo-Input__input__node {
-  background-color: rgb(16, 19, 27);
-}
 .prokodo-Input__input__node {
   font-size: 1rem;
 }
 .prokodo-Input__input__node--multiline {
-  /* allow it to grow to fill the wrapper */
   flex: 1 1;
-  /* remove inline-table & min-height */
   display: block;
   height: 100%;
   resize: vertical;
@@ -323,18 +353,73 @@ html[data-theme=dark] .prokodo-Input__input__node {
   pointer-events: none;
 }
 .prokodo-Input__input__node:disabled {
-  color: var(--color-grey-700);
-  background: var(--color-white);
+  color: var(--pk-input-fg-muted);
+  background: var(--pk-input-bg);
+}
+.prokodo-Input__input--has-trailing {
+  --pk-input-trailing-pr: calc(var(--pk-input-padding-x) + 1.5rem);
+}
+.prokodo-Input__notch {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0 calc(var(--pk-space-xl) - 0.25em);
+  border: 2px solid var(--pk-input-border);
+  border-radius: var(--pk-input-radius);
+  pointer-events: none;
+  z-index: 1;
+  background: transparent;
+  transition: border-color var(--pk-timing-normal) ease;
 }
-html[data-theme=dark] .prokodo-Input__input__node:disabled {
-  background-color: rgb(16, 19, 27);
+.prokodo-Input__notch legend {
+  display: block;
+  height: 0;
+  font-size: 0.84375rem;
+  visibility: hidden;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  max-width: 0.01px;
+  transition: max-width var(--pk-timing-normal) ease;
+}
+.prokodo-Input__notch legend span {
+  padding: 0 0.5em;
+  display: inline-block;
+}
+.prokodo-Input__notch--is-focused legend {
+  max-width: 100%;
+}
+.prokodo-Input__trailing {
+  position: absolute;
+  right: var(--pk-input-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--pk-input-fg-muted);
+  pointer-events: none;
+  z-index: 2;
+}
+[data-theme="dark"] .prokodo-Input__trailing, .pk-theme-dark .prokodo-Input__trailing {
+  color: var(--pk-palette-grey-300);
 }
-.prokodo-Input__input:focus {
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 5px var(--color-primary-500);
+.prokodo-Input__trailing--clickable {
+  pointer-events: auto;
+  background: none;
+  border: none;
+  padding: var(--pk-space-xs);
+  margin-right: calc(-1 * var(--pk-space-xs));
+  cursor: pointer;
+  border-radius: var(--pk-input-radius);
+  transition: color var(--pk-timing-normal) ease, background var(--pk-timing-normal) ease;
+}
+.prokodo-Input__trailing--clickable:hover {
+  color: var(--pk-input-fg);
+  background: color-mix(in srgb, var(--pk-input-fg) 8%, transparent);
 }
-.prokodo-Input__input[aria-invalid=true] {
-  border-color: var(--color-error);
+.prokodo-Input__trailing--clickable:focus-visible {
+  outline: 2px solid var(--pk-input-border-focus);
+  outline-offset: 2px;
 }
 .prokodo-Input__footer {
   display: flex;
@@ -344,14 +429,14 @@ html[data-theme=dark] .prokodo-Input__input__node:disabled {
   justify-content: flex-end;
 }
 .prokodo-Input__helperText__wrapper {
-  padding-top: 0.25rem;
+  padding-top: var(--pk-space-xs);
   margin-bottom: 0 !important;
 }
 .prokodo-Input__helperText {
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
+  padding-left: var(--pk-space-xl);
+  padding-top: var(--pk-space-md);
   display: flex;
-  color: var(--color-grey-300);
+  color: var(--pk-input-helper-fg);
   width: 80%;
   font-weight: 400;
   font-size: 1rem;
@@ -375,22 +460,19 @@ html[data-theme=dark] .prokodo-Input__input__node:disabled {
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Input__helperText {
-  color: var(--color-grey-700);
-}
 .prokodo-Input__helperText__content {
   width: 100%;
 }
 .prokodo-Input__helperText__content--is-error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Input__helperText__legend {
   width: 25%;
   text-align: right;
 }
 .prokodo-Input__counter {
-  padding-top: 0.75rem;
-  color: var(--color-grey-600);
+  padding-top: var(--pk-space-md);
+  color: var(--pk-palette-grey-600);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;