diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index e798d741dc..d96dfe1090 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -42,16 +42,10 @@ jobs: # 👇 Adds Chromatic as a step in the workflow - name: Publish to Chromatic - uses: chromaui/action@v1 + uses: chromaui/action@latest # Chromatic GitHub Action options with: token: ${{ secrets.GITHUB_TOKEN }} # 👇 Chromatic projectToken, refer to the manage page to obtain it. projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - - - name: Check failure status - uses: act10ns/slack@v1 - with: - status: ${{ job.status }} - if: failure() diff --git a/.github/workflows/stylelint-pr.yml b/.github/workflows/stylelint-pr.yml index 4064056aa5..8c42dc57e1 100644 --- a/.github/workflows/stylelint-pr.yml +++ b/.github/workflows/stylelint-pr.yml @@ -42,4 +42,4 @@ jobs: reporter: github-pr-review filter_mode: "diff_context" stylelint_config: ".stylelintrc.json" - stylelint_input: "**/*.(scss|jsx)" + stylelint_input: "**/*.scss" diff --git a/.storybook/.babelrc b/.storybook/.babelrc deleted file mode 100644 index 7ad3055f3a..0000000000 --- a/.storybook/.babelrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - [ - "@babel/preset-react", - { - "runtime": "automatic" - } - ] - ], - "plugins": [ - ["@babel/plugin-proposal-private-property-in-object", { "loose": true }], - ["@babel/plugin-proposal-decorators", { "legacy": true }], - "@babel/plugin-proposal-nullish-coalescing-operator" - ] -} diff --git a/.storybook/main.js b/.storybook/main.js index d1f354c416..4585116874 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,37 +3,27 @@ const path = require("path"); // Export a function. Accept the base config as the only param. module.exports = { - stories: ["../stories/*.stories.@(js|jsx|mdx|tsx)", "../blocks/**/*.story.@(js|jsx|mdx|tsx)"], - addons: [ - "@etchteam/storybook-addon-css-variables-theme", - "@storybook/addon-a11y", - "@storybook/addon-docs", - "@storybook/addon-knobs", - "@storybook/addon-essentials", - ], - staticDirs: ["../resources"], - webpackFinal: async (config) => { + stories: [ + "../stories/*.@(mdx|stories.@(js|jsx|tsx))", + "../blocks/**/*.story.@(js|jsx|mdx|tsx)" + ], + + addons: [ + "@storybook/addon-a11y", + "@storybook/addon-controls", + "@storybook/addon-docs", + "@storybook/addon-essentials", + "@storybook/addon-webpack5-compiler-babel", + "@storybook/addon-styling-webpack" + ], + + staticDirs: ["../resources"], + + webpackFinal: async (config) => { // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook. - // Make whatever fine-grained changes you need - // eslint-disable-next-line no-unused-expressions - config.resolve = { - ...config.resolve, - alias: { - ...config.resolve.alias, - "fusion:consumer": path.resolve(__dirname, "./alias/consumer.js"), - "fusion:content": path.resolve(__dirname, "./alias/content.js"), - "fusion:context": path.resolve(__dirname, "./alias/context.js"), - "fusion:environment": path.resolve(__dirname, "./alias/environment.js"), - "fusion:intl": path.resolve(__dirname, "./alias/intl.js"), - "fusion:properties": path.resolve(__dirname, "./alias/properties.js"), - "fusion:static": path.resolve(__dirname, "./alias/static.js"), - "fusion:themes": path.resolve(__dirname, "./alias/themes.js"), - }, - }; - config.module.rules.push( { test: /\.scss$/, @@ -49,11 +39,91 @@ module.exports = { { test: /\.(js|jsx)$/, include: path.resolve(__dirname, "../node_modules/@wpmedia/arc-themes-components"), - use: ["babel-loader"], - } + use: { + loader: "babel-loader", + options: { + "plugins": [ + [ + // Module resolver aliases need to be set here as well so arc-themes-components uses the right mock files. + "module-resolver", + { + "alias": { + "fusion:themes": "./.storybook/alias/themes.js", + "fusion:content": "./.storybook/alias/content.js", + "fusion:context": "./.storybook/alias/context.js", + "fusion:consumer": "./.storybook/alias/consumer.js", + "fusion:environment": "./.storybook/alias/environment.js", + "fusion:properties": "./.storybook/alias/properties.js", + "fusion:static": "./.storybook/alias/static.js", + "fusion:intl": "./.storybook/alias/intl.js" + } + } + ] + ], + }, + }, + }, ); + config.externals = /^(fusion:)/; + // Return the altered config return config; }, + + framework: { + name: "@storybook/react-webpack5", + options: {} + }, + + docs: { + autodocs: true + }, + + babelDefault: { + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + }, + "modules": "commonjs" + } + ], + [ + "@babel/preset-react", + { + "runtime": "automatic" + } + ] + ], + "plugins": [ + "@babel/plugin-proposal-nullish-coalescing-operator", + "transform-react-remove-prop-types", + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-private-methods", + [ + "module-resolver", + { + "alias": { + "fusion:themes": "./.storybook/alias/themes.js", + "fusion:content": "./.storybook/alias/content.js", + "fusion:context": "./.storybook/alias/context.js", + "fusion:consumer": "./.storybook/alias/consumer.js", + "fusion:environment": "./.storybook/alias/environment.js", + "fusion:properties": "./.storybook/alias/properties.js", + "fusion:static": "./.storybook/alias/static.js", + "fusion:intl": "./.storybook/alias/intl.js" + } + } + ] + ], + }, }; diff --git a/.storybook/manager.js b/.storybook/manager.js index e28d4f8a14..392e19e2df 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,4 @@ -import { addons } from "@storybook/addons"; +import { addons } from "@storybook/manager-api"; import arcTheme from "./arcTheme"; addons.setConfig({ diff --git a/.storybook/preview.js b/.storybook/preview.js index e4cb358c71..ae1a146c77 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,14 +1,6 @@ -import cssVariablesTheme from "@etchteam/storybook-addon-css-variables-theme"; +import "./themes/news.scss"; -// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved -import news from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/news.scss"; -// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved -import commerce from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/commerce.scss"; - -export const decorators = [cssVariablesTheme]; - -// eslint-disable-next-line import/prefer-default-export -export const parameters = { +const parameters = { layout: "fullscreen", a11y: { element: "#root", @@ -36,12 +28,12 @@ export const parameters = { }, options: { storySort: (a, b) => - a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), - }, - cssVariables: { - files: { - news, - commerce, - }, + a.title === b.title + ? 0 + : a.id.localeCompare(b.id, undefined, { numeric: true }) }, }; + +export default { + parameters, +}; \ No newline at end of file diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index 0036f70055..124014a736 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -1,7 +1,7 @@ @use "@wpmedia/arc-themes-components/scss" with ( $breakpoints: ( "default": "min-width: 0", - "desktop": "min-width: 48rem", + "desktop": "min-width: 48rem" ), $global: ( "black": #000000, @@ -112,7 +112,7 @@ "border-radius-2": 20rem, "border-radius-3": 100vmax, "border-style-1": solid, - "border-width-1": 1px, + "border-width-1": 1px ), $tokens: ( "default": ( @@ -173,7 +173,7 @@ "content-scale-width": calc(var(--content-max-width) / var(--layout-max-width) * 100%), "header-nav-chain-height": 80px, "header-nav-chain-height-scrolled": 80px, - "header-nav-chain-overlay-background-color": rgba(25, 25, 25, 0.5), + "header-nav-chain-overlay-background-color": rgba(25, 25, 25, 0.5) ), "blocks": ( "account-management": ( @@ -184,30 +184,28 @@ "margin-inline-end": var(--global-spacing-7), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "font-size": var(--global-font-size-7), - "margin-block-end": var(--global-spacing-2), - "margin-bottom": var(--global-spacing-2), + "margin-block-end": var(--global-spacing-2) ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), - "margin-block-end": var(--global-spacing-5), - ), - ), + "margin-block-end": var(--global-spacing-5) + ) + ) ), "account-management-edit": ( "border-color": var(--border-color), @@ -222,15 +220,15 @@ "components": ( "button-default": ( "color": var(--color-primary), - "text-decoration": underline, + "text-decoration": underline ), "button-default-hover": ( - "color": var(--color-primary-hover), + "color": var(--color-primary-hover) ), "paragraph": ( - "margin-block-end": 0, - ), - ), + "margin-block-end": 0 + ) + ) ), "account-management-edit-label": ( "align-items": center, @@ -238,12 +236,12 @@ "justify-content": space-between, "components": ( "paragraph": ( - "font-weight": var(--global-font-weight-7), - ), - ), + "font-weight": var(--global-font-weight-7) + ) + ) ), "account-management-section": ( - "margin-block-end": var(--global-spacing-7), + "margin-block-end": var(--global-spacing-7) ), "account-management-social-edit": ( "align-items": center, @@ -257,7 +255,7 @@ "padding-block-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-4), "padding-inline-start": var(--global-spacing-4), - "padding-inline-end": var(--global-spacing-4), + "padding-inline-end": var(--global-spacing-4) ), "ads-block": ( "components": ( @@ -266,9 +264,9 @@ "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), "font-weight": var(--body-font-weight-small), - "color": "$global.neutral-7", - ), - ), + "color": "$global.neutral-7" + ) + ) ), "ads-block-admin": ( "background-color": "$global.neutral-7", @@ -283,18 +281,18 @@ "components": ( "stack": ( "gap": "$global.spacing-4", - "padding-block-end": "$global.spacing-5", + "padding-block-end": "$global.spacing-5" ), "paragraph": ( - "color": "$global.white", - ), - ), + "color": "$global.white" + ) + ) ), "alert-bar": ( "align-items": flex-start, "background-color": var(--global-red-5), "display": flex, - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)), "flex-wrap": nowrap, "justify-content": space-between, "word-break": break-word, @@ -302,17 +300,17 @@ "button-default": ( "background": none, "border": none, - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), - "flex": 0 0 auto, + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)), + "flex": 0 0 auto ), "button-large": ( "margin-block-end": var(--global-spacing-1), "margin-block-start": var(--global-spacing-1), - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)) ), "link": ( "color": var(--global-white), - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)), "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "font-weight": var(--global-font-weight-7), @@ -320,36 +318,36 @@ "padding-block-start": var(--global-spacing-5), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-4), - "text-decoration": none, + "text-decoration": none ), "link-hover": ( - "color": var(--text-color), + "color": var(--text-color) ), "icon": ( "fill": var(--global-white), - "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)), - ), - ), + "filter": drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)) + ) + ) ), "article-body": ( "font-family": var(--font-family-primary), "font-size": var(--body-font-size), "components": ( "link": ( - "color": var(--color-primary), + "color": var(--color-primary) ), "paragraph": ( "display": block, - "overflow": initial, + "overflow": initial ), "media-item-fig-caption": ( "background-color": var(--global-white), - "line-height": var(--body-line-height-5), + "line-height": var(--body-line-height-5) ), "icon": ( - "fill": currentColor, - ), - ), + "fill": currentColor + ) + ) ), "article-body-blockquote": ( "box-shadow": inset 5px 0 0 0 var(--global-neutral-4), @@ -363,17 +361,17 @@ "components": ( "paragraph": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "article-body-children": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "article-body-citation": ( "font-family": var(--font-family-primary), "font-style": normal, - "font-size": var(--body-font-size), + "font-size": var(--body-font-size) ), "article-body-correction": ( "box-shadow": inset 0 -1px 0 0 var(--border-color), @@ -382,38 +380,38 @@ "components": ( "heading": ( "font-size": var(--heading-level-6-font-size), - "text-transform": uppercase, + "text-transform": uppercase ), "paragraph": ( - "color": var(--global-neutral-6), - ), - ), + "color": var(--global-neutral-6) + ) + ) ), "article-body-divider": ( "background-color": var(--border-color), - "block-size": 1px, + "block-size": 1px ), "article-body-embed-responsive": ( "aspect-ratio": calc(16 / 9), - "inline-size": 100%, + "inline-size": 100% ), "article-body-embed-responsive-item": ( "aspect-ratio": calc(16 / 9), "block-size": auto, - "inline-size": 100%, + "inline-size": 100% ), "article-body-gallery-close-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-6), - "inline-size": var(--global-spacing-6), - ), - ), + "inline-size": var(--global-spacing-6) + ) + ) ), "article-body-gallery-fullscreen": ( "components": ( @@ -421,66 +419,66 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), "padding-block-end": 0, - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "article-body-gallery-track-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-8), - "inline-size": var(--global-spacing-8), - ), - ), + "inline-size": var(--global-spacing-8) + ) + ) ), "article-body-h2": ( "font-size": var(--heading-level-2-font-size), "line-height": var(--heading-level-2-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h3": ( "font-size": var(--heading-level-3-font-size), "line-height": var(--heading-level-3-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h4": ( "font-size": var(--heading-level-4-font-size), "line-height": var(--heading-level-4-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h5": ( "font-size": var(--heading-level-5-font-size), "line-height": var(--heading-level-5-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-h6": ( "font-size": var(--heading-level-6-font-size), "line-height": var(--heading-level-6-line-height), "font-family": var(--font-family-primary), - "font-weight": bold, + "font-weight": bold ), "article-body-image-float-left": ( "inline-size": 50%, "float": inline-start, - "margin-inline-end": var(--global-spacing-5), + "margin-inline-end": var(--global-spacing-5) ), "article-body-image-float-right": ( "inline-size": 50%, "float": inline-end, - "margin-inline-start": var(--global-spacing-5), + "margin-inline-start": var(--global-spacing-5) ), "article-body-image-wrapper": ( "align-items": center, - "aspect-ratio": calc(16 / 9), + "aspect-ratio": calc(16/9), "background-color": var(--global-black), "display": flex, "justify-content": center, @@ -491,9 +489,9 @@ "block-size": auto, "max-block-size": 100%, "max-inline-size": 100%, - "object-fit": contain, - ), - ), + "object-fit": contain + ) + ) ), "article-body-interstitial-link": ( "font-family": var(--font-family-primary), @@ -503,45 +501,42 @@ "border-block-end-width": 1px, "border-block-end-style": solid, "border-block-end-color": var(--color-primary), - "color": var(--color-primary), - ), - ), + "color": var(--color-primary) + ) + ) ), "article-body-link": ( - "color": var(--color-primary), + "color": var(--color-primary) ), "article-body-ol": ( "font-size": var(--body-font-size), "line-height": var(--body-line-height), "list-style-position": inside, - "list-style-type": decimal, + "list-style-type": decimal ), "article-body-pullquote": ( - "box-shadow": ( - inset 0 -5px 0 0 var(--border-color), - inset 0 5px 0 0 var(--border-color), - ), + "box-shadow": (inset 0 -5px 0 0 var(--border-color), inset 0 5px 0 0 var(--border-color)), "gap": var(--global-spacing-4), - "padding-block-start": var(--global-spacing-6) 0, - "padding-inline-end": var(--global-spacing-5), - "padding-block-end": var(--global-spacing-6) 0, - "padding-inline-start": var(--global-spacing-5), + "padding-block-start": var(--global-spacing-6) , + "padding-inline-end": 0, + "padding-block-end": var(--global-spacing-5), + "padding-inline-start": 0, "text-align": center, "components": ( "paragraph": ( "font-style": italic, "font-size": var(--heading-level-5-font-size), "font-weight": var(--global-font-weight-7), - "line-height": var(--heading-level-5-line-height), - ), - ), + "line-height": var(--heading-level-5-line-height) + ) + ) ), "article-body-table": ( "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), "text-align": center, - "inline-size": 100%, + "inline-size": 100% ), "article-body-table-td": ( "border-block-start-width": 1px, @@ -559,7 +554,7 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-1), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "article-body-table-th": ( "border-block-start-width": 1px, @@ -578,7 +573,7 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-1), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "article-body-table-thead": ( "background-color": var(--global-neutral-4), @@ -593,72 +588,72 @@ "border-block-start-color": var(--border-color), "border-block-end-color": var(--border-color), "border-inline-start-color": var(--border-color), - "border-inline-end-color": var(--border-color), + "border-inline-end-color": var(--border-color) ), "article-body-ul": ( "font-size": var(--body-font-size), "line-height": var(--body-line-height), "list-style-position": inside, - "list-style-type": disc, + "list-style-type": disc ), "article-tag": ( "components": ( "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "author-bio": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "author-bio-author": ( "gap": var(--global-spacing-4), "components": ( "image": ( "aspect-ratio": 1, - "block-size": 100%, "border-radius": var(--border-radius-circle), + "block-size": 100%, "inline-size": 100%, "max-inline-size": var(--global-spacing-13), "max-block-size": var(--global-spacing-13), - "object-fit": cover, + "object-fit": cover ), "stack": ( "gap": var(--global-spacing-2), - "inline-size": 100%, - ), - ), + "inline-size": 100% + ) + ) ), "author-bio-author-description": ( "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-small), - "margin-block-end": 0, + "margin-block-end": 0 ), "author-bio-author-name": ( "color": var(--color-primary), "font-family": var(--font-family-primary), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "author-bio-social-link": ( "components": ( "icon": ( - "fill": var(--color-primary), - ), - ), + "fill": var(--color-primary) + ) + ) ), "author-bio-social-link-hover": ( "components": ( "icon": ( - "fill": var(--color-primary-hover), - ), - ), + "fill": var(--color-primary-hover) + ) + ) ), "author-bio-social-link-wrapper": ( "gap": var(--global-spacing-4), - "margin-block-start": 0, + "margin-block-start": 0 ), "byline": ( "font-size": var(--body-font-weight), @@ -668,13 +663,13 @@ "components": ( "attribution-link": ( "color": var(--text-color), - "text-decoration": underline, + "text-decoration": underline ), "attribution-link-hover": ( "color": var(--text-color-subtle), - "text-decoration": none, - ), - ), + "text-decoration": none + ) + ) ), "card-list": ( "background-color": var(--background-color), @@ -683,54 +678,54 @@ "border-start-end-radius": var(--border-radius), "border-start-start-radius": 0, "box-shadow": var(--global-box-shadow-1), - "padding-block-end": var(--global-spacing-4), - "padding-block-start": var(--global-spacing-4), + "padding-block-end": var(--global-spacing-4) , + "padding-block-start": var(--global-spacing-4) , "padding-inline-end": 0, "padding-inline-start": 0, "components": ( "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), - "line-height": var(--heading-level-5-line-height), + "line-height": var(--heading-level-5-line-height) ), "image": ( - "transition": opacity 0.4s ease, + "transition": opacity 0.4s ease ), "image-hover": ( "cursor": pointer, - "opacity": 0.8, + "opacity": 0.8 ), "link": ( - "color": var(--text-color), + "color": var(--text-color) ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "card-list-list": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-4), - "padding-inline-start": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4) ), "card-list-main-item-image-link": ( "components": ( "image": ( "inline-size": 100%, "max-block-size": 40vh, - "object-fit": cover, - ), - ), + "object-fit": cover + ) + ) ), "card-list-main-item-text-container": ( "gap": var(--global-spacing-2), @@ -738,28 +733,28 @@ "heading": ( "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "overline": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "card-list-secondary-item": ( "components": ( "heading": ( "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "card-list-secondary-item-heading-link": ( - "inline-size": 100%, + "inline-size": 100% ), "card-list-secondary-item-image-link": ( - "max-inline-size": 105px, + "max-inline-size": 105px ), "card-list-title": ( "font-size": var(--heading-level-5-font-size), @@ -767,194 +762,323 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-4), - "padding-inline-start": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4) ), "checkout": ( "font-family": var(--font-family-primary), - "margin-bottom": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5), "components": ( "heading": ( - "font-size": var(--global-font-size-12), + "font-size": var(--global-font-size-12) ), "link": ( "color": var(--color-primary), - "border-bottom": 1px solid var(--color-primary), + "border-block-end-width": 1px, + "border-block-end-style": solid, + "border-block-end-color": var(--color-primary) ), "link-hover": ( "color": var(--color-primary-hover), - "border-bottom": 1px solid var(--color-primary-hover), - ), - ), + "border-block-end-width": 1px, + "border-block-end-style": solid, + "border-block-end-color": var(--color-primary-hover) + ) + ) ), "checkout-cart": ( - "margin-top": var(--global-spacing-6), + "margin-block-start": var(--global-spacing-6), "components": ( "heading": ( - "margin-bottom": var(--global-spacing-5), - "font-size": var(--global-font-size-11), - ), - ), + "margin-block-end": var(--global-spacing-5), + "font-size": var(--global-font-size-11) + ) + ) ), "checkout-cart-item": ( "color": "$global.neutral-6", "font-size": var(--global-font-size-4), - "margin": 0 var(--global-spacing-2), - "padding": var(--global-spacing-2) 0, + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": 0, + "padding-block-end": var(--global-spacing-2), + "padding-inline-start": 0 ), "checkout-cart-item--info": ( - "font-size": var(--global-font-size-2), + "font-size": var(--global-font-size-2) ), "checkout-cart-item--name": ( "font-size": var(--global-font-size-7), - "font-weight": bold, + "font-weight": bold ), "checkout-cart-items": ( - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color) ), "checkout-contact-info": ( - "margin-top": var(--global-spacing-6), + "margin-block-start": var(--global-spacing-6), "components": ( "heading": ( - "margin-bottom": var(--global-spacing-5), - "font-size": var(--global-font-size-11), + "margin-block-end": var(--global-spacing-5), + "font-size": var(--global-font-size-11) ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "checkout-contact-info-profile": ( "display": grid, - "width": 100%, + "inline-size": 100%, "grid-template-columns": repeat(2, 1fr), - "column-gap": var(--global-spacing-5), + "column-gap": var(--global-spacing-5) ), "checkout-identity-row": ( - "width": 100%, + "inline-size": 100%, "display": inline-flex, "align-items": center, "line-height": var(--global-line-height-4), "components": ( "image": ( - "width": var(--global-spacing-4), - "height": var(--global-spacing-4), - "margin": 0 var(--global-spacing-2) 0 0, + "inline-size": var(--global-spacing-4), + "block-size": var(--global-spacing-4), + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": 0 ), "icon": ( "fill": #415993, - "width": var(--global-spacing-4), - "height": var(--global-spacing-4), - "margin": 0 var(--global-spacing-2) 0 0, - ), - ), + "inline-size": var(--global-spacing-4), + "block-size": var(--global-spacing-4), + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": 0 + ) + ) ), "checkout-payment": ( - "margin-top": var(--global-font-size-11), + "inline-size": 100% ), "checkout-payment-form": ( "display": grid, - "margin-top": var(--global-font-size-11), - "gap": var(--global-spacing-6), - "components": ( - "paragraph": ( - "font-size": var(--heading-level-6-font-size), - "font-weight": var(--heading-level-4-font-weight), - ), - ), + "margin-block-start": var(--global-spacing-5), + "gap": var(--global-spacing-6) ), "checkout-payment-form--border-bottom": ( - "border-bottom": 1px solid var(--border-color), + "border-block-end-width": 1px, + "border-block-end-style": solid, + "border-block-end-color": var(--border-color) ), "checkout-payment-form--border-right": ( - "border-right": 1px solid var(--border-color), + "border-inline-end-width": 1px, + "border-inline-end-style": solid, + "border-inline-end-color": var(--border-color) ), "checkout-payment-form--stripe-cardDetails": ( "display": grid, "gap": none, "border-radius": var(--border-radius), - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color) ), "checkout-payment-form--stripe-countryDetails": ( "display": grid, "gap": none, "border-radius": var(--border-radius), - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), "input-input": ( - "padding": 0, - ), + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-block-end": 0, + "padding-inline-start": 0 + ) ), "checkout-payment-form--stripe-element": ( - "padding": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-block-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "checkout-payment-form--stripe-input-container": ( "display": grid, - "gap": var(--global-spacing-1), + "gap": var(--global-spacing-1) ), "checkout-payment-form--stripe-label": ( "font-size": var(--global-font-size-4), "font-weight": var(--global-font-weight-4), - "color": var(--global-neutral-7), + "color": var(--global-neutral-7) ), "checkout-payment-form--stripe-row": ( "display": grid, - "width": 100%, - "grid-template-columns": repeat(2, 1fr), + "inline-size": 100%, + "grid-template-columns": repeat(2, 1fr) + ), + "checkout-payment-info": ( + "inline-size": 100%, + "margin-block-start": var(--global-spacing-6), + "align-items": flex-start, + "display": flex, + "flex-direction": column, + "components": ( + "paragraph": ( + "margin-block-start": var(--global-spacing-2), + "text-align": center, + "font-size": 0.875rem, + "font-style": normal, + "line-height": 1rem, + "letter-spacing": 0.0175rem, + "font-weight": var(--global-font-weight-5), + "font-family": sans-serif + ) + ) + ), + "checkout-payment-info-divider-container": ( + "display": flex, + "flex-direction": row, + "align-items": center, + "inline-size": 100%, + "justify-content": center, + "margin-block-start": var(--global-spacing-5), + "components": ( + "paragraph": ( + "margin-inline-start": var(--global-spacing-5), + "margin-inline-end": var(--global-spacing-5), + "text-align": center, + "font-family": sans-serif, + "font-size": 0.875rem, + "font-style": normal, + "font-weight": 500, + "line-height": 1rem, + "letter-spacing": 0.0175rem, + "min-inline-size": max-content + ) + ) + ), + "checkout-payment-info-divider-line": ( + "background-color": #DADADA, + "block-size": 0.0625rem, + "inline-size": 100%, + "min-inline-size": 13.5625rem + ), + "checkout-payment-info-payments": ( + "margin-block-start": var(--global-spacing-5), + "inline-size": 100%, + "display": flex, + "flex-direction": row, + "justify-content": space-around + ), + "checkout-payment-info-paypal": ( + "inline-size": 33%, + "align-items": center, + "display": flex, + "flex-direction": column + ), + "checkout-payment-info-paypal-button": ( + "inline-size": 9.5rem, + "block-size": var(--global-spacing-7), + "background-color": #E0E3EE, + "border-radius": 3.13rem, + "justify-content": center, + "align-content": center, + "display": flex, + "flex-wrap": wrap, + "components": ( + "img": ( + "inline-size": 4.97rem + ) + ) + ), + "checkout-payment-info-paypal-button-hover": ( + "cursor": pointer ), "checkout-payment-information": ( - "width": 100%, + "inline-size": 100%, "gap": var(--global-spacing-5), "grid-template-columns": 1fr, "components": ( "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-label": ( "font-size": var(--global-font-size-4), "font-weight": var(--global-font-weight-4), - "color": var(--global-neutral-7), + "color": var(--global-neutral-7) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "double-chain": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "double-chain-child-item": ( - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "double-chain-child-item-empty": ( - "display": contents, + "display": contents ), "double-chain-children-grid": ( "grid-template-columns": 1fr, - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "footer": ( "inline-size": var(--content-scale-width), @@ -970,15 +1094,15 @@ "margin-block-start": auto, "margin-inline-end": auto, "margin-inline-start": auto, - "max-block-size": var(--global-spacing-7), - ), - ), + "max-block-size": var(--global-spacing-7) + ) + ) ), "footer-links": ( "gap": var(--global-spacing-6), "grid-auto-flow": row, "grid-template-columns": 1fr, - "grid-template-rows": 1fr, + "grid-template-rows": 1fr ), "footer-links-group": ( "components": ( @@ -986,9 +1110,9 @@ "color": var(--text-color), "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), - ), - ), + "line-height": var(--body-line-height-small) + ) + ) ), "footer-links-group-list-item": ( "list-style": none, @@ -998,9 +1122,9 @@ "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "font-weight": var(--global-font-weight-4), - "line-height": var(--body-line-height-small), - ), - ), + "line-height": var(--body-line-height-small) + ) + ) ), "footer-social-links": ( "border-block-end": 1px solid var(--color-primary), @@ -1015,34 +1139,34 @@ "inline-size": fit-content, "components": ( "icon": ( - "fill": var(--color-primary), + "fill": var(--color-primary) ), "link": ( "border-inline-end": 1px solid var(--color-primary), "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "footer-social-links-container": ( "border-block-end": 1px solid var(--global-neutral-4), - "inline-size": 100%, + "inline-size": 100% ), "footer-social-links-hover": ( "components": ( "icon": ( - "fill": var(--color-primary-hover), - ), - ), + "fill": var(--color-primary-hover) + ) + ) ), "footer-social-links-last": ( "components": ( "link": ( - "border-inline-end": none, - ), - ), + "border-inline-end": none + ) + ) ), "footer-top-container": ( "border-block-start": 1px solid var(--global-neutral-4), @@ -1056,15 +1180,15 @@ "inline-size": 100%, "components": ( "paragraph": ( - "justify-self": center, - ), - ), + "justify-self": center + ) + ) ), "forgot-password": ( "font-family": var(--font-family-primary), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "border-block-end-color": var(--border-color), @@ -1072,28 +1196,26 @@ "border-block-end-width": var(--global-border-width-1), "font-size": var(--global-font-size-9), "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), "padding-block-end": var(--global-spacing-2), - "text-align": center, + "text-align": center ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), "margin-block-end": var(--global-spacing-4), - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "full-author-bio": ( "display": flex, @@ -1106,7 +1228,7 @@ "components": ( "heading": ( "color": var(--color-primary), - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "image": ( "aspect-ratio": 1, @@ -1116,81 +1238,81 @@ "margin-inline-end": auto, "margin-inline-start": auto, "max-block-size": 9.375rem, - "max-inline-size": 9.375rem, + "max-inline-size": 9.375rem ), "paragraph": ( "color": var(--text-color), - "font-family": var(--font-family-primary), - ), - ), + "font-family": var(--font-family-primary) + ) + ) ), "full-author-bio-identification": ( - "gap": 0, + "gap": 0 ), "full-author-bio-name": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "full-author-bio-role": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "full-author-bio-social": ( - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "full-author-bio-social-header": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), "line-height": var(--heading-level-6-line-height), - "text-align": center, + "text-align": center ), "full-author-bio-social-icons": ( "display": flex, "flex-wrap": wrap, - "gap": var(--global-spacing-4), "justify-content": center, + "gap": var(--global-spacing-4) ), "full-author-bio-social-link": ( "components": ( "icon": ( - "fill": var(--color-primary), - ), - ), + "fill": var(--color-primary) + ) + ) ), "full-author-bio-social-link-hover": ( "components": ( "icon": ( - "fill": var(--color-primary-hover), - ), - ), + "fill": var(--color-primary-hover) + ) + ) ), "full-author-bio-text": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "gallery": ( "components": ( "media-item-fig-caption": ( "background-color": var(--global-white), - "line-height": var(--body-line-height-5), - ), - ), + "line-height": var(--body-line-height-5) + ) + ) ), "gallery-close-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-6), - "inline-size": var(--global-spacing-6), - ), - ), + "inline-size": var(--global-spacing-6) + ) + ) ), "gallery-fullscreen": ( "components": ( @@ -1198,13 +1320,13 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), "padding-block-end": 0, - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "gallery-image-wrapper": ( "align-items": center, - "aspect-ratio": calc(16 / 9), + "aspect-ratio": calc(16/9), "background-color": var(--global-black), "display": flex, "justify-content": center, @@ -1215,78 +1337,89 @@ "block-size": auto, "max-block-size": 100%, "max-inline-size": 100%, - "object-fit": contain, - ), - ), + "object-fit": contain + ) + ) ), "gallery-track-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-8), - "inline-size": var(--global-spacing-8), - ), - ), + "inline-size": var(--global-spacing-8) + ) + ) ), "header": ( - "font-weight": var(--global-font-weight-7), + "font-weight": var(--global-font-weight-7) ), "header-account-action": ( "display": flex, - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "header-account-action-desktop": ( "align-items": center, "display": none, - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "header-account-action-dropdown-list-item": ( "list-style": none, "padding-block-end": var(--global-spacing-2), "components": ( "link": ( - "font-size": var(--global-font-size-3), + "font-size": var(--global-font-size-3) ), "link-hover": ( - "color": var(--color-primary-hover), - ), - ), + "color": var(--color-primary-hover) + ) + ) ), "header-account-action-dropdown-list-item-last": ( - "padding-block-end": 0, + "padding-block-end": 0 ), "header-account-action-dropdown-open": ( - "top": 100%, + "inset-block-start": 100%, "position": absolute, "padding-block-end": var(--global-spacing-4), "padding-block-start": var(--global-spacing-4), "padding-inline-end": var(--global-spacing-4), "padding-inline-start": var(--global-spacing-4), "background-color": var(--global-white), - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), "border-radius": var(--global-spacing-1), "box-shadow": 0 0 4px 0 rgba(0, 0, 0, 0.25), "display": flex, - "flex-direction": column, + "flex-direction": column ), "header-account-action-mobile": ( - "display": flex, + "display": flex ), "header-extra-large": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), + "line-height": var(--heading-level-4-line-height) ), "header-large": ( "font-size": var(--heading-level-5-font-size), - "line-height": var(--heading-level-5-line-height), + "line-height": var(--heading-level-5-line-height) ), "header-medium": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "header-nav-chain": ( "align-items": center, @@ -1311,14 +1444,14 @@ "icon": ( "fill": currentColor, "block-size": var(--global-spacing-5), - "inline-size": var(--global-spacing-5), + "inline-size": var(--global-spacing-5) ), "button": ( "color": var(--global-white), "block-size": var(--global-spacing-7), "font-weight": var(--global-font-weight-7), "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "button-small": ( "font-weight": var(--global-font-weight-7), @@ -1327,9 +1460,9 @@ "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "header-nav-chain-flyout-nav": ( "block-size": calc((100vh - var(--header-nav-chain-height-scrolled))), @@ -1351,12 +1484,12 @@ "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-5), - "text-decoration": none, + "text-decoration": none ), "link-hover": ( - "color": var(--global-white), - ), - ), + "color": var(--global-white) + ) + ) ), "header-nav-chain-flyout-nav-components-desktop": ( "display": none, @@ -1366,16 +1499,16 @@ "padding-inline-start": var(--global-spacing-5), "components": ( "button": ( - "align-self": flex-start, - ), - ), + "align-self": flex-start + ) + ) ), "header-nav-chain-flyout-nav-components-mobile": ( "display": flex, "padding-block-end": var(--global-spacing-5), "padding-block-start": var(--global-spacing-5), "padding-inline-end": var(--global-spacing-5), - "padding-inline-start": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-item": ( "background-color": var(--global-black), @@ -1383,24 +1516,24 @@ "link": ( "padding-block-end": var(--global-spacing-3), "padding-block-start": var(--global-spacing-3), - "padding-inline-start": var(--global-spacing-5), - ), - ), + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "header-nav-chain-flyout-nav-item-hover-active": ( "background-color": var(--global-neutral-7), "components": ( "icon": ( - "fill": var(--global-white), - ), - ), + "fill": var(--global-white) + ) + ) ), "header-nav-chain-flyout-nav-menu": ( "components": ( "stack": ( - "gap": 1rem, - ), - ), + "gap": 1rem + ) + ) ), "header-nav-chain-flyout-nav-subsection-anchor": ( "block-size": var(--global-spacing-8), @@ -1409,9 +1542,9 @@ "align-content": center, "cursor": pointer, "justify-content": space-between, - "line-height": var(--global-line-height-7), - ), - ), + "line-height": var(--global-line-height-7) + ) + ) ), "header-nav-chain-flyout-nav-subsection-caret": ( "align-self": center, @@ -1421,23 +1554,23 @@ "display": flex, "components": ( "button-default": ( - "color": var(--icon-fill-color-subtle), + "color": var(--icon-fill-color-subtle) ), "button-hover": ( - "color": var(--color-white), - ), - ), + "color": var(--color-white) + ) + ) ), "header-nav-chain-flyout-nav-subsection-caret-open": ( - "transform": rotate(180deg), + "transform": rotate(180deg) ), "header-nav-chain-flyout-nav-subsection-container": ( "display": none, "flex-direction": column, - "position": relative, + "position": relative ), "header-nav-chain-flyout-nav-subsection-container-open": ( - "display": flex, + "display": flex ), "header-nav-chain-flyout-nav-subsection-menu": ( "background": var(--global-white), @@ -1452,36 +1585,36 @@ "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-5), - "text-decoration": none, + "text-decoration": none ), "link-hover": ( "color": var(--global-white), - "background-color": var(--global-neutral-6), + "background-color": var(--global-neutral-6) ), "link-active": ( "color": var(--global-white), - "background-color": var(--global-neutral-6), - ), - ), + "background-color": var(--global-neutral-6) + ) + ) ), "header-nav-chain-flyout-nav-widgets": ( "margin-block-start": var(--global-spacing-3), "padding-block-end": var(--global-spacing-1), "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-4), - "padding-inline-start": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-wrapper": ( "z-index": 10, "background": var(--global-black), "transition": transform 300ms ease-in-out, - "inline-size": 100vw, + "inline-size": 100vw ), "header-nav-chain-flyout-nav-wrapper-closed": ( - "transform": translate(-100vw, 0), + "transform": translate(calc(var(--text-direction) * -100vw), 0) ), "header-nav-chain-flyout-nav-wrapper-open": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "header-nav-chain-flyout-overlay": ( "margin-block-start": var(--header-nav-chain-height), @@ -1491,22 +1624,22 @@ "position": absolute, "scrollbar-width": none, "inset-inline-start": 0, - "inset-block-start": 0, + "inset-block-start": 0 ), "header-nav-chain-flyout-overlay-closed": ( "overflow-y": hidden, "overflow-block": hidden, - "inline-size": 0, + "inline-size": 0 ), "header-nav-chain-flyout-overlay-open": ( "background": var(--header-nav-chain-overlay-background-color), "overflow-y": scroll, "overflow-block": scroll, "transform": translate(0, 0), - "inline-size": 100%, + "inline-size": 100% ), "header-nav-chain-flyout-overlay-scrollbar": ( - "display": none, + "display": none ), "header-nav-chain-links-list": ( "display": none, @@ -1522,87 +1655,77 @@ "color": var(--global-white), "display": flex, "align-items": center, - "block-size": 100%, + "block-size": 100% ), "separator": ( - "color": var(--global-white), - ), - ), + "color": var(--global-white) + ) + ) ), "header-nav-chain-links-list-item": ( "display": flex, "gap": var(--global-spacing-2), "components": ( "link-hover": ( - "color": var(--global-neutral-3), - ), - ), + "color": var(--global-neutral-3) + ) + ) ), "header-nav-chain-logo": ( - "margin-inline-end": auto, + "margin-inline-end": auto ), "header-nav-chain-logo-center": ( - "margin-inline-end": 0, + "margin-inline-end": 0 ), "header-nav-chain-logo-hidden": ( "opacity": 0, - "transition": ( - opacity 0.8s ease, - visibility 0s ease 0s, - ), - "visibility": hidden, + "transition": (opacity 0.8s ease, visibility 0s ease 0s), + "visibility": hidden ), "header-nav-chain-logo-image": ( "max-inline-size": 240px, "max-block-size": var(--header-nav-chain-height), - "transition": ( - opacity 0.4s ease, - ), + "transition": (opacity 0.4s ease) ), "header-nav-chain-logo-image-hover": ( "opacity": 0.7, - "transition": ( - opacity 0.4s ease, - ), + "transition": (opacity 0.4s ease) ), "header-nav-chain-logo-right": ( "margin-inline-start": auto, - "margin-inline-end": 0, + "margin-inline-end": 0 ), "header-nav-chain-logo-show": ( "opacity": 1, - "transition": ( - opacity 0.8s ease, - visibility 0s ease 0s, - ), - "visibility": visible, + "transition": (opacity 0.8s ease, visibility 0s ease 0s), + "visibility": visible ), "header-nav-chain-nav-search": ( "align-items": center, "display": flex, "justify-content": center, - "position": relative, + "position": relative ), "header-nav-chain-nav-search-box-position": ( "position": absolute, - "inset-inline-end": 0, + "inset-inline-end": 0 ), "header-nav-chain-nav-search-box-svg": ( "fill": #191919, "block-size": 1rem, - "inline-size": 1rem, + "inline-size": 1rem ), "header-nav-chain-nav-search-button": ( "background": transparent, "border": transparent, - "cursor": pointer, + "cursor": pointer ), "header-nav-chain-nav-search-input": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": 0, "padding-inline-start": 0, - "inline-size": 0, + "inline-size": 0 ), "header-nav-chain-nav-search-input-open": ( "font-size": var(--body-font-size), @@ -1612,107 +1735,107 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-3), - "inline-size": 100%, + "inline-size": 100% ), "header-nav-chain-scrolled": ( - "min-block-size": var(--header-nav-chain-height-scrolled), + "min-block-size": var(--header-nav-chain-height-scrolled) ), "header-nav-chain-scrolled-flyout-overlay": ( - "margin-block-start": var(--header-nav-chain-height-scrolled), + "margin-block-start": var(--header-nav-chain-height-scrolled) ), "header-nav-chain-top-layout": ( "align-items": center, "display": flex, "justify-content": space-between, "inline-size": 100%, - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "header-nav-chain-top-layout-last-child": ( "margin-inline-end": 0, - "flex-shrink": 0, + "flex-shrink": 0 ), "header-nav-chain-top-nav-components-desktop": ( "align-items": center, "display": none, - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "header-nav-chain-top-nav-components-mobile": ( "align-items": center, - "display": flex, + "display": flex ), "header-nav-chain-top-nav-left": ( "justify-content": flex-start, - "flex-shrink": 0, + "flex-shrink": 0 ), "header-nav-chain-top-nav-right": ( "display": flex, "justify-content": flex-end, "flex-shrink": 0, - "margin-inline-end": 0, + "margin-inline-end": 0 ), "header-small": ( "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "headline": ( "font-size": var(--heading-level-1-font-size), "font-weight": var(--heading-level-1-font-weight), "line-height": var(--heading-level-1-line-height), - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "large-manual-promo": ( "gap": var(--global-spacing-4), "components": ( "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "large-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "large-manual-promo-text": ( "gap": 0, "components": ( "heading": ( - "color": var(--text-color), + "color": var(--text-color) ), "overline": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "paragraph": ( - "font-size": var(--body-font-size), + "font-size": var(--body-font-size) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "large-promo": ( "gap": var(--global-spacing-4), "components": ( "link": ( - "position": relative, + "position": relative ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "large-promo-icon-label": ( "align-items": center, "padding-block-start": var(--global-spacing-2), - "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), "padding-inline-start": var(--global-spacing-2), "background-color": var(--color-primary), "border": 0, @@ -1725,20 +1848,20 @@ "icon": ( "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "inline-size": var(--global-spacing-4) + ) + ) ), "large-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "large-promo-label": ( "margin-inline-start": var(--global-spacing-2), - "color": var(--global-white), + "color": var(--global-white) ), "large-promo-text": ( "gap": 0, @@ -1746,30 +1869,30 @@ "heading": ( "color": var(--text-color), "font-size": var(--heading-level-3-font-size), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "overline": ( "color": var(--text-color), "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "paragraph": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "stack": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "separator": ( "margin-block-start": 0, "margin-block-end": 0, "margin-inline-end": var(--global-spacing-2), - "margin-inline-start": var(--global-spacing-2), - ), - ), + "margin-inline-start": var(--global-spacing-2) + ) + ) ), "lead-art": ( "components": ( @@ -1779,22 +1902,22 @@ "margin-block-end": var(--global-spacing-2), "margin-block-start": var(--global-spacing-2), "margin-inline-end": 0, - "margin-inline-start": 0, - ), - ), + "margin-inline-start": 0 + ) + ) ), "lead-art-carousel-close-button": ( "color": var(--global-white), "components": ( "button-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "icon": ( "fill": currentColor, "block-size": var(--global-spacing-6), - "inline-size": var(--global-spacing-6), - ), - ), + "inline-size": var(--global-spacing-6) + ) + ) ), "lead-art-carousel-fullscreen": ( "components": ( @@ -1802,13 +1925,28 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "lead-art-carousel-image-wrapper": ( + "aspect-ratio": calc(16/9) + ), + "lead-art-carousel-track-button": ( + "color": var(--global-white), + "components": ( + "button-hover": ( + "color": var(--global-neutral-3) + ), + "icon": ( + "fill": currentColor, + "block-size": var(--global-spacing-8), + "inline-size": var(--global-spacing-8) + ) + ) + ), + "lead-art-image-wrapper": ( "align-items": center, - "aspect-ratio": calc(16 / 9), "background-color": var(--global-black), "display": flex, "justify-content": center, @@ -1819,77 +1957,143 @@ "block-size": auto, "max-block-size": 100%, "max-inline-size": 100%, - "object-fit": contain, - ), - ), - ), - "lead-art-carousel-track-button": ( - "color": var(--global-white), - "components": ( - "button-hover": ( - "color": var(--global-neutral-3), - ), - "icon": ( - "fill": currentColor, - "block-size": var(--global-spacing-8), - "inline-size": var(--global-spacing-8), - ), - ), + "object-fit": contain + ) + ) ), "links-bar": ( "gap": var(--global-spacing-2), "components": ( "link": ( - "color": var(--text-color), + "color": var(--text-color) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "login-form": ( "font-family": var(--font-family-primary), + "padding-block-end": var(--global-spacing-5), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( - "border-block-end-color": var(--border-color), - "border-block-end-style": var(--global-border-style-1), - "border-block-end-width": var(--global-border-width-1), - "font-size": var(--global-font-size-9), - "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), - "padding-block-end": var(--global-spacing-2), + "font-size": var(--heading-level-4-font-size), + "font-family": var(--font-family-secondary), + "font-weight": 700, + "font-style": normal, + "line-height": 140%, "text-align": center, + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-inline-start": 0, + "margin-block-end": var(--global-spacing-5) ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-4) ), "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), - "margin-block-end": var(--global-spacing-5), - ), - ), + "margin-block-end": var(--global-spacing-5) + ) + ) + ), + "login-form-bot-protection-section": ( + "margin-block-start": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5), + "components": ( + "paragraph": ( + "color": #f00 + ) + ) + ), + "login-form-error": ( + "font-family": var(--font-family-primary), + "text-align": center, + "margin-block-end": var(--global-spacing-4), + "components": ( + "paragraph": ( + "background-color": var(--status-color-danger-subtle), + "color": var(--status-color-danger), + "padding-block-end": var(--global-spacing-1), + "padding-block-start": var(--global-spacing-1), + "padding-inline-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2) + ) + ) + ), + "login-form-privacy-statement": ( + "display": block, + "text-align": center, + "inline-size": 100%, + "margin-block-start": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-end": 0, + "margin-inline-start": 0, + "line-height": 150%, + "font-size": 0.75rem + ), + "login-form-sign-up-button": ( + "font-family": var(--font-family-primary), + "font-weight": 400, + "font-size": 1rem, + "line-height": 150%, + "background-color": transparent, + "text-decoration": underline, + "cursor": pointer + ), + "login-form-sign-up-div": ( + "display": block, + "text-align": center, + "inline-size": 100%, + "margin-block-start": 0, + "margin-block-end": var(--global-spacing-5), + "margin-inline-end": 0, + "margin-inline-start": 0, + "line-height": 150%, + "font-size": 1rem, + "components": ( + "paragraph": ( + "font-family": var(--font-family-primary), + "font-weight": 400, + "font-size": 1rem, + "line-height": 150% + ) + ) ), "login-links": ( + "font-family": var(--font-family-primary), "components": ( + "paragraph": ( + "text-align": center, + "font-family": var(--font-family-primary) + ), "link": ( "text-align": center, + "font-family": var(--font-family-primary) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) + ), + "login-links-inner-link": ( + "text-decoration": underline, + "margin-block-end": var(--global-spacing-5), + "margin-inline-end": 0, + "margin-inline-start": 0, + "padding-inline-start": var(--global-spacing-2) ), "masthead": ( "border-block-end": 2px solid var(--global-neutral-8), @@ -1898,18 +2102,18 @@ "font-family": var(--font-family-primary), "font-size": var(--body-font-size-small), "line-height": var(--body-line-height-tiny), - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "masthead-content": ( "display": flex, - "justify-content": space-evenly, + "justify-content": space-evenly ), "masthead-date": ( "align-items": flex-end, "display": flex, "font-weight": var(--global-font-weight-7), "justify-content": flex-start, - "flex": 11 0%, + "flex": 11 0% ), "masthead-divider": ( "margin-block-end": 0, @@ -1919,29 +2123,29 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": 0, - "padding-inline-start": 0, + "padding-inline-start": 0 ), "masthead-link": ( "align-items": flex-end, "display": flex, "justify-content": flex-end, - "flex": 11 0%, + "flex": 11 0% ), "masthead-logo": ( "display": flex, - "justify-content": center, + "justify-content": center ), "masthead-logo-image": ( "max-block-size": 64px, "object-fit": contain, - "vertical-align": middle, + "vertical-align": middle ), "masthead-tagline": ( "display": flex, "flex": 11 0%, "justify-content": center, "font-family": var(--font-family-primary), - "text-align": center, + "text-align": center ), "medium-manual-promo": ( "clear": both, @@ -1951,42 +2155,42 @@ "attribution": ( "color": var(--text-color), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "heading": ( "color": var(--text-color), "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "paragraph": ( "display": inline, "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "medium-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "medium-manual-promo-show-image": ( "components": ( "heading": ( - "inline-size": 68%, - ), - ), + "inline-size": 68% + ) + ) ), "medium-promo": ( "clear": both, @@ -1995,32 +2199,32 @@ "components": ( "attribution": ( "display": block, - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "paragraph": ( "display": block, - "inline-size": 100%, + "inline-size": 100% ), "separator": ( "padding-block-start": 0, "padding-block-end": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "link": ( - "position": relative, - ), - ), + "position": relative + ) + ) ), "medium-promo-icon-label": ( "align-items": center, @@ -2039,41 +2243,41 @@ "icon": ( "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "inline-size": var(--global-spacing-4) + ) + ) ), "medium-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "medium-promo-label": ( "margin-inline-start": var(--global-spacing-2), "color": var(--global-white), - "display": none, + "display": none ), "medium-promo-show-image": ( "components": ( "heading": ( "color": var(--text-color), - "inline-size": 68%, + "inline-size": 68% ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "numbered-list": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "numbered-list-item": ( "gap": var(--global-spacing-5), @@ -2081,62 +2285,73 @@ "heading": ( "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "link": ( - "flex": 1, + "flex": 1 ), "paragraph": ( "font-family": var(--font-family-secondary), "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "numbered-list-item-image": ( - "max-inline-size": 25%, + "max-inline-size": 25% ), "numbered-list-items": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "offer": ( "display": flex, "flex-direction": column, "justify-content": center, - "align-items": center, + "align-items": center ), "offer-card": ( "align-items": center, - "border": 1px solid var(--border-color), + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-style": solid, + "border-block-end-style": solid, + "border-inline-start-style": solid, + "border-inline-end-style": solid, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), "border-radius": var(--border-radius), "display": flex, "flex-direction": column, - "padding-top": var(--global-spacing-8), - "padding-right": var(--global-spacing-6), - "padding-bottom": var(--global-spacing-6), - "padding-left": var(--global-spacing-6), + "padding-block-start": var(--global-spacing-8), + "padding-inline-end": var(--global-spacing-6), + "padding-block-end": var(--global-spacing-6), + "padding-inline-start": var(--global-spacing-6), "components": ( "heading": ( "font-size": var(--global-font-size-9), "text-align": center, - "margin-bottom": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4), "font-weight": var(--global-font-weight-7), - "line-height": var(--global-line-height-6), + "line-height": var(--global-line-height-6) ), "paragraph": ( "font-size": var(--global-font-size-7), "font-weight": var(--global-font-weight-4), "text-align": center, - "margin-bottom": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "button-large": ( - "margin-bottom": var(--global-spacing-4), - ), - ), + "margin-block-end": var(--global-spacing-4) + ) + ) ), "offer-card-features": ( - "align-self": baseline, + "align-self": baseline ), "offer-card-features--feature-item": ( "align-items": center, @@ -2145,69 +2360,72 @@ "components": ( "icon": ( "display": flex, - "width": var(--global-spacing-4), - "height": var(--global-spacing-4), - "margin": 0 var(--global-spacing-2) 0 0, - ), - ), + "inline-size": var(--global-spacing-4), + "block-size": var(--global-spacing-4), + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-2), + "margin-block-end": 0, + "margin-inline-start": 0 + ) + ) ), "offer-grid-list": ( "gap": var(--global-spacing-5), "grid-template-columns": 1fr, - "justify-content": center, + "justify-content": center ), "offer-grid-list-1": ( - "grid-template-columns": minmax(auto, 600px), + "grid-template-columns": minmax(auto, 600px) ), "offer-grid-list-2": ( - "grid-template-columns": repeat(2, 1fr), + "grid-template-columns": repeat(2, 1fr) ), "offer-grid-list-3": ( - "grid-template-columns": repeat(3, 1fr), + "grid-template-columns": repeat(3, 1fr) ), "offer-grid-list-4": ( - "grid-template-columns": 1fr 1fr, + "grid-template-columns": 1fr 1fr ), "offer-grid-list-5": ( - "grid-template-columns": repeat(6, 1fr), + "grid-template-columns": repeat(6, 1fr) ), "offer-grid-list-5-children": ( - "grid-column": span 2, + "grid-column": span 2 ), "offer-headings": ( - "margin-top": var(--global-spacing-9), - "max-width": 40%, + "margin-block-start": var(--global-spacing-9), + "max-inline-size": 40%, "display": flex, "flex-direction": column, "justify-content": center, "align-items": center, - "text-align": center, + "text-align": center ), "offer-subtitle": ( "font-size": var(--global-font-size-10), - "line-height": var(--global-line-height-4), + "line-height": var(--global-line-height-4) ), "offer-title": ( "font-weight": var(--global-font-weight-7), "font-size": var(--global-font-size-15), "line-height": var(--global-line-height-6), - "margin-bottom": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "offer-wrapper": ( - "margin-top": var(--global-spacing-5), - "margin-bottom": var(--global-spacing-6), + "margin-block-start": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-6) ), "paywall-overlay": ( "background-color": rgba(0, 0, 0, 0.63), - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "inset-block-end": 0, + "inset-inline-start": 0, + "inset-inline-end": 0, + "inset-block-start": 0, "overflow": auto, "pointer-events": all, "position": fixed, - "height": 100vh, - "z-index": 1, + "block-size": 100vh, + "z-index": 1 ), "paywall-overlay-content": ( "align-items": center, @@ -2215,18 +2433,21 @@ "background-color": var(--global-white), "display": flex, "flex-direction": column, - "margin-top": 50vh, - "max-height": 75vh, - "min-height": 50vh, + "margin-block-start": 50vh, + "max-block-size": 75vh, + "min-block-size": 50vh, "overflow": auto, "components": ( "stack": ( - "width": 100%, - ), - ), + "inline-size": 100% + ) + ) ), "paywall-subscription-dialog": ( - "padding": var(--global-spacing-6), + "padding-block-start": var(--global-spacing-6), + "padding-inline-end": var(--global-spacing-6), + "padding-block-end": var(--global-spacing-6), + "padding-inline-start": var(--global-spacing-6), "align-items": center, "grid-template-rows": auto, "gap": var(--global-spacing-6), @@ -2234,58 +2455,58 @@ "components": ( "stack": ( "align-items": center, - "grid-template-rows": auto, - ), - ), + "grid-template-rows": auto + ) + ) ), "paywall-subscription-dialog-link-prompt-link": ( - "font-weight": var(--heading-level-4-font-weight), + "font-weight": var(--heading-level-4-font-weight) ), "paywall-subscription-dialog-link-prompt-pre-link": ( - "margin-right": var(--global-spacing-2), + "margin-inline-end": var(--global-spacing-2) ), "paywall-subscription-dialog-offer-info": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-2-font-size), - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "paywall-subscription-dialog-reason-prompt": ( - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "paywall-subscription-dialog-subheadline": ( - "font-size": var(--heading-level-6-font-size), + "font-size": var(--heading-level-6-font-size) ), "quad-chain": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "quad-chain-child-item": ( - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "quad-chain-child-item-empty": ( - "display": contents, + "display": contents ), "quad-chain-children-grid": ( "grid-template-columns": 1fr, - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "reset-password": ( "font-family": var(--font-family-primary), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "border-block-end-color": var(--border-color), @@ -2293,97 +2514,100 @@ "border-block-end-width": var(--global-border-width-1), "font-size": var(--global-font-size-9), "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), "padding-block-end": var(--global-spacing-2), - "text-align": center, + "text-align": center ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2) ), "paragraph": ( "font-family": var(--font-family-primary), "margin-block-end": var(--global-spacing-4), - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "results-list": ( "components": ( "attribution": ( - "margin-block-start": var(--global-spacing-4), + "display": block, + "margin-block-start": var(--global-spacing-4) ), "button": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "overline": ( - "font-size": var(--body-font-size), + "display": inline, + "font-size": var(--body-font-size) ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), - ), + "paragraph": ( + "display": block + ) + ) ), "results-list-see-more": ( - "margin-block-size": var(--global-spacing-2), + "margin-block-start": var(--global-spacing-2) ), "results-list-show-image": ( "components": ( "heading": ( - "inline-size": 68%, - ), - "overline": ( - "font-size": var(--body-font-size), - ), - ), + "inline-size": 68% + ) + ) ), "results-list-wrapper": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "right-rail": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "right-rail-advanced": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) + ), + "right-rail-advanced-empty": ( + "gap": 0 ), "right-rail-advanced-footer": ( "margin-block-start": var(--global-spacing-10), "margin-inline-end": 0, "margin-block-end": var(--global-spacing-8), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-full-width-1": ( "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-full-width-2": ( "margin-block-start": var(--global-spacing-6), "margin-inline-end": 0, "margin-block-end": 0, - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-main": ( "gap": var(--global-spacing-6), @@ -2392,7 +2616,7 @@ "margin-block-start": auto, "margin-inline-end": auto, "margin-block-end": auto, - "margin-inline-start": auto, + "margin-inline-start": auto ), "right-rail-advanced-main-interior-item": ( "padding-block-start": initial, @@ -2401,13 +2625,13 @@ "padding-inline-start": initial, "border-inline-end": initial, "gap": var(--global-spacing-5), - "display": contents, + "display": contents ), "right-rail-advanced-main-interior-item-1": ( - "grid-area": main-interior-item-1, + "grid-area": main-interior-item-1 ), "right-rail-advanced-main-interior-item-2": ( - "grid-area": main-interior-item-2, + "grid-area": main-interior-item-2 ), "right-rail-advanced-main-right-rail": ( "padding-block-start": initial, @@ -2416,15 +2640,18 @@ "padding-inline-start": initial, "gap": var(--global-spacing-5), "display": contents, + "border-inline-start-style": none, + "border-inline-start-color": var(--border-color), + "border-inline-start-width": 0 ), "right-rail-advanced-main-right-rail-bottom": ( - "grid-area": main-right-rail-bottom, + "grid-area": main-right-rail-bottom ), "right-rail-advanced-main-right-rail-middle": ( - "grid-area": main-right-rail-middle, + "grid-area": main-right-rail-middle ), "right-rail-advanced-main-right-rail-top": ( - "grid-area": main-right-rail-top, + "grid-area": main-right-rail-top ), "right-rail-advanced-navigation": ( "position": sticky, @@ -2434,33 +2661,32 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-advanced-rail-container": ( - "grid-template-areas": "main-right-rail-top" "main-interior-item-1" - "main-right-rail-middle" "main-interior-item-2" "main-right-rail-bottom", + "grid-template-areas": "main-right-rail-top" "main-interior-item-1" "main-right-rail-middle" "main-interior-item-2" "main-right-rail-bottom", "grid-template-columns": initial, "grid-template-rows": 1fr, "grid-auto-rows": auto, - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "right-rail-footer": ( "margin-block-start": var(--global-spacing-10), "margin-inline-end": 0, "margin-block-end": var(--global-spacing-8), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-full-width-1": ( "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-full-width-2": ( "margin-block-start": var(--global-spacing-6), "margin-inline-end": 0, "margin-block-end": 0, - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-main": ( "max-inline-size": calc(var(--content-max-width) * 1px), @@ -2471,22 +2697,25 @@ "margin-inline-start": auto, "components": ( "stack": ( - "gap": var(--global-spacing-6), - ), - ), + "gap": var(--global-spacing-6) + ) + ) ), "right-rail-main-interior-item": ( "padding-block-start": initial, "padding-inline-end": initial, "padding-block-end": initial, "padding-inline-start": initial, - "border-inline-end": initial, + "border-inline-end": initial ), "right-rail-main-right-rail": ( "padding-block-start": initial, "padding-inline-end": initial, "padding-block-end": initial, "padding-inline-start": initial, + "border-inline-start-style": none, + "border-inline-start-color": var(--border-color), + "border-inline-start-width": 0 ), "right-rail-navigation": ( "position": sticky, @@ -2496,26 +2725,26 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-block-end": var(--global-spacing-5), - "margin-inline-start": 0, + "margin-inline-start": 0 ), "right-rail-rail-container": ( "grid-template-columns": initial, "grid-template-rows": 1fr, - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "search-results-list": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "search-results-list-field": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "search-results-list-field-wrapper": ( "display": grid, @@ -2523,7 +2752,7 @@ "grid-template": "icon input search" 1fr / var(--global-spacing-7) 1fr auto, "components": ( "button": ( - "grid-area": search, + "grid-area": search ), "icon": ( "align-self": center, @@ -2531,75 +2760,75 @@ "grid-area": icon, "inline-size": var(--global-spacing-5), "justify-self": center, - "z-index": 1, + "z-index": 1 ), "input": ( "gap": 0, - "grid-area": icon / icon / input / input, + "grid-area": icon / icon / input / input ), "input-input": ( "font-family": var(--font-family-primary), "font-weight": var(--global-font-weight-7), "inline-size": 100%, - "padding-inline-start": var(--global-spacing-7), - ), - ), + "padding-inline-start": var(--global-spacing-7) + ) + ) ), "search-results-list-results": ( "components": ( "button": ( "inline-size": auto, "margin-block-end": 0, - "margin-block-start": var(--global-spacing-2), + "margin-block-start": var(--global-spacing-2) , "margin-inline-end": auto, - "margin-inline-start": auto, - ), - ), + "margin-inline-start": auto + ) + ) ), "search-results-list-results-item": ( "components": ( "attribution": ( "display": block, - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "heading": ( "font-size": var(--heading-level-5-font-size), "font-weight": var(--heading-level-5-font-weight), "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), + "margin-block-end": var(--global-spacing-4) ), "link": ( - "position": relative, + "position": relative ), "media-item": ( "float": inline-end, - "max-inline-size": 100px, + "max-inline-size": 100px ), "overline": ( "font-weight": var(--heading-level-4-font-weight), "font-size": var(--heading-level-5-font-size), - "line-height": var(--heading-level-5-line-height), + "line-height": var(--heading-level-5-line-height) ), "paragraph": ( - "display": block, + "display": block ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "search-results-list-results-item-show-image": ( "components": ( "heading": ( - "inline-size": 68%, + "inline-size": 68% ), "overline": ( - "font-size": var(--body-font-size), - ), - ), + "font-size": var(--body-font-size) + ) + ) ), "section-title": ( "gap": var(--global-spacing-4), @@ -2608,15 +2837,18 @@ "font-family": var(--font-family-primary), "font-size": var(--heading-level-1-font-size), "font-weight": var(--heading-level-1-font-weight), - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "link": ( - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "separator": ( - "margin": 0 var(--global-spacing-4), - ), - ), + "margin-block-end": 0, + "margin-block-start": 0, + "margin-inline-end": var(--global-spacing-4), + "margin-inline-start": var(--global-spacing-4) + ) + ) ), "section-title-links": ( "display": flex, @@ -2625,7 +2857,10 @@ "share-bar": ( "background": var(--background-color), "box-shadow": var(--global-box-shadow-1), - "border-radius": 0 var(--border-radius) var(--border-radius) 0, + "border-start-start-radius": 0, + "border-start-end-radius": var(--border-radius), + "border-end-end-radius": var(--border-radius), + "border-end-start-radius": 0, "display": none, "gap": var(--global-spacing-2), "inset-block-start": 200px, @@ -2637,150 +2872,154 @@ "position": fixed, "components": ( "button": ( - "background-color": transparent, + "background-color": transparent ), "button-default": ( "border-block-end-width": 0, "border-block-start-width": 0, "border-inline-end-width": 0, - "border-inline-start-width": 0, + "border-inline-start-width": 0 ), "button-medium": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-3), - "padding-inline-start": var(--global-spacing-3), - ), - ), + "padding-inline-start": var(--global-spacing-3) + ) + ) ), "share-bar-email": ( - "fill": #b61818, + "fill": #b61818 ), "share-bar-email-hover": ( - "fill": #c66565, + "fill": #c66565 ), "share-bar-facebook": ( - "fill": #415993, + "fill": #415993 ), "share-bar-facebook-hover": ( - "fill": #5d6f9a, + "fill": #5d6f9a ), "share-bar-linkedin": ( - "fill": #3076b0, + "fill": #3076b0 ), "share-bar-linkedin-hover": ( - "fill": #6baae8, + "fill": #6baae8 ), "share-bar-pinterest": ( - "fill": #ad2526, + "fill": #ad2526 ), "share-bar-pinterest-hover": ( - "fill": #b44c4c, + "fill": #b44c4c ), "share-bar-twitter": ( - "fill": #6baae8, + "fill": #000000 ), "share-bar-twitter-hover": ( - "fill": #91c4f6, + "fill": #000000 ), "sign-up": ( "font-family": var(--font-family-primary), "components": ( "button": ( - "font-size": var(--global-font-size-4), + "font-size": var(--global-font-size-4) ), "heading": ( "border-block-end-color": var(--border-color), - "border-block-end-style": var(--global-border-style-1), + "border-block-end-style": var(--global-border-style-0), "border-block-end-width": var(--global-border-width-1), "font-size": var(--global-font-size-9), "margin-block-end": var(--global-spacing-4), - "margin-bottom": var(--global-spacing-4), "padding-block-end": var(--global-spacing-2), - "text-align": center, + "text-align": center ), "input": ( - "margin-block-end": var(--global-spacing-5), + "margin-block-end": var(--global-spacing-5) ), "input-error-tip": ( - "color": var(--status-color-danger), + "color": var(--status-color-danger) ), "input-input": ( "inline-size": 100%, - "width": 100%, "padding-block-end": var(--global-spacing-2), - "padding-block-start": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2) + ), + "input-tip": ( + "font-size": var(--global-font-size-3) ), "paragraph": ( "font-family": var(--font-family-primary), - "margin-block-end": var(--global-spacing-5), - ), - ), + "margin-block-end": var(--global-spacing-5) + ) + ) + ), + "sign-up-tos-container-link": ( + "margin-block-end": var(--global-spacing-5) ), "sign-up-tos-link": ( "color": var(--text-color), - "text-decoration": none, + "text-decoration": underline ), "sign-up-tos-link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "simple-list": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), - ), - ), + "line-height": var(--heading-level-6-line-height) + ) + ) ), "simple-list-item": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "simple-list-item-anchor": ( - "flex": 0 0 33%, + "flex": 0 0 33% ), "simple-list-items": ( "components": ( "heading": ( "line-height": var(--body-line-height), "font-size": var(--body-font-size), - "font-weight": var(--body-font-weight), - ), + "font-weight": var(--body-font-weight) + ) ), - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "single-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "single-chain-children-stack": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "single-column-regular-body": ( "inline-size": calc(100% - var(--global-spacing-6)), - "margin-block-start": "auto", - "margin-inline-end": "auto", - "margin-block-end": "auto", - "margin-inline-start": "auto", - "max-inline-size": none, + "margin-block-start": auto, + "margin-inline-end": auto, + "margin-block-end": auto, + "margin-inline-start": auto, + "max-inline-size": none ), "single-column-regular-footer": ( - "inline-size": 100%, + "inline-size": 100% ), "single-column-regular-main": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "small-manual-promo": ( "display": grid, @@ -2791,33 +3030,33 @@ "color": var(--text-color), "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "small-manual-promo-above": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "small-manual-promo-below": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "small-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "small-manual-promo-left": ( "gap": var(--global-spacing-6), - "grid-template-columns": 1fr 2fr, + "grid-template-columns": 1fr 2fr ), "small-manual-promo-right": ( "gap": var(--global-spacing-6), - "grid-template-columns": 2fr 1fr, + "grid-template-columns": 2fr 1fr ), "small-promo": ( "display": grid, @@ -2828,58 +3067,108 @@ "color": var(--text-color), "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "small-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "small-promo-left": ( "gap": var(--global-spacing-6), - "grid-template-columns": 1fr 2fr, + "grid-template-columns": 1fr 2fr ), "small-promo-right": ( "gap": var(--global-spacing-6), - "grid-template-columns": 2fr 1fr, + "grid-template-columns": 2fr 1fr ), "social-sign-on": ( - "inline-size": 300px, + "inline-size": 100%, "margin-inline": auto, + "gap": var(--global-spacing-4), "components": ( "paragraph": ( "color": var(--status-color-danger), - "font-family": var(--font-family-primary), - ), - ), + "font-family": var(--font-family-primary) + ) + ) ), "social-sign-on-button-container": ( "display": flex, "flex-direction": column, + "align-items": center, "gap": var(--global-spacing-4), + "inline-size": 100%, + "margin-block-start": var(--global-spacing-2), + "margin-block-end": var(--global-spacing-2) + ), + "social-sign-on-button-container-apple": ( + "justify-content": center, + "border-block-start-width": 1px, + "border-block-end-width": 1px, + "border-inline-start-width": 1px, + "border-inline-end-width": 1px, + "border-block-start-color": var(--border-color), + "border-block-end-color": var(--border-color), + "border-inline-start-color": var(--border-color), + "border-inline-end-color": var(--border-color), + "border-radius": var(--global-spacing-1), + "color": var(--text-color), + "font-weight": var(--global-font-weight-7), + "font-family": var(--font-family-primary), + "inline-size": 400px, + "components": ( + "button-secondary-reverse-hover": ( + "color": var(--text-color) + ) + ) + ), + "social-sign-on-dividerWithText": ( + "display": flex, + "align-items": center, + "flex-direction": row, + "color": var(--text-color-subtle), + "font-family": var(--font-family-primary), + "font-weight": var(--global-font-weight-4), + "font-size": var(--global-font-size-4), + "margin-block-start": var(--global-spacing-2) + ), + "social-sign-on-dividerWithText-after": ( + "content": '', + "height": 1px, + "background-color": var(--border-color), + "flex-grow": 1, + "margin-inline-start": var(--global-spacing-2) + ), + "social-sign-on-dividerWithText-before": ( + "content": '', + "height": 1px, + "background-color": var(--border-color), + "flex-grow": 1, + "margin-inline-end": var(--global-spacing-2) ), "subheadline": ( "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "tag-title": ( "components": ( "heading": ( "font-size": var(--heading-level-1-font-size), - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "stack": ( - "gap": var(--global-spacing-2), - ), - ), + "gap": var(--global-spacing-2) + ) + ) ), "top-table-list": ( "grid-template-columns": 1fr, @@ -2887,33 +3176,33 @@ "gap": var(--global-spacing-5), "components": ( "grid": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "image": ( - "transition": opacity 0.4s ease, + "transition": opacity 0.4s ease ), "image-hover": ( "cursor": pointer, - "opacity": 0.8, + "opacity": 0.8 ), "link": ( - "color": var(--text-color), + "color": var(--text-color) ), "link-hover": ( - "color": var(--text-color-subtle), - ), - ), + "color": var(--text-color-subtle) + ) + ) ), "top-table-list-large": ( "gap": var(--global-spacing-4), "components": ( "link": ( - "position": relative, - ), - ), + "position": relative + ) + ) ), "top-table-list-large-container": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "top-table-list-large-icon-label": ( "align-items": center, @@ -2923,7 +3212,7 @@ "border-inline-end": 0, "border-inline-start": 0, "border-radius": var(--global-spacing-2), - "insert-block-end": var(--global-spacing-2), + "inset-block-end": var(--global-spacing-2), "margin-inline-start": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), @@ -2933,60 +3222,51 @@ "z-index": 1, "components": ( "icon": ( - "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "fill": var(--global-white), + "inline-size": var(--global-spacing-4) + ) + ) ), "top-table-list-large-label": ( "color": var(--global-white), - "margin-inline-start": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2) ), "top-table-list-large-text": ( "gap": 0, "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "overline": ( "font-size": var(--heading-level-6-font-size), - "line-height": var(--heading-level-6-line-height), + "line-height": var(--heading-level-6-line-height) ), "paragraph": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "separator": ( "margin-block-end": 0, "margin-block-start": 0, "margin-inline-end": var(--global-spacing-2), - "margin-inline-start": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "top-table-list-medium": ( "components": ( "attribution": ( "display": block, - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "divider": ( "clear": both, - "margin-block-start": var(--global-spacing-5), - ), - "heading": ( - "font-size": var(--heading-level-5-font-size), - "font-weight": var(--heading-level-5-font-weight), - "line-height": var(--heading-level-5-line-height), - "margin-block-end": var(--global-spacing-4), - ), - "link": ( - "position": relative, + "margin-block-start": var(--global-spacing-5) ), "media-item": ( "float": inline-end, @@ -2994,23 +3274,32 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 100px, + "max-inline-size": 100px + ), + "heading": ( + "font-size": var(--heading-level-5-font-size), + "font-weight": var(--heading-level-5-font-weight), + "line-height": var(--heading-level-5-line-height), + "margin-block-end": var(--global-spacing-4) + ), + "link": ( + "position": relative ), "paragraph": ( - "display": block, + "display": block ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), - ), - ), + "padding-inline-start": var(--global-spacing-2) + ) + ) ), "top-table-list-medium-container": ( - "grid-template-columns": 1fr, - "grid-template-rows": auto, "gap": var(--global-spacing-8), + "grid-template-columns": 1fr, + "grid-template-rows": auto ), "top-table-list-medium-icon-label": ( "align-items": center, @@ -3020,32 +3309,33 @@ "border-inline-end": 0, "border-inline-start": 0, "border-radius": var(--global-spacing-2), - "inline-block-end": var(--global-spacing-2), - "margin-left": var(--global-spacing-2), + "inset-block-end": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2) "position": absolute, + "padding-inline-start": var(--global-spacing-2), + "position": absolute, "z-index": 1, "components": ( "icon": ( - "fill": var(--global-white), "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), - ), - ), + "fill": var(--global-white), + "inline-size": var(--global-spacing-4) + ) + ) ), "top-table-list-medium-label": ( "color": var(--global-white), "display": none, - "margin-inline-start": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2) ), "top-table-list-medium-show-image": ( "components": ( "heading": ( - "inline-size": 68%, - ), - ), + "inline-size": 68% + ) + ) ), "top-table-list-small": ( "display": grid, @@ -3054,101 +3344,101 @@ "components": ( "heading": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - ), - ), + "line-height": var(--body-line-height) + ) + ) ), "top-table-list-small-above": ( "components": ( - "divider": ( - "grid-column": span 1, - ), - ), + "divider": ( + "grid-column": span 1 + ) + ) ), "top-table-list-small-below": ( "components": ( "divider": ( - "grid-column": span 1, - ), - ), + "grid-column": span 1 + ) + ) ), "top-table-list-small-left": ( "grid-template-columns": 1fr 2fr, "components": ( "divider": ( - "grid-column": span 2, - ), - ), + "grid-column": span 2 + ) + ) ), "top-table-list-small-right": ( "grid-template-columns": 2fr 1fr, "components": ( "divider": ( - "grid-column": span 2, - ), - ), + "grid-column": span 2 + ) + ) ), "top-table-list-xl": ( "components": ( "heading": ( "align-self": start, - "justify-content": start, + "justify-content": start ), "overline": ( "display": flex, - "justify-content": start, + "justify-content": start ), "separator": ( "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "top-table-list-xl-container": ( - "grid-template-columns": 1fr, + "grid-template-columns": 1fr ), "triple-chain": ( "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "triple-chain-child-item": ( - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "triple-chain-child-item-empty": ( - "display": contents, + "display": contents ), "triple-chain-children-grid": ( "grid-template-columns": 1fr, - "gap": var(--global-spacing-6) 0, + "gap": var(--global-spacing-6) 0 ), "video-player": ( "gap": var(--global-spacing-4), "components": ( "heading": ( "font-size": var(--heading-level-3-font-size), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "media-item": ( "inline-size": 100%, "margin-block-end": auto, "margin-block-start": auto, "margin-inline-end": auto, - "margin-inline-start": auto, - ), - ), + "margin-inline-start": auto + ) + ) ), "video-player-feature": ( "gap": var(--global-spacing-6), @@ -3157,9 +3447,9 @@ "margin-block-end": 0, "margin-block-start": 0, "margin-inline-end": var(--global-spacing-4), - "margin-inline-start": var(--global-spacing-4), - ), - ), + "margin-inline-start": var(--global-spacing-4) + ) + ) ), "video-player-feature-meta": ( "margin-block-end": auto, @@ -3169,116 +3459,122 @@ "inline-size": var(--content-scale-width), "components": ( "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "xl-manual-promo": ( "components": ( "heading": ( - "color": var(--text-color), + "color": var(--text-color) ), "link": ( "font-family": inherit, "font-size": inherit, "font-weight": inherit, - "line-height": inherit, + "line-height": inherit ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "overline": ( - "color": var(--text-color), + "color": var(--text-color) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "stack": ( - "gap": var(--global-spacing-4), - ), - ), + "gap": var(--global-spacing-4) + ) + ) ), "xl-manual-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "xl-promo": ( "components": ( "heading": ( - "color": var(--text-color), + "color": var(--text-color) ), "link": ( "font-family": inherit, "font-size": inherit, "font-weight": inherit, - "line-height": inherit, + "line-height": inherit ), "link-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "overline": ( - "color": var(--text-color), + "color": var(--text-color) ), "overline-hover": ( - "color": var(--text-color-subtle), + "color": var(--text-color-subtle) ), "separator": ( - "padding": 0 var(--global-spacing-2), + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2) ), "stack": ( - "gap": var(--global-spacing-4), + "gap": var(--global-spacing-4) ), "media-item": ( - "position": relative, - ), - ), + "position": relative + ) + ) ), "xl-promo-icon-label": ( "align-items": center, - "padding": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-block-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2), "background-color": var(--color-primary), "border": 0, "border-radius": var(--global-spacing-2), - "bottom": var(--global-spacing-2), - "margin-left": var(--global-spacing-2), + "inset-block-end": var(--global-spacing-2), + "margin-inline-start": var(--global-spacing-2), "position": absolute, "z-index": 1, "components": ( "icon": ( "fill": var(--global-white), - "height": var(--global-spacing-4), - "width": var(--global-spacing-4), - ), - ), + "block-size": var(--global-spacing-4), + "inline-size": var(--global-spacing-4) + ) + ) ), "xl-promo-img": ( "components": ( "link-hover": ( - "opacity": 0.8, - ), - ), + "opacity": 0.8 + ) + ) ), "xl-promo-label": ( - "margin-left": var(--global-spacing-2), - "color": var(--global-white), - ), + "margin-inline-start": var(--global-spacing-2), + "color": var(--global-white) + ) ), "components": ( "attribution": ( "color": var(--text-color), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "attribution-link": ( "color": var(--text-color), - "cursor": pointer, + "cursor": pointer ), "attribution-link-hover": ( "color": var(--text-color-subtle), - "text-decoration": underline, + "text-decoration": underline ), "badge": ( "align-self": baseline, @@ -3290,25 +3586,25 @@ "padding-inline-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-1), - "padding-block-end": var(--global-spacing-1), + "padding-block-end": var(--global-spacing-1) ), "badge-danger": ( - "background-color": var(--status-color-danger), + "background-color": var(--status-color-danger) ), "badge-default": ( - "background-color": var(--text-color), + "background-color": var(--text-color) ), "badge-light": ( - "background-color": var(--text-color-subtle), + "background-color": var(--text-color-subtle) ), "badge-primary": ( - "background-color": var(--color-primary), + "background-color": var(--color-primary) ), "badge-success": ( - "background-color": var(--status-color-success), + "background-color": var(--status-color-success) ), "badge-warning": ( - "background-color": var(--status-color-warning), + "background-color": var(--status-color-warning) ), "button": ( "border-color": transparent, @@ -3316,13 +3612,13 @@ "border-width": var(--global-border-width-1), "border-radius": var(--border-radius), "font-weight": var(--global-font-weight-7), - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "button-default": ( "background-color": var(--global-white), "border-color": var(--global-neutral-7), "border-width": var(--global-border-width-1), - "color": var(--global-neutral-7), + "color": var(--global-neutral-7) ), "button-large": ( "font-size": var(--body-font-size), @@ -3330,7 +3626,7 @@ "padding-block-start": var(--global-spacing-4), "padding-inline-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-4), - "padding-inline-end": var(--global-spacing-4), + "padding-inline-end": var(--global-spacing-4) ), "button-medium": ( "font-size": var(--body-font-size-small), @@ -3338,43 +3634,40 @@ "padding-block-start": var(--global-spacing-3), "padding-inline-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-3), - "padding-inline-end": var(--global-spacing-4), + "padding-inline-end": var(--global-spacing-4) ), "button-primary": ( "background-color": var(--color-primary), - "color": var(--global-white), + "color": var(--global-white) ), "button-primary-hover": ( - "background-color": var(--color-primary-hover), + "background-color": var(--color-primary-hover) ), "button-primary-reverse": ( "background-color": transparent, "border-color": var(--color-primary), - "color": var(--color-primary), + "color": var(--color-primary) ), "button-primary-reverse-hover": ( "border-color": var(--color-primary-hover), - "color": var(--color-primary-hover), + "color": var(--color-primary-hover) ), "button-secondary": ( "background-color": var(--global-white), - "color": var - ( - --global-black, - ), + "color": var (--global-black) ), "button-secondary-hover": ( "background-color": var(--global-neutral-2), - "color": var(--global-neutral-6), + "color": var(--global-neutral-6) ), "button-secondary-reverse": ( "background-color": transparent, "border-color": var(--global-white), - "color": var(--global-white), + "color": var(--global-white) ), "button-secondary-reverse-hover": ( "border-color": var(--global-neutral-3), - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "button-small": ( "font-size": var(--body-font-size-small), @@ -3382,7 +3675,7 @@ "padding-block-start": var(--global-spacing-1), "padding-inline-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-1), - "padding-inline-end": var(--global-spacing-4), + "padding-inline-end": var(--global-spacing-4) ), "carousel": ( "font-family": var(--font-family-primary), @@ -3391,15 +3684,15 @@ "container-name": c-carousel, "container-type": inline-size, "max-inline-size": 100cqi, - "--slides": 1, + "--slides": 1 ), "carousel-actions": ( "display": none, "padding-inline-start": var(--global-spacing-5), - "padding-inline-end": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5) ), "carousel-additional-controls": ( - "display": flex, + "display": flex ), "carousel-button": ( "align-items": center, @@ -3415,46 +3708,46 @@ "padding-inline-start": var(--global-spacing-2), "padding-block-end": 0, "padding-inline-end": var(--global-spacing-2), - "inline-size": auto, + "inline-size": auto ), "carousel-button-enter-full-screen": ( - "padding-inline-start": 0, + "padding-inline-start": 0 ), "carousel-button-exit-full-screen": ( "padding-inline-start": 0, - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-button-full-screen": ( - "color": var(--global-white), + "color": var(--global-white) ), "carousel-button-full-screen-hover": ( - "color": var(--global-neutral-3), + "color": var(--global-neutral-3) ), "carousel-button-next": ( "color": var(--global-white), - "margin-inline-start": auto, + "margin-inline-start": auto ), "carousel-button-next-rtl": ( - "transform": rotate(180deg), + "transform": rotate(180deg) ), "carousel-button-previous": ( - "color": var(--global-white), + "color": var(--global-white) ), "carousel-button-previous-rtl": ( - "transform": rotate(180deg), + "transform": rotate(180deg) ), "carousel-controls": ( - "margin-block-end": var(--global-spacing-2), + "margin-block-end": var(--global-spacing-2) ), "carousel-fullscreen": ( "color": var(--global-white), "padding-block-start": var(--global-spacing-2), "padding-inline-start": 0, "padding-block-end": var(--global-spacing-2), - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen-button-toggle-auto-play": ( - "display": none, + "display": none ), "carousel-fullscreen-controls": ( "align-items": flex-end, @@ -3463,56 +3756,56 @@ "padding-inline-end": var(--global-spacing-2), "padding-block-end": var(--global-spacing-2), "padding-inline-start": var(--global-spacing-2), - "place-self": initial, + "place-self": initial ), "carousel-icon": ( "fill": currentColor, "block-size": var(--global-spacing-4), - "inline-size": var(--global-spacing-4), + "inline-size": var(--global-spacing-4) ), "carousel-track": ( "gap": initial, "max-inline-size": 100cqi, - "inline-size": 100%, + "inline-size": 100% ), "date": ( "color": var(--text-color), "font-size": var(--body-font-size-small), - "line-height": var(--body-line-height-small), + "line-height": var(--body-line-height-small) ), "divider": ( "background-color": var(--border-color), - "block-size": 1px, + "block-size": 1px ), "heading": ( "font-family": var(--font-family-primary), "font-size": var(--heading-level-3-font-size), "font-weight": var(--heading-level-3-font-weight), - "line-height": var(--heading-level-3-line-height), + "line-height": var(--heading-level-3-line-height) ), "icon": ( "fill": var(--icon-fill-color), "block-size": var(--global-spacing-5), - "inline-size": var(--global-spacing-5), + "inline-size": var(--global-spacing-5) ), "image": ( "block-size": auto, - "max-inline-size": 100%, + "max-inline-size": 100% ), "image-hover": ( - "opacity": 1, + "opacity": 1 ), "input": ( "align-items": flex-start, "display": flex, "flex-direction": column, - "gap": var(--global-spacing-1), + "gap": var(--global-spacing-1) ), "input-error-input": ( - "border-color": var(--status-color-danger), + "border-color": var(--status-color-danger) ), "input-error-input-focus": ( - "outline-color": var(--status-color-danger), + "outline-color": var(--status-color-danger) ), "input-input": ( "border-block-start-width": var(--global-border-width-1), @@ -3531,66 +3824,63 @@ "padding-block-end": var(--global-spacing-4), "padding-block-start": var(--global-spacing-4), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "input-input-focus": ( "outline": solid 2px var(--form-border-color), - "outline-offset": 1px, + "outline-offset": 1px ), "input-label": ( - "font-weight": var(--global-font-weight-7), + "font-weight": var(--global-font-weight-7) ), "input-small-input": ( "padding-block-end": var(--global-spacing-2), "padding-block-start": var(--global-spacing-2), "padding-inline-end": var(--global-spacing-2), - "padding-inline-start": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ), "input-success-input": ( - "border-color": var(--status-color-success), + "border-color": var(--status-color-success) ), "input-success-input-focus": ( - "outline-color": var(--status-color-success), + "outline-color": var(--status-color-success) ), "input-warning-input": ( - "border-color": var(--status-color-warning), + "border-color": var(--status-color-warning) ), "input-warning-input-focus": ( - "outline-color": var(--status-color-warning), + "outline-color": var(--status-color-warning) ), "link": ( "color": var(--text-color), - "font-family": var(--font-family-primary), + "font-family": var(--font-family-primary) ), "link-active": ( - "text-decoration": none, + "text-decoration": none ), "link-hover": ( - "text-decoration": none, + "text-decoration": none ), "media-item": ( "align-items": stretch, "display": flex, "flex-direction": column, - "gap": var(--global-spacing-2), + "gap": var(--global-spacing-2) ), "media-item-fig-caption": ( "color": var(--text-color-subtle), "font-size": var(--body-font-size-tiny), - "line-height": var(--body-line-height-tiny), + "line-height": var(--body-line-height-tiny) ), "media-item-fig-caption-fullscreen": ( "padding-inline-start": var(--global-spacing-5), - "padding-inline-end": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5) ), "media-item-fig-caption-vertical-video": ( - "text-align": center, - ), - "media-item-fig-caption-vertical-video": ( - "text-align": center, + "text-align": center ), "media-item-title": ( - "font-weight": var(--global-font-weight-7), + "font-weight": var(--global-font-weight-7) ), "overline": ( "color": var(--text-color), @@ -3598,13 +3888,13 @@ "font-size": var(--heading-level-6-font-size), "font-weight": var(--heading-level-6-font-weight), "line-height": var(--heading-level-6-line-height), - "text-decoration": none, + "text-decoration": none ), "paragraph": ( "font-family": var(--font-family-secondary), "font-size": var(--body-font-size), "font-weight": var(--body-font-weight), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "pill": ( "background-color": var(--color-primary), @@ -3615,10 +3905,10 @@ "padding-inline-start": var(--global-spacing-4), "padding-block-end": var(--global-spacing-1), "padding-inline-end": var(--global-spacing-4), - "text-decoration": none, + "text-decoration": none ), "pill-hover": ( - "background-color": var(--global-neutral-7), + "background-color": var(--global-neutral-7) ), "stack-divider-horizontal": ( "border": none, @@ -3626,29 +3916,26 @@ "border-inline-start-style": var(--global-border-style-1), "border-inline-start-color": var(--border-color), "inline-size": 1px, - "block-size": auto, + "block-size": auto ), "stack-divider-vertical": ( "border-block-end-width": var(--global-border-width-1), "border-block-end-style": var(--global-border-style-1), - "border-block-end-color": var(--border-color), - ), - "vertical-video-frame": ( - "background-color": transparent, + "border-block-end-color": var(--border-color) ), "vertical-video-frame": ( - "background-color": transparent, + "background-color": transparent ), "video": ( "margin-block-start": auto, "margin-inline-start": auto, "margin-block-end": auto, - "margin-inline-end": auto, + "margin-inline-end": auto ), "video-frame": ( - "background-color": transparent, - ), - ), + "background-color": transparent + ) + ) ), "desktop": ( "alias": ( @@ -3661,18 +3948,18 @@ "heading-level-4-line-height": var(--global-line-height-3), "heading-level-5-font-size": var(--global-font-size-11), "heading-level-5-line-height": var(--global-line-height-4), - "heading-level-6-font-size": var(--global-font-size-7), + "heading-level-6-font-size": var(--global-font-size-7) ), "blocks": ( "alert-bar": ( "components": ( "link": ( - "font-size": var(--body-font-size), - ), - ), + "font-size": var(--body-font-size) + ) + ) ), "article-body": ( - "font-size": var(--heading-level-6-font-size), + "font-size": var(--heading-level-6-font-size) ), "article-body-gallery-fullscreen": ( "components": ( @@ -3680,48 +3967,48 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-5), "padding-block-end": 0, - "padding-inline-start": var(--global-spacing-5), - ), - ), + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "article-body-image-wrapper": ( - "max-block-size": 75vh, + "max-block-size": 75vh ), "author-bio-author-description": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "author-bio-social-link-wrapper": ( - "margin-block-start": var(--global-spacing-4), + "margin-block-start": var(--global-spacing-4) ), "double-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "double-chain-child-item-empty": ( - "display": initial, + "display": initial ), "double-chain-children-grid": ( "grid-template-columns": 1fr 1fr, - "gap": 0 var(--global-spacing-5), + "gap": 0 var(--global-spacing-5) ), "footer": ( "components": ( "image": ( - "max-block-size": var(--global-spacing-10), - ), - ), + "max-block-size": var(--global-spacing-10) + ) + ) ), "footer-links": ( "grid-auto-flow": column, - "grid-template-columns": 1fr 1fr 1fr 1fr, + "grid-template-columns": 1fr 1fr 1fr 1fr ), "footer-social-links-container": ( "border-block-end": none, - "inline-size": max-content, + "inline-size": max-content ), "footer-top-container": ( "border-block-end": 1px solid var(--global-neutral-4), @@ -3732,17 +4019,17 @@ "paragraph": ( "display": block, "align-self": center, - "text-align": center, - ), - ), + "text-align": center + ) + ) ), "forgot-password": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "full-author-bio": ( "flex-direction": row, @@ -3759,102 +4046,105 @@ "margin-inline-end": 0, "margin-inline-start": 0, "max-block-size": 11.25rem, - "max-inline-size": 11.25rem, - ), - ), + "max-inline-size": 11.25rem + ) + ) ), "full-author-bio-social-header": ( - "text-align": start, + "text-align": start ), "full-author-bio-social-icons": ( - "justify-content": flex-start, + "justify-content": flex-start ), "gallery-fullscreen": ( "components": ( "media-item-fig-caption": ( - "padding": 0 var(--global-spacing-5), - ), - ), + "padding-block-start": 0, + "padding-inline-end": var(--global-spacing-5), + "padding-block-end": 0, + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "gallery-image-wrapper": ( - "max-height": 75vh, + "max-block-size": 75vh ), "header-account-action-desktop": ( "display": flex, "components": ( "button": ( - "text-decoration": none, - ), - ), + "text-decoration": none + ) + ) ), "header-account-action-mobile": ( - "display": none, + "display": none ), "header-nav-chain": ( "padding-block-end": var(--global-spacing-3), "padding-block-start": var(--global-spacing-3), "padding-inline-end": var(--global-spacing-5), - "padding-inline-start": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-components-desktop": ( - "display": flex, + "display": flex ), "header-nav-chain-flyout-nav-components-mobile": ( - "display": none, + "display": none ), "header-nav-chain-flyout-nav-wrapper": ( - "inline-size": 315px, + "inline-size": 315px ), "header-nav-chain-flyout-nav-wrapper-closed": ( - "transform": translate(-315px, 0), + "transform": translate(calc(var(--text-direction) * -315px), 0) ), "header-nav-chain-links-list": ( - "display": flex, + "display": flex ), "header-nav-chain-top-nav-components-desktop": ( - "display": flex, + "display": flex ), "header-nav-chain-top-nav-components-mobile": ( - "display": none, + "display": none ), "header-small": ( "font-size": var(--body-font-size), - "line-height": var(--body-line-height), + "line-height": var(--body-line-height) ), "large-manual-promo": ( "gap": var(--global-spacing-6), "components": ( "divider": ( - "grid-column": span 2, + "grid-column": span 2 ), "grid": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "large-manual-promo-text": ( "components": ( "heading": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), - ), - ), + "line-height": var(--heading-level-4-line-height) + ) + ) ), "large-promo": ( "gap": var(--global-spacing-6), "components": ( "grid": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "large-promo-text": ( "components": ( "heading": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), - ), - ), + "line-height": var(--heading-level-4-line-height) + ) + ) ), "lead-art-carousel-fullscreen": ( "components": ( @@ -3862,20 +4152,20 @@ "padding-block-end": 0, "padding-block-start": 0, "padding-inline-end": var(--global-spacing-5), - "padding-inline-start": var(--global-spacing-5), - ), - ), + "padding-inline-start": var(--global-spacing-5) + ) + ) ), "login-form": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "masthead": ( - "display": flex, + "display": flex ), "medium-manual-promo": ( "components": ( @@ -3885,116 +4175,115 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( - "display": block, - ), - ), + "display": block + ) + ) ), "medium-manual-promo-show-image": ( "components": ( "heading": ( "inline-size": auto, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "paragraph": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "medium-promo": ( "components": ( "attribution": ( - "display": block, + "display": block ), "media-item": ( - "float": left, + "float": inline-start, "margin-block-end": 0, "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( "display": block, - "inline-size": auto, - ), - ), + "inline-size": auto + ) + ) ), "medium-promo-label": ( - "display": inline, + "display": inline ), "medium-promo-show-image": ( "components": ( "attribution": ( - "margin-left": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( - "margin-left": calc(33% + var(--global-spacing-6)), - "inline-size": auto, + "margin-inline-start": calc(33% + var(--global-spacing-6)), + "inline-size": auto ), "paragraph": ( - "margin-left": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "quad-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "quad-chain-child-item-empty": ( - "display": initial, + "display": initial ), "quad-chain-children-grid": ( "grid-template-columns": 1fr 1fr 1fr 1fr, - "gap": 0 var(--global-spacing-5), + "gap": 0 var(--global-spacing-5) ), "reset-password": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "results-list": ( "components": ( "media-item": ( "float": inline-start, - "margin-block-top": 0, "margin-block-end": 0, - "margin-inline-start": 0, + "margin-block-start": 0, "margin-inline-end": 0, - "max-inline-size": 33%, + "margin-inline-start": 0, + "max-inline-size": 33% ), "overline": ( - "font-size": var(--global-font-size-7), - ), - ), + "font-size": var(--global-font-size-7) + ) + ) ), "results-list-show-image": ( "components": ( "attribution": ( "display": block, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), "inline-size": auto, + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "overline": ( - "margin-inline-start": var(--global-spacing-6), "font-size": var(--global-font-size-7), + "margin-inline-start": var(--global-spacing-6) ), "paragraph": ( - "display": block, - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "right-rail-advanced-main-interior-item": ( "border-inline-end-width": 1px, @@ -4004,7 +4293,7 @@ "padding-inline-end": var(--global-spacing-6), "padding-block-end": 0, "padding-inline-start": 0, - "display": flex, + "display": flex ), "right-rail-advanced-main-right-rail": ( "padding-block-start": 0, @@ -4012,17 +4301,19 @@ "padding-block-end": 0, "padding-inline-start": var(--global-spacing-6), "display": flex, + "border-inline-start-style": solid, + "border-inline-start-width": 1px ), "right-rail-advanced-navigation": ( "padding-block-start": 0, "padding-inline-end": 0, "padding-block-end": var(--global-spacing-8), - "padding-inline-start": 0, + "padding-inline-start": 0 ), "right-rail-advanced-rail-container": ( "grid-template-columns": 2fr 1fr, "gap": 0, - "grid-template-rows": initial, + "grid-template-rows": initial ), "right-rail-main-interior-item": ( "border-inline-end-width": 1px, @@ -4031,29 +4322,31 @@ "padding-block-start": 0, "padding-inline-end": var(--global-spacing-6), "padding-block-end": 0, - "padding-inline-start": 0, + "padding-inline-start": 0 ), "right-rail-main-right-rail": ( "padding-block-start": 0, "padding-inline-end": 0, "padding-block-end": 0, "padding-inline-start": var(--global-spacing-6), + "border-inline-start-style": solid, + "border-inline-start-width": 1px ), "right-rail-navigation": ( "padding-block-start": 0, "padding-inline-end": 0, "padding-block-end": var(--global-spacing-8), - "padding-inline-start": 0, + "padding-inline-start": 0 ), "right-rail-rail-container": ( "grid-template-columns": 2fr 1fr, "gap": 0, - "grid-template-rows": initial, + "grid-template-rows": initial ), "search-results-list-results-item": ( "components": ( "attribution": ( - "display": block, + "display": block ), "media-item": ( "float": inline-start, @@ -4061,135 +4354,135 @@ "margin-block-start": 0, "margin-inline-end": 0, "margin-inline-start": 0, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( - "display": block, - ), - ), + "display": block + ) + ) ), "search-results-list-results-item-show-image": ( "components": ( "attribution": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( "inline-size": auto, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "overline": ( "font-size": var(--heading-level-5-font-size), - "margin-inline-start": var(--global-spacing-6), + "margin-inline-start": var(--global-spacing-6) ), "paragraph": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "share-bar": ( - "display": flex, + "display": flex ), "sign-up": ( "components": ( "heading": ( "font-size": var(--global-font-size-12), - "padding-block-end": var(--global-spacing-4), - ), - ), + "padding-block-end": var(--global-spacing-4) + ) + ) ), "single-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "single-chain-children-stack": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "single-column-regular-body": ( - "max-inline-size": 37rem, + "max-inline-size": 37rem ), "top-table-list-large": ( "gap": var(--global-spacing-6), "components": ( "divider": ( - "grid-column": span 2, + "grid-column": span 2 ), "grid": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "top-table-list-large-text": ( "components": ( "heading": ( "font-size": var(--heading-level-4-font-size), - "line-height": var(--heading-level-4-line-height), - ), - ), + "line-height": var(--heading-level-4-line-height) + ) + ) ), "top-table-list-medium": ( "components": ( "attribution": ( - "display": block, + "display": block ), "media-item": ( "float": inline-start, - "max-inline-size": 33%, + "max-inline-size": 33% ), "paragraph": ( - "display": block, - ), - ), + "display": block + ) + ) ), "top-table-list-medium-container": ( - "gap": var(--global-spacing-5), + "gap": var(--global-spacing-5) ), "top-table-list-medium-label": ( - "display": inline, + "display": inline ), "top-table-list-medium-show-image": ( "components": ( "attribution": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "heading": ( "inline-size": auto, - "margin-inline-start": calc(33% + var(--global-spacing-6)), + "margin-inline-start": calc(33% + var(--global-spacing-6)) ), "paragraph": ( - "margin-inline-start": calc(33% + var(--global-spacing-6)), - ), - ), + "margin-inline-start": calc(33% + var(--global-spacing-6)) + ) + ) ), "top-table-list-small-container-1": ( "components": ( "grid": ( - "template-columns": 1fr, - ), - ), + "template-columns": 1fr + ) + ) ), "top-table-list-small-container-2": ( "components": ( "grid": ( - "template-columns": repeat(2, minmax(5rem, 1fr)), - ), - ), + "template-columns": repeat(2, minmax(5rem, 1fr)) + ) + ) ), "top-table-list-small-container-3": ( "components": ( "grid": ( - "template-columns": repeat(3, minmax(5rem, 1fr)), - ), - ), + "template-columns": repeat(3, minmax(5rem, 1fr)) + ) + ) ), "top-table-list-small-container-4": ( "components": ( "grid": ( - "template-columns": repeat(4, minmax(5rem, 1fr)), - ), - ), + "template-columns": repeat(4, minmax(5rem, 1fr)) + ) + ) ), "top-table-list-xl": ( "components": ( @@ -4197,30 +4490,30 @@ "align-self": center, "font-size": var(--heading-level-1-font-size), "justify-content": center, - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "overline": ( "display": flex, - "justify-content": center, + "justify-content": center ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "triple-chain": ( "components": ( "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "triple-chain-child-item-empty": ( - "display": initial, + "display": initial ), "triple-chain-children-grid": ( "grid-template-columns": 1fr 1fr 1fr, - "gap": 0 var(--global-spacing-5), + "gap": 0 var(--global-spacing-5) ), "xl-manual-promo": ( "components": ( @@ -4228,16 +4521,16 @@ "align-self": center, "font-size": var(--heading-level-1-font-size), "justify-content": center, - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "overline": ( "display": flex, - "justify-content": center, + "justify-content": center ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "xl-promo": ( "components": ( @@ -4245,44 +4538,44 @@ "align-self": center, "font-size": var(--heading-level-1-font-size), "justify-content": center, - "line-height": var(--heading-level-1-line-height), + "line-height": var(--heading-level-1-line-height) ), "overline": ( "display": flex, - "justify-content": center, + "justify-content": center ), "stack": ( - "gap": var(--global-spacing-5), - ), - ), + "gap": var(--global-spacing-5) + ) + ) ), "xl-promo-icon-label": ( "margin-inline-start": var(--global-spacing-2), - "color": var(--global-white), - ), + "color": var(--global-white) + ) ), "components": ( "carousel": ( - "--slides": 4, + "--slides": 4 ), "carousel-actions": ( - "display": flex, + "display": flex ), "carousel-additional-controls": ( "gap": var(--global-spacing-2), "padding-block-start": 0, "padding-inline-start": var(--global-spacing-2), "padding-block-end": 0, - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen": ( "padding-block-start": var(--global-spacing-5), "padding-inline-start": 0, "padding-block-end": var(--global-spacing-5), - "padding-inline-end": 0, + "padding-inline-end": 0 ), "carousel-fullscreen-button-toggle-auto-play": ( - "display": flex, + "display": flex ), "carousel-fullscreen-controls": ( "flex-direction": initial, @@ -4290,16 +4583,16 @@ "padding-inline-end": var(--global-spacing-5), "padding-block-end": var(--global-spacing-5), "padding-inline-start": var(--global-spacing-5), - "place-self": flex-start, + "place-self": flex-start ), "carousel-track": ( - "gap": var(--global-spacing-6), + "gap": var(--global-spacing-6) ), "video-frame": ( - "background-color": var(--global-black), - ), - ), - ), + "background-color": var(--global-black) + ) + ) + ) ) ); @@ -4349,4 +4642,4 @@ @use "../../blocks/tag-title-block"; @use "../../blocks/top-table-list-block"; @use "../../blocks/triple-chain-block"; -@use "../../blocks/video-player-block"; +@use "../../blocks/video-player-block"; \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json index c4f6846253..73fc490f0c 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -6,8 +6,7 @@ ], "extends": [ "stylelint-config-recommended", - "stylelint-config-sass-guidelines", - "stylelint-config-prettier" + "stylelint-config-sass-guidelines" ], "ignoreFiles": ["**/*.js", "**/*.jsx"], "rules": { diff --git a/babel.config.js b/babel.config.js index 4c0e9fa3ae..56d858939c 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,17 +16,19 @@ module.exports = { }, ], ], + plugins: [ + [ + "@babel/plugin-proposal-decorators", + { + legacy: true, + }, + ], + ], env: { test: { plugins: [ "@babel/plugin-proposal-nullish-coalescing-operator", "transform-react-remove-prop-types", - [ - "@babel/plugin-proposal-decorators", - { - legacy: true, - }, - ], "@babel/plugin-proposal-class-properties", [ "module-resolver", diff --git a/blocks/ads-block/index.story.jsx b/blocks/ads-block/index.story.jsx index a7de05b9e6..1f05799bb7 100644 --- a/blocks/ads-block/index.story.jsx +++ b/blocks/ads-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { ArcAdDisplay } from "./features/ads/default"; export default { title: "Blocks/Ads Block", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/alert-bar-block/index.story.jsx b/blocks/alert-bar-block/index.story.jsx index 80b1f87106..7a21e9c300 100644 --- a/blocks/alert-bar-block/index.story.jsx +++ b/blocks/alert-bar-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { AlertBarPresentational } from "./features/alert-bar/default"; export default { title: "Blocks/Alert Bar", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/article-tag-block/index.story.jsx b/blocks/article-tag-block/index.story.jsx index 5cd87ba8b9..acd7c8adfb 100644 --- a/blocks/article-tag-block/index.story.jsx +++ b/blocks/article-tag-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { ArticleTagItems } from "./features/tag/default"; export default { title: "Blocks/Tags Bar", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/author-bio-block/index.story.jsx b/blocks/author-bio-block/index.story.jsx index 38b9e5f5d8..750c81961b 100644 --- a/blocks/author-bio-block/index.story.jsx +++ b/blocks/author-bio-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import { AuthorBioItems } from "./features/author-bio/default"; export default { title: "Blocks/Short Author Bio", - decorators: [withKnobs], parameters: { chromatic: { viewports: [320, 1200], diff --git a/blocks/byline-block/index.story.jsx b/blocks/byline-block/index.story.jsx new file mode 100644 index 0000000000..206f0e7fef --- /dev/null +++ b/blocks/byline-block/index.story.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import Byline from "./features/byline/default"; + +export default { + title: "Blocks/Byline", + parameters: { + chromatic: { viewports: [320, 1200] }, + }, +}; + +export const bylineFromArticleContent = () => ; diff --git a/blocks/byline-block/index.story.mdx b/blocks/byline-block/index.story.mdx deleted file mode 100644 index c3e3864e10..0000000000 --- a/blocks/byline-block/index.story.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Meta, Story, Canvas } from "@storybook/addon-docs"; - -import Byline from "./features/byline/default"; - - - -# Byline - -The `Byline` component reads from globalContent and returns the author(s) in a comma delimited format. - -## Stories - -** Byline ** - - - - - - diff --git a/blocks/card-list-block/index.story.jsx b/blocks/card-list-block/index.story.jsx index 1cced45ca4..ad7dc86cc1 100644 --- a/blocks/card-list-block/index.story.jsx +++ b/blocks/card-list-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import CardList from "./features/card-list/default"; export default { title: "Blocks/Card List", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 1200] }, diff --git a/blocks/double-chain-block/index.story.jsx b/blocks/double-chain-block/index.story.jsx index a640e2dbc6..c9224fb2fd 100644 --- a/blocks/double-chain-block/index.story.jsx +++ b/blocks/double-chain-block/index.story.jsx @@ -1,10 +1,8 @@ import React from "react"; -import { withKnobs } from "@storybook/addon-knobs"; import DoubleChain from "./chains/double-chain/default"; export default { title: "Chains/Double", - decorators: [withKnobs], parameters: { // Set the viewports in Chromatic at a component level. chromatic: { viewports: [320, 740, 1200] }, diff --git a/blocks/footer-block/index.story.jsx b/blocks/footer-block/index.story.jsx new file mode 100644 index 0000000000..fa44c37202 --- /dev/null +++ b/blocks/footer-block/index.story.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import Footer from "./features/footer/default"; + +export default { + title: "Blocks/Footer", + parameters: { + chromatic: { + viewports: [320, 1200], + }, + }, +}; + +const defaultCustomFields = { + navigationConfig: { + contentService: "footer-service", + contentConfigValues: {}, + }, + lazyLoad: false, +}; + +export const DefaultLayout = () => ( +