Skip to content

Commit cfc27eb

Browse files
NathanWalkerNathanWalker
authored
feat(css): color-mix (#10719)
1 parent e2f9687 commit cfc27eb

File tree

11 files changed

+499
-266
lines changed

11 files changed

+499
-266
lines changed

‎apps/automated/src/ui/styling/style-tests.ts‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1708,18 +1708,18 @@ export function test_CascadingClassNamesAppliesAfterPageLoad() {
17081708
export function test_evaluateCssCalcExpression() {
17091709
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(1px + 1px)'), '2px', 'Simple calc (1)');
17101710
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(50px - (20px - 30px))'), '60px', 'Simple calc (2)');
1711-
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px - (100px - 100%))'), '100%', 'Simple calc (3)');
1712-
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px + (100px - 100%))'), 'calc(200px - 100%)', 'Simple calc (4)');
1713-
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% - 10px + 20px)'), 'calc(100% + 10px)', 'Simple calc (5)');
1714-
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% + 10px - 20px)'), 'calc(100% - 10px)', 'Simple calc (6)');
1715-
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(10.px + .0px)'), '10px', 'Simple calc (8)');
1711+
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px - (100px - 100%))'), 'calc(100px - (100px - 100%))', 'Simple calc (3)');
1712+
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100px + (100px - 100%))'), 'calc(100px + (100px - 100%))', 'Simple calc (4)');
1713+
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% - 10px + 20px)'), 'calc(100% - 10px + 20px)', 'Simple calc (5)');
1714+
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(100% + 10px - 20px)'), 'calc(100% + 10px - 20px)', 'Simple calc (6)');
1715+
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(10.px + .0px)'), 'calc(10.px + .0px)', 'Simple calc (8)');
17161716
TKUnit.assertEqual(_evaluateCssCalcExpression('a calc(1px + 1px)'), 'a 2px', 'Ignore value surrounding calc function (1)');
17171717
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(1px + 1px) a'), '2px a', 'Ignore value surrounding calc function (2)');
17181718
TKUnit.assertEqual(_evaluateCssCalcExpression('a calc(1px + 1px) b'), 'a 2px b', 'Ignore value surrounding calc function (3)');
17191719
TKUnit.assertEqual(_evaluateCssCalcExpression('a calc(1px + 1px) b calc(1em + 2em) c'), 'a 2px b 3em c', 'Ignore value surrounding calc function (4)');
17201720
TKUnit.assertEqual(_evaluateCssCalcExpression(`calc(\n1px \n* 2 \n* 1.5)`), '3px', 'Handle new lines');
17211721
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(1/100)'), '0.01', 'Handle precision correctly (1)');
1722-
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(5/1000000)'), '0.00001', 'Handle precision correctly (2)');
1722+
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(5/1000000)'), '0.000005', 'Handle precision correctly (2)');
17231723
TKUnit.assertEqual(_evaluateCssCalcExpression('calc(5/100000)'), '0.00005', 'Handle precision correctly (3)');
17241724
}
17251725

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

1829+
export function test_evaluateCssColorMixExpression() {
1830+
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)');
1831+
TKUnit.assertEqual(new Color('color-mix(in hsl, hsl(200 50 80), coral 80%)').toRgbString(), 'rgba(247, 103, 149, 1.00)', 'Color mix (2)');
1832+
TKUnit.assertEqual(new Color('color-mix(in srgb, plum, #f00)').toRgbString(), 'rgba(238, 80, 110, 1.00)', 'Color mix (4)');
1833+
TKUnit.assertEqual(new Color('color-mix(in lab, plum 60%, #f00 50%)').toRgbString(), 'rgba(247, 112, 125, 1.00)', 'Color mix (5)');
1834+
TKUnit.assertEqual(new Color('color-mix(in --swop5c, red, blue)').toRgbString(), 'rgba(0, 0, 255, 0.00)', 'Color mix (6)');
1835+
}
1836+
1837+
export function test_nested_css_color_mix() {
1838+
const page = helper.getClearCurrentPage();
1839+
1840+
const stack = new StackLayout();
1841+
stack.css = `
1842+
StackLayout.coral {
1843+
background-color: color-mix(in hsl, hsl(200 50 80), coral 80%);
1844+
}
1845+
`;
1846+
1847+
const label = new Label();
1848+
page.content = stack;
1849+
stack.addChild(label);
1850+
1851+
stack.className = 'coral';
1852+
1853+
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%)');
1854+
1855+
(stack as any).style = `background-color: color-mix(in --swop5c, red, blue);`;
1856+
1857+
TKUnit.assertDeepEqual((stack.backgroundColor as Color).toRgbString(), 'rgba(0, 0, 255, 0.00)', 'Stack - backgroundColor === color-mix(in --swop5c, red, blue)');
1858+
}
1859+
18291860
export function test_css_variables() {
18301861
const blackColor = '#000000';
18311862
const redColor = '#FF0000';

‎apps/toolbox/src/app.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,32 @@
11
@import 'nativescript-theme-core/css/core.light.css';
22
@import './_app-platform.css';
33

4+
/** define shared global variables to test in toolbox */
5+
* {
6+
--color-black: black;
7+
}
8+
49
/*
510
The following CSS rule changes the font size of all UI
611
components that have the btn class name.
712
*/
813
Button {
914
text-transform: none;
1015
}
16+
17+
.calc-padding {
18+
padding: calc(4 * 6);
19+
}
20+
21+
.colormix {
22+
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
23+
/* background-color: color-mix(in lch longer hue, hsl(200deg 50% 80%), coral); */
24+
/* background-color: color-mix(in hsl, hsl(200 50 80), coral 80%); */
25+
/* background-color: color-mix(in srgb, plum, #f00); */
26+
/* background-color: color-mix(in lab, plum 60%, #f00 50%); */
27+
/* background-color: color-mix(in --swop5c, red, blue); */
28+
}
29+
1130
.btn-view-demo {
1231
/* background-color: #65ADF1; */
1332
border-radius: 8;

‎apps/toolbox/src/main-page.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
</Page.actionBar>
66
<StackLayout>
77
<ScrollView class="h-full">
8+
<!-- experiment with calc and colormix with classes: calc-padding colormix -->
89
<StackLayout class="p-20" paddingBottom="40" iosOverflowSafeArea="false">
910
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
1011
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

‎package-lock.json‎

Lines changed: 119 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
"nativescript-theme-core": "^1.0.4"
2121
},
2222
"devDependencies": {
23+
"@csstools/css-calc": "~2.1.2",
24+
"@csstools/css-color-parser": "^3.0.8",
25+
"@csstools/css-parser-algorithms": "^3.0.4",
26+
"@csstools/css-tokenizer": "^3.0.3",
2327
"@nativescript/hook": "^2.0.0",
2428
"@nativescript/nx": "^20.0.0",
2529
"@nstudio/focus": "^20.0.2",
@@ -66,7 +70,6 @@
6670
"parse-css": "git+https://github.com/tabatkins/parse-css.git",
6771
"parserlib": "^1.1.1",
6872
"prettier": "^3.2.5",
69-
"reduce-css-calc": "~2.1.7",
7073
"sass": "^1.72.0",
7174
"shady-css-parser": "^0.1.0",
7275
"tree-kill": "^1.2.2",
@@ -85,4 +88,4 @@
8588
"npx prettier --write"
8689
]
8790
}
88-
}
91+
}

0 commit comments

Comments
 (0)