@dxtmisha/d1 0.1.0

package/src/styles/Ui/classes/d1-font.scss

@@ -0,0 +1,243 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-font {
+  &--bodySmall {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-xs)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-xs)});
+    letter-spacing: var(--d1-sys-letterSpacing-lg);
+  }
+  
+  &--bodySmallEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-xs)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-xs)});
+    letter-spacing: var(--d1-sys-letterSpacing-lg);
+  }
+  
+  &--bodyMedium {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-sm)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-sm)});
+    letter-spacing: var(--d1-sys-letterSpacing-md);
+  }
+  
+  &--bodyMediumEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-sm)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-sm)});
+    letter-spacing: var(--d1-sys-letterSpacing-md);
+  }
+  
+  &--bodyLarge {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-md)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-md)});
+    letter-spacing: var(--d1-sys-letterSpacing-xl);
+  }
+  
+  &--bodyLargeEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-md)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-md)});
+    letter-spacing: var(--d1-sys-letterSpacing-xl);
+  }
+  
+  &--labelSmall {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-x)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-xs)});
+    letter-spacing: var(--d1-sys-letterSpacing-xl);
+  }
+  
+  &--labelSmallEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-x)});
+    font-weight: var(--d1-sys-font-weight-bold);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-xs)});
+    letter-spacing: var(--d1-sys-letterSpacing-xl);
+  }
+  
+  &--labelMedium {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-xs)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-xs)});
+    letter-spacing: var(--d1-sys-letterSpacing-xl);
+  }
+  
+  &--labelMediumEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-xs)});
+    font-weight: var(--d1-sys-font-weight-bold);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-xs)});
+    letter-spacing: var(--d1-sys-letterSpacing-xl);
+  }
+  
+  &--labelLarge {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-sm)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-sm)});
+    letter-spacing: var(--d1-sys-letterSpacing-xs);
+  }
+  
+  &--labelLargeEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-sm)});
+    font-weight: var(--d1-sys-font-weight-bold);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-sm)});
+    letter-spacing: var(--d1-sys-letterSpacing-xs);
+  }
+  
+  &--titleSmall {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-sm)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-sm)});
+    letter-spacing: var(--d1-sys-letterSpacing-xs);
+  }
+  
+  &--titleSmallEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-sm)});
+    font-weight: var(--d1-sys-font-weight-bold);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-sm)});
+    letter-spacing: var(--d1-sys-letterSpacing-xs);
+  }
+  
+  &--titleMedium {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-md)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-md)});
+    letter-spacing: var(--d1-sys-letterSpacing-sm);
+  }
+  
+  &--titleMediumEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-md)});
+    font-weight: var(--d1-sys-font-weight-bold);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-md)});
+    letter-spacing: var(--d1-sys-letterSpacing-sm);
+  }
+  
+  &--titleLarge {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-lg)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-lg)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--titleLargeEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-lg)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-lg)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--headlineSmall {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-headlineSmall)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-headlineSmall)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--headlineSmallEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-headlineSmall)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-headlineSmall)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--headlineMedium {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-headlineMedium)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-headlineMedium)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--headlineMediumEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-headlineMedium)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-headlineMedium)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--headlineLarge {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-headlineLarge)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-headlineLarge)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--headlineLargeEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-headlineLarge)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-headlineLarge)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--displaySmall {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-displaySmall)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-displaySmall)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--displaySmallEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-displaySmall)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-displaySmall)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--displayMedium {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-displayMedium)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-displayMedium)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--displayMediumEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-displayMedium)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-displayMedium)});
+    letter-spacing: var(--d1-sys-letterSpacing-none);
+  }
+  
+  &--displayLarge {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-displayLarge)});
+    font-weight: var(--d1-sys-font-weight-regular);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-displayLarge)});
+    letter-spacing: var(--d1-sys-letterSpacing-compress);
+  }
+  
+  &--displayLargeEmphasized {
+    font-family: var(--d1-sys-font-family-basic), sans-serif;
+    @include ui.fontSize(#{var(--d1-sys-font-size-displayLarge)});
+    font-weight: var(--d1-sys-font-weight-medium);
+    @include ui.lineHeight(#{var(--d1-sys-lineHeight-displayLarge)});
+    letter-spacing: var(--d1-sys-letterSpacing-compress);
+  }
+}

package/src/styles/Ui/classes/d1-grid.scss

@@ -0,0 +1,17 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-grid {
+  @media screen and (max-width: calc(768px - 1px)) {
+    --d1-grid-paddingX: var(--d1-sys-spacing-grid-paddingX-md);
+    --d1-grid-paddingY: var(--d1-sys-spacing-grid-paddingY);
+    --d1-grid-gapX: var(--d1-sys-spacing-grid-gapX-md);
+    --d1-grid-gapY: var(--d1-sys-spacing-grid-gapY-md);
+  }
+  
+  @media screen and (min-width: 768px) {
+    --d1-grid-paddingX: var(--d1-sys-spacing-grid-paddingX-lg);
+    --d1-grid-paddingY: var(--d1-sys-spacing-grid-paddingY);
+    --d1-grid-gapX: var(--d1-sys-spacing-grid-gapX-lg);
+    --d1-grid-gapY: var(--d1-sys-spacing-grid-gapY-lg);
+  }
+}

package/src/styles/Ui/classes/d1-main.scss

@@ -0,0 +1,28 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-main {
+  font-family: var(--d1-sys-font-family-basic), sans-serif;
+  @include ui.fontSize(#{var(--d1-sys-font-size-md)});
+  font-weight: var(--d1-sys-font-weight-regular);
+  @include ui.lineHeight(#{var(--d1-sys-lineHeight-md)});
+  letter-spacing: var(--d1-sys-letterSpacing-xl);
+  
+  @include ui.color(#{var(--d1-sys-palette-onSurface)});
+  @include ui.colorOpacity(#{var(--d1-sys-opacity-surface-high)});
+  
+  background: var(--d1-sys-background-0);
+  
+  @media screen and (max-width: calc(768px - 1px)) {
+    --d1-grid-paddingX: var(--d1-sys-spacing-grid-paddingX-md);
+    --d1-grid-paddingY: var(--d1-sys-spacing-grid-paddingY);
+    --d1-grid-gapX: var(--d1-sys-spacing-grid-gapX-md);
+    --d1-grid-gapY: var(--d1-sys-spacing-grid-gapY-md);
+  }
+  
+  @media screen and (min-width: 768px) {
+    --d1-grid-paddingX: var(--d1-sys-spacing-grid-paddingX-lg);
+    --d1-grid-paddingY: var(--d1-sys-spacing-grid-paddingY);
+    --d1-grid-gapX: var(--d1-sys-spacing-grid-gapX-lg);
+    --d1-grid-gapY: var(--d1-sys-spacing-grid-gapY-lg);
+  }
+}

package/src/styles/Ui/classes/d1-margin-x.scss

@@ -0,0 +1,31 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-marginX {
+  &--sm {
+    @include ui.marginX(#{var(--d1-ref-spacing-2)});
+  }
+  
+  &--md {
+    @include ui.marginX(#{var(--d1-ref-spacing-4)});
+  }
+  
+  &--lg {
+    @include ui.marginX(#{var(--d1-ref-spacing-6)});
+  }
+  
+  &--smToMd {
+    @include ui.marginX(#{var(--d1-ref-spacing-2)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.marginX(#{var(--d1-ref-spacing-4)});
+    }
+  }
+  
+  &--smToLg {
+    @include ui.marginX(#{var(--d1-ref-spacing-2)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.marginX(#{var(--d1-ref-spacing-6)});
+    }
+  }
+}

package/src/styles/Ui/classes/d1-margin-y.scss

@@ -0,0 +1,51 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-marginY {
+  &--md {
+    @include ui.marginY(#{var(--d1-ref-spacing-4)});
+  }
+  
+  &--lg {
+    @include ui.marginY(#{var(--d1-ref-spacing-6)});
+  }
+  
+  &--xl {
+    @include ui.marginY(#{var(--d1-ref-spacing-8)});
+  }
+  
+  &--2xl {
+    @include ui.marginY(#{var(--d1-ref-spacing-10)});
+  }
+  
+  &--mdToLg {
+    @include ui.marginY(#{var(--d1-ref-spacing-4)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.marginY(#{var(--d1-ref-spacing-6)});
+    }
+  }
+  
+  &--mdToXl {
+    @include ui.marginY(#{var(--d1-ref-spacing-4)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.marginY(#{var(--d1-ref-spacing-8)});
+    }
+  }
+  
+  &--lgToXl {
+    @include ui.marginY(#{var(--d1-ref-spacing-6)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.marginY(#{var(--d1-ref-spacing-8)});
+    }
+  }
+  
+  &--lgTo2xl {
+    @include ui.marginY(#{var(--d1-ref-spacing-6)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.marginY(#{var(--d1-ref-spacing-10)});
+    }
+  }
+}

package/src/styles/Ui/classes/d1-margin.scss

@@ -0,0 +1,55 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-margin {
+  &--sm {
+    margin: var(--d1-ref-spacing-2);
+  }
+  
+  &--md {
+    margin: var(--d1-ref-spacing-4);
+  }
+  
+  &--lg {
+    margin: var(--d1-ref-spacing-6);
+  }
+  
+  &--xl {
+    margin: var(--d1-ref-spacing-8);
+  }
+  
+  &--2xl {
+    margin: var(--d1-ref-spacing-10);
+  }
+  
+  &--smToMd {
+    margin: var(--d1-ref-spacing-2);
+    
+    @media screen and (min-width: 768px) {
+      margin: var(--d1-ref-spacing-4);
+    }
+  }
+  
+  &--smToLg {
+    margin: var(--d1-ref-spacing-2);
+    
+    @media screen and (min-width: 768px) {
+      margin: var(--d1-ref-spacing-6);
+    }
+  }
+  
+  &--mdToLg {
+    margin: var(--d1-ref-spacing-4);
+    
+    @media screen and (min-width: 768px) {
+      margin: var(--d1-ref-spacing-6);
+    }
+  }
+  
+  &--mdToXl {
+    margin: var(--d1-ref-spacing-4);
+    
+    @media screen and (min-width: 768px) {
+      margin: var(--d1-ref-spacing-8);
+    }
+  }
+}

package/src/styles/Ui/classes/d1-outline.scss

@@ -0,0 +1,24 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-outline {
+  &--sm {
+    @include ui.outlineOpacity(#{var(--d1-sys-opacity-outline)});
+    
+    outline-width: var(--d1-ref-spacing-2px);
+    @include ui.outlineColor(#{var(--d1-sys-palette-primary)});
+  }
+  
+  &--md {
+    @include ui.outlineOpacity(#{var(--d1-sys-opacity-outline)});
+    
+    outline-width: var(--d1-ref-spacing-1);
+    @include ui.outlineColor(#{var(--d1-sys-palette-primary)});
+  }
+  
+  &--lg {
+    @include ui.outlineOpacity(#{var(--d1-sys-opacity-outline)});
+    
+    outline-width: var(--d1-ref-spacing-2);
+    @include ui.outlineColor(#{var(--d1-sys-palette-primary)});
+  }
+}

package/src/styles/Ui/classes/d1-padding-x.scss

@@ -0,0 +1,31 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-paddingX {
+  &--sm {
+    @include ui.paddingX(#{var(--d1-ref-spacing-2)});
+  }
+  
+  &--md {
+    @include ui.paddingX(#{var(--d1-ref-spacing-4)});
+  }
+  
+  &--lg {
+    @include ui.paddingX(#{var(--d1-ref-spacing-6)});
+  }
+  
+  &--smToMd {
+    @include ui.paddingX(#{var(--d1-ref-spacing-2)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.paddingX(#{var(--d1-ref-spacing-4)});
+    }
+  }
+  
+  &--smToLg {
+    @include ui.paddingX(#{var(--d1-ref-spacing-2)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.paddingX(#{var(--d1-ref-spacing-6)});
+    }
+  }
+}

package/src/styles/Ui/classes/d1-padding-y.scss

@@ -0,0 +1,31 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-paddingY {
+  &--md {
+    @include ui.paddingY(#{var(--d1-ref-spacing-4)});
+  }
+  
+  &--lg {
+    @include ui.paddingY(#{var(--d1-ref-spacing-6)});
+  }
+  
+  &--xl {
+    @include ui.paddingY(#{var(--d1-ref-spacing-8)});
+  }
+  
+  &--mdToLg {
+    @include ui.paddingY(#{var(--d1-ref-spacing-4)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.paddingY(#{var(--d1-ref-spacing-6)});
+    }
+  }
+  
+  &--mdToXl {
+    @include ui.paddingY(#{var(--d1-ref-spacing-4)});
+    
+    @media screen and (min-width: 768px) {
+      @include ui.paddingY(#{var(--d1-ref-spacing-8)});
+    }
+  }
+}

package/src/styles/Ui/classes/d1-padding.scss

@@ -0,0 +1,51 @@
+@use "@dxtmisha/styles" as ui;
+
+.d1-padding {
+  &--sm {
+    padding: var(--d1-ref-spacing-2);
+  }
+  
+  &--md {
+    padding: var(--d1-ref-spacing-4);
+  }
+  
+  &--lg {
+    padding: var(--d1-ref-spacing-6);
+  }
+  
+  &--xl {
+    padding: var(--d1-ref-spacing-8);
+  }
+  
+  &--smToMd {
+    padding: var(--d1-ref-spacing-2);
+    
+    @media screen and (min-width: 768px) {
+      padding: var(--d1-ref-spacing-4);
+    }
+  }
+  
+  &--smToLg {
+    padding: var(--d1-ref-spacing-2);
+    
+    @media screen and (min-width: 768px) {
+      padding: var(--d1-ref-spacing-6);
+    }
+  }
+  
+  &--mdToLg {
+    padding: var(--d1-ref-spacing-4);
+    
+    @media screen and (min-width: 768px) {
+      padding: var(--d1-ref-spacing-6);
+    }
+  }
+  
+  &--mdToXl {
+    padding: var(--d1-ref-spacing-4);
+    
+    @media screen and (min-width: 768px) {
+      padding: var(--d1-ref-spacing-8);
+    }
+  }
+}