@marwes-ui/presets 0.0.3 → 1.0.0

package/src/firstEdition/toast.css

@@ -0,0 +1,318 @@
+/*
+ * Toast Component Styles
+ * Figma: 1365:12526 (light) / 2276:56938 (dark)
+ *
+ * Toast supports three emphasis levels:
+ *   subtle  — quiet, low-contrast surface
+ *   outline — default emphasis
+ *   rich    — high-emphasis, use sparingly
+ *
+ * Supported intent mappings:
+ *   neutral, info, success, warning, error, brand
+ *
+ * Purpose toasts map semantic intents automatically in the React/Vue adapters.
+ * Raw <Toast> can opt into the neutral/brand primitives with data-intent.
+ */
+
+.mw-toast {
+  --mw-toast-surface: var(--mw-color-surface-elevated);
+  --mw-toast-border: var(--mw-color-border);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
+
+  display: flex;
+  align-items: center;
+  gap: var(--mw-spacing-sp-8);
+  min-width: 288px;
+  max-width: 480px;
+  padding: var(--mw-spacing-sp-16);
+  border: 1px solid var(--mw-toast-border);
+  border-radius: var(--mw-ui-radius, 8px);
+  background: var(--mw-toast-surface);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+
+.mw-toast__icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--mw-toast-icon);
+}
+
+.mw-toast__icon svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.5;
+}
+
+.mw-toast__body {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: var(--mw-spacing-sp-8);
+}
+
+.mw-toast__text {
+  min-width: 0;
+  flex: 1;
+  color: var(--mw-toast-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size, 16px);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+.mw-toast__action {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--mw-toast-action);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size, 16px);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+}
+
+.mw-toast__action-button {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: inherit;
+}
+
+.mw-toast__action-button:focus-visible,
+.mw-toast__action :where(a, button):focus-visible {
+  outline: 2px solid var(--mw-color-focus, #2684ff);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.mw-toast__dismiss {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--mw-toast-icon);
+  cursor: pointer;
+}
+
+.mw-toast__dismiss:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.mw-toast__dismiss::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+
+/* --------------------------------------------
+   Light mode
+   -------------------------------------------- */
+
+.mw-toast--subtle {
+  --mw-toast-surface: var(--mw-color-surface-elevated);
+  --mw-toast-border: var(--mw-color-border);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
+}
+
+.mw-toast--subtle[data-intent="error"],
+.mw-toast--subtle[data-intent="brand"] {
+  --mw-toast-icon: var(--mw-color-text);
+}
+
+.mw-toast--outline {
+  --mw-toast-surface: var(--mw-color-surface-elevated);
+  --mw-toast-border: var(--mw-color-primary-base);
+  --mw-toast-icon: var(--mw-color-primary-base);
+  --mw-toast-text: var(--mw-color-primary-base);
+  --mw-toast-action: var(--mw-color-primary-base);
+}
+
+.mw-toast--outline[data-intent="neutral"] {
+  --mw-toast-border: var(--mw-color-border);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
+}
+
+.mw-toast--outline[data-intent="success"] {
+  --mw-toast-border: var(--mw-color-success-base);
+  --mw-toast-icon: var(--mw-color-success-base);
+  --mw-toast-text: var(--mw-color-success-base);
+  --mw-toast-action: var(--mw-color-success-base);
+}
+
+.mw-toast--outline[data-intent="warning"] {
+  --mw-toast-border: var(--mw-color-warning-base);
+  --mw-toast-icon: var(--mw-color-warning-base);
+  --mw-toast-text: var(--mw-color-warning-base);
+  --mw-toast-action: var(--mw-color-warning-base);
+}
+
+.mw-toast--outline[data-intent="error"] {
+  --mw-toast-border: var(--mw-color-danger-base);
+  --mw-toast-icon: var(--mw-color-danger-base);
+  --mw-toast-text: var(--mw-color-danger-base);
+  --mw-toast-action: var(--mw-color-danger-base);
+}
+
+.mw-toast--rich {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-primary-base) 12%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-primary-base);
+  --mw-toast-icon: var(--mw-color-primary-base);
+  --mw-toast-text: var(--mw-color-primary-base);
+  --mw-toast-action: var(--mw-color-primary-base);
+}
+
+.mw-toast--rich[data-intent="neutral"] {
+  --mw-toast-surface: var(--mw-color-surface-subtle);
+  --mw-toast-border: var(--mw-color-border-subtle);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text-muted);
+}
+
+.mw-toast--rich[data-intent="success"] {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-success-base) 12%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-success-base);
+  --mw-toast-icon: var(--mw-color-success-base);
+  --mw-toast-text: var(--mw-color-success-base);
+  --mw-toast-action: var(--mw-color-success-base);
+}
+
+.mw-toast--rich[data-intent="warning"] {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-warning-base) 16%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-warning-base);
+  --mw-toast-icon: var(--mw-color-warning-base);
+  --mw-toast-text: var(--mw-color-warning-base);
+  --mw-toast-action: var(--mw-color-warning-base);
+}
+
+.mw-toast--rich[data-intent="error"] {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-danger-base) 12%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-danger-base);
+  --mw-toast-icon: var(--mw-color-danger-base);
+  --mw-toast-text: var(--mw-color-danger-base);
+  --mw-toast-action: var(--mw-color-danger-base);
+}
+
+/* --------------------------------------------
+   Dark mode
+   -------------------------------------------- */
+
+.mw-theme--dark .mw-toast--subtle {
+  --mw-toast-surface: var(--mw-color-surface-elevated);
+  --mw-toast-border: var(--mw-color-border);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
+}
+
+.mw-theme--dark .mw-toast--outline {
+  --mw-toast-surface: var(--mw-color-surface-elevated);
+  --mw-toast-border: var(--mw-color-primary-base);
+  --mw-toast-icon: var(--mw-color-primary-base);
+  --mw-toast-text: var(--mw-color-primary-base);
+  --mw-toast-action: var(--mw-color-primary-base);
+}
+
+.mw-theme--dark .mw-toast--outline[data-intent="neutral"] {
+  --mw-toast-border: var(--mw-color-border);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text);
+}
+
+.mw-theme--dark .mw-toast--outline[data-intent="success"] {
+  --mw-toast-border: var(--mw-color-success-base);
+  --mw-toast-icon: var(--mw-color-success-base);
+  --mw-toast-text: var(--mw-color-success-base);
+  --mw-toast-action: var(--mw-color-success-base);
+}
+
+.mw-theme--dark .mw-toast--outline[data-intent="warning"] {
+  --mw-toast-border: var(--mw-color-warning-base);
+  --mw-toast-icon: var(--mw-color-warning-base);
+  --mw-toast-text: var(--mw-color-warning-base);
+  --mw-toast-action: var(--mw-color-warning-base);
+}
+
+.mw-theme--dark .mw-toast--outline[data-intent="error"] {
+  --mw-toast-border: var(--mw-color-danger-base);
+  --mw-toast-icon: var(--mw-color-danger-base);
+  --mw-toast-text: var(--mw-color-danger-base);
+  --mw-toast-action: var(--mw-color-danger-base);
+}
+
+.mw-theme--dark .mw-toast--rich {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-primary-base) 18%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-primary-base);
+  --mw-toast-icon: var(--mw-color-primary-base);
+  --mw-toast-text: var(--mw-color-primary-base);
+  --mw-toast-action: var(--mw-color-primary-base);
+}
+
+.mw-theme--dark .mw-toast--rich[data-intent="neutral"] {
+  --mw-toast-surface: var(--mw-color-surface-subtle);
+  --mw-toast-border: var(--mw-color-border-subtle);
+  --mw-toast-icon: var(--mw-color-text-muted);
+  --mw-toast-text: var(--mw-color-text);
+  --mw-toast-action: var(--mw-color-text-muted);
+}
+
+.mw-theme--dark .mw-toast--rich[data-intent="success"] {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-success-base) 18%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-success-base);
+  --mw-toast-icon: var(--mw-color-success-base);
+  --mw-toast-text: var(--mw-color-success-base);
+  --mw-toast-action: var(--mw-color-success-base);
+}
+
+.mw-theme--dark .mw-toast--rich[data-intent="warning"] {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-warning-base) 20%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-warning-base);
+  --mw-toast-icon: var(--mw-color-warning-base);
+  --mw-toast-text: var(--mw-color-warning-base);
+  --mw-toast-action: var(--mw-color-warning-base);
+}
+
+.mw-theme--dark .mw-toast--rich[data-intent="error"] {
+  --mw-toast-surface: color-mix(in srgb, var(--mw-color-danger-base) 18%, var(--mw-color-surface));
+  --mw-toast-border: var(--mw-color-danger-base);
+  --mw-toast-icon: var(--mw-color-danger-base);
+  --mw-toast-text: var(--mw-color-danger-base);
+  --mw-toast-action: var(--mw-color-danger-base);
+}

package/src/firstEdition/tokens.css

@@ -0,0 +1,35 @@
+/* FirstEdition — Design Tokens
+   Static, density-independent values available across all component CSS files.
+   The theme engine (theme-css.ts) handles color, density, and typography vars.
+   These are fixed primitives that do not change with theme or density.
+*/
+
+:root,
+[data-marwes-theme] {
+  /* ── Spacing scale ──────────────────────────────────────────────────────────
+     Named after the actual pixel values to stay aligned with Figma.
+     sp-0 → 0px | sp-2 → 2px | sp-4 → 4px | sp-8 → 8px | sp-16 → 16px
+     sp-24 → 24px | sp-32 → 32px | sp-40 → 40px | sp-48 → 48px
+     sp-56 → 56px | sp-64 → 64px | sp-72 → 72px | sp-80 → 80px
+     sp-88 → 88px | sp-96 → 96px | sp-104 → 104px | sp-112 → 112px
+     sp-120 → 120px
+  */
+  --mw-spacing-sp-0: 0px;
+  --mw-spacing-sp-2: 2px;
+  --mw-spacing-sp-4: 4px;
+  --mw-spacing-sp-8: 8px;
+  --mw-spacing-sp-16: 16px;
+  --mw-spacing-sp-24: 24px;
+  --mw-spacing-sp-32: 32px;
+  --mw-spacing-sp-40: 40px;
+  --mw-spacing-sp-48: 48px;
+  --mw-spacing-sp-56: 56px;
+  --mw-spacing-sp-64: 64px;
+  --mw-spacing-sp-72: 72px;
+  --mw-spacing-sp-80: 80px;
+  --mw-spacing-sp-88: 88px;
+  --mw-spacing-sp-96: 96px;
+  --mw-spacing-sp-104: 104px;
+  --mw-spacing-sp-112: 112px;
+  --mw-spacing-sp-120: 120px;
+}

package/src/firstEdition/tooltip.css

@@ -0,0 +1,112 @@
+/*
+ * Tooltip Component Styles
+ * Figma: 1364:7739 (Tooltip) / 1574:21100 (Tooltip group)
+ */
+
+.mw-tooltip {
+  display: inline-flex;
+  max-width: 240px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  border-radius: var(--mw-ui-radius, 4px);
+  background: var(--mw-color-surface-inverted, #141414);
+  color: var(--mw-color-text-inverted, #ffffff);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  text-align: center;
+  transform-origin: bottom center;
+}
+
+.mw-tooltip:not([data-state]),
+.mw-tooltip[data-state="open"] {
+  animation: mw-tooltip-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.mw-tooltip[data-state="closed"] {
+  pointer-events: none;
+  animation: mw-tooltip-exit 160ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.mw-tooltip-group {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mw-spacing-sp-4);
+}
+
+.mw-tooltip-group__trigger {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--mw-color-text-muted);
+  cursor: help;
+  transition: color 120ms ease, transform 120ms ease;
+}
+
+.mw-tooltip-group__trigger:hover,
+.mw-tooltip-group__trigger:focus-visible {
+  transform: translateY(-1px);
+}
+
+.mw-tooltip-group__trigger:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.mw-tooltip-group__trigger svg {
+  width: 16px;
+  height: 16px;
+}
+
+@keyframes mw-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes mw-tooltip-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(2px) scale(0.99);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-tooltip {
+    animation: none;
+  }
+
+  .mw-tooltip-group__trigger {
+    transition: none;
+  }
+
+  .mw-tooltip-group__trigger:hover,
+  .mw-tooltip-group__trigger:focus-visible {
+    transform: none;
+  }
+}
+
+.mw-theme--dark .mw-tooltip-group__trigger {
+  color: var(--mw-color-text-muted);
+}

package/src/firstEdition/typography.css

@@ -0,0 +1,33 @@
+/* ============================================
+   Typography Component Styles - firstEdition
+   ============================================ */
+
+/* BASE HEADING */
+.mw-heading {
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-heading-size);
+  line-height: var(--mw-heading-line-height);
+  font-weight: var(--mw-heading-weight);
+  letter-spacing: var(--mw-heading-letter-spacing);
+  color: var(--mw-color-text);
+  margin: 0;
+}
+
+/* Heading sizes are controlled via CSS variables set by the recipe */
+/* .mw-heading--h1 uses 32/38, weight 700, letter-spacing -0.96px */
+/* .mw-heading--h2 uses 24/30, weight 500, letter-spacing -0.72px */
+/* .mw-heading--h3 uses 20/26, weight 500, letter-spacing -0.6px */
+
+/* BASE PARAGRAPH */
+.mw-p {
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-p-size);
+  line-height: var(--mw-p-line-height);
+  color: var(--mw-color-text);
+  margin: 0;
+}
+
+/* Paragraph sizes are controlled via CSS variables set by the recipe */
+/* .mw-p--sm uses --mw-p-size: 14px, --mw-p-line-height: 1.5 */
+/* .mw-p--md uses --mw-p-size: 16px, --mw-p-line-height: 1.6 */
+/* .mw-p--lg uses --mw-p-size: 18px, --mw-p-line-height: 1.7 */

package/dist/chunk-UJIVT75P.js

@@ -1,26 +0,0 @@
-import '@fontsource/instrument-sans/400.css';
-import '@fontsource/instrument-sans/500.css';
-import '@fontsource/instrument-sans/600.css';
-
-// src/firstEdition/index.ts
-var firstEdition = {
-  name: "firstEdition",
-  theme: {
-    ui: {
-      radius: 4,
-      density: "comfortable",
-      variant: "solid"
-    },
-    font: {
-      primary: "Instrument Sans, system-ui, -apple-system, sans-serif"
-    },
-    icon: {
-      size: "sm",
-      strokeWidth: "sm"
-    }
-  }
-};
-
-export { firstEdition };
-//# sourceMappingURL=chunk-UJIVT75P.js.map
-//# sourceMappingURL=chunk-UJIVT75P.js.map

package/dist/chunk-UJIVT75P.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/firstEdition/index.ts"],"names":[],"mappings":";;;;;AAKO,IAAM,YAAA,GAAuB;AAAA,EAClC,IAAA,EAAM,cAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,EAAA,EAAI;AAAA,MACF,MAAA,EAAQ,CAAA;AAAA,MACR,OAAA,EAAS,aAAA;AAAA,MACT,OAAA,EAAS;AAAA,KACX;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS;AAAA,KACX;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,IAAA;AAAA,MACN,WAAA,EAAa;AAAA;AACf;AAEJ","file":"chunk-UJIVT75P.js","sourcesContent":["import type { Preset } from \"@marwes-ui/core\"\nimport \"@fontsource/instrument-sans/400.css\"\nimport \"@fontsource/instrument-sans/500.css\"\nimport \"@fontsource/instrument-sans/600.css\"\n\nexport const firstEdition: Preset = {\n  name: \"firstEdition\",\n  theme: {\n    ui: {\n      radius: 4,\n      density: \"comfortable\",\n      variant: \"solid\",\n    },\n    font: {\n      primary: \"Instrument Sans, system-ui, -apple-system, sans-serif\",\n    },\n    icon: {\n      size: \"sm\",\n      strokeWidth: \"sm\",\n    },\n  },\n}\n"]}