al-design-system 1.0.1 → 1.2.0

package/README.md

@@ -10,7 +10,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 
 ## What it is
 
-- **Foundation + 23 components**, designed in Figma and coded from the same tokens.
+- **Foundation + 25 components**, designed in Figma and coded from the same tokens.
 - **Light and dark themes** built in. It follows the operating system by default, and you can force one.
 - **Accessibility is checked by the build.** Every rendered combination (variant × state × theme) is measured for contrast against the background it actually sits on, and each component's markup contract is verified. If something fails, the build stops.
 - **Nothing is typed by hand.** Tokens, CSS variables, `tokens.json` and the documentation tables are all generated from one source.
@@ -22,6 +22,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 | Actions and display | Button | | [guidelines](src/components/button/guidelines.md) |
 | | Icon | | (70 icons, see [Icons](#icons)) |
 | | Icon Button | | [guidelines](src/components/icon-button/guidelines.md) |
+| | Link | | [guidelines](src/components/link/guidelines.md) |
 | | Tag | | [guidelines](src/components/tag/guidelines.md) |
 | | Avatar | | [guidelines](src/components/avatar/guidelines.md) |
 | Forms | Select | | [guidelines](src/components/select/guidelines.md) |
@@ -42,6 +43,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 | Feedback | Tooltip | ✓ | [guidelines](src/components/tooltip/guidelines.md) |
 | | Toast | ✓ | [guidelines](src/components/toast/guidelines.md) |
 | | Alert | ✓ | [guidelines](src/components/alert/guidelines.md) |
+| | Progress | | [guidelines](src/components/progress/guidelines.md) |
 
 Each guidelines file holds the usage rules (when to use it, when not to, content, behavior and accessibility) and, when there are any, the contrast exceptions the component declares.
 
@@ -54,7 +56,7 @@ npm install al-design-system
 Or straight from a CDN, pinned to a version:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.0.1/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.2.0/dist/al.css">
 ```
 
 Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -63,7 +65,7 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 23 components, in one file |
+| `al.css` | Foundation + all 25 components, in one file |
 | `foundation.css` | Only the Foundation: color, typography, spacing, radius, icon size, elevation, focus ring and motion |
 | `components/<name>.css` | One component (its tokens + its CSS) |
 | `components/<name>.js` | The behavior, for the 9 components that have a script |

package/README.pt-BR.md

@@ -10,7 +10,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 
 ## O que é
 
-- **Foundation + 23 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
+- **Foundation + 25 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
 - **Temas claro e escuro** já incluídos. Por padrão segue o sistema operacional, e dá para forçar um.
 - **A acessibilidade é conferida no build.** Cada combinação renderizada (variante × estado × tema) tem o contraste medido contra o fundo onde ela realmente aparece, e o contrato de marcação de cada componente é verificado. Se algo reprova, o build para.
 - **Nada é digitado à mão.** Tokens, variáveis CSS, `tokens.json` e as tabelas da documentação saem todos de uma fonte só.
@@ -22,6 +22,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 | Ações e exibição | Button | | [diretrizes](src/components/button/guidelines.md) |
 | | Icon | | (70 ícones, ver [Ícones](#ícones)) |
 | | Icon Button | | [diretrizes](src/components/icon-button/guidelines.md) |
+| | Link | | [diretrizes](src/components/link/guidelines.md) |
 | | Tag | | [diretrizes](src/components/tag/guidelines.md) |
 | | Avatar | | [diretrizes](src/components/avatar/guidelines.md) |
 | Formulários | Select | | [diretrizes](src/components/select/guidelines.md) |
@@ -42,6 +43,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 | Feedback | Tooltip | ✓ | [diretrizes](src/components/tooltip/guidelines.md) |
 | | Toast | ✓ | [diretrizes](src/components/toast/guidelines.md) |
 | | Alert | ✓ | [diretrizes](src/components/alert/guidelines.md) |
+| | Progress | | [diretrizes](src/components/progress/guidelines.md) |
 
 Cada arquivo de diretrizes traz as regras de uso (quando usar, quando não usar, conteúdo, comportamento e acessibilidade) e, quando houver, as exceções de contraste que o componente declara. Por enquanto as diretrizes estão em inglês; a versão em português chega junto com o site novo.
 
@@ -54,7 +56,7 @@ npm install al-design-system
 Ou direto de uma CDN, fixado numa versão:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.0.1/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.2.0/dist/al.css">
 ```
 
 Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -63,7 +65,7 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 23 componentes, num arquivo só |
+| `al.css` | Foundation + os 25 componentes, num arquivo só |
 | `foundation.css` | Só a Foundation: cor, tipografia, espaçamento, radius, tamanho de ícone, elevação, anel de foco e motion |
 | `components/<nome>.css` | Um componente (os tokens + o CSS dele) |
 | `components/<nome>.js` | O comportamento, para os 9 componentes que têm script |

package/dist/al.css

@@ -1,8 +1,8 @@
-/* AL Design System 1.0.1 - Foundation + 23 components.
+/* AL Design System 1.2.0 - Foundation + 25 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.0.1 - MIT
+ * v1.2.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -90,6 +90,7 @@
   --al-bg-active-raised: #E0E0E0;
   --al-bg-thumb: #B3B3B3;
   --al-bg-thumb-disabled: #CECECE;
+  --al-bg-track: #E0E0E0;
   --al-bg-scrim: #1818188F;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #C53900;
@@ -247,6 +248,7 @@
     --al-bg-active-raised: #717171;
     --al-bg-thumb: #717171;
     --al-bg-thumb-disabled: #565656;
+    --al-bg-track: #565656;
     --al-bg-scrim: #000000A3;
     --al-bg-brand: #FC5000;
     --al-bg-brand-hover: #EA4900;
@@ -312,6 +314,7 @@
   --al-bg-active-raised: #717171;
   --al-bg-thumb: #717171;
   --al-bg-thumb-disabled: #565656;
+  --al-bg-track: #565656;
   --al-bg-scrim: #000000A3;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #EA4900;
@@ -6825,3 +6828,221 @@
     transition: none;
   }
 }
+
+/* AL Design System - Link tokens
+ * GENERATED by src/components/link/tokens.py. Do not edit by hand.
+ *
+ * The default ink is the theme-invariant brand primitive; hover and focus
+ * point to text-brand, which the theme switches on :root.
+ */
+
+:root {
+  /* color - underline and icon inherit through currentColor */
+  --al-link-text-default: var(--al-color-orange-500);
+  --al-link-text-hover: var(--al-text-brand);
+  --al-link-text-focus: var(--al-text-brand);
+
+  /* focus */
+  --al-link-ring: var(--al-focus-ring-default);
+
+  /* geometry */
+  --al-link-underline-default: var(--al-border-width-1);
+  --al-link-underline-hover: var(--al-border-width-2);
+  --al-link-underline-offset: var(--al-space-4);
+  --al-link-gap: var(--al-space-8);
+  --al-link-icon-size: var(--al-icon-size-20);
+
+  /* type - standalone only; inline inherits the paragraph */
+  --al-link-font-size: var(--al-font-size-sm);
+  --al-link-line-height: var(--al-line-height-sm);
+  --al-link-font-weight: var(--al-font-weight-medium);
+  --al-link-tracking: 0em;
+}
+
+/* AL Design System - Link
+ *
+ * Always an <a href>. One type, always underlined: the underline is what
+ * separates the link from text, not the color (WCAG 1.4.1) - and it is what
+ * pays the default's declared contrast exception. Never remove it.
+ *
+ * Standalone (.al-link) uses label-md. Inside running text (.al-link--inline)
+ * it inherits the paragraph font and takes no icon.
+ *
+ * The underline is text-decoration, not a bottom border: it has to follow the
+ * text when an inline link wraps across lines. Its color is currentColor, so
+ * it follows the state's ink with no token of its own; the icon does the same.
+ */
+
+.al-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--al-link-gap);
+  color: var(--al-link-text-default);
+  font-family: var(--al-font-sans);
+  font-size: var(--al-link-font-size);
+  line-height: var(--al-link-line-height);
+  font-weight: var(--al-link-font-weight);
+  letter-spacing: var(--al-link-tracking);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--al-link-underline-default);
+  text-underline-offset: var(--al-link-underline-offset);
+  outline: none;
+  transition:
+    color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    text-decoration-thickness var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* the icon is decorative (aria-hidden in the markup); the text says it all */
+.al-link__icon {
+  flex: none;
+  width: var(--al-link-icon-size);
+  height: var(--al-link-icon-size);
+  color: currentColor;
+}
+
+/* inline: inherits the paragraph; a ring split across lines repeats per line */
+.al-link--inline {
+  display: inline;
+  font: inherit;
+  letter-spacing: inherit;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.al-link--inline .al-link__icon {
+  display: none;
+}
+
+.al-link:hover {
+  color: var(--al-link-text-hover);
+  text-decoration-thickness: var(--al-link-underline-hover);
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* :focus-visible, not :focus - the ring shows from the keyboard, not on click.
+   Same ring as the Button: a shadow, so it doesn't push the layout. */
+.al-link:focus-visible {
+  color: var(--al-link-text-focus);
+  text-decoration-thickness: var(--al-link-underline-hover);
+  box-shadow: var(--al-link-ring);
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-link { transition: none; }
+}
+
+/* AL Design System - Progress tokens
+ * GENERATED by src/components/progress/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-progress-track-bg: var(--al-bg-track);
+  --al-progress-fill-bg: var(--al-bg-brand);
+  --al-progress-label-text: var(--al-text-primary);
+  --al-progress-meta-text: var(--al-text-secondary);
+
+  /* geometry */
+  --al-progress-radius: var(--al-radius-full);
+  --al-progress-height: var(--al-space-8);
+  --al-progress-height-thin: var(--al-space-4);
+  --al-progress-gap: var(--al-space-8);
+
+  /* type - label and meta share one style */
+  --al-progress-font-size: var(--al-font-size-sm);
+  --al-progress-line-height: var(--al-line-height-sm);
+  --al-progress-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Progress
+ *
+ * Determinate only. The bar is a native <progress value max>: the browser
+ * exposes the value to assistive tech with no extra ARIA, and the name comes
+ * from the visible label through aria-labelledby (Thin: aria-label).
+ *
+ * Three types, one block:
+ *   .al-progress               Label - label + percentage over an 8px bar
+ *   .al-progress--steps        Steps - "N of total" in the meta ink
+ *   .al-progress--thin         Thin  - a 4px bar alone, no header
+ *
+ * The bar is never the only carrier of progress (usage rule 22): that is what
+ * pays the declared fill-on-track exception. No focus, no aria-live - the end
+ * of the task is announced by a Toast or an Alert, not by the bar.
+ *
+ * <progress> needs vendor pseudo-elements: WebKit/Blink draw the track in
+ * ::-webkit-progress-bar and the fill in ::-webkit-progress-value; Firefox
+ * paints the track on the element and the fill in ::-moz-progress-bar.
+ */
+
+.al-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-progress-gap);
+  inline-size: 100%;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-progress-font-size);
+  line-height: var(--al-progress-line-height);
+  font-weight: var(--al-progress-font-weight);
+}
+
+.al-progress__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--al-progress-gap);
+}
+
+.al-progress__label {
+  color: var(--al-progress-label-text);
+}
+
+/* percentage; tabular figures keep it from jittering as it counts up */
+.al-progress__value {
+  flex: none;
+  color: var(--al-progress-meta-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-progress--steps .al-progress__label {
+  color: var(--al-progress-meta-text);
+}
+
+/* ----------------------------------------------------------------- bar */
+.al-progress__bar {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--al-progress-height);
+  border: none;
+  border-radius: var(--al-progress-radius);
+  overflow: hidden;
+  background-color: var(--al-progress-track-bg);
+  color: var(--al-progress-fill-bg);
+}
+
+.al-progress--thin .al-progress__bar {
+  block-size: var(--al-progress-height-thin);
+}
+
+.al-progress__bar::-webkit-progress-bar {
+  background-color: var(--al-progress-track-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+/* the width change is the only motion: no shimmer, no loop (rule 23) */
+.al-progress__bar::-webkit-progress-value {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+  transition: inline-size var(--al-motion-duration-feedback) var(--al-motion-easing-enter);
+}
+
+.al-progress__bar::-moz-progress-bar {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-progress__bar::-webkit-progress-value { transition: none; }
+}

package/dist/components/link.css

@@ -0,0 +1,101 @@
+/* AL Design System - Link tokens
+ * GENERATED by src/components/link/tokens.py. Do not edit by hand.
+ *
+ * The default ink is the theme-invariant brand primitive; hover and focus
+ * point to text-brand, which the theme switches on :root.
+ */
+
+:root {
+  /* color - underline and icon inherit through currentColor */
+  --al-link-text-default: var(--al-color-orange-500);
+  --al-link-text-hover: var(--al-text-brand);
+  --al-link-text-focus: var(--al-text-brand);
+
+  /* focus */
+  --al-link-ring: var(--al-focus-ring-default);
+
+  /* geometry */
+  --al-link-underline-default: var(--al-border-width-1);
+  --al-link-underline-hover: var(--al-border-width-2);
+  --al-link-underline-offset: var(--al-space-4);
+  --al-link-gap: var(--al-space-8);
+  --al-link-icon-size: var(--al-icon-size-20);
+
+  /* type - standalone only; inline inherits the paragraph */
+  --al-link-font-size: var(--al-font-size-sm);
+  --al-link-line-height: var(--al-line-height-sm);
+  --al-link-font-weight: var(--al-font-weight-medium);
+  --al-link-tracking: 0em;
+}
+
+/* AL Design System - Link
+ *
+ * Always an <a href>. One type, always underlined: the underline is what
+ * separates the link from text, not the color (WCAG 1.4.1) - and it is what
+ * pays the default's declared contrast exception. Never remove it.
+ *
+ * Standalone (.al-link) uses label-md. Inside running text (.al-link--inline)
+ * it inherits the paragraph font and takes no icon.
+ *
+ * The underline is text-decoration, not a bottom border: it has to follow the
+ * text when an inline link wraps across lines. Its color is currentColor, so
+ * it follows the state's ink with no token of its own; the icon does the same.
+ */
+
+.al-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--al-link-gap);
+  color: var(--al-link-text-default);
+  font-family: var(--al-font-sans);
+  font-size: var(--al-link-font-size);
+  line-height: var(--al-link-line-height);
+  font-weight: var(--al-link-font-weight);
+  letter-spacing: var(--al-link-tracking);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--al-link-underline-default);
+  text-underline-offset: var(--al-link-underline-offset);
+  outline: none;
+  transition:
+    color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    text-decoration-thickness var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* the icon is decorative (aria-hidden in the markup); the text says it all */
+.al-link__icon {
+  flex: none;
+  width: var(--al-link-icon-size);
+  height: var(--al-link-icon-size);
+  color: currentColor;
+}
+
+/* inline: inherits the paragraph; a ring split across lines repeats per line */
+.al-link--inline {
+  display: inline;
+  font: inherit;
+  letter-spacing: inherit;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.al-link--inline .al-link__icon {
+  display: none;
+}
+
+.al-link:hover {
+  color: var(--al-link-text-hover);
+  text-decoration-thickness: var(--al-link-underline-hover);
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* :focus-visible, not :focus - the ring shows from the keyboard, not on click.
+   Same ring as the Button: a shadow, so it doesn't push the layout. */
+.al-link:focus-visible {
+  color: var(--al-link-text-focus);
+  text-decoration-thickness: var(--al-link-underline-hover);
+  box-shadow: var(--al-link-ring);
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-link { transition: none; }
+}

package/dist/components/progress.css

@@ -0,0 +1,115 @@
+/* AL Design System - Progress tokens
+ * GENERATED by src/components/progress/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-progress-track-bg: var(--al-bg-track);
+  --al-progress-fill-bg: var(--al-bg-brand);
+  --al-progress-label-text: var(--al-text-primary);
+  --al-progress-meta-text: var(--al-text-secondary);
+
+  /* geometry */
+  --al-progress-radius: var(--al-radius-full);
+  --al-progress-height: var(--al-space-8);
+  --al-progress-height-thin: var(--al-space-4);
+  --al-progress-gap: var(--al-space-8);
+
+  /* type - label and meta share one style */
+  --al-progress-font-size: var(--al-font-size-sm);
+  --al-progress-line-height: var(--al-line-height-sm);
+  --al-progress-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Progress
+ *
+ * Determinate only. The bar is a native <progress value max>: the browser
+ * exposes the value to assistive tech with no extra ARIA, and the name comes
+ * from the visible label through aria-labelledby (Thin: aria-label).
+ *
+ * Three types, one block:
+ *   .al-progress               Label - label + percentage over an 8px bar
+ *   .al-progress--steps        Steps - "N of total" in the meta ink
+ *   .al-progress--thin         Thin  - a 4px bar alone, no header
+ *
+ * The bar is never the only carrier of progress (usage rule 22): that is what
+ * pays the declared fill-on-track exception. No focus, no aria-live - the end
+ * of the task is announced by a Toast or an Alert, not by the bar.
+ *
+ * <progress> needs vendor pseudo-elements: WebKit/Blink draw the track in
+ * ::-webkit-progress-bar and the fill in ::-webkit-progress-value; Firefox
+ * paints the track on the element and the fill in ::-moz-progress-bar.
+ */
+
+.al-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-progress-gap);
+  inline-size: 100%;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-progress-font-size);
+  line-height: var(--al-progress-line-height);
+  font-weight: var(--al-progress-font-weight);
+}
+
+.al-progress__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--al-progress-gap);
+}
+
+.al-progress__label {
+  color: var(--al-progress-label-text);
+}
+
+/* percentage; tabular figures keep it from jittering as it counts up */
+.al-progress__value {
+  flex: none;
+  color: var(--al-progress-meta-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-progress--steps .al-progress__label {
+  color: var(--al-progress-meta-text);
+}
+
+/* ----------------------------------------------------------------- bar */
+.al-progress__bar {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--al-progress-height);
+  border: none;
+  border-radius: var(--al-progress-radius);
+  overflow: hidden;
+  background-color: var(--al-progress-track-bg);
+  color: var(--al-progress-fill-bg);
+}
+
+.al-progress--thin .al-progress__bar {
+  block-size: var(--al-progress-height-thin);
+}
+
+.al-progress__bar::-webkit-progress-bar {
+  background-color: var(--al-progress-track-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+/* the width change is the only motion: no shimmer, no loop (rule 23) */
+.al-progress__bar::-webkit-progress-value {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+  transition: inline-size var(--al-motion-duration-feedback) var(--al-motion-easing-enter);
+}
+
+.al-progress__bar::-moz-progress-bar {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-progress__bar::-webkit-progress-value { transition: none; }
+}

package/dist/foundation.css

@@ -1,5 +1,5 @@
 /* AL Design System - Foundation
- * v1.0.1 - MIT
+ * v1.2.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -87,6 +87,7 @@
   --al-bg-active-raised: #E0E0E0;
   --al-bg-thumb: #B3B3B3;
   --al-bg-thumb-disabled: #CECECE;
+  --al-bg-track: #E0E0E0;
   --al-bg-scrim: #1818188F;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #C53900;
@@ -244,6 +245,7 @@
     --al-bg-active-raised: #717171;
     --al-bg-thumb: #717171;
     --al-bg-thumb-disabled: #565656;
+    --al-bg-track: #565656;
     --al-bg-scrim: #000000A3;
     --al-bg-brand: #FC5000;
     --al-bg-brand-hover: #EA4900;
@@ -309,6 +311,7 @@
   --al-bg-active-raised: #717171;
   --al-bg-thumb: #717171;
   --al-bg-thumb-disabled: #565656;
+  --al-bg-track: #565656;
   --al-bg-scrim: #000000A3;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #EA4900;

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "AL Design System",
-    "version": "1.0.1",
+    "version": "1.2.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",
@@ -151,6 +151,10 @@
         "#CECECE",
         "#565656"
       ],
+      "bg-track": [
+        "#E0E0E0",
+        "#565656"
+      ],
       "bg-scrim": [
         "#1818188F",
         "#000000A3"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "al-design-system",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "AL Design System: Foundation and components in plain CSS, from Figma to code.",
   "license": "MIT",
   "author": "Guilherme Domingues",