@softheon/armature 17.25.0 → 17.25.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/_typography.scss +4 -4
- package/assets/styles/material-override/_tooltip.scss +2 -2
- package/esm2022/ag-grid-components/src/sof-table/sof-table.component.mjs +3 -3
- package/esm2022/lib/base-components/sof-callout/sof-callout.component.mjs +3 -3
- package/esm2022/lib/theming/theme-api.mjs +1 -3
- package/esm2022/lib/theming/theme.module.mjs +3 -6
- package/fesm2022/softheon-armature-ag-grid-components.mjs +2 -2
- package/fesm2022/softheon-armature-ag-grid-components.mjs.map +1 -1
- package/fesm2022/softheon-armature.mjs +5 -126
- package/fesm2022/softheon-armature.mjs.map +1 -1
- package/lib/theming/theme-api.d.ts +0 -2
- package/package.json +1 -4
- package/ag-grid-components/package.json +0 -3
- package/esm2022/lib/theming/models/brandPalette.mjs +0 -4
- package/esm2022/lib/theming/services/theme2.service.mjs +0 -119
- package/lib/theming/models/brandPalette.d.ts +0 -52
- package/lib/theming/services/theme2.service.d.ts +0 -55
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
/** Public API Surface of Theming */
|
|
2
2
|
export * from './theme.module';
|
|
3
3
|
export * from './services/theme.service';
|
|
4
|
-
export * from './services/theme2.service';
|
|
5
4
|
export * from './directives/css-override.directive';
|
|
6
5
|
export { CssOverride, Attribute } from './models/css-override';
|
|
7
|
-
export * from './models/brandPalette';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@softheon/armature",
|
|
3
|
-
"version": "17.25.
|
|
3
|
+
"version": "17.25.2",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"tslib": "^2.5.0"
|
|
6
6
|
},
|
|
@@ -32,9 +32,6 @@
|
|
|
32
32
|
},
|
|
33
33
|
"ag-grid-angular": {
|
|
34
34
|
"optional": true
|
|
35
|
-
},
|
|
36
|
-
"tinycolor2": {
|
|
37
|
-
"optional": true
|
|
38
35
|
}
|
|
39
36
|
},
|
|
40
37
|
"module": "fesm2022/softheon-armature.mjs",
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
;
|
|
2
|
-
;
|
|
3
|
-
export {};
|
|
4
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJhbmRQYWxldHRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXJtYXR1cmUvc3JjL2xpYi90aGVtaW5nL21vZGVscy9icmFuZFBhbGV0dGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0MsQ0FBQztBQStDRCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXHJcbiAqIFRoZSBicmFuZCB0aGVtZSBwYWxldHRlXHJcbiovXHJcbmV4cG9ydCBpbnRlcmZhY2UgQnJhbmRQYWxldHRlIHtcclxuICBwcmltYXJ5Q29sb3I/OiBCcmFuZFBhbGV0dGVWYWx1ZXM7XHJcbn07XHJcblxyXG4vKiogXHJcbiAqIFRoZSBicmFuZCB0aGVtZSBwYWxldHRlIHZhbHVlIGtleXNcclxuICogQG5vdGUgYWxsIGNvbG9yIHZhbHVlcyBzaG91bGQgYmUgaW4gNi1kaWdpdCBoZXggZm9ybWF0ICgjMUEyQjNDKVxyXG4qL1xyXG5leHBvcnQgaW50ZXJmYWNlIEJyYW5kUGFsZXR0ZVZhbHVlcyB7IFxyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgNTAgcGFsZXR0ZSBjb2xvclxyXG4gICAgICovXHJcbiAgICBmaWZ0eTogc3RyaW5nO1xyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgMTAwIHBhbGV0dGUgY29sb3JcclxuICAgICAqL1xyXG4gICAgb25lSHVuZHJlZDogc3RyaW5nO1xyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgMjAwIHBhbGV0dGUgY29sb3JcclxuICAgICAqL1xyXG4gICAgdHdvSHVuZHJlZDogc3RyaW5nO1xyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgMzAwIHBhbGV0dGUgY29sb3JcclxuICAgICAqL1xyXG4gICAgdGhyZWVIdW5kcmVkOiBzdHJpbmc7XHJcbiAgICAvKipcclxuICAgICAqIFRoZSA0MDAgcGFsZXR0ZSBjb2xvclxyXG4gICAgICovXHJcbiAgICBmb3VySHVuZHJlZDogc3RyaW5nO1xyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgNTAwIHBhbGV0dGUgY29sb3JcclxuICAgICAqL1xyXG4gICAgZml2ZUh1bmRyZWQ6IHN0cmluZztcclxuICAgIC8qKlxyXG4gICAgICogVGhlIDYwMCBwYWxldHRlIGNvbG9yXHJcbiAgICAgKi9cclxuICAgIHNpeEh1bmRyZWQ6IHN0cmluZztcclxuICAgIC8qKlxyXG4gICAgICogVGhlIDcwMCBwYWxldHRlIGNvbG9yXHJcbiAgICAgKi9cclxuICAgIHNldmVuSHVuZHJlZDogc3RyaW5nO1xyXG4gICAgLyoqXHJcbiAgICAgKiBUaGUgODAwIHBhbGV0dGUgY29sb3JcclxuICAgICAqL1xyXG4gICAgZWlnaHRIdW5kcmVkOiBzdHJpbmc7XHJcbiAgICAvKipcclxuICAgICAqIFRoZSA5MDAgcGFsZXR0ZSBjb2xvclxyXG4gICAgICovXHJcbiAgICBuaW5lSHVuZHJlZDogc3RyaW5nO1xyXG59O1xyXG4iXX0=
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { inject, Injectable } from '@angular/core';
|
|
2
|
-
import { DOCUMENT } from '@angular/common';
|
|
3
|
-
import tinycolor from 'tinycolor2';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
/**
|
|
6
|
-
* The Theme2 Service
|
|
7
|
-
* @description Intended to simplify the required theme config needed for a clients 'theme.json' in switchboard.
|
|
8
|
-
* - This service takes the primary brand palette (50 - 900) only
|
|
9
|
-
* - Maps all the alpha channel values (A50 - A900) based on design specs
|
|
10
|
-
* - Maps all the WCAG compliant readable text contrast (50 - 900, A50 - A900)
|
|
11
|
-
* @see [Figma/branding]({@link https://www.figma.com/design/W5HVNCcN9HafDRvc5N7Z28/Softheon-Unified-Design-System?node-id=6376-65941&p=f&t=y8uO8TtErSbfXTOu-0})
|
|
12
|
-
* @example
|
|
13
|
-
* ```json
|
|
14
|
-
"primaryColor": {
|
|
15
|
-
"fifty": "#EFE8F3",
|
|
16
|
-
"oneHundred": "#D8C5E0",
|
|
17
|
-
"twoHundred": "#BE9FCC",
|
|
18
|
-
"threeHundred": "#A479B7",
|
|
19
|
-
"fourHundred": "#915CA7",
|
|
20
|
-
"fiveHundred": "#7D3F98",
|
|
21
|
-
"sixHundred": "#753990",
|
|
22
|
-
"sevenHundred": "#6A3185",
|
|
23
|
-
"eightHundred": "#60297B",
|
|
24
|
-
"nineHundred": "#4D1B6A"
|
|
25
|
-
}
|
|
26
|
-
* ```
|
|
27
|
-
@note Using this service requires 'tinycolor2' to be installed
|
|
28
|
-
@see [NPM/tinycolor2]({@link https://www.npmjs.com/package/tinycolor2})
|
|
29
|
-
*/
|
|
30
|
-
export class ThemeService2 {
|
|
31
|
-
constructor() {
|
|
32
|
-
this.document = inject(DOCUMENT);
|
|
33
|
-
/** Alpha channels % to add to primary-500 rgb */
|
|
34
|
-
this.rgbAlphaChannelsMap = {
|
|
35
|
-
A50: '0.04',
|
|
36
|
-
A100: '0.08',
|
|
37
|
-
A200: '0.16',
|
|
38
|
-
A300: '0.24',
|
|
39
|
-
A400: '0.32',
|
|
40
|
-
A500: '0.40',
|
|
41
|
-
A600: '0.48',
|
|
42
|
-
A700: '0.56',
|
|
43
|
-
A800: '0.64',
|
|
44
|
-
A900: '0.72'
|
|
45
|
-
};
|
|
46
|
-
/** Palette keys map */
|
|
47
|
-
this.colorKeysMap = {
|
|
48
|
-
fifty: '50',
|
|
49
|
-
oneHundred: '100',
|
|
50
|
-
twoHundred: '200',
|
|
51
|
-
threeHundred: '300',
|
|
52
|
-
fourHundred: '400',
|
|
53
|
-
fiveHundred: '500',
|
|
54
|
-
sixHundred: '600',
|
|
55
|
-
sevenHundred: '700',
|
|
56
|
-
eightHundred: '800',
|
|
57
|
-
nineHundred: '900'
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Initializes the palette
|
|
62
|
-
* @param brandConfig The brand palette configuration
|
|
63
|
-
*/
|
|
64
|
-
initBrandPalette(brandConfig) {
|
|
65
|
-
const notEmpty = (obj) => !!obj && typeof obj === 'object' && Object.keys(obj).length > 0;
|
|
66
|
-
if (notEmpty(brandConfig) && notEmpty(brandConfig.primaryColor)) {
|
|
67
|
-
// update main values 50 - 900 w/contrast ...
|
|
68
|
-
Object.entries(brandConfig.primaryColor).forEach(([key, value]) => {
|
|
69
|
-
this.updateColorVariable(this.colorKeysMap[key], value);
|
|
70
|
-
this.updateContrastVariable(this.colorKeysMap[key], value);
|
|
71
|
-
});
|
|
72
|
-
// update alpha values A50 - A900 w/contrast ...
|
|
73
|
-
const primary500rgb = tinycolor(brandConfig.primaryColor.fiveHundred).toRgbString();
|
|
74
|
-
Object.entries(this.rgbAlphaChannelsMap).forEach(([key, value]) => {
|
|
75
|
-
const primary500rgb_Alpha = tinycolor(primary500rgb).setAlpha(+value).toRgbString();
|
|
76
|
-
this.updateColorVariable(key, primary500rgb_Alpha);
|
|
77
|
-
this.updateContrastVariable(key, primary500rgb_Alpha);
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
console.warn("No palette provided in theme config, using default palette");
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Updates the color CSS variable
|
|
87
|
-
* @param part The color key to update
|
|
88
|
-
* @param value The value to set
|
|
89
|
-
*/
|
|
90
|
-
updateColorVariable(part, value) {
|
|
91
|
-
if (!part || !value)
|
|
92
|
-
return;
|
|
93
|
-
const cssVar = `--primary-color-${part}-parts`;
|
|
94
|
-
this.document.documentElement.style.setProperty(cssVar, value);
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* Updates the contrast (readable text) color CSS variable
|
|
98
|
-
* @param part The color key to update
|
|
99
|
-
* @param value The value to set
|
|
100
|
-
* @note Value set will be WCAG compliant for 'AA', 'small-text'
|
|
101
|
-
* @note If both white & black are valid, will favor white for text color
|
|
102
|
-
*/
|
|
103
|
-
updateContrastVariable(part, value) {
|
|
104
|
-
if (!part || !value)
|
|
105
|
-
return;
|
|
106
|
-
const readableTextColor = tinycolor.isReadable('#FFFFFF', value) && !part.startsWith('A') ? '#FFFFFF' : 'rgba(0, 0, 0, 0.87)';
|
|
107
|
-
const cssVar = `--primary-color-contrast-${part}-parts`;
|
|
108
|
-
this.document.documentElement.style.setProperty(cssVar, readableTextColor);
|
|
109
|
-
}
|
|
110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ThemeService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
111
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ThemeService2, providedIn: 'root' }); }
|
|
112
|
-
}
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ThemeService2, decorators: [{
|
|
114
|
-
type: Injectable,
|
|
115
|
-
args: [{
|
|
116
|
-
providedIn: 'root'
|
|
117
|
-
}]
|
|
118
|
-
}] });
|
|
119
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hcm1hdHVyZS9zcmMvbGliL3RoZW1pbmcvc2VydmljZXMvdGhlbWUyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRTNDLE9BQU8sU0FBUyxNQUFNLFlBQVksQ0FBQzs7QUFFbkM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXdCRTtBQUlGLE1BQU0sT0FBTyxhQUFhO0lBSDFCO1FBSW1CLGFBQVEsR0FBYSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFFdkQsaURBQWlEO1FBQ2hDLHdCQUFtQixHQUFHO1lBQ3JDLEdBQUcsRUFBRSxNQUFNO1lBQ1gsSUFBSSxFQUFFLE1BQU07WUFDWixJQUFJLEVBQUUsTUFBTTtZQUNaLElBQUksRUFBRSxNQUFNO1lBQ1osSUFBSSxFQUFFLE1BQU07WUFDWixJQUFJLEVBQUUsTUFBTTtZQUNaLElBQUksRUFBRSxNQUFNO1lBQ1osSUFBSSxFQUFFLE1BQU07WUFDWixJQUFJLEVBQUUsTUFBTTtZQUNaLElBQUksRUFBRSxNQUFNO1NBQ2IsQ0FBQztRQUVGLHVCQUF1QjtRQUNOLGlCQUFZLEdBQUc7WUFDOUIsS0FBSyxFQUFFLElBQUk7WUFDWCxVQUFVLEVBQUUsS0FBSztZQUNqQixVQUFVLEVBQUUsS0FBSztZQUNqQixZQUFZLEVBQUUsS0FBSztZQUNuQixXQUFXLEVBQUUsS0FBSztZQUNsQixXQUFXLEVBQUUsS0FBSztZQUNsQixVQUFVLEVBQUUsS0FBSztZQUNqQixZQUFZLEVBQUUsS0FBSztZQUNuQixZQUFZLEVBQUUsS0FBSztZQUNuQixXQUFXLEVBQUUsS0FBSztTQUNuQixDQUFDO0tBbURIO0lB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bmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBET0NVTUVOVCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IEJyYW5kUGFsZXR0ZSB9IGZyb20gJy4uL21vZGVscy9icmFuZFBhbGV0dGUnO1xyXG5pbXBvcnQgdGlueWNvbG9yIGZyb20gJ3Rpbnljb2xvcjInO1xyXG5cclxuLyoqIFxyXG4gKiBUaGUgVGhlbWUyIFNlcnZpY2UgXHJcbiAqIEBkZXNjcmlwdGlvbiBJbnRlbmRlZCB0byBzaW1wbGlmeSB0aGUgcmVxdWlyZWQgdGhlbWUgY29uZmlnIG5lZWRlZCBmb3IgYSBjbGllbnRzICd0aGVtZS5qc29uJyBpbiBzd2l0Y2hib2FyZC5cclxuICogLSBUaGlzIHNlcnZpY2UgdGFrZXMgdGhlIHByaW1hcnkgYnJhbmQgcGFsZXR0ZSAoNTAgLSA5MDApIG9ubHlcclxuICogLSBNYXBzIGFsbCB0aGUgYWxwaGEgY2hhbm5lbCB2YWx1ZXMgKEE1MCAtIEE5MDApIGJhc2VkIG9uIGRlc2lnbiBzcGVjc1xyXG4gKiAtIE1hcHMgYWxsIHRoZSBXQ0FHIGNvbXBsaWFudCByZWFkYWJsZSB0ZXh0IGNvbnRyYXN0ICg1MCAtIDkwMCwgQTUwIC0gQTkwMClcclxuICogQHNlZSBbRmlnbWEvYnJhbmRpbmddKHtAbGluayBodHRwczovL3d3dy5maWdtYS5jb20vZGVzaWduL1c1SFZOQ2NOOUhhZkRSdmM1TjdaMjgvU29mdGhlb24tVW5pZmllZC1EZXNpZ24tU3lzdGVtP25vZGUtaWQ9NjM3Ni02NTk0MSZwPWYmdD15OHVPOFR0RXJTYmZYVE91LTB9KVxyXG4gKiBAZXhhbXBsZSBcclxuICogYGBganNvblxyXG4gIFwicHJpbWFyeUNvbG9yXCI6IHtcclxuICAgIFwiZmlmdHlcIjogXCIjRUZFOEYzXCIsXHJcbiAgICBcIm9uZUh1bmRyZWRcIjogXCIjRDhDNUUwXCIsXHJcbiAgICBcInR3b0h1bmRyZWRcIjogXCIjQkU5RkNDXCIsXHJcbiAgICBcInRocmVlSHVuZHJlZFwiOiBcIiNBNDc5QjdcIixcclxuICAgIFwiZm91ckh1bmRyZWRcIjogXCIjOTE1Q0E3XCIsXHJcbiAgICBcImZpdmVIdW5kcmVkXCI6IFwiIzdEM0Y5OFwiLFxyXG4gICAgXCJzaXhIdW5kcmVkXCI6IFwiIzc1Mzk5MFwiLFxyXG4gICAgXCJzZXZlbkh1bmRyZWRcIjogXCIjNkEzMTg1XCIsXHJcbiAgICBcImVpZ2h0SHVuZHJlZFwiOiBcIiM2MDI5N0JcIixcclxuICAgIFwibmluZUh1bmRyZWRcIjogXCIjNEQxQjZBXCJcclxuICB9XHJcbiAqIGBgYFxyXG4gIEBub3RlIFVzaW5nIHRoaXMgc2VydmljZSByZXF1aXJlcyAndGlueWNvbG9yMicgdG8gYmUgaW5zdGFsbGVkIFxyXG4gIEBzZWUgW05QTS90aW55Y29sb3IyXSh7QGxpbmsgaHR0cHM6Ly93d3cubnBtanMuY29tL3BhY2thZ2UvdGlueWNvbG9yMn0pXHJcbiovXHJcbkBJbmplY3RhYmxlKHtcclxuICBwcm92aWRlZEluOiAncm9vdCdcclxufSlcclxuZXhwb3J0IGNsYXNzIFRoZW1lU2VydmljZTIge1xyXG4gIHByaXZhdGUgcmVhZG9ubHkgZG9jdW1lbnQ6IERvY3VtZW50ID0gaW5qZWN0KERPQ1VNRU5UKTtcclxuXHJcbiAgLyoqIEFscGhhIGNoYW5uZWxzICUgdG8gYWRkIHRvIHByaW1hcnktNTAwIHJnYiAqL1xyXG4gIHByaXZhdGUgcmVhZG9ubHkgcmdiQWxwaGFDaGFubmVsc01hcCA9IHtcclxuICAgIEE1MDogJzAuMDQnLFxyXG4gICAgQTEwMDogJzAuMDgnLFxyXG4gICAgQTIwMDogJzAuMTYnLFxyXG4gICAgQTMwMDogJzAuMjQnLFxyXG4gICAgQTQwMDogJzAuMzInLFxyXG4gICAgQTUwMDogJzAuNDAnLFxyXG4gICAgQTYwMDogJzAuNDgnLFxyXG4gICAgQTcwMDogJzAuNTYnLFxyXG4gICAgQTgwMDogJzAuNjQnLFxyXG4gICAgQTkwMDogJzAuNzInXHJcbiAgfTtcclxuXHJcbiAgLyoqIFBhbGV0dGUga2V5cyBtYXAgKi9cclxuICBwcml2YXRlIHJlYWRvbmx5IGNvbG9yS2V5c01hcCA9IHtcclxuICAgIGZpZnR5OiAnNTAnLFxyXG4gICAgb25lSHVuZHJlZDogJzEwMCcsXHJcbiAgICB0d29IdW5kcmVkOiAnMjAwJyxcclxuICAgIHRocmVlSHVuZHJlZDogJzMwMCcsXHJcbiAgICBmb3VySHVuZHJlZDogJzQwMCcsXHJcbiAgICBmaXZlSHVuZHJlZDogJzUwMCcsXHJcbiAgICBzaXhIdW5kcmVkOiAnNjAwJyxcclxuICAgIHNldmVuSHVuZHJlZDogJzcwMCcsXHJcbiAgICBlaWdodEh1bmRyZWQ6ICc4MDAnLFxyXG4gICAgbmluZUh1bmRyZWQ6ICc5MDAnXHJcbiAgfTtcclxuXHJcbiAgLyoqXHJcbiAgICogSW5pdGlhbGl6ZXMgdGhlIHBhbGV0dGVcclxuICAgKiBAcGFyYW0gYnJhbmRDb25maWcgVGhlIGJyYW5kIHBhbGV0dGUgY29uZmlndXJhdGlvblxyXG4gICovXHJcbiAgcHVibGljIGluaXRCcmFuZFBhbGV0dGUoYnJhbmRDb25maWc6IEJyYW5kUGFsZXR0ZSk6IHZvaWQge1xyXG4gICAgY29uc3Qgbm90RW1wdHkgPSAob2JqOiB1bmtub3duKTogYm9vbGVhbiA9PiAhIW9iaiAmJiB0eXBlb2Ygb2JqID09PSAnb2JqZWN0JyAmJiBPYmplY3Qua2V5cyhvYmopLmxlbmd0aCA+IDA7XHJcbiAgICBpZiAobm90RW1wdHkoYnJhbmRDb25maWcpICYmIG5vdEVtcHR5KGJyYW5kQ29uZmlnLnByaW1hcnlDb2xvcikpIHtcclxuICAgICAgLy8gdXBkYXRlIG1haW4gdmFsdWVzIDUwIC0gOTAwIHcvY29udHJhc3QgLi4uIFxyXG4gICAgICBPYmplY3QuZW50cmllcyhicmFuZENvbmZpZy5wcmltYXJ5Q29sb3IpLmZvckVhY2goKFtrZXksIHZhbHVlXSkgPT4ge1xyXG4gICAgICAgIHRoaXMudXBkYXRlQ29sb3JWYXJpYWJsZSh0aGlzLmNvbG9yS2V5c01hcFtrZXldLCB2YWx1ZSk7XHJcbiAgICAgICAgdGhpcy51cGRhdGVDb250cmFzdFZhcmlhYmxlKHRoaXMuY29sb3JLZXlzTWFwW2tleV0sIHZhbHVlKTtcclxuICAgICAgfSk7XHJcbiAgICAgIC8vIHVwZGF0ZSBhbHBoYSB2YWx1ZXMgQTUwIC0gQTkwMCB3L2NvbnRyYXN0IC4uLiBcclxuICAgICAgY29uc3QgcHJpbWFyeTUwMHJnYjogc3RyaW5nID0gdGlueWNvbG9yKGJyYW5kQ29uZmlnLnByaW1hcnlDb2xvci5maXZlSHVuZHJlZCkudG9SZ2JTdHJpbmcoKTtcclxuICAgICAgT2JqZWN0LmVudHJpZXModGhpcy5yZ2JBbHBoYUNoYW5uZWxzTWFwKS5mb3JFYWNoKChba2V5LCB2YWx1ZV0pID0+IHtcclxuICAgICAgICBjb25zdCBwcmltYXJ5NTAwcmdiX0FscGhhOiBzdHJpbmcgPSB0aW55Y29sb3IocHJpbWFyeTUwMHJnYikuc2V0QWxwaGEoK3ZhbHVlKS50b1JnYlN0cmluZygpO1xyXG4gICAgICAgIHRoaXMudXBkYXRlQ29sb3JWYXJpYWJsZShrZXksIHByaW1hcnk1MDByZ2JfQWxwaGEpO1xyXG4gICAgICAgIHRoaXMudXBkYXRlQ29udHJhc3RWYXJpYWJsZShrZXksIHByaW1hcnk1MDByZ2JfQWxwaGEpO1xyXG4gICAgICB9KTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGNvbnNvbGUud2FybihcIk5vIHBhbGV0dGUgcHJvdmlkZWQgaW4gdGhlbWUgY29uZmlnLCB1c2luZyBkZWZhdWx0IHBhbGV0dGVcIilcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogVXBkYXRlcyB0aGUgY29sb3IgQ1NTIHZhcmlhYmxlXHJcbiAgICogQHBhcmFtIHBhcnQgVGhlIGNvbG9yIGtleSB0byB1cGRhdGVcclxuICAgKiBAcGFyYW0gdmFsdWUgVGhlIHZhbHVlIHRvIHNldFxyXG4gICovXHJcbiAgcHJpdmF0ZSB1cGRhdGVDb2xvclZhcmlhYmxlKHBhcnQ6IHN0cmluZywgdmFsdWU6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgaWYgKCFwYXJ0IHx8ICF2YWx1ZSkgcmV0dXJuO1xyXG4gICAgY29uc3QgY3NzVmFyID0gYC0tcHJpbWFyeS1jb2xvci0ke3BhcnR9LXBhcnRzYDtcclxuICAgIHRoaXMuZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KGNzc1ZhciwgdmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogVXBkYXRlcyB0aGUgY29udHJhc3QgKHJlYWRhYmxlIHRleHQpIGNvbG9yIENTUyB2YXJpYWJsZVxyXG4gICAqIEBwYXJhbSBwYXJ0IFRoZSBjb2xvciBrZXkgdG8gdXBkYXRlXHJcbiAgICogQHBhcmFtIHZhbHVlIFRoZSB2YWx1ZSB0byBzZXRcclxuICAgKiBAbm90ZSBWYWx1ZSBzZXQgd2lsbCBiZSBXQ0FHIGNvbXBsaWFudCBmb3IgJ0FBJywgJ3NtYWxsLXRleHQnXHJcbiAgICogQG5vdGUgSWYgYm90aCB3aGl0ZSAmIGJsYWNrIGFyZSB2YWxpZCwgd2lsbCBmYXZvciB3aGl0ZSBmb3IgdGV4dCBjb2xvclxyXG4gICovXHJcbiAgcHJpdmF0ZSB1cGRhdGVDb250cmFzdFZhcmlhYmxlKHBhcnQ6IHN0cmluZywgdmFsdWU6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgaWYgKCFwYXJ0IHx8ICF2YWx1ZSkgcmV0dXJuO1xyXG4gICAgY29uc3QgcmVhZGFibGVUZXh0Q29sb3IgPSB0aW55Y29sb3IuaXNSZWFkYWJsZSgnI0ZGRkZGRicsIHZhbHVlKSAmJiAhcGFydC5zdGFydHNXaXRoKCdBJykgPyAnI0ZGRkZGRicgOiAncmdiYSgwLCAwLCAwLCAwLjg3KSc7XHJcbiAgICBjb25zdCBjc3NWYXIgPSBgLS1wcmltYXJ5LWNvbG9yLWNvbnRyYXN0LSR7cGFydH0tcGFydHNgO1xyXG4gICAgdGhpcy5kb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoY3NzVmFyLCByZWFkYWJsZVRleHRDb2xvcik7XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The brand theme palette
|
|
3
|
-
*/
|
|
4
|
-
export interface BrandPalette {
|
|
5
|
-
primaryColor?: BrandPaletteValues;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* The brand theme palette value keys
|
|
9
|
-
* @note all color values should be in 6-digit hex format (#1A2B3C)
|
|
10
|
-
*/
|
|
11
|
-
export interface BrandPaletteValues {
|
|
12
|
-
/**
|
|
13
|
-
* The 50 palette color
|
|
14
|
-
*/
|
|
15
|
-
fifty: string;
|
|
16
|
-
/**
|
|
17
|
-
* The 100 palette color
|
|
18
|
-
*/
|
|
19
|
-
oneHundred: string;
|
|
20
|
-
/**
|
|
21
|
-
* The 200 palette color
|
|
22
|
-
*/
|
|
23
|
-
twoHundred: string;
|
|
24
|
-
/**
|
|
25
|
-
* The 300 palette color
|
|
26
|
-
*/
|
|
27
|
-
threeHundred: string;
|
|
28
|
-
/**
|
|
29
|
-
* The 400 palette color
|
|
30
|
-
*/
|
|
31
|
-
fourHundred: string;
|
|
32
|
-
/**
|
|
33
|
-
* The 500 palette color
|
|
34
|
-
*/
|
|
35
|
-
fiveHundred: string;
|
|
36
|
-
/**
|
|
37
|
-
* The 600 palette color
|
|
38
|
-
*/
|
|
39
|
-
sixHundred: string;
|
|
40
|
-
/**
|
|
41
|
-
* The 700 palette color
|
|
42
|
-
*/
|
|
43
|
-
sevenHundred: string;
|
|
44
|
-
/**
|
|
45
|
-
* The 800 palette color
|
|
46
|
-
*/
|
|
47
|
-
eightHundred: string;
|
|
48
|
-
/**
|
|
49
|
-
* The 900 palette color
|
|
50
|
-
*/
|
|
51
|
-
nineHundred: string;
|
|
52
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { BrandPalette } from '../models/brandPalette';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* The Theme2 Service
|
|
5
|
-
* @description Intended to simplify the required theme config needed for a clients 'theme.json' in switchboard.
|
|
6
|
-
* - This service takes the primary brand palette (50 - 900) only
|
|
7
|
-
* - Maps all the alpha channel values (A50 - A900) based on design specs
|
|
8
|
-
* - Maps all the WCAG compliant readable text contrast (50 - 900, A50 - A900)
|
|
9
|
-
* @see [Figma/branding]({@link https://www.figma.com/design/W5HVNCcN9HafDRvc5N7Z28/Softheon-Unified-Design-System?node-id=6376-65941&p=f&t=y8uO8TtErSbfXTOu-0})
|
|
10
|
-
* @example
|
|
11
|
-
* ```json
|
|
12
|
-
"primaryColor": {
|
|
13
|
-
"fifty": "#EFE8F3",
|
|
14
|
-
"oneHundred": "#D8C5E0",
|
|
15
|
-
"twoHundred": "#BE9FCC",
|
|
16
|
-
"threeHundred": "#A479B7",
|
|
17
|
-
"fourHundred": "#915CA7",
|
|
18
|
-
"fiveHundred": "#7D3F98",
|
|
19
|
-
"sixHundred": "#753990",
|
|
20
|
-
"sevenHundred": "#6A3185",
|
|
21
|
-
"eightHundred": "#60297B",
|
|
22
|
-
"nineHundred": "#4D1B6A"
|
|
23
|
-
}
|
|
24
|
-
* ```
|
|
25
|
-
@note Using this service requires 'tinycolor2' to be installed
|
|
26
|
-
@see [NPM/tinycolor2]({@link https://www.npmjs.com/package/tinycolor2})
|
|
27
|
-
*/
|
|
28
|
-
export declare class ThemeService2 {
|
|
29
|
-
private readonly document;
|
|
30
|
-
/** Alpha channels % to add to primary-500 rgb */
|
|
31
|
-
private readonly rgbAlphaChannelsMap;
|
|
32
|
-
/** Palette keys map */
|
|
33
|
-
private readonly colorKeysMap;
|
|
34
|
-
/**
|
|
35
|
-
* Initializes the palette
|
|
36
|
-
* @param brandConfig The brand palette configuration
|
|
37
|
-
*/
|
|
38
|
-
initBrandPalette(brandConfig: BrandPalette): void;
|
|
39
|
-
/**
|
|
40
|
-
* Updates the color CSS variable
|
|
41
|
-
* @param part The color key to update
|
|
42
|
-
* @param value The value to set
|
|
43
|
-
*/
|
|
44
|
-
private updateColorVariable;
|
|
45
|
-
/**
|
|
46
|
-
* Updates the contrast (readable text) color CSS variable
|
|
47
|
-
* @param part The color key to update
|
|
48
|
-
* @param value The value to set
|
|
49
|
-
* @note Value set will be WCAG compliant for 'AA', 'small-text'
|
|
50
|
-
* @note If both white & black are valid, will favor white for text color
|
|
51
|
-
*/
|
|
52
|
-
private updateContrastVariable;
|
|
53
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService2, never>;
|
|
54
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService2>;
|
|
55
|
-
}
|