@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/switch/Switch.module.css

@@ -125,132 +125,156 @@
  * content.
  */
 .prokodo-Switch {
-  position: relative;
-  display: flex;
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
+  gap: var(--pk-space-sm);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Switch--primary {
+  --pk-switch-active: var(--pk-color-brand);
+}
+.prokodo-Switch--secondary {
+  --pk-switch-active: var(--pk-color-accent);
+}
+.prokodo-Switch--success {
+  --pk-switch-active: var(--pk-color-success, #22c55e);
+}
+.prokodo-Switch--error {
+  --pk-switch-active: var(--pk-color-error, #ef4444);
+}
+.prokodo-Switch--info {
+  --pk-switch-active: var(--pk-palette-grey-500);
+}
+.prokodo-Switch--warning {
+  --pk-switch-active: var(--pk-color-warning, #f59e0b);
+}
+.prokodo-Switch--inherit {
+  --pk-switch-active: currentColor;
+}
+[data-theme="dark"] .prokodo-Switch--info, .pk-theme-dark .prokodo-Switch--info {
+  --pk-switch-active: var(--pk-palette-grey-300);
+}
+[data-theme="dark"] .prokodo-Switch--inherit, .pk-theme-dark .prokodo-Switch--inherit {
+  --pk-switch-active: var(--pk-color-fg);
 }
 .prokodo-Switch__label {
-  width: 100%;
-  display: grid;
-  font-size: 1rem;
-  grid-template-columns: 100%;
-  grid-gap: 16px;
-  gap: 16px;
-  padding-bottom: 0;
+  color: var(--pk-switch-active);
+  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;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
 @media screen and (min-width: 480px) {
   .prokodo-Switch__label {
-    grid-template-columns: 80% 20%;
+    font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
   .prokodo-Switch__label {
-    grid-template-columns: 90% 10%;
+    font-size: 1rem;
   }
 }
-.prokodo-Switch__label__content {
-  padding-right: 1rem;
-}
 .prokodo-Switch__control {
   position: relative;
-  width: 42px;
-  height: 26px;
-  min-width: 42px;
-  background-color: var(--color-grey-500);
-  border-radius: 13px;
-  transition: background-color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  width: var(--pk-switch-track-width);
+  height: var(--pk-switch-track-height);
+  flex-shrink: 0;
 }
-.prokodo-Switch__control:focus-within {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
-  border-radius: 13px;
+.prokodo-Switch__track {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--pk-switch-track-radius);
+  background-color: var(--pk-switch-track-bg);
+  transition: background-color var(--pk-switch-timing) ease;
 }
-.prokodo-Switch__control--checked {
-  background: var(--gradient-border-4);
+.prokodo-Switch__track--checked {
+  background: linear-gradient(90deg, var(--pk-switch-active), color-mix(in srgb, var(--pk-switch-active) 75%, white 25%));
 }
-.prokodo-Switch__control--disabled {
-  background-color: var(--color-grey-300);
-  cursor: not-allowed;
+.prokodo-Switch__track--disabled {
+  opacity: 0.4;
 }
 .prokodo-Switch__input {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
+  opacity: 0;
   width: 100%;
   height: 100%;
-  opacity: 0;
   margin: 0;
-  padding: 0;
   cursor: pointer;
-  z-index: 2; /* over track but under thumb */
+  z-index: 2;
+}
+.prokodo-Switch__input:disabled {
+  cursor: not-allowed;
+}
+.prokodo-Switch__control {
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--pk-switch-active) 30%, transparent), 0 1px 3px color-mix(in srgb, var(--pk-switch-active) 15%, transparent);
+  border-radius: var(--pk-switch-track-radius);
+  transition: box-shadow var(--pk-switch-timing) ease;
+}
+.prokodo-Switch__control:hover {
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--pk-switch-active) 40%, transparent), 0 0 5px color-mix(in srgb, var(--pk-switch-active) 30%, transparent);
+}
+.prokodo-Switch__control:focus-within {
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--pk-switch-active) 40%, transparent), 0 0 5px color-mix(in srgb, var(--pk-switch-active) 30%, transparent);
 }
 .prokodo-Switch__thumb {
   position: absolute;
+  left: 3px;
   top: 50%;
-  left: 2px; /* default (unchecked) */
-  width: 22px;
-  height: 22px;
-  background-color: #FFFFFF;
-  border-radius: 50%;
   transform: translateY(-50%);
-  transition: transform 0.3s ease, background-color 0.3s ease;
-  z-index: 3; /* always on top */
-  /* If checked, shift thumb to the right */
+  width: var(--pk-switch-thumb-size);
+  height: var(--pk-switch-thumb-size);
+  border-radius: 50%;
+  background-color: var(--pk-switch-thumb-bg);
+  box-shadow: var(--pk-shadow-sm);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: left var(--pk-switch-timing) ease, background-color var(--pk-switch-timing) ease, box-shadow var(--pk-switch-timing) ease;
 }
 .prokodo-Switch__thumb--checked {
-  transform: translateY(-50%) translateX(13px);
-  left: 5px;
+  left: calc(var(--pk-switch-track-width) - var(--pk-switch-thumb-size) - 3px);
+  background-color: var(--pk-switch-thumb-checked-bg);
 }
 .prokodo-Switch__thumb--disabled {
-  background-color: var(--color-grey-600);
-}
-.prokodo-Switch__thumb {
-  /* Center child icon */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
+  opacity: 0.6;
 }
 .prokodo-Switch__icon__wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
+  color: var(--pk-color-fg);
 }
-.prokodo-Switch__icon--primary {
-  color: var(--color-primary-500);
+.prokodo-Switch__icon--isActive {
+  color: var(--pk-color-fg);
 }
-.prokodo-Switch__icon--secondary {
-  color: var(--color-secondary-500);
+[data-theme="dark"] .prokodo-Switch__thumb, .pk-theme-dark .prokodo-Switch__thumb {
+  --pk-switch-thumb-bg: #ffffff;
+  --pk-switch-thumb-checked-bg: #ffffff;
 }
-.prokodo-Switch__icon--success {
-  color: var(--color-success);
+[data-theme="dark"] .prokodo-Switch__icon__wrapper, .pk-theme-dark .prokodo-Switch__icon__wrapper, [data-theme="dark"] .prokodo-Switch__icon, .pk-theme-dark .prokodo-Switch__icon {
+  color: #000000;
 }
-.prokodo-Switch__icon--error {
-  color: var(--color-error);
+[data-theme="dark"] .prokodo-Switch--inherit .prokodo-Switch__thumb--checked, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__thumb--checked {
+  --pk-switch-thumb-checked-bg: #000000;
 }
-.prokodo-Switch__icon--info {
-  color: var(--color-grey-300);
+[data-theme="dark"] .prokodo-Switch--inherit .prokodo-Switch__icon--isActive, .pk-theme-dark .prokodo-Switch--inherit .prokodo-Switch__icon--isActive {
+  color: #ffffff;
 }
-.prokodo-Switch__icon--warning {
-  color: var(--color-warning);
-}
-.prokodo-Switch__track {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-grey-300);
-  border-radius: 13px;
-  transition: background-color 0.3s ease;
-  z-index: 1;
-}
-.prokodo-Switch__track--checked {
-  background-color: var(--color-primary-500);
-}
-.prokodo-Switch__track--disabled {
-  background-color: var(--color-grey-200);
+.prokodo-Switch--disabled, .prokodo-Switch__control--disabled {
+  cursor: not-allowed;
 }

package/dist/components/switch/Switch.module.scss.js

@@ -1,24 +1,26 @@
 const styles = {
   "prokodo-Switch": "prokodo-Switch",
+  "prokodo-Switch--primary": "prokodo-Switch--primary",
+  "prokodo-Switch--secondary": "prokodo-Switch--secondary",
+  "prokodo-Switch--success": "prokodo-Switch--success",
+  "prokodo-Switch--error": "prokodo-Switch--error",
+  "prokodo-Switch--info": "prokodo-Switch--info",
+  "prokodo-Switch--warning": "prokodo-Switch--warning",
+  "prokodo-Switch--inherit": "prokodo-Switch--inherit",
   "prokodo-Switch__label": "prokodo-Switch__label",
-  "prokodo-Switch__label__content": "prokodo-Switch__label__content",
   "prokodo-Switch__control": "prokodo-Switch__control",
-  "prokodo-Switch__control--checked": "prokodo-Switch__control--checked",
-  "prokodo-Switch__control--disabled": "prokodo-Switch__control--disabled",
+  "prokodo-Switch__track": "prokodo-Switch__track",
+  "prokodo-Switch__track--checked": "prokodo-Switch__track--checked",
+  "prokodo-Switch__track--disabled": "prokodo-Switch__track--disabled",
   "prokodo-Switch__input": "prokodo-Switch__input",
   "prokodo-Switch__thumb": "prokodo-Switch__thumb",
   "prokodo-Switch__thumb--checked": "prokodo-Switch__thumb--checked",
   "prokodo-Switch__thumb--disabled": "prokodo-Switch__thumb--disabled",
   "prokodo-Switch__icon__wrapper": "prokodo-Switch__icon__wrapper",
-  "prokodo-Switch__icon--primary": "prokodo-Switch__icon--primary",
-  "prokodo-Switch__icon--secondary": "prokodo-Switch__icon--secondary",
-  "prokodo-Switch__icon--success": "prokodo-Switch__icon--success",
-  "prokodo-Switch__icon--error": "prokodo-Switch__icon--error",
-  "prokodo-Switch__icon--info": "prokodo-Switch__icon--info",
-  "prokodo-Switch__icon--warning": "prokodo-Switch__icon--warning",
-  "prokodo-Switch__track": "prokodo-Switch__track",
-  "prokodo-Switch__track--checked": "prokodo-Switch__track--checked",
-  "prokodo-Switch__track--disabled": "prokodo-Switch__track--disabled"
+  "prokodo-Switch__icon--isActive": "prokodo-Switch__icon--isActive",
+  "prokodo-Switch__icon": "prokodo-Switch__icon",
+  "prokodo-Switch--disabled": "prokodo-Switch--disabled",
+  "prokodo-Switch__control--disabled": "prokodo-Switch__control--disabled"
 };
 export {
   styles as default

package/dist/components/switch/Switch.view.js

@@ -3,7 +3,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsxs, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./Switch.module.scss.js";
-import { Label } from "../label/Label.js";
 import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Switch");
 const SwitchView = /* @__PURE__ */ __name(({
@@ -11,7 +10,7 @@ const SwitchView = /* @__PURE__ */ __name(({
   label,
   labelProps = {},
   required = false,
-  variant = "primary",
+  color = "primary",
   icon,
   checkedIcon,
   isChecked,
@@ -21,22 +20,25 @@ const SwitchView = /* @__PURE__ */ __name(({
   onChangeInternal,
   onFocusInternal,
   onBlurInternal,
+  isFocused: _isFocused,
   ...props
 }) => {
   const hasLabel = typeof label === "string" && label.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [variant]: true }, className), children: [
-    hasLabel && /* @__PURE__ */ jsx(
-      Label,
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: true }, className), children: [
+    hasLabel && /* @__PURE__ */ jsxs(
+      "label",
       {
         ...labelProps,
         htmlFor: name,
-        label,
-        required,
         className: bem(
           "label",
           void 0,
           hideLabel ? "visually-hidden" : void 0
-        )
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+        ]
       }
     ),
     /* @__PURE__ */ jsxs(

package/dist/components/table/Table.css

@@ -125,8 +125,8 @@
  * content.
  */
 .prokodo-Table {
-  padding-bottom: 1.5rem;
-  padding-left: 1.25rem;
+  padding-bottom: var(--pk-table-container-pb);
+  padding-left: calc(var(--pk-space-lg) + var(--pk-space-xs));
 }
 @media screen and (min-width: 480px) {
   .prokodo-Table {
@@ -137,10 +137,15 @@
   overflow: visible;
 }
 .prokodo-Table__headline {
-  margin-left: -40px;
+  margin-left: calc(-1 * (var(--pk-space-lg) + var(--pk-space-xs)));
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Table__headline {
+    margin-left: 0;
+  }
 }
 .prokodo-Table__content {
-  padding-left: 1.5rem;
+  padding-left: 0;
 }
 .prokodo-Table__table {
   table-layout: auto;
@@ -152,10 +157,10 @@
   overflow-y: hidden;
 }
 .prokodo-Table__head__row {
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
 .prokodo-Table__head__cell {
-  padding: 1.5rem 0.5rem;
+  padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
   font-weight: 500;
   font-weight: 400;
   font-size: 1.125rem;
@@ -171,20 +176,20 @@
   text-align: center;
 }
 .prokodo-Table__head__cell:first-child {
-  color: var(--color-primary-500);
+  color: var(--pk-table-header-accent-color);
   text-align: left;
 }
 .prokodo-Table__body__row {
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
 .prokodo-Table__body__row--has-link:hover {
-  background: var(--color-primary-20);
+  background: var(--pk-table-row-hover-bg);
 }
 .prokodo-Table__body__row--has-link:focus {
-  background: var(--color-primary-20);
+  background: var(--pk-table-row-hover-bg);
 }
 .prokodo-Table__caption {
-  color: var(--color-grey-300);
+  color: var(--pk-table-caption-color);
   text-align: right;
   opacity: 0;
   font-weight: 400;
@@ -219,8 +224,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1.5rem 0.5rem;
-  color: var(--color-grey-900);
+  padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
+  color: var(--pk-table-cell-fg);
   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;
@@ -247,5 +252,5 @@
   align-items: baseline;
 }
 .prokodo-TableCell__icon {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }

package/dist/components/table/Table.js

@@ -52,6 +52,7 @@ const Table = /* @__PURE__ */ __name(({
           "tr",
           {
             className: bem("body__row", {
+              /* istanbul ignore next */
               "has-link": isString((_a = row == null ? void 0 : row.redirect) == null ? void 0 : _a.href)
             }),
             children: row == null ? void 0 : row.cells.filter((el) => el !== null).map((cell, b) => /* @__PURE__ */ createElement(

package/dist/components/table/Table.module.css

@@ -125,8 +125,8 @@
  * content.
  */
 .prokodo-Table {
-  padding-bottom: 1.5rem;
-  padding-left: 1.25rem;
+  padding-bottom: var(--pk-table-container-pb);
+  padding-left: calc(var(--pk-space-lg) + var(--pk-space-xs));
 }
 @media screen and (min-width: 480px) {
   .prokodo-Table {
@@ -137,10 +137,15 @@
   overflow: visible;
 }
 .prokodo-Table__headline {
-  margin-left: -40px;
+  margin-left: calc(-1 * (var(--pk-space-lg) + var(--pk-space-xs)));
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Table__headline {
+    margin-left: 0;
+  }
 }
 .prokodo-Table__content {
-  padding-left: 1.5rem;
+  padding-left: 0;
 }
 .prokodo-Table__table {
   table-layout: auto;
@@ -152,10 +157,10 @@
   overflow-y: hidden;
 }
 .prokodo-Table__head__row {
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
 .prokodo-Table__head__cell {
-  padding: 1.5rem 0.5rem;
+  padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
   font-weight: 500;
   font-weight: 400;
   font-size: 1.125rem;
@@ -171,20 +176,20 @@
   text-align: center;
 }
 .prokodo-Table__head__cell:first-child {
-  color: var(--color-primary-500);
+  color: var(--pk-table-header-accent-color);
   text-align: left;
 }
 .prokodo-Table__body__row {
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
 .prokodo-Table__body__row--has-link:hover {
-  background: var(--color-primary-20);
+  background: var(--pk-table-row-hover-bg);
 }
 .prokodo-Table__body__row--has-link:focus {
-  background: var(--color-primary-20);
+  background: var(--pk-table-row-hover-bg);
 }
 .prokodo-Table__caption {
-  color: var(--color-grey-300);
+  color: var(--pk-table-caption-color);
   text-align: right;
   opacity: 0;
   font-weight: 400;
@@ -219,8 +224,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1.5rem 0.5rem;
-  color: var(--color-grey-900);
+  padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
+  color: var(--pk-table-cell-fg);
   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;
@@ -247,5 +252,5 @@
   align-items: baseline;
 }
 .prokodo-TableCell__icon {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }

package/dist/components/tabs/Tabs.client.js

@@ -74,6 +74,7 @@ function TabsClient({
     [disabled, isControlled, items, onChange]
   );
   const moveFocus = useCallback(
+    /* istanbul ignore next */
     (currentIndex, direction) => {
       if (!enabledIndices.length) return currentIndex;
       const currentEnabledPos = enabledIndices.findIndex(

package/dist/components/tabs/Tabs.css

@@ -127,15 +127,18 @@
 .prokodo-Tabs {
   width: 100%;
 }
+.pk-theme-dark .prokodo-Tabs {
+  --pk-tabs-border: var(--pk-palette-grey-500);
+}
 .prokodo-Tabs--vertical {
   display: grid;
-  grid-gap: 1rem;
-  gap: 1rem;
+  grid-gap: var(--pk-tabs-gap);
+  gap: var(--pk-tabs-gap);
   grid-template-columns: minmax(px-to-rem(180px), px-to-rem(260px)) 1fr;
 }
 .prokodo-Tabs__list {
   align-items: stretch;
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: 1px solid var(--pk-tabs-border);
   display: flex;
   gap: 0;
   overflow-x: auto;
@@ -143,35 +146,26 @@
   position: relative;
   scrollbar-width: none;
 }
-html[data-theme=dark] .prokodo-Tabs__list {
-  border-bottom-color: var(--color-grey-700);
-}
 .prokodo-Tabs__list--vertical {
   border-bottom: none;
-  border-right: 1px solid var(--color-grey-200);
+  border-right: 1px solid var(--pk-tabs-border);
   flex-direction: column;
   overflow-x: visible;
 }
-html[data-theme=dark] .prokodo-Tabs__list--vertical {
-  border-right-color: var(--color-grey-700);
-}
-.prokodo-Tabs__list--disabled {
-  opacity: 0.7;
-}
 .prokodo-Tabs__tab {
   align-items: center;
   background: transparent;
   border: none;
-  border-top-left-radius: 1.5rem;
-  border-top-right-radius: 1.5rem;
+  border-top-left-radius: var(--pk-tabs-radius);
+  border-top-right-radius: var(--pk-tabs-radius);
   box-shadow: none;
-  color: var(--color-grey-700);
+  color: var(--pk-tabs-tab-color);
   cursor: pointer;
   display: inline-flex;
-  gap: 0.5rem;
+  gap: var(--pk-tabs-pad-sm);
   justify-content: center;
   min-height: px-to-rem(44px);
-  padding: 0.75rem 1rem;
+  padding: var(--pk-tabs-pad-md) var(--pk-tabs-pad-lg);
   position: relative;
   transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
   font-weight: 400;
@@ -199,11 +193,13 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   border-top-right-radius: 0;
 }
 .prokodo-Tabs__tab:hover {
-  background: var(--color-primary-50);
+  background: var(--pk-tabs-tab-hover-bg);
+  border-radius: var(--pk-tabs-radius) var(--pk-tabs-radius) 0 0;
 }
 .prokodo-Tabs__tab:focus-visible {
   outline: 0;
-  background: var(--color-primary-50);
+  background: var(--pk-tabs-tab-hover-bg);
+  border-radius: var(--pk-tabs-radius) var(--pk-tabs-radius) 0 0;
 }
 .prokodo-Tabs__tab::after {
   background: transparent;
@@ -221,14 +217,14 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   flex: 1 1;
 }
 .prokodo-Tabs__tab--selected {
-  color: var(--color-primary-900);
+  color: var(--pk-tabs-tab-selected-color);
 }
 .prokodo-Tabs__tab--selected::after {
-  background: var(--gradient-border-4);
+  background: var(--pk-tabs-indicator-gradient);
   transform: scaleX(1);
 }
 .prokodo-Tabs__tab--disabled {
-  color: var(--color-grey-500);
+  color: var(--pk-tabs-tab-disabled-color);
   cursor: not-allowed;
   opacity: 0.58;
 }
@@ -242,6 +238,12 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   justify-content: flex-start;
   text-align: left;
 }
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab:hover {
+  border-radius: var(--pk-tabs-radius) 0 0 var(--pk-tabs-radius);
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab:focus-visible {
+  border-radius: var(--pk-tabs-radius) 0 0 var(--pk-tabs-radius);
+}
 .prokodo-Tabs__list--vertical .prokodo-Tabs__tab::after {
   bottom: 0;
   height: auto;
@@ -263,13 +265,13 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
 }
 .prokodo-Tabs__badge {
   align-items: center;
-  background: var(--color-grey-200);
+  background: var(--pk-tabs-badge-bg);
   border-radius: px-to-rem(999px);
-  color: var(--color-grey-700);
+  color: var(--pk-tabs-badge-fg);
   display: inline-flex;
   justify-content: center;
   min-width: px-to-rem(20px);
-  padding: 0 0.25rem;
+  padding: 0 var(--pk-tabs-pad-xs);
   font-size: px-to-rem(12px);
   font-weight: 400;
   font-size: 1.125rem;
@@ -319,7 +321,7 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   background: transparent;
   border-radius: 0;
   box-shadow: none;
-  padding: 1rem;
+  padding: var(--pk-tabs-pad-lg);
 }
 .prokodo-Tabs__panel[hidden] {
   display: none !important;
@@ -327,4 +329,28 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
 .prokodo-Tabs__panel:focus-visible {
   outline: 0;
   background: var(--gradient-border-4);
+}
+.prokodo-Tabs--color-primary {
+  --pk-tabs-indicator-gradient: var(--gradient-border-4);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, transparent);
+}
+.prokodo-Tabs--color-secondary {
+  --pk-tabs-indicator-gradient: var(--gradient-border-2);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, transparent);
+}
+.prokodo-Tabs--color-success {
+  --pk-tabs-indicator-gradient: var(--gradient-border-success);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, transparent);
+}
+.prokodo-Tabs--color-error {
+  --pk-tabs-indicator-gradient: var(--gradient-border-error);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, transparent);
+}
+.prokodo-Tabs--color-warning {
+  --pk-tabs-indicator-gradient: var(--gradient-border-warning);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, transparent);
+}
+.prokodo-Tabs--color-info {
+  --pk-tabs-indicator-gradient: var(--gradient-border-info);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-muted) 20%, transparent);
 }