mtrl 0.5.2 → 0.5.4

package/src/styles/base/_typography.scss

@@ -0,0 +1,155 @@
+// src/styles/base/_typography.scss
+@use '../abstract/base' as base;
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+
+// Typography scale classes
+$prefix: base.$prefix;
+
+// Display typography
+.#{$prefix}-display-large {
+  @include m.typography('display-large');
+}
+
+.#{$prefix}-display-medium {
+  @include m.typography('display-medium');
+}
+
+.#{$prefix}-display-small {
+  @include m.typography('display-small');
+}
+
+// Headline typography
+.#{$prefix}-headline-large {
+  @include m.typography('headline-large');
+}
+
+.#{$prefix}-headline-medium {
+  @include m.typography('headline-medium');
+}
+
+.#{$prefix}-headline-small {
+  @include m.typography('headline-small');
+}
+
+// Title typography
+.#{$prefix}-title-large {
+  @include m.typography('title-large');
+}
+
+.#{$prefix}-title-medium {
+  @include m.typography('title-medium');
+}
+
+.#{$prefix}-title-small {
+  @include m.typography('title-small');
+}
+
+// Body typography
+.#{$prefix}-body-large {
+  @include m.typography('body-large');
+}
+
+.#{$prefix}-body-medium {
+  @include m.typography('body-medium');
+}
+
+.#{$prefix}-body-small {
+  @include m.typography('body-small');
+}
+
+// Label typography
+.#{$prefix}-label-large {
+  @include m.typography('label-large');
+}
+
+.#{$prefix}-label-medium {
+  @include m.typography('label-medium');
+}
+
+.#{$prefix}-label-small {
+  @include m.typography('label-small');
+}
+
+// Convenience modifiers
+.#{$prefix}-text-center {
+  text-align: center;
+}
+
+.#{$prefix}-text-left {
+  text-align: left;
+}
+
+.#{$prefix}-text-right {
+  text-align: right;
+}
+
+// Font weight modifiers
+.#{$prefix}-font-thin {
+  font-weight: 100;
+}
+
+.#{$prefix}-font-light {
+  font-weight: 300;
+}
+
+.#{$prefix}-font-regular {
+  font-weight: 400;
+}
+
+.#{$prefix}-font-medium {
+  font-weight: 500;
+}
+
+.#{$prefix}-font-bold {
+  font-weight: 700;
+}
+
+// Text truncation with ellipsis
+.#{$prefix}-truncate {
+  @include m.truncate;
+}
+
+.#{$prefix}-truncate-2 {
+  @include m.truncate(2);
+}
+
+.#{$prefix}-truncate-3 {
+  @include m.truncate(3);
+}
+
+// Set base styles for heading elements
+h1 {
+  @include m.typography('headline-large');
+  margin-bottom: 0.5em;
+}
+
+h2 {
+  @include m.typography('headline-medium');
+  margin-bottom: 0.5em;
+}
+
+h3 {
+  @include m.typography('headline-small');
+  margin-bottom: 0.5em;
+}
+
+h4 {
+  @include m.typography('title-large');
+  margin-bottom: 0.5em;
+}
+
+h5 {
+  @include m.typography('title-medium');
+  margin-bottom: 0.5em;
+}
+
+h6 {
+  @include m.typography('title-small');
+  margin-bottom: 0.5em;
+}
+
+p {
+  @include m.typography('body-medium');
+  margin-bottom: 1em;
+}

package/src/styles/components/_badge.scss

@@ -0,0 +1,183 @@
+// src/components/badge/_badge.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;
+
+/**
+ * Badge component styles
+ * 
+ * Badge specifications:
+ * - Small badge size: 6dp
+ * - Large badge height: 16dp
+ * - Small badge corner radius: 3dp
+ * - Large badge corner radius: 8dp
+ * - Small badge: positioned 6dp from container edge
+ * - Large badge: positioned 14dp (height) x 12dp (width) from container edge
+ */
+$component: '#{base.$prefix}-badge';
+$wrapper: '#{base.$prefix}-badge-wrapper';
+
+// Wrapper styles to establish positioning context
+.#{$wrapper} {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.#{$component} {
+  // Base badge styles
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all 200ms ease;
+  text-overflow: ellipsis;
+  
+  // Hide for visibility: false
+  &--invisible {
+    display: none;
+  }
+  
+  // Small badge (dot)
+  &--small {
+    width: 6px;
+    height: 6px;
+    min-width: 6px;
+    border-radius: 3px; // 3dp corner radius
+    font-size: 0;
+    padding: 0;
+  }
+  
+  // Large badge
+  &--large {
+    height: 16px;
+    min-width: 16px;
+    border-radius: 8px; // 8dp corner radius
+    padding: 0 4px;
+    font-size: 11px;
+    line-height: 16px;
+    padding-top: 0.5px; // for some reason, we need this to be properly vertically centered
+    
+    // Handle max character count container (16dp x 34dp)
+    &.#{$component}--overflow {
+      min-width: auto;
+      max-width: 34px; // max width is 34dp for overflow badges
+      padding: 0 4px;
+    }
+  }
+  
+  // Position specs
+  &--positioned {
+    // Small badge placement (6dp from container edge)
+    &.#{$component}--small {
+      &.#{$component}--top-right {
+        top: -3px;
+        right: -3px;
+      }
+      
+      &.#{$component}--top-left {
+        top: -3px;
+        left: -3px;
+      }
+      
+      &.#{$component}--bottom-right {
+        bottom: -3px;
+        right: -3px;
+      }
+      
+      &.#{$component}--bottom-left {
+        bottom: -3px;
+        left: -3px;
+      }
+    }
+    
+    // Large badge placement (14dp x 12dp from container edge)
+    &.#{$component}--large {
+      &.#{$component}--top-right {
+        top: -8px;
+        right: -8px;
+      }
+      
+      &.#{$component}--top-left {
+        top: -8px;
+        left: -8px;
+      }
+      
+      &.#{$component}--bottom-right {
+        bottom: -8px;
+        right: -8px;
+      }
+      
+      &.#{$component}--bottom-left {
+        bottom: -8px;
+        left: -8px;
+      }
+    }
+  }
+  
+  // badge color system
+  &--error {
+    background-color: t.color('error');
+    color: t.color('on-error');
+  }
+  
+  &--primary {
+    background-color: t.color('primary');
+    color: t.color('on-primary');
+  }
+  
+  &--secondary {
+    background-color: t.color('secondary');
+    color: t.color('on-secondary');
+  }
+  
+  &--tertiary {
+    background-color: t.color('tertiary');
+    color: t.color('on-tertiary');
+  }
+  
+  &--success {
+    background-color: t.color('success');
+    color: t.color('on-success');
+  }
+  
+  &--warning {
+    background-color: t.color('warning');
+    color: t.color('on-warning');
+  }
+  
+  &--info {
+    background-color: t.color('info');
+    color: t.color('on-info');
+  }
+}
+
+// RTL support
+[dir="rtl"] {
+  .#{$component}--positioned {
+    &.#{$component}--top-right {
+      right: auto;
+      left: -8px;
+    }
+    
+    &.#{$component}--top-left {
+      left: auto;
+      right: -8px;
+    }
+    
+    &.#{$component}--bottom-right {
+      right: auto;
+      left: -8px;
+    }
+    
+    &.#{$component}--bottom-left {
+      left: auto;
+      right: -8px;
+    }
+  }
+}

package/src/styles/components/_bottom-app-bar.scss

@@ -0,0 +1,103 @@
+// src/components/bottom-app-bar/styles.scss
+@use 'sass:map';
+@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}-bottom-app-bar';
+
+.#{$component} {
+  // Core Properties
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: f.get-z-index('fixed');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px; // Default height as per specs
+  padding: 12px 16px 12px 4px; // top/bottom 12px, right 16px, left 4px
+  background-color: t.color('surface-container');
+  
+  // Apply material elevation
+  @include m.elevation(2);
+  
+  // Apply border radius at the top
+  border-top-left-radius: t.shape('medium');
+  border-top-right-radius: t.shape('medium');
+  
+  // Add transition for smooth animations
+  transition: transform 0.3s ease-in-out;
+  
+  // Actions container on the left side
+  &-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px; // Small gap between action buttons
+    height: 100%;
+    
+    // Icon buttons should have consistent sizing
+    > * {
+      flex-shrink: 0;
+    }
+  }
+  
+  // FAB container on the right side
+  &-fab-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+  }
+  
+  // Adjustment for when FAB is present - use the specified height
+  &--with-fab {
+    height: 72px;
+  }
+  
+  // Adjustment for when FAB is centered
+  &--fab-center {
+    .#{$component}-fab-container {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  
+  // Hidden state - moved off-screen
+  &--hidden {
+    transform: translateY(100%);
+  }
+  
+  // RTL Support
+  [dir="rtl"] & {
+    padding: 12px 4px 12px 16px;
+    
+    &-actions {
+      flex-direction: row-reverse;
+    }
+    
+    &-fab-container {
+      margin-right: auto;
+      margin-left: initial;
+    }
+  }
+  
+  // // Media query to hide on large screens
+  // @media (min-width: map.get(v.$breakpoints, 'lg')) {
+  //   display: none;
+  // }
+  
+  // Reduced motion support
+  @include m.reduced-motion {
+    transition-duration: 0.01ms;
+  }
+  
+  // High contrast mode support
+  @include m.high-contrast {
+    border-top: 1px solid currentColor;
+  }
+}