@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/stepper/Stepper.module.css

@@ -137,6 +137,41 @@
     flex-direction: row;
   }
 }
+.prokodo-Stepper--primary {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-brand), var(--pk-color-accent), var(--pk-color-brand));
+}
+.prokodo-Stepper--secondary {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-accent) 0%, var(--pk-color-brand) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-accent) 0%, var(--pk-color-brand) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-accent), var(--pk-color-brand), var(--pk-color-accent));
+}
+.prokodo-Stepper--success {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-success) 0%, #10CCB8 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-success) 0%, #10CCB8 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-success), #10CCB8, var(--pk-color-success));
+}
+.prokodo-Stepper--warning {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-warning) 0%, #f7cc6a 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-warning) 0%, #f7cc6a 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-warning), #f7cc6a, var(--pk-color-warning));
+}
+.prokodo-Stepper--error {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-error) 0%, #ff6b6b 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-error) 0%, #ff6b6b 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-error), #ff6b6b, var(--pk-color-error));
+}
+.prokodo-Stepper--info {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-fg) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-fg) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-fg), var(--pk-color-muted), var(--pk-color-fg));
+}
+.prokodo-Stepper--inherit {
+  --gradient-border-1: linear-gradient(180deg, var(--pk-color-border) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--pk-color-border) 0%, var(--pk-color-muted) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--pk-color-border), var(--pk-color-muted), var(--pk-color-border));
+}
 .prokodo-Stepper__step {
   position: relative;
   height: 100%;
@@ -195,7 +230,7 @@
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 9999px;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--pk-stepper-icon-mb);
 }
 .prokodo-Stepper__icon__container::before {
   content: "";
@@ -207,13 +242,13 @@
   border-radius: inherit;
   padding: 3px;
   background: var(--gradient-border-7);
-  -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
-          mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
+  -webkit-mask: linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0) content-box, linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0);
+          mask: linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0) content-box, linear-gradient(var(--pk-stepper-icon-mask-bg) 0 0);
   -webkit-mask-composite: xor;
           mask-composite: exclude;
 }
 .prokodo-Stepper__icon__container--is-active {
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--pk-stepper-shadow);
 }
 .prokodo-Stepper__icon__container--is-active::before {
   background: var(--gradient-border-1);
@@ -227,7 +262,7 @@
   right: 4px;
   bottom: 4px;
   border-radius: inherit;
-  box-shadow: var(--elevation-1--inset);
+  box-shadow: var(--pk-stepper-shadow-inset);
 }
 .prokodo-Stepper__icon__container:focus {
   border-radius: 9999px;
@@ -239,7 +274,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--color-grey-700);
+  color: var(--pk-stepper-label-color);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -251,7 +286,7 @@
   text-decoration: none;
 }
 .prokodo-Stepper__icon__label--is-active {
-  color: var(--color-grey-900);
+  color: var(--pk-stepper-label-color-active);
 }
 .prokodo-Stepper__icon__completed {
   visibility: hidden;
@@ -284,7 +319,7 @@
   font-family: !important;
   font-size: 1rem !important;
   line-height: 1.45 !important;
-  color: var(--color-grey-600) !important;
+  color: var(--pk-stepper-label-color) !important;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -308,10 +343,10 @@
   }
 }
 .prokodo-Stepper__label--is-active {
-  color: var(--color-grey-800) !important;
+  color: var(--pk-stepper-label-color-active) !important;
 }
 .prokodo-Stepper__label__text {
-  color: var(--color-grey-700) !important;
+  color: var(--pk-stepper-label-color) !important;
   position: absolute;
   top: auto;
   left: -99999px;
@@ -320,7 +355,7 @@
   text-indent: -99999px;
 }
 .prokodo-Stepper__label__text--is-active {
-  color: var(--color-grey-900) !important;
+  color: var(--pk-stepper-label-color-active) !important;
 }
 @media screen and (min-width: 375px) {
   .prokodo-Stepper__label__text {

package/dist/components/stepper/Stepper.module.scss.js

@@ -1,5 +1,12 @@
 const styles = {
   "prokodo-Stepper": "prokodo-Stepper",
+  "prokodo-Stepper--primary": "prokodo-Stepper--primary",
+  "prokodo-Stepper--secondary": "prokodo-Stepper--secondary",
+  "prokodo-Stepper--success": "prokodo-Stepper--success",
+  "prokodo-Stepper--warning": "prokodo-Stepper--warning",
+  "prokodo-Stepper--error": "prokodo-Stepper--error",
+  "prokodo-Stepper--info": "prokodo-Stepper--info",
+  "prokodo-Stepper--inherit": "prokodo-Stepper--inherit",
   "prokodo-Stepper__step": "prokodo-Stepper__step",
   "prokodo-Stepper__step--is-active": "prokodo-Stepper__step--is-active",
   "prokodo-Stepper__icon": "prokodo-Stepper__icon",

package/dist/components/stepper/Stepper.server.js

@@ -7,6 +7,7 @@ function StepperServer({
   initialStep = 0,
   translations,
   className,
+  color,
   ...rootProps
 }) {
   const serverSteps = steps.map((step) => ({
@@ -21,6 +22,7 @@ function StepperServer({
       ...rootProps,
       activeStep: initialStep,
       className,
+      color,
       stepRefs: emptyStepRefs,
       steps: serverSteps,
       translations

package/dist/components/stepper/Stepper.view.js

@@ -10,6 +10,7 @@ const StepperView = /* @__PURE__ */ __name(({
   activeStep,
   translations,
   className,
+  color,
   ...props
 }) => {
   const rootProps = props;
@@ -27,7 +28,11 @@ const StepperView = /* @__PURE__ */ __name(({
     {
       ...rootProps,
       "aria-label": t.stepper,
-      className: bem(void 0, void 0, className),
+      className: bem(
+        void 0,
+        { ...color ? { [color]: true } : {} },
+        className
+      ),
       children: steps.map((step, i) => {
         const {
           key,

package/dist/components/switch/Switch.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.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;
 }