Mimcss Reference: Style Properties

alignContent: "start";
alignContent: "center";
alignContent: "space-between";
alignContent: "space-around";

alignItems: "stretch";
alignItems: "center";
alignItems: "start";
alignItems: "end";

alignSelf: "stretch";
alignSelf: "center";
alignSelf: "start";
alignSelf: "end";

alignmentBaseline: "baseline";
alignmentBaseline: "text-bottom";
alignmentBaseline: "middle";
alignmentBaseline: "text-after-edge";

animationDelay: AnimationDelay_StyleType;

/** Type for animation-delay style property */
export type AnimationDelay_StyleType = OneOrMany<CssTime>;

animationDirection: AnimationDirection_StyleType;

/** Type for animation-direction style property */
export type AnimationDirection_StyleType = OneOrMany<AnimationDirection_Single>;

/** Type for single animation direction */
export type AnimationDirection_Single = "normal" | "reverse" | "alternate" | "alternate-reverse";

animationDuration: AnimationDuration_StyleType;

export type AnimationDuration_StyleType = OneOrMany<CssTime>;

animationFillMode: AnimationFillMode_StyleType;

/** Type for animation-fill-mode style property */
export type AnimationFillMode_StyleType = OneOrMany<AnimationDirection_Single>;

/** Type for single animation fill mode */
export type AnimationFillMode_Single = "none" | "forwards" | "backwards" | "both";

animationIterationCount: AnimationIterationCount_StyleType;

/** Type for animation-iteration-count style property */
export type AnimationIterationCount_StyleType = OneOrMany<AnimationIterationCount_Single>;

/** Type for single animation iteration count */
export type AnimationIterationCount_Single = "infinite" | CssNumber;

animationName: AnimationName_StyleType;

/** Type for single animation name */
export type AnimationName_Single = "none" | string | IAnimationRule;

/** Type for animation-name style property */
export type AnimationName_StyleType = OneOrMany<AnimationName_Single>;

animationPlayState: AnimationPlayState_StyleType;

/** Type for animation-play-state style property */
export type AnimationPlayState_StyleType = OneOrMany<AnimationPlayState_Single>;

/** Type for single animation play state */
export type AnimationPlayState_Single = "paused" | "running";

animationTimingFunction: AnimationTimingFunction_StyleType;

/** Type for simple animation timing functions - those that don't have parameters */
export type TimingFunction_Simple = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end";

/** Type for step animation timing function position */
export type TimingFunction_StepPosition = "jump-start" | "jump-end" | "jump-none" | "jump-both" | "start" | "end";

/** Type for step animation timing function */
export type TimingFunction_Step = number | [Extended<number>, Extended<TimingFunction_StepPosition>?];

/** Type for Bezier animation timing function */
export type TimingFunction_Bezier = [Extended<number>, Extended<number>, Extended<number>, Extended<number>];

/** Type for single animation timing function */
export type TimingFunction_Single = TimingFunction_Simple | TimingFunction_Step | TimingFunction_Bezier;

/** Type for animation-timing-function style property */
export type AnimationTimingFunction_StyleType = OneOrMany<TimingFunction_Single>;

appearance: Appearance_StyleType;

/** Type for appearance style property */
export type Appearance_StyleType = "none" | "auto" | "textfield" | "menulist-button" |
    "searchfield" | "textarea" | "push-button" | "slider-horizontal" | "checkbox" | "radio" |
    "square-button" | "menulist" | "listbox" | "meter" | "progress-bar" | "button";

aspectRatio: AspectRatio_StyleType;

/** Type for aspect-ratio style property */
export type AspectRatio_StyleType = CssAspectRatio | "auto";

backdropFilter: Filter_StyleType;

/** Type for filter and backdrop-filter style property */
export type Filter_StyleType = OneOrMany<Filter_Single>;

/** Type for filter and backdrop-filter style single value */
export type Filter_Single = string | IUrlProxy | IFilterProxy;

class MyStyles extends css.StyleDefinition
{
    // url for SVG filter
    cls1 = this.$class({ bacdropFilter: css.url("filters.svg#filter1") })

    // brightness of 70%
    cls2 = this.$class({ bacdropFilter: css.brightness(70) })

    // multiple backdrop filters
    cls3 = this.$class({ bacdropFilter: [css.dropShadow(16, 16, "red", 10), invert(75)] })
}

backfaceVisibility: BackfaceVisibilityMode_StyleType;

export type BackfaceVisibilityMode_StyleType = "visible" | "hidden";

background: Background_StyleType;

/** Type for background style property */
export type Background_StyleType = OneOrMany<Background_Single>;

/** Type for single background value */
export type Background_Single = string | CssColor |
    {
        color?: Extended<CssColor>,
        image?: Extended<CssImage | string>,
        position?: Extended<CssPosition>,
        size?: Extended<BackgroundSize_Single>,
        repeat?: Extended<BackgroundRepeat_Single>,
        attachment?: Extended<BackgroundAttachment_Single>,
        origin?: Extended<BackgroundOrigin_Single>,
        clip?: Extended<BackgroundClip_Single>,
    };

backgroundAttachment: BackgroundAttachment_StyleType;

/** Type for background-attachment style property */
export type BackgroundAttachment_StyleType = OneOrMany<BackgroundAttachment_Single>;

/** Type for single background attachment */
export type BackgroundAttachment_Single = "scroll" | "fixed" | "local";

backgroundBlendMode: BackgroundBlendMode_StyleType;

/** Type for background-blend-mode style property */
export type BackgroundBlendMode_StyleType = OneOrMany<BackgroundBlendMode_Single>;

/** Type for single background blend mode */
export type BackgroundBlendMode_Single = "normal" | "multiply" | "screen" | "overlay" | "darken" |
    "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" |
    "exclusion" | "hue" | "saturation" | "color" | "luminosity";

backgroundClip: BackgroundClip_StyleType;

/** Type for background-clip style property */
export type BackgroundClip_StyleType = OneOrMany<BackgroundClip_Single>;

/** Type for single background clip */
export type BackgroundClip_Single = "border-box" | "padding-box" | "content-box" | "text";

backgroundColor: CssColor;

backgroundImage: BackgroundImage_StyleType;

/** Type for background-image style property */
export type BackgroundImage_StyleType = "none" | OneOrMany<CssImage | string>;

backgroundOrigin: BackgroundOrigin_StyleType;

/** Type for background-origin style property */
export type BackgroundOrigin_StyleType = OneOrMany<BackgroundOrigin_Single>;

/** Type for single background origin */
export type BackgroundOrigin_Single = "border-box" | "padding-box" | "content-box" | "text";

backgroundPosition: BackgroundPosition_StyleType;

/** Type for background-position style property */
export type BackgroundPosition_StyleType = OneOrMany<CssPosition>;

backgroundRepeat: BackgroundRepeat_StyleType;

/** Type for background-repeat style property */
export type BackgroundRepeat_StyleType = OneOrMany<BackgroundRepeat_Single>;

/** Type for single background repeat */
export type BackgroundRepeat_Single = "repeat-x" | "repeat-y" | OneOrPair<BackgroundRepeatKeyword_Single>;

/** Type for single background repeat */
export type BackgroundRepeatKeyword_Single = "repeat" | "space" | "round" | "no-repeat";

backgroundSize: BackgroundSize_StyleType;

/** Type for background-size style property. */
export type BackgroundSize_StyleType = OneOrMany<BackgroundSize_Single>;

/** Type for background size */
export type BackgroundSize_Single = "cover" | "contain" | OneOrPair<CssLength | "auto">;

baselineShift: BaselineShift_StyleType;

/** Type for baseline-shift style property */
export type BaselineShift_StyleType = "sub" | "super" | CssLength;

blockSize: CssSize;

border: Border_StyleType;

/** Type for border style property */
export type Border_StyleType = CssLength | BorderStyle_Keyword | CssColor |
    [Extended<CssLength>?, Extended<BorderStyle_Keyword>?, Extended<CssColor>?];

class MyStyles extends css.StyleDefinition
{
    // border width of 3px
    cls1 = this.$class({ border: 3) })

    // border of dashed style
    cls2 = this.$class({ border: "dashed" })

    // border of red color
    cls3 = this.$class({ border: "red" })

    // border as a string
    cls4 = this.$class({ border: "3px dashed red" })

    // border as an array
    cls5 = this.$class({ border: [3, "dashed", "red"] })
}

borderBlockEnd: Border_StyleType;

borderBlockEndColor: CssColor;

borderBlockEndStyle: BorderStyle_Keyword;

borderBlockEndWidth: BorderWidth_Single;

borderBlockStart: Border_StyleType;

borderBlockStartColor: CssColor;

borderBlockStartStyle: BorderStyle_Keyword;

borderBlockStartWidth: BorderWidth_Single;

borderBottom: Border_StyleType;

borderBottomColor: CssColor;

borderBottomLeftRadius: CssRadius;

borderBottomRightRadius: CssRadius;

borderBottomStyle: BorderStyle_Keyword;

borderBottomWidth: BorderWidth_Single;

borderCollapse: BorderColapse_StyleType;

/** Type for border-collapse style property */
export type BorderColapse_StyleType = "collapse" | "separate";

borderColor: BorderColor_StyleType;

/** Type for border-color style property */
export type BorderColor_StyleType = OneOrBox<CssColor>;

borderImage: BorderImage_StyleType;

/** Type for border-image style property. */
export type BorderImage_StyleType = string | CssImage | BorderImage_Object;

/** Type for border-image style property expressed as an object. */
export type BorderImage_Object =
    {
        source: Extended<BorderImageSource_StyleType>,
        slice?: Extended<BorderImageSlice_StyleType>,
        width?: Extended<BorderImageWidth_StyleType>,
        outset?: Extended<BorderImageOutset_StyleType>,
        repeat?: Extended<BorderImageRepeat_StyleType>,
    };

borderImageOutset: BorderImageOutset_StyleType;

/**
 * Type for border-image-outset style property. It is CssNumber and not CssLength because
 * border-image-outset can be specified as a unitless number.
 */
export type BorderImageOutset_StyleType = OneOrBox<CssNumber | string>;

borderImageRepeat: BorderImageRepeat_StyleType;

/** Type for border-image-repeat style property */
export type BorderImageRepeat_StyleType = OneOrPair<BorderImageRepeat_Keyword>;

/** Type for border-image-repeat keywords */
export type BorderImageRepeat_Keyword = "stretch" | "repeat" | "round" | "space";

borderImageSlice: BorderImageSlice_StyleType;

/** Type for border-image-slice style property */
export type BorderImageSlice_StyleType = OneOrBox<CssNumber | string> |
    [Extended<CssNumber | string>, true] |
    [Extended<CssNumber | string>, Extended<CssNumber | string>, true] |
    [Extended<CssNumber | string>, Extended<CssNumber | string>, Extended<CssNumber | string>, true] |
    [Extended<CssNumber | string>, Extended<CssNumber | string>, Extended<CssNumber | string>, Extended<CssNumber | string>, true];

borderImageSource: BorderImageSource_StyleType;

/** Type for border-image-source style property */
export type BorderImageSource_StyleType = OneOrBox<CssImage | string>;

borderImageWidth: BorderImageWidth_StyleType;

/**
 * Type for border-image-width style property. It is CssNumber and not CssLength because
 * border-image-width can be specified as a unitless number.
 */
export type BorderImageWidth_StyleType = OneOrBox<CssNumber | "auto" | string>;

borderInlineEnd: Border_StyleType;

borderInlineEndColor: CssColor;

borderInlineEndStyle: BorderStyle_Keyword;

borderInlineEndWidth: BorderWidth_Single;

borderInlineStart: Border_StyleType;

borderInlineStartColor: CssColor;

borderInlineStartStyle: BorderStyle_Keyword;

borderInlineStartWidth: BorderWidth_Single;

borderLeft: Border_StyleType;

borderLeftColor: CssColor;

borderLeftStyle: BorderStyle_Keyword;

borderLeftWidth: BorderWidth_Single;

borderRadius: BorderRadius_StyleType;

/** Type for border-radius style property */
export type BorderRadius_StyleType = OneOrPair<OneOrBox<CssLength>>;

borderRight: Border_StyleType;

borderRightColor: CssColor;

borderRightStyle: BorderStyle_Keyword;

borderRightWidth: BorderWidth_Single;

borderSpacing: BorderSpacing_StyleType;

/** Type for border-spacing style property */
export type BorderSpacing_StyleType = OneOrPair<CssLength>;

borderStyle: BorderStyle_StyleType;

/** Type for border-style style property */
export type BorderStyle_StyleType = OneOrBox<BorderStyle_Keyword>;

/** Type for single border side style property */
export type BorderStyle_Keyword = "none" | "hidden" | "dotted" | "dashed" | "solid" | "double" |
    "groove" | "ridge" | "inset" | "outset";

borderTop: Border_StyleType;

borderTopColor: CssColor;

borderTopLeftRadius: CssRadius;

borderTopRightRadius: CssRadius;

borderTopStyle: BorderStyle_Keyword;

borderTopWidth: BorderWidth_Single;

borderWidth: BorderWidth_StyleType;

/** Type for border-width style property */
export type BorderWidth_StyleType = OneOrBox<BorderWidth_Single>;

/** Type for border side width style property */
export type BorderWidth_Single = "thin" | "medium" | "thick" | CssLength;

bottom: CssLength;

boxDecorationBreak?: BoxDecorationBreak_StyleType;

boxShadow: BoxShadow_StyleType;

/** Type for box shadow style property */
export type BoxShadow_StyleType = OneOrMany<BoxShadow_Single>;

/** Type for single box shadow. */
export type BoxShadow_Single = "none" | string |
    {
        x: Extended<CssLength>,
        y: Extended<CssLength>,
        blur?: Extended<CssLength>,
        spread?: Extended<CssLength>,
        color?: Extended<CssColor>,
        inset?: Extended<boolean>
    };

boxSizing: BoxSizing_StyleType;

/** Type for box-sizing style property */
export type BoxSizing_StyleType = "content-box" | "border-box";

breakAfter: BreakAfter_StyleType;

/** Type for break-after style property */
export type BreakAfter_StyleType = "auto" | "avoid" | "always" | "all" | "avoid-page" | "page" |
    "left" | "right" | "recto" | "verso" | "avoid-column" | "column" |
    "avoid-region" | "region";

breakBefore: BreakBefore_StyleType;

/** Type for break-before style property */
export type BreakBefore_StyleType = "auto" | "avoid" | "always" | "all" | "avoid-page" | "page" |
    "left" | "right" | "recto" | "verso" | "avoid-column" | "column" |
    "avoid-region" | "region";

breakInside: BreakInside_StyleType;

/** Type for break-inside style property */
export type BreakInside_StyleType = "auto" | "avoid" | "avoid-page" | "avoid-column" | "avoid-region";

captionSide: CaptionSide_StyleType;

/** Type for caption-side style property */
export type CaptionSide_StyleType = "top" | "bottom" | "block-start" | "block-end" |
    "inline-start" | "inline-end";

caretColor: CaretColor_StyleType;

/** Type for caret-color style property */
export type CaretColor_StyleType = "auto" | CssColor;

clear: Clear_StyleType;

/** Type for clear style property */
export type Clear_StyleType = "none" | "left" | "right" | "both" | "inline-start" | "inline-end";

clip: Clip_StyleType;

/** Type for clip style property */
export type Clip_StyleType = "auto" | OneOrBox<CssLength>;

clipPath: ClipPath_StyleType;

/** Type for clip-path style property */
export type ClipPath_StyleType = "none" | IUrlProxy | BasicShape | GeometryBoxKeyword |
    [GeometryBoxKeyword, BasicShape];

/** Type used for several properties */
export type GeometryBoxKeyword = "margin-box" | "border-box" | "padding-box" | "content-box" |
    "fill-box" | "stroke-box" | "view-box";

clipRule: ClipRule_StyleType;

/** Type for clip-rule style property */
export type ClipRule_StyleType = "nonzero" | "evenodd";

color: CssColor;

colorAdjust: ColorAdjust_StyleType;

/** Type for color-adjust style property */
export type ColorAdjust_StyleType = "economy" | "exact";

colorInterpolation: ColorInterpolation_StyleType;

/** Type for color-interpolation style and color-interpolation-filter properties */
export type ColorInterpolation_StyleType = "auto" | "sRGB" | "linearRGB";

colorInterpolationFilters: ColorInterpolation_StyleType;

/** Type for color-interpolation style and color-interpolation-filter properties */
export type ColorInterpolation_StyleType = "auto" | "sRGB" | "linearRGB";

columnCount: ColumnCount_StyleType;

/** Type for column-count style property */
export type ColumnCount_StyleType = "auto" | number;

columnFill: ColumnFill_StyleType;

/** Type for column-fill style property */
export type ColumnFill_StyleType = "auto" | "balance" | "balance-all";

columnGap: ColumnGap_StyleType;

/** Type for column-gap style property */
export type ColumnGap_StyleType = "normal" | CssLength;

columnRule: Border_StyleType;

columnRuleColor: CssColor;

columnRuleStyle: BorderStyle_Keyword;

columnRuleWidth: BorderWidth_Single;

columnSpan: ColumnSpan_StyleType;

/** Type for column-span style property */
export type ColumnSpan_StyleType = "none" | "all";

columnWidth: CssLength;

columns: Columns_StyleType;

/** Type for columns style property */
export type Columns_StyleType = "auto" | CssNumber | CssLength |
    ["auto" | Extended<CssNumber>, "auto" | Exclude<Extended<CssLength>,number>] |
    ["auto" | Exclude<Extended<CssLength>,number>, "auto" | Extended<CssNumber>];

contain: Contain_StyleType;

/** Type for contain style property */
export type Contain_StyleType = "none" | "strict" | "content" | "size" | "layout" | "style" |
    "paint" | Extended<"size" | "layout" | "style" | "paint">[];

content: Content_StyleType;

/** Type for content style property */
export type Content_StyleType = string | "none" | "normal" | OneOrMany<CssImage |
    "open-quote" | "close-quote" | "no-open-quote" | "no-close-quote">;

counterIncrement: Counter_StyleType;

/** Type for counter-increment, counter-reset and counter-set style properties */
export type Counter_StyleType = "none" | OneOrMany<ICounterRule | string |
    [ICounterRule | string, Extended<number>]>;

counterReset: Counter_StyleType;

/** Type for counter-increment, counter-reset and counter-set style properties */
export type Counter_StyleType = "none" | OneOrMany<ICounterRule | string |
    [ICounterRule | string, Extended<number>]>;

counterSet: Counter_StyleType;

/** Type for counter-increment, counter-reset and counter-set style properties */
export type Counter_StyleType = "none" | OneOrMany<ICounterRule | string |
    [ICounterRule | string, Extended<number>]>;

cursor: Counter_StyleType;

/** Type for cursor style property */
export type Cursor_StyleType = OneOrMany<Cursor_Single>;

/** Type for cursor style property single value */
export type Cursor_Single = Cursor_Keyword | IUrlProxy |
    [IUrlProxy, Extended<CssNumber>, Extended<CssNumber>];

/** Type for cursor pre-defined names */
export type Cursor_Keyword = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" |
    "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" |
    "no-drop" | "not-allowed" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" |
    "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ew-resize" | "ns-resize" |
    "nesw-resize" | "nwse-resize" | "col-resize" | "row-resize" | "all-scroll" | "zoom-in" |
    "zoom-out" | "grab" | "grabbing";

direction: Direction_StyleType;

/** Type for direction style property */
export type Direction_StyleType = "ltr" | "rtl";

display: Display_StyleType;

/** Type for display style property */
export type Display_StyleType = "block" | "inline" | "run-in" | "contents" | "none" |
    "inline-block" | "inline-list-item" | "inline-table" | "inline-flex" | "inline-grid" |
    "flow" | "flow-root" | "table" | "flex" | "grid" | "ruby" |
    "table-row-group" | "table-header-group" | "table-footer-group" | "table-row" | "table-cell" |
        "table-column-group" | "table-column" | "table-caption" | "ruby-base" | "ruby-text" |
        "ruby-base-container" | "ruby-text-container" |
    "list-item" | "list-item block" | "list-item inline" | "list-item flow" | "list-item flow-root" |
        "list-item block flow" | "list-item block flow-root" | "flow list-item block";

dominantBaseline: DominantBaseline_StyleType;

/** Type for dominant-baseline style property */
export type DominantBaseline_StyleType = "auto" | "text-bottom" | "alphabetic" | "ideographic" | "middle" |
    "central" | "mathematical" | "hanging" | "text-top";

emptyCells: DominantBaseline_StyleType;

/** Type for empty-cells style property */
export type EmptyCells_StyleType = "show" | "hide";

fill: CssColor;

fillOpacity: CssPercent;

fillRule: FillRule_StyleType;

/** Type for fill-rule style property */
export type FillRule_StyleType = "nonzero" | "evenodd";

filter: Filter_StyleType;

/** Type for filter and backdrop-filter style property */
export type Filter_StyleType = OneOrMany<Filter_Single>;

/** Type for filter and backdrop-filter style single value */
export type Filter_Single = string | IUrlProxy | IFilterProxy;

class MyStyles extends css.StyleDefinition
{
    // url for SVG filter
    cls1 = this.$class({ filter: css.url("filters.svg#filter1") })

    // brightness of 70%
    cls2 = this.$class({ filter: css.brightness(70) })

    // multiple filters
    cls3 = this.$class({ filter: [css.dropShadow(16, 16, "red", 10), invert(75)] })
}

flex: Flex_StyleType;

/** Type for flex style property */
export type Flex_StyleType = FlexBasis_StyleType | [Extended<number>, Extended<number>] |
    [Extended<number>, Extended<number>, Extended<FlexBasis_StyleType>];

flexBasis: FlexBasis_StyleType;

/** Type for flex-basis style property */
export type FlexBasis_StyleType = "auto" | "content" | CssLength;

flexDirection: FlexDirection_StyleType;

/** Type for flex-direction style property */
export type FlexDirection_StyleType = "row" | "row-reverse" | "column" | "column-reverse";

flexFlow: FlexFlow_StyleType;

/** Type for flex-flow style property */
export type FlexFlow_StyleType = FlexDirection_StyleType | FlexWrap_StyleType |
    [Extended<FlexDirection_StyleType>, Extended<FlexWrap_StyleType>];

flexGrow: CssNumber;

flexShrink: CssNumber;

flexWrap: FlexWrap_StyleType;

/** Type for flex-wrap style property */
export type FlexWrap_StyleType = "nowrap" | "wrap" | "wrap-reverse";

float: Float_StyleType;

/** Type for float style property */
export type Float_StyleType = "left" | "right" | "none" | "inline-start" | "inline-end";

floodColor: CssColor;

floodOpacity: CssPercent;

font: Font_StyleType;

/** Type for font style property */
export type Font_StyleType = string | Font_SystemKeyword |
    {
        size: Extended<CssLength>;
        family: Extended<string>;
        style?: Extended<FontStyle_StyleType>;
        variant?: Extended<string>;
        weight?: Extended<FontWeight_StyleType>;
        stretch?: Extended<Exclude<FontStretch_Single,number>>;
        lineHeight?: Extended<CssNumber>
    };

/** Keywords for font style property */
export type Font_SystemKeyword = "caption" | "icon" | "menu" | "message-box" | "small-caption" | "status-bar";

fontFamily: string;

fontFeatureSettings: string;

fontKerning: FontKerning_StyleType;

/** Type for font-kerning style property */
export type FontKerning_StyleType = "auto" | "normal" | "none";

fontLanguageOverride?: DefaultStyleType;

fontOpticalSizing: FontOpticalSizing_StyleType;

/** Type for font-optical-sizing style property */
export type FontOpticalSizing_StyleType = "auto" | "none";

fontSize: FontSize_StyleType;

/** Type for font-size style property */
export type FontSize_StyleType = "xx-small" | "x-small" | "small" | "medium" | "large" |
    "x-large" | "xx-large" | "xxx-large" | "larger" | "smaller" | CssLength;

fontSizeAdjust: CssNumber;

fontStretch: FontStretch_Single;

/** Type for font-stretch style property */
export type FontStretch_StyleType = "normal" | "ultra-condensed" | "extra-condensed" | "condensed" |
"semi-condensed" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | CssNumber;

fontStyle: FontStyle_StyleType;

/** Type for font-style style property */
export type FontStyle_StyleType = "normal" | "italic" | "oblique" | CssAngle;

fontSynthesis: FontSynthesis_StyleType;

/** Type for font-synthesis style property */
export type FontSynthesis_StyleType = "none" | "weight" | "style" | "weight style";

fontVariant: string;

fontVariantCaps: FontVariantCaps_StyleType;

/** Type for font-variant-caps style property */
export type FontVariantCaps_StyleType = "normal" | "small-caps" | "all-small-caps" |
    "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps";

fontVariantEastAsian: string;

fontVariantLigatures: string;

fontVariantNumeric: string;

fontVariantPosition: FontVariantPosition_StyleType;

/** Type for font-variant-position style property */
export type FontVariantPosition_StyleType = "normal" | "sub" | "super";

fontVariationSettings: string;

fontWeight: FontWeight_StyleType;

/** Type for font-weight style property */
export type FontWeight_StyleType = "normal" | "bold" | "bolder" | "lighter" | number;

gap: Gap_StyleType;

/** Type for a gap or grid-gap style property */
export type Gap_StyleType = RowGap_StyleType | [RowGap_StyleType, ColumnGap_StyleType];

grid: string;

gridArea: GridArea_StyleType;

/** Type for grid-area style property */
export type GridArea_StyleType = OneOrBox<GridAxisSide_StyleType>;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridAutoColumns: GridAutoAxis_StyleType;

/** Type for grid-auto-columns and grid-auto-rows style properties */
export type GridAutoAxis_StyleType = OneOrMany<GridTrackSize>;

/** Type for a single element defining track size in grid layout */
export type GridTrackSize = CssLength | "min-content" | "max-content" | "auto" |
    IMinMaxProxy | IFitContentProxy | IRepeatProxy;

gridAutoFlow: GridAutoFlow_StyleType;

/** Type for grid-auto-flow style property */
export type GridAutoFlow_StyleType = "row" | "column" | "dense" | "row dense" | "column dense";

gridAutoRows: GridAutoAxis_StyleType;

/** Type for grid-auto-columns and grid-auto-rows style properties */
export type GridAutoAxis_StyleType = OneOrMany<GridTrackSize>;

/** Type for a single element defining track size in grid layout */
export type GridTrackSize = CssLength | "min-content" | "max-content" | "auto" |
    IMinMaxProxy | IFitContentProxy | IRepeatProxy;

gridColumn: GridAxis_StyleType;

/** Type for grid-column and grid-row style properties */
export type GridAxis_StyleType = OneOrPair<GridAxisSide_StyleType>;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridColumnEnd: GridAxisSide_StyleType;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridColumnGap: ColumnGap_StyleType;

/** Type for column-gap style property */
export type ColumnGap_StyleType = "normal" | CssLength;

gridColumnStart: GridAxisSide_StyleType;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridGap: Gap_StyleType;

/** Type for a gap or grid-gap style property */
export type Gap_StyleType = RowGap_StyleType | [RowGap_StyleType, ColumnGap_StyleType];

gridRow: GridAxis_StyleType;

/** Type for grid-column and grid-row style properties */
export type GridAxis_StyleType = OneOrPair<GridAxisSide_StyleType>;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridRowEnd: GridAxisSide_StyleType;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridRowGap: CssLength;

gridRowStart: GridAxisSide_StyleType;

/** Type for grid-column-start/end and grid-row-start/end style properties */
export type GridAxisSide_StyleType = "auto" | GridLineCountOrName | ISpanProxy;

/** Type for specifying either number of grid lines or name of grid line or area */
export type GridLineCountOrName = CssNumber | IGridAreaRule | IGridLineRule | string;

gridTemplate: string;

gridTemplateAreas: GridTemplateAreas_StyleType;

/** Type for grid-template-areas style property */
export type GridTemplateAreas_StyleType = "none" | OneOrMany<IQuotedProxy> |
    GridTemplateArea_Definition[];

/**
 * Type for defining a single grid area position. The numbers are 1-based indices of the lines in
 * the following sequence: start row, start column, end row, end column.
 */
export type GridTemplateArea_Definition = [IGridAreaRule | Extended<string>,
    number, number, number, number];

class MyStyles extends css.StyleDefinition
{
    // define grid areas on the page
    header = this.$gridarea();
    main = this.$gridarea();
    footer = this.$gridarea();
    left = this.$gridarea();
    right = this.$gridarea();

	grid = this.$class({
        // define grid of 5 rows by 5 columns
        display: "grid",
        gridTemplateColumns: css.repeat( 5, "1fr"),
        gridTemplateRows: css.repeat(5, "1fr"),

        // place areas on the grid using coordinates 1 to 5 for rows and columns
        gridTemplateAreas: [
            [this.header, 1,1, 1,5],
            [this.main, 2,2, 4,4],
            [this.footer, 5,2, 5,4],
            [this.left, 2,1, 5,1],
            [this.right, 2,5, 5,5],
        ],
    })
}

gridTemplateColumns: GridTemplateAxis_StyleType;

/** Type for grid-template-columns and grid-template-rows style properties */
export type GridTemplateAxis_StyleType = "none" | OneOrMany<GridTrack> | "subgrid";

/** Type for a single track element of grid template axis */
export type GridTrack = GridTrackSize | GridTrackLine;

/** Type for a single element defining track size in grid layout */
export type GridTrackSize = CssLength | "min-content" | "max-content" | "auto" |
    IMinMaxProxy | IFitContentProxy | IRepeatProxy;

/**
 * Type for a single template element defining name or names for a grid line in grid template.
 * This is always an array - even if a single name is given.
 */
export type GridTrackLine = (IGridLineRule | Extended<string>)[];

class MyStyles extends css.StyleDefinition
{
    // 100px 1fr 10%
	grid1 = this.$class({
        gridTemplateColumns: 100, "1fr", css.percent(10)),
    })

    // repeat(3, 1fr)
	grid2 = this.$class({
        gridTemplateColumns: css.repeat( 3, "1fr"),
    })

    // use explicit and line names and defined line rules
    lastLine = this.$gridline();
	grid3 = this.$class({
        gridTemplateColumns: [ ["first-line"], "1fr", "2fr", [this.lastLine] ]
    })

    // use lines defined by a grid area
    mainArea = this.$gridarea();
	grid4 = this.$class({
        gridTemplateColumns: [ css.percent(10), [this.mainArea.startLine], css.repeat(4, "1fr"),
            [this.mainArea.lastLine], css.percent(10)]
    })
}

gridTemplateRows: GridTemplateAxis_StyleType;

/** Type for grid-template-columns and grid-template-rows style properties */
export type GridTemplateAxis_StyleType = "none" | OneOrMany<GridTrack> | "subgrid";

/** Type for a single track element of grid template axis */
export type GridTrack = GridTrackSize | GridTrackLine;

/** Type for a single element defining track size in grid layout */
export type GridTrackSize = CssLength | "min-content" | "max-content" | "auto" |
    IMinMaxProxy | IFitContentProxy | IRepeatProxy;

/**
 * Type for a single template element defining name or names for a grid line in grid template.
 * This is always an array - even if a single name is given.
 */
export type GridTrackLine = (IGridLineRule | Extended<string>)[];

hangingPunctuation?: DefaultStyleType;

height: CssLength;

hyphens: Hyphens_StyleType;

/** Type for hyphens style property */
export type Hyphens_StyleType = "none" | "manual" | "auto";

imageRendering: ImageRendering_StyleType;

/** Type for image-rendering style property */
export type ImageRendering_StyleType = "auto" | "crisp-edges" | "pixelated";

inlineSize: CssSize;

initialLetter: OneOrPair<CssNumber>;

isolation: Isolation_StyleType;

/** Type for isolation style property */
export type Isolation_StyleType = "auto" | "isolate";

justifyContent: JustifyContent_StyleType;

/** Type for justify-content style property */
export type JustifyContent_StyleType = "normal" | "space-between" | "space-around" | "space-evenly" | "stretch" |
    "center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" |
    "safe center" | "safe start" | "safe end" | "safe flex-start" | "safe flex-end" | "safe left" | "safe right" |
    "unsafe center" | "unsafe start" | "unsafe end" | "unsafe flex-start" | "unsafe flex-end" | "unsafe left" | "unsafe right";

justifyItems: JustifyItems_StyleType;

/** Type for justify-items style property */
export type JustifyItems_StyleType = "normal" | "stretch" | "baseline" | "first baseline" | "last baseline" |
    "center" | "start" | "end" | "self-start" | "self-end" | "flex-start" | "flex-end" | "left" | "right" |
    "safe center" | "safe start" | "safe end" | "safe self-start" | "safe self-end" | "safe flex-start" | "safe flex-end" | "safe left" | "safe right" |
    "unsafe center" | "unsafe start" | "unsafe end" | "unsafe self-start" | "unsafe self-end" | "unsafe flex-start" | "unsafe flex-end" | "unsafe left" | "unsafe right" |
    "legacy" | "legacy left" | "legacy right" | "legacy center";

justifySelf: JustifySelf_StyleType;

/** Type for justify-self style property */
export type JustifySelf_StyleType = "auto" | "normal" | "stretch" | "baseline" | "first baseline" | "last baseline" |
    "center" | "start" | "end" | "self-start" | "self-end" | "flex-start" | "flex-end" | "left" | "right" |
    "safe center" | "safe start" | "safe end" | "safe self-start" | "safe self-end" | "safe flex-start" | "safe flex-end" | "safe left" | "safe right" |
    "unsafe center" | "unsafe start" | "unsafe end" | "unsafe self-start" | "unsafe self-end" | "unsafe flex-start" | "unsafe flex-end" | "unsafe left" | "unsafe right";

left: CssLength;

letterSpacing: LetterSpacing_StyleType;

/** Type for letter-spacing style property */
export type LetterSpacing_StyleType = "normal" | CssLength;

lightingColor: CssColor;

lineBreak: LineBreak_StyleType;

/** Type for line-break style property */
export type LineBreak_StyleType = "auto" | "loose" | "normal" | "strict" | "anywhere";

lineHeight: LineHeight_StyleType;

/** Type for line-height style property */
export type LineHeight_StyleType = CssNumber | string;

listStyle: ListStyle_StyleType;

/** Type for list-style style property */
export type ListStyle_StyleType = ListStyleType_StyleType | ListStylePosition_StyleType | ListStyleImage_StyleType |
    [Extended<ListStyleImage_StyleType>, Extended<ListStylePosition_StyleType>] |
    [Extended<ListStyleImage_StyleType>, Extended<ListStyleType_StyleType>?] |
    [Extended<ListStyleType_StyleType>, Extended<ListStylePosition_StyleType>] |
    [Extended<ListStyleImage_StyleType>, Extended<ListStylePosition_StyleType>, Extended<ListStyleType_StyleType>?];

lineStyleImage: ListStyleImage_StyleType;

/** Type for line-style-image style property */
export type ListStyleImage_StyleType = "none" | IUrlProxy;

lineStylePosition: ListStylePosition_StyleType;

/** Type for list-style-position style property */
export type ListStylePosition_StyleType = "inside" | "outside";

lineStyleType: ListStyleType_StyleType;

/** Type for list-style-type style property */
export type ListStyleType_StyleType = "none" | "disc" | "circle" | "square" | "decimal" | "decimal-leading-zero" |
    "cjk-decimal" | "cjk-earthly-branch" | "cjk-heavenly-stem" | "cjk-ideographic" |
    "lower-roman" | "upper-roman" | "lower-greek" | "lower-alpha" | "lower-latin" | "upper-alpha" | "upper-latin" |
    "arabic-indic" | "armenian" | "bengali" | "cambodian" | "devanagari" | "georgian" | "gujarati" | "gurmukhi" | "hebrew" |
    "hiragana" | "hiragana-iroha" | "japanese-formal" | "japanese-informal" | "kannada" | "katakana" | "katakana-iroha" |
    "khmer" | "korean-hangul-formal" | "korean-hanja-formal" | "korean-hanja-informal" | "lao" | "lower-armenian" |
    "malayalam" | "mongolian" | "myanmar" | "oriya" | "persian" | "simp-chinese-formal" | "simp-chinese-informal" |
    "tamil" | "telugu" | "thai" | "tibetan" | "trad-chinese-formal" | "trad-chinese-informal" | "upper-armenian" |
    "disclosure-open" | "disclosure-closed";

margin: OneOrBox<CssLength>;

marginBlockEnd: CssLength;

marginBlockStart: CssLength;

marginBottom: CssLength;

marginInlineEnd: CssLength;

margIninlineStart: CssLength;

marginLeft: CssLength;

marginRight: CssLength;

marginTop: CssLength;

markerEnd: Marker_StyleType;

/** Type for the marker-start, marker-mid and marker-end style properties */
export type Marker_StyleType = "none" | IIDRule;

markerMid: Marker_StyleType;

/** Type for the marker-start, marker-mid and marker-end style properties */
export type Marker_StyleType = "none" | IIDRule;

markerStart: Marker_StyleType;

/** Type for the marker-start, marker-mid and marker-end style properties */
export type Marker_StyleType = "none" | IIDRule;

maxBlockSize: CssSize;

maxHeight: CssSize;

maxInlineSize: CssSize;

maxWidth: CssSize;

minBlockSize: CssSize;

minHeight: CssSize;

minInlineSize: CssSize;

minWidth: CssSize;

objectFit: ObjectFit_StyleType;

/** Type for the object-fit style property */
export type ObjectFit_StyleType = "fill" | "contain" | "cover" | "none" | "scale-down";

objectPosition: CssPosition;

offset: CssPosition;

/** Type for the offset style property */
export type Offset_StyleType = string | OffsetPath_StyleType |
{
    anchor?: OffsetAnchor_StyleType,
    distance?: CssLength,
    path?: OffsetPath_StyleType,
    position?: CssPosition,
    rotate?: OffsetRotate_StyleType,
}

offseAnchor: OffsetAnchor_StyleType;

/** Type for the offset-anchor style property */
export type OffsetAnchor_StyleType = "auto" | CssPosition;

offsetDistance: CssLength;

offsePath: OffsetPath_StyleType;

/** Type for offset-path style property */
export type OffsetPath_StyleType = "none" | IRayProxy | IUrlProxy | BasicShape | GeometryBoxKeyword |
    [GeometryBoxKeyword, BasicShape];

offsetPosition: CssPosition;

offsetRotate: CssPosition;

/** Type for the offset-rotate style property */
export type OffsetRotate_StyleType = "auto" | "reverse" | CssAngle | ["auto" | "reverse", CssAngle];

opacity: CssPercent;

order: CssNumber;

orphans: CssNumber;

outline: Border_StyleType;

outlineColor: CssColor;

outlineOffset: CssLength;

outlineStyle: BorderStyle_StyleType;

outlineWidth: BorderWidth_StyleType;

overflow: Overflow_StyleType;

/** Type for the overflow style property */
export type Overflow_StyleType = OneOrPair<Overflow_Single_StyleType>;

/** Type for the overflow-x/y style property */
export type Overflow_Single_StyleType = "visible" | "hidden" | "clip" | "scroll" | "auto";

overflowAnchor: OverflowAnchor_StyleType;

/** Type for the overflow-anchor style property */
export type OverflowAnchor_StyleType = "auto" | "none";

overflowBlock: Overflow_Single_StyleType;

overflowInline: Overflow_Single_StyleType;

overflowWrap: OverflowWrap_StyleType;

/** Type for the overflow-wrap style property */
export type OverflowWrap_StyleType = "normal" | "break-word" | "anywhere";

overflowX: Overflow_Single_StyleType;

overflowY: Overflow_Single_StyleType;

overscrollBehavior: OverscrollBehavior_StyleType;

/** Type for the overscroll-behavior style property */
export type OverscrollBehavior_StyleType = OneOrPair<OverscrollBehavior_Single_StyleType>;

/** Type for the overscroll-behavior-x/y style property */
export type OverscrollBehavior_Single_StyleType = "contain" | "none" | "auto";