@nativescript/core 9.0.10-next.0 → 9.0.10

package/ui/styling/length-shared.js

@@ -0,0 +1,173 @@
+// Shared Length, FixedLength, and PercentLength helpers for styling modules.
+// Only put platform-agnostic logic here.
+import { layout } from '../../utils/layout-helper';
+import { isCssWideKeyword } from '../core/properties/property-shared';
+function equalsCommon(a, b) {
+    if (a == 'auto' || isCssWideKeyword(a)) {
+        return b == 'auto' || isCssWideKeyword(b);
+    }
+    if (b == 'auto' || isCssWideKeyword(b)) {
+        return false;
+    }
+    if (typeof a === 'number') {
+        if (typeof b === 'number') {
+            return a == b;
+        }
+        if (!b) {
+            return false;
+        }
+        return b.unit == 'dip' && a == b.value;
+    }
+    if (typeof b === 'number') {
+        return a ? a.unit == 'dip' && a.value == b : false;
+    }
+    if (!a || !b) {
+        return false;
+    }
+    return a.value == b.value && a.unit == b.unit;
+}
+function convertToStringCommon(length) {
+    if (length == 'auto' || isCssWideKeyword(length)) {
+        return 'auto';
+    }
+    if (typeof length === 'number') {
+        return length.toString();
+    }
+    let val = length.value;
+    if (length.unit === '%') {
+        val *= 100;
+    }
+    return val + length.unit;
+}
+function toDevicePixelsCommon(length, auto = Number.NaN, parentAvailableWidth = Number.NaN) {
+    if (length == 'auto' || isCssWideKeyword(length)) {
+        return auto;
+    }
+    if (typeof length === 'number') {
+        return layout.round(layout.toDevicePixels(length));
+    }
+    if (!length) {
+        return auto;
+    }
+    // @ts-ignore
+    switch (length.unit) {
+        case 'px':
+            // @ts-ignore
+            return layout.round(length.value);
+        case '%':
+            // @ts-ignore
+            return layout.round(parentAvailableWidth * length.value);
+        case 'dip':
+        default:
+            // @ts-ignore
+            return layout.round(layout.toDevicePixels(length.value));
+    }
+}
+export var PercentLength;
+(function (PercentLength) {
+    function parse(fromValue) {
+        if (fromValue == 'auto') {
+            return 'auto';
+        }
+        if (typeof fromValue === 'string') {
+            let stringValue = fromValue.trim();
+            const percentIndex = stringValue.indexOf('%');
+            if (percentIndex !== -1) {
+                let value;
+                // if only % or % is not last we treat it as invalid value.
+                if (percentIndex !== stringValue.length - 1 || percentIndex === 0) {
+                    value = Number.NaN;
+                }
+                else {
+                    // Normalize result to values between -1 and 1
+                    value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
+                }
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${fromValue}`);
+                }
+                return { unit: '%', value };
+            }
+            else if (stringValue.indexOf('px') !== -1) {
+                stringValue = stringValue.replace('px', '').trim();
+                const value = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${fromValue}`);
+                }
+                return { unit: 'px', value };
+            }
+            else {
+                const value = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${fromValue}`);
+                }
+                return value;
+            }
+        }
+        else {
+            return fromValue;
+        }
+    }
+    PercentLength.parse = parse;
+    PercentLength.equals = equalsCommon;
+    /**
+     * Converts PercentLengthType unit to device pixels.
+     * @param length The PercentLengthType to convert.
+     * @param auto Value to use for conversion of "auto". By default is Math.NaN.
+     * @param parentAvailableWidth Value to use as base when converting percent unit. By default is Math.NaN.
+     */
+    PercentLength.toDevicePixels = toDevicePixelsCommon;
+    PercentLength.convertToString = convertToStringCommon;
+})(PercentLength || (PercentLength = {}));
+export var FixedLength;
+(function (FixedLength) {
+    function parse(fromValue) {
+        if (typeof fromValue === 'string') {
+            let stringValue = fromValue.trim();
+            if (stringValue.indexOf('px') !== -1) {
+                stringValue = stringValue.replace('px', '').trim();
+                const value = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${stringValue}`);
+                }
+                return { unit: 'px', value };
+            }
+            else {
+                const value = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${stringValue}`);
+                }
+                return value;
+            }
+        }
+        else {
+            return fromValue;
+        }
+    }
+    FixedLength.parse = parse;
+    FixedLength.equals = equalsCommon;
+    /**
+     * Converts FixedLengthType unit to device pixels.
+     * @param length The FixedLengthType to convert.
+     */
+    FixedLength.toDevicePixels = toDevicePixelsCommon;
+    FixedLength.convertToString = convertToStringCommon;
+})(FixedLength || (FixedLength = {}));
+export var Length;
+(function (Length) {
+    function parse(fromValue) {
+        if (fromValue == 'auto') {
+            return 'auto';
+        }
+        return FixedLength.parse(fromValue);
+    }
+    Length.parse = parse;
+    Length.equals = equalsCommon;
+    /**
+     * Converts LengthType unit to device pixels.
+     * @param length The LengthType to convert.
+     * @param auto Value to use for conversion of "auto". By default is Math.NaN.
+     */
+    Length.toDevicePixels = toDevicePixelsCommon;
+    Length.convertToString = convertToStringCommon;
+})(Length || (Length = {}));
+//# sourceMappingURL=length-shared.js.map

package/ui/styling/length-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"length-shared.js","sourceRoot":"","sources":["../../../../../packages/core/ui/styling/length-shared.ts"],"names":[],"mappings":"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"}

package/ui/styling/linear-gradient.d.ts

@@ -0,0 +1,13 @@
+import { CoreTypes } from '../../core-types';
+import { Color } from '../../color';
+import type { LinearGradient as CSSLinearGradient } from '../../css/parser';
+export interface ColorStop {
+    color: Color;
+    offset?: CoreTypes.LengthPercentUnit;
+}
+export declare class LinearGradient {
+    angle: number;
+    colorStops: ColorStop[];
+    static parse(value: CSSLinearGradient): LinearGradient;
+    static equals(first: LinearGradient, second: LinearGradient): boolean;
+}

package/ui/styling/linear-gradient.js

@@ -0,0 +1,48 @@
+import { Color } from '../../color';
+export class LinearGradient {
+    static parse(value) {
+        const result = new LinearGradient();
+        result.angle = value.angle;
+        result.colorStops = value.colors.map((color) => {
+            const offset = color.offset || null;
+            let offsetUnit;
+            if (offset && offset.unit === '%') {
+                offsetUnit = {
+                    unit: '%',
+                    value: offset.value,
+                };
+            }
+            return {
+                color: color.color,
+                offset: offsetUnit,
+            };
+        });
+        return result;
+    }
+    static equals(first, second) {
+        if (!first && !second) {
+            return true;
+        }
+        else if (!first || !second) {
+            return false;
+        }
+        if (first.angle !== second.angle) {
+            return false;
+        }
+        if (first.colorStops.length !== second.colorStops.length) {
+            return false;
+        }
+        for (let i = 0; i < first.colorStops.length; i++) {
+            const firstStop = first.colorStops[i];
+            const secondStop = second.colorStops[i];
+            if (firstStop.offset !== secondStop.offset) {
+                return false;
+            }
+            if (!Color.equals(firstStop.color, secondStop.color)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+//# sourceMappingURL=linear-gradient.js.map

package/ui/styling/linear-gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-gradient.js","sourceRoot":"","sources":["../../../../../packages/core/ui/styling/linear-gradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAQpC,MAAM,OAAO,cAAc;IAInB,MAAM,CAAC,KAAK,CAAC,KAAwB;QAC3C,MAAM,MAAM,GAAG,IAAI,cAAc,EAAE,CAAC;QACpC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC;YACpC,IAAI,UAAuC,CAAC;YAE5C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,GAAG,EAAE,CAAC;gBACnC,UAAU,GAAG;oBACZ,IAAI,EAAE,GAAG;oBACT,KAAK,EAAE,MAAM,CAAC,KAAK;iBACnB,CAAC;YACH,CAAC;YAED,OAAO;gBACN,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,MAAM,EAAE,UAAU;aAClB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IACf,CAAC;IAEM,MAAM,CAAC,MAAM,CAAC,KAAqB,EAAE,MAAsB;QACjE,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC;QACb,CAAC;aAAM,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YAC9B,OAAO,KAAK,CAAC;QACd,CAAC;QAED,IAAI,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,EAAE,CAAC;YAClC,OAAO,KAAK,CAAC;QACd,CAAC;QAED,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,KAAK,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YAC1D,OAAO,KAAK,CAAC;QACd,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAClD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACtC,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACxC,IAAI,SAAS,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;gBAC5C,OAAO,KAAK,CAAC;YACd,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtD,OAAO,KAAK,CAAC;YACd,CAAC;QACF,CAAC;QAED,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}

package/ui/styling/style/index.d.ts

@@ -0,0 +1,166 @@
+import { Color } from '../../../color';
+import { Font, FontStyleType, FontWeightType, FontVariationSettingsType } from '../font';
+import { Background } from '../background';
+import { ViewBase } from '../../core/view-base';
+import { LinearGradient } from '../../styling/linear-gradient';
+import { Observable } from '../../../data/observable';
+import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf, FlexFlow, Flex } from '../../layouts/flexbox-layout';
+import { CoreTypes } from '../../../core-types';
+import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState } from '../../../accessibility';
+import { ShadowCSSValues } from '../css-shadow';
+import { StrokeCSSValues } from '../css-stroke';
+import { ClipPathFunction } from '../clip-path-function';
+export interface CommonLayoutParams {
+    width: number;
+    height: number;
+    widthPercent: number;
+    heightPercent: number;
+    leftMargin: number;
+    topMargin: number;
+    rightMargin: number;
+    bottomMargin: number;
+    leftMarginPercent: number;
+    topMarginPercent: number;
+    rightMarginPercent: number;
+    bottomMarginPercent: number;
+    horizontalAlignment: CoreTypes.HorizontalAlignmentType;
+    verticalAlignment: CoreTypes.VerticalAlignmentType;
+}
+export declare class Style extends Observable {
+    private unscopedCssVariables;
+    private scopedCssVariables;
+    constructor(ownerView: ViewBase | WeakRef<ViewBase>);
+    setScopedCssVariable(varName: string, value: string): void;
+    setUnscopedCssVariable(varName: string, value: string): void;
+    removeScopedCssVariable(varName: string): void;
+    removeUnscopedCssVariable(varName: string): void;
+    getCssVariable(varName: string): string | null;
+    resetScopedCssVariables(): void;
+    resetUnscopedCssVariables(): void;
+    toString(): string;
+    fontInternal: Font;
+    iconFontFamily: string;
+    /**
+     * This property ensures inheritance of a11y scale among views.
+     */
+    fontScaleInternal: number;
+    backgroundInternal: Background;
+    rotate: number;
+    rotateX: number;
+    rotateY: number;
+    perspective: number;
+    scaleX: number;
+    scaleY: number;
+    translateX: CoreTypes.dip;
+    translateY: CoreTypes.dip;
+    clipPath: string | ClipPathFunction;
+    color: Color;
+    tintColor: Color;
+    placeholderColor: Color;
+    background: string;
+    backgroundColor: Color;
+    backgroundImage: string | LinearGradient;
+    backgroundRepeat: CoreTypes.BackgroundRepeatType;
+    backgroundSize: string;
+    backgroundPosition: string;
+    borderColor: string | Color;
+    borderTopColor: Color;
+    borderRightColor: Color;
+    borderBottomColor: Color;
+    borderLeftColor: Color;
+    borderWidth: string | CoreTypes.LengthType;
+    borderTopWidth: CoreTypes.LengthType;
+    borderRightWidth: CoreTypes.LengthType;
+    borderBottomWidth: CoreTypes.LengthType;
+    borderLeftWidth: CoreTypes.LengthType;
+    borderRadius: string | CoreTypes.LengthType;
+    borderTopLeftRadius: CoreTypes.LengthType;
+    borderTopRightRadius: CoreTypes.LengthType;
+    borderBottomRightRadius: CoreTypes.LengthType;
+    borderBottomLeftRadius: CoreTypes.LengthType;
+    boxShadow: string | ShadowCSSValues[];
+    direction: CoreTypes.LayoutDirectionType;
+    fontSize: number;
+    fontFamily: string;
+    fontStyle: FontStyleType;
+    fontWeight: FontWeightType;
+    fontVariationSettings: FontVariationSettingsType[];
+    font: string;
+    maxLines: CoreTypes.MaxLinesType;
+    androidElevation: number;
+    androidDynamicElevationOffset: number;
+    zIndex: number;
+    opacity: number;
+    visibility: CoreTypes.VisibilityType;
+    letterSpacing: number;
+    lineHeight: number;
+    textAlignment: CoreTypes.TextAlignmentType;
+    textDecoration: CoreTypes.TextDecorationType;
+    textTransform: CoreTypes.TextTransformType;
+    textShadow: ShadowCSSValues;
+    textStroke: StrokeCSSValues;
+    whiteSpace: CoreTypes.WhiteSpaceType;
+    textOverflow: CoreTypes.TextOverflowType;
+    minWidth: CoreTypes.LengthType;
+    minHeight: CoreTypes.LengthType;
+    width: CoreTypes.PercentLengthType;
+    height: CoreTypes.PercentLengthType;
+    margin: string | CoreTypes.PercentLengthType;
+    marginLeft: CoreTypes.PercentLengthType;
+    marginTop: CoreTypes.PercentLengthType;
+    marginRight: CoreTypes.PercentLengthType;
+    marginBottom: CoreTypes.PercentLengthType;
+    padding: string | CoreTypes.LengthType;
+    paddingLeft: CoreTypes.LengthType;
+    paddingTop: CoreTypes.LengthType;
+    paddingRight: CoreTypes.LengthType;
+    paddingBottom: CoreTypes.LengthType;
+    horizontalAlignment: CoreTypes.HorizontalAlignmentType;
+    verticalAlignment: CoreTypes.VerticalAlignmentType;
+    tabTextFontSize: number;
+    tabTextColor: Color;
+    tabBackgroundColor: Color;
+    selectedTabTextColor: Color;
+    androidSelectedTabHighlightColor: Color;
+    separatorColor: Color;
+    selectedBackgroundColor: Color;
+    selectedTextColor: Color;
+    statusBarStyle: 'light' | 'dark';
+    androidStatusBarBackground: Color;
+    androidContentInset: string | CoreTypes.LengthType;
+    androidContentInsetLeft: CoreTypes.LengthType;
+    androidContentInsetRight: CoreTypes.LengthType;
+    flexDirection: FlexDirection;
+    flexWrap: FlexWrap;
+    justifyContent: JustifyContent;
+    alignItems: AlignItems;
+    alignContent: AlignContent;
+    order: Order;
+    flexGrow: FlexGrow;
+    flexShrink: FlexShrink;
+    flexWrapBefore: FlexWrapBefore;
+    alignSelf: AlignSelf;
+    flexFlow: FlexFlow;
+    flex: Flex;
+    accessible: boolean;
+    accessibilityHidden: boolean;
+    accessibilityRole: AccessibilityRole;
+    accessibilityState: AccessibilityState;
+    accessibilityLiveRegion: AccessibilityLiveRegion;
+    accessibilityLanguage: string;
+    accessibilityMediaSession: boolean;
+    accessibilityStep: number;
+    iosAccessibilityAdjustsFontSize: boolean;
+    iosAccessibilityMinFontScale: number;
+    iosAccessibilityMaxFontScale: number;
+    PropertyBag: {
+        new (): {
+            [property: string]: string;
+        };
+        prototype: {
+            [property: string]: string;
+        };
+    };
+    viewRef: WeakRef<ViewBase>;
+    get view(): ViewBase;
+}

package/ui/styling/style/index.js

@@ -0,0 +1,67 @@
+import { Observable } from '../../../data/observable';
+import { Trace } from '../../../trace';
+export class Style extends Observable {
+    constructor(ownerView) {
+        super();
+        this.unscopedCssVariables = new Map();
+        this.scopedCssVariables = new Map();
+        // HACK: Could not find better way for cross platform WeakRef type checking.
+        if (ownerView.constructor.toString().indexOf('[native code]') !== -1 || ownerView.toString() == '[object WeakRef]') {
+            this.viewRef = ownerView;
+        }
+        else {
+            this.viewRef = new WeakRef(ownerView);
+        }
+    }
+    setScopedCssVariable(varName, value) {
+        this.scopedCssVariables.set(varName, value);
+    }
+    setUnscopedCssVariable(varName, value) {
+        this.unscopedCssVariables.set(varName, value);
+    }
+    removeScopedCssVariable(varName) {
+        this.scopedCssVariables.delete(varName);
+    }
+    removeUnscopedCssVariable(varName) {
+        this.unscopedCssVariables.delete(varName);
+    }
+    getCssVariable(varName) {
+        const view = this.view;
+        if (!view) {
+            return null;
+        }
+        if (this.unscopedCssVariables.has(varName)) {
+            return this.unscopedCssVariables.get(varName);
+        }
+        if (this.scopedCssVariables.has(varName)) {
+            return this.scopedCssVariables.get(varName);
+        }
+        if (!view.parent || !view.parent.style) {
+            return null;
+        }
+        return view.parent.style.getCssVariable(varName);
+    }
+    resetScopedCssVariables() {
+        this.scopedCssVariables.clear();
+    }
+    resetUnscopedCssVariables() {
+        this.unscopedCssVariables.clear();
+    }
+    toString() {
+        const view = this.viewRef.get();
+        if (!view) {
+            Trace.write(`toString() of Style cannot execute correctly because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
+            return '';
+        }
+        return `${view}.style`;
+    }
+    get view() {
+        if (this.viewRef) {
+            return this.viewRef.get();
+        }
+        return undefined;
+    }
+}
+Style.prototype.PropertyBag = class {
+};
+//# sourceMappingURL=index.js.map

package/ui/styling/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/core/ui/styling/style/index.ts"],"names":[],"mappings":"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"}

package/ui/styling/style-properties.d.ts

@@ -0,0 +1,63 @@
+import { CssProperty, CssAnimationProperty, InheritedCssProperty } from '../core/properties';
+import { Style } from './style';
+import { Color } from '../../color';
+import { Font, FontStyleType, FontWeightType, FontVariationSettingsType } from './font';
+import { Background } from './background';
+import { CoreTypes } from '../../core-types';
+import { LinearGradient } from './linear-gradient';
+import { ClipPathFunction } from './clip-path-function';
+export declare const minWidthProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const minHeightProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const widthProperty: CssAnimationProperty<Style, CoreTypes.PercentLengthType>;
+export declare const heightProperty: CssAnimationProperty<Style, CoreTypes.PercentLengthType>;
+export declare const marginLeftProperty: CssProperty<Style, CoreTypes.PercentLengthType>;
+export declare const marginRightProperty: CssProperty<Style, CoreTypes.PercentLengthType>;
+export declare const marginTopProperty: CssProperty<Style, CoreTypes.PercentLengthType>;
+export declare const marginBottomProperty: CssProperty<Style, CoreTypes.PercentLengthType>;
+export declare const paddingLeftProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const paddingRightProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const paddingTopProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const paddingBottomProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const horizontalAlignmentProperty: CssProperty<Style, CoreTypes.HorizontalAlignmentType>;
+export declare const verticalAlignmentProperty: CssProperty<Style, CoreTypes.VerticalAlignmentTextType>;
+export declare const rotateProperty: CssAnimationProperty<Style, number>;
+export declare const rotateXProperty: CssAnimationProperty<Style, number>;
+export declare const rotateYProperty: CssAnimationProperty<Style, number>;
+export declare const perspectiveProperty: CssAnimationProperty<Style, number>;
+export declare const scaleXProperty: CssAnimationProperty<Style, number>;
+export declare const scaleYProperty: CssAnimationProperty<Style, number>;
+export declare const translateXProperty: CssAnimationProperty<Style, CoreTypes.FixedLengthType>;
+export declare const translateYProperty: CssAnimationProperty<Style, CoreTypes.FixedLengthType>;
+export declare const backgroundInternalProperty: CssProperty<Style, Background>;
+export declare const backgroundImageProperty: CssProperty<Style, string | LinearGradient>;
+export declare const backgroundColorProperty: CssAnimationProperty<Style, Color>;
+export declare const backgroundRepeatProperty: CssProperty<Style, CoreTypes.BackgroundRepeatType>;
+export declare const backgroundSizeProperty: CssProperty<Style, string>;
+export declare const backgroundPositionProperty: CssProperty<Style, string>;
+export declare const borderTopColorProperty: CssProperty<Style, Color>;
+export declare const borderRightColorProperty: CssProperty<Style, Color>;
+export declare const borderBottomColorProperty: CssProperty<Style, Color>;
+export declare const borderLeftColorProperty: CssProperty<Style, Color>;
+export declare const borderTopWidthProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderRightWidthProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderBottomWidthProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderLeftWidthProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderTopLeftRadiusProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderTopRightRadiusProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderBottomRightRadiusProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const borderBottomLeftRadiusProperty: CssProperty<Style, CoreTypes.LengthType>;
+export declare const clipPathProperty: CssProperty<Style, string | ClipPathFunction>;
+export declare const directionProperty: InheritedCssProperty<Style, CoreTypes.LayoutDirectionType>;
+export declare const zIndexProperty: CssProperty<Style, number>;
+export declare const opacityProperty: CssAnimationProperty<Style, number>;
+export declare const colorProperty: InheritedCssProperty<Style, Color>;
+export declare const fontInternalProperty: CssProperty<Style, Font>;
+export declare const fontFamilyProperty: InheritedCssProperty<Style, string>;
+export declare const fontScaleInternalProperty: InheritedCssProperty<Style, number>;
+export declare const fontSizeProperty: InheritedCssProperty<Style, number>;
+export declare const fontStyleProperty: InheritedCssProperty<Style, FontStyleType>;
+export declare const fontWeightProperty: InheritedCssProperty<Style, FontWeightType>;
+export declare const fontVariationSettingsProperty: InheritedCssProperty<Style, FontVariationSettingsType[]>;
+export declare const visibilityProperty: CssProperty<Style, CoreTypes.VisibilityType>;
+export declare const androidElevationProperty: CssProperty<Style, number>;
+export declare const androidDynamicElevationOffsetProperty: CssProperty<Style, number>;