api #

Declarations
#

CSS framework and design system

451 declarations

alignment_values
#

AlignmentValue
#

bg
#

bg_0
#

bg_1
#

bg_10
#

bg_2
#

bg_3
#

bg_4
#

bg_5
#

bg_6
#

bg_7
#

bg_8
#

bg_9
#

border_color
#

border_color_1
#

border_color_2
#

border_color_3
#

border_color_4
#

border_color_5
#

border_color_a
#

border_color_b
#

border_color_c
#

border_color_d
#

border_color_e
#

border_color_f
#

border_color_g
#

border_color_h
#

border_color_i
#

border_color_j
#

border_radius_corners_interpreter
#

css_class_interpreters.ts view source

CssClassDeclarationInterpreter

Interpreter for border radius corner percentage classes, handles all four corners: top-left, top-right, bottom-left, bottom-right. Examples: border_top_left_radius_50, border_bottom_right_radius_100.

border_radius_interpreter
#

border_radius_lg
#

border_radius_md
#

border_radius_sm
#

border_radius_variants
#

border_radius_xl
#

border_radius_xs
#

border_radius_xs2
#

border_radius_xs3
#

border_style
#

border_style_values
#

border_width
#

border_width_1
#

border_width_2
#

border_width_3
#

border_width_4
#

border_width_5
#

border_width_6
#

border_width_7
#

border_width_8
#

border_width_9
#

border_width_variants
#

BorderRadiusVariant
#

BorderStyleValue
#

BorderWidthVariant
#

button_shadow
#

button_shadow_active
#

button_shadow_hover
#

ClassTemplateFn
#

ClassTemplateResult
#

collect_css_classes
#

css_class_helpers.ts view source

(contents: string, extractors?: CssExtractor[]): Set<string>

Returns a Set of CSS classes from a string of HTML/Svelte/JS/TS content. Handles class attributes, directives, and various forms of CSS class declarations.

contents

type string

extractors

type CssExtractor[]
default CSS_CLASS_EXTRACTORS

returns

Set<string>

color_a_1
#

color_a_2
#

color_a_3
#

color_a_4
#

color_a_5
#

color_a_6
#

color_a_7
#

color_a_8
#

color_a_9
#

color_b_1
#

color_b_2
#

color_b_3
#

color_b_4
#

color_b_5
#

color_b_6
#

color_b_7
#

color_b_8
#

color_b_9
#

color_c_1
#

color_c_2
#

color_c_3
#

color_c_4
#

color_c_5
#

color_c_6
#

color_c_7
#

color_c_8
#

color_c_9
#

color_d_1
#

color_d_2
#

color_d_3
#

color_d_4
#

color_d_5
#

color_d_6
#

color_d_7
#

color_d_8
#

color_d_9
#

color_e_1
#

color_e_2
#

color_e_3
#

color_e_4
#

color_e_5
#

color_e_6
#

color_e_7
#

color_e_8
#

color_e_9
#

color_f_1
#

color_f_2
#

color_f_3
#

color_f_4
#

color_f_5
#

color_f_6
#

color_f_7
#

color_f_8
#

color_f_9
#

color_g_1
#

color_g_2
#

color_g_3
#

color_g_4
#

color_g_5
#

color_g_6
#

color_g_7
#

color_g_8
#

color_g_9
#

color_h_1
#

color_h_2
#

color_h_3
#

color_h_4
#

color_h_5
#

color_h_6
#

color_h_7
#

color_h_8
#

color_h_9
#

color_i_1
#

color_i_2
#

color_i_3
#

color_i_4
#

color_i_5
#

color_i_6
#

color_i_7
#

color_i_8
#

color_i_9
#

COLOR_INTENSITIES
#

color_j_1
#

color_j_2
#

color_j_3
#

color_j_4
#

color_j_5
#

color_j_6
#

color_j_7
#

color_j_8
#

color_j_9
#

color_schemes
#

color_variants
#

ColorIntensity
#

ColorScheme
#

ColorVariant
#

css_class_composites
#

css_class_interpreters
#

css_classes_by_name
#

CSS_DIRECTIONS
#

CSS_GLOBALS
#

CssClassDeclaration
#

CssClassDeclarationBase
#

CssClassDeclarationGroup
#

CssClassDeclarationInterpreter
#

CssClassDeclarationItem
#

CssClasses
#

css_class_helpers.ts view source

include_classes

type Set<string> | null

constructor

type new (include_classes?: Set<string> | null): CssClasses

include_classes
type Set<string> | null
default null

add

type (id: string, classes: Set<string>): void

id
type string
classes
type Set<string>
returns void

delete

type (id: string): void

id
type string
returns void

get

type (): Set<string>

returns Set<string>

CssDirection
#

CssExtractor
#

CssGlobal
#

darken_1
#

darken_2
#

darken_3
#

darken_4
#

darken_5
#

darken_6
#

darken_7
#

darken_8
#

darken_9
#

DEFAULT_THEME
#

default_themes
#

default_variables
#

variables.ts view source

StyleVariable[]

These are implicitly the variables for the base theme. See also the empty variables array of the base theme above.

disabled_opacity
#

display_values
#

variable_data.ts view source

readonly ["none", "contents", "block", "flow-root", "inline", "inline-block", "run-in", "list-item", "inline list-item", "flex", "inline-flex", "grid", "inline-grid", "ruby", "block ruby", "table", "inline-table"]

DisplayValue
#

variable_data.ts view source

"none" | "contents" | "block" | "flow-root" | "inline" | "inline-block" | "run-in" | "list-item" | "inline list-item" | "flex" | "inline-flex" | "grid" | "inline-grid" | "ruby" | "block ruby" | "table" | "inline-table"

distance_lg
#

distance_md
#

distance_sm
#

distance_variants
#

distance_xl
#

distance_xs
#

DistanceVariant
#

duration_1
#

duration_2
#

duration_3
#

duration_4
#

duration_5
#

duration_6
#

fg
#

fg_0
#

fg_1
#

fg_10
#

fg_2
#

fg_3
#

fg_4
#

fg_5
#

fg_6
#

fg_7
#

fg_8
#

fg_9
#

fill
#

fill_a
#

fill_b
#

fill_c
#

fill_d
#

fill_e
#

fill_f
#

fill_g
#

fill_h
#

fill_i
#

fill_j
#

flex_direction_values
#

flex_wrap_values
#

FlexDirectionValue
#

FlexWrapValue
#

float_values
#

FloatValue
#

font_family_mono
#

font_family_sans
#

font_family_serif
#

font_family_variants
#

font_size_lg
#

font_size_md
#

font_size_names
#

font_size_sm
#

font_size_variants
#

font_size_xl
#

font_size_xl2
#

font_size_xl3
#

font_size_xl4
#

font_size_xl5
#

font_size_xl6
#

font_size_xl7
#

font_size_xl8
#

font_size_xl9
#

font_size_xs
#

font_weight_interpreter
#

FontFamilyVariant
#

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

gen_moss_css
#

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_classes_css
#

css_class_helpers.ts view source

(classes: Iterable<string>, classes_by_name: Record<string, CssClassDeclaration | undefined>, interpreters: CssClassDeclarationInterpreter[], log?: Logger | undefined): string

classes

type Iterable<string>

classes_by_name

type Record<string, CssClassDeclaration | undefined>

interpreters

type CssClassDeclarationInterpreter[]

log?

type Logger | undefined
optional

returns

string

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>

GenMossCssOptions
#

gen_moss_css.ts view source

GenMossCssOptions

filter_file

type FileFilter | null

include_stats

type boolean

classes_by_name

type Record<string, CssClassDeclaration | undefined>

class_interpreters

type Array<CssClassDeclarationInterpreter>

hue_a
#

hue_b
#

hue_c
#

hue_d
#

hue_e
#

hue_f
#

hue_g
#

hue_h
#

hue_i
#

hue_j
#

icon_size_lg
#

icon_size_md
#

icon_size_sm
#

icon_size_variants
#

icon_size_xl
#

icon_size_xl2
#

icon_size_xl3
#

icon_size_xs
#

icon_sizes
#

variable_data.ts view source

{ icon_size_xs: string; icon_size_sm: string; icon_size_md: string; icon_size_lg: string; icon_size_xl: string; icon_size_xl2: string; icon_size_xl3: string; }

IconSizeVariant
#

input_fill
#

input_height
#

input_height_inner
#

input_height_sm
#

input_padding_x
#

input_padding_y
#

input_width_min
#

is_style_variable_name
#

justify_values
#

variable_data.ts view source

readonly ["center", "start", "end", "left", "right", "space-between", "space-around", "space-evenly", "stretch"]

JustifyValue
#

variable_data.ts view source

"right" | "left" | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly"

lighten_1
#

lighten_2
#

lighten_3
#

lighten_4
#

lighten_5
#

lighten_6
#

lighten_7
#

lighten_8
#

lighten_9
#

line_height_lg
#

line_height_md
#

line_height_names
#

line_height_sm
#

line_height_variants
#

line_height_xl
#

line_height_xs
#

LineHeightVariant
#

link_color
#

link_color_selected
#

opacity_interpreter
#

outline_color
#

outline_style
#

outline_width
#

outline_width_active
#

outline_width_focus
#

outline_width_variants
#

OutlineWidthVariant
#

overflow_values
#

overflow_wrap_values
#

OverflowValue
#

OverflowWrapValue
#

position_values
#

PositionValue
#

render_theme_style
#

render_theme_variable
#

theme.ts view source

(variable: StyleVariable, dark?: boolean, comments?: boolean): string

variable

type StyleVariable

dark

type boolean
default false

comments

type boolean
default true

returns

string

RenderThemeStyleOptions
#

theme.ts view source

RenderThemeStyleOptions

comments

type boolean

id

type string | null

empty_default_theme

type boolean

specificity

Repeats the theme selector to handle unpredictable head content insertion order. Accepts any integer >= 1, defaults to 2.

type number

scrollbar_gutter_values
#

scrollbar_width_values
#

ScrollbarGutterValue
#

ScrollbarWidthValue
#

shadow_alpha_1
#

shadow_alpha_2
#

shadow_alpha_3
#

shadow_alpha_4
#

shadow_alpha_5
#

shadow_alpha_variants
#

shadow_bottom_lg
#

shadow_bottom_md
#

shadow_bottom_sm
#

shadow_bottom_xl
#

shadow_bottom_xs
#

shadow_color
#

shadow_color_a
#

shadow_color_b
#

shadow_color_c
#

shadow_color_d
#

shadow_color_e
#

shadow_color_f
#

shadow_color_g
#

shadow_color_glow
#

shadow_color_h
#

shadow_color_highlight
#

shadow_color_i
#

shadow_color_j
#

shadow_color_shroud
#

shadow_font_size_variants
#

shadow_inset_bottom_lg
#

shadow_inset_bottom_md
#

shadow_inset_bottom_sm
#

shadow_inset_bottom_xl
#

shadow_inset_bottom_xs
#

shadow_inset_lg
#

shadow_inset_md
#

shadow_inset_sm
#

shadow_inset_top_lg
#

shadow_inset_top_md
#

shadow_inset_top_sm
#

shadow_inset_top_xl
#

shadow_inset_top_xs
#

shadow_inset_xl
#

shadow_inset_xs
#

shadow_lg
#

shadow_md
#

shadow_semantic_values
#

shadow_sm
#

shadow_top_lg
#

shadow_top_md
#

shadow_top_sm
#

shadow_top_xl
#

shadow_top_xs
#

shadow_variant_prefixes
#

variable_data.ts view source

readonly ["shadow_", "shadow_top_", "shadow_bottom_", "shadow_inset_", "shadow_inset_top_", "shadow_inset_bottom_"]

shadow_xl
#

shadow_xs
#

ShadowAlphaVariant
#

ShadowSemanticValue
#

ShadowSizeVariant
#

SizeVariant
#

space_lg
#

space_md
#

space_sm
#

space_variants
#

variable_data.ts view source

readonly ["xs5", "xs4", "xs3", "xs2", "xs", "sm", "md", "lg", "xl", "xl2", "xl3", "xl4", "xl5", "xl6", "xl7", "xl8", "xl9", "xl10", "xl11", "xl12", "xl13", "xl14", "xl15"]

space_xl
#

space_xl10
#

space_xl11
#

space_xl12
#

space_xl13
#

space_xl14
#

space_xl15
#

space_xl2
#

space_xl3
#

space_xl4
#

space_xl5
#

space_xl6
#

space_xl7
#

space_xl8
#

space_xl9
#

space_xs
#

space_xs2
#

space_xs3
#

space_xs4
#

space_xs5
#

SpaceVariant
#

variable_data.ts view source

"xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9" | "xs5" | "xs4" | "xs3" | "xs2" | "xl10" | "xl11" | "xl12" | "xl13" | "xl14" | "xl15"

STYLE_VARIABLE_NAME_MATCHER
#

StyleVariable
#

StyleVariableName
#

text_active
#

text_align_values
#

text_color
#

text_color_0
#

text_color_1
#

text_color_10
#

text_color_2
#

text_color_3
#

text_color_4
#

text_color_5
#

text_color_6
#

text_color_7
#

text_color_8
#

text_color_9
#

text_color_disabled
#

text_color_variants
#

text_decoration
#

text_decoration_hover
#

text_decoration_selected
#

TextAlignValue
#

TextColorVariant
#

Theme
#

tint_hue
#

tint_saturation
#

to_kebab
#

to_variable_name
#

vertical_align_values
#

VerticalAlignValue
#

visibility_values
#

VisibilityValue
#

word_break_values
#

WordBreakValue
#

z_index_interpreter
#

Z_INDEX_MAX
#