feat!: remove deprecated scss mixins and variables#3340
Conversation
|
View your CI Pipeline Execution ↗ for commit 9111a25 ☁️ Nx Cloud last updated this comment at |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3340 +/- ##
==========================================
- Coverage 90.40% 89.91% -0.50%
==========================================
Files 405 276 -129
Lines 6649 5730 -919
Branches 2125 1933 -192
==========================================
- Hits 6011 5152 -859
+ Misses 630 570 -60
Partials 8 8
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
📬 Published Alpha Packages:
|
|
🚀 Styleguide deploy preview ready! Preview URL: https://6a02272bcb0acba57ddc968f--gamut-preview.netlify.app |
aresnik11
changed the title
|
|
||
| export const parameters = { | ||
| title: 'Utilities', | ||
| subtitle: 'Style utilities for both SCSS and Emotion', |
There was a problem hiding this comment.
Would it make sense to change to something like: "Gamut's helper functions for style utilities" or something like that to avoid "SCSS" and not sure how much mentioning "Emotion" helps the end user here
There was a problem hiding this comment.
oh yes missed this one
LinKCoding
left a comment
LinKCoding
left a comment
There was a problem hiding this comment.
Saw some more language in the docs that could use some updating
Otherwise, the 🪓 changes look great!
Accordion still looks and works as expected :)
| } | ||
| ``` | ||
|
|
||
| ## Style mixins |
There was a problem hiding this comment.
Does "mixins" still make sense here without scss?
Can it be something like Style helpers?
| ### Screen readers | ||
|
|
||
| Ensuring that your content is accessible can require you to make screen reader only text elements. | ||
| We provide a few helpful mixins for use cases where you want the screen reader to be able to focus or |
There was a problem hiding this comment.
same thought here about "mixins", maybe use helpers? shortcuts? shorthands?
| @@ -29,7 +29,7 @@ | |||
|
|
|||
| You can do this by using our px => rem utility in both TS and SCSS. | |||
There was a problem hiding this comment.
Should omit "in both TS and SCSS" or rewrite to something like: "The pxRem function can take a pixel value and convert it into rem".
3 participants
Overview
Remove legacy
@codecademy/gamut-stylesSCSS utilitiesThis branch deletes the shared SCSS “utils” layer from
gamut-styles: functions, mixins, variable partials, and the barrel files that forwarded them.core/_reboot.scssis updated so core still works without the old variable/mixin pipeline.Downstream impact: Any app or package that did
@use "~@codecademy/gamut-styles/utils"(or relied on those mixins / SCSS color grids / responsive helpers) must either be updated to use the plain CSS values, add a shared utils in the app/package for the mixins/variables needed, or refactored to use the equivalent TypeScript / Emotion APIs.Gamut components still on SCSS
Remaining SCSS in Gamut that used the removed utils is rewritten to plain CSS values (or self-contained rules), including:
AccordionButtonDeprecated(andButtonDeprecatedunder it):variables.scss,mixins.scss, andindex.module.scssupdated so they no longer depend on removedgamut-stylesSCSS.Video(vds_base_theme.scss): removepx-remfunction in alignment with the cleanup.Typography/_variables.scss: removed where it was only supporting the old SCSS token path.Docs
Utilities.mdx: SCSS examples (px-rem,@include box-shadow,@include font-smoothing, etc.) removed; headings emphasize TS-only helpers (pxRem,boxShadow,fontSmoothing, …).gamut-stylesREADME: trimmed to match the new surface area.PR Checklist
Testing Instructions
Don't make me tap the sign.
PR Links and Envs