@digdir/designsystemet 0.0.0-chore-remove-cli-tsx-20260701060359
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 +7 -0
- package/README.md +104 -0
- package/dist/bin/config.d.ts +14 -0
- package/dist/bin/config.d.ts.map +1 -0
- package/dist/bin/config.js +58 -0
- package/dist/bin/config.js.map +1 -0
- package/dist/bin/designsystemet.d.ts +1 -0
- package/dist/bin/designsystemet.js +174 -0
- package/dist/bin/designsystemet.js.map +1 -0
- package/dist/bin/options.d.ts +24 -0
- package/dist/bin/options.d.ts.map +1 -0
- package/dist/bin/options.js +25 -0
- package/dist/bin/options.js.map +1 -0
- package/dist/config.schema.json +181 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +11 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +15 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +12 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +12 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +55 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +16 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.d.ts +11 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.d.ts.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +11 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +34 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +17 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/ThemeObject.d.ts +16 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/ThemeObject.d.ts.map +1 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
- package/dist/package.js +7 -0
- package/dist/package.js.map +1 -0
- package/dist/src/automigrate.d.ts +5 -0
- package/dist/src/automigrate.d.ts.map +1 -0
- package/dist/src/automigrate.js +35 -0
- package/dist/src/automigrate.js.map +1 -0
- package/dist/src/colors/colorMetadata.d.ts +60 -0
- package/dist/src/colors/colorMetadata.d.ts.map +1 -0
- package/dist/src/colors/colorMetadata.js +261 -0
- package/dist/src/colors/colorMetadata.js.map +1 -0
- package/dist/src/colors/index.d.ts +5 -0
- package/dist/src/colors/index.js +5 -0
- package/dist/src/colors/theme.d.ts +34 -0
- package/dist/src/colors/theme.d.ts.map +1 -0
- package/dist/src/colors/theme.js +113 -0
- package/dist/src/colors/theme.js.map +1 -0
- package/dist/src/colors/types.d.ts +67 -0
- package/dist/src/colors/types.d.ts.map +1 -0
- package/dist/src/colors/types.js +26 -0
- package/dist/src/colors/types.js.map +1 -0
- package/dist/src/colors/utils.d.ts +132 -0
- package/dist/src/colors/utils.d.ts.map +1 -0
- package/dist/src/colors/utils.js +246 -0
- package/dist/src/colors/utils.js.map +1 -0
- package/dist/src/index.d.ts +10 -0
- package/dist/src/index.js +11 -0
- package/dist/src/migrations/beta-to-v1.d.ts +5 -0
- package/dist/src/migrations/beta-to-v1.d.ts.map +1 -0
- package/dist/src/migrations/beta-to-v1.js +342 -0
- package/dist/src/migrations/beta-to-v1.js.map +1 -0
- package/dist/src/migrations/codemods/css/plugins.d.ts +9 -0
- package/dist/src/migrations/codemods/css/plugins.d.ts.map +1 -0
- package/dist/src/migrations/codemods/css/plugins.js +37 -0
- package/dist/src/migrations/codemods/css/plugins.js.map +1 -0
- package/dist/src/migrations/codemods/css/run.d.ts +14 -0
- package/dist/src/migrations/codemods/css/run.d.ts.map +1 -0
- package/dist/src/migrations/codemods/css/run.js +25 -0
- package/dist/src/migrations/codemods/css/run.js.map +1 -0
- package/dist/src/migrations/color-rename-next49.d.ts +5 -0
- package/dist/src/migrations/color-rename-next49.d.ts.map +1 -0
- package/dist/src/migrations/color-rename-next49.js +48 -0
- package/dist/src/migrations/color-rename-next49.js.map +1 -0
- package/dist/src/migrations/flatten-color-categories.d.ts +12 -0
- package/dist/src/migrations/flatten-color-categories.d.ts.map +1 -0
- package/dist/src/migrations/flatten-color-categories.js +58 -0
- package/dist/src/migrations/flatten-color-categories.js.map +1 -0
- package/dist/src/migrations/index.d.ts +17 -0
- package/dist/src/migrations/index.d.ts.map +1 -0
- package/dist/src/migrations/index.js +13 -0
- package/dist/src/migrations/index.js.map +1 -0
- package/dist/src/schemas/helpers.d.ts +42 -0
- package/dist/src/schemas/helpers.d.ts.map +1 -0
- package/dist/src/schemas/helpers.js +96 -0
- package/dist/src/schemas/helpers.js.map +1 -0
- package/dist/src/schemas/v1/schema.d.ts +173 -0
- package/dist/src/schemas/v1/schema.d.ts.map +1 -0
- package/dist/src/schemas/v1/schema.js +65 -0
- package/dist/src/schemas/v1/schema.js.map +1 -0
- package/dist/src/schemas/v1.1/schema.d.ts +165 -0
- package/dist/src/schemas/v1.1/schema.d.ts.map +1 -0
- package/dist/src/schemas/v1.1/schema.js +56 -0
- package/dist/src/schemas/v1.1/schema.js.map +1 -0
- package/dist/src/tokens/build.d.ts +8 -0
- package/dist/src/tokens/build.d.ts.map +1 -0
- package/dist/src/tokens/build.js +43 -0
- package/dist/src/tokens/build.js.map +1 -0
- package/dist/src/tokens/create/files.d.ts +19 -0
- package/dist/src/tokens/create/files.d.ts.map +1 -0
- package/dist/src/tokens/create/files.js +48 -0
- package/dist/src/tokens/create/files.js.map +1 -0
- package/dist/src/tokens/create/generators/$designsystemet.d.ts +8 -0
- package/dist/src/tokens/create/generators/$designsystemet.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/$designsystemet.js +12 -0
- package/dist/src/tokens/create/generators/$designsystemet.js.map +1 -0
- package/dist/src/tokens/create/generators/$metadata.d.ts +15 -0
- package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/$metadata.js +25 -0
- package/dist/src/tokens/create/generators/$metadata.js.map +1 -0
- package/dist/src/tokens/create/generators/$themes.d.ts +28 -0
- package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/$themes.js +158 -0
- package/dist/src/tokens/create/generators/$themes.js.map +1 -0
- package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts +9 -0
- package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/primitives/color-scheme.js +71 -0
- package/dist/src/tokens/create/generators/primitives/color-scheme.js.map +1 -0
- package/dist/src/tokens/create/generators/primitives/globals.d.ts +7 -0
- package/dist/src/tokens/create/generators/primitives/globals.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/primitives/globals.js +144 -0
- package/dist/src/tokens/create/generators/primitives/globals.js.map +1 -0
- package/dist/src/tokens/create/generators/primitives/size.d.ts +8 -0
- package/dist/src/tokens/create/generators/primitives/size.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/primitives/size.js +149 -0
- package/dist/src/tokens/create/generators/primitives/size.js.map +1 -0
- package/dist/src/tokens/create/generators/primitives/typography.d.ts +10 -0
- package/dist/src/tokens/create/generators/primitives/typography.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/primitives/typography.js +218 -0
- package/dist/src/tokens/create/generators/primitives/typography.js.map +1 -0
- package/dist/src/tokens/create/generators/semantic/color.d.ts +7 -0
- package/dist/src/tokens/create/generators/semantic/color.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/semantic/color.js +19 -0
- package/dist/src/tokens/create/generators/semantic/color.js.map +1 -0
- package/dist/src/tokens/create/generators/semantic/style.d.ts +7 -0
- package/dist/src/tokens/create/generators/semantic/style.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/semantic/style.js +420 -0
- package/dist/src/tokens/create/generators/semantic/style.js.map +1 -0
- package/dist/src/tokens/create/generators/themes/theme.d.ts +7 -0
- package/dist/src/tokens/create/generators/themes/theme.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/themes/theme.js +105 -0
- package/dist/src/tokens/create/generators/themes/theme.js.map +1 -0
- package/dist/src/tokens/create.d.ts +10 -0
- package/dist/src/tokens/create.d.ts.map +1 -0
- package/dist/src/tokens/create.js +40 -0
- package/dist/src/tokens/create.js.map +1 -0
- package/dist/src/tokens/format.d.ts +19 -0
- package/dist/src/tokens/format.d.ts.map +1 -0
- package/dist/src/tokens/format.js +42 -0
- package/dist/src/tokens/format.js.map +1 -0
- package/dist/src/tokens/generate-config.d.ts +14 -0
- package/dist/src/tokens/generate-config.d.ts.map +1 -0
- package/dist/src/tokens/generate-config.js +154 -0
- package/dist/src/tokens/generate-config.js.map +1 -0
- package/dist/src/tokens/index.d.ts +5 -0
- package/dist/src/tokens/index.js +4 -0
- package/dist/src/tokens/process/configs/color.d.ts +8 -0
- package/dist/src/tokens/process/configs/color.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/color.js +50 -0
- package/dist/src/tokens/process/configs/color.js.map +1 -0
- package/dist/src/tokens/process/configs/semantic.d.ts +7 -0
- package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/semantic.js +49 -0
- package/dist/src/tokens/process/configs/semantic.js.map +1 -0
- package/dist/src/tokens/process/configs/shared.d.ts +14 -0
- package/dist/src/tokens/process/configs/shared.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/shared.js +21 -0
- package/dist/src/tokens/process/configs/shared.js.map +1 -0
- package/dist/src/tokens/process/configs/size-mode.d.ts +7 -0
- package/dist/src/tokens/process/configs/size-mode.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/size-mode.js +30 -0
- package/dist/src/tokens/process/configs/size-mode.js.map +1 -0
- package/dist/src/tokens/process/configs/size.d.ts +7 -0
- package/dist/src/tokens/process/configs/size.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/size.js +36 -0
- package/dist/src/tokens/process/configs/size.js.map +1 -0
- package/dist/src/tokens/process/configs/type-scale.d.ts +7 -0
- package/dist/src/tokens/process/configs/type-scale.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/type-scale.js +51 -0
- package/dist/src/tokens/process/configs/type-scale.js.map +1 -0
- package/dist/src/tokens/process/configs/typography.d.ts +7 -0
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/typography.js +66 -0
- package/dist/src/tokens/process/configs/typography.js.map +1 -0
- package/dist/src/tokens/process/configs.d.ts +18 -0
- package/dist/src/tokens/process/configs.d.ts.map +1 -0
- package/dist/src/tokens/process/configs.js +74 -0
- package/dist/src/tokens/process/configs.js.map +1 -0
- package/dist/src/tokens/process/formats/css/color.d.ts +8 -0
- package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/color.js +64 -0
- package/dist/src/tokens/process/formats/css/color.js.map +1 -0
- package/dist/src/tokens/process/formats/css/semantic.d.ts +7 -0
- package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/semantic.js +31 -0
- package/dist/src/tokens/process/formats/css/semantic.js.map +1 -0
- package/dist/src/tokens/process/formats/css/size-mode.d.ts +7 -0
- package/dist/src/tokens/process/formats/css/size-mode.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/size-mode.js +52 -0
- package/dist/src/tokens/process/formats/css/size-mode.js.map +1 -0
- package/dist/src/tokens/process/formats/css/size.d.ts +16 -0
- package/dist/src/tokens/process/formats/css/size.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/size.js +95 -0
- package/dist/src/tokens/process/formats/css/size.js.map +1 -0
- package/dist/src/tokens/process/formats/css/type-scale.d.ts +7 -0
- package/dist/src/tokens/process/formats/css/type-scale.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/type-scale.js +57 -0
- package/dist/src/tokens/process/formats/css/type-scale.js.map +1 -0
- package/dist/src/tokens/process/formats/css/typography.d.ts +7 -0
- package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/typography.js +31 -0
- package/dist/src/tokens/process/formats/css/typography.js.map +1 -0
- package/dist/src/tokens/process/formats/css.d.ts +15 -0
- package/dist/src/tokens/process/formats/css.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css.js +20 -0
- package/dist/src/tokens/process/formats/css.js.map +1 -0
- package/dist/src/tokens/process/output/declarations.d.ts +9 -0
- package/dist/src/tokens/process/output/declarations.d.ts.map +1 -0
- package/dist/src/tokens/process/output/declarations.js +38 -0
- package/dist/src/tokens/process/output/declarations.js.map +1 -0
- package/dist/src/tokens/process/output/tailwind.d.ts +7 -0
- package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
- package/dist/src/tokens/process/output/tailwind.js +47 -0
- package/dist/src/tokens/process/output/tailwind.js.map +1 -0
- package/dist/src/tokens/process/output/theme.d.ts +31 -0
- package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
- package/dist/src/tokens/process/output/theme.js +85 -0
- package/dist/src/tokens/process/output/theme.js.map +1 -0
- package/dist/src/tokens/process/platform.d.ts +69 -0
- package/dist/src/tokens/process/platform.d.ts.map +1 -0
- package/dist/src/tokens/process/platform.js +128 -0
- package/dist/src/tokens/process/platform.js.map +1 -0
- package/dist/src/tokens/process/transformers.d.ts +10 -0
- package/dist/src/tokens/process/transformers.d.ts.map +1 -0
- package/dist/src/tokens/process/transformers.js +56 -0
- package/dist/src/tokens/process/transformers.js.map +1 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts +38 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +112 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js.map +1 -0
- package/dist/src/tokens/process/utils/kebab-case.d.ts +8 -0
- package/dist/src/tokens/process/utils/kebab-case.d.ts.map +1 -0
- package/dist/src/tokens/process/utils/kebab-case.js +11 -0
- package/dist/src/tokens/process/utils/kebab-case.js.map +1 -0
- package/dist/src/tokens/types.d.ts +71 -0
- package/dist/src/tokens/types.d.ts.map +1 -0
- package/dist/src/tokens/types.js +1 -0
- package/dist/src/tokens/utils.d.ts +62 -0
- package/dist/src/tokens/utils.d.ts.map +1 -0
- package/dist/src/tokens/utils.js +123 -0
- package/dist/src/tokens/utils.js.map +1 -0
- package/dist/src/types.d.ts +1 -0
- package/dist/src/types.js +10 -0
- package/dist/src/types.js.map +1 -0
- package/dist/src/utils/filesystem.d.ts +47 -0
- package/dist/src/utils/filesystem.d.ts.map +1 -0
- package/dist/src/utils/filesystem.js +117 -0
- package/dist/src/utils/filesystem.js.map +1 -0
- package/package.json +87 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { CssColor, HexColor } from "./types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/colors/utils.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'
|
|
6
|
+
*
|
|
7
|
+
* @param hex A hex color string
|
|
8
|
+
* @param valuesOnly If true, only the values are returned
|
|
9
|
+
* @returns A CSS HSL string
|
|
10
|
+
*/
|
|
11
|
+
declare const hexToCssHsl: (hex: HexColor, valuesOnly?: boolean) => string;
|
|
12
|
+
/**
|
|
13
|
+
* Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'
|
|
14
|
+
*
|
|
15
|
+
* @param H A Hex color string
|
|
16
|
+
* @returns HSL values in an array
|
|
17
|
+
*/
|
|
18
|
+
declare const hexToHSL: (hex: HexColor) => number[];
|
|
19
|
+
/**
|
|
20
|
+
* Converts a HEX color '#xxxxxx' into an array of HSLuv values '[h,s,l]'
|
|
21
|
+
*
|
|
22
|
+
* @param hex A hex color string
|
|
23
|
+
* @returns
|
|
24
|
+
*/
|
|
25
|
+
declare const hexToHsluv: (hex: HexColor) => number[];
|
|
26
|
+
/**
|
|
27
|
+
* Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'
|
|
28
|
+
*
|
|
29
|
+
* @param HSL A HSL number array '[h,s,l]'
|
|
30
|
+
* @returns A hex color string
|
|
31
|
+
*/
|
|
32
|
+
declare const hslArrToCss: (HSL: number[]) => string;
|
|
33
|
+
/**
|
|
34
|
+
* Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'
|
|
35
|
+
*
|
|
36
|
+
* @param h The HSL hue
|
|
37
|
+
* @param s The HSL saturation
|
|
38
|
+
* @param l The HSL lightness
|
|
39
|
+
* @returns HEX color string
|
|
40
|
+
*/
|
|
41
|
+
declare const HSLToHex: (h: number, s: number, l: number) => HexColor;
|
|
42
|
+
/**
|
|
43
|
+
* Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
|
|
44
|
+
*
|
|
45
|
+
* @param hex A hex color string
|
|
46
|
+
* @param type The type of RGB values to return
|
|
47
|
+
* @returns RGB values in an array
|
|
48
|
+
*/
|
|
49
|
+
declare const hexToRgb: (hex: string, type?: "255" | "1") => {
|
|
50
|
+
r: number;
|
|
51
|
+
g: number;
|
|
52
|
+
b: number;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Get the contrast ratio between two HEX colors
|
|
56
|
+
*
|
|
57
|
+
* @param color1 The first color to compare
|
|
58
|
+
* @param color2 The second color to compare
|
|
59
|
+
* @returns
|
|
60
|
+
*/
|
|
61
|
+
declare const getContrastFromHex: (color1: HexColor, color2: HexColor) => number;
|
|
62
|
+
/**
|
|
63
|
+
* Get the contrast ratio between two colors at a specific lightness
|
|
64
|
+
*
|
|
65
|
+
* @param lightness The lightness value
|
|
66
|
+
* @param mainColor The main color
|
|
67
|
+
* @param backgroundColor The background color
|
|
68
|
+
* @returns The contrast ratio
|
|
69
|
+
*/
|
|
70
|
+
declare const getContrastFromLightness: (lightness: number, mainColor: CssColor, backgroundColor: CssColor) => number;
|
|
71
|
+
/**
|
|
72
|
+
* Check if two colors have enough contrast to be used together
|
|
73
|
+
*
|
|
74
|
+
* @param color1 The first color
|
|
75
|
+
* @param color2 The second color
|
|
76
|
+
* @returns If the colors have enough contrast
|
|
77
|
+
*/
|
|
78
|
+
declare const areColorsContrasting: (color1: CssColor, color2: CssColor, type?: "decorative" | "aa" | "aaa") => boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Check if aa string value is a HEX color
|
|
81
|
+
*
|
|
82
|
+
* @param hex The hex color
|
|
83
|
+
*/
|
|
84
|
+
declare const isHexColor: (hex: string) => boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Get the luminance value from a lightness value
|
|
87
|
+
*
|
|
88
|
+
* @param lightness The lightness value
|
|
89
|
+
*/
|
|
90
|
+
declare const getLuminanceFromLightness: (lightness: number) => number;
|
|
91
|
+
/**
|
|
92
|
+
* Get the relative luminance from any valid css color
|
|
93
|
+
*
|
|
94
|
+
* @param color
|
|
95
|
+
*/
|
|
96
|
+
declare const getLuminanceFromColor: (color: string) => number;
|
|
97
|
+
/**
|
|
98
|
+
* Get the HSLuv lightness from a HEX color
|
|
99
|
+
*
|
|
100
|
+
* @param hex The hex color
|
|
101
|
+
*/
|
|
102
|
+
declare const getLightnessFromHex: (hex: HexColor) => number;
|
|
103
|
+
/**
|
|
104
|
+
*
|
|
105
|
+
* This function checks if white or black text can be used on 2 different colors at 4.5:1 contrast.
|
|
106
|
+
*
|
|
107
|
+
* @param baseDefaultColor Base default color
|
|
108
|
+
* @param baseActiveColor Base active color
|
|
109
|
+
*/
|
|
110
|
+
declare const canTextBeUsedOnColors: (baseDefaultColor: CssColor, baseActiveColor: CssColor) => boolean;
|
|
111
|
+
/**
|
|
112
|
+
* Converts a color to a HEX color
|
|
113
|
+
*
|
|
114
|
+
* @param color
|
|
115
|
+
* @returns
|
|
116
|
+
*/
|
|
117
|
+
declare const convertToHex: (color?: string) => HexColor;
|
|
118
|
+
declare const rgbToHex: (rgb: {
|
|
119
|
+
r: number;
|
|
120
|
+
g: number;
|
|
121
|
+
b: number;
|
|
122
|
+
}) => HexColor;
|
|
123
|
+
/**
|
|
124
|
+
* Convert a color to a different format
|
|
125
|
+
*
|
|
126
|
+
* @param cssColor Any valid css color
|
|
127
|
+
* @param format Color space/format supported here https://colorjs.io/docs/spaces
|
|
128
|
+
*/
|
|
129
|
+
declare const convertColor: (cssColor: string, format: string) => string;
|
|
130
|
+
//#endregion
|
|
131
|
+
export { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex };
|
|
132
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/colors/utils.ts"],"mappings":";;;;;AAYA;;;;;cAAa,WAAA,GAAe,GAAA,EAAK,QAAQ,EAAE,UAAA;;;AAAkB;AAe7D;;;cAAa,QAAA,GAAY,GAAa,EAAR,QAAQ;AAAA;AAWtC;;;;AAAwC;AAXF,cAWzB,UAAA,GAAc,GAAa,EAAR,QAAQ;;;;AAaC;AAYzC;;cAZa,WAAA,GAAe,GAAa;;;;;;;AAcxC;AASD;cAXa,QAAA,GAAY,CAAA,UAAW,CAAA,UAAW,CAAA,aAAY,QAE1D;;;;;;;;cASY,QAAA,GAAY,GAAA,UAAa,IAAA;;;;;;;;;;;AAgB+B;cAAxD,kBAAA,GAAsB,MAAA,EAAQ,QAAA,EAAU,MAAA,EAAQ,QAAQ;;;;;;;;;cAcxD,wBAAA,GAA4B,SAAA,UAAmB,SAAA,EAAW,QAAA,EAAU,eAAA,EAAiB,QAAQ;AAAA;AAqB1G;;;;;;AArB0G,cAqB7F,oBAAA,GAAwB,MAAA,EAAQ,QAAA,EAAU,MAAA,EAAQ,QAAQ,EAAE,IAAA;;;;AAAwC;AAmBjH;cAAa,UAAA,GAAc,GAAW;;;AAAA;AAStC;;cAAa,yBAAA,GAA6B,SAAiB;;AAAA;AAa3D;;;cAAa,qBAAA,GAAyB,KAAa;AAAA;AASnD;;;;AATmD,cAStC,mBAAA,GAAuB,GAAa,EAAR,QAAQ;AAejD;;;;;;;AAAA,cAAa,qBAAA,GAAyB,gBAAA,EAAkB,QAAA,EAAU,eAAA,EAAiB,QAAQ;;AAAA;AAuB3F;;;;cAAa,YAAA,GAAgB,KAAA,cAAiB,QAQ7C;AAAA,cAEY,QAAA,GAAY,GAAA;EAAO,CAAA;EAAW,CAAA;EAAW,CAAA;AAAA,MAAc,QAOnE;;;;;;AAAA;cAQY,YAAA,GAAgB,QAAA,UAAkB,MAAc"}
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import chroma from "chroma-js";
|
|
2
|
+
import Colorjs from "colorjs.io";
|
|
3
|
+
import { Hsluv } from "hsluv";
|
|
4
|
+
//#region src/colors/utils.ts
|
|
5
|
+
/**
|
|
6
|
+
* Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'
|
|
7
|
+
*
|
|
8
|
+
* @param hex A hex color string
|
|
9
|
+
* @param valuesOnly If true, only the values are returned
|
|
10
|
+
* @returns A CSS HSL string
|
|
11
|
+
*/
|
|
12
|
+
const hexToCssHsl = (hex, valuesOnly = false) => {
|
|
13
|
+
const [h, s, l] = chroma(hex).hsl();
|
|
14
|
+
const cssString = `${Math.round(h)},${Math.round(s * 100)}%,${Math.round(l * 100)}%`;
|
|
15
|
+
return valuesOnly ? cssString : `hsl(${cssString})`;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'
|
|
19
|
+
*
|
|
20
|
+
* @param H A Hex color string
|
|
21
|
+
* @returns HSL values in an array
|
|
22
|
+
*/
|
|
23
|
+
const hexToHSL = (hex) => {
|
|
24
|
+
const [h, s, l] = chroma(hex).hsl();
|
|
25
|
+
return [
|
|
26
|
+
Math.round(h),
|
|
27
|
+
Math.round(s * 100),
|
|
28
|
+
Math.round(l * 100)
|
|
29
|
+
];
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Converts a HEX color '#xxxxxx' into an array of HSLuv values '[h,s,l]'
|
|
33
|
+
*
|
|
34
|
+
* @param hex A hex color string
|
|
35
|
+
* @returns
|
|
36
|
+
*/
|
|
37
|
+
const hexToHsluv = (hex) => {
|
|
38
|
+
const conv = new Hsluv();
|
|
39
|
+
conv.hex = hex;
|
|
40
|
+
conv.hexToHsluv();
|
|
41
|
+
return [
|
|
42
|
+
conv.hsluv_h,
|
|
43
|
+
conv.hsluv_s,
|
|
44
|
+
conv.hsluv_l
|
|
45
|
+
];
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'
|
|
49
|
+
*
|
|
50
|
+
* @param HSL A HSL number array '[h,s,l]'
|
|
51
|
+
* @returns A hex color string
|
|
52
|
+
*/
|
|
53
|
+
const hslArrToCss = (HSL) => {
|
|
54
|
+
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'
|
|
58
|
+
*
|
|
59
|
+
* @param h The HSL hue
|
|
60
|
+
* @param s The HSL saturation
|
|
61
|
+
* @param l The HSL lightness
|
|
62
|
+
* @returns HEX color string
|
|
63
|
+
*/
|
|
64
|
+
const HSLToHex = (h, s, l) => {
|
|
65
|
+
return chroma.hsl(h, s / 100, l / 100).hex();
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
|
|
69
|
+
*
|
|
70
|
+
* @param hex A hex color string
|
|
71
|
+
* @param type The type of RGB values to return
|
|
72
|
+
* @returns RGB values in an array
|
|
73
|
+
*/
|
|
74
|
+
const hexToRgb = (hex, type = "255") => {
|
|
75
|
+
const rgb = chroma(hex).rgb();
|
|
76
|
+
return {
|
|
77
|
+
r: type === "255" ? rgb[0] : rgb[0] / 255,
|
|
78
|
+
g: type === "255" ? rgb[1] : rgb[1] / 255,
|
|
79
|
+
b: type === "255" ? rgb[2] : rgb[2] / 255
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
/**
|
|
83
|
+
* Get the contrast ratio between two HEX colors
|
|
84
|
+
*
|
|
85
|
+
* @param color1 The first color to compare
|
|
86
|
+
* @param color2 The second color to compare
|
|
87
|
+
* @returns
|
|
88
|
+
*/
|
|
89
|
+
const getContrastFromHex = (color1, color2) => {
|
|
90
|
+
const lum1 = chroma(color1).luminance();
|
|
91
|
+
const lum2 = chroma(color2).luminance();
|
|
92
|
+
return (Math.max(lum1, lum2) + .05) / (Math.min(lum1, lum2) + .05);
|
|
93
|
+
};
|
|
94
|
+
/**
|
|
95
|
+
* Get the contrast ratio between two colors at a specific lightness
|
|
96
|
+
*
|
|
97
|
+
* @param lightness The lightness value
|
|
98
|
+
* @param mainColor The main color
|
|
99
|
+
* @param backgroundColor The background color
|
|
100
|
+
* @returns The contrast ratio
|
|
101
|
+
*/
|
|
102
|
+
const getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
103
|
+
const conv = new Hsluv();
|
|
104
|
+
conv.hex = mainColor;
|
|
105
|
+
conv.hexToHsluv();
|
|
106
|
+
conv.hsluv_l = lightness;
|
|
107
|
+
conv.hsluvToHex();
|
|
108
|
+
const lightMainColor = conv.hex;
|
|
109
|
+
const lum1 = chroma(lightMainColor).luminance();
|
|
110
|
+
const lum2 = chroma(backgroundColor).luminance();
|
|
111
|
+
return (Math.max(lum1, lum2) + .05) / (Math.min(lum1, lum2) + .05);
|
|
112
|
+
};
|
|
113
|
+
/**
|
|
114
|
+
* Check if two colors have enough contrast to be used together
|
|
115
|
+
*
|
|
116
|
+
* @param color1 The first color
|
|
117
|
+
* @param color2 The second color
|
|
118
|
+
* @returns If the colors have enough contrast
|
|
119
|
+
*/
|
|
120
|
+
const areColorsContrasting = (color1, color2, type = "aa") => {
|
|
121
|
+
const contrast = getContrastFromHex(color1, color2);
|
|
122
|
+
if (contrast !== null) {
|
|
123
|
+
if (type === "aaa") return contrast >= 7;
|
|
124
|
+
if (type === "aa") return contrast >= 4.5;
|
|
125
|
+
return contrast >= 3;
|
|
126
|
+
}
|
|
127
|
+
return false;
|
|
128
|
+
};
|
|
129
|
+
/**
|
|
130
|
+
* Check if aa string value is a HEX color
|
|
131
|
+
*
|
|
132
|
+
* @param hex The hex color
|
|
133
|
+
*/
|
|
134
|
+
const isHexColor = (hex) => {
|
|
135
|
+
return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
|
|
136
|
+
};
|
|
137
|
+
/**
|
|
138
|
+
* Get the luminance value from a lightness value
|
|
139
|
+
*
|
|
140
|
+
* @param lightness The lightness value
|
|
141
|
+
*/
|
|
142
|
+
const getLuminanceFromLightness = (lightness) => {
|
|
143
|
+
const conv = new Hsluv();
|
|
144
|
+
conv.hsluv_l = lightness;
|
|
145
|
+
conv.hsluvToHex();
|
|
146
|
+
return chroma(conv.hex).luminance();
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* Get the relative luminance from any valid css color
|
|
150
|
+
*
|
|
151
|
+
* @param color
|
|
152
|
+
*/
|
|
153
|
+
const getLuminanceFromColor = (color) => {
|
|
154
|
+
return chroma(color).luminance();
|
|
155
|
+
};
|
|
156
|
+
/**
|
|
157
|
+
* Get the HSLuv lightness from a HEX color
|
|
158
|
+
*
|
|
159
|
+
* @param hex The hex color
|
|
160
|
+
*/
|
|
161
|
+
const getLightnessFromHex = (hex) => {
|
|
162
|
+
const conv = new Hsluv();
|
|
163
|
+
conv.hex = hex;
|
|
164
|
+
conv.hexToHsluv();
|
|
165
|
+
return conv.hsluv_l;
|
|
166
|
+
};
|
|
167
|
+
/**
|
|
168
|
+
*
|
|
169
|
+
* This function checks if white or black text can be used on 2 different colors at 4.5:1 contrast.
|
|
170
|
+
*
|
|
171
|
+
* @param baseDefaultColor Base default color
|
|
172
|
+
* @param baseActiveColor Base active color
|
|
173
|
+
*/
|
|
174
|
+
const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
|
|
175
|
+
const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
|
|
176
|
+
const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
|
|
177
|
+
const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
|
|
178
|
+
const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
|
|
179
|
+
if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) return true;
|
|
180
|
+
if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) return true;
|
|
181
|
+
return false;
|
|
182
|
+
};
|
|
183
|
+
/**
|
|
184
|
+
* Converts a color to a HEX color
|
|
185
|
+
*
|
|
186
|
+
* @param color
|
|
187
|
+
* @returns
|
|
188
|
+
*/
|
|
189
|
+
const convertToHex = (color) => {
|
|
190
|
+
if (!color) return "#000000";
|
|
191
|
+
if (/^#[0-9A-Fa-f]{6}$/.test(color)) return color;
|
|
192
|
+
return chroma(color).hex();
|
|
193
|
+
};
|
|
194
|
+
const rgbToHex = (rgb) => {
|
|
195
|
+
return `#${[
|
|
196
|
+
rgb.r,
|
|
197
|
+
rgb.g,
|
|
198
|
+
rgb.b
|
|
199
|
+
].map((x) => {
|
|
200
|
+
const hex = Math.round(x * 255).toString(16);
|
|
201
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
202
|
+
}).join("")}`;
|
|
203
|
+
};
|
|
204
|
+
/**
|
|
205
|
+
* Convert a color to a different format
|
|
206
|
+
*
|
|
207
|
+
* @param cssColor Any valid css color
|
|
208
|
+
* @param format Color space/format supported here https://colorjs.io/docs/spaces
|
|
209
|
+
*/
|
|
210
|
+
const convertColor = (cssColor, format) => {
|
|
211
|
+
const color = new Colorjs(cssColor);
|
|
212
|
+
switch (format) {
|
|
213
|
+
case "rgb":
|
|
214
|
+
case "rgba": return color.toString({
|
|
215
|
+
format: {
|
|
216
|
+
name: format,
|
|
217
|
+
coords: [
|
|
218
|
+
"<number>[0, 255]",
|
|
219
|
+
"<number>[0, 255]",
|
|
220
|
+
"<number>[0, 255]"
|
|
221
|
+
]
|
|
222
|
+
},
|
|
223
|
+
precision: 3
|
|
224
|
+
});
|
|
225
|
+
case "hex": return color.toString({
|
|
226
|
+
format,
|
|
227
|
+
precision: 3
|
|
228
|
+
});
|
|
229
|
+
case "hct": return color.to(format).toString({
|
|
230
|
+
format: {
|
|
231
|
+
name: format,
|
|
232
|
+
coords: [
|
|
233
|
+
"<number>",
|
|
234
|
+
"<number>",
|
|
235
|
+
"<number>"
|
|
236
|
+
]
|
|
237
|
+
},
|
|
238
|
+
precision: 3
|
|
239
|
+
});
|
|
240
|
+
default: return color.to(format).toString({ precision: 3 });
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
//#endregion
|
|
244
|
+
export { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex };
|
|
245
|
+
|
|
246
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../../src/colors/utils.ts"],"sourcesContent":["import chroma from 'chroma-js';\nimport Colorjs from 'colorjs.io';\nimport { Hsluv } from 'hsluv';\nimport type { CssColor, HexColor } from './types.ts';\n\n/**\n * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'\n *\n * @param hex A hex color string\n * @param valuesOnly If true, only the values are returned\n * @returns A CSS HSL string\n */\nexport const hexToCssHsl = (hex: HexColor, valuesOnly = false) => {\n const [h, s, l] = chroma(hex).hsl();\n const hRounded = Math.round(h);\n const sRounded = Math.round(s * 100);\n const lRounded = Math.round(l * 100);\n const cssString = `${hRounded},${sRounded}%,${lRounded}%`;\n return valuesOnly ? cssString : `hsl(${cssString})`;\n};\n\n/**\n * Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'\n *\n * @param H A Hex color string\n * @returns HSL values in an array\n */\nexport const hexToHSL = (hex: HexColor) => {\n const [h, s, l] = chroma(hex).hsl();\n return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];\n};\n\n/**\n * Converts a HEX color '#xxxxxx' into an array of HSLuv values '[h,s,l]'\n *\n * @param hex A hex color string\n * @returns\n */\nexport const hexToHsluv = (hex: HexColor) => {\n const conv = new Hsluv();\n conv.hex = hex;\n conv.hexToHsluv();\n return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];\n};\n\n/**\n * Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'\n *\n * @param HSL A HSL number array '[h,s,l]'\n * @returns A hex color string\n */\nexport const hslArrToCss = (HSL: number[]) => {\n return 'hsl(' + HSL[0] + ',' + HSL[1] + '%,' + HSL[2] + '%)';\n};\n\n/**\n * Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'\n *\n * @param h The HSL hue\n * @param s The HSL saturation\n * @param l The HSL lightness\n * @returns HEX color string\n */\nexport const HSLToHex = (h: number, s: number, l: number): HexColor => {\n return chroma.hsl(h, s / 100, l / 100).hex() as HexColor;\n};\n\n/**\n * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'\n *\n * @param hex A hex color string\n * @param type The type of RGB values to return\n * @returns RGB values in an array\n */\nexport const hexToRgb = (hex: string, type: '255' | '1' = '255') => {\n const rgb = chroma(hex).rgb();\n return {\n r: type === '255' ? rgb[0] : rgb[0] / 255,\n g: type === '255' ? rgb[1] : rgb[1] / 255,\n b: type === '255' ? rgb[2] : rgb[2] / 255,\n };\n};\n\n/**\n * Get the contrast ratio between two HEX colors\n *\n * @param color1 The first color to compare\n * @param color2 The second color to compare\n * @returns\n */\nexport const getContrastFromHex = (color1: HexColor, color2: HexColor) => {\n const lum1 = chroma(color1).luminance();\n const lum2 = chroma(color2).luminance();\n return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);\n};\n\n/**\n * Get the contrast ratio between two colors at a specific lightness\n *\n * @param lightness The lightness value\n * @param mainColor The main color\n * @param backgroundColor The background color\n * @returns The contrast ratio\n */\nexport const getContrastFromLightness = (lightness: number, mainColor: CssColor, backgroundColor: CssColor) => {\n const conv = new Hsluv();\n conv.hex = mainColor;\n conv.hexToHsluv();\n conv.hsluv_l = lightness;\n conv.hsluvToHex();\n const lightMainColor = conv.hex;\n const lum1 = chroma(lightMainColor).luminance();\n const lum2 = chroma(backgroundColor).luminance();\n const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);\n\n return ratio;\n};\n\n/**\n * Check if two colors have enough contrast to be used together\n *\n * @param color1 The first color\n * @param color2 The second color\n * @returns If the colors have enough contrast\n */\nexport const areColorsContrasting = (color1: CssColor, color2: CssColor, type: 'decorative' | 'aa' | 'aaa' = 'aa') => {\n const contrast = getContrastFromHex(color1, color2);\n if (contrast !== null) {\n if (type === 'aaa') {\n return contrast >= 7;\n }\n if (type === 'aa') {\n return contrast >= 4.5;\n }\n return contrast >= 3;\n }\n return false;\n};\n\n/**\n * Check if aa string value is a HEX color\n *\n * @param hex The hex color\n */\nexport const isHexColor = (hex: string) => {\n return typeof hex === 'string' && hex.length === 6 && !Number.isNaN(Number('0x' + hex));\n};\n\n/**\n * Get the luminance value from a lightness value\n *\n * @param lightness The lightness value\n */\nexport const getLuminanceFromLightness = (lightness: number) => {\n const conv = new Hsluv();\n conv.hsluv_l = lightness;\n conv.hsluvToHex();\n\n return chroma(conv.hex).luminance();\n};\n\n/**\n * Get the relative luminance from any valid css color\n *\n * @param color\n */\nexport const getLuminanceFromColor = (color: string) => {\n return chroma(color).luminance();\n};\n\n/**\n * Get the HSLuv lightness from a HEX color\n *\n * @param hex The hex color\n */\nexport const getLightnessFromHex = (hex: HexColor) => {\n const conv = new Hsluv();\n conv.hex = hex;\n conv.hexToHsluv();\n\n return conv.hsluv_l;\n};\n\n/**\n *\n * This function checks if white or black text can be used on 2 different colors at 4.5:1 contrast.\n *\n * @param baseDefaultColor Base default color\n * @param baseActiveColor Base active color\n */\nexport const canTextBeUsedOnColors = (baseDefaultColor: CssColor, baseActiveColor: CssColor) => {\n const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, '#ffffff');\n const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, '#000000');\n\n const activeAgainstWhite = getContrastFromHex(baseActiveColor, '#ffffff');\n const activeAgainstBlack = getContrastFromHex(baseActiveColor, '#000000');\n\n if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {\n return true;\n }\n if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {\n return true;\n }\n\n return false;\n};\n\n/**\n * Converts a color to a HEX color\n *\n * @param color\n * @returns\n */\nexport const convertToHex = (color?: string): HexColor => {\n if (!color) {\n return '#000000';\n }\n if (/^#[0-9A-Fa-f]{6}$/.test(color)) {\n return color as HexColor;\n }\n return chroma(color).hex() as HexColor;\n};\n\nexport const rgbToHex = (rgb: { r: number; g: number; b: number }): HexColor => {\n return `#${[rgb.r, rgb.g, rgb.b]\n .map((x) => {\n const hex = Math.round(x * 255).toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n })\n .join('')}`;\n};\n\n/**\n * Convert a color to a different format\n *\n * @param cssColor Any valid css color\n * @param format Color space/format supported here https://colorjs.io/docs/spaces\n */\nexport const convertColor = (cssColor: string, format: string) => {\n const color = new Colorjs(cssColor);\n switch (format) {\n case 'rgb':\n case 'rgba':\n //return rgb(0-255 0-255 0-255) instead of percentages\n return color.toString({\n format: {\n name: format,\n coords: ['<number>[0, 255]', '<number>[0, 255]', '<number>[0, 255]'],\n },\n precision: 3,\n });\n case 'hex':\n return color.toString({ format: format, precision: 3 });\n case 'hct':\n return color.to(format).toString({\n format: {\n name: format,\n coords: ['<number>', '<number>', '<number>'],\n },\n precision: 3,\n });\n default:\n return color.to(format).toString({ precision: 3 });\n }\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CreateConfigSchema, configFileCreateSchema } from "./schemas/v1.1/schema.js";
|
|
2
|
+
import { deprecatedCLIOptions } from "./schemas/helpers.js";
|
|
3
|
+
import { Color, ColorError, ColorMetadata, ColorMetadataByName, ColorNames, ColorNumber, ColorScheme, ContrastMode, CssColor, GlobalColors, HexColor, ThemeInfo, semanticColorMap, semanticColorNames, semanticColorNumbers } from "./colors/types.js";
|
|
4
|
+
import { baseColorNames, baseColors, colorMetadata, colorNames, dsLinkColor, getColorMetadataByNumber } from "./colors/colorMetadata.js";
|
|
5
|
+
import { RESERVED_COLORS, generateColorContrast, generateColorScale, generateColorSchemes, getCssVariable } from "./colors/theme.js";
|
|
6
|
+
import { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex } from "./colors/utils.js";
|
|
7
|
+
import { Theme } from "./tokens/types.js";
|
|
8
|
+
import { createTokens } from "./tokens/create.js";
|
|
9
|
+
import { formatThemeCSS, formatTokens } from "./tokens/format.js";
|
|
10
|
+
export { Color, ColorError, ColorMetadata, ColorMetadataByName, ColorNames, ColorNumber, ColorScheme, type CreateConfigSchema as ConfigSchema, ContrastMode, type Theme as CreateTokensOptions, CssColor, GlobalColors, HSLToHex, HexColor, RESERVED_COLORS, ThemeInfo, areColorsContrasting, baseColorNames, baseColors, canTextBeUsedOnColors, deprecatedCLIOptions as cliOptions, colorMetadata, colorNames, configFileCreateSchema as configSchema, convertColor, convertToHex, createTokens, dsLinkColor, formatThemeCSS, formatTokens, generateColorContrast, generateColorScale, generateColorSchemes, getColorMetadataByNumber, getContrastFromHex, getContrastFromLightness, getCssVariable, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex, semanticColorMap, semanticColorNames, semanticColorNumbers };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { deprecatedCLIOptions } from "./schemas/helpers.js";
|
|
2
|
+
import { baseColorNames, baseColors, colorMetadata, colorNames, dsLinkColor, getColorMetadataByNumber } from "./colors/colorMetadata.js";
|
|
3
|
+
import { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex } from "./colors/utils.js";
|
|
4
|
+
import { RESERVED_COLORS, generateColorContrast, generateColorScale, generateColorSchemes, getCssVariable } from "./colors/theme.js";
|
|
5
|
+
import { semanticColorMap, semanticColorNames, semanticColorNumbers } from "./colors/types.js";
|
|
6
|
+
import "./colors/index.js";
|
|
7
|
+
import { configFileCreateSchema } from "./schemas/v1.1/schema.js";
|
|
8
|
+
import { createTokens } from "./tokens/create.js";
|
|
9
|
+
import { formatThemeCSS, formatTokens } from "./tokens/format.js";
|
|
10
|
+
import "./tokens/index.js";
|
|
11
|
+
export { HSLToHex, RESERVED_COLORS, areColorsContrasting, baseColorNames, baseColors, canTextBeUsedOnColors, deprecatedCLIOptions as cliOptions, colorMetadata, colorNames, configFileCreateSchema as configSchema, convertColor, convertToHex, createTokens, dsLinkColor, formatThemeCSS, formatTokens, generateColorContrast, generateColorScale, generateColorSchemes, getColorMetadataByNumber, getContrastFromHex, getContrastFromLightness, getCssVariable, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex, semanticColorMap, semanticColorNames, semanticColorNumbers };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"beta-to-v1.d.ts","names":[],"sources":["../../../src/migrations/beta-to-v1.ts"],"mappings":";yBAGgB,IAAA,cAAa,OAAA"}
|