@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/autocomplete/Autocomplete.css

@@ -124,69 +124,115 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 .prokodo-Autocomplete {
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Autocomplete--primary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-brand);
+  --pk-autocomplete-gradient-to: var(--pk-color-accent);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--secondary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-accent);
+  --pk-autocomplete-gradient-to: var(--pk-color-brand);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--success {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-success);
+  --pk-autocomplete-gradient-to: #10CCB8;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--warning {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-warning);
+  --pk-autocomplete-gradient-to: #f7cc6a;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--error {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-error);
+  --pk-autocomplete-gradient-to: #ff6b6b;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--info, .prokodo-Autocomplete--inherit, .prokodo-Autocomplete--white {
+  --pk-autocomplete-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-autocomplete-gradient-from: var(--pk-color-muted);
+  --pk-autocomplete-gradient-to: var(--pk-color-border);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-autocomplete-bg));
+}
+html[data-theme="dark"] .prokodo-Autocomplete, [data-theme="dark"] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
+  --pk-autocomplete-state-fg: var(--pk-color-fg);
+  --pk-autocomplete-fg-muted: var(--pk-palette-grey-200);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 15%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 25%, var(--pk-autocomplete-bg));
 }
 .prokodo-Autocomplete__inputWrap {
   position: relative;
-  z-index: 41;
-  border-radius: 1.5rem;
 }
-.prokodo-Autocomplete__input {
-  width: 100%;
+.prokodo-Autocomplete__input--is-open {
+  --pk-input-shadow-color-focus: var(--pk-autocomplete-shadow-color-focus);
+}
+.prokodo-Autocomplete__input--is-open .prokodo-Input__field {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
 }
-.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
+.prokodo-Autocomplete__input--is-open .prokodo-Input__notch {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+  border-bottom-color: transparent;
 }
 .prokodo-Autocomplete__input__inner--is-open {
-  background: var(--gradient-border-4);
+  background-size: 100% 100%, 100% 100%;
+  background-position: 100% 0, 0 0;
+  animation: none;
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node {
+  background-color: var(--pk-autocomplete-bg);
+  color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node--is-open {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node:-webkit-autofill, .prokodo-Autocomplete__input__node:-webkit-autofill:hover, .prokodo-Autocomplete__input__node:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--pk-autocomplete-bg) inset;
+  -webkit-text-fill-color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node:disabled {
+  color: var(--pk-autocomplete-fg-muted);
 }
 .prokodo-Autocomplete__list {
   position: absolute;
-  top: 100%;
-  left: 0;
-  width: calc(100% - 4px);
-  margin: 0;
-  padding: 0 2px 2px;
-  list-style: none;
-  transform: none;
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  background: var(--gradient-border-4);
-  margin-top: -2px;
-  box-shadow: var(--elevation-3);
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(var(--pk-autocomplete-bg), var(--pk-autocomplete-bg)) padding-box, linear-gradient(90deg, var(--pk-autocomplete-gradient-from), var(--pk-autocomplete-gradient-to), var(--pk-autocomplete-gradient-from)) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
+  box-shadow: 0 8px 16px var(--pk-autocomplete-shadow-color-focus), 0 2px 6px color-mix(in srgb, var(--pk-autocomplete-shadow-color-focus) 80%, transparent);
+  z-index: 200;
+  overflow-y: auto;
   max-height: 260px;
-  overflow: auto;
-  z-index: 50;
-  animation: fade-in 180ms ease-out;
-  scrollbar-width: none;
-}
-.prokodo-Autocomplete__list::-webkit-scrollbar {
-  display: none;
+  padding: var(--pk-space-xs) 0;
+  list-style: none;
+  margin: 0;
 }
 .prokodo-Autocomplete__state {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  color: var(--pk-autocomplete-state-fg);
   margin: 0;
-  padding: 0.5rem 1rem 1rem 1rem;
-  background: var(--color-white);
-  color: var(--color-grey-700);
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -209,70 +255,42 @@
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Autocomplete__state {
-  background: rgb(16, 19, 27);
-  color: var(--color-grey-500);
-}
 .prokodo-Autocomplete__itemRow {
   list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.prokodo-Autocomplete__itemRow--is-last {
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
 }
 .prokodo-Autocomplete__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  cursor: pointer;
+  background: none;
   border: none;
-  background: var(--color-white);
-  color: inherit;
   text-align: left;
-  display: grid;
-  grid-gap: 0.25rem;
-  gap: 0.25rem;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: background-color 120ms ease;
-}
-html[data-theme=dark] .prokodo-Autocomplete__item {
-  background: rgb(16, 19, 27);
+  color: var(--pk-autocomplete-fg);
+  transition: background-color var(--pk-timing-fast) ease;
 }
 .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
+  background-color: var(--pk-autocomplete-item-hover-bg);
 }
-.prokodo-Autocomplete__item:focus-visible {
-  outline: 0;
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
-  background: var(--color-primary-50);
+.prokodo-Autocomplete__item--is-active {
+  background-color: var(--pk-autocomplete-item-active-bg);
 }
 .prokodo-Autocomplete__item--is-first {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: 0;
 }
 .prokodo-Autocomplete__item--is-last {
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
-}
-.prokodo-Autocomplete__item--is-active {
-  background: var(--color-primary-100);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
-  background: var(--color-primary-100);
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
 }
 .prokodo-Autocomplete__itemLabel {
   margin: 0;
-  color: var(--color-grey-900);
+  color: var(--pk-autocomplete-fg);
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
-  line-height: 1.45;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
@@ -280,19 +298,17 @@ html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
 }
 @media screen and (min-width: 480px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 .prokodo-Autocomplete__itemDescription {
-  margin: 0;
-  color: var(--color-grey-700);
+  margin: var(--pk-space-xs) 0 0;
+  color: var(--pk-autocomplete-fg-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/autocomplete/Autocomplete.module.css

@@ -124,69 +124,115 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 .prokodo-Autocomplete {
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Autocomplete--primary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-brand);
+  --pk-autocomplete-gradient-to: var(--pk-color-accent);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--secondary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-accent);
+  --pk-autocomplete-gradient-to: var(--pk-color-brand);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--success {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-success);
+  --pk-autocomplete-gradient-to: #10CCB8;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--warning {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-warning);
+  --pk-autocomplete-gradient-to: #f7cc6a;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--error {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-error);
+  --pk-autocomplete-gradient-to: #ff6b6b;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--info, .prokodo-Autocomplete--inherit, .prokodo-Autocomplete--white {
+  --pk-autocomplete-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-autocomplete-gradient-from: var(--pk-color-muted);
+  --pk-autocomplete-gradient-to: var(--pk-color-border);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-autocomplete-bg));
+}
+html[data-theme="dark"] .prokodo-Autocomplete, [data-theme="dark"] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
+  --pk-autocomplete-state-fg: var(--pk-color-fg);
+  --pk-autocomplete-fg-muted: var(--pk-palette-grey-200);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 15%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 25%, var(--pk-autocomplete-bg));
 }
 .prokodo-Autocomplete__inputWrap {
   position: relative;
-  z-index: 41;
-  border-radius: 1.5rem;
 }
-.prokodo-Autocomplete__input {
-  width: 100%;
+.prokodo-Autocomplete__input--is-open {
+  --pk-input-shadow-color-focus: var(--pk-autocomplete-shadow-color-focus);
+}
+.prokodo-Autocomplete__input--is-open .prokodo-Input__field {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
 }
-.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
+.prokodo-Autocomplete__input--is-open .prokodo-Input__notch {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+  border-bottom-color: transparent;
 }
 .prokodo-Autocomplete__input__inner--is-open {
-  background: var(--gradient-border-4);
+  background-size: 100% 100%, 100% 100%;
+  background-position: 100% 0, 0 0;
+  animation: none;
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node {
+  background-color: var(--pk-autocomplete-bg);
+  color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node--is-open {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node:-webkit-autofill, .prokodo-Autocomplete__input__node:-webkit-autofill:hover, .prokodo-Autocomplete__input__node:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--pk-autocomplete-bg) inset;
+  -webkit-text-fill-color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node:disabled {
+  color: var(--pk-autocomplete-fg-muted);
 }
 .prokodo-Autocomplete__list {
   position: absolute;
-  top: 100%;
-  left: 0;
-  width: calc(100% - 4px);
-  margin: 0;
-  padding: 0 2px 2px;
-  list-style: none;
-  transform: none;
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  background: var(--gradient-border-4);
-  margin-top: -2px;
-  box-shadow: var(--elevation-3);
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(var(--pk-autocomplete-bg), var(--pk-autocomplete-bg)) padding-box, linear-gradient(90deg, var(--pk-autocomplete-gradient-from), var(--pk-autocomplete-gradient-to), var(--pk-autocomplete-gradient-from)) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
+  box-shadow: 0 8px 16px var(--pk-autocomplete-shadow-color-focus), 0 2px 6px color-mix(in srgb, var(--pk-autocomplete-shadow-color-focus) 80%, transparent);
+  z-index: 200;
+  overflow-y: auto;
   max-height: 260px;
-  overflow: auto;
-  z-index: 50;
-  animation: fade-in 180ms ease-out;
-  scrollbar-width: none;
-}
-.prokodo-Autocomplete__list::-webkit-scrollbar {
-  display: none;
+  padding: var(--pk-space-xs) 0;
+  list-style: none;
+  margin: 0;
 }
 .prokodo-Autocomplete__state {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  color: var(--pk-autocomplete-state-fg);
   margin: 0;
-  padding: 0.5rem 1rem 1rem 1rem;
-  background: var(--color-white);
-  color: var(--color-grey-700);
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -209,70 +255,42 @@
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Autocomplete__state {
-  background: rgb(16, 19, 27);
-  color: var(--color-grey-500);
-}
 .prokodo-Autocomplete__itemRow {
   list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.prokodo-Autocomplete__itemRow--is-last {
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
 }
 .prokodo-Autocomplete__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  cursor: pointer;
+  background: none;
   border: none;
-  background: var(--color-white);
-  color: inherit;
   text-align: left;
-  display: grid;
-  grid-gap: 0.25rem;
-  gap: 0.25rem;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: background-color 120ms ease;
-}
-html[data-theme=dark] .prokodo-Autocomplete__item {
-  background: rgb(16, 19, 27);
+  color: var(--pk-autocomplete-fg);
+  transition: background-color var(--pk-timing-fast) ease;
 }
 .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
+  background-color: var(--pk-autocomplete-item-hover-bg);
 }
-.prokodo-Autocomplete__item:focus-visible {
-  outline: 0;
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
-  background: var(--color-primary-50);
+.prokodo-Autocomplete__item--is-active {
+  background-color: var(--pk-autocomplete-item-active-bg);
 }
 .prokodo-Autocomplete__item--is-first {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: 0;
 }
 .prokodo-Autocomplete__item--is-last {
-  border-bottom-left-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
-}
-.prokodo-Autocomplete__item--is-active {
-  background: var(--color-primary-100);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
-  background: var(--color-primary-100);
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
 }
 .prokodo-Autocomplete__itemLabel {
   margin: 0;
-  color: var(--color-grey-900);
+  color: var(--pk-autocomplete-fg);
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
-  line-height: 1.45;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
@@ -280,19 +298,17 @@ html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
 }
 @media screen and (min-width: 480px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 .prokodo-Autocomplete__itemDescription {
-  margin: 0;
-  color: var(--color-grey-700);
+  margin: var(--pk-space-xs) 0 0;
+  color: var(--pk-autocomplete-fg-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/autocomplete/Autocomplete.module.scss.js

@@ -1,18 +1,25 @@
 const styles = {
   "prokodo-Autocomplete": "prokodo-Autocomplete",
+  "prokodo-Autocomplete--primary": "prokodo-Autocomplete--primary",
+  "prokodo-Autocomplete--secondary": "prokodo-Autocomplete--secondary",
+  "prokodo-Autocomplete--success": "prokodo-Autocomplete--success",
+  "prokodo-Autocomplete--warning": "prokodo-Autocomplete--warning",
+  "prokodo-Autocomplete--error": "prokodo-Autocomplete--error",
+  "prokodo-Autocomplete--info": "prokodo-Autocomplete--info",
+  "prokodo-Autocomplete--inherit": "prokodo-Autocomplete--inherit",
+  "prokodo-Autocomplete--white": "prokodo-Autocomplete--white",
   "prokodo-Autocomplete__inputWrap": "prokodo-Autocomplete__inputWrap",
-  "prokodo-Autocomplete__input": "prokodo-Autocomplete__input",
+  "prokodo-Autocomplete__input--is-open": "prokodo-Autocomplete__input--is-open",
   "prokodo-Autocomplete__input__inner--is-open": "prokodo-Autocomplete__input__inner--is-open",
+  "prokodo-Autocomplete__input__node": "prokodo-Autocomplete__input__node",
   "prokodo-Autocomplete__input__node--is-open": "prokodo-Autocomplete__input__node--is-open",
   "prokodo-Autocomplete__list": "prokodo-Autocomplete__list",
-  "fade-in": "fade-in",
   "prokodo-Autocomplete__state": "prokodo-Autocomplete__state",
   "prokodo-Autocomplete__itemRow": "prokodo-Autocomplete__itemRow",
-  "prokodo-Autocomplete__itemRow--is-last": "prokodo-Autocomplete__itemRow--is-last",
   "prokodo-Autocomplete__item": "prokodo-Autocomplete__item",
+  "prokodo-Autocomplete__item--is-active": "prokodo-Autocomplete__item--is-active",
   "prokodo-Autocomplete__item--is-first": "prokodo-Autocomplete__item--is-first",
   "prokodo-Autocomplete__item--is-last": "prokodo-Autocomplete__item--is-last",
-  "prokodo-Autocomplete__item--is-active": "prokodo-Autocomplete__item--is-active",
   "prokodo-Autocomplete__itemLabel": "prokodo-Autocomplete__itemLabel",
   "prokodo-Autocomplete__itemDescription": "prokodo-Autocomplete__itemDescription"
 };

package/dist/components/autocomplete/Autocomplete.view.js

@@ -31,6 +31,7 @@ function AutocompleteView({
   listClassName,
   itemClassName,
   inputProps,
+  color = "primary",
   _clientState,
   onChange,
   onSelect
@@ -39,7 +40,7 @@ function AutocompleteView({
   const hasItems = isArray(items) && items.length > 0;
   const canShowList = Boolean(_clientState == null ? void 0 : _clientState.open);
   const canSearch = String(value ?? "").trim().length >= minQueryLength;
-  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: true }, className), children: [
     /* @__PURE__ */ jsx("div", { className: bem("inputWrap"), children: /* @__PURE__ */ jsx(
       Input,
       {
@@ -47,6 +48,7 @@ function AutocompleteView({
         "aria-describedby": ariaDescribedBy,
         "aria-labelledby": ariaLabelledBy,
         autoComplete,
+        color,
         disabled,
         fullWidth,
         hideLegend: hideLabel || (restInputProps == null ? void 0 : restInputProps.hideLegend),

package/dist/components/avatar/Avatar.css

@@ -134,25 +134,28 @@
   background-color: transparent;
 }
 .prokodo-Avatar--primary {
-  background-color: var(--color-primary-500);
+  background-color: var(--pk-color-brand);
 }
 .prokodo-Avatar--secondary {
-  background-color: var(--color-secondary-500);
+  background-color: var(--pk-color-accent);
 }
 .prokodo-Avatar--info {
-  background-color: var(--color-grey-300);
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Avatar--success {
-  background-color: var(--color-success);
+  background-color: var(--pk-color-success);
 }
 .prokodo-Avatar--warning {
-  background-color: var(--color-warning);
+  background-color: var(--pk-color-warning);
 }
 .prokodo-Avatar--error {
-  background-color: var(--color-error);
+  background-color: var(--pk-color-error);
 }
 .prokodo-Avatar--white {
-  background-color: var(--color-white);
+  background-color: var(--pk-palette-white);
+}
+.prokodo-Avatar--inherit {
+  color: var(--pk-color-fg);
 }
 .prokodo-Avatar--has-size-xs {
   width: 30px;
@@ -183,6 +186,6 @@
   border-radius: 100%;
 }
 .prokodo-Avatar__link {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-shadow-sm);
   border-radius: 200px;
 }