Missing CSS variables in docs?

[loxy]

Hi!

In your documentation on page: https://taiga-ui.dev/variables there is an overview of the underlying CSS variables.

But in code base (core/styles/theme/variables.less) there are some more:

• --tui-radius-xl
• --tui-duration

Also some font related variables which are not mentioned in docs like

• --tui-font-heading-{1...6}
• --tui-font-text-{size}
• --tui-font-text-ui-{size}

Another which is mentioned in that docs but is not present in that file is --tui-service-autofill-background. I guess because it is a color. In palette.less it is and there are also others configured:

-- --tui-service-selection-background
-- --tui-service-backdrop

Also the palette.less hold variables which are not in colors docs page (https://taiga-ui.dev/colors), like:

-- --tui-background-elevation-3

And docs (Text) state:

-- var(--tui-text-primary-on-accent-1)
-- var(--tui-text-primary-on-accent-2)

which are in turn not present in palette.less (at least for dark theme).

Or for background:

-- var(--tui-background-accent-1)
-- var(--tui-background-accent-1-hover)
-- var(--tui-background-accent-1-pressed)
-- var(--tui-background-accent-2)
-- var(--tui-background-accent-2-hover)
-- var(--tui-background-accent-2-pressed)

But in palette.less

[tuiTheme='dark'] {
...
  --tui-background-accent-opposite: #fff;
  --tui-background-accent-opposite-hover: #f6f6f6;
  --tui-background-accent-opposite-pressed: #ededed;

// in "light" are all

&:root,
[tuiTheme='light'] {
...
  --tui-background-accent-1: #526ed3;
  --tui-background-accent-1-hover: #6c86e2;
  --tui-background-accent-1-pressed: #314692;
  --tui-background-accent-2: #ff7043;
  --tui-background-accent-2-hover: #ff9a94;
  --tui-background-accent-2-pressed: #e7716a;
  --tui-background-accent-opposite: #000;
  --tui-background-accent-opposite-hover: #333;
  --tui-background-accent-opposite-pressed: #808080;

I'm a little confused. What is the the source of truth here? Are the docs just not up to date or will some variables be removed in future and these files hold legacy stuff?

[waterplea]

• --tui-radius-xl is what we added ourselves and it is not that well defined as to where to use it, we need to review our radius variables with the design team.
• --tui-duration is not documented because it is automatically set with TUI_ANIMATIONS_SPEED token since it controls both CSS and Angular animations: https://taiga-ui.dev/animations
• Font variables are documented here: https://taiga-ui.dev/typography
• Colors are listed in palette.less indeed, we need to add 2 missing service colors to the docs.
• --tui-background-elevation-3 was added recently, I guess we forgot to add it to the docs (1 is for modals, 2 is for cards and 3 is for dropdowns)
• Variables not present in dark theme are just not changed in dark theme, therefore no need to override them

[loxy]

Thank you!