@wordpress/theme 0.3.1-next.8b30e05b0.0 → 0.4.1-next.8fd3f8831.0
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/CHANGELOG.md +9 -0
- package/README.md +114 -40
- package/build/color-ramps/{index.js → index.cjs} +8 -8
- package/build/color-ramps/lib/{color-utils.js → color-utils.cjs} +2 -2
- package/build/color-ramps/lib/{constants.js → constants.cjs} +2 -2
- package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs} +66 -66
- package/build/color-ramps/lib/{default-ramps.js.map → default-ramps.cjs.map} +1 -1
- package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs} +6 -6
- package/build/color-ramps/lib/find-color-with-constraints.cjs.map +7 -0
- package/build/color-ramps/lib/{index.js → index.cjs} +6 -6
- package/build/color-ramps/lib/index.cjs.map +7 -0
- package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs} +1 -1
- package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs} +1 -1
- package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs} +20 -46
- package/build/color-ramps/lib/taper-chroma.cjs.map +7 -0
- package/build/color-ramps/lib/{types.js → types.cjs} +1 -1
- package/build/color-ramps/lib/{utils.js → utils.cjs} +4 -4
- package/build/{context.js → context.cjs} +1 -1
- package/build/{index.js → index.cjs} +2 -2
- package/build/index.cjs.map +7 -0
- package/build/{lock-unlock.js → lock-unlock.cjs} +1 -1
- package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs} +33 -7
- package/build/prebuilt/js/design-tokens.cjs.map +7 -0
- package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs} +36 -14
- package/build/prebuilt/ts/color-tokens.cjs.map +7 -0
- package/build/{token-id.js → prebuilt/ts/token-types.cjs} +4 -16
- package/build/prebuilt/ts/token-types.cjs.map +7 -0
- package/build/{private-apis.js → private-apis.cjs} +4 -4
- package/build/{theme-provider.js → theme-provider.cjs} +3 -3
- package/build/{types.js → types.cjs} +1 -1
- package/build/{use-theme-provider-styles.js → use-theme-provider-styles.cjs} +6 -6
- package/build-module/color-ramps/index.js +7 -7
- package/build-module/color-ramps/lib/color-utils.js +1 -1
- package/build-module/color-ramps/lib/constants.js +1 -1
- package/build-module/color-ramps/lib/default-ramps.js +65 -65
- package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
- package/build-module/color-ramps/lib/find-color-with-constraints.js +5 -5
- package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build-module/color-ramps/lib/index.js +5 -5
- package/build-module/color-ramps/lib/index.js.map +2 -2
- package/build-module/color-ramps/lib/taper-chroma.js +20 -47
- package/build-module/color-ramps/lib/taper-chroma.js.map +2 -2
- package/build-module/color-ramps/lib/utils.js +3 -3
- package/build-module/index.js +1 -1
- package/build-module/index.js.map +2 -2
- package/build-module/prebuilt/js/design-tokens.js +32 -6
- package/build-module/prebuilt/js/design-tokens.js.map +2 -2
- package/build-module/prebuilt/ts/color-tokens.js +35 -13
- package/build-module/prebuilt/ts/color-tokens.js.map +2 -2
- package/build-module/prebuilt/ts/token-types.js +1 -0
- package/build-module/private-apis.js +3 -3
- package/build-module/theme-provider.js +2 -2
- package/build-module/use-theme-provider-styles.js +4 -4
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts +3 -4
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts.map +1 -1
- package/build-types/color-ramps/lib/taper-chroma.d.ts +4 -4
- package/build-types/color-ramps/lib/taper-chroma.d.ts.map +1 -1
- package/build-types/index.d.ts +2 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -1
- package/build-types/prebuilt/ts/token-types.d.ts +49 -0
- package/build-types/prebuilt/ts/token-types.d.ts.map +1 -0
- package/package.json +15 -7
- package/src/color-ramps/lib/default-ramps.ts +65 -65
- package/src/color-ramps/lib/find-color-with-constraints.ts +11 -7
- package/src/color-ramps/lib/index.ts +4 -4
- package/src/color-ramps/lib/taper-chroma.ts +32 -63
- package/src/index.ts +2 -1
- package/src/prebuilt/css/design-tokens.css +72 -28
- package/src/prebuilt/js/design-tokens.js +32 -6
- package/src/prebuilt/ts/color-tokens.ts +31 -9
- package/src/prebuilt/ts/token-types.ts +125 -0
- package/bin/generate-default-ramps/index.ts +0 -49
- package/bin/generate-primitive-tokens/index.ts +0 -120
- package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +0 -84
- package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts +0 -217
- package/bin/terrazzo-plugin-figma-ds-token-manager/lib.ts +0 -1
- package/bin/terrazzo-plugin-inline-alias-values/index.ts +0 -113
- package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +0 -52
- package/build/color-ramps/lib/find-color-with-constraints.js.map +0 -7
- package/build/color-ramps/lib/index.js.map +0 -7
- package/build/color-ramps/lib/taper-chroma.js.map +0 -7
- package/build/index.js.map +0 -7
- package/build/prebuilt/js/design-tokens.js.map +0 -7
- package/build/prebuilt/json/figma.json +0 -715
- package/build/prebuilt/ts/color-tokens.js.map +0 -7
- package/build/token-id.js.map +0 -7
- package/build/types/css-modules.d.js +0 -1
- package/build/types/css-modules.d.js.map +0 -7
- package/build-module/prebuilt/json/figma.json +0 -715
- package/build-module/token-id.js +0 -6
- package/build-module/token-id.js.map +0 -7
- package/build-module/types/css-modules.d.js +0 -1
- package/build-types/token-id.d.ts +0 -9
- package/build-types/token-id.d.ts.map +0 -1
- package/docs/ds-tokens.md +0 -150
- package/src/prebuilt/json/figma.json +0 -715
- package/src/test/token-id.test.ts +0 -12
- package/src/token-id.ts +0 -9
- package/src/types/css-modules.d.ts +0 -4
- package/terrazzo.config.ts +0 -126
- package/tokens/border.json +0 -34
- package/tokens/color.json +0 -1029
- package/tokens/dimension.json +0 -109
- package/tokens/elevation.json +0 -201
- package/tokens/typography.json +0 -93
- package/tsconfig.bin.json +0 -13
- package/tsconfig.bin.tsbuildinfo +0 -1
- package/tsconfig.json +0 -11
- package/tsconfig.src.json +0 -9
- package/tsconfig.src.tsbuildinfo +0 -1
- /package/build/color-ramps/{index.js.map → index.cjs.map} +0 -0
- /package/build/color-ramps/lib/{color-utils.js.map → color-utils.cjs.map} +0 -0
- /package/build/color-ramps/lib/{constants.js.map → constants.cjs.map} +0 -0
- /package/build/color-ramps/lib/{ramp-configs.js.map → ramp-configs.cjs.map} +0 -0
- /package/build/color-ramps/lib/{register-color-spaces.js.map → register-color-spaces.cjs.map} +0 -0
- /package/build/color-ramps/lib/{types.js.map → types.cjs.map} +0 -0
- /package/build/color-ramps/lib/{utils.js.map → utils.cjs.map} +0 -0
- /package/build/{context.js.map → context.cjs.map} +0 -0
- /package/build/{lock-unlock.js.map → lock-unlock.cjs.map} +0 -0
- /package/build/{private-apis.js.map → private-apis.cjs.map} +0 -0
- /package/build/{theme-provider.js.map → theme-provider.cjs.map} +0 -0
- /package/build/{types.js.map → types.cjs.map} +0 -0
- /package/build/{use-theme-provider-styles.js.map → use-theme-provider-styles.cjs.map} +0 -0
- /package/build-module/{types/css-modules.d.js.map → prebuilt/ts/token-types.js.map} +0 -0
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import fs from 'fs';
|
|
5
|
-
import path from 'path';
|
|
6
|
-
import { fileURLToPath } from 'url';
|
|
7
|
-
import {
|
|
8
|
-
parse,
|
|
9
|
-
to,
|
|
10
|
-
serialize,
|
|
11
|
-
OKLCH,
|
|
12
|
-
sRGB,
|
|
13
|
-
type PlainColorObject,
|
|
14
|
-
} from 'colorjs.io/fn';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Internal dependencies
|
|
18
|
-
*/
|
|
19
|
-
import '../../src/color-ramps/lib/register-color-spaces';
|
|
20
|
-
import {
|
|
21
|
-
DEFAULT_SEED_COLORS,
|
|
22
|
-
buildBgRamp,
|
|
23
|
-
buildAccentRamp,
|
|
24
|
-
} from '../../src/color-ramps/index';
|
|
25
|
-
|
|
26
|
-
const __filename = fileURLToPath( import.meta.url );
|
|
27
|
-
const __dirname = path.dirname( __filename );
|
|
28
|
-
|
|
29
|
-
// Path to the color.json file
|
|
30
|
-
const colorJsonPath = path.join( __dirname, '../../tokens/color.json' );
|
|
31
|
-
|
|
32
|
-
const transformColorStringToDTCGValue = ( color: string ) => {
|
|
33
|
-
if ( /oklch|p3/.test( color ) ) {
|
|
34
|
-
let parsed: PlainColorObject;
|
|
35
|
-
try {
|
|
36
|
-
parsed = to( parse( color ), OKLCH );
|
|
37
|
-
} catch {
|
|
38
|
-
return color;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const coords = parsed.coords;
|
|
42
|
-
return {
|
|
43
|
-
colorSpace: 'oklch',
|
|
44
|
-
components: [
|
|
45
|
-
Math.floor( 10000 * coords[ 0 ] ) / 10000, // l
|
|
46
|
-
coords[ 1 ], // c
|
|
47
|
-
isNaN( coords[ 2 ] ) ? 0 : coords[ 2 ], // h
|
|
48
|
-
],
|
|
49
|
-
...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
|
|
50
|
-
hex: serialize( to( parsed, sRGB ), { format: 'hex' } ),
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return color;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
// Main function
|
|
58
|
-
function generatePrimitiveColorTokens() {
|
|
59
|
-
const startTime = performance.now();
|
|
60
|
-
console.log( '🎨 Starting primitive color tokens generation...' );
|
|
61
|
-
|
|
62
|
-
try {
|
|
63
|
-
// Read the color.json file
|
|
64
|
-
const colorJson = JSON.parse(
|
|
65
|
-
fs.readFileSync( colorJsonPath, 'utf8' )
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
// Build the ramps
|
|
69
|
-
const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
|
|
70
|
-
const accentRamps = [ ...Object.entries( DEFAULT_SEED_COLORS ) ]
|
|
71
|
-
.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
|
|
72
|
-
.map( ( [ scaleName, seed ] ) => ( {
|
|
73
|
-
scaleName,
|
|
74
|
-
ramp: buildAccentRamp( seed, bgRamp ),
|
|
75
|
-
} ) );
|
|
76
|
-
|
|
77
|
-
// Convert the ramp values in a DTCG compatible format
|
|
78
|
-
[
|
|
79
|
-
{
|
|
80
|
-
scaleName: 'bg',
|
|
81
|
-
ramp: bgRamp,
|
|
82
|
-
},
|
|
83
|
-
...accentRamps,
|
|
84
|
-
].forEach( ( { scaleName, ramp } ) => {
|
|
85
|
-
colorJson.color.primitive[ scaleName ] = {};
|
|
86
|
-
for ( const [ tokenName, tokenValue ] of Object.entries(
|
|
87
|
-
ramp.ramp
|
|
88
|
-
) ) {
|
|
89
|
-
colorJson.color.primitive[ scaleName ][ tokenName ] = {
|
|
90
|
-
$value: transformColorStringToDTCGValue( tokenValue ),
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
} );
|
|
94
|
-
|
|
95
|
-
// Write the updated JSON back to the file with proper formatting
|
|
96
|
-
fs.writeFileSync(
|
|
97
|
-
colorJsonPath,
|
|
98
|
-
JSON.stringify( colorJson, null, '\t' )
|
|
99
|
-
);
|
|
100
|
-
|
|
101
|
-
const endTime = performance.now();
|
|
102
|
-
const duration = endTime - startTime;
|
|
103
|
-
console.log(
|
|
104
|
-
`✅ Successfully updated color.json (${ duration.toFixed( 2 ) }ms)`
|
|
105
|
-
);
|
|
106
|
-
} catch ( error ) {
|
|
107
|
-
const endTime = performance.now();
|
|
108
|
-
const duration = endTime - startTime;
|
|
109
|
-
console.error(
|
|
110
|
-
`❌ Error updating color tokens after ${ duration.toFixed(
|
|
111
|
-
2
|
|
112
|
-
) }ms:`,
|
|
113
|
-
error
|
|
114
|
-
);
|
|
115
|
-
process.exit( 1 );
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Run the script
|
|
120
|
-
generatePrimitiveColorTokens();
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { FORMAT_ID } from '@terrazzo/plugin-css';
|
|
5
|
-
import type { Plugin } from '@terrazzo/parser';
|
|
6
|
-
|
|
7
|
-
function titleCase( str: string ) {
|
|
8
|
-
return str[ 0 ].toUpperCase() + str.slice( 1 );
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
type TokensMap = Record< string, Record< string, string > >;
|
|
12
|
-
|
|
13
|
-
export default function pluginDsTokenDocs( {
|
|
14
|
-
filename = 'design-tokens.md',
|
|
15
|
-
} = {} ): Plugin {
|
|
16
|
-
return {
|
|
17
|
-
name: '@terrazzo/terrazzo-plugin-ds-tokens-docs',
|
|
18
|
-
async build( { getTransforms, outputFile } ) {
|
|
19
|
-
if ( ! filename ) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const semanticTokens: TokensMap = {};
|
|
24
|
-
// Re-use transformed tokens from the CSS plugin
|
|
25
|
-
for ( const token of getTransforms( {
|
|
26
|
-
format: FORMAT_ID,
|
|
27
|
-
id: '*',
|
|
28
|
-
mode: '.',
|
|
29
|
-
} ) ) {
|
|
30
|
-
if ( token.localID === undefined ) {
|
|
31
|
-
console.warn(
|
|
32
|
-
'Unexpected — Missing local ID when building token list for eslint plugin'
|
|
33
|
-
);
|
|
34
|
-
continue;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// Use the tokens filename (without .json) as the group name
|
|
38
|
-
const group =
|
|
39
|
-
token.token.source.loc
|
|
40
|
-
?.split( '/' )
|
|
41
|
-
.at( -1 )
|
|
42
|
-
?.split( '.json' )[ 0 ] ?? 'Miscellaneous';
|
|
43
|
-
|
|
44
|
-
// Group by category
|
|
45
|
-
semanticTokens[ group ] ??= {};
|
|
46
|
-
semanticTokens[ group ][ token.localID ] =
|
|
47
|
-
token.token.$description ?? 'N/A';
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function tokensToMdTable( tokens: TokensMap ) {
|
|
51
|
-
return Object.entries( tokens )
|
|
52
|
-
.map( ( [ group, tokensInGroup ] ) => [
|
|
53
|
-
`### ${ titleCase( group ) }`,
|
|
54
|
-
'',
|
|
55
|
-
'| Variable name | Description |',
|
|
56
|
-
'|---|---|',
|
|
57
|
-
...Object.entries( tokensInGroup ).map(
|
|
58
|
-
( [ name, description ] ) =>
|
|
59
|
-
`| \`${ name }\` | ${ description } |`
|
|
60
|
-
),
|
|
61
|
-
'',
|
|
62
|
-
] )
|
|
63
|
-
.flat( 2 );
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
outputFile(
|
|
67
|
-
filename,
|
|
68
|
-
[
|
|
69
|
-
'<!--',
|
|
70
|
-
'This file is generated by @terrazzo/terrazzo-plugin-ds-tokens-docs.',
|
|
71
|
-
'Do not edit directly.',
|
|
72
|
-
'-->',
|
|
73
|
-
'',
|
|
74
|
-
'# DS Tokens reference',
|
|
75
|
-
'',
|
|
76
|
-
'## Semantic tokens',
|
|
77
|
-
'',
|
|
78
|
-
...tokensToMdTable( semanticTokens ),
|
|
79
|
-
'', // final empty line
|
|
80
|
-
].join( '\n' )
|
|
81
|
-
);
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
}
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import type { Plugin, TokenNormalized } from '@terrazzo/parser';
|
|
5
|
-
import { transformCSSValue } from '@terrazzo/token-tools/css';
|
|
6
|
-
import {
|
|
7
|
-
parse,
|
|
8
|
-
to,
|
|
9
|
-
serialize,
|
|
10
|
-
sRGB,
|
|
11
|
-
type ColorConstructor,
|
|
12
|
-
} from 'colorjs.io/fn';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
import '../../src/color-ramps/lib/register-color-spaces';
|
|
18
|
-
import { FORMAT_JSON_ID } from './lib';
|
|
19
|
-
|
|
20
|
-
function titleCase( str: string ) {
|
|
21
|
-
return str[ 0 ].toUpperCase() + str.slice( 1 );
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function kebabToCamel( str: string ) {
|
|
25
|
-
return str.replace( /-([a-z])/g, ( _, letter ) => letter.toUpperCase() );
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function transformTokenName( { id }: { id: string } ) {
|
|
29
|
-
return (
|
|
30
|
-
id
|
|
31
|
-
// Capitalize first segment
|
|
32
|
-
.replace( /^(\w+)\./g, ( _, g1 ) => `${ titleCase( g1 ) }/` )
|
|
33
|
-
// Capitalize
|
|
34
|
-
.replace( /primitive\./g, '_Primitives/' )
|
|
35
|
-
.replace( /semantic\./g, 'Semantic/' )
|
|
36
|
-
.replace(
|
|
37
|
-
/(color\/_Primitives)\/(\w+)\.(.*)/gi,
|
|
38
|
-
( _, prefix, tone, rampStep ) => {
|
|
39
|
-
return `${ prefix }/${ titleCase( tone ) }/${ rampStep }`;
|
|
40
|
-
}
|
|
41
|
-
)
|
|
42
|
-
// Color-specific transformation for semantic tokens:
|
|
43
|
-
// - add extra folder (Background, Foreground, Stroke)
|
|
44
|
-
// - swap "tone" folder order, capitalize
|
|
45
|
-
// - limit bg-* to 6 characters
|
|
46
|
-
// - keep last part of the token name with dots (eg no folders)
|
|
47
|
-
.replace(
|
|
48
|
-
/(color\/Semantic)\/([\w,\-]+)\.(\w+)\.(.*)/gi,
|
|
49
|
-
( _, prefix, element, tone, emphasisAndState ) => {
|
|
50
|
-
let extraFolder = '';
|
|
51
|
-
let elementName = element;
|
|
52
|
-
if ( /bg/.test( element ) ) {
|
|
53
|
-
extraFolder = 'Background/';
|
|
54
|
-
elementName = element.slice( 0, 6 );
|
|
55
|
-
} else if ( /fg/.test( element ) ) {
|
|
56
|
-
extraFolder = 'Foreground/';
|
|
57
|
-
elementName = element.slice( 0, 6 );
|
|
58
|
-
} else if ( /stroke/.test( element ) ) {
|
|
59
|
-
extraFolder = 'Stroke/';
|
|
60
|
-
elementName = element.slice( 0, 10 );
|
|
61
|
-
}
|
|
62
|
-
return `${ prefix }/${ extraFolder }${ titleCase(
|
|
63
|
-
tone
|
|
64
|
-
) }/${ kebabToCamel(
|
|
65
|
-
elementName
|
|
66
|
-
) }.${ tone }.${ emphasisAndState }`;
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
// Remove default emphasis and state variants from variable name
|
|
70
|
-
.replace( /normal\./g, '' )
|
|
71
|
-
.replace( /resting/g, '' )
|
|
72
|
-
// Remove double dots
|
|
73
|
-
.replace( /\.{2,}/g, '.' )
|
|
74
|
-
// Remove trailing dot
|
|
75
|
-
.replace( /\.$/g, '' )
|
|
76
|
-
// Replace remaining dots with dashes
|
|
77
|
-
.replace( /\./g, '-' )
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function transformColorToken(
|
|
82
|
-
token: TokenNormalized,
|
|
83
|
-
mode: string,
|
|
84
|
-
tokens: Record< string, TokenNormalized >
|
|
85
|
-
) {
|
|
86
|
-
if (
|
|
87
|
-
token.mode[ mode ]?.aliasChain &&
|
|
88
|
-
token.mode[ mode ].aliasChain.length > 0
|
|
89
|
-
) {
|
|
90
|
-
// Keep aliases
|
|
91
|
-
return `{${ transformTokenName( {
|
|
92
|
-
id: token.mode[ mode ].aliasChain[ 0 ],
|
|
93
|
-
} ) }}`;
|
|
94
|
-
}
|
|
95
|
-
// Start by letting terrazzo do the heavy lifting.
|
|
96
|
-
const baselineCSSValue = transformCSSValue( token, {
|
|
97
|
-
mode,
|
|
98
|
-
tokensSet: tokens,
|
|
99
|
-
transformAlias: transformTokenName,
|
|
100
|
-
} );
|
|
101
|
-
|
|
102
|
-
if ( baselineCSSValue === undefined ) {
|
|
103
|
-
console.warn( 'Unexpected: could not tranform color token value' );
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
let cssColorValue: string;
|
|
108
|
-
|
|
109
|
-
if ( typeof baselineCSSValue === 'object' ) {
|
|
110
|
-
if ( 'srgb' in baselineCSSValue ) {
|
|
111
|
-
// Pick SRGB gamut (safer compared to p3 or rec2020)
|
|
112
|
-
cssColorValue = baselineCSSValue.srgb;
|
|
113
|
-
} else {
|
|
114
|
-
console.log( 'UNSUPPORTED USE CASE' );
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
} else {
|
|
118
|
-
cssColorValue = baselineCSSValue;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// Always convert to hex
|
|
122
|
-
// (easier to convert to Figma RGB, and includes clamping)
|
|
123
|
-
let convertedColor: ColorConstructor;
|
|
124
|
-
try {
|
|
125
|
-
convertedColor = parse( cssColorValue );
|
|
126
|
-
} catch {
|
|
127
|
-
console.warn( 'Unexpected: could not convert token value to Color' );
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return serialize( to( convertedColor, sRGB ), { format: 'hex' } );
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
export default function pluginFigmaDsTokenManager( {
|
|
135
|
-
filename = 'figma-ds-tokens.json',
|
|
136
|
-
} = {} ): Plugin {
|
|
137
|
-
return {
|
|
138
|
-
name: '@terrazzo/plugin-figma-ds-token-manager',
|
|
139
|
-
async transform( { tokens, getTransforms, setTransform } ) {
|
|
140
|
-
// skip work if another .json plugin has already run
|
|
141
|
-
const jsonTokens = getTransforms( {
|
|
142
|
-
format: FORMAT_JSON_ID,
|
|
143
|
-
id: '*',
|
|
144
|
-
mode: '.',
|
|
145
|
-
} );
|
|
146
|
-
if ( jsonTokens.length ) {
|
|
147
|
-
return;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
for ( const [ id, token ] of Object.entries( tokens ) ) {
|
|
151
|
-
for ( const mode of Object.keys( token.mode ) ) {
|
|
152
|
-
const localID = transformTokenName( token );
|
|
153
|
-
|
|
154
|
-
let transformedValue;
|
|
155
|
-
|
|
156
|
-
if ( token.$type === 'color' ) {
|
|
157
|
-
transformedValue = transformColorToken(
|
|
158
|
-
token,
|
|
159
|
-
mode,
|
|
160
|
-
tokens
|
|
161
|
-
);
|
|
162
|
-
} else if (
|
|
163
|
-
token.mode[ mode ]?.aliasChain &&
|
|
164
|
-
token.mode[ mode ].aliasChain.length > 0
|
|
165
|
-
) {
|
|
166
|
-
// Keep aliases
|
|
167
|
-
transformedValue = `{${ transformTokenName( {
|
|
168
|
-
id: token.mode[ mode ].aliasChain[ 0 ],
|
|
169
|
-
} ) }}`;
|
|
170
|
-
} else {
|
|
171
|
-
// Fallback to terrazzo
|
|
172
|
-
transformedValue = transformCSSValue( token, {
|
|
173
|
-
mode,
|
|
174
|
-
tokensSet: tokens,
|
|
175
|
-
transformAlias: transformTokenName,
|
|
176
|
-
} );
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
if ( transformedValue !== undefined ) {
|
|
180
|
-
setTransform( id, {
|
|
181
|
-
format: FORMAT_JSON_ID,
|
|
182
|
-
localID,
|
|
183
|
-
value: transformedValue,
|
|
184
|
-
mode,
|
|
185
|
-
} );
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
async build( { getTransforms, outputFile } ) {
|
|
191
|
-
const tokenVals: Record<
|
|
192
|
-
string,
|
|
193
|
-
{
|
|
194
|
-
value: Record< string, string | Record< string, string > >;
|
|
195
|
-
description?: string;
|
|
196
|
-
}
|
|
197
|
-
> = {};
|
|
198
|
-
|
|
199
|
-
for ( const token of getTransforms( {
|
|
200
|
-
format: FORMAT_JSON_ID,
|
|
201
|
-
id: '*',
|
|
202
|
-
} ) ) {
|
|
203
|
-
if ( ! token.localID ) {
|
|
204
|
-
continue;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
tokenVals[ token.localID ] ??= { value: {}, description: '' };
|
|
208
|
-
|
|
209
|
-
tokenVals[ token.localID ].value[ token.mode ] = token.value;
|
|
210
|
-
tokenVals[ token.localID ].description =
|
|
211
|
-
token.token.$description;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
outputFile( filename, JSON.stringify( tokenVals, null, 2 ) );
|
|
215
|
-
},
|
|
216
|
-
};
|
|
217
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const FORMAT_JSON_ID = 'json';
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { type Plugin, type TokenNormalized } from '@terrazzo/parser';
|
|
5
|
-
|
|
6
|
-
interface InlineAliasValuesOptions {
|
|
7
|
-
/**
|
|
8
|
-
* Output filename for the generated aliased tokens mapping.
|
|
9
|
-
*/
|
|
10
|
-
filename?: string;
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Pattern matching IDs of tokens whose values should be inlined into their alias references.
|
|
14
|
-
*/
|
|
15
|
-
pattern: RegExp;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Optional function to transform token IDs in the output.
|
|
19
|
-
*/
|
|
20
|
-
tokenId?: ( tokenId: string ) => string;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Inlines the values of tokens matching the given pattern into their alias
|
|
25
|
-
* references. Matching tokens are removed from the output, and a TypeScript
|
|
26
|
-
* file is emitted with the mapping of aliased tokens.
|
|
27
|
-
*
|
|
28
|
-
* @param options The options for the plugin.
|
|
29
|
-
* @param options.filename
|
|
30
|
-
* @param options.pattern
|
|
31
|
-
* @param options.tokenId
|
|
32
|
-
*/
|
|
33
|
-
export default function inlineAliasValues( {
|
|
34
|
-
filename,
|
|
35
|
-
pattern,
|
|
36
|
-
tokenId = ( id ) => id,
|
|
37
|
-
}: InlineAliasValuesOptions ): Plugin {
|
|
38
|
-
const aliasedBy: Record< string, string[] > = {};
|
|
39
|
-
|
|
40
|
-
return {
|
|
41
|
-
name: '@wordpress/terrazzo-plugin-inline-alias-values',
|
|
42
|
-
async transform( { tokens } ) {
|
|
43
|
-
// Map of primitive token ID -> array of references to inline
|
|
44
|
-
const inlineMap: Record< string, TokenNormalized[] > = {};
|
|
45
|
-
|
|
46
|
-
// Single pass: identify primitives and collect references
|
|
47
|
-
for ( const [ id, token ] of Object.entries( tokens ) ) {
|
|
48
|
-
const shouldInline = pattern.test( id );
|
|
49
|
-
|
|
50
|
-
if ( shouldInline ) {
|
|
51
|
-
// Track this token for inlining
|
|
52
|
-
inlineMap[ id ] = [];
|
|
53
|
-
|
|
54
|
-
// Track aliased tokens for output file
|
|
55
|
-
if ( token.aliasedBy ) {
|
|
56
|
-
aliasedBy[ tokenId( id ) ] =
|
|
57
|
-
token.aliasedBy.map( tokenId );
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// Check if this token's main value references a primitive
|
|
62
|
-
if ( token.aliasOf && pattern.test( token.aliasOf ) ) {
|
|
63
|
-
inlineMap[ token.aliasOf ] ??= [];
|
|
64
|
-
inlineMap[ token.aliasOf ].push( token );
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// Check if any mode values reference a primitive
|
|
68
|
-
for ( const modeValue of Object.values( token.mode ) ) {
|
|
69
|
-
const { aliasOf } = modeValue;
|
|
70
|
-
if ( aliasOf && pattern.test( aliasOf ) ) {
|
|
71
|
-
const primitiveId = aliasOf;
|
|
72
|
-
inlineMap[ primitiveId ] ??= [];
|
|
73
|
-
inlineMap[ primitiveId ].push( modeValue );
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Inline values and delete primitives
|
|
79
|
-
for ( const [ id, references ] of Object.entries( inlineMap ) ) {
|
|
80
|
-
const token = tokens[ id ];
|
|
81
|
-
|
|
82
|
-
for ( const target of references ) {
|
|
83
|
-
target.$value = token.$value;
|
|
84
|
-
target.originalValue = token.originalValue;
|
|
85
|
-
delete target.aliasOf;
|
|
86
|
-
delete target.aliasChain;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
delete tokens[ id ];
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
async build( { outputFile } ) {
|
|
93
|
-
if ( ! filename ) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
const json = JSON.stringify( aliasedBy, null, 2 );
|
|
98
|
-
|
|
99
|
-
outputFile(
|
|
100
|
-
filename,
|
|
101
|
-
[
|
|
102
|
-
'/**',
|
|
103
|
-
' * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.',
|
|
104
|
-
' * Do not edit this file directly.',
|
|
105
|
-
' */',
|
|
106
|
-
'',
|
|
107
|
-
`export default ${ json } as Record< string, string[] >;`,
|
|
108
|
-
'',
|
|
109
|
-
].join( '\n' )
|
|
110
|
-
);
|
|
111
|
-
},
|
|
112
|
-
};
|
|
113
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { FORMAT_ID } from '@terrazzo/plugin-css';
|
|
5
|
-
import type { Plugin } from '@terrazzo/parser';
|
|
6
|
-
|
|
7
|
-
export default function pluginKnownWpdsCssVariables( {
|
|
8
|
-
filename = 'design-tokens.js',
|
|
9
|
-
} = {} ): Plugin {
|
|
10
|
-
return {
|
|
11
|
-
name: '@terrazzo/plugin-known-wpds-css-variables',
|
|
12
|
-
async build( { getTransforms, outputFile } ) {
|
|
13
|
-
// Either a string (modes=false) or an object (modes=true)
|
|
14
|
-
const tokensToExport: Record<
|
|
15
|
-
string,
|
|
16
|
-
Record< string, string | Record< string, string > >
|
|
17
|
-
> = {};
|
|
18
|
-
|
|
19
|
-
for ( const token of getTransforms( {
|
|
20
|
-
format: FORMAT_ID,
|
|
21
|
-
id: '*',
|
|
22
|
-
} ) ) {
|
|
23
|
-
if ( ! token.localID ) {
|
|
24
|
-
console.warn(
|
|
25
|
-
'Unexpected — Missing local ID when building token list for eslint plugin'
|
|
26
|
-
);
|
|
27
|
-
continue;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
tokensToExport[ token.localID ] ??= {};
|
|
31
|
-
tokensToExport[ token.localID ][ token.mode ] = token.value;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
outputFile(
|
|
35
|
-
filename,
|
|
36
|
-
[
|
|
37
|
-
'/**',
|
|
38
|
-
' * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.',
|
|
39
|
-
' * Do not edit this file directly.',
|
|
40
|
-
' */',
|
|
41
|
-
'',
|
|
42
|
-
`export default ${ JSON.stringify(
|
|
43
|
-
Array.from( new Set( Object.keys( tokensToExport ) ) ),
|
|
44
|
-
null,
|
|
45
|
-
2
|
|
46
|
-
) }`,
|
|
47
|
-
'', // final empty line
|
|
48
|
-
].join( '\n' )
|
|
49
|
-
);
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/color-ramps/lib/find-color-with-constraints.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport { solveWithBisect } from './utils';\nimport { WHITE, BLACK, CONTRAST_EPSILON } from './constants';\nimport { clampToGamut, getContrast } from './color-utils';\nimport { type TaperChromaOptions, taperChroma } from './taper-chroma';\n\n/**\n * Difference of contrast values that grows linearly with the Y luminance.\n * We get more precise linear interpolations when we use this.\n * @param c1 First contrast.\n * @param c2 Second contrast.\n * @return Difference of logarithms.\n */\nfunction cdiff( c1: number, c2: number ) {\n\treturn Math.log( c1 / c2 );\n}\n\n/**\n * Solve for L such that:\n * - the L applied to the seed meets the contrast target against the reference\n * - the search is performed in one direction (ie lighter / darker)\n * - more constraints can be applied around lightness\n * - chroma could be tapered\n * @param reference\n * @param seed\n * @param target\n * @param direction\n * @param options\n * @param options.lightnessConstraint\n * @param options.lightnessConstraint.type\n * @param options.lightnessConstraint.value\n * @param options.taperChromaOptions\n */\nexport function findColorMeetingRequirements(\n\treference: ColorTypes,\n\tseed: ColorTypes,\n\ttarget: number,\n\tdirection: 'lighter' | 'darker',\n\t{\n\t\tlightnessConstraint,\n\t\ttaperChromaOptions,\n\t}: {\n\t\tlightnessConstraint?: {\n\t\t\ttype: 'force' | 'onlyIfSucceeds';\n\t\t\tvalue: number;\n\t\t};\n\t\ttaperChromaOptions?: TaperChromaOptions;\n\t} = {}\n): { color: ColorTypes; reached: boolean; achieved: number; deficit?: number } {\n\t// A target of 1 means same color.\n\t// A target lower than 1 doesn't make sense.\n\tif ( target <= 1 ) {\n\t\treturn {\n\t\t\tcolor: reference,\n\t\t\treached: true,\n\t\t\tachieved: 1,\n\t\t};\n\t}\n\n\tfunction getColorForL( l: number ): ColorTypes {\n\t\tlet newL = l;\n\t\tlet newC = get( seed, [ OKLCH, 'c' ] );\n\n\t\tif ( taperChromaOptions ) {\n\t\t\tconst tapered = taperChroma( seed, newL, taperChromaOptions );\n\t\t\t// taperChroma returns either { l, c } or a ColorObject\n\t\t\tif ( 'l' in tapered && 'c' in tapered ) {\n\t\t\t\tnewL = tapered.l;\n\t\t\t\tnewC = tapered.c;\n\t\t\t} else {\n\t\t\t\t// It's already a ColorObject, return it directly\n\t\t\t\treturn tapered;\n\t\t\t}\n\t\t}\n\n\t\treturn clampToGamut( {\n\t\t\tspaceId: 'oklch',\n\t\t\tcoords: [ newL, newC, get( seed, [ OKLCH, 'h' ] ) ],\n\t\t} );\n\t}\n\n\t// Set the boundary based on the direction.\n\tconst mostContrastingL = direction === 'lighter' ? 1 : 0;\n\tconst mostContrastingColor = direction === 'lighter' ? WHITE : BLACK;\n\tconst highestContrast = getContrast( reference, mostContrastingColor );\n\n\tif ( lightnessConstraint ) {\n\t\t// Apply a specific L value.\n\t\t// Useful when pinning a step to a specific lightness, of to specify\n\t\t// min/max L values.\n\t\tconst colorWithExactL = getColorForL( lightnessConstraint.value );\n\t\tconst exactLContrast = getContrast( reference, colorWithExactL );\n\t\tconst exactLContrastMeetsTarget =\n\t\t\tcdiff( exactLContrast, target ) >= -CONTRAST_EPSILON;\n\n\t\t// If the L constraint is of \"force\" type, apply it even when it doesn't\n\t\t// meet the contrast target.\n\t\tif (\n\t\t\texactLContrastMeetsTarget ||\n\t\t\tlightnessConstraint.type === 'force'\n\t\t) {\n\t\t\treturn {\n\t\t\t\tcolor: colorWithExactL,\n\t\t\t\treached: exactLContrastMeetsTarget,\n\t\t\t\tachieved: exactLContrast,\n\t\t\t\tdeficit: exactLContrastMeetsTarget\n\t\t\t\t\t? cdiff( exactLContrast, highestContrast )\n\t\t\t\t\t: cdiff( target, exactLContrast ),\n\t\t\t};\n\t\t}\n\t}\n\n\t// If even the most contrasting color can't reach the target, the target is unreachable.\n\t// On the other hand, if the contrast is very close to the target, we consider it reached.\n\tif ( cdiff( highestContrast, target ) <= CONTRAST_EPSILON ) {\n\t\treturn {\n\t\t\tcolor: mostContrastingColor,\n\t\t\treached: cdiff( highestContrast, target ) >= -CONTRAST_EPSILON,\n\t\t\tachieved: highestContrast,\n\t\t\tdeficit: cdiff( target, highestContrast ),\n\t\t};\n\t}\n\n\t// Bracket: low fails, high meets.\n\t// Originally this was seed.oklch.l \u2014 although it's an assumption that works\n\t// only when we know for sure the direction of the search.\n\t// TODO: can we bring this back to seed.oklch.l ?\n\tconst lowerL = get( reference, [ OKLCH, 'l' ] );\n\tconst lowerContrast = cdiff( 1, target );\n\tconst upperL = mostContrastingL;\n\tconst upperContrast = cdiff( highestContrast, target );\n\n\tconst bestColor = solveWithBisect(\n\t\tgetColorForL,\n\t\t( c: ColorTypes ) => cdiff( getContrast( reference, c ), target ),\n\t\tlowerL,\n\t\tlowerContrast,\n\t\tupperL,\n\t\tupperContrast\n\t);\n\n\treturn {\n\t\tcolor: bestColor,\n\t\treached: true,\n\t\tachieved: target,\n\t\t// Negative number that specifies how much room we have.\n\t\tdeficit: cdiff( target, highestContrast ),\n\t};\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA4C;AAK5C,mCAAO;AACP,mBAAgC;AAChC,uBAA+C;AAC/C,yBAA0C;AAC1C,0BAAqD;AASrD,SAAS,MAAO,IAAY,IAAa;AACxC,SAAO,KAAK,IAAK,KAAK,EAAG;AAC1B;AAkBO,SAAS,6BACf,WACA,MACA,QACA,WACA;AAAA,EACC;AAAA,EACA;AACD,IAMI,CAAC,GACyE;AAG9E,MAAK,UAAU,GAAI;AAClB,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IACX;AAAA,EACD;AAEA,WAAS,aAAc,GAAwB;AAC9C,QAAI,OAAO;AACX,QAAI,WAAO,eAAK,MAAM,CAAE,iBAAO,GAAI,CAAE;AAErC,QAAK,oBAAqB;AACzB,YAAM,cAAU,iCAAa,MAAM,MAAM,kBAAmB;AAE5D,UAAK,OAAO,WAAW,OAAO,SAAU;AACvC,eAAO,QAAQ;AACf,eAAO,QAAQ;AAAA,MAChB,OAAO;AAEN,eAAO;AAAA,MACR;AAAA,IACD;AAEA,eAAO,iCAAc;AAAA,MACpB,SAAS;AAAA,MACT,QAAQ,CAAE,MAAM,UAAM,eAAK,MAAM,CAAE,iBAAO,GAAI,CAAE,CAAE;AAAA,IACnD,CAAE;AAAA,EACH;AAGA,QAAM,mBAAmB,cAAc,YAAY,IAAI;AACvD,QAAM,uBAAuB,cAAc,YAAY,yBAAQ;AAC/D,QAAM,sBAAkB,gCAAa,WAAW,oBAAqB;AAErE,MAAK,qBAAsB;AAI1B,UAAM,kBAAkB,aAAc,oBAAoB,KAAM;AAChE,UAAM,qBAAiB,gCAAa,WAAW,eAAgB;AAC/D,UAAM,4BACL,MAAO,gBAAgB,MAAO,KAAK,CAAC;AAIrC,QACC,6BACA,oBAAoB,SAAS,SAC5B;AACD,aAAO;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS,4BACN,MAAO,gBAAgB,eAAgB,IACvC,MAAO,QAAQ,cAAe;AAAA,MAClC;AAAA,IACD;AAAA,EACD;AAIA,MAAK,MAAO,iBAAiB,MAAO,KAAK,mCAAmB;AAC3D,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS,MAAO,iBAAiB,MAAO,KAAK,CAAC;AAAA,MAC9C,UAAU;AAAA,MACV,SAAS,MAAO,QAAQ,eAAgB;AAAA,IACzC;AAAA,EACD;AAMA,QAAM,aAAS,eAAK,WAAW,CAAE,iBAAO,GAAI,CAAE;AAC9C,QAAM,gBAAgB,MAAO,GAAG,MAAO;AACvC,QAAM,SAAS;AACf,QAAM,gBAAgB,MAAO,iBAAiB,MAAO;AAErD,QAAM,gBAAY;AAAA,IACjB;AAAA,IACA,CAAE,MAAmB,UAAO,gCAAa,WAAW,CAAE,GAAG,MAAO;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA;AAAA,IAEV,SAAS,MAAO,QAAQ,eAAgB;AAAA,EACzC;AACD;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/color-ramps/lib/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tclone,\n\tget,\n\tOKLCH,\n\tparse,\n\tset,\n\ttype ColorTypes,\n\ttype PlainColorObject,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport { clampToGamut, getContrast, getColorString } from './color-utils';\nimport { findColorMeetingRequirements } from './find-color-with-constraints';\nimport {\n\tsortByDependency,\n\tcomputeBetterFgColorDirection,\n\tadjustContrastTarget,\n\tstepsForStep,\n\tsolveWithBisect,\n} from './utils';\n\nimport type {\n\tFollowDirection,\n\tRamp,\n\tRampDirection,\n\tRampConfig,\n\tRampResult,\n} from './types';\nimport { CONTRAST_EPSILON } from './constants';\n\n/**\n * Calculate a complete color ramp based on the provided configuration.\n *\n * @param params - The calculation parameters\n * @param params.seed - The base color to build the ramp from\n * @param params.sortedSteps - Steps sorted in dependency order\n * @param params.config - Ramp configuration defining contrast requirements\n * @param params.mainDir - Primary direction for the ramp (lighter/darker)\n * @param params.oppDir - Opposite direction from mainDir\n * @param params.pinLightness - Optional lightness override for a given step\n * @param params.pinLightness.stepName\n * @param params.pinLightness.value\n * @return Object containing ramp results and satisfaction status\n */\nfunction calculateRamp( {\n\tseed,\n\tsortedSteps,\n\tconfig,\n\tmainDir,\n\toppDir,\n\tpinLightness,\n}: {\n\tseed: ColorTypes;\n\tsortedSteps: ( keyof Ramp )[];\n\tconfig: RampConfig;\n\tmainDir: RampDirection;\n\toppDir: RampDirection;\n\tpinLightness?: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} ) {\n\tconst rampResults = {} as Record< keyof Ramp, string >;\n\tlet warnings: string[] | undefined;\n\tlet maxDeficit = -Infinity;\n\tlet maxDeficitDirection: RampDirection = 'lighter';\n\tlet maxDeficitStep;\n\n\t// Keep track of the calculated colors, as they are going to be useful\n\t// when other colors reference them.\n\tconst calculatedColors = new Map< keyof Ramp | 'seed', ColorTypes >();\n\tcalculatedColors.set( 'seed', seed );\n\n\tfor ( const stepName of sortedSteps ) {\n\t\tconst {\n\t\t\tcontrast,\n\t\t\tlightness: stepLightnessConstraint,\n\t\t\ttaperChromaOptions,\n\t\t\tsameAsIfPossible,\n\t\t} = config[ stepName ];\n\n\t\tconst referenceColor = calculatedColors.get( contrast.reference );\n\t\tif ( ! referenceColor ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Reference color for step ${ stepName } not found: ${ contrast.reference }`\n\t\t\t);\n\t\t}\n\n\t\t// Check if we can reuse color from the `sameAsIfPossible` config option\n\t\tif ( sameAsIfPossible ) {\n\t\t\tconst candidateColor = calculatedColors.get( sameAsIfPossible );\n\t\t\tif ( ! candidateColor ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Same-as color for step ${ stepName } not found: ${ sameAsIfPossible }`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst candidateContrast = getContrast(\n\t\t\t\treferenceColor,\n\t\t\t\tcandidateColor\n\t\t\t);\n\t\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\t\t\t// If the candidate meets the contrast requirement, use it\n\t\t\tif ( candidateContrast >= adjustedTarget ) {\n\t\t\t\t// Store the reused color\n\t\t\t\tcalculatedColors.set( stepName, candidateColor );\n\t\t\t\trampResults[ stepName ] = getColorString( candidateColor );\n\n\t\t\t\tcontinue; // Skip to next step\n\t\t\t}\n\t\t}\n\n\t\tfunction computeDirection(\n\t\t\tcolor: ColorTypes,\n\t\t\tfollowDirection: FollowDirection\n\t\t): RampDirection {\n\t\t\tif ( followDirection === 'main' ) {\n\t\t\t\treturn mainDir;\n\t\t\t}\n\n\t\t\tif ( followDirection === 'opposite' ) {\n\t\t\t\treturn oppDir;\n\t\t\t}\n\n\t\t\tif ( followDirection === 'best' ) {\n\t\t\t\treturn computeBetterFgColorDirection(\n\t\t\t\t\tcolor,\n\t\t\t\t\tcontrast.preferLighter\n\t\t\t\t).better;\n\t\t\t}\n\n\t\t\treturn followDirection;\n\t\t}\n\n\t\tconst computedDir = computeDirection(\n\t\t\treferenceColor,\n\t\t\tcontrast.followDirection\n\t\t);\n\n\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\n\t\t// Define the lightness constraint, if needed.\n\t\tlet lightnessConstraint;\n\t\tif ( pinLightness?.stepName === stepName ) {\n\t\t\tlightnessConstraint = {\n\t\t\t\tvalue: pinLightness.value,\n\t\t\t\ttype: 'force',\n\t\t\t} as const;\n\t\t} else if ( stepLightnessConstraint ) {\n\t\t\tlightnessConstraint = {\n\t\t\t\tvalue: stepLightnessConstraint( computedDir ),\n\t\t\t\ttype: 'onlyIfSucceeds',\n\t\t\t} as const;\n\t\t}\n\n\t\t// Calculate the color meeting the requirements\n\t\tconst searchResults = findColorMeetingRequirements(\n\t\t\treferenceColor,\n\t\t\tseed,\n\t\t\tadjustedTarget,\n\t\t\tcomputedDir,\n\t\t\t{\n\t\t\t\tlightnessConstraint,\n\t\t\t\ttaperChromaOptions,\n\t\t\t}\n\t\t);\n\n\t\t// When the target contrast is not met, take note of it and use\n\t\t// that information to guide the ramp calculation bisection.\n\t\tif (\n\t\t\t! contrast.ignoreWhenAdjustingSeed &&\n\t\t\tsearchResults.deficit &&\n\t\t\tsearchResults.deficit > maxDeficit\n\t\t) {\n\t\t\tmaxDeficit = searchResults.deficit;\n\t\t\tmaxDeficitDirection = computedDir;\n\t\t\tmaxDeficitStep = stepName;\n\t\t}\n\n\t\t// Store calculated color for future dependencies\n\t\tcalculatedColors.set( stepName, searchResults.color );\n\n\t\t// Add to results\n\t\trampResults[ stepName ] = getColorString( searchResults.color );\n\n\t\tif ( ! searchResults.reached && ! contrast.ignoreWhenAdjustingSeed ) {\n\t\t\twarnings ??= [];\n\t\t\twarnings.push( stepName );\n\t\t}\n\t}\n\n\treturn {\n\t\trampResults,\n\t\twarnings,\n\t\tmaxDeficit,\n\t\tmaxDeficitDirection,\n\t\tmaxDeficitStep,\n\t};\n}\n\nexport function buildRamp(\n\tseedArg: string,\n\tconfig: RampConfig,\n\t{\n\t\tmainDirection,\n\t\tpinLightness,\n\t\trescaleToFitContrastTargets = true,\n\t}: {\n\t\tmainDirection?: RampDirection;\n\t\tpinLightness?: {\n\t\t\tstepName: keyof Ramp;\n\t\t\tvalue: number;\n\t\t};\n\t\trescaleToFitContrastTargets?: boolean;\n\t} = {}\n): RampResult {\n\tlet seed: PlainColorObject;\n\ttry {\n\t\tseed = clampToGamut( parse( seedArg ) );\n\t} catch ( error ) {\n\t\tthrow new Error(\n\t\t\t`Invalid seed color \"${ seedArg }\": ${\n\t\t\t\terror instanceof Error ? error.message : 'Unknown error'\n\t\t\t}`\n\t\t);\n\t}\n\n\tlet mainDir: RampDirection = 'lighter';\n\tlet oppDir: RampDirection = 'darker';\n\n\tif ( mainDirection ) {\n\t\tmainDir = mainDirection;\n\t\toppDir = mainDirection === 'darker' ? 'lighter' : 'darker';\n\t} else {\n\t\tconst { better, worse } = computeBetterFgColorDirection( seed );\n\t\tmainDir = better;\n\t\toppDir = worse;\n\t}\n\n\t// Get the correct calculation order based on dependencies\n\tconst sortedSteps = sortByDependency( config );\n\n\t// Calculate the ramp with the initial seed.\n\tconst {\n\t\trampResults,\n\t\twarnings,\n\t\tmaxDeficit,\n\t\tmaxDeficitDirection,\n\t\tmaxDeficitStep,\n\t} = calculateRamp( {\n\t\tseed,\n\t\tsortedSteps,\n\t\tconfig,\n\t\tmainDir,\n\t\toppDir,\n\t\tpinLightness,\n\t} );\n\n\tlet bestRamp = rampResults;\n\n\tif ( maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets ) {\n\t\tconst iterSteps = stepsForStep( maxDeficitStep!, config );\n\n\t\tfunction getSeedForL( l: number ): ColorTypes {\n\t\t\treturn clampToGamut( set( clone( seed ), [ OKLCH, 'l' ], l ) );\n\t\t}\n\n\t\tfunction getDeficitForSeed( s: ColorTypes ): number {\n\t\t\tconst iterationResults = calculateRamp( {\n\t\t\t\tseed: s,\n\t\t\t\tsortedSteps: iterSteps,\n\t\t\t\tconfig,\n\t\t\t\tmainDir,\n\t\t\t\toppDir,\n\t\t\t\tpinLightness,\n\t\t\t} );\n\n\t\t\t// If the constraints start failing in the opposite direction to the original\n\t\t\t// iteration's direction, that means we've moved too far away from the target.\n\t\t\t// Don't use the `maxDeficit` value because it's not related to our search,\n\t\t\t// and might even be positive, which would confuse the bisection algorithm.\n\t\t\treturn iterationResults.maxDeficitDirection === maxDeficitDirection\n\t\t\t\t? iterationResults.maxDeficit\n\t\t\t\t: -maxDeficit;\n\t\t}\n\n\t\t// For a scale with the \"lighter\" direction, the contrast can be improved\n\t\t// by darkening the seed. For \"darker\" direction, by lightening the seed.\n\t\tconst lowerSeedL = maxDeficitDirection === 'lighter' ? 0 : 1;\n\t\tconst lowerDeficit = -maxDeficit;\n\t\tconst upperSeedL = get( seed, [ OKLCH, 'l' ] );\n\t\tconst upperDeficit = maxDeficit;\n\n\t\tconst bestSeed = solveWithBisect(\n\t\t\tgetSeedForL,\n\t\t\tgetDeficitForSeed,\n\t\t\tlowerSeedL,\n\t\t\tlowerDeficit,\n\t\t\tupperSeedL,\n\t\t\tupperDeficit\n\t\t);\n\n\t\t// Calculate the final ramp with adjusted seed.\n\t\tbestRamp = calculateRamp( {\n\t\t\tseed: bestSeed,\n\t\t\tsortedSteps,\n\t\t\tconfig,\n\t\t\tmainDir,\n\t\t\toppDir,\n\t\t\tpinLightness,\n\t\t} ).rampResults;\n\t}\n\n\t// Swap surface1 and surface3 for darker ramps to maintain visual elevation hierarchy.\n\t// This ensures surface1 appears \"behind\" surface2, and surface3 appears \"in front\",\n\t// regardless of the ramp's main direction.\n\tif ( mainDir === 'darker' ) {\n\t\tconst tmpSurface1 = bestRamp.surface1;\n\t\tbestRamp.surface1 = bestRamp.surface3;\n\t\tbestRamp.surface3 = tmpSurface1;\n\t}\n\n\treturn {\n\t\tramp: bestRamp,\n\t\twarnings,\n\t\tdirection: mainDir,\n\t};\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["adjustedTarget"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/color-ramps/lib/taper-chroma.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tget,\n\tinGamut,\n\tOKLCH,\n\tP3,\n\tsRGB,\n\ttype ColorTypes,\n\ttype ColorObject,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\nexport interface TaperChromaOptions {\n\tgamut?: 'p3' | 'srgb'; // target gamut (default \"p3\")\n\talpha?: number; // base fraction of Cmax at target (default 0.62)\n\tcarry?: number; // seed vividness carry exponent \u03B2 in [0..1] (default 0.5)\n\tcUpperBound?: number; // hard search cap for C (default 0.45)\n\t// Continuous taper around the seed (desaturate both sides slightly)\n\tradiusLight?: number; // distance in L where kLight is reached (default 0.20)\n\tradiusDark?: number; // distance in L where kDark is reached (default 0.20)\n\tkLight?: number; // floor multiplier near lighter side (default 0.85)\n\tkDark?: number; // floor multiplier near darker side (default 0.85)\n\t// Achromatic handling\n\thueFallback?: number; // degrees: if seed is achromatic and you still want color\n\tachromaEpsilon?: number; // \u2264 this chroma \u2192 treat as achromatic (default 0.005)\n}\n\n/**\n * Given the seed and the target lightness, tapers the chroma smoothly.\n * - C_intended = Cmax(Lt,H0) * alpha * (seedRelative^carry)\n * - Continuous taper vs |Lt - Ls| to softly reduce chroma for neighbors\n * - Downward-only clamp on C (preserve L & H)\n * @param seed\n * @param lTarget\n * @param options\n */\nexport function taperChroma(\n\tseed: ColorTypes, // already OKLCH\n\tlTarget: number, // [0..1]\n\toptions: TaperChromaOptions = {}\n): { l: number; c: number } | ColorObject {\n\tconst gamut = options.gamut ?? 'p3';\n\tconst gamutSpace = gamut === 'p3' ? P3 : sRGB;\n\tconst alpha = options.alpha ?? 0.65; // 0.7-0.8 works well for accent surface\n\tconst carry = options.carry ?? 0.5;\n\tconst cUpperBound = options.cUpperBound ?? 0.45;\n\tconst radiusLight = options.radiusLight ?? 0.2;\n\tconst radiusDark = options.radiusDark ?? 0.2;\n\tconst kLight = options.kLight ?? 0.85;\n\tconst kDark = options.kDark ?? 0.85;\n\tconst achromaEpsilon = options.achromaEpsilon ?? 0.005;\n\n\tconst cSeed = Math.max( 0, get( seed, [ OKLCH, 'c' ] ) );\n\tlet hSeed = Number( get( seed, [ OKLCH, 'h' ] ) );\n\n\tconst chromaIsTiny = cSeed < achromaEpsilon;\n\tconst hueIsInvalid = ! Number.isFinite( hSeed );\n\n\tif ( chromaIsTiny || hueIsInvalid ) {\n\t\tif ( typeof options.hueFallback === 'number' ) {\n\t\t\thSeed = normalizeHue( options.hueFallback );\n\t\t} else {\n\t\t\t// Respect achromatic intent: grayscale at target L\n\t\t\treturn {\n\t\t\t\tspaceId: 'oklch',\n\t\t\t\tcoords: [ clamp01( lTarget ), 0, 0 ],\n\t\t\t};\n\t\t}\n\t}\n\n\t// Capacity at seed and target\n\tconst lSeed = clamp01( get( seed, [ OKLCH, 'l' ] ) );\n\tconst cmaxSeed = getCachedMaxChromaAtLH(\n\t\tlSeed,\n\t\thSeed,\n\t\tgamutSpace,\n\t\tcUpperBound\n\t);\n\tconst cmaxTarget = getCachedMaxChromaAtLH(\n\t\tclamp01( lTarget ),\n\t\thSeed,\n\t\tgamutSpace,\n\t\tcUpperBound\n\t);\n\n\t// Seed vividness ratio (hue-fair normalization)\n\tlet seedRelative = 0;\n\tconst denom = cmaxSeed > 0 ? cmaxSeed : 1e-6;\n\tseedRelative = clamp01( cSeed / denom );\n\n\t// Intended chroma from local capacity, tempered by seed vividness\n\tconst cIntendedBase = alpha * cmaxTarget;\n\tconst cWithCarry =\n\t\tcIntendedBase * Math.pow( seedRelative, clamp01( carry ) );\n\n\t// Gentle, symmetric desaturation vs distance in L\n\tconst t = continuousTaper( lSeed, lTarget, {\n\t\tradiusLight,\n\t\tradiusDark,\n\t\tkLight,\n\t\tkDark,\n\t} );\n\tlet cPlanned = cWithCarry * t;\n\n\t// Downward-only clamp (preserve L & H)\n\tconst lOut = clamp01( lTarget );\n\tconst candidate: ColorTypes = {\n\t\tspaceId: 'oklch',\n\t\tcoords: [ lOut, cPlanned, hSeed ],\n\t};\n\tif ( ! inGamut( candidate, gamutSpace ) ) {\n\t\tconst cap = Math.min( cPlanned, cUpperBound );\n\t\tcPlanned = getCachedMaxChromaAtLH( lOut, hSeed, gamutSpace, cap );\n\t}\n\n\tcPlanned = Math.min( cPlanned, cSeed );\n\n\treturn { l: lOut, c: cPlanned };\n}\n\n/* ---------------- helpers & caches ---------------- */\n\nfunction clamp01( x: number ): number {\n\tif ( x < 0 ) {\n\t\treturn 0;\n\t}\n\tif ( x > 1 ) {\n\t\treturn 1;\n\t}\n\treturn x;\n}\nfunction normalizeHue( h: number ): number {\n\tlet hue = h % 360;\n\tif ( hue < 0 ) {\n\t\thue += 360;\n\t}\n\treturn hue;\n}\nfunction raisedCosine( u: number ): number {\n\tconst x = clamp01( u );\n\treturn 0.5 - 0.5 * Math.cos( Math.PI * x );\n}\n\n/**\n * smooth, distance-from-seed chroma taper (raised-cosine per side)\n * @param seedL\n * @param targetL\n * @param opts\n * @param opts.radiusLight\n * @param opts.radiusDark\n * @param opts.kLight\n * @param opts.kDark\n */\nfunction continuousTaper(\n\tseedL: number,\n\ttargetL: number,\n\topts: {\n\t\tradiusLight: number;\n\t\tradiusDark: number;\n\t\tkLight: number;\n\t\tkDark: number;\n\t}\n): number {\n\tconst d = targetL - seedL;\n\tif ( d >= 0 ) {\n\t\tconst u = opts.radiusLight > 0 ? Math.abs( d ) / opts.radiusLight : 1;\n\t\tconst w = raisedCosine( u > 1 ? 1 : u );\n\t\treturn 1 - ( 1 - opts.kLight ) * w;\n\t}\n\tconst u = opts.radiusDark > 0 ? Math.abs( d ) / opts.radiusDark : 1;\n\tconst w = raisedCosine( u > 1 ? 1 : u );\n\treturn 1 - ( 1 - opts.kDark ) * w;\n}\n\n/* ---- chroma-capacity queries with small caches ---- */\n\nconst maxChromaCache = new Map< string, number >();\n\nfunction keyMax(\n\tl: number,\n\th: number,\n\tgamut: 'p3' | 'srgb',\n\tcap: number\n): string {\n\t// Quantize to keep cache compact\n\tconst lq = quantize( l, 1e-3 );\n\tconst hq = quantize( normalizeHue( h ), 1e-1 );\n\tconst cq = quantize( cap, 1e-3 );\n\treturn `${ gamut }|L:${ lq }|H:${ hq }|cap:${ cq }`;\n}\nfunction quantize( x: number, step: number ): number {\n\tconst k = Math.round( x / step );\n\treturn k * step;\n}\n\nfunction getCachedMaxChromaAtLH(\n\tl: number,\n\th: number,\n\tgamutSpace: typeof P3 | typeof sRGB,\n\tcap: number\n): number {\n\tconst gamut = gamutSpace === P3 ? 'p3' : 'srgb';\n\tconst key = keyMax( l, h, gamut, cap );\n\tconst hit = maxChromaCache.get( key );\n\tif ( typeof hit === 'number' ) {\n\t\treturn hit;\n\t}\n\n\tconst computed = maxInGamutChromaAtLH( l, h, gamutSpace, cap );\n\tmaxChromaCache.set( key, computed );\n\treturn computed;\n}\n\n/**\n * Binary-search the max in-gamut chroma at fixed (L,H) in the target gamut\n * @param l\n * @param h\n * @param gamutSpace\n * @param cap\n */\nfunction maxInGamutChromaAtLH(\n\tl: number,\n\th: number,\n\tgamutSpace: typeof P3 | typeof sRGB,\n\tcap: number\n): number {\n\tlet lo = 0;\n\tlet hi = cap;\n\tlet ok = 0;\n\n\tconst lFixed = clamp01( l );\n\tconst hFixed = normalizeHue( h );\n\n\tfor ( let i = 0; i < 18; i++ ) {\n\t\tconst mid = ( lo + hi ) / 2;\n\t\tconst probe: ColorTypes = {\n\t\t\tspaceId: 'oklch',\n\t\t\tcoords: [ lFixed, mid, hFixed ],\n\t\t};\n\t\tif ( inGamut( probe, gamutSpace ) ) {\n\t\t\tok = mid;\n\t\t\tlo = mid;\n\t\t} else {\n\t\t\thi = mid;\n\t\t}\n\t}\n\treturn ok;\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["u", "w"]
|
|
7
|
-
}
|