style: updates button styles to match Pine #2058

anechol · 2025-02-06T00:15:22Z

Description

Updates button styles to match Pine.

Screenshots

Before	After

Testing in `sage-lib`

Navigate to Button, Copy Text, Panel Controls, Toolbar
Check that components that use Buttons have uniform design comparable to Pine.

Testing in `kajabi-products`

(LOW) Updates button styles to match Pine.

Dependency Review

The following issues were found:

✅ 0 vulnerable package(s)
✅ 0 package(s) with incompatible licenses
✅ 0 package(s) with invalid SPDX license definitions
⚠️ 3 package(s) with unknown licenses.

See the Details below.

License Issues

packages/sage-react/package.json

Package	Version	License	Issue Type
@pine-ds/react	^2.14.0	Null	Unknown License

yarn.lock

Package	Version	License	Issue Type
@pine-ds/core	2.14.0	Null	Unknown License
@pine-ds/react	2.14.0	Null	Unknown License

Denied Licenses: LGPL-2.0, AAL, Adobe-2006, Afmparse, Artistic-1.0, Artistic-1.0-cl8, Artistic-1.0-Perl, Beerware, blessing, Borceux, CECILL-B, ClArtistic, Condor-1.1, Crossword, CrystalStacker, diffmark, DOC, EFL-1.0, EFL-2.0, Fair, FSFUL, FSFULLR, Giftware, HPND, IJG, Leptonica, LPL-1.0, LPL-1.02, MirOS, mpich2, NASA-1.3, NBPL-1.0, Newsletr, NLPL, NRL, OGTSL, OLDAP-1.1, OLDAP-1.2, OLDAP-1.3, OLDAP-1.4, psutils, Qhull, Rdisc, RSA-MD, Spencer-86, Spencer-94, TU-Berlin-1.0, TU-Berlin-2.0, Vim, W3C-19980720, W3C-20150513, Wsuipa, WTFPL, xinetd, Zed, Zend-2.0, ZPL-1.1, AGPL-1.0-only, AGPL-1.0-or-later, AGPL-3.0-only, AGPL-3.0-or-later, APSL-1.0, APSL-1.1, APSL-1.2, APSL-2.0, CPAL-1.0, EUPL-1.0, EUPL-1.1, EUPL-1.2, NPOSL-3.0, OSL-1.0, OSL-1.1, OSL-2.0, OSL-2.1, OSL-3.0, RPSL-1.0, SSPL-1.0, CAL-1.0, CAL-1.0-Combined-Work-Exception, Parity-6.0.0, Parity-7.0.0, RPL-1.1, RPL-1.5, EPL-1.0, EPL-2.0, ErlPL-1.1, IPL-1.0, LGPL-2.0-only, LGPL-2.0-or-later, LGPL-2.1-only, LGPL-2.1-or-later, LGPL-2.1, LGPL-3.0-only, LGPL-3.0-or-later, LGPL-3.0, MPL-1.0, MPL-1.1, MPL-2.0, MPL-2.0-no-copyleft-exception, MS-RL, SPL-1.0, BSD-Protection, copyleft-next-0.3.0, copyleft-next-0.3.1, GPL-1.0-only, GPL-1.0-or-later, GPL-1.0, GPL-2.0-only, GPL-2.0-or-later, GPL-2.0, GPL-3.0-only, GPL-3.0-or-later, GPL-3.0, QPL-1.0, Sleepycat

Scanned Manifest Files

packages/sage-react/package.json

@pine-ds/react@^2.14.0

yarn.lock

pixelflips

1 comment on mixins, otherwise LGTM.

pixelflips · 2025-02-06T22:08:22Z

packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss

@@ -53,15 +53,15 @@
 /// Sets up styles for sage "copy" (system) text.
 ///
 @mixin sage-copy-text() {


it was my understanding that we weren't adjusting mixins but instead replacing them within the component when possible?

That was the intention, and I still stand by that for the most part, but seeing how fragmented a lot of these styles are makes me think in some cases it won't make much of a difference. Here, this mixin isn't used anywhere else in the repo or the main app, so it comes down to either changing the styles in the mixin itself or copy and paste the styles within two different selectors, neither of which I'm a huge fan of.

* 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 <[email protected]> * 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 <[email protected]> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <[email protected]> Co-authored-by: Phillip Lovelace <[email protected]>

* 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 <[email protected]> * 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 <[email protected]> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <[email protected]> Co-authored-by: Phillip Lovelace <[email protected]> * style(form-select): simplify the calculation --------- Co-authored-by: Ashley Echols <[email protected]> Co-authored-by: Phillip Lovelace <[email protected]> Co-authored-by: Julian Skinner <[email protected]>

* 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 <[email protected]> * 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 <[email protected]> * style: updates Tooltip tokens to match Pine (#2067) --------- Co-authored-by: Ashley Echols <[email protected]> Co-authored-by: Phillip Lovelace <[email protected]>

style: updates button styles to match Pine

ad039eb

anechol self-assigned this Feb 6, 2025

anechol added 2 commits February 6, 2025 13:55

style: updates copytext component to match Pine

51364da

chore: fixes linting

6d4817a

anechol requested review from ju-Skinner, pixelflips and QuintonJason February 6, 2025 21:40

anechol marked this pull request as ready for review February 6, 2025 21:40

anechol changed the base branch from develop to chore/sage-pine-visual-parity February 6, 2025 22:04

pixelflips approved these changes Feb 6, 2025

View reviewed changes

QuintonJason approved these changes Feb 10, 2025

View reviewed changes

anechol merged commit 487cc06 into chore/sage-pine-visual-parity Feb 10, 2025
8 checks passed

anechol deleted the style/button-copytext-styles branch February 10, 2025 23:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style: updates button styles to match Pine #2058

style: updates button styles to match Pine #2058

anechol commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

pixelflips left a comment

pixelflips Feb 6, 2025

anechol Feb 10, 2025

style: updates button styles to match Pine #2058

style: updates button styles to match Pine #2058

Conversation

anechol commented Feb 6, 2025 • edited Loading

Description

Screenshots

Testing in sage-lib

Testing in kajabi-products

Related

github-actions bot commented Feb 6, 2025 • edited Loading

Dependency Review

License Issues

packages/sage-react/package.json

yarn.lock

Scanned Manifest Files

pixelflips left a comment

Choose a reason for hiding this comment

pixelflips Feb 6, 2025

Choose a reason for hiding this comment

anechol Feb 10, 2025

Choose a reason for hiding this comment

anechol commented Feb 6, 2025 •

edited

Loading

Testing in `sage-lib`

Testing in `kajabi-products`

github-actions bot commented Feb 6, 2025 •

edited

Loading