@udixio/theme 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/theme.esm.js

@@ -1,7 +1,7 @@
 import { NestFactory } from '@nestjs/core';
 import { __decorate, __metadata } from 'tslib';
 import { Injectable, Module } from '@nestjs/common';
-import { lerp, Contrast, clampDouble, hexFromArgb, Hct, argbFromHex, TonalPalette } from '@material/material-color-utilities';
+import { lerp, Contrast, clampDouble, hexFromArgb, Hct, argbFromHex, DislikeAnalyzer, TonalPalette } from '@material/material-color-utilities';
 import mergeDeep from 'merge-deep';
 
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
@@ -841,7 +841,7 @@ var ColorEntity = /*#__PURE__*/function () {
   var _proto = ColorEntity.prototype;
   _proto.update = function update(args) {
     this.dynamicColor = null;
-    this.option = mergeDeep(this.option, args);
+    this.option = _extends({}, this.option, args);
   };
   _proto.getHex = function getHex() {
     return hexFromArgb(this.getArgb());
@@ -913,7 +913,7 @@ var SchemeService = /*#__PURE__*/function () {
   }
   var _proto = SchemeService.prototype;
   _proto.createOrUpdate = function createOrUpdate(options) {
-    this.options = mergeDeep(this.options, options);
+    this.options = mergeDeep(options, this.options);
     var palettes = new Map();
     var sourceColorArgb = argbFromHex(this.options.sourceColorHex);
     var sourceColorHct = Hct.fromInt(sourceColorArgb);
@@ -1139,6 +1139,344 @@ var ColorManagerService = /*#__PURE__*/function () {
 }();
 ColorManagerService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService])], ColorManagerService);
 
+function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
+  var answer = tone;
+  var closestToChroma = Hct.from(hue, chroma, tone);
+  if (closestToChroma.chroma < chroma) {
+    var chromaPeak = closestToChroma.chroma;
+    while (closestToChroma.chroma < chroma) {
+      answer += byDecreasingTone ? -1.0 : 1.0;
+      var potentialSolution = Hct.from(hue, chroma, answer);
+      if (chromaPeak > potentialSolution.chroma) {
+        break;
+      }
+      if (Math.abs(potentialSolution.chroma - chroma) < 0.4) {
+        break;
+      }
+      var potentialDelta = Math.abs(potentialSolution.chroma - chroma);
+      var currentDelta = Math.abs(closestToChroma.chroma - chroma);
+      if (potentialDelta < currentDelta) {
+        closestToChroma = potentialSolution;
+      }
+      chromaPeak = Math.max(chromaPeak, potentialSolution.chroma);
+    }
+  }
+  return answer;
+}
+var defaultColors = function defaultColors(colorManagerService) {
+  return {
+    background: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 6 : 98;
+      },
+      isBackground: true
+    },
+    onBackground: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 90 : 10;
+      },
+      background: function background(s) {
+        return colorManagerService.get('background').getDynamicColor();
+      },
+      contrastCurve: new ContrastCurve(3, 3, 4.5, 7)
+    },
+    surface: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 6 : 98;
+      },
+      isBackground: true
+    },
+    surfaceDim: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 6 : 87;
+      },
+      isBackground: true
+    },
+    surfaceBright: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 24 : 98;
+      },
+      isBackground: true
+    },
+    surfaceContainerLowest: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 4 : 100;
+      },
+      isBackground: true
+    },
+    surfaceContainerLow: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 10 : 96;
+      },
+      isBackground: true
+    },
+    surfaceContainer: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 12 : 94;
+      },
+      isBackground: true
+    },
+    surfaceContainerHigh: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 17 : 92;
+      },
+      isBackground: true
+    },
+    surfaceContainerHighest: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 22 : 90;
+      },
+      isBackground: true
+    },
+    onSurface: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 90 : 10;
+      },
+      background: function background(s) {
+        return highestSurface(s, colorManagerService);
+      },
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    },
+    surfaceVariant: {
+      palette: function palette(s) {
+        return s.getPalette('neutralVariant');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 30 : 90;
+      },
+      isBackground: true
+    },
+    onSurfaceVariant: {
+      palette: function palette(s) {
+        return s.getPalette('neutralVariant');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 80 : 30;
+      },
+      background: function background(s) {
+        return highestSurface(s, colorManagerService);
+      },
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    },
+    inverseSurface: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 90 : 20;
+      }
+    },
+    inverseOnSurface: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 20 : 95;
+      },
+      background: function background(s) {
+        return colorManagerService.get('inverseSurface').getDynamicColor();
+      },
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    },
+    outline: {
+      palette: function palette(s) {
+        return s.getPalette('neutralVariant');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 60 : 50;
+      },
+      background: function background(s) {
+        return highestSurface(s, colorManagerService);
+      },
+      contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7)
+    },
+    outlineVariant: {
+      palette: function palette(s) {
+        return s.getPalette('neutralVariant');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 30 : 80;
+      },
+      background: function background(s) {
+        return highestSurface(s, colorManagerService);
+      },
+      contrastCurve: new ContrastCurve(1, 1, 3, 7)
+    },
+    shadow: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return 0;
+      }
+    },
+    scrim: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return 0;
+      }
+    },
+    surfaceTint: {
+      palette: function palette(s) {
+        return s.getPalette('neutral');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 80 : 40;
+      },
+      isBackground: true
+    },
+    secondaryContainer: {
+      tone: function tone(s) {
+        var initialTone = s.isDark ? 30 : 90;
+        return findDesiredChromaByTone(s.getPalette('secondary').hue, s.getPalette('secondary').chroma, initialTone, !s.isDark);
+      }
+    },
+    onSecondaryContainer: {
+      tone: function tone(s) {
+        return DynamicColor.foregroundTone(colorManagerService.get('secondaryContainer').getDynamicColor().tone(s), 4.5);
+      }
+    },
+    tertiaryContainer: {
+      palette: function palette(s) {
+        return s.getPalette('tertiary');
+      },
+      tone: function tone(s) {
+        var proposedHct = s.getPalette('tertiary').getHct(s.sourceColorHct.tone);
+        return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+      }
+    },
+    onTertiaryContainer: {
+      palette: function palette(s) {
+        return s.getPalette('tertiary');
+      },
+      tone: function tone(s) {
+        return DynamicColor.foregroundTone(colorManagerService.get('tertiaryContainer').getDynamicColor().tone(s), 4.5);
+      }
+    },
+    error: {
+      palette: function palette(s) {
+        return s.getPalette('error');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 80 : 40;
+      },
+      isBackground: true,
+      background: function background(s) {
+        return highestSurface(s, colorManagerService);
+      },
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: function toneDeltaPair(s) {
+        return new ToneDeltaPair(colorManagerService.get('errorContainer').getDynamicColor(), colorManagerService.get('error').getDynamicColor(), 15, 'nearer', false);
+      }
+    },
+    onError: {
+      palette: function palette(s) {
+        return s.getPalette('error');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 20 : 100;
+      },
+      background: function background(s) {
+        return colorManagerService.get('error').getDynamicColor();
+      },
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    },
+    errorContainer: {
+      palette: function palette(s) {
+        return s.getPalette('error');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 30 : 90;
+      },
+      isBackground: true,
+      background: function background(s) {
+        return highestSurface(s, colorManagerService);
+      },
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: function toneDeltaPair(s) {
+        return new ToneDeltaPair(colorManagerService.get('errorContainer').getDynamicColor(), colorManagerService.get('error').getDynamicColor(), 15, 'nearer', false);
+      }
+    },
+    onErrorContainer: {
+      palette: function palette(s) {
+        return s.getPalette('error');
+      },
+      tone: function tone(s) {
+        return s.isDark ? 90 : 10;
+      },
+      background: function background(s) {
+        return colorManagerService.get('errorContainer').getDynamicColor();
+      },
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    },
+    onTertiaryFixed: {
+      palette: function palette(s) {
+        return s.getPalette('tertiary');
+      },
+      tone: function tone(s) {
+        return 10.0;
+      },
+      background: function background(s) {
+        return colorManagerService.get('tertiaryFixedDim').getDynamicColor();
+      },
+      secondBackground: function secondBackground(s) {
+        return colorManagerService.get('tertiaryFixed').getDynamicColor();
+      },
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    },
+    onTertiaryFixedVariant: {
+      palette: function palette(s) {
+        return s.getPalette('tertiary');
+      },
+      tone: function tone(s) {
+        return 30.0;
+      },
+      background: function background(s) {
+        return colorManagerService.get('tertiaryFixedDim').getDynamicColor();
+      },
+      secondBackground: function secondBackground(s) {
+        return colorManagerService.get('tertiaryFixed').getDynamicColor();
+      },
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    }
+  };
+};
+
 var ColorService = /*#__PURE__*/function () {
   function ColorService(colorManagerService) {
     this.colorManagerService = void 0;
@@ -1157,23 +1495,26 @@ var ColorService = /*#__PURE__*/function () {
   //
   //   return colors;
   // }
-  //
-  // addBaseColors() {
-  //   this.colorManagerService.addFromPalette('primary');
-  //   this.colorManagerService.addFromPalette('secondary');
-  //   this.colorManagerService.addFromPalette('tertiary');
-  //   for (const [key, value] of Object.entries(this.defaultColorModel.colors)) {
-  //     this.colorManagerService.createOrUpdate(key, value as any);
-  //   }
-  // }
   ;
+  _proto.addBaseColors = function addBaseColors() {
+    var _this = this;
+    this.colorManagerService.addFromPalette('primary');
+    this.colorManagerService.addFromPalette('secondary');
+    this.colorManagerService.addFromPalette('tertiary');
+    var colors = defaultColors(this.colorManagerService);
+    Object.keys(colors).map(function (key) {
+      var color = colors[key];
+      if (!color) return;
+      return _this.colorManagerService.createOrUpdate(key, color);
+    });
+  };
   _proto.addColor = function addColor(key, color) {
     return this.colorManagerService.createOrUpdate(key, color);
   };
   _proto.addColors = function addColors(colors) {
-    var _this = this;
+    var _this2 = this;
     return Object.keys(colors).map(function (key) {
-      return _this.addColor(key, colors[key]);
+      return _this2.addColor(key, colors[key]);
     });
   };
   _proto.getColor = function getColor(key) {