@mailwoman/react 9.3.0 → 10.0.0

package/tokens/index.css

@@ -0,0 +1,116 @@
+:root {
+	--brand-magenta: #ff00b0;
+	--brand-blue: #1a00ff;
+	--brand-navy: #00093a;
+	--brand-amber: hsl(39deg 100% 50%);
+	--brand-teal: hsl(97.78deg 100% 50%);
+	--neutral-0: oklch(100% 0 264);
+	--neutral-50: oklch(97% 0.004 264);
+	--neutral-100: oklch(93% 0.006 264);
+	--neutral-200: oklch(87% 0.01 264);
+	--neutral-300: oklch(78% 0.015 264);
+	--neutral-400: oklch(66% 0.02 264);
+	--neutral-500: oklch(55% 0.024 264);
+	--neutral-600: oklch(45% 0.026 264);
+	--neutral-700: oklch(35% 0.028 264);
+	--neutral-800: oklch(26% 0.028 264);
+	--neutral-900: oklch(18% 0.026 264);
+	--neutral-950: oklch(12% 0.022 264);
+	--neutral-1000: oklch(0% 0 264);
+	--success-base: oklch(62% 0.15 150);
+	--warning-base: oklch(75% 0.15 75);
+	--danger-base: oklch(58% 0.2 25);
+	--info-base: oklch(65% 0.13 230);
+	--font-family-display: "Iosevka Nexus Web", "Iosevka", system-ui, sans-serif;
+	--font-family-text: "Iosevka Nexus Web", "Iosevka", system-ui, sans-serif;
+	--font-family-number: "Iosevka Nexus Web", "Iosevka", system-ui, sans-serif;
+	--font-family-code: "Iosevka Nexus Mono Web", "Iosevka", ui-monospace, "SF Mono", monospace;
+	--font-family-glyph: "Iosevka Nexus Mono Web", "Iosevka", ui-monospace, monospace;
+	--font-family-map: "Noto Sans Regular";
+	--font-size-display: 2.125rem;
+	--font-size-title: 1.375rem;
+	--font-size-headline: 1.0625rem;
+	--font-size-body: 1.0625rem;
+	--font-size-callout: 1rem;
+	--font-size-subheadline: 0.9375rem;
+	--font-size-footnote: 0.8125rem;
+	--font-size-caption: 0.75rem;
+	--line-height-tight: 1.2;
+	--line-height-body: 1.45;
+	--font-weight-regular: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--radius-control: 0.5rem;
+	--radius-panel: 0.875rem;
+	--radius-sheet: 0.875rem;
+	--radius-pill: 999px;
+	--duration-fast: 120ms;
+	--duration-standard: 220ms;
+	--duration-sheet: 320ms;
+	--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+	--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+	--safe-area-top: env(safe-area-inset-top, 0px);
+	--safe-area-right: env(safe-area-inset-right, 0px);
+	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
+	--safe-area-left: env(safe-area-inset-left, 0px);
+	--map-footer-height: 1.9rem;
+	--color-background-canvas: var(--neutral-50);
+	--color-background-raised: var(--neutral-0);
+	--color-background-sunken: var(--neutral-100);
+	--color-text-primary: var(--neutral-900);
+	--color-text-secondary: var(--neutral-600);
+	--color-text-tertiary: var(--neutral-500);
+	--color-separator: var(--neutral-200);
+	--color-accent: var(--brand-magenta);
+	--color-accent-contrast: var(--neutral-0);
+	--color-selection: var(--brand-magenta);
+	--control-background: var(--neutral-100);
+	--control-background-pressed: var(--neutral-200);
+	--control-foreground: var(--neutral-900);
+	--control-border: var(--neutral-300);
+	--color-state-success: var(--success-base);
+	--color-state-success-background: oklch(62% 0.15 150 / 0.14);
+	--color-state-warning: var(--warning-base);
+	--color-state-warning-background: oklch(75% 0.15 75 / 0.16);
+	--color-state-danger: var(--danger-base);
+	--color-state-danger-background: oklch(58% 0.2 25 / 0.14);
+	--color-state-info: var(--info-base);
+	--color-state-info-background: oklch(65% 0.13 230 / 0.14);
+	--color-accent-background: oklch(65% 0.29 340 / 0.14);
+	--material-glass-background: oklch(100% 0 264 / 0.72);
+	--material-glass-border: oklch(0% 0 264 / 0.1);
+	--material-glass-blur: 24px;
+	--material-glass-saturation: 180%;
+	--material-glass-shadow: 0 4px 28px oklch(0% 0 264 / 0.14);
+	--material-glass-highlight: oklch(100% 0 264 / 0.5);
+	--material-glass-fallback-background: var(--neutral-0);
+}
+
+[data-theme="dark"] {
+	--color-background-canvas: var(--neutral-950);
+	--color-background-raised: var(--neutral-900);
+	--color-background-sunken: var(--neutral-1000);
+	--color-text-primary: var(--neutral-100);
+	--color-text-secondary: var(--neutral-400);
+	--color-text-tertiary: var(--neutral-500);
+	--color-separator: oklch(100% 0 264 / 0.12);
+	--color-accent-contrast: var(--neutral-1000);
+	--control-background: oklch(100% 0 264 / 0.08);
+	--control-background-pressed: oklch(100% 0 264 / 0.14);
+	--control-foreground: var(--neutral-100);
+	--control-border: oklch(100% 0 264 / 0.16);
+	--color-state-success: oklch(76% 0.16 150);
+	--color-state-success-background: oklch(76% 0.16 150 / 0.18);
+	--color-state-warning: oklch(84% 0.15 75);
+	--color-state-warning-background: oklch(84% 0.15 75 / 0.18);
+	--color-state-danger: oklch(70% 0.19 25);
+	--color-state-danger-background: oklch(70% 0.19 25 / 0.18);
+	--color-state-info: oklch(78% 0.12 230);
+	--color-state-info-background: oklch(78% 0.12 230 / 0.18);
+	--color-accent-background: oklch(65% 0.29 340 / 0.18);
+	--material-glass-background: oklch(18% 0.026 264 / 0.86);
+	--material-glass-border: oklch(100% 0 264 / 0.14);
+	--material-glass-shadow: 0 4px 28px oklch(0% 0 264 / 0.45);
+	--material-glass-highlight: oklch(100% 0 264 / 0.12);
+	--material-glass-fallback-background: var(--neutral-900);
+}

package/tokens/tokens.json

@@ -0,0 +1,528 @@
+{
+	"$schema": "https://design-tokens.org/schemas/2025.10/tokens.json",
+	"$extensions": {
+		"dev.styleframe": {
+			"collection": "Mailwoman"
+		}
+	},
+	"brand-magenta": {
+		"$value": {
+			"colorSpace": "srgb",
+			"components": [1, 0, 0.6901960784313725]
+		},
+		"$type": "color"
+	},
+	"brand-blue": {
+		"$value": {
+			"colorSpace": "srgb",
+			"components": [0.10196078431372549, 0, 1]
+		},
+		"$type": "color"
+	},
+	"brand-navy": {
+		"$value": {
+			"colorSpace": "srgb",
+			"components": [0, 0.03529411764705882, 0.22745098039215686]
+		},
+		"$type": "color"
+	},
+	"brand-amber": {
+		"$value": {
+			"colorSpace": "hsl",
+			"components": [39, 100, 50]
+		},
+		"$type": "color"
+	},
+	"brand-teal": {
+		"$value": {
+			"colorSpace": "hsl",
+			"components": [97.78, 100, 50]
+		},
+		"$type": "color"
+	},
+	"neutral-0": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [1, 0, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-50": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.97, 0.004, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-100": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.93, 0.006, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-200": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.87, 0.01, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-300": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.78, 0.015, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-400": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.66, 0.02, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-500": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.55, 0.024, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-600": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.45, 0.026, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-700": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.35, 0.028, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-800": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.26, 0.028, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-900": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.18, 0.026, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-950": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.12, 0.022, 264]
+		},
+		"$type": "color"
+	},
+	"neutral-1000": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0, 0, 264]
+		},
+		"$type": "color"
+	},
+	"success-base": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.62, 0.15, 150]
+		},
+		"$type": "color"
+	},
+	"warning-base": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.75, 0.15, 75]
+		},
+		"$type": "color"
+	},
+	"danger-base": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.58, 0.2, 25]
+		},
+		"$type": "color"
+	},
+	"info-base": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.65, 0.13, 230]
+		},
+		"$type": "color"
+	},
+	"font-family-display": {
+		"$value": "\"Iosevka Nexus Web\", \"Iosevka\", system-ui, sans-serif",
+		"$type": "fontFamily"
+	},
+	"font-family-text": {
+		"$value": "\"Iosevka Nexus Web\", \"Iosevka\", system-ui, sans-serif",
+		"$type": "fontFamily"
+	},
+	"font-family-number": {
+		"$value": "\"Iosevka Nexus Web\", \"Iosevka\", system-ui, sans-serif",
+		"$type": "fontFamily"
+	},
+	"font-family-code": {
+		"$value": "\"Iosevka Nexus Mono Web\", \"Iosevka\", ui-monospace, \"SF Mono\", monospace",
+		"$type": "fontFamily"
+	},
+	"font-family-glyph": {
+		"$value": "\"Iosevka Nexus Mono Web\", \"Iosevka\", ui-monospace, monospace",
+		"$type": "fontFamily"
+	},
+	"font-family-map": {
+		"$value": "\"Noto Sans Regular\"",
+		"$type": "fontFamily"
+	},
+	"font-size-display": {
+		"$value": {
+			"value": 2.125,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-title": {
+		"$value": {
+			"value": 1.375,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-headline": {
+		"$value": {
+			"value": 1.0625,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-body": {
+		"$value": {
+			"value": 1.0625,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-callout": {
+		"$value": {
+			"value": 1,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-subheadline": {
+		"$value": {
+			"value": 0.9375,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-footnote": {
+		"$value": {
+			"value": 0.8125,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"font-size-caption": {
+		"$value": {
+			"value": 0.75,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"line-height-tight": {
+		"$value": "1.2",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"line-height-body": {
+		"$value": "1.45",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"font-weight-regular": {
+		"$value": 400,
+		"$type": "fontWeight"
+	},
+	"font-weight-medium": {
+		"$value": 500,
+		"$type": "fontWeight"
+	},
+	"font-weight-semibold": {
+		"$value": 600,
+		"$type": "fontWeight"
+	},
+	"radius-control": {
+		"$value": {
+			"value": 0.5,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"radius-panel": {
+		"$value": {
+			"value": 0.875,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"radius-sheet": {
+		"$value": {
+			"value": 0.875,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"radius-pill": {
+		"$value": {
+			"value": 999,
+			"unit": "px"
+		},
+		"$type": "dimension"
+	},
+	"duration-fast": {
+		"$value": {
+			"value": 120,
+			"unit": "ms"
+		},
+		"$type": "duration"
+	},
+	"duration-standard": {
+		"$value": {
+			"value": 220,
+			"unit": "ms"
+		},
+		"$type": "duration"
+	},
+	"duration-sheet": {
+		"$value": {
+			"value": 320,
+			"unit": "ms"
+		},
+		"$type": "duration"
+	},
+	"easing-standard": {
+		"$value": [0.4, 0, 0.2, 1],
+		"$type": "cubicBezier"
+	},
+	"easing-decelerate": {
+		"$value": [0, 0, 0.2, 1],
+		"$type": "cubicBezier"
+	},
+	"safe-area-top": {
+		"$value": "env(safe-area-inset-top, 0px)",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"safe-area-right": {
+		"$value": "env(safe-area-inset-right, 0px)",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"safe-area-bottom": {
+		"$value": "env(safe-area-inset-bottom, 0px)",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"safe-area-left": {
+		"$value": "env(safe-area-inset-left, 0px)",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"map-footer-height": {
+		"$value": {
+			"value": 1.9,
+			"unit": "rem"
+		},
+		"$type": "dimension"
+	},
+	"color-background-canvas": {
+		"$value": "{neutral-50}",
+		"$type": "color"
+	},
+	"color-background-raised": {
+		"$value": "{neutral-0}",
+		"$type": "color"
+	},
+	"color-background-sunken": {
+		"$value": "{neutral-100}",
+		"$type": "color"
+	},
+	"color-text-primary": {
+		"$value": "{neutral-900}",
+		"$type": "color"
+	},
+	"color-text-secondary": {
+		"$value": "{neutral-600}",
+		"$type": "color"
+	},
+	"color-text-tertiary": {
+		"$value": "{neutral-500}",
+		"$type": "color"
+	},
+	"color-separator": {
+		"$value": "{neutral-200}",
+		"$type": "color"
+	},
+	"color-accent": {
+		"$value": "{brand-magenta}",
+		"$type": "color"
+	},
+	"color-accent-contrast": {
+		"$value": "{neutral-0}",
+		"$type": "color"
+	},
+	"color-selection": {
+		"$value": "{brand-magenta}",
+		"$type": "color"
+	},
+	"control-background": {
+		"$value": "{neutral-100}",
+		"$type": "color"
+	},
+	"control-background-pressed": {
+		"$value": "{neutral-200}",
+		"$type": "color"
+	},
+	"control-foreground": {
+		"$value": "{neutral-900}",
+		"$type": "color"
+	},
+	"control-border": {
+		"$value": "{neutral-300}",
+		"$type": "color"
+	},
+	"color-state-success": {
+		"$value": "{success-base}",
+		"$type": "color"
+	},
+	"color-state-success-background": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.62, 0.15, 150],
+			"alpha": 0.14
+		},
+		"$type": "color"
+	},
+	"color-state-warning": {
+		"$value": "{warning-base}",
+		"$type": "color"
+	},
+	"color-state-warning-background": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.75, 0.15, 75],
+			"alpha": 0.16
+		},
+		"$type": "color"
+	},
+	"color-state-danger": {
+		"$value": "{danger-base}",
+		"$type": "color"
+	},
+	"color-state-danger-background": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.58, 0.2, 25],
+			"alpha": 0.14
+		},
+		"$type": "color"
+	},
+	"color-state-info": {
+		"$value": "{info-base}",
+		"$type": "color"
+	},
+	"color-state-info-background": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.65, 0.13, 230],
+			"alpha": 0.14
+		},
+		"$type": "color"
+	},
+	"color-accent-background": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0.65, 0.29, 340],
+			"alpha": 0.14
+		},
+		"$type": "color"
+	},
+	"material-glass-background": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [1, 0, 264],
+			"alpha": 0.72
+		},
+		"$type": "color"
+	},
+	"material-glass-border": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [0, 0, 264],
+			"alpha": 0.1
+		},
+		"$type": "color"
+	},
+	"material-glass-blur": {
+		"$value": {
+			"value": 24,
+			"unit": "px"
+		},
+		"$type": "dimension"
+	},
+	"material-glass-saturation": {
+		"$value": {
+			"value": 180,
+			"unit": "%"
+		},
+		"$type": "dimension"
+	},
+	"material-glass-shadow": {
+		"$value": "0 4px 28px oklch(0% 0 264 / 0.14)",
+		"$extensions": {
+			"dev.styleframe": {
+				"unknownType": true
+			}
+		}
+	},
+	"material-glass-highlight": {
+		"$value": {
+			"colorSpace": "oklch",
+			"components": [1, 0, 264],
+			"alpha": 0.5
+		},
+		"$type": "color"
+	},
+	"material-glass-fallback-background": {
+		"$value": "{neutral-0}",
+		"$type": "color"
+	}
+}