Feature: Optimizing SCSS and moving towards a design system... ...eventually 🦄 #139
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
The current SCSS code lacks proper modularization and reusability, leading to potential repetition and complexity. There's a need for improved structure and clarity, specifically in handling CSS variables, transitions, and various visual aspects (such as borders, shadows, radii, etc.). Maintaining consistency across multiple elements and enhancing reusability in the SCSS files will improve maintainability and readability.
Solution
The solution involves introducing a set of reusable SCSS mixins to handle the following:
mynah-transition-var
) - A mixin to handle transitions with customizable properties, duration, and timing functions.mynah-sizing-vars
) - A mixin for dynamically generating sizing variables.mynah-css-var
) - A flexible mixin to assign CSS variables.The solution also includes a
mynah-generate-css-var
mixin to dynamically handle CSS variable generation based on different types (prefix
,radius
,shadow
), allowing for consistent and efficient CSS variable management.Finally, the SCSS variables and collections for colors, syntax, transitions, shadows, and radii have been standardized and modularized using
scss-variables
, ensuring consistency across the project.Main Changes:
$mynah-collections
,$mynah-status-colors
, etc.) to improve readability and reuse.@each
loops to handle transitions and CSS variable assignments dynamically, improving efficiency.License
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.