feat: move ColorService methods to standalone functions

Author: navix

README.md

@@ -264,25 +264,21 @@ constructor(private styler: StylerComponent) {
 }
 ```
 
-## Services
+## Helpers
 
-### `StylerDefService`
+### Styles definition
 
-* `pick(state: string, styles, default?: string)` - returns styles[state|default] 
-* `toggle(state: boolean, styles)` - returns styles if state is true
-* `merge` - js deepMerge, needed if states have $nest props
+* `defPick(state: string, styles, default?: string)` - returns styles[state|default] 
+* `defPick(state: boolean, styles)` - returns styles if state is true
+* `defPick` - js deepMerge, needed if states have $nest props
 
-### `StylerColorService`
+### Colors
 
-Service for color manipulating.
+Helpers for color manipulating.
 
 ```ts
-import { StylerColorService } from '@ngx-kit/styler';
 ...
-constructor(private color: StylerColorService) {
-}
-...
-background: this.darken(0.2, someColorVar),
+background: darken(0.2, someColorVar),
 ```
 
 * `adjustHue`

package/src/compiler/compiler.service.ts

@@ -1,7 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable } from '@angular/core';
 import { ɵSharedStylesHost as SharedStylesHost } from '@angular/platform-browser';
-import { processAutoPx } from '../helpers/process-auto-px';
+import { processAutoPx } from './process-auto-px';
 import { autoPx } from '../meta/compiler';
 import { StyleDef } from '../meta/def';
 import { Style } from '../meta/style';

package/src/helpers/process-auto-px.ts package/src/compiler/process-auto-px.tspackage/src/helpers/process-auto-px.ts renamed to package/src/compiler/process-auto-px.ts

@@ -1,4 +1,4 @@
-import { processAutoPx } from '../../helpers/process-auto-px';
+import { processAutoPx } from '../process-auto-px';
 import { CssBorder, CssBorderProps, CssBorderSmart } from '../../meta/style';
 import { isObject } from '../../utils/is-object';
 import { isUndefined } from '../../utils/is-undefined';

package/src/compiler/props/border.ts

@@ -1,4 +1,4 @@
-import { processAutoPx } from '../../helpers/process-auto-px';
+import { processAutoPx } from '../process-auto-px';
 import { CssMargin, CssMarginProps, CssMarginSmart } from '../../meta/style';
 import { isObject } from '../../utils/is-object';
 import { isUndefined } from '../../utils/is-undefined';

package/src/compiler/props/margin.ts

@@ -1,4 +1,4 @@
-import { processAutoPx } from '../../helpers/process-auto-px';
+import { processAutoPx } from '../process-auto-px';
 import { CssPadding, CssPaddingProps, CssPaddingSmart } from '../../meta/style';
 import { isObject } from '../../utils/is-object';
 import { isUndefined } from '../../utils/is-undefined';

package/src/compiler/props/padding.ts

@@ -0,0 +1,19 @@
+import { parseToHsl } from './parse-to-hsl';
+import { toColorString } from './to-color-string';
+
+/**
+ * Changes the hue of the color. Hue is a number between 0 to 360. The first
+ * argument for adjustHue is the amount of degrees the color is rotated along
+ * the color wheel.
+ *
+ * @example
+ *   background: adjustHue(180, '#448'),
+ *   background: adjustHue(180, 'rgba(101,100,205,0.7)'),
+ */
+export function adjustHue(degree: number, color: string): string {
+  const hslColor = parseToHsl(color);
+  return toColorString({
+    ...hslColor,
+    hue: (hslColor.hue + degree) % 360,
+  });
+}

package/src/helpers/color/adjust-hue.ts

@@ -0,0 +1,17 @@
+import { parseToHsl } from './parse-to-hsl';
+import { toColorString } from './to-color-string';
+
+/**
+ * Returns the complement of the provided color. This is identical to adjustHue(180, <color>).
+ *
+ * @example
+ *   background: complement('#448'),
+ *   background: complement('rgba(204,205,100,0.7)'),
+ */
+export function complement(color: string): string {
+  const hslColor = parseToHsl(color);
+  return toColorString({
+    ...hslColor,
+    hue: (hslColor.hue + 180) % 360,
+  });
+}

package/src/helpers/color/complement.ts

@@ -0,0 +1,18 @@
+import { guard } from '../../utils/guard';
+import { parseToHsl } from './parse-to-hsl';
+import { toColorString } from './to-color-string';
+
+/**
+ * Returns a string value for the darkened color.
+ *
+ * @example
+ * background: darken(0.2, '#FFCD64')
+ * background: darken(0.2, 'rgba(255,205,100,0.7)')
+ */
+export function darken(amount: number, color: string): string {
+  const hslColor = parseToHsl(color);
+  return toColorString({
+    ...hslColor,
+    lightness: guard(0, 1, hslColor.lightness - amount),
+  });
+}

package/src/helpers/color/darken.ts

@@ -0,0 +1,20 @@
+import { guard } from '../../utils/guard';
+import { parseToHsl } from './parse-to-hsl';
+import { toColorString } from './to-color-string';
+
+/**
+ * Decreases the intensity of a color. Its range is between 0 to 1. The first
+ * argument of the desaturate function is the amount by how much the color
+ * intensity should be decreased.
+ *
+ * @example
+ *   background: desaturate(0.2, '#CCCD64'),
+ *   background: desaturate(0.2, 'rgba(204,205,100,0.7)'),
+ */
+export function desaturate(amount: number, color: string): string {
+  const hslColor = parseToHsl(color);
+  return toColorString({
+    ...hslColor,
+    saturation: guard(0, 1, hslColor.saturation - amount),
+  });
+}