@m3ui-vue/m3ui-vue 0.1.0

package/src/styles/theme.css

@@ -0,0 +1,249 @@
+/* Enable class-based dark mode for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ---------------------------------------------------------------------- */
+/* Material 3 design tokens — light theme (baseline purple)               */
+/* ---------------------------------------------------------------------- */
+@theme {
+  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  /* Color roles */
+  --color-primary: #6750a4;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #eaddff;
+  --color-on-primary-container: #21005d;
+
+  --color-secondary: #625b71;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #e8def8;
+  --color-on-secondary-container: #1d192b;
+
+  --color-tertiary: #7d5260;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #ffd8e4;
+  --color-on-tertiary-container: #31111d;
+
+  --color-error: #b3261e;
+  --color-on-error: #ffffff;
+  --color-error-container: #f9dedc;
+  --color-on-error-container: #410e0b;
+
+  --color-success: #2e7d32;
+  --color-on-success: #ffffff;
+  --color-success-container: #c8e6c9;
+  --color-on-success-container: #0d3311;
+
+  --color-background: #fffbfe;
+  --color-on-background: #1c1b1f;
+
+  --color-surface: #fffbfe;
+  --color-on-surface: #1c1b1f;
+  --color-surface-variant: #e7e0ec;
+  --color-on-surface-variant: #49454f;
+
+  --color-surface-dim: #ded8e1;
+  --color-surface-bright: #fffbfe;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f7f2fa;
+  --color-surface-container: #f3edf7;
+  --color-surface-container-high: #ece6f0;
+  --color-surface-container-highest: #e6e0e9;
+
+  --color-outline: #79747e;
+  --color-outline-variant: #cac4d0;
+  --color-shadow: #000000;
+
+  --color-inverse-surface: #313033;
+  --color-inverse-on-surface: #f4eff4;
+  --color-inverse-primary: #d0bcff;
+
+  /* Shape (corner radius) scale */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 28px;
+
+  /* Elevation */
+  --shadow-elevation-1: 0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 1px 3px 1px rgb(0 0 0 / 0.15);
+  --shadow-elevation-2: 0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15);
+  --shadow-elevation-3: 0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15);
+
+  /* Type scale */
+  --text-display-small: 2.25rem;
+  --text-display-small--line-height: 2.75rem;
+
+  --text-headline-large: 2rem;
+  --text-headline-large--line-height: 2.5rem;
+  --text-headline-medium: 1.75rem;
+  --text-headline-medium--line-height: 2.25rem;
+  --text-headline-small: 1.5rem;
+  --text-headline-small--line-height: 2rem;
+
+  --text-title-large: 1.375rem;
+  --text-title-large--line-height: 1.75rem;
+  --text-title-medium: 1rem;
+  --text-title-medium--line-height: 1.5rem;
+  --text-title-small: 0.875rem;
+  --text-title-small--line-height: 1.25rem;
+
+  --text-body-large: 1rem;
+  --text-body-large--line-height: 1.5rem;
+  --text-body-medium: 0.875rem;
+  --text-body-medium--line-height: 1.25rem;
+  --text-body-small: 0.75rem;
+  --text-body-small--line-height: 1rem;
+
+  --text-label-large: 0.875rem;
+  --text-label-large--line-height: 1.25rem;
+  --text-label-medium: 0.75rem;
+  --text-label-medium--line-height: 1rem;
+  --text-label-small: 0.6875rem;
+  --text-label-small--line-height: 1rem;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Dark theme overrides — M3 baseline purple dark scheme                  */
+/* ---------------------------------------------------------------------- */
+.dark {
+  color-scheme: dark;
+
+  --color-primary: #d0bcff;
+  --color-on-primary: #381e72;
+  --color-primary-container: #4f378b;
+  --color-on-primary-container: #eaddff;
+
+  --color-secondary: #ccc2dc;
+  --color-on-secondary: #332d41;
+  --color-secondary-container: #4a4458;
+  --color-on-secondary-container: #e8def8;
+
+  --color-tertiary: #efb8c8;
+  --color-on-tertiary: #492532;
+  --color-tertiary-container: #633b48;
+  --color-on-tertiary-container: #ffd8e4;
+
+  --color-error: #f2b8b5;
+  --color-on-error: #601410;
+  --color-error-container: #8c1d18;
+  --color-on-error-container: #f9dedc;
+
+  --color-success: #81c784;
+  --color-on-success: #1b5e20;
+  --color-success-container: #2e7d32;
+  --color-on-success-container: #c8e6c9;
+
+  --color-background: #141218;
+  --color-on-background: #e6e1e5;
+
+  --color-surface: #141218;
+  --color-on-surface: #e6e1e5;
+  --color-surface-variant: #49454f;
+  --color-on-surface-variant: #cac4d0;
+
+  --color-surface-dim: #141218;
+  --color-surface-bright: #3b383e;
+  --color-surface-container-lowest: #0f0d13;
+  --color-surface-container-low: #1d1b20;
+  --color-surface-container: #211f26;
+  --color-surface-container-high: #2b2930;
+  --color-surface-container-highest: #36343b;
+
+  --color-outline: #938f99;
+  --color-outline-variant: #49454f;
+  --color-shadow: #000000;
+
+  --color-inverse-surface: #e6e1e5;
+  --color-inverse-on-surface: #313033;
+  --color-inverse-primary: #6750a4;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Base styles                                                             */
+/* ---------------------------------------------------------------------- */
+@layer base {
+  :root {
+    --field-bg: var(--color-surface);
+  }
+
+  html {
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-surface text-on-surface font-sans text-body-large antialiased;
+  }
+
+  ::selection {
+    @apply bg-primary-container text-on-primary-container;
+  }
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-outline-variant) transparent;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Animations                                                             */
+/* ---------------------------------------------------------------------- */
+@keyframes m3-progress-indeterminate {
+  0%   { left: -50%; width: 40% }
+  60%  { left: 110%; width: 40% }
+  100% { left: 110%; width: 40% }
+}
+
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+  transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease,
+              box-shadow 250ms ease, fill 250ms ease, stroke 250ms ease !important;
+}
+
+@keyframes m3-ripple {
+  from { transform: scale(0); opacity: 0.15; }
+  to   { transform: scale(1); opacity: 0; }
+}
+
+.m3-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: currentColor;
+  pointer-events: none;
+  animation: m3-ripple 450ms cubic-bezier(0.2, 0, 0.8, 1) forwards;
+}
+
+@keyframes m3-ctx-in {
+  from { transform: translateY(-6px) scale(0.94); }
+  to   { transform: translateY(0)    scale(1); }
+}
+
+.m3-ctx-panel {
+  animation: m3-ctx-in 140ms cubic-bezier(0.2, 0, 0, 1) both;
+  transform-origin: top left;
+}
+
+@keyframes m3-wavy-spin {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}