Overwriting styles

[leylines]

The new lib/Styles/variables-overrides.scss throws a lot of errors even with everything commented out except the

with (
);

expected "{".
   ╷
26 │ );
   │  ^
   ╵
  lib/Styles/variables-overrides.scss 26:2                           @forward
  node_modules/terriajs/lib/Sass/common/_variables.scss 6:1          @use
  node_modules/terriajs/lib/Sass/exports/_variables-export.scss 6:1  root stylesheet

@forward "~terriajs/lib/Sass/common/_default_variables.scss";
// To customise the look of your map, uncomment and change values here and in lib/Views/global.scss

with (
    // If your logo is big, set this to give it more room.
    //$logo-height: 120px;

    // If using a non-standard font, remember to include an @import statement in global.scss
    //$font-base: 'Josefin Sans', sans-serif;
    //$font-pop: $font-base; // If you just want to use one font throughout, do this.

    // These variables are for buttons and text.
    // "color-secondary" should be a lighter color than "color-primary" but still readable contrasted with white.
    //$color-primary: maroon;
    //$color-secondary: hsl(60,80%,60%); // or: lighten($color-primary, 20%);

    // These variables set background panel colors
    //$dark: hsl(0,30%,30%);
    //$dark-with-overlay: hsl(0,30%,30%);;
    //$dark-lighter: hsl(0,30%,50%);

    // You might find it helpful to define these and use them.
    //$color-primary-light:lighten($color-primary,10%);
    //$color-primary-dark:darken($color-primary,10%);
    //$dark-darker: hsl(0,30%,15%);
);

What am i doing wrong?

Thank you,

Jörg

[na9da]

Hi @leylines,

We upgraded the SASS package version which is a breaking change. It needs to match these. Is your instance still using the old SASS packages for some reason?

I would suggest running:

yarn install
yarn gulp sync-terriajs-dependencies # to sync deps between terriajs and terriamap
yarn install 

[leylines]

Hi @na9da,

I run:

rm -rf TerriaMap
git clone [email protected]:TerriaJS/TerriaMap.git
cd TerriaMap
yarn install
yarn gulp sync-terriajs-dependencies
rm -rf node_modules
yarn install
yarn gulp release
yarn start

This works. When i then comment out:

with (
    // If your logo is big, set this to give it more room.
    //$logo-height: 120px;

    // If using a non-standard font, remember to include an @import statement in global.scss
    $font-base: 'Josefin Sans', sans-serif;
    $font-pop: $font-base; // If you just want to use one font throughout, do this.

    // These variables are for buttons and text.
    // "color-secondary" should be a lighter color than "color-primary" but still readable contrasted with white.
    $color-primary: maroon;
    $color-secondary: hsl(60,80%,60%); // or: lighten($color-primary, 20%);

    // These variables set background panel colors
    $dark: hsl(0,30%,30%);
    $dark-with-overlay: hsl(0,30%,30%);;
    $dark-lighter: hsl(0,30%,50%);

    // You might find it helpful to define these and use them.
    $color-primary-light:lighten($color-primary,10%);
    $color-primary-dark:darken($color-primary,10%);
    $dark-darker: hsl(0,30%,15%);
);

and then run:

vi lib/Styles/variables-overrides.scss
yarn gulp release

i get:

....

ERROR in ./node_modules/terriajs/lib/Sass/exports/_variables-export.scss (./node_modules/terriajs/lib/Sass/exports/_variables-export.scss.webpack[javascript/auto]!=!./node_modules/terriajs-typings-for-css-modules-loader/src/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[13].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[13].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[13].use[4]!./node_modules/terriajs/lib/Sass/exports/_variables-export.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
expected "{".
  ╷
9 │     $font-base: 'Josefin Sans', sans-serif;
  │                                           ^
  ╵
  lib/Styles/variables-overrides.scss 9:43                           @forward
  node_modules/terriajs/lib/Sass/common/_variables.scss 6:1          @use
  node_modules/terriajs/lib/Sass/exports/_variables-export.scss 6:1  root stylesheet
 @ ./node_modules/terriajs/lib/Sass/exports/_variables-export.scss
 @ ./node_modules/terriajs/lib/ReactViews/StandardUserInterface/StandardTheme.tsx 25:0-66 27:57-66
 @ ./node_modules/terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface.tsx 73:0-46 133:95-106
 @ ./node_modules/terriajs/lib/ReactViewModels/ViewState.ts
 @ ./index.js
 @ ./entry.js

webpack 5.97.1 compiled with 122 errors and 1 warning in 66765 ms
[08:46:58] 'releaseApp' errored after 1.15 min
[08:46:58] Error in plugin "terriajs-runWebpack"
Message:
    Build has errors (see above).
[08:46:58] 'release-app' errored after 1.15 min
[08:46:58] 'release' errored after 1.15 min
error Command failed with exit code 1.

So all code is from TerriaMap without any modification except the changes in lib/Styles/variables-overrides.scss.

Do i have to change something else to get it working?

Thank you and regards,

Jörg

[zoran995]

Hi @leylines, there is an excessive ; at the end of @forward line. The syntax sass expects is

@forward "~terriajs/lib/Sass/common/_default_variables.scss" with (
  ...
);

And with that, it allows us to use the values of default variables overridden with the values you provided

[leylines]

Thank you,

Got it working with:

@forward "~terriajs/lib/Sass/common/_default_variables.scss" with (
  // If your logo is big, set this to give it more room.
  //$logo-height: 120px;
  // If using a non-standard font, remember to include an @import statement in global.scss
  // $font-base: "Open Sans", sans-serif;
  //$font-base: { sans: ["Josefin Sans", "sans-serif"] };
  //$font-pop: $font-base; // If you just want to use one font throughout, do this.
  // These variables are for buttons and text.
  // "color-secondary" should be a lighter color than "color-primary" but still readable contrasted with white.
  $color-primary: hsl(0, 0%, 64%),
  $color-secondary: hsl(0, 0%, 51%)
    // These variables set background panel colors
  //$dark: hsl(0, 0%, 10%);
  //$dark-with-overlay: hsl(0, 0%, 10%);;
  //$dark-lighter: hsl(0, 0%, 20%);
  // You might find it helpful to define these and use them.
  //$color-primary-light: color.adjust($color-primary, $lightness: 10%);
  //$color-primary-dark: color.adjust($color-primary, $lightness: -10%);
  //$dark-darker: hsl(0, 0%, 0%);
);

Because the base layout is now darker, I didn't have to make many changes.

[leylines]

A short feedback from my community:

They all love the new UI :-)

I just had to made one single change in the terriajs-repo to get the workbench a little more compact:

--- a/lib/ReactViews/Workbench/WorkbenchItem.tsx
+++ b/lib/ReactViews/Workbench/WorkbenchItem.tsx
@@ -187,7 +187,7 @@ const StyledLi = styled(Li)`
   border: 1px solid ${(p) => p.theme.grey};
   width: 100%;

-  margin-bottom: 20px;
+  margin-bottom: 10px;
   &:last-child {
     margin-bottom: 0px;
   }

Thank you and regards,

Jörg