├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── component_change_request.md │ └── new_component_request.md ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml └── workflows │ ├── docs-prod.yml │ └── node.js.yml ├── .gitignore ├── .nvmrc ├── .stylelintignore ├── .stylelintrc.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── assets ├── fonts │ ├── Inter-Bold.woff2 │ ├── Inter-BoldItalic.woff2 │ ├── Inter-Italic.woff2 │ ├── Inter-Regular.woff2 │ ├── Metropolis-Bold.woff │ ├── Metropolis-Bold.woff2 │ ├── Metropolis-Medium.woff │ ├── Metropolis-Medium.woff2 │ ├── mozilla-headline │ │ ├── MozillaHeadline-Regular.woff2 │ │ └── MozillaHeadline-SemiBold.woff2 │ └── mozilla-text │ │ ├── MozillaText-Bold.woff2 │ │ ├── MozillaText-BoldItalic.woff2 │ │ ├── MozillaText-Italic.woff2 │ │ ├── MozillaText-Regular.woff2 │ │ ├── MozillaText-SemiBold.woff2 │ │ └── MozillaText-SemiBoldItalic.woff2 ├── js │ └── protocol │ │ ├── base.js │ │ ├── details.js │ │ ├── footer.js │ │ ├── lang-switcher.js │ │ ├── menu.js │ │ ├── modal.js │ │ ├── navigation.js │ │ ├── newsletter.js │ │ ├── notification-bar.js │ │ ├── sidemenu.js │ │ ├── sticky-promo.js │ │ ├── supports.js │ │ └── utils.js ├── package │ ├── LICENSE │ ├── README.md │ └── package.json └── sass │ └── protocol │ ├── base │ ├── _elements.scss │ ├── _includes.scss │ ├── elements │ │ ├── _common.scss │ │ ├── _containers.scss │ │ ├── _details.scss │ │ ├── _document.scss │ │ ├── _forms.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _quotes.scss │ │ ├── _reset.scss │ │ ├── _tables.scss │ │ └── _titles.scss │ ├── includes │ │ └── _animations.scss │ └── utilities │ │ ├── _backgrounds.scss │ │ └── _titles.scss │ ├── components │ ├── _article.scss │ ├── _billboard.scss │ ├── _breadcrumb.scss │ ├── _button.scss │ ├── _callout.scss │ ├── _card.scss │ ├── _emphasis-box.scss │ ├── _feature-card.scss │ ├── _footer.scss │ ├── _inline-list.scss │ ├── _language-switcher.scss │ ├── _menu-item.scss │ ├── _menu-list.scss │ ├── _menu.scss │ ├── _modal.scss │ ├── _navigation.scss │ ├── _newsletter-form.scss │ ├── _notification-bar.scss │ ├── _picto.scss │ ├── _section-heading.scss │ ├── _sidebar-menu.scss │ ├── _split.scss │ ├── _sticky-promo.scss │ ├── _video.scss │ ├── _zap.scss │ ├── forms │ │ ├── _button-container.scss │ │ ├── _choice.scss │ │ ├── _field.scss │ │ ├── _form.scss │ │ ├── _msg.scss │ │ ├── _set.scss │ │ └── _status.scss │ └── logos │ │ ├── _logo-product-beta.scss │ │ ├── _logo-product-developer.scss │ │ ├── _logo-product-family.scss │ │ ├── _logo-product-firefox.scss │ │ ├── _logo-product-focus.scss │ │ ├── _logo-product-lockwise.scss │ │ ├── _logo-product-monitor.scss │ │ ├── _logo-product-mozilla.scss │ │ ├── _logo-product-nightly.scss │ │ ├── _logo-product-pocket.scss │ │ ├── _logo-product-relay.scss │ │ ├── _logo-product-vpn.scss │ │ ├── _logo.scss │ │ ├── _wordmark-product-beta.scss │ │ ├── _wordmark-product-developer.scss │ │ ├── _wordmark-product-family.scss │ │ ├── _wordmark-product-firefox.scss │ │ ├── _wordmark-product-focus.scss │ │ ├── _wordmark-product-klar.scss │ │ ├── _wordmark-product-lockwise.scss │ │ ├── _wordmark-product-monitor.scss │ │ ├── _wordmark-product-mozilla.scss │ │ ├── _wordmark-product-nightly.scss │ │ ├── _wordmark-product-pocket.scss │ │ ├── _wordmark-product-relay.scss │ │ ├── _wordmark-product-vpn.scss │ │ └── _wordmark.scss │ ├── includes │ ├── _config.scss │ ├── _functions.scss │ ├── _lib.scss │ ├── _themes-sass.scss │ ├── _tokens.scss │ ├── fonts │ │ ├── _inter.scss │ │ ├── _metropolis.scss │ │ ├── _mozilla-headline.scss │ │ └── _mozilla-text.scss │ ├── forms │ │ └── _index.scss │ ├── mixins │ │ ├── _at2x.scss │ │ ├── _bidi.scss │ │ ├── _details.scss │ │ ├── _gradients.scss │ │ ├── _grid.scss │ │ ├── _images.scss │ │ ├── _index.scss │ │ ├── _typography.scss │ │ ├── _utils.scss │ │ └── _zap.scss │ └── themes │ │ ├── _firefox.scss │ │ ├── _index.scss │ │ └── _mozilla.scss │ ├── protocol-components.scss │ ├── protocol.scss │ └── templates │ ├── _card-layout.scss │ ├── _main-with-sidebar.scss │ └── _multi-column.scss ├── components ├── _preview-dark-unpadded.html ├── _preview-dark.html ├── _preview-unpadded.html ├── _preview.html ├── article │ ├── article.html │ └── readme.md ├── basic-elements │ ├── blockquote │ │ ├── blockquote.html │ │ └── readme.md │ ├── details │ │ ├── details.html │ │ └── readme.md │ ├── headings │ │ ├── headings.html │ │ └── readme.md │ ├── links │ │ ├── links--call-to-action.html │ │ ├── links--call-to-action.readme.md │ │ ├── links.html │ │ └── readme.md │ ├── lists │ │ ├── lists--inline.html │ │ ├── lists--inline.readme.md │ │ ├── lists.html │ │ └── readme.md │ ├── paragraphs │ │ ├── paragraphs.html │ │ └── readme.md │ └── tables │ │ ├── readme.md │ │ └── tables.html ├── billboard │ ├── billboard.config.yml │ ├── billboard.html │ └── readme.md ├── branding │ ├── logo │ │ ├── logo--products.html │ │ ├── logo--products.readme.md │ │ ├── logo--sizes.html │ │ ├── logo--sizes.readme.md │ │ ├── logo.config.yml │ │ ├── logo.html │ │ └── readme.md │ ├── wordmark │ │ ├── readme.md │ │ ├── wordmark--products.html │ │ ├── wordmark--products.readme.md │ │ ├── wordmark--sizes.html │ │ ├── wordmark--sizes.readme.md │ │ ├── wordmark.config.yml │ │ └── wordmark.html │ └── zap │ │ ├── readme.md │ │ ├── zap--all-styles.html │ │ ├── zap.config.yml │ │ └── zap.html ├── breadcrumb │ ├── breadcrumb.html │ └── readme.md ├── button │ ├── button--with-icon.html │ ├── button--with-icon.readme.md │ ├── button.config.yml │ ├── button.html │ └── readme.md ├── callout │ ├── callout--example.html │ ├── callout.config.yml │ ├── callout.html │ └── readme.md ├── card │ ├── card.config.yml │ ├── card.html │ └── readme.md ├── details-component │ ├── details-component--custom.html │ ├── details-component--custom.readme.md │ ├── details-component.html │ └── readme.md ├── download-button │ ├── download-button--secondary.html │ ├── download-button.config.yml │ ├── download-button.html │ └── readme.md ├── emphasis-box │ ├── emphasis-box.html │ └── readme.md ├── feature-card │ ├── feature-card.config.yml │ ├── feature-card.html │ └── readme.md ├── footer │ ├── 01-footer │ │ ├── footer.config.yml │ │ ├── footer.html │ │ └── readme.md │ └── 02-example-basic │ │ ├── example-basic.config.yml │ │ ├── example-basic.html │ │ └── readme.md ├── forms │ ├── 01-input │ │ ├── input--disabled.html │ │ ├── input.config.yml │ │ ├── input.html │ │ └── readme.md │ ├── 02-select │ │ ├── readme.md │ │ ├── select.config.yml │ │ └── select.html │ ├── 03-checkboxes │ │ ├── checkboxes.html │ │ └── readme.md │ ├── 04-radio-buttons │ │ ├── radio-buttons.html │ │ └── readme.md │ ├── 05-textarea │ │ ├── readme.md │ │ └── textarea.html │ ├── 06-field-notes │ │ ├── field-notes.html │ │ └── readme.md │ ├── 07-titles │ │ ├── readme.md │ │ └── titles.html │ ├── 08-field │ │ ├── field.html │ │ └── readme.md │ ├── 09-choices │ │ ├── choices.html │ │ └── readme.md │ ├── 10-error-messages │ │ ├── error-messages.html │ │ └── readme.md │ ├── 11-error-list │ │ ├── error-list.html │ │ └── readme.md │ ├── 12-form-header │ │ ├── form-header.config.yml │ │ ├── form-header.html │ │ └── readme.md │ ├── 14-field-set │ │ ├── field-set.html │ │ └── readme.md │ ├── 15-button-container │ │ ├── button-container.config.yml │ │ ├── button-container.html │ │ └── readme.md │ ├── _choice │ │ ├── choice.config.yml │ │ ├── choice.html │ │ └── readme.md │ ├── _input-field │ │ ├── input-field.config.yml │ │ └── input-field.html │ ├── _list-field │ │ ├── list-field.config.yml │ │ └── list-field.html │ ├── _select-field │ │ ├── select-field.config.yml │ │ └── select-field.html │ ├── _textarea-field │ │ ├── textarea-field.config.yml │ │ └── textarea-field.html │ └── example-form │ │ ├── example-form.html │ │ └── readme.md ├── language-switcher │ ├── language-switcher.html │ └── readme.md ├── layout │ ├── 01-content-container │ │ ├── content-container.config.yml │ │ ├── content-container.html │ │ └── readme.md │ ├── 02-columns │ │ ├── columns--four.html │ │ ├── columns--three.html │ │ ├── columns--two.html │ │ ├── columns.config.yml │ │ ├── columns.html │ │ └── readme.md │ ├── 03-card-layout │ │ ├── 02-card-layout--third.html │ │ ├── 03-card-layout--quarter.html │ │ ├── 04-card-layout--hero.html │ │ ├── card-layout.config.yml │ │ ├── card-layout.html │ │ └── readme.md │ └── 04-main-with-sidebar │ │ ├── 01-main-with-sidebar │ │ ├── main-with-sidebar.config.yml │ │ ├── main-with-sidebar.html │ │ └── readme.md │ │ └── example-sidebar-menu │ │ ├── example-sidebar-menu.config.yml │ │ ├── example-sidebar-menu.html │ │ └── readme.md ├── menu-list │ ├── menu-list--download.html │ ├── menu-list.config.yml │ ├── menu-list.html │ └── readme.md ├── modal │ ├── modal.html │ └── readme.md ├── navigation │ ├── 01-navigation │ │ ├── navigation.config.yml │ │ ├── navigation.html │ │ └── readme.md │ ├── 02-menu │ │ ├── menu.html │ │ └── readme.md │ └── 03-menu-item │ │ ├── menu-item.config.yml │ │ ├── menu-item.html │ │ └── readme.md ├── newsletter │ ├── newsletter--errors.html │ ├── newsletter--success.html │ ├── newsletter.config.yml │ ├── newsletter.html │ └── readme.md ├── notification-bar │ ├── notification-bar--scripted.html │ ├── notification-bar--scripted.readme.md │ ├── notification-bar--sticky.html │ ├── notification-bar--sticky.readme.md │ ├── notification-bar.config.yml │ ├── notification-bar.html │ └── readme.md ├── picto │ ├── picto--centered.html │ ├── picto--side.html │ ├── picto.config.yml │ ├── picto.html │ └── readme.md ├── section-heading │ ├── readme.md │ ├── section-heading.config.yml │ └── section-heading.html ├── sidebar-menu │ ├── readme.md │ └── sidebar-menu.html ├── split │ ├── readme.md │ ├── split.config.yml │ └── split.html ├── sticky-promo │ ├── readme.md │ ├── sticky-promo.config.yml │ └── sticky-promo.html └── video │ ├── readme.md │ └── video.html ├── docs ├── 01-fundamentals │ ├── 01-principles.md │ ├── 02-themes.md │ ├── 03-typography.md │ ├── 04-color.md │ ├── 05-design-tokens.md │ ├── color.config.yml │ ├── design-tokens.config.yml │ └── typography.config.yml ├── 02-usage │ ├── 01-overview.md │ └── 02-framework.md ├── 03-contributing │ ├── 01-overview.md │ ├── 02-naming.md │ └── 03-css-guide.md ├── 404.md ├── _partials │ └── _color-swatch.md └── index.md ├── eslint.config.js ├── fractal.config.js ├── main.js ├── netlify.toml ├── package-lock.json ├── package.json ├── static ├── img │ ├── billboard-image.png │ ├── image-1-1-sm.jpg │ ├── image-1-1.jpg │ ├── image-16-9-high-res.jpg │ ├── image-16-9.jpg │ ├── image-3-2-high-res.jpg │ ├── image-3-2.jpg │ ├── image-portrait.jpg │ ├── newsletter-image.png │ └── video-poster.jpg └── video │ └── video.webm ├── tests ├── globals.js ├── jasmine-browser.json └── unit │ ├── details.js │ ├── lang-switcher.js │ ├── menu.js │ ├── navigation.js │ ├── newsletter.js │ └── notification-bar.js ├── theme ├── assets │ ├── favicon.png │ ├── img │ │ ├── github.svg │ │ ├── icon-drag--horizontal.svg │ │ ├── icon-drag--vertical.svg │ │ ├── icon-navigation-closed-ltr.svg │ │ ├── icon-navigation-closed-rtl.svg │ │ ├── icon-navigation-opened.svg │ │ ├── icon-window.svg │ │ ├── loader.svg │ │ └── logo.svg │ ├── js │ │ └── bidi.js │ └── sass │ │ ├── base │ │ └── _typography.scss │ │ ├── components │ │ ├── _404.scss │ │ ├── _browser.scss │ │ ├── _color.scss │ │ ├── _document.scss │ │ ├── _frame.scss │ │ ├── _grid-list.scss │ │ ├── _header.scss │ │ ├── _icon.scss │ │ ├── _meta.scss │ │ ├── _navigation.scss │ │ ├── _pen.scss │ │ ├── _preview.scss │ │ ├── _prose.scss │ │ ├── _search.scss │ │ ├── _status.scss │ │ ├── _tokens.scss │ │ ├── _tree.scss │ │ └── _type-specimen.scss │ │ ├── helpers │ │ └── _text.scss │ │ ├── preview.scss │ │ ├── settings │ │ └── _settings.scss │ │ └── theme.scss ├── index.js ├── package.json └── views │ ├── layouts │ └── doc.nunj │ └── partials │ ├── head.nunj │ ├── header.nunj │ ├── navigation │ └── navigation.nunj │ ├── pen │ └── header.nunj │ └── scripts.nunj ├── webpack.docs.build.config.js ├── webpack.docs.static.config.js ├── webpack.entrypoints.js ├── webpack.package.build.config.js ├── webpack.package.static.config.js └── webpack.test.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | indent_style = space 12 | 13 | [*.py] 14 | indent_size = 4 15 | 16 | [*.js] 17 | indent_size = 4 18 | 19 | [*.json] 20 | indent_size = 4 21 | 22 | [*.css] 23 | indent_size = 4 24 | 25 | [*.less] 26 | indent_size = 4 27 | 28 | [*.scss] 29 | indent_size = 4 30 | 31 | [*.sh] 32 | indent_size = 4 33 | 34 | [*.html] 35 | indent_size = 2 36 | 37 | [*.njk] 38 | indent_size = 2 39 | 40 | [*.svg] 41 | indent_size = 2 42 | 43 | [*.yml] 44 | indent_size = 2 45 | 46 | [*.md] 47 | indent_size = 2 48 | 49 | [Jenkinsfile] 50 | indent_size = 4 51 | 52 | [*.groovy] 53 | indent_size = 4 54 | 55 | [package.json] 56 | indent_size = 2 57 | 58 | [Makefile] 59 | indent_style = tab 60 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Report an error you've discovered 4 | title: "" 5 | labels: 'Bug :beetle:' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Description 11 | 12 | Describe the issue that you're seeing. 13 | 14 | ### Steps to reproduce 15 | 16 | Clear steps describing how to reproduce the issue. Provide a URL or screenshot, if possible. 17 | 18 | ### Expected result 19 | 20 | What should happen? 21 | 22 | ### Actual result 23 | 24 | What happened. 25 | 26 | ### Environment 27 | 28 | What browser and operating system are you using? 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new_component_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New Component Request 3 | about: If you would like to add a component in Protocol, use this template 4 | title: "New Component Request" 5 | labels: "New Component Request" 6 | assignees: '' 7 | --- 8 | 9 | Please use this template to request a new component. 10 | If you're not sure whether a component already exists, 11 | go ahead and file the issue here, and the team will triage appropriately. 12 | 13 | Fill in as many sections as possible below. 14 | 15 | ### Please describe the use case(s) for this component 16 | 17 | What does the component do? In what contexts is it used. Be as specific as possible. 18 | 19 | ### Please provide any designs or previous implementations of the proposed component 20 | 21 | Add screenshots, mockups, code prototypes, etc. in this section. 22 | 23 | ## Please describe what this component does in the following conditions 24 | 25 | * When set in front of a dark background 26 | * When set in front of a light background 27 | * When viewed in a mobile/responsive viewport 28 | 29 | ### Please provide examples of this type of component in use in non-Mozilla web properties 30 | 31 | Add screenshots and links to web properties that use a similar component. 32 | (We ask for this because we want to make sure we are following industry conventions while building components) 33 | 34 | ### Is the development of this component a blocking dependency for other work? Please explain if so 35 | 36 | Generally speaking component definition should happen after a singleton instance has been developed, 37 | or if the Protocol team has come to a consensus on need. 38 | 39 | 40 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Describe what this change does. 4 | 5 | - [ ] I have documented this change in the design system. 6 | - [ ] I have recorded this change in `CHANGELOG.md`. 7 | 8 | ### Issue 9 | 10 | Add a link to a related GitHub issue if applicable. 11 | 12 | ### Testing 13 | 14 | Enter helpful notes for whoever code reviews this change. 15 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" 9 | directory: "/" 10 | schedule: 11 | interval: "monthly" 12 | open-pull-requests-limit: 10 13 | groups: 14 | frontend: 15 | dependency-type: production 16 | update-types: 17 | - "minor" 18 | - "patch" 19 | dev-dependencies: 20 | dependency-type: development 21 | update-types: 22 | - "minor" 23 | - "patch" 24 | labels: 25 | - dependencies 26 | 27 | -------------------------------------------------------------------------------- /.github/workflows/docs-prod.yml: -------------------------------------------------------------------------------- 1 | name: Publish docs 2 | 3 | on: 4 | release: 5 | types: 6 | - published 7 | 8 | permissions: 9 | contents: write 10 | 11 | jobs: 12 | publish-docs: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v4 16 | with: 17 | fetch-depth: 0 18 | - name: Push prod 19 | run: | 20 | git config user.name github-actions 21 | git config user.email github-actions@github.com 22 | git push origin ${GITHUB_SHA}:prod 23 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | on: 3 | push: 4 | branches: [ main ] 5 | pull_request: 6 | branches: [ main ] 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: "Install framebuffer (xvfb) and Chromium" 12 | run: | 13 | sudo apt-get update 14 | sudo apt-get install chromium-browser xvfb 15 | - uses: actions/checkout@v4 16 | - uses: actions/setup-node@v4 17 | with: 18 | node-version: 20 19 | - name: "Install dependencies and build NPM package" 20 | run: npm run build-package 21 | - name: "Run JS tests" 22 | run: xvfb-run npm test 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | tests/dist 4 | /package 5 | static/protocol 6 | theme/static 7 | .netlify 8 | .DS_Store 9 | .node-version 10 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | dist 2 | package 3 | static 4 | theme/static 5 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard-scss", 3 | "rules": { 4 | "declaration-empty-line-before": "never", 5 | "declaration-no-important": true, 6 | "color-function-notation": "legacy", 7 | "alpha-value-notation": "number", 8 | "property-no-vendor-prefix": null, 9 | "value-no-vendor-prefix": null, 10 | "at-rule-empty-line-before": null, 11 | "no-descending-specificity": null, 12 | "value-keyword-case": [ 13 | "lower", 14 | { 15 | "camelCaseSvgKeywords": true, 16 | "ignoreFunctions": ["local"] 17 | } 18 | ], 19 | "declaration-block-no-redundant-longhand-properties": [ 20 | true, 21 | { 22 | "ignoreShorthands": [ 23 | "grid-area", 24 | "grid-column", 25 | "grid-gap", 26 | "grid-row", 27 | "grid-template", 28 | "inset" 29 | ] 30 | } 31 | ], 32 | "function-url-no-scheme-relative": true, 33 | "max-nesting-depth": 5, 34 | "no-unknown-animations": true 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Community Participation Guidelines 2 | 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 4 | For more details, please read the 5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 6 | 7 | ## How to Report 8 | For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page. 9 | 10 | 16 | -------------------------------------------------------------------------------- /assets/fonts/Inter-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Inter-Bold.woff2 -------------------------------------------------------------------------------- /assets/fonts/Inter-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Inter-BoldItalic.woff2 -------------------------------------------------------------------------------- /assets/fonts/Inter-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Inter-Italic.woff2 -------------------------------------------------------------------------------- /assets/fonts/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Inter-Regular.woff2 -------------------------------------------------------------------------------- /assets/fonts/Metropolis-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Metropolis-Bold.woff -------------------------------------------------------------------------------- /assets/fonts/Metropolis-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Metropolis-Bold.woff2 -------------------------------------------------------------------------------- /assets/fonts/Metropolis-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Metropolis-Medium.woff -------------------------------------------------------------------------------- /assets/fonts/Metropolis-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/Metropolis-Medium.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-headline/MozillaHeadline-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-headline/MozillaHeadline-Regular.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-headline/MozillaHeadline-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-headline/MozillaHeadline-SemiBold.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-text/MozillaText-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-text/MozillaText-Bold.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-text/MozillaText-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-text/MozillaText-BoldItalic.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-text/MozillaText-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-text/MozillaText-Italic.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-text/MozillaText-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-text/MozillaText-Regular.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-text/MozillaText-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-text/MozillaText-SemiBold.woff2 -------------------------------------------------------------------------------- /assets/fonts/mozilla-text/MozillaText-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/protocol/cce368bbafd394f4f006afcf72d1fe92ac2f354e/assets/fonts/mozilla-text/MozillaText-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /assets/js/protocol/base.js: -------------------------------------------------------------------------------- 1 | /* This Source Code Form is subject to the terms of the Mozilla Public 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 | 5 | /** 6 | * This module is used to determine that JS is enabled in the browser, 7 | * and provides `.js` and `.no-js` styling hooks used in component CSS. 8 | * In order to avoid content flashing and repaints on page load, it is 9 | * recommended that `MazBase.init();` should be run in the , before 10 | * page CSS is parsed. 11 | */ 12 | 13 | const MzpBase = {}; 14 | 15 | MzpBase.init = () => { 16 | const doc = document.documentElement; 17 | 18 | // Add class to reflect javascript availability for CSS 19 | doc.className = doc.className.replace(/\bno-js\b/, 'js'); 20 | }; 21 | 22 | module.exports = MzpBase; 23 | -------------------------------------------------------------------------------- /assets/js/protocol/footer.js: -------------------------------------------------------------------------------- 1 | /* This Source Code Form is subject to the terms of the Mozilla Public 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 | 5 | const MzpFooter = {}; 6 | 7 | MzpFooter.init = () => { 8 | const footerHeadings = '.mzp-c-footer-sections .mzp-c-footer-heading'; 9 | 10 | // removes Details component if screen size is big 11 | function screenChange(mq) { 12 | if (mq.matches) { 13 | window.MzpDetails.init(footerHeadings); 14 | } else { 15 | window.MzpDetails.destroy(footerHeadings); 16 | } 17 | } 18 | 19 | // check we have global Supports and Details library 20 | if (typeof window.MzpSupports !== 'undefined' && typeof window.MzpDetails !== 'undefined') { 21 | 22 | // check browser supports matchMedia 23 | if (window.MzpSupports.matchMedia) { 24 | const _mqWide = matchMedia('(max-width: 479px)'); 25 | 26 | // initialize details if screen is small 27 | if (_mqWide.matches) { 28 | window.MzpDetails.init(footerHeadings); 29 | } 30 | 31 | if (window.matchMedia('all').addEventListener) { 32 | _mqWide.addEventListener('change', screenChange, false); 33 | } else if (window.matchMedia('all').addListener) { 34 | _mqWide.addListener(screenChange); 35 | } 36 | } 37 | } 38 | 39 | }; 40 | 41 | module.exports = MzpFooter; 42 | -------------------------------------------------------------------------------- /assets/js/protocol/sidemenu.js: -------------------------------------------------------------------------------- 1 | /* This Source Code Form is subject to the terms of the Mozilla Public 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 | 5 | const MzpSideMenu = {}; 6 | 7 | MzpSideMenu.init = () => { 8 | const menu = document.querySelector('.mzp-c-sidemenu'); 9 | const menuMain = document.querySelector('.mzp-c-sidemenu-main'); 10 | const menuToggle = document.querySelector('.mzp-js-toggle'); 11 | 12 | if (menu && menuMain && menuToggle) { 13 | 14 | // Make the menu more accessible 15 | menuToggle.setAttribute('tabindex', '0'); 16 | menuToggle.setAttribute('role', 'button'); 17 | menuMain.setAttribute('aria-expanded', 'false'); 18 | 19 | // Toggle the sidebar menu 20 | menuToggle.addEventListener('click', (e) => { 21 | e.preventDefault(); 22 | menu.classList.toggle('mzp-is-active'); 23 | 24 | const menuExpanded = menuMain.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'; 25 | menuMain.setAttribute('aria-expanded', menuExpanded); 26 | }, false); 27 | } 28 | }; 29 | 30 | module.exports = MzpSideMenu; 31 | -------------------------------------------------------------------------------- /assets/package/README.md: -------------------------------------------------------------------------------- 1 | # Protocol 2 | 3 | A modular design system for Mozilla websites. 4 | 5 | ## Installation 6 | 7 | Install package with NPM and add it to your dependencies: 8 | 9 | `npm install --save @mozilla-protocol/core` 10 | 11 | ## Information 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
Packagemozilla-protocol
DescriptionA modular design system for Mozilla websites.
Version21.1.0
ReleasesView all
30 | 31 | ## Contributing 32 | 33 | If you'd like to contribute, check out [documentation](https://github.com/mozilla/protocol#readme) and our list of open [issues](https://github.com/mozilla/protocol/issues). 34 | -------------------------------------------------------------------------------- /assets/package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mozilla-protocol/core", 3 | "version": "21.1.0", 4 | "description": "A design system for Mozilla's websites.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/mozilla/protocol.git" 8 | }, 9 | "keywords": [ 10 | "mozilla", 11 | "design system", 12 | "website", 13 | "css", 14 | "js" 15 | ], 16 | "author": "Mozilla", 17 | "license": "MPL-2.0", 18 | "bugs": { 19 | "url": "https://github.com/mozilla/protocol/issues" 20 | }, 21 | "homepage": "https://github.com/mozilla/protocol", 22 | "main": "protocol/css/protocol.css", 23 | "scripts": { 24 | "test": "echo \"Error: no test specified\" && exit 1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/_elements.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | // Reset first 6 | @use 'elements/reset'; 7 | 8 | // Sorted alphabetically 9 | @use 'elements/common'; 10 | @use 'elements/containers'; 11 | @use 'elements/details'; 12 | @use 'elements/document'; 13 | @use 'elements/forms'; 14 | @use 'elements/links'; 15 | @use 'elements/lists'; 16 | @use 'elements/quotes'; 17 | @use 'elements/tables'; 18 | @use 'elements/titles'; 19 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/_includes.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use 'includes/animations'; 6 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_common.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | // Basic styling for some common elements 8 | 9 | p, 10 | ul, 11 | ol, 12 | dl, 13 | table { 14 | margin: 0 0 1.25em; 15 | } 16 | 17 | code { 18 | font-size: inherit; 19 | } 20 | 21 | hr { 22 | border: 0 solid $color-marketing-gray-20; 23 | border-top-width: 4px; 24 | margin: $layout-md 0; 25 | 26 | @media #{$mq-lg} { 27 | margin: $layout-lg 0; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_details.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | .mzp-c-details, 8 | details { 9 | @include details; 10 | } 11 | 12 | summary, 13 | details .is-summary button, 14 | .mzp-c-details .is-summary button { 15 | @include summary; 16 | } 17 | 18 | // Override styling the native element when the polyfill is applied (issue #658) 19 | summary.is-summary { 20 | @include bidi(((padding-right, 0, padding-left, 0),)); 21 | 22 | &::before { 23 | display: none; 24 | } 25 | } 26 | 27 | details[open] summary::before, 28 | details .is-summary button[aria-expanded='true']::before, 29 | .mzp-c-details .is-summary button[aria-expanded='true']::before { 30 | @include summary-open; 31 | } 32 | 33 | summary { 34 | cursor: pointer; 35 | } 36 | 37 | summary::-webkit-details-marker { 38 | display: none; 39 | } 40 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_document.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | html { 8 | font-size: 100%; 9 | background: $color-white; 10 | } 11 | 12 | body { 13 | @include text-body-md; 14 | background: $background-color; 15 | color: $body-text-color; 16 | font-family: $body-font-family; 17 | line-height: $body-line-height; 18 | -moz-osx-font-smoothing: grayscale; 19 | -webkit-font-smoothing: antialiased; 20 | 21 | @supports (--css: variable) { 22 | background: var(--background-color); 23 | color: var(--body-text-color); 24 | font-family: var(--body-font-family); 25 | line-height: var(--body-line-height); 26 | } 27 | } 28 | 29 | // A few places use a class to hide elements. We should try to avoid that. 30 | .hidden { 31 | @include hidden; 32 | } 33 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_links.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | :link { 8 | color: $link-color; 9 | text-decoration: underline; 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | color: $link-color-hover; 15 | text-decoration: none; 16 | } 17 | 18 | &:active { 19 | background-color: rgba(0, 0, 0, 0.05); 20 | } 21 | 22 | @supports (--css: variables) { 23 | color: var(--link-color); 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: var(--link-color-hover); 29 | } 30 | } 31 | } 32 | 33 | :visited { 34 | color: $link-color-visited; 35 | 36 | &:hover, 37 | &:focus, 38 | &:active { 39 | color: $link-color-visited-hover; 40 | } 41 | 42 | @supports (--css: variables) { 43 | color: var(--link-color-visited); 44 | 45 | &:hover, 46 | &:focus, 47 | &:active { 48 | color: var(--link-color-visited-hover); 49 | } 50 | } 51 | } 52 | 53 | .mzp-t-dark { 54 | @include light-links; 55 | } 56 | 57 | .mzp-c-cta-link { 58 | font-family: $button-font-family; 59 | font-weight: bold; 60 | 61 | @supports (--css: variables) { 62 | font-family: var(--button-font-family); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_quotes.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | blockquote { 8 | @include bidi(((border-width, 0 0 0 5px, 0 5px 0 0),)); 9 | @include text-title-sm; 10 | border-color: $color-marketing-gray-20; 11 | border-style: solid; 12 | color: $title-text-color; 13 | font-family: $title-font-family; 14 | font-weight: bold; 15 | margin: $spacing-lg auto; 16 | padding: $spacing-sm $spacing-lg; 17 | 18 | cite { 19 | @include text-title-xs; 20 | color: $body-text-color-secondary; 21 | 22 | &::before { 23 | content: '— '; 24 | } 25 | } 26 | 27 | & > :last-child { 28 | margin-bottom: 0; 29 | } 30 | 31 | @supports (--css: variables) { 32 | color: var(--title-text-color); 33 | font-family: var(--title-font-family); 34 | 35 | cite { 36 | color: var(--body-text-color-secondary); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_reset.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | // Set new HTML5 elements to block or inline-block for older browsers 6 | article, 7 | aside, 8 | details, 9 | figcaption, 10 | figure, 11 | footer, 12 | header, 13 | hgroup, 14 | main, 15 | nav, 16 | section, 17 | summary { 18 | display: block; 19 | } 20 | 21 | audio, 22 | video, 23 | canvas { 24 | display: inline-block; 25 | } 26 | 27 | html, 28 | body, 29 | h1, 30 | h2, 31 | h3, 32 | h4, 33 | h5, 34 | h6, 35 | hr, 36 | p, 37 | pre, 38 | blockquote, 39 | figure, 40 | figcaption, 41 | table, 42 | ul, 43 | ol, 44 | li, 45 | dl, 46 | dt, 47 | dd { 48 | margin: 0; 49 | padding: 0; 50 | } 51 | 52 | blockquote::before, 53 | blockquote::after, 54 | q::before, 55 | q::after { 56 | content: ''; 57 | } 58 | 59 | blockquote, 60 | q { 61 | quotes: '' ''; 62 | } 63 | 64 | table { 65 | border-collapse: collapse; 66 | border-spacing: 0; 67 | } 68 | 69 | iframe, 70 | a img { 71 | border: 0; 72 | } 73 | 74 | img, 75 | video, 76 | object, 77 | embed { 78 | -ms-interpolation-mode: bicubic; 79 | height: auto; 80 | max-width: 100%; 81 | } 82 | 83 | [hidden] { 84 | display: none; 85 | } 86 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_tables.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | // We so rarely use tables that it's best not to give them any 8 | // base styling and instead use a modifier class for those few 9 | // times we need to display tabular data. 10 | .mzp-u-data-table { 11 | border-collapse: collapse; 12 | border-spacing: 0; 13 | 14 | caption { 15 | @include bidi(((text-align, left, right),)); 16 | margin-bottom: 0.25em; 17 | width: 100%; 18 | } 19 | 20 | th, 21 | td { 22 | @include bidi(((text-align, left, right),)); 23 | border-top: 1px solid rgba(0, 0, 0, 0.2); 24 | padding: 0.5em 10px; 25 | text-align: left; 26 | } 27 | 28 | thead th, 29 | thead td { 30 | border-top: 0; 31 | padding-top: 0; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/elements/_titles.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | // Base styles for heading elements 8 | 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6 { 15 | $default-font-weight: bold; 16 | font-family: $title-font-family; 17 | color: $title-text-color; 18 | font-weight: $default-font-weight; 19 | text-wrap: balance; 20 | margin: 0 0 0.5em; 21 | 22 | .mzp-t-dark & { 23 | color: $title-text-color-inverse; 24 | } 25 | 26 | @supports (--css: variables) { 27 | font-family: var(--title-font-family); 28 | font-variant-ligatures: var(--title-font-ligatures); 29 | font-weight: var(--title-font-weight, #{$default-font-weight}); 30 | letter-spacing: var(--title-letter-spacing); 31 | color: var(--title-text-color); 32 | 33 | .mzp-t-dark & { 34 | color: var(--title-text-color-inverse); 35 | } 36 | } 37 | } 38 | 39 | // Type scale mixins can be found in includes/mixins/_typography.scss 40 | // Sizes are defined in includes/_themes.scss 41 | h1 { 42 | @include text-title-lg; 43 | } 44 | 45 | h2 { 46 | @include text-title-md; 47 | } 48 | 49 | h3 { 50 | @include text-title-sm; 51 | } 52 | 53 | h4 { 54 | @include text-title-xs; 55 | } 56 | 57 | h5 { 58 | @include text-title-2xs; 59 | } 60 | 61 | h6 { 62 | @include text-title-3xs; 63 | } 64 | -------------------------------------------------------------------------------- /assets/sass/protocol/base/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../../includes/lib' as *; 6 | 7 | // Theme classes for background colors 8 | 9 | .mzp-t-background-secondary { 10 | background-color: $background-color-secondary; 11 | 12 | @supports (--css: variables) { 13 | background-color: var(--background-color-secondary); 14 | } 15 | } 16 | 17 | .mzp-t-background-tertiary { 18 | background-color: $background-color-tertiary; 19 | 20 | @supports (--css: variables) { 21 | background-color: var(--background-color-tertiary); 22 | } 23 | } 24 | 25 | .mzp-t-dark { 26 | background-color: $background-color-inverse; 27 | color: $body-text-color-inverse; 28 | 29 | @supports (--css: variables) { 30 | background-color: var(--background-color-inverse); 31 | color: var(--body-text-color-inverse); 32 | } 33 | } 34 | 35 | .mzp-t-dark.mzp-t-background-secondary, 36 | .mzp-t-dark .mzp-t-background-secondary { 37 | background-color: $background-color-secondary-inverse; 38 | 39 | @supports (--css: variables) { 40 | background-color: var(--background-color-secondary-inverse); 41 | } 42 | } 43 | 44 | .mzp-t-dark.mzp-t-background-tertiary, 45 | .mzp-t-dark .mzp-t-background-tertiary { 46 | background-color: $background-color-tertiary-inverse; 47 | 48 | @supports (--css: variables) { 49 | background-color: var(--background-color-tertiary-inverse); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /assets/sass/protocol/components/_article.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../includes/lib' as *; 6 | 7 | .mzp-c-article { 8 | width: $content-md; 9 | max-width: 100%; 10 | 11 | @media #{$mq-md} { 12 | // Float left when sidebar is on the left 13 | .mzp-l-sidebar-left .mzp-l-main & { 14 | @include bidi(((float, left, right),)); 15 | } 16 | 17 | // Float right when sidebar is on the right 18 | .mzp-l-sidebar-right .mzp-l-main & { 19 | @include bidi(((float, right, left),)); 20 | } 21 | } 22 | } 23 | 24 | .mzp-c-article-title { 25 | @include text-title-lg; 26 | } 27 | 28 | .mzp-c-article-intro { 29 | @include text-body-lg; 30 | } 31 | -------------------------------------------------------------------------------- /assets/sass/protocol/components/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../includes/lib' as *; 6 | 7 | .mzp-c-breadcrumb { 8 | background-color: $background-color-secondary; 9 | 10 | .mzp-c-breadcrumb-list { 11 | margin-bottom: 0; 12 | padding: $spacing-sm $spacing-md; 13 | 14 | .mzp-c-breadcrumb-item { 15 | display: inline-block; 16 | 17 | &:last-child { 18 | font-weight: bold; 19 | } 20 | 21 | + .mzp-c-breadcrumb-item { 22 | &::before { 23 | @include bidi(((content, '\2192', '\2190'),)); 24 | font-weight: normal; 25 | margin: 0 0.25em; 26 | } 27 | } 28 | 29 | a { 30 | text-decoration: none; 31 | } 32 | } 33 | 34 | @media #{$mq-md} { 35 | padding: $spacing-sm $layout-sm; 36 | } 37 | 38 | @media #{$mq-lg} { 39 | padding: $spacing-sm $layout-xl - $spacing-md; 40 | } 41 | } 42 | 43 | &.mzp-t-dark { 44 | background-color: $background-color-secondary-inverse; 45 | } 46 | 47 | @supports (--css: variables) { 48 | background-color: var(--background-color-secondary); 49 | 50 | &.mzp-t-dark { 51 | background-color: var(--background-color-secondary-inverse); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /assets/sass/protocol/components/_emphasis-box.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../includes/lib' as *; 6 | 7 | // * -------------------------------------------------------------------------- */ 8 | // Base emphasis Box class 9 | .mzp-c-emphasis-box { 10 | background-color: $background-color; 11 | border-radius: $border-radius-md; 12 | box-shadow: $box-shadow-sm; 13 | margin: $spacing-md; 14 | padding: $spacing-xl; 15 | 16 | &.mzp-t-dark { 17 | background-color: $background-color-inverse; 18 | color: $body-text-color-inverse; 19 | } 20 | 21 | @supports (--css: variables) { 22 | background-color: var(--background-color); 23 | 24 | &.mzp-t-dark { 25 | background-color: var(--background-color-inverse); 26 | color: var(--body-text-color-inverse); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /assets/sass/protocol/components/_inline-list.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../includes/lib' as *; 6 | 7 | .mzp-c-inline-list { 8 | margin: $layout-md 0 0 ($layout-md * -1); 9 | 10 | li { 11 | display: inline-block; 12 | margin-bottom: $layout-xs; 13 | margin-left: $layout-md; // this technique works for RTL without needing bidi styles 14 | white-space: nowrap; 15 | 16 | &:last-child { 17 | // last item gets the bottom margin we want the entire list to have 18 | margin-bottom: $layout-md; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /assets/sass/protocol/components/_language-switcher.scss: -------------------------------------------------------------------------------- 1 | // This Source Code Form is subject to the terms of the Mozilla Public 2 | // License, v. 2.0. If a copy of the MPL was not distributed with this 3 | // file, You can obtain one at http://mozilla.org/MPL/2.0/. 4 | 5 | @use '../includes/lib' as *; 6 | 7 | .mzp-c-language-switcher { 8 | color: inherit; 9 | font-weight: bold; 10 | 11 | label, 12 | .mzp-c-language-switcher-link { 13 | @include bidi(((margin, 0 $spacing-lg $spacing-sm 0, 0 0 $spacing-sm $spacing-lg),)); 14 | @include text-body-sm; 15 | display: inline-block; 16 | } 17 | 18 | // hide the