0build.dev
Choose a layout

outline-color

Report an Issue
Class Description

outline

Sets outline-color via --outline.

CSS Rules 

.outline {
  outline-color: var(--outline);
}

Usage

The .outline class is flagged as a value-driven selector. The variable --outline is required. 
<element class="outline" style="--outline: /* value */;" />

Responsive & Dark Mode

Prefix .outline utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:outline" style="--md-outline: /* value */;" />

<element class="dark:sm:outline" style="--dark-sm-outline: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="outline:hover" style="--outline-hover: /* value */;" />

<element class="dark:sm:outline:hover" style="--dark-sm-outline-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="outline:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before outline::before" style="--outline-before: /* value */;" />

<element class="content-after outline::after" style="--outline-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="outline=value" />

<!-- Output -->
<element class="outline" style="--outline: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.outline Sets outline-color via --outline.

outline/o

Sets outline-color + opacity via --outline and --outline-o.

CSS Rules 

.outline\/o {
  outline-color: color-mix(in oklab, var(--outline) var(--outline-o, 100%), transparent);
}

Usage

The .outline/o class is flagged as a value-driven selector. The variables --outline and --outline-o are required. 
<element
  class="outline/o"
  style="
    --outline: /* value */;
    --outline-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .outline/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:outline/o"
  style="
    --md-outline: /* value */;
    --md-outline-o: /* value */;
  "
></element>

<element
  class="dark:sm:outline/o"
  style="
    --dark-sm-outline: /* value */;
    --dark-sm-outline-o: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="outline/o:hover"
  style="
    --outline-hover: /* value */;
    --outline-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:outline/o:hover"
  style="
    --dark-sm-outline-hover: /* value */;
    --dark-sm-outline-o-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="outline/o:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before outline/o::before"
  style="
    --outline-before: /* value */;
    --outline-o-before: /* value */;
  "
></element>

<element
  class="content-after outline/o::after"
  style="
    --outline-after: /* value */;
    --outline-o-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="outline/o=value" />

<!-- Output -->
<element class="outline/o" style="--outline: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.outline/o Sets outline-color + opacity via --outline and --outline-o.