diff --git a/CHANGELOG.md b/CHANGELOG.md index e03b1f9584..efad860bb7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,16 @@ # Mayflower Release Notes All notable changes to this project will be documented in this file. +## 15.1.0 (2/17/2026) +### Fixed +- (Patternlab) [ContactItem] DP-44415: Fix accessibility issue where aria-describedby attribute referenced non-existent IDs on address directions links. The linkContext ID is now only generated and passed to decorative-link when a label element exists, preventing invalid aria-describedby attributes. +- (Patternlab) [PersonCard] DP-44560: Conditionally render bio link section only when person.bio is defined and has a valid href, preventing empty anchor tags from appearing in the rendered HTML. +- (Patternlab) [CampaignVideo] DP-44710: Fix heading level skip accessibility issue on promo page section videos without titles by using H2 instead of H3 to maintain proper heading hierarchy + +### Added +- (Assets) [Loader] DP-44742: Add loader animation lottie file to assets. +- (Tokens) [undefined] DP-44969: Add css variables for tokens to Mayflower repo + ## 15.0.0 (1/23/2026) ### Changed - (Patternlab,React,Core) [Icons] DP-39285: Swap out all icons to a new set of shared icons from the new DS library. Each icon now offer a regular and bold variant, and is standardized on width, height, color and aria attributes. Some existing icon names are changed to match the new system and naming conventions. Please refer to the Icon documentation for the updated list of icon names. (#2019) diff --git a/README.md b/README.md index 8a3cdbfcba..385d805695 100644 --- a/README.md +++ b/README.md @@ -120,5 +120,4 @@ For efficiency purposes, we allow CircleCI to bypass certain jobs based on the p | `core/` | This will bypass Patternlab build, deploy and tests | This prefix should only be used if all your changes are in the [core](/packages/core) folder | `react/` | This will bypass Patternlab build, deploy and tests | This prefix should only be used if all your changes are in the [react](/packages/react) folder, and nothing in the shared [assets](/packages/assets) folder that could potentially impact the build of the Patternlab implementation | | `pattern/` | This will bypass React Storybook build and tests | This prefix should only be used if all your changes are in the [patternlab](/packages/patternlab) folder, and nothing in the shared [assets](/packages/assets) folder that could potentially impact the build of the React implementation | -| `site/` | This will bypass all React and Patternlab and assets build, deploy and tests. | Only use this prefix if all the changes are in the [site](/packages/site) folder. e.g. Content changes to the homepage site that won't impact React, Patternlab and shared assets. | -| `docs` | This will bypass all React and Patternlab and assets build, deploy and tests, as well as Mayflower site build and tests. | Only use this prefix if all the changes are in the [docs](/docs) folder. e.g. Documentation changes for the repo that won't impact React, Patternlab, shared assets and the homepage static site. | +| `docs` | This will bypass all React and Patternlab and assets build, deploy and tests, as well as Mayflower site build and tests. | Only use this prefix if all the changes are in the [docs](/docs) folder. e.g. Documentation changes for the repo that won't impact React, Patternlab, shared assets and the homepage static site. | \ No newline at end of file diff --git a/packages/assets/package.json b/packages/assets/package.json index 9463bbbe14..badd593b1a 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -1,6 +1,6 @@ { "name": "@massds/mayflower-assets", - "version": "15.0.0", + "version": "15.1.0", "description": "Mayflower Assets", "main": "index.js", "files": [ diff --git a/packages/assets/static/images/lottie/loader.json b/packages/assets/static/images/lottie/loader.json new file mode 100644 index 0000000000..5453b8d1e4 --- /dev/null +++ b/packages/assets/static/images/lottie/loader.json @@ -0,0 +1 @@ +{"v":"5.12.1","fr":60,"ip":0,"op":60,"w":600,"h":600,"nm":"Loader 01 - DEFAULT","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,304,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[85,85,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[539.367,539.367],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":30,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[360]},{"t":59}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.243137254902,0.580392156863,0.811764705882,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":90,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.316,-4.316],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,304,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[85,85,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[539.367,539.367],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.729411764706,0.729411764706,0.733333333333,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":90,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.316,-4.316],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"ct":1,"bm":0}],"markers":[],"props":{}} \ No newline at end of file diff --git a/packages/core/.env b/packages/core/.env index 425f0fab72..09dc15075d 100644 --- a/packages/core/.env +++ b/packages/core/.env @@ -1,4 +1,4 @@ -STORYBOOK_VERSION=15.0.0 +STORYBOOK_VERSION=15.1.0 STORYBOOK_CDN=https://unpkg.com/ STORYBOOK_PKG=@massds/mayflower-assets STORYBOOK_CDN_PATH=$STORYBOOK_CDN$STORYBOOK_PKG@$STORYBOOK_VERSION diff --git a/packages/core/package.json b/packages/core/package.json index 0e87a9a8e1..32335e1e6b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "mayflower-core", - "version": "15.0.0", + "version": "15.1.0", "description": "", "main": "index.js", "scripts": { @@ -50,7 +50,7 @@ "bootstrap": "^4.6.0" }, "dependencies": { - "@massds/mayflower-assets": "^15.0.0", - "@massds/mayflower-react": "^15.0.0" + "@massds/mayflower-assets": "^15.1.0", + "@massds/mayflower-react": "^15.1.0" } } diff --git a/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_0_phone.png b/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_0_phone.png index b8da51d65f..48fa6dc477 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_0_phone.png and b/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_0_phone.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_1_tablet.png index b22c3dd059..e3286475c2 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_page_detail-for-service-howto-location_0_document_1_tablet.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png index 5237e269d4..6ff85ca7a3 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png index b85e487188..38c3974b6f 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png b/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png index a7a4df970c..8d495ae765 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png and b/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png index c06a69c078..892e3fdf69 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_0_phone.png b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_0_phone.png index 50c7599c90..cb8ec41515 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_0_phone.png and b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_0_phone.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_1_tablet.png index 99443fe2ac..8afe7d9e26 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-flexible-link-groups_0_document_1_tablet.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_0_phone.png b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_0_phone.png index 5ac0bbc161..2516a05652 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_0_phone.png and b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_0_phone.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_1_tablet.png index 814adff577..7bdabe58b0 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services-two-column_0_document_1_tablet.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_0_phone.png b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_0_phone.png index ceed555c3d..f577abca46 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_0_phone.png and b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_0_phone.png differ diff --git a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_1_tablet.png b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_1_tablet.png index 620e17798a..b11529f299 100644 Binary files a/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_1_tablet.png and b/packages/patternlab/backstopjs/reference/regression_template_01-content-types-services_0_document_1_tablet.png differ diff --git a/packages/patternlab/styleguide/package.json b/packages/patternlab/styleguide/package.json index d896bd7346..b0ff263960 100644 --- a/packages/patternlab/styleguide/package.json +++ b/packages/patternlab/styleguide/package.json @@ -5,7 +5,7 @@ "node": ">6.9.0", "npm": ">5.0.0" }, - "version": "15.0.0", + "version": "15.1.0", "author": "Massachusetts Digital Services (MDS)", "repository": { "type": "git", @@ -24,7 +24,7 @@ }, "homepage": "https://github.com/massgov/mayflower#readme", "devDependencies": { - "@massds/mayflower-assets": "^15.0.0", + "@massds/mayflower-assets": "^15.1.0", "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "babelify": "^8.0.0", diff --git a/packages/patternlab/styleguide/source/_patterns/02-molecules/contact/contact-item.twig b/packages/patternlab/styleguide/source/_patterns/02-molecules/contact/contact-item.twig index b9e3f2c64e..a3e9831375 100644 --- a/packages/patternlab/styleguide/source/_patterns/02-molecules/contact/contact-item.twig +++ b/packages/patternlab/styleguide/source/_patterns/02-molecules/contact/contact-item.twig @@ -9,7 +9,6 @@ {% else %} {% set link = item.link %} {% endif %} - {# if using the older 3.4.1 data model #} {% if item.value %} {# update the older code's data to match the new version #} @@ -18,7 +17,7 @@ {% set address = item.address %} {% endif %} -{% set linkContext = "linkContext-" ~ random() %} +{% set linkContext = item.label ? "linkContext-" ~ random() : "" %}
{% if item.label %} {{item.label}} @@ -54,12 +53,12 @@ {# Address - RTE version of value and look for directions link #} {% elseif item.type == "address" %}
- {{ address|nl2br }} + {{ address|nl2br|replace({'
': ''})|raw }}
{% if link.href %}
{% set decorativeLink = link %} - {% set decorativeLink = decorativeLink|merge({'context': linkContext}) %} + {% if linkContext %}{% set decorativeLink = decorativeLink|merge({'context': linkContext}) %}{% endif %} {% include "@atoms/decorative-link.twig" %}
{% endif %} diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-author/person-card.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-author/person-card.twig index 0a646c4e8d..fb35d9ac27 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-author/person-card.twig +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-author/person-card.twig @@ -16,10 +16,12 @@ {% include "@atoms/04-headings/column-heading.twig" %}
+ {% if person.bio is defined and person.bio is not same as(false) and person.bio.href|default('') is not empty %}
{% include "@atoms/divider.twig" %} {% set link = person.bio %} {% include "@atoms/11-text/link.twig" %}
+ {% endif %} \ No newline at end of file diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-video.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-video.twig index 4a9b09879b..18ec09cd88 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-video.twig +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/campaign-video.twig @@ -23,7 +23,13 @@
{% set video = campaignVideo.video %} - {% set videoHeadingLevel = headingLevel + 1 %} + {# For section videos without a title, use H2 (section level) instead of H3 to maintain heading hierarchy #} + {# This prevents heading level skips while addressing the concern about unnecessary H3 headings #} + {% if not campaignVideo.isHeader and not campaignVideo.title %} + {% set videoHeadingLevel = headingLevel %} + {% else %} + {% set videoHeadingLevel = headingLevel + 1 %} + {% endif %} {% set video = video|merge({"headingLevel": videoHeadingLevel}) %} {% include "@atoms/09-media/video.twig" %}
diff --git a/packages/react/package.json b/packages/react/package.json index ca1c025d85..61b73d25a0 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -2,7 +2,7 @@ "name": "@massds/mayflower-react", "description": "React versions of Mayflower design system UI components", "author": "Massachusetts Digital Services (MDS)", - "version": "15.0.0", + "version": "15.1.0", "main": "./dist/index.js", "module": "./dist/index.mjs", "sideEffects": [ @@ -57,7 +57,7 @@ "html-react-parser": "~1.4.14" }, "peerDependencies": { - "@massds/mayflower-assets": "^15.0.0", + "@massds/mayflower-assets": "^15.1.0", "react": "^16.13.1 || ^17 || ^18", "react-dom": "^16.13.1 || ^17 || ^18" }, @@ -73,7 +73,7 @@ "@babel/plugin-transform-runtime": "^7.10.1", "@babel/preset-env": "^7.10.1", "@babel/preset-react": "^7.10.1", - "@massds/mayflower-assets": "^15.0.0", + "@massds/mayflower-assets": "^15.1.0", "@storybook/addon-a11y": "6.0.21", "@storybook/addon-actions": "6.0.21", "@storybook/addon-controls": "6.0.21", diff --git a/packages/site/src/pages/error.scss b/packages/site/src/pages/error.scss deleted file mode 100644 index c802fa2397..0000000000 --- a/packages/site/src/pages/error.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '../styles/globe' as *; -@use '01-atoms/site-logo'; -@use '01-atoms/button-search'; -@use '01-atoms/input-typeahead'; -@use '04-templates/narrow-template'; -@use '03-organisms/error-page'; - -.ma__narrow-template__header { - - .ma__site-logo { - - a { - justify-content: center; - } - } -} diff --git a/packages/site/src/pages/index.scss b/packages/site/src/pages/index.scss deleted file mode 100644 index 6eb161a36a..0000000000 --- a/packages/site/src/pages/index.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use "../styles/globe" as *; -@use "03-organisms/illustrated-header"; -@use "03-organisms/page-header"; -@use "01-atoms/publish-state"; -@use "01-atoms/button-with-icon"; -@use "01-atoms/button-search"; -@use "03-organisms/gen-teaser"; -@use "01-atoms/decorative-link"; -@use "01-atoms/email"; -@use "01-atoms/image"; -@use "01-atoms/event-time"; -@use "01-atoms/phone-number"; -@use "01-atoms/address"; -@use "01-atoms/input-typeahead"; -@use "02-molecules/tabs"; -@use "02-molecules/accordion-item"; -@use "02-molecules/callout-link"; -@use "SectionLinks"; - - -.ma__container { - - @include ma-container(); - - margin-top: 0px; -} - -.ma__page-header__content { - padding-bottom: 2rem; - padding-bottom: none; -} - -.ma__illustrated-header { - margin: 0; - - .ma__button-icon--secondary:hover { - border-color: white !important; - } -} - -.ma__button-group { - margin-top: 1rem; - display: flex; - flex-direction: column; - text-align: center; - & > * ~ * { - margin: 1rem 0 0 0; - } - - @media($bp-x-small-min) { - - flex-direction: row; - & > * ~ * { - margin: 0 0 0 1rem; - } - } -} - -.ma__search--tabs { - background-color: var(--mf-c-gray-lightest); -} - -.ma__gen-teaser__image { - overflow: hidden; - border-color: var(--mf-c-gray-lighter); -} - -.ma__section-wrapper h2.ma__gen-teaser__title { - margin-bottom: 0; -} - -.ma__section-links__item + .ma__section-links__item { - margin-top: .5em; -} - -// Match row height -.ma__row--three-up { - align-items: stretch; - - .ma__section-links { - height: 100%; - } -} - -.ma__footer-slim__info { - margin-left: .5rem; -} diff --git a/packages/site/src/styles/_layout.scss b/packages/site/src/styles/_layout.scss deleted file mode 100644 index f0a9cab084..0000000000 --- a/packages/site/src/styles/_layout.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use 'bootstrap-grid'; - -@use "globe"; - -@use "00-base/layout"; - -@use "00-base/fonts"; -@use "00-base/fonts-styles"; - -@use "00-base/elements"; - -@use "04-templates/general"; -@use "08-print/print"; -@use "03-organisms/header"; -@use "03-organisms/header-slim"; -@use "03-organisms/header-hamburger"; -@use "01-atoms/site-logo"; -@use "01-atoms/image"; -@use "03-organisms/footer-slim"; -@use "01-atoms/phone-number"; diff --git a/packages/starters/formstack/mayflower-theme-standalone-v4.css b/packages/starters/formstack/mayflower-theme-standalone-v4.css deleted file mode 100644 index ffc14e3bb5..0000000000 --- a/packages/starters/formstack/mayflower-theme-standalone-v4.css +++ /dev/null @@ -1,351 +0,0 @@ -/* layout */ -:root { - font-size: 13.33px; -} - -.fsBody { - background-color: #f2f2f2; - color: #141414; -} - -.fsBody .fsForm, .fsBody div[data-testid="welcome-message-content"] { - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - font-size: 1.375rem; - line-height: 1.5; - float: none; - margin: 0 auto; - max-width: 50rem; -} - -/* Headings */ -.fsBody .fsSectionHeader { - background-color: transparent; - padding: 0; - margin-bottom: 20px; -} - -.fsBody .fsSectionHeader .fsSectionHeading { - text-align: left; - position: relative; - margin-top: 2.5rem; - padding-bottom: 15px; - color: #535353; - font-weight: 700; - font-size: 2.25rem; - line-height: 1.25; -} - -.fsBody .fsSectionHeader .fsSectionHeading:after { - content: ""; - height: 3px; - position: absolute; - bottom: 0; - left: 0.075em; - width: 1.85em; - background-color: rgb(67, 149, 111); - background-color: rgba(67, 149, 111, 0.5); - -webkit-transform: skew(-30deg); - -moz-transform: skew(-30deg); - -ms-transform: skew(-30deg); - -o-transform: skew(-30deg); - transform: skew(-30deg); -} - -/* Buttons */ -/** (file upload) **/ -.fsBody .fsForm input[type="button"] { - padding: 10px; - width: auto; -} - -.fsBody .fsForm input[type="button"][data-testid="remove-button"] { - background-color: #535353; -} -/** No file chosen text **/ -.fxrYEt { - font-size: 1.25rem; -} - -/** (save incomplete) **/ -.fsBody .fsForm button.fsSaveIncomplete { - font-weight: bold; - color:#fff; - background-color: #535353; -} - -/* Links */ -.fsBody .fsForm a { - color: #14558F; - font-weight: 600; - /* Long HTML force breaks */ - word-wrap: break-word; -} - -/* Labels */ -.fsBody .fsForm .fsLabel { - font-weight: 500; - margin-bottom: 0.5rem; - display: block; - font-size: 22px; - font-size: 1.375rem; - line-height: 1.5; - color: #141414; -} - -/** Required **/ -.fsRequiredMarker { - font-size: 1rem; - color: #CD0D0D; -} - -/** Validation **/ -.fsValidationError > span { - display: flex; - align-items: center; -} - -.fsValidationError > span > div:last-child { - margin-left: 0; - width: calc(100% - 20px);/* prevent multi-line error message cuts off the icon */ -} - -/* Inputs */ -.fsBody .fsForm input:not([type='button']), .fsBody .fsForm select, .fsBody .fsForm textarea { - color: #141414; -} - -.fsBody .fsForm input::placeholder { - color: #535353; -} - - -/* Subfields */ -/** Safari misalign other input box on mobile **/ -.krREGe.fsSubField { - flex-basis: auto; -} - -/** labels **/ -.fsSubField > label { - color: #141414; -} - - -/* Radios, checkboxes */ - -.fsBody .fsForm label[class^="StyledOptionLabel-"] { - font-size: 22px; - font-size: 1.375rem; - line-height: 1.5; - position: relative; - margin-bottom: 0.25rem; - align-items: baseline; -} - - -label[class^="StyledOptionLabel-"] > input { - display: flex; - align-items: center; - width: unset; -} - - -label[class^="StyledOptionLabel-"] > input:before { - width: 18px; - height: 18px; - margin-right: 0.25rem; - outline: transparent solid 2px; - border: 2px solid #535353; -} - -label[class^="StyledOptionLabel-"] > input[type="checkbox"]:checked::before { - background-color: #14558F; -} - -label[class^="StyledOptionLabel-"] > input[type="radio"]:checked::before { - border-width: thick; - border-color: #14558F; - background-color: #fff; -} - -/* text input, select, text area */ -.fsForm input, .fsForm select, .fsForm textarea { - font-size: 1.375rem; - line-height: 1.25; - height: unset; -} - -/* Datepicker */ -.MuiTextField-root { - border: 1px solid #dcdcdc; -} - -input.MuiInputBase-input::placeholder { - opacity: 1; -} - -/** Datepicker Calendar **/ -.MuiPickersCalendarHeader-label { - font-size: 1.25rem; - font-weight: 600; -} - -.MuiPaper-root { - color: #141414; -} - -.MuiPickersYear-yearButton { - font-size: 1.125rem; -} - -.MuiButton-root { - font-size: 1rem; - font-weight: 600; - background-color: #14558F; - color: white; -} - -.MuiDayCalendar-weekDayLabel { - font-size: 1rem; -} - -.MuiPickersDay-dayWithMargin { - color: #141414; -} - -/* Time picker */ -button.MuiPickersToolbar-root { - background: white; -} -.ipjwSe.MuiPickersToolbarText-root, .xAbeN.MuiPickersToolbarText-root { - color: #141414; -} - -.ipjwSe.MuiPickersToolbarText-root.Mui-selected { - /* color: rgb(20, 85, 143) !important; */ - color: rgb(20, 85, 143); - font-weight: 600; -} - -.xAbeN.MuiPickersToolbarText-root.Mui-selected { - color: #fff; - background-color: rgb(20, 85, 143); - padding: 2px 4px; - font-weight: 600; -} - -.MuiTypography-root.MuiTypography-overline { - font-size: 1rem; -} - -/** desktop ok button **/ -.MuiButton-textPrimary:hover { - background-color: rgba(20, 85, 143, 0.8); -} - -/* Number currency */ -/** Currency $ sign span **/ -.jjRdiv { - font-size: 1.375rem; - width: unset; -} -.ma__input-number > input { - width: 100%; -} -.ma__input-number { - min-width: 12rem; -} - - -/* Matrix */ -.fsBody .fsForm table { - color: #141414; -} -td.column.fsMatrixCol2 { - background: white; -} -.DWbWP::before { - height: 16px; - width: 16px; - border-width: 2px; - border-color: #535353; -} - - -/* Submit */ -.fsSubmit { - margin: 0; -} - -.fsSubmit .fsSubmitButton { - margin: 0; -} - -.fsSubmitButton:hover { - background-color: rgba(20, 85, 143, 0.75); - border-color: transparent; -} - -/* Progress Bar */ -div[class^="StyledProgressIndicatorBar-"] { - background-color: #DCDCDC; -} - -/* Next Prev buttons */ -.fsNextButton, .fsPreviousButton { - margin-bottom: 1rem; -} - -/* Welcome Message */ -div[data-testid="welcome-message-container"] { - float: none; - margin: 0 auto; - max-width: 50rem; - text-align: center; -} - -div[data-testid="welcome-message-content"] { - padding: 0; - margin: 0; -} - -div[data-testid="welcome-message-content"] > div { - font-size: 1.5rem; - color: #141414; -} - -/* Success Message (formstack domain) */ -html.wf-active { - font-size: calc(16px / 1.2); -} - -.body-hosted-form > .fsForm { - width: 100%; - max-width: unset; - background-color: #f2f2f2; -} - -.body-hosted-form > .fsForm > .fsPage { - max-width: 50rem; - padding-top: 20px; - margin: 0 auto; - color:#141414; - background-color: #fff; -} - -.body-hosted-form > .fsForm > .fsPage p, -.body-hosted-form > .fsForm > .fsPage ul { - text-align: left; -} - -.body-hosted-form > .fsForm > .fsPage a { - color:#14558F; -} - -#fsSubmissionCheckmark { - display: none; -} - -#fsSubmissionCheckmark ~ .fsSectionText { - text-align: left; -} \ No newline at end of file diff --git a/packages/starters/formstack/mayflower-theme-v4.css b/packages/starters/formstack/mayflower-theme-v4.css deleted file mode 100644 index cb7d53a06a..0000000000 --- a/packages/starters/formstack/mayflower-theme-v4.css +++ /dev/null @@ -1,311 +0,0 @@ -/* layout */ -.fsBody > div { - padding: 0 0 0 3px; -} - -.fsBody .fsForm { - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - font-size: 1.125rem; - line-height: 1.5; - margin: 0; - /* prevent highlight left outline cutoff */ - padding-left: 2px; - max-width: 50rem; - overflow-x: hidden; -} - -/* prevent overflow-x cutoff */ -.fsPage { - width: calc(100%-2px); -} -/* disabled 4-28-2025 see EI or JG -.fsSection { - display: block; -} -*/ - -/** prevent horizontal scrolling **/ -div[class^="InnerFormBody"] { - overflow-x: hidden; -} - -/* Headings */ -.fsBody .fsSectionHeader { - background-color: transparent; - padding: 0; - margin-bottom: 20px; -} - -.fsBody .fsSectionHeader .fsSectionHeading { - text-align: left; - position: relative; - padding-bottom: 15px; - color: #535353; - font-weight: 700; - font-size: 2.5rem; - line-height: 1.07; -} - -.fsBody .fsSectionHeader .fsSectionHeading:after { - content: ""; - height: 3px; - position: absolute; - bottom: 0; - left: 0.075em; - width: 1.85em; - background-color: rgb(67, 149, 111); - background-color: rgba(67, 149, 111, 0.5); - -webkit-transform: skew(-30deg); - -moz-transform: skew(-30deg); - -ms-transform: skew(-30deg); - -o-transform: skew(-30deg); - transform: skew(-30deg); -} - -/* Buttons (save incomplete) */ -.fsBody .fsForm button { - font-weight: bold; -} - -/* Labels */ -.fsBody .fsForm .fsLabel { - font-weight: 500; - margin-bottom: 0.5rem; - display: block; - font-size: 22px; - font-size: 1.125rem; - line-height: 1.5; - color: #141414; -} - -/** Required **/ -.fsRequiredMarker { - font-size: 0.85rem; - color: #CD0D0D; -} - -/** Validation **/ -.fsValidationError > span { - display: flex; - align-items: center; -} - -.fsValidationError > span > div:last-child { - margin-left: 0; - width: calc(100% - 20px);/* prevent multi-line error message cuts off the icon */ -} - -/* Inputs */ -.fsBody .fsForm input:not([type='button']), .fsBody .fsForm select, .fsBody .fsForm textarea { - color: #141414; -} - -.fsBody .fsForm input::placeholder { - color: #535353; -} - - -/* Subfields */ -/** Safari misalign other input box on mobile **/ -.krREGe.fsSubField { - flex-basis: auto; -} - -/** labels **/ -.fsSubField > label { - color: #141414; -} - - -/* Radios, checkboxes */ - -.fsBody .fsForm label[class^="StyledOptionLabel-"] { - font-size: 22px; - font-size: 1.125rem; - line-height: 1.5; - position: relative; - margin-bottom: 0.25rem; - align-items: baseline; -} - - -label[class^="StyledOptionLabel-"] > input { - display: flex; - align-items: center; - width: unset; -} - - -label[class^="StyledOptionLabel-"] > input:before { - width: 18px; - height: 18px; - margin-right: 0.25rem; - outline: transparent solid 2px; - border: 2px solid #535353; -} - -label[class^="StyledOptionLabel-"] > input[type="checkbox"]:checked::before { - background-color: #14558F; -} - -label[class^="StyledOptionLabel-"] > input[type="radio"]:checked::before { - border-width: thick; - border-color: #14558F; - background-color: #fff; -} - -/* text input, select, text area */ -.fsForm input, .fsForm select, .fsForm textarea { - font-size: 1.125rem; - line-height: 1.25; - height: unset; -} - -/* Datepicker */ -.MuiTextField-root { - border: 1px solid #dcdcdc; -} - -input.MuiInputBase-input::placeholder { - opacity: 1; -} - -/** Datepicker Calendar **/ -.MuiPickersCalendarHeader-label { - font-size: 1rem; - font-weight: 600; -} - -.MuiPaper-root { - color: #141414; -} - -.MuiPickersYear-yearButton { - font-size: 0.93rem; -} - -.MuiButton-root { - font-size: 0.85rem; - font-weight: 600; - background-color: #14558F; - color: white; -} - -.MuiDayCalendar-weekDayLabel { - font-size: 0.85rem; -} - -.MuiPickersDay-dayWithMargin { - color: #141414; -} - - -/* Number currency */ -/** Currency $ sign span **/ -.jjRdiv { - font-size: 1.125rem; - width: unset; -} -.ma__input-number > input { - width: 100%; -} -.ma__input-number { - min-width: 12rem; -} - - -/* Matrix */ -.fsBody .fsForm table { - color: #141414; -} -td.column.fsMatrixCol2 { - background: white; -} -.DWbWP::before { - height: 16px; - width: 16px; - border-width: 2px; - border-color: #535353; -} - - -/* Submit */ -.fsSubmit { - margin: 0; -} - -.fsSubmit .fsSubmitButton { - margin: 0; -} - -.fsSubmitButton:hover { - background-color: rgba(20, 85, 143, 0.75); - border-color: transparent; -} - -/* Progress Bar */ -div[class^="StyledProgressIndicatorBar-"] { - background-color: #DCDCDC; -} - -/* Next Prev buttons */ -.fsNextButton, .fsPreviousButton { - margin-bottom: 1rem; -} - -/* Welcome Message */ -div[data-testid="welcome-message-container"] { - text-align: left; - z-index: 0; -} - -div[data-testid="welcome-message-content"] { - padding: 0; - margin: 0; -} - -div[data-testid="welcome-message-content"] > div { - font-size: 1.25rem; - color: #141414; -} - -/* Success Message (formstack domain) */ -html.wf-active { - font-size: 0.85rem; -} - -.body-hosted-form > .fsForm { - width: 100%; - max-width: unset; -} - -.body-hosted-form > .fsForm > .fsPage { - max-width: 50rem; - margin: 0 auto; - color:#141414; -} - -.body-hosted-form > .fsForm > .fsPage p, -.body-hosted-form > .fsForm > .fsPage ul { - text-align: left; -} - -.body-hosted-form > .fsForm > .fsPage a { - color:#14558F; -} - -#fsSubmissionCheckmark { - display: none; -} - -#fsSubmissionCheckmark ~ .fsSectionText { - text-align: left; -} - -/* file upload */ -[class^=AsyncFileUploadstyles__StyledDragAndDropContainer] { - background: white !important; -} -[class^="AsyncFileUploadstyles__StyledFileItemContainer"] { - background: #E7EEF4 !important; -} \ No newline at end of file diff --git a/packages/starters/formstack/mayflower-theme.css b/packages/starters/formstack/mayflower-theme.css deleted file mode 100644 index cfb4ed4f7f..0000000000 --- a/packages/starters/formstack/mayflower-theme.css +++ /dev/null @@ -1,596 +0,0 @@ -/* layout */ -.fsBody { - padding: 0; - margin-top: 60px; -} - -.fsBody .fsForm { - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - font-size: 22px; - font-size: 1.375rem; - line-height: 1.5; - margin: 0; - padding: 0; - max-width: 50rem; -} - -/* Headings */ -.fsBody .fsSectionHeader { - background-color: transparent; - padding: 0; - margin-bottom: 20px; -} - -.fsBody .fsSectionHeader .fsSectionHeading { - text-align: left; - position: relative; - padding-bottom: 15px; - color: #535353; - font-weight: 700; - font-size: 48px; - font-size: 3rem; - line-height: 1.07; -} - -.fsBody .fsSectionHeader .fsSectionHeading:after { - content: ""; - height: 3px; - position: absolute; - bottom: 0; - left: 0.075em; - width: 1.85em; - background-color: rgb(67, 149, 111); - background-color: rgba(67, 149, 111, 0.5); - -webkit-transform: skew(-30deg); - -moz-transform: skew(-30deg); - -ms-transform: skew(-30deg); - -o-transform: skew(-30deg); - transform: skew(-30deg); -} - -/* Labels */ -.fsBody .fsForm .fsLabel { - font-weight: 500; - margin-bottom: 0.5rem; - display: block; - font-size: 22px; - font-size: 1.375rem; - line-height: 1.5; -} - -.fsBody .fsForm .fsLabel:not(.fsRequiredLabel):after { - content: ' (optional)'; - font-size: .8rem; -} - -/* Inputs */ -.fsBody .fsForm fieldset { - border: none; - padding-left: 0; -} - -.fsBody .fsForm input[type="text"].fsField, -.fsBody .fsForm input[type="email"].fsField, -.fsBody .fsForm input[type="tel"].fsField { - background-color: white; - border-color: #dcdcdc !important; - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - color: #535353; - border: 2px solid; - min-height: 46px; - padding: 0 18px; -} - -.fsBody .fsForm input[type="tel"].fsField { - min-width: 12rem; -} - -.fsBody .fsForm textarea { - background-color: white; - border-color: #dcdcdc !important; - border: 2px solid; -} - -.fsForm select:not([multiple="multiple"]) { - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - background-color: white; - border-color: #dcdcdc; - border: 2px solid #dcdcdc; - background-image: none; - max-width: 100%; - cursor: pointer; -} - -.fsBody .fsSubField { - margin-top: 10px; -} - -/* Matrix */ -.fsMatrix { - border-collapse: collapse; -} - -.fsMatrix th, -.fsMatrix td { - padding: 1em; - text-align: center; -} - -/* Supporting text */ -.fsBody .fsForm .fsSupporting, -.fsBody .showMobile { - font-weight: 300; - font-style: italic; - font-size: 1rem; - line-height: 1.4; -} - -.fsBody .fsField::placeholder { - color: #cccccc; -} - -/* Submit */ -.fsBody .fsForm input.fsSubmitButton { - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - font-weight: 700; - background-color: #14558f !important; - color: white; - box-shadow: 0 0.25rem 0.5rem rgba(1, 1, 1, 0.25); - display: inline-block; - letter-spacing: 0.1em; - padding: 1em; - text-decoration: none; - text-transform: uppercase; - -webkit-transition: all 0.4s ease; - -moz-transition: all 0.4s ease; - -o-transition: all 0.4s ease; - transition: all 0.4s ease; - cursor: pointer; -} - -.fsSubmitButton { - background-color: #14558f !important; -} - -.fsBody .fsForm input.fsSubmitButton:hover { - background-color: rgb(20, 85, 143); - background-color: rgba(20, 85, 143, 0.75) !important; - border-color: transparent; -} - -.fsBody [data-char-left] { - margin-bottom: 1.5rem; -} - -.fsBody .fsCounter { - position: absolute; - width: .1em; - height: .1em; - left: -999em; - overflow: hidden; -} - - -/* Multi-page form */ -.fsWelcomeMessage { - justify-content: left; -} - -.fsWelcomeMessage .fsWelcomeMessage__content { - text-align: left; - padding: 0; - margin: 0; -} - - -/* Pagination component */ -/* pagination component container */ -.fsPagination { - width: 100%; -} - -/* Previous and Next Button */ -.fsPagination .fsPreviousButton, -.fsPagination .fsNextButton, -.fsWelcomeMessage .fsWelcomeMessage__content .fsWelcomeMessage__start-button { - font-weight: 700; - color: white; - background-color: #14558f; - box-shadow: 0 0.25rem 0.5rem rgba(1, 1, 1, 0.25); - display: inline-block; - float: none !important; - letter-spacing: 0.1em; - padding: 1em; - text-decoration: none; - text-transform: uppercase; - -webkit-transition: all 0.4s ease; - -moz-transition: all 0.4s ease; - -o-transition: all 0.4s ease; - transition: all 0.4s ease; - -} - -.fsForm .fsPagination .fsPreviousButton, -.fsForm .fsPagination .fsNextButton { - /* clear fs styles */ - font-size: 1.25rem; - float: none !important; - position: relative; - margin: 0.5em 0; - - /* MF .button */ - line-height: 1.4; - font-weight: 550; - border: 3px solid; - border-color: transparent; - box-shadow: 0 0.25rem 0.5rem rgba(1, 1, 1, .25); - display: inline-flex; - align-items: center; - padding: 0.4em 1em; - line-height: 1.4; - font-weight: 550; -} - -.fsPreviousButton .fsSlim, -.fsNextButton .fsSlim { - display: none; -} - -.fsForm .fsPagination .fsPreviousButton { - background-color: #535353 !important; - margin-right: 2em; -} - -@media (max-width: 480px) { - .fsForm .fsPagination .fsPreviousButton { - margin-right: 1em; - } -} - -.fsPagination .fsNextButton { - background-color: #14558F !important; -} - -.fsForm .fsPagination .fsPreviousButton:hover, -.fsForm .fsPagination .fsNextButton:hover { - opacity: 0.75; -} - -/* pagination button text label */ -.fsPagination .fsPreviousButton span.fsFull { - margin-left: 1em; -} - -.fsPagination .fsNextButton span.fsFull { - margin-right: 1em; -} - -/* pagination button arrows */ -.fsPagination .fsPreviousButton span.fsFull:before, -.fsPagination .fsNextButton span.fsFull:after { - display: inline-block; - content: ""; - - border-right: 2px solid; - border-bottom: 2px solid; - transition: all .2s; - vertical-align: middle; - - border-color: #fff; - border-width: 3px; - width: 10px; - height: 10px; - margin: 0; - - position: absolute; - top: 50%; - - transform-origin: 50% 50%; -} - -.fsPagination .fsPreviousButton span.fsFull:before { - left: 15%; - transform: translate(-50%, -50%) rotate(-225deg); -} - -.fsPagination .fsNextButton span.fsFull:after { - right: 15%; - transform: translate(0%, -50%) rotate(-45deg); -} - - -.fsBody .fsFieldRow { - margin-bottom: 3.5rem !important; -} - -.fsBody .fsForm .fsPagination { - text-align: left; -} - -.fsForm.fsSingleColumn>div { - text-align: left !important; - font-size: 1.375rem !important; - padding: 0 !important; - margin: 0 !important; -} - - -/* Save Incomplete button component */ -.fsForm.fsSingleColumn>div.fsSaveIncomplete { - background: none !important; - box-shadow: none !important; -} - -.fsForm.fsSingleColumn div.fsSaveIncomplete a { - /* override sf styles */ - margin: 2em 0; - /* button */ - cursor: pointer; - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; - - /* ma__button */ - border: 3px solid; - box-shadow: 0 0.25rem 0.5rem rgba(1, 1, 1, .25); - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - align-items: center; - justify-content: center; - letter-spacing: .1em; - padding: 0.4em 1.5em; - text-decoration: none; - text-transform: uppercase; - transition: all .4s ease; - font-size: 1.25rem; - line-height: 1.4; - - /* ma__button--secondary */ - font-weight: 550; - background-color: #fff; - border-color: rgba(20, 85, 143, .5); - - color: #14558f; -} - -.fsForm.fsSingleColumn div.fsSaveIncomplete a:hover, -.fsForm.fsSingleColumn div.fsSaveIncomplete a:focus { - color: #fff; - background-color: #14558f; -} - - -/* .fsProgress prorgress bar container */ -.fsSubmit.fsPagination .fsProgress { - margin: 0; - padding-top: 1.5em; -} - -.fsProgress .fsProgressBarContainer { - margin-left: 5em; - background-color: #d4d4d4; -} - -.fsProgress .fsProgressBarContainer, -.fsProgress .fsProgressBar { - height: 1.5em; -} - -.fsProgress .fsProgressBar { - background-color: #14558F; -} - -.fsProgress .fsProgressText { - margin-top: -2.5em; - margin-left: -5em; - padding-top: 1.2em; - font-size: 1.375rem; - font-weight: 500; - text-align: left; -} - -.fsProgress .fsProgressText:after { - content: ":"; -} - - -.fsForm, -.fsError { - float: none !important; -} - -.fsForm div.fsError { - color: white; - border-radius: 0; - background-color: #CD0D0D; - border: 1px solid #CD0D0D; - font-weight: bold; -} - -.fsPage .fsValidationError { - background-color: transparent; -} - -.fsPage .fsValidationError .fsLabel, -.fsValidationError .fsLabel span, -div.fsValidationError label.fsLabel { - color: #CD0D0D !important; - padding-left: 0; - background: none; -} - -.fsPage .fsValidationError input, -.fsPage .fsValidationError textarea { - border: 2px solid #CD0D0D; -} - -/* remove branding */ -a[title="Web Form Builder"] { - display: none; -} - -/* specifc to given form */ -#fsSubmit3193712 { - padding-top: 0 !important; -} - -input.fsSubmitButton { - font-size: 1rem; -} - -div[fs-field-type="richtext"] a { - border-bottom-color: rgb(20, 85, 143); - border-bottom-color: rgba(20, 85, 143, 0.5); - border-bottom-width: 1px; - border-bottom-style: solid; -} - -/* DP-19875 Remove the extra character count */ -.fsFieldRow .ma__textarea__wrapper::after { - content: ''; -} - -/* Fix for sub-field groups */ -.fsSubFieldGroup { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - flex-grow: 2; -} - -.fsSubFieldGroup .fsSubField:nth-child(1):nth-last-child(3), -.fsSubFieldGroup .fsSubField:nth-child(2):nth-last-child(2), -.fsSubFieldGroup .fsSubField:nth-child(3):nth-last-child(1), -.fsBody .fsSubField.fsNameFirst, -.fsBody .fsSubField.fsNameMiddle, -.fsBody .fsSubField.fsNameLast, -.fsBody .fsSubField.fsFieldCity, -.fsBody .fsSubField.fsFieldState, -.fsBody .fsSubField.fsFieldZip { - width: auto; - flex-grow: 2; -} - -.fsBody .fsForm input[type="text"].fsField, -.fsBody .fsForm input[type="email"].fsField, -.fsBody .fsForm input[type="tel"].fsField { - min-height: 0; - max-height: 46px; - width: 100%; -} - -/* Make the asterisk small and red */ -.fsRequiredMarker { - font-size: 1rem; - color: #CD0D0D; -} - -div[fs-field-type="richtext"] a { - border-bottom: 0; -} - -/* Radios, checkboxes */ -div[fs-field-type="radio"] div.fieldset-content, -div[fs-field-type="checkbox"] div.fieldset-content { - display: flex; - flex-wrap: wrap; -} - -.fsRowBody input[type="radio"], -.fsRowBody input[type="checkbox"] { - min-height: 1rem; -} - -.fsBody .fsForm .fsOptionLabel { - font-size: 22px; - font-size: 1.375rem; - line-height: 1.5; - position: relative; -} - -.fsBody .fsForm .fsOptionLabel.horizontal { - float: none; -} - -/* For "other" option, wrap to a new line. */ -.fieldset-content .horizontal[data-children-count="2"], -.fieldset-content .vertical[data-children-count="2"] { - width: 100%; -} - -.fieldset-content .horizontal[data-children-count="2"] input[type="text"], -.fieldset-content .vertical[data-children-count="2"] input[type="text"] { - width: 100%; - border: 2px solid rgb(220, 220, 220); -} - -.fieldset-content .vertical { - width: 100%; -} - -.fsBody .fsForm .fsOptionLabel input[type="radio"], -.fsBody .fsForm .fsOptionLabel input[type="checkbox"] { - margin-right: 0.5rem; - vertical-align: middle; - cursor: pointer; -} - -.fsBody .fsForm .fsOptionLabel input[type="radio"]:focus, -.fsBody .fsForm .fsOptionLabel input[type="checkbox"]:focus { - box-shadow: none; - cursor: pointer; -} - -@media (max-width: 40em) { - .fsBody .fsForm label.fsOptionLabel { - background: none; - border: none; - padding: 10px 0; - } -} - -.fsBody .fsForm input[type="number"] { - font-family: "Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif; -} - -/* calendar icon. */ -.fsBody .fsForm .ui-datepicker-trigger { - position: relative; - filter: grayscale(1); - width: 22px; - height: 22px !important; - top: 5px; - margin-left: 0; -} - -.fsCurrency.fsCurrencyPrefix { - font-size: 1.75rem; -} - -.fsCreditcardFieldContainer { - display: block; -} - -.fsCreditcardFieldContainer div { - display: inline-block; -} - -.fsMatrixFieldset .fsMatrix { - width: 100%; -} - -/* Hide increment and decrement buttons */ -/* These behave unpredictably */ -button.ma__input-number__plus, -button.ma__input-number__minus { - display: none !important; -} - -/* Different markup of 'other' field */ -.fieldset-content:last-child div.horizontal { - width: 100%; -} - -.fieldset-content:last-child div.horizontal input[type="text"] { - border: 2px solid rgb(220, 220, 220); - width: 100%; -} diff --git a/packages/tokens/README.md b/packages/tokens/README.md new file mode 100644 index 0000000000..7fea6fc47c --- /dev/null +++ b/packages/tokens/README.md @@ -0,0 +1,15 @@ +# Massachusetts Design System CSS Variables + +For general guidance on how to use the Design System, check out the [Design System Microsite](https://www.mass.gov/massachusetts-design-system). + +The semantic variables (found in css/index.css) are created by running the [Token Forge Figma plugin](https://www.figma.com/community/plugin/1566133735926608173/token-forge-variables-tokens-builder) on the [Massachusetts Design System Foundations > Styles](https://www.figma.com/design/gCuxnTFonFcfYMsaaVemo7/Styles?m=auto) Figma file. + +Currently they are edited by hand to remove any unhelpful directories/modes imported from Figma. We're working on how to make this process cleaner once we have the tokens looking the way we want. It does, however, allow us to use the prefix for our tokens, `mds`, when exporting. + +There are also files for testing these tokens that will not be included in the official release. These are index.html and styles.css in the `test-page` directory. While this is in testing mode, feel free to add elements in these files to test them before adding it to your own project. + +For specifically exporting the JSON, one option is to use [Variables to JSON](https://www.figma.com/community/plugin/1468186413196022101/variables-to-json) on Base Tokens and Styles Figma files, as it formats them based on the DTCG standards. Once Figma is synced to our naming convention in the CSS variables, you will also hopefully be able to generate CSS variables from that JSON file using [Style Dictionary](https://styledictionary.com/). However, pulling CSS variables directly from Figma with Token Forge is the preferred method. + +# Token Naming Conventions # + +Coming soon! diff --git a/packages/tokens/css/index.css b/packages/tokens/css/index.css new file mode 100644 index 0000000000..6d69616f33 --- /dev/null +++ b/packages/tokens/css/index.css @@ -0,0 +1,249 @@ +/** + * Semantic tokens + * Use these in your projects + * + */ + + @import url('primitives.css'); + +/** + * Color Theme tokens used in the theme. + * + */ + +:root { + --mds-background-transparent: var(--mds-color-utility-base-white-transparent); + --mds-background-surface-default: #fdfdfd; + --mds-background-section-brand-neutral-lowest: var(--mds-color-brand-gray-100); + --mds-background-section-brand-neutral-low: var(--mds-color-brand-gray-300); + --mds-background-section-brand-neutral-mid: var(--mds-color-brand-gray-800); + --mds-background-section-brand-neutral-high: var(--mds-color-brand-gray-1100); + --mds-background-section-brand-neutral-highest: var(--mds-color-brand-gray-1300); + --mds-background-section-brand-neutral-disabled: var(--mds-color-brand-gray-200); + --mds-background-section-brand-primary-lowest: var(--mds-color-brand-bay-blue-100); + --mds-background-section-brand-primary-mid: var(--mds-color-brand-bay-blue-1000); + --mds-background-section-brand-primary-highest: var(--mds-color-brand-bay-blue-1300); + --mds-background-section-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-100); + --mds-background-section-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000); + --mds-background-section-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300); + --mds-background-section-brand-tertiary-lowest: var(--mds-color-brand-independence-cranberry-100); + --mds-background-section-brand-tertiary-mid: var(--mds-color-brand-independence-cranberry-800); + --mds-background-section-brand-tertiary-highest: var(--mds-color-brand-independence-cranberry-1300); + --mds-background-section-utility-danger-lowest: var(--mds-color-utility-danger-red-100); + --mds-background-section-utility-danger-mid: var(--mds-color-utility-danger-red-600); + --mds-background-section-utility-danger-highest: var(--mds-color-utility-danger-red-1300); + --mds-background-section-utility-warning-lowest: var(--mds-color-utility-warning-yellow-100); + --mds-background-section-utility-warning-mid: var(--mds-color-utility-warning-yellow-600); + --mds-background-section-utility-warning-highest: var(--mds-color-utility-warning-yellow-1300); + --mds-background-section-utility-success-lowest: var(--mds-color-utility-success-green-100); + --mds-background-section-utility-success-mid: var(--mds-color-utility-success-green-600); + --mds-background-section-utility-success-highest: var(--mds-color-utility-success-green-1300); + + + /* Adaptive/Interactive state colors */ + --mds-background-adaptive-brand-neutral-lowest: var(--mds-color-brand-gray-100); + --mds-background-adaptive-brand-neutral-low: var(--mds-color-brand-gray-300); + --mds-background-adaptive-brand-neutral-mid: var(--mds-color-brand-gray-900); + --mds-background-adaptive-brand-neutral-high: var(--mds-color-brand-gray-1000); + --mds-background-adaptive-brand-neutral-highest: var(--mds-color-brand-gray-1300); + --mds-background-adaptive-brand-neutral-disabled: var(--mds-color-brand-gray-200); + --mds-background-adaptive-brand-primary-lowest: var(--mds-color-brand-bay-blue-200); + --mds-background-adaptive-brand-primary-low: var(--mds-color-brand-bay-blue-400); + --mds-background-adaptive-brand-primary-mid: var(--mds-color-brand-bay-blue-1000); + --mds-background-adaptive-brand-primary-high: var(--mds-color-brand-bay-blue-1100); + --mds-background-adaptive-brand-primary-highest: var(--mds-color-brand-bay-blue-1300); + --mds-background-adaptive-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-200); + --mds-background-adaptive-brand-secondary-low: var(--mds-color-brand-berkshires-green-600); + --mds-background-adaptive-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000); + --mds-background-adaptive-brand-secondary-high: var(--mds-color-brand-berkshires-green-1100); + --mds-background-adaptive-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300); + --mds-background-adaptive-brand-tertiary-lowest: var(--mds-color-brand-independence-cranberry-200); + --mds-background-adaptive-brand-tertiary-low: var(--mds-color-brand-independence-cranberry-500); + --mds-background-adaptive-brand-tertiary-mid: var(--mds-color-brand-independence-cranberry-900); + --mds-background-adaptive-brand-tertiary-high: var(--mds-color-brand-independence-cranberry-1100); + --mds-background-adaptive-brand-tertiary-highest: var(--mds-color-brand-independence-cranberry-1300); + --mds-background-section-utility-informative-lowest: var(--mds-utility-informative-blue-100); + --mds-background-section-utility-informative-mid: var(--mds-utility-informative-blue-900); + --mds-background-section-utility-informative-highest: var(--mds-utility-informative-blue-1300); + --mds-background-adaptive-brand-highlight-mid: var(--mds-color-brand-duckling-yellow-800); + --mds-background-adaptive-utility-danger-lowest: var(--mds-color-utility-danger-red-100); + --mds-background-adaptive-utility-danger-low: var(--mds-color-utility-danger-red-300); + --mds-background-adaptive-utility-danger-mid: var(--mds-color-utility-danger-red-600); + --mds-background-adaptive-utility-danger-high: var(--mds-color-utility-danger-red-900); + --mds-background-adaptive-utility-danger-highest: var(--mds-color-utility-danger-red-1300); + --mds-background-adaptive-utility-warning-lowest: var(--mds-color-utility-warning-yellow-100); + --mds-background-adaptive-utility-warning-low: var(--mds-color-utility-warning-yellow-300); + --mds-background-adaptive-utility-warning-mid: var(--mds-color-utility-warning-yellow-900); + --mds-background-adaptive-utility-warning-high: var(--mds-color-brand-duckling-yellow-1100); + --mds-background-adaptive-utility-warning-highest: var(--mds-color-utility-warning-yellow-1300); + --mds-background-adaptive-utility-success-lowest: var(--mds-color-utility-success-green-100); + --mds-background-adaptive-utility-success-low: var(--mds-color-utility-success-green-300); + --mds-background-adaptive-utility-success-mid: var(--mds-color-utility-success-green-600); + --mds-background-adaptive-utility-success-high: var(--mds-color-utility-success-green-900); + --mds-background-adaptive-utility-success-highest: var(--mds-color-utility-success-green-1300); + --mds-background-overlay: #00000099; + --mds-white: var(--mds-color-utility-base-white); + --mds-black: var(--mds-color-utility-base-black); + --mds-inverse: var(--mds-color-utility-base-white); + + /** Text Colors **/ + --mds-text-and-icons-brand-neutral-default: var(--mds-color-brand-gray-1300); + --mds-text-and-icons-brand-neutral-muted: var(--mds-color-brand-gray-900); + --mds-text-and-icons-brand-neutral-disabled: var(--mds-color-brand-gray-700); + --mds-text-and-icons-brand-primary-mid: var(--mds-color-brand-bay-blue-1000); + --mds-text-and-icons-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000); + --mds-text-and-icons-utility-danger-mid: var(--mds-color-utility-danger-red-600); + --mds-text-and-icons-utility-warning-mid: var(--mds-color-utility-warning-yellow-600); + --mds-text-and-icons-utility-success-mid: var(--mds-color-utility-success-green-900); + + /** Border Colors **/ + --mds-border-brand-neutral-lowest: var(--mds-color-brand-gray-200); + --mds-border-brand-neutral-low: var(--mds-color-brand-gray-400); + --mds-border-brand-neutral-mid: var(--mds-color-brand-gray-600); + --mds-border-brand-neutral-high: var(--mds-color-brand-gray-750); + --mds-border-brand-primary-lowest: var(--mds-color-brand-bay-blue-200); + --mds-border-brand-primary-low: var(--mds-color-brand-bay-blue-400); + --mds-border-brand-primary-mid: var(--mds-color-brand-bay-blue-1000); + --mds-border-brand-primary-high: var(--mds-color-brand-bay-blue-1100); + --mds-border-brand-primary-highest: var(--mds-color-brand-bay-blue-1300); + --mds-border-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-200); + --mds-border-brand-secondary-low: var(--mds-color-brand-berkshires-green-600); + --mds-border-brand-secondary-mid: var(--mds-color-brand-berkshires-green-900); + --mds-border-brand-secondary-high: var(--mds-color-brand-berkshires-green-1100); + --mds-border-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300); + --mds-border-focus-on-light: var(--mds-color-utility-focus-blue-600); + --mds-border-focus-on-dark: var(--mds-color-utility-focus-blue-300); + --mds-border-utility-danger-low: var(--mds-color-utility-danger-red-300); + --mds-border-utility-danger-mid: var(--mds-color-utility-danger-red-600); + --mds-border-utility-warning-low: var(--mds-color-utility-warning-yellow-300); + --mds-border-utility-warning-mid: var(--mds-color-utility-warning-yellow-600); + --mds-border-utility-success-low: var(--mds-color-utility-success-green-300); + --mds-border-utility-success-mid: var(--mds-color-utility-success-green-600); + +/** + * Corner (border radius) tokens used in the theme. + */ + + --mds-radius-xs: var(--mds-border-radius-25); + --mds-radius-sm: var(--mds-border-radius-50); + --mds-radius-md: var(--mds-border-radius-100); + --mds-radius-max: var(--mds-border-radius-round); + + +/** + * Elevation/Box shadow tokens + **/ + + --mds-shadow-container: var(--mds-elevation-offset-none) var(--mds-elevation-offset-100) var(--mds-elevation-blur-400) 0 var(--mds-shadow-container-opacity); + --mds-shadow-modal: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-300) 0 var(--mds-shadow-modal-opacity); + --mds-shadow-hover-sm: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-150) 0 var(--mds-shadow-hover-opacity); + --mds-shadow-hover-md: var(--mds-elevation-offset-none) var(--mds-elevation-offset-100) var(--mds-elevation-blur-200) 0 var(--mds-shadow-hover-opacity); + +/** + * Spacing tokens + */ + --mds-space-3xs: var(--mds-space-50); + --mds-space-2xs: var(--mds-space-100); + --mds-space-xs: var(--mds-space-150); + --mds-space-sm: var(--mds-space-200); + --mds-space-md: var(--mds-space-300); + --mds-space-lg: var(--mds-space-400); + --mds-space-xl: var(--mds-space-500); + --mds-space-2xl: var(--mds-space-600); + --mds-space-3xl: var(--mds-space-800); + +/** + * Typography size tokens + * + */ + + /** Body text**/ + --mds-text-body: var(--mds-font-size-200)/1.8 var(--mds-font-family); + --mds-text-body-bold: var(--font-weight-semibold) var(--mds-font-size-200)/1.8 var(--mds-font-family); + --mds-text-body-lg: var(--mds-font-size-225)/1.8 var(--mds-font-family); + --mds-text-body-lg-bold: var(--font-weight-semibold) var(--mds-font-size-225)/1.8 var(--mds-font-family); + + /** Headings **/ + --mds-text-heading-2xs: var(--mds-font-weight-semibold) var(--mds-font-size-225)/1.4 var(--mds-font-family-headings); + --mds-text-heading-xs: var(--mds-font-weight-semibold) var(--mds-font-size-275)/1.3 var(--mds-font-family-headings); + --mds-text-heading-sm: var(--mds-font-weight-semibold) var(--mds-font-size-300)/1.3 var(--mds-font-family-headings); + --mds-text-heading-md: var(--mds-font-weight-semibold) var(--mds-font-size-325)/1.2 var(--mds-font-family-headings); + --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-450)/1.2 var(--mds-font-family-headings); + --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/1.2 var(--mds-font-family-headings); + --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/1.1 var(--mds-font-family-headings); + /** Labels **/ + --mds-text-label-sm: var(--mds-font-weight-medium) var(--mds-font-size-175)/1.2 var(--mds-font-family); + --mds-text-label: var(--mds-font-weight-medium) var(--mds-font-size-200)/1.2 var(--mds-font-family); + --mds-text-label-md: var(--mds-font-weight-medium) var(--mds-font-size-225)/1.2 var(--mds-font-family); + --mds-text-label-lg: var(--mds-font-weight-medium) var(--mds-font-size-250)/1.2 var(--mds-font-family); + --mds-text-label-xl: var(--mds-font-weight-medium) var(--mds-font-size-275)/1.2 var(--mds-font-family); + + /** Eyebrow text (uppercase text labels). Needs 1px Letter spacing **/ + --mds-text-eyebrow: var(--mds-font-weight-semibold) var(--mds-font-size-175)/1 var(--mds-font-family); + --mds-text-eyebrow-md: var(--mds-font-weight-semibold) var(--mds-font-size-200)/1 var(--mds-font-family); + /* uppercase must be set separately as a text-transform in addition to using these variables */ + --mds-text-transform-eyebrow: uppercase; + --mds-text-letter-spacing-eyebrow: 1px; + + /** Caption text **/ + --mds-text-caption-sm: var(--mds-font-weight-regular) var(--mds-font-size-125)/1.3 var(--mds-font-family); + --mds-text-caption: var(--mds-font-weight-regular) var(--mds-font-size-175)/1.3 var(--mds-font-family); + --mds-text-caption-bold: var(--mds-font-weight-medium) var(--mds-font-size-175)/1.3 var(--mds-font-family); + --mds-text-caption-md: var(--mds-font-weight-regular) var(--mds-font-size-200)/1.3 var(--mds-font-family); + + +/** Media queries for headings lg-2xl to fit smaller screens are in with breakpoint tokens below **/ +} + +/** + * Spacing tokens by Breakpoint. + * Use these for containers/sections + */ + +/** 1280px, XL breakpoint **/ +@media (min-width: 1280px) { + :root { + --mds-breakpoint-horizontal-space-columns: 12; + --mds-breakpoint-horizontal-space-margin: var(--space-600); + --mds-breakpoint-horizontal-space-gutter: var(--space-300); + }; +}; + +/** 1024px, LG breakpoint **/ +@media (min-width: 1024px) { + :root { + --mds-breakpoint-horizontal-space-columns: 12; + --mds-breakpoint-horizontal-space-margin: var(--space-600); + --mds-breakpoint-horizontal-space-gutter: var(--space-300); + }; +}; + +/** 768px, MD breakpoint **/ +@media (min-width: 768px) { + :root { + --mds-breakpoint-horizontal-space-columns: 6; + --mds-breakpoint-horizontal-space-margin: var(--space-400); + --mds-breakpoint-horizontal-space-gutter: var(--space-300); + }; +}; + /** 480px, SM breakpoint **/ +@media (min-width: 480px) { + :root { + --mds-breakpoint-horizontal-space-columns: 6; + --mds-breakpoint-horizontal-space-margin: var(--space-300); + --mds-breakpoint-horizontal-space-gutter: var(--space-200); + --mds-text-heading-2xl: var(--font-weight-semibold) var(--font-size-500)/1.1 var(--font-family); + --mds-text-heading-xl: var(--font-weight-semibold) var(--font-size-450)/1.2 var(--font-family); + --mds-text-heading-lg: var(--font-weight-semibold) var(--font-size-400)/1.2 var(--font-family); + }; +}; +/** 320px, XS breakpoint**/ +@media (min-width: 320px) { + :root { + --mds-breakpoint-horizontal-space-viewport-min-width: 288px; + --mds-breakpoint-horizontal-space-columns: 6; + --mds-breakpoint-horizontal-space-margin: var(--space-200); + --mds-breakpoint-horizontal-space-gutter: var(--space-100); + }; +}; + diff --git a/packages/tokens/css/primitives.css b/packages/tokens/css/primitives.css new file mode 100644 index 0000000000..395cdaea1e --- /dev/null +++ b/packages/tokens/css/primitives.css @@ -0,0 +1,204 @@ +/** + * Primitive token values + * Do NOT use these in your projects - use the semantic tokens (semantic-tokens.css) instead + * That will make theming/changes a lot easier in the long run! + */ + + /* The required font for mass.gov websites is Noto Sans, which is included here in a link from Google fonts */ + @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); + +:root { + + /** We can remove this general one eventually and use body **/ + --mds-font-family: "Noto Sans", Helvetica, Arial, sans-serif; + + --mds-font-family-headings: "Noto Sans", Helvetica, Arial, sans-serif; + --mds-font-family-body: "Noto Sans", Helvetica, Arial, sans-serif; + --mds-font-family-utility: "Noto Sans", Helvetica, Arial, sans-serif; + --mds-font-family-label: "Noto Sans", Helvetica, Arial, sans-serif; + + --mds-border-radius-25: 0.125rem; + --mds-border-radius-50: 0.25rem; + --mds-border-radius-100: 0.5rem; + --mds-border-radius-150: 0.75rem; + --mds-border-radius-200: 1rem; + --mds-border-radius-250: 1.25rem; + --mds-border-radius-300: 1.5rem; + --mds-border-radius-350: 1.75rem; + --mds-border-radius-400: 2rem; + --mds-border-radius-450: 2.25rem; + --mds-border-radius-500: 2.5rem; + --mds-border-radius-600: 3rem; + --mds-border-radius-round: 1000px; + --mds-color-utility-base-white: #ffffff; + --mds-color-utility-base-black: #000000; + --mds-color-utility-base-gray: #fdfdfd; + --mds-color-utility-focus-blue-300: #b2dbff; + --mds-color-utility-focus-blue-600: #0088ff; + --mds-color-utility-danger-red-100: #fef1f1; + --mds-color-utility-danger-red-300: #f99f9f; + --mds-color-utility-danger-red-600: #cd0d0d; + --mds-color-utility-danger-red-900: #900909; + --mds-color-utility-danger-red-1300: #480505; + --mds-color-brand-gray-100: #f7f7f7; + --mds-color-brand-gray-200: #f0f0f0; + --mds-color-brand-gray-300: #e6e6e6; + --mds-color-brand-gray-400: #dcdcdc; + --mds-color-brand-gray-500: #cccccc; + --mds-color-brand-gray-600: #bababa; + --mds-color-brand-gray-700: #a8a8a8; + --mds-color-brand-gray-750: #949494; + --mds-color-brand-gray-800: #878787; + --mds-color-brand-gray-900: #707070; + --mds-color-brand-gray-1000: #535353; + --mds-color-brand-gray-1100: #3d3d3d; + --mds-color-brand-gray-1200: #2a2a2a; + --mds-color-brand-gray-1250: #212121; + --mds-color-brand-gray-1300: #141414; + --mds-color-brand-bay-blue-100: #e8eef4; + --mds-color-brand-bay-blue-200: #d0dde9; + --mds-color-brand-bay-blue-300: #b9ccdd; + --mds-color-brand-bay-blue-400: #a1bbd2; + --mds-color-brand-bay-blue-500: #8aaac7; + --mds-color-brand-bay-blue-600: #7299bc; + --mds-color-brand-bay-blue-700: #5b88b1; + --mds-color-brand-bay-blue-800: #4377a5; + --mds-color-brand-bay-blue-900: #2c669a; + --mds-color-brand-bay-blue-1000: #14558f; + --mds-color-brand-bay-blue-1100: #104472; + --mds-color-brand-bay-blue-1200: #0e3c64; + --mds-color-brand-bay-blue-1300: #0a2b48; + --mds-color-brand-berkshires-green-100: #ebf3ee; + --mds-color-brand-berkshires-green-200: #d7e7dd; + --mds-color-brand-berkshires-green-300: #c3dacd; + --mds-color-brand-berkshires-green-400: #afcebc; + --mds-color-brand-berkshires-green-500: #9ac1a9; + --mds-color-brand-berkshires-green-600: #80b294; + --mds-color-brand-berkshires-green-700: #67a27f; + --mds-color-brand-berkshires-green-800: #388557; + --mds-color-brand-berkshires-green-900: #32784e; + --mds-color-brand-berkshires-green-1000: #2d6a46; + --mds-color-brand-berkshires-green-1100: #275d3d; + --mds-color-brand-berkshires-green-1200: #225034; + --mds-color-brand-berkshires-green-1300: #1c432c; + --mds-color-brand-duckling-yellow-100: #fef9e8; + --mds-color-brand-duckling-yellow-200: #fdf3d1; + --mds-color-brand-duckling-yellow-300: #fceebb; + --mds-color-brand-duckling-yellow-400: #fbe8a4; + --mds-color-brand-duckling-yellow-500: #fbe28d; + --mds-color-brand-duckling-yellow-600: #fadc76; + --mds-color-brand-duckling-yellow-700: #f8d149; + --mds-color-brand-duckling-yellow-800: #f6c51b; + --mds-color-brand-duckling-yellow-900: #ddb118; + --mds-color-brand-duckling-yellow-1000: #c59e16; + --mds-color-brand-duckling-yellow-1100: #ac8a13; + --mds-color-brand-duckling-yellow-1200: #947610; + --mds-color-brand-duckling-yellow-1300: #7b630e; + --mds-color-independence-cranberry-100: #f0e7e8; + --mds-color-independence-cranberry-200: #e1ced2; + --mds-color-independence-cranberry-300: #d2b6bb; + --mds-color-independence-cranberry-400: #c39da5; + --mds-color-independence-cranberry-500: #b4858e; + --mds-color-independence-cranberry-600: #955461; + --mds-color-independence-cranberry-700: #863b4a; + --mds-color-independence-cranberry-800: #772334; + --mds-color-independence-cranberry-900: #680a1d; + --mds-color-independence-cranberry-1000: #5e091a; + --mds-color-independence-cranberry-1100: #530817; + --mds-color-independence-cranberry-1200: #490714; + --mds-color-independence-cranberry-1300: #34050f; + --mds-color-utility-base-white : #ffffff; + --mds-color-utility-base-black : #000000; + --mds-color-utility-base-white-transparent : #ffffff00; + --mds-color-utility-base-black-transparent : #00000000; + --mds-color-utility-focus-blue-300 : #b2dbff; + --mds-color-utility-focus-blue-600 : #0088ff; + --mds-color-utility-informative-blue-100 : #e8eef4; + --mds-color-utility-informative-blue-300 : #b9ccdd; + --mds-color-utility-informative-blue-600 : #7299bc; + --mds-color-utility-informative-blue-900 : #14558f; + --mds-color-utility-informative-blue-1300 : #0a2b48; + --mds-color-utility-success-green-100: #eafbef; + --mds-color-utility-success-green-300: #81e4a2; + --mds-color-utility-success-green-600: #24a850; + --mds-color-utility-success-green-900: #187236; + --mds-color-utility-success-green-1300: #0b3218; + --mds-color-utility-warning-yellow-100: #fff9eb; + --mds-color-utility-warning-yellow-300: #fcdf9c; + --mds-color-utility-warning-yellow-600: #f6b622; + --mds-color-utility-warning-yellow-900: #bf8808; + --mds-color-utility-warning-yellow-1300: #7b5705; + --mds-font-size-100: 0.625rem; + --mds-font-size-125: 0.75rem; + --mds-font-size-175: 0.875rem; + --mds-font-size-200: 1rem; + --mds-font-size-225: 1.125rem; + --mds-font-size-250: 1.25rem; + --mds-font-size-275: 1.375rem; + --mds-font-size-300: 1.5rem; + --mds-font-size-325: 1.625rem; + --mds-font-size-350: 1.75rem; + --mds-font-size-400: 2rem; + --mds-font-size-450: 2.25rem; + --mds-font-size-500: 2.5rem; + --mds-font-size-550: 2.75rem; + --mds-font-size-600: 3rem; + --mds-font-size-700: 3.5rem; + --mds-font-size-800: 4rem; + --mds-font-size-1200: 6rem; + --mds-font-size-2100: 10.5rem; + --mds-font-weight-extralight: 150; + --mds-font-weight-light: 300; + --mds-font-weight-regular: 400; + --mds-font-weight-medium: 500; + --mds-font-weight-semibold: 600; + --mds-font-weight-bold: 700; + --mds-font-weight-extrabold: 800; + --mds-space-0: 0; + --mds-space-25: 0.125rem; + --mds-space-50: 0.25rem; + --mds-space-100: 0.5rem; + --mds-space-150: 0.75rem; + --mds-space-175: 0.875rem; + --mds-space-200: 1rem; + --mds-space-250: 1.25rem; + --mds-space-300: 1.5rem; + --mds-space-350: 1.75rem; + --mds-space-400: 2rem; + --mds-space-450: 2.25rem; + --mds-space-500: 2.5rem; + --mds-space-600: 3rem; + --mds-space-700: 3.5rem; + --mds-space-800: 4rem; + --mds-space-900: 4.5rem; + --mds-space-1000: 5rem; + --mds-space-1100: 5.5rem; + --mds-space-1200: 6rem; + --mds-space-1300: 6.5rem; + --mds-space-1400: 7rem; + --mds-space-1500: 7.5rem; + --mds-space-1600: 8rem; + --mds-space-1800: 9rem; + --mds-space-2000: 10rem; + --mds-elevation-offset-100: 8px; + --mds-elevation-offset-200: 16px; + --mds-elevation-offset-300: 24px; + --mds-elevation-offset-400: 32px; + --mds-elevation-offset-none: 0px; + --mds-elevation-offset-50: 4px; + --mds-elevation-blur-150: 12px; + --mds-elevation-blur-200: 16px; + --mds-elevation-blur-300: 24px; + --mds-elevation-blur-400: 32px; + --mds-elevation-blur-none: 0px; + --mds-elevation-blur-25: 2px; + --mds-elevation-spread-100: 8px; + --mds-elevation-spread-150: 12px; + --mds-elevation-spread-200: 16px; + --mds-elevation-spread-250: 20px; + --mds-elevation-spread-none: 0px; + --mds-elevation-spread-50: 4px; + --mds-shadow-hover-opacity: #00000029; + --mds-shadow-container-opacity: #0000001a; + --mds-shadow-modal-opacity: #00000024; +} diff --git a/packages/tokens/test-page/index.html b/packages/tokens/test-page/index.html new file mode 100644 index 0000000000..5770ee7668 --- /dev/null +++ b/packages/tokens/test-page/index.html @@ -0,0 +1,88 @@ + + + + + Content Styling Guide + + + +

Tokens test page

+
+

Primary Buttons

+ + + + + + +

Accent buttons

+ + + + + +
+
+

Elevation demos

+
+ This is the container shadow +
+
+
+ This is the modal shadow +
+
+
+
+

Badges

+
Default
+
Primary
+
Success
+
Caution
+
Danger
+
+ + + +

Unordered list

+ +

Ordered List

+
    +
  1. This is the first item
    2. +
  2. This is the second item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id erat vitae mi sagittis tempor in non lorem.Vivamus nec congue metus.
    3. +
  3. Fusce sed nisi ut mauris porta ullamcorper
    4. +
+ +
+

HTML work in progress

+

Header 1 before a paragraph

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id erat vitae mi sagittis tempor in non lorem. Vivamus nec congue metus. Fusce sed nisi ut mauris porta ullamcorper vitae quis nulla.

+ +

Here is a form with placeholders

+ +
+
+
+
+
+
+
+
+ + diff --git a/packages/tokens/test-page/styles.css b/packages/tokens/test-page/styles.css new file mode 100644 index 0000000000..23bd11668a --- /dev/null +++ b/packages/tokens/test-page/styles.css @@ -0,0 +1,182 @@ +/** + Test styles for index.html to make sure variables are working properly. Do not directly reference this file +**/ + +@import url('../css/index.css'); + + +body, button, html { + font-family: "Noto Sans", "Helvetica", "Arial", sans-serif; + box-sizing: border-box; + /** font imported in primitives stylesheet **/ +} +p, li { + color: var(--mds-background-adaptive-brand-neutral-high); + font: var(--mds-text-body); +} + +a { + color: var(--mds-background-adaptive-brand-primary-mid); + +} + +p strong {font:var(--mds-text-body-bold); } + +a:hover { + color: var(--mds-background-adaptive-brand-primary-low); +} + +a:focus { + outline-color: var(--mds-border-focus-on-light); +} + +input { + outline:1px solid var(--mds-border-neutral-high); + border-radius: var(--mds-radius-md); + padding: var(--mds-space-3xs) var(--mds-space-xs); + margin: var(--mds-space-3xs); + font-size: var(--mds-text-body, 16px); + } + +h1, h2, h3, h4, h5, h6 { + color: var(--mds-text-and-icons-brand-neutral-default); +} + +h1 { + font: var(--mds-text-heading-2xl); +} + +h2 { + font: var(--mds-text-heading-xl); +} + +h3 { + font: var(--mds-text-heading-lg); +} + +div { + box-sizing: border-box; +} + +.container { + margin: var(--mds-space-lg)0 ; +} +/** Specific component css **/ + +.mds-badge { + padding: var(--mds-space-2xs); + display: inline-block; + border-radius: var(--mds-radius-sm, 4px); + color: var(--mds-text-and-icons-neutral-brand-default); + background-color: var(--mds-background-adaptive-brand-neutral-low); + font: var(--mds-text-eyebrow); + text-transform: var(--mds-text-transform-eyebrow); + letter-spacing: var(--mds-text-letter-spacing-eyebrow); +} + +.mds-badge.primary { + color: var(--mds-text-and-icons-brand-primary-mid); + background-color: var(--mds-background-adaptive-brand-primary-lowest); +} + +.mds-badge.success { + color: var(--mds-text-and-icons-utility-success-mid); + background-color: var(--mds-background-adaptive-utility-success-lowest); +} + +.mds-badge.caution { + color: var(--mds-text-and-icons-utility-warning-mid); + background-color: var(--mds-background-adaptive-utility-warning-lowest); +} + +.mds-badge.danger { + color: var(--mds-text-and-icons-utility-danger-mid); + background-color: var(--mds-background-adaptive-utility-danger-lowest); +} + +.mds-button { + padding: var(--mds-space-sm); + font-size: var(--mds-text-body-lg, 18px); + border-radius: var(--mds-radius-md); + box-sizing: border-box; + border: 0; + height: 3.5rem; + vertical-align: bottom; +} + +.mds-button.fill { + background-color: var(--mds-background-adaptive-brand-primary-mid); + color: var(--mds-inverse); + border-color: var(--mds-background-section-brand-primary-mid); +} + +.mds-button.accent.fill { + background-color: var(--mds-background-section-brand-secondary-mid); + border-color: var(--mds-background-section-brand-secondary-mid); +} + +.mds-button.accent.fill:hover, .mds-button.accent.outline:hover { + background-color: var(--mds-background-section-brand-secondary-highest); + color: var(--mds-inverse); /** Use adaptive for interactive*/ +} + +.mds-button.outline { + background-color: var(--mds-inverse); + border: 2px solid var(--mds-background-section-brand-primary-mid); + color: var(--mds-background-section-brand-primary-mid); +} + +.mds-button.accent.outline { + color: var(--mds-background-section-brand-secondary-mid); + border: 2px solid var(--mds-background-section-brand-secondary-mid); +} + +.mds-button.accent.ghost { + color: var(--mds-background-section-brand-secondary-mid); +} + +.mds-button.ghost { + border: none; + background-color: var(--mds-inverse); + color: var(--mds-background-section-brand-primary-mid); +} + +.mds-button.ghost:hover { + border: none; + background-color: var(--mds-inverse); + color: var(--mds-background-section-brand-primary-mid); + text-decoration: underline; +} + +.mds-button.accent.ghost:hover { + color: var(--mds-background-section-brand-secondary-mid); +} + +.mds-button.small { + padding: var(--mds-space-2xs, 8px) var(--mds-space-sm, 16px); + font-size: var(--mds-text-body-sm, 14px) +} + +.mds-button:hover, .mds-button.outline:hover { + background-color: var(--mds-background-section-brand-primary-highest); + color: var(--mds-inverse); + box-shadow: var(--mds-shadow-hover-sm); +} + +/* Elevation demo styles */ + +.modal-shadow { + margin: var(--mds-space-md); + padding: var(--mds-space-md); + box-shadow: var(--mds-shadow-modal); + width: 300px; + height: 200px; +} + +.container-shadow { + margin: var(--mds-space-md); + padding: var(--mds-space-md); + box-shadow: var(--mds-shadow-container); + width: 200px; + height: 100px; +} \ No newline at end of file