Getting started

Add two lines to your page's <head>, then write Thykes components as plain HTML. There is nothing to install and no build step.

Add Thykes to a page

<link rel="stylesheet" href="https://thykes.com/v0/tokens.css">
<script type="module" src="https://thykes.com/v0/thykes.js"></script>

tokens.css: the design tokens as CSS custom properties, such as --surface-page or --space-16. It defines values and styles nothing by itself.
thykes.js: one JavaScript module that defines every tk-* element.

Write the components

Once the two lines are in, use the elements anywhere in your markup:

Save changes

<tk-field label="Email address" helper="We send the receipt here">
  <tk-input type="email" name="email" autocomplete="email"></tk-input>
</tk-field>
<tk-button variant="primary" type="submit">Save changes</tk-button>

Settings are attributes, and each component's page lists them. Data that markup can't hold, such as the rows of a data table, is set as a JavaScript property; the component's page says when.

A minimal page

<!doctype html>
<html lang="en" data-theme="light" data-primary="blue">
  <head>
    <meta charset="utf-8">
    <title>Invoice settings</title>
    <link rel="stylesheet" href="https://thykes.com/v0/tokens.css">
    <script type="module" src="https://thykes.com/v0/thykes.js"></script>
    <style>
      body {
        font-family: var(--font-family-sans);
        background: var(--surface-page);
        color: var(--text-default);
      }
    </style>
  </head>
  <body>
    <tk-button variant="primary">Save changes</tk-button>
  </body>
</html>

tokens.css sets no page styles, so give the body its font, background and text color from the tokens, as above. Without that, text outside the components keeps the browser's defaults.

Theme and primary color

Set two attributes on <html>:

Attribute	Values	Default
`data-theme`	`light`, `dark`, `high-contrast`	`light`
`data-primary`	`blue`, `orange`, `green`, `mint`, `teal`, `indigo`, `purple`, `brown`, `gray`, `black`	`blue`

data-theme switches every color: surfaces, text, borders and states.
data-primary sets the accent color of primary buttons, selection, links and focus rings.
Without data-theme, the page uses high-contrast when the system asks for more contrast, and light otherwise. The system's dark mode doesn't switch it; set data-theme="dark" yourself.
To switch at runtime, change the attribute: document.documentElement.dataset.theme = 'dark'.
Set both on <html>, not on an inner element. Some tokens are resolved at the root, so a theme set lower down applies only in part.

What the library adds to your page

The icon font. Write <tk-icon name="search"></tk-icon>; there is nothing else to load. Until the font arrives, icons are blank, so never let an icon be the only thing that says what a control does. Names and rules: Icon.
One global stylesheet for the .tk-prose, .tk-code, .tk-kbd, .tk-mark and .tk-table classes and the cells of a <tk-table>. Its rules match only those names and have zero specificity, so your own rules win.
Data on demand. Country flags, phone number formats and emoji data are fetched the first time a component needs them. No setup.

Versions

/v0/ in the URL is the version.

Within a version, updates are compatible. Fixes and new features land in the same folder, and your page picks them up on its next load.
A breaking change gets a new folder, such as /v1/. Removing or renaming an element, attribute, slot, event, token or file is breaking. The old folder stays online, and you move by editing your two lines.
This holds from version 0. The 0 doesn't mean anything can break.

Browser support

Thykes is tested in Chrome. It uses JavaScript modules, custom elements, shadow DOM and the native <dialog> element, so other current browsers are expected to work.

Next steps

Components: every component, with examples and API.
API conventions: the names every component shares.
Color, Typography, Spacing, Focus: the foundations.