mtrl 0.0.3 → 0.1.2

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);
+  }
+}

package/src/components/list/styles/_list-item.scss

@@ -1,142 +0,0 @@
-// src/components/list/styles/_list-item.scss
-
-@use '../../../styles/abstract/config' as c;
-@use 'variables' as v;
-
-.#{c.$prefix}-list-item {
-  display: flex;
-  align-items: center;
-  min-height: v.$list-item-height;
-  padding: v.$list-padding v.$list-item-padding;
-  position: relative;
-  gap: 16px;
-  cursor: pointer;
-  color: var(--mtrl-sys-color-on-surface);
-  @include c.motion-transition(background-color);
-
-  &:hover {
-    @include c.state-layer(v.$list-hover-state-layer-color, 'hover');
-  }
-
-  &:focus-visible {
-    @include c.state-layer(v.$list-hover-state-layer-color, 'focus');
-    outline: none;
-  }
-
-  &:active {
-    @include c.state-layer(v.$list-hover-state-layer-color, 'pressed');
-  }
-
-  // Content layout
-  &-content {
-    flex: 1;
-    min-width: 0; // Enable text truncation
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  // Text elements
-  &-text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &-overline {
-    @include c.typography('label-small');
-    color: var(--mtrl-sys-color-on-surface-variant);
-  }
-
-  &-headline {
-    @include c.typography('body-large');
-    color: var(--mtrl-sys-color-on-surface);
-  }
-
-  &-supporting {
-    @include c.typography('body-medium');
-    color: var(--mtrl-sys-color-on-surface-variant);
-  }
-
-  &-meta {
-    @include c.typography('label-small');
-    color: var(--mtrl-sys-color-on-surface-variant);
-    margin-top: 4px;
-  }
-
-  // Leading/trailing elements
-  &-leading,
-  &-trailing {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  &-leading {
-    width: 24px;
-    height: 24px;
-    color: var(--mtrl-sys-color-on-surface-variant);
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-trailing {
-    color: var(--mtrl-sys-color-on-surface-variant);
-  }
-
-  // Vertical layout variant
-  &.vertical {
-    min-height: 72px;
-    padding: 12px v.$list-item-padding;
-
-    .#{c.$prefix}-list-item {
-      &-content {
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      &-meta {
-        margin-top: v.$list-padding;
-      }
-    }
-  }
-
-  // States
-  &--selected {
-    background-color: var(--mtrl-sys-color-secondary-container);
-    color: var(--mtrl-sys-color-on-secondary-container);
-
-    .#{c.$prefix}-list-item {
-      &-leading,
-      &-trailing {
-        color: var(--mtrl-sys-color-on-secondary-container);
-      }
-    }
-  }
-
-  &--disabled {
-    opacity: 0.38;
-    pointer-events: none;
-  }
-
-  // RTL Support
-  @include c.rtl {
-    .#{c.$prefix}-list-item {
-      &-text {
-        text-align: right;
-      }
-    }
-  }
-
-  // High contrast mode
-  @include c.high-contrast {
-    &--selected {
-      outline: 2px solid currentColor;
-      outline-offset: -2px;
-    }
-  }
-}

package/src/components/list/styles/_list.scss

@@ -1,89 +0,0 @@
-// src/components/list/styles/_list.scss
-
-@use '../../../styles/abstract/config' as c;
-@use 'variables' as v;
-
-.#{c.$prefix}-list {
-  display: flex;
-  flex-direction: column;
-  padding: v.$list-padding 0;
-  min-width: 200px;
-  background-color: var(--mtrl-sys-color-surface);
-
-  // Sections
-  &-section {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &:not(:last-child) {
-      margin-bottom: v.$list-padding;
-    }
-  }
-
-  &-section-title {
-    @include c.typography('label-large');
-    color: v.$list-section-title-color;
-    padding: v.$list-section-padding v.$list-item-padding 8px;
-  }
-
-  // Dividers
-  &-divider {
-    height: 1px;
-    margin: v.$list-padding 0;
-    background-color: v.$list-divider-color;
-  }
-
-  // Selection states
-  &[data-type="single"],
-  &[data-type="multi"],
-  &[data-type="radio"] {
-    .#{c.$prefix}-list-item {
-      cursor: pointer;
-
-      &--selected {
-        background-color: var(--mtrl-sys-color-secondary-container);
-        color: var(--mtrl-sys-color-on-secondary-container);
-
-        &:hover {
-          background-color: var(--mtrl-sys-color-secondary-container);
-          @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'hover');
-        }
-
-        .#{c.$prefix}-list-item-supporting {
-          color: var(--mtrl-sys-color-on-secondary-container);
-        }
-      }
-    }
-  }
-
-  // Dense variant
-  &--dense {
-    .#{c.$prefix}-list-item {
-      min-height: v.$list-item-dense-height;
-    }
-  }
-
-  // Disabled state
-  &--disabled {
-    pointer-events: none;
-    opacity: 0.38;
-  }
-
-  // RTL Support
-  @include c.rtl {
-    .#{c.$prefix}-list-section-title {
-      text-align: right;
-    }
-  }
-
-  // High contrast mode
-  @include c.high-contrast {
-    border: 1px solid currentColor;
-
-    &-divider {
-      border-top: 1px solid currentColor;
-      background: none;
-    }
-  }
-}

package/src/components/list/styles/_variables.scss

@@ -1,13 +0,0 @@
-// src/components/list/styles/_variables.scss
-
-// Component variables
-$list-item-height: 48px !default;
-$list-item-dense-height: 40px !default;
-$list-padding: 8px !default;
-$list-item-padding: 16px !default;
-$list-section-padding: 16px !default;
-
-// Color variables - can be overridden
-$list-divider-color: var(--mtrl-sys-color-outline-variant) !default;
-$list-section-title-color: var(--mtrl-sys-color-primary) !default;
-$list-hover-state-layer-color: var(--mtrl-sys-color-on-surface) !default;

package/src/components/navigation/styles/_bar.scss

@@ -1,51 +0,0 @@
-// src/components/navigation/styles/_bar.scss
-@use 'sass:map';
-@use '../../../styles/abstract/config' as c;
-@use 'base';
-
-.#{c.$prefix}-nav {
-  &--bar {
-    flex-direction: row;
-    width: 100%;
-    height: 80px;
-    padding: 0 12px;
-    justify-content: space-around;
-
-    .#{c.$prefix}-nav-item {
-      flex: 1;
-      flex-direction: column;
-      height: 100%;
-      max-width: 168px;
-      gap: 4px;
-
-      &:hover {
-        .#{c.$prefix}-nav-item-icon {
-          @include c.state-layer(var(--mtrl-sys-color-on-surface), 'hover');
-        }
-      }
-
-      &--active {
-        .#{c.$prefix}-nav-item-icon {
-          background-color: var(--mtrl-sys-color-secondary-container);
-        }
-      }
-
-      &-icon {
-        margin-bottom: 4px;
-        padding: 16px;
-        @include c.motion-transition(background-color);
-      }
-
-      &-label {
-        @include c.typography('label-medium');
-        text-align: center;
-      }
-
-      &-badge {
-        top: 4px;
-        right: 50%;
-        transform: translateX(12px);
-      }
-    }
-  }
-}