@prokodo/ui 1.0.4 → 1.0.6

package/dist/theme.css

@@ -158,7 +158,7 @@
   --pk-color-surface: var(--pk-palette-white);
   --pk-color-surface-raised: var(--pk-palette-grey-50);
   --pk-color-border: var(--pk-palette-grey-200);
-  --pk-color-muted: var(--pk-palette-grey-300);
+  --pk-color-muted: var(--pk-palette-grey-500);
   --pk-color-overlay-alpha: 0.5;
   --pk-color-brand: var(--pk-palette-primary-500);
   --pk-color-brand-hover: var(--pk-palette-primary-400);
@@ -195,6 +195,7 @@
   --pk-z-dropdown: 998;
   --pk-z-modal-backdrop: 1300;
   --pk-z-modal: 1301;
+  --pk-z-popover: 1400;
   --pk-button-bg: var(--pk-color-surface-raised);
   --pk-button-fg: var(--pk-color-fg);
   --pk-button-radius: var(--pk-radius-pill);
@@ -350,7 +351,7 @@
   --pk-slider-fill-to: var(--pk-color-accent);
   --pk-slider-label-fg: var(--pk-color-fg);
   --pk-slider-mark-bg: var(--pk-palette-grey-400);
-  --pk-slider-mark-label-fg: var(--pk-palette-grey-500);
+  --pk-slider-mark-label-fg: var(--pk-input-helper-fg);
   --pk-slider-thumb-size: 24px;
   --pk-slider-thumb-border: var(--pk-color-surface);
   --pk-slider-thumb-glow-rgb: var(--pk-palette-primary-500-rgb);
@@ -2622,7 +2623,7 @@ html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-Date
   position: absolute;
   top: calc(100% + var(--pk-space-xs));
   left: 0;
-  z-index: 200;
+  z-index: var(--pk-z-popover, 1400);
   min-width: var(--pk-dp-dialog-min-width);
   width: -moz-max-content;
   width: max-content;
@@ -2682,7 +2683,7 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
     display: block;
     position: fixed;
     inset: 0;
-    z-index: 199;
+    z-index: var(--pk-z-popover, 1400);
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
@@ -3307,6 +3308,9 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
   align-items: center;
   z-index: var(--pk-z-modal);
 }
+.prokodo-Dialog--is-visible {
+  display: flex;
+}
 .prokodo-Dialog__backdrop {
   display: none;
   position: fixed;
@@ -3315,16 +3319,11 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
   align-items: center;
   z-index: var(--pk-z-modal);
   background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
-}
-.prokodo-Dialog__backdrop {
   animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
 .prokodo-Dialog__backdrop--is-visible {
   display: flex;
 }
-.prokodo-Dialog--is-visible {
-  display: flex;
-}
 .prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
   position: static;
   inset: auto;
@@ -4664,7 +4663,7 @@ html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--in
 }
 .prokodo-Input__counter {
   padding-top: var(--pk-space-md);
-  color: var(--pk-palette-grey-600);
+  color: var(--pk-input-helper-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;
@@ -5093,9 +5092,6 @@ html[data-theme=dark] .prokodo-Label__highlighted, [data-theme=dark] .prokodo-La
   border-radius: 1000rem;
   background-color: var(--pk-color-surface-raised);
 }
-html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--pk-palette-grey-400);
-}
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;
@@ -7343,7 +7339,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
 .prokodo-Select__sheet__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 199;
+  z-index: var(--pk-z-popover, 1400);
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
@@ -7354,7 +7350,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 200;
+  z-index: calc(var(--pk-z-popover, 1400) + 1);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -7546,35 +7542,18 @@ html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select_
 }
 .prokodo-Select__sheet__done {
   width: 100%;
-  padding: 0.75rem;
-  border-radius: var(--pk-select-radius, 8px);
+  height: 3rem;
+  padding: var(--pk-space-xs, 0.25rem) var(--pk-space-sm, 0.5rem);
+  border-radius: var(--pk-radius-lg, 12px);
   border: none;
   cursor: pointer;
-  font-weight: 700;
-  background: linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  background: linear-gradient(135deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
   color: #fff;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent);
   transition: opacity var(--pk-timing-fast) ease;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.6;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
 }
 .prokodo-Select__sheet__done:hover {
   opacity: 0.9;
@@ -8138,6 +8117,42 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   transform: translate(-50%, -50%) scale(1.12);
 }
 
+.prokodo-SnackbarProvider {
+  position: fixed;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-space-sm);
+  width: -moz-max-content;
+  width: max-content;
+  max-width: min(480px, 100vw - var(--pk-space-xl) * 2);
+  pointer-events: none;
+}
+.prokodo-SnackbarProvider > * {
+  pointer-events: auto;
+}
+.prokodo-SnackbarProvider--is-top {
+  top: var(--pk-space-lg);
+  bottom: auto;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  bottom: var(--pk-space-lg);
+  top: auto;
+}
+.prokodo-SnackbarProvider--is-left {
+  left: var(--pk-space-lg);
+  right: auto;
+}
+.prokodo-SnackbarProvider--is-right {
+  right: var(--pk-space-lg);
+  left: auto;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
 @keyframes Snackbar_slideIn {
   from {
     opacity: 0;
@@ -8295,15 +8310,9 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 .prokodo-Stepper {
   display: flex;
   justify-content: space-between;
-  flex-direction: column;
+  flex-direction: row;
   padding: 0;
-  height: 100%;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Stepper {
-    width: 100%;
-    flex-direction: row;
-  }
+  width: 100%;
 }
 .prokodo-Stepper--primary {
   --gradient-border-1: linear-gradient(180deg, var(--pk-color-brand) 0%, var(--pk-color-accent) 100%);
@@ -8342,35 +8351,22 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 }
 .prokodo-Stepper__step {
   position: relative;
-  height: 100%;
+  width: 100%;
   list-style-type: none;
   cursor: pointer;
 }
 .prokodo-Stepper__step::after {
   content: "";
-  position: relative;
-  display: block;
-  margin: -10rem 0 1.25rem 1.25rem;
-  height: calc(100% - 150px);
-  width: 3px;
+  position: absolute;
+  top: 1.25rem;
+  margin: 0;
+  left: auto;
+  height: 3px;
+  width: calc(100% - 80px);
   background: var(--gradient-border-7);
-  transform: translateY(-50%);
+  transform: translateX(-50%);
   opacity: 0.5;
 }
-@media screen and (min-width: 480px) {
-  .prokodo-Stepper__step {
-    width: 100%;
-  }
-  .prokodo-Stepper__step::after {
-    position: absolute;
-    top: 1.25rem;
-    margin: 0;
-    left: auto;
-    height: 3px;
-    width: calc(100% - 80px);
-    transform: translateX(-50%);
-  }
-}
 .prokodo-Stepper__step:first-child::after {
   display: none;
 }
@@ -8480,7 +8476,7 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 }
 .prokodo-Stepper__label {
   text-align: center;
-  align-items: flex-start;
+  align-items: center;
   display: flex !important;
   flex-direction: column;
   justify-content: center;
@@ -8536,7 +8532,6 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 }
 @media screen and (min-width: 480px) {
   .prokodo-Stepper__label {
-    align-items: center;
     font-weight: 400;
     font-size: 1rem;
     font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -8738,9 +8733,14 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 .prokodo-Table__head__row {
   border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
+.prokodo-Table__head__row--double {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
 .prokodo-Table__head__cell {
   padding: var(--pk-table-padding-y) var(--pk-table-padding-x);
   font-weight: 500;
+  color: var(--pk-table-cell-fg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -8761,6 +8761,10 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 .prokodo-Table__body__row {
   border-bottom: var(--pk-border-width) solid var(--pk-table-border-color);
 }
+.prokodo-Table__body__row--double {
+  border-bottom-width: 3px;
+  border-bottom-style: double;
+}
 .prokodo-Table__body__row--has-link:hover {
   background: var(--pk-table-row-hover-bg);
 }