al-design-system 1.0.1 → 1.1.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 + 24 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) |
@@ -54,7 +55,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.1.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 +64,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 24 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 + 24 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) |
@@ -54,7 +55,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.1.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 +64,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 24 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.1.0 - Foundation + 24 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.0.1 - MIT
+ * v1.1.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -6825,3 +6825,105 @@
     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; }
+}

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/foundation.css

@@ -1,5 +1,5 @@
 /* AL Design System - Foundation
- * v1.0.1 - MIT
+ * v1.1.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "AL Design System",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",

package/package.json

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