Calcite-components: Consistent font/size, spacing scale, color, etc for components

[jrowlingson]

Description

Enable consistency throughout the component library of font/size, spacing scale, color, shadow, focus states, etc.

Now that @asangma 's tailwind configuration refactor has landed (https://github.com/Esri/calcite-components/pull/1415), we should be in a good spot to begin the larger component refactor to use said configuration. I'd suggest grabbing a range below (e.g. a-b) if you are interested in helping out.

Acceptance Criteria

• Consistency with UI Kit(s)

Relevant Info

Which Component

• [ ] calcite-accordion, (#1803 )
• [ ] calcite-accordion-item, (#1803)
• [ ] calcite-action (https://github.com/Esri/calcite-components/pull/1501)
• [ ] calcite-action-bar(#1805)
• [ ] calcite-action-group (#1814)
• [ ] calcite-action-pad
• [ ] calcite-alert (#1558)
• [ ] calcite-avatar (https://github.com/Esri/calcite-components/pull/1559)
• [ ] calcite-block (#1561)
• [ ] calcite-block-section (#1561)
• [ ] calcite-button
• [ ] calcite-card (#1778)
• [ ] calcite-checkbox (#1780)
• [ ] calcite-chip (#1781)
• [ ] calcite-color-picker (#1782)
• [ ] calcite-color-hex-input (#1784)
• [ ] calcite-color-swatch (#1787)
• [ ] calcite-combobox (#1789)
• [ ] calcite-combobox-item (#1792)
• [ ] calcite-date-picker (#1793)
• [ ] calcite-date-picker-day (#1794)
• [ ] calcite-date-picker-month (#1795)
• [ ] calcite-date-picker-month-header (#1799)
• [ ] calcite-dropdown (#1800)
• [ ] calcite-dropdown-group (#1801)
• [ ] calcite-dropdown-item (#1802)
• [ ] calcite-fab (#1654)
• [ ] calcite-filter (#1658)
• [ ] calcite-flow(#1660)
• [ ] calcite-graph (#1662)
• [ ] calcite-handle(#1664)
• [ ] calcite-icon(#1666)
• [ ] calcite-inline-editable (#1668)
• [ ] calcite-input(#1668)
• [ ] calcite-input-date-picker (#1668)
• [ ] calcite-input-message
• [ ] calcite-label (#1652)
• [ ] calcite-link(#1649)
• [ ] calcite-loader (#1636)
• [ ] calcite-modal (#1636)
• [ ] calcite-notice (#1628)
• [ ] calcite-option (#1676)
• [ ] calcite-option-group
• [ ] calcite-pagination (#1646)
• [ ] calcite-panel(#1677)
• [ ] calcite-pick-list (#1680)
• [ ] calcite-pick-list-group(#1683)
• [ ] calcite-pick-list-item (#1685)
• [ ] calcite-popover(#1687)
• [ ] calcite-popover-manager(#1691)
• [ ] calcite-progress(#1692)
• [ ] calcite-radio(#1694)
• [ ] calcite-radio-button(#1697)
• [ ] calcite-radio-button-group (#1699)
• [ ] calcite-radio-group(#1701)
• [ ] calcite-radio-group-item (#1708)
• [ ] calcite-rating (#1638)
• [ ] calcite-scrim(#1718)
• [ ] calcite-select(#1719)
• [ ] calcite-shell(#1720)
• [ ] calcite-shell-center-row(#1721)
• [ ] calcite-shell-panel (#1726)
• [ ] calcite-slider
• [ ] calcite-sortable-list
• [ ] calcite-split-button
• [ ] calcite-stepper (#1727)
• [ ] calcite-stepper-item(#1728)
• [ ] calcite-switch(#1729)
• [ ] calcite-tab (pr #1704)
• [ ] calcite-tab-nav (pr #1746)
• [ ] calcite-tabs (pr #1706)
• [ ] calcite-tab-title (pr #1745)
• [ ] calcite-tile (#1769)
• [ ] calcite-tile-select (#1770)
• [ ] calcite-tile-select-group (#1771)
• [ ] calcite-tip (#1772)
• [ ] calcite-tip-group (#1773)
• [ ] calcite-tip-manager (#1774)
• [ ] calcite-tooltip
• [ ] calcite-tooltip-manager
• [ ] calcite-tree
• [ ] calcite-tree-item
• [ ] calcite-value-list(#1730)
• [ ] calcite-value-list-item(#1731)

Final steps

• [ ] Rename text-*h text size utils. Replace any remaining text-* instances.
• [ ] Update shadow utils (see https://github.com/Esri/calcite-components/pull/1520#issuecomment-775522419)
• [ ] Refactor grid instances?
• [ ] (Re)introduce @kstinson14 smirror` rtl variant.
• [x] Add percentage based text utils for text that wraps. (#1640)
• [ ] z- util strategy?
• [x] Revert 3px border? Revert border variants introduced w/https://github.com/Esri/calcite-components/pull/1669 (pr #1788)
• [ ] Add border radius tailwind value? (alert, modal, tooltip, cards, etc use this border radius)
• [ ] Add border-transparent?
• [ ] solution for these cases: border-top-color: rgba($h-bb-060, 0.5);
• [ ] add text status colors to config
• [ ] consume calcite-styles
• [ ] include border base styles

Bonus

• [ ] (Remove Sass) replace Sass mixins w/https://github.com/postcss/postcss-mixins
• [ ] (Remove Sass) replace existing rgba() function calls.
• [ ] Lint @apply styling (we can break this out)

[jrowlingson]

Grabbing calcite-a* through calcite-b*

[asangma]

I'll take calcite-c* through calcite-d* once #1520 lands.

[jrowlingson]

Grabbing calcite-f* through calcite-h*

[paulcpederson]

gonna rip through calcite-modal and also calcite-loader

[paulcpederson]

WE really need to do something about the border situation. Very annoying to not be able to set borders via the apply rules.

[paulcpederson]

Maybe also a transition-1 or some other configured transition helper for applying out main transition

[paulcpederson]

Going to try and tackle stepper today!

[caripizza]

Grabbing calcite-tab, calcite-tabs, calcite-tab-nav, and calcite-tab-title

[julio8a]

Taking calcite-f* to calcite-h*

[caripizza]

@jrowlingson I can open a pr to revert that 3px border width addition in the tailwind config. I only added it because I thought calcite-tabs needed the 3px border to stay, but since calcite-notice now has a border width of 2px, I went with that for calcite-tab-nav and calcite-tab-title as well.

[jrowlingson]

@caripizza that would be great!

[asangma]

Hey y'all. I'm backed up with a bunch of fixes and will have to come back to this refactor later. Please feel free to take on C and D.

[caripizza]

Grabbing calcite-button today

[julio8a]

2041 should be part of the refactor work ^

[jcfranco]

Will this also cover renaming color props to status or something more indicative of its intent? I landed onto this issue from https://github.com/Esri/calcite-components/issues/1220, but I don't see mention of this here. Let me know if we need to break this off into a separate issue. cc @asangma

[caripizza]

@jcfranco not included in this one, no. I'll review that work with @bstifle and @macandcheese, then we'll create a new issue to address.

[jcfranco]

@caripizza Awesome, thanks!