Initial commit

styles/mixins/adaptive.scss

@@ -0,0 +1,11 @@
+@mixin mobile {
+  @media (max-width: 480px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: 481px) {
+    @content;
+  }
+}

styles/mixins/element-variant.scss

@@ -0,0 +1,48 @@
+@use "sass:meta";
+@use "sass:list";
+@use "sass:string";
+
+@mixin element-variant(
+  $namespace,
+  $variant: '',
+  $map: ()
+) {
+  @if meta.type-of($map) == 'map' {
+    $withDarkVariant: false;
+    $variantPrefix: if(string.length($variant) > 0, '-' + $variant, '');
+
+    @at-root {
+      :root, .light-theme {
+        @each $property, $value in $map {
+          @if meta.type-of($value) == 'list' {
+            @if $withDarkVariant == false and list.length($value) > 1 {
+              $withDarkVariant: true;
+            }
+
+            $value: list.nth($value, 1);
+          }
+
+          --#{$namespace}#{$variantPrefix}-#{$property}: #{$value};
+        }
+      }
+
+      @if $withDarkVariant {
+        .dark-theme {
+          @each $property, $value in $map {
+            @if meta.type-of($value) == 'list' and list.length($value) > 1 {
+              --#{$namespace}#{$variantPrefix}-#{$property}: #{list.nth($value, 2)};
+            }
+          }
+        }
+      }
+    }
+
+    @if (string.length($variant) > 0) {
+      &-#{$variantPrefix} {
+        @each $property, $value in $map {
+          --#{$namespace}-#{$property}: var(--#{$namespace}#{$variantPrefix}-#{$property});
+        }
+      }
+    }
+  }
+}

styles/mixins/index.scss

@@ -0,0 +1,3 @@
+@forward "element-variant";
+@forward "typography";
+@forward "adaptive";

styles/mixins/typography.scss

@@ -0,0 +1,17 @@
+@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
+  @if ($namespace) {
+    @if ($onlyVars) {
+      --#{$namespace}-font-size: #{$size};
+      --#{$namespace}-font-weight: #{$weight};
+      --#{$namespace}-line-height: #{$lineHeight};
+    } @else {
+      font-size: var(--#{$namespace}-font-size, $size);
+      font-weight: var(--#{$namespace}-font-weight, $weight);
+      line-height: var(--#{$namespace}-line-height, $lineHeight);
+    }
+  } @else {
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+}