Use Ink colours for flags and comments.

Review Request #14195 — Created Oct. 10, 2024 and updated

Information

Review Board
release-7.x

Reviewers

This change adds new --rb-p-flag-draft-* and --rb-p-flag-published-*
definitions to our standard colour palette. These should be used for flags
that indicate whether an item is a draft or published. The colours either
exactly match the old ones that we used or are very close. We update the
following items to use these new definitions:

  • Comment flags
  • Comment tooltips
  • Image region comments
  • Datagrid draft labels
  • File attachment draft labels

This change also fixes a syntax mistake in the definition for
--rb-theme-rich-text-code-fg, and pulls out a couple variable
definitions for --rb-theme-rich-text-code-bg to make code blocks
in comment tooltips look nicer.

Looked at the comments, datagrid labels and file attachment labels on
darkmode and lightmode.

Summary ID
Use Ink colours for flags and comments.
This change adds new `--rb-p-flag-draft-*` and `--rb-p-flag-published-*` definitions to our standard colour palette. These should be used for flags that indicate whether an item is a draft or published. We update the following items to use these new definitions: * Comment flags * Comment tooltips * Image region comments * Datagrid draft labels * File attachment draft labels This change also fixes a syntax mistake in the definition for `--rb-theme-rich-text-code-fg`, and pulls out a couple variable definitions for `--rb-theme-rich-text-code-bg` to fix make code blocks in comment tooltips look nicer.
4f60909a1ccabc5ae41044fa65f3643fb09ee4b3

Description From Last Updated

We can't redefine these variables to use CSS variables, because it's possible some third party might try to use LESS …

daviddavid

We can use var(--ink-u-border-radius-s) here.

daviddavid

We can use var(--ink-u-border-thin) here.

daviddavid

Instead of 1px can we use var(--ink-u-border-thin)?

daviddavid

Can you add a blank line here and before the next section, to preserve the two blankes per groupings of …

chipx86chipx86

We might want to make a variable that defines the border so call sites don't have to worry about the …

chipx86chipx86
david
  1. 
      
  2. Show all issues

    We can't redefine these variables to use CSS variables, because it's possible some third party might try to use LESS operators like lighten() on them. Instead, places where we use #rb-ns-ui.field-state-label should be changed to use the new CSS vars directly.

  3. 
      
maubin
david
  1. 
      
  2. Show all issues

    We can use var(--ink-u-border-radius-s) here.

  3. Show all issues

    We can use var(--ink-u-border-thin) here.

  4. Show all issues

    Instead of 1px can we use var(--ink-u-border-thin)?

  5. 
      
maubin
Review request changed
Commits:
Summary ID
Use Ink colours for flags and comments.
This change adds new `--rb-p-flag-draft-*` and `--rb-p-flag-published-*` definitions to our standard colour palette. These should be used for flags that indicate whether an item is a draft or published. We update the following items to use these new definitions: * Comment flags * Comment tooltips * Image region comments * Datagrid draft labels * File attachment draft labels This change also fixes a syntax mistake in the definition for `--rb-theme-rich-text-code-fg`, and pulls out a couple variable definitions for `--rb-theme-rich-text-code-bg` to fix make code blocks in comment tooltips look nicer.
0b9c7eba63627414dae38d4aaed293678f11b71e
Use Ink colours for flags and comments.
This change adds new `--rb-p-flag-draft-*` and `--rb-p-flag-published-*` definitions to our standard colour palette. These should be used for flags that indicate whether an item is a draft or published. We update the following items to use these new definitions: * Comment flags * Comment tooltips * Image region comments * Datagrid draft labels * File attachment draft labels This change also fixes a syntax mistake in the definition for `--rb-theme-rich-text-code-fg`, and pulls out a couple variable definitions for `--rb-theme-rich-text-code-bg` to fix make code blocks in comment tooltips look nicer.
4f60909a1ccabc5ae41044fa65f3643fb09ee4b3

Checks run (2 succeeded)

flake8 passed.
JSHint passed.
david
  1. Ship It!
  2. 
      
chipx86
  1. 
      
  2. reviewboard/static/rb/css/syntax.less (Diff revision 3)
     
     
     
     
    Show all issues

    Can you add a blank line here and before the next section, to preserve the two blankes per groupings of variables?

  3. Show all issues

    We might want to make a variable that defines the border so call sites don't have to worry about the components of the border.

  4.