@mgremy/ng-primitives 0.4.0 → 0.6.0

package/theme/components/button.css

@@ -1,37 +1,219 @@
 @utility mgnp-button {
   display: inline-block;
-  padding-block: --spacing(2);
-  padding-inline: --spacing(4);
-  border-radius: var(--radius-lg);
-  color: var(--ngp-text-primary);
   border: none;
-  font-weight: var(--font-weight-medium);
   height: fit-content;
   width: max-content;
+  cursor: pointer;
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-lg);
+  padding-block: --spacing(2);
+  padding-inline: --spacing(4);
+  color: var(--ngp-text-primary);
   background-color: var(--ngp-background);
-  transition: background-color 200ms ease-in-out;
   box-shadow: var(--ngp-button-shadow);
-  cursor: pointer;
-
-  @variant data-hover {
-    background-color: var(--ngp-background-hover);
-  }
 
   @variant data-focus-visible {
     outline: 2px solid var(--ngp-focus-ring);
   }
 
-  @variant data-press {
-    background-color: var(--ngp-background-active);
-  }
-
   @variant data-disabled {
     opacity: 50%;
+    cursor: default;
+  }
+
+  /* Solid */
+  @variant data-[mgnp-variant=solid] {
+    /* Colors */
+    @variant data-[mgnp-color=ui] {
+      --ngp-background: var(--mg-background-ui);
+
+      @variant data-hover {
+        --ngp-background: var(--ngp-background-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--ngp-background-active);
+      }
+    }
+
+    @variant data-[mgnp-color=primary] {
+      --ngp-background: var(--mg-background-primary);
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-primary-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-primary-active);
+      }
+    }
+
+    @variant data-[mgnp-color=secondary] {
+      --ngp-background: var(--mg-background-secondary);
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-secondary-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-secondary-active);
+      }
+    }
+
+    @variant data-[mgnp-color=info] {
+      --ngp-background: var(--mg-background-info);
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-info-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-info-active);
+      }
+    }
+
+    @variant data-[mgnp-color=success] {
+      --ngp-background: var(--mg-background-success);
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-success-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-success-active);
+      }
+    }
+
+    @variant data-[mgnp-color=warning] {
+      --ngp-background: var(--mg-background-warning);
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-warning-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-warning-active);
+      }
+    }
+
+    @variant data-[mgnp-color=danger] {
+      --ngp-background: var(--mg-background-danger);
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-danger-hover);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-danger-active);
+      }
+    }
+  }
+
+  /* Outline */
+  @variant data-[mgnp-variant=outline] {
+    --ngp-background: transparent;
+    --ngp-text-primary: var(--mg-text-ui);
+
+    /* Colors */
+    @variant data-[mgnp-color=ui] {
+      @variant data-hover {
+        --ngp-background: var(--mg-background-ui-inverse);
+        --ngp-text-primary: var(--mg-text-inverse);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-ui-inverse-active);
+      }
+    }
+
+    @variant data-[mgnp-color=primary] {
+      @variant not-data-hover {
+        --ngp-text-primary: var(--mg-text-primary);
+      }
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-primary);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-primary-inverse-active);
+      }
+    }
+
+    @variant data-[mgnp-color=secondary] {
+      @variant not-data-hover {
+        --ngp-text-primary: var(--mg-text-secondary);
+      }
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-secondary);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-secondary-inverse-active);
+      }
+    }
+
+    @variant data-[mgnp-color=info] {
+      @variant not-data-hover {
+        --ngp-text-primary: var(--mg-text-info);
+      }
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-info);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-info-inverse-active);
+      }
+    }
+
+    @variant data-[mgnp-color=success] {
+      @variant not-data-hover {
+        --ngp-text-primary: var(--mg-text-success);
+      }
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-success);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-success-inverse-active);
+      }
+    }
+
+    @variant data-[mgnp-color=warning] {
+      @variant not-data-hover {
+        --ngp-text-primary: var(--mg-text-warning);
+      }
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-warning);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-warning-inverse-active);
+      }
+    }
+
+    @variant data-[mgnp-color=danger] {
+      @variant not-data-hover {
+        --ngp-text-primary: var(--mg-text-danger);
+      }
+
+      @variant data-hover {
+        --ngp-background: var(--mg-background-danger);
+      }
+
+      @variant data-press {
+        --ngp-background: var(--mg-background-danger-inverse-active);
+      }
+    }
   }
 }
 
 @layer base {
   [mgnpButton][data-mgnp-component='mgnp-button'] {
-    @apply mgnp-button;
+    @apply mgnp-button transition;
   }
 }

package/theme/components/combobox.css

@@ -4,31 +4,31 @@
   align-items: center;
   height: fit-content;
   width: fit-content;
-  border-radius: var(--radius-lg);
   border: none;
+  box-sizing: border-box;
+  border-radius: var(--radius-lg);
   background-color: var(--ngp-background);
   box-shadow: var(--ngp-input-shadow);
-  box-sizing: border-box;
 
   @variant data-focus {
-    outline: 2px solid var(--ngp-focus-ring);
     outline-offset: 2px;
+    outline: 2px solid var(--ngp-focus-ring);
   }
 }
 
 @utility mgnp-combobox-input {
   flex: 1;
-  padding-block: --spacing(0);
-  padding-inline: --spacing(4);
   border: none;
   background-color: transparent;
-  color: var(--ngp-text);
   font-family: inherit;
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
   outline: none;
   height: auto;
   width: auto;
+  padding-block: --spacing(0);
+  padding-inline: --spacing(4);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  color: var(--ngp-text);
 }
 
 @utility mgnp-combobox-button {
@@ -38,52 +38,51 @@
   height: 100%;
   background-color: transparent;
   border: none;
-  color: var(--ngp-text);
   cursor: pointer;
   box-sizing: border-box;
   box-shadow: none;
+  color: var(--ngp-text);
 }
 
 @utility mgnp-combobox-dropdown {
-  background-color: var(--ngp-background);
-  border: 1px solid var(--ngp-border);
   padding: --spacing(1);
-  border-radius: var(--radius-xl);
   outline: none;
   position: absolute;
-  animation: popover-show 0.1s ease-out;
-  width: var(--ngp-combobox-width);
   min-width: fit-content;
-  box-shadow: var(--ngp-shadow-lg);
   box-sizing: border-box;
-  margin-top: --spacing(1);
-  max-height: --spacing(60);
   overflow-y: auto;
   z-index: 1001;
+  border-radius: var(--radius-xl);
+  margin-top: --spacing(1);
+  max-height: --spacing(60);
+  width: var(--ngp-combobox-width);
+  box-shadow: var(--ngp-shadow-lg);
+  background-color: var(--ngp-background);
+  border: 1px solid var(--ngp-border);
 
   @variant data-enter {
-    animation: combobox-show 200ms ease-out;
+    animation: combobox-show var(--default-transition-duration) var(--default-transition-timing-function);
   }
 
   @variant data-exit {
-    animation: combobox-hide 200ms ease-out;
+    animation: combobox-hide var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 
 @utility mgnp-combobox-option {
   display: flex;
   align-items: center;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
   gap: --spacing(2);
   padding-block: --spacing(1.5);
   padding-inline: --spacing(3);
-  cursor: pointer;
-  border-radius: var(--radius-lg);
-  width: 100%;
   height: --spacing(9);
+  border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   line-height: var(--text-sm--line-height);
   color: var(--ngp-text-primary);
-  box-sizing: border-box;
 
   @variant data-hover {
     background-color: var(--ngp-background-hover);
@@ -104,23 +103,23 @@
 
 @layer base {
   [mgnpCombobox][data-mgnp-component='mgnp-combobox'] {
-    @apply mgnp-combobox;
+    @apply mgnp-combobox transition;
   }
 
   [mgnpComboboxInput][data-mgnp-component='mgnp-combobox-input'] {
-    @apply mgnp-combobox-input;
+    @apply mgnp-combobox-input transition;
   }
 
   [ngpComboboxButton][mgnpButton][data-mgnp-component='mgnp-button'] {
-    @apply mgnp-combobox-button;
+    @apply mgnp-combobox-button transition;
   }
 
   [mgnpComboboxDropdown][data-mgnp-component='mgnp-combobox-dropdown'] {
-    @apply mgnp-combobox-dropdown;
+    @apply mgnp-combobox-dropdown transition;
   }
 
   [mgnpComboboxOption][data-mgnp-component='mgnp-combobox-option'] {
-    @apply mgnp-combobox-option;
+    @apply mgnp-combobox-option transition;
   }
 }
 

package/theme/components/input.css

@@ -1,17 +1,17 @@
 @utility mgnp-input {
-  height: --spacing(9);
   width: 100%;
-  border-radius: var(--radius-lg);
+  border: none;
+  outline: none;
+  height: --spacing(9);
   padding-block: --spacing(0);
   padding-inline: --spacing(4);
-  border: none;
+  border-radius: var(--radius-lg);
   box-shadow: var(--ngp-input-shadow);
   background-color: var(--ngp-background);
-  outline: none;
 
   @variant data-focus {
-    outline: 2px solid var(--ngp-focus-ring);
     outline-offset: 2px;
+    outline: 2px solid var(--ngp-focus-ring);
   }
 
   ::placeholder {
@@ -21,6 +21,6 @@
 
 @layer base {
   [mgnpInput][data-mgnp-component='mgnp-input'] {
-    @apply mgnp-input;
+    @apply mgnp-input transition;
   }
 }

package/theme/components/menu.css

@@ -3,33 +3,32 @@
   display: flex;
   flex-direction: column;
   width: max-content;
+  padding: --spacing(1);
+  border-radius: var(--radius-lg);
   background: var(--ngp-background);
   border: 1px solid var(--ngp-border);
   box-shadow: var(--ngp-shadow-lg);
-  border-radius: var(--radius-lg);
-  padding: --spacing(1);
   transform-origin: var(--ngp-menu-transform-origin);
 
   @variant data-enter {
-    animation: menu-show 200ms ease-out;
+    animation: menu-show var(--default-transition-duration) var(--default-transition-timing-function);
   }
 
   @variant data-exit {
-    animation: menu-hide 200ms ease-out;
+    animation: menu-hide var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 
 @utility mgnp-menu-item {
-  padding-block: --spacing(1.5);
-  padding-inline: --spacing(3.5);
   border: none;
   background: none;
   cursor: pointer;
-  transition: background-color 200ms;
-  border-radius: var(--radius-sm);
-  min-width: --spacing(30);
   text-align: start;
   outline: none;
+  padding-block: --spacing(1.5);
+  padding-inline: --spacing(3.5);
+  min-width: --spacing(30);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   line-height: var(--text-sm--line-height);
 
@@ -42,8 +41,8 @@
   }
 
   @variant data-focus-visible {
-    outline: 2px solid var(--ngp-focus-ring);
     z-index: 1;
+    outline: 2px solid var(--ngp-focus-ring);
   }
 
   @variant data-disabled {
@@ -53,11 +52,11 @@
 
 @layer base {
   [mgnpMenu][data-mgnp-component='mgnp-menu'] {
-    @apply mgnp-menu;
+    @apply mgnp-menu transition;
   }
 
   [mgnpMenuItem][data-mgnp-component='mgnp-menu-item'] {
-    @apply mgnp-menu-item;
+    @apply mgnp-menu-item transition;
   }
 }
 

package/theme/components/pagination.css

@@ -4,66 +4,69 @@
     align-items: center;
     gap: --spacing(2);
   }
+}
 
-  [ngpPaginationFirst],
-  [ngpPaginationPrevious],
-  [ngpPaginationButton],
-  [ngpPaginationNext],
-  [ngpPaginationLast] {
-    all: unset;
-    display: flex;
-    width: --spacing(8);
-    height: --spacing(8);
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-lg);
-    outline-style: none;
-    background-color: var(--mg-background-ui);
-    color: var(--mg-text-primary);
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-medium);
-    box-shadow: var(--mg-shadow-button);
-    transition: background-color 200ms ease-in-out;
+@utility mgnp-pagination-button {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  outline-style: none;
+  width: --spacing(8);
+  height: --spacing(8);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  background-color: var(--ngp-background);
+  color: var(--ngp-text-primary);
+  box-shadow: var(--ngp-button-shadow);
 
-    @variant data-hover {
-      @variant not-data-disabled {
-        @variant not-data-selected {
-          background-color: var(--mg-background-hover);
-        }
+  @variant data-hover {
+    @variant not-data-disabled {
+      @variant not-data-selected {
+        background-color: var(--ngp-background-hover);
       }
     }
+  }
 
-    @variant data-focus-visible {
-      @variant not-data-disabled {
-        outline: 2px solid var(--mg-ring-ui);
-      }
+  @variant data-focus-visible {
+    @variant not-data-disabled {
+      outline: 2px solid var(--ngp-focus-ring);
     }
+  }
 
-    @variant data-press {
-      @variant not-data-disabled {
-        @variant not-data-selected {
-          background-color: var(--mg-background-active);
-        }
+  @variant data-press {
+    @variant not-data-disabled {
+      @variant not-data-selected {
+        background-color: var(--ngp-background-active);
       }
     }
+  }
 
-    @variant data-disabled {
-      background-color: var(--mg-background-disabled);
-      cursor: not-allowed;
-      color: #d2d2d2;
-      box-shadow: none;
-    }
+  @variant data-disabled {
+    cursor: not-allowed;
+    color: #d2d2d2;
+    box-shadow: none;
+    background-color: var(--ngp-background-disabled);
+  }
 
-    @variant data-selected {
-      background-color: var(--mg-background-inverse);
-      color: var(--mg-text-inverse);
-    }
+  @variant data-selected {
+    background-color: var(--ngp-background-inverse);
+    color: var(--ngp-text-inverse);
   }
 }
 
 @layer base {
   [ngpPagination][data-mgnp-component='mgnp-pagination'] {
-    @apply mgnp-pagination;
+    @apply mgnp-pagination transition;
+
+    [ngpPaginationFirst],
+    [ngpPaginationPrevious],
+    [ngpPaginationButton],
+    [ngpPaginationNext],
+    [ngpPaginationLast] {
+      @apply mgnp-pagination-button transition;
+    }
   }
 }

package/theme/components/toast.css

@@ -0,0 +1,124 @@
+@utility mgnp-toast {
+  position: absolute;
+  touch-action: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: fit-content;
+  padding: --spacing(3) --spacing(4);
+  border-radius: --spacing(2);
+  width: --spacing(87.5);
+  border: 1px solid var(--ngp-border);
+  background: var(--ngp-background);
+  box-shadow: var(--ngp-shadow);
+  z-index: var(--ngp-toast-z-index);
+  transform: var(--y);
+
+  @variant data-enter {
+    opacity: 1;
+    --y: translateY(0);
+    animation: toast-slide-in var(--default-transition-duration) var(--default-transition-timing-function);
+  }
+
+  @variant data-exit {
+    opacity: 0;
+    transform: translateY(100%);
+    transition:
+      opacity var(--default-transition-duration) var(--default-transition-timing-function),
+      transform var(--default-transition-duration) var(--default-transition-timing-function);
+    --y: translateY(calc(calc(var(--lift) * var(--ngp-toast-gap)) * -1));
+  }
+
+  @variant data-[visible=false] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @variant data-[position-x=end] {
+    right: 0;
+  }
+
+  @variant data-[position-x=start] {
+    left: 0;
+  }
+
+  @variant data-[position-y=top] {
+    top: 0;
+    --lift: 1;
+    --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));
+  }
+
+  @variant data-[position-y=bottom] {
+    bottom: 0;
+    --lift: -1;
+    --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));
+  }
+
+  @variant data-[expanded=true] {
+    --y: translateY(calc(var(--lift) * var(--ngp-toast-offset)));
+    height: auto;
+
+    ::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      height: calc(var(--ngp-toast-gap) + 1px);
+      bottom: 100%;
+      width: 100%;
+    }
+  }
+
+  @variant data-[expanded=false] {
+    @variant data-[front=false] {
+      --scale: var(--ngp-toasts-before) * 0.05 + 1;
+      --y: translateY(calc(var(--lift-amount) * var(--ngp-toasts-before)))
+        scale(calc(-1 * var(--scale)));
+      height: var(--ngp-toast-front-height);
+    }
+  }
+
+  @variant data-[swiping=true] {
+    transform: var(--y) translateY(var(--ngp-toast-swipe-amount-y, 0))
+      translateX(var(--ngp-toast-swipe-amount-x, 0));
+
+    @variant data-[swipe-direction=left] {
+      /* Fade out from -45px to -100px swipe */
+      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-x, 0px)) - 45) / 55, 1));
+    }
+
+    @variant data-[swipe-direction=right] {
+      /* Fade out from 45px to 100px swipe */
+      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-x, 0px) - 45) / 55, 1));
+    }
+
+    @variant data-[swipe-direction=top] {
+      /* Fade out from -45px to -100px swipe */
+      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-y, 0px)) - 45) / 55, 1));
+    }
+
+    @variant data-[swipe-direction=bottom] {
+      /* Fade out from 45px to 100px swipe */
+      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-y, 0px) - 45) / 55, 1));
+    }
+  }
+}
+
+@layer base {
+  [mgnpToast][data-mgnp-component='mgnp-toast'] {
+    @apply mgnp-toast transition;
+  }
+}
+
+@theme {
+  @keyframes toast-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}