style: update tabs tokens to pine #2060
Merged
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
anechol
approved these changes
Feb 6, 2025
| padding: rem(6px) rem(14px); | ||
| background-color: sage-color(grey, 200); | ||
| border-radius: sage-border(radius-x-large); | ||
| padding: calc(var(--pine-dimension-2xs) * 1.5) calc(var(--pine-dimension-xs) * 1.75); // 4px * 1.5 = 6px, 8px * 1.75 = 14px |
There was a problem hiding this comment.
I posed a question about this in Slack, but I am wondering if we'd like to continue using calcs this way. Would love to know your thoughts on it.
There was a problem hiding this comment.
Thoughts in slack as well. For whatever reason there are values here that don't easily convert to dimensions. We can either hard code or calc so they scale or possibly extend dimensions a bit for simpler calculations. 🤷
| background-color: sage-color(grey, 200); | ||
| border-radius: sage-border(radius-x-large); | ||
| padding: calc(var(--pine-dimension-2xs) * 1.5) calc(var(--pine-dimension-xs) * 1.75); // 4px * 1.5 = 6px, 8px * 1.75 = 14px | ||
| background-color: var(--pine-color-border-disabled); |
There was a problem hiding this comment.
Can we match this background color with Pine?
There was a problem hiding this comment.
@anechol Great catch, but I think it might be off in Pine as well. I am seeing #fff in Pine, but #F0F0F0 in Figma. Will change to figma value.
There was a problem hiding this comment.
Just asked design to review this color in Figma so we'll see how they feel.
There was a problem hiding this comment.
Sounds good. TBH, it looks like a link with a white background. Ok in Figma with the off-white background of the canvas. Just let me know.
There was a problem hiding this comment.
@anechol design has responded. no rush, but let me know how we should proceed.
QuintonJason
approved these changes
Feb 10, 2025
QuintonJason
added a commit
that referenced
this pull request
Feb 19, 2025
* chore: adds Pine packages to repo * chore: updates Pine stylesheet link to latest version * style: update progress tokens to pine (#2050) * style: update checkbox tokens to pine (#2052) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: revert z-index changes * style: update sortable tokens to pine (#2059) * style: update textarea tokens to pine (#2055) * style: update loader tokens to pine (#2056) * style: update tokens and success colors * style: add missing semicolon * style: revert z-index changes * fix: adjust font weight of text * style: updates avatar styles and tokens (#2051) * style: updates avatar styles and tokens * chore: updates default icon for React component * style(avatar): move from sage to pine tokens * chore: updates core tokens to semantic where possible * chore: swaps out React stencil component for web component version * style: update table tokens to pine (#2057) * style: update tokens * style: add calc comment * style: updates button styles to match Pine (#2058) * style: updates button styles to match Pine * style: updates copytext component to match Pine * chore: fixes linting * style: update tabs tokens to pine (#2060) * style: update tokens * style: correct bg color * style: update popover tokens to pine (#2062) * style: update input tokens to pine (#2061) * style: update input tokens * style: update sage variables to pine * style: add missing tokens * style: reorder CSS props * style: update sage form field message vars * style: update switch tokens (#2053) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update switch tokens * style: update sage tokens * style: updated var --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * chore: adds Pine css to imports * style: update select tokens to pine (#2063) * style: update tokens * fix: update icon and color * style: hello linter my old friend * fix: hello linter my old friend * style: updates Badge styles to match Pine Chip (#2064) * style: updates Badge styles to match Pine Chip * chore: style linting * style: update radio tokens (#2054) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update radio tokens * style: update sage token values * style: add error and checked vars --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <ashley.echols@kajabi.com> Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com>
QuintonJason
added a commit
that referenced
this pull request
Feb 19, 2025
* chore: adds Pine packages to repo * chore: updates Pine stylesheet link to latest version * style: update progress tokens to pine (#2050) * style: update checkbox tokens to pine (#2052) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: revert z-index changes * style: update sortable tokens to pine (#2059) * style: update textarea tokens to pine (#2055) * style: update loader tokens to pine (#2056) * style: update tokens and success colors * style: add missing semicolon * style: revert z-index changes * fix: adjust font weight of text * style: updates avatar styles and tokens (#2051) * style: updates avatar styles and tokens * chore: updates default icon for React component * style(avatar): move from sage to pine tokens * chore: updates core tokens to semantic where possible * chore: swaps out React stencil component for web component version * style: update table tokens to pine (#2057) * style: update tokens * style: add calc comment * style: updates button styles to match Pine (#2058) * style: updates button styles to match Pine * style: updates copytext component to match Pine * chore: fixes linting * style: update tabs tokens to pine (#2060) * style: update tokens * style: correct bg color * style: update popover tokens to pine (#2062) * style: update input tokens to pine (#2061) * style: update input tokens * style: update sage variables to pine * style: add missing tokens * style: reorder CSS props * style: update sage form field message vars * style: update switch tokens (#2053) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update switch tokens * style: update sage tokens * style: updated var --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * chore: adds Pine css to imports * style: update select tokens to pine (#2063) * style: update tokens * fix: update icon and color * style: hello linter my old friend * fix: hello linter my old friend * style: updates Badge styles to match Pine Chip (#2064) * style: updates Badge styles to match Pine Chip * chore: style linting * style: update radio tokens (#2054) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update radio tokens * style: update sage token values * style: add error and checked vars --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <ashley.echols@kajabi.com> Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com>
QuintonJason
added a commit
that referenced
this pull request
Feb 19, 2025
* chore(tokens): sage pine visual parity (#2070) * chore: adds Pine packages to repo * chore: updates Pine stylesheet link to latest version * style: update progress tokens to pine (#2050) * style: update checkbox tokens to pine (#2052) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: revert z-index changes * style: update sortable tokens to pine (#2059) * style: update textarea tokens to pine (#2055) * style: update loader tokens to pine (#2056) * style: update tokens and success colors * style: add missing semicolon * style: revert z-index changes * fix: adjust font weight of text * style: updates avatar styles and tokens (#2051) * style: updates avatar styles and tokens * chore: updates default icon for React component * style(avatar): move from sage to pine tokens * chore: updates core tokens to semantic where possible * chore: swaps out React stencil component for web component version * style: update table tokens to pine (#2057) * style: update tokens * style: add calc comment * style: updates button styles to match Pine (#2058) * style: updates button styles to match Pine * style: updates copytext component to match Pine * chore: fixes linting * style: update tabs tokens to pine (#2060) * style: update tokens * style: correct bg color * style: update popover tokens to pine (#2062) * style: update input tokens to pine (#2061) * style: update input tokens * style: update sage variables to pine * style: add missing tokens * style: reorder CSS props * style: update sage form field message vars * style: update switch tokens (#2053) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update switch tokens * style: update sage tokens * style: updated var --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * chore: adds Pine css to imports * style: update select tokens to pine (#2063) * style: update tokens * fix: update icon and color * style: hello linter my old friend * fix: hello linter my old friend * style: updates Badge styles to match Pine Chip (#2064) * style: updates Badge styles to match Pine Chip * chore: style linting * style: update radio tokens (#2054) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update radio tokens * style: update sage token values * style: add error and checked vars --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <ashley.echols@kajabi.com> Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * style(form-select): simplify the calculation --------- Co-authored-by: Ashley Echols <ashley.echols@kajabi.com> Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>
ju-Skinner
pushed a commit
that referenced
this pull request
Feb 19, 2025
* chore: adds Pine packages to repo * chore: updates Pine stylesheet link to latest version * style: update progress tokens to pine (#2050) * style: update checkbox tokens to pine (#2052) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: revert z-index changes * style: update sortable tokens to pine (#2059) * style: update textarea tokens to pine (#2055) * style: update loader tokens to pine (#2056) * style: update tokens and success colors * style: add missing semicolon * style: revert z-index changes * fix: adjust font weight of text * style: updates avatar styles and tokens (#2051) * style: updates avatar styles and tokens * chore: updates default icon for React component * style(avatar): move from sage to pine tokens * chore: updates core tokens to semantic where possible * chore: swaps out React stencil component for web component version * style: update table tokens to pine (#2057) * style: update tokens * style: add calc comment * style: updates button styles to match Pine (#2058) * style: updates button styles to match Pine * style: updates copytext component to match Pine * chore: fixes linting * style: update tabs tokens to pine (#2060) * style: update tokens * style: correct bg color * style: update popover tokens to pine (#2062) * style: update input tokens to pine (#2061) * style: update input tokens * style: update sage variables to pine * style: add missing tokens * style: reorder CSS props * style: update sage form field message vars * style: update switch tokens (#2053) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update switch tokens * style: update sage tokens * style: updated var --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * chore: adds Pine css to imports * style: update select tokens to pine (#2063) * style: update tokens * fix: update icon and color * style: hello linter my old friend * fix: hello linter my old friend * style: updates Badge styles to match Pine Chip (#2064) * style: updates Badge styles to match Pine Chip * chore: style linting * style: update radio tokens (#2054) * style: update tokens * style: hello linter my old friend * style: hello linter my old friend * style: update radio tokens * style: update sage token values * style: add error and checked vars --------- Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <ashley.echols@kajabi.com> Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com>
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.
Description
Converts sage tokens to pine tokens
Testing in
sage-libNavigate to tab and tabs
Verify token updates
Testing in
kajabi-productsRelated
https://kajabi.atlassian.net/browse/DSS-1269