@raintonic/formaui 0.4.0 → 0.9.2

package/styles/partials/components/_dialog.scss

@@ -1,180 +1,181 @@
-/**
- * # Dialog Styles
- *
- * Global styles for the fui dialog component.
- * These styles are applied to the overlay elements.
- */
-
-// Component tokens with fallbacks
-.fui-dialog-panel {
-  --fui-dialog-backdrop-color: var(--fui-black-30);
-  --fui-dialog-title-padding: var(--fui-padding-24) var(--fui-padding-24) 0;
-  --fui-dialog-title-font-size: var(--fui-font-size-05);
-  --fui-dialog-title-font-weight: var(--fui-font-weight-medium);
-  --fui-dialog-title-line-height: 1.4;
-  --fui-dialog-content-padding: var(--fui-padding-24);
-  --fui-dialog-content-font-size: var(--fui-font-size-02);
-  --fui-dialog-content-line-height: 1.5;
-  --fui-dialog-actions-gap: var(--fui-gap-8);
-  --fui-dialog-actions-padding: var(--fui-padding-8) var(--fui-padding-24) var(--fui-padding-24);
-  --fui-dialog-actions-min-height: 52px;
-  --fui-dialog-close-top: var(--fui-padding-8);
-  --fui-dialog-close-right: var(--fui-padding-8);
-}
-
-// Dialog backdrop
-// Note: z-index is applied dynamically by the overlay service for proper stacking
-.fui-dialog-backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: var(--fui-dialog-backdrop-color);
-  transition: opacity var(--fui-duration-moderate-02) var(--fui-ease-standard);
-}
-
-// Dialog panel (overlay pane)
-// Note: z-index is applied dynamically by the overlay service for proper stacking
-.fui-dialog-panel {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  pointer-events: auto;
-  box-sizing: border-box;
-  outline: 0;
-
-  // Enter animation
-  &:not(.fui-dialog-exit) {
-    animation: fui-dialog-panel-enter var(--fui-duration-moderate-02) var(--fui-ease-entrance);
-  }
-
-  // Exit animation
-  &.fui-dialog-exit {
-    animation: fui-dialog-panel-exit var(--fui-duration-moderate-01) var(--fui-ease-exit) forwards;
-  }
-}
-
-// Dialog container host
-.fui-dialog-container-host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-// Animation keyframes
-@keyframes fui-dialog-panel-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fui-dialog-panel-exit {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-// Dialog content sections (optional utility classes)
-.fui-dialog-title {
-  display: block;
-  margin: 0;
-  padding: var(--fui-dialog-title-padding, 24px 24px 0);
-  font-size: var(--fui-dialog-title-font-size, 20px);
-  font-weight: var(--fui-dialog-title-font-weight, 500);
-  line-height: var(--fui-dialog-title-line-height, 1.4);
-  color: var(--fui-dialog-title-color, inherit);
-}
-
-.fui-dialog-content {
-  display: block;
-  flex: 1;
-  overflow: auto;
-  padding: var(--fui-dialog-content-padding, 20px 24px);
-  font-size: var(--fui-dialog-content-font-size, 14px);
-  line-height: var(--fui-dialog-content-line-height, 1.5);
-  color: var(--fui-dialog-content-color, inherit);
-
-  // Remove default margin for first/last elements
-  > :first-child {
-    margin-top: 0;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.fui-dialog-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--fui-dialog-actions-gap, 8px);
-  padding: var(--fui-dialog-actions-padding, 8px 24px 24px);
-  min-height: var(--fui-dialog-actions-min-height, 52px);
-
-  // Align actions to the start
-  &.fui-dialog-actions-start {
-    justify-content: flex-start;
-  }
-
-  // Center actions
-  &.fui-dialog-actions-center {
-    justify-content: center;
-  }
-
-  // Space between actions (first left, rest right)
-  &.fui-dialog-actions-between {
-    justify-content: space-between;
-  }
-}
-
-// Close button utility class
-.fui-dialog-close {
-  position: absolute;
-  top: var(--fui-dialog-close-top, 8px);
-  right: var(--fui-dialog-close-right, 8px);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  padding: var(--fui-padding-8);
-  border-radius: var(--fui-border-radius-pill);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fui-dialog-close-color, var(--fui-black-50));
-  transition: background-color var(--fui-duration-moderate-01) var(--fui-ease-standard);
-
-  &:hover {
-    background-color: var(--fui-dialog-close-hover-bg, var(--fui-black-5));
-  }
-
-  &:focus {
-    outline: none;
-    background-color: var(--fui-dialog-close-focus-bg, var(--fui-black-10));
-  }
-}
-
-// Responsive adjustments
-@media screen and (max-width: 599px) {
-  .fui-dialog-panel {
-    max-width: calc(100vw - 32px) !important;
-    max-height: calc(100vh - 32px) !important;
-  }
-
-  .fui-dialog-title {
-    padding: var(--fui-dialog-title-padding-mobile, 16px 16px 0);
-  }
-
-  .fui-dialog-content {
-    padding: var(--fui-dialog-content-padding-mobile, 16px);
-  }
-
-  .fui-dialog-actions {
-    padding: var(--fui-dialog-actions-padding-mobile, 8px 16px 16px);
-  }
-}
+/**
+ * # Dialog Styles
+ *
+ * Global styles for the fui dialog component.
+ * These styles are applied to the overlay elements.
+ */
+
+// Component tokens with fallbacks
+:root {
+  --fui-dialog-backdrop-color: rgba(0, 0, 0, 0.3);
+  --fui-dialog-title-padding: var(--fui-spacing-9) var(--fui-spacing-9) 0;
+  --fui-dialog-title-font-size: var(--fui-text-xl);
+  --fui-dialog-title-font-weight: var(--fui-weight-medium);
+  --fui-dialog-title-line-height: 1.4;
+  --fui-dialog-content-padding: var(--fui-spacing-9);
+  --fui-dialog-content-font-size: var(--fui-text-base);
+  --fui-dialog-content-line-height: 1.5;
+  --fui-dialog-actions-gap: var(--fui-spacing-4);
+  --fui-dialog-actions-padding: var(--fui-spacing-4) var(--fui-spacing-9) var(--fui-spacing-9);
+  --fui-dialog-actions-min-height: 52px;
+  --fui-dialog-close-top: var(--fui-spacing-4);
+  --fui-dialog-close-right: var(--fui-spacing-4);
+}
+
+// Dialog backdrop
+// Note: z-index is applied dynamically by the overlay service for proper stacking
+.fui-dialog-backdrop,
+.fui-drawer-service-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--fui-dialog-backdrop-color);
+  transition: opacity var(--fui-duration-moderate) var(--fui-ease-in-out);
+}
+
+// Dialog panel (overlay pane)
+// Note: z-index is applied dynamically by the overlay service for proper stacking
+.fui-dialog-panel {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  pointer-events: auto;
+  box-sizing: border-box;
+  outline: 0;
+
+  // Enter animation
+  &:not(.fui-dialog-exit) {
+    animation: fui-dialog-panel-enter var(--fui-duration-moderate) var(--fui-ease-out);
+  }
+
+  // Exit animation
+  &.fui-dialog-exit {
+    animation: fui-dialog-panel-exit var(--fui-duration-base) var(--fui-ease-in) forwards;
+  }
+}
+
+// Dialog container host
+.fui-dialog-container-host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+// Animation keyframes
+@keyframes fui-dialog-panel-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fui-dialog-panel-exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// Dialog content sections (optional utility classes)
+.fui-dialog-title {
+  display: block;
+  margin: 0;
+  padding: var(--fui-dialog-title-padding, 24px 24px 0);
+  font-size: var(--fui-dialog-title-font-size, 20px);
+  font-weight: var(--fui-dialog-title-font-weight, 500);
+  line-height: var(--fui-dialog-title-line-height, 1.4);
+  color: var(--fui-dialog-title-color, inherit);
+}
+
+.fui-dialog-content {
+  display: block;
+  flex: 1;
+  overflow: auto;
+  padding: var(--fui-dialog-content-padding, 20px 24px);
+  font-size: var(--fui-dialog-content-font-size, 14px);
+  line-height: var(--fui-dialog-content-line-height, 1.5);
+  color: var(--fui-dialog-content-color, inherit);
+
+  // Remove default margin for first/last elements
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.fui-dialog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fui-dialog-actions-gap, 8px);
+  padding: var(--fui-dialog-actions-padding, 8px 24px 24px);
+  min-height: var(--fui-dialog-actions-min-height, 52px);
+
+  // Align actions to the start
+  &.fui-dialog-actions-start {
+    justify-content: flex-start;
+  }
+
+  // Center actions
+  &.fui-dialog-actions-center {
+    justify-content: center;
+  }
+
+  // Space between actions (first left, rest right)
+  &.fui-dialog-actions-between {
+    justify-content: space-between;
+  }
+}
+
+// Close button utility class
+.fui-dialog-close {
+  position: absolute;
+  top: var(--fui-dialog-close-top, 8px);
+  right: var(--fui-dialog-close-right, 8px);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: var(--fui-spacing-4);
+  border-radius: var(--fui-radius-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fui-dialog-close-color, rgba(0, 0, 0, 0.5));
+  transition: background-color var(--fui-duration-base) var(--fui-ease-in-out);
+
+  &:hover {
+    background-color: var(--fui-dialog-close-hover-bg, rgba(0, 0, 0, 0.05));
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--fui-dialog-close-focus-bg, rgba(0, 0, 0, 0.1));
+  }
+}
+
+// Responsive adjustments
+@media screen and (max-width: 599px) {
+  .fui-dialog-panel {
+    max-width: calc(100vw - 32px) !important;
+    max-height: calc(100vh - 32px) !important;
+  }
+
+  .fui-dialog-title {
+    padding: var(--fui-dialog-title-padding-mobile, 16px 16px 0);
+  }
+
+  .fui-dialog-content {
+    padding: var(--fui-dialog-content-padding-mobile, 16px);
+  }
+
+  .fui-dialog-actions {
+    padding: var(--fui-dialog-actions-padding-mobile, 8px 16px 16px);
+  }
+}

package/styles/partials/components/_overlay.scss

@@ -1,87 +1,87 @@
-@use '../constants' as *;
-@use '../mixins' as mixins;
-
-// Overlay pane base styles
-.fui-overlay-pane {
-  position: absolute;
-  pointer-events: auto;
-  box-sizing: border-box;
-  z-index: 2;
-}
-
-// Overlay backdrop styles
-.fui-overlay-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-  background-color: transparent;
-  z-index: 1;
-}
-
-// Tooltip panel styles
-.fui-tooltip-panel {
-  z-index: var(--fui-z-index-tooltip, 1100);
-
-  .fui-tooltip {
-    // Tooltip-specific overlay styles
-    max-width: var(--fui-tooltip-max-width, 200px);
-  }
-}
-
-// Menu panel styles
-.fui-menu-panel {
-  z-index: var(--fui-z-index-dropdown, 1050);
-
-  .fui-menu {
-    // Menu-specific overlay styles
-    min-width: var(--fui-menu-min-width, 8rem);
-    max-width: var(--fui-menu-max-width, 20rem);
-  }
-
-  &--sm {
-    .fui-menu {
-      min-width: var(--fui-menu-min-width-sm, 6rem);
-    }
-  }
-
-  &--lg {
-    .fui-menu {
-      min-width: var(--fui-menu-min-width-lg, 12rem);
-    }
-  }
-}
-
-// Menu backdrop styles
-.fui-menu-backdrop {
-  background-color: transparent;
-}
-
-// Animation classes for overlays
-.fui-overlay-enter {
-  opacity: 0;
-  transform: scale(0.95);
-  transition:
-    opacity var(--fui-duration-fast-02) var(--fui-ease-standard),
-    transform var(--fui-duration-fast-02) var(--fui-ease-standard);
-}
-
-.fui-overlay-enter-active {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.fui-overlay-exit {
-  opacity: 1;
-  transform: scale(1);
-  transition:
-    opacity var(--fui-duration-fast-01) var(--fui-ease-standard),
-    transform var(--fui-duration-fast-01) var(--fui-ease-standard);
-}
-
-.fui-overlay-exit-active {
-  opacity: 0;
-  transform: scale(0.95);
-}
+@use '../constants' as *;
+@use '../mixins' as mixins;
+
+// Overlay pane base styles
+.fui-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 2;
+}
+
+// Overlay backdrop styles
+.fui-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  background-color: transparent;
+  z-index: 1;
+}
+
+// Tooltip panel styles
+.fui-tooltip-panel {
+  z-index: var(--fui-z-index-tooltip, 1100);
+
+  .fui-tooltip {
+    // Tooltip-specific overlay styles
+    max-width: var(--fui-tooltip-max-width, 200px);
+  }
+}
+
+// Dropdown-menu panel styles
+.fui-dropdown-menu-panel {
+  z-index: var(--fui-z-index-dropdown, 1050);
+
+  .fui-dropdown-menu {
+    // Dropdown-menu-specific overlay styles
+    min-width: var(--fui-dropdown-menu-min-width, 8rem);
+    max-width: var(--fui-dropdown-menu-max-width, 20rem);
+  }
+
+  &--sm {
+    .fui-dropdown-menu {
+      min-width: var(--fui-dropdown-menu-min-width-sm, 6rem);
+    }
+  }
+
+  &--lg {
+    .fui-dropdown-menu {
+      min-width: var(--fui-dropdown-menu-min-width-lg, 12rem);
+    }
+  }
+}
+
+// Dropdown-menu backdrop styles
+.fui-dropdown-menu-backdrop {
+  background-color: transparent;
+}
+
+// Animation classes for overlays
+.fui-overlay-enter {
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--fui-duration-fast) var(--fui-ease-in-out),
+    transform var(--fui-duration-fast) var(--fui-ease-in-out);
+}
+
+.fui-overlay-enter-active {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.fui-overlay-exit {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--fui-duration-fast) var(--fui-ease-in-out),
+    transform var(--fui-duration-fast) var(--fui-ease-in-out);
+}
+
+.fui-overlay-exit-active {
+  opacity: 0;
+  transform: scale(0.95);
+}