CSS vars updates

[gkatsev]

Here's a list of all current css vars

--media-background-color
--media-background-position
--media-background-size
--media-box-padding-left
--media-box-padding-right
--media-button-icon-height
--media-button-icon-transform
--media-button-icon-transition
--media-button-icon-width
--media-captions-indicator-height
--media-captions-indicator-vertical-align
--media-control-background
--media-control-height
--media-control-hover-background
--media-control-padding
--media-icon-color
--media-listbox-background
--media-listbox-hover-background
--media-listbox-hover-outline
--media-listbox-selected-background
--media-live-button-icon-color
--media-live-indicator-color
--media-loading-icon-height
--media-loading-icon-width
--media-object-fit
--media-object-position
--media-preview-background
--media-preview-background-color
--media-preview-border-radius
--media-preview-thumbnail-border
--media-preview-thumbnail-border-radius
--media-preview-thumbnail-box-shadow
--media-preview-thumbnail-max-height
--media-preview-thumbnail-max-width
--media-preview-thumbnail-min-height
--media-preview-thumbnail-min-width
--media-preview-time-background
--media-preview-time-border-radius
--media-preview-time-margin
--media-preview-time-padding
--media-preview-time-text-shadow
--media-range-background
--media-range-bar-color
--media-range-padding
--media-range-padding-left
--media-range-padding-right
--media-range-thumb-background
--media-range-thumb-border
--media-range-thumb-border-radius
--media-range-thumb-box-shadow
--media-range-thumb-height
--media-range-thumb-opacity
--media-range-thumb-transform
--media-range-thumb-transition
--media-range-thumb-width
--media-range-track-background
--media-range-track-border
--media-range-track-border-radius
--media-range-track-box-shadow
--media-range-track-height
--media-range-track-outline
--media-range-track-outline-offset
--media-range-track-pointer-background
--media-range-track-pointer-border-right
--media-range-track-progress-internal
--media-range-track-transition
--media-range-track-translate-x
--media-range-track-width
--media-text-color
--media-text-content-height
--media-time-buffered-color
--media-time-range-hover-bottom
--media-time-range-hover-display
--media-time-range-hover-height
--primary-color
--secondary-color
--tertiary-color
--thumb-height
--track-height

We should consider the existing items and see where we can consolidate and how we should go forward with new CSS vars. https://open-props.style/ is a good place to look at for inspiration.

---

Generated with the following command:

ag --js "(var\(|\s)\-\-\w" ./ --nocolor --noheading --nofilename | awk -F"--" '{print "\-\-"$2}' | awk -F":|,|)" '{print $1}' | grep -v "^\-\-$" | sort | uniq