@udixio/theme 1.0.0-beta.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/LICENSE +21 -0
- package/README.md +73 -0
- package/dist/app.module.d.ts +2 -0
- package/dist/app.service.d.ts +7 -0
- package/dist/color/color-manager.service.d.ts +15 -0
- package/dist/color/color.interface.d.ts +9 -0
- package/dist/color/color.module.d.ts +2 -0
- package/dist/color/color.service.d.ts +13 -0
- package/dist/color/entities/color.entity.d.ts +37 -0
- package/dist/color/models/default-color.model.d.ts +4 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +8 -0
- package/dist/main.d.ts +2 -0
- package/dist/material-color-utilities/contrastCurve.d.ts +46 -0
- package/dist/material-color-utilities/dynamic_color.d.ts +171 -0
- package/dist/material-color-utilities/index.d.ts +2 -0
- package/dist/material-color-utilities/toneDeltaPair.d.ts +60 -0
- package/dist/theme/entities/scheme.entity.d.ts +15 -0
- package/dist/theme/entities/variant.entity.d.ts +6 -0
- package/dist/theme/models/variant.model.d.ts +8 -0
- package/dist/theme/services/scheme.service.d.ts +12 -0
- package/dist/theme/services/theme.service.d.ts +13 -0
- package/dist/theme/services/variant.service.d.ts +7 -0
- package/dist/theme/theme.module.d.ts +2 -0
- package/dist/theme.cjs.development.js +1310 -0
- package/dist/theme.cjs.development.js.map +1 -0
- package/dist/theme.cjs.production.min.js +2 -0
- package/dist/theme.cjs.production.min.js.map +1 -0
- package/dist/theme.esm.js +1306 -0
- package/dist/theme.esm.js.map +1 -0
- package/package.json +101 -0
- package/src/app.module.ts +10 -0
- package/src/app.service.spec.ts +15 -0
- package/src/app.service.ts +11 -0
- package/src/color/color-manager.service.ts +186 -0
- package/src/color/color.interface.ts +15 -0
- package/src/color/color.module.ts +11 -0
- package/src/color/color.service.spec.ts +28 -0
- package/src/color/color.service.ts +52 -0
- package/src/color/entities/color.entity.ts +60 -0
- package/src/color/models/default-color.model.ts +297 -0
- package/src/index.ts +1 -0
- package/src/main.ts +11 -0
- package/src/material-color-utilities/contrastCurve.ts +63 -0
- package/src/material-color-utilities/dynamic_color.ts +450 -0
- package/src/material-color-utilities/index.ts +2 -0
- package/src/material-color-utilities/toneDeltaPair.ts +64 -0
- package/src/theme/entities/scheme.entity.ts +44 -0
- package/src/theme/entities/variant.entity.ts +38 -0
- package/src/theme/models/variant.model.ts +56 -0
- package/src/theme/services/scheme.service.ts +52 -0
- package/src/theme/services/theme.service.ts +58 -0
- package/src/theme/services/variant.service.ts +17 -0
- package/src/theme/theme.module.ts +10 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 vigreux-joël
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
|
|
6
|
+
[circleci-url]: https://circleci.com/gh/nestjs/nest
|
|
7
|
+
|
|
8
|
+
<p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
|
|
11
|
+
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
|
|
12
|
+
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
|
|
13
|
+
<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
|
|
14
|
+
<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
|
|
15
|
+
<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
|
|
16
|
+
<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
|
|
17
|
+
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
|
|
18
|
+
<a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
|
|
19
|
+
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
|
|
20
|
+
<a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
|
|
21
|
+
</p>
|
|
22
|
+
<!--[](https://opencollective.com/nest#backer)
|
|
23
|
+
[](https://opencollective.com/nest#sponsor)-->
|
|
24
|
+
|
|
25
|
+
## Description
|
|
26
|
+
|
|
27
|
+
[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
$ npm install
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Running the app
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
# development
|
|
39
|
+
$ npm run start
|
|
40
|
+
|
|
41
|
+
# watch mode
|
|
42
|
+
$ npm run start:dev
|
|
43
|
+
|
|
44
|
+
# production mode
|
|
45
|
+
$ npm run start:prod
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Test
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
# unit tests
|
|
52
|
+
$ npm run test
|
|
53
|
+
|
|
54
|
+
# e2e tests
|
|
55
|
+
$ npm run test:e2e
|
|
56
|
+
|
|
57
|
+
# test coverage
|
|
58
|
+
$ npm run test:cov
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Support
|
|
62
|
+
|
|
63
|
+
Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
|
|
64
|
+
|
|
65
|
+
## Stay in touch
|
|
66
|
+
|
|
67
|
+
- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com)
|
|
68
|
+
- Website - [https://nestjs.com](https://nestjs.com/)
|
|
69
|
+
- Twitter - [@nestframework](https://twitter.com/nestframework)
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
Nest is [MIT licensed](LICENSE).
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ColorService } from './color/color.service';
|
|
2
|
+
import { ThemeService } from './theme/services/theme.service';
|
|
3
|
+
export declare class AppService {
|
|
4
|
+
colorService: ColorService;
|
|
5
|
+
themeService: ThemeService;
|
|
6
|
+
constructor(colorService: ColorService, themeService: ThemeService);
|
|
7
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DynamicColor } from '../material-color-utilities/dynamic_color';
|
|
2
|
+
import { SchemeEntity } from '../theme/entities/scheme.entity';
|
|
3
|
+
import { ColorEntity, ColorOptions } from './entities/color.entity';
|
|
4
|
+
import { SchemeService } from '../theme/services/scheme.service';
|
|
5
|
+
export declare const highestSurface: (s: SchemeEntity, colorManagerService: ColorManagerService) => DynamicColor;
|
|
6
|
+
export declare class ColorManagerService {
|
|
7
|
+
private schemeService;
|
|
8
|
+
private colorMap;
|
|
9
|
+
constructor(schemeService: SchemeService);
|
|
10
|
+
createOrUpdate(key: string, args: Partial<Omit<ColorOptions, 'name'>>): ColorEntity;
|
|
11
|
+
remove(key: string): boolean;
|
|
12
|
+
get(key: string): ColorEntity;
|
|
13
|
+
getAll(): ReadonlyMap<string, ColorEntity>;
|
|
14
|
+
addFromPalette(key: string): void;
|
|
15
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ColorEntity, ColorOptions } from './entities/color.entity';
|
|
2
|
+
export interface ColorInterface {
|
|
3
|
+
addColor(key: string, color: ColorOptions): ColorEntity;
|
|
4
|
+
removeColor(key: string): boolean;
|
|
5
|
+
getColor(key: string): ColorEntity;
|
|
6
|
+
updateColor(key: string, newColor: ColorOptions): ColorEntity;
|
|
7
|
+
getAllColors(): ReadonlyMap<string, ColorEntity>;
|
|
8
|
+
addColors(colors: Record<string, ColorOptions>): ColorEntity[];
|
|
9
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ColorManagerService } from './color-manager.service';
|
|
2
|
+
import { ColorInterface } from './color.interface';
|
|
3
|
+
import { ColorEntity, ColorOptions } from './entities/color.entity';
|
|
4
|
+
export declare class ColorService implements ColorInterface {
|
|
5
|
+
private colorManagerService;
|
|
6
|
+
constructor(colorManagerService: ColorManagerService);
|
|
7
|
+
getAllColors(): ReadonlyMap<string, ColorEntity>;
|
|
8
|
+
addColor(key: string, color: ColorOptions): ColorEntity;
|
|
9
|
+
addColors(colors: Record<string, ColorOptions>): ColorEntity[];
|
|
10
|
+
getColor(key: string): ColorEntity;
|
|
11
|
+
removeColor(key: string): boolean;
|
|
12
|
+
updateColor(key: string, newColor: Partial<ColorOptions>): ColorEntity;
|
|
13
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
2
|
+
import { SchemeEntity } from '../../theme/entities/scheme.entity';
|
|
3
|
+
import { DynamicColor } from '../../material-color-utilities/dynamic_color';
|
|
4
|
+
import { ContrastCurve } from '../../material-color-utilities';
|
|
5
|
+
import { SchemeService } from '../../theme/services/scheme.service';
|
|
6
|
+
import { ColorManagerService } from '../color-manager.service';
|
|
7
|
+
export interface ColorOptions {
|
|
8
|
+
palette: (scheme: SchemeEntity) => TonalPalette;
|
|
9
|
+
tone: (scheme: SchemeEntity) => number;
|
|
10
|
+
isBackground?: boolean;
|
|
11
|
+
background?: (scheme: SchemeEntity) => DynamicColor;
|
|
12
|
+
secondBackground?: (scheme: SchemeEntity) => DynamicColor;
|
|
13
|
+
contrastCurve?: ContrastCurve;
|
|
14
|
+
toneDeltaPair?: (scheme: SchemeEntity) => {
|
|
15
|
+
roleA: DynamicColor;
|
|
16
|
+
readonly roleB: DynamicColor;
|
|
17
|
+
readonly delta: number;
|
|
18
|
+
readonly polarity: 'darker' | 'lighter' | 'nearer' | 'farther';
|
|
19
|
+
readonly stayTogether: boolean;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
export declare class ColorEntity {
|
|
23
|
+
private option;
|
|
24
|
+
private schemeService;
|
|
25
|
+
private colorService;
|
|
26
|
+
private dynamicColor;
|
|
27
|
+
constructor(option: ColorOptions & {
|
|
28
|
+
name: string;
|
|
29
|
+
}, schemeService: SchemeService, colorService: ColorManagerService);
|
|
30
|
+
update(args: Partial<ColorOptions & {
|
|
31
|
+
name: string;
|
|
32
|
+
}>): void;
|
|
33
|
+
getHex(): string;
|
|
34
|
+
getArgb(): number;
|
|
35
|
+
getName(): string;
|
|
36
|
+
getDynamicColor(): DynamicColor;
|
|
37
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ColorOptions } from '../entities/color.entity';
|
|
2
|
+
import { ColorManagerService } from '../color-manager.service';
|
|
3
|
+
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';
|
|
4
|
+
export declare const DefaultColors: (colorManagerService: ColorManagerService) => Partial<Record<DynamicColorKey, Partial<Omit<ColorOptions, "name">>>>;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './main';
|
package/dist/index.js
ADDED
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* A class containing a value that changes with the contrast level.
|
|
19
|
+
*
|
|
20
|
+
* Usually represents the contrast requirements for a dynamic color on its
|
|
21
|
+
* background. The four values correspond to values for contrast levels -1.0,
|
|
22
|
+
* 0.0, 0.5, and 1.0, respectively.
|
|
23
|
+
*/
|
|
24
|
+
export declare class ContrastCurve {
|
|
25
|
+
readonly low: number;
|
|
26
|
+
readonly normal: number;
|
|
27
|
+
readonly medium: number;
|
|
28
|
+
readonly high: number;
|
|
29
|
+
/**
|
|
30
|
+
* Creates a `ContrastCurve` object.
|
|
31
|
+
*
|
|
32
|
+
* @param low Value for contrast level -1.0
|
|
33
|
+
* @param normal Value for contrast level 0.0
|
|
34
|
+
* @param medium Value for contrast level 0.5
|
|
35
|
+
* @param high Value for contrast level 1.0
|
|
36
|
+
*/
|
|
37
|
+
constructor(low: number, normal: number, medium: number, high: number);
|
|
38
|
+
/**
|
|
39
|
+
* Returns the value at a given contrast level.
|
|
40
|
+
*
|
|
41
|
+
* @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
|
|
42
|
+
* is the lowest; 1.0 is the highest.
|
|
43
|
+
* @return The value. For contrast ratios, a number between 1.0 and 21.0.
|
|
44
|
+
*/
|
|
45
|
+
get(contrastLevel: number): number;
|
|
46
|
+
}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2022 Google LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
import { Hct, TonalPalette } from '@material/material-color-utilities';
|
|
18
|
+
import { ContrastCurve } from './contrastCurve';
|
|
19
|
+
import { ToneDeltaPair } from './toneDeltaPair';
|
|
20
|
+
import { SchemeEntity } from '../theme/entities/scheme.entity';
|
|
21
|
+
/**
|
|
22
|
+
* @param name The name of the dynamic color. Defaults to empty.
|
|
23
|
+
* @param palette Function that provides a TonalPalette given
|
|
24
|
+
* SchemeEntity. A TonalPalette is defined by a hue and chroma, so this
|
|
25
|
+
* replaces the need to specify hue/chroma. By providing a tonal palette, when
|
|
26
|
+
* contrast adjustments are made, intended chroma can be preserved.
|
|
27
|
+
* @param tone Function that provides a tone given SchemeEntity.
|
|
28
|
+
* @param isBackground Whether this dynamic color is a background, with
|
|
29
|
+
* some other color as the foreground. Defaults to false.
|
|
30
|
+
* @param background The background of the dynamic color (as a function of a
|
|
31
|
+
* `SchemeEntity`), if it exists.
|
|
32
|
+
* @param secondBackground A second background of the dynamic color (as a
|
|
33
|
+
* function of a `SchemeEntity`), if it
|
|
34
|
+
* exists.
|
|
35
|
+
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
|
|
36
|
+
* against its background should behave in various contrast levels options.
|
|
37
|
+
* @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
|
|
38
|
+
* constraint between two colors. One of them must be the color being
|
|
39
|
+
* constructed.
|
|
40
|
+
*/
|
|
41
|
+
interface FromPaletteOptions {
|
|
42
|
+
name?: string;
|
|
43
|
+
palette: (scheme: SchemeEntity) => TonalPalette;
|
|
44
|
+
tone: (scheme: SchemeEntity) => number;
|
|
45
|
+
isBackground?: boolean;
|
|
46
|
+
background?: (scheme: SchemeEntity) => DynamicColor;
|
|
47
|
+
secondBackground?: (scheme: SchemeEntity) => DynamicColor;
|
|
48
|
+
contrastCurve?: ContrastCurve;
|
|
49
|
+
toneDeltaPair?: (scheme: SchemeEntity) => ToneDeltaPair;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* A color that adjusts itself based on UI state provided by SchemeEntity.
|
|
53
|
+
*
|
|
54
|
+
* Colors without backgrounds do not change tone when contrast changes. Colors
|
|
55
|
+
* with backgrounds become closer to their background as contrast lowers, and
|
|
56
|
+
* further when contrast increases.
|
|
57
|
+
*
|
|
58
|
+
* Prefer static constructors. They require either a hexcode, a palette and
|
|
59
|
+
* tone, or a hue and chroma. Optionally, they can provide a background
|
|
60
|
+
* DynamicColor.
|
|
61
|
+
*/
|
|
62
|
+
export declare class DynamicColor {
|
|
63
|
+
readonly name: string;
|
|
64
|
+
readonly palette: (scheme: SchemeEntity) => TonalPalette;
|
|
65
|
+
readonly tone: (scheme: SchemeEntity) => number;
|
|
66
|
+
readonly isBackground: boolean;
|
|
67
|
+
readonly background?: ((scheme: SchemeEntity) => DynamicColor) | undefined;
|
|
68
|
+
readonly secondBackground?: ((scheme: SchemeEntity) => DynamicColor) | undefined;
|
|
69
|
+
readonly contrastCurve?: ContrastCurve | undefined;
|
|
70
|
+
readonly toneDeltaPair?: ((scheme: SchemeEntity) => ToneDeltaPair) | undefined;
|
|
71
|
+
private readonly hctCache;
|
|
72
|
+
/**
|
|
73
|
+
* The base constructor for DynamicColor.
|
|
74
|
+
*
|
|
75
|
+
* _Strongly_ prefer using one of the convenience constructors. This class is
|
|
76
|
+
* arguably too flexible to ensure it can support any scenario. Functional
|
|
77
|
+
* arguments allow overriding without risks that come with subclasses.
|
|
78
|
+
*
|
|
79
|
+
* For example, the default behavior of adjust tone at max contrast
|
|
80
|
+
* to be at a 7.0 ratio with its background is principled and
|
|
81
|
+
* matches accessibility guidance. That does not mean it's the desired
|
|
82
|
+
* approach for _every_ design system, and every color pairing,
|
|
83
|
+
* always, in every case.
|
|
84
|
+
*
|
|
85
|
+
* @param name The name of the dynamic color. Defaults to empty.
|
|
86
|
+
* @param palette Function that provides a TonalPalette given
|
|
87
|
+
* SchemeEntity. A TonalPalette is defined by a hue and chroma, so this
|
|
88
|
+
* replaces the need to specify hue/chroma. By providing a tonal palette, when
|
|
89
|
+
* contrast adjustments are made, intended chroma can be preserved.
|
|
90
|
+
* @param tone Function that provides a tone, given a SchemeEntity.
|
|
91
|
+
* @param isBackground Whether this dynamic color is a background, with
|
|
92
|
+
* some other color as the foreground. Defaults to false.
|
|
93
|
+
* @param background The background of the dynamic color (as a function of a
|
|
94
|
+
* `SchemeEntity`), if it exists.
|
|
95
|
+
* @param secondBackground A second background of the dynamic color (as a
|
|
96
|
+
* function of a `SchemeEntity`), if it
|
|
97
|
+
* exists.
|
|
98
|
+
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
|
|
99
|
+
* against its background should behave in various contrast levels options.
|
|
100
|
+
* @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
|
|
101
|
+
* constraint between two colors. One of them must be the color being
|
|
102
|
+
* constructed.
|
|
103
|
+
*/
|
|
104
|
+
constructor(name: string, palette: (scheme: SchemeEntity) => TonalPalette, tone: (scheme: SchemeEntity) => number, isBackground: boolean, background?: ((scheme: SchemeEntity) => DynamicColor) | undefined, secondBackground?: ((scheme: SchemeEntity) => DynamicColor) | undefined, contrastCurve?: ContrastCurve | undefined, toneDeltaPair?: ((scheme: SchemeEntity) => ToneDeltaPair) | undefined);
|
|
105
|
+
/**
|
|
106
|
+
* Create a DynamicColor defined by a TonalPalette and HCT tone.
|
|
107
|
+
*
|
|
108
|
+
* @param args Functions with SchemeEntity as input. Must provide a palette
|
|
109
|
+
* and tone. May provide a background DynamicColor and ToneDeltaConstraint.
|
|
110
|
+
*/
|
|
111
|
+
static fromPalette(args: FromPaletteOptions): DynamicColor;
|
|
112
|
+
/**
|
|
113
|
+
* Given a background tone, find a foreground tone, while ensuring they reach
|
|
114
|
+
* a contrast ratio that is as close to [ratio] as possible.
|
|
115
|
+
*
|
|
116
|
+
* @param bgTone Tone in HCT. Range is 0 to 100, undefined behavior when it
|
|
117
|
+
* falls outside that range.
|
|
118
|
+
* @param ratio The contrast ratio desired between bgTone and the return
|
|
119
|
+
* value.
|
|
120
|
+
*/
|
|
121
|
+
static foregroundTone(bgTone: number, ratio: number): number;
|
|
122
|
+
/**
|
|
123
|
+
* Returns whether [tone] prefers a light foreground.
|
|
124
|
+
*
|
|
125
|
+
* People prefer white foregrounds on ~T60-70. Observed over time, and also
|
|
126
|
+
* by Andrew Somers during research for APCA.
|
|
127
|
+
*
|
|
128
|
+
* T60 used as to create the smallest discontinuity possible when skipping
|
|
129
|
+
* down to T49 in order to ensure light foregrounds.
|
|
130
|
+
* Since `tertiaryContainer` in dark monochrome scheme requires a tone of
|
|
131
|
+
* 60, it should not be adjusted. Therefore, 60 is excluded here.
|
|
132
|
+
*/
|
|
133
|
+
static tonePrefersLightForeground(tone: number): boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Returns whether [tone] can reach a contrast ratio of 4.5 with a lighter
|
|
136
|
+
* color.
|
|
137
|
+
*/
|
|
138
|
+
static toneAllowsLightForeground(tone: number): boolean;
|
|
139
|
+
/**
|
|
140
|
+
* Adjust a tone such that white has 4.5 contrast, if the tone is
|
|
141
|
+
* reasonably close to supporting it.
|
|
142
|
+
*/
|
|
143
|
+
static enableLightForeground(tone: number): number;
|
|
144
|
+
/**
|
|
145
|
+
* Return a ARGB integer (i.e. a hex code).
|
|
146
|
+
*
|
|
147
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
148
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
149
|
+
* contrast level is.
|
|
150
|
+
*/
|
|
151
|
+
getArgb(scheme: SchemeEntity): number;
|
|
152
|
+
/**
|
|
153
|
+
* Return a color, expressed in the HCT color space, that this
|
|
154
|
+
* DynamicColor is under the conditions in scheme.
|
|
155
|
+
*
|
|
156
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
157
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
158
|
+
* contrast level is.
|
|
159
|
+
*/
|
|
160
|
+
getHct(scheme: SchemeEntity): Hct;
|
|
161
|
+
/**
|
|
162
|
+
* Return a tone, T in the HCT color space, that this DynamicColor is under
|
|
163
|
+
* the conditions in scheme.
|
|
164
|
+
*
|
|
165
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
166
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
167
|
+
* contrast level is.
|
|
168
|
+
*/
|
|
169
|
+
getTone(scheme: SchemeEntity): number;
|
|
170
|
+
}
|
|
171
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
import { DynamicColor } from './dynamic_color';
|
|
18
|
+
/**
|
|
19
|
+
* Describes the different in tone between colors.
|
|
20
|
+
*/
|
|
21
|
+
export type TonePolarity = 'darker' | 'lighter' | 'nearer' | 'farther';
|
|
22
|
+
/**
|
|
23
|
+
* Documents a constraint between two DynamicColors, in which their tones must
|
|
24
|
+
* have a certain distance from each other.
|
|
25
|
+
*
|
|
26
|
+
* Prefer a DynamicColor with a background, this is for special cases when
|
|
27
|
+
* designers want tonal distance, literally contrast, between two colors that
|
|
28
|
+
* don't have a background / foreground relationship or a contrast guarantee.
|
|
29
|
+
*/
|
|
30
|
+
export declare class ToneDeltaPair {
|
|
31
|
+
readonly roleA: DynamicColor;
|
|
32
|
+
readonly roleB: DynamicColor;
|
|
33
|
+
readonly delta: number;
|
|
34
|
+
readonly polarity: TonePolarity;
|
|
35
|
+
readonly stayTogether: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Documents a constraint in tone distance between two DynamicColors.
|
|
38
|
+
*
|
|
39
|
+
* The polarity is an adjective that describes "A", compared to "B".
|
|
40
|
+
*
|
|
41
|
+
* For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that
|
|
42
|
+
* A's tone should be at least 15 darker than B's.
|
|
43
|
+
*
|
|
44
|
+
* 'nearer' and 'farther' describes closeness to the surface roles. For
|
|
45
|
+
* instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A
|
|
46
|
+
* should be 10 lighter than B in light mode, and 10 darker than B in dark
|
|
47
|
+
* mode.
|
|
48
|
+
*
|
|
49
|
+
* @param roleA The first role in a pair.
|
|
50
|
+
* @param roleB The second role in a pair.
|
|
51
|
+
* @param delta Required difference between tones. Absolute value, negative
|
|
52
|
+
* values have undefined behavior.
|
|
53
|
+
* @param polarity The relative relation between tones of roleA and roleB,
|
|
54
|
+
* as described above.
|
|
55
|
+
* @param stayTogether Whether these two roles should stay on the same side of
|
|
56
|
+
* the "awkward zone" (T50-59). This is necessary for certain cases where
|
|
57
|
+
* one role has two backgrounds.
|
|
58
|
+
*/
|
|
59
|
+
constructor(roleA: DynamicColor, roleB: DynamicColor, delta: number, polarity: TonePolarity, stayTogether: boolean);
|
|
60
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Hct, TonalPalette } from '@material/material-color-utilities';
|
|
2
|
+
export interface SchemeOptions {
|
|
3
|
+
sourceColorArgb: number;
|
|
4
|
+
contrastLevel: number;
|
|
5
|
+
isDark: boolean;
|
|
6
|
+
palettes: Map<string, TonalPalette>;
|
|
7
|
+
}
|
|
8
|
+
export declare class SchemeEntity {
|
|
9
|
+
private options;
|
|
10
|
+
constructor(options: SchemeOptions);
|
|
11
|
+
get contrastLevel(): number;
|
|
12
|
+
get isDark(): boolean;
|
|
13
|
+
get sourceColorHct(): Hct;
|
|
14
|
+
getPalette(key: string): TonalPalette;
|
|
15
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Hct, TonalPalette } from '@material/material-color-utilities';
|
|
2
|
+
export declare const getRotatedHue: (sourceColor: Hct, hues: number[], rotations: number[]) => number;
|
|
3
|
+
export declare class VariantEntity {
|
|
4
|
+
palettes: Record<string, (sourceColorHct: Hct) => TonalPalette>;
|
|
5
|
+
constructor(palettes?: Record<string, (sourceColorHct: Hct) => TonalPalette>);
|
|
6
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { VariantEntity } from '../entities/variant.entity';
|
|
2
|
+
export declare class VariantModel {
|
|
3
|
+
static tonalSpot: VariantEntity;
|
|
4
|
+
static vibrant: VariantEntity;
|
|
5
|
+
private static readonly hues;
|
|
6
|
+
private static readonly secondaryRotations;
|
|
7
|
+
private static readonly tertiaryRotations;
|
|
8
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { SchemeEntity, SchemeOptions } from '../entities/scheme.entity';
|
|
2
|
+
import { Hct, TonalPalette } from '@material/material-color-utilities';
|
|
3
|
+
export type SchemeServiceOptions = Omit<SchemeOptions, 'palettes' | 'sourceColorArgb'> & {
|
|
4
|
+
sourceColorHex: string;
|
|
5
|
+
palettes: Record<string, (sourceColorHct: Hct) => TonalPalette>;
|
|
6
|
+
};
|
|
7
|
+
export declare class SchemeService {
|
|
8
|
+
private schemeEntity?;
|
|
9
|
+
private options?;
|
|
10
|
+
createOrUpdate(options: Partial<SchemeServiceOptions>): void;
|
|
11
|
+
get(): SchemeEntity;
|
|
12
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SchemeService, SchemeServiceOptions } from './scheme.service';
|
|
2
|
+
import { VariantService } from './variant.service';
|
|
3
|
+
import { VariantEntity } from '../entities/variant.entity';
|
|
4
|
+
type ThemeOptions = Omit<SchemeServiceOptions, 'palettes'>;
|
|
5
|
+
export declare class ThemeService {
|
|
6
|
+
private schemeService;
|
|
7
|
+
private variantService;
|
|
8
|
+
constructor(schemeService: SchemeService, variantService: VariantService);
|
|
9
|
+
create(options: ThemeOptions): void;
|
|
10
|
+
addVariant(variant: VariantEntity): void;
|
|
11
|
+
update(options: Partial<ThemeOptions>): void;
|
|
12
|
+
}
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SchemeService } from './scheme.service';
|
|
2
|
+
import { VariantEntity } from '../entities/variant.entity';
|
|
3
|
+
export declare class VariantService {
|
|
4
|
+
private schemeService;
|
|
5
|
+
constructor(schemeService: SchemeService);
|
|
6
|
+
set(variantEntity: VariantEntity): void;
|
|
7
|
+
}
|