@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/checkbox-group/CheckboxGroup.module.css

@@ -130,13 +130,46 @@
   border: 0;
   min-width: 0;
 }
+.prokodo-CheckboxGroup--primary {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-brand) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--primary, [data-theme="dark"] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
+  --pk-cg-legend-color: var(--pk-color-brand);
+}
+.prokodo-CheckboxGroup--secondary {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-accent) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--secondary, [data-theme="dark"] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
+  --pk-cg-legend-color: var(--pk-color-accent);
+}
+.prokodo-CheckboxGroup--success {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-success) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--success, [data-theme="dark"] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
+  --pk-cg-legend-color: var(--pk-color-success);
+}
+.prokodo-CheckboxGroup--warning {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-warning) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
+  --pk-cg-legend-color: var(--pk-color-warning);
+}
+.prokodo-CheckboxGroup--error {
+  --pk-cg-legend-color: var(--pk-color-error);
+}
+.prokodo-CheckboxGroup--info, .prokodo-CheckboxGroup--inherit, .prokodo-CheckboxGroup--white {
+  --pk-cg-legend-color: var(--pk-color-muted);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--info, [data-theme="dark"] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme="dark"] .prokodo-CheckboxGroup--inherit, [data-theme="dark"] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme="dark"] .prokodo-CheckboxGroup--white, [data-theme="dark"] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
+  --pk-cg-legend-color: var(--pk-palette-grey-200);
+}
 .prokodo-CheckboxGroup__legend {
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 var(--pk-space-sm) 0;
   padding: 0;
-  opacity: 0.82;
+  opacity: 0.9;
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--pk-space-xs);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -168,7 +201,7 @@
   text-indent: -99999px;
 }
 .prokodo-CheckboxGroup__legendLabel {
-  color: var(--color-grey-900);
+  color: var(--pk-cg-legend-color, var(--pk-color-fg));
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -192,7 +225,7 @@
   }
 }
 .prokodo-CheckboxGroup__legendRequiredMark {
-  color: var(--color-error);
+  color: var(--pk-color-error);
   line-height: 1;
   font-weight: 400;
   font-size: 1rem;
@@ -219,7 +252,7 @@
 .prokodo-CheckboxGroup__list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   min-width: 0;
 }
 .prokodo-CheckboxGroup__list--plain {

package/dist/components/checkbox-group/CheckboxGroup.module.scss.js

@@ -1,5 +1,13 @@
 const styles = {
   "prokodo-CheckboxGroup": "prokodo-CheckboxGroup",
+  "prokodo-CheckboxGroup--primary": "prokodo-CheckboxGroup--primary",
+  "prokodo-CheckboxGroup--secondary": "prokodo-CheckboxGroup--secondary",
+  "prokodo-CheckboxGroup--success": "prokodo-CheckboxGroup--success",
+  "prokodo-CheckboxGroup--warning": "prokodo-CheckboxGroup--warning",
+  "prokodo-CheckboxGroup--error": "prokodo-CheckboxGroup--error",
+  "prokodo-CheckboxGroup--info": "prokodo-CheckboxGroup--info",
+  "prokodo-CheckboxGroup--inherit": "prokodo-CheckboxGroup--inherit",
+  "prokodo-CheckboxGroup--white": "prokodo-CheckboxGroup--white",
   "prokodo-CheckboxGroup__legend": "prokodo-CheckboxGroup__legend",
   "prokodo-CheckboxGroup__legend--is-hidden": "prokodo-CheckboxGroup__legend--is-hidden",
   "prokodo-CheckboxGroup__legendLabel": "prokodo-CheckboxGroup__legendLabel",

package/dist/components/checkbox-group/CheckboxGroup.view.js

@@ -18,6 +18,7 @@ function CheckboxGroupView({
   hiddenInputName,
   layout = "stack",
   variant = "plain",
+  color = "primary",
   translations: t,
   isChecked,
   onToggle
@@ -33,7 +34,7 @@ function CheckboxGroupView({
     {
       "aria-label": label,
       "aria-required": required || void 0,
-      className: bem(),
+      className: bem(void 0, { [color]: true }),
       children: [
         legend ? /* @__PURE__ */ jsxs(
           "legend",
@@ -73,6 +74,7 @@ function CheckboxGroupView({
                 Checkbox,
                 {
                   checked,
+                  color,
                   description: opt.description,
                   disabled: itemDisabled,
                   icon: opt.icon,

package/dist/components/chip/Chip.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;
 }