JElements
System
Light
Dark
Menu

Prototypes / UI Theme

Contents
  1. Token Names
    1. Button
      1. Button Tokens
    2. Text Input
      1. Text Input Tokens
    3. Select
      1. Select Tokens
    4. Checkbox
      1. Checkbox Tokens
    5. Radio Button
      1. Radio Button Tokens
    6. Slider
      1. Slider Tokens
    7. Progress and Meter
      1. Progress and Meter Tokens
    8. Details
      1. Details Tokens
    9. Vertical Alignment
      6 requests, 17 KB (5 KB compressed)
      Module
      File size
      Compressed
      /src/theme/body.css
      1.13 KB
      0.53 KB
      /src/theme/button.css
      3.66 KB
      1.12 KB
      /src/theme/tooltip.css
      0.65 KB
      0.33 KB
      /src/theme/optionbox.css
      4.11 KB
      1.03 KB
      /src/theme/popup.css
      0.56 KB
      0.34 KB
      /src/theme/textinput.css
      6.05 KB
      1.28 KB

      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.

      Neutral
      Accent

      Small
      Icon
      Disabled
      Native
      ARIA-disabled


      <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

      --button-border-radius var(--border-radius-m)

      --button-padding var(--size-8, 0.5rem) var(--size-12, 0.75rem)
      The vertical padding should match the vertical padding defined in --textinput-padding.

      --button-font var(--font-button)
      The line-height should match the line-height defined in --textinput-font.

      --button-background var(--background-ui)

      --button-color var(--color)

      --button-border 1px solid transparent
      The border width should match the width defined in --textinput-border.

      Text Input

      Small
      Disabled
      Read-only

      <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.

      --textinput-background var(--background)

      --textinput-hover-background var(--textinput-background)

      --textinput-active-background var(--textinput-background)

      --textinput-disabled-background var(--textinput-background)

      --textinput-readonly-background var(--textinput-background)

      --textinput-border var(--border-ui)
      The border width should match the width defined in --button-border.

      --textinput-hover-border var(--textinput-border, var(--border-ui-hover))

      --textinput-active-border var(--textinput-border, var(--border-ui-active))

      --textinput-focus-border var(--textinput-border, var(--border-ui-focus))

      --textinput-disabled-border 1px solid var(--border-color-low-contrast)

      --textinput-readonly-border 1px solid var(--border-color-low-contrast)

      --textinput-border-radius var(--border-radius-m)

      --textinput-font var(--font-textinput, inherit)
      The line-height should match the line-height defined in --button-font.

      --textinput-color var(--color)

      --textinput-disabled-color var(--color-disabled)

      --textinput-padding var(--size-8, 0.5rem)
      The vertical padding should match the vertical padding defined in --button-padding.

      --textinput-small-padding var(--size-6, 0.375rem)
      The vertical padding should match the vertical padding defined in --button-small-padding.

      Select

      Small
      Disabled

      <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.

      --select-padding-inline-end calc(var(--icon-size) + var(--size-8) * 2)
      Used to reserve the space for the drop down icon, which is set as a background image.

      --select-background-image var(--icon-chevron-down-gray)
      A url(data:...), which is used for the drop down icon. Use a neutral gray color to support both light and dark mode with the same image/icon.

      --select-background-blend-mode multiply (screen in dark mode)
      Background blend mode is used to support the both light and dark mode with a single image/icon.

      Checkbox

      Disabled

      <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

      TODO

      Radio Button

      Disabled

      <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

      TODO

      Slider

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

      Slider Tokens

      TODO

      Progress and Meter

      Progress

      Meter

      at 50/100at 20/100at 90/100

      <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

      TODO

      Details

      Summary
      Detail contents
      Summary
      Detail contents
      Filled
      Summary
      Summary
      Disabled
      To disable a details panel, set tabindex="-1" on the <summary> element.
      Summary
      Detail contents
      Summary
      Detail contents

      <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

      TODO

      Vertical Alignment

      Testing the vertical alignment of components.

      Text 

      <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>