@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/accordion/Accordion.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -125,7 +124,6 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-/* Keep this out of the critical/render-blocking bundle. */
 @keyframes accordionBorderShift {
   from {
     background-position: 0 0, 0% 0;
@@ -138,109 +136,134 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--primary {
+  --pk-accordion-gradient-from: var(--pk-color-brand);
+  --pk-accordion-gradient-to: var(--pk-color-accent);
+  --pk-accordion-border-focus: var(--pk-color-brand);
+  --pk-accordion-item-tint: var(--pk-color-brand);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+}
+.prokodo-Accordion--secondary {
+  --pk-accordion-gradient-from: var(--pk-color-accent);
+  --pk-accordion-gradient-to: var(--pk-color-brand);
+  --pk-accordion-border-focus: var(--pk-color-accent);
+  --pk-accordion-item-tint: var(--pk-color-accent);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+}
+.prokodo-Accordion--success {
+  --pk-accordion-gradient-from: var(--pk-color-success);
+  --pk-accordion-gradient-to: #10CCB8;
+  --pk-accordion-border-focus: var(--pk-color-success);
+  --pk-accordion-item-tint: var(--pk-color-success);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+}
+.prokodo-Accordion--warning {
+  --pk-accordion-gradient-from: var(--pk-color-warning);
+  --pk-accordion-gradient-to: #f7cc6a;
+  --pk-accordion-border-focus: var(--pk-color-warning);
+  --pk-accordion-item-tint: var(--pk-color-warning);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+}
+.prokodo-Accordion--error {
+  --pk-accordion-gradient-from: var(--pk-color-error);
+  --pk-accordion-gradient-to: #ff6b6b;
+  --pk-accordion-border-focus: var(--pk-color-error);
+  --pk-accordion-item-tint: var(--pk-color-error);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+}
+.prokodo-Accordion--info {
+  --pk-accordion-gradient-from: var(--pk-color-fg);
+  --pk-accordion-gradient-to: var(--pk-color-muted);
+  --pk-accordion-border-focus: var(--pk-color-border);
+  --pk-accordion-item-tint: var(--pk-color-fg);
+  --pk-accordion-shadow-color: rgba(0, 0, 0, 0.1);
+}
+.prokodo-Accordion--inherit {
+  --pk-accordion-gradient-from: var(--pk-color-muted);
+  --pk-accordion-gradient-to: var(--pk-color-border);
+  --pk-accordion-border-focus: var(--pk-color-border);
+  --pk-accordion-item-tint: var(--pk-color-fg);
+  --pk-accordion-shadow-color: rgba(0, 0, 0, 0.1);
+}
+.prokodo-Accordion--card {
+  gap: 0;
+}
 .prokodo-Accordion--panel {
   gap: 0;
 }
 .prokodo-Accordion__item {
-  border: 1px solid var(--color-grey-200);
-  border-radius: 0.75rem;
-  margin-bottom: 8px;
+  border: 1px solid var(--pk-accordion-border);
+  border-radius: var(--pk-accordion-radius);
+  margin-bottom: var(--pk-space-sm);
   overflow: hidden;
-  transition: border 0.3s ease;
-  box-shadow: var(--elevation-1);
+  transition: border-color var(--pk-timing-normal) ease, box-shadow var(--pk-timing-normal) ease;
+  box-shadow: 0 4px 6px var(--pk-accordion-shadow-color), 0 1px 3px color-mix(in srgb, var(--pk-accordion-shadow-color) 80%, transparent);
+}
+.prokodo-Accordion__item:last-child {
+  margin-bottom: 0;
 }
 .prokodo-Accordion__item--is-expanded {
-  border-color: var(--color-primary-500);
+  border-color: var(--pk-accordion-border-focus);
+  background-color: color-mix(in srgb, var(--pk-accordion-item-tint) 5%, transparent);
+  box-shadow: 0 8px 16px var(--pk-accordion-shadow-color), 0 2px 6px color-mix(in srgb, var(--pk-accordion-shadow-color) 80%, transparent);
 }
 .prokodo-Accordion__item--panel {
   border-radius: 0;
   margin-bottom: 0;
   box-shadow: none;
   border: none;
+  border-bottom: 1px solid var(--pk-accordion-border);
 }
-.prokodo-Accordion__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  cursor: pointer;
-}
-.prokodo-Accordion__header__toggle {
-  flex: 1 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-.prokodo-Accordion__header__actions {
-  display: flex;
-  gap: 0.5rem;
-}
-.prokodo-Accordion__header__actions__wrapper {
-  display: flex;
-}
-.prokodo-Accordion__header__icons {
-  display: flex;
-  align-items: center;
-  padding-left: 1rem;
+.prokodo-Accordion__item--panel:last-child {
+  border-bottom: none;
 }
 .prokodo-Accordion__header__wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  /* reserve space for a “border” without layout jump */
   border: 2px solid transparent;
-  border-radius: 12px;
-  /* two-background trick: inner fill + border gradient */
-  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white))) padding-box, linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500)) border-box;
-  /* hide the border layer initially */
+  border-radius: var(--pk-accordion-radius);
+  background: linear-gradient(var(--pk-accordion-header-bg), var(--pk-accordion-header-bg)) padding-box, linear-gradient(90deg, var(--pk-accordion-gradient-from), var(--pk-accordion-gradient-to), var(--pk-accordion-gradient-from)) border-box;
   background-size: 100% 100%, 0% 100%;
   background-position: 0 0, 0 0;
   background-repeat: no-repeat;
-  transition: color 0.3s ease, background-size 0.35s ease;
+  transition: color var(--pk-timing-normal) ease, background-size 0.35s ease;
 }
 .prokodo-Accordion__header__wrapper:hover, .prokodo-Accordion__header__wrapper:focus-visible {
-  /* reveal the border layer */
   background-size: 100% 100%, 200% 100%;
-  /* animation name is defined in the EFFECTS sheet */
   animation: accordionBorderShift 2s linear;
   outline: none;
 }
 .prokodo-Accordion__header__wrapper--is-expanded {
   position: relative;
   z-index: 2;
-  /* keep border visible and settled */
   background-size: 100% 100%, 100% 100%;
   background-position: 0 0, 100% 0;
-  border-radius: 12px 12px 0 0;
+  border-radius: var(--pk-accordion-radius) var(--pk-accordion-radius) 0 0;
   animation: none !important;
-  box-shadow: var(--elevation-1);
 }
 .prokodo-Accordion__header__wrapper--panel {
   position: relative;
   border: none;
   border-bottom: 2px solid transparent;
-  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  background: linear-gradient(var(--pk-accordion-header-bg), var(--pk-accordion-header-bg));
   border-radius: 0;
+  background-size: 100% 100%;
+  transition: none;
 }
 .prokodo-Accordion__header__wrapper--panel::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: -2px;
   height: 2px;
-  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background: linear-gradient(90deg, var(--pk-accordion-gradient-from), var(--pk-accordion-gradient-to), var(--pk-accordion-gradient-from));
   background-size: 0% 100%;
   background-position: 0 0;
   background-repeat: no-repeat;
   transition: background-size 0.35s ease;
 }
-.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
-  animation: none;
-}
 .prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
   background-size: 200% 100%;
   animation: accordionBorderShift 2s linear;
@@ -255,8 +278,29 @@
   background-position: 100% 0;
   animation: none !important;
 }
+.prokodo-Accordion__header__toggle {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--pk-accordion-padding-y) var(--pk-accordion-padding-x);
+  cursor: pointer;
+  gap: var(--pk-space-md);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border-radius: var(--pk-accordion-radius);
+}
+.prokodo-Accordion__header__toggle:focus {
+  outline: none;
+}
+.prokodo-Accordion__header__toggle:focus-visible {
+  outline: var(--pk-focus-ring-width) solid var(--pk-focus-ring-color);
+  outline-offset: 2px;
+  border-radius: var(--pk-accordion-radius);
+}
 .prokodo-Accordion__title {
-  width: calc(100% - 20px);
+  width: calc(100% - 1.25rem);
   margin: 0;
   font-weight: 500 !important;
   font-size: 1.125rem !important;
@@ -282,24 +326,33 @@
 }
 .prokodo-Accordion__title {
   font-weight: 500;
+  color: var(--pk-accordion-fg);
+}
+.prokodo-Accordion__header__actions__wrapper {
+  display: flex;
+  align-items: center;
+}
+.prokodo-Accordion__header__actions {
+  display: flex;
+  gap: var(--pk-space-sm);
 }
-html[data-theme=dark] .prokodo-Accordion__title {
-  color: var(--color-grey-900);
+.prokodo-Accordion__header__icons {
+  display: flex;
+  align-items: center;
+  padding-left: var(--pk-space-lg);
 }
 .prokodo-Accordion__icon {
-  padding-left: 1rem;
-  transition: transform 0.3s ease;
+  color: var(--pk-accordion-fg);
+  flex-shrink: 0;
 }
 .prokodo-Accordion__icon--is-hidden {
   display: none !important;
 }
-html[data-theme=dark] .prokodo-Accordion__icon {
-  color: var(--color-grey-900);
-}
 .prokodo-Accordion__content {
-  padding: 16px;
-  background-color: var(--color-white);
-  transition: max-height 0.3s ease, opacity 0.3s ease;
+  padding: var(--pk-accordion-padding-y) var(--pk-accordion-padding-x);
+  background-color: var(--pk-accordion-content-bg);
+  color: var(--pk-accordion-fg);
+  transition: max-height var(--pk-timing-normal) ease, opacity var(--pk-timing-normal) ease;
   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;
@@ -331,8 +384,8 @@ html[data-theme=dark] .prokodo-Accordion__icon {
 }
 .prokodo-Accordion__actions {
   display: flex;
-  gap: 8px;
-  padding: 8px 16px;
-  background-color: var(--color-grey-100);
-  border-top: 1px solid var(--color-grey-200);
+  gap: var(--pk-space-sm);
+  padding: var(--pk-space-sm) var(--pk-accordion-padding-x);
+  background-color: var(--pk-accordion-actions-bg);
+  border-top: 1px solid var(--pk-accordion-actions-border);
 }

package/dist/components/accordion/Accordion.module.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -125,7 +124,6 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-/* Keep this out of the critical/render-blocking bundle. */
 @keyframes accordionBorderShift {
   from {
     background-position: 0 0, 0% 0;
@@ -138,109 +136,134 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--primary {
+  --pk-accordion-gradient-from: var(--pk-color-brand);
+  --pk-accordion-gradient-to: var(--pk-color-accent);
+  --pk-accordion-border-focus: var(--pk-color-brand);
+  --pk-accordion-item-tint: var(--pk-color-brand);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+}
+.prokodo-Accordion--secondary {
+  --pk-accordion-gradient-from: var(--pk-color-accent);
+  --pk-accordion-gradient-to: var(--pk-color-brand);
+  --pk-accordion-border-focus: var(--pk-color-accent);
+  --pk-accordion-item-tint: var(--pk-color-accent);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+}
+.prokodo-Accordion--success {
+  --pk-accordion-gradient-from: var(--pk-color-success);
+  --pk-accordion-gradient-to: #10CCB8;
+  --pk-accordion-border-focus: var(--pk-color-success);
+  --pk-accordion-item-tint: var(--pk-color-success);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+}
+.prokodo-Accordion--warning {
+  --pk-accordion-gradient-from: var(--pk-color-warning);
+  --pk-accordion-gradient-to: #f7cc6a;
+  --pk-accordion-border-focus: var(--pk-color-warning);
+  --pk-accordion-item-tint: var(--pk-color-warning);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+}
+.prokodo-Accordion--error {
+  --pk-accordion-gradient-from: var(--pk-color-error);
+  --pk-accordion-gradient-to: #ff6b6b;
+  --pk-accordion-border-focus: var(--pk-color-error);
+  --pk-accordion-item-tint: var(--pk-color-error);
+  --pk-accordion-shadow-color: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+}
+.prokodo-Accordion--info {
+  --pk-accordion-gradient-from: var(--pk-color-fg);
+  --pk-accordion-gradient-to: var(--pk-color-muted);
+  --pk-accordion-border-focus: var(--pk-color-border);
+  --pk-accordion-item-tint: var(--pk-color-fg);
+  --pk-accordion-shadow-color: rgba(0, 0, 0, 0.1);
+}
+.prokodo-Accordion--inherit {
+  --pk-accordion-gradient-from: var(--pk-color-muted);
+  --pk-accordion-gradient-to: var(--pk-color-border);
+  --pk-accordion-border-focus: var(--pk-color-border);
+  --pk-accordion-item-tint: var(--pk-color-fg);
+  --pk-accordion-shadow-color: rgba(0, 0, 0, 0.1);
+}
+.prokodo-Accordion--card {
+  gap: 0;
+}
 .prokodo-Accordion--panel {
   gap: 0;
 }
 .prokodo-Accordion__item {
-  border: 1px solid var(--color-grey-200);
-  border-radius: 0.75rem;
-  margin-bottom: 8px;
+  border: 1px solid var(--pk-accordion-border);
+  border-radius: var(--pk-accordion-radius);
+  margin-bottom: var(--pk-space-sm);
   overflow: hidden;
-  transition: border 0.3s ease;
-  box-shadow: var(--elevation-1);
+  transition: border-color var(--pk-timing-normal) ease, box-shadow var(--pk-timing-normal) ease;
+  box-shadow: 0 4px 6px var(--pk-accordion-shadow-color), 0 1px 3px color-mix(in srgb, var(--pk-accordion-shadow-color) 80%, transparent);
+}
+.prokodo-Accordion__item:last-child {
+  margin-bottom: 0;
 }
 .prokodo-Accordion__item--is-expanded {
-  border-color: var(--color-primary-500);
+  border-color: var(--pk-accordion-border-focus);
+  background-color: color-mix(in srgb, var(--pk-accordion-item-tint) 5%, transparent);
+  box-shadow: 0 8px 16px var(--pk-accordion-shadow-color), 0 2px 6px color-mix(in srgb, var(--pk-accordion-shadow-color) 80%, transparent);
 }
 .prokodo-Accordion__item--panel {
   border-radius: 0;
   margin-bottom: 0;
   box-shadow: none;
   border: none;
+  border-bottom: 1px solid var(--pk-accordion-border);
 }
-.prokodo-Accordion__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  cursor: pointer;
-}
-.prokodo-Accordion__header__toggle {
-  flex: 1 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-.prokodo-Accordion__header__actions {
-  display: flex;
-  gap: 0.5rem;
-}
-.prokodo-Accordion__header__actions__wrapper {
-  display: flex;
-}
-.prokodo-Accordion__header__icons {
-  display: flex;
-  align-items: center;
-  padding-left: 1rem;
+.prokodo-Accordion__item--panel:last-child {
+  border-bottom: none;
 }
 .prokodo-Accordion__header__wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  /* reserve space for a “border” without layout jump */
   border: 2px solid transparent;
-  border-radius: 12px;
-  /* two-background trick: inner fill + border gradient */
-  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white))) padding-box, linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500)) border-box;
-  /* hide the border layer initially */
+  border-radius: var(--pk-accordion-radius);
+  background: linear-gradient(var(--pk-accordion-header-bg), var(--pk-accordion-header-bg)) padding-box, linear-gradient(90deg, var(--pk-accordion-gradient-from), var(--pk-accordion-gradient-to), var(--pk-accordion-gradient-from)) border-box;
   background-size: 100% 100%, 0% 100%;
   background-position: 0 0, 0 0;
   background-repeat: no-repeat;
-  transition: color 0.3s ease, background-size 0.35s ease;
+  transition: color var(--pk-timing-normal) ease, background-size 0.35s ease;
 }
 .prokodo-Accordion__header__wrapper:hover, .prokodo-Accordion__header__wrapper:focus-visible {
-  /* reveal the border layer */
   background-size: 100% 100%, 200% 100%;
-  /* animation name is defined in the EFFECTS sheet */
   animation: accordionBorderShift 2s linear;
   outline: none;
 }
 .prokodo-Accordion__header__wrapper--is-expanded {
   position: relative;
   z-index: 2;
-  /* keep border visible and settled */
   background-size: 100% 100%, 100% 100%;
   background-position: 0 0, 100% 0;
-  border-radius: 12px 12px 0 0;
+  border-radius: var(--pk-accordion-radius) var(--pk-accordion-radius) 0 0;
   animation: none !important;
-  box-shadow: var(--elevation-1);
 }
 .prokodo-Accordion__header__wrapper--panel {
   position: relative;
   border: none;
   border-bottom: 2px solid transparent;
-  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  background: linear-gradient(var(--pk-accordion-header-bg), var(--pk-accordion-header-bg));
   border-radius: 0;
+  background-size: 100% 100%;
+  transition: none;
 }
 .prokodo-Accordion__header__wrapper--panel::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: -2px;
   height: 2px;
-  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background: linear-gradient(90deg, var(--pk-accordion-gradient-from), var(--pk-accordion-gradient-to), var(--pk-accordion-gradient-from));
   background-size: 0% 100%;
   background-position: 0 0;
   background-repeat: no-repeat;
   transition: background-size 0.35s ease;
 }
-.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
-  animation: none;
-}
 .prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
   background-size: 200% 100%;
   animation: accordionBorderShift 2s linear;
@@ -255,8 +278,29 @@
   background-position: 100% 0;
   animation: none !important;
 }
+.prokodo-Accordion__header__toggle {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--pk-accordion-padding-y) var(--pk-accordion-padding-x);
+  cursor: pointer;
+  gap: var(--pk-space-md);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border-radius: var(--pk-accordion-radius);
+}
+.prokodo-Accordion__header__toggle:focus {
+  outline: none;
+}
+.prokodo-Accordion__header__toggle:focus-visible {
+  outline: var(--pk-focus-ring-width) solid var(--pk-focus-ring-color);
+  outline-offset: 2px;
+  border-radius: var(--pk-accordion-radius);
+}
 .prokodo-Accordion__title {
-  width: calc(100% - 20px);
+  width: calc(100% - 1.25rem);
   margin: 0;
   font-weight: 500 !important;
   font-size: 1.125rem !important;
@@ -282,24 +326,33 @@
 }
 .prokodo-Accordion__title {
   font-weight: 500;
+  color: var(--pk-accordion-fg);
+}
+.prokodo-Accordion__header__actions__wrapper {
+  display: flex;
+  align-items: center;
+}
+.prokodo-Accordion__header__actions {
+  display: flex;
+  gap: var(--pk-space-sm);
 }
-html[data-theme=dark] .prokodo-Accordion__title {
-  color: var(--color-grey-900);
+.prokodo-Accordion__header__icons {
+  display: flex;
+  align-items: center;
+  padding-left: var(--pk-space-lg);
 }
 .prokodo-Accordion__icon {
-  padding-left: 1rem;
-  transition: transform 0.3s ease;
+  color: var(--pk-accordion-fg);
+  flex-shrink: 0;
 }
 .prokodo-Accordion__icon--is-hidden {
   display: none !important;
 }
-html[data-theme=dark] .prokodo-Accordion__icon {
-  color: var(--color-grey-900);
-}
 .prokodo-Accordion__content {
-  padding: 16px;
-  background-color: var(--color-white);
-  transition: max-height 0.3s ease, opacity 0.3s ease;
+  padding: var(--pk-accordion-padding-y) var(--pk-accordion-padding-x);
+  background-color: var(--pk-accordion-content-bg);
+  color: var(--pk-accordion-fg);
+  transition: max-height var(--pk-timing-normal) ease, opacity var(--pk-timing-normal) ease;
   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;
@@ -331,8 +384,8 @@ html[data-theme=dark] .prokodo-Accordion__icon {
 }
 .prokodo-Accordion__actions {
   display: flex;
-  gap: 8px;
-  padding: 8px 16px;
-  background-color: var(--color-grey-100);
-  border-top: 1px solid var(--color-grey-200);
+  gap: var(--pk-space-sm);
+  padding: var(--pk-space-sm) var(--pk-accordion-padding-x);
+  background-color: var(--pk-accordion-actions-bg);
+  border-top: 1px solid var(--pk-accordion-actions-border);
 }

package/dist/components/accordion/Accordion.module.scss.js

@@ -1,21 +1,28 @@
 const accordionBorderShift = "accordionBorderShift";
 const styles = {
   "prokodo-Accordion": "prokodo-Accordion",
+  "prokodo-Accordion--primary": "prokodo-Accordion--primary",
+  "prokodo-Accordion--secondary": "prokodo-Accordion--secondary",
+  "prokodo-Accordion--success": "prokodo-Accordion--success",
+  "prokodo-Accordion--warning": "prokodo-Accordion--warning",
+  "prokodo-Accordion--error": "prokodo-Accordion--error",
+  "prokodo-Accordion--info": "prokodo-Accordion--info",
+  "prokodo-Accordion--inherit": "prokodo-Accordion--inherit",
+  "prokodo-Accordion--card": "prokodo-Accordion--card",
   "prokodo-Accordion--panel": "prokodo-Accordion--panel",
   "prokodo-Accordion__item": "prokodo-Accordion__item",
   "prokodo-Accordion__item--is-expanded": "prokodo-Accordion__item--is-expanded",
   "prokodo-Accordion__item--panel": "prokodo-Accordion__item--panel",
-  "prokodo-Accordion__header": "prokodo-Accordion__header",
-  "prokodo-Accordion__header__toggle": "prokodo-Accordion__header__toggle",
-  "prokodo-Accordion__header__actions": "prokodo-Accordion__header__actions",
-  "prokodo-Accordion__header__actions__wrapper": "prokodo-Accordion__header__actions__wrapper",
-  "prokodo-Accordion__header__icons": "prokodo-Accordion__header__icons",
   "prokodo-Accordion__header__wrapper": "prokodo-Accordion__header__wrapper",
   accordionBorderShift,
   "prokodo-Accordion__header__wrapper--is-expanded": "prokodo-Accordion__header__wrapper--is-expanded",
   "prokodo-Accordion__header__wrapper--panel": "prokodo-Accordion__header__wrapper--panel",
   "prokodo-Accordion__header__wrapper--panel--is-expanded": "prokodo-Accordion__header__wrapper--panel--is-expanded",
+  "prokodo-Accordion__header__toggle": "prokodo-Accordion__header__toggle",
   "prokodo-Accordion__title": "prokodo-Accordion__title",
+  "prokodo-Accordion__header__actions__wrapper": "prokodo-Accordion__header__actions__wrapper",
+  "prokodo-Accordion__header__actions": "prokodo-Accordion__header__actions",
+  "prokodo-Accordion__header__icons": "prokodo-Accordion__header__icons",
   "prokodo-Accordion__icon": "prokodo-Accordion__icon",
   "prokodo-Accordion__icon--is-hidden": "prokodo-Accordion__icon--is-hidden",
   "prokodo-Accordion__content": "prokodo-Accordion__content",

package/dist/components/accordion/Accordion.view.js

@@ -14,7 +14,7 @@ function AccordionView({
   type = "card",
   headerWrapperClassName,
   headerToggleClassName,
-  variant = "primary",
+  color = "primary",
   className,
   items,
   expandedIndex,
@@ -27,7 +27,7 @@ function AccordionView({
     "div",
     {
       ...domRest,
-      className: bem(void 0, { [variant]: true, [type]: true }, className),
+      className: bem(void 0, { [color]: true, [type]: true }, className),
       children: items.map((item, index) => {
         const {
           title,
@@ -86,10 +86,10 @@ function AccordionView({
                           {
                             animated: true,
                             className: bem("title"),
+                            color: isExpanded ? color : "inherit",
                             highlight: isExpanded,
                             size: "xs",
                             type: "h3",
-                            variant: isExpanded ? "primary" : "inherit",
                             ...item.titleOptions ?? titleOptions,
                             children: title
                           }