quark/css #

CSSNameExp #

Represents a class-based selector expression.

IMPORTANT:

• Only class selectors are supported.
• This does NOT represent a full CSS selector grammar.

Example: '.button' '.button.primary'

type CSSNameExp = ".className"

Class: StyleSheets #

StyleSheets #

Represents a collection of style properties applied to a View.

This class does NOT describe selector logic. Selector matching and propagation are handled separately by CStyleSheetsClass.

Properties defined here are inspired by CSS, but semantics are adapted for Qk's GUI layout and rendering model.

stylesheets.time? #

keyframe time or css transition time in milliseconds

time?: Uint

stylesheets.curve? #

keyframe curve or css transition curve

curve?: types.CurveIn

stylesheets.color? #

view color

color?: types.ColorIn

stylesheets.cascadeColor? #

cascade color

cascadeColor?: types.CascadeColorIn

stylesheets.cursor? #

cursor?: types.CursorStyleIn

stylesheets.zIndex? #

z index in global view tree

zIndex?: Uint

stylesheets.opacity? #

opacity 0.0 ~ 1.0, color.a alias, opacity = color.a / 255.0

opacity?: Float

stylesheets.visible? #

view visible

visible?: boolean

stylesheets.receive? #

view receive events

receive?: boolean

stylesheets.aa? #

view anti-aliasing

aa?: boolean

stylesheets.clip? #

view clip children

clip?: boolean

stylesheets.layout? #

view layout type

layout?: types.LayoutTypeIn

stylesheets.align? #

align?: types.AlignIn

stylesheets.boxSizing? #

box sizing model

boxSizing?: types.BoxSizingIn

stylesheets.width? #

width?: types.BoxSizeIn

stylesheets.height? #

height?: types.BoxSizeIn

stylesheets.minWidth? #

minWidth?: types.BoxSizeIn

stylesheets.minHeight? #

minHeight?: types.BoxSizeIn

stylesheets.maxWidth? #

maxWidth?: types.BoxSizeIn

stylesheets.maxHeight? #

maxHeight?: types.BoxSizeIn

stylesheets.margin? #

margin?: number[] | number

stylesheets.marginTop? #

marginTop?: number

stylesheets.marginRight? #

marginRight?: number

stylesheets.marginBottom? #

marginBottom?: number

stylesheets.marginLeft? #

marginLeft?: number

stylesheets.padding? #

padding?: number[] | number

stylesheets.paddingTop? #

paddingTop?: number

stylesheets.paddingRight? #

paddingRight?: number

stylesheets.paddingBottom? #

paddingBottom?: number

stylesheets.paddingLeft? #

paddingLeft?: number

stylesheets.borderRadius? #

borderRadius?: number[] | number

stylesheets.borderTopLeftRadius? #

borderTopLeftRadius?: number

stylesheets.borderTopRightRadius? #

borderTopRightRadius?: number

stylesheets.borderBottomRightRadius? #

borderBottomRightRadius?: number

stylesheets.borderBottomLeftRadius? #

borderBottomLeftRadius?: number

stylesheets.border? #

border

border?: types.BorderIn[] | types.BorderIn

stylesheets.borderTop? #

borderTop?: types.BorderIn

stylesheets.borderRight? #

borderRight?: types.BorderIn

stylesheets.borderBottom? #

borderBottom?: types.BorderIn

stylesheets.borderLeft? #

borderLeft?: types.BorderIn

stylesheets.borderWidth? #

borderWidth?: number[] | number

stylesheets.borderColor? #

borderColor?: types.ColorIn[] | types.ColorIn

stylesheets.borderTopWidth? #

border width

borderTopWidth?: number

stylesheets.borderRightWidth? #

borderRightWidth?: number

stylesheets.borderBottomWidth? #

borderBottomWidth?: number

stylesheets.borderLeftWidth? #

borderLeftWidth?: number

stylesheets.borderTopColor? #

border color

borderTopColor?: types.ColorIn

stylesheets.borderRightColor? #

borderRightColor?: types.ColorIn

stylesheets.borderBottomColor? #

borderBottomColor?: types.ColorIn

stylesheets.borderLeftColor? #

borderLeftColor?: types.ColorIn

stylesheets.backgroundColor? #

backgroundColor?: types.ColorIn

stylesheets.background? #

background?: types.BoxFilterIn

stylesheets.boxShadow? #

boxShadow?: types.BoxShadowIn

stylesheets.weight? #

weight?: number[] | number

stylesheets.direction? #

direction?: types.DirectionIn

stylesheets.itemsAlign? #

itemsAlign?: types.ItemsAlignIn

stylesheets.crossAlign? #

crossAlign?: types.CrossAlignIn

stylesheets.wrap? #

wrap?: types.WrapIn

stylesheets.wrapAlign? #

wrapAlign?: types.WrapAlignIn

stylesheets.src? #

src?: string

stylesheets.textAlign? #

textAlign?: types.TextAlignIn

stylesheets.fontWeight? #

fontWeight?: types.FontWeightIn

stylesheets.fontSlant? #

fontSlant?: types.FontSlantIn

stylesheets.textDecoration? #

textDecoration?: types.TextDecorationIn

stylesheets.textOverflow? #

textOverflow?: types.TextOverflowIn

stylesheets.whiteSpace? #

whiteSpace?: types.WhiteSpaceIn

stylesheets.wordBreak? #

wordBreak?: types.WordBreakIn

stylesheets.fontSize? #

fontSize?: types.FontSizeIn

stylesheets.textBackgroundColor? #

textBackgroundColor?: types.TextColorIn

stylesheets.textStroke? #

textStroke?: types.TextStrokeIn

stylesheets.textColor? #

textColor?: types.TextColorIn

stylesheets.lineHeight? #

lineHeight?: types.FontSizeIn

stylesheets.textShadow? #

textShadow?: types.TextShadowIn

stylesheets.fontFamily? #

fontFamily?: types.FontFamilyIn

stylesheets.security? #

security?: boolean

stylesheets.readonly? #

readonly?: boolean

stylesheets.keyboardType? #

keyboardType?: types.KeyboardTypeIn

stylesheets.returnType? #

returnType?: types.KeyboardReturnTypeIn

stylesheets.placeholderColor? #

placeholderColor?: types.ColorIn

stylesheets.cursorColor? #

cursorColor?: types.ColorIn

stylesheets.maxLength? #

maxLength?: number

stylesheets.placeholder? #

placeholder?: string

stylesheets.scrollbarColor? #

scrollbarColor?: types.ColorIn

stylesheets.scrollbarWidth? #

scrollbarWidth?: number

stylesheets.scrollbarMargin? #

scrollbarMargin?: number

stylesheets.translate? #

translate?: types.Vec2In

stylesheets.scale? #

scale?: types.Vec2In

stylesheets.skew? #

skew?: types.Vec2In

stylesheets.origin? #

origin?: types.BoxOriginIn[] | types.BoxOriginIn

stylesheets.originX? #

originX?: types.BoxOriginIn

stylesheets.originY? #

originY?: types.BoxOriginIn

stylesheets.x? #

x?: number

stylesheets.y? #

y?: number

stylesheets.scaleX? #

scaleX?: number

stylesheets.scaleY? #

scaleY?: number

stylesheets.skewX? #

skewX?: number

stylesheets.skewY? #

skewY?: number

stylesheets.rotateZ? #

rotateZ?: number

Class: CStyleSheetsClass #

CStyleSheetsClass #

Runtime stylesheet class collection bound to a View.

This object:

• Holds the set of class names applied to a View
• Resolves which style rules apply at runtime
• Manages propagation of class-based selectors to descendant Views

IMPORTANT:

• Only class names participate in selector matching.
• No attribute, tag, or structural selectors are involved.

cstylesheetsclass.set(name) #

Set Style Collection

set(name: string[] | string): void

cstylesheetsclass.add(name) #

Add a stylesheet class selector name

add(name: string): void

cstylesheetsclass.remove(name) #

Delete a stylesheet class selector name

remove(name: string): void

cstylesheetsclass.toggle(name) #

Toggle between Add and Delete

toggle(name: string): boolean

cstylesheetsclass.clear() #

Clear all stylesheet class selector names

clear(): void

cstylesheetsclass.has(name) #

Check if a stylesheet class selector name exists

has(name: string): boolean

cstylesheetsclass.names #

get all stylesheet class selector names

readonly names: Set<string>

createCss(sheets) #

Creates style rules using a CSS-inspired, class-driven syntax.

IMPORTANT: This API intentionally supports ONLY a constrained subset of CSS. It is designed for GUI view styling in Qk, not for full web CSS compatibility.

Supported:

• Class selectors only (e.g. .a, .a.b, .a .b, .a > .b)
• Multi-level hierarchical selectors
• Limited pseudo states: :normal, :hover, :active
• Style properties inspired by CSS, adapted for Qk view rendering

Unsupported:

• ID selectors, attribute selectors, and tag selectors
• Complex combinators (e.g. sibling selectors)
• Arbitrary or custom pseudo-classes and pseudo-elements
• Media queries, keyframes, and CSS animations
• Browser-specific or layout-driven CSS features

Pseudo state mapping:

• :normal → UIState.Normal
• :hover → UIState.Hover
• :active → UIState.Active

Notes:

• Selector semantics are resolved at creation time, not at runtime.
• This method mutates global style state.
• All rendering threads are automatically paused and resumed internally while stylesheets are being created or modified.

createCss(sheets: object, apply?: boolean)

Parameters:

• sheets — Style rule definitions keyed by class selectors
• apply? — Whether to apply the created styles to all views, default false

For example:

createCss({
    '.test': {
        width: '50%',
        height: '50%',
        backgroundColor: '#00f',
    },
    '.test .a': {
        width: 50,
        height: 50,
    },
    '.test > .c': {
        width: 100,
    },
    '.test .a.b': { // This selector will have a higher priority
        height: 60,
    },
    // Apply these pseudo-classes to the target.
    // To make them effective on the target, the target view must be able to receive events.
    '.test:normal .a': {
        backgroundColor: '#0000',
        time: 1000, // Use transition time
    },
    '.test:hover': {
        backgroundColor: '#f0f',
    },
    '.test:hover .a': {
        backgroundColor: '#f00',
        time: 1000,  // Use transition time
    },
})