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

package/dist/color/color-manager.service.d.ts

@@ -7,7 +7,7 @@ export declare class ColorManagerService {
     private schemeService;
     private colorMap;
     constructor(schemeService: SchemeService);
-    createOrUpdate(key: string, args: Partial<Omit<ColorOptions, 'name'>>): ColorEntity;
+    createOrUpdate(key: string, args: Partial<ColorOptions>): ColorEntity;
     remove(key: string): boolean;
     get(key: string): ColorEntity;
     getAll(): ReadonlyMap<string, ColorEntity>;

package/dist/color/color.service.d.ts

@@ -5,6 +5,7 @@ export declare class ColorService implements ColorInterface {
     private colorManagerService;
     constructor(colorManagerService: ColorManagerService);
     getAllColors(): ReadonlyMap<string, ColorEntity>;
+    addBaseColors(): void;
     addColor(key: string, color: ColorOptions): ColorEntity;
     addColors(colors: Record<string, ColorOptions>): ColorEntity[];
     getColor(key: string): ColorEntity;

package/dist/color/models/default-color.model.d.ts

@@ -1,4 +1,4 @@
 import { ColorOptions } from '../entities/color.entity';
 import { ColorManagerService } from '../color-manager.service';
 export type DynamicColorKey = 'background' | 'onBackground' | 'surface' | 'surfaceDim' | 'surfaceBright' | 'surfaceContainerLowest' | 'surfaceContainerLow' | 'surfaceContainer' | 'surfaceContainerHigh' | 'surfaceContainerHighest' | 'onSurface' | 'surfaceVariant' | 'onSurfaceVariant' | 'inverseSurface' | 'inverseOnSurface' | 'outline' | 'outlineVariant' | 'shadow' | 'scrim' | 'surfaceTint' | 'primary' | 'onPrimary' | 'primaryContainer' | 'onPrimaryContainer' | 'inversePrimary' | 'secondary' | 'onSecondary' | 'secondaryContainer' | 'onSecondaryContainer' | 'tertiary' | 'onTertiary' | 'tertiaryContainer' | 'onTertiaryContainer' | 'error' | 'onError' | 'errorContainer' | 'onErrorContainer' | 'primaryFixed' | 'primaryFixedDim' | 'onPrimaryFixed' | 'onPrimaryFixedVariant' | 'secondaryFixed' | 'secondaryFixedDim' | 'onSecondaryFixed' | 'onSecondaryFixedVariant' | 'tertiaryFixed' | 'tertiaryFixedDim' | 'onTertiaryFixed' | 'onTertiaryFixedVariant';
-export declare const DefaultColors: (colorManagerService: ColorManagerService) => Partial<Record<DynamicColorKey, Partial<Omit<ColorOptions, "name">>>>;
+export declare const defaultColors: (colorManagerService: ColorManagerService) => Partial<Record<DynamicColorKey, Partial<ColorOptions>>>;

package/dist/theme.cjs.development.js

@@ -845,7 +845,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 materialColorUtilities.hexFromArgb(this.getArgb());
@@ -917,7 +917,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 = materialColorUtilities.argbFromHex(this.options.sourceColorHex);
     var sourceColorHct = materialColorUtilities.Hct.fromInt(sourceColorArgb);
@@ -1143,6 +1143,344 @@ var ColorManagerService = /*#__PURE__*/function () {
 }();
 ColorManagerService = /*#__PURE__*/tslib.__decorate([/*#__PURE__*/common.Injectable(), /*#__PURE__*/tslib.__metadata("design:paramtypes", [SchemeService])], ColorManagerService);
 
+function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
+  var answer = tone;
+  var closestToChroma = materialColorUtilities.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 = materialColorUtilities.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 materialColorUtilities.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;
@@ -1161,23 +1499,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) {