feat(css): color-mix (#10719)

apps/toolbox/src/app.css

@@ -1,6 +1,11 @@
 @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.
@@ -8,6 +13,20 @@ 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;

apps/toolbox/src/main-page.xml

@@ -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" />