Design System Stylesheets

Design system stylsheets are place to define common styles, CSS variables. All the Konigle websites use TailwindCSS v4. If you want to override or define custom re-usable styles, you can do it here.

Getting Stylesheet Content

Stylesheet Retrieval

import konigle

client = konigle.Client(api_key="your-api-key")

# Get current stylesheet content
css_content = client.stylesheets.get_content()
print(css_content)

Setting Stylesheet Content

# Define your custom CSS
custom_css = """
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: 'Inter', sans-serif;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4rem 2rem;
  text-align: center;
}
"""

# Update stylesheet
client.stylesheets.set_content(custom_css)
print("✅ Stylesheet updated successfully")

CLI Usage

Use the CLI for quick stylesheet management:

# Get current stylesheet
konigle design get-stylesheet

# Save stylesheet to file
konigle design get-stylesheet --output design-system.css

# Update stylesheet from string
konigle design set-stylesheet --content "body { font-family: 'Arial', sans-serif; }"

# Update stylesheet from file
konigle design set-stylesheet --file my-styles.css

Async Operations

import asyncio

async def manage_stylesheets():
    async with konigle.AsyncClient(api_key="your-api-key") as client:
        # Get current stylesheet
        current_css = await client.stylesheets.get_content()

        # Create backup
        backup_css = f"/* Backup created */\n{current_css}"

        # Update with new styles
        new_css = """
        /* Updated design system */
        :root {
          --primary-color: #2563eb;
        }
        """ + backup_css

        await client.stylesheets.set_content(new_css)
        print("✅ Stylesheet updated with backup")

asyncio.run(manage_stylesheets())