@fest-lib/veela 0.1.1

package/src/scss/core/misc/_properties.scss

@@ -0,0 +1,245 @@
+@use "./mixins" as prop;
+
+@mixin declare-unit-props {
+    @include prop.register-properties(("--ppx": ("syntax": "<length-percentage>", "initial": 1px),
+            "--zpx": ("syntax": "<length-percentage>", "initial": 1px)));
+}
+
+@mixin declare-orientation-props {
+    @include prop.register-properties(("--ox-orient": ("syntax": "<number>", "initial": 0),
+            "--os-orient": ("syntax": "<number>", "initial": 0),
+            "--in-orient": ("syntax": "<number>", "initial": 0),
+            "--orient": ("syntax": "<number>", "initial": 0),
+            "--orientation-secondary": ("syntax": "<integer>", "initial": 0)));
+}
+
+@mixin declare-transform-props {
+    @include prop.register-properties(("--scaling": ("syntax": "<number>", "initial": 1),
+            "--resize-x": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--resize-y": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--drag-x": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--drag-y": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--zoom": ("syntax": "<number>", "initial": 1),
+            "--translate-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--translate-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--opacity": ("syntax": "<number>", "initial": 1, "inherits": false),
+            "--scale": ("syntax": "<number>", "initial": 1, "inherits": false),
+            "--corrector": ("syntax": "<number>", "initial": 1, "inherits": false)));
+}
+
+@mixin declare-viewport-props {
+    @include prop.register-properties(("--avi": ("syntax": "<length-percentage>", "initial": 0px),
+            "--avb": ("syntax": "<length-percentage>", "initial": 0px),
+            "--vp-i-size": ("syntax": "<length-percentage>", "initial": 0px),
+            "--vp-b-size": ("syntax": "<length-percentage>", "initial": 0px),
+            "--border-width": ("syntax": "<length-percentage>", "initial": 100%),
+            "--border-height": ("syntax": "<length-percentage>", "initial": 100%),
+            "--pixel-ratio": ("syntax": "<number>", "initial": 1),
+            "--screen-width": ("syntax": "<length-percentage>", "initial": 100dvi),
+            "--screen-height": ("syntax": "<length-percentage>", "initial": 100dvb),
+            "--avail-width": ("syntax": "<length-percentage>", "initial": 100dvi),
+            "--avail-height": ("syntax": "<length-percentage>", "initial": 100dvb),
+            "--view-height": ("syntax": "<length-percentage>", "initial": 100dvb),
+            "--keyboard-inset-bottom": ("syntax": "<length-percentage>", "initial": 0px),
+            "--keyboard-inset-height": ("syntax": "<length-percentage>", "initial": 0px)));
+}
+
+@mixin declare-conditional-props {
+    @include prop.register-properties(("--in-rev-cond-x": ("syntax": "<number>", "initial": 0),
+            "--in-rev-cond-y": ("syntax": "<number>", "initial": 0),
+            "--in-swap-cond": ("syntax": "<number>", "initial": 0),
+            "--in-rev-vx": ("syntax": "<number>", "initial": 0),
+            "--in-rev-vy": ("syntax": "<number>", "initial": 0)));
+}
+
+@mixin declare-inset-props {
+    @include prop.register-properties(("--cs-transition-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--cs-transition-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--cs-transition-c": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--cs-transition-r": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--cs-inset-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--cs-inset-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--os-inset-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--os-inset-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--in-inset-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--in-inset-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false)));
+}
+
+@mixin declare-region-drag-props {
+    @include prop.register-properties(("--cs-drag-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--cs-drag-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--os-drag-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--os-drag-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--in-drag-x": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false),
+            "--in-drag-y": ("syntax": "<length-percentage>", "initial": 0px, "inherits": false)));
+}
+
+@mixin declare-size-props {
+    @include prop.register-properties(("--cs-sw-unit-x": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cs-sw-unit-y": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cs-size-x": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cs-size-y": ("syntax": "<length-percentage>", "initial": 100%),
+            "--os-size-x": ("syntax": "<length-percentage>", "initial": 100%),
+            "--os-size-y": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cs-self-size-x": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cs-self-size-y": ("syntax": "<length-percentage>", "initial": 100%),
+            "--os-self-size-x": ("syntax": "<length-percentage>", "initial": 100%),
+            "--os-self-size-y": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cqi": ("syntax": "<length-percentage>", "initial": 100%),
+            "--cqb": ("syntax": "<length-percentage>", "initial": 100%)));
+}
+
+@mixin declare-rotation-props {
+    @include prop.register-properties(("--rot": ("syntax": "<angle>", "initial": 0deg),
+            "--i-rot": ("syntax": "<angle>", "initial": 0deg)));
+}
+
+@mixin declare-grid-props {
+    @include prop.register-properties(("--ox-c-span": ("syntax": "<number>", "initial": 1),
+            "--ox-r-span": ("syntax": "<number>", "initial": 1),
+            "--ox-c-unit": ("syntax": "<length-percentage>", "initial": 1px),
+            "--ox-r-unit": ("syntax": "<length-percentage>", "initial": 1px),
+            "--r-gap": ("syntax": "<length-percentage>", "initial": 0px),
+            "--c-gap": ("syntax": "<length-percentage>", "initial": 0px),
+            "--dir-x": ("syntax": "<number>", "initial": 0),
+            "--dir-y": ("syntax": "<number>", "initial": 0),
+            "--f-col": ("syntax": "<integer>", "initial": 0),
+            "--f-row": ("syntax": "<integer>", "initial": 0),
+            "--grid-c": ("syntax": "<number>", "initial": 0),
+            "--grid-r": ("syntax": "<number>", "initial": 0),
+            "--cell-x": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--cell-y": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--cs-grid-c": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--cs-grid-r": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--rv-grid-c": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--rv-grid-r": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--cs-p-grid-c": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--cs-p-grid-r": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--os-grid-c": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--os-grid-r": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--os-p-grid-c": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--os-p-grid-r": ("syntax": "<number>", "initial": 0, "inherits": false),
+        ));
+}
+
+@mixin declare-layout-props {
+    @include prop.register-properties(("--p-drag-x": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--p-drag-y": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--layout-r": ("syntax": "<integer>", "initial": 1),
+            "--layout-c": ("syntax": "<integer>", "initial": 1),
+            "--p-cell-x": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--p-cell-y": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--fc-cell-x": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--fc-cell-y": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--fp-cell-x": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--fp-cell-y": ("syntax": "<integer>", "initial": 0, "inherits": false),
+            "--c-shift-mod": ("syntax": "<number>", "initial": 0),
+            "--r-shift-mod": ("syntax": "<number>", "initial": 0)));
+}
+
+@mixin declare-lighting-props {
+    @include prop.register-properties(("--light-az": ("syntax": "<angle>", "initial": 225deg),
+            "--light-alt": ("syntax": "<angle>", "initial": 55deg),
+            "--soft-ang": ("syntax": "<angle>", "initial": 18deg),
+            "--parallax-k": ("syntax": "<number>", "initial": 0.01),
+            "--parallax-ref": ("syntax": "<length>", "initial": 600px),
+            "--az-span": ("syntax": "<angle>", "initial": 12deg),
+            "--alt-span": ("syntax": "<angle>", "initial": 6deg),
+            "--umbra-density": ("syntax": "<number>", "initial": 0.32),
+            "--penumbra-density": ("syntax": "<number>", "initial": 0.18)));
+}
+
+@mixin declare-shadow-props {
+    @include prop.register-properties(("--elev": ("syntax": "<number>", "initial": 0, "inherits": false),
+            "--lx": ("syntax": "<number>", "initial": -1),
+            "--ly": ("syntax": "<number>", "initial": -1),
+            "--lz": ("syntax": "<number>", "initial": 1.2),
+            "--z-index": ("syntax": "<number>", "initial": 0),
+            "--dx": ("syntax": "<number>", "initial": 0),
+            "--dy": ("syntax": "<number>", "initial": 0),
+            "--spreadC": ("syntax": "<number>", "initial": 0),
+            "--spreadU": ("syntax": "<number>", "initial": 0),
+            "--spreadP": ("syntax": "<number>", "initial": 0),
+            "--alphaC": ("syntax": "<number>", "initial": 0),
+            "--alphaU": ("syntax": "<number>", "initial": 0),
+            "--alphaP": ("syntax": "<number>", "initial": 0)));
+}
+
+@mixin declare-color-scale-props {
+    //
+    @include prop.register-properties(("--current": ("syntax": "<color>", "inherits": true, "initial": #469),
+            "--primary": ("syntax": "<color>", "inherits": true, "initial": #469),
+            "--secondary": ("syntax": "<color>", "inherits": true, "initial": #469),
+            "--trinary": ("syntax": "<color>", "inherits": true, "initial": #469),
+            "--current-is-light": ("syntax": "<number>", "inherits": true, "initial": 1),
+            "--size-scale": ("syntax": "<number>", "initial": 1),
+            "--font-scale": ("syntax": "<number>", "initial": 1)));
+
+    //
+    @include prop.register-properties(("--accent": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--error": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--neutral": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--surface": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--on-surface": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--surface-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--on-surface-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--outline": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--contrast": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--color-on-surface": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--border-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--scrollbar-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--contrast-color": ("syntax": "<color>", "inherits": true, "initial": #000),
+            "--on-contrast-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--on-contrast": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--outline-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--accent-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--text-decoration-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--fill-color": ("syntax": "<color>", "inherits": true, "initial": #0000),
+            "--text-emphasis-color": ("syntax": "<color>", "inherits": true, "initial": #0000)));
+
+    //
+    @include prop.register-properties(("--background-tone-shift": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--color-tone-shift": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--icon-tone-shift": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--accent-tone-shift": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--scrollbar-tone-shift": ("syntax": "<number>", "inherits": true, "initial": 0.0)));
+
+    // internals
+    @include prop.register-properties(("--_color-shade": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--_color-tint": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--hover-lift": ("syntax": "<number>", "inherits": true, "initial": 0.03),
+            "--active-lift": ("syntax": "<number>", "inherits": true, "initial": 0.05),
+            "--focus-lift": ("syntax": "<number>", "inherits": true, "initial": 0.02)));
+
+    //
+    @include prop.register-properties(("--color-shade": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--color-tint": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--color-opacity": ("syntax": "<number>", "inherits": true, "initial": 0.0),
+            "--color-enable-blur": ("syntax": "<number>", "inherits": true, "initial": 0),
+            "--c2h-ct": ("syntax": "<number>", "inherits": true, "initial": 0)));
+}
+
+
+@mixin declare-md-props {
+    @include prop.register-properties(("--md-state-layer-opacity": ("syntax": "<number>", "initial": 0),
+            "--md-elevation-level": ("syntax": "<integer>", "initial": 0),
+            "--interaction-tone-direction": ("syntax": "<number>", "initial": 1)));
+}
+
+@mixin declare-props {
+    @include declare-unit-props;
+    @include declare-orientation-props;
+    @include declare-transform-props;
+    @include declare-viewport-props;
+    @include declare-conditional-props;
+    @include declare-inset-props;
+    @include declare-region-drag-props;
+    @include declare-size-props;
+    @include declare-rotation-props;
+    @include declare-grid-props;
+    @include declare-layout-props;
+    @include declare-lighting-props;
+    @include declare-shadow-props;
+    @include declare-color-scale-props;
+    @include declare-md-props;
+}