Skip to content

upgrade nx packages and fixes sass deprecations to stop warnings #3068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

upgrade nx packages and fixes sass deprecations to stop warnings #3068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f18b6ee
try upgrading nx
dreamwasp Apr 15, 2025
2391eb5
remove ex sass errors
dreamwasp Apr 15, 2025
63a3d2f
more
dreamwasp Apr 15, 2025
c539788
formatted
dreamwasp Apr 15, 2025
8b0f386
sass added to ns
dreamwasp Apr 15, 2025
8d90c56
move sass embed to deps
dreamwasp Apr 15, 2025
244c178
sass embedded
dreamwasp Apr 15, 2025
363a5d6
last style.scss issue
dreamwasp Apr 15, 2025
6cbdc5b
new pkg + installation errors
dreamwasp Apr 15, 2025
5d487ab
add additional trouble shooting
dreamwasp Apr 15, 2025
268287b
more scss files updated
dreamwasp Apr 15, 2025
3627ba1
format
dreamwasp Apr 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"lodash": "^4.17.5",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-helmet-async": "^2.0.5"
"react-helmet-async": "^2.0.5",
"sass-migrator": "^2.3.1"
},
"devDependencies": {
"@babel/cli": "7.24.7",
Expand All @@ -25,12 +26,12 @@
"@emotion/babel-plugin": "11.11.0",
"@emotion/jest": "^11.11.0",
"@mdx-js/react": "^3.1.0",
"@nx/jest": "19.3.2",
"@nx/js": "19.3.2",
"@nx/react": "19.3.2",
"@nx/storybook": "19.3.2",
"@nx/web": "19.3.2",
"@nx/webpack": "19.3.2",
"@nx/jest": "20.5.0",
"@nx/js": "20.5.0",
"@nx/react": "20.5.0",
"@nx/storybook": "20.5.0",
"@nx/web": "20.5.0",
"@nx/webpack": "20.5.0",
"@storybook/addon-controls": "8.3.6",
"@storybook/addon-designs": "^8.0.3",
"@storybook/addon-docs": "^8.3.6",
Expand Down Expand Up @@ -81,7 +82,7 @@
"lint-staged": "14.0.1",
"micromatch": "^4.0.5",
"mutationobserver-shim": "^0.3.3",
"nx": "19.3.2",
"nx": "20.5.0",
"nx-cloud": "^19.1.0",
"onchange": "^7.0.2",
"prettier": "^2.8.7",
Expand Down
2 changes: 1 addition & 1 deletion packages/gamut-styles/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import "core/index";
@use "core/index";
8 changes: 4 additions & 4 deletions packages/gamut-styles/core/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../utils";
@import "reboot";
@import "fonts";
@import "typography";
@use "../utils";
@use "reboot";
@use "fonts";
@use "typography";
1 change: 1 addition & 0 deletions packages/gamut-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@emotion/styled": "^11.3.0",
"lodash": "^4.17.5",
"react": "^17.0.2 || ^18.2.0",
"sass": "^1.85.0",
"stylis": "^4.0.7"
},
"publishConfig": {
Expand Down
2 changes: 1 addition & 1 deletion packages/gamut-styles/utils.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import "utils/index";
@use "utils/index";
6 changes: 3 additions & 3 deletions packages/gamut-styles/utils/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// import order is unfortunately important here
// variables needs to access functions, and mixins needs to access variables
@import "functions/index";
@import "variables/index";
@import "mixins/index";
@use "functions/index";
@use "variables/index" as index2;
@use "mixins/index" as index3;
12 changes: 6 additions & 6 deletions packages/gamut-styles/utils/mixins/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "font-smoothing";
@import "no-select";
@import "responsive";
@import "shadow";
@import "sr-only";
@import "legacy";
@use "font-smoothing";
@use "no-select";
@use "responsive";
@use "shadow";
@use "sr-only";
@use "legacy";
8 changes: 5 additions & 3 deletions packages/gamut-styles/utils/mixins/legacy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "responsive";

// Legacy Helper mixins

// these variables should be located in ../variables
Expand All @@ -8,19 +10,19 @@ $bp-tablet: 736px;
$bp-desktop: 960px;

@mixin device-phone {
@include screen-size-between($bp-phone, $bp-tablet - 1) {
@include responsive.screen-size-between($bp-phone, $bp-tablet - 1) {
@content;
}
}

@mixin device-tablet {
@include screen-size-between($bp-tablet, $bp-desktop - 1) {
@include responsive.screen-size-between($bp-tablet, $bp-desktop - 1) {
@content;
}
}

@mixin device-desktop {
@include screen-size-gte($bp-desktop) {
@include responsive.screen-size-gte($bp-desktop) {
@content;
}
}
Expand Down
6 changes: 4 additions & 2 deletions packages/gamut-styles/utils/variables/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use "colors";

$base-unit: 1rem;
$spacer: $base-unit;
$box-shadow: 0 1px 4px 0 $color-shadow;
$box-shadow-hovered: 0 4px 10px 0 $color-shadow;
$box-shadow: 0 1px 4px 0 colors.$color-shadow;
$box-shadow-hovered: 0 4px 10px 0 colors.$color-shadow;
$height-header: 4rem;
89 changes: 61 additions & 28 deletions packages/gamut-styles/utils/variables/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:color";
// NOTE: When updating, make sure you also update the gamut-styles/variables/index.js file

// =======================================
Expand Down Expand Up @@ -41,18 +42,18 @@ $color-shadow: rgba($color-black, 0.15);

$platform-mint-500: #37c3be;

$platform-mint-600: mix($color-black, $platform-mint-500, 20%);
$platform-mint-700: mix($color-black, $platform-mint-500, 40%);
$platform-mint-600: color.mix($color-black, $platform-mint-500, 20%);
$platform-mint-700: color.mix($color-black, $platform-mint-500, 40%);

$platform-purple-500: #69639a;

$platform-purple-200: mix($color-white, $platform-purple-500, 60%);
$platform-purple-300: mix($color-white, $platform-purple-500, 40%);
$platform-purple-400: mix($color-white, $platform-purple-500, 20%);
$platform-purple-600: mix($color-black, $platform-purple-500, 20%);
$platform-purple-700: mix($color-black, $platform-purple-500, 40%);
$platform-purple-800: mix($color-black, $platform-purple-500, 60%);
$platform-purple-900: mix($color-black, $platform-purple-500, 80%);
$platform-purple-200: color.mix($color-white, $platform-purple-500, 60%);
$platform-purple-300: color.mix($color-white, $platform-purple-500, 40%);
$platform-purple-400: color.mix($color-white, $platform-purple-500, 20%);
$platform-purple-600: color.mix($color-black, $platform-purple-500, 20%);
$platform-purple-700: color.mix($color-black, $platform-purple-500, 40%);
$platform-purple-800: color.mix($color-black, $platform-purple-500, 60%);
$platform-purple-900: color.mix($color-black, $platform-purple-500, 80%);

// =======================================
// EDITOR COLORS
Expand Down Expand Up @@ -176,75 +177,107 @@ $deprecated-color-black: #000000;

$deprecated-gamut-purple-500: #69639a;

$deprecated-gamut-purple-100: mix(
$deprecated-gamut-purple-100: color.mix(
$color-white,
$deprecated-gamut-purple-500,
80%
);
$deprecated-gamut-purple-200: mix(
$deprecated-gamut-purple-200: color.mix(
$color-white,
$deprecated-gamut-purple-500,
60%
);
$deprecated-gamut-purple-300: mix(
$deprecated-gamut-purple-300: color.mix(
$color-white,
$deprecated-gamut-purple-500,
40%
);
$deprecated-gamut-purple-400: mix(
$deprecated-gamut-purple-400: color.mix(
$color-white,
$deprecated-gamut-purple-500,
20%
);
$deprecated-gamut-purple-600: mix(
$deprecated-gamut-purple-600: color.mix(
$color-black,
$deprecated-gamut-purple-500,
20%
);
$deprecated-gamut-purple-700: mix(
$deprecated-gamut-purple-700: color.mix(
$color-black,
$deprecated-gamut-purple-500,
40%
);
$deprecated-gamut-purple-800: mix(
$deprecated-gamut-purple-800: color.mix(
$color-black,
$deprecated-gamut-purple-500,
60%
);
$deprecated-gamut-purple-900: mix(
$deprecated-gamut-purple-900: color.mix(
$color-black,
$deprecated-gamut-purple-500,
80%
);

$deprecated-gamut-royal-blue-500: #4b35ef;

$deprecated-gamut-royal-blue-600: mix(
$deprecated-gamut-royal-blue-600: color.mix(
$color-black,
$deprecated-gamut-royal-blue-500,
20%
);
$deprecated-gamut-royal-blue-700: mix(
$deprecated-gamut-royal-blue-700: color.mix(
$color-black,
$deprecated-gamut-royal-blue-500,
40%
);
$deprecated-gamut-royal-blue-800: mix(
$deprecated-gamut-royal-blue-800: color.mix(
$color-black,
$deprecated-gamut-royal-blue-500,
60%
);

$deprecated-gamut-mint-500: #37c3be;

$deprecated-gamut-mint-100: mix($color-white, $deprecated-gamut-mint-500, 80%);
$deprecated-gamut-mint-200: mix($color-white, $deprecated-gamut-mint-500, 60%);
$deprecated-gamut-mint-300: mix($color-white, $deprecated-gamut-mint-500, 40%);
$deprecated-gamut-mint-400: mix($color-white, $deprecated-gamut-mint-500, 20%);
$deprecated-gamut-mint-600: mix($color-black, $deprecated-gamut-mint-500, 20%);
$deprecated-gamut-mint-700: mix($color-black, $deprecated-gamut-mint-500, 40%);
$deprecated-gamut-mint-800: mix($color-black, $deprecated-gamut-mint-500, 60%);
$deprecated-gamut-mint-900: mix($color-black, $deprecated-gamut-mint-500, 80%);
$deprecated-gamut-mint-100: color.mix(
$color-white,
$deprecated-gamut-mint-500,
80%
);
$deprecated-gamut-mint-200: color.mix(
$color-white,
$deprecated-gamut-mint-500,
60%
);
$deprecated-gamut-mint-300: color.mix(
$color-white,
$deprecated-gamut-mint-500,
40%
);
$deprecated-gamut-mint-400: color.mix(
$color-white,
$deprecated-gamut-mint-500,
20%
);
$deprecated-gamut-mint-600: color.mix(
$color-black,
$deprecated-gamut-mint-500,
20%
);
$deprecated-gamut-mint-700: color.mix(
$color-black,
$deprecated-gamut-mint-500,
40%
);
$deprecated-gamut-mint-800: color.mix(
$color-black,
$deprecated-gamut-mint-500,
60%
);
$deprecated-gamut-mint-900: color.mix(
$color-black,
$deprecated-gamut-mint-500,
80%
);

$deprecated-gamut-purple: $deprecated-gamut-purple-500;
$deprecated-gamut-royal-blue: $deprecated-gamut-royal-blue-500;
Expand Down
19 changes: 11 additions & 8 deletions packages/gamut-styles/utils/variables/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@use "base";
@use "colors";

// Font Families:

$font-family-accent: "Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
Expand Down Expand Up @@ -25,25 +28,25 @@ $font-weight-dt: $font-weight-bold;

// Font colors

$color-body: $color-navy;
$color-headings: $color-gray-900;
$bg-body: $color-white;
$color-link: $deprecated-gamut-royal-blue-500;
$hover-color-link: $deprecated-gamut-royal-blue-600;
$color-body: colors.$color-navy;
$color-headings: colors.$color-gray-900;
$bg-body: colors.$color-white;
$color-link: colors.$deprecated-gamut-royal-blue-500;
$hover-color-link: colors.$deprecated-gamut-royal-blue-600;
$decoration-link: none;
$hover-decoration-link: underline;

// Font margins

$margin-bottom-paragraph: $spacer;
$margin-bottom-headings: $spacer;
$margin-bottom-paragraph: base.$spacer;
$margin-bottom-headings: base.$spacer;
$margin-bottom-label: 0;
$line-height-base: 1.5;
$line-height-headings: 1.1;

// Font sizes

$font-size-base: $base-unit;
$font-size-base: base.$base-unit;
$font-size-h1: px-rem(64);
$font-size-h2: px-rem(44);
$font-size-h3: px-rem(34);
Expand Down
10 changes: 5 additions & 5 deletions packages/gamut-styles/utils/variables/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "colors";
@import "base";
@import "grid";
@import "typography";
@import "responsive";
@use "colors";
@use "base";
@use "grid";
@use "typography";
@use "responsive";
3 changes: 2 additions & 1 deletion packages/gamut/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@
"peerDependencies": {
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"react-dom": "^17.0.2 || ^18.2.0",
"react": "^17.0.2 || ^18.2.0",
"react-dom": "^17.0.2 || ^18.2.0"
"sass": "^1.85.0"
},
"publishConfig": {
"access": "public"
Expand Down
Loading
Loading