Refactor Productivity Analytics CSS file to use CSS utils

• Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you can request access to GitLab Duo.

What does this MR do and why?

Closes #490201

---

Refactors CSS in /app/assets/stylesheets/page_bundles/productivity_analytics.scss to use CSS utils

References

• @apply - gitlab-community/gitlab@67ec1fc5
• css utils - https://gitlab-org.gitlab.io/gitlab-ui/tailwind-config-viewer/
• css variables - https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/framework/variables.scss

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

STORYBOOK (before)

• metric chart - https://gitlab-org.gitlab.io/gitlab/storybook/?path=/story/ee-analytics-productivity-analytics-components-metric-chart--default&globals=outline:true
• metric column - https://gitlab-org.gitlab.io/gitlab/storybook/?path=/story/ee-analytics-productivity-analytics-components-metric-column--default&globals=outline:true
• metric table - https://gitlab-org.gitlab.io/gitlab/storybook/?path=/story/ee-analytics-productivity-analytics-components-mr-table--default&globals=outline:true
• metric row - https://gitlab-org.gitlab.io/gitlab/storybook/?path=/story/ee-analytics-productivity-analytics-components-mr-table-row--default

Before	After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

# install storybook dependencies
$ yarn storybook:install

# start storybook
$ yarn storybook:start

Related to #490201