@inchurch/matcha-theme 20.0.11 → 20.277.0

package/tokens/_breakpoints-tokens.scss

@@ -1,26 +1,35 @@
-// Media step breakpoint mixin based on Angular Material lib
-$breakpoints: (
-    xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
-    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
-    lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
-    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-    lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 1023px)',
-    lt-lg: 'screen and (max-width: 1439px)',
-    lt-xl: 'screen and (max-width: 1919px)',
-    gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 1024px)',
-    gt-md: 'screen and (min-width: 1440px)',
-    gt-lg: 'screen and (min-width: 1920px)'
-) !default;
-
-// Re-map the breakpoints for the helper classes
-$helper-breakpoints: (
-    initial: null,
-    xs: 'xs',
-    sm: 'gt-xs',
-    md: 'gt-sm',
-    lg: 'gt-md',
-    xl: 'gt-lg'
-);
+// =============================================================================
+// Breakpoints SCSS — alinhados ao canon NEW DSV3 (Tailwind-like).
+// Antes usavam Angular Material legacy (600/1024/1440/1920). MIGRADO em
+// 2026-05-22 pra Tailwind-style (480/640/768/1024/1280/1536) que matcha 1:1
+// com os tokens CSS custom property `--matcha-bp-*`.
+//
+// Single source of truth pra @include media-breakpoint($name).
+// =============================================================================
+$breakpoints: (
+    xs:    'screen and (max-width: 479px)',
+    sm:    'screen and (min-width: 480px) and (max-width: 639px)',
+    md:    'screen and (min-width: 640px) and (max-width: 767px)',
+    lg:    'screen and (min-width: 768px) and (max-width: 1023px)',
+    xl:    'screen and (min-width: 1024px) and (max-width: 1279px)',
+    2xl:   'screen and (min-width: 1280px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 479px)',
+    lt-md: 'screen and (max-width: 639px)',
+    lt-lg: 'screen and (max-width: 767px)',
+    lt-xl: 'screen and (max-width: 1023px)',
+    gt-xs: 'screen and (min-width: 480px)',
+    gt-sm: 'screen and (min-width: 640px)',
+    gt-md: 'screen and (min-width: 768px)',
+    gt-lg: 'screen and (min-width: 1024px)',
+    gt-xl: 'screen and (min-width: 1280px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    initial: null,
+    xs: 'xs',
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);