@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/chip/Chip.module.css

@@ -125,17 +125,17 @@
  * content.
  */
 .prokodo-Chip {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  border-radius: 25px;
-  padding: 0.25rem 0.75rem;
+  border-radius: var(--pk-radius-pill);
+  padding: var(--pk-space-xs) var(--pk-space-md);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  gap: 0.5rem;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  border-color: var(--color-grey-500);
-  color: var(--color-black);
+  gap: var(--pk-space-sm);
+  transition: background-color var(--pk-timing-normal) ease, color var(--pk-timing-normal) ease, box-shadow var(--pk-timing-normal) ease, filter var(--pk-timing-fast) ease;
+  color: var(--pk-color-fg);
   font-weight: 500;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -158,107 +158,231 @@
     line-height: 1.5;
   }
 }
+.prokodo-Chip:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+  border-radius: var(--pk-radius-pill);
+}
 .prokodo-Chip--is-clickable {
   cursor: pointer;
 }
+.prokodo-Chip--is-clickable:hover {
+  filter: brightness(1.08);
+  box-shadow: none;
+}
+.prokodo-Chip--is-clickable.prokodo-Chip--filled--primary, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--primary {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);
+}
+.prokodo-Chip--is-clickable.prokodo-Chip--filled--secondary, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--secondary {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-accent) 18%, transparent);
+}
+.prokodo-Chip--is-clickable.prokodo-Chip--filled--success, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--success {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+}
+.prokodo-Chip--is-clickable.prokodo-Chip--filled--warning, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--warning {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+}
+.prokodo-Chip--is-clickable.prokodo-Chip--filled--error, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--error {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+}
+.prokodo-Chip--is-clickable.prokodo-Chip--filled--info, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--info, .prokodo-Chip--is-clickable.prokodo-Chip--filled--inherit, .prokodo-Chip--is-clickable.prokodo-Chip--outlined--inherit {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-fg) 10%, transparent);
+}
 .prokodo-Chip--has-icon {
-  padding-right: 0.5rem;
+  padding-right: var(--pk-space-sm);
 }
 .prokodo-Chip--filled {
   background-color: inherit;
   color: inherit;
 }
 .prokodo-Chip--filled--primary {
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
+  background-color: color-mix(in srgb, var(--pk-color-brand) 14%, var(--pk-color-surface));
 }
 .prokodo-Chip--filled--secondary {
-  background-color: var(--color-secondary-500);
-  color: var(--color-white);
+  background-color: color-mix(in srgb, var(--pk-color-accent) 14%, var(--pk-color-surface));
 }
 .prokodo-Chip--filled--info {
-  background-color: var(--color-grey-300);
-  color: var(--color-grey-700);
+  background-color: color-mix(in srgb, var(--pk-color-muted) 20%, var(--pk-color-surface));
 }
 .prokodo-Chip--filled--success {
-  background-color: var(--color-success);
-  color: var(--color-white);
+  background-color: color-mix(in srgb, var(--pk-color-success) 14%, var(--pk-color-surface));
 }
 .prokodo-Chip--filled--error {
-  background-color: var(--color-error);
-  color: var(--color-white);
+  background-color: color-mix(in srgb, var(--pk-color-error) 14%, var(--pk-color-surface));
 }
 .prokodo-Chip--filled--warning {
-  background-color: var(--color-warning);
-  color: var(--color-black);
+  background-color: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-color-surface));
 }
 .prokodo-Chip--filled--white {
-  background-color: var(--color-white);
-  color: var(--color-black);
+  background-color: var(--pk-palette-white);
+  color: var(--pk-palette-black);
+}
+.prokodo-Chip--filled--inherit {
+  background: var(--gradient-background-inherit);
+}
+html[data-theme="dark"] .prokodo-Chip--filled--inherit, [data-theme="dark"] .prokodo-Chip--filled--inherit {
+  background: var(--pk-color-surface-raised);
 }
 .prokodo-Chip--outlined {
-  border: 1px solid;
   background-color: transparent;
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
-.prokodo-Chip--outlined--primary {
-  border-color: var(--color-primary-300);
-  color: var(--color-primary-500);
+.prokodo-Chip--outlined::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--pk-border-width);
+  -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: xor;
+          mask-composite: exclude;
+  z-index: 0;
+  background: var(--gradient-border-4);
 }
-.prokodo-Chip--outlined--secondary {
-  border-color: var(--color-secondary-300);
-  color: var(--color-secondary-500);
+.prokodo-Chip--outlined--primary::before {
+  background: var(--gradient-border-4);
 }
-.prokodo-Chip--outlined--info {
-  border-color: var(--color-grey-300);
-  color: var(--color-grey-500);
+.prokodo-Chip--outlined--secondary::before {
+  background: var(--gradient-border-2);
 }
-.prokodo-Chip--outlined--success {
-  border-color: var(--color-success);
-  color: var(--color-success);
+.prokodo-Chip--outlined--info::before {
+  background: var(--gradient-border-info);
 }
-.prokodo-Chip--outlined--error {
-  border-color: var(--color-error);
-  color: var(--color-error);
+.prokodo-Chip--outlined--success::before {
+  background: var(--gradient-border-success);
 }
-.prokodo-Chip--outlined--warning {
-  border-color: var(--color-warning);
-  color: var(--color-warning);
+.prokodo-Chip--outlined--error::before {
+  background: var(--gradient-border-error);
 }
-.prokodo-Chip--outlined--white {
-  border-color: var(--color-white);
-  color: var(--color-white);
+.prokodo-Chip--outlined--warning::before {
+  background: var(--gradient-border-warning);
+}
+.prokodo-Chip--outlined--white::before, .prokodo-Chip--outlined--inherit::before {
+  background: linear-gradient(90deg, var(--pk-palette-grey-100) 0%, var(--pk-palette-grey-200) 100%);
+}
+html[data-theme="dark"] .prokodo-Chip--outlined--white::before, [data-theme="dark"] .prokodo-Chip--outlined--white::before, html[data-theme="dark"] .prokodo-Chip--outlined--inherit::before, [data-theme="dark"] .prokodo-Chip--outlined--inherit::before {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%);
 }
 .prokodo-Chip__delete {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.25rem;
+  height: 1.25rem;
   border: none;
-  border-radius: 100px;
+  border-radius: 100%;
   color: inherit;
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  transition: color 0.3s ease;
-  background-color: var(--color-grey-50);
+  flex-shrink: 0;
+  transition: background-color var(--pk-timing-fast) ease, color var(--pk-timing-fast) ease;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.prokodo-Chip__delete:hover {
+  background-color: rgba(0, 0, 0, 0.22);
+}
+.prokodo-Chip--filled--primary .prokodo-Chip__label {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--filled--secondary .prokodo-Chip__label {
+  background-image: var(--gradient-text-primary-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--filled--success .prokodo-Chip__label {
+  background-image: var(--gradient-text-success);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--filled--error .prokodo-Chip__label {
+  background-image: var(--gradient-text-error);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--filled--warning .prokodo-Chip__label {
+  background-image: var(--gradient-text-warning);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--filled--info .prokodo-Chip__label {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--outlined--primary .prokodo-Chip__label {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--outlined--secondary .prokodo-Chip__label {
+  background-image: var(--gradient-text-primary-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--outlined--success .prokodo-Chip__label {
+  background-image: var(--gradient-text-success);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--outlined--error .prokodo-Chip__label {
+  background-image: var(--gradient-text-error);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--outlined--warning .prokodo-Chip__label {
+  background-image: var(--gradient-text-warning);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-Chip--outlined--info .prokodo-Chip__label {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-.prokodo-Chip__delete--primary {
-  color: var(--color-primary-500);
+.prokodo-Chip--filled--white .prokodo-Chip__label, .prokodo-Chip--outlined--white .prokodo-Chip__label {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-.prokodo-Chip__delete--secondary {
-  color: var(--color-secondary-500);
+html[data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--filled--white .prokodo-Chip__label, html[data-theme="dark"] .prokodo-Chip--outlined--white .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--outlined--white .prokodo-Chip__label {
+  background-image: linear-gradient(90deg, var(--pk-palette-grey-400) 0%, var(--pk-palette-grey-600) 100%);
 }
-.prokodo-Chip__delete--info {
-  color: var(--color-grey-500);
+.prokodo-Chip--filled--inherit .prokodo-Chip__label {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-.prokodo-Chip__delete--success {
-  color: var(--color-success);
+.prokodo-Chip--outlined--inherit .prokodo-Chip__label {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-.prokodo-Chip__delete--error {
-  color: var(--color-error);
+html[data-theme="dark"] .prokodo-Chip--filled--inherit .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--filled--inherit .prokodo-Chip__label, html[data-theme="dark"] .prokodo-Chip--outlined--inherit .prokodo-Chip__label, [data-theme="dark"] .prokodo-Chip--outlined--inherit .prokodo-Chip__label {
+  background-image: linear-gradient(90deg, var(--pk-palette-white) 0%, var(--pk-palette-grey-100) 100%);
 }
-.prokodo-Chip__delete--white, .prokodo-Chip__delete--warning {
-  color: var(--color-black);
+.prokodo-Chip__label {
+  position: relative;
+  z-index: 1;
 }

package/dist/components/chip/Chip.module.scss.js

@@ -1,31 +1,27 @@
 const styles = {
   "prokodo-Chip": "prokodo-Chip",
   "prokodo-Chip--is-clickable": "prokodo-Chip--is-clickable",
-  "prokodo-Chip--has-icon": "prokodo-Chip--has-icon",
-  "prokodo-Chip--filled": "prokodo-Chip--filled",
   "prokodo-Chip--filled--primary": "prokodo-Chip--filled--primary",
+  "prokodo-Chip--outlined--primary": "prokodo-Chip--outlined--primary",
   "prokodo-Chip--filled--secondary": "prokodo-Chip--filled--secondary",
-  "prokodo-Chip--filled--info": "prokodo-Chip--filled--info",
+  "prokodo-Chip--outlined--secondary": "prokodo-Chip--outlined--secondary",
   "prokodo-Chip--filled--success": "prokodo-Chip--filled--success",
-  "prokodo-Chip--filled--error": "prokodo-Chip--filled--error",
+  "prokodo-Chip--outlined--success": "prokodo-Chip--outlined--success",
   "prokodo-Chip--filled--warning": "prokodo-Chip--filled--warning",
+  "prokodo-Chip--outlined--warning": "prokodo-Chip--outlined--warning",
+  "prokodo-Chip--filled--error": "prokodo-Chip--filled--error",
+  "prokodo-Chip--outlined--error": "prokodo-Chip--outlined--error",
+  "prokodo-Chip--filled--info": "prokodo-Chip--filled--info",
+  "prokodo-Chip--outlined--info": "prokodo-Chip--outlined--info",
+  "prokodo-Chip--filled--inherit": "prokodo-Chip--filled--inherit",
+  "prokodo-Chip--outlined--inherit": "prokodo-Chip--outlined--inherit",
+  "prokodo-Chip--has-icon": "prokodo-Chip--has-icon",
+  "prokodo-Chip--filled": "prokodo-Chip--filled",
   "prokodo-Chip--filled--white": "prokodo-Chip--filled--white",
   "prokodo-Chip--outlined": "prokodo-Chip--outlined",
-  "prokodo-Chip--outlined--primary": "prokodo-Chip--outlined--primary",
-  "prokodo-Chip--outlined--secondary": "prokodo-Chip--outlined--secondary",
-  "prokodo-Chip--outlined--info": "prokodo-Chip--outlined--info",
-  "prokodo-Chip--outlined--success": "prokodo-Chip--outlined--success",
-  "prokodo-Chip--outlined--error": "prokodo-Chip--outlined--error",
-  "prokodo-Chip--outlined--warning": "prokodo-Chip--outlined--warning",
   "prokodo-Chip--outlined--white": "prokodo-Chip--outlined--white",
   "prokodo-Chip__delete": "prokodo-Chip__delete",
-  "prokodo-Chip__delete--primary": "prokodo-Chip__delete--primary",
-  "prokodo-Chip__delete--secondary": "prokodo-Chip__delete--secondary",
-  "prokodo-Chip__delete--info": "prokodo-Chip__delete--info",
-  "prokodo-Chip__delete--success": "prokodo-Chip__delete--success",
-  "prokodo-Chip__delete--error": "prokodo-Chip__delete--error",
-  "prokodo-Chip__delete--white": "prokodo-Chip__delete--white",
-  "prokodo-Chip__delete--warning": "prokodo-Chip__delete--warning"
+  "prokodo-Chip__label": "prokodo-Chip__label"
 };
 export {
   styles as default

package/dist/components/chip/Chip.view.js

@@ -22,8 +22,8 @@ function ChipView({
     "div",
     {
       ...rest,
-      role: "button",
-      tabIndex: isClickable ? 0 : -1,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
       className: bem(
         void 0,
         {
@@ -34,8 +34,7 @@ function ChipView({
         },
         className
       ),
-      onClick,
-      onKeyDown,
+      ...isClickable ? { onClick, onKeyDown } : {},
       children: [
         icon,
         /* @__PURE__ */ jsx("span", { className: bem("label"), children: label }),