Initial Conversion of SCSS to CSS #5375
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 9 commits
December 12, 2024 08:19
🦋 Changeset detectedLatest commit: b91b8a2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
mcwinter07
reviewed
Dec 20, 2024
|
Ooo, also I'd checkout the UI tests for the Avatar, a little bit of funkiness see to be happening in the Avatar stickersheets 😉 |
There was a problem hiding this comment.
Let me know if you want to chat through any comments, or if you think any of it is too much work :) Most comments are suggestions for how to compose the CSS better (figured it's a good learning opportunity), but I'm open to descoping some of it if you have other priorities, since this is an improvement regardless.
| border: 3px solid var(--color-white); | ||
| } | ||
|
|
||
| .wrapper.small { |
There was a problem hiding this comment.
Haha oh no! I must not have been clear enough. Here's an example:
Suggested change
| .wrapper.small { | |
| .small { |
Comment on lines
16
to
54
| .reversed { | ||
| --badge-background-color: rgba(var(--color-white-rgb), 0.1); | ||
|
|
||
| color: var(--color-white); | ||
| } | ||
|
|
||
| .reversed.active { | ||
| --badge-background-color: var(--color-green-300); | ||
|
|
||
| color: var(--color-purple-800); | ||
| } | ||
|
|
||
| .reversed.dark { | ||
| --badge-background-color: var(--color-purple-700); | ||
|
|
||
| color: var(--color-white); | ||
| } | ||
| } | ||
|
|
||
| .badge.large { | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| border-radius: var(--spacing-48); | ||
| font-size: var(--typography-data-medium-font-size); | ||
| line-height: var(--typography-data-medium-line-height); | ||
| letter-spacing: var(--typography-data-medium-letter-spacing); | ||
| padding: 2px 1.875rem; | ||
| width: 24px; | ||
| } | ||
|
|
||
| .default { | ||
| color: var(--color-purple-800); | ||
| } | ||
|
|
||
| .active { | ||
| --badge-background-color: var(--color-blue-500); | ||
|
|
||
| color: var(--color-white); | ||
| } |
There was a problem hiding this comment.
Hopefully this helps a little in understanding the structure?
Suggested change
| .reversed { | |
| --badge-background-color: rgba(var(--color-white-rgb), 0.1); | |
| color: var(--color-white); | |
| } | |
| .reversed.active { | |
| --badge-background-color: var(--color-green-300); | |
| color: var(--color-purple-800); | |
| } | |
| .reversed.dark { | |
| --badge-background-color: var(--color-purple-700); | |
| color: var(--color-white); | |
| } | |
| } | |
| .badge.large { | |
| display: inline-flex; | |
| justify-content: center; | |
| border-radius: var(--spacing-48); | |
| font-size: var(--typography-data-medium-font-size); | |
| line-height: var(--typography-data-medium-line-height); | |
| letter-spacing: var(--typography-data-medium-letter-spacing); | |
| padding: 2px 1.875rem; | |
| width: 24px; | |
| } | |
| .default { | |
| color: var(--color-purple-800); | |
| } | |
| .active { | |
| --badge-background-color: var(--color-blue-500); | |
| color: var(--color-white); | |
| } | |
| } | |
| .reversed { | |
| --badge-background-color: rgba(var(--color-white-rgb), 0.1); | |
| color: var(--color-white); | |
| } | |
| // TODO: .dark.reversed moved into .dark | |
| .large { | |
| display: inline-flex; | |
| justify-content: center; | |
| border-radius: var(--spacing-48); | |
| font-size: var(--typography-data-medium-font-size); | |
| line-height: var(--typography-data-medium-line-height); | |
| letter-spacing: var(--typography-data-medium-letter-spacing); | |
| padding: 2px 1.875rem; | |
| width: 24px; | |
| // TODO: | |
| // &.dot { ... } can probably go here, but it does mean that .dot must go above it. | |
| // this .large can likely go further down in the file after the variants | |
| } | |
| .default { | |
| color: var(--color-purple-800); | |
| } | |
| .active { | |
| --badge-background-color: var(--color-blue-500); | |
| color: var(--color-white); | |
| &.reversed { | |
| --badge-background-color: var(--color-green-300); | |
| color: var(--color-purple-800); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Why
Converting SCSS to CSS
https://cultureamp.atlassian.net/browse/KZN-2877
What
Converts Avatar, AvatarGroup, Badge, Brand, BrandMoment to CSS