css_class_generators.ts

Declarations
#

19 declarations

view source

ClassTemplateFn
#

ClassTemplateResult
#

COLOR_INTENSITIES
#

ColorIntensity
#

CSS_DIRECTIONS
#

CSS_GLOBALS
#

CssDirection
#

CssGlobal
#

format_dimension_value
#

css_class_generators.ts view source

(value: string): string

Format width/height values for CSS (handles 0, auto, percentages, pixels, content values, and CSS variables). Used by width and height properties.

value

type string

returns

string

format_spacing_value
#

css_class_generators.ts view source

(value: string): string

Format spacing values for CSS (handles 0, auto, percentages, pixels, and CSS variables). Used by margin, padding, gap, inset, top/right/bottom/left, etc.

value

type string

returns

string

generate_border_radius_corners
#

css_class_generators.ts view source

(values: Iterable<string>, formatter?: ((value: string) => string) | undefined): Record<string, CssClassDeclaration>

Generate border radius corner classes for all four corners. Creates classes for top-left, top-right, bottom-left, bottom-right corners.

values

- The values to generate classes for

type Iterable<string>

formatter?

- Optional function to format values

type ((value: string) => string) | undefined
optional

returns

Record<string, CssClassDeclaration>

generate_classes
#

css_class_generators.ts view source

<T1 = string, T2 = string, T3 = string>(template: ClassTemplateFn<T1, T2, T3>, values: Iterable<T1>, secondary?: Iterable<T2> | undefined, tertiary?: Iterable<...> | undefined): Record<...>

Generates CSS class declarations from templates. Supports up to 3 dimensions of multiplicative combinations.

template

- Function that generates CSS from values, can return null to skip

type ClassTemplateFn<T1, T2, T3>

values

- Primary iterable of values

type Iterable<T1>

secondary?

- Optional second dimension (makes it multiplicative)

type Iterable<T2> | undefined
optional

tertiary?

- Optional third dimension for even more combinations

type Iterable<T3> | undefined
optional

returns

Record<string, CssClassDeclaration>

examples

Example 1
Example 2

generate_directional_classes
#

css_class_generators.ts view source

(property: string, values: Iterable<string>, formatter?: ((v: string) => string) | undefined): Record<string, CssClassDeclaration>

Generate directional classes for properties like margin and padding. Creates classes for all directions: base, top, right, bottom, left, x (horizontal), y (vertical).

property

- The base CSS property name (e.g. 'margin', 'padding')

type string

values

- The values to generate classes for

type Iterable<string>

formatter?

- Optional function to format values (defaults to identity)

type ((v: string) => string) | undefined
optional

returns

Record<string, CssClassDeclaration>

generate_global_classes
#

generate_property_classes
#

css_class_generators.ts view source

(property: string, values: Iterable<string>, formatter?: ((value: string) => string) | undefined, prefix?: string): Record<string, CssClassDeclaration>

Generate classes for a single CSS property with various values. This is the most common pattern, used by display, visibility, float, etc.

property

- The CSS property name (e.g. 'display', 'gap')

type string

values

- The values to generate classes for

type Iterable<string>

formatter?

- Optional function to format values (e.g. v => var(--space_${v}))

type ((value: string) => string) | undefined
optional

prefix

- Optional class name prefix (defaults to property with dashes replaced by underscores)

type string
default to_variable_name(property)

returns

Record<string, CssClassDeclaration>

generate_property_with_axes
#

css_class_generators.ts view source

(property: string, values: Iterable<string>): Record<string, CssClassDeclaration>

Generate classes for properties with axis variants (e.g. overflow, overflow-x, overflow-y).

property

- The base CSS property name (e.g. 'overflow')

type string

values

- The values to generate classes for

type Iterable<string>

returns

Record<string, CssClassDeclaration>

generate_shadow_classes
#

css_class_generators.ts view source

(sizes: Iterable<string>, alpha_mapping: Record<string, string>): Record<string, CssClassDeclaration>

Generate shadow classes for various shadow types and sizes. Creates classes for regular, top, bottom, inset, inset-top, and inset-bottom shadows. Each shadow uses color-mix with alpha values for transparency.

sizes

- The shadow size variants (xs, sm, md, lg, xl)

type Iterable<string>

alpha_mapping

- Mapping of sizes to alpha numbers (1-5)

type Record<string, string>

returns

Record<string, CssClassDeclaration>

to_kebab
#

to_variable_name
#

Imported by
#