Semantic Color Utility Classes

daisyUI extends many Tailwind CSS utility classes to support semantic colors. These factories provide access to semantic color utilities with full modifier support:

# Background color with semantic colors
bg_dui = ColoredFactoryDaisyUI("bg", "Background color utilities for controlling an element's semantic background color") # The semantic background color factory

# Text color with semantic colors  
text_dui = ColoredFactoryDaisyUI("text", "Text color utilities for controlling an element's semantic text color") # The semantic text color factory

# Border color with semantic colors
border_dui = ColoredFactoryDaisyUI("border", "Border color utilities for controlling an element's semantic border color") # The semantic border color factory

# Ring color with semantic colors
ring_dui = ColoredFactoryDaisyUI("ring", "Ring color utilities for controlling an element's semantic ring color") # The semantic ring color factory

# Fill color with semantic colors (for SVG)
fill_dui = ColoredFactoryDaisyUI("fill", "Fill color utilities for controlling SVG element's semantic fill color") # The semantic fill color factory

# Stroke color with semantic colors (for SVG)  
stroke_dui = ColoredFactoryDaisyUI("stroke", "Stroke color utilities for controlling SVG element's semantic stroke color") # The semantic stroke color factory

# Caret color with semantic colors
caret_dui = ColoredFactoryDaisyUI("caret", "Caret color utilities for controlling the caret's semantic color") # The semantic caret color factory

# Accent color with semantic colors
accent_dui = ColoredFactoryDaisyUI("accent", "Accent color utilities for controlling form accent semantic color") # The semantic accent color factory

# Shadow color with semantic colors
shadow_dui = ColoredFactoryDaisyUI("shadow", "Shadow color utilities for controlling shadow's semantic color") # The semantic shadow color factory

# Outline color with semantic colors
outline_dui = ColoredFactoryDaisyUI("outline", "Outline color utilities for controlling outline's semantic color") # The semantic outline color factory

# Text decoration color with semantic colors
decoration_dui = ColoredFactoryDaisyUI("decoration", "Text decoration color utilities for controlling decoration's semantic color") # The semantic decoration color factory

# Placeholder color with semantic colors
placeholder_dui = ColoredFactoryDaisyUI("placeholder", "Placeholder color utilities for controlling placeholder text's semantic color") # The semantic placeholder color factory

# Divide color with semantic colors
divide_dui = ColoredFactoryDaisyUI("divide", "Divide color utilities for controlling divider's semantic color") # The semantic divide color factory

# Ring offset color with semantic colors
ring_offset_dui = ColoredFactoryDaisyUI("ring-offset", "Ring offset color utilities for controlling ring offset's semantic color") # The semantic ring offset color factory

---

source

test_semantic_colors_basic_examples

 test_semantic_colors_basic_examples ()

Test semantic color utility classes for various CSS properties.

def test_semantic_colors_basic_examples():
    """Test semantic color utility classes for various CSS properties."""
    # Test background colors
    assert str(bg_dui.primary) == "bg-primary"
    assert str(bg_dui.secondary) == "bg-secondary"
    assert str(bg_dui.accent) == "bg-accent"
    assert str(bg_dui.neutral) == "bg-neutral"
    assert str(bg_dui.base_100) == "bg-base-100"
    assert str(bg_dui.base_200) == "bg-base-200"
    assert str(bg_dui.base_300) == "bg-base-300"
    assert str(bg_dui.base_content) == "bg-base-content"
    assert str(bg_dui.info) == "bg-info"
    assert str(bg_dui.success) == "bg-success"
    assert str(bg_dui.warning) == "bg-warning"
    assert str(bg_dui.error) == "bg-error"
    
    # Test text colors
    assert str(text_dui.primary) == "text-primary"
    assert str(text_dui.primary_content) == "text-primary-content"
    assert str(text_dui.secondary_content) == "text-secondary-content"
    assert str(text_dui.base_content) == "text-base-content"
    
    # Test border colors
    assert str(border_dui.primary) == "border-primary"
    assert str(border_dui.base_300) == "border-base-300"
    assert str(border_dui.error) == "border-error"
    
    # Test ring colors
    assert str(ring_dui.primary) == "ring-primary"
    assert str(ring_dui.accent) == "ring-accent"
    
    # Test fill and stroke colors (for SVG)
    assert str(fill_dui.primary) == "fill-primary"
    assert str(stroke_dui.secondary) == "stroke-secondary"
    
    # Test other color utilities
    assert str(caret_dui.primary) == "caret-primary"
    assert str(accent_dui.secondary) == "accent-secondary"
    assert str(shadow_dui.neutral) == "shadow-neutral"
    assert str(outline_dui.error) == "outline-error"
    assert str(decoration_dui.primary) == "decoration-primary"
    assert str(placeholder_dui.base_content) == "placeholder-base-content"
    assert str(divide_dui.base_300) == "divide-base-300"
    assert str(ring_offset_dui.base_100) == "ring-offset-base-100"

# Run the test
test_semantic_colors_basic_examples()

---

source

test_semantic_colors_opacity_examples

 test_semantic_colors_opacity_examples ()

Test semantic color utilities with opacity modifiers.

def test_semantic_colors_opacity_examples():
    """Test semantic color utilities with opacity modifiers."""
    # Test various utilities with opacity
    assert str(bg_dui.primary.opacity(50)) == "bg-primary/50"
    assert str(text_dui.base_content.opacity(70)) == "text-base-content/70"
    assert str(border_dui.error.opacity(25)) == "border-error/25"
    assert str(ring_dui.accent.opacity(90)) == "ring-accent/90"
    
    # Test arbitrary opacity values
    assert str(bg_dui.primary.opacity("[0.87]")) == "bg-primary/[0.87]"
    assert str(text_dui.error.opacity("(--my-opacity)")) == "text-error/(--my-opacity)"

# Run the test
test_semantic_colors_opacity_examples()

Practical Examples

Test with FastHTML components to show practical usage:

---

source

test_semantic_color_fasthtml_examples

 test_semantic_color_fasthtml_examples ()

Test practical usage patterns with FastHTML components.

def test_semantic_color_fasthtml_examples():
    """Test practical usage patterns with FastHTML components."""
    from fasthtml.common import Div, Button, H1, P, Span
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg_linear
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.data_display.card import card
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.utilities.glass import glass
    
    # Create a card with semantic colors and tokenized border radius
    card = Div(
        H1("Welcome to daisyUI", cls=str(text_dui.primary_content)),
        P("This card uses semantic colors", cls=str(text_dui.primary_content)),
        cls=combine_classes(
            card,
            bg_dui.primary,
            border_dui.accent,
            border_radius.box,
            p(6), border(), shadow.lg
        )
    )
    
    # Verify classes
    assert "bg-primary" in card.attrs['class']
    assert "border-accent" in card.attrs['class']
    assert "rounded-box" in card.attrs['class']
    assert card.children[0].attrs['class'] == "text-primary-content"
    
    # Create a button with semantic colors
    button = Button(
        "Click me",
        cls=combine_classes(
            btn,
            bg_dui.primary,
            text_dui.primary_content,
            border_radius.field,
            p.x(4), p.y(2)
        )
    )
    assert "bg-primary" in button.attrs['class']
    assert "text-primary-content" in button.attrs['class']
    assert "rounded-field" in button.attrs['class']

    return Div(
        card,
        button
    )

# Run the test
test_semantic_color_fasthtml_examples()

<div>
  <div class="card bg-primary border-accent rounded-box p-6 border shadow-lg">
    <h1 class="text-primary-content">Welcome to daisyUI</h1>
    <p class="text-primary-content">This card uses semantic colors</p>
  </div>
<button class="btn bg-primary text-primary-content rounded-field px-4 py-2">Click me</button></div>

test_func = test_semantic_color_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()