{ "name": "@ulu/frontend", "prefix": "ulu", "snippets": { "themes": [ { "title": "Theme Switching", "description": "Using the `theme-light` and `theme-dark` classes to change the visual context of a section.", "html": "
\n \n \n
\n

Themed Content

\n

This section changes its colors based on the applied theme class.

\n \n
\n
" }, { "title": "Theme Inversion", "description": "The `theme-inverse` utility automatically applies the opposite theme (e.g., dark inside light) based on the current context.", "html": "
\n

Light Context

\n
\n

This box is automatically inverted to the dark theme because its parent is light.

\n \n
\n
" } ], "accordion": [ { "title": "Basic Accordion", "description": "A standard accordion stack with plus-to-minus icons and one-at-a-time behavior.", "html": "
\n
\n \n What is your return policy?\n \n \n \n \n
\n

You can return any unused item within 30 days of purchase for a full refund.

\n
\n
\n
\n \n Do you offer customer support?\n \n \n \n \n
\n

Yes, our customer support team is available 24/7 via email, live chat, or phone.

\n
\n
\n
" }, { "title": "Transparent Variant", "description": "The `accordion--transparent` modifier blends the component into the background.", "html": "
\n
\n \n Product Features\n \n \n \n \n
\n
    \n
  • Water-resistant design
    • \n
  • 24-hour battery life
    • \n
\n
\n
\n
\n \n Warranty Information\n \n \n \n \n
\n

This product comes with a one-year limited warranty covering manufacturer defects.

\n
\n
\n
" }, { "title": "Borderless Variant", "description": "The `accordion--borderless` modifier removes external borders for an inline look.", "html": "
\n
\n \n Privacy Settings\n \n \n \n \n
\n

Manage who can see your profile and activity status.

\n
\n
\n
\n \n Cookie Policy\n \n \n \n \n
\n

We use cookies to improve your browsing experience.

\n
\n
\n
" } ], "badge-stack": [ { "title": "Basic Badge Stack", "description": "Overlapping text-based badges.", "html": "" }, { "title": "Clickable Image Stack", "description": "A stack of clickable user profiles with images.", "html": "" } ], "badge": [ { "title": "Basic Badge", "description": "A standard badge with text.", "html": "
\n
\n JS\n
\n
" }, { "title": "Badge Sizes", "description": "Demonstrating small, default, and large badge variants.", "html": "
\n
\n
\n SM\n
\n
\n
\n
\n MD\n
\n
\n
\n
\n LG\n
\n
\n
" }, { "title": "Clickable Badge with Image", "description": "A badge containing an image that scales on hover.", "html": "\n
\n \"Profile\n
\n" } ], "basic-hero": [ { "title": "Basic Hero", "description": "A hero section with content and media side-by-side on larger screens.", "fullscreen": true, "html": "
\n
\n
\n

Hero Title with Supporting Text

\n

This is a description that provides more context about the page or section.

\n
\n
\n \"Hero\n
\n
\n
" }, { "title": "Centered Hero", "description": "A centered layout for the hero section.", "fullscreen": true, "html": "
\n
\n
\n

Centered Hero Title

\n

A brief and compelling reason to explore further.

\n
\n
\n \"Hero\n
\n
\n
" } ], "breadcrumb": [ { "title": "Standard Breadcrumb", "description": "A typical breadcrumb trail for navigation.", "html": "" }, { "title": "Truncated Breadcrumb", "description": "Items automatically truncate with an ellipsis if they exceed the `item-max-width`.", "html": "" } ], "button-group": [ { "title": "Standard Button Group", "description": "A group of buttons with a standard gap between them.", "html": "
\n \n \n \n
" }, { "title": "Joined Button Group", "description": "Buttons in this group are visually connected, with rounded corners only on the outer edges.", "html": "
\n \n \n \n
" } ], "button-verbose": [ { "title": "Standard Verbose Button", "description": "A button that includes a title and body text, often used for important links or pagination.", "html": "\n Primary Action Title\n Additional descriptive text that explains the consequence of this action.\n \n \n \n" }, { "title": "Full Width Verbose Button", "description": "The `button-verbose--full-width` modifier makes the button span the entire width of its container.", "html": "\n Next Chapter\n Continue reading about the architecture of the system.\n \n \n \n" } ], "button": [ { "title": "Primary Button", "description": "The default button style for main actions.", "wrapperClass": "demo-theme-box demo-width-small", "html": "" }, { "title": "Secondary Button", "description": "An alternative style for less important actions.", "html": "" }, { "title": "Small Button", "description": "A smaller button variant.", "html": "" }, { "title": "Large Button", "description": "A larger button variant.", "html": "" }, { "title": "Left Aligned Button", "description": "A button with its content aligned to the left, useful when the button spans a larger width.", "html": "" } ], "callout": [ { "title": "Basic Callout", "description": "A simple container to highlight content.", "html": "
\n

This is a default callout. It provides a subtle background to distinguish this section from the rest of the content.

\n
" }, { "title": "Status Callouts", "description": "Modifiers for different semantic states.", "html": "
\n

Info: Use this for helpful tips or additional context.

\n
\n
\n

Success: Use this to confirm a positive action or state.

\n
\n
\n

Warning: Use this to alert the user about potential issues.

\n
\n
\n

Danger: Use this for critical errors or irreversible actions.

\n
" }, { "title": "Outline Callout", "description": "A variant with no background color.", "html": "
\n

This is an outline callout. It uses a border without a background fill.

\n
" } ], "captioned-figure": [ { "title": "Traditional Layout", "description": "A traditional figure layout with the caption appearing below the image.", "html": "
\n \"Landscape\n
\n A beautiful landscape captured during sunset.\n
\n
" }, { "title": "Bottom-Right Overlay", "description": "The caption is overlaid on the bottom-right of the image using absolute positioning.", "html": "
\n \"Landscape\n
\n Overlay Caption\n
\n
" }, { "title": "Bottom-Center Overlay", "description": "The caption is centered at the bottom of the image.", "html": "
\n \"Landscape\n
\n Centered Overlay\n
\n
" } ], "card-grid": [ { "title": "Standard Card Grid", "description": "A responsive grid that automatically fills rows with cards.", "html": "
\n
\n

Card 1

Content for the first card.

\n
\n
\n

Card 2

Content for the second card.

\n
\n
\n

Card 3

Content for the third card.

\n
\n
" }, { "title": "Compact Card Grid", "description": "A grid with smaller minimum column widths and tighter gaps.", "html": "
\n
\n

Compact 1

\n
\n
\n

Compact 2

\n
\n
\n

Compact 3

\n
\n
\n

Compact 4

\n
\n
" } ], "card": [ { "title": "Basic Card", "description": "A standard card with a title, body content, and a footer.", "html": "
\n
\n
\n

Card Title

\n

This is the main content of the card. It provides a brief summary or introduction to a more detailed resource.

\n
\n
\n
\n Read More\n
\n
" }, { "title": "Card with Image", "description": "A card that includes a featured image at the top.", "html": "
\n
\n \"Card\n
\n
\n
\n

Featured Resource

\n

Discover interesting insights and helpful tips in our latest featured article.

\n
\n
\n
" }, { "title": "Clickable Card (Proxy Click)", "description": "A card where the entire area is clickable, using a proxy click pattern for accessibility.", "html": "
\n
\n \"Card\n
\n
\n
\n

\n Entire Card is Clickable\n

\n

This pattern allows the whole card to act as a link while maintaining a single, accessible anchor point.

\n
\n
\n
" } ], "counter-list": [ { "title": "Numeric Counter List", "description": "A standard ordered list styled with custom counters.", "html": "
    \n
  1. First item in the list.
    2. \n
  2. Second item with more content to demonstrate how the counter stays aligned.
    3. \n
  3. Third item.
    4. \n
" }, { "title": "Alphabetical Counter List", "description": "Using the `counter-list--alphabetical` modifier to use letters instead of numbers.", "html": "
    \n
  1. Analyze the requirements.
    2. \n
  2. Design the solution.
    3. \n
  3. Implement the features.
    4. \n
" }, { "title": "Non-List Counter Elements", "description": "You can also use the `counter-list__item` class on non-list elements (like divs).", "html": "
\n
This is a div acting as a counter item.
\n
Another div in the counter flow.
\n
" } ], "css-icon": [ { "title": "Basic UI Icons", "description": "Simple geometric icons for common actions.", "html": "
\n \n \n \n \n
" }, { "title": "Navigation Icons", "description": "Icons for directional navigation and disclosures.", "html": "
\n \n \n \n \n
" }, { "title": "Stroke Weight Variation", "description": "Use the `css-icon--stroke-large` modifier for a bolder appearance.", "html": "
\n \n \n \n \n
" }, { "title": "Transition Icons (Active State)", "description": "Some icons animate between states when the `is-active` class is applied.", "html": "
\n
\n \n \n Plus-to-Minus\n
\n
\n \n \n Menu-to-Close\n
\n
" } ], "data-grid": [ { "title": "Basic 12-Column Grid", "description": "A standard 12-column grid layout using the `data-grid` and `data-grid-item` attributes.", "html": "
\n
\n
6 Columns (50%)
\n
\n
\n
6 Columns (50%)
\n
\n
\n
4 Columns
\n
\n
\n
4 Columns
\n
\n
\n
4 Columns
\n
\n
" }, { "title": "Grid with Offsets", "description": "Using the `offset` property to create gaps in the grid layout.", "html": "
\n
\n
Width: 4
\n
\n
\n
Width: 4, Offset: 4
\n
\n
" }, { "title": "Responsive Column Widths", "description": "Defining different widths for different breakpoints (e.g., `width` for mobile, `width-large` for desktop).", "html": "
\n
\n
8 Columns on Desktop, Full Width on Mobile
\n
\n
\n
4 Columns on Desktop, Full Width on Mobile
\n
\n
" } ], "data-list": [ { "title": "Basic Data List", "description": "A standard list layout for simple items.", "html": "" }, { "title": "Flanked Layout (Prefixed + Suffixed)", "description": "Automatically aligns an icon at the start and an action at the end.", "html": "" }, { "title": "Interactive Clickable Rows", "description": "Entire rows are interactive, using proxy-click logic to route to a primary link.", "html": "" }, { "title": "Custom Grid with Spanning", "description": "Advanced usage using inline variables and column spanning.", "html": "" } ], "data-table": [ { "title": "Standard Data Table", "description": "A native HTML table styled for data display, including headers, footers, and a caption.", "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Quarterly Performance Summary
CategoryPrevious QCurrent QChange
Product Sales$45,000$52,000+15%
Service Fees$12,000$11,500-4%
Total$57,000$63,500+11%
" }, { "title": "Striped Table", "description": "Using the `data-table--striped` modifier to alternate background colors for rows.", "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Employee NameDepartmentStatus
Jane DoeEngineeringActive
John SmithMarketingOn Leave
Alice JohnsonProductActive
" }, { "title": "Large First Column", "description": "The `data-table--large-first` modifier ensures the first column has a larger minimum width, useful for row labels.", "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Specification Feature DescriptionValue
Memory (RAM)32GB DDR5
Processor (CPU)8-Core 4.2GHz
" } ], "definition-list": [ { "title": "Basic Stacked Layout", "description": "The default layout, which stacks terms and their definitions vertically.", "html": "
\n
\n
Application Version
\n
v2.4.5 (Stable)
\n
\n
\n
Release Date
\n
October 12, 2024
\n
\n
" }, { "title": "Table Layout", "description": "Using the `definition-list--table` modifier to create a two-column grid on larger screens.", "html": "
\n
\n
Project Owner
\n
Jane Doe
\n
\n
\n
Primary Language
\n
TypeScript (with Sass for styling)
\n
\n
" }, { "title": "Inline-All Layout", "description": "Using the `definition-list--inline-all` modifier to place terms and definitions on the same line.", "html": "
\n
\n
Status
\n
Connected
\n
\n
\n
Uptime
\n
99.9%
\n
\n
" }, { "title": "Separated Layout", "description": "Using the `definition-list--separated` and `definition-list--separated-first` modifiers to add borders between items.", "html": "
\n
\n
Support Tier
\n
Premium (24/7)
\n
\n
\n
Service SLA
\n
99.99% Availability Guaranteed
\n
\n
" } ], "flipcard": [ { "title": "Basic Flipcard", "description": "A text-only flipcard that reveals more information when clicked.", "html": "
\n
\n
\n

Technical Strategy

\n +\n
\n
\n
\n
\n

Our technical strategy focuses on modularity, performance, and accessibility across all platforms.

\n \n
\n
\n
" }, { "title": "Flipcard with Image", "description": "A flipcard using the `flipcard--w-image` modifier to include a background image on the front.", "html": "
\n
\n
\n \"Front\n
\n
\n

Project Alpha

\n +\n
\n
\n
\n
\n

Project Alpha is our flagship initiative to redefine the user experience for complex data dashboards.

\n \n
\n
\n
" } ], "headline-label": [ { "title": "Basic Headline Label", "description": "A small, bold label placed above a headline to categorize content.", "html": "

\n Case Study:\n Modernizing Legacy Infrastructure\n

\n

This case study explores the challenges and successes of a multi-year digital transformation project.

" } ], "hero": [ { "title": "Split Hero (Graphic Left)", "description": "A hero section where the graphic and content are split side-by-side.", "html": "
\n
\n \"Hero\n
\n
\n
\n
\n

Innovate Your Workflow

\n

Discover the tools and strategies that drive modern software development.

\n
\n Get Started\n Learn More\n
\n
\n
\n
\n
" }, { "title": "Overlay Hero", "description": "A hero section with the content overlaid on a full-width background graphic.", "html": "
\n
\n \"Hero\n
\n
\n
\n
\n

Full Screen Impact

\n

Create a bold first impression with a full-width immersive experience.

\n Call to Action\n
\n
\n
\n
" } ], "image-grid": [ { "title": "Basic Image Grid", "description": "A flex-based grid for displaying a collection of images that automatically reflows.", "html": "" } ], "input-group": [ { "title": "Search Input (Joined)", "description": "A search bar where the input and button are visually connected with shared borders.", "html": "
\n
\n
\n \n
\n
\n \n
\n
\n
" }, { "title": "Input with Currency Cue", "description": "Using a cue item to provide context, like a currency symbol.", "html": "
\n
\n
$
\n
\n \n
\n
\n
" }, { "title": "Gapped Layout", "description": "The default layout with a small gap between the input and the action button.", "html": "
\n
\n
\n \n
\n
\n \n
\n
\n
" } ], "list-inline": [ { "title": "Basic Inline List", "description": "A pipe-separated list of items displayed in a single line.", "html": "" }, { "title": "Large Gap Inline List", "description": "Using the `list-inline--large-gap` modifier for increased spacing between items.", "html": "" } ], "list-lines": [ { "title": "Basic List Lines", "description": "A list with horizontal rules between each item.", "html": "" }, { "title": "Dense List Lines", "description": "Using the `list-lines--dense` modifier for tighter vertical spacing.", "html": "" } ], "menu-stack": [ { "title": "Basic Navigation Menu", "description": "A standard vertical list of links, often used for sidebars or secondary navigation.", "html": "" }, { "title": "Collapsible Sub-Menu", "description": "Using `details` to create a collapsible group within the menu stack.", "html": "
\n \n
" }, { "title": "Selectable (Checkbox) Menu", "description": "A menu containing checkboxes, useful for filtering or selection lists.", "html": "
\n

Filter by Status

\n \n
" } ], "modal": [ { "title": "Basic Centered Modal", "description": "The default centered modal configuration, triggered by a button.", "html": "\n\n" }, { "title": "Right Sidebar Modal", "description": "Using the position: 'right' option to create a sidebar-style modal.", "html": "\n\n" }, { "title": "Fullscreen Modal", "description": "A modal that fills the entire viewport, useful for immersive content or complex tasks.", "html": "\n\n" } ], "nav-strip": [ { "title": "Basic Nav Strip", "description": "A simple horizontal list of navigation links with an active state underline.", "html": "" }, { "title": "Nav Strip with Base Rule", "description": "Using the `nav-strip--rule` modifier to add a continuous horizontal line beneath the navigation items.", "html": "" }, { "title": "Automatic (Markup Only) Nav Strip", "description": "The `nav-strip--auto` modifier applies styling to standard `ul/li/a` tags without requiring component-specific classes on every element.", "html": "
\n \n
" } ], "overlay-section": [ { "title": "Basic Overlay Section", "description": "A section with a full-bleed background and centered content box.", "html": "
\n
\n \"Background\n
\n
\n

Centered Content

\n

This content box is centered over the background image, providing a clear focal point for messaging.

\n Explore More\n
\n
" }, { "title": "Right-Aligned Overlay", "description": "Using the `overlay-section--right` modifier to position the content box on the right side of the section.", "html": "
\n
\n \"Background\n
\n
\n

Side Aligned

\n

Positioning content to the side can help prevent obscuring important details in the background image.

\n Contact Us\n
\n
" } ], "panel": [ { "title": "Standard Panel", "description": "A structured container with a distinct header, body, and footer.", "html": "
\n
\n

Account Overview

\n
\n
\n

Your subscription is active and will renew on November 15th. You have 3 active projects and 12 collaborators.

\n
\n
\n Manage Subscription\n
\n
" }, { "title": "Transparent Panel with Separators", "description": "Using the `panel--transparent` modifier for a seamless look, with `panel__row--separator-top` for visual division.", "html": "
\n
\n

System Status

\n
\n
\n

All systems are operational. No active incidents reported in the last 24 hours.

\n
\n
\n

Last checked: 5 minutes ago

\n
\n
" } ], "popover": [ { "title": "Basic Popover", "description": "A standard popover that appears near a trigger element, including a pointer arrow.", "html": "
\n \n
\n
\n

This is the content of the popover. It can contain text, links, or other small UI elements.

\n
\n \n
\n
" }, { "title": "Popover with Footer", "description": "Using the `popover__footer` element to add actions or metadata at the bottom.", "html": "
\n \n
\n
Options
\n
\n
    \n
  • Notification Settings
    • \n
  • Privacy Controls
    • \n
\n
\n
\n Learn More\n
\n \n
\n
" }, { "title": "Tooltip Modifier", "description": "The `popover--tooltip` modifier creates a smaller, non-interactive overlay typically used for labels.", "html": "
\n \n
\n
\n Helpful hint about this action\n
\n \n
\n
" } ], "progress-bar": [ { "title": "Basic Progress Bar", "description": "A standard progress bar with a label and percentage value.", "html": "
\n
\n System Update\n 65%\n
\n
\n
\n
\n
" }, { "title": "Indeterminate Loader", "description": "An animated bar for states where progress is unknown, using the `progress-bar--indeterminate` modifier.", "html": "
\n
\n
\n
\n
" }, { "title": "Semantic Status Bars", "description": "Using status modifiers like `progress-bar--success` and `progress-bar--danger`.", "html": "
\n
Setup Complete
\n
\n
\n
\n
\n
\n
Storage Low
\n
\n
\n
\n
" } ], "progress-circle": [ { "title": "Basic Donut Chart", "description": "A circular progress indicator using an SVG donut chart structure.", "html": "
\n
\n \n \n \n \n \n 65%\n
\n
" }, { "title": "Pie Chart Variant", "description": "Using the `progress-circle--pie` modifier to create a solid circular progress indicator.", "html": "
\n
\n \n \n \n \n \n 40%\n
\n
" }, { "title": "Small Progress Circle", "description": "Using the `progress-circle--small` modifier for space-constrained layouts.", "html": "
\n
\n \n \n \n \n \n
\n
85% Complete
\n
" } ], "pull-quote": [ { "title": "Standard Pull Quote", "description": "A centered pull quote with an optional author image, name, and title.", "html": "
\n
\n

The best way to predict the future is to create it. Design systems provide the foundation for that creation.

\n
\n
\n
\n
\n
\n \"Jane\n
\n
\n
\n Jane Doe\n Principal Design Architect\n
\n
" } ], "rail": [ { "title": "Basic Rail", "description": "A flexible horizontal container with the last item pushed to the right using `rail__item--pull`.", "html": "
\n
\n

Section Title

\n
\n
Active
\n
\n \n
\n
" }, { "title": "Justified Toolbar", "description": "Using the `rail--justified` modifier to space items out across the full width.", "html": "
\n
\n Showing 1-10 of 124 results\n
\n
\n
\n \n \n
\n
\n
" }, { "title": "Rail with Separator", "description": "Using the `rail__item--separator` modifier to add a vertical divider before an item.", "html": "
\n
Account Settings
\n
Security
\n
\n Log Out\n
\n
" } ], "ratio-box": [ { "title": "Default Ratio (4/3)", "description": "A standard 4/3 aspect ratio box, useful for traditional photography or balanced content.", "html": "
\n \"4/3\n
" }, { "title": "Widescreen Ratio (16/9)", "description": "Using the `ratio-box--16x9` modifier for video content or wide banners.", "html": "
\n \"16/9\n
" } ], "rule": [ { "title": "Basic Horizontal Rule", "description": "A standard horizontal line used to separate sections of content.", "html": "

Content above the rule.

\n
\n

Content below the rule.

" }, { "title": "Short Accent Rule", "description": "Using the `rule--short` modifier to create a small, decorative line often used under headings.", "html": "

Section Title

\n
\n

A brief introduction to the section follows the decorative short rule.

" }, { "title": "Large Margin Rule", "description": "A rule with increased vertical spacing using the `rule--margin-large` modifier.", "html": "
\n

This rule creates significant visual separation between major content blocks.

" } ], "skeleton": [ { "title": "Skeleton Text", "description": "Placeholder lines for text content during loading.", "html": "
\n
\n
\n
\n
\n
" }, { "title": "Skeleton Media", "description": "A placeholder for images or video assets.", "html": "
\n
\n πŸ–ΌοΈ\n
\n
" }, { "title": "Composite Skeleton (Card)", "description": "Combining different skeleton elements to represent a complex UI component.", "html": "
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
" } ], "slider": [ { "title": "Image Slider", "description": "A standard carousel for cycling through images.", "html": "
\n
\n \n
\n \n \n
\n
\n
\n
" } ], "sticky-list": [ { "title": "Sticky Header List", "description": "A list where the header stays sticky as the user scrolls through the individual items.", "html": "
\n

Process Steps

\n \n
" } ], "tabs": [ { "title": "Horizontal Tabs", "description": "A standard tabbed interface with labels positioned horizontally above the content.", "html": "
\n
\n \n \n \n
\n
\n

This is the general information about the product or service. It covers the core value propositions and high-level features.

\n
\n \n \n
" }, { "title": "Vertical Tabs", "description": "Using the `tabs--vertical` modifier to place tab labels in a sidebar layout on larger screens.", "html": "
\n
\n \n \n \n
\n
\n

Manage your personal information, profile picture, and contact details.

\n
\n \n \n
" } ], "tag": [ { "title": "Basic Tag", "description": "A small label for categorization or status identification.", "html": "Standard Tag\nOutline Tag" }, { "title": "Semantic Status Tags", "description": "Using status modifiers like `tag--success` and `tag--danger`.", "html": "Verified\nAction Required" }, { "title": "Counter Tag", "description": "Using the `tag--counter` modifier to display numerical values, often for notifications or counts.", "html": "5\n124" } ], "tagged": [ { "title": "Tagged Icon Button", "description": "Positioning a notification counter tag over an icon button.", "html": "" }, { "title": "Tagged Text Button", "description": "Positioning a tag over a standard text-based button.", "html": "" } ], "tile-grid": [ { "title": "Basic Tile Grid (Reflowable)", "description": "A grid of tiles that automatically reflows to fit as many items as possible based on a preferred minimum width.", "html": "
\n
Tile 1
\n
Tile 2
\n
Tile 3
\n
Tile 4
\n
Tile 5
\n
" }, { "title": "Static Column Grid", "description": "Using the `tile-grid--static` modifier to enforce a specific number of columns that adapt per breakpoint (e.g., 2 on small, 3 on medium).", "html": "
\n
Static 1
\n
Static 2
\n
Static 3
\n
Static 4
\n
" } ], "wysiwyg": [ { "title": "WYSIWYG Content", "description": "Automatically applies standard styling to raw HTML elements (headings, lists, links) within a container.", "html": "
\n

Main Topic

\n

This is a paragraph with a link inside it. The styling is automatically handled by the `.wysiwyg` class.

\n \n

Sub-section

\n

Headings are also automatically sized according to the typography configuration.

\n
" } ] }, "configuration": { "layout": { "description": "SCSS Configuration for layout. To override these defaults, use the set mixin: `@include ulu.component-layout-set(( \"property\": \"value\" ));`", "properties": [ { "name": "margin", "type": "Number", "description": "Common margin for site", "default": "2rem" }, { "name": "max-width", "type": "Number", "description": "Common max-width for site", "default": "90rem" }, { "name": "z-index-above", "type": "Number", "description": "Common z-index, below sticky", "default": "1000" }, { "name": "z-index-fixed", "type": "Number", "description": "Common z-index, above everything", "default": "100" }, { "name": "z-index-sticky", "type": "Number", "description": "Common z-index for sticky or stuck items", "default": "450" } ] }, "typography": { "description": "SCSS Configuration for typography. To override these defaults, use the set mixin: `@include ulu.component-typography-set(( \"property\": \"value\" ));`", "properties": [ { "name": "letter-spacing-uppercase", "type": "Dimension", "default": "0.04em" }, { "name": "margin-bottom", "type": "Number", "description": "Default margin for typography (like paragraphs)", "default": "1em" }, { "name": "margin-top", "type": "Number", "description": "Default margin for typography (like paragraphs)", "default": "null" }, { "name": "headline-margin-top", "type": "Number", "description": "Default margin for typography headlines in $sizes", "default": "1.5em" }, { "name": "responsive-change", "type": "Number", "description": "Amount to scale typography by browser's width (use viewport units)", "default": "0.05vw" }, { "name": "scale-steps", "type": "Number", "default": "5" }, { "name": "size-ratio", "type": "Number", "description": "Font size scale when using preset sizes, ratio mixin)", "default": "1.8" }, { "name": "size-line-height-ratio", "type": "Number", "description": "Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable", "default": "0.97" }, { "name": "font-family", "type": "Number", "description": "Default font family", "default": "(ui-sans-serif, \"Open Sans\", Helvetica, Arial, sans-serif)" }, { "name": "font-family-monospace", "type": "Number", "description": "Base font-family for monospace", "default": "(Menlo, Consolas, Monaco, monospace)" }, { "name": "font-family-sans", "type": "CssValue", "default": "(ui-sans-serif, \"Open Sans\", Helvetica, Arial, sans-serif)" }, { "name": "font-family-serif", "type": "CssValue", "default": "(Cambria, Georgia, serif" }, { "name": "font-size", "type": "Number", "description": "Default font size (use pixels, converted, is used for rem base)", "default": "16px" }, { "name": "font-weight", "type": "CssValue", "default": "inherit" }, { "name": "font-weight-bold", "type": "CssValue", "default": "bold" }, { "name": "font-weight-light", "type": "CssValue", "default": "300" }, { "name": "font-weight-normal", "type": "CssValue", "default": "normal" }, { "name": "font-weight-semibold", "type": "CssValue", "default": "600" }, { "name": "line-height", "type": "Number", "description": "Default line height", "default": "1.5" }, { "name": "line-height-dense", "type": "Number", "description": "Default dense line height", "default": "1.3" }, { "name": "line-height-densest", "type": "Number", "default": "1.1" }, { "name": "line-height-spaced", "type": "Number", "default": "1.75" }, { "name": "space-size", "type": "CssUnit", "description": "The size of a space for the site's typography (used when creating faux spaces, like for .flow-inline utility)", "default": "0.38em" } ] }, "units": { "description": "SCSS Configuration for units. To override these defaults, use the set mixin: `@include ulu.component-units-set(( \"property\": \"value\" ));`", "properties": [ { "name": "default", "type": "Number", "description": "Base unit of measure", "default": "1rem" }, { "name": "large", "type": "Number", "default": "1rem * 2" }, { "name": "large-x", "type": "Number", "default": "1rem * 3" }, { "name": "large-xx", "type": "Number", "default": "1rem * 4" }, { "name": "small", "type": "Number", "default": "1rem * 0.75" }, { "name": "small-x", "type": "Number", "default": "1rem * 0.5" } ] }, "elements": { "description": "SCSS Configuration for elements. To override these defaults, use the set mixin: `@include ulu.component-elements-set(( \"property\": \"value\" ));`", "properties": [ { "name": "details-animation", "type": "CssValue", "description": "Animation for the details element when toggled.", "default": "(UluFadeInDown 350ms ease-in-out)" }, { "name": "link", "type": "Boolean", "description": "Enables link styling.", "default": "true" }, { "name": "link-hover", "type": "Boolean", "description": "Enables link hover and focus styling.", "default": "true" }, { "name": "link-visited", "type": "Boolean", "description": "Enables visited link styling.", "default": "true" } ] }, "root": { "description": "SCSS Configuration for root. To override these defaults, use the set mixin: `@include ulu.component-root-set(( \"property\": \"value\" ));`", "properties": [ { "name": "sticky-offset-top", "type": "String", "description": "Total top offset for sticky positioning. Accounts for the primary header and any required breathing room.", "default": "cssvar.add(cssvar.use-ulu(\"header-height\"), cssvar.use-ulu(\"sticky-margin\"))" }, { "name": "sticky-offset-bottom", "type": "Dimension", "description": "Bottom offset for sticky positioning. Useful when accounting for fixed footers or mobile navigation bars.", "default": "0px" }, { "name": "sticky-margin", "type": "Dimension", "description": "Desired visual space between a sticky element and the bottom of the header.", "default": "0px" }, { "name": "header-height", "type": "Dimension", "description": "The physical rendered height of the site's fixed/sticky header.", "default": "0px" }, { "name": "fullscreen-height", "type": "String", "description": "Utility height representing the visible viewport space below the header.", "default": "cssvar.subtract(100dvh, cssvar.use-ulu(\"header-height\"))" }, { "name": "fullscreen-height-sticky", "type": "String", "description": "Utility height representing the safe scrollable area between all sticky layout boundaries.", "default": "cssvar.subtract(100dvh, cssvar.use-ulu(\"sticky-offset-top\"), cssvar.use-ulu(\"sticky-offset-bottom\"))" } ] }, "themes": { "description": "SCSS Configuration for themes. To override these defaults, use the set mixin: `@include ulu.component-themes-set(( \"property\": \"value\" ));`", "properties": [ { "name": "default", "type": "String", "description": "The theme key output to :root", "default": "\"light\"" }, { "name": "color-schemes", "type": "Map", "description": "Maps theme names to their corresponding valid CSS color-scheme value (e.g. (\"high-contrast\": \"dark\")). Note: If a theme name is literally \"light\" or \"dark\", it does not need to be mapped here.", "default": "()" }, { "name": "inverses", "type": "Map", "description": "Maps theme names to their opposite theme name (e.g. (\"light\": \"dark\", \"dark\": \"light\")). Used to output the .theme-inverse utility.", "default": "()" } ] }, "accordion": { "description": "SCSS Configuration for accordion. To override these defaults, use the set mixin: `@include ulu.component-accordion-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "This is the background color of the accordion before it is expanded.", "default": "background" }, { "name": "background-color-open", "type": "Color", "description": "This is the background color of the accordion when it is expanded. This will change the background color of the accordion's summary as well as the details.", "default": "white" }, { "name": "border-color", "type": "String", "description": "The color of the accordion border.", "default": "\"rule-light\"" }, { "name": "border-radius", "type": "Boolean|Number", "description": "This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.", "default": "true" }, { "name": "border-width", "type": "Dimension", "description": "The width of the borders of the accordions.", "default": "1px" }, { "name": "box-shadow", "type": "CssValue", "description": "Adds a box shadow to accordion container.", "default": "none" }, { "name": "margin", "type": "Dimension", "description": "This is the margin above and below the accordion. Multiple Accordions will stack. See margin-between below.", "default": "(1.5em 0)" }, { "name": "margin-between", "type": "Dimension", "description": "This adds a margin between adjacent accordions. By default, accordions do not have any net margin between each other.", "default": "0" }, { "name": "padding-x", "type": "Dimension", "description": "Singular value for the left and right padding.", "default": "1.5em" }, { "name": "padding-y", "type": "Dimension", "description": "Singular value for the top and bottom padding.", "default": "1.5em" }, { "name": "icon-background-color", "type": "Color", "description": "The background color of the icon.", "default": "transparent" }, { "name": "icon-background-color-hover", "type": "Color", "description": "The background color of the icon when hovered or focused.", "default": "transparent" }, { "name": "icon-border-radius", "type": "Number", "description": "The border-radius of the icon.", "default": "50%" }, { "name": "icon-color", "type": "String", "description": "Color of the icon. This uses color.scss, so the value of this option should be a color variable from color.scss.", "default": "link" }, { "name": "icon-color-hover", "type": "String", "description": "Color of the icon when hovered or focused on. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link-hover" }, { "name": "icon-font-size", "type": "Dimension", "description": "The font-size of the icon.", "default": "1em" }, { "name": "icon-margin", "type": "Dimension", "description": "The margin to the left of the icon.", "default": "1em" }, { "name": "icon-size", "type": "Dimension", "description": "The size of the icon. Used as the base in the flex property.", "default": "auto" }, { "name": "icon-stroke-width", "type": "Dimension", "description": "The stroke width of the icon.", "default": "0.15em" }, { "name": "summary-background-color", "type": "Color", "description": "The background color for the summary (toggle button) of the accordion.", "default": "#f6f6f6" }, { "name": "summary-background-color-hover", "type": "Color", "description": "The background color for the summary (toggle button) of the accordion when hovered.", "default": "null" }, { "name": "summary-color", "type": "Color", "description": "The color of the text in the accordion summary.", "default": "null" }, { "name": "summary-color-hover", "type": "Color", "description": "The color of the text in the accordion summary when hovering or focusing on it.", "default": "null" }, { "name": "summary-line-height", "type": "Dimension", "description": "Adjusts the line height of the summary element.", "default": "null" }, { "name": "summary-padding-y", "type": "Dimension", "description": "The vertical padding of the summary.", "default": "1em" }, { "name": "summary-type-size", "type": "String|Boolean", "description": "The typography size of the text in the accordion summary. Can be a boolean to disable.", "default": "\"large\"" }, { "name": "summary-border-enabled", "type": "Boolean", "description": "Whether the summary has a border when the accordion is open.", "default": "true" }, { "name": "summary-border-color", "type": "Color", "description": "The color of the summary border.", "default": "rule-light" }, { "name": "summary-border-width", "type": "Dimension", "description": "The width of the summary border.", "default": "1px" }, { "name": "transparent-content-padding", "type": "Dimension", "description": "The padding of the content area for transparent accordions.", "default": "(0.25em 0)" }, { "name": "borderless-margin-between", "type": "Dimension", "description": "Margin between accordions when using no-border modifier.", "default": "0.5em" }, { "name": "active-selector", "type": "String", "description": "The selector used for the active state of a non-
accordion.", "default": "'.is-active'" } ] }, "adaptive-spacing": { "description": "SCSS Configuration for adaptive-spacing. To override these defaults, use the set mixin: `@include ulu.component-adaptive-spacing-set(( \"property\": \"value\" ));`", "properties": [ { "name": "outputMargin", "type": "Boolean", "description": "Toggles the output of margin classes.", "default": "false" }, { "name": "outputPadding", "type": "Boolean", "description": "This is the background color of the accordion before it is expanded.", "default": "true" }, { "name": "outputX", "type": "Boolean", "description": "This is the background color of the accordion before it is expanded.", "default": "true" }, { "name": "outputY", "type": "Boolean", "description": "This is the background color of the accordion before it is expanded.", "default": "true" }, { "name": "selectorX", "type": "Boolean", "description": "This is the background color of the accordion before it is expanded.", "default": "\"sides\"" }, { "name": "selectorY", "type": "Boolean", "description": "This is the background color of the accordion before it is expanded.", "default": "\"ends\"" } ] }, "badge": { "description": "SCSS Configuration for badge. To override these defaults, use the set mixin: `@include ulu.component-badge-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "Background color (if no image)", "default": "gray" }, { "name": "background-color-hover", "type": "Color", "description": "Optional background color for hover when using badge--clickable modifier", "default": "null" }, { "name": "border-radius", "type": "Number", "description": "Border radius of badge", "default": "50%" }, { "name": "color", "type": "Color", "description": "Type color", "default": "black" }, { "name": "color-hover", "type": "Color", "description": "Optional color for hover when using badge--clickable modifier", "default": "null" }, { "name": "box-shadow", "type": "CssValue", "description": "Optional box-shadow", "default": "null" }, { "name": "box-shadow-hover", "type": "CssValue", "description": "Optional box-shadow for hover when using badge--clickable modifier", "default": "null" }, { "name": "font-size", "type": "Number", "description": "Font size (basic ie. 1.3rem) for badge", "default": "1.3rem" }, { "name": "font-weight", "type": "Keyword", "description": "Font weight", "default": "bold" }, { "name": "font-family", "type": "String", "description": "Specify font family, defaults to typography font-family-sans", "default": "true" }, { "name": "width", "type": "Number", "description": "Width of badge (default size)", "default": "10rem" }, { "name": "transition-duration", "type": "Time", "description": "Transition duration amount for transitioned properties", "default": "110ms" }, { "name": "hover-scale", "type": "Number", "description": "Scale of badge (if clickable) on hover (enlarges badge)", "default": "1.2" }, { "name": "sizes", "type": "List", "description": "List of other sizes (large by default), each size is a map of (width, font-size)", "default": "Object" } ] }, "badge-stack": { "description": "SCSS Configuration for badge-stack. To override these defaults, use the set mixin: `@include ulu.component-badge-stack-set(( \"property\": \"value\" ));`", "properties": [ { "name": "width", "type": "Dimension", "description": "Width of the badge stack", "default": "10rem" }, { "name": "overlap", "type": "Dimension", "description": "Right margin for stacked items", "default": "-5px" }, { "name": "border-width", "type": "Dimension", "description": "Border width for stacked items", "default": "3px" } ] }, "basic-hero": { "description": "SCSS Configuration for basic-hero. To override these defaults, use the set mixin: `@include ulu.component-basic-hero-set(( \"property\": \"value\" ));`", "properties": [ { "name": "text-align", "type": "CssValue", "description": "Alignment of text within hero.", "default": "center" }, { "name": "background-color", "type": "Color", "description": "Background color of the hero", "default": "\"color-hero-background\"" } ] }, "breadcrumb": { "description": "SCSS Configuration for breadcrumb. To override these defaults, use the set mixin: `@include ulu.component-breadcrumb-set(( \"property\": \"value\" ));`", "properties": [ { "name": "margin", "type": "List", "description": "Margin for component", "default": "(0 0 1.25em 0)" }, { "name": "row-gap", "type": "CssUnit", "description": "Gap when breadcrumbs wrap", "default": "0.35em" }, { "name": "color", "type": "Color", "description": "Base color (links inherit this)", "default": "\"type-tertiary\"" }, { "name": "color-hover", "type": "Color", "description": "Color for link hover", "default": "\"link-hover\"" }, { "name": "line-height", "type": "CssUnit", "description": "Line height, defaults to typography line-height-densest", "default": "true" }, { "name": "item-max-width", "type": "CssUnit", "description": "Max length of item text", "default": "15em" }, { "name": "separator-color", "type": "Color", "description": "Optional color to apply to separator", "default": "null" }, { "name": "separator-opacity", "type": "Number", "description": "Optional opacity for separator", "default": "0.7" }, { "name": "separator-margin", "type": "List", "description": "Separator margin", "default": "(0 0.5em)" } ] }, "button": { "description": "SCSS Configuration for button. To override these defaults, use the set mixin: `@include ulu.component-button-set(( \"property\": \"value\" ));`", "properties": [ { "name": "active-selector", "type": "String", "description": "The selector that determines if a button is active", "default": "\"&.is-active\"" }, { "name": "box-shadow", "type": "CssValue", "description": "Specify box shadow for default button. Default true will fallback to element \"box-shadow\"", "default": "true" }, { "name": "line-height", "type": "Number", "description": "Line height for button", "default": "1.1" }, { "name": "letter-spacing", "type": "Dimension", "default": "0.02em" }, { "name": "margin", "type": "Dimension", "description": "Margin for buttons, usually left margin is omitted so buttons can flow inline and make space between them and the next element inline", "default": "(0.45em 0.5em 0.45em 0)" }, { "name": "min-width", "type": "Dimension", "description": "The smallest width for all buttons", "default": "9rem" }, { "name": "padding", "type": "Dimension", "description": "Button inner padding value, pass space separated list", "default": "(0.75em 1.5em)" }, { "name": "white-space", "type": "CssValue", "description": "Adjust button line wrapping, by default line's are not wrapped", "default": "nowrap" }, { "name": "gap", "type": "Dimension", "description": "Gap to use between items within the button", "default": "0.5em" }, { "name": "border-color", "type": "String", "description": "The border color for the button, usually if there is no border we set this to match the background color so if a button with no borders is adjacent a style that has borders the heights will match.", "default": "\"control-border\"" }, { "name": "border-color-hover", "type": "String", "description": "Color of border when button is hovered", "default": "\"control-border-hover\"" }, { "name": "border-color-active", "type": "String", "description": "Color of border when a button has active class", "default": "\"control-border-active\"" }, { "name": "border-radius", "type": "Dimension", "description": "Border Radius for button", "default": "2rem" }, { "name": "border-width", "type": "Dimension", "description": "Width of button border", "default": "1px" }, { "name": "background-color", "type": "String", "description": "Background color of button", "default": "\"control-background\"" }, { "name": "background-color-hover", "type": "String", "description": "Background color of button when hovered", "default": "\"control-background-hover\"" }, { "name": "background-color-active", "type": "String", "description": "Background color of button when active", "default": "\"control-background-active\"" }, { "name": "color", "type": "String", "description": "Text color of button", "default": "\"control\"" }, { "name": "color-hover", "type": "String", "description": "Text color of button when hovered", "default": "\"control-hover\"" }, { "name": "color-active", "type": "String", "description": "Text color of button when active", "default": "\"control-active\"" }, { "name": "font-family", "type": "CssValue", "description": "Font family for button", "default": "inherit" }, { "name": "font-weight", "type": "CssValue", "description": "Font weight for button", "default": "bold" }, { "name": "font-size", "type": "String", "description": "Font size for button, can be omitted if it should inherit, sizes can also work with utility type size classes", "default": "\"base\"" }, { "name": "icon-size", "type": "Dimension", "description": "The size of a button when used with an icon", "default": "2.5rem" }, { "name": "icon-font-size", "type": "Dimension", "description": "The font size for the icon when a button is an icon button", "default": "1.38rem" }, { "name": "icon-border-radius", "type": "Dimension", "description": "The border radius of a icon button (defaults to 50% circle)", "default": "50%" }, { "name": "text-shadow", "type": "CssValue", "description": "Text shadow for button", "default": "none" }, { "name": "text-transform", "type": "CssValue", "description": "Text transform for button", "default": "none" }, { "name": "text-decoration", "type": "CssValue", "description": "Text decoration of button", "default": "none" }, { "name": "transition-enabled", "type": "Boolean", "description": "Whether or not to enable transitions on button properties like background-color, color, border color as they change state", "default": "true" }, { "name": "transition-duration", "type": "Time", "description": "The duration of the button's transition if enabled", "default": "200ms" }, { "name": "transition-properties", "type": "List", "description": "The properties to transition if `transition-enabled`", "default": "(border-color, background-color, color, box-shadow)" } ] }, "button-group": { "description": "SCSS Configuration for button-group. To override these defaults, use the set mixin: `@include ulu.component-button-group-set(( \"property\": \"value\" ));`", "properties": [ { "name": "gap", "type": "Dimension", "description": "Gap between buttons", "default": "0.45em" }, { "name": "gap-joined", "type": "Dimension", "description": "When using --joined modifier optional gap, if 0 the buttons borders will overlap, joined-gap is useful if your buttons don't have borders", "default": "0" }, { "name": "no-min-width", "type": "Boolean", "description": "Buttons within the button group should have no min width", "default": "true" } ] }, "button-verbose": { "description": "SCSS Configuration for button-verbose. To override these defaults, use the set mixin: `@include ulu.component-button-verbose-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "Background color for the button.", "default": "white" }, { "name": "background-color-hover", "type": "Color", "description": "Background color for the button when hovered or focused.", "default": "link" }, { "name": "border-radius", "type": "String", "description": "Border radius of the button.", "default": "border-radius" }, { "name": "border-width", "type": "String", "description": "Border width (or set to true to inherit button border width default)", "default": "null" }, { "name": "border-color", "type": "String", "description": "Border color (or set to true to inherit button border width default)", "default": "null" }, { "name": "box-shadow", "type": "CssValue", "description": "Box shadow for the button. If set to true, uses default box-shadow.", "default": "true" }, { "name": "box-shadow-hover", "type": "CssValue", "description": "Box shadow for the button when hovered or focused. If set to true, uses default box-shadow-hover.", "default": "true" }, { "name": "color", "type": "String", "description": "Text color for the button.", "default": "type" }, { "name": "color-hover", "type": "String", "description": "Text color for the button when hovered or focused.", "default": "type" }, { "name": "icon-color", "type": "Color", "description": "Color for button icons.", "default": "gray" }, { "name": "icon-color-hover", "type": "Color", "description": "Optional color for icon when hovered", "default": "null" }, { "name": "icon-font-size", "type": "Dimension", "description": "Font size for the button.", "default": "1.25rem" }, { "name": "line-height", "type": "Number", "description": "Line height for button text.", "default": "1.2" }, { "name": "margin", "type": "Dimension", "description": "Margin for the button.", "default": "1em" }, { "name": "margin-inline", "type": "Dimension", "description": "Margin for the button when using the inline modifier.", "default": "0.75em" }, { "name": "min-width", "type": "Dimension", "description": "Min-width of the button.", "default": "20rem" }, { "name": "padding-x", "type": "Dimension", "description": "Horizontal padding of the button.", "default": "0.65em" }, { "name": "padding-y", "type": "Dimension", "description": "Vertical padding of the button.", "default": "1em" }, { "name": "title-color", "type": "String", "description": "Color of the title of the button.", "default": "link" }, { "name": "title-color-hover", "type": "String", "description": "Color of the title of the button when hovered or focused.", "default": "link-hover" }, { "name": "title-margin", "type": "Dimension", "description": "Margin for the button's title.", "default": "0.5em" }, { "name": "cap", "type": "Boolean", "description": "Enable left cap style", "default": "false" }, { "name": "cap-side", "type": "Color", "description": "The side that gets the cap", "default": "\"left\"" }, { "name": "cap-match-radius", "type": "Number", "description": "The cap should have be rounded to match the parent's border radius", "default": "true" }, { "name": "cap-options", "type": "Map", "description": "The options for cap (see element.cap for options)" }, { "name": "cap-options-hover", "type": "Map", "description": "The options for cap when hovered" } ] }, "callout": { "description": "SCSS Configuration for callout. To override these defaults, use the set mixin: `@include ulu.component-callout-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "The background color of the Callout.", "default": "rgb(240, 240, 240)" }, { "name": "border-color", "type": "Color", "description": "The border color of the Callout.", "default": "\"rule-light\"" }, { "name": "border-radius", "type": "Boolean", "description": "The border radius of the Callout.", "default": "true" }, { "name": "border-width", "type": "Dimension", "description": "The border width of the Callout.", "default": "1px" }, { "name": "box-shadow", "type": "CssValue", "description": "The box-shadow of the Callout.", "default": "none" }, { "name": "caps-disabled", "type": "Boolean", "description": "If set will not output any cap styles for both base and styles", "default": "false" }, { "name": "cap", "type": "Boolean", "description": "Toggles the use of caps on default callout", "default": "false" }, { "name": "cap-side", "type": "Boolean", "description": "The side that gets the cap", "default": "\"left\"" }, { "name": "cap-match-radius", "type": "Number", "description": "The cap should have be rounded to match the parent's border radius", "default": "true" }, { "name": "cap-options", "type": "Map", "description": "The options for cap (see element.cap for options)" }, { "name": "margin", "type": "Dimension", "description": "Bottom margin of the Callout.", "default": "2rem" }, { "name": "padding", "type": "Dimension", "description": "Padding of the Callout.", "default": "1.5rem" } ] }, "captioned-figure": { "description": "SCSS Configuration for captioned-figure. To override these defaults, use the set mixin: `@include ulu.component-captioned-figure-set(( \"property\": \"value\" ));`", "properties": [ { "name": "text-alignment-matches", "type": "Boolean", "description": "Toggles matching alignment.", "default": "false" }, { "name": "text-alignment-matches-center-only", "type": "Boolean", "description": "Toggles matching alignment, but only if center.", "default": "true" }, { "name": "background-color", "type": "Color", "description": "Background color of the component.", "default": "white" }, { "name": "box-shadow", "type": "CssValue", "description": "Box shadow the captioned figure.", "default": "true" }, { "name": "margin-bottom", "type": "Dimension", "description": "Bottom margin of the captioned figure.", "default": "true" }, { "name": "line-height", "type": "Number", "description": "Line height of the captioned figure caption.", "default": "true" }, { "name": "caption-padding", "type": "Dimension", "description": "Padding of the captioned figure caption.", "default": "0.5em" }, { "name": "color", "type": "Color", "description": "Font color of the captioned figure caption.", "default": "null" }, { "name": "type-size", "type": "String", "description": "Font size of the captioned figure caption.", "default": "\"small\"" }, { "name": "caption-max-width", "type": "Dimension", "description": "Max width of the captioned figure caption.", "default": "min(100%, 15em)" }, { "name": "caption-background-color", "type": "Color", "description": "background color of the captioned figure caption.", "default": "rgba(255,255,255,0.7)" }, { "name": "caption-backdrop-filter", "type": "CssValue", "description": "Filter of the backdrop of the captioned figure.", "default": "blur(2px)" }, { "name": "traditional-caption-color", "type": "Color", "description": "Traditional style for font color.", "default": "null" }, { "name": "traditional-caption-background-color", "type": "Color", "description": "Traditional style for caption background color.", "default": "transparent" }, { "name": "traditional-caption-padding", "type": "Dimension", "description": "Traditional style for caption padding.", "default": "0.5em" }, { "name": "traditional-caption-max-width", "type": "Dimension", "description": "Traditional style for caption max width.", "default": "35em" }, { "name": "traditional-caption-text-align", "type": "CssValue", "description": "Traditional style for caption text-align.", "default": "right" } ] }, "card": { "description": "SCSS Configuration for card. To override these defaults, use the set mixin: `@include ulu.component-card-set(( \"property\": \"value\" ));`", "properties": [ { "name": "padding", "type": "Dimension", "description": "The common padding", "default": "2rem" }, { "name": "margin-y", "type": "Dimension", "description": "Top and bottom margin for the card.", "default": "3rem" }, { "name": "max-width", "type": "Dimension", "description": "The max-width of the card.", "default": "28rem" }, { "name": "line-height", "type": "Dimension", "description": "The line-height of the card.", "default": "null" }, { "name": "body-min-height", "type": "Dimension", "description": "the min-height of the card body.", "default": "10rem" }, { "name": "color", "type": "Color", "description": "The type color of the card.", "default": "\"type\"" }, { "name": "color-hover", "type": "Color", "description": "The type color of the card when hovered or focused.", "default": "null" }, { "name": "background-color", "type": "Color", "description": "The background color of the card.", "default": "white" }, { "name": "background-color-hover", "type": "Color", "description": "The background color of the card when hovered or focused.", "default": "rgb(242, 244, 246)" }, { "name": "border-radius", "type": "Dimension", "description": "The border radius of the card.", "default": "5px" }, { "name": "border-width", "type": "CssValue", "description": "The card border width", "default": "1px" }, { "name": "border-color", "type": "Color", "description": "The card border color", "default": "#ccc" }, { "name": "border-hover-width", "type": "Dimension", "description": "The card border width when hovered or focused.", "default": "2px" }, { "name": "border-hover-color", "type": "Color", "description": "The card border color when hovered or focused.", "default": "#278cca" }, { "name": "box-shadow", "type": "CssValue", "description": "The box-shadow for the card.", "default": "null" }, { "name": "box-shadow-hover", "type": "CssValue", "description": "The box-shadow for the card when hovered or focused.", "default": "null" }, { "name": "box-shadow-interactive-only", "type": "Boolean", "description": "If true, the box shadow will only be applied to cards that are interactive (clickable).", "default": "false" }, { "name": "transition-enabled", "type": "Boolean", "description": "Enable or disable transition for card.", "default": "true" }, { "name": "transition-duration", "type": "Time", "description": "The animation duration for the card animation.", "default": "200ms" }, { "name": "transition-timing-function", "type": "CssValue", "description": "The timing function for the card animation.", "default": "ease-in-out" }, { "name": "transition-properties", "type": "List", "description": "The properties for the card animation.", "default": "(border-color, background-color, color, box-shadow, transform, outline-color, outline-width)" }, { "name": "clickable-card-selector", "type": "String", "description": "The selector for proxy-click.js to find the card and implement the clickable card script.", "default": "data-ulu-proxy-click-init" }, { "name": "clickable-card-interact-selector", "type": "String", "description": "The selectors for the cards being interacted with.", "default": "&:hover, &:focus-within" }, { "name": "title-color", "type": "Color", "description": "The type color of the title.", "default": "null" }, { "name": "title-color-hover", "type": "Color", "description": "The type color of the title (if link/button) when hovered or focused", "default": "null" }, { "name": "title-margin", "type": "Dimension", "description": "The margin for the title.", "default": "1rem" }, { "name": "title-font-weight", "type": "CssValue", "description": "The font weight for the title.", "default": "bold" }, { "name": "image-within-border", "type": "Boolean", "description": "If false, the image will bleed to the edges of the card, sitting under the border.", "default": "true" }, { "name": "image-aspect-ratio", "type": "Number", "description": "The aspect ratio of the image.", "default": "5/3" }, { "name": "image-background-color", "type": "Color", "description": "The background color behind the image.", "default": "rgb(238, 238, 238)" }, { "name": "image-margin", "type": "Dimension", "description": "The margin for the image", "default": "null" }, { "name": "image-border", "type": "Dimension", "description": "Optional border for the image.", "default": "null" }, { "name": "image-transform-hover", "type": "CssValue", "description": "Animation for the image when hovered or focused.", "default": "null" }, { "name": "image-filter-hover", "type": "CssValue", "description": "Filter for the image when hovered or focused.", "default": "null" }, { "name": "image-transition-enabled", "type": "Boolean", "description": "Enable or disable the image transition.", "default": "true" }, { "name": "image-transition-duration", "type": "Time", "description": "The duration of the image transition.", "default": "350ms" }, { "name": "image-transition-timing-function", "type": "CssValue", "description": "The timing function for the image transition.", "default": "ease-in-out" }, { "name": "image-transition-properties", "type": "List", "description": "The properties for the image transitions.", "default": "(transform, filter, background-color)" }, { "name": "image-fit-padding", "type": "Dimension", "description": "Padding on inside of image when using image fit modifier", "default": "1rem" }, { "name": "image-fit-filter", "type": "CssValue", "description": "Filter to use on image when using image fit modifier", "default": "drop-shadow(0 0px 8px rgba(0, 0, 0, 0.3))" }, { "name": "image-icon-max-width", "type": "Dimension", "description": "Max width for image when using the modifier on the .card__image--icon", "default": "8rem" }, { "name": "footer-padding-y", "type": "Dimension", "description": "The top and bottom padding for the footer.", "default": "0.25rem" }, { "name": "footer-min-height", "type": "Dimension", "description": "The min height for the footer", "default": "2.5rem" }, { "name": "footer-justify", "type": "CssValue", "description": "Flex alignment of footer items (on end by default)", "default": "flex-end" }, { "name": "footer-inline-padding", "type": "Dimension", "description": "The padding for the footer when using the 'footer-inline' modifier.", "default": "0.5rem" }, { "name": "footer-background-color", "type": "Color", "description": "The background color of the footer.", "default": "null" }, { "name": "horizontal-enabled", "type": "String", "description": "Enable the output of horizontal related layout modifiers", "default": "false" }, { "name": "horizontal-persist-enabled", "type": "String", "description": "Enable the output of horizontal-persist related layout modifiers", "default": "false" }, { "name": "horizontal-breakpoint", "type": "String", "description": "The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.", "default": "small" }, { "name": "horizontal-min-height", "type": "Dimension", "description": "Minimum height when horizontal", "default": "20rem" }, { "name": "horizontal-max-width", "type": "Dimension", "description": "Maximum width when horizontal", "default": "80rem" }, { "name": "horizontal-image-width", "type": "CssValue", "description": "The width of the image area when using the 'horizontal' modifier.", "default": "min(33%, 20rem)" }, { "name": "horizontal-main-max-width", "type": "Dimension", "description": "The max-width of the main content area when using the 'horizontal' modifier.", "default": "40rem" }, { "name": "horizontal-aside-width", "type": "CssValue", "description": "The width of the aside content area when using the 'horizontal' modifier.", "default": "40%" }, { "name": "aside-rule", "type": "Boolean", "description": "Whether or not to have a rule separating body and aside", "default": "true" }, { "name": "aside-rule-width", "type": "Dimension", "description": "Size of rule", "default": "1px" }, { "name": "aside-rule-color", "type": "String", "description": "Color of rule", "default": "\"rule-light\"" }, { "name": "aside-background-color", "type": "Color", "description": "Color of aside background color", "default": "null" }, { "name": "overlay-enabled", "type": "Color", "description": "Enable the output of overlay modifier styles", "default": "false" }, { "name": "overlay-aspect-ratio", "type": "Number", "description": "The aspect ratio of the card when using the 'overlay' modifier.", "default": "4/3" }, { "name": "overlay-color", "type": "Color", "description": "The type color of the card when using card--overlay.", "default": "white" }, { "name": "overlay-title-color", "type": "Color", "description": "The color of the title when using the 'overlay' modifier.", "default": "null" }, { "name": "overlay-title-color-hover", "type": "Color", "description": "The type color of the card title when hovered or focused and when using card--overlay.", "default": "rgb(79, 175, 230)" }, { "name": "overlay-background-color", "type": "Color", "description": "The background color for the text box when using card--overlay.", "default": "rgba(0, 0, 0, 0.6)" }, { "name": "overlay-background-color-hover", "type": "Color", "description": "The background color of the overlay when hovered or focused.", "default": "red" }, { "name": "overlay-footer-background-color", "type": "Color", "description": "The background color of the footer when using the 'overlay' modifier. Defaults to 'overlay-background-color'.", "default": "null" }, { "name": "overlay-shading", "type": "Boolean", "description": "Whether to apply a gradient shading to the overlay to improve text readability.", "default": "true" }, { "name": "overlay-shading-height", "type": "Dimension", "description": "The height of the gradient shading on the overlay.", "default": "4rem" }, { "name": "overlay-body-padding-y", "type": "Dimension", "description": "The top and bottom padding of the body content when using the 'overlay' modifier.", "default": "1rem" } ] }, "card-grid": { "description": "SCSS Configuration for card-grid. To override these defaults, use the set mixin: `@include ulu.component-card-grid-set(( \"property\": \"value\" ));`", "properties": [ { "name": "gap", "type": "Dimension", "description": "The grid gap of the card-grid.", "default": "1.5rem" }, { "name": "min-width", "type": "Dimension", "description": "The min-width for the implicit grid columns.", "default": "20rem" }, { "name": "compact-gap", "type": "Dimension", "description": "The grid gap of the card-grid--compact.", "default": "0.75rem" }, { "name": "compact-min-width", "type": "Dimension", "description": "The min-width for the implicit grid columns of the card-grid--compact.", "default": "14rem" } ] }, "counter-list": { "description": "SCSS Configuration for counter-list. To override these defaults, use the set mixin: `@include ulu.component-counter-list-set(( \"property\": \"value\" ));`", "properties": [ { "name": "margin", "type": "List|CssUnit", "description": "The top and bottom margin of the list.", "default": "(2rem 0)" }, { "name": "item-margin", "type": "List|CssUnit", "description": "The margin applied to each list item.", "default": "((0 0 1rem 0))" }, { "name": "align-items", "type": "Keyword", "description": "How to align the counter (flexbox align-items values)", "default": "baseline" }, { "name": "counter-width", "type": "CssUnit", "description": "The width and height (if height is falsy)", "default": "2.4em" }, { "name": "counter-height", "type": "CssUnit", "description": "The height (optional)", "default": "null" }, { "name": "counter-gap", "type": "CssUnit", "description": "The gap between the counter and the list item content.", "default": "1em" }, { "name": "counter-style", "type": "String", "description": "The list-style-type used for the counter.", "default": "numeric" }, { "name": "counter-border-radius", "type": "Keyword|Percentage", "description": "The border-radius of the counter element.", "default": "50%" }, { "name": "counter-font-size", "type": "CssUnit", "description": "The font-size of the counter text.", "default": "1.2em" }, { "name": "counter-color", "type": "Color|String", "description": "The text color of the counter. Accepts color names or hex codes.", "default": "white" }, { "name": "counter-background-color", "type": "Color|String", "description": "The background color of the counter. Refers to a color in the color module.", "default": "\"accent\"" }, { "name": "extra-selector", "type": "String", "description": "Additional selectors to include table styling.", "default": "null" } ] }, "css-icon": { "description": "SCSS Configuration for css-icon. To override these defaults, use the set mixin: `@include ulu.component-css-icon-set(( \"property\": \"value\" ));`", "properties": [ { "name": "active-selector", "type": "String", "description": "> summary &, &.is-active] The active selector for css-icon.", "default": "details[open" }, { "name": "color", "type": "Color", "description": "The color of the css-icon.", "default": "currentColor" }, { "name": "font-family", "type": "CssValue", "default": "('Courier New', monospace)" }, { "name": "margin", "type": "CssValue", "description": "The icon's margin", "default": "(0 0.15em)" }, { "name": "size", "type": "Dimension", "description": "The width, height and font size of the css-icon.", "default": "1.1em" }, { "name": "stroke-border-radius", "type": "Dimension", "description": "The rounding of the strokes for css-icon.", "default": "1px" }, { "name": "stroke-width", "type": "Dimension", "description": "The stroke width of the css-icon.", "default": "0.15em" }, { "name": "drag-gap-multiplier", "type": "Dimension", "description": "Multiplier used to adjust the space between drag-x/drag-y icons (used for all stroke sizes)", "default": "0.75" }, { "name": "text-offset", "type": "Dimension", "description": "When using an icon with text, adds a margin to match the text height.", "default": "0.05em" }, { "name": "text-size", "type": "Dimension", "description": "font-size of the icon when using text.", "default": "1em" }, { "name": "vertical-align", "type": "Dimension", "description": "Vertical-align for css-icon", "default": "-0.2em" }, { "name": "transition-duration", "type": "Time", "description": "The duration length for the transition.", "default": "200ms" }, { "name": "transition-timing-function", "type": "CssValue", "description": "The timing function for the transition.", "default": "ease-in" }, { "name": "stroke-sizes", "type": "Map", "description": "Modifiers to adjust stroke sizes for the icons.", "default": "Map" } ] }, "data-grid": { "description": "SCSS Configuration for data-grid. To override these defaults, use the set mixin: `@include ulu.component-data-grid-set(( \"property\": \"value\" ));`", "properties": [ { "name": "attribute", "type": "String", "description": "Default attribute to use for grid mixin.", "default": "data-grid" }, { "name": "attribute-container", "type": "String", "description": "Default attribute to use for grid's container.", "default": "data-grid-container" }, { "name": "columns", "type": "Number", "description": "Default for grid mixin.", "default": "12" }, { "name": "gutter", "type": "Number", "description": "Default gutter for grid mixin.", "default": "14px" }, { "name": "position-class-column-first", "type": "String", "description": "Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)", "default": "position-column-first" }, { "name": "position-class-column-last", "type": "String", "description": "See definition above", "default": "position-column-last" }, { "name": "position-class-row-first", "type": "String", "description": "See definition above", "default": "position-row-first" }, { "name": "position-class-row-last", "type": "String", "description": "See definition above", "default": "position-row-last" }, { "name": "sticky-bottom", "type": "Dimension", "description": "When a column is sticky bottom this is the value for the sticky offset, set to --ulu-sticky-offset-bottom by default", "default": "var(--ulu-sticky-offset-bottom, 0)" }, { "name": "sticky-top", "type": "Dimension", "description": "When a column is sticky top this is the value for the sticky offset, set to --ulu-sticky-offset-top by default", "default": "var(--ulu-sticky-offset-top, 0)" }, { "name": "rule-color", "type": "String", "description": "The color of the rule. This uses color.scss, so the value of this option should be a color variable from color.scss.", "default": "\"rule\"" }, { "name": "rule-size", "type": "Dimension", "description": "The width of the rule", "default": "1px" }, { "name": "extra-breakpoints", "type": "Map", "description": "Default extra breakpoints for grid mixin", "default": "Map" }, { "name": "extra-gutter-scales", "type": "Map", "description": "Extra options for gutter scales.", "default": "Map" }, { "name": "extra-rule-styles", "type": "Map", "description": "Extra options for rule styles.", "default": "Map" } ] }, "data-list": { "description": "SCSS Configuration for data-list. To override these defaults, use the set mixin: `@include ulu.component-data-list-set(( \"property\": \"value\" ));`", "properties": [ { "name": "grid-template-columns", "type": "String", "description": "The default master grid columns.", "default": "1fr" }, { "name": "grid-template-columns-stacked", "type": "String", "description": "The stacked grid columns (default is single column stack).", "default": "100%" }, { "name": "row-gap", "type": "Dimension", "description": "The space between list items (rows). Forced to 0 if overlap-borders is true.", "default": "0" }, { "name": "column-gap", "type": "Dimension", "description": "The space between columns.", "default": "1rem" }, { "name": "column-gap-stacked", "type": "Dimension", "description": "The space between stacked elements when stacked within an item.", "default": "0.5rem" }, { "name": "group-gap-stacked", "type": "Dimension", "description": "The space between stacked elements inside a nested column when stacked.", "default": "0.25rem" }, { "name": "padding", "type": "Dimension", "description": "The padding inside list items.", "default": "1rem clamp(0.65rem, 3vw, 1.5rem)," }, { "name": "overlap-borders", "type": "Boolean", "description": "If true, applies a negative top margin to items to prevent double-thick borders between touching rows, and forces row-gap to 0.", "default": "true" }, { "name": "border-width", "type": "Dimension", "description": "The border width for the list items.", "default": "1px" }, { "name": "border-color", "type": "String", "description": "The border color key for the list items.", "default": "\"rule-light\"" }, { "name": "border-radius", "type": "Dimension", "description": "The border radius for the list items.", "default": "null" }, { "name": "box-shadow", "type": "CssValue", "description": "The box shadow for the list items.", "default": "null" }, { "name": "background-color", "type": "Color", "description": "The default background color for items.", "default": "transparent" }, { "name": "background-color-even", "type": "Color", "description": "The background color for even-numbered items (for striping).", "default": "null" }, { "name": "background-color-hover", "type": "Color", "description": "The background color for items on hover.", "default": "null" }, { "name": "clickable-background-color-hover", "type": "Color", "description": "The background color for clickable items on hover.", "default": "#e8e8e8" }, { "name": "clickable-border-color-hover", "type": "String", "description": "The border color for interactive (clickable) items on hover/focus.", "default": "\"control-border-hover\"" }, { "name": "stacked-breakpoint", "type": "String", "description": "The breakpoint below which groups stack. Defaults to the global default breakpoint via function fallback.", "default": "true" }, { "name": "span-count", "type": "Number", "description": "The number of span modifiers to create, increase if needed, (ie. data-list__column--span-2, --span-3, ...)", "default": "4" }, { "name": "header-font-weight", "type": "CssValue", "description": "The font weight for the header row text.", "default": "bold" }, { "name": "header-border-bottom-width", "type": "Dimension", "description": "The width for the bottom border of the header row.", "default": "2px" }, { "name": "header-border-bottom-color", "type": "String", "description": "The color key for the bottom border of the header row.", "default": "\"rule\"" } ] }, "data-table": { "description": "SCSS Configuration for data-table. To override these defaults, use the set mixin: `@include ulu.component-data-table-set(( \"property\": \"value\" ));`", "properties": [ { "name": "cell-padding", "type": "Dimension", "description": "Padding of the th and td elements.", "default": "(0.5em,)" }, { "name": "text-align", "type": "CssValue", "description": "Text align of the table.", "default": "left" }, { "name": "type-size", "type": "String", "description": "Font size of the table.", "default": "\"small\"" }, { "name": "vertical-align", "type": "CssValue", "description": "Vertical align for td/th", "default": "top" }, { "name": "background-color", "type": "Color", "description": "Background color of table container.", "default": "white" }, { "name": "header-background-color", "type": "Color", "description": "Background color of the the table header.", "default": "#f5f4f4" }, { "name": "body-background-color", "type": "Color", "description": "Background color of table body.", "default": "white" }, { "name": "footer-background-color", "type": "Color", "description": "Background color of table footer.", "default": "#f3f3f3" }, { "name": "color", "type": "Color", "description": "Font color of the table.", "default": "\"type-secondary\"" }, { "name": "header-color", "type": "Color", "description": "Font color for the table header.", "default": "\"headline\"" }, { "name": "footer-color", "type": "Color", "description": "Font color for the table footer.", "default": "null" }, { "name": "line-height", "type": "Number", "description": "Line height for the table.", "default": "true" }, { "name": "column-min-width", "type": "Dimension", "description": "Min-width of the th element.", "default": "6em" }, { "name": "first-column-large-min-width", "type": "Dimension", "description": "When using \"--large-first\" style, the min width of the first th element.", "default": "15em" }, { "name": "border-width", "type": "Dimension", "description": "Border width of the table.", "default": "1px" }, { "name": "border-color", "type": "Color", "description": "Border color for the table.", "default": "#dddddd" }, { "name": "striped-row-background-color", "type": "Color", "description": "Background color for even rows if using \"--striped\" styling.", "default": "#eeeeee" }, { "name": "muted-row-background-color", "type": "Color", "description": "Background color for odd rows if using \"--striped\" styling.", "default": "#ccc" }, { "name": "muted-row-border-color", "type": "Color", "description": "Border color for odd rows if using \"--striped\" styling.", "default": "null" }, { "name": "highlighted-row-background-color", "type": "Color", "description": "Background color row if using \"__row-highlighted\" styling.", "default": "#ccc" }, { "name": "highlighted-row-border-color", "type": "Color", "description": "Border color row if using \"__row-highlighted\" styling.", "default": "null" }, { "name": "large-header-cell-padding-y", "type": "Dimension", "description": "Vertical padding of header if using \"--large-header\" styling.", "default": "1em" }, { "name": "caption-type-size", "type": "String", "description": "Type size of table caption.", "default": "\"large\"" }, { "name": "caption-background-color", "type": "Color", "description": "Background color of table caption.", "default": "null" }, { "name": "caption-font-weight", "type": "CssValue", "description": "Font weight of caption.", "default": "bold" }, { "name": "caption-border-bottom", "type": "CssBalue", "description": "Bottom border of the caption.", "default": "null" }, { "name": "caption-margin", "type": "Dimension", "description": "Margin of the caption.", "default": "(0,)" }, { "name": "caption-padding", "type": "Dimension", "description": "Padding of the caption.", "default": "(0.65em 0)" }, { "name": "caption-text-align", "type": "CssValue", "description": "Text align of the caption.", "default": "left" }, { "name": "extra-selector", "type": "String", "description": "Additional selectors to include table styling.", "default": "\".wysiwyg table\"" } ] }, "definition-list": { "description": "SCSS Configuration for definition-list. To override these defaults, use the set mixin: `@include ulu.component-definition-list-set(( \"property\": \"value\" ));`", "properties": [ { "name": "term-font-weight", "type": "String", "description": "The font-weight of the dt element.", "default": "true" }, { "name": "term-color", "type": "String", "description": "Set a color for the term", "default": "null" }, { "name": "line-height", "type": "Dimension", "description": "The line-height of the definition list.", "default": "true" }, { "name": "item-margin", "type": "CssUnit", "description": "The spacing for each item.", "default": "0.75em" }, { "name": "separator", "type": "Boolean", "description": "Whether to show a separator between items.", "default": "true" }, { "name": "separator-border", "type": "Border", "description": "The border style for the separator.", "default": "true" }, { "name": "separator-padding", "type": "Dimension", "description": "The padding for the separator.", "default": "0.75em" }, { "name": "table-breakpoint", "type": "String", "description": "The breakpoint for the table layout.", "default": "medium" }, { "name": "table-template-columns", "type": "String", "description": "The grid-template-columns for the table layout.", "default": "(25% 75%)" }, { "name": "table-gap", "type": "Dimension", "description": "The gap for the table layout.", "default": "1rem" }, { "name": "inline-description-separator", "type": "String", "description": "The separator for multiple dd elements in inline layout.", "default": "\",\"" }, { "name": "inline-term-separator", "type": "String", "description": "The separator for dt elements in inline layout.", "default": "\":\"" } ] }, "flipcard": { "description": "SCSS Configuration for flipcard. To override these defaults, use the set mixin: `@include ulu.component-flipcard-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "Background color of the text-only flipcard front.", "default": "\"background\"" }, { "name": "background-color-image", "type": "Color", "description": "Background color of the image flipcard front.", "default": "\"accent\"" }, { "name": "image-opacity", "type": "Number", "description": "Opacity of the image to allow shading from the background color.", "default": "0.7" }, { "name": "background-color-back", "type": "Color", "description": "Background color on the back of the flipcard.", "default": "\"placeholder-background\"" }, { "name": "border-width", "type": "Dimension", "description": "Flipcard border width", "default": "1px" }, { "name": "border-color", "type": "Color", "description": "Flipcard border color", "default": "\"rule-light\"" }, { "name": "border-radius", "type": "Dimension", "description": "Border radius for flipcard.", "default": "6px" }, { "name": "border-color-hover", "type": "Color", "description": "border color when hovered.", "default": "\"rule\"" }, { "name": "border-width-focus", "type": "Dimension", "description": "Border width that shows when focused.", "default": "3px" }, { "name": "border-color-focus", "type": "Color", "description": "border color when focused", "default": "\"focus\"" }, { "name": "anim-duration", "type": "Time", "description": "Animation duration.", "default": "430ms" }, { "name": "anim-delay", "type": "Time", "description": "Animation delay.", "default": "200ms" }, { "name": "anim-front-close", "type": "String", "description": "Animation name for front close.", "default": "\"FlipcardFrontClose\"" }, { "name": "anim-front-open", "type": "String", "description": "Animation name for front open.", "default": "\"FlipcardFrontOpen\"" }, { "name": "anim-back-open", "type": "String", "description": "Animation name for back open.", "default": "\"FlipcardBackOpen\"" }, { "name": "anim-timing-function", "type": "CssValue", "description": "Animation timing function.", "default": "ease-out" }, { "name": "padding", "type": "Dimension", "description": "Padding for the flipcard.", "default": "1.5rem" }, { "name": "title-color", "type": "Color", "description": "Color of the front page text.", "default": "\"type\"" }, { "name": "title-color-hover", "type": "Color", "description": "Color of the front page text when hovered or focused.", "default": "\"link-hover\"" }, { "name": "icon-color", "type": "Color", "description": "Color of the icon.", "default": "\"type-secondary\"" }, { "name": "icon-color-hover", "type": "Color", "description": "Color of the icon when hovered or focused.", "default": "\"link-hover\"" }, { "name": "icon-color-image", "type": "Color", "description": "Color of the icon when using an image.", "default": "\"white\"" }, { "name": "icon-color-image-hover", "type": "Color", "description": "Color of the icon when using an image and hovered or focused.", "default": "\"white\"" }, { "name": "title-color-image", "type": "Color", "description": "Color of the front page text when using an image.", "default": "\"white\"" }, { "name": "title-color-image-hover", "type": "Color", "description": "Color of the front page text when using an image and hovered or focused.", "default": "\"white\"" }, { "name": "bottom-shadow", "type": "Boolean", "description": "Boolean that enables a bottom shadow to the image flipcard.", "default": "true" } ] }, "flipcard-grid": { "description": "SCSS Configuration for flipcard-grid. To override these defaults, use the set mixin: `@include ulu.component-flipcard-grid-set(( \"property\": \"value\" ));`", "properties": [ { "name": "gutter", "type": "Dimension", "description": "The gutter between grid items.", "default": "1rem" }, { "name": "grid-template-columns", "type": "CssValue", "description": "The size ratio of items in the grid.", "default": "1fr 1fr" } ] }, "form-theme": { "description": "SCSS Configuration for form-theme. To override these defaults, use the set mixin: `@include ulu.component-form-theme-set(( \"property\": \"value\" ));`", "properties": [ { "name": "color", "type": "CssValue", "description": "Color of the text of the form.", "default": "inherit" }, { "name": "color-placeholder", "type": "CssValue", "description": "Color for the placeholder text.", "default": "\"type-tertiary\"" }, { "name": "drupal", "type": "Boolean", "description": "Toggle if using drupal to include drupal specific styling.", "default": "false" }, { "name": "error-color", "type": "Color", "description": "Type color for errors.", "default": "\"danger\"" }, { "name": "error-highlight-color", "type": "Color", "description": "Outline color of error container.", "default": "rgb(251, 242, 242)" }, { "name": "error-selector", "type": "String", "description": "Class for error styling.", "default": "\".is-danger\"" }, { "name": "file-button-style", "type": "Map", "description": "@joe-check should this have a fallback", "default": "true" }, { "name": "font-weight-label", "type": "CssValue", "description": "Font weight of the labels.", "default": "bold" }, { "name": "font-weight-legend", "type": "CssValue", "description": "Font weight of the legend.", "default": "bold" }, { "name": "font-weight-placeholder", "type": "CssValue", "description": "Font weight of placeholder text.", "default": "normal" }, { "name": "font-weight-input", "type": "CssValue", "description": "Font weight of input text.", "default": "null" }, { "name": "font-weight-textarea", "type": "CssValue", "description": "Font weight of textarea text.", "default": "null" }, { "name": "font-weight-select", "type": "CssValue", "description": "Font weight of select text.", "default": "null" }, { "name": "input-border", "type": "CssValue", "description": "Border of the input.", "default": "element.get-rule-style()" }, { "name": "input-border-radius", "type": "Dimension", "description": "Border radius of the input.", "default": "0" }, { "name": "input-padding-x", "type": "Dimension", "description": "Horizontal padding of the input.", "default": "0.5em" }, { "name": "input-padding-y", "type": "Dimension", "description": "Vertical padding of the input.", "default": "0.25em" }, { "name": "input-min-width", "type": "Dimension", "description": "Min width of the input.", "default": "10em" }, { "name": "input-background-color", "type": "Color", "description": "Background color of the input.", "default": "white" }, { "name": "item-align-items", "type": "CssValue", "description": "Alignment for items inline.", "default": "flex-start" }, { "name": "item-border-radius", "type": "Dimension", "description": "Border radius for __item.", "default": "null" }, { "name": "item-highlight-width", "type": "Dimension", "description": "Width of the item box highlight.", "default": "6px" }, { "name": "item-margin-y", "type": "Dimension", "description": "Vertical margin for items.", "default": "0.75em" }, { "name": "required-color", "type": "Color", "description": "Color for required text.", "default": "\"danger\"" }, { "name": "text-input-margin-bottom", "type": "Dimension", "description": "Bottom margin for the label.", "default": "0.5em" }, { "name": "text-input-margin-top", "type": "Dimension", "description": "Top margin for the label.", "default": "1em" }, { "name": "warning-color", "type": "Color", "description": "The warning text color.", "default": "\"warning\"" }, { "name": "warning-highlight-color", "type": "Color", "description": "Outline color of the warning.", "default": "rgb(255, 249, 237)" }, { "name": "warning-selector", "type": "String", "description": "Selector for adding warning styles.", "default": "\".is-warning\"" }, { "name": "check-input-color", "type": "Color", "description": "@joe-check unused", "default": "currentColor" }, { "name": "check-input-size", "type": "Dimension", "description": "Size of input box.", "default": "1.15em" }, { "name": "check-input-touch-size", "type": "Dimension", "description": "Touchable size of the input box.", "default": "2em" }, { "name": "check-input-background-color", "type": "Color", "description": "Background color for the check input.", "default": "white" }, { "name": "check-input-background-color-checked", "type": "Color", "description": "Background color for the check input when checked.", "default": "white" }, { "name": "check-input-background-color-hover", "type": "Color", "description": "Background color for the check input when hovered or focused.", "default": "white" }, { "name": "check-input-background-color-indeterminate", "type": "Color", "description": "Background color for the indeterminate check input.", "default": "white" }, { "name": "check-input-border", "type": "Map", "description": "@joe-check check how this is called with a fallback in the styles mixin", "default": "null" }, { "name": "check-input-border-color-hover", "type": "Color", "description": "Check input border color.", "default": "null" }, { "name": "check-input-border-color-checked", "type": "Color", "description": "Check input border color when checked.", "default": "null" }, { "name": "check-input-border-color-indeterminate", "type": "Color", "description": "Indeterminate check input border color.", "default": "null" }, { "name": "check-input-border-color-focus", "type": "Color", "description": "Check input border color when hovered or focused.", "default": "null" }, { "name": "check-input-outline", "type": "CssValue", "description": "Check input outline.", "default": "null" }, { "name": "check-input-outline-hover", "type": "CssValue", "description": "Check input outline when hovered.", "default": "null" }, { "name": "check-input-outline-checked", "type": "CssValue", "description": "Check input outline when checked.", "default": "null" }, { "name": "check-input-outline-focus", "type": "CssValue", "description": "Check input outline when focused.", "default": "1px solid white" }, { "name": "check-input-touch-color-hover", "type": "Color", "description": "Check input background color when hovered.", "default": "#e8e8e8" }, { "name": "check-input-touch-color-focus", "type": "Color", "description": "Check input background color when focused.", "default": "null" }, { "name": "check-input-radio-size", "type": "Dimension", "description": "Radio border size.", "default": "0.3em" }, { "name": "check-input-checkmark-width", "type": "Dimension", "description": "Width of checkmark.", "default": "0.38em" }, { "name": "check-input-checkmark-height", "type": "Dimension", "description": "Height of checkmark.", "default": "0.68em" }, { "name": "check-input-checkmark-offset-y", "type": "Dimension", "description": "vertical offset of checkmark.", "default": "-0.2em" }, { "name": "check-input-checkmark-stroke-size", "type": "Dimension", "description": "stroke size of checkmark.", "default": "0.18em" }, { "name": "check-input-mark-color", "type": "Color", "description": "Check input color.", "default": "currentColor" }, { "name": "check-input-mark-color-hover", "type": "Color", "description": "Check input color when hovered.", "default": "null" }, { "name": "check-input-mark-color-focus", "type": "Color", "description": "Check input color when focused.", "default": "null" }, { "name": "check-input-mark-color-checked", "type": "Color", "description": "Check input color when checked.", "default": "null" }, { "name": "check-input-mark-color-indeterminate", "type": "Color", "description": "Check input color when indeterminate.", "default": "null" }, { "name": "check-input-disabled-opacity", "type": "Number", "description": "Opacity of the check input when disabled.", "default": "0.6" }, { "name": "check-input-border-radius", "type": "Dimension", "description": "Checkbox input border radius.", "default": "0" }, { "name": "description-color", "type": "Color", "description": "Color of help text.", "default": "false" }, { "name": "description-margin", "type": "CssValue", "description": "Margin for help text.", "default": "(0.25em 0)" }, { "name": "description-max-width", "type": "Dimension", "description": "Max width of help text.", "default": "25em" }, { "name": "description-line-height", "type": "Number", "description": "Line height for description element, defaults to typography line-height-dense", "default": "true" }, { "name": "fieldset-background", "type": "Color", "description": "Background color of fieldset element.", "default": "transparent" }, { "name": "fieldset-border", "type": "CssValue", "description": "Border for fieldset", "default": "none" }, { "name": "fieldset-margin-bottom", "type": "Dimension", "description": "Bottom margin for the fieldset element.", "default": "1rem" }, { "name": "fieldset-margin-top", "type": "Dimension", "description": "Bottom margin for the fieldset element.", "default": "1rem" }, { "name": "fieldset-padding", "type": "Dimension", "description": "Padding for the fieldset element.", "default": "0" }, { "name": "fieldset-margin-compact", "type": "Dimension", "description": "@joe-check unused", "default": "0" }, { "name": "fieldset-border-radius", "type": "Dimension", "description": "Border radius of the fieldset element.", "default": "0" }, { "name": "fieldset-legend-color", "type": "Color", "description": "Text color for the fieldset's label.", "default": "inherit" }, { "name": "fieldset-legend-border-bottom", "type": "Dimension", "description": "Bottom border color for the fieldset's label", "default": "null" }, { "name": "fieldset-legend-padding-bottom", "type": "Dimension", "description": "Bottom padding for the fieldset's label", "default": "null" }, { "name": "select-border-radius", "type": "Dimension", "description": "Border radius for the select element.", "default": "4px" }, { "name": "select-background-color", "type": "Color", "description": "Background color for the select element.", "default": "null" }, { "name": "select-border", "type": "CssValue", "description": "The border for the select element. Fallback to input border.", "default": "null" }, { "name": "select-padding-x", "type": "Dimension", "description": "Horizontal padding for the select element. Fallback to input-padding-x.", "default": "null" }, { "name": "select-padding-y", "type": "Dimension", "description": "Vertical padding for the select element. Fallback to input-padding-y.", "default": "null" }, { "name": "select-image", "type": "CssValue", "description": "Url for select element's background image.", "default": "null" }, { "name": "select-image-size", "type": "Dimension", "description": "Background size for the select image.", "default": "0.9em" }, { "name": "select-image-offset", "type": "Dimension", "description": "Offset for the select image.", "default": "0.7em" }, { "name": "select-image-margin", "type": "Dimension", "description": "select image margin.", "default": "0.65em" }, { "name": "inline-gap", "type": "Dimension", "description": "Gap between items that are inline like checkboxes", "default": "1em" } ] }, "graphic-text-group": { "description": "SCSS Configuration for graphic-text-group. To override these defaults, use the set mixin: `@include ulu.component-graphic-text-group-set(( \"property\": \"value\" ));`", "properties": [ { "name": "gap", "type": "CssUnit", "description": "The gap between graphic and text.", "default": "1rem" }, { "name": "gap-compact", "type": "CssUnit", "description": "The smaller gap applied when the compact modifier is used.", "default": "0.5rem" }, { "name": "margin", "type": "List", "description": "Margin applied to the group.", "default": "2em 0" }, { "name": "graphic-width", "type": "CssUnit", "description": "The default safe width for the graphic.", "default": "3.5rem" }, { "name": "rule-border", "type": "Border", "description": "The border style for the rules.", "default": "true" }, { "name": "rule-padding", "type": "CssUnit", "description": "The padding applied when using rules.", "default": "1rem" }, { "name": "wrap-breakpoint", "type": "String", "description": "The breakpoint name at which the layout wraps to a column.", "default": "\"small\"" }, { "name": "separator-border", "type": "Border", "description": "The border style for the separator between graphic and text.", "default": "true" }, { "name": "separator-gap", "type": "CssUnit", "description": "The gap when the separator modifier is used (typically smaller since there are two gaps around the separator).", "default": "0.5rem" } ] }, "headline-label": { "description": "SCSS Configuration for headline-label. To override these defaults, use the set mixin: `@include ulu.component-headline-label-set(( \"property\": \"value\" ));`", "properties": [ { "name": "color", "type": "Color", "description": "The text color of the headline label.", "default": "ulu.cssvar-use(\"color-accent\")" }, { "name": "margin-bottom", "type": "Dimension", "description": "The bottom margin of the headline label.", "default": "0.2em" }, { "name": "font-weight", "type": "String", "description": "The font weight of the headline label.", "default": "typography.get(\"font-weight-bold\")" }, { "name": "font-family", "type": "String", "description": "The font family of the headline label.", "default": "typography.get(\"font-family-sans\")" }, { "name": "line-height", "type": "Dimension|Number", "description": "The font family of the headline label.", "default": "typography.get(\"line-height-dense\")" }, { "name": "text-transform", "type": "String", "description": "The font family of the headline label.", "default": "null" }, { "name": "type-size", "type": "String", "description": "The typography size preset to use for the headline label (e.g., \"small\", \"medium\", \"large\"), Only uses the font-size value for size", "default": "\"small\"" } ] }, "hero": { "description": "SCSS Configuration for hero. To override these defaults, use the set mixin: `@include ulu.component-hero-set(( \"property\": \"value\" ));`", "properties": [ { "name": "extra-split-ratios", "type": "Map", "description": "A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content])", "default": "wide 70/30" }, { "name": "breakpoint", "type": "String", "description": "At what breakpoint the hero goes to small screen styling.", "default": "\"medium\"" }, { "name": "height", "type": "Dimension", "description": "Height of the hero.", "default": "var(--ulu-fullscreen-height)" }, { "name": "height-compact", "type": "Dimension", "description": "Height of the hero when using the \"--compact\" styling.", "default": "40vh" }, { "name": "graphic-height-stacked", "type": "Dimension", "description": "Height of the graphic.", "default": "60vh" }, { "name": "content-max-width", "type": "Dimension", "description": "Max width of the content.", "default": "40rem" }, { "name": "content-padding-top", "type": "Dimension", "description": "Top padding of the content.", "default": "3rem" }, { "name": "content-padding-bottom", "type": "Dimension", "description": "Bottom padding of the content.", "default": "3rem" }, { "name": "text-align", "type": "CssValue", "description": "Text align of the content.", "default": "center" } ] }, "image-grid": { "description": "SCSS Configuration for image-grid. To override these defaults, use the set mixin: `@include ulu.component-image-grid-set(( \"property\": \"value\" ));`", "properties": [ { "name": "breakpoint", "type": "String", "description": "Sets the min breakpoint for the grid to print. This uses breakpoint.scss, so the value of this option should be a breakpoint variable from breakpoint.scss.", "default": "\"small\"" }, { "name": "gap", "type": "Dimension", "description": "The gap between images in the grid.", "default": "3px" }, { "name": "min-width", "type": "Dimension", "description": "The min-width of the images in the grid.", "default": "math.div(100%, 3)" } ] }, "input-group": { "description": "SCSS Configuration for input-group. To override these defaults, use the set mixin: `@include ulu.component-input-group-set(( \"property\": \"value\" ));`", "properties": [ { "name": "gap", "type": "Dimension", "description": "Gap between items when not joined", "default": "0.5em" }, { "name": "border-radius", "type": "Dimension", "description": "Border radius for joined items (and cue when not joined). Defaults to form-theme input-border-radius", "default": "null" }, { "name": "item-min-width", "type": "Dimension", "description": "Minimum width for items (buttons, cues)", "default": "0" }, { "name": "item-padding-x", "type": "Dimension", "description": "Horizontal padding for cue items", "default": "0.75em" }, { "name": "item-padding-y", "type": "Dimension", "description": "Vertical padding for cue items. Defaults to button vertical padding.", "default": "null" }, { "name": "overlap-margin", "type": "Dimension", "description": "Negative margin for joined items. Defaults to form-theme border width.", "default": "null" }, { "name": "field-min-width", "type": "Dimension", "description": "Minimum width for the field item", "default": "0" }, { "name": "cue-background-color", "type": "Color", "description": "Background color for cue items", "default": "rgba(0,0,0,0.1)" }, { "name": "joined-button-radius-match", "type": "Color", "description": "Whether or not to use the 'border-radius' for input-group vs button's border-radius", "default": "true" } ] }, "list-inline": { "description": "SCSS Configuration for list-inline. To override these defaults, use the set mixin: `@include ulu.component-list-inline-set(( \"property\": \"value\" ));`", "properties": [ { "name": "rule-style", "type": "String", "description": "Name of element > rule style to use for divider/border", "default": "\"light\"" }, { "name": "margin-top", "type": "Dimension", "description": "Top margin of list.", "default": "0" }, { "name": "margin-bottom", "type": "Dimension", "description": "Bottom margin of list.", "default": "1em" }, { "name": "space-between", "type": "Dimension", "description": "Gap between item and dividers", "default": "1em" }, { "name": "space-between-large", "type": "Dimension", "description": "Gap between item and dividers when using large-gap modifier", "default": "1em" } ] }, "list-lines": { "description": "SCSS Configuration for list-lines. To override these defaults, use the set mixin: `@include ulu.component-list-lines-set(( \"property\": \"value\" ));`", "properties": [ { "name": "border-first", "type": "Boolean", "description": "If enabled, adds a top border to the first item in list-lines.", "default": "true" }, { "name": "border-last", "type": "Boolean", "description": "If enabled, adds a bottom border to the last item in list-lines.", "default": "true" }, { "name": "rule-style", "type": "String", "description": "Name of element > rule style to use for divider/border", "default": "\"light\"" }, { "name": "margin-bottom", "type": "Dimension", "description": "Bottom margin of list.", "default": "1em" }, { "name": "margin-top", "type": "Dimension", "description": "Top margin of list.", "default": "0" }, { "name": "padding-between", "type": "Dimension", "description": "Padding between items in list.", "default": "1em" }, { "name": "padding-between", "type": "Dimension", "description": "Padding between items in list when using dense modifier", "default": "1em" }, { "name": "line-height-dense", "type": "Dimension", "description": "Line height when list lines has dense modifier (defaults to typography line-height-dense)", "default": "true" } ] }, "menu-stack": { "description": "SCSS Configuration for menu-stack. To override these defaults, use the set mixin: `@include ulu.component-menu-stack-set(( \"property\": \"value\" ));`", "properties": [ { "name": "nested-indent", "type": "Dimension", "description": "The indentation of child lists within the menu-stack.", "default": "0.5em" }, { "name": "rule-margin", "type": "Dimension", "description": "Sets the padding and margin of the rule.", "default": "0.5em" }, { "name": "rule-style", "type": "String", "description": "Determines the styling of the rule. Uses the rule.scss component.", "default": "default" }, { "name": "toggle-icon-rotate", "type": "Number", "description": "Set a value to rotate the collapsible item toggle icon rotation when open (ie. 90deg)", "default": "false" }, { "name": "label-color", "type": "Color", "description": "The type color of the label.", "default": "null" }, { "name": "label-margin", "type": "Dimension", "description": "The margin of the label.", "default": "0.5em" }, { "name": "label-text-transform", "type": "CssValue", "description": "Transforms the label text.", "default": "uppercase" }, { "name": "label-type-size", "type": "CssValue", "description": "Adjusts the type size of the label. Only uses font-size from type size.", "default": "false" }, { "name": "label-font-weight", "type": "CssValue", "description": "Adjust label font weight", "default": "bold" }, { "name": "label-line-height", "type": "CssValue", "description": "Adjust the label line-height, defaults to typography line-height-dense", "default": "true" }, { "name": "link-active-selectors", "type": "list", "description": "')] Selectors to apply active styling.", "default": "(.is-active, '[aria-current=page" }, { "name": "link-background-color", "type": "Color", "description": "The background color of the menu-stack toggle.", "default": "transparent" }, { "name": "link-background-color-active", "type": "Color", "description": "The background color of the menu-stack toggle when active.", "default": "rgb(219, 219, 219)" }, { "name": "link-background-color-hover", "type": "Color", "description": "The background color of the menu-stack toggle when hovered or focused.", "default": "rgb(219, 219, 219)" }, { "name": "link-border-radius", "type": "Dimension", "description": "The border radius of the menu-stack toggle. If set to true, will use the border radius from the button component.", "default": "true" }, { "name": "link-color", "type": "String", "description": "The type color of the menu-stack toggle. This uses color.scss, so the value of this option should be a color variable from color.scss.", "default": "link" }, { "name": "link-color-active", "type": "Color", "description": "The type color of the menu-stack toggle when active.", "default": "black" }, { "name": "link-color-hover", "type": "String", "description": "The type color of the menu-stack toggle when hovered or focused. This uses color.scss, so the value of this option should be a color variable from color.scss.", "default": "link-hover" }, { "name": "link-font-weight", "type": "CssValue", "description": "The font weight of the menu-stack toggle.", "default": "null" }, { "name": "link-line-height", "type": "CssValue", "description": "Adjust the link line-height, defaults to typography line-height-dense", "default": "true" }, { "name": "link-icon-margin", "type": "Dimension", "description": "Adds a right margin to the icon.", "default": "0.65em" }, { "name": "link-icon-width", "type": "Dimension", "description": "The width of the icon.", "default": "1em" }, { "name": "link-icon-font-size", "type": "Dimension", "description": "Set the font-size for the icon (not set by default)", "default": "null" }, { "name": "link-margin", "type": "Dimension", "description": "Margin for the menu-stack toggle.", "default": "0.2em" }, { "name": "link-padding-x", "type": "Dimension", "description": "Horizontal padding for menu-stack toggle.", "default": "1em" }, { "name": "link-padding-y", "type": "Dimension", "description": "Vertical padding for menu-stack toggle.", "default": "0.35em" }, { "name": "link-separated-margin", "type": "Boolean", "description": "Enables a margin between the items in the menu-stack.", "default": "false" }, { "name": "link-separated-rule-style", "type": "Boolean", "description": "Enables a rule between the items in the menu-stack.", "default": "false" }, { "name": "selectable-input-width", "type": "Dimension", "description": "The width of the checkbox/radio input", "default": "3em" }, { "name": "selectable-input-top", "type": "Dimension", "description": "To fine tune the y/top value for absolutely positioned input, if you pass null/falsey it will use the padding which isn't always perfect since this is setup to not be centered when wrapping lines in label", "default": "0.73em" }, { "name": "selectable-input-font-size", "type": "Dimension", "description": "Optional to set a specific font-size on the input", "default": "null" }, { "name": "link-transition-duration", "type": "Duration", "description": "The duration of the link state transition.", "default": "200ms" }, { "name": "link-transition-properties", "type": "List", "description": "The properties to transition on link state change.", "default": "(border-color, background-color, color, box-shadow)" }, { "name": "title-color", "type": "CssValue", "description": "Color to use for the title modifier", "default": "null" }, { "name": "title-font-weight", "type": "CssValue", "description": "The font weight for the title modifier.", "default": "bold" }, { "name": "title-separator-enabled", "type": "Boolean", "description": "Enables a separator rule below the title item.", "default": "true" }, { "name": "title-separator-color", "type": "Color", "description": "The color of the title separator rule.", "default": "rule" }, { "name": "title-rule-style", "type": "String", "description": "The rule style to use for the title separator.", "default": "light" }, { "name": "title-separated-margin", "type": "Boolean", "description": "Use specific margin for title separated items.", "default": "false" }, { "name": "columns-gap", "type": "Dimension", "description": "The gap between columns in a columns menu stack.", "default": "2rem" }, { "name": "columns-min-width", "type": "Dimension", "description": "The minimum width of a column in a columns menu stack.", "default": "18rem" }, { "name": "compact-link-padding-x", "type": "Dimension", "description": "The links horizontal padding when using the compact option.", "default": "0.75em" }, { "name": "compact-link-padding-y", "type": "Dimension", "description": "The links vertical padding when using the compact option.", "default": "0.25em" }, { "name": "compact-link-margin", "type": "Dimension", "description": "Margin between items when compact", "default": "0.2em" }, { "name": "compact-link-border-radius", "type": "Dimension", "description": "Unless set will use the normal link border radius", "default": "null" }, { "name": "compact-selectable-input-width", "type": "Dimension", "description": "The width of the checkbox/radio input (when compact modifier)", "default": "2em" }, { "name": "compact-selectable-input-font-size", "type": "Dimension", "description": "Optional compact input font-size", "default": "null" }, { "name": "compact-selectable-input-top", "type": "Dimension", "description": "Optional y/top for input", "default": "null" }, { "name": "stacked-link-padding-x", "type": "Dimension", "description": "The links horizontal padding when using the stacked option.", "default": "0.4em" }, { "name": "stacked-link-padding-y", "type": "Dimension", "description": "The links vertical padding when using the stacked option.", "default": "0.4em" }, { "name": "stacked-link-icon-margin", "type": "Dimension", "description": "Margin between icon and text when stacked.", "default": "0.35em" }, { "name": "stacked-link-border-radius", "type": "Dimension", "description": "Border radius for stacked style of links, defaults to element \"border-radius-small\"", "default": "true" }, { "name": "stacked-link-font-weight", "type": "Dimension", "description": "Optional font-weight for stacked style", "default": "true" } ] }, "modal": { "description": "SCSS Configuration for modal. To override these defaults, use the set mixin: `@include ulu.component-modal-set(( \"property\": \"value\" ));`", "properties": [ { "name": "backdrop-blur", "type": "CssValue", "description": "Determines the blur of the backdrop.", "default": "4px" }, { "name": "backdrop-color", "type": "Color", "description": "The unblurred background color outside the modal. If set to true, will use the element.scss property for backdrop-color.", "default": "true" }, { "name": "background-color", "type": "Color", "description": "The background color of the modal.", "default": "white" }, { "name": "body-padding", "type": "Dimension", "description": "The padding of the body content.", "default": "1rem" }, { "name": "border-radius", "type": "CssValue", "description": "The border radius of the modal. If set to true, will use the element.scss property for border-radius-large.", "default": "true" }, { "name": "box-shadow", "type": "CssValue", "description": "Determines the box-shadow of the modal. If set to true, will use the element.scss property for backdrop-color.", "default": "true" }, { "name": "height", "type": "Dimension", "description": "The min-height of the modal.", "default": "340px" }, { "name": "height-no-header", "type": "Dimension", "description": "The min-height of the modal.", "default": "100px" }, { "name": "width", "type": "Dimension", "description": "The width of the Modal", "default": "60rem" }, { "name": "min-width", "type": "Dimension", "description": "The min-width of the Modal (for resizing, etc)", "default": "300px" }, { "name": "animation-duration", "type": "Time", "description": "Animation duration for the modal opening.", "default": "300ms" }, { "name": "animation-duration-exit", "type": "Time", "description": "Animation duration for the modal closing.", "default": "150ms" }, { "name": "animation-timing-function", "type": "CssValue", "description": "The animation timing menu of the modal.", "default": "cubic-bezier(0, 0, .2, 1)" }, { "name": "close-background-color", "type": "Color", "description": "Background color for the modal close icon.", "default": "null" }, { "name": "close-background-color-hover", "type": "Close", "description": "Background color for the modal close icon when hovered or focused.", "default": "null" }, { "name": "close-border-color", "type": "Color", "description": "Border color of the modal__close element. Overrides button border color if using button styling. Fallback to close-background-color.", "default": "null" }, { "name": "close-border-color-hover", "type": "Color", "description": "Border color hover of the modal__close element. Overrides button border color if using button styling. Fallback to close-background-color-hover.", "default": "null" }, { "name": "close-box-shadow", "type": "Color", "description": "Box-shadow of the modal__close element. Overrides button border color if using button styling. Defaults to remove box-shadow styling.", "default": "none" }, { "name": "close-color", "type": "Color", "description": "Type color for the modal close icon.", "default": "null" }, { "name": "close-color-hover", "type": "Color", "description": "Type color for the modal close icon when hovered or focused.", "default": "null" }, { "name": "close-margin", "type": "Dimension", "description": "The margin for the modal close icon.", "default": "0.5rem" }, { "name": "header-background-color", "type": "Color", "description": "Background color for the header.", "default": "black" }, { "name": "header-border-bottom", "type": "CssValue", "description": "Bottom-border on the modal header.", "default": "none" }, { "name": "header-color", "type": "Color", "description": "Type color of the header.", "default": "white" }, { "name": "header-padding", "type": "Dimension", "description": "The padding of the modal header.", "default": "1rem" }, { "name": "footer-padding", "type": "Dimension", "description": "The padding of the modal footer.", "default": "(0.5rem 1rem)" }, { "name": "footer-background-color", "type": "Color", "description": "The background color of the footer", "default": "(0.5rem 1rem)" }, { "name": "footer-border-top", "type": "Color", "description": "The border between body and footer", "default": "(0.5rem 1rem)" }, { "name": "footer-text-align", "type": "CssValue", "description": "Text alignment for footer", "default": "right" }, { "name": "resizer-background-color", "type": "Color", "description": "The background color of the resizer.", "default": "rgb(221, 221, 221)" }, { "name": "resizer-background-color-hover", "type": "Color", "description": "The background color of the resizer when hovered or focused.", "default": "rgb(192, 192, 192)" }, { "name": "resizer-color", "type": "Color", "description": "The type color of the resizer.", "default": "rgb(99, 99, 99)" }, { "name": "resizer-color-hover", "type": "Color", "description": "The type color of the resizer when hovered or focused.", "default": "black" }, { "name": "resizer-width", "type": "Dimension", "description": "The width of the resizer.", "default": "1rem" }, { "name": "resizer-center-size", "type": "Dimension", "description": "The width/height of the resizer (in bottom right corner) used when position center with resize enabled", "default": "1.65rem" }, { "name": "title-color", "type": "Color", "description": "Type color of the title.", "default": "white" }, { "name": "title-font-weight", "type": "CssValue", "description": "Font weight of the title.", "default": "bold" }, { "name": "title-font-family", "type": "CssValue", "description": "Font family for title", "default": "null" }, { "name": "title-icon-margin", "type": "Dimension", "description": "The margin of the title icon", "default": "0.5em" }, { "name": "title-size", "type": "String", "description": "The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.", "default": "large" }, { "name": "title-text-transform", "type": "CssValue", "description": "Transform option for the title.", "default": "null" }, { "name": "sizes", "type": "Map", "description": "Size options to enable unique stylings.", "default": "Map" }, { "name": "breakpoint", "type": "String", "description": "Optional breakpoint for modals (used for adaptive things like fullscreen-mobile), if set to true will fallback to breakpoint default", "default": "true" }, { "name": "frame-aspect-ratio", "type": "String", "description": "Default aspect ratio for single embedded items in frame-ratio layout", "default": "list.slash(16, 9)" }, { "name": "frame-fill-min-height", "type": "String", "description": "Default minimum height for single embedded items in frame-fill layout", "default": "65vh" } ] }, "nav-strip": { "description": "SCSS Configuration for nav-strip. To override these defaults, use the set mixin: `@include ulu.component-nav-strip-set(( \"property\": \"value\" ));`", "properties": [ { "name": "activeSelector", "type": "String", "description": "Selector that portrays active status.", "default": ".is-active" }, { "name": "color", "type": "Color", "description": "Type color for the nav-strip.", "default": "\"type-tertiary\"" }, { "name": "color-active", "type": "Color", "description": "Type color for the nav-strip when active.", "default": "\"type\"" }, { "name": "color-hover", "type": "Color", "description": "Type color for the nav-strip when hovered or focused.", "default": "\"type-hover\"" }, { "name": "font-weight", "type": "CssValue", "description": "Font weight of nav-strip.", "default": "null" }, { "name": "margin-between", "type": "Dimension", "description": "Margin between nav-strip items.", "default": "2.25em" }, { "name": "nowrap", "type": "Boolean", "description": "Disables the word wrap.", "default": "true" }, { "name": "padding-x", "type": "Dimension", "description": "Horizontal padding for the nav-strip links.", "default": "0" }, { "name": "padding-y", "type": "Dimension", "description": "Vertical padding for the nav-strip links.", "default": "0.3em" }, { "name": "padding-y-ruled", "type": "Dimension", "description": "Vertical padding for the nav-strip links when using nav-strip--rule.", "default": "null" }, { "name": "underline-color", "type": "Color", "description": "Underline color when link is active.", "default": "\"selected\"" }, { "name": "underline-size", "type": "Dimension", "description": "Size of the underline.", "default": "3px" }, { "name": "underline-color-hover", "type": "Color", "description": "Color of the underline when hovered or focused.", "default": "\"rule\"" }, { "name": "rule-color", "type": "String", "description": "Rule color. Uses rule.scss so the value of this options should be a variable from rule.scss.", "default": "\"rule-light\"" }, { "name": "rule-size", "type": "Dimension", "description": "Size of the nav-strip rule.", "default": "3px" }, { "name": "rule-offset", "type": "Dimension", "description": "Offset the rule for the nav-strip.", "default": "-3px" } ] }, "overlay-section": { "description": "SCSS Configuration for overlay-section. To override these defaults, use the set mixin: `@include ulu.component-overlay-section-set(( \"property\": \"value\" ));`", "properties": [ { "name": "content-background-color", "type": "Color", "description": "The background color of the content.", "default": "white" }, { "name": "content-border", "type": "CssValue", "description": "The border of the content", "default": "1px solid rgb(227, 227, 227)" }, { "name": "content-padding", "type": "Dimension", "description": "The padding of the content.", "default": "2.5rem" }, { "name": "content-width", "type": "Dimension", "description": "The width of the content.", "default": "34rem" }, { "name": "min-height", "type": "Dimension", "description": "the min-height of the section.", "default": "75vh" }, { "name": "padding", "type": "Dimension", "description": "The padding of the container.", "default": "6rem" }, { "name": "breakpoints", "type": "Map", "description": "The breakpoints of the section.", "default": "Map" } ] }, "pager": { "description": "SCSS Configuration for pager. To override these defaults, use the set mixin: `@include ulu.component-pager-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "String", "description": "The background color of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link" }, { "name": "background-color-hover", "type": "String", "description": "The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link-hover" }, { "name": "border-color", "type": "String", "description": "The border color of the pager item. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link" }, { "name": "border-color-hover", "type": "String", "description": "The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link-hover" }, { "name": "border-radius", "type": "Dimension", "description": "The border radius of the pager item.", "default": "50%" }, { "name": "border-width", "type": "Dimension", "description": "The border width of the pager item.", "default": "1px" }, { "name": "color", "type": "Color", "description": "The type color of the pager item.", "default": "white" }, { "name": "color-hover", "type": "Color", "description": "The type color of the pager item when covered and focused.", "default": "white" }, { "name": "font-weight", "type": "CssValue", "description": "Font-weight of the pager.", "default": "bold" }, { "name": "item-margin", "type": "Dimension", "description": "The item margin.", "default": "0.17rem" }, { "name": "margin-bottom", "type": "Dimension", "description": "The bottom margin of the pager.", "default": "2rem" }, { "name": "margin-top", "type": "Dimension", "description": "The top margin of the pager.", "default": "1rem" }, { "name": "width", "type": "Dimension", "description": "The width of the pager items.", "default": "2.5rem" }, { "name": "active-background-color", "type": "Color", "description": "The background color of the pager when active.", "default": "#ccc" }, { "name": "active-border-color", "type": "Color", "description": "The border color of the pager when active.", "default": "#ccc" }, { "name": "active-color", "type": "Color", "description": "The type color when active. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "type" }, { "name": "active-font-weight", "type": "CssValue", "description": "The font weight of the pager when focused or hovered.", "default": "bold" }, { "name": "action-background-color", "type": "String", "description": "The background color of the actions options of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link" }, { "name": "action-background-color-hover", "type": "String", "description": "The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link-hover" }, { "name": "action-border-color", "type": "Color", "description": "The border color of the action options of the pager.", "default": "transparent" }, { "name": "action-border-color-hover", "type": "String", "description": "The border color of the action options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.", "default": "link" }, { "name": "action-color", "type": "Color", "description": "The type color of the actions options of the pager.", "default": "white" }, { "name": "action-color-hover", "type": "Color", "description": "The type color of the actions options of the pager when focused or hovered.", "default": "white" }, { "name": "action-margin", "type": "Dimension", "description": "The margin of the action options of the pager.", "default": "0.8rem" }, { "name": "action-width", "type": "Dimension", "description": "The width of the action options of the pager.", "default": "2.5rem" } ] }, "panel": { "description": "SCSS Configuration for panel. To override these defaults, use the set mixin: `@include ulu.component-panel-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "The background color of the panel", "default": "rgb(255, 255, 255)" }, { "name": "border", "type": "Color", "description": "Set border to panel", "default": "null" }, { "name": "border-radius", "type": "Dimension", "description": "The border radius of the panel", "default": "element.$config.border-radius" }, { "name": "box-shadow", "type": "CssValue", "description": "The box-shadow of the panel", "default": "element.$config.box-shadow" }, { "name": "margin-bottom", "type": "Dimension", "description": "The bottom margin of the panel", "default": "1.5rem" }, { "name": "overflow", "type": "CssValue", "description": "Value for overflow, not included by default as it interferes with position sticky, but could be useful for cropping if that's needed (can be set on rows too)", "default": "null" } ] }, "placeholder-block": { "description": "SCSS Configuration for placeholder-block. To override these defaults, use the set mixin: `@include ulu.component-placeholder-block-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "The background color of the placeholder.", "default": "rgba(0,0,0,0.15)" }, { "name": "color", "type": "Color", "description": "The type color of the placeholder. If set to true, will use the \"type-tertiary\" variable from color.scss.", "default": "true" }, { "name": "margin-bottom", "type": "Dimension", "description": "The bottom margin of the placeholder. If set to true, will use the \"margin\" variable from element.scss.", "default": "true" }, { "name": "padding", "type": "Dimension", "description": "The padding of the placeholder.", "default": "2em" }, { "name": "padding-compact", "type": "Dimension", "description": "The padding of the placeholder when using the compact option.", "default": "(0.5em 1em)" }, { "name": "expanded-height", "type": "Dimension", "description": "The height of the placeholder when using the expanded option.", "default": "15rem" }, { "name": "border-color", "type": "Color", "description": "The border color.", "default": "rgba(0,0,0,0.3)" }, { "name": "border-radius", "type": "Dimension", "description": "The border radius of the placeholder. If set to true, will use the \"border-radius-large\" variable from element.scss.", "default": "true" }, { "name": "border-style", "type": "CssValue", "description": "The border style of the placeholder border.", "default": "dashed" }, { "name": "border-width", "type": "Dimension", "description": "The border width of the placeholder.", "default": "2px" }, { "name": "border-width-compact", "type": "Dimension", "description": "The border width of the placeholder when using the compact option.", "default": "1px" }, { "name": "icon-font-size", "type": "Dimension", "description": "The font-size of the placeholder icon.", "default": "3em" }, { "name": "icon-margin", "type": "Dimension", "description": "The margin of the placeholder icon.", "default": "0.25em" }, { "name": "icon-color", "type": "Color", "description": "The icon type color.", "default": "rgba(0, 0, 0, 0.5)" } ] }, "popover": { "description": "SCSS Configuration for popover. To override these defaults, use the set mixin: `@include ulu.component-popover-set(( \"property\": \"value\" ));`", "properties": [ { "name": "arrow-size", "type": "Dimension", "description": "Size of the dropdown arrow.", "default": "16px" }, { "name": "arrow-box-shadow", "type": "Boolean", "description": "When true the arrow will get the popover's box shadow. Note if the box shadow is not a list (for example custom property), the mask won't be calculated from the box-shadow (use arrow-box-shadow-extent to specify manually)", "default": "true" }, { "name": "arrow-box-shadow-extent", "type": "Number", "description": "If set will determine the amount of overlap added to the arrow mask, else it's calculated automatically by the box-shadow option (can be used if box-shadow is custom property)", "default": "null" }, { "name": "background-color", "type": "Color", "description": "Background color of the popover.", "default": "white" }, { "name": "border-radius", "type": "Dimension", "description": "Border radius of the popover.", "default": "6px" }, { "name": "color", "type": "Color", "description": "Text color of the popover.", "default": "inherit" }, { "name": "max-width", "type": "Dimension", "description": "Max width of the popover.", "default": "90vw" }, { "name": "max-height", "type": "Dimension", "description": "Max height of the popover.", "default": "25rem" }, { "name": "padding", "type": "Dimension", "description": "Padding of the popover.", "default": "1rem" }, { "name": "padding-large", "type": "Dimension", "description": "Padding of the popover if using \"--large\" or \"--large-x\" styling.", "default": "2rem" }, { "name": "type-size", "type": "Dimension", "description": "Font size of the popover.", "default": "null" }, { "name": "z-index", "type": "Number", "description": "z-index of the popover.", "default": "true" }, { "name": "box-shadow", "type": "CssValue", "description": "Box shadow of the popover.", "default": "true" }, { "name": "header-background-color", "type": "Color", "description": "Background color of the popover header", "default": "#ccc" }, { "name": "header-color", "type": "Color", "description": "Text color for the header.", "default": "null" }, { "name": "header-media-background-color", "type": "Color", "description": "background color for header media.", "default": "black" }, { "name": "header-padding-y", "type": "Dimension", "description": "Vertical padding of the header.", "default": "0.25rem" }, { "name": "footer-background-color", "type": "Color", "description": "Background color of the footer.", "default": "#ccc" }, { "name": "footer-border-top", "type": "Color", "description": "Optional border used to separate the content from footer", "default": "1px solid #dfdfdf" }, { "name": "footer-color", "type": "Color", "description": "Text color of the footer.", "default": "null" }, { "name": "footer-padding-y", "type": "Dimension", "description": "Vertical padding of the footer.", "default": "0.25rem" }, { "name": "footer-padding-y-large", "type": "Dimension", "description": "Vertical padding of the footer if using \"--large\" or \"--large-x\" styling.", "default": "0.5rem" }, { "name": "tooltip-background-color", "type": "Color", "description": "Background color of the tooltip.", "default": "white" }, { "name": "tooltip-color", "type": "Color", "description": "Font color of the tooltip.", "default": "null" }, { "name": "tooltip-max-width", "type": "Dimension", "description": "Max width of the tooltip.", "default": "20rem" }, { "name": "tooltip-padding", "type": "Dimension", "description": "Padding of the tooltip.", "default": "0.5rem" }, { "name": "tooltip-width", "type": "Dimension", "description": "Width of the tooltip.", "default": "auto" }, { "name": "width", "type": "Dimension", "description": "Width of the popover.", "default": "15rem" }, { "name": "width-large", "type": "Dimension", "description": "Width of the popover if using \"--large\".", "default": "30rem" }, { "name": "width-large-x", "type": "Dimension", "description": "Width of the popover if using \"--large-x\".", "default": "50rem" } ] }, "progress-bar": { "description": "SCSS Configuration for progress-bar. To override these defaults, use the set mixin: `@include ulu.component-progress-bar-set(( \"property\": \"value\" ));`", "properties": [ { "name": "header-gap", "type": "Dimension", "description": "Margin/gap for the icon/value", "default": "0.25em" }, { "name": "margin", "type": "List", "description": "Margin for the progress bar.", "default": "(0 0 0.5em 0)" }, { "name": "line-height", "type": "Boolean", "description": "Line height for the progress bar. If true, falls back to typography's `line-height-dense`.", "default": "true" }, { "name": "value-color", "type": "Color", "description": "Color of the value text.", "default": "\"type-tertiary\"" }, { "name": "value-margin", "type": "Dimension", "description": "Margin for the value text.", "default": "0.5em" }, { "name": "value-font-weight", "type": "Boolean", "description": "Font weight for the value text. If true, falls back to typography's `font-weight-light`.", "default": "true" }, { "name": "value-margin-deficit", "type": "Dimension", "description": "Margin for the deficit value text.", "default": "0.3em" }, { "name": "value-color-deficit", "type": "Color", "description": "Color of the deficit value text.", "default": "\"danger\"" }, { "name": "bar-height", "type": "Dimension", "description": "Height of the progress bar.", "default": "12px" }, { "name": "bar-color", "type": "Color", "description": "Color of the progress bar.", "default": "rgb(80, 80, 171)" }, { "name": "bar-color-deficit", "type": "Color", "description": "Color of the deficit portion of the progress bar.", "default": "\"danger\"" }, { "name": "icon-color", "type": "Color", "description": "Color of the icon.", "default": "\"type-tertiary\"" }, { "name": "icon-color-deficit", "type": "Color", "description": "Color of the icon in a deficit state.", "default": "\"danger\"" }, { "name": "track-color", "type": "Color", "description": "Color of the progress bar track.", "default": "#ccc" }, { "name": "track-margin", "type": "List", "description": "Margin for the progress bar track.", "default": "(0.1em 0)" }, { "name": "rounded-border-radius", "type": "CssValue", "description": "Border radius for the rounded modifier.", "default": "100vmax" }, { "name": "animation-duration", "type": "Time", "description": "Duration of the width transition animation.", "default": "200ms" }, { "name": "animation-timing", "type": "CssValue", "description": "Timing function for the width transition animation.", "default": "ease" }, { "name": "animation-initial-duration", "type": "Time", "description": "Duration of the initial fill animation.", "default": "500ms" }, { "name": "animation-initial-timing", "type": "CssValue", "description": "Timing function for the initial fill animation.", "default": "ease-in" }, { "name": "animation-indeterminate-duration", "type": "Time", "description": "Duration of the indeterminate loading animation.", "default": "2.5s" } ] }, "progress-circle": { "description": "SCSS Configuration for progress-circle. To override these defaults, use the set mixin: `@include ulu.component-progress-circle-set(( \"property\": \"value\" ));`", "properties": [ { "name": "size", "type": "Dimension", "description": "The width and height of the chart.", "default": "100px" }, { "name": "viewbox-size", "type": "Number", "description": "The size of the SVG viewbox. Used to calculate mask radius.", "default": "32" }, { "name": "stroke-width", "type": "Number", "description": "The width of the progress circle's stroke.", "default": "10" }, { "name": "color-track", "type": "Color", "description": "The color of the inactive track. Can be a theme color name or a CSS variable.", "default": "\"placeholder-background-alt\"" }, { "name": "color-progress", "type": "Color", "description": "The color of the progress stroke in a neutral state. Can be a theme color name or a CSS variable.", "default": "\"indicator\"" }, { "name": "color-mask", "type": "Color", "description": "The color of the center mask that creates the donut hole. Can be a theme color name or a CSS variable.", "default": "white" }, { "name": "color-mask-pie", "type": "Color", "description": "The mask color when using the pie style modifier.", "default": "rgba(255, 255, 255, 0.5)" }, { "name": "value-color", "type": "Color", "description": "The theme color name for the percentage text inside the circle.", "default": "\"type\"" }, { "name": "value-color-outside", "type": "Color", "description": "The theme color name for the percentage text when displayed outside the circle.", "default": "\"type-tertiary\"" }, { "name": "value-margin-outside", "type": "Dimension | List", "description": "The margin for the outside value text.", "default": "(0.1em 0.35em)" }, { "name": "transition-duration", "type": "Time", "description": "The duration for the stroke transition animation (when the component is updating already in the page)", "default": "300ms" }, { "name": "animation-duration", "type": "Time", "description": "The duration for the stroke animation (relies on template having a custom build animation per pie based on dash array). This is used for initial animations", "default": "1s" }, { "name": "animation-delay", "type": "Time", "description": "The delay for the animation", "default": "2s" }, { "name": "animation-timing", "type": "Time", "description": "Timing function for animation", "default": "ease-in" }, { "name": "status-colors", "type": "Map", "description": "A map of status names to their corresponding colors (e.g., \"low\": \"warning\")." }, { "name": "sizes", "type": "Map", "description": "A map of size variations. Each key is a modifier name (e.g., \"small\") and the value is a map with `size` and `stroke-width` properties." } ] }, "pull-quote": { "description": "SCSS Configuration for pull-quote. To override these defaults, use the set mixin: `@include ulu.component-pull-quote-set(( \"property\": \"value\" ));`", "properties": [ { "name": "body-line-height", "type": "Number", "default": "true" }, { "name": "image-margin-bottom", "type": "Dimension", "default": "1rem" }, { "name": "image-margin-top", "type": "Dimension", "default": "2.5rem" }, { "name": "name-margin-bottom", "type": "Dimension", "default": "1rem" }, { "name": "padding-y", "type": "Dimension", "default": "2em" }, { "name": "title-font-style", "type": "CssValue", "default": "italic" }, { "name": "quote-mark-character", "type": "String", "default": "\"\\201c\"" }, { "name": "quote-mark-color", "type": "Color", "default": "null" }, { "name": "quote-mark-font-family", "type": "String", "default": "\"Georgia\"" }, { "name": "quote-mark-font-size", "type": "Dimension", "default": "3.75em" }, { "name": "quote-mark-enabled", "type": "Boolean", "default": "true" }, { "name": "quote-mark-line-height", "type": "Number", "default": "0.35" } ] }, "rail": { "description": "SCSS Configuration for rail. To override these defaults, use the set mixin: `@include ulu.component-rail-set(( \"property\": \"value\" ));`", "properties": [ { "name": "gap", "type": "Dimension", "description": "The default space between items in the rail", "default": "1em" }, { "name": "gap-modifiers", "type": "Map", "description": "Alternate gaps (use child modifiers .rail__item--gap-[name], these apply gap changes between the item and the item before it", "default": "(\"small\" : 0.5em, \"large\" : 2em )" }, { "name": "margin-bottom", "type": "Dimension", "description": "The default space after rail", "default": "1em" }, { "name": "separator", "type": "CssValue", "description": "Pass border property for separator, defaults to element rule style light", "default": "true" } ] }, "ratio-box": { "description": "SCSS Configuration for ratio-box. To override these defaults, use the set mixin: `@include ulu.component-ratio-box-set(( \"property\": \"value\" ));`", "properties": [ { "name": "size", "type": "String|Number", "description": "Default aspect ratio (can be string like \"16/9\" or legacy percentage value)", "default": "\"4/3\"" }, { "name": "sizes", "type": "Map", "description": "Other ratios to add (apply with modifier class)", "default": "Map" } ] }, "rule": { "description": "SCSS Configuration for rule. To override these defaults, use the set mixin: `@include ulu.component-rule-set(( \"property\": \"value\" ));`", "properties": [ { "name": "short-border-width", "type": "Dimension", "description": "Short rule width of border", "default": "4px" }, { "name": "short-modifiers", "type": "Object", "description": "Objects to adjust the styles of different short rule styles.", "default": "false" }, { "name": "short-width", "type": "Dimension", "description": "Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output", "default": "2.75rem" } ] }, "rule-inline": { "description": "SCSS Configuration for rule-inline. To override these defaults, use the set mixin: `@include ulu.component-rule-inline-set(( \"property\": \"value\" ));`", "properties": [ { "name": "min-height", "type": "Dimension", "description": "Min height for rule.", "default": "1em" }, { "name": "margin", "type": "Dimension", "description": "Top and bottom margin for rule.", "default": "1em" }, { "name": "color", "type": "Color", "description": "Color for rule", "default": "\"rule\"" }, { "name": "width", "type": "Color", "description": "Width for rule", "default": "1px" } ] }, "scroll-slider": { "description": "SCSS Configuration for scroll-slider. To override these defaults, use the set mixin: `@include ulu.component-scroll-slider-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "default": "false" }, { "name": "container", "type": "String", "default": "\"container\"" }, { "name": "containers", "type": "List", "default": "(\"container\",)" }, { "name": "margin-bottom", "type": "Dimension", "default": "3rem" }, { "name": "margin-top", "type": "Dimension", "default": "1rem" }, { "name": "padding-bottom", "type": "Dimension", "default": "0" }, { "name": "padding-top", "type": "Dimension", "default": "0" }, { "name": "prefix", "type": "String", "default": "\"scroll-slide\"" }, { "name": "button-border", "type": "CssValue", "default": "2px solid white" }, { "name": "button-border-color-hover", "type": "Color", "default": "white" }, { "name": "button-border-radius", "type": "Dimension", "default": "50%" }, { "name": "button-box-shadow", "type": "CssValue", "default": "element.get(\"box-shadow\")" }, { "name": "button-color", "type": "Color", "default": "color.get(\"type\")" }, { "name": "button-color-hover", "type": "Color", "default": "color.get(\"link\")" }, { "name": "button-font-size", "type": "Dimension", "default": "1.35rem" }, { "name": "button-indent", "type": "Dimension", "default": "1.5rem" }, { "name": "button-indent-small", "type": "Dimension", "default": "0.5rem" }, { "name": "button-size", "type": "Dimension", "default": "3rem" }, { "name": "button-icon-offset-x", "type": "Dimension", "default": "false" }, { "name": "button-icon-offset-y", "type": "Dimension", "default": "false" } ] }, "skeleton": { "description": "SCSS Configuration for skeleton. To override these defaults, use the set mixin: `@include ulu.component-skeleton-set(( \"property\": \"value\" ));`", "properties": [ { "name": "animation", "type": "CssValue", "description": "The animation applied to skeleton elements.", "default": "pulse 2s cubic-bezier(0.4,0,0.6,1) infinite" }, { "name": "color", "type": "Color", "description": "The base color for skeleton elements.", "default": "type-disabled" }, { "name": "background-color", "type": "Color", "description": "The primary background color for skeleton elements.", "default": "#cbcbcb" }, { "name": "background-color-alt", "type": "Color", "description": "An alternative background color for skeleton elements, used for variations.", "default": "#aeaeae" }, { "name": "border-radius", "type": "Dimension", "description": "The border-radius for skeleton blocks and text. If set to true, uses the element.scss property for \"border-radius\".", "default": "true" }, { "name": "inline-margin", "type": "Dimension", "description": "The margin between inline skeleton text elements.", "default": "0.35em" }, { "name": "media-ratio", "type": "Number", "description": "The aspect ratio for skeleton media blocks (width/height).", "default": "(4/3)" }, { "name": "text-border-radius", "type": "Dimension", "description": "The border-radius for skeleton text lines.", "default": "3em" }, { "name": "widths", "type": "Map", "description": "A map defining various width percentages for skeleton text lines (or used to size blocks/etc)", "default": "Map" } ] }, "skip-link": { "description": "SCSS Configuration for skip-link. To override these defaults, use the set mixin: `@include ulu.component-skip-link-set(( \"property\": \"value\" ));`", "properties": [] }, "slider": { "description": "SCSS Configuration for slider. To override these defaults, use the set mixin: `@include ulu.component-slider-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "Background color for the entire slider section.", "default": "transparent" }, { "name": "margin", "type": "Dimension", "description": "Margin for slider container", "default": "(1rem 0 3rem 0)" }, { "name": "padding-top", "type": "Dimension", "description": "Top padding for individual slides.", "default": "0" }, { "name": "button-offset-x", "type": "Dimension", "description": "Offsets the control button in from their respective sides.", "default": "null" }, { "name": "button-offset-y", "type": "Dimension", "description": "Offsets the control button y", "default": "null" }, { "name": "button-margin", "type": "Dimension", "description": "The margin between the controls and the slide content when using .slider__slide-gap-for-controls", "default": "0.75rem" }, { "name": "nav-margin", "type": "Color", "description": "Margin for nav (dots)", "default": "(0.5rem 0)" }, { "name": "nav-background-color", "type": "Color", "description": "The color of the dot when unselected.", "default": "transparent" }, { "name": "nav-background-color-hover", "type": "Color", "description": "The color of the dot when hovered.", "default": "color.get(\"link\")" }, { "name": "nav-background-color-selected", "type": "Color", "description": "The color of the dot when selected.", "default": "color.get(\"link\")" }, { "name": "nav-border-radius", "type": "Dimension", "description": "The border-radius of the dot.", "default": "50%" }, { "name": "nav-border-color", "type": "Color", "description": "The border color of the dot.", "default": "color.get(\"link\")" }, { "name": "nav-border-color-hover", "type": "Color", "description": "The border color of the dot when hovered.", "default": "color.get(\"link\")" }, { "name": "nav-border-color-selected", "type": "Color", "description": "The border color of the dot when selected.", "default": "color.get(\"link\")" }, { "name": "nav-border-width", "type": "Dimension", "description": "The border width of the dot.", "default": "2px" }, { "name": "nav-size", "type": "Dimension", "description": "The height and width of the dot.", "default": "1rem" }, { "name": "nav-gap", "type": "Dimension", "description": "Gap between nav items", "default": "0.2rem" }, { "name": "button-width", "type": "Dimension", "description": "The width of the button.", "default": "1rem" } ] }, "spoke-spinner": { "description": "SCSS Configuration for spoke-spinner. To override these defaults, use the set mixin: `@include ulu.component-spoke-spinner-set(( \"property\": \"value\" ));`", "properties": [] }, "sticky-list": { "description": "SCSS Configuration for sticky-list. To override these defaults, use the set mixin: `@include ulu.component-sticky-list-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "Background color for the entire slider section.", "default": "transparent" }, { "name": "margin", "type": "Number", "description": "Margin on ends of component (defaults to element margin)", "default": "true" }, { "name": "mask-offset-bottom", "type": "Number", "description": "The offset for the mask (on bottom)", "default": "55vh" }, { "name": "mask-offset-top", "type": "Number", "description": "The offset for the mask (on top)", "default": "5rem" }, { "name": "sticky-top", "type": "Number", "description": "When to stick", "default": "45vh" }, { "name": "breakpoint", "type": "String", "description": "The upward breakpoint that this is allowed to be sticky", "default": "\"medium\"" }, { "name": "type-size", "type": "String", "description": "The typography size to use for title", "default": "\"medium\"" }, { "name": "title-width", "type": "Number", "description": "The width of the title when this is displayed in columns", "default": "40%" }, { "name": "title-min-width", "type": "Number", "description": "The min width for title when displayed in columns", "default": "8em" }, { "name": "title-text-align", "type": "CssValue", "description": "Text alignment for title when displayed in columns", "default": "right" }, { "name": "item-padding-x", "type": "Number", "description": "Optional padding on the left/right for items", "default": "0" }, { "name": "gap", "type": "Number", "description": "The gap between title and items when displayed in columns", "default": "2rem" }, { "name": "background-color", "type": "Color", "description": "The background color used for the mask", "default": "white" }, { "name": "background-contexts", "type": "List", "description": "Adjust the background mask color by contextual selectors. Pass List of Maps with (\"selector\" [parent/contextual selector], \"background-color\", \"item-padding-x\" [optional])" } ] }, "table-scroller": { "description": "SCSS Configuration for table-scroller. To override these defaults, use the set mixin: `@include ulu.component-table-scroller-set(( \"property\": \"value\" ));`", "properties": [ { "name": "margin", "type": "List|Number", "description": "Optional margin for this component", "default": "(1em, 0)" } ] }, "tabs": { "description": "SCSS Configuration for tabs. To override these defaults, use the set mixin: `@include ulu.component-tabs-set(( \"property\": \"value\" ));`", "properties": [ { "name": "margin", "type": "Dimension", "description": "The margin for the tabs container", "default": "(2rem, 0)" }, { "name": "print-margin", "type": "Dimension", "description": "Margin between tabs when stacked for print", "default": "1.5em" }, { "name": "tablist-divider", "type": "CssValue", "description": "The border separating the tabs from the panels. By default (true) will use element rule light style", "default": "true" }, { "name": "tablist-divider-width", "type": "Dimension", "description": "The width of the divider", "default": "1px" }, { "name": "tabpanel-background-color", "type": "Color", "description": "The tabpanel background color.", "default": "rgb(245, 245, 245)" }, { "name": "tabpanel-padding", "type": "Dimension", "description": "Padding for the tabpanel", "default": "(2rem,)" }, { "name": "indicator-size", "type": "Dimension", "description": "The size of the tab's active border/indicator", "default": "0.25em" }, { "name": "indicator-color", "type": "Color", "description": "The color of the indicator", "default": "currentColor" }, { "name": "indicator-transition-duration", "type": "Color", "description": "The transition duration for indicator", "default": "200ms" }, { "name": "indicator-scale-start", "type": "Color", "description": "The starting scale for the indicator (set to 1 to disable expanding on click)", "default": "0" }, { "name": "tab-color", "type": "Color", "description": "The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.", "default": "link" }, { "name": "tab-color-hover", "type": "Color", "description": "The type color for the tabs when hovered. This uses color.scss, so the value of this options should be a variable from color.scss.", "default": "link-hover" }, { "name": "tab-color-focus", "type": "Color|null", "description": "The type color for a tab when it has keyboard focus.", "default": "null" }, { "name": "tab-background-color-focus", "type": "Color", "description": "The background color for a tab when it has keyboard focus.", "default": "#eeeeee" }, { "name": "tab-hide-native-focus", "type": "Boolean", "description": "Hides the default browser outline on focused tabs.", "default": "true" }, { "name": "tab-color-selected", "type": "Color", "description": "The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.", "default": "selected" }, { "name": "tab-background-color-selected", "type": "Color", "description": "The tab background color when selected", "default": "null" }, { "name": "tab-font-weight", "type": "CssValue", "description": "The font weight for the tab, defaults to typography \"font-weight-semibold\"", "default": "true" }, { "name": "tab-padding", "type": "Dimension", "description": "Padding for the tab", "default": "0.75em 0.1em 0.75em 0.1em" }, { "name": "tab-gap", "type": "Dimension", "description": "Gap between tabs", "default": "1em" }, { "name": "vertical-tablist-width", "type": "Dimension", "description": "The width of the tablist column when tabs are layout is vertical", "default": "minmax(15rem, 30%)," }, { "name": "vertical-tab-padding", "type": "Dimension", "description": "Tab padding when vertical", "default": "(0.25em 0.75em)" }, { "name": "vertical-divider-width", "type": "Dimension", "description": "Divider between tabs and panels when vertical", "default": "0px" }, { "name": "vertical-tab-gap", "type": "Dimension", "description": "The gap between tabs when vertical", "default": "0.75em" }, { "name": "vertical-indicator-left", "type": "Boolean", "description": "The indicator for selected tab should be on the left when vertical (false will be on right/inside)", "default": "true" }, { "name": "vertical-breakpoint", "type": "Boolean", "description": "Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')", "default": "true" }, { "name": "horizontal-tab-wrap", "type": "Boolean", "description": "Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap", "default": "false" }, { "name": "full-width-tablist-background-color", "type": "Color", "description": "Optional background color for full-width tabs tablist", "default": "null" }, { "name": "full-width-tabpanel-background-color", "type": "Color", "description": "Optional background color for full-width tabs tabpanel", "default": "transparent" } ] }, "tag": { "description": "SCSS Configuration for tag. To override these defaults, use the set mixin: `@include ulu.component-tag-set(( \"property\": \"value\" ));`", "properties": [ { "name": "font-weight", "type": "CssValue", "description": "Font weight for the tag text.", "default": "normal" }, { "name": "font-family", "type": "String", "description": "Font family for the tag text.", "default": "true" }, { "name": "box-shadow", "type": "CssValue", "description": "Box shadow for the tag.", "default": "none" }, { "name": "padding", "type": "Dimension", "description": "Inner padding for the tag.", "default": "(0.4em 0.75em)" }, { "name": "vertical-align", "type": "CssValue", "description": "Vertical alignment of tag text.", "default": "baseline" }, { "name": "margin-between", "type": "Dimension", "description": "Margin between tag and other elements.", "default": "0.5em" }, { "name": "margin-between-tags", "type": "Dimension", "description": "Margin between tag and other tags.", "default": "0" }, { "name": "line-height", "type": "Number", "description": "Line height for the tag text.", "default": "1" }, { "name": "type-size", "type": "String", "description": "Font size for the tag text.", "default": "\"small\"" }, { "name": "background-color", "type": "Color", "description": "Background color of the tag.", "default": "#eaeaea" }, { "name": "border-radius", "type": "Dimension", "description": "Border radius of the tag.", "default": "1.25em" }, { "name": "border-color", "type": "Color", "description": "Border color for the tag.", "default": "transparent" }, { "name": "border-width", "type": "Dimension", "description": "Border width of the tag.", "default": "1px" }, { "name": "color", "type": "String", "description": "Color of the tag text.", "default": "\"type-tertiary\"" }, { "name": "counter-size", "type": "String", "description": "Size when used as a counter (for numbers), will be this size by default and expand horizontally as needed (ie. circle/rounded rectangle or square/rectangle if without border radius)", "default": "1.5em" }, { "name": "counter-border-radius", "type": "String", "description": "May need to be adjusted or can be set to 0 for square/rectangle", "default": "20px" }, { "name": "counter-padding-sides", "type": "String", "description": "Counter left/right padding (this is the space/margin on the inside when the number can't fit in the circle/square", "default": "0.26em" } ] }, "tagged": { "description": "SCSS Configuration for tagged. To override these defaults, use the set mixin: `@include ulu.component-tagged-set(( \"property\": \"value\" ));`", "properties": [ { "name": "position-x", "type": "Dimension", "description": "Horizontal absolute position of the tag.", "default": "-0.75em" }, { "name": "position-y", "type": "Dimension", "description": "Vertical absolute position of the tag.", "default": "-0.75em" }, { "name": "icon-opacity", "type": "CssValue", "description": "Adds a transform styling to the tag.", "default": "null" } ] }, "tile-button": { "description": "SCSS Configuration for tile-button. To override these defaults, use the set mixin: `@include ulu.component-tile-button-set(( \"property\": \"value\" ));`", "properties": [ { "name": "border-radius", "type": "Dimension", "description": "The border radius of the tile button. If set to true, will use the element.scss property for \"border-radius\".", "default": "true" }, { "name": "description-size", "type": "String", "description": "The type size of the description. This uses typography.scss, so the value of this options should be a variable from typography.scss.", "default": "small-x" }, { "name": "line-height", "type": "Dimension", "description": "The line-height of the tile-button. If set to true, will use the typography.scss property for \"line-height-densest\".", "default": "true" }, { "name": "padding", "type": "Dimension", "description": "The padding of the tile button", "default": "(1em 0.5em)" }, { "name": "row-margin", "type": "Dimension", "description": "The margin between rows.", "default": "0.5em" }, { "name": "icon-font-size", "type": "Dimension", "description": "The font size of the icon.", "default": "1.5em" }, { "name": "icon-margin", "type": "Dimension", "description": "The margin for the icon.", "default": "1em" }, { "name": "icon-opacity", "type": "Number", "description": "The opacity of the icon.", "default": "0.5" } ] }, "tile-grid": { "description": "SCSS Configuration for tile-grid. To override these defaults, use the set mixin: `@include ulu.component-tile-grid-set(( \"property\": \"value\" ));`", "properties": [ { "name": "aspect-ratio", "type": "CssValue", "default": "list.slash(4, 3)" }, { "name": "gap", "type": "Number", "description": "The gap for the tile grid.", "default": "1rem" }, { "name": "width", "type": "Number", "default": "10em" } ] }, "tile-grid-overlay": { "description": "SCSS Configuration for tile-grid-overlay. To override these defaults, use the set mixin: `@include ulu.component-tile-grid-overlay-set(( \"property\": \"value\" ));`", "properties": [] }, "vignette": { "description": "SCSS Configuration for vignette. To override these defaults, use the set mixin: `@include ulu.component-vignette-set(( \"property\": \"value\" ));`", "properties": [ { "name": "background-color", "type": "Color", "description": "Color used for the fade-in of the vignette. Must be actual color not color module palette name", "default": "rgb(0,0,0)" }, { "name": "image-filter", "type": "CssValue", "description": "Filter value placed over image.", "default": "saturate(85%)" } ] }, "wysiwyg": { "description": "SCSS Configuration for wysiwyg. To override these defaults, use the set mixin: `@include ulu.component-wysiwyg-set(( \"property\": \"value\" ));`", "properties": [ { "name": "exclude-selector", "type": "String", "description": "Applied to all selectors", "default": "\".wysiwyg__exclude\"" }, { "name": "img-excluded-selectors", "type": "List", "description": "Extra selectors to prevent styling", "default": "()" }, { "name": "ul-excluded-selectors", "type": "List", "description": "Extra selectors to prevent