Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(css): color-mix #10719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 16, 2025
Merged

feat(css): color-mix #10719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
146f9d6
feat(css): color-mix
NathanWalker Mar 14, 2025
ab4f08a
chore: testing
NathanWalker Mar 15, 2025
e5546ea
fix: tests
NathanWalker Mar 16, 2025
1ea200f
ref: added csstools plugins to parse color-mix
CatchABus Mar 16, 2025
9b9b9e8
chore: cleanup-deps
NathanWalker Mar 16, 2025
a44b178
Merge branch 'main' into feat/css-calc
NathanWalker Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 37 additions & 6 deletions apps/automated/src/ui/styling/style-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1708,18 +1708,18 @@ export function test_CascadingClassNamesAppliesAfterPageLoad() {
export function test_evaluateCssCalcExpression() {
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(1px + 1px)'), '2px', 'Simple calc (1)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(50px - (20px - 30px))'), '60px', 'Simple calc (2)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px - (100px - 100%))'), '100%', 'Simple calc (3)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px + (100px - 100%))'), 'calc(200px - 100%)', 'Simple calc (4)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% - 10px + 20px)'), 'calc(100% + 10px)', 'Simple calc (5)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% + 10px - 20px)'), 'calc(100% - 10px)', 'Simple calc (6)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(10.px + .0px)'), '10px', 'Simple calc (8)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px - (100px - 100%))'), 'calc(100px - (100px - 100%))', 'Simple calc (3)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px + (100px - 100%))'), 'calc(100px + (100px - 100%))', 'Simple calc (4)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% - 10px + 20px)'), 'calc(100% - 10px + 20px)', 'Simple calc (5)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% + 10px - 20px)'), 'calc(100% + 10px - 20px)', 'Simple calc (6)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(10.px + .0px)'), 'calc(10.px + .0px)', 'Simple calc (8)');
TKUnit.assertEqual(_evaluateCssCalcExpression('a calc(1px + 1px)'), 'a 2px', 'Ignore value surrounding calc function (1)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(1px + 1px) a'), '2px a', 'Ignore value surrounding calc function (2)');
TKUnit.assertEqual(_evaluateCssCalcExpression('a calc(1px + 1px) b'), 'a 2px b', 'Ignore value surrounding calc function (3)');
TKUnit.assertEqual(_evaluateCssCalcExpression('a calc(1px + 1px) b calc(1em + 2em) c'), 'a 2px b 3em c', 'Ignore value surrounding calc function (4)');
TKUnit.assertEqual(_evaluateCssCalcExpression(`calc(\n1px \n* 2 \n* 1.5)`), '3px', 'Handle new lines');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(1/100)'), '0.01', 'Handle precision correctly (1)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(5/1000000)'), '0.00001', 'Handle precision correctly (2)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(5/1000000)'), '0.000005', 'Handle precision correctly (2)');
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(5/100000)'), '0.00005', 'Handle precision correctly (3)');
}

Expand Down Expand Up @@ -1826,6 +1826,37 @@ export function test_nested_css_calc() {
TKUnit.assertDeepEqual(stack.width, { unit: '%', value: 0.5 }, 'Stack - width === 50%');
}

export function test_evaluateCssColorMixExpression() {
TKUnit.assertEqual(new Color('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)').toRgbString(), 'rgba(136, 202, 134, 1.00)', 'Color mix (1)');
TKUnit.assertEqual(new Color('color-mix(in hsl, hsl(200 50 80), coral 80%)').toRgbString(), 'rgba(247, 103, 149, 1.00)', 'Color mix (2)');
TKUnit.assertEqual(new Color('color-mix(in srgb, plum, #f00)').toRgbString(), 'rgba(238, 80, 110, 1.00)', 'Color mix (4)');
TKUnit.assertEqual(new Color('color-mix(in lab, plum 60%, #f00 50%)').toRgbString(), 'rgba(247, 112, 125, 1.00)', 'Color mix (5)');
TKUnit.assertEqual(new Color('color-mix(in --swop5c, red, blue)').toRgbString(), 'rgba(0, 0, 255, 0.00)', 'Color mix (6)');
}

export function test_nested_css_color_mix() {
const page = helper.getClearCurrentPage();

const stack = new StackLayout();
stack.css = `
StackLayout.coral {
background-color: color-mix(in hsl, hsl(200 50 80), coral 80%);
}
`;

const label = new Label();
page.content = stack;
stack.addChild(label);

stack.className = 'coral';

TKUnit.assertEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(247, 103, 149, 1.00)', 'Stack - backgroundColor === color-mix(in hsl, hsl(200 50 80), coral 80%)');

(stack as any).style = `background-color: color-mix(in --swop5c, red, blue);`;

TKUnit.assertDeepEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(0, 0, 255, 0.00)', 'Stack - backgroundColor === color-mix(in --swop5c, red, blue)');
}

export function test_css_variables() {
const blackColor = '#000000';
const redColor = '#FF0000';
Expand Down
19 changes: 19 additions & 0 deletions apps/toolbox/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,32 @@
@import 'nativescript-theme-core/css/core.light.css';
@import './_app-platform.css';

/** define shared global variables to test in toolbox */
* {
--color-black: black;
}

/*
The following CSS rule changes the font size of all UI
components that have the btn class name.
*/
Button {
text-transform: none;
}

.calc-padding {
padding: calc(4 * 6);
}

.colormix {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
/* background-color: color-mix(in lch longer hue, hsl(200deg 50% 80%), coral); */
/* background-color: color-mix(in hsl, hsl(200 50 80), coral 80%); */
/* background-color: color-mix(in srgb, plum, #f00); */
/* background-color: color-mix(in lab, plum 60%, #f00 50%); */
/* background-color: color-mix(in --swop5c, red, blue); */
}

.btn-view-demo {
/* background-color: #65ADF1; */
border-radius: 8;
Expand Down
1 change: 1 addition & 0 deletions apps/toolbox/src/main-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
</Page.actionBar>
<StackLayout>
<ScrollView class="h-full">
<!-- experiment with calc and colormix with classes: calc-padding colormix -->
<StackLayout class="p-20" paddingBottom="40" iosOverflowSafeArea="false">
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
Expand Down
145 changes: 119 additions & 26 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
"nativescript-theme-core": "^1.0.4"
},
"devDependencies": {
"@csstools/css-calc": "~2.1.2",
"@csstools/css-color-parser": "^3.0.8",
"@csstools/css-parser-algorithms": "^3.0.4",
"@csstools/css-tokenizer": "^3.0.3",
"@nativescript/hook": "^2.0.0",
"@nativescript/nx": "^20.0.0",
"@nstudio/focus": "^20.0.2",
Expand Down Expand Up @@ -66,7 +70,6 @@
"parse-css": "git+https://github.com/tabatkins/parse-css.git",
"parserlib": "^1.1.1",
"prettier": "^3.2.5",
"reduce-css-calc": "~2.1.7",
"sass": "^1.72.0",
"shady-css-parser": "^0.1.0",
"tree-kill": "^1.2.2",
Expand All @@ -85,4 +88,4 @@
"npx prettier --write"
]
}
}
}
Loading
Loading