@marwes-ui/presets 1.3.0 → 1.4.0

package/src/firstEdition/context-menu.css

@@ -0,0 +1,114 @@
+.mw-context-menu {
+  --mw-context-menu-width: 212px;
+  --mw-context-menu-surface: var(--mw-color-surface-elevated, #ffffff);
+  --mw-context-menu-border: color-mix(in srgb, var(--mw-color-text) 15%, transparent);
+  --mw-context-menu-divider: color-mix(in srgb, var(--mw-color-text) 20%, transparent);
+  --mw-context-menu-text: var(--mw-color-text, #141414);
+  --mw-context-menu-muted: var(--mw-color-text-muted, #595959);
+  --mw-context-menu-hover: var(--mw-color-surface-subtle, #f5f5f5);
+  --mw-context-menu-active: color-mix(in srgb, var(--mw-color-text) 10%, transparent);
+  --mw-context-menu-focus: var(--mw-color-focus, #2f31fc);
+  --mw-context-menu-radius: 10px;
+  --mw-context-menu-item-radius: 6px;
+
+  box-sizing: border-box;
+  width: var(--mw-context-menu-width);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  border: 0;
+  border-radius: var(--mw-context-menu-radius);
+  background: var(--mw-context-menu-surface);
+  box-shadow: inset 0 0 0 0.5px var(--mw-context-menu-border), 0 4px 16px rgb(0 0 0 / 8%);
+  color: var(--mw-context-menu-text);
+  font-family: var(--mw-font-primary, inherit);
+}
+
+.mw-context-menu__item {
+  appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--mw-context-menu-item-radius);
+  background: transparent;
+  color: var(--mw-context-menu-text);
+  cursor: pointer;
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  letter-spacing: -0.36px;
+  text-align: left;
+}
+
+.mw-context-menu__item:hover:not(:disabled),
+.mw-context-menu__item:focus-visible {
+  background: var(--mw-context-menu-hover);
+}
+
+.mw-context-menu__item:active:not(:disabled) {
+  background: var(--mw-context-menu-active);
+}
+
+.mw-context-menu__item:focus-visible {
+  outline: 2px solid var(--mw-context-menu-focus);
+  outline-offset: 1px;
+}
+
+.mw-context-menu__item:disabled,
+.mw-context-menu__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.mw-context-menu__icon {
+  width: 12px;
+  height: 12px;
+  display: inline-flex;
+  flex: 0 0 12px;
+  align-items: center;
+  justify-content: center;
+  color: var(--mw-context-menu-muted);
+}
+
+.mw-context-menu__icon svg {
+  width: 12px;
+  height: 12px;
+}
+
+.mw-context-menu__label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mw-context-menu__divider {
+  height: 7px;
+  display: flex;
+  align-items: center;
+  padding: 3px 0;
+  box-sizing: border-box;
+}
+
+.mw-context-menu__divider::before {
+  content: "";
+  width: 100%;
+  height: 1px;
+  background: var(--mw-context-menu-divider);
+}
+
+.mw-theme--dark .mw-context-menu {
+  --mw-context-menu-surface: var(--mw-color-surface-elevated, #2b2b2b);
+  --mw-context-menu-border: color-mix(in srgb, var(--mw-color-text) 20%, transparent);
+  --mw-context-menu-divider: color-mix(in srgb, var(--mw-color-text) 20%, transparent);
+  --mw-context-menu-hover: color-mix(in srgb, var(--mw-color-background) 10%, transparent);
+  --mw-context-menu-active: color-mix(in srgb, var(--mw-color-background) 18%, transparent);
+}

package/src/firstEdition/date-picker.css

@@ -1,19 +1,16 @@
 .mw-date-picker {
-  --mw-date-picker-surface: var(--mw-color-surface, #f8f8f8);
-  --mw-date-picker-page-surface: var(--mw-color-page, #f5f5f5);
+  --mw-date-picker-surface: var(--mw-color-surface-primary, #ffffff);
+  --mw-date-picker-page-surface: var(--mw-color-surface-subtle, #f5f5f5);
   --mw-date-picker-text: var(--mw-color-text, #141414);
   --mw-date-picker-muted: var(--mw-color-text-muted, #595959);
   --mw-date-picker-placeholder: var(--mw-color-text-subtle, #595959);
   --mw-date-picker-icon-muted: var(--mw-color-icon-muted, #a3a3a3);
   --mw-date-picker-border: var(--mw-color-border-subtle, #d8d8d8);
   --mw-date-picker-divider: var(--mw-color-border, #d8d8d8);
-  --mw-date-picker-hover: var(--mw-color-surface-muted, #f5f5f5);
-  --mw-date-picker-accent: var(--mw-color-primary-base, var(--mw-color-accent, #2f31fc));
-  --mw-date-picker-accent-text: var(--mw-color-on-primary, #ffffff);
-  --mw-date-picker-range: var(
-    --mw-color-primary-subtle,
-    color-mix(in srgb, var(--mw-date-picker-accent) 7%, #ffffff)
-  );
+  --mw-date-picker-hover: var(--mw-color-surface-subtle, #f5f5f5);
+  --mw-date-picker-accent: var(--mw-color-primary-base, #2f31fc);
+  --mw-date-picker-accent-text: var(--mw-color-primary-label, #ffffff);
+  --mw-date-picker-range: var(--mw-color-surface-brand, #eeeeff);
   --mw-date-picker-radius: var(--mw-radius-lg, 0.875rem);
   --mw-date-picker-day-radius: var(--mw-radius-sm, 0.375rem);
 

package/src/firstEdition/dialog.css

@@ -3,12 +3,13 @@
   --mw-dialog-border: var(--mw-color-border-subtle, #d8d8d8);
   --mw-dialog-divider: var(--mw-color-border-subtle, #00000033);
   --mw-dialog-title: var(--mw-color-text, #141414);
+  --mw-dialog-body: var(--mw-color-text-muted, #595959);
   --mw-dialog-description: color-mix(
     in srgb,
     var(--mw-color-text, #141414) 65%,
     var(--mw-color-background, #ffffff)
   );
-  --mw-dialog-radius: calc(var(--mw-ui-radius, 4px) * 3);
+  --mw-dialog-radius: min(calc(var(--mw-ui-radius, 4px) * 3), 24px);
   --mw-dialog-close-radius: calc(var(--mw-ui-radius, 4px) * 2);
   --mw-dialog-width: 560px;
 
@@ -18,9 +19,10 @@
   flex-direction: column;
   overflow: auto;
   box-sizing: border-box;
-  border: 1px solid var(--mw-dialog-border);
+  border: 0;
   border-radius: var(--mw-dialog-radius);
   background: var(--mw-dialog-surface);
+  box-shadow: inset 0 0 0 1px var(--mw-dialog-border);
 }
 
 .mw-dialog:focus-visible {
@@ -57,10 +59,10 @@
   margin: 0;
   color: var(--mw-dialog-title);
   font-family: var(--mw-font-primary, inherit);
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 26px;
-  letter-spacing: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 18px;
+  letter-spacing: -0.48px;
 }
 
 .mw-dialog__close {
@@ -70,10 +72,11 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: none;
-  border-radius: var(--mw-dialog-close-radius);
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, var(--mw-dialog-title) 15%, transparent);
+  border-radius: 4px;
   background: transparent;
-  color: var(--mw-dialog-description);
+  color: var(--mw-dialog-title);
   cursor: pointer;
 }
 
@@ -81,6 +84,10 @@
   background: color-mix(in srgb, currentColor 8%, transparent);
 }
 
+.mw-dialog__close:active {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
 .mw-dialog__close:focus-visible {
   outline: 2px solid var(--mw-color-focus, #2f31fc);
   outline-offset: 2px;
@@ -104,7 +111,7 @@
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
-  letter-spacing: 0;
+  letter-spacing: -0.48px;
 }
 
 .mw-dialog__footer {

package/src/firstEdition/drawer.css

@@ -0,0 +1,258 @@
+.mw-drawer {
+  --mw-drawer-width-small: 320px;
+  --mw-drawer-width-medium: 400px;
+  --mw-drawer-width-large: 560px;
+  --mw-drawer-width: var(--mw-drawer-width-medium);
+  --mw-drawer-surface: var(--mw-color-surface, var(--mw-color-background));
+  --mw-drawer-border: var(--mw-color-border-subtle, var(--mw-color-border));
+  --mw-drawer-divider: var(--mw-color-border-subtle, var(--mw-color-border));
+  --mw-drawer-title: var(--mw-color-text);
+  --mw-drawer-text: color-mix(in srgb, var(--mw-color-text) 68%, var(--mw-color-background));
+  --mw-drawer-muted: var(--mw-color-text-muted, var(--mw-drawer-text));
+  --mw-drawer-radius: min(calc(var(--mw-ui-radius, 4px) * 3), 24px);
+  --mw-drawer-shadow: 0 24px 60px color-mix(in srgb, var(--mw-color-text) 18%, transparent);
+  --mw-drawer-scrim: color-mix(in srgb, var(--mw-color-text) 42%, transparent);
+  --mw-drawer-motion-duration: 180ms;
+  --mw-drawer-motion-easing: cubic-bezier(0.22, 0.72, 0.2, 1);
+
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  pointer-events: none;
+  color: var(--mw-drawer-text);
+  font-family: var(--mw-font-primary, inherit);
+}
+
+.mw-drawer--left {
+  justify-content: flex-start;
+}
+
+.mw-drawer--right {
+  justify-content: flex-end;
+}
+
+.mw-drawer--small {
+  --mw-drawer-width: var(--mw-drawer-width-small);
+}
+
+.mw-drawer--medium {
+  --mw-drawer-width: var(--mw-drawer-width-medium);
+}
+
+.mw-drawer--large {
+  --mw-drawer-width: var(--mw-drawer-width-large);
+}
+
+.mw-drawer__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--mw-drawer-scrim);
+  pointer-events: auto;
+  animation: mw-drawer-scrim-in var(--mw-drawer-motion-duration) var(--mw-drawer-motion-easing);
+}
+
+.mw-drawer__panel {
+  position: relative;
+  z-index: 1;
+  width: min(100vw, var(--mw-drawer-width));
+  max-width: 100vw;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1px solid var(--mw-drawer-border);
+  background: var(--mw-drawer-surface);
+  box-shadow: var(--mw-drawer-shadow);
+  color: var(--mw-drawer-text);
+  pointer-events: auto;
+  will-change: transform;
+}
+
+.mw-drawer--left .mw-drawer__panel {
+  border-left: none;
+  border-radius: 0 var(--mw-drawer-radius) var(--mw-drawer-radius) 0;
+  animation: mw-drawer-slide-in-left var(--mw-drawer-motion-duration) var(--mw-drawer-motion-easing);
+}
+
+.mw-drawer--right .mw-drawer__panel {
+  border-right: none;
+  border-radius: var(--mw-drawer-radius) 0 0 var(--mw-drawer-radius);
+  animation: mw-drawer-slide-in-right var(--mw-drawer-motion-duration)
+    var(--mw-drawer-motion-easing);
+}
+
+.mw-drawer__panel:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: -4px;
+}
+
+.mw-drawer__header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--mw-spacing-sp-8);
+  padding: var(--mw-spacing-sp-16) var(--mw-spacing-sp-16) var(--mw-spacing-sp-16)
+    var(--mw-spacing-sp-24);
+  background: var(--mw-drawer-surface);
+}
+
+.mw-drawer__heading-group,
+.mw-drawer__spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.mw-drawer__title {
+  margin: 0;
+  color: var(--mw-drawer-title);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: 0;
+}
+
+.mw-drawer__close {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, var(--mw-drawer-title) 15%, transparent);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--mw-drawer-title);
+  cursor: pointer;
+}
+
+.mw-drawer__close:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.mw-drawer__close:active {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.mw-drawer__close:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+.mw-drawer__header-divider,
+.mw-drawer__footer-divider {
+  height: 1px;
+  flex: 0 0 auto;
+  background: var(--mw-drawer-divider);
+}
+
+.mw-drawer__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--mw-spacing-sp-24);
+  overflow: auto;
+}
+
+.mw-drawer__description,
+.mw-drawer__content .mw-p {
+  margin: 0;
+  color: var(--mw-drawer-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
+.mw-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mw-spacing-sp-8);
+  padding: var(--mw-spacing-sp-16) var(--mw-spacing-sp-24);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .mw-drawer {
+    --mw-drawer-width-small: 100vw;
+    --mw-drawer-width-medium: 100vw;
+    --mw-drawer-width-large: 100vw;
+  }
+
+  .mw-drawer__panel {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .mw-drawer--left .mw-drawer__panel,
+  .mw-drawer--right .mw-drawer__panel {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .mw-drawer__header {
+    padding: var(--mw-spacing-sp-16);
+  }
+
+  .mw-drawer__content {
+    padding: var(--mw-spacing-sp-16);
+  }
+
+  .mw-drawer__footer {
+    padding: var(--mw-spacing-sp-16);
+    justify-content: stretch;
+  }
+
+  .mw-drawer__footer > * {
+    flex: 1 1 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-drawer__scrim,
+  .mw-drawer__panel {
+    animation: none;
+    will-change: auto;
+  }
+}
+
+@keyframes mw-drawer-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes mw-drawer-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes mw-drawer-scrim-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/firstEdition/index.ts

@@ -2,6 +2,16 @@ import type { ThemeInput } from "@marwes-ui/core"
 import "@fontsource/instrument-sans/400.css"
 import "@fontsource/instrument-sans/500.css"
 import "@fontsource/instrument-sans/600.css"
+import "@fontsource/instrument-sans/700.css"
+
+export {
+  cyberPreset,
+  editorialPreset,
+  marwesPreset,
+  nordicPreset,
+  sunsetPreset,
+  themePresets,
+} from "./presets"
 
 // Explicit ThemeInput for consumers that still want to import the preset object.
 // MarwesProvider uses the same first edition baseline when no theme is provided.

package/src/firstEdition/input-otp.css

@@ -7,9 +7,12 @@
   --mw-input-otp-label-color: var(--mw-color-text);
   --mw-input-otp-helper-color: var(--mw-color-text-muted);
   --mw-input-otp-cell-border: var(--mw-color-border);
-  --mw-input-otp-cell-surface: var(--mw-color-surface);
+  --mw-input-otp-cell-surface: var(--mw-color-surface-primary);
   --mw-input-otp-cell-text: var(--mw-color-text-muted);
   --mw-input-otp-cell-filled-text: var(--mw-color-text);
+  --mw-input-otp-cell-size: 40px;
+  --mw-input-otp-cell-min-size: 32px;
+  --mw-input-otp-cell-gap: var(--mw-spacing-sp-8);
 
   display: grid;
   gap: var(--mw-spacing-sp-4);
@@ -20,23 +23,28 @@
   color: var(--mw-input-otp-label-color);
 }
 
-.mw-input-otp__label .mw-p {
+.mw-input-otp__label .mw-text {
   color: var(--mw-input-otp-label-color);
 }
 
 .mw-input-otp__cells {
   position: relative;
   display: grid;
-  grid-template-columns: repeat(var(--mw-input-otp-cell-count, 6), minmax(0, 40px));
-  gap: var(--mw-spacing-sp-8);
+  grid-template-columns: repeat(
+      var(--mw-input-otp-cell-count, 6),
+      minmax(var(--mw-input-otp-cell-min-size), var(--mw-input-otp-cell-size))
+    );
+  gap: var(--mw-input-otp-cell-gap);
 }
 
 .mw-input-otp__cell {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 100%;
+  min-height: var(--mw-input-otp-cell-min-size);
+  aspect-ratio: 1;
+  box-sizing: border-box;
   border: 1px solid var(--mw-input-otp-cell-border);
   border-radius: var(--mw-ui-radius, 4px);
   background: var(--mw-input-otp-cell-surface);
@@ -79,8 +87,8 @@
   color: var(--mw-input-otp-helper-color);
 }
 
-.mw-input-otp__helper .mw-p,
-.mw-input-otp__error .mw-p {
+.mw-input-otp__helper .mw-text,
+.mw-input-otp__error .mw-text {
   color: var(--mw-input-otp-helper-color);
 }
 

package/src/firstEdition/input.css

@@ -6,15 +6,18 @@
  */
 
 .mw-input {
+  box-sizing: border-box;
   height: var(--mw-density-height);
   padding: 0 var(--mw-density-padding-x);
   border-radius: var(--mw-ui-radius);
-  border: 1px solid var(--mw-color-border);
-  background: var(--mw-color-surface);
+  border: 1px solid var(--mw-color-border-low);
+  background: var(--mw-color-surface-primary);
   color: var(--mw-color-text);
   font-family: var(--mw-font-primary, inherit);
   font-size: var(--mw-density-font-size);
-  width: 260px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   transition: border-color 150ms ease, outline 150ms ease;
 }
 
@@ -69,5 +72,5 @@
 
 /* Dark mode input styles */
 .mw-theme--dark .mw-input {
-  background: var(--mw-color-surface);
+  background: var(--mw-color-surface-primary);
 }

package/src/firstEdition/molecules/accordion-field.css

@@ -20,26 +20,30 @@
 
 .mw-accordion-field__items {
   display: grid;
-  gap: var(--mw-density-gap, 4px);
+  gap: var(--mw-density-gap, 8px);
 }
 
 .mw-accordion-field__description {
-  font-size: 0.875em;
   color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-accordion-field__error {
-  font-size: 0.875em;
   color: var(--mw-color-danger-base, #d90429);
 }
 
+.mw-accordion-field__label .mw-text,
+.mw-accordion-field__description .mw-text,
+.mw-accordion-field__error .mw-text {
+  color: inherit;
+}
+
 /* State modifiers */
 .mw-accordion-field--disabled {
   color: var(--mw-color-text-disabled, #595959);
   cursor: not-allowed;
 }
 
-.mw-accordion-field--invalid .mw-accordion-field__label .mw-p,
-.mw-accordion-field--invalid .mw-accordion-field__error .mw-p {
+.mw-accordion-field--invalid .mw-accordion-field__label .mw-text,
+.mw-accordion-field--invalid .mw-accordion-field__error .mw-text {
   color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/checkbox-field.css

@@ -16,24 +16,16 @@
 }
 
 .mw-checkbox-field__description {
-  opacity: 0.75;
   margin-left: calc(
     var(--mw-density-checkbox-size) +
     var(--mw-spacing-sp-8) +
     var(--mw-density-gap) /* checkbox size + margin + spacing to textfield */
   );
-  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-text-muted, #595959);
 }
 
-@supports selector(:has(*)) {
-  .mw-checkbox-field__row:has(.mw-checkbox:focus-visible) {
-    outline: 2px solid var(--mw-color-focus);
-    outline-offset: 2px;
-  }
-
-  .mw-checkbox-field__row:has(.mw-checkbox:focus-visible) .mw-checkbox {
-    outline: none;
-  }
+.mw-checkbox-field__description .mw-text {
+  color: inherit;
 }
 
 .mw-checkbox-field__error {
@@ -42,12 +34,20 @@
     var(--mw-spacing-sp-8) +
     var(--mw-density-gap) /* checkbox size + margin + spacing to textfield */
   );
-  font-size: var(--mw-density-font-size-sm);
   color: var(--mw-color-danger-base, #d90429);
 }
 
+.mw-checkbox-field__error .mw-text {
+  color: inherit;
+}
+
 /* Optional state hooks */
 .mw-checkbox-field--disabled .mw-checkbox-field__label {
   cursor: not-allowed;
   opacity: 0.7;
 }
+
+.mw-checkbox-field--invalid .mw-checkbox-field__label .mw-text,
+.mw-checkbox-field--invalid .mw-checkbox-field__error .mw-text {
+  color: var(--mw-color-danger-base, #d90429);
+}