Начало работы

Добавьте две строки в <head> страницы и пишите компоненты Thykes обычным HTML. Ничего устанавливать и собирать не нужно.

Подключить Thykes к странице

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

tokens.css: дизайн-токены в виде CSS custom properties, например --surface-page или --space-16. Файл только задаёт значения и сам ничего не стилизует.
thykes.js: один JavaScript-модуль, который определяет все элементы tk-*.

Писать компоненты

Когда две строки на месте, элементы можно ставить в любое место разметки:

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>

Настройки задаются атрибутами, и страница каждого компонента их перечисляет. Данные, которые не уместить в разметку, например строки таблицы данных, задаются свойством в JavaScript; страница компонента говорит, где это нужно.

Минимальная страница

<!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 не задаёт стилей самой странице, поэтому шрифт, фон и цвет текста для body возьмите из токенов, как выше. Иначе текст вне компонентов останется с настройками браузера по умолчанию.

Тема и основной цвет

Задайте два атрибута на <html>:

Атрибут	Значения	По умолчанию
`data-theme`	`light`, `dark`, `high-contrast`	`light`
`data-primary`	`blue`, `orange`, `green`, `mint`, `teal`, `indigo`, `purple`, `brown`, `gray`, `black`	`blue`

data-theme переключает все цвета: поверхности, текст, рамки и состояния.
data-primary задаёт акцентный цвет основных кнопок, выделения, ссылок и колец фокуса.
Без data-theme страница берёт high-contrast, если система просит больше контраста, и light в остальных случаях. Тёмный режим системы тему не меняет; задайте data-theme="dark" сами.
Чтобы сменить тему на лету, поменяйте атрибут: document.documentElement.dataset.theme = 'dark'.
Ставьте оба атрибута на <html>, а не на внутренний элемент. Часть токенов вычисляется в корне, и тема, заданная ниже, применится лишь частично.

Что библиотека добавляет на страницу

Иконочный шрифт. Пишите <tk-icon name="search"></tk-icon>, больше ничего подключать не нужно. Пока шрифт грузится, иконок не видно, поэтому иконка никогда не должна быть единственным, что объясняет назначение контрола. Имена и правила: Icon.
Одна глобальная таблица стилей для классов .tk-prose, .tk-code, .tk-kbd, .tk-mark и .tk-table и ячеек <tk-table>. Её правила затрагивают только эти имена и имеют нулевую специфичность, так что ваши правила побеждают.
Данные по требованию. Флаги стран, форматы телефонных номеров и данные эмодзи загружаются, когда компоненту они понадобятся впервые. Настраивать ничего не нужно.

Версии

/v0/ в адресе — это версия.

Внутри версии обновления совместимы. Исправления и новые возможности попадают в ту же папку, и страница получает их при следующей загрузке.
Несовместимое изменение выходит в новой папке, например /v1/. Удалить или переименовать элемент, атрибут, слот, событие, токен или файл — несовместимое изменение. Старая папка остаётся доступной, а переезд — это правка ваших двух строк.
Это правило действует уже с версии 0. 0 не значит, что сломаться может что угодно.

Браузеры

Thykes тестируется в Chrome. Он использует JavaScript-модули, custom elements, shadow DOM и нативный элемент <dialog>, поэтому другие современные браузеры тоже должны работать.

Что дальше

Компоненты: все компоненты, с примерами и API.
Соглашения API: имена, общие для всех компонентов.
Цвет, Типографика, Отступы, Фокус: основы.