Prototypes / UI Theme

Token Names

Token names are prefixed with the component name + variant + state, and suffixed with the CSS property name they are targeting:
--[component]-[variant]-[state]-[property]

For example, the font for the small button variant:
--button-small-font

Button

Buttons don’t define a fixed height. They are sized by their content. Different states are indicated with a background or text color change, with a subtle transition.

<div>
  <button class="primary">Primary</button>
  <button>Secondary</button>
  <button class="tertiary">Tertiary</button>
</div>
<div>
  <button class="primary">Primary <icon chevron-down></icon></button>
  <button>Secondary <icon chevron-down></icon></button>
  <button class="tertiary">Tertiary <icon arrow-right></icon></button>
</div>
<h5>Small</h5>
<div>
  <button class="primary small">Primary</button>
  <button class="small">Secondary</button>
  <button class="tertiary small">Tertiary</button>
</div>
<div>
  <button class="primary small">Primary <icon chevron-down></icon></button>
  <button class="small">Secondary <icon chevron-down></icon></button>
  <button class="tertiary small">Tertiary <icon arrow-right></icon></button>
</div>
<h5>Icon</h5>
<div>
  <button class="primary"><icon search></icon></button>
  <button><icon search></icon></button>
  <button class="tertiary"><icon search></icon></button>
</div>
<div>
  <button class="primary small"><icon search></icon></button>
  <button class="small"><icon search></icon></button>
  <button class="tertiary small"><icon search></icon></icon></button>
</div>
<h5>Disabled</h5>
<div>
  <h6>Native</h6>
  <button disabled class="primary">Primary</button>
  <button disabled>Secondary</button>
  <button disabled class="tertiary">Tertiary</button>

  <h6>ARIA-disabled</h6>
  <button aria-disabled="true" class="primary" tooltip="With aria-disabled you can inform the user why a button is disabled">Primary</button>
  <button aria-disabled="true" tooltip="With aria-disabled you can inform the user why a button is disabled">Secondary</button>
  <button aria-disabled="true" class="tertiary" tooltip="With aria-disabled you can inform the user why a button is disabled">Tertiary</button>
</div>

Button Tokens

Text Input

<div>
  <input type="text" placeholder="Text">
  <input type="date" placeholder="Date">
  <input type="datetime-local" placeholder="Date">
  <input type="email" placeholder="Email">
  <input type="number" placeholder="Number">
  <input type="password" placeholder="Password">
  <input type="tel" placeholder="Telephone">
  <input type="search" placeholder="Search">
  <input type="url" placeholder="URL">
</div>
<div>
  <textarea placeholder="Text area"></textarea>
</div>

<h5>Small</h5>
<div>
  <input type="text" theme="small" placeholder="Small">
</div>
<div>
  <textarea theme="small" placeholder="Small text area"></textarea>
</div>

<h5>Disabled</h5>
<div>
  <input type="text" value="Text" disabled>
</div>

<h5>Read-only</h5>
<div>
  <input type="text" value="Text" readonly>
</div>

Text Input Tokens

These tokens apply to Select as well.

Select

<select>
  <option>Option one</option>
  <option>Option two</option>
  <option>Option three</option>
</select>

<h5>Small</h5>
<select theme="small">
  <option>Option one</option>
  <option>Option two</option>
  <option>Option three</option>
</select>

<h5>Disabled</h5>
<select disabled>
  <option>Option one</option>
  <option>Option two</option>
  <option>Option three</option>
</select>

Select Tokens

All Text Input tokens apply for Select as well.

Checkbox

<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" class="indeterminate">
<h5>Disabled</h5>
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
<input type="checkbox" disabled class="indeterminate">
<script>
[...document.querySelectorAll('input.indeterminate')].forEach(checkbox =>
  checkbox.indeterminate = true
);
</script>

Checkbox Tokens

Radio Button

<input type="radio" name="example">
<input type="radio" name="example" checked>

<h5>Disabled</h5>
<input type="radio" disabled name="disabled-example">
<input type="radio" disabled name="disabled-example" checked>

Radio Button Tokens

Slider

<input type="range">
<input type="range" disabled>

Slider Tokens

Progress and Meter

<h4>Progress</h4>
<progress min=0 max=5 value=3></progress>
<progress></progress>

<h4>Meter</h4>
<meter min=0 max=5 value=3></meter>
<meter min=0 max=100 low=33 high=66 optimum=80 value=50>at 50/100</meter>
<meter min=0 max=100 low=33 high=66 optimum=80 value=20>at 20/100</meter>
<meter min=0 max=100 low=33 high=66 optimum=80 value=90>at 90/100</meter>

Progress and Meter Tokens

Details

<details name="test">
  <summary>Summary</summary>
  <div>Detail contents</div>
</details>

<details name="test" theme="reverse">
  <summary>Summary</summary>
  <div>Detail contents</div>
</details>

<h5>Filled</h5>

<details theme="filled">
  <summary>Summary</summary>
  <input value="Input">
  <button>Button</button>
  <input type="range">
</details>

<details theme="filled reverse">
  <summary>Summary</summary>
  <input value="Input">
  <button>Button</button>
  <input type="range">
</details>

<h5>Disabled</h5>
To disable a details panel, set <code>tabindex="-1"</code> on the <code>&lt;summary&gt;</code> element.
<details>
  <summary tabindex="-1">Summary</summary>
  <div>Detail contents</div>
</details>

<details open>
  <summary tabindex="-1">Summary</summary>
  <div>Detail contents</div>
</details>

Details Tokens

Vertical Alignment

Testing the vertical alignment of components.

<script type="module">
  import '/src/components/InputDecorator.js';
  import '/src/components/Field.js';
</script>

<span style="vertical-align: middle;">Text</span>
<button><icon search></icon> Button</button>
<j-input-decorator>
  <icon search slot="prefix"></icon>
  <input type="text" value="Text input">
</j-input-decorator>
<j-field>
  <input type="checkbox">
  <label>Checkbox</label>
</j-field>
<j-field>
  <input type="checkbox" checked>
  <label>Checkbox</label>
</j-field>
<progress value=0.4></progress>
<meter value=0.4></meter>