Audit Theme Style Variables

[shanberg]

Goals:

• Make sure the variable names are logical and obvious
• Make sure the set of variables comprehensive, and balances flexibility with helpful rigidity
• Consider adding spacing variables to replace spacingScale()
  • Consider using exponential scale
  • Consider using rem values instead of pixels

Define roadmap for any variable name changes, considering any change will impact downstream applications.

[shanberg]

Proposed new theme constants

Scheme: PROPERTY_ROLE_VARIANT

• Roles are preferred to variants
• Values with a default and variants center around suffix _DEFAULT and all scale up or down with _SM or _LG
• Values of with variants with no default start with suffix _NORMAL

Notable changes

• COLOR_CONTENT has new variants, DEFAULT, CONTRAST, MUTED, and NONESSENTIAL.
• RADIUS_ values are defined by role, instead of numbered scale
• FONT_SIZE has new roles PAGE_TITLE, HEADING, SUBHEADING, ITEM_TITLE, andTEXT`
• FONT_SIZE variants have consistent naming, though options depend on the role, XS, SM, DEFAULT, LG, XL
• LINE_HEIGHT has new variants DEFAULT, LOOSE, TIGHT

//// COLOR

COLOR_BRAND_PRIMARY
COLOR_BRAND_SECONDARY

COLOR_BACKGROUND_DEFAULT
COLOR_BACKGROUND_TWO
COLOR_BACKGROUND_THREE

COLOR_CONTENT_DEFAULT
COLOR_CONTENT_CONTRAST
COLOR_CONTENT_MUTED
COLOR_CONTENT_NONESSENTIAL

COLOR_INTENT_HIGHLIGHT
COLOR_INTENT_SUCCESS
COLOR_INTENT_WARNING
COLOR_INTENT_DANGER
COLOR_INTENT_INFO

COLOR_KEYLINE_DEFAULT
COLOR_KEYLINE_FLAT

//// LAYOUT

OPACITY_FULL
OPACITY_LIGHT
OPACITY_LIGHTER
OPACITY_LIGHTEST

RADIUS_SHARP
RADIUS_INPUT
RADIUS_CARD_LG
RADIUS_CARD_DEFAULT
RADIUS_CARD_SM
RADIUS_MAX

SPACING_BASE

ZINDEX_ABYSS
ZINDEX_FLOOR
ZINDEX_DROPDOWN
ZINDEX_STICKY
ZINDEX_FIXED
ZINDEX_SCRIM
ZINDEX_MODAL
ZINDEX_POPOVER
ZINDEX_TOOLTIP

//// TYPOGRAPHY

FONT_STACK_BRAND
FONT_STACK_DEFAULT
FONT_STACK_CODE

FONT_SIZE_PAGE_TITLE

FONT_SIZE_HEADING_LG
FONT_SIZE_HEADING_DEFAULT
FONT_SIZE_HEADING_SM

FONT_SIZE_SUBHEADING_LG
FONT_SIZE_SUBHEADING_DEFAULT
FONT_SIZE_SUBHEADING_SM

FONT_SIZE_ITEM_TITLE_LG
FONT_SIZE_ITEM_TITLE_DEFAULT
FONT_SIZE_ITEM_TITLE_SM

FONT_SIZE_TEXT_XL
FONT_SIZE_TEXT_LG
FONT_SIZE_TEXT_DEFAULT
FONT_SIZE_TEXT_SM
FONT_SIZE_TEXT_XS

LINE_HEIGHT_LOOSE
LINE_HEIGHT_DEFAULT
LINE_HEIGHT_TIGHT

FONT_WEIGHT_DEFAULT
FONT_WEIGHT_MEDIUM
FONT_WEIGHT_SEMIBOLD
FONT_WEIGHT_BOLD

[tilleryd]

@shanberg Perhaps opacity should also use a variant?

OPACITY_DEFAULT
OPACITY_DIFFUSED_STRONG
OPACITY_DIFFUSED_LIGHT
OPACITY_TRANSLUCENT

[shanberg]

Exploring the options...

OPACITY_FULL
OPACITY_MOSTLY
OPACITY_HALF
OPACITY_BARELY

OPACITY_FULL
OPACITY_MOSTLY_THERE
OPACITY_HALF_THERE
OPACITY_BARELY_THERE

OPACITY_FULL
OPACITY_MOST
OPACITY_HALF
OPACITY_SLIGHT

[shanberg]

I'm wondering if we can do better than DIFFUSED... along the axis of learnability. It’s not immediately clear without testing that DIFFUSED_STRONG is a higher opacity value than DIFFUSED_LIGHT. Is DIFFUSED_STRONG strongly diffused, or strong but diffused?

I think we could do better than this with

OPACITY_FULL
OPACITY_LIGHT
OPACITY_LIGHTER
OPACITY_LIGHTEST

[shanberg]

@kaitmore @tilleryd

COLOR_BRAND_PRIMARY
COLOR_BRAND_SECONDARY

COLOR_BACKGROUND_DEFAULT
COLOR_BACKGROUND_TWO
COLOR_BACKGROUND_THREE

OPACITY_FULL
OPACITY_LIGHT
OPACITY_LIGHTER
OPACITY_LIGHTEST

[tilleryd]

@shanberg I'm cool with the opacity variants you came up with.

OPACITY_FULL
OPACITY_LIGHT
OPACITY_LIGHTER
OPACITY_LIGHTEST

[shanberg]

Closed by #490