Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug]: Internal and external design token hashes don't match

Aperta
  • Qualcosa non va?
#5,117 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
design

Direzione di ricerca

Start by comparing how @cloudscape-design/design-tokens generates or consumes CSS variable names with how @cloudscape-design/components and @cloudscape-design/global-styles emit them; the issue does not name source files or tests. Reproduce with the listed package versions and applyMode(Mode.Dark), then check whether the token variable set by dark mode is the one used by the inline style. Done when the packages' supported version contract is clear and the documented usage produces the dark-mode background.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
Browser

Chrome

Package version

3.0.1330

React version
Description

I fully admit I may not be understanding something here about how this is supposed to be used, but I'm going by (as far as I can tell) official documentation.

I'm trying to implement dark mode in my application, and I have had to override some color somewhere in one of my controls (you may already feel where this is going).

As per the design token documentation, I am doing the following:

import * as awsui from '@cloudscape-design/design-tokens';

return (
          <div style={{ backgroundColor: awsui.colorBackgroundContainerContent }}></div>
  );

The dark mode documentation says that I should be using design tokens everywhere, which I'm doing, so I'm feeling good.

By the way, that page has 0 context on how to actually apply dark mode itself, which I've had to Google to come out to something like this:

import { applyMode, Mode } from "@cloudscape-design/global-styles";

export type LightDarkPreference = 'system' | 'dark' | 'light';

let userPreference = localStorage.getItem('light-dark-preference') as LightDarkPreference | null ?? 'system';
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

// Initialize color mode based on user's OS preference and stay in sync if the preference changes.
systemDarkMode.addEventListener('change', () => refreshDarkMode());
refreshDarkMode();

function refreshDarkMode() {
  if (userPreference === 'system') {
    applyMode(systemDarkMode.matches ? Mode.Dark : Mode.Light);
  } else if (userPreference === 'dark') {
    applyMode(Mode.Dark);
  } else {
    applyMode(Mode.Light);
  }
}

The symptom

But of course, when I switch to Dark Mode my background is still bright white. The design token didn't do anything:

Image

The promixate cause

When I look at the CSS it's because the variable names don't match:

// Variable consumed by the design-tokens library
background-color: var(--color-background-container-content-mjfil9, #ffffff);

// Variable set by the <body> element
.awsui-dark-mode:not(#\ ) {
   --color-background-container-content-6u8rvp: var(--color-neutral-850-3f0gro);
}

The root cause?

Because mjfil9 != 6u8rvp, the variable that is set is not the variable that is read.

But my question is: why? I'm following documentation (as far as I can tell).

I'm consuming the following packages... they're not all the same major version but they are all the same major version line as the most recent packges (v3 for components and design-tokens, v1 for global-styles). I could perhaps expect incompatibilities between major version lines, but not inside a major version line.

@cloudscape-design/components 3.0.1330
@cloudscape-design/design-tokens 3.0.114
@cloudscape-design/global-styles 1.0.62

As far as I can tell I also only have one copy of each, so it's not multiple copies of the same package at slightly different versions, which should have been deduplicated but weren't.

What is the contract here?

Please tell me the it isn't "I have to go hunt for the exact patch version of components that was used to build design-tokens (or the other way around), and any time I upgrade one of the packages I have to go hunt for the patch version again" ?

Source code

No response

Reproduction

No response

Code of Conduct
Lingua principale
TypeScript
Stelle
2.7k
Fork
248
Merge medio
3g 14h
PR unite (30g)
83

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

Tutte le issue di cloudscape-design/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.