Class to apply typography effects to NiceGUI text elements, using Tailwind

typography_tailwind_.py

from typing import Literal
from nicegui.element import Element

FontFamily = Literal["sans", "serif", "mono"]
FontSize = Literal[
    "xs",
    "sm",
    "base",
    "lg",
    "xl",
    "2xl",
    "3xl",
    "4xl",
    "5xl",
    "6xl",
    "7xl",
    "8xl",
    "9xl",
]
FontSmoothing = Literal["antialiased", "subpixel-antialiased"]
FontStyle = Literal["italic", "not-italic"]
FontWeight = Literal[
    "thin",
    "extralight",
    "light",
    "normal",
    "medium",
    "semibold",
    "bold",
    "extrabold",
    "black",
]
FontVariantNumeric = Literal[
    "normal-nums",
    "ordinal",
    "slashed-zero",
    "lining-nums",
    "oldstyle-nums",
    "proportional-nums",
    "tabular-nums",
    "diagonal-fractions",
    "stacked-fractions",
]
LetterSpacing = Literal["tighter", "tight", "normal", "wide", "wider", "widest"]
LineHeight = Literal[
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "none",
    "tight",
    "snug",
    "normal",
    "relaxed",
    "loose",
]
ListStyleType = Literal["none", "disc", "decimal"]
ListStylePosition = Literal["inside", "outside"]
TextAlign = Literal["left", "center", "right", "justify", "start", "end"]
TextColor = Literal[
    "inherit",
    "current",
    "transparent",
    "black",
    "white",
    "slate-50",
    "slate-100",
    "slate-200",
    "slate-300",
    "slate-400",
    "slate-500",
    "slate-600",
    "slate-700",
    "slate-800",
    "slate-900",
    "gray-50",
    "gray-100",
    "gray-200",
    "gray-300",
    "gray-400",
    "gray-500",
    "gray-600",
    "gray-700",
    "gray-800",
    "gray-900",
    "zinc-50",
    "zinc-100",
    "zinc-200",
    "zinc-300",
    "zinc-400",
    "zinc-500",
    "zinc-600",
    "zinc-700",
    "zinc-800",
    "zinc-900",
    "neutral-50",
    "neutral-100",
    "neutral-200",
    "neutral-300",
    "neutral-400",
    "neutral-500",
    "neutral-600",
    "neutral-700",
    "neutral-800",
    "neutral-900",
    "stone-50",
    "stone-100",
    "stone-200",
    "stone-300",
    "stone-400",
    "stone-500",
    "stone-600",
    "stone-700",
    "stone-800",
    "stone-900",
    "red-50",
    "red-100",
    "red-200",
    "red-300",
    "red-400",
    "red-500",
    "red-600",
    "red-700",
    "red-800",
    "red-900",
    "orange-50",
    "orange-100",
    "orange-200",
    "orange-300",
    "orange-400",
    "orange-500",
    "orange-600",
    "orange-700",
    "orange-800",
    "orange-900",
    "amber-50",
    "amber-100",
    "amber-200",
    "amber-300",
    "amber-400",
    "amber-500",
    "amber-600",
    "amber-700",
    "amber-800",
    "amber-900",
    "yellow-50",
    "yellow-100",
    "yellow-200",
    "yellow-300",
    "yellow-400",
    "yellow-500",
    "yellow-600",
    "yellow-700",
    "yellow-800",
    "yellow-900",
    "lime-50",
    "lime-100",
    "lime-200",
    "lime-300",
    "lime-400",
    "lime-500",
    "lime-600",
    "lime-700",
    "lime-800",
    "lime-900",
    "green-50",
    "green-100",
    "green-200",
    "green-300",
    "green-400",
    "green-500",
    "green-600",
    "green-700",
    "green-800",
    "green-900",
    "emerald-50",
    "emerald-100",
    "emerald-200",
    "emerald-300",
    "emerald-400",
    "emerald-500",
    "emerald-600",
    "emerald-700",
    "emerald-800",
    "emerald-900",
    "teal-50",
    "teal-100",
    "teal-200",
    "teal-300",
    "teal-400",
    "teal-500",
    "teal-600",
    "teal-700",
    "teal-800",
    "teal-900",
    "cyan-50",
    "cyan-100",
    "cyan-200",
    "cyan-300",
    "cyan-400",
    "cyan-500",
    "cyan-600",
    "cyan-700",
    "cyan-800",
    "cyan-900",
    "sky-50",
    "sky-100",
    "sky-200",
    "sky-300",
    "sky-400",
    "sky-500",
    "sky-600",
    "sky-700",
    "sky-800",
    "sky-900",
    "blue-50",
    "blue-100",
    "blue-200",
    "blue-300",
    "blue-400",
    "blue-500",
    "blue-600",
    "blue-700",
    "blue-800",
    "blue-900",
    "indigo-50",
    "indigo-100",
    "indigo-200",
    "indigo-300",
    "indigo-400",
    "indigo-500",
    "indigo-600",
    "indigo-700",
    "indigo-800",
    "indigo-900",
    "violet-50",
    "violet-100",
    "violet-200",
    "violet-300",
    "violet-400",
    "violet-500",
    "violet-600",
    "violet-700",
    "violet-800",
    "violet-900",
    "purple-50",
    "purple-100",
    "purple-200",
    "purple-300",
    "purple-400",
    "purple-500",
    "purple-600",
    "purple-700",
    "purple-800",
    "purple-900",
    "fuchsia-50",
    "fuchsia-100",
    "fuchsia-200",
    "fuchsia-300",
    "fuchsia-400",
    "fuchsia-500",
    "fuchsia-600",
    "fuchsia-700",
    "fuchsia-800",
    "fuchsia-900",
    "pink-50",
    "pink-100",
    "pink-200",
    "pink-300",
    "pink-400",
    "pink-500",
    "pink-600",
    "pink-700",
    "pink-800",
    "pink-900",
    "rose-50",
    "rose-100",
    "rose-200",
    "rose-300",
    "rose-400",
    "rose-500",
    "rose-600",
    "rose-700",
    "rose-800",
    "rose-900",
]
TextDecoration = Literal["underline", "overline", "line-through", "no-underline"]
TextDecorationColor = Literal[
    "inherit",
    "current",
    "transparent",
    "black",
    "white",
    "slate-50",
    "slate-100",
    "slate-200",
    "slate-300",
    "slate-400",
    "slate-500",
    "slate-600",
    "slate-700",
    "slate-800",
    "slate-900",
    "gray-50",
    "gray-100",
    "gray-200",
    "gray-300",
    "gray-400",
    "gray-500",
    "gray-600",
    "gray-700",
    "gray-800",
    "gray-900",
    "zinc-50",
    "zinc-100",
    "zinc-200",
    "zinc-300",
    "zinc-400",
    "zinc-500",
    "zinc-600",
    "zinc-700",
    "zinc-800",
    "zinc-900",
    "neutral-50",
    "neutral-100",
    "neutral-200",
    "neutral-300",
    "neutral-400",
    "neutral-500",
    "neutral-600",
    "neutral-700",
    "neutral-800",
    "neutral-900",
    "stone-50",
    "stone-100",
    "stone-200",
    "stone-300",
    "stone-400",
    "stone-500",
    "stone-600",
    "stone-700",
    "stone-800",
    "stone-900",
    "red-50",
    "red-100",
    "red-200",
    "red-300",
    "red-400",
    "red-500",
    "red-600",
    "red-700",
    "red-800",
    "red-900",
    "orange-50",
    "orange-100",
    "orange-200",
    "orange-300",
    "orange-400",
    "orange-500",
    "orange-600",
    "orange-700",
    "orange-800",
    "orange-900",
    "amber-50",
    "amber-100",
    "amber-200",
    "amber-300",
    "amber-400",
    "amber-500",
    "amber-600",
    "amber-700",
    "amber-800",
    "amber-900",
    "yellow-50",
    "yellow-100",
    "yellow-200",
    "yellow-300",
    "yellow-400",
    "yellow-500",
    "yellow-600",
    "yellow-700",
    "yellow-800",
    "yellow-900",
    "lime-50",
    "lime-100",
    "lime-200",
    "lime-300",
    "lime-400",
    "lime-500",
    "lime-600",
    "lime-700",
    "lime-800",
    "lime-900",
    "green-50",
    "green-100",
    "green-200",
    "green-300",
    "green-400",
    "green-500",
    "green-600",
    "green-700",
    "green-800",
    "green-900",
    "emerald-50",
    "emerald-100",
    "emerald-200",
    "emerald-300",
    "emerald-400",
    "emerald-500",
    "emerald-600",
    "emerald-700",
    "emerald-800",
    "emerald-900",
    "teal-50",
    "teal-100",
    "teal-200",
    "teal-300",
    "teal-400",
    "teal-500",
    "teal-600",
    "teal-700",
    "teal-800",
    "teal-900",
    "cyan-50",
    "cyan-100",
    "cyan-200",
    "cyan-300",
    "cyan-400",
    "cyan-500",
    "cyan-600",
    "cyan-700",
    "cyan-800",
    "cyan-900",
    "sky-50",
    "sky-100",
    "sky-200",
    "sky-300",
    "sky-400",
    "sky-500",
    "sky-600",
    "sky-700",
    "sky-800",
    "sky-900",
    "blue-50",
    "blue-100",
    "blue-200",
    "blue-300",
    "blue-400",
    "blue-500",
    "blue-600",
    "blue-700",
    "blue-800",
    "blue-900",
    "indigo-50",
    "indigo-100",
    "indigo-200",
    "indigo-300",
    "indigo-400",
    "indigo-500",
    "indigo-600",
    "indigo-700",
    "indigo-800",
    "indigo-900",
    "violet-50",
    "violet-100",
    "violet-200",
    "violet-300",
    "violet-400",
    "violet-500",
    "violet-600",
    "violet-700",
    "violet-800",
    "violet-900",
    "purple-50",
    "purple-100",
    "purple-200",
    "purple-300",
    "purple-400",
    "purple-500",
    "purple-600",
    "purple-700",
    "purple-800",
    "purple-900",
    "fuchsia-50",
    "fuchsia-100",
    "fuchsia-200",
    "fuchsia-300",
    "fuchsia-400",
    "fuchsia-500",
    "fuchsia-600",
    "fuchsia-700",
    "fuchsia-800",
    "fuchsia-900",
    "pink-50",
    "pink-100",
    "pink-200",
    "pink-300",
    "pink-400",
    "pink-500",
    "pink-600",
    "pink-700",
    "pink-800",
    "pink-900",
    "rose-50",
    "rose-100",
    "rose-200",
    "rose-300",
    "rose-400",
    "rose-500",
    "rose-600",
    "rose-700",
    "rose-800",
    "rose-900",
]
TextDecorationStyle = Literal["solid", "double", "dotted", "dashed", "wavy"]
TextDecorationThickness = Literal["auto", "from-font", "0", "1", "2", "4", "8"]
TextUnderlineOffset = Literal[
    "offset-auto", "offset-0", "offset-1", "offset-2", "offset-4", "offset-8"
]
TextTransform = Literal["normal-case", "uppercase", "lowercase", "capitalize"]
TextOverflow = Literal["truncate", "text-ellipsis", "text-clip"]
TextIndent = Literal[
    "0",
    "px",
    "0.5",
    "1",
    "1.5",
    "2",
    "2.5",
    "3",
    "3.5",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "14",
    "16",
    "20",
    "24",
    "28",
    "32",
    "36",
    "40",
    "44",
    "48",
    "52",
    "56",
    "60",
    "64",
    "72",
    "80",
    "96",
]
VerticalAlign = Literal[
    "baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super"
]
Whitespace = Literal["normal", "nowrap", "pre", "pre-line", "pre-wrap"]
WordBreak = Literal["normal", "words", "all", "keep"]

class Typography:
    def __init__(self, element: Element) -> None:
        self.element = element

    def add(self, Class: str) -> None:
        self.element.classes(add=Class)

    def font_family(self, family: FontFamily):
        self.add(f"font-{family}")
        return self

    def font_size(self, size: FontSize):
        self.add(f"text-{size}")
        return self

    def font_smoothing(self, smoothing: FontSmoothing):
        self.add(smoothing)
        return self

    def font_style(self, style: FontStyle):
        self.add(style)
        return self

    def font_weight(self, weight: FontWeight):
        self.add(f"font-{weight}")
        return self

    def font_variant_numeric(self, variant: FontVariantNumeric):
        self.add(variant)
        return self

    def letter_spacing(self, spacing: LetterSpacing):
        self.add(spacing)
        return self

    def line_height(self, height: LineHeight):
        self.add(f"leading-{height}")
        return self

    def list_style_type(self, type: ListStyleType):
        self.add(f"list-{type}")
        return self

    def list_style_position(self, position: ListStylePosition):
        self.add(f"list-{position}")
        return self

    def text_align(self, align: TextAlign):
        self.add(f"text-{align}")
        return self

    def text_color(self, color: TextColor):
        self.add(f"text-{color}")
        return self

    def text_decoration(self, decoration: TextDecoration):
        self.add(decoration)
        return self

    def text_decoration_color(self, color: TextDecorationColor):
        self.add(f"decoration-{color}")
        return self

    def text_decoration_style(self, style: TextDecorationStyle):
        self.add(f"decoration-{style}")
        return self

    def text_decoration_thickness(self, thickness: TextDecorationThickness):
        self.add(f"decoration-{thickness}")
        return self

    def text_underline_offset(self, underline: TextUnderlineOffset):
        self.add(f"underline-{underline}")
        return self

    def text_transform(self, transform: TextTransform):
        self.add(transform)
        return self

    def text_overflow(self, overflow: TextOverflow):
        self.add(overflow)
        return self

    def text_indent(self, indent: TextIndent):
        self.add(f"indent-{indent}")
        return self

    def vertical_align(self, align: VerticalAlign):
        self.add(f"vertical-{align}")
        return self

    def whitespace(self, whitespace: Whitespace):
        self.add(f"whitespace-{whitespace}")
        return self

    def word_break(self, wbreak: WordBreak):
        self.add(f"break-{wbreak}")
        return self