mtrl 0.5.2 → 0.5.3

package/src/styles/utilities/_ripple.scss

@@ -0,0 +1,79 @@
+// src/components/ripple/_ripple.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-ripple';
+
+.#{$component} {
+  // Ripple container
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  
+  &-wave {
+    position: absolute;
+    border-radius: 50%;
+    
+    // Make the ripple more visible with these changes:
+    background-color: currentColor;
+    opacity: 0;  // Start with 0 opacity
+    transform: scale(0);  // Start slightly larger for better visibility
+    pointer-events: none;
+    will-change: transform, opacity;
+    
+    // Animation
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    // Active ripple
+    &.active {
+      transform: scale(1);
+      opacity: v.state('hover-state-layer-opacity');
+    }
+    
+    &.fade-out {
+      opacity: 0;
+    }
+  }
+}
+
+// Standalone utility for adding ripple to any element
+[data-ripple] {
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+  
+  // Handle ripple color based on data attribute
+  &[data-ripple="light"]::after {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  
+  &[data-ripple="dark"]::after {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  
+  // Make content appear above ripple
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}

package/src/styles/utilities/_spacing.scss

@@ -0,0 +1,139 @@
+// src/styles/utilities/_spacing.scss
+@use '../abstract/base' as base;
+@use 'sass:map';
+
+$prefix: base.$prefix;
+
+// Spacing scale
+$spacing-scale: (
+  '0': 0,
+  '1': 4px,
+  '2': 8px,
+  '3': 12px,
+  '4': 16px,
+  '5': 20px,
+  '6': 24px,
+  '8': 32px,
+  '10': 40px,
+  '12': 48px,
+  '14': 56px,
+  '16': 64px,
+  '20': 80px,
+  '24': 96px,
+  '32': 128px,
+  'auto': auto
+);
+
+// Generate spacing utilities
+@each $key, $value in $spacing-scale {
+  // Margin utilities
+  .#{$prefix}-m-#{$key} {
+    margin: $value;
+  }
+  
+  .#{$prefix}-mx-#{$key} {
+    margin-left: $value;
+    margin-right: $value;
+  }
+  
+  .#{$prefix}-my-#{$key} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+  
+  .#{$prefix}-mt-#{$key} {
+    margin-top: $value;
+  }
+  
+  .#{$prefix}-mb-#{$key} {
+    margin-bottom: $value;
+  }
+  
+  .#{$prefix}-ml-#{$key} {
+    margin-left: $value;
+  }
+  
+  .#{$prefix}-mr-#{$key} {
+    margin-right: $value;
+  }
+  
+  // Padding utilities
+  .#{$prefix}-p-#{$key} {
+    padding: $value;
+  }
+  
+  .#{$prefix}-px-#{$key} {
+    padding-left: $value;
+    padding-right: $value;
+  }
+  
+  .#{$prefix}-py-#{$key} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+  
+  .#{$prefix}-pt-#{$key} {
+    padding-top: $value;
+  }
+  
+  .#{$prefix}-pb-#{$key} {
+    padding-bottom: $value;
+  }
+  
+  .#{$prefix}-pl-#{$key} {
+    padding-left: $value;
+  }
+  
+  .#{$prefix}-pr-#{$key} {
+    padding-right: $value;
+  }
+}
+
+// Gap utilities
+@each $key, $value in $spacing-scale {
+  .#{$prefix}-gap-#{$key} {
+    gap: $value;
+  }
+  
+  .#{$prefix}-gap-x-#{$key} {
+    column-gap: $value;
+  }
+  
+  .#{$prefix}-gap-y-#{$key} {
+    row-gap: $value;
+  }
+}
+
+// Responsive margin utilities for common breakpoints
+@each $breakpoint in (sm, md, lg, xl) {
+  @media (min-width: map.get((
+    sm: 600px,
+    md: 960px,
+    lg: 1280px,
+    xl: 1920px
+  ), $breakpoint)) {
+    @each $key, $value in (
+      '0': 0,
+      '4': 16px,
+      '6': 24px,
+      '8': 32px,
+      '10': 40px,
+      '12': 48px,
+      'auto': auto
+    ) {
+      .#{$prefix}-#{$breakpoint}:m-#{$key} {
+        margin: $value;
+      }
+      
+      .#{$prefix}-#{$breakpoint}:mx-#{$key} {
+        margin-left: $value;
+        margin-right: $value;
+      }
+      
+      .#{$prefix}-#{$breakpoint}:my-#{$key} {
+        margin-top: $value;
+        margin-bottom: $value;
+      }
+    }
+  }
+}

package/src/styles/utilities/_typography.scss

@@ -0,0 +1,178 @@
+// src/styles/utilities/_typography.scss
+@use '../abstract/base' as base;
+@use '../abstract/mixins' as m;
+
+$prefix: base.$prefix;
+
+// Font style utilities
+.#{$prefix}-italic {
+  font-style: italic;
+}
+
+.#{$prefix}-not-italic {
+  font-style: normal;
+}
+
+// Letter spacing
+.#{$prefix}-tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.#{$prefix}-tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.#{$prefix}-tracking-normal {
+  letter-spacing: 0;
+}
+
+.#{$prefix}-tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.#{$prefix}-tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.#{$prefix}-tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+// Line height
+.#{$prefix}-leading-none {
+  line-height: 1;
+}
+
+.#{$prefix}-leading-tight {
+  line-height: 1.25;
+}
+
+.#{$prefix}-leading-snug {
+  line-height: 1.375;
+}
+
+.#{$prefix}-leading-normal {
+  line-height: 1.5;
+}
+
+.#{$prefix}-leading-relaxed {
+  line-height: 1.625;
+}
+
+.#{$prefix}-leading-loose {
+  line-height: 2;
+}
+
+// Text transform
+.#{$prefix}-uppercase {
+  text-transform: uppercase;
+}
+
+.#{$prefix}-lowercase {
+  text-transform: lowercase;
+}
+
+.#{$prefix}-capitalize {
+  text-transform: capitalize;
+}
+
+.#{$prefix}-normal-case {
+  text-transform: none;
+}
+
+// Text decoration
+.#{$prefix}-underline {
+  text-decoration: underline;
+}
+
+.#{$prefix}-line-through {
+  text-decoration: line-through;
+}
+
+.#{$prefix}-no-underline {
+  text-decoration: none;
+}
+
+// Font smoothing
+.#{$prefix}-antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.#{$prefix}-subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+// Text overflow
+.#{$prefix}-truncate {
+  @include m.truncate;
+}
+
+.#{$prefix}-overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.#{$prefix}-overflow-clip {
+  text-overflow: clip;
+}
+
+// Word break
+.#{$prefix}-break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.#{$prefix}-break-words {
+  overflow-wrap: break-word;
+}
+
+.#{$prefix}-break-all {
+  word-break: break-all;
+}
+
+// Text columns for easier reading
+.#{$prefix}-columns-1 {
+  column-count: 1;
+}
+
+.#{$prefix}-columns-2 {
+  column-count: 2;
+}
+
+.#{$prefix}-columns-3 {
+  column-count: 3;
+}
+
+.#{$prefix}-columns-gap-4 {
+  column-gap: 1rem;
+}
+
+.#{$prefix}-columns-gap-8 {
+  column-gap: 2rem;
+}
+
+// Text vertical alignment
+.#{$prefix}-align-baseline {
+  vertical-align: baseline;
+}
+
+.#{$prefix}-align-top {
+  vertical-align: top;
+}
+
+.#{$prefix}-align-middle {
+  vertical-align: middle;
+}
+
+.#{$prefix}-align-bottom {
+  vertical-align: bottom;
+}
+
+.#{$prefix}-align-text-top {
+  vertical-align: text-top;
+}
+
+.#{$prefix}-align-text-bottom {
+  vertical-align: text-bottom;
+}

package/src/styles/utilities/_visibility.scss

@@ -0,0 +1,142 @@
+// src/styles/utilities/_visibility.scss
+@use '../abstract/base' as base;
+@use '../abstract/mixins' as m;
+@use 'sass:map';
+
+$prefix: base.$prefix;
+
+// Hide element but keep it accessible to screen readers
+.#{$prefix}-sr-only {
+  @include m.visually-hidden;
+}
+
+// Standard display utilities
+.#{$prefix}-block {
+  display: block;
+}
+
+.#{$prefix}-inline-block {
+  display: inline-block;
+}
+
+.#{$prefix}-inline {
+  display: inline;
+}
+
+.#{$prefix}-flex {
+  display: flex;
+}
+
+.#{$prefix}-inline-flex {
+  display: inline-flex;
+}
+
+.#{$prefix}-grid {
+  display: grid;
+}
+
+.#{$prefix}-inline-grid {
+  display: inline-grid;
+}
+
+.#{$prefix}-hidden {
+  display: none;
+}
+
+// Visibility
+.#{$prefix}-visible {
+  visibility: visible;
+}
+
+.#{$prefix}-invisible {
+  visibility: hidden;
+}
+
+// Responsive visibility utilities
+$breakpoints: (
+  'sm': 600px,
+  'md': 960px,
+  'lg': 1280px,
+  'xl': 1920px
+);
+
+@each $breakpoint, $value in $breakpoints {
+  // Hide on and above a breakpoint
+  .#{$prefix}-hide-#{$breakpoint}-up {
+    @media (min-width: $value) {
+      display: none !important;
+    }
+  }
+  
+  // Hide below a breakpoint
+  .#{$prefix}-hide-#{$breakpoint}-down {
+    @media (max-width: $value - 1) {
+      display: none !important;
+    }
+  }
+  
+  // Show only at and above a breakpoint
+  .#{$prefix}-show-#{$breakpoint}-up {
+    display: none !important;
+    
+    @media (min-width: $value) {
+      display: block !important;
+    }
+  }
+  
+  // Show only below a breakpoint
+  .#{$prefix}-show-#{$breakpoint}-down {
+    display: none !important;
+    
+    @media (max-width: $value - 1) {
+      display: block !important;
+    }
+  }
+}
+
+// Print visibility
+.#{$prefix}-print-only {
+  display: none !important;
+  
+  @media print {
+    display: block !important;
+  }
+}
+
+.#{$prefix}-print-hidden {
+  @media print {
+    display: none !important;
+  }
+}
+
+// Positioning utilities
+.#{$prefix}-relative {
+  position: relative;
+}
+
+.#{$prefix}-absolute {
+  position: absolute;
+}
+
+.#{$prefix}-fixed {
+  position: fixed;
+}
+
+.#{$prefix}-sticky {
+  position: sticky;
+}
+
+// Accessibility utilities
+.#{$prefix}-focusable {
+  &:focus-visible {
+    outline: 2px solid var(--#{$prefix}-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+// Elevation utilities
+@for $i from 0 through 5 {
+  .#{$prefix}-elevation-#{$i} {
+    @include m.elevation($i);
+  }
+}