fix(style-guide): use inherited fontSize for ColorPalette color labels

[braaar]

see #2112

This PR removes the fontSize specification from the ColorRow component, making it so that the color swatch labels are displayed in the inherited fontSize for wherever it is placed in the DOM.

The issue with the current code is that the color swatch labels will usually be displayed with the smallest fontSize in the project since that is the first entry in the array.

As I discuss in #2112, in my case the smallest fontSize was 0, meaning that the labels didn't show up at all. I have seen some other theme pages such as this one from Hack Club where it is clear that color labels appear quite small, which is not pleasing to the eye. It is also not so convenient that the fontSize is hard coded in this way.

Version

Published prerelease version: v0.14.0-develop.13

Changelog

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Brage (@braaar)

❤️ peterlits zo (@PeterlitsZo)

❤️ Ryan Turner (@rtturner)

❤️ Cannon Lock (@CannonLock)

🚀 Enhancement

• feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
• @theme-ui/tailwind
  • feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
• @theme-ui/custom-properties
  • feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
• @theme-ui/color-modes
  • feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
• theme-ui
  • feat(theme-ui): Add sx prop to BaseStyles component #2081 (@lachlanjc)

🐛 Bug Fix

• feat(docs): Add custom content for sketchy preset demo #1236 (@atanasster @hasparus @lachlanjc)
• Finish editing note #2079 (@lachlanjc)
• fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
• Release v0.13.2 #2075 (@lachlanjc @hasparus @braaar @dependabot[bot])
• @theme-ui/style-guide
  • fix(style-guide): use inherited fontSize for ColorPalette color labels #2135 (@braaar)
• @theme-ui/components
  • fix(components): Update IconButton type definition to include size prop #2121 (@rtturner)
  • components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)
• @theme-ui/sidenav
  • fix(sidenav): Build with latest theme-ui version #2084 (@lachlanjc)

👨‍💻 Minor changes

• Update jsx-pragma.mdx (@hasparus)
• docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

• docs(sx-prop): add more detail for responsive values. #2116 (@PeterlitsZo @lachlanjc)
• docs(jsx-pragma): Add section on using with vite #2119 (@PeterlitsZo @lachlanjc)
• docs: Clarify usage of theme prop in MDX Layout docs #2100 (@CannonLock)
• docs(jsx): add some more detail to #with-swc section in jsx-pragma docs #2094 (@hasparus @lachlanjc)
• e2e: Upgrade dependencies #2098 (@lachlanjc)
• Set up CodeSandbox CI #2085 (@lachlanjc)
• examples: Remove CodeSandbox starter example #2086 (@lachlanjc)
• docs: Document default theme values #2087 (@lachlanjc)
• @theme-ui/sidenav
  • sidenav: Fix props leaking to DOM on Pagination component #2057 (@lachlanjc)

Authors: 8

• @dependabot[bot]
• Atanas Stoyanov (@atanasster)
• Brage (@braaar)
• Cannon Lock (@CannonLock)
• Lachlan Campbell (@lachlanjc)
• peterlits zo (@PeterlitsZo)
• Piotr Monwid-Olechnowicz (@hasparus)
• Ryan Turner (@rtturner)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/DnRoCS8SKFcd4BzQDyqoJwhuwHNr
✅ Preview: https://theme-ui-git-fork-braaar-fix-color-row-font-size-systemui.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a6b3b12:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

[lachlanjc]

Thank you for the fix!!

[hasparus]

🚀 PR was released in v0.14.0 🚀