@inchurch/matcha-theme 21.3.3 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "21.3.3",
+  "version": "22.0.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {

package/tokens/_animations-tokens.scss

@@ -1,37 +1,37 @@
-// Easing Curves
-// TODO(jelbourn): all of these need to be revisited
-
-// The default animation curves used by material design.
-$time-transition-minimal: 80;
-$time-transition-short: 200;
-$time-transition-base: 400;
-$time-transition-long: 600;
-$time-transition-xl: 1000;
-$time-delay-short: 50;
-$time-delay-base: 100;
-$time-delay-long: 200;
-$time-duration-short: 2000;
-$time-duration-base: 4000;
-$time-duration-long: 6000;
-
-$matcha-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
-$matcha-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$matcha-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
-
-$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
-
-$swift-ease-out-duration: #{$time-transition-base}ms !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
-
-$swift-ease-in-duration: #{$time-transition-short}ms !default;
-$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
-$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
-
-$swift-ease-in-out-duration: #{$time-transition-long}ms !default;
-$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
-
-$swift-linear-duration: #{$time-transition-minimal}ms !default;
-$swift-linear-timing-function: linear !default;
-$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
+// Easing Curves
+// TODO(jelbourn): all of these need to be revisited
+
+// The default animation curves used by material design.
+$time-transition-minimal: 80;
+$time-transition-short: 200;
+$time-transition-base: 400;
+$time-transition-long: 600;
+$time-transition-xl: 1000;
+$time-delay-short: 50;
+$time-delay-base: 100;
+$time-delay-long: 200;
+$time-duration-short: 2000;
+$time-duration-base: 4000;
+$time-duration-long: 6000;
+
+$matcha-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
+$matcha-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$matcha-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
+
+$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+
+$swift-ease-out-duration: #{$time-transition-base}ms !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: #{$time-transition-short}ms !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: #{$time-transition-long}ms !default;
+$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+$swift-linear-duration: #{$time-transition-minimal}ms !default;
+$swift-linear-timing-function: linear !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;

package/tokens/_breakpoints-tokens.scss

@@ -1,35 +1,35 @@
-// =============================================================================
-// 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'
-);
+// =============================================================================
+// 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'
+);