@kenlo/sds-design-system 1.1.1 → 1.2.0

package/README.md

@@ -210,8 +210,9 @@ pedido e os ramos pessoais são bloqueados. Falta quem administra o pages.kenlo.
 automático: a esteira do `kenlo-pages` montar o portal a partir deste repositório, ou a esteira daqui
 publicar depois de cada merge.
 
-**Enquanto isso:** a esteira daqui já tem o passo `deploy-portal`, que publica o portal num bucket a cada
-merge na `main`, parado à espera de duas variáveis (`SDS_DOCS_BUCKET` e `SDS_GCP_SA_KEY`). Com
+**Enquanto isso:** a esteira daqui publica o portal a cada merge na `main` em
+https://storage.googleapis.com/kenlo-open-docs/sds-design-system/index.html, no mesmo bucket do portal
+do KDLS e com a mesma chave (`GCP_SA_KEY_PRD`; decisão do Rafael Leobas, 13/11/2026). Com
 `base: './'` em `portal/vite.config.js`, o portal montado funciona em qualquer pasta (bucket ou
 pages.kenlo.io).
 

package/components/Accordion/Accordion.css

@@ -184,3 +184,10 @@ details.sds-accordion > summary::marker {
 details.sds-accordion.sds-accordion--closing > .sds-accordion__body-wrap {
   grid-template-rows: 0fr;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-accordion__header:hover {
+  background-color: var(--color-neutral-20);
+}

package/components/Badge/Badge.css

@@ -379,3 +379,10 @@
     color: CanvasText;
   }
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-badge--neutral.sds-badge--tone-10 {
+  background: var(--color-neutral-20);
+}

package/components/Button/Button.css

@@ -304,14 +304,14 @@
 }
 [data-theme="dark"] .sds-button:disabled,
 [data-theme="dark"] .sds-button[aria-disabled="true"] {
-  background-color: var(--color-neutral-30) !important;
+  background-color: var(--color-neutral-40) !important;
   border-color: var(--border-interactive-color) !important;
-  color: var(--color-neutral-40) !important;
+  color: var(--color-neutral-50) !important;
 }
 [data-theme="dark"] .sds-button--link:disabled,
 [data-theme="dark"] .sds-button--link[aria-disabled="true"] {
   background-color: transparent !important;
-  color: var(--color-neutral-40) !important;
+  color: var(--color-neutral-50) !important;
   border-color: transparent !important;
 }
 [data-theme="dark"] .sds-button--ghost:disabled,
@@ -320,7 +320,7 @@
 [data-theme="dark"] .sds-button--pill[aria-disabled="true"] {
   background-color: transparent !important;
   border-color: var(--border-interactive-color) !important;
-  color: var(--color-neutral-40) !important;
+  color: var(--color-neutral-50) !important;
 }
 /* ──────────────────────────────────────────────
    NEUTRAL SCHEME DARK MODE OVERRIDE
@@ -331,7 +331,7 @@
   background-color: transparent;
 }
 [data-theme="dark"] .sds-button--pill:active:not(:disabled):not(.sds-button--loading) {
-  background-color: var(--color-neutral-30);
+  background-color: var(--color-neutral-40);
 }
 /* Four more dead rules stood here, and they looked at first like a design intention worth
    keeping: they set the primary button's own FILL in the dark theme, to `--color-neutral-80`

package/components/Checkbox/Checkbox.css

@@ -140,7 +140,7 @@
   border-color: var(--border-static-color);
 }
 [data-theme="dark"] .sds-checkbox-container {
-  border-color: var(--color-neutral-60);
+  border-color: var(--color-neutral-80);
 }
 /* Hint */
 .sds-checkbox-wrapper {

package/components/DatePicker/DatePicker.css

@@ -285,7 +285,7 @@
   border-bottom-color: var(--border-static-color);
 }
 [data-theme="dark"] .sds-datepicker__day--other {
-  color: var(--color-neutral-50);
+  color: var(--color-neutral-70);
 }
 [data-theme="dark"] .sds-datepicker__footer {
   border-top-color: var(--border-static-color);
@@ -449,3 +449,10 @@
     var(--color-primary-50) border-box;
   border-color: transparent;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-datepicker__weekdays {
+  background: var(--color-neutral-20);
+}

package/components/Header/Header.css

@@ -254,7 +254,7 @@
 }
 .sds-header__notification-time {
   font-size: 11px;
-  color: var(--color-neutral-40);
+  color: var(--color-neutral-50);
   white-space: nowrap;
   flex-shrink: 0;
   margin-top: var(--spacing-0-5);
@@ -455,3 +455,19 @@
 [data-radius="soft"] .sds-header__icon-btn { border-radius: 11px; }
 [data-radius="medium"] .sds-header__icon-btn { border-radius: 15px; }
 [data-radius="rounded"] .sds-header__icon-btn { border-radius: var(--radius-full); }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-header__products-item:hover,
+[data-theme="dark"] .sds-header__notification-item:hover,
+[data-theme="dark"] .sds-header__profile-item:hover,
+[data-theme="dark"] .sds-header__mobile-row:hover {
+  background: var(--color-neutral-20);
+}
+[data-theme="dark"] .sds-header__notification-item {
+  border-bottom-color: var(--border-static-color);
+}
+[data-theme="dark"] .sds-header__mobile-divider {
+  border-top-color: var(--border-static-color);
+}

package/components/Incrementer/Incrementer.css

@@ -82,15 +82,15 @@
 ────────────────────────────────────────────── */
 
 [data-theme="dark"] .sds-incrementer__btn:hover:not(:disabled) {
-  background: var(--color-neutral-30);
+  background: var(--color-neutral-40);
 }
 [data-theme="dark"] .sds-incrementer__btn:active:not(:disabled) {
-  background: var(--color-neutral-40);
+  background: var(--color-neutral-50);
 }
 [data-theme="dark"] .sds-incrementer--disabled {
-  background: var(--color-neutral-30);
+  background: var(--color-neutral-40);
   border-color: var(--border-interactive-color);
-  color: var(--color-neutral-40);
+  color: var(--color-neutral-50);
 }
 
 /* ── The site's gradient, on the stroke ────────────────────────────────────────

package/components/Input/Input.css

@@ -391,19 +391,50 @@
 .sds-input__hint--disabled { color: var(--color-neutral-40); }
 /* ── Textbox (textarea) variant ── */
 .sds-input--textbox {
-  height: auto;
+  height: var(--sds-textarea-height, auto);
   min-height: var(--sds-textarea-min-height, 114px);
   align-items: flex-start;
-  resize: vertical;
   overflow: hidden;
 }
-/* Field: fixed padding-top — guarantees constant height regardless of state */
+/* Field: fixed padding-top — guarantees constant height regardless of state.
+   The textarea runs down to the bottom border, as in KDLS: past the last row the start of
+   the next line shows cut at the edge, so a longer text reads as one that goes on. */
 .sds-input--textbox .sds-input__field {
   min-height: 0;
   padding-top: var(--spacing-7);
-  padding-bottom: var(--spacing-3);
+  padding-bottom: 0;
   align-self: stretch;
 }
+/* The target grows with the corner radius so the rounded corner never eats into its 24px,
+   and the grip moves in with it so it stays inside the curve. */
+.sds-input__resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: max(var(--spacing-6), calc(var(--radius-md) * 0.5 + var(--spacing-4)));
+  height: max(var(--spacing-6), calc(var(--radius-md) * 0.5 + var(--spacing-4)));
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 0 max(var(--spacing-1), calc(var(--radius-md) * 0.3)) max(var(--spacing-1), calc(var(--radius-md) * 0.3)) 0;
+  box-sizing: border-box;
+  color: var(--color-neutral-50);
+  cursor: ns-resize;
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+  transition: color 120ms ease;
+}
+.sds-input__resize-handle:hover,
+.sds-input--resizing .sds-input__resize-handle {
+  color: var(--color-primary-50-solid);
+}
+.sds-input__resize-handle:focus-visible {
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-input--resizing {
+  user-select: none;
+}
 .sds-input--textbox .sds-input__label {
   top: 26px;
   transform: translateY(-50%);
@@ -420,18 +451,26 @@
   font-size: var(--font-size-label-sm);
   line-height: var(--lh-label-sm);
 }
+/* The textarea also runs over half of the field's right padding, so its scrollbar sits 8px
+   from the right border instead of 16px inside the text's room, as in KDLS. The gutter is
+   kept even without a bar, so the text ends at the same place with or without one. Its own
+   8px at the end is the bottom room, reached when it scrolls to the end. */
 .sds-input__native--textarea {
+  box-sizing: border-box;
   padding-top: 0;
-  padding-bottom: 0;
+  padding-right: 0;
+  padding-bottom: var(--spacing-2);
   resize: none;
   flex: 1;
   line-height: var(--lh-body-md);
   overflow-y: auto;
-  width: 100%;
+  scrollbar-gutter: stable;
+  width: calc(100% + var(--spacing-2));
+  margin-right: calc(-1 * var(--spacing-2));
 }
 /* ── Dark mode ── */
 [data-theme="dark"] .sds-input__country {
-  background-color: var(--color-neutral-20);
+  background-color: var(--color-neutral-30);
 }
 /* ── Phone country dropdown ── */
 .sds-input-phone-wrap {
@@ -572,3 +611,10 @@
     var(--color-primary-50) border-box;
   border-color: transparent;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-phone-dropdown__item:hover {
+  background: var(--color-neutral-20);
+}

package/components/Input/input.marko

@@ -47,6 +47,9 @@ import { assertInputType, assertFeedback, assertWidth, formatValue, nativeTypeFo
 import { validateOnFor, SUBMIT_EVENT } from "../Form/form-context.js";
 import { rehyphenate } from "../../foundations/attrs.js";
 
+static const TEXTBOX_LINE = 24;
+static const TEXTBOX_CHROME = 42;
+
 class {
   onCreate(input) {
     this.state = {
@@ -56,6 +59,8 @@ class {
       showPassword: false,
       error: null,
       touched: false,
+      textboxHeight: null,
+      resizing: false,
     };
   }
 
@@ -137,9 +142,58 @@ class {
   }
 
   onDestroy() {
+    this.stopResize?.();
     this.getEl("field-root")?.removeEventListener(SUBMIT_EVENT, this.onFormSubmit);
   }
 
+  get textboxMinHeight() {
+    return (this.input.rows ?? 3) * TEXTBOX_LINE + TEXTBOX_CHROME;
+  }
+
+  clampTextboxHeight(value) {
+    return Math.max(this.textboxMinHeight, Math.round(value));
+  }
+
+  currentTextboxHeight() {
+    return this.state.textboxHeight
+      ?? (this.getEl("box")?.getBoundingClientRect().height || this.textboxMinHeight);
+  }
+
+  startResize(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = this.currentTextboxHeight();
+    this.state.resizing = true;
+
+    const onMove = (moveEvent) => {
+      this.state.textboxHeight = this.clampTextboxHeight(startHeight + moveEvent.clientY - startY);
+    };
+    const onUp = () => {
+      this.stopResize = null;
+      this.state.resizing = false;
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      document.removeEventListener("pointercancel", onUp);
+    };
+    this.stopResize = onUp;
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.addEventListener("pointercancel", onUp);
+  }
+
+  resizeByKey(event) {
+    const keys = {
+      ArrowDown: () => this.currentTextboxHeight() + TEXTBOX_LINE,
+      ArrowUp: () => this.currentTextboxHeight() - TEXTBOX_LINE,
+      Home: () => this.textboxMinHeight,
+    };
+    const next = keys[event.key];
+    if (!next) return;
+    event.preventDefault();
+    this.state.textboxHeight = this.clampTextboxHeight(next());
+  }
+
   get currentValue() {
     return this.input.value !== undefined ? this.input.value : this.state.value;
   }
@@ -306,6 +360,7 @@ $ {
     // KDLS marks only the textbox. A modifier per type produced ten classes no rule
     // matched — dead weight in every field's class attribute.
     type === "textbox" ? "sds-input--textbox" : "",
+    state.resizing ? "sds-input--resizing" : "",
     effectiveFeedback !== "none" ? `sds-input--feedback-${effectiveFeedback}` : "",
     disabled ? "sds-input--disabled" : "",
     loading ? "sds-input--loading" : "",
@@ -348,9 +403,13 @@ $ {
     // that reads it and lost the line that writes it. 24px a line plus the 42px the label
     // and padding take, which is KDLS's arithmetic.
     <div
+      key="box"
       class=fieldBoxClass
       aria-busy=(loading ? "true" : null)
-      style=(isTextarea ? `--sds-textarea-min-height: ${rows * 24 + 42}px` : null)
+      style=(isTextarea
+        ? `--sds-textarea-min-height: ${component.textboxMinHeight}px`
+          + (state.textboxHeight !== null ? `; --sds-textarea-height: ${state.textboxHeight}px` : "")
+        : null)
     >
       <if(showsCountry)>
         <!-- The flag opens the list and the dial code sits beside it, which is the whole
@@ -465,6 +524,24 @@ $ {
         </button>
       </if>
 
+      <if(isTextarea && !disabled)>
+        <div
+          class="sds-input__resize-handle"
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Redimensionar campo"
+          aria-valuemin=component.textboxMinHeight
+          aria-valuenow=(state.textboxHeight ?? component.textboxMinHeight)
+          tabindex="0"
+          on-pointerdown("startResize")
+          on-keydown("resizeByKey")
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M9 1L1 9M9 5L5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </if>
+
       <if(showsIncrementer)>
         <div class="sds-input__spinner">
           <button type="button" class="sds-input__spinner-btn" tabindex="-1"

package/components/Pill/Pill.css

@@ -99,9 +99,9 @@
 }
 [data-theme="dark"] .sds-pill:disabled,
 [data-theme="dark"] .sds-pill[aria-disabled="true"] {
-  background-color: var(--color-neutral-30) !important;
+  background-color: var(--color-neutral-40) !important;
   border-color: var(--border-interactive-color) !important;
-  color: var(--color-neutral-40) !important;
+  color: var(--color-neutral-50) !important;
 }
 [data-theme="dark"] .sds-pill--off:disabled,
 [data-theme="dark"] .sds-pill--off[aria-disabled="true"] {
@@ -180,7 +180,7 @@
 }
 [data-theme="dark"] .sds-pill:disabled .sds-notification,
 [data-theme="dark"] .sds-pill[aria-disabled="true"] .sds-notification {
-  color: var(--color-neutral-30);
+  color: var(--color-neutral-40);
 }
 /* ──────────────────────────────────────────────
    DARK MODE
@@ -189,7 +189,7 @@
   background-color: transparent;
 }
 [data-theme="dark"] .sds-pill--off:active:not(:disabled):not(.sds-pill--loading) {
-  background-color: var(--color-neutral-30);
+  background-color: var(--color-neutral-40);
 }
 
 /* ── The site's gradient, on the stroke ────────────────────────────────────────

package/components/Radio/Radio.css

@@ -151,7 +151,7 @@
   border-color: var(--border-static-color);
 }
 [data-theme="dark"] .sds-radio-container {
-  border-color: var(--color-neutral-60);
+  border-color: var(--color-neutral-80);
 }
 /* Wrapper — vertical stack with tight gap */
 .sds-radio-wrapper {

package/components/SearchBar/SearchBar.css

@@ -179,3 +179,10 @@
 .sds-search-bar--fill {
   width: 100%;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-search-bar--disabled {
+  background-color: var(--color-neutral-20);
+}

package/components/Select/Select.css

@@ -361,7 +361,7 @@
 }
 [data-theme="dark"] .sds-select__option:hover,
 [data-theme="dark"] .sds-select__option--selected {
-  background: var(--color-neutral-20);
+  background: var(--color-neutral-30);
 }
 
 /* The clear control.
@@ -445,3 +445,11 @@
 [data-radius="soft"] .sds-select__option { border-radius: 11px; }
 [data-radius="medium"] .sds-select__option { border-radius: 15px; }
 [data-radius="rounded"] .sds-select__option { border-radius: var(--radius-full); }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-select__option:focus-visible,
+[data-theme="dark"] .sds-select__list:focus .sds-select__option[data-active="true"] {
+  background: var(--color-neutral-20);
+}

package/components/Skeleton/Skeleton.css

@@ -98,3 +98,18 @@
   background-size: 400% 100%;
   animation: sds-skeleton-shimmer 1.4s ease infinite;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-skeleton__avatar,
+[data-theme="dark"] .sds-skeleton__button,
+[data-theme="dark"] .sds-skeleton__input,
+[data-theme="dark"] .sds-skeleton__image,
+[data-theme="dark"] .sds-skeleton__line {
+  background: var(--color-neutral-20);
+}
+[data-theme="dark"] .sds-skeleton--active {
+  background: linear-gradient(90deg, var(--color-neutral-20) 25%, var(--color-neutral-30) 37%, var(--color-neutral-20) 63%);
+  background-size: 400% 100%;
+}

package/components/Switch/Switch.css

@@ -60,10 +60,10 @@
   background-color: var(--color-neutral-40);
 }
 [data-theme="dark"] .sds-switch--disabled .sds-switch__track {
-  background-color: var(--color-neutral-40) !important;
+  background-color: var(--color-neutral-50) !important;
 }
 [data-theme="dark"] .sds-switch--disabled .sds-switch__thumb {
-  background-color: var(--color-neutral-20);
+  background-color: var(--color-neutral-30);
 }
 .sds-switch--disabled .sds-switch__label {
   color: var(--color-neutral-40);
@@ -117,7 +117,7 @@
   border-color: var(--border-static-color);
 }
 [data-theme="dark"] .sds-switch-container {
-  border-color: var(--color-neutral-60);
+  border-color: var(--color-neutral-80);
 }
 /* Wrapper — vertical stack with tight gap */
 .sds-switch-wrapper {
@@ -140,10 +140,10 @@
 .sds-switch-container + .sds-switch__hint { padding-left: var(--spacing-4); }
 /* Dark mode */
 [data-theme="dark"] .sds-switch--off .sds-switch__track {
-  background-color: var(--color-neutral-40);
+  background-color: var(--color-neutral-50);
 }
 [data-theme="dark"] .sds-switch--off:not(.sds-switch--disabled):hover .sds-switch__track {
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-neutral-70);
 }
 [data-theme="dark"] .sds-switch-container--disabled {
   border-color: var(--border-interactive-color);

package/components/Table/Table.css

@@ -230,6 +230,11 @@
   opacity: 0;
   transition: opacity 120ms ease;
 }
+/* Dark: neutral 40 would drop to #626262 (2.8:1 on the card); neutral 50 keeps
+   about the grey this hint had before the eleven-step ramp. */
+[data-theme="dark"] .sds-table__sort--compact {
+  color: var(--color-neutral-50);
+}
 .sds-table__sort--compact .sds-icon + .sds-icon {
   margin-top: calc(-1 * var(--spacing-2));
 }
@@ -339,3 +344,11 @@
   display: contents;
   padding: 0;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-table__row:hover:not(.sds-table__row--header),
+[data-theme="dark"] .sds-table__row--selected:hover {
+  background: var(--color-neutral-20);
+}

package/components/Toast/Toast.css

@@ -3,7 +3,7 @@
    by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
  *//* ============================================================
    SDS Toast
-   Light: --color-neutral-90 bg (#1A1A1A) + --color-neutral-00 text (#FFFFFF)
+   Light: --color-neutral-90 bg (#1C1C1C) + --color-neutral-00 text (#FFFFFF)
    Dark:  tokens auto-invert → light bg + dark text
    ============================================================ */
 

package/components/Toggle/Toggle.css

@@ -37,11 +37,11 @@
   color: var(--color-neutral-40);
 }
 [data-theme="dark"] .sds-toggle--disabled {
-  background: var(--color-neutral-30);
+  background: var(--color-neutral-40);
   border-color: var(--border-interactive-color);
 }
 [data-theme="dark"] .sds-toggle--disabled .sds-toggle__item--active {
-  background: var(--color-neutral-40);
+  background: var(--color-neutral-50);
   color: var(--component-bg-color);
 }
 /* ── Item (default = 40px track height) ────────────────────────── */
@@ -207,3 +207,10 @@
   border: none;
   filter: brightness(1.1);
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-toggle__item:hover:not(:disabled) {
+  background: var(--color-neutral-20);
+}

package/components/Uploader/Uploader.css

@@ -196,3 +196,10 @@ button.sds-uploader {
     var(--color-primary-50) border-box;
   border-color: transparent;
 }
+
+/* Dark theme on the eleven-step ramp: neutral 10 resolves to the component ground
+   (#1c1c1c), so a fill or divider painted with it on a component steps to neutral 20
+   (or the static border) to stay visible. */
+[data-theme="dark"] .sds-uploader {
+  background: var(--color-neutral-20);
+}

package/foundations/tokens.css

@@ -137,10 +137,15 @@
    aliases. All of it is removed; the mapping below is lifted verbatim from that
    file's own [data-color-scheme="neutral"] block. */
 :root {
-  --color-primary-10: var(--color-neutral-10);
-  --color-primary-20: var(--color-neutral-20);
-  --color-primary-30: var(--color-neutral-30);
-  --color-primary-40: var(--color-neutral-50);
+  /* The tints (10-40) use the ten-step pair names on purpose. They mirror one step short
+     (10 <-> 80), so in the dark theme they stay a step above the card (#1c1c1c):
+     primary-10 is #323232, and a selected row or a hover stays visible. The short names
+     mirror to the full 100 - N, which would put primary-10 on the card colour itself.
+     The light theme is the same either way. */
+  --color-primary-10: var(--color-neutral-10-80);
+  --color-primary-20: var(--color-neutral-20-70);
+  --color-primary-30: var(--color-neutral-30-60);
+  --color-primary-40: var(--color-neutral-50-40);
   /* The principal tone. It points at neutral-80 rather than neutral-50, and it is the only
      scheme where the 50 is not the family's own 50: a mid grey has no presence as the
      colour of a button. */
@@ -164,10 +169,11 @@
 
 /* --------------------------------COLOR SCHEMES--------------------------------- */
 [data-color-scheme="neutral"] {
-  --color-primary-10: var(--color-neutral-10);
-  --color-primary-20: var(--color-neutral-20);
-  --color-primary-30: var(--color-neutral-30);
-  --color-primary-40: var(--color-neutral-50);
+  /* Same tints as the floor above, for the same reason. */
+  --color-primary-10: var(--color-neutral-10-80);
+  --color-primary-20: var(--color-neutral-20-70);
+  --color-primary-30: var(--color-neutral-30-60);
+  --color-primary-40: var(--color-neutral-50-40);
   --color-primary-50: var(--color-neutral-80);
   --color-primary-60: var(--color-neutral-90);
   --color-primary-70: var(--color-neutral-90);
@@ -285,60 +291,83 @@
 }
 
 /* ------------------------------------------------------------------------------ *//* -----------------------------------NEUTRAL------------------------------------ */
+/* The neutral ramp has eleven steps, 00 to 100 (Rafael Leobas, UX, 2026-11-13), the
+   same values as KDLS. Steps 10–90 invert: in the dark theme step N shows the light value
+   of step 100 − N, which is what the `N-(100-N)` pair names say. 00 and 100 stay the
+   absolutes declared above (white and black in both themes).
+
+   Two kinds of pair live here:
+   - `N-(100-N)`: the ramp itself, literals in both themes. The label-contrast generator
+     reads these.
+   - `N-(90-N)`: the names of the ten-step ramp, kept so nothing that reads one breaks.
+     Light = the new value of N, dark = the new value of 90 − N. `00-90` stays a literal
+     because it is the component ground (`--component-bg-color`); the rest point at the
+     ramp. */
+:root {
+  --color-neutral-10-90: #ebebeb;
+  --color-neutral-20-80: #d0d0d0;
+  --color-neutral-30-70: #b6b6b6;
+  --color-neutral-40-60: #9d9d9d;
+  --color-neutral-50-50: #848484;
+  --color-neutral-60-40: #626262;
+  --color-neutral-70-30: #494949;
+  --color-neutral-80-20: #323232;
+  --color-neutral-90-10: #1c1c1c;
+  --color-neutral-00-100: var(--color-white);
+  --color-neutral-100-00: var(--color-black);
+}
+
+[data-theme="dark"] {
+  --color-neutral-10-90: #1c1c1c;
+  --color-neutral-20-80: #323232;
+  --color-neutral-30-70: #494949;
+  --color-neutral-40-60: #626262;
+  --color-neutral-50-50: #848484;
+  --color-neutral-60-40: #9d9d9d;
+  --color-neutral-70-30: #b6b6b6;
+  --color-neutral-80-20: #d0d0d0;
+  --color-neutral-90-10: #ebebeb;
+  --color-neutral-00-100: var(--color-black);
+  --color-neutral-100-00: var(--color-white);
+}
+
+/* The ten-step pair names. */
 :root {
   --color-neutral-00-90: #ffffff;
-  --color-neutral-10-80: #f2f2f2;
-  --color-neutral-20-70: #e6e6e6;
-  --color-neutral-30-60: #d8d8d8;
-  --color-neutral-40-50: #b8b8b8;
-  --color-neutral-50-40: #808080;
-  --color-neutral-60-30: #595959;
-  --color-neutral-70-20: #404040;
-  --color-neutral-80-10: #262626;
-  --color-neutral-90-00: #1a1a1a;
+  --color-neutral-10-80: var(--color-neutral-10-90);
+  --color-neutral-20-70: var(--color-neutral-20-80);
+  --color-neutral-30-60: var(--color-neutral-30-70);
+  --color-neutral-40-50: var(--color-neutral-40-60);
+  --color-neutral-50-40: var(--color-neutral-50-50);
+  --color-neutral-60-30: var(--color-neutral-60-40);
+  --color-neutral-70-20: var(--color-neutral-70-30);
+  --color-neutral-80-10: var(--color-neutral-80-20);
+  --color-neutral-90-00: var(--color-neutral-90-10);
 }
 
 [data-theme="dark"] {
-  --color-neutral-00-90: #1a1a1a;
-  --color-neutral-10-80: #262626;
-  --color-neutral-20-70: #404040;
-  --color-neutral-30-60: #595959;
-  --color-neutral-40-50: #808080;
-  --color-neutral-50-40: #b8b8b8;
-  --color-neutral-60-30: #d8d8d8;
-  --color-neutral-70-20: #e6e6e6;
-  --color-neutral-80-10: #f2f2f2;
-  --color-neutral-90-00: #ffffff;
+  --color-neutral-00-90: #1c1c1c;
+  --color-neutral-10-80: var(--color-neutral-20-80);
+  --color-neutral-20-70: var(--color-neutral-30-70);
+  --color-neutral-30-60: var(--color-neutral-40-60);
+  --color-neutral-40-50: var(--color-neutral-50-50);
+  --color-neutral-50-40: var(--color-neutral-60-40);
+  --color-neutral-60-30: var(--color-neutral-70-30);
+  --color-neutral-70-20: var(--color-neutral-80-20);
+  --color-neutral-80-10: var(--color-neutral-90-10);
+  --color-neutral-90-00: var(--color-white);
 }
 
 :root {
-  --color-neutral-10: var(
-    --color-neutral-10-80
-  );
-  --color-neutral-20: var(
-    --color-neutral-20-70
-  );
-  --color-neutral-30: var(
-    --color-neutral-30-60
-  );
-  --color-neutral-40: var(
-    --color-neutral-40-50
-  );
-  --color-neutral-50: var(
-    --color-neutral-50-40
-  );
-  --color-neutral-60: var(
-    --color-neutral-60-30
-  );
-  --color-neutral-70: var(
-    --color-neutral-70-20
-  );
-  --color-neutral-80: var(
-    --color-neutral-80-10
-  );
-  --color-neutral-90: var(
-    --color-neutral-90-00
-  );
+  --color-neutral-10: var(--color-neutral-10-90);
+  --color-neutral-20: var(--color-neutral-20-80);
+  --color-neutral-30: var(--color-neutral-30-70);
+  --color-neutral-40: var(--color-neutral-40-60);
+  --color-neutral-50: var(--color-neutral-50-50);
+  --color-neutral-60: var(--color-neutral-60-40);
+  --color-neutral-70: var(--color-neutral-70-30);
+  --color-neutral-80: var(--color-neutral-80-20);
+  --color-neutral-90: var(--color-neutral-90-10);
 }
 
 /* ------------------------------------------------------------------------------ *//* -----------------------------------PRIMARY------------------------------------ */
@@ -1210,7 +1239,8 @@
 
 /* ------------------------------------------------------------------------------ *//* -----------------------------PAGE BACKGROUND----------------------------- */
 /* KDLS wrote both of these as literals. They are the palette values they always meant:
-   #f2f2f2 is --color-neutral-10 in the light theme, and #000000 is --color-black. */
+   --color-neutral-10 in the light theme (#ebebeb since the eleven-step ramp; it was
+   #f2f2f2), and --color-black in the dark one. */
 :root {
   --page-bg-color: var(--color-neutral-10);
 }
@@ -2407,7 +2437,7 @@
   --color-neutral-20-on: var(--color-neutral-90);
   --color-neutral-30-on: var(--color-neutral-90);
   --color-neutral-40-on: var(--color-neutral-90);
-  --color-neutral-50-on: var(--color-black);
+  --color-neutral-50-on: var(--color-neutral-90);
   --color-neutral-60-on: var(--color-neutral-10);
   --color-neutral-70-on: var(--color-neutral-10);
   --color-neutral-80-on: var(--color-neutral-10);
@@ -2526,7 +2556,7 @@
   --color-neutral-10-on: var(--color-neutral-90);
   --color-neutral-20-on: var(--color-neutral-90);
   --color-neutral-30-on: var(--color-neutral-90);
-  --color-neutral-40-on: var(--color-black);
+  --color-neutral-40-on: var(--color-neutral-90);
   --color-neutral-50-on: var(--color-neutral-10);
   --color-neutral-60-on: var(--color-neutral-10);
   --color-neutral-70-on: var(--color-neutral-10);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/sds-design-system",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "SDS, the Site Design System \u2014 Marko 5 components for Kenlo's public products (Site, Landing Page, Blog)",
   "license": "UNLICENSED",
   "repository": {