Replace blue button and label classes with primary

[silverwind]

Replaces and includes #19758.

Makes all buttons/labels use primary class instead of blue. There were a few cases where secondary was more appropriate and I fixed the styling for it as well.

[wxiaoguang]

--color-blue-dark is not what it means, otherwise LGTM.

[silverwind]

--color-blue-dark is not what it means, otherwise LGTM.

Fixed in ca49f0d which adds all light color variants.

For reference, it was produced on https://www.sassmeister.com/ using this source:

:root {
    --color-red-light: #{scale-color(#db2828, $lightness: +25%)};
    --color-orange-light: #{scale-color(#f2711c, $lightness: +25%)};
    --color-yellow-light: #{scale-color(#fbbd08, $lightness: +25%)};
    --color-olive-light: #{scale-color(#b5cc18, $lightness: +25%)};
    --color-green-light: #{scale-color(#21ba45, $lightness: +25%)};
    --color-teal-light: #{scale-color(#00b5ad, $lightness: +25%)};
    --color-blue-light: #{scale-color(#2185d0, $lightness: +25%)};
    --color-violet-light: #{scale-color(#6435c9, $lightness: +25%)};
    --color-purple-light: #{scale-color(#a333c8, $lightness: +25%)};
    --color-pink-light: #{scale-color(#e03997, $lightness: +25%)};
    --color-brown-light: #{scale-color(#a5673f, $lightness: +25%)};
    --color-grey-light: #{scale-color(#888888, $lightness: +25%)};
    --color-gold-light: #{scale-color(#a1882b, $lightness: +25%)};
}

[6543]

🚀