DIGCOLL-5661 style updates

[davidseguin]

Various Marbley updates; details here: https://jira.metmuseum.org/browse/DIGCOLL-5661

[JosephCurley]

@davidseguin can you explain why some components use $spacing-soft-m and others use $spacing-component-margin?

I would assume we would want everything to use $spacing-component-margin now, but Im probably missing something?

[davidseguin]

@JosephCurley I'm glad you brought that up, it's the most important thing here. So now that $productive-width-max is a complicated formula (rather than a hard value), $spacing-component-margin is half of that and now also bit of a complicated formula. Some places that used the old $spacing-component-margin (like padding, "left" etc) can't take that calc value. So I made $spacing-soft-m which is essentially the old $spacing-component-margin (a medium-sized "soft" value based on screen width ie 7.5vw). It seemed like the best way to handle it, but obv I'm open to ideas.

[stephenhmarsh]

I tried to pull latest main into this to clear the merge conflicts in /dist, but I could not run build. Here's the errors I got:

➜  marble git:(DIGCOLL-5661-style-updates) ✗ pnpm run build

> @metmuseum/marble@1.1.0 build /Users/stephen/dev/marble
> webpack --config webpack.config.js --mode=production

compiling marble for production
asset marble.js 113 KiB [emitted] [minimized] (name: main) 2 related assets
asset marble.css 69.4 KiB [emitted] [minimized] (name: main) 1 related asset
Entrypoint main 182 KiB (630 KiB) = marble.css 69.4 KiB marble.js 113 KiB 2 auxiliary assets
orphan modules 453 KiB (javascript) 975 bytes (runtime) [orphan] 186 modules
runtime modules 1.13 KiB 5 modules
cacheable modules 349 KiB (javascript) 72.7 KiB (css/mini-extract)
  modules by path ./node_modules/.pnpm/core-js@3.23.4/node_modules/core-js/ 39.3 KiB
    ./node_modules/.pnpm/core-js@3.23.4/node_modules/core-js/modules/es.array.includes.js 720 bytes [built] [code generated]
    + 69 modules
  modules by path ./node_modules/.pnpm/flickity@2.3.0/node_modules/flickity/js/*.js 69.2 KiB
    ./node_modules/.pnpm/flickity@2.3.0/node_modules/flickity/js/index.js 958 bytes [built] [code generated]
    ./node_modules/.pnpm/flickity@2.3.0/node_modules/flickity/js/flickity.js 24.8 KiB [built] [code generated]
    + 9 modules
  modules by path ./src/ 180 KiB (javascript) 72.7 KiB (css/mini-extract)
    ./src/index.mjs + 176 modules 180 KiB [built] [code generated]
    ./src/marble.scss 50 bytes [built] [code generated]
    css ./node_modules/.pnpm/css-loader@6.7.1_webpack@5.73.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@7.0.1_mepnsno3xmng6eyses4tepu7bu/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@13.0.2_sass@1.53.0+webpack@5.73.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/marble.scss 72.7 KiB [built] [code generated]
  + 10 modules

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/banner/banner.scss:73:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/jumplink-banner/jumplink-banner.scss:30:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/card/_card-base.scss:109:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/card/card-editorial/card-editorial.scss:18:2

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/card/content-card/content-card.scss:68:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/topics-slider/topic-card.scss:13:2

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 300px + calc((100% - min(calc(85vw - (100vw - 100%)), 1600px)) / 2)
^......................................................^ webpack://./src/components/topics-slider/topic-card.scss:14:2

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/plan-your-visit/plan-your-visit.scss:7:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/alert/alert.scss:10:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/quotes-list/quotes-list.scss:2:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/base/mixins/_typography.scss:105:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/notification-banner/notification-banner.scss:5:0

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/notification-banner/notification-banner.scss:16:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/base/mixins/_mixins.scss:30:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/carousel/flickity-overrides.scss:45:1

WARNING in marble.css
marble.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (100% - min(calc(85vw - (100vw - 100%)), 1600px))/2
^.........................................^ webpack://./src/components/carousel/carousel.scss:12:2

[stephenhmarsh]

looks great. thanks for all the work that went into this!!