@kenlo/sds-design-system 1.1.2 → 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

@@ -470,7 +470,7 @@
 }
 /* ── 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 {
@@ -611,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/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.2",
+  "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": {