Jak upravit styly pro Spectro

V TEAF 24.01 došlo k razantním změnám v oblasti barev. Rozhodli jsme se jít cestou CSS Custom Properties, které nám nabízí větší dynamiku a nativní podporu. Revizí prošlo také názvosloví proměnných. Chtěli jsme se vyhnout číselným řadám, proto využíváme tzv. důrazy. Často se tak setkáte s koncovkami -miminal, -subtle, -strong, … Věříme, že nový systém pojmenovávání přinese lepší developer experience.

Barvy

Pravděpodobně nejvíce se setkáte s chybami při používání mixinů .themify() a .contrastify(). Ty ještě v code base přítomy jsou, nicméně vyžadují proměnné, které však již neexistují.

Foo.less

.foo {
  .themify(background-color; @white @grey--80);
  .contrastify(@white @grey--70; @text-primary);
  background-color: var(--surface-main);
  color: var(--text-primary);
}

Foo.less

.foo {
  @foo-bg: @white @grey--70;
  @foo-color: @text-primary;
  --foo-bg: var(--surface-main);
  --foo-color: var(--text-primary);

  .themify(background-color; @foo-bg);
  .contrastify(@foo-bg; @foo-color);
  background-color: var(--foo-bg);
  color: var(--foo-color);
}

Bar.less

.bar {
  @bar-bg: @color-primary;
  @bar-color: @text-primary;
  --bar-bg: var(--surface-brand-primary-strong);
  --bar-color: var(--text-primary-on-surface-brand-primary-strong);

  .themify(background-color; @bar-bg);
  .contrastify(@bar-bg; @bar-color);
  background-color: var(--bar-bg);
  color: var(--bar-color);
}

Foo.less

.foo {
  @foo-bg: @color-primary;
  @foo-color: @text-primary;
  --foo-bg: var(--surface-main);
  --foo-color: var(--text-primary);

  .themify(background-color; @foo-bg);
  .contrastify(@foo-bg; @foo-color);
  background-color var(--foo-bg);
  color: var(--foo-color);
}

Využíváte-li Less proměnné MW, může v některých případech postačovat pouze jejich vybalení z mixinu. Kde to bylo možné, nahradili jsme pouze hodnoty již existujícíh proměnných.

_Variables.less

@elevation-low-bg: @white @grey--80;
@elevation-low-bg: var(--surface-main);

Foo.less

.foo {
  .themify(background-color; @elevation-low-bg);
  background-color: @elevation-low-bg;
}

Pozadí

Před	Nyní
@color-primary	--surface-brand-primary-strong
@color-secondary	--surface-brand-secondary-strong
@color-error	--surface-status-error-strong
@color-warning	--surface-status-warning-strong
@color-success	--surface-status-success-strong
@color-information	--surface-status-information-strong

Text

Před	Nyní
@text-primary	--text-primary
@text-secondary	--text-secondary
@text-disabled	--text-disabled

Před	Nyní
@color-primary	--text-brand-primary
@color-secondary	--text-brand-secondary
@color-error	--text-status-error
@color-warning	--text-status-warning
@color-success	--text-status-success
@color-information	--text-status-information

Ohraničení

Před	Nyní
@divider-subtle	--border-subtle
@divider	--border
@divider-prominent	--border-strong, --border-contrast
@divider-block	--border-variant

Paleta

Před	Nyní
@[color-name]--[10-100]	--[color-name]-[10-100]

Vyvýšení

Odstranění mixinů .elevation[1-6]() a přejmenování proměnných.

Před	Nyní
.elevation0(), --elevation-0	--elevation-subtle
.elevation1(), .elevation1Clickable(), --elevation-1	--elevation
.elevation2(), .elevation2Clickable(), --elevation-2	--elevation
.elevation3(), .elevation3Clickable(), --elevation-3	--elevation
.elevation4(), .elevation4Clickable(), --elevation-4	--elevation-strong
.elevation5(), .elevation5Clickable(), --elevation-5	--elevation-strong
.elevation6(), --elevation-6	--elevation-extreme

Záře

Před	Nyní
.glow1(@color-name)	--glow-[color-name]
.glow2(@color-name)	--glow-[color-name]
.glow3(@color-name)	--glow-[color-name]-strong
.glow4(@color-name)	--glow-[color-name]-strong
.glow5(@color-name)	--glow-[color-name]-strong
.glowFromBottom(@color-name)	--glow-[color-name]-up

Zaoblení

Před	Nyní
--radius-h	--radius-subtle
--radius	--radius
--radius-2	--radius-strong