@prokodo/ui 0.1.15 → 1.0.1

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,
@@ -25,19 +24,21 @@ const SwitchView = /* @__PURE__ */ __name(({
   ...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.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.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);
 }

package/dist/components/tabs/Tabs.module.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);
 }

package/dist/components/tabs/Tabs.module.scss.js

@@ -3,7 +3,6 @@ const styles = {
   "prokodo-Tabs--vertical": "prokodo-Tabs--vertical",
   "prokodo-Tabs__list": "prokodo-Tabs__list",
   "prokodo-Tabs__list--vertical": "prokodo-Tabs__list--vertical",
-  "prokodo-Tabs__list--disabled": "prokodo-Tabs__list--disabled",
   "prokodo-Tabs__tab": "prokodo-Tabs__tab",
   "prokodo-Tabs__tab--vertical": "prokodo-Tabs__tab--vertical",
   "prokodo-Tabs__tab--fullWidth": "prokodo-Tabs__tab--fullWidth",
@@ -12,7 +11,13 @@ const styles = {
   "prokodo-Tabs__tabLabel": "prokodo-Tabs__tabLabel",
   "prokodo-Tabs__badge": "prokodo-Tabs__badge",
   "prokodo-Tabs__badgeChip": "prokodo-Tabs__badgeChip",
-  "prokodo-Tabs__panel": "prokodo-Tabs__panel"
+  "prokodo-Tabs__panel": "prokodo-Tabs__panel",
+  "prokodo-Tabs--color-primary": "prokodo-Tabs--color-primary",
+  "prokodo-Tabs--color-secondary": "prokodo-Tabs--color-secondary",
+  "prokodo-Tabs--color-success": "prokodo-Tabs--color-success",
+  "prokodo-Tabs--color-error": "prokodo-Tabs--color-error",
+  "prokodo-Tabs--color-warning": "prokodo-Tabs--color-warning",
+  "prokodo-Tabs--color-info": "prokodo-Tabs--color-info"
 };
 export {
   styles as default

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

@@ -27,6 +27,7 @@ function TabsView({
   items,
   value,
   defaultValue,
+  color,
   orientation = "horizontal",
   disabled,
   fullWidth,
@@ -46,7 +47,8 @@ function TabsView({
       className: bem(
         void 0,
         {
-          vertical: orientation === "vertical"
+          vertical: orientation === "vertical",
+          [`color-${color}`]: Boolean(color)
         },
         className
       ),
@@ -98,7 +100,7 @@ function TabsView({
                     {
                       disabled: isDisabled,
                       fullWidth: fullWidth === true,
-                      selected: isSelected,
+                      selected: isSelected && disabled !== true,
                       vertical: orientation === "vertical"
                     },
                     tabClassName

package/dist/components/teaser/Teaser.css

@@ -131,7 +131,7 @@
   padding: 0;
 }
 .prokodo-Teaser__card__content {
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-Teaser__image {
   -o-object-fit: cover;
@@ -143,10 +143,10 @@
   height: 230px;
 }
 .prokodo-Teaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-Teaser__animation {
   width: 100%;
@@ -197,5 +197,5 @@
   align-items: center;
 }
 .prokodo-Teaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }