Warp Design System

Appearance

Borders

Outline Color ​

Utilities for controlling the color of an outline of an element.

s-prefix

The s- (semantic) prefix signals that the color value of these will change with the brand css.

Quick reference ​

Basic usage ​

Setting the outline color ​

Control the outline color of an element using the s-outline-{semantic color} utilities specified in the table above.

html
<div class="s-outline-focus outline-4 ..."></div>

Arbitrary values ​

If you need to use a one-off outline-{color} value, use square brackets to generate a property on the fly using any arbitrary value. However, we recommend only using our semantic color tokens.

html
<div class="outline-[--w-s-color-border]">
  <!-- ... -->
</div>

Opacity ​

It is possible to control the opacity of an element’s outline color by adding an optional alpha modifier. The modifier accepts any integer percentage value between 0 and 100. This works for both semantic and arbitrary classes with any primitive --w-{color} or semantic --w-s-color-{name} css variable.

Warning

Please be advised that by using primitive variables you will lose theming possibilities, therefore we highly recommend only using semantic classes and tokens.

html
<div class="s-outline/50 hover:s-outline/100 ..."></div>
<div class="s-outline-focus/50 hover:s-outline-focus/100 ..."></div>
<div class="outline-[--w-s-color-background-positive/40] hover:bg-[--w-s-color-background-positive/100] ..."></div>
<div class="outline-[--w-black/40] hover:outline-[--w-black/100] ..."></div>

Applying conditionally ​

Hover, focus and other states ​

Conditionally apply utility classes in different states using variant modifiers. For example, use hover:s-outline-active to only apply the s-outline-active utility on hover.

html
<div class="s-outline hover:s-outline-hover ..."></div>

Breakpoints and media queries ​

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:s-outline-positive to apply the s-outline-positive utility at only medium screen sizes and above.

html
<div class="s-outline md:s-outline-positive ..."></div>