@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/dialog/Dialog.css

@@ -124,89 +124,128 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Dialog_fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Dialog_backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .prokodo-Dialog {
+  display: none;
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(1);
-  z-index: 1300;
-  background-color: var(--color-white);
-  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
-  border-radius: 0.75rem;
-  padding: 1.5rem 1rem;
-  max-width: 600px;
-  width: auto;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  left: -99999px;
-  /* Full width modifier */
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
 }
-.prokodo-Dialog {
+.prokodo-Dialog__backdrop {
+  display: none;
   position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
+  background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
+  animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog {
-    transition: none;
-  }
+.prokodo-Dialog__backdrop--is-visible {
+  display: flex;
 }
 .prokodo-Dialog--is-visible {
-  opacity: 1;
-  left: 50%;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translate(-50%, -50%) scale(1);
-  transition-delay: 0s;
+  display: flex;
+}
+.prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
+  position: static;
+  inset: auto;
+  z-index: auto;
+  display: contents;
 }
 .prokodo-Dialog__container {
   position: relative;
-  padding: 0.75rem;
-  max-width: 90rem;
-  margin: 0 auto;
-  /* @each $breakpoint in $screen-breakpoints {
-    $offset: nth($screen-offsets, $index);
-
-    @if ($index == 0) {
-      padding-right: $offset;
-      padding-left: $offset;
-    }
-    @else {
-      @include screenLargerThan($breakpoint) {
-        padding-right: $offset;
-        padding-left: $offset;
-      }
-    }
-
-    $index: $index + 1;
-  } */
-  /* Scroll behavior styles */
+  background-color: var(--pk-dialog-bg);
+  color: var(--pk-dialog-fg);
+  border-radius: var(--pk-dialog-radius);
+  box-shadow: var(--pk-dialog-shadow);
+  animation: Dialog_fadeIn var(--pk-timing-normal) ease;
+  max-height: 90vh;
+  overflow-y: auto;
+  width: 100%;
+  box-sizing: border-box;
 }
-.prokodo-Dialog__container:focus-visible {
-  outline: 0;
+@media screen and (min-width: 960px) {
+  .prokodo-Dialog__container {
+    min-width: 520px;
+    width: auto;
+  }
+}
+.prokodo-Dialog__container--fullScreen {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
 }
 .prokodo-Dialog__container--scroll-paper {
-  height: 100%;
-  max-height: calc(100vh - 3rem);
   overflow-y: auto;
 }
 .prokodo-Dialog__container--scroll-body {
-  max-height: none;
-  overflow: visible;
+  overflow-y: visible;
 }
 .prokodo-Dialog__header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding-bottom: 1rem;
+  align-items: flex-start;
+  padding: var(--pk-space-2xl) var(--pk-space-2xl) var(--pk-space-md);
+  gap: var(--pk-space-md);
+}
+.prokodo-Dialog__title {
+  color: var(--pk-dialog-fg);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Dialog__title--is-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 .prokodo-Dialog__header__button {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  border: none;
+  gap: var(--pk-space-xs);
+  flex-shrink: 0;
   background: none;
-  color: var(--color-grey-900);
+  border: none;
   cursor: pointer;
+  color: var(--pk-dialog-fg);
+  opacity: 0.5;
+  transition: opacity var(--pk-timing-fast) ease;
+  padding: var(--pk-space-xs);
+  border-radius: var(--pk-radius-sm);
+  margin-top: -2px;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -229,86 +268,22 @@
     line-height: 1.4;
   }
 }
-.prokodo-Dialog__header__button__icon {
-  margin-right: 0.25rem;
-}
-.prokodo-Dialog__header__button:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
-}
-.prokodo-Dialog__close {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.prokodo-Dialog__close__label {
-  display: inline-block;
-  padding-right: 1rem;
-  color: var(--color-grey-500);
-  text-shadow: var(--elevation--text-1);
-  font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-.prokodo-Dialog__close:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
+.prokodo-Dialog__header__button:hover {
+  opacity: 1;
 }
-.prokodo-Dialog__title--is-hidden {
-  position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
+.prokodo-Dialog__header__button__icon {
+  flex-shrink: 0;
 }
 .prokodo-Dialog__content {
-  padding: 0 !important;
-  scrollbar-width: none;
+  padding: var(--pk-space-md) var(--pk-space-2xl);
 }
-.prokodo-Dialog__content--scroll-body {
-  height: calc(100vh - 50px);
-  overflow-y: scroll;
+.prokodo-Dialog__content--scroll-paper {
+  overflow-y: auto;
 }
 .prokodo-Dialog__actions {
   display: flex;
   justify-content: flex-end;
-  padding-top: 1rem;
-  gap: 0.75rem;
-}
-.prokodo-Dialog__backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-  z-index: 1299;
-  left: -99999px;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  opacity: 1;
-  pointer-events: auto;
-  left: 0;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  position: fixed;
-}
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog__backdrop {
-    transition: none;
-  }
-}
-.prokodo-Dialog--fullScreen {
-  max-width: none;
-  width: 100%;
-  height: 100%;
+  gap: var(--pk-space-md);
+  padding: var(--pk-space-md) var(--pk-space-2xl) var(--pk-space-2xl);
+  flex-wrap: wrap;
 }

package/dist/components/dialog/Dialog.module.css

@@ -124,89 +124,128 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Dialog_fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Dialog_backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .prokodo-Dialog {
+  display: none;
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(1);
-  z-index: 1300;
-  background-color: var(--color-white);
-  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
-  border-radius: 0.75rem;
-  padding: 1.5rem 1rem;
-  max-width: 600px;
-  width: auto;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  left: -99999px;
-  /* Full width modifier */
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
 }
-.prokodo-Dialog {
+.prokodo-Dialog__backdrop {
+  display: none;
   position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
+  background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
+  animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog {
-    transition: none;
-  }
+.prokodo-Dialog__backdrop--is-visible {
+  display: flex;
 }
 .prokodo-Dialog--is-visible {
-  opacity: 1;
-  left: 50%;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translate(-50%, -50%) scale(1);
-  transition-delay: 0s;
+  display: flex;
+}
+.prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
+  position: static;
+  inset: auto;
+  z-index: auto;
+  display: contents;
 }
 .prokodo-Dialog__container {
   position: relative;
-  padding: 0.75rem;
-  max-width: 90rem;
-  margin: 0 auto;
-  /* @each $breakpoint in $screen-breakpoints {
-    $offset: nth($screen-offsets, $index);
-
-    @if ($index == 0) {
-      padding-right: $offset;
-      padding-left: $offset;
-    }
-    @else {
-      @include screenLargerThan($breakpoint) {
-        padding-right: $offset;
-        padding-left: $offset;
-      }
-    }
-
-    $index: $index + 1;
-  } */
-  /* Scroll behavior styles */
+  background-color: var(--pk-dialog-bg);
+  color: var(--pk-dialog-fg);
+  border-radius: var(--pk-dialog-radius);
+  box-shadow: var(--pk-dialog-shadow);
+  animation: Dialog_fadeIn var(--pk-timing-normal) ease;
+  max-height: 90vh;
+  overflow-y: auto;
+  width: 100%;
+  box-sizing: border-box;
 }
-.prokodo-Dialog__container:focus-visible {
-  outline: 0;
+@media screen and (min-width: 960px) {
+  .prokodo-Dialog__container {
+    min-width: 520px;
+    width: auto;
+  }
+}
+.prokodo-Dialog__container--fullScreen {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
 }
 .prokodo-Dialog__container--scroll-paper {
-  height: 100%;
-  max-height: calc(100vh - 3rem);
   overflow-y: auto;
 }
 .prokodo-Dialog__container--scroll-body {
-  max-height: none;
-  overflow: visible;
+  overflow-y: visible;
 }
 .prokodo-Dialog__header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding-bottom: 1rem;
+  align-items: flex-start;
+  padding: var(--pk-space-2xl) var(--pk-space-2xl) var(--pk-space-md);
+  gap: var(--pk-space-md);
+}
+.prokodo-Dialog__title {
+  color: var(--pk-dialog-fg);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Dialog__title--is-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 .prokodo-Dialog__header__button {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  border: none;
+  gap: var(--pk-space-xs);
+  flex-shrink: 0;
   background: none;
-  color: var(--color-grey-900);
+  border: none;
   cursor: pointer;
+  color: var(--pk-dialog-fg);
+  opacity: 0.5;
+  transition: opacity var(--pk-timing-fast) ease;
+  padding: var(--pk-space-xs);
+  border-radius: var(--pk-radius-sm);
+  margin-top: -2px;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -229,86 +268,22 @@
     line-height: 1.4;
   }
 }
-.prokodo-Dialog__header__button__icon {
-  margin-right: 0.25rem;
-}
-.prokodo-Dialog__header__button:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
-}
-.prokodo-Dialog__close {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.prokodo-Dialog__close__label {
-  display: inline-block;
-  padding-right: 1rem;
-  color: var(--color-grey-500);
-  text-shadow: var(--elevation--text-1);
-  font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-.prokodo-Dialog__close:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
+.prokodo-Dialog__header__button:hover {
+  opacity: 1;
 }
-.prokodo-Dialog__title--is-hidden {
-  position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
+.prokodo-Dialog__header__button__icon {
+  flex-shrink: 0;
 }
 .prokodo-Dialog__content {
-  padding: 0 !important;
-  scrollbar-width: none;
+  padding: var(--pk-space-md) var(--pk-space-2xl);
 }
-.prokodo-Dialog__content--scroll-body {
-  height: calc(100vh - 50px);
-  overflow-y: scroll;
+.prokodo-Dialog__content--scroll-paper {
+  overflow-y: auto;
 }
 .prokodo-Dialog__actions {
   display: flex;
   justify-content: flex-end;
-  padding-top: 1rem;
-  gap: 0.75rem;
-}
-.prokodo-Dialog__backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-  z-index: 1299;
-  left: -99999px;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  opacity: 1;
-  pointer-events: auto;
-  left: 0;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  position: fixed;
-}
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog__backdrop {
-    transition: none;
-  }
-}
-.prokodo-Dialog--fullScreen {
-  max-width: none;
-  width: 100%;
-  height: 100%;
+  gap: var(--pk-space-md);
+  padding: var(--pk-space-md) var(--pk-space-2xl) var(--pk-space-2xl);
+  flex-wrap: wrap;
 }

package/dist/components/dialog/Dialog.module.scss.js

@@ -1,22 +1,27 @@
+const Dialog_backdropFadeIn = "Dialog_backdropFadeIn";
+const Dialog_fadeIn = "Dialog_fadeIn";
 const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
+  "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
+  Dialog_backdropFadeIn,
+  "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
   "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__container": "prokodo-Dialog__container",
+  Dialog_fadeIn,
+  "prokodo-Dialog__container--fullScreen": "prokodo-Dialog__container--fullScreen",
   "prokodo-Dialog__container--scroll-paper": "prokodo-Dialog__container--scroll-paper",
   "prokodo-Dialog__container--scroll-body": "prokodo-Dialog__container--scroll-body",
   "prokodo-Dialog__header": "prokodo-Dialog__header",
+  "prokodo-Dialog__title": "prokodo-Dialog__title",
+  "prokodo-Dialog__title--is-hidden": "prokodo-Dialog__title--is-hidden",
   "prokodo-Dialog__header__button": "prokodo-Dialog__header__button",
   "prokodo-Dialog__header__button__icon": "prokodo-Dialog__header__button__icon",
-  "prokodo-Dialog__close": "prokodo-Dialog__close",
-  "prokodo-Dialog__close__label": "prokodo-Dialog__close__label",
-  "prokodo-Dialog__title--is-hidden": "prokodo-Dialog__title--is-hidden",
   "prokodo-Dialog__content": "prokodo-Dialog__content",
-  "prokodo-Dialog__content--scroll-body": "prokodo-Dialog__content--scroll-body",
-  "prokodo-Dialog__actions": "prokodo-Dialog__actions",
-  "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
-  "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
-  "prokodo-Dialog--fullScreen": "prokodo-Dialog--fullScreen"
+  "prokodo-Dialog__content--scroll-paper": "prokodo-Dialog__content--scroll-paper",
+  "prokodo-Dialog__actions": "prokodo-Dialog__actions"
 };
 export {
+  Dialog_backdropFadeIn,
+  Dialog_fadeIn,
   styles as default
 };

package/dist/components/drawer/Drawer.css

@@ -133,11 +133,11 @@
 .prokodo-Drawer__backdrop {
   position: fixed;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pk-drawer-backdrop-bg);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
-  z-index: 1301;
+  z-index: calc(var(--pk-drawer-z-index) - 1);
 }
 .prokodo-Drawer__backdrop--open {
   opacity: 1;
@@ -150,9 +150,9 @@
 }
 .prokodo-Drawer__container {
   position: fixed;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-1);
-  z-index: 1302;
+  background-color: var(--pk-drawer-bg);
+  box-shadow: var(--pk-drawer-shadow);
+  z-index: var(--pk-drawer-z-index);
   pointer-events: none;
   width: 300px;
   height: 100%;
@@ -229,11 +229,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-grey-200);
+  padding: var(--pk-drawer-padding);
+  border-bottom: 1px solid var(--pk-drawer-border);
 }
 .prokodo-Drawer__content {
-  padding: 1rem;
+  padding: var(--pk-drawer-padding);
   max-height: calc(100% - 7rem);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;

package/dist/components/drawer/Drawer.module.css

@@ -133,11 +133,11 @@
 .prokodo-Drawer__backdrop {
   position: fixed;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pk-drawer-backdrop-bg);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
-  z-index: 1301;
+  z-index: calc(var(--pk-drawer-z-index) - 1);
 }
 .prokodo-Drawer__backdrop--open {
   opacity: 1;
@@ -150,9 +150,9 @@
 }
 .prokodo-Drawer__container {
   position: fixed;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-1);
-  z-index: 1302;
+  background-color: var(--pk-drawer-bg);
+  box-shadow: var(--pk-drawer-shadow);
+  z-index: var(--pk-drawer-z-index);
   pointer-events: none;
   width: 300px;
   height: 100%;
@@ -229,11 +229,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-grey-200);
+  padding: var(--pk-drawer-padding);
+  border-bottom: 1px solid var(--pk-drawer-border);
 }
 .prokodo-Drawer__content {
-  padding: 1rem;
+  padding: var(--pk-drawer-padding);
   max-height: calc(100% - 7rem);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;