Epic: 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!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically closed due to inactivity.

[github-actions[bot]]

This issue has been automatically closed due to inactivity.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically closed due to inactivity.

[jcfranco]

I believe this has been addressed now. @macandcheese @caripizza can you confirm? cc @benelan

[caripizza]

@jcfranco yep I'd prefer to close this one at this point, if anything we can just refer to this closed issue if we need to track future work. Otherwise we can plan to close this one after we review the spacing audit from #2972 with @asangma?

[jcfranco]

Thanks for the info, @caripizza.

I'll leave it up to @macandcheese and @HeathMeyette to decide how to proceed with this issue and the remaining tasks from the description that have no associated PR/issues.

[macandcheese]

I agree that https://github.com/Esri/calcite-components/issues/2972 encompasses the work described in this issue.