@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/core/ripple/_spec.scss

@@ -59,15 +59,13 @@ $touchUpAcceleration: 3400 !default;
 
 .mdw-ripple__container {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   overflow: hidden;
-  
+
   box-sizing: border-box;
 
   pointer-events: none;
+
   z-index: 1;
 
   border-radius: inherit;
@@ -77,6 +75,8 @@ $touchUpAcceleration: 3400 !default;
   display: block;
   position: absolute;
 
+  pointer-events: none;
+
   animation-name: none;
   animation-duration: motion.$expandDuration;
   animation-timing-function: linear;
@@ -88,11 +88,10 @@ $touchUpAcceleration: 3400 !default;
   transition-timing-function: motion.$standardEasing;
 
   opacity: 0.16;
-  pointer-events: none;
   transform: scale(0);
-  
+
   background-color: currentColor;
-  
+
   border-radius: 50%;
 }
 
@@ -111,7 +110,6 @@ $touchUpAcceleration: 3400 !default;
   animation-timing-function: motion.$decelerateEasing;
 }
 
-
 @keyframes ripple-fade-in {
   from {
     transform: scale(0);
@@ -144,33 +142,35 @@ $touchUpAcceleration: 3400 !default;
 }
 
 .mdw-ripple::after {
+  content: '';
+
   display: table; // See above
   position: absolute;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
 
-  height: 0;
-  width: 0;
+  block-size: 0;
+  inline-size: 0;
   padding: 50%;
+
+  pointer-events: none;
   // z-index: -1; // Safari has a negative z-index scrolling bug (hides elements)
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
 
-  transition: 
+  transition:
     transform #{motion.$expandDuration + $fadeOutDuration} linear $enterDelay,
     background-color $fadeOutDuration motion.$decelerateEasing #{$enterDelay + motion.$expandDuration};
   will-change: transform, background-color;
 
   opacity: 0.16;
-  pointer-events: none;
   transform: translateX(-50%) translateY(-50%) scale(2);
 
   background-color: transparent;
   border-radius: 50%;
   color: inherit;
-  content: '';
 }
 
 // On active, pop up initial state
@@ -194,4 +194,3 @@ $touchUpAcceleration: 3400 !default;
     visibility: hidden;
   }
 }
-

package/core/ripple/_theme.scss

@@ -1,40 +1,20 @@
-// https://material.io/design/interaction/states.html
-// https://material.io/design/components/buttons.html
-// https://material.io/design/iconography/system-icons.html#color
+/* https://material.io/design/interaction/states.html */
+/* https://material.io/design/components/buttons.html */
+/* https://material.io/design/iconography/system-icons.html#color */
 
-@use '../theme/_mixins.scss' as theme;
-
-$themeValues: (
-  overlay-color:                 (('foreground-light', 1.00), ('foreground-dark', 1.00)),
-  pressed-opacity:               (0.16, 0.32),
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('ripple', $themeValues, $key, $type);
+.mdw-theme[mdw-light] {
+  --mdw-ripple__pressed-opacity: 0.16;
 }
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-ripple {
-    & > .mdw-ripple__container > .mdw-ripple__inner,
-    &::after {
-      opacity: getThemeValue("pressed-opacity", $type);
-      color: inherit;
-      @if ($type == 'var') {
-        // Fallback handed by previous inherit rule
-        color: RGB(var(--mdw-ink));
-      }
-    }
-  }
+.mdw-theme[mdw-dark] {
+  --mdw-ripple__pressed-opacity: 0.32;
 }
 
+.mdw-ripple {
+  & > .mdw-ripple__container > .mdw-ripple__inner,
+  &::after {
+    opacity: var(--mdw-ripple__pressed-opacity);
 
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('ripple', $themeValues) {
-  @include addThemeRules();
+    color: RGB(var(--mdw-ink));
+  }
 }

package/core/ripple/index.js

@@ -1,6 +1,4 @@
-import {
-  getChildElementByClass, getPassiveEventListenerOption, iterateArrayLike, nextTick,
-} from '../dom.js';
+import { getChildElementByClass } from '../dom.js';
 
 /**
  * @param {Element} element
@@ -28,24 +26,29 @@ export function updateRipplePosition(rippleInner, x, y) {
   let height;
   let xPos = x;
   let yPos = y;
+  const {
+    clientWidth: parentWidth,
+    clientHeight: parentHeight,
+  } = /** @type {HTMLElement} */ (rippleInner.parentElement);
+
   if (x == null) {
-    xPos = rippleInner.parentElement.clientWidth / 2;
+    xPos = parentWidth / 2;
     width = xPos;
-  } else if (x >= rippleInner.parentElement.clientWidth / 2) {
+  } else if (x >= parentWidth / 2) {
     width = x;
     // furthest horizontal side is left
   } else {
-    width = rippleInner.parentElement.clientWidth - x;
+    width = parentWidth - x;
     // furthest horizontal side is right
   }
   if (y == null) {
-    yPos = rippleInner.parentElement.clientHeight / 2;
+    yPos = parentHeight / 2;
     height = yPos;
-  } else if (y >= rippleInner.parentElement.clientHeight / 2) {
+  } else if (y >= parentHeight / 2) {
     height = y;
     // furthest vertical side is bottom
   } else {
-    height = rippleInner.parentElement.clientHeight - y;
+    height = parentHeight - y;
     // furthest vertical side is top
   }
   const hypotenuse = Math.sqrt((width * width) + (height * height));
@@ -82,8 +85,7 @@ export function drawRipple(rippleInner, initiator) {
  * @return {void}
  */
 export function onAnimationEnd(event) {
-  /** @type {HTMLElement} */
-  const rippleInner = (event.currentTarget);
+  const rippleInner = /** @type {HTMLElement} */ (event.currentTarget);
   if (event.animationName === 'ripple-fade-in' || event.animationName === 'ripple-fade-in-repeat') {
     rippleInner.setAttribute('mdw-fade-in-complete', '');
     return;
@@ -121,15 +123,12 @@ export function clearRipple(rippleInner) {
  * @return {void}
  */
 export function onMouseDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  const rippleContainer = /** @type {HTMLElement} */ (getChildElementByClass(element, 'mdw-ripple__container'));
   if (!rippleContainer) {
     return;
   }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
+  const rippleInner = /** @type {HTMLElement} */ (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
   if (!rippleInner) {
     return;
   }
@@ -149,15 +148,12 @@ export function onMouseDown(event) {
  * @return {void}
  */
 export function onTouchStart(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  const rippleContainer = /** @type {HTMLElement} */ (getChildElementByClass(element, 'mdw-ripple__container'));
   if (!rippleContainer) {
     return;
   }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
+  const rippleInner = /** @type {HTMLElement} */ (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
   if (!rippleInner) {
     return;
   }
@@ -177,15 +173,12 @@ export function onTouchStart(event) {
  * @return {void}
  */
 export function onClick(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  const rippleContainer = /** @type {HTMLElement} */ (getChildElementByClass(element, 'mdw-ripple__container'));
   if (!rippleContainer) {
     return;
   }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
+  const rippleInner = /** @type {HTMLElement} */ (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
   if (!rippleInner) {
     return;
   }
@@ -199,7 +192,7 @@ export function onClick(event) {
   }
   updateRipplePosition(rippleInner);
   drawRipple(rippleInner, 'key');
-  nextTick(() => {
+  requestAnimationFrame(() => {
     clearRipple(rippleInner);
   });
 }
@@ -209,20 +202,17 @@ export function onClick(event) {
  * @return {void}
  */
 export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const rippleContainer = (getChildElementByClass(element, 'mdw-ripple__container'));
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
+  const rippleContainer = /** @type {HTMLElement} */ (getChildElementByClass(element, 'mdw-ripple__container'));
   if (!rippleContainer) {
     return;
   }
-  /** @type {HTMLElement} */
-  const rippleInner = (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
+  const rippleInner = /** @type {HTMLElement} */ (getChildElementByClass(rippleContainer, 'mdw-ripple__inner'));
   if (!rippleInner) {
     return;
   }
 
-  nextTick(() => {
+  requestAnimationFrame(() => {
     if (isActive(rippleContainer.parentElement)) {
       if (rippleInner.getAttribute('mdw-fade-in') === 'key') {
         return;
@@ -244,7 +234,7 @@ export function attach(element) {
     rippleContainer.classList.add('mdw-ripple__container');
     rippleContainer.setAttribute('role', 'presentation');
     if (element.firstChild) {
-      element.insertBefore(rippleContainer, element.firstChild);
+      element.prepend(rippleContainer);
     } else {
       element.appendChild(rippleContainer);
     }
@@ -262,11 +252,11 @@ export function attach(element) {
   rippleInner.removeAttribute('mdw-fade-in-complete');
   rippleInner.removeAttribute('mdw-fade-out');
   element.setAttribute('mdw-ripple-js', '');
-  element.addEventListener('click', onClick, getPassiveEventListenerOption());
-  element.addEventListener('mousedown', onMouseDown, getPassiveEventListenerOption());
-  element.addEventListener('touchstart', onTouchStart, getPassiveEventListenerOption());
-  element.addEventListener('keydown', onKeyDown, getPassiveEventListenerOption());
-  rippleInner.addEventListener('animationend', onAnimationEnd, getPassiveEventListenerOption());
+  element.addEventListener('click', onClick, { passive: true });
+  element.addEventListener('mousedown', onMouseDown, { passive: true });
+  element.addEventListener('touchstart', onTouchStart, { passive: true });
+  element.addEventListener('keydown', onKeyDown, { passive: true });
+  rippleInner.addEventListener('animationend', onAnimationEnd, { passive: true });
 }
 
 /**
@@ -274,7 +264,9 @@ export function attach(element) {
  * @return {void}
  */
 export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-ripple'), attach);
+  for (const el of root.getElementsByClassName('mdw-ripple')) {
+    attach(el);
+  }
 }
 
 /**

package/core/theme/_aliases.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use './_config.scss' as *;
+@use './_palettes.scss' as *;
+@use './_functions.scss' as *;
+
+:root {
+  @each $aliasKey in map.keys($alias) {
+    $paletteKey: map.get($alias, $aliasKey);
+    $palette: map.get($palettes, $paletteKey);
+    @each $toneKey in getAllTones() {
+      $tone: map.get($palette, $toneKey);
+      --mdw-alias-#{$aliasKey}-#{$toneKey}: var(--mdw-palette-#{$paletteKey}-#{$toneKey});
+    }
+  }
+}

package/core/theme/_config.scss

@@ -1,2 +1,8 @@
-@forward './_variables.scss';
-@forward './_palettes.scss';
+$alias: (
+  'primary': 'blue',
+  'secondary': 'pink',
+  'warn': 'red',
+  'background': 'gray'
+) !default;
+$ink-tones: ("A100", "A200", "A400", "A700") !default;
+$surface-tones: ("50", "100", "200", "300", "400", "500", "600", "700", "800", "900") !default;

package/core/theme/_functions.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use './_config.scss' as *;
+@use './_palettes.scss' as *;
+
+@function getRGB($item) {
+  @return red($item),green($item),blue($item);
+}
+
+@function getAllTones() {
+  $result: ();
+  @each $toneKey in $ink-tones {
+    @if (index($result, $toneKey) == null) {
+      $result: append($result, $toneKey);
+    }
+  }
+  @each $toneKey in $surface-tones {
+    @if (index($result, $toneKey) == null) {
+      $result: append($result, $toneKey);
+    }
+  }
+  @return $result;
+}

package/core/theme/_palettes.scss

@@ -1,6 +1,5 @@
 // https://material.io/guidelines/style/color.html#color-color-tool
 
-
 $bluePalette: (
   "50": #E3F2FD,
   "100": #BBDEFB,

package/core/theme/_theme.scss

@@ -0,0 +1,268 @@
+@use 'sass:map';
+@use 'sass:list';
+@use './_config.scss' as *;
+@use './_palettes.scss' as *;
+@use './_functions.scss' as *;
+
+:root {
+  --mdw-ink-default-light: 0,0,0;
+  --mdw-high-opacity-light: 0.87;
+  --mdw-medium-opacity-light: 0.60;
+  --mdw-inactive-opacity-light: 0.38;
+  --mdw-divider-opacity-light: 0.12;
+  --mdw-ink-default-dark: 255,255,255;
+  --mdw-high-opacity-dark: 1.00;
+  --mdw-medium-opacity-dark: 0.70;
+  --mdw-inactive-opacity-dark: 0.50;
+  --mdw-divider-opacity-dark: 0.24;
+  --mdw-surface-binary-light: 255,255,255;
+  --mdw-surface-binary-dark: 0,0,0;
+  --mdw-surface-card-light: 255,255,255;
+  --mdw-surface-card-dark: 18,18,18;
+
+  @each $paletteKey in map.keys($palettes) {
+    $palette: map.get($palettes, $paletteKey);
+    @each $toneKey in getAllTones() {
+      $tone: map.get($palette, $toneKey);
+      --mdw-palette-#{$paletteKey}-#{$toneKey}: #{getRGB($tone)};
+    }
+  }
+}
+
+.mdw-theme {
+  --mdw-text-color: RGBA(var(--mdw-ink-default), var(--mdw-high-opacity));
+  --mdw-medium-color: RGBA(var(--mdw-ink-default), var(--mdw-medium-opacity));
+  --mdw-inactive-color: RGBA(var(--mdw-ink-default), var(--mdw-inactive-opacity));
+  --mdw-divider-color: RGBA(var(--mdw-ink-default), var(--mdw-divider-opacity));
+}
+
+.mdw-theme[mdw-light] {
+  --mdw-ink-default: var(--mdw-ink-default-light);
+  --mdw-high-opacity: var(--mdw-high-opacity-light);
+  --mdw-medium-opacity: var(--mdw-medium-opacity-light);
+  --mdw-inactive-opacity: var(--mdw-inactive-opacity-light);
+  --mdw-divider-opacity: var(--mdw-divider-opacity-light);
+  --mdw-surface-binary: var(--mdw-surface-binary-light);
+  --mdw-surface-card: var(--mdw-surface-card-light);
+  @each $paletteKey in map.keys($palettes) {
+    $palette: map.get($palettes, $paletteKey);
+    --mdw-palette-#{$paletteKey}-surface-default: var(--mdw-palette-#{$paletteKey}-50);
+    --mdw-palette-#{$paletteKey}-surface-alt: var(--mdw-palette-#{$paletteKey}-100);
+    --mdw-palette-#{$paletteKey}-surface-alt2: var(--mdw-palette-#{$paletteKey}-200);
+    --mdw-palette-#{$paletteKey}-ink-default: var(--mdw-palette-#{$paletteKey}-A700);
+    --mdw-palette-#{$paletteKey}-ink-contrast: var(--mdw-palette-#{$paletteKey}-A700);
+    --mdw-palette-#{$paletteKey}-ink-light: var(--mdw-palette-#{$paletteKey}-A400);
+  }
+
+  @each $aliasKey in map.keys($alias) {
+    $paletteKey: map.get($alias, $aliasKey);
+    --mdw-alias-#{$aliasKey}-surface-default: var(--mdw-alias-#{$aliasKey}-50);
+    --mdw-alias-#{$aliasKey}-surface-alt: var(--mdw-alias-#{$aliasKey}-100);
+    --mdw-alias-#{$aliasKey}-surface-alt2: var(--mdw-alias-#{$aliasKey}-200);
+    --mdw-alias-#{$aliasKey}-ink-default: var(--mdw-alias-#{$aliasKey}-A700);
+    --mdw-alias-#{$aliasKey}-ink-contrast: var(--mdw-alias-#{$aliasKey}-A700);
+    --mdw-alias-#{$aliasKey}-ink-light: var(--mdw-alias-#{$aliasKey}-A400);
+  }
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-ink-default: var(--mdw-ink-default-dark);
+  --mdw-high-opacity: var(--mdw-high-opacity-dark);
+  --mdw-medium-opacity: var(--mdw-medium-opacity-dark);
+  --mdw-inactive-opacity: var(--mdw-inactive-opacity-dark);
+  --mdw-divider-opacity: var(--mdw-divider-opacity-dark);
+  --mdw-surface-binary: var(--mdw-surface-binary-dark);
+  --mdw-surface-card: var(--mdw-surface-card-dark);
+  @each $paletteKey in map.keys($palettes) {
+    $palette: map.get($palettes, $paletteKey);
+    --mdw-palette-#{$paletteKey}-surface-default: var(--mdw-palette-#{$paletteKey}-900);
+    --mdw-palette-#{$paletteKey}-surface-alt: var(--mdw-palette-#{$paletteKey}-800);
+    --mdw-palette-#{$paletteKey}-surface-alt2: var(--mdw-palette-#{$paletteKey}-700);
+    --mdw-palette-#{$paletteKey}-ink-default: var(--mdw-palette-#{$paletteKey}-A200);
+    --mdw-palette-#{$paletteKey}-ink-contrast: var(--mdw-palette-#{$paletteKey}-A100);
+    --mdw-palette-#{$paletteKey}-ink-light: var(--mdw-palette-#{$paletteKey}-A100);
+  }
+
+  @each $aliasKey in map.keys($alias) {
+    $paletteKey: map.get($alias, $aliasKey);
+    --mdw-alias-#{$aliasKey}-surface-default: var(--mdw-alias-#{$aliasKey}-900);
+    --mdw-alias-#{$aliasKey}-surface-alt: var(--mdw-alias-#{$aliasKey}-800);
+    --mdw-alias-#{$aliasKey}-surface-alt2: var(--mdw-alias-#{$aliasKey}-700);
+    --mdw-alias-#{$aliasKey}-ink-default: var(--mdw-alias-#{$aliasKey}-A200);
+    --mdw-alias-#{$aliasKey}-ink-contrast: var(--mdw-alias-#{$aliasKey}-A100);
+    --mdw-alias-#{$aliasKey}-ink-light: var(--mdw-alias-#{$aliasKey}-A100);
+  }
+}
+
+/** Surface Colors */
+
+.mdw-theme[mdw-surface] {
+  background-color: RGB(var(--mdw-surface));
+}
+
+svg.mdw-theme[mdw-surface] {
+  background-color: transparent;
+
+  fill: RGB(var(--mdw-surface));
+}
+
+.mdw-theme {
+  &[mdw-surface]:not([mdw-ink]) {
+    --mdw-ink: var(--mdw-ink-default);
+    --mdw-ink-opacity: var(--mdw-high-opacity);
+    color: RGBA(var(--mdw-ink), var(--mdw-ink-opacity));
+  }
+
+  &[mdw-surface="white"] {
+    --mdw-surface: 255,255,255;
+  }
+
+  &[mdw-surface="black"] {
+    --mdw-surface: 0,0,0;
+  }
+
+  &[mdw-surface="binary"] {
+    --mdw-surface: var(--mdw-surface-binary);
+  }
+
+  &[mdw-surface="card"] {
+    --mdw-surface: var(--mdw-surface-card);
+  }
+
+  @each $paletteKey in map.keys($palettes) {
+    $palette: map.get($palettes, $paletteKey);
+    &[mdw-surface~="#{$paletteKey}"] {
+      --mdw-surface: var(--mdw-palette-#{$paletteKey}-surface-default);
+      @each $toneKey in $surface-tones {
+        --mdw-surface-#{$toneKey}: var(--mdw-palette-#{$paletteKey}-#{$toneKey});
+      }
+    }
+    &[mdw-surface="#{$paletteKey} alt"] {
+      --mdw-surface: var(--mdw-palette-#{$paletteKey}-surface-alt);
+    }
+    &[mdw-surface="#{$paletteKey} alt2"] {
+      --mdw-surface: var(--mdw-palette-#{$paletteKey}-surface-alt2);
+    }
+  }
+
+  @each $aliasKey in map.keys($alias) {
+    &[mdw-surface~="#{$aliasKey}"] {
+      --mdw-surface: var(--mdw-alias-#{$aliasKey}-surface-default);
+      @each $toneKey in $surface-tones {
+        --mdw-surface-#{$toneKey}: var(--mdw-alias-#{$aliasKey}-#{$toneKey});
+      }
+    }
+    &[mdw-surface="#{$aliasKey} alt"] {
+      --mdw-surface: var(--mdw-alias-#{$aliasKey}-surface-alt);
+    }
+    &[mdw-surface="#{$aliasKey} alt2"] {
+      --mdw-surface: var(--mdw-alias-#{$aliasKey}-surface-alt2);
+    }
+  }
+
+  @each $tone in $surface-tones {
+    &[mdw-surface~="#{$tone}"] {
+      --mdw-surface: var(--mdw-surface-#{$tone});
+    }
+  }
+}
+
+/** Ink Color **/
+
+.mdw-theme {
+  &[mdw-ink] {
+    --mdw-ink: var(--mdw-ink-default);
+    --mdw-ink-opacity: 1;
+    color: RGBA(var(--mdw-ink), var(--mdw-ink-opacity));
+  }
+
+  &[mdw-ink=""],
+  &[mdw-ink~="default"] {
+    --mdw-ink: var(--mdw--ink-default);
+    --mdw-ink-opacity: var(--mdw-high-opacity);
+  }
+
+  &[mdw-ink~="white"] {
+    --mdw-ink: 255,255,255;
+  }
+
+  &[mdw-ink~="black"] {
+    --mdw-ink: 0,0,0;
+  }
+
+  @each $paletteKey in map.keys($palettes) {
+    $palette: map.get($palettes, $paletteKey);
+    &[mdw-ink~="#{$paletteKey}"] {
+      --mdw-ink: var(--mdw-palette-#{$paletteKey}-ink-default);
+      @each $toneKey in $ink-tones {
+        --mdw-ink-#{$toneKey}: var(--mdw-palette-#{$paletteKey}-#{$toneKey});
+      }
+    }
+    &[mdw-ink^="#{$paletteKey} contrast"] {
+      --mdw-ink: var(--mdw-palette-#{$paletteKey}-ink-contrast);
+    }
+    &[mdw-ink^="#{$paletteKey} light"] {
+      --mdw-ink: var(--mdw-palette-#{$paletteKey}-ink-light);
+    }
+  }
+
+  @each $aliasKey in map.keys($alias) {
+    &[mdw-ink~="#{$aliasKey}"] {
+      --mdw-ink: var(--mdw-alias-#{$aliasKey}-ink-default);
+      @each $toneKey in $ink-tones {
+        --mdw-ink-#{$toneKey}: var(--mdw-alias-#{$aliasKey}-#{$toneKey});
+      }
+    }
+    &[mdw-ink^="#{$aliasKey} contrast"] {
+      --mdw-ink: var(--mdw-alias-#{$aliasKey}-ink-contrast);
+    }
+    &[mdw-ink^="#{$aliasKey} light"] {
+      --mdw-ink: var(--mdw-palette-#{$aliasKey}-ink-light);
+    }
+  }
+
+  @each $tone in $ink-tones {
+    &[mdw-ink~="#{$tone}"] {
+      --mdw-ink: var(--mdw-ink-#{$tone});
+    }
+  }
+}
+
+/** Ink Opacity **/
+.mdw-theme {
+  &[mdw-ink~="solid"] {
+    --mdw-ink-opacity: 1;
+  }
+
+  &[mdw-ink~="high"] {
+    --mdw-ink-opacity: var(--mdw-high-opacity);
+  }
+
+  &[mdw-ink~="medium"] {
+    --mdw-ink-opacity: var(--mdw-medium-opacity);
+  }
+
+  &[mdw-ink~="inactive"] {
+    --mdw-ink-opacity: var(--mdw-inactive-opacity);
+  }
+
+  &[mdw-ink~="divider"] {
+    --mdw-ink-opacity: var(--mdw-divider-opacity);
+  }
+}
+
+/** Border Ink **/
+
+.mdw-theme {
+  &[mdw-border-ink] {
+    border-color: RGBA(var(--mdw-ink), var(--mdw-divider-opacity));
+  }
+
+  &[mdw-border-ink="default"] {
+    border-color: RGBA(var(--mdw-ink-default), var(--mdw-divider-opacity));
+  }
+
+  &[mdw-border-ink="none"] {
+    border-color: transparent;
+  }
+}

package/core/theme/index.scss

@@ -0,0 +1,4 @@
+@forward './_config.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';
+@forward './_aliases.scss';