From 5f22f1a3b55407e08cf1dc65735de28d9ae74e8d Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 30 Apr 2025 16:10:48 +0600 Subject: [PATCH 01/25] add css variables --- .../assets/scss/00-base/_color-tokens.scss | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index 7488b38151..92291eb6f9 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -113,3 +113,121 @@ $c-error-red-lightest: #FCF3F3 !default; //Commonly used in backgro // Focus Highlight (#3e94cf) $c-focus-hightlight: #3e94cf !default; + +:root { + // Bay Blue (#14558f) + --mf-c-bay-blue-90-tint: $c-bay-blue-90-tint; + --mf-c-bay-blue-80-tint: $c-bay-blue-80-tint; + --mf-c-bay-blue-70-tint: $c-bay-blue-70-tint; + --mf-c-bay-blue-60-tint: $c-bay-blue-60-tint; + --mf-c-bay-blue-50-tint: $c-bay-blue-50-tint; + --mf-c-bay-blue-40-tint: $c-bay-blue-40-tint; + --mf-c-bay-blue-30-tint: $c-bay-blue-30-tint; + --mf-c-bay-blue-20-tint: $c-bay-blue-20-tint; + --mf-c-bay-blue-10-tint: $c-bay-blue-10-tint; + --mf-c-bay-blue: $c-bay-blue; + --mf-c-bay-blue-10-shade: $c-bay-blue-10-shade; + --mf-c-bay-blue-20-shade: $c-bay-blue-20-shade; + --mf-c-bay-blue-30-shade: $c-bay-blue-30-shade; + --mf-c-bay-blue-40-shade: $c-bay-blue-40-shade; + --mf-c-bay-blue-50-shade: $c-bay-blue-50-shade; + + --mf-c-bay-blue-light: $c-bay-blue-light; //Commonly used in outlines + --mf-c-bay-blue-lighter: $c-bay-blue-lighter; //Commonly used in outlines + --mf-c-bay-blue-lightest: $c-bay-blue-lightest; //Commonly used in background + --mf-c-bay-blue-darker: $c-bay-blue-darker; + --mf-c-bay-blue-darkest: $c-bay-blue-darkest; + + // Berkshires Green (#388557) + --mf-c-berkshires-green-90-tint: $c-berkshires-green-90-tint; + --mf-c-berkshires-green-80-tint: $c-berkshires-green-80-tint; + --mf-c-berkshires-green-70-tint: $c-berkshires-green-70-tint; + --mf-c-berkshires-green-60-tint: $c-berkshires-green-60-tint; + --mf-c-berkshires-green-50-tint: $c-berkshires-green-50-tint; + --mf-c-berkshires-green-40-tint: $c-berkshires-green-40-tint; + --mf-c-berkshires-green-30-tint: $c-berkshires-green-30-tint; + --mf-c-berkshires-green-20-tint: $c-berkshires-green-20-tint; + --mf-c-berkshires-green-10-tint: $c-berkshires-green-10-tint; + --mf-c-berkshires-green: $c-berkshires-green; + --mf-c-berkshires-green-10-shade: $c-berkshires-green-10-shade; + --mf-c-berkshires-green-20-shade: $c-berkshires-green-20-shade; + --mf-c-berkshires-green-30-shade: $c-berkshires-green-30-shade; + --mf-c-berkshires-green-40-shade: $c-berkshires-green-40-shade; + --mf-c-berkshires-green-50-shade: $c-berkshires-green-50-shade; + + --mf-c-berkshires-green-lighter: $c-berkshires-green-lighter; //Commonly used in outlines + --mf-c-berkshires-green-lightest: $c-berkshires-green-lightest; //Commonly used in background + --mf-c-berkshires-green-dark: $c-berkshires-green-dark; // Followup needed: should be replaced with one of the gradient colors + --mf-c-berkshires-green-darker: $c-berkshires-green-darker; + --mf-c-berkshires-green-darkest: $c-berkshires-green-darkest; + + // Duckling Yellow (#f6c51b) + --mf-c-duckling-yellow-90-tint: $c-duckling-yellow-90-tint; + --mf-c-duckling-yellow-80-tint: $c-duckling-yellow-80-tint; + --mf-c-duckling-yellow-70-tint: $c-duckling-yellow-70-tint; + --mf-c-duckling-yellow-60-tint: $c-duckling-yellow-60-tint; + --mf-c-duckling-yellow-50-tint: $c-duckling-yellow-50-tint; + --mf-c-duckling-yellow-40-tint: $c-duckling-yellow-40-tint; + --mf-c-duckling-yellow-30-tint: $c-duckling-yellow-30-tint; + --mf-c-duckling-yellow-20-tint: $c-duckling-yellow-20-tint; + --mf-c-duckling-yellow-10-tint: $c-duckling-yellow-10-tint; + --mf-c-duckling-yellow: $c-duckling-yellow; + --mf-c-duckling-yellow-10-shade: $c-duckling-yellow-10-shade; + --mf-c-duckling-yellow-20-shade: $c-duckling-yellow-20-shade; + --mf-c-duckling-yellow-30-shade: $c-duckling-yellow-30-shade; + --mf-c-duckling-yellow-40-shade: $c-duckling-yellow-40-shade; + --mf-c-duckling-yellow-50-shade: $c-duckling-yellow-50-shade; + + --mf-c-duckling-yellow-lighter: $c-duckling-yellow-lighter; //Commonly used in outlines + --mf-c-duckling-yellow-lightest: $c-duckling-yellow-lightest; //Commonly used in background + --mf-c-duckling-yellow-darker: $c-duckling-yellow-darker; + --mf-c-duckling-yellow-darkest: $c-duckling-yellow-darkest; + + // Independence Cranberry (#680A1D) + --mf-c-independence-cranberry-90-tint: $c-independence-cranberry-90-tint; + --mf-c-independence-cranberry-80-tint: $c-independence-cranberry-80-tint; + --mf-c-independence-cranberry-70-tint: $c-independence-cranberry-70-tint; + --mf-c-independence-cranberry-60-tint: $c-independence-cranberry-60-tint; + --mf-c-independence-cranberry-50-tint: $c-independence-cranberry-50-tint; + --mf-c-independence-cranberry-40-tint: $c-independence-cranberry-40-tint; + --mf-c-independence-cranberry-30-tint: $c-independence-cranberry-30-tint; + --mf-c-independence-cranberry-20-tint: $c-independence-cranberry-20-tint; + --mf-c-independence-cranberry-10-tint: $c-independence-cranberry-10-tint; + --mf-c-independence-cranberry: $c-independence-cranberry; + --mf-c-independence-cranberry-10-shade: $c-independence-cranberry-10-shade; + --mf-c-independence-cranberry-20-shade: $c-independence-cranberry-20-shade; + --mf-c-independence-cranberry-30-shade: $c-independence-cranberry-30-shade; + --mf-c-independence-cranberry-40-shade: $c-independence-cranberry-40-shade; + --mf-c-independence-cranberry-50-shade: $c-independence-cranberry-50-shade; + + --mf-c-independence-cranberry-lighter: $c-independence-cranberry-lighter; //Commonly used in outlines + --mf-c-independence-cranberry-lightest: $c-independence-cranberry-lightest; //Commonly used in outlines + --mf-c-independence-cranberry-darker: $c-independence-cranberry-darker; + --mf-c-independence-cranberry-darkest: $c-independence-cranberry-darkest; + + // Base Gray Scale Colors + --mf-c-revolution-gray: $c-revolution-gray; + --mf-c-granite-gray: $c-granite-gray; + --mf-c-atlantic-gray: $c-atlantic-gray; + --mf-c-overcast-gray: $c-overcast-gray; + --mf-c-platinum-gray: $c-platinum-gray; + + // Gray Scale Spectrum Mapping + --mf-c-black: $c-black; + --mf-c-gray-darkest: $c-gray-darkest; + // --mf-c-gray-darker: (place holder) + --mf-c-gray-dark: $c-gray-dark; + --mf-c-gray: $c-gray; + --mf-c-gray-light: $c-gray-light; + --mf-c-gray-lighter: $c-gray-lighter; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray + --mf-c-gray-lightest: $c-gray-lightest; + --mf-c-white: $c-white; + + // Error Red (#CD0D0D) + --mf-c-error-red: $c-error-red; + --mf-c-error-red-lighter: $c-error-red-lighter; //Commonly used in outlines + --mf-c-error-red-lightest: $c-error-red-lightest; //Commonly used in background + + // Focus Highlight (#3e94cf) + --mf-c-focus-hightlight: $c-focus-hightlight; +} From fb76cc07d9a158aa35200e2d625ab81aae43b7bf Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 30 Apr 2025 17:30:39 +0600 Subject: [PATCH 02/25] add css variables to colors --- packages/assets/scss/00-base/_colors.scss | 47 +++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index f4be47e4f3..00c5cc4f9c 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -49,3 +49,50 @@ $c-bd-input-dark: $c-gray !default; // Box shadow $c-box-shadow-black: rgba($c-black, 0.25) !default; + +:root { + --mf-c-primary: $c-primary; + --mf-c-primary-light: $c-primary-light; + --mf-c-primary-lighter: $c-primary-lighter; + --mf-c-primary-lightest: $c-primary-lightest; + --mf-c-primary-alt: $c-primary-alt; + --mf-c-primary-alt-lighter: $c-primary-alt-lighter; + --mf-c-primary-alt-lightest: $c-primary-alt-lightest; + --mf-c-primary-alt-dark: $c-primary-alt-dark; + --mf-c-highlight: $c-highlight; + --mf-c-highlight-lighter: $c-highlight-lighter; + --mf-c-highlight-lightest: $c-highlight-lightest; + + --mf-c-error: $c-error; + --mf-c-error-lighter: $c-error-lighter; + --mf-c-error-lightest: $c-error-lightest; + --mf-c-warning: $c-warning; + --mf-c-success: $c-success; + --mf-c-focus: $c-focus; + --mf-c-link: $c-link; + --mf-c-visited: $c-visited; + + --mf-c-font-base: $c-font-base; + --mf-c-font-detail: $c-font-detail; + --mf-c-font-dark: $c-font-dark; + --mf-c-font-medium: $c-font-medium; + + --mf-c-font-heading: $c-font-heading; + --mf-c-font-inverse: $c-font-inverse; + --mf-c-font-link: $c-font-link; + --mf-c-font-error: $c-font-error; + + --mf-c-bg: $c-bg; + --mf-c-bg-comp-title: $c-bg-comp-title; + --mf-c-bg-subtle: $c-bg-subtle; + --mf-c-bg-section: $c-bg-section; + + --mf-c-bd: $c-bd; + --mf-c-bd-divider: $c-bd-divider; + --mf-c-bd-divider-dark: $c-bd-divider-dark; + --mf-c-bd-error: $c-bd-error; + --mf-c-bd-input: $c-bd-input; + --mf-c-bd-input-dark: $c-bd-input-dark; + + --mf-c-box-shadow-black: $c-box-shadow-black; +} From 78ed04fe3188e4e92c7a04244b76b17d00483966 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 30 Apr 2025 19:26:29 +0600 Subject: [PATCH 03/25] change to css variables --- packages/assets/scss/00-base/_elements.scss | 6 +- packages/assets/scss/00-base/_pikaday.scss | 18 ++--- .../00-base/mixins/_ma-accordion-icon.scss | 2 +- .../00-base/mixins/_ma-background-colors.scss | 8 +- .../scss/00-base/mixins/_ma-button.scss | 28 +++---- .../00-base/mixins/_ma-emergency-alert.scss | 2 +- .../00-base/mixins/_ma-emergency-header.scss | 12 +-- .../mixins/_ma-truncated-body-text.scss | 4 +- .../assets/scss/01-atoms/_arrow-button.scss | 2 +- .../assets/scss/01-atoms/_button-search.scss | 4 +- .../assets/scss/01-atoms/_button-sort.scss | 12 +-- .../assets/scss/01-atoms/_button-tag.scss | 4 +- .../assets/scss/01-atoms/_button-toggle.scss | 4 +- .../assets/scss/01-atoms/_category-icon.scss | 6 +- packages/assets/scss/01-atoms/_checklist.scss | 2 +- .../01-atoms/_colored-heading-from-left.scss | 12 +-- .../scss/01-atoms/_colored-heading.scss | 4 +- .../assets/scss/01-atoms/_content-link.scss | 8 +- .../scss/01-atoms/_decorative-link.scss | 10 +-- packages/assets/scss/01-atoms/_divider.scss | 4 +- packages/assets/scss/01-atoms/_email.scss | 2 +- packages/assets/scss/01-atoms/_error-msg.scss | 4 +- packages/assets/scss/01-atoms/_figure.scss | 8 +- .../scss/01-atoms/_fixed-feedback-button.scss | 6 +- .../assets/scss/01-atoms/_footnote-link.scss | 2 +- packages/assets/scss/01-atoms/_footnote.scss | 4 +- packages/assets/scss/01-atoms/_forms.scss | 24 +++--- .../assets/scss/01-atoms/_input--button.scss | 10 +-- .../assets/scss/01-atoms/_input-checkbox.scss | 8 +- .../assets/scss/01-atoms/_input-fuzzy.scss | 6 +- .../assets/scss/01-atoms/_input-number.scss | 6 +- .../assets/scss/01-atoms/_input-radio.scss | 32 ++++---- .../scss/01-atoms/_input-typeahead.scss | 16 ++-- .../assets/scss/01-atoms/_phone-number.scss | 2 +- .../assets/scss/01-atoms/_publish-state.scss | 2 +- .../assets/scss/01-atoms/_select-box.scss | 14 ++-- packages/assets/scss/01-atoms/_site-logo.scss | 4 +- .../scss/01-atoms/_table-responsive.scss | 12 +-- packages/assets/scss/01-atoms/_table.scss | 12 +-- .../scss/02-molecules/_accordion-item.scss | 20 ++--- .../scss/02-molecules/_action-event.scss | 2 +- .../scss/02-molecules/_action-step.scss | 8 +- .../assets/scss/02-molecules/_arrow-nav.scss | 4 +- .../scss/02-molecules/_back-button.scss | 10 +-- .../scss/02-molecules/_banner-credit.scss | 2 +- .../assets/scss/02-molecules/_breadcrumb.scss | 8 +- .../scss/02-molecules/_button-alert.scss | 4 +- .../scss/02-molecules/_button-dropdown.scss | 8 +- .../scss/02-molecules/_callout-stats.scss | 4 +- .../02-molecules/_campaign-feature-2up.scss | 2 +- packages/assets/scss/02-molecules/_card.scss | 18 ++--- .../02-molecules/_collapsible-header.scss | 8 +- .../scss/02-molecules/_contact-group.scss | 4 +- .../assets/scss/02-molecules/_contact-us.scss | 18 ++--- .../scss/02-molecules/_download-link.scss | 6 +- .../assets/scss/02-molecules/_error-list.scss | 10 +-- .../scss/02-molecules/_event-filters.scss | 2 +- .../scss/02-molecules/_event-teaser.scss | 6 +- .../scss/02-molecules/_featured-item.scss | 10 +-- .../scss/02-molecules/_footer-links.scss | 6 +- .../assets/scss/02-molecules/_footnote.scss | 6 +- .../scss/02-molecules/_general-teaser.scss | 12 +-- .../scss/02-molecules/_header-contact.scss | 8 +- .../scss/02-molecules/_header-search.scss | 16 ++-- .../scss/02-molecules/_header-tags.scss | 6 +- .../assets/scss/02-molecules/_icon-link.scss | 2 +- .../scss/02-molecules/_illustrated-link.scss | 12 +-- .../assets/scss/02-molecules/_image-link.scss | 6 +- .../scss/02-molecules/_image-promo.scss | 8 +- .../scss/02-molecules/_info-window.scss | 4 +- .../scss/02-molecules/_input-radio-group.scss | 2 +- .../scss/02-molecules/_keyword-search.scss | 10 +-- .../scss/02-molecules/_labelled-list.scss | 2 +- .../scss/02-molecules/_link-dropdown.scss | 4 +- .../scss/02-molecules/_listing-table.scss | 6 +- .../scss/02-molecules/_location-filters.scss | 4 +- .../scss/02-molecules/_location-icons.scss | 4 +- .../02-molecules/_main-nav-hamburger.scss | 24 +++--- .../assets/scss/02-molecules/_main-nav.scss | 34 ++++---- .../assets/scss/02-molecules/_map-google.scss | 4 +- .../scss/02-molecules/_map-leaflet.scss | 10 +-- .../02-molecules/_multiselect-dropdown.scss | 6 +- .../assets/scss/02-molecules/_page-intro.scss | 2 +- .../assets/scss/02-molecules/_pagination.scss | 18 ++--- .../assets/scss/02-molecules/_popover.scss | 20 ++--- .../scss/02-molecules/_press-status.scss | 6 +- .../scss/02-molecules/_press-teaser.scss | 8 +- .../scss/02-molecules/_radio-scale.scss | 12 +-- .../scss/02-molecules/_related-action.scss | 2 +- .../_relationship-indicators.scss | 18 ++--- .../scss/02-molecules/_results-heading.scss | 2 +- .../_secondary-nav-hamburger.scss | 30 +++---- .../scss/02-molecules/_secondary-nav.scss | 30 +++---- .../scss/02-molecules/_section-links.scss | 28 +++---- .../scss/02-molecules/_social-links.scss | 18 ++--- .../assets/scss/02-molecules/_sticky-nav.scss | 36 ++++----- packages/assets/scss/02-molecules/_tabs.scss | 6 +- packages/assets/scss/02-molecules/_tags.scss | 2 +- .../assets/scss/02-molecules/_wait-time.scss | 6 +- .../scss/03-organisms/_about-section.scss | 4 +- .../scss/03-organisms/_action-card.scss | 26 +++---- .../scss/03-organisms/_action-details.scss | 14 ++-- .../scss/03-organisms/_action-finder.scss | 26 +++---- .../scss/03-organisms/_banner-carousel.scss | 8 +- .../assets/scss/03-organisms/_blog-feed.scss | 4 +- .../_blogpost-collection-header.scss | 12 +-- .../scss/03-organisms/_breadcrumbs.scss | 36 ++++----- .../scss/03-organisms/_callout-alert.scss | 14 ++-- .../scss/03-organisms/_callout-message.scss | 4 +- .../scss/03-organisms/_callout-time.scss | 4 +- .../assets/scss/03-organisms/_callout.scss | 6 +- .../assets/scss/03-organisms/_change-log.scss | 2 +- .../scss/03-organisms/_collage-header.scss | 8 +- .../03-organisms/_collapsible-content.scss | 10 +-- .../scss/03-organisms/_collection-header.scss | 8 +- .../scss/03-organisms/_contact-row.scss | 2 +- .../scss/03-organisms/_content-eyebrow.scss | 2 +- .../scss/03-organisms/_curated-person.scss | 10 +-- .../assets/scss/03-organisms/_error-page.scss | 6 +- .../scss/03-organisms/_event-listing.scss | 14 ++-- .../scss/03-organisms/_feedback-form.scss | 6 +- .../assets/scss/03-organisms/_filter-box.scss | 10 +-- .../scss/03-organisms/_footer-slim.scss | 6 +- .../03-organisms/_footer-with-columns.scss | 6 +- .../assets/scss/03-organisms/_footer.scss | 6 +- .../scss/03-organisms/_footnote-list.scss | 2 +- .../scss/03-organisms/_form-requirements.scss | 4 +- .../assets/scss/03-organisms/_gen-teaser.scss | 32 ++++---- .../scss/03-organisms/_header-alerts.scss | 16 ++-- .../scss/03-organisms/_header-hamburger.scss | 62 +++++++-------- .../scss/03-organisms/_header-slim.scss | 12 +-- .../assets/scss/03-organisms/_header.scss | 42 +++++----- .../assets/scss/03-organisms/_help-tip.scss | 78 +++++++++---------- .../03-organisms/_illustrated-header.scss | 12 +-- .../scss/03-organisms/_image-credit.scss | 2 +- .../scss/03-organisms/_image-link-list.scss | 6 +- .../scss/03-organisms/_in-page-alert.scss | 4 +- .../scss/03-organisms/_inline-links.scss | 14 ++-- .../assets/scss/03-organisms/_jump-links.scss | 20 ++--- .../assets/scss/03-organisms/_link-list.scss | 6 +- .../scss/03-organisms/_location-listing.scss | 10 +-- .../scss/03-organisms/_mapped-locations.scss | 2 +- .../03-organisms/_mass-feedback-form.scss | 12 +-- .../03-organisms/_page-banner-legacy.scss | 44 +++++------ .../scss/03-organisms/_page-flipper.scss | 4 +- .../03-organisms/_page-header-addons.scss | 4 +- .../scss/03-organisms/_page-header.scss | 8 +- .../scss/03-organisms/_person-card.scss | 12 +-- .../scss/03-organisms/_personal-message.scss | 4 +- .../scss/03-organisms/_press-filters.scss | 10 +-- .../scss/03-organisms/_press-listing.scss | 8 +- .../assets/scss/03-organisms/_pullquote.scss | 4 +- .../scss/03-organisms/_quick-actions.scss | 2 +- .../scss/03-organisms/_related-locations.scss | 10 +-- .../_related-orgs-and-topics.scss | 8 +- .../assets/scss/03-organisms/_rich-text.scss | 8 +- .../scss/03-organisms/_search-banner.scss | 34 ++++---- .../03-organisms/_search-box-with-links.scss | 12 +-- .../scss/03-organisms/_sidebar-widget.scss | 2 +- .../assets/scss/03-organisms/_split50.scss | 4 +- .../03-organisms/_stacked-row-section.scss | 4 +- .../scss/03-organisms/_steps-ordered.scss | 2 +- .../assets/scss/03-organisms/_sticky-toc.scss | 54 ++++++------- .../scss/03-organisms/_suggested-pages.scss | 8 +- .../scss/03-organisms/_tab-container.scss | 24 +++--- .../_table-of-contents-hierarchy.scss | 20 ++--- .../_table-of-contents-overlay.scss | 20 ++--- .../03-organisms/_teaser-listing-group.scss | 2 +- .../scss/03-organisms/_teaser-listing.scss | 6 +- .../assets/scss/03-organisms/_teaser.scss | 26 +++---- .../assets/scss/03-organisms/_test-feed.scss | 4 +- .../scss/03-organisms/_top-actions.scss | 6 +- .../scss/03-organisms/_transition-page.scss | 2 +- .../scss/03-organisms/_utility-nav.scss | 46 +++++------ .../scss/03-organisms/_utility-panel.scss | 8 +- .../assets/scss/04-templates/_form-page.scss | 2 +- .../assets/scss/04-templates/_services.scss | 4 +- packages/assets/scss/08-print/_print.scss | 16 ++-- 178 files changed, 971 insertions(+), 971 deletions(-) diff --git a/packages/assets/scss/00-base/_elements.scss b/packages/assets/scss/00-base/_elements.scss index 090042882c..1d392cc77a 100644 --- a/packages/assets/scss/00-base/_elements.scss +++ b/packages/assets/scss/00-base/_elements.scss @@ -35,7 +35,7 @@ body { margin: 0; font-size: $fonts-medium; //16px line-height: 1.6; - color: $c-font-base; + color: var(--mf-c-font-base); font-family: $fonts; font-weight: $fonts-light; @@ -48,7 +48,7 @@ a { @include ma-link-transition; font-weight: $fonts-bold; - color: $c-font-link; + color: var(--mf-c-font-link); } address { @@ -133,7 +133,7 @@ ol { @for $i from 1 through 6 { h#{$i}, .ma__h#{$i} { margin-top: 0; - color: $c-font-heading; + color: var(--mf-c-font-heading); @include ma-heading($i); } diff --git a/packages/assets/scss/00-base/_pikaday.scss b/packages/assets/scss/00-base/_pikaday.scss index 69b07348ff..40e063bf4e 100644 --- a/packages/assets/scss/00-base/_pikaday.scss +++ b/packages/assets/scss/00-base/_pikaday.scss @@ -17,36 +17,36 @@ } .pika-label { - color: $c-font-dark; + color: var(--mf-c-font-dark); font-size: $fonts-small; } .pika-table { th { - color: $c-font-dark; + color: var(--mf-c-font-dark); font-size: $fonts-xsmall; } } .pika-button { - background-color: $c-bg-section; - color: $c-font-base; + background-color: var(--mf-c-bg-section); + color: var(--mf-c-font-base); font-size: $fonts-xsmall; font-weight: $fonts-normal; text-align: center; .is-today & { - color: $c-primary; + color: var(--mf-c-primary); font-weight: $fonts-bolder; &:hover { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } } .is-disabled & { - color: $c-font-base; + color: var(--mf-c-font-base); opacity: .5; } @@ -56,12 +56,12 @@ } .is-selected & { - background-color: $c-primary; + background-color: var(--mf-c-primary); box-shadow: none; border-radius: 0; } .is-today.is-selected & { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } } diff --git a/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss b/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss index 6132223c68..cff7ab8c14 100644 --- a/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss +++ b/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss @@ -6,7 +6,7 @@ &:after { content: "+"; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); display: block; font-size: 1.6em; font-weight: $fonts-semibold; diff --git a/packages/assets/scss/00-base/mixins/_ma-background-colors.scss b/packages/assets/scss/00-base/mixins/_ma-background-colors.scss index b910e6b02a..2ead301f9e 100644 --- a/packages/assets/scss/00-base/mixins/_ma-background-colors.scss +++ b/packages/assets/scss/00-base/mixins/_ma-background-colors.scss @@ -31,12 +31,12 @@ background-color: $c; @if $class != "c-highlight" { - color: $c-white; + color: var(--mf-c-white); & > * { - fill: $c-white !important; - color: $c-white !important; - border-color: $c-white !important; + fill: var(--mf-c-white) !important; + color: var(--mf-c-white) !important; + border-color: var(--mf-c-white) !important; } } } diff --git a/packages/assets/scss/00-base/mixins/_ma-button.scss b/packages/assets/scss/00-base/mixins/_ma-button.scss index b19b42f57a..f0fe55f19f 100644 --- a/packages/assets/scss/00-base/mixins/_ma-button.scss +++ b/packages/assets/scss/00-base/mixins/_ma-button.scss @@ -28,34 +28,34 @@ } @if $color == $c-white { - color: $c-primary; + color: var(--mf-c-primary); svg { - fill: $c-primary; + fill: var(--mf-c-primary); } &:hover:not(:disabled) { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } } @else if $color == $c-highlight { - color: $c-gray-darkest; + color: var(--mf-c-gray-darkest); svg { - fill: $c-gray-darkest; + fill: var(--mf-c-gray-darkest); } } @else { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } } // outline - secondary usage @else { - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); border-color: rgba($color,.5); &:hover:not(:disabled) { @@ -63,18 +63,18 @@ } @if $color == $c-highlight { - color: $c-gray-darkest; + color: var(--mf-c-gray-darkest); border-color: rgba($c-highlight,.5); svg { - fill: $c-gray-darkest; + fill: var(--mf-c-gray-darkest); } &:hover:not(:disabled) { - color: $c-gray-darkest; + color: var(--mf-c-gray-darkest); svg { - fill: $c-gray-darkest; + fill: var(--mf-c-gray-darkest); } } @@ -86,10 +86,10 @@ } &:hover:not(:disabled) { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } } diff --git a/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss b/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss index 6073bb02a7..80ed65b848 100644 --- a/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss +++ b/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss @@ -7,7 +7,7 @@ @use "sass:color" as *; @mixin ma-emergency-alert ($color) { - color: $c-font-base; + color: var(--mf-c-font-base); background-color: mix($c-bg, $color, 90%); & + & { diff --git a/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss b/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss index 01bd9a6dc8..5d34f17107 100644 --- a/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss +++ b/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss @@ -5,10 +5,10 @@ @mixin ma-emergency-header ($color: $c-highlight) { @if $color == $c-highlight { - color: $c-font-base; + color: var(--mf-c-font-base); } @else { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } background-color: rgba($color, 1); border-color: rgba($color, 1); @@ -23,11 +23,11 @@ fill: $c-font-base; } } @else { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); border-right-color: rgba($c-font-inverse,.3); svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } @@ -39,7 +39,7 @@ @if $color == $c-highlight { .ma__content-link { - color: $c-font-base; + color: var(--mf-c-font-base); border-bottom: 1px solid rgba($c-font-base, .5); &:hover { @@ -49,7 +49,7 @@ } @else { .ma__content-link { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); border-bottom: 1px solid rgba($c-font-inverse, .5); &:hover { diff --git a/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss b/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss index 61ea7b70dc..413362b884 100644 --- a/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss +++ b/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss @@ -62,11 +62,11 @@ background: transparent; border: 0; font-weight: $fonts-bold; - color: $c-primary; + color: var(--mf-c-primary); &::after { transform: translateY(-35%) rotate(45deg); - color: $c-link; + color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/01-atoms/_arrow-button.scss b/packages/assets/scss/01-atoms/_arrow-button.scss index 2a96db51e7..9901687586 100644 --- a/packages/assets/scss/01-atoms/_arrow-button.scss +++ b/packages/assets/scss/01-atoms/_arrow-button.scss @@ -44,6 +44,6 @@ @include ma-button("solid",$c-primary); &:after { - border-color: $c-font-inverse; + border-color: var(--mf-c-font-inverse); } } diff --git a/packages/assets/scss/01-atoms/_button-search.scss b/packages/assets/scss/01-atoms/_button-search.scss index ca537359a5..536191ecbe 100644 --- a/packages/assets/scss/01-atoms/_button-search.scss +++ b/packages/assets/scss/01-atoms/_button-search.scss @@ -26,7 +26,7 @@ background-color: $background-color; @if $background-color==$c-white { - border-color: $c-bd-input !important; + border-color: var(--mf-c-bd-input) !important; } @else { border-color: $background-color !important; } @@ -39,7 +39,7 @@ background-color: $color; @if $color==$c-white { - border-color: $c-bd-input !important; + border-color: var(--mf-c-bd-input) !important; } @else { border-color: $color !important; } diff --git a/packages/assets/scss/01-atoms/_button-sort.scss b/packages/assets/scss/01-atoms/_button-sort.scss index 56111d556e..9f397ab99e 100644 --- a/packages/assets/scss/01-atoms/_button-sort.scss +++ b/packages/assets/scss/01-atoms/_button-sort.scss @@ -36,27 +36,27 @@ //theme .ma__button-sort { - color: $c-font-link; + color: var(--mf-c-font-link); font-weight: $fonts-bold; &--asc, &--dsc { - color: $c-font-base; + color: var(--mf-c-font-base); } &:before { - border-bottom-color: $c-font-link; + border-bottom-color: var(--mf-c-font-link); } &--asc:before { - border-bottom-color: $c-gray; + border-bottom-color: var(--mf-c-gray); } &:after { - border-top-color: $c-font-link; + border-top-color: var(--mf-c-font-link); } &--dsc:after { - border-top-color: $c-gray; + border-top-color: var(--mf-c-gray); } } diff --git a/packages/assets/scss/01-atoms/_button-tag.scss b/packages/assets/scss/01-atoms/_button-tag.scss index ebf7370883..0aea63e790 100644 --- a/packages/assets/scss/01-atoms/_button-tag.scss +++ b/packages/assets/scss/01-atoms/_button-tag.scss @@ -12,7 +12,7 @@ padding: 8px 11px; white-space: nowrap; background-color: mix($c-bg, $c-font-link,90%); - color: $c-font-link; + color: var(--mf-c-font-link); font-weight: $fonts-bold; &__icon { @@ -23,7 +23,7 @@ margin-top: -1px; transform: rotate(135deg); vertical-align: middle; - color: $c-font-link; + color: var(--mf-c-font-link); // stop event bubbling from the span inside the button pointer-events: none; } diff --git a/packages/assets/scss/01-atoms/_button-toggle.scss b/packages/assets/scss/01-atoms/_button-toggle.scss index eb085d575f..dd296e8f6d 100644 --- a/packages/assets/scss/01-atoms/_button-toggle.scss +++ b/packages/assets/scss/01-atoms/_button-toggle.scss @@ -14,10 +14,10 @@ //theme .ma__button-toggle { - color: $c-font-link; + color: var(--mf-c-font-link); &--selected { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; pointer-events: none; } diff --git a/packages/assets/scss/01-atoms/_category-icon.scss b/packages/assets/scss/01-atoms/_category-icon.scss index ea5ce6f796..cf0e480c17 100644 --- a/packages/assets/scss/01-atoms/_category-icon.scss +++ b/packages/assets/scss/01-atoms/_category-icon.scss @@ -47,14 +47,14 @@ //theme .ma__category-icon { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); svg, svg > g { - fill: $c-white; + fill: var(--mf-c-white); } &:after { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/01-atoms/_checklist.scss b/packages/assets/scss/01-atoms/_checklist.scss index c2dcf5c028..1fed91a206 100644 --- a/packages/assets/scss/01-atoms/_checklist.scss +++ b/packages/assets/scss/01-atoms/_checklist.scss @@ -29,6 +29,6 @@ .ma__checklist { li:before { - border-color: $c-bd-input; + border-color: var(--mf-c-bd-input); } } \ No newline at end of file diff --git a/packages/assets/scss/01-atoms/_colored-heading-from-left.scss b/packages/assets/scss/01-atoms/_colored-heading-from-left.scss index e004bf3c55..0171cfcee5 100644 --- a/packages/assets/scss/01-atoms/_colored-heading-from-left.scss +++ b/packages/assets/scss/01-atoms/_colored-heading-from-left.scss @@ -15,18 +15,18 @@ } &--blue { - background-color: $c-primary; + background-color: var(--mf-c-primary); &:before { - background-color: $c-primary; + background-color: var(--mf-c-primary); } } &--green { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); &:before { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } } @@ -35,7 +35,7 @@ @include ma-border-decorative; margin-top: 0px; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); margin-right: 0; padding: 25px 20px 20px 0; transform: skew(30deg); @@ -49,7 +49,7 @@ padding-bottom: 15px; &:after { - background-color: $c-highlight; + background-color: var(--mf-c-highlight); } } diff --git a/packages/assets/scss/01-atoms/_colored-heading.scss b/packages/assets/scss/01-atoms/_colored-heading.scss index 1453a28b9d..01daf42807 100644 --- a/packages/assets/scss/01-atoms/_colored-heading.scss +++ b/packages/assets/scss/01-atoms/_colored-heading.scss @@ -24,10 +24,10 @@ @include ma-heading-colored($c-bg-comp-title); &--green { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } &--blue { - background-color: $c-primary; + background-color: var(--mf-c-primary); } } \ No newline at end of file diff --git a/packages/assets/scss/01-atoms/_content-link.scss b/packages/assets/scss/01-atoms/_content-link.scss index 189aa346ba..e222948603 100644 --- a/packages/assets/scss/01-atoms/_content-link.scss +++ b/packages/assets/scss/01-atoms/_content-link.scss @@ -38,20 +38,20 @@ //theme .ma__content-link { - color: $c-font-link; + color: var(--mf-c-font-link); &:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } &--chevron { &:after { - border-color: $c-link; + border-color: var(--mf-c-link); } span:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/01-atoms/_decorative-link.scss b/packages/assets/scss/01-atoms/_decorative-link.scss index d6d3cf7511..370c379032 100644 --- a/packages/assets/scss/01-atoms/_decorative-link.scss +++ b/packages/assets/scss/01-atoms/_decorative-link.scss @@ -8,22 +8,22 @@ width: 100%; a:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } a:focus { // important needed to overwrite the focus border color - border-bottom-color: $c-link !important; + border-bottom-color: var(--mf-c-link) !important; } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); } &--inverse { a { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } a:hover { @@ -45,7 +45,7 @@ display: inline-block; width: auto; padding: .5rem 1.8rem .5rem .8rem; - background-color: $c-bg; + background-color: var(--mf-c-bg); &:hover, &:focus { diff --git a/packages/assets/scss/01-atoms/_divider.scss b/packages/assets/scss/01-atoms/_divider.scss index 1164395110..6c67441bfe 100644 --- a/packages/assets/scss/01-atoms/_divider.scss +++ b/packages/assets/scss/01-atoms/_divider.scss @@ -35,13 +35,13 @@ .ma__divider { &:after { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } &--thin { &:after { - background-color: $c-overcast-gray; + background-color: var(--mf-c-overcast-gray); } } } diff --git a/packages/assets/scss/01-atoms/_email.scss b/packages/assets/scss/01-atoms/_email.scss index c50e3d2e1c..e2b5eeb2a7 100644 --- a/packages/assets/scss/01-atoms/_email.scss +++ b/packages/assets/scss/01-atoms/_email.scss @@ -4,7 +4,7 @@ &__email { font-weight: $fonts-bold; - color: $c-font-link; + color: var(--mf-c-font-link); text-decoration: none; } diff --git a/packages/assets/scss/01-atoms/_error-msg.scss b/packages/assets/scss/01-atoms/_error-msg.scss index d34dd2f601..bfbb13d8ce 100644 --- a/packages/assets/scss/01-atoms/_error-msg.scss +++ b/packages/assets/scss/01-atoms/_error-msg.scss @@ -17,11 +17,11 @@ &.has-error { display: flex; - color: $c-font-error; + color: var(--mf-c-font-error); &.ma__error-msg--success { display: flex; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } } } \ No newline at end of file diff --git a/packages/assets/scss/01-atoms/_figure.scss b/packages/assets/scss/01-atoms/_figure.scss index 38529d2b72..20a38822db 100644 --- a/packages/assets/scss/01-atoms/_figure.scss +++ b/packages/assets/scss/01-atoms/_figure.scss @@ -334,10 +334,10 @@ $figures-gutter: 20px; // caption &__caption { - color: $c-font-detail; + color: var(--mf-c-font-detail); font-weight: bold; font-style: normal; - border-bottom: 1px solid $c-gray-darkest; + border-bottom: 1px solid var(--mf-c-gray-darkest); padding: 10px 0; @media ($bp-small-min) { @@ -382,10 +382,10 @@ $figures-gutter: 20px; text-decoration: underline; height: auto; width: auto; - color: $c-bay-blue; + color: var(--mf-c-bay-blue); &:visited { - color: $c-visited; + color: var(--mf-c-visited); } } diff --git a/packages/assets/scss/01-atoms/_fixed-feedback-button.scss b/packages/assets/scss/01-atoms/_fixed-feedback-button.scss index ac20c08f78..b88068aff4 100644 --- a/packages/assets/scss/01-atoms/_fixed-feedback-button.scss +++ b/packages/assets/scss/01-atoms/_fixed-feedback-button.scss @@ -4,8 +4,8 @@ border-style: solid; border-width: 4px 4px 0 4px; border-radius: 5px 5px 0 0; - border-color: $c-primary-alt; - background-color: $c-bg; + border-color: var(--mf-c-primary-alt); + background-color: var(--mf-c-bg); display: inline-block; padding: 0 10px; margin-top: 0 !important; @@ -20,7 +20,7 @@ z-index: $z-feedback-button; a { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-size: $fonts-larger; font-weight: $fonts-normal; text-decoration: none; diff --git a/packages/assets/scss/01-atoms/_footnote-link.scss b/packages/assets/scss/01-atoms/_footnote-link.scss index 72ae6d9dfb..a20448c3f7 100644 --- a/packages/assets/scss/01-atoms/_footnote-link.scss +++ b/packages/assets/scss/01-atoms/_footnote-link.scss @@ -6,7 +6,7 @@ transition: all 0.4s ease; display: inline-flex; - color: $c-font-link; + color: var(--mf-c-font-link); font-size: $fonts-medium; font-weight: $fonts-bold; line-height: 1; diff --git a/packages/assets/scss/01-atoms/_footnote.scss b/packages/assets/scss/01-atoms/_footnote.scss index 08cc8d699e..5c759004ce 100644 --- a/packages/assets/scss/01-atoms/_footnote.scss +++ b/packages/assets/scss/01-atoms/_footnote.scss @@ -17,7 +17,7 @@ cursor: pointer; font-weight: $fonts-light; font-size: $fonts-medium; - color: $c-font-link; + color: var(--mf-c-font-link); a { font-weight: $fonts-normal; @@ -28,7 +28,7 @@ &:after { content: "\2191"; line-height: 1; - color: $c-font-link; + color: var(--mf-c-font-link); margin-left: .25em; } diff --git a/packages/assets/scss/01-atoms/_forms.scss b/packages/assets/scss/01-atoms/_forms.scss index ea91edcb51..43ff3248f0 100644 --- a/packages/assets/scss/01-atoms/_forms.scss +++ b/packages/assets/scss/01-atoms/_forms.scss @@ -7,25 +7,25 @@ input { } &.has-error { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); border-width: 3px; } .ma__form--light & { background-color: rgba($c-bg, 0.1); border-color: rgba($c-bd-input,.5); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &.has-error { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } } } input { - background-color: $c-bg; - border: 2px solid $c-bd-input; - color: $c-font-base; + background-color: var(--mf-c-bg); + border: 2px solid var(--mf-c-bd-input); + color: var(--mf-c-font-base); font-size: $fonts-large; font-weight: $fonts-light; max-width: 100%; @@ -66,8 +66,8 @@ input[type=number]::-webkit-outer-spin-button { } textarea { - background-color: $c-bg; - border: 2px solid $c-bd-input; + background-color: var(--mf-c-bg); + border: 2px solid var(--mf-c-bd-input); outline: none; font-size: $fonts-large; font-weight: $fonts-light; @@ -76,17 +76,17 @@ textarea { padding: 18px; &.has-error { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); border-width: 3px; } .ma__form--light & { background-color: rgba($c-bg, 0.1); border-color: rgba($c-bd-input, 0.5); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &.has-error { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } } } @@ -138,7 +138,7 @@ select { } :focus { - border-color: $c-focus-hightlight; + border-color: var(--mf-c-focus-hightlight); } // Chrome/Opera/Safari. diff --git a/packages/assets/scss/01-atoms/_input--button.scss b/packages/assets/scss/01-atoms/_input--button.scss index 98b48c1be5..3ecb83d8b0 100644 --- a/packages/assets/scss/01-atoms/_input--button.scss +++ b/packages/assets/scss/01-atoms/_input--button.scss @@ -8,11 +8,11 @@ &-unit { - border: 2px solid $c-bd-input; + border: 2px solid var(--mf-c-bd-input); padding-right: 5px; padding-top: 4px; border-left: none; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); &--showButtons { border-right: none; @@ -40,20 +40,20 @@ } input.has-error { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } &-plus, &-minus { @include ma-button-reset; - border: 2px solid $c-bd-input; + border: 2px solid var(--mf-c-bd-input); border-bottom: none; height: 50%; width: 40px; &:after { - border: 5px solid $c-gray-darkest; + border: 5px solid var(--mf-c-gray-darkest); border-top: none; border-bottom-width: 6px; content: ""; diff --git a/packages/assets/scss/01-atoms/_input-checkbox.scss b/packages/assets/scss/01-atoms/_input-checkbox.scss index 207b6f20b3..39ded9e8ec 100644 --- a/packages/assets/scss/01-atoms/_input-checkbox.scss +++ b/packages/assets/scss/01-atoms/_input-checkbox.scss @@ -77,15 +77,15 @@ .ma__input-checkbox { & > svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } label { font-weight: $fonts-light; &:before { - background-color: $c-bg; - border-color: $c-bd-input-dark; + background-color: var(--mf-c-bg); + border-color: var(--mf-c-bd-input-dark); .ma__form--light & { background-color: rgba($c-bg, 0.1); @@ -95,7 +95,7 @@ } input.has-error ~ label:before { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } input:focus ~ label:before { diff --git a/packages/assets/scss/01-atoms/_input-fuzzy.scss b/packages/assets/scss/01-atoms/_input-fuzzy.scss index 1bfafa2991..8b86fc110b 100644 --- a/packages/assets/scss/01-atoms/_input-fuzzy.scss +++ b/packages/assets/scss/01-atoms/_input-fuzzy.scss @@ -9,7 +9,7 @@ padding: 10px 20px; font-weight: $fonts-light; font-size: $fonts-large; - border: 2px solid $c-gray-light; + border: 2px solid var(--mf-c-gray-light); -webkit-appearance: none; &--focused { @@ -34,7 +34,7 @@ overflow: scroll; overflow-y: auto; box-shadow: 0 0.25rem 0.5rem rgba(1,1,1,0.2); - background: $c-bg;//$c-white; <-- THIS MIGHT BE INTENTIONALLY SET $c-white. + background: var(--mf-c-bg);//$c-white; <-- THIS MIGHT BE INTENTIONALLY SET $c-white. } } @@ -49,6 +49,6 @@ padding: 10px 20px; &--highlighted { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } diff --git a/packages/assets/scss/01-atoms/_input-number.scss b/packages/assets/scss/01-atoms/_input-number.scss index a02e5f8877..fa4cdd1c37 100644 --- a/packages/assets/scss/01-atoms/_input-number.scss +++ b/packages/assets/scss/01-atoms/_input-number.scss @@ -65,10 +65,10 @@ &__plus, &__minus { - border-color: $c-bd-input; + border-color: var(--mf-c-bd-input); &:after { - border-color: $c-gray-darkest; + border-color: var(--mf-c-gray-darkest); border-left-color: transparent; border-right-color: transparent; } @@ -76,6 +76,6 @@ input.has-error ~ &__plus, input.has-error ~ &__minus { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } } diff --git a/packages/assets/scss/01-atoms/_input-radio.scss b/packages/assets/scss/01-atoms/_input-radio.scss index abc1ce6c62..70d0958eaf 100644 --- a/packages/assets/scss/01-atoms/_input-radio.scss +++ b/packages/assets/scss/01-atoms/_input-radio.scss @@ -18,7 +18,7 @@ &:before { content: ''; border-radius: 100%; - border: 2px solid $c-bd-input-dark; + border: 2px solid var(--mf-c-bd-input-dark); display: inline-block; width: 1.4em; min-width: 1.4em; @@ -29,7 +29,7 @@ cursor: pointer; text-align: center; transition: all 250ms ease; - background-color: $c-bg; + background-color: var(--mf-c-bg); } } @@ -37,15 +37,15 @@ input:checked ~ &__label { &:before { - background-color: $c-primary; - box-shadow: inset 0 0 0 4px $c-white; + background-color: var(--mf-c-primary); + box-shadow: inset 0 0 0 4px var(--mf-c-white); } } input:focus ~ &__label { &:before { - box-shadow: inset 0 0 0 4px $c-white, 0 0 2px 2px $c-focus-hightlight; + box-shadow: inset 0 0 0 4px var(--mf-c-white), 0 0 2px 2px var(--mf-c-focus-hightlight); } } @@ -53,38 +53,38 @@ // patternlab input.has-error ~ &__label:before { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } // react input ~ &__label--error, input:checked ~ &__label--error { - color: $c-error; + color: var(--mf-c-error); &::before { - border-color: $c-error; + border-color: var(--mf-c-error); } } input:checked ~ &__label--error { &::before { - color: $c-error; + color: var(--mf-c-error); } } input:checked ~ &__label--error:before { - color: $c-error; + color: var(--mf-c-error); } input:focus ~ &__label:after { - box-shadow: 0 0 2px 2px $c-focus-hightlight; + box-shadow: 0 0 2px 2px var(--mf-c-focus-hightlight); } input:focus ~ &__label--error:before { - border-color: $c-error; - box-shadow: 0 0 2px 2px $c-error; + border-color: var(--mf-c-error); + box-shadow: 0 0 2px 2px var(--mf-c-error); } &__control:disabled + &__label { @@ -157,7 +157,7 @@ $control-height: 1.2rem; &::before { background-color: $background-color; border-color: $border-color; - box-shadow: 0 0 0 4px $c-white; + box-shadow: 0 0 0 4px var(--mf-c-white); } &::after { @@ -201,14 +201,14 @@ $control-height: 1.2rem; &__control:disabled + &__label { pointer-events: none; cursor: not-allowed; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); opacity: 0.5; } &__control--error:disabled + &__label--error { pointer-events: none; cursor: not-allowed; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); opacity: 0.5; } diff --git a/packages/assets/scss/01-atoms/_input-typeahead.scss b/packages/assets/scss/01-atoms/_input-typeahead.scss index c9252f1a4a..fe631d84ba 100644 --- a/packages/assets/scss/01-atoms/_input-typeahead.scss +++ b/packages/assets/scss/01-atoms/_input-typeahead.scss @@ -4,7 +4,7 @@ font-size: $fonts-medium; .highlight { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-weight: bold; } @@ -23,14 +23,14 @@ padding: 0px; li { - border: 1px solid $c-gray-light; + border: 1px solid var(--mf-c-gray-light); width: 100%; padding: 0px 18px; } } &--boxed { - border: 1px solid $c-gray-light; + border: 1px solid var(--mf-c-gray-light); input { margin: .75rem; @@ -39,11 +39,11 @@ } &--disabled { - color: $c-gray; + color: var(--mf-c-gray); input { - background-color: $c-gray-lightest; - color: $c-gray; + background-color: var(--mf-c-gray-lightest); + color: var(--mf-c-gray); } } } @@ -75,7 +75,7 @@ input[type=search] { } &--highlighted { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } @@ -90,7 +90,7 @@ input[type=search] { max-height: 15.6em; overflow-y: auto; box-shadow: 0 0.25rem 0.5rem rgba(1,1,1,0.2); - background: $c-bg; + background: var(--mf-c-bg); } } } diff --git a/packages/assets/scss/01-atoms/_phone-number.scss b/packages/assets/scss/01-atoms/_phone-number.scss index 48f76f1291..ad411517ee 100644 --- a/packages/assets/scss/01-atoms/_phone-number.scss +++ b/packages/assets/scss/01-atoms/_phone-number.scss @@ -4,7 +4,7 @@ &__number { font-weight: $fonts-bold; - color: $c-font-link; + color: var(--mf-c-font-link); text-decoration: none; } diff --git a/packages/assets/scss/01-atoms/_publish-state.scss b/packages/assets/scss/01-atoms/_publish-state.scss index 77cf6f797d..a4ad5873d7 100644 --- a/packages/assets/scss/01-atoms/_publish-state.scss +++ b/packages/assets/scss/01-atoms/_publish-state.scss @@ -30,6 +30,6 @@ //theme .ma__publish-state { - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/01-atoms/_select-box.scss b/packages/assets/scss/01-atoms/_select-box.scss index 2e4e1b8b1d..b6964fe721 100644 --- a/packages/assets/scss/01-atoms/_select-box.scss +++ b/packages/assets/scss/01-atoms/_select-box.scss @@ -89,13 +89,13 @@ } &__select { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-light; } &__link { - background-color: $c-bg; - border-color: $c-bd-input; + background-color: var(--mf-c-bg); + border-color: var(--mf-c-bd-input); .ma__form--light & { background-color: rgba($c-bg,.1); @@ -104,11 +104,11 @@ } &__select.has-error ~ &__link { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } &__icon { - border-color: $c-bd-input; + border-color: var(--mf-c-bd-input); .ma__form--light & { border-color: rgba($c-bd-input,.5); @@ -116,7 +116,7 @@ } &__select.has-error ~ &__link &__icon { - border-color: $c-bd-error; + border-color: var(--mf-c-bd-error); } &__select:focus + &__link { @@ -131,6 +131,6 @@ } &__disabled { - background-color: $c-overcast-gray; + background-color: var(--mf-c-overcast-gray); } } diff --git a/packages/assets/scss/01-atoms/_site-logo.scss b/packages/assets/scss/01-atoms/_site-logo.scss index 9fe8c4a76e..731c6af23c 100644 --- a/packages/assets/scss/01-atoms/_site-logo.scss +++ b/packages/assets/scss/01-atoms/_site-logo.scss @@ -27,10 +27,10 @@ span { font-weight: $fonts-light; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: $c-primary-alt; + -webkit-text-stroke-color: var(--mf-c-primary-alt); @media ($bp-small-max) { -webkit-text-stroke-width: 0.03rem; diff --git a/packages/assets/scss/01-atoms/_table-responsive.scss b/packages/assets/scss/01-atoms/_table-responsive.scss index c057489b45..51c419a033 100644 --- a/packages/assets/scss/01-atoms/_table-responsive.scss +++ b/packages/assets/scss/01-atoms/_table-responsive.scss @@ -41,7 +41,7 @@ background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-position: 0 0, 100%, 0 0, 100%; background-attachment: local, local, scroll, scroll; - border: 2px solid $c-gray-light; + border: 2px solid var(--mf-c-gray-light); overflow-x: auto; @media ($bp-medium-max) { @@ -50,16 +50,16 @@ } &[tabindex="0"]:focus { - outline: 3px solid $c-focus-hightlight; + outline: 3px solid var(--mf-c-focus-hightlight); outline-offset: 3px; } } .ma__table--responsive .sticky-thead { - background: $c-bg; + background: var(--mf-c-bg); border-collapse: collapse; - box-shadow: 0 0 0 2px $c-gray-light; + box-shadow: 0 0 0 2px var(--mf-c-gray-light); left: 0; opacity: 0; overflow: hidden; @@ -71,7 +71,7 @@ z-index: $z-sticky-header; &:before { - background: $c-bg; + background: var(--mf-c-bg); content: ''; height: 100vh; left: 0; @@ -121,5 +121,5 @@ border-collapse: collapse; border-spacing: 0; text-align: left; - box-shadow: 0 0 0 2px $c-gray-light; + box-shadow: 0 0 0 2px var(--mf-c-gray-light); } diff --git a/packages/assets/scss/01-atoms/_table.scss b/packages/assets/scss/01-atoms/_table.scss index 85c7c14f0a..b48752bf9b 100644 --- a/packages/assets/scss/01-atoms/_table.scss +++ b/packages/assets/scss/01-atoms/_table.scss @@ -7,7 +7,7 @@ .ma__table__caption, & td > table caption { - color: $c-font-heading; + color: var(--mf-c-font-heading); font-weight: $fonts-bold; line-height: 1.3; text-align: left; @@ -24,10 +24,10 @@ } thead { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); th { - color: $c-font-heading; + color: var(--mf-c-font-heading); border: none; font-size: $fonts-xlarge; line-height: 1.3; @@ -35,11 +35,11 @@ } tbody { - border-top: 2px solid $c-bd-divider; + border-top: 2px solid var(--mf-c-bd-divider); } tr + tr { - border-top: 1px solid $c-bd-divider; + border-top: 1px solid var(--mf-c-bd-divider); } th, td { @@ -57,7 +57,7 @@ } th { - color: $c-font-detail; + color: var(--mf-c-font-detail); } tr > *:first-child { diff --git a/packages/assets/scss/02-molecules/_accordion-item.scss b/packages/assets/scss/02-molecules/_accordion-item.scss index 8f1e099228..cdd10e681f 100644 --- a/packages/assets/scss/02-molecules/_accordion-item.scss +++ b/packages/assets/scss/02-molecules/_accordion-item.scss @@ -3,7 +3,7 @@ .ma__accordion { &-item { - border: 2px solid $c-gray-light; + border: 2px solid var(--mf-c-gray-light); &--borderless { border: none; @@ -29,7 +29,7 @@ overflow: hidden; transform-origin: center center; transition: transform .2s ease; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); transform: rotate(-90deg); } @@ -44,7 +44,7 @@ position: relative; text-align: left; width: 100%; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &--secondary { display: block; @@ -69,8 +69,8 @@ &:focus { - -webkit-box-shadow: 0 0 0 2px $c-focus; - box-shadow: 0 0 0 2px $c-focus; + -webkit-box-shadow: 0 0 0 2px var(--mf-c-focus); + box-shadow: 0 0 0 2px var(--mf-c-focus); } &--trans { @@ -84,15 +84,15 @@ &.is-open { margin-bottom: 22px; - border-bottom: 2px solid $c-gray-light; + border-bottom: 2px solid var(--mf-c-gray-light); } } &.is-open { &:focus { - -webkit-box-shadow: 0 0 0 1px $c-focus; - box-shadow: 0 0 0 1px $c-focus; + -webkit-box-shadow: 0 0 0 1px var(--mf-c-focus); + box-shadow: 0 0 0 1px var(--mf-c-focus); } &:after { @@ -110,7 +110,7 @@ top: 25px; transform-origin: center center; transition: transform .2s ease; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } } @@ -123,7 +123,7 @@ & > svg { height: 25px; width: 25px; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/02-molecules/_action-event.scss b/packages/assets/scss/02-molecules/_action-event.scss index d25c9f9220..810dc555e5 100644 --- a/packages/assets/scss/02-molecules/_action-event.scss +++ b/packages/assets/scss/02-molecules/_action-event.scss @@ -35,7 +35,7 @@ .ma__action-event { & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } &__date { diff --git a/packages/assets/scss/02-molecules/_action-step.scss b/packages/assets/scss/02-molecules/_action-step.scss index 91ee8b676b..b79356c299 100644 --- a/packages/assets/scss/02-molecules/_action-step.scss +++ b/packages/assets/scss/02-molecules/_action-step.scss @@ -112,11 +112,11 @@ .ma__action-step { &--accordion { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &--accordion:not(.is-open) &__header { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } &--accordion.is-open &__header { @@ -124,13 +124,13 @@ } &--accordion &__header__toggle { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } &__icon { svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/02-molecules/_arrow-nav.scss b/packages/assets/scss/02-molecules/_arrow-nav.scss index 494d7b122d..e95c3d8e4c 100644 --- a/packages/assets/scss/02-molecules/_arrow-nav.scss +++ b/packages/assets/scss/02-molecules/_arrow-nav.scss @@ -78,7 +78,7 @@ &__text { font-weight: $fonts-bold; - color: $c-font-link; + color: var(--mf-c-font-link); @media ($bp-small-max) { @@ -107,7 +107,7 @@ &__link { &:hover { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/02-molecules/_back-button.scss b/packages/assets/scss/02-molecules/_back-button.scss index f00acac48c..be04f86581 100644 --- a/packages/assets/scss/02-molecules/_back-button.scss +++ b/packages/assets/scss/02-molecules/_back-button.scss @@ -39,12 +39,12 @@ .ma__button { &:before { - border-color: $c-bay-blue-lighter; + border-color: var(--mf-c-bay-blue-lighter); transition: all 0.4s ease; } &:hover:before { - border-color: $c-font-inverse; + border-color: var(--mf-c-font-inverse); } } @@ -53,15 +53,15 @@ a:not(.ma__button) { @include ma-button("",$c-font-link); - border-color: $c-bay-blue-lighter; + border-color: var(--mf-c-bay-blue-lighter); &:before { - border-color: $c-bay-blue-lighter; + border-color: var(--mf-c-bay-blue-lighter); transition: all 0.4s ease; } &:hover:before { - border-color: $c-font-inverse; + border-color: var(--mf-c-font-inverse); } } } diff --git a/packages/assets/scss/02-molecules/_banner-credit.scss b/packages/assets/scss/02-molecules/_banner-credit.scss index 82bd3e758e..4d3cce4279 100644 --- a/packages/assets/scss/02-molecules/_banner-credit.scss +++ b/packages/assets/scss/02-molecules/_banner-credit.scss @@ -44,7 +44,7 @@ &__icon { & > svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } } diff --git a/packages/assets/scss/02-molecules/_breadcrumb.scss b/packages/assets/scss/02-molecules/_breadcrumb.scss index 1e27830f21..8e4aa2a724 100644 --- a/packages/assets/scss/02-molecules/_breadcrumb.scss +++ b/packages/assets/scss/02-molecules/_breadcrumb.scss @@ -16,7 +16,7 @@ &:last-child { a { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; cursor: text; pointer-events: none; @@ -31,7 +31,7 @@ } a { - color: $c-gray-dark; + color: var(--mf-c-gray-dark); font-weight: $fonts-normal; @include ma-link-transition; @@ -39,8 +39,8 @@ @include ma-link-underline; &:hover { - color: $c-primary; - border-bottom: 3px solid $c-bay-blue-lighter; + color: var(--mf-c-primary); + border-bottom: 3px solid var(--mf-c-bay-blue-lighter); } } } diff --git a/packages/assets/scss/02-molecules/_button-alert.scss b/packages/assets/scss/02-molecules/_button-alert.scss index bf85480830..0cc81b9dbb 100644 --- a/packages/assets/scss/02-molecules/_button-alert.scss +++ b/packages/assets/scss/02-molecules/_button-alert.scss @@ -14,8 +14,8 @@ padding-right: .8em; text-transform: uppercase; white-space: nowrap; - color: $c-font-inverse; - background-color: $c-gray-darkest; + color: var(--mf-c-font-inverse); + background-color: var(--mf-c-gray-darkest); box-shadow: $box-shadow; &:after { diff --git a/packages/assets/scss/02-molecules/_button-dropdown.scss b/packages/assets/scss/02-molecules/_button-dropdown.scss index 00b12031ea..0dfba829af 100644 --- a/packages/assets/scss/02-molecules/_button-dropdown.scss +++ b/packages/assets/scss/02-molecules/_button-dropdown.scss @@ -26,7 +26,7 @@ position: absolute; top: 100%; left: 0; - box-shadow: 0 0.25em 0.5rem $c-box-shadow-black; + box-shadow: 0 0.25em 0.5rem var(--mf-c-box-shadow-black); transition: visibility .5s ease, right .5s ease; z-index: $z-overlay; width: 260px; @@ -48,13 +48,13 @@ @include ma-reset-list; - background-color: $c-bg; + background-color: var(--mf-c-bg); } } .ma__button-dropdown__subitem { border-bottom: 1px solid; - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); .ma__button-dropdown__link { @@ -70,7 +70,7 @@ &:hover, &:focus { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); } } } diff --git a/packages/assets/scss/02-molecules/_callout-stats.scss b/packages/assets/scss/02-molecules/_callout-stats.scss index 13837dd689..240e02db03 100644 --- a/packages/assets/scss/02-molecules/_callout-stats.scss +++ b/packages/assets/scss/02-molecules/_callout-stats.scss @@ -76,11 +76,11 @@ } &__stat { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } &__content { - color: $c-font-base; + color: var(--mf-c-font-base); } } diff --git a/packages/assets/scss/02-molecules/_campaign-feature-2up.scss b/packages/assets/scss/02-molecules/_campaign-feature-2up.scss index 9d5a5728a6..07b123c4d9 100644 --- a/packages/assets/scss/02-molecules/_campaign-feature-2up.scss +++ b/packages/assets/scss/02-molecules/_campaign-feature-2up.scss @@ -15,7 +15,7 @@ &__card { flex: 1 1 auto; margin-bottom: 20px; - background-color: $c-platinum-gray; + background-color: var(--mf-c-platinum-gray); @media ($bp-small-min) { margin-bottom: 0; diff --git a/packages/assets/scss/02-molecules/_card.scss b/packages/assets/scss/02-molecules/_card.scss index add696598a..8e98a9e77c 100644 --- a/packages/assets/scss/02-molecules/_card.scss +++ b/packages/assets/scss/02-molecules/_card.scss @@ -1,7 +1,7 @@ @use "00-base/configure" as *; .ma__card { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); max-width: 1240px; display: flex; flex-flow: column; @@ -12,7 +12,7 @@ } &__wrapper { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: normal; width: 100%; display: flex; @@ -27,7 +27,7 @@ &:focus-within { .ma__card__title span { - border-block-end-color: $c-link; + border-block-end-color: var(--mf-c-link); } } @@ -104,7 +104,7 @@ &__title { text-decoration: none; font-weight: $fonts-bold; - color: $c-font-link; + color: var(--mf-c-font-link); span { border: 3px solid transparent; @@ -116,7 +116,7 @@ height: .6em; margin-right: -.8em; width: .6em; - fill: $c-font-link; + fill: var(--mf-c-font-link); } } } @@ -162,7 +162,7 @@ letter-spacing: $letter-spacing-large; padding: 5px 7px; text-transform: uppercase; - background-color: $c-white; + background-color: var(--mf-c-white); font-weight: $fonts-bold; svg { @@ -175,11 +175,11 @@ // White Card variant &--c-white { - background-color: $c-white; - border: 2px solid $c-gray-light; + background-color: var(--mf-c-white); + border: 2px solid var(--mf-c-gray-light); .ma__card__eyebrow { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } diff --git a/packages/assets/scss/02-molecules/_collapsible-header.scss b/packages/assets/scss/02-molecules/_collapsible-header.scss index 1735763d5b..c953218756 100644 --- a/packages/assets/scss/02-molecules/_collapsible-header.scss +++ b/packages/assets/scss/02-molecules/_collapsible-header.scss @@ -77,22 +77,22 @@ .ma__collapsible-header { &__button { - color: $c-font-base; - background-color: $c-bg-section; + color: var(--mf-c-font-base); + background-color: var(--mf-c-bg-section); .is-open & { background-color: transparent; } &__status-icon { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } } &__icon { & > svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/02-molecules/_contact-group.scss b/packages/assets/scss/02-molecules/_contact-group.scss index 2f275cc48a..1cd5539dfd 100644 --- a/packages/assets/scss/02-molecules/_contact-group.scss +++ b/packages/assets/scss/02-molecules/_contact-group.scss @@ -88,7 +88,7 @@ display: inline; padding-top: 3px; padding-bottom: 3px; - border-bottom-color: $c-bay-blue-50-tint;// Update with the value of DP-32007. + border-bottom-color: var(--mf-c-bay-blue-50-tint);// Update with the value of DP-32007. border-bottom-width: 1px; } } @@ -108,7 +108,7 @@ &__name { svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } span { diff --git a/packages/assets/scss/02-molecules/_contact-us.scss b/packages/assets/scss/02-molecules/_contact-us.scss index dc0ad1a013..7b29bc8dca 100644 --- a/packages/assets/scss/02-molecules/_contact-us.scss +++ b/packages/assets/scss/02-molecules/_contact-us.scss @@ -124,7 +124,7 @@ padding-left: 30px; padding-right: 30px; margin-top: 20px; - border-left: 1px solid $c-bd-divider; + border-left: 1px solid var(--mf-c-bd-divider); // Reset if we aren't in an accordion @@ -197,7 +197,7 @@ @media ($bp-medium-min) { padding-left: 30px; margin-left: 30px; - border-left: 1px solid $c-bd-divider; + border-left: 1px solid var(--mf-c-bd-divider); } .ma__contact-group { @@ -256,15 +256,15 @@ .ma__contact-us { & + & { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &--accordion { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &--accordion:not(.is-open) &__header { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } &--accordion.is-open &__header { @@ -273,22 +273,22 @@ &--accordion &__header:after, &--accordion &__header &--accordion__status { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } &__expand { button { - color: $c-font-link; + color: var(--mf-c-font-link); font-weight: $fonts-bold; &:after { - border-color: $c-font-link; + border-color: var(--mf-c-font-link); opacity: .5; } &:hover { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/02-molecules/_download-link.scss b/packages/assets/scss/02-molecules/_download-link.scss index b201e87739..d96adb3d9a 100644 --- a/packages/assets/scss/02-molecules/_download-link.scss +++ b/packages/assets/scss/02-molecules/_download-link.scss @@ -92,7 +92,7 @@ .ma__download-link { &__icon { - fill: $c-font-link; + fill: var(--mf-c-font-link); } &__file-link { @@ -101,7 +101,7 @@ border-bottom-width: 1px; border-bottom-style: solid; - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } &__file-spec { @@ -109,6 +109,6 @@ } .ma__form-downloads--listing & { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/02-molecules/_error-list.scss b/packages/assets/scss/02-molecules/_error-list.scss index eaba9d599f..b571445712 100644 --- a/packages/assets/scss/02-molecules/_error-list.scss +++ b/packages/assets/scss/02-molecules/_error-list.scss @@ -70,9 +70,9 @@ .ma__error-list { &__container { - background-color: $c-error-red-lightest; - border-color: $c-bd-error; - color: $c-font-error; + background-color: var(--mf-c-error-red-lightest); + border-color: var(--mf-c-bd-error); + color: var(--mf-c-font-error); } &__title { @@ -80,8 +80,8 @@ } &__label { - border-color: $c-bd-error; - color: $c-font-error; + border-color: var(--mf-c-bd-error); + color: var(--mf-c-font-error); font-weight: $fonts-light; } } diff --git a/packages/assets/scss/02-molecules/_event-filters.scss b/packages/assets/scss/02-molecules/_event-filters.scss index 0e904b6c40..85a699bd8c 100644 --- a/packages/assets/scss/02-molecules/_event-filters.scss +++ b/packages/assets/scss/02-molecules/_event-filters.scss @@ -40,7 +40,7 @@ //theme .ma__event-filters { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); // backward compatible with v5.6 diff --git a/packages/assets/scss/02-molecules/_event-teaser.scss b/packages/assets/scss/02-molecules/_event-teaser.scss index 377ca7b19a..5fa549fb1e 100644 --- a/packages/assets/scss/02-molecules/_event-teaser.scss +++ b/packages/assets/scss/02-molecules/_event-teaser.scss @@ -133,7 +133,7 @@ .ma__event-teaser { & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } &__graphic { @@ -141,7 +141,7 @@ } &__spacer { - background-color: $c-font-dark; + background-color: var(--mf-c-font-dark); } &__month { @@ -149,7 +149,7 @@ } &__day { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/02-molecules/_featured-item.scss b/packages/assets/scss/02-molecules/_featured-item.scss index 7b5438bc8d..8cacd75bbe 100644 --- a/packages/assets/scss/02-molecules/_featured-item.scss +++ b/packages/assets/scss/02-molecules/_featured-item.scss @@ -7,7 +7,7 @@ max-width: 100%; width: 100%; overflow: hidden; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); // dimmer // this :before is set up in the aspect ratio mixin @@ -24,7 +24,7 @@ } &:hover span { - border-bottom-color: $c-white; + border-bottom-color: var(--mf-c-white); } &__image img, @@ -52,8 +52,8 @@ padding: 5px 15px; font-size: $fonts-medium; line-height: 1.25; - background-color: $c-primary-alt; - color: $c-font-inverse; + background-color: var(--mf-c-primary-alt); + color: var(--mf-c-font-inverse); span { @@ -64,7 +64,7 @@ svg { @include ma-link-arrow; - fill: $c-white; + fill: var(--mf-c-white); } } diff --git a/packages/assets/scss/02-molecules/_footer-links.scss b/packages/assets/scss/02-molecules/_footer-links.scss index 00803eed93..7fdf6773fa 100644 --- a/packages/assets/scss/02-molecules/_footer-links.scss +++ b/packages/assets/scss/02-molecules/_footer-links.scss @@ -24,7 +24,7 @@ border-bottom: none; .ma__sidebar-heading { - color: $c-gray; + color: var(--mf-c-gray); font-size: $fonts-smaller; } } @@ -35,7 +35,7 @@ @include ma-link-underline; padding-bottom: 3px; - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-normal; &:hover { @@ -51,7 +51,7 @@ max-width: 480px; @media ($bp-small-max) { - border-bottom: 1px solid $c-bd-divider; + border-bottom: 1px solid var(--mf-c-bd-divider); margin-bottom: 20px; padding-bottom: 20px; text-align: center; diff --git a/packages/assets/scss/02-molecules/_footnote.scss b/packages/assets/scss/02-molecules/_footnote.scss index 28f5cc1856..217a72bc1a 100644 --- a/packages/assets/scss/02-molecules/_footnote.scss +++ b/packages/assets/scss/02-molecules/_footnote.scss @@ -62,11 +62,11 @@ .ma__footnote { & > &__link { - border-color: $c-link; + border-color: var(--mf-c-link); &:hover { - background-color: $c-font-link; - color: $c-font-inverse; + background-color: var(--mf-c-font-link); + color: var(--mf-c-font-inverse); } } } diff --git a/packages/assets/scss/02-molecules/_general-teaser.scss b/packages/assets/scss/02-molecules/_general-teaser.scss index da68039e2a..32e769b2a6 100644 --- a/packages/assets/scss/02-molecules/_general-teaser.scss +++ b/packages/assets/scss/02-molecules/_general-teaser.scss @@ -20,7 +20,7 @@ & + & { border-top-width: 1px; border-top-style: solid; - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); @media ($bp-large-max) { margin-top: 30px; @@ -68,7 +68,7 @@ letter-spacing: $letter-spacing-large; padding: 5px 7px; text-transform: uppercase; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); font-weight: $fonts-bold; svg { @@ -116,7 +116,7 @@ margin-bottom: 1em; font-style: italic; font-weight: $fonts-bold; - border-left-color: $c-bd-divider; + border-left-color: var(--mf-c-bd-divider); & + & { border-left-style: solid; @@ -147,12 +147,12 @@ } &__tag { - color: $c-gray; + color: var(--mf-c-gray); font-size: $fonts-xsmall; font-weight: bold; text-align: center; - border: 1px solid $c-gray-light; - background-color: $c-bg; + border: 1px solid var(--mf-c-gray-light); + background-color: var(--mf-c-bg); padding: 0px 5px; min-width: 60px; display: inline-block; diff --git a/packages/assets/scss/02-molecules/_header-contact.scss b/packages/assets/scss/02-molecules/_header-contact.scss index 955ee2bb47..d039b4e69a 100644 --- a/packages/assets/scss/02-molecules/_header-contact.scss +++ b/packages/assets/scss/02-molecules/_header-contact.scss @@ -98,19 +98,19 @@ .ma__header-contact { &__accordion { - border-top-color: $c-bd-divider; - color: $c-primary; + border-top-color: var(--mf-c-bd-divider); + color: var(--mf-c-primary); font-weight: $fonts-bold; &:after { - color: $c-primary; + color: var(--mf-c-primary); } } &__column { & + & { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/02-molecules/_header-search.scss b/packages/assets/scss/02-molecules/_header-search.scss index 89817b5fc2..9489b8bea7 100644 --- a/packages/assets/scss/02-molecules/_header-search.scss +++ b/packages/assets/scss/02-molecules/_header-search.scss @@ -58,7 +58,7 @@ $bp-header-search-reduce-button: "max-width: 700px"; position: absolute; width: 100%; - border: 2px solid $c-bd; + border: 2px solid var(--mf-c-bd); margin-top: -2px; z-index: $z-dropdown; @@ -75,7 +75,7 @@ $bp-header-search-reduce-button: "max-width: 700px"; padding: 0; margin: 0; list-style: none; - background-color: $c-bg; + background-color: var(--mf-c-bg); svg { width: $fonts-medium; @@ -93,11 +93,11 @@ $bp-header-search-reduce-button: "max-width: 700px"; align-items: center; text-align: left; padding: 0.5rem 1rem; - border-top: 1px solid $c-bd; + border-top: 1px solid var(--mf-c-bd); font-size: $fonts-medium; &:hover { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } &-text { @@ -110,7 +110,7 @@ $bp-header-search-reduce-button: "max-width: 700px"; &-scope { font-size: $fonts-small; - color: $c-font-detail; + color: var(--mf-c-font-detail); font-style: italic; margin-left: 0.5rem; } @@ -126,11 +126,11 @@ $bp-header-search-reduce-button: "max-width: 700px"; text-align: left; padding: 0.5rem 1rem; font-size: $fonts-medium; - border-top: 1px solid $c-bd; + border-top: 1px solid var(--mf-c-bd); width: 100%; &:hover, &.hover { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } &-text { @@ -143,7 +143,7 @@ $bp-header-search-reduce-button: "max-width: 700px"; &-scope { font-size: $fonts-small; - color: $c-font-detail; + color: var(--mf-c-font-detail); font-style: italic; margin-left: 0.5rem; } diff --git a/packages/assets/scss/02-molecules/_header-tags.scss b/packages/assets/scss/02-molecules/_header-tags.scss index be0c2afb2a..b551bf4971 100644 --- a/packages/assets/scss/02-molecules/_header-tags.scss +++ b/packages/assets/scss/02-molecules/_header-tags.scss @@ -117,7 +117,7 @@ font-weight: 600; &__label { - color: $c-font-detail; + color: var(--mf-c-font-detail); } &__terms { @@ -127,12 +127,12 @@ font-weight: $fonts-normal; &:hover { - border-color: $c-font-link; + border-color: var(--mf-c-font-link); } } > button { - color: $c-primary; + color: var(--mf-c-primary); font-weight: $fonts-normal; } } diff --git a/packages/assets/scss/02-molecules/_icon-link.scss b/packages/assets/scss/02-molecules/_icon-link.scss index 16cf3168b3..c9bb6688be 100644 --- a/packages/assets/scss/02-molecules/_icon-link.scss +++ b/packages/assets/scss/02-molecules/_icon-link.scss @@ -14,7 +14,7 @@ width: 20px; &, path { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } } diff --git a/packages/assets/scss/02-molecules/_illustrated-link.scss b/packages/assets/scss/02-molecules/_illustrated-link.scss index a0dd4a6443..aeb142de85 100644 --- a/packages/assets/scss/02-molecules/_illustrated-link.scss +++ b/packages/assets/scss/02-molecules/_illustrated-link.scss @@ -79,14 +79,14 @@ $illustrated-link-image-width: 130px; //theme .ma__illustrated-link { - border-color: $c-link; + border-color: var(--mf-c-link); box-shadow: $box-shadow; &__content { - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); &:after { - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); } } @@ -103,16 +103,16 @@ $illustrated-link-image-width: 130px; a { &:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); } } &__image { - background-color: $c-link; + background-color: var(--mf-c-link); } } diff --git a/packages/assets/scss/02-molecules/_image-link.scss b/packages/assets/scss/02-molecules/_image-link.scss index d48227887b..4fec29ca2b 100644 --- a/packages/assets/scss/02-molecules/_image-link.scss +++ b/packages/assets/scss/02-molecules/_image-link.scss @@ -42,7 +42,7 @@ //theme .ma__image-link--block { - background: $c-gray-lightest; + background: var(--mf-c-gray-lightest); &:hover, &:active, @@ -54,10 +54,10 @@ } .ma__image-link__text { - color: $c-gray-dark; + color: var(--mf-c-gray-dark); } svg { - fill: $c-gray-dark; + fill: var(--mf-c-gray-dark); } } diff --git a/packages/assets/scss/02-molecules/_image-promo.scss b/packages/assets/scss/02-molecules/_image-promo.scss index eb62478eed..a60ac38acc 100644 --- a/packages/assets/scss/02-molecules/_image-promo.scss +++ b/packages/assets/scss/02-molecules/_image-promo.scss @@ -5,7 +5,7 @@ $image-promo-bp-x-large-min: "min-width: 1160px"; .ma__image-promo { @include clearfix(); - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); display: flex; flex-wrap: wrap; @@ -68,7 +68,7 @@ $image-promo-bp-x-large-min: "min-width: 1160px"; } svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); height: 30px; width: 30px; } @@ -97,7 +97,7 @@ $image-promo-bp-x-large-min: "min-width: 1160px"; & > a { align-items: center; - color: $c-font-base; + color: var(--mf-c-font-base); display: flex; font-weight: $fonts-light; text-decoration: none; @@ -105,7 +105,7 @@ $image-promo-bp-x-large-min: "min-width: 1160px"; svg { display: inline-block; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); height: 20px; margin-right: 0.5rem; width: 20px; diff --git a/packages/assets/scss/02-molecules/_info-window.scss b/packages/assets/scss/02-molecules/_info-window.scss index a50b1cc1fe..a3b2b56cf6 100644 --- a/packages/assets/scss/02-molecules/_info-window.scss +++ b/packages/assets/scss/02-molecules/_info-window.scss @@ -50,11 +50,11 @@ } &__phone { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: inherit; } &__email-link:hover { - border-color: $c-link; + border-color: var(--mf-c-link); } } diff --git a/packages/assets/scss/02-molecules/_input-radio-group.scss b/packages/assets/scss/02-molecules/_input-radio-group.scss index 0669725e90..9877772c1d 100644 --- a/packages/assets/scss/02-molecules/_input-radio-group.scss +++ b/packages/assets/scss/02-molecules/_input-radio-group.scss @@ -36,7 +36,7 @@ $total-margin: $margin * 2; } &--error { - color: $c-error; + color: var(--mf-c-error); } } diff --git a/packages/assets/scss/02-molecules/_keyword-search.scss b/packages/assets/scss/02-molecules/_keyword-search.scss index 6b2170da63..9cd2fc7973 100644 --- a/packages/assets/scss/02-molecules/_keyword-search.scss +++ b/packages/assets/scss/02-molecules/_keyword-search.scss @@ -84,11 +84,11 @@ $header-search-height: 46px; .ma__button-search { background-color: transparent; - border-left-color: $c-bd-input; + border-left-color: var(--mf-c-bd-input); &:hover { - background: $c-primary-alt; - border-left-color: $c-primary-alt; + background: var(--mf-c-primary-alt); + border-left-color: var(--mf-c-primary-alt); } } @@ -96,13 +96,13 @@ $header-search-height: 46px; border-left-color: rgba($c-bd-input,.5); &:hover { - border-left-color: $c-primary-alt; + border-left-color: var(--mf-c-primary-alt); } } &__reset { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_labelled-list.scss b/packages/assets/scss/02-molecules/_labelled-list.scss index 1cdca75ea9..05585d2f0d 100644 --- a/packages/assets/scss/02-molecules/_labelled-list.scss +++ b/packages/assets/scss/02-molecules/_labelled-list.scss @@ -26,7 +26,7 @@ &__label { font-size: $fonts-small; - color: $c-font-detail; + color: var(--mf-c-font-detail); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_link-dropdown.scss b/packages/assets/scss/02-molecules/_link-dropdown.scss index c7d0b4c6b4..4999f7ddde 100644 --- a/packages/assets/scss/02-molecules/_link-dropdown.scss +++ b/packages/assets/scss/02-molecules/_link-dropdown.scss @@ -11,7 +11,7 @@ margin: 0; text-align: left; list-style: none; - background-color: $c-bg; + background-color: var(--mf-c-bg); &--expanded { box-shadow: $box-shadow; @@ -33,7 +33,7 @@ } &:hover, &:focus { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } } diff --git a/packages/assets/scss/02-molecules/_listing-table.scss b/packages/assets/scss/02-molecules/_listing-table.scss index 4f2d8c8cec..8eee16dc76 100644 --- a/packages/assets/scss/02-molecules/_listing-table.scss +++ b/packages/assets/scss/02-molecules/_listing-table.scss @@ -174,18 +174,18 @@ .ma__listing-table { tr + tr { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } &__expand { > button { - color: $c-primary; + color: var(--mf-c-primary); font-weight: $fonts-normal; } } .main-content .ma__header-tags + & { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/02-molecules/_location-filters.scss b/packages/assets/scss/02-molecules/_location-filters.scss index 63083c2bd8..e6b2290fa7 100644 --- a/packages/assets/scss/02-molecules/_location-filters.scss +++ b/packages/assets/scss/02-molecules/_location-filters.scss @@ -125,12 +125,12 @@ //theme .ma__location-filters { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &__tag { & > svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/02-molecules/_location-icons.scss b/packages/assets/scss/02-molecules/_location-icons.scss index a6fe93f0ca..95085c69f9 100644 --- a/packages/assets/scss/02-molecules/_location-icons.scss +++ b/packages/assets/scss/02-molecules/_location-icons.scss @@ -26,7 +26,7 @@ & > svg { height: 100%; width: 100%; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } @@ -37,7 +37,7 @@ line-height: 1.3; max-width: 6rem; text-transform: uppercase; - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss index ce990d3cdd..e595dbbf70 100644 --- a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss +++ b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss @@ -6,7 +6,7 @@ padding: 0; @media ($bp-header-toggle-max) { - border-top: 2px solid $c-bd-divider; + border-top: 2px solid var(--mf-c-bd-divider); } &__items { @@ -15,7 +15,7 @@ } &__item { - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid var(--mf-c-bd-divider); } &__top-link { @@ -31,7 +31,7 @@ text-transform: uppercase; transition: all 0.4s ease; text-align: left; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); width: 100%; color: inherit; @@ -48,12 +48,12 @@ } &:focus { - background-color: $c-bd-divider; - outline: 2px solid $c-gray-darkest; + background-color: var(--mf-c-bd-divider); + outline: 2px solid var(--mf-c-gray-darkest); } &.cv-alternate-style { - background-color: $c-highlight; + background-color: var(--mf-c-highlight); // Adding chevron for direct link. @@ -64,7 +64,7 @@ } &:hover { - background-color: $c-highlight-lightest; + background-color: var(--mf-c-highlight-lightest); } } } @@ -72,14 +72,14 @@ &__subitem { &:hover { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } &__subitems { text-align: left; z-index: $z-dropdown; - background-color: $c-bg; + background-color: var(--mf-c-bg); transition: height 0.4s; &.is-closed { @@ -120,7 +120,7 @@ font-weight: $fonts-normal; line-height: 1.33; padding: 10px 20px 10px 30px; - color: $c-gray-darkest; + color: var(--mf-c-gray-darkest); &:hover { text-decoration: underline; @@ -139,7 +139,7 @@ text-transform: uppercase; & > svg { - fill: $c-atlantic-gray; + fill: var(--mf-c-atlantic-gray); height: 20px; width: 20px; } @@ -153,7 +153,7 @@ text-decoration: none; &>span { - border-bottom: 2px solid $c-gray-darkest; + border-bottom: 2px solid var(--mf-c-gray-darkest); } } } diff --git a/packages/assets/scss/02-molecules/_main-nav.scss b/packages/assets/scss/02-molecules/_main-nav.scss index 22d9f7c150..0bd518dd01 100644 --- a/packages/assets/scss/02-molecules/_main-nav.scss +++ b/packages/assets/scss/02-molecules/_main-nav.scss @@ -108,8 +108,8 @@ &:after { cursor: pointer; margin-left: 6px; - border-right-color: $c-primary-alt; - border-bottom-color: $c-primary-alt; + border-right-color: var(--mf-c-primary-alt); + border-bottom-color: var(--mf-c-primary-alt); @media ($bp-header-toggle-max) { position: absolute; @@ -138,10 +138,10 @@ } &.cv-alternate-style { - background-color: $c-highlight; + background-color: var(--mf-c-highlight); &:hover { - background-color: $c-highlight-lightest; + background-color: var(--mf-c-highlight-lightest); } } } @@ -246,7 +246,7 @@ } a { - color: $c-revolution-gray; + color: var(--mf-c-revolution-gray); } } @@ -259,7 +259,7 @@ &:hover, &.is-open, &.has-focus { - background-color: $c-bg; + background-color: var(--mf-c-bg); box-shadow: $box-shadow; } @@ -270,46 +270,46 @@ } &__subitems { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); @media ($bp-header-toggle-min) { - background-color: $c-bg; - box-shadow: 0 0.25em 0.5rem $c-box-shadow-black; + background-color: var(--mf-c-bg); + box-shadow: 0 0.25em 0.5rem var(--mf-c-box-shadow-black); } } &__container { @media ($bp-header-toggle-max) { - background-color: $c-bg; + background-color: var(--mf-c-bg); } } &__subitem { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } &__link { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-normal; &:hover, &:focus { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); } } &__subitem--main &__link { - background-color: $c-bg-subtle; - color: $c-font-link; + background-color: var(--mf-c-bg-subtle); + color: var(--mf-c-font-link); font-weight: $fonts-bold; &:hover { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } & > svg { - fill: $c-link; + fill: var(--mf-c-link); height: 20px; width: 20px; margin-right: 0.1rem; diff --git a/packages/assets/scss/02-molecules/_map-google.scss b/packages/assets/scss/02-molecules/_map-google.scss index 2b9cf7588a..b3c2c21b5b 100644 --- a/packages/assets/scss/02-molecules/_map-google.scss +++ b/packages/assets/scss/02-molecules/_map-google.scss @@ -19,12 +19,12 @@ bottom: 0; left:0; width: 100%; - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); padding: 0.2rem 0.9rem; font-size: $fonts-larger; span { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); svg { fill: rgba($c-white, 0.7); diff --git a/packages/assets/scss/02-molecules/_map-leaflet.scss b/packages/assets/scss/02-molecules/_map-leaflet.scss index 0078f3e8ab..6c503354c9 100644 --- a/packages/assets/scss/02-molecules/_map-leaflet.scss +++ b/packages/assets/scss/02-molecules/_map-leaflet.scss @@ -15,7 +15,7 @@ } .leaflet-container a { - color: $c-bay-blue; + color: var(--mf-c-bay-blue); } .leaflet-popup-content { @@ -89,10 +89,10 @@ width: 24px; height: 24px; font-size: 26px; - color: $c-bay-blue-40-tint;//<-- Change to $c-link after DP-32007 is released + color: var(--mf-c-bay-blue-40-tint);//<-- Change to $c-link after DP-32007 is released &:hover { - color: $c-font-link; + color: var(--mf-c-font-link); } } } @@ -108,12 +108,12 @@ &__directions-link { width: 100%; - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); padding: 0.2rem 0.9rem; font-size: $fonts-larger; span { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); svg { fill: rgba($c-white, 0.7); diff --git a/packages/assets/scss/02-molecules/_multiselect-dropdown.scss b/packages/assets/scss/02-molecules/_multiselect-dropdown.scss index d83e1d4f0d..e1f50e66fd 100644 --- a/packages/assets/scss/02-molecules/_multiselect-dropdown.scss +++ b/packages/assets/scss/02-molecules/_multiselect-dropdown.scss @@ -12,7 +12,7 @@ margin: 0; text-align: left; list-style: none; - background-color: $c-bg; + background-color: var(--mf-c-bg); max-height: 15.6em; overflow-y: auto; @@ -29,7 +29,7 @@ white-space: nowrap; background-color: transparent; border: 0; - border: 1px solid $c-gray-light; + border: 1px solid var(--mf-c-gray-light); a, a:hover, a:hover { border-bottom: none; @@ -37,7 +37,7 @@ } &:hover, &:focus { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } .ma__input-checkbox { diff --git a/packages/assets/scss/02-molecules/_page-intro.scss b/packages/assets/scss/02-molecules/_page-intro.scss index a0a01d3832..083501ae63 100644 --- a/packages/assets/scss/02-molecules/_page-intro.scss +++ b/packages/assets/scss/02-molecules/_page-intro.scss @@ -18,7 +18,7 @@ .ma__page-intro { &__sub-title { - color: $c-font-heading; + color: var(--mf-c-font-heading); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_pagination.scss b/packages/assets/scss/02-molecules/_pagination.scss index 6b2de9cbdd..7ae35f03fc 100644 --- a/packages/assets/scss/02-molecules/_pagination.scss +++ b/packages/assets/scss/02-molecules/_pagination.scss @@ -16,7 +16,7 @@ &__container { border-top-style: solid; border-top-width: 2px; - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); padding: 20px 0; display: flex; } @@ -30,7 +30,7 @@ line-height: 1; padding: 8px 10px; position: relative; - color: $c-font-link; + color: var(--mf-c-font-link); font-weight: $fonts-bold; text-decoration: none; @@ -59,11 +59,11 @@ } &:before { - border-color: $c-link; + border-color: var(--mf-c-link); } &:hover:after { - border-color: $c-link; + border-color: var(--mf-c-link); } &:after { @@ -111,11 +111,11 @@ } &:hover:before { - border-color: $c-link; + border-color: var(--mf-c-link); } &:after { - border-color: $c-link; + border-color: var(--mf-c-link); } } @@ -136,8 +136,8 @@ } &.is-active { - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); &:hover:after { border-color: transparent; @@ -149,7 +149,7 @@ } &:hover:after { - border-color: $c-link; + border-color: var(--mf-c-link); } } diff --git a/packages/assets/scss/02-molecules/_popover.scss b/packages/assets/scss/02-molecules/_popover.scss index 27fef9f870..d8f0a52dc4 100644 --- a/packages/assets/scss/02-molecules/_popover.scss +++ b/packages/assets/scss/02-molecules/_popover.scss @@ -13,20 +13,20 @@ } &__trigger { - color: $c-primary; + color: var(--mf-c-primary); display: inline; border-bottom: 3px dashed currentcolor; &:hover { - color: $c-primary-light; + color: var(--mf-c-primary-light); cursor: pointer; border-bottom-width: 4px; } } &__dialog { - background: $c-white; - border: 1px solid $c-gray-light; + background: var(--mf-c-white); + border: 1px solid var(--mf-c-gray-light); border-radius: 0.5rem; width: max-content; max-width: min(480px, calc(100vw - 2rem)); @@ -47,8 +47,8 @@ &__caret { display: block; - background: $c-white; - border: 1px solid $c-gray-light; + background: var(--mf-c-white); + border: 1px solid var(--mf-c-gray-light); width: 1rem; height: 1rem; rotate: -45deg; @@ -66,20 +66,20 @@ display: flex; align-items: center; justify-content: center; - color: $c-primary; + color: var(--mf-c-primary); border-start-end-radius: 0.5rem; svg { width: 1rem; height: 1rem; - fill: $c-primary; + fill: var(--mf-c-primary); pointer-events: none; } &:hover { svg { - fill: $c-primary-light; + fill: var(--mf-c-primary-light); } // background-color: $c-gray-lightest; } @@ -98,7 +98,7 @@ line-height: 1.63; grid-area: content; padding: 1rem; - border-top: 1px solid $c-gray-light; + border-top: 1px solid var(--mf-c-gray-light); } &--open { diff --git a/packages/assets/scss/02-molecules/_press-status.scss b/packages/assets/scss/02-molecules/_press-status.scss index 2ba5213337..7e799f7c68 100644 --- a/packages/assets/scss/02-molecules/_press-status.scss +++ b/packages/assets/scss/02-molecules/_press-status.scss @@ -68,17 +68,17 @@ //theme .ma__press-status { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); .main-content--two .page-content > & { &:before { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } &__title { - color: $c-font-detail; + color: var(--mf-c-font-detail); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_press-teaser.scss b/packages/assets/scss/02-molecules/_press-teaser.scss index 6b2ecee2cb..63e1e1f7cf 100644 --- a/packages/assets/scss/02-molecules/_press-teaser.scss +++ b/packages/assets/scss/02-molecules/_press-teaser.scss @@ -108,12 +108,12 @@ .ma__press-teaser { & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } &__eyebrow span { - background-color: $c-bg-section; - color: $c-font-detail; + background-color: var(--mf-c-bg-section); + color: var(--mf-c-font-detail); font-weight: $fonts-bold; } @@ -124,6 +124,6 @@ } &__org { - border-left-color: $c-bd-divider; + border-left-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/02-molecules/_radio-scale.scss b/packages/assets/scss/02-molecules/_radio-scale.scss index f003a91dfb..1a0487861d 100644 --- a/packages/assets/scss/02-molecules/_radio-scale.scss +++ b/packages/assets/scss/02-molecules/_radio-scale.scss @@ -59,16 +59,16 @@ // Label element. &__label { - border-bottom: 2px solid $c-overcast-gray; - border-left: 2px solid $c-overcast-gray; - border-top: 2px solid $c-overcast-gray; + border-bottom: 2px solid var(--mf-c-overcast-gray); + border-left: 2px solid var(--mf-c-overcast-gray); + border-top: 2px solid var(--mf-c-overcast-gray); cursor: pointer; flex: 1; height: $standard-spacing--small; margin: 0; &:last-child { - border-right: 2px solid $c-overcast-gray; + border-right: 2px solid var(--mf-c-overcast-gray); } } @@ -79,8 +79,8 @@ } &__radio:checked + &__text { - background-color: $c-bay-blue; - color: $c-font-inverse; + background-color: var(--mf-c-bay-blue); + color: var(--mf-c-font-inverse); } // Element that wraps the content, but is located after the input. diff --git a/packages/assets/scss/02-molecules/_related-action.scss b/packages/assets/scss/02-molecules/_related-action.scss index 451aa396ed..93e304d872 100644 --- a/packages/assets/scss/02-molecules/_related-action.scss +++ b/packages/assets/scss/02-molecules/_related-action.scss @@ -43,6 +43,6 @@ .ma__related-action { & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index 9b8fa7f08a..fcb663a5cb 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -55,13 +55,13 @@ height: 14px; path, use { - fill: $c-font-detail; + fill: var(--mf-c-font-detail); } } } &--label { - color: $c-font-detail; + color: var(--mf-c-font-detail); text-transform: uppercase; letter-spacing: $letter-spacing-large; margin-right: 10px; @@ -158,7 +158,7 @@ a { - color: $c-primary; + color: var(--mf-c-primary); box-shadow: inset 0 0 $c-white, inset 0px -1px $c-bay-blue-lighter; // border-bottom: 1px solid $c-bay-blue-lighter; @@ -170,7 +170,7 @@ } button { - color: $c-primary; + color: var(--mf-c-primary); &.is-open { @@ -192,7 +192,7 @@ } a { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4);// This can be replaced with border-bottom. See L.163. &:hover { @@ -201,7 +201,7 @@ } button { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } } @@ -250,7 +250,7 @@ &.single [aria-labelledby="secondary"] { a { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4); &:hover { @@ -267,7 +267,7 @@ } button { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } .ma__relationship-indicators { @@ -302,7 +302,7 @@ height: $fonts-small; right: -10px; bottom: 1px; - border-right: 1px solid $c-gray-light; + border-right: 1px solid var(--mf-c-gray-light); } } diff --git a/packages/assets/scss/02-molecules/_results-heading.scss b/packages/assets/scss/02-molecules/_results-heading.scss index 105553198d..3820381359 100644 --- a/packages/assets/scss/02-molecules/_results-heading.scss +++ b/packages/assets/scss/02-molecules/_results-heading.scss @@ -15,7 +15,7 @@ border-bottom-style: solid; border-bottom-width: 2px; padding-bottom: 10px; - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } &__title { diff --git a/packages/assets/scss/02-molecules/_secondary-nav-hamburger.scss b/packages/assets/scss/02-molecules/_secondary-nav-hamburger.scss index a849ee5b69..d8b822a6e7 100644 --- a/packages/assets/scss/02-molecules/_secondary-nav-hamburger.scss +++ b/packages/assets/scss/02-molecules/_secondary-nav-hamburger.scss @@ -3,7 +3,7 @@ .ma__secondary-nav-hamburger { padding: 0; margin: 0; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); &__items { @@ -17,7 +17,7 @@ &__subitems-container { display: none; - background-color: $c-white; + background-color: var(--mf-c-white); width: 100%; flex-shrink: 0; @@ -31,11 +31,11 @@ position: relative; width: 100%; flex-wrap: wrap; - border-block-end: 1px solid $c-gray-light; + border-block-end: 1px solid var(--mf-c-gray-light); align-items: stretch; &:first-of-type { - border-block-start: 1px solid $c-gray-light; + border-block-start: 1px solid var(--mf-c-gray-light); } &:last-of-type { @@ -50,7 +50,7 @@ content: ''; position: absolute; z-index: 1; - background-color: $c-primary; + background-color: var(--mf-c-primary); display: none; } } @@ -70,11 +70,11 @@ &:hover, &:focus { text-decoration: underline; - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } .is-active > & { - border-inline-start-color: $c-primary; + border-inline-start-color: var(--mf-c-primary); } .ma__secondary-nav-hamburger__subitem & { @@ -88,23 +88,23 @@ } &__top-link-trigger { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); background: transparent; border: none; - border-inline-start: 1px solid $c-gray-light; + border-inline-start: 1px solid var(--mf-c-gray-light); padding: 1rem; width: 3.5rem; &:hover, &:focus { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } } &__top-link-icon { width: 1.5rem; height: auto; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); .is-open & { transform: rotateZ(45deg); @@ -118,11 +118,11 @@ &__subitem { width: 100%; - border-block-end: 1px solid $c-gray-light; + border-block-end: 1px solid var(--mf-c-gray-light); &:hover { - background-color: $c-primary; - color: $c-white; + background-color: var(--mf-c-primary); + color: var(--mf-c-white); } .ma__secondary-nav-hamburger__link { @@ -139,7 +139,7 @@ html:not(.js) .ma__secondary-nav-hamburger { &__item:hover { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } &__item:focus-within { diff --git a/packages/assets/scss/02-molecules/_secondary-nav.scss b/packages/assets/scss/02-molecules/_secondary-nav.scss index c31e628fb2..622c024d0f 100644 --- a/packages/assets/scss/02-molecules/_secondary-nav.scss +++ b/packages/assets/scss/02-molecules/_secondary-nav.scss @@ -74,7 +74,7 @@ content: ''; position: absolute; z-index: $z-low; - background-color: $c-primary; + background-color: var(--mf-c-primary); display: none; } } @@ -93,7 +93,7 @@ } &__top-link-trigger { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); background: transparent; border: none; } @@ -101,7 +101,7 @@ &__top-link-icon { width: 1.5rem; height: auto; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } &__subitems { @@ -112,8 +112,8 @@ &__subitem { &:hover { - background-color: $c-primary; - color: $c-white; + background-color: var(--mf-c-primary); + color: var(--mf-c-white); } .ma__secondary-nav__link { @@ -134,7 +134,7 @@ z-index: $z-dropdown; inset-block-start: 100%; inset-inline-start: 0; - background-color: $c-bg; + background-color: var(--mf-c-bg); box-shadow: $box-shadow; width: 300px; } @@ -167,7 +167,7 @@ &:hover, &.is-open { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } @@ -182,7 +182,7 @@ padding: 0; margin: 0; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); &__items { flex-direction: column; @@ -191,11 +191,11 @@ &__item { width: 100%; flex-wrap: wrap; - border-block-end: 1px solid $c-gray-light; + border-block-end: 1px solid var(--mf-c-gray-light); align-items: stretch; &:first-of-type { - border-block-start: 1px solid $c-gray-light; + border-block-start: 1px solid var(--mf-c-gray-light); } &.has-subnav, @@ -213,7 +213,7 @@ } &.is-active > .ma__secondary-nav__link { - border-inline-start-color: $c-primary; + border-inline-start-color: var(--mf-c-primary); } &.is-open { @@ -229,7 +229,7 @@ &__subitems-container { flex: 1 0 100%; - background-color: $c-white; + background-color: var(--mf-c-white); } &__subitem { @@ -244,7 +244,7 @@ &__item > &__top-link-trigger { &:hover { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } } @@ -258,7 +258,7 @@ } &__top-link-trigger { - border-inline-start: 1px solid $c-gray-light; + border-inline-start: 1px solid var(--mf-c-gray-light); .icon-chevron { display: none; @@ -272,7 +272,7 @@ html:not(.js) .ma__secondary-nav { &__item:hover { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } &__item:focus-within { diff --git a/packages/assets/scss/02-molecules/_section-links.scss b/packages/assets/scss/02-molecules/_section-links.scss index abfb64e7b1..d71b0140cc 100644 --- a/packages/assets/scss/02-molecules/_section-links.scss +++ b/packages/assets/scss/02-molecules/_section-links.scss @@ -180,7 +180,7 @@ text-align: left; .ma_section_links--header_mobile { - color: $c-font-heading; + color: var(--mf-c-font-heading); } @media ($bp-x-small-max) { @@ -259,7 +259,7 @@ &__item > .ma__decorative-link { font-size: $fonts-xlarge; line-height: 1.3; - color: $c-primary; + color: var(--mf-c-primary); } } } @@ -267,38 +267,38 @@ //theme .ma__section-links { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &--accordion__toggle { - color: $c-primary; + color: var(--mf-c-primary); } @media ($bp-x-small-max) { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); &.is-open { - background-color: $c-bg; + background-color: var(--mf-c-bg); } &:last-child { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } } &__title { a { - color: $c-primary; + color: var(--mf-c-primary); } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); } } &--accordion__toggle--status { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } &__mobile-title { @@ -306,20 +306,20 @@ & + .ma__section-links__items { @media ($bp-x-small-max) { - border-top: 1px solid $c-bd-divider; + border-top: 1px solid var(--mf-c-bd-divider); padding-top: 0.75em; margin-top: 0.75em; } } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); } a:hover { @media ($bp-x-small-max) { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } } @@ -327,7 +327,7 @@ &__link { &:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } diff --git a/packages/assets/scss/02-molecules/_social-links.scss b/packages/assets/scss/02-molecules/_social-links.scss index f0ed5e61bc..61582cc976 100644 --- a/packages/assets/scss/02-molecules/_social-links.scss +++ b/packages/assets/scss/02-molecules/_social-links.scss @@ -17,7 +17,7 @@ } &__label { - color: $c-font-detail; + color: var(--mf-c-font-detail); display: inline-block; font-size: $fonts-smaller; letter-spacing: $letter-spacing-large; @@ -79,37 +79,37 @@ &__link { &, &--c-primary { - fill: $c-primary; + fill: var(--mf-c-primary); } &--c-primary-alt { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } &--inverted, &--c-primary--inverted { - background-color: $c-primary; + background-color: var(--mf-c-primary); & > svg, & > svg path { - fill: $c-white; + fill: var(--mf-c-white); } } &--c-primary-alt--inverted { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); & > svg, & > svg path { - fill: $c-white; + fill: var(--mf-c-white); } } &[data-social-share = blog] > svg path { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } &[data-social-share = email] > svg path { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } } diff --git a/packages/assets/scss/02-molecules/_sticky-nav.scss b/packages/assets/scss/02-molecules/_sticky-nav.scss index 87e45ff6e3..c5775cdedd 100644 --- a/packages/assets/scss/02-molecules/_sticky-nav.scss +++ b/packages/assets/scss/02-molecules/_sticky-nav.scss @@ -28,8 +28,8 @@ } @media ($bp-medium-max) { - background-color: $c-gray-lightest; - border: 1px solid $c-gray-light; + background-color: var(--mf-c-gray-lightest); + border: 1px solid var(--mf-c-gray-light); left: 0; // when the nav is sticky, add a box shadow @@ -86,7 +86,7 @@ cursor: pointer; display: none; line-height: 1.2; - border-top-color: $c-gray-light; + border-top-color: var(--mf-c-gray-light); padding: 12px; @media ($bp-medium-min) { @@ -103,7 +103,7 @@ &.is-title { span { - color: $c-gray-dark; + color: var(--mf-c-gray-dark); border-bottom: 3px solid transparent; padding-top: 3px; padding-bottom: 1px; @@ -115,7 +115,7 @@ } a { - color: $c-gray-dark !important; + color: var(--mf-c-gray-dark) !important; &:focus { border-bottom-width: 0; @@ -146,12 +146,12 @@ display: block; a { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; } &:hover a { - color: $c-font-base; + color: var(--mf-c-font-base); border-bottom-color: transparent; } @@ -163,7 +163,7 @@ &:hover a { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } a { @@ -185,7 +185,7 @@ &__toggle-link { @include ma-button-reset; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-size: $fonts-7xlarge; line-height: .65em; overflow: hidden; @@ -219,7 +219,7 @@ padding-bottom: 3px; @media ($bp-medium-min) { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); box-shadow: $box-shadow; } @@ -250,13 +250,13 @@ text-align: left; background-color: transparent; font-weight: $fonts-bold; - color: $c-font-link; + color: var(--mf-c-font-link); } &.is-active { a { - color: $c-font-base; + color: var(--mf-c-font-base); } } @@ -269,26 +269,26 @@ border-top: none; a { - color: $c-font-base; + color: var(--mf-c-font-base); border-bottom: none; } &:hover { - border-bottom-color: $c-primary-alt-lighter; + border-bottom-color: var(--mf-c-primary-alt-lighter); a { - color: $c-font-base; + color: var(--mf-c-font-base); } } &.is-active { - border-bottom-color: $c-primary-alt; + border-bottom-color: var(--mf-c-primary-alt); &:hover { - border-bottom-color: $c-primary-alt-lighter; + border-bottom-color: var(--mf-c-primary-alt-lighter); a { - color: $c-font-base; + color: var(--mf-c-font-base); } } } diff --git a/packages/assets/scss/02-molecules/_tabs.scss b/packages/assets/scss/02-molecules/_tabs.scss index 96126b8338..b1e8fb881c 100644 --- a/packages/assets/scss/02-molecules/_tabs.scss +++ b/packages/assets/scss/02-molecules/_tabs.scss @@ -5,7 +5,7 @@ display: flex; &-item { - background: $c-bg-subtle; + background: var(--mf-c-bg-subtle); border: none; @media ($bp-small-max) { @@ -23,14 +23,14 @@ &:hover { border-bottom: 5px solid; - border-color: $c-link; + border-color: var(--mf-c-link); } &.is-selected { border-bottom: 5px solid; padding-left: 1.4rem; padding-right: 1.4rem; - color: $c-primary; + color: var(--mf-c-primary); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_tags.scss b/packages/assets/scss/02-molecules/_tags.scss index af6d159236..f160eef466 100644 --- a/packages/assets/scss/02-molecules/_tags.scss +++ b/packages/assets/scss/02-molecules/_tags.scss @@ -16,7 +16,7 @@ display: inline-block; line-height: 1em; padding: 9px 11px; - color: $c-font-link; + color: var(--mf-c-font-link); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/02-molecules/_wait-time.scss b/packages/assets/scss/02-molecules/_wait-time.scss index 72ba032cf6..31fee5a0e7 100644 --- a/packages/assets/scss/02-molecules/_wait-time.scss +++ b/packages/assets/scss/02-molecules/_wait-time.scss @@ -86,7 +86,7 @@ @include ma-border-decorative($c-highlight); svg { - fill: $c-highlight; + fill: var(--mf-c-highlight); } } @@ -94,12 +94,12 @@ &__item { &:nth-child(even) { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } &__label { - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/03-organisms/_about-section.scss b/packages/assets/scss/03-organisms/_about-section.scss index cd02538d2f..825533ab74 100644 --- a/packages/assets/scss/03-organisms/_about-section.scss +++ b/packages/assets/scss/03-organisms/_about-section.scss @@ -25,7 +25,7 @@ &__content { @media ($bp-large-extended-min) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } .ma__content-link { @@ -120,7 +120,7 @@ @include ma-h5; text-transform: uppercase; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-weight: $fonts-bold; margin-bottom: 0; diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index 7badcecb43..ae8d71c59b 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -165,49 +165,49 @@ &__item { @include ma-link-transition; - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); box-shadow: $box-shadow; &:hover { background-color: darken($c-bg-subtle, 10%); a { - border-bottom-color: $c-font-link; + border-bottom-color: var(--mf-c-font-link); } } &--blue { - background-color: $c-primary; + background-color: var(--mf-c-primary); &:hover { background-color: rgba($c-primary,.8); a { - border-bottom-color: $c-font-inverse; + border-bottom-color: var(--mf-c-font-inverse); } } } &--green { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); &:hover { background-color: rgba($c-primary-alt,.8); a { - border-bottom-color: $c-font-inverse; + border-bottom-color: var(--mf-c-font-inverse); } } } &--dark-gray { - background-color: $c-gray-dark; + background-color: var(--mf-c-gray-dark); &:hover { background-color: rgba($c-gray-dark,.8); a { - border-bottom-color: $c-font-inverse; + border-bottom-color: var(--mf-c-font-inverse); } } } @@ -246,11 +246,11 @@ &__link { a:hover { - border-bottom-color: $c-font-link; + border-bottom-color: var(--mf-c-font-link); } svg { - fill: $c-bay-blue-lighter; + fill: var(--mf-c-bay-blue-lighter); } } @@ -259,15 +259,15 @@ &__item--dark-gray &__link { a { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:hover { - border-bottom-color: $c-font-inverse; + border-bottom-color: var(--mf-c-font-inverse); } } svg { - fill: rgba($c-font-inverse, .5); + fill: rgba(var(--mf-c-font-inverse), .5); } } } diff --git a/packages/assets/scss/03-organisms/_action-details.scss b/packages/assets/scss/03-organisms/_action-details.scss index 70fd4a3d65..4af3d5faba 100644 --- a/packages/assets/scss/03-organisms/_action-details.scss +++ b/packages/assets/scss/03-organisms/_action-details.scss @@ -160,20 +160,20 @@ &__title { @include ma-heading-colored($c-primary-alt); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-bold; } &__anchor-links { @media ($bp-medium-max) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } &.is-open { a + a { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } @@ -181,21 +181,21 @@ font-weight: $fonts-normal; &.is-active { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; } &:hover { - color: $c-font-base; + color: var(--mf-c-font-base); } } a + a { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } &__toggle-link { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 4cc3aee57c..265ce34d88 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -186,21 +186,21 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); } &__category { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-normal; } &--no-background &__category { - color: $c-font-base; + color: var(--mf-c-font-base); } &__search { button { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } } @@ -208,7 +208,7 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); &__items--all { .ma__callout-link { - background-color: $c-bg; + background-color: var(--mf-c-bg); box-shadow: none; } @@ -216,22 +216,22 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); box-shadow: none; &__content { - background-color: $c-bg; + background-color: var(--mf-c-bg); &:after { - background-color: $c-bg; + background-color: var(--mf-c-bg); } } } } &__see-all { - background-color: $c-primary; + background-color: var(--mf-c-primary); .ma__decorative-link { a { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:hover { border-color: rgba($c-font-inverse, .5); @@ -245,20 +245,20 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); } &--no-background &__see-all { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); .ma__decorative-link { a { - color: $c-font-link; + color: var(--mf-c-font-link); &:hover { - border-color: $c-link; + border-color: var(--mf-c-link); } } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); } } } diff --git a/packages/assets/scss/03-organisms/_banner-carousel.scss b/packages/assets/scss/03-organisms/_banner-carousel.scss index 757c20978b..f18aee2ae2 100644 --- a/packages/assets/scss/03-organisms/_banner-carousel.scss +++ b/packages/assets/scss/03-organisms/_banner-carousel.scss @@ -122,7 +122,7 @@ .slick-arrow { &:after { - border-color: $c-white; + border-color: var(--mf-c-white); } &:before { @@ -130,18 +130,18 @@ } &:hover:before { - background-color: $c-primary; + background-color: var(--mf-c-primary); } } .slick-dots { button { - background-color: $c-primary; + background-color: var(--mf-c-primary); } .slick-active button { - background-color: $c-bg; + background-color: var(--mf-c-bg); } } } diff --git a/packages/assets/scss/03-organisms/_blog-feed.scss b/packages/assets/scss/03-organisms/_blog-feed.scss index 5342c3185b..f5e62adf9f 100644 --- a/packages/assets/scss/03-organisms/_blog-feed.scss +++ b/packages/assets/scss/03-organisms/_blog-feed.scss @@ -113,7 +113,7 @@ &__date { background-color: rgba($c-white,.8); - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: 900; } @@ -123,7 +123,7 @@ &:hover, &:after { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/03-organisms/_blogpost-collection-header.scss b/packages/assets/scss/03-organisms/_blogpost-collection-header.scss index ed71583b4a..f87c5f6157 100644 --- a/packages/assets/scss/03-organisms/_blogpost-collection-header.scss +++ b/packages/assets/scss/03-organisms/_blogpost-collection-header.scss @@ -5,16 +5,16 @@ padding-bottom: $standard-spacing--xxsmall; &--dark-font &--inner { - color: $c-black; + color: var(--mf-c-black); .blogpost-collection-header__content a { - color: $c-black; + color: var(--mf-c-black); } } } .blogpost-collection-header--inner { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); display: flex; align-items: center; justify-content: space-between; @@ -43,15 +43,15 @@ font-size: $fonts-2xlarge; a { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:hover { - border-bottom-color: $c-white; + border-bottom-color: var(--mf-c-white); } } svg { - fill: $c-white; + fill: var(--mf-c-white); opacity: 0.5; } } diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss index 9ad4f0a42e..bbdd9d1e33 100644 --- a/packages/assets/scss/03-organisms/_breadcrumbs.scss +++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss @@ -87,7 +87,7 @@ $breadcrumbs-scrollbar-height: 12px; margin-left: 0; margin-right: 3px; width: 7px; - border-color: $c-gray-dark; + border-color: var(--mf-c-gray-dark); } &:first-child { @@ -120,7 +120,7 @@ $breadcrumbs-scrollbar-height: 12px; } button { - border: 2px solid $c-bay-blue-50-tint; + border: 2px solid var(--mf-c-bay-blue-50-tint); background: transparent; width: 27px; height: 25px; @@ -135,7 +135,7 @@ $breadcrumbs-scrollbar-height: 12px; } a, button { - color: $c-primary; + color: var(--mf-c-primary); display: inline-block; font-size: $fonts-smaller; line-height: 1; @@ -144,7 +144,7 @@ $breadcrumbs-scrollbar-height: 12px; text-decoration: none; &:hover { - text-shadow: 0px 0px 0px $c-primary ; + text-shadow: 0px 0px 0px var(--mf-c-primary) ; } } @@ -154,26 +154,26 @@ $breadcrumbs-scrollbar-height: 12px; transition: border 0.4s; &:hover { - border: 2px solid $c-primary; + border: 2px solid var(--mf-c-primary); } } a { - box-shadow: inset 0 0 $c-white, inset 0px -1px $c-bay-blue-lighter; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-bay-blue-lighter); svg { - fill: $c-primary; - stroke: $c-primary; + fill: var(--mf-c-primary); + stroke: var(--mf-c-primary); transition: fill 0.4s, stroke 0.4s; will-change: fill, stroke; } &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px $c-bay-blue-30-tint; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-bay-blue-30-tint); svg { - fill: $c-link; - stroke: $c-bay-blue-50-tint; + fill: var(--mf-c-link); + stroke: var(--mf-c-bay-blue-50-tint); } } @@ -200,7 +200,7 @@ $breadcrumbs-scrollbar-height: 12px; height: 7px; margin-right: 5px; width: 7px; - border-color: $c-gray-dark; + border-color: var(--mf-c-gray-dark); } &:after { @@ -278,10 +278,10 @@ $breadcrumbs-scrollbar-height: 12px; .ma__breadcrumbs { @media ($bp-medium-min) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &__items { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } @@ -290,25 +290,25 @@ $breadcrumbs-scrollbar-height: 12px; } &__sub-items { - background-color: $c-bg; + background-color: var(--mf-c-bg); box-shadow: $box-shadow; } &--light { - background-color: $c-bg; + background-color: var(--mf-c-bg); } &--light &__items { @media ($bp-medium-min) { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } } &--light &__container { @media ($bp-medium-max) { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index 2b35aba9c3..ec69180e60 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -90,11 +90,11 @@ } &__icon svg { - fill: $c-warning; + fill: var(--mf-c-warning); } &__link { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: bold; svg { @@ -115,7 +115,7 @@ } &--c-primary &__icon svg { - fill: $c-primary; + fill: var(--mf-c-primary); } //c-primary-alt @@ -127,7 +127,7 @@ } &--c-primary-alt &__icon svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } //c-gray-dark @@ -139,7 +139,7 @@ } &--c-gray-dark &__icon svg { - fill: $c-gray-dark; + fill: var(--mf-c-gray-dark); } //c-error-red @@ -151,7 +151,7 @@ } &--c-error-red &__icon svg { - fill: $c-error-red; + fill: var(--mf-c-error-red); } //c-white @@ -163,7 +163,7 @@ } &--c-white &__icon svg { - fill: $c-white; + fill: var(--mf-c-white); } } diff --git a/packages/assets/scss/03-organisms/_callout-message.scss b/packages/assets/scss/03-organisms/_callout-message.scss index 93a1071c22..111fee47d0 100644 --- a/packages/assets/scss/03-organisms/_callout-message.scss +++ b/packages/assets/scss/03-organisms/_callout-message.scss @@ -38,7 +38,7 @@ } &--white { - background-color: $c-bg; + background-color: var(--mf-c-bg); border-color: mix($c-white, $c-font-detail,70%); box-shadow: $box-shadow; } @@ -46,7 +46,7 @@ @for $i from 2 through 6 { h#{$i} { margin-top: 0; - color: $c-font-heading; + color: var(--mf-c-font-heading); font-weight: $fonts-bold; @include ma-heading($i+1); diff --git a/packages/assets/scss/03-organisms/_callout-time.scss b/packages/assets/scss/03-organisms/_callout-time.scss index 714d106d06..77f58ce20d 100644 --- a/packages/assets/scss/03-organisms/_callout-time.scss +++ b/packages/assets/scss/03-organisms/_callout-time.scss @@ -52,12 +52,12 @@ &__icon { & > svg { - fill: $c-highlight; + fill: var(--mf-c-highlight); } } &__text { - color: $c-font-detail; + color: var(--mf-c-font-detail); font-weight: $fonts-normal; } } diff --git a/packages/assets/scss/03-organisms/_callout.scss b/packages/assets/scss/03-organisms/_callout.scss index 1e2a10fde4..ff342ada0c 100644 --- a/packages/assets/scss/03-organisms/_callout.scss +++ b/packages/assets/scss/03-organisms/_callout.scss @@ -60,14 +60,14 @@ //theme .ma__callout { - border-left-color: $c-highlight; - color: $c-font-heading; + border-left-color: var(--mf-c-highlight); + color: var(--mf-c-font-heading); font-weight: $fonts-bolder; &__header { svg { - fill: $c-highlight; + fill: var(--mf-c-highlight); } } } diff --git a/packages/assets/scss/03-organisms/_change-log.scss b/packages/assets/scss/03-organisms/_change-log.scss index 911aa612e7..1999998f1e 100644 --- a/packages/assets/scss/03-organisms/_change-log.scss +++ b/packages/assets/scss/03-organisms/_change-log.scss @@ -121,7 +121,7 @@ &:hover, &:after { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/03-organisms/_collage-header.scss b/packages/assets/scss/03-organisms/_collage-header.scss index f86c8c67e7..f39e80915b 100644 --- a/packages/assets/scss/03-organisms/_collage-header.scss +++ b/packages/assets/scss/03-organisms/_collage-header.scss @@ -168,20 +168,20 @@ $collage-header-bp-min: "min-width: 701px"; $collage-header-bp-max: "max-width: 700px"; .ma__collage-header { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); &__title { @media ($collage-header-bp-max) { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } &:before { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } h1 { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-light; } } diff --git a/packages/assets/scss/03-organisms/_collapsible-content.scss b/packages/assets/scss/03-organisms/_collapsible-content.scss index 01d5d1e8d8..6aeda7137a 100644 --- a/packages/assets/scss/03-organisms/_collapsible-content.scss +++ b/packages/assets/scss/03-organisms/_collapsible-content.scss @@ -21,7 +21,7 @@ &__toggle-all { background: none; border: 0; - color: $c-font-detail; + color: var(--mf-c-font-detail); display: block; margin-left: auto; margin-right: 0; @@ -53,7 +53,7 @@ } &__item { - background: $c-bg; + background: var(--mf-c-bg); } } @@ -67,7 +67,7 @@ } &__button { - background: $c-bg; + background: var(--mf-c-bg); padding-right: 66px; @media ($bp-small-max) { @@ -80,7 +80,7 @@ position: absolute; top: 24px; right: 40px; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-weight: $fonts-bolder; font-style: italic; font-size: $fonts-medium; @@ -126,6 +126,6 @@ .ma__collapsible-content { &__item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/03-organisms/_collection-header.scss b/packages/assets/scss/03-organisms/_collection-header.scss index 7783752641..3f7d00b565 100644 --- a/packages/assets/scss/03-organisms/_collection-header.scss +++ b/packages/assets/scss/03-organisms/_collection-header.scss @@ -5,7 +5,7 @@ padding-bottom: $standard-spacing--xsmall; &__inner { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); @include ma-container; display: flex; @@ -16,15 +16,15 @@ font-size: $fonts-7xlarge; font-weight: $fonts-normal; margin-bottom: 1rem; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } &--dark-font &__inner { - color: $c-font-dark; + color: var(--mf-c-font-dark); } &--dark-font &__inner &__title { - color: $c-font-dark; + color: var(--mf-c-font-dark); } &__description { diff --git a/packages/assets/scss/03-organisms/_contact-row.scss b/packages/assets/scss/03-organisms/_contact-row.scss index f0a66026c8..4b43da5002 100644 --- a/packages/assets/scss/03-organisms/_contact-row.scss +++ b/packages/assets/scss/03-organisms/_contact-row.scss @@ -26,7 +26,7 @@ $accordion-break: 720px; @media (min-width: $accordion-break) { column-count: 2; column-gap: 40px; - column-rule: 1px solid $c-bd-divider; + column-rule: 1px solid var(--mf-c-bd-divider); .ma__contact-set { /* Prevent a single contact-set from breaking across columns */ diff --git a/packages/assets/scss/03-organisms/_content-eyebrow.scss b/packages/assets/scss/03-organisms/_content-eyebrow.scss index ff619ec69a..78ba939c70 100644 --- a/packages/assets/scss/03-organisms/_content-eyebrow.scss +++ b/packages/assets/scss/03-organisms/_content-eyebrow.scss @@ -57,7 +57,7 @@ .ma__header-tags, .ma__social-links { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_curated-person.scss b/packages/assets/scss/03-organisms/_curated-person.scss index f28d4de2a8..976dab06bf 100644 --- a/packages/assets/scss/03-organisms/_curated-person.scss +++ b/packages/assets/scss/03-organisms/_curated-person.scss @@ -18,7 +18,7 @@ &--meta-wrapper { display: flex; font-style: italic; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); font-weight: $fonts-bold; font-size: $fonts-larger; @@ -31,12 +31,12 @@ .curated-person--org { padding-left: 1rem; - border-left: 1px solid $c-bd-divider; + border-left: 1px solid var(--mf-c-bd-divider); } } .ma__contact-us__content-wrap { - border-bottom: 1px solid $c-bd-divider; + border-bottom: 1px solid var(--mf-c-bd-divider); padding-bottom: 1rem; @media ($bp-large-min) { @@ -61,7 +61,7 @@ position: absolute; right: 20px; top: 0; - background-color: $c-bd-divider; + background-color: var(--mf-c-bd-divider); } } @@ -74,7 +74,7 @@ &:not(:first-child) { padding: 0 10px; - border-left: 1px solid $c-bd-divider; + border-left: 1px solid var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss index ee11f99826..f91d135d4d 100644 --- a/packages/assets/scss/03-organisms/_error-page.scss +++ b/packages/assets/scss/03-organisms/_error-page.scss @@ -50,12 +50,12 @@ } &__label { - color: $c-warning; + color: var(--mf-c-warning); font-weight: 900; } &__type { - color: $c-font-detail; + color: var(--mf-c-font-detail); font-weight: $fonts-bold; } @@ -64,7 +64,7 @@ } &__message { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-light; } } diff --git a/packages/assets/scss/03-organisms/_event-listing.scss b/packages/assets/scss/03-organisms/_event-listing.scss index 15b9bb6002..26a9e12e33 100644 --- a/packages/assets/scss/03-organisms/_event-listing.scss +++ b/packages/assets/scss/03-organisms/_event-listing.scss @@ -242,37 +242,37 @@ $event-listing-bp-show-grid: $bp-medium-min; } &--grid &__item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); &:after { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } &__item + &__item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } .post-content > & { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); } .post-content > & &__container { & > *:last-child { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } } .post-content > & &__item { - border-left-color: $c-bd-divider; + border-left-color: var(--mf-c-bd-divider); } } .ma__event-filters { legend, label { - color: $c-font-detail; + color: var(--mf-c-font-detail); } } diff --git a/packages/assets/scss/03-organisms/_feedback-form.scss b/packages/assets/scss/03-organisms/_feedback-form.scss index 456a6f7faf..d1d4f22166 100644 --- a/packages/assets/scss/03-organisms/_feedback-form.scss +++ b/packages/assets/scss/03-organisms/_feedback-form.scss @@ -168,13 +168,13 @@ $feedback-form-bp-min: "min-width: 751px"; &__overlay { background-color: rgba($c-black,.6); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } &__title { @include ma-border-decorative($c-highlight,1); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } &__controls { @@ -188,6 +188,6 @@ $feedback-form-bp-min: "min-width: 751px"; } &__error-message { - color: $c-font-error; + color: var(--mf-c-font-error); } } diff --git a/packages/assets/scss/03-organisms/_filter-box.scss b/packages/assets/scss/03-organisms/_filter-box.scss index c20397a8fd..7e020a3eca 100644 --- a/packages/assets/scss/03-organisms/_filter-box.scss +++ b/packages/assets/scss/03-organisms/_filter-box.scss @@ -9,15 +9,15 @@ &__form { box-sizing: border-box; - border: 1px solid $c-bay-blue-50-tint; - background-color: $c-bay-blue-90-tint; + border: 1px solid var(--mf-c-bay-blue-50-tint); + background-color: var(--mf-c-bay-blue-90-tint); @media ($bp-large-max) { border-width: 1px 0; } &--active { - box-shadow: 0 0 1.25rem $c-box-shadow-black; + box-shadow: 0 0 1.25rem var(--mf-c-box-shadow-black); } .main-content--two { @@ -82,9 +82,9 @@ border-bottom-width: 1px; transition: border 0.2s; font-weight: 700; - color: $c-font-base; + color: var(--mf-c-font-base); padding: 0px; - border-bottom-color: $c-font-base; + border-bottom-color: var(--mf-c-font-base); &:hover { border-bottom-width: 3px; diff --git a/packages/assets/scss/03-organisms/_footer-slim.scss b/packages/assets/scss/03-organisms/_footer-slim.scss index 28d9f38090..dffee61f77 100644 --- a/packages/assets/scss/03-organisms/_footer-slim.scss +++ b/packages/assets/scss/03-organisms/_footer-slim.scss @@ -1,7 +1,7 @@ @use "00-base/configure" as *; .ma__footer-slim { - background-color: $c-platinum-gray; + background-color: var(--mf-c-platinum-gray); font-size: $fonts-medium; line-height: 1.2; padding: 20px 0 30px; @@ -93,7 +93,7 @@ margin-bottom: 1em; a { - color: $c-primary; + color: var(--mf-c-primary); font-weight: 600; text-decoration: none; @@ -122,7 +122,7 @@ margin-bottom: 1rem; svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); min-width: 20px; } diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index bb6c51d419..fbcc9bd0ed 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -118,7 +118,7 @@ //theme .ma__footer { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &__back2top { @@ -132,13 +132,13 @@ &:hover { svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } } &__copyright { - color: $c-gray-dark; + color: var(--mf-c-gray-dark); font-weight: $fonts-light; &--date { diff --git a/packages/assets/scss/03-organisms/_footer.scss b/packages/assets/scss/03-organisms/_footer.scss index fa0d439d58..e3cea7f170 100644 --- a/packages/assets/scss/03-organisms/_footer.scss +++ b/packages/assets/scss/03-organisms/_footer.scss @@ -3,7 +3,7 @@ .ma__footer-new { // height: 100px; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &__container { @@ -59,7 +59,7 @@ @include ma-link-underline; padding-bottom: 3px; - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-normal; &:hover { @@ -72,7 +72,7 @@ &__copyright { font-size: $fonts-smaller; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); font-weight: $fonts-light; &--bold { diff --git a/packages/assets/scss/03-organisms/_footnote-list.scss b/packages/assets/scss/03-organisms/_footnote-list.scss index 332dbcd122..b8595d6376 100644 --- a/packages/assets/scss/03-organisms/_footnote-list.scss +++ b/packages/assets/scss/03-organisms/_footnote-list.scss @@ -21,6 +21,6 @@ .ma__footnote-list { &__container { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/03-organisms/_form-requirements.scss b/packages/assets/scss/03-organisms/_form-requirements.scss index 0e19b44404..fa2f8481a6 100644 --- a/packages/assets/scss/03-organisms/_form-requirements.scss +++ b/packages/assets/scss/03-organisms/_form-requirements.scss @@ -53,10 +53,10 @@ //theme .ma__form-requirements { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); .main-content--two .page-content > &:before { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } // Removed per DP-27157. diff --git a/packages/assets/scss/03-organisms/_gen-teaser.scss b/packages/assets/scss/03-organisms/_gen-teaser.scss index 8ed4c089e5..721f6383f7 100644 --- a/packages/assets/scss/03-organisms/_gen-teaser.scss +++ b/packages/assets/scss/03-organisms/_gen-teaser.scss @@ -20,7 +20,7 @@ border-top-style: solid; margin-top: 20px; padding-top: 20px; - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); @media ($bp-large-min) { margin-top: 30px; @@ -67,7 +67,7 @@ letter-spacing: $letter-spacing-large; padding: 5px 7px; text-transform: uppercase; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); font-weight: $fonts-bold; svg { @@ -109,7 +109,7 @@ span { font-size: $fonts-medium; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); font-weight: $fonts-bold; } @@ -132,13 +132,13 @@ font-size: $fonts-small; line-height: 1; margin-bottom: 1em; - color: $c-font-dark; + color: var(--mf-c-font-dark); font-style: italic; font-weight: $fonts-bold; } &__date + &__org { - border-left: 1px solid $c-bd-divider; + border-left: 1px solid var(--mf-c-bd-divider); margin-left: .75em; padding-left: .75em; } @@ -200,7 +200,7 @@ @media ($bp-small-min) { flex: 1 50%; align-content: flex-start; - border-left: 1px solid $c-bd-divider; + border-left: 1px solid var(--mf-c-bd-divider); margin-left: .75em; padding-left: .75em; } @@ -269,7 +269,7 @@ @media ($bp-small-min) { padding-left: .75em; margin-left: .75em; - border-left: 1px solid $c-gray-light; + border-left: 1px solid var(--mf-c-gray-light); & > *:first-child { margin-top: 0rem; @@ -297,7 +297,7 @@ &__secondaryicon svg { display: inline-block; vertical-align: middle; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } &__infoitem { @@ -321,7 +321,7 @@ svg { display: inline-block; vertical-align: middle; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); margin-right: 0.5em; } } @@ -330,12 +330,12 @@ } &__tag { - color: $c-gray; + color: var(--mf-c-gray); font-size: $fonts-xsmall; font-weight: bold; text-align: center; - border: 1px solid $c-gray-light; - background-color: $c-bg; + border: 1px solid var(--mf-c-gray-light); + background-color: var(--mf-c-bg); padding: 0px 5px; min-width: 60px; display: inline-block; @@ -374,12 +374,12 @@ .ma__button-icon.ma__button-search { height: 42px; min-height: 42px; - background-color: $c-bg; - border-color: $c-gray-light !important; - color: $c-primary-alt; + background-color: var(--mf-c-bg); + border-color: var(--mf-c-gray-light) !important; + color: var(--mf-c-primary-alt); svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); height: 13px; width: 14px; } diff --git a/packages/assets/scss/03-organisms/_header-alerts.scss b/packages/assets/scss/03-organisms/_header-alerts.scss index 18682f8520..feac40f277 100644 --- a/packages/assets/scss/03-organisms/_header-alerts.scss +++ b/packages/assets/scss/03-organisms/_header-alerts.scss @@ -8,13 +8,13 @@ align-items: center; flex-wrap: wrap; - color: $c-gray-darkest; + color: var(--mf-c-gray-darkest); margin-bottom: 0; - border: 1px solid $c-bd-divider-dark; + border: 1px solid var(--mf-c-bd-divider-dark); &__button { - color: $c-gray-darkest; - background-color: $c-warning; + color: var(--mf-c-gray-darkest); + background-color: var(--mf-c-warning); padding: 10px 15px; width: 100%; display: inline-flex; @@ -79,19 +79,19 @@ .ma__action-step { - border-color: $c-bd-divider-dark; + border-color: var(--mf-c-bd-divider-dark); border-width: 1px; border-style: solid; border-top: 0; &__header { - color: $c-gray-darkest; + color: var(--mf-c-gray-darkest); border: none; display: block; padding: 20px 40px 15px 50px; text-align: left; width: 100%; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); font-size: $fonts-large; } @@ -132,7 +132,7 @@ &:after { content: ""; - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); border-width: 1px; border-style: solid; margin-top: 20px; diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index 45f4ed7ee2..17d9d09dfc 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -49,10 +49,10 @@ body.show-menu { .ma__header__hamburger { position: relative; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); @media ($bp-small-max) { - border-bottom: 1px solid $c-gray-lightest; + border-bottom: 1px solid var(--mf-c-gray-lightest); } &--slim { @@ -84,7 +84,7 @@ body.show-menu { } &__nav { - background-color: $c-primary; + background-color: var(--mf-c-primary); position: relative; z-index: $z-overlay; } @@ -109,7 +109,7 @@ body.show-menu { left: 0; width: 100%; z-index: $z-overlay; - background-color: $c-primary; + background-color: var(--mf-c-primary); } } @@ -166,7 +166,7 @@ body.show-menu { &--mobile { padding: 20px; width: 100%; - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid var(--mf-c-bd-divider); a img { width: 45px; @@ -206,7 +206,7 @@ body.show-menu { } &__nav-container { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); height: calc(100vh - 44px); top: 44px; overflow-y: auto; @@ -258,12 +258,12 @@ body.show-menu { } &__menu-button { - background-color: $c-primary; + background-color: var(--mf-c-primary); text-align: left; border: none; font-size: 19.2px;// Maintain the same font size regardless of the screensize. font-weight: 700; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); padding-right: 30px; padding-left: 20px; transition: transform 0.5s ease; @@ -302,7 +302,7 @@ body.show-menu { &__menu-icon { border-radius: 1px; cursor: pointer; - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); display: block; height: 2px; position: absolute; @@ -317,7 +317,7 @@ body.show-menu { &:after { cursor: pointer; content: ''; - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); display: block; height: 2px; position: absolute; @@ -379,14 +379,14 @@ body.show-menu { .ma__header__hamburger__search-access-button { padding: 0 20px; border: 0; - background-color: $c-primary; + background-color: var(--mf-c-primary); @media ($bp-small-min) { display: none; } & svg { - fill: $c-white; + fill: var(--mf-c-white); height: 20px; -o-transition: fill .4s; transition: fill .4s; @@ -423,7 +423,7 @@ body.show-menu { } svg { - fill: $c-white; + fill: var(--mf-c-white); } } } @@ -438,11 +438,11 @@ body.show-menu { &__item { - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid var(--mf-c-bd-divider); padding: 0; &:hover { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); box-shadow: none; } } @@ -460,12 +460,12 @@ body.show-menu { text-transform: uppercase; transition: all 0.4s ease; text-align: left; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); width: 100%; &:focus { - background-color: $c-bd-divider; - outline: 2px solid $c-gray-darkest; + background-color: var(--mf-c-bd-divider); + outline: 2px solid var(--mf-c-gray-darkest); } .toggle-indicator { @@ -515,7 +515,7 @@ body.show-menu { position: relative; top: auto; right: auto; - color: $c-font-base; + color: var(--mf-c-font-base); z-index: $z-overlay; transition: max-height 0.6s ease-in-out; @@ -538,7 +538,7 @@ body.show-menu { & .ma__utility-nav__container { padding: 0; - background-color: $c-white; + background-color: var(--mf-c-white); overflow-y: visible; max-height: auto; @@ -562,8 +562,8 @@ body.show-menu { } & .ma__utility-panel { - background-color: $c-white; - color: $c-font-base; + background-color: var(--mf-c-white); + color: var(--mf-c-font-base); @include ma-reset-list; @@ -577,7 +577,7 @@ body.show-menu { & .ma__rich-text { padding-top: 0.8em; - border-top: 2px solid $c-bd-divider; + border-top: 2px solid var(--mf-c-bd-divider); } } @@ -588,7 +588,7 @@ body.show-menu { position: relative; line-height: 1.33; padding: 0 20px 10px 20px; - color: $c-font-base; + color: var(--mf-c-font-base); margin-bottom: 0; } @@ -597,13 +597,13 @@ body.show-menu { } & .ma__utility-panel__item { - background-color: $c-white; - color: $c-font-base; + background-color: var(--mf-c-white); + color: var(--mf-c-font-base); margin: 0; display: block; &:hover { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } @@ -623,7 +623,7 @@ body.show-menu { font-weight: $fonts-normal; line-height: 1.33; padding: 10px 20px 10px 30px; - color: $c-font-base; + color: var(--mf-c-font-base); &:hover { text-decoration: underline; @@ -688,7 +688,7 @@ body.show-menu { background-color: tint($c-font-link, 90%); border-color: tint($c-font-link, 50%); box-shadow: $box-shadow; - color: $c-font-link; + color: var(--mf-c-font-link); font-size: $fonts-medium; @media ($bp-x-small-max) { @@ -721,8 +721,8 @@ body.show-menu { } &:focus { - background-color: $c-bg; - border-color: $c-highlight !important; + background-color: var(--mf-c-bg); + border-color: var(--mf-c-highlight) !important; } } } diff --git a/packages/assets/scss/03-organisms/_header-slim.scss b/packages/assets/scss/03-organisms/_header-slim.scss index 69d86752ce..382f1e5975 100644 --- a/packages/assets/scss/03-organisms/_header-slim.scss +++ b/packages/assets/scss/03-organisms/_header-slim.scss @@ -50,9 +50,9 @@ & span { font-weight: $fonts-light; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: $c-primary-alt; + -webkit-text-stroke-color: var(--mf-c-primary-alt); font-size: $fonts-3xlarge; display: inline-block; margin-left: 0.4rem; @@ -65,8 +65,8 @@ &__utility { min-height: 15px; - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); &-container { display: flex; @@ -78,7 +78,7 @@ &:not(:first-child) { margin-left: 1rem; } - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:hover { opacity: .7; @@ -87,7 +87,7 @@ } &__header { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); position: relative; &-container { diff --git a/packages/assets/scss/03-organisms/_header.scss b/packages/assets/scss/03-organisms/_header.scss index bfb074a5ae..9523b37356 100644 --- a/packages/assets/scss/03-organisms/_header.scss +++ b/packages/assets/scss/03-organisms/_header.scss @@ -90,7 +90,7 @@ body { &--mobile { padding: 20px; width: 100%; - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid var(--mf-c-bd-divider); a img { width: 45px; @@ -107,14 +107,14 @@ body { @media ($bp-large-min) { height: 15px; - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); } &--mobile { height: 15px; - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); position: fixed; top: 0; left: 0; @@ -213,7 +213,7 @@ body { transition: left .5s, visibility .5s; z-index: $z-dropdown; font-weight: $fonts-bold; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); .translated-rtl &, .translated-ltr & { @@ -235,8 +235,8 @@ body { transform-origin: 75% 75%; vertical-align: middle; width: .65em; - border-left-color: $c-font-inverse; - border-top-color: $c-font-inverse; + border-left-color: var(--mf-c-font-inverse); + border-top-color: var(--mf-c-font-inverse); } span { @@ -412,29 +412,29 @@ body { //theme .ma__header { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); @media ($bp-small-max) { - border-bottom: 1px solid $c-gray-lightest; + border-bottom: 1px solid var(--mf-c-gray-lightest); } &__nav-container { @media ($bp-header-toggle-max) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } &__button-container { @media ($bp-header-toggle-max) { - background-color: $c-primary; + background-color: var(--mf-c-primary); } } &__menu-button { font-weight: $fonts-bold; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); span:first-child { opacity: 0.7; @@ -442,11 +442,11 @@ body { } &__menu-icon { - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); &:before, &:after { - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); } .show-menu & { @@ -456,14 +456,14 @@ body { &:before { .show-menu & { - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); } } &:after { .show-menu & { - background-color: $c-font-inverse; + background-color: var(--mf-c-font-inverse); } } } @@ -472,7 +472,7 @@ body { &__main-nav { @media ($bp-header-toggle-max) { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } } @@ -483,7 +483,7 @@ body { background-color: mix($c-white, $c-font-link, 90%); border-color: mix($c-white, $c-font-link, 50%); box-shadow: $box-shadow; - color: $c-font-link; + color: var(--mf-c-font-link); font-size: $fonts-medium; @media ($bp-large-min) { @@ -491,8 +491,8 @@ body { } &:focus { - background-color: $c-bg; - border-color: $c-highlight !important; + background-color: var(--mf-c-bg); + border-color: var(--mf-c-highlight) !important; } } } diff --git a/packages/assets/scss/03-organisms/_help-tip.scss b/packages/assets/scss/03-organisms/_help-tip.scss index 888c9957eb..b1e0de7b45 100644 --- a/packages/assets/scss/03-organisms/_help-tip.scss +++ b/packages/assets/scss/03-organisms/_help-tip.scss @@ -18,7 +18,7 @@ $border-width: 1px; &__container { position: relative; - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); margin-top: .5rem; &.collapsing, &.expanding { @@ -56,8 +56,8 @@ $border-width: 1px; cursor: pointer; border: none; padding: 0px 2px; - border-bottom: 2px dotted $c-primary; - background-color: $c-bay-blue-lightest; + border-bottom: 2px dotted var(--mf-c-primary); + background-color: var(--mf-c-bay-blue-lightest); font-weight: $fonts-bold; @@ -66,17 +66,17 @@ $border-width: 1px; margin-bottom: -.1em; width: 1em; height: 1em; - fill: $c-font-link; + fill: var(--mf-c-font-link); } &:focus { - box-shadow: 0 0 3px 3px $c-focus; + box-shadow: 0 0 3px 3px var(--mf-c-focus); outline: 0; } &--active, &:hover { - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); svg { fill: mix($c-white, $c-font-link, 70%); @@ -127,7 +127,7 @@ $border-width: 1px; margin-left: 5px; width: 1rem; height: 1rem; - fill: $c-white; + fill: var(--mf-c-white); } } @@ -156,59 +156,59 @@ $border-width: 1px; #{$helpTipBaseClass}__container { &--c-primary { - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); #{$helpTipBaseClass}__close-desktop { svg { - fill: $c-primary; + fill: var(--mf-c-primary); } } } &--c-primary-alt { - background-color: $c-primary-alt-lightest; + background-color: var(--mf-c-primary-alt-lightest); #{$helpTipBaseClass}__close-desktop { svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } } &--c-highlight { - background-color: $c-highlight-lightest; + background-color: var(--mf-c-highlight-lightest); #{$helpTipBaseClass}__close-desktop { svg { - fill: $c-gray-dark; + fill: var(--mf-c-gray-dark); } } } &--c-gray-dark { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); #{$helpTipBaseClass}__close-desktop { svg { - fill: $c-gray-dark; + fill: var(--mf-c-gray-dark); } } } &--c-error-red { - background-color: $c-error-red-lightest; + background-color: var(--mf-c-error-red-lightest); #{$helpTipBaseClass}__close-desktop { svg { - fill: $c-error-red; + fill: var(--mf-c-error-red); } } } &--c-white { - background-color: $c-bg;//<-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white? + background-color: var(--mf-c-bg);//<-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white? #{$helpTipBaseClass}__close-desktop { - fill: $c-gray-dark; + fill: var(--mf-c-gray-dark); } } } @@ -231,44 +231,44 @@ $border-width: 1px; } &--c-primary { - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); #{$helpTipBaseClass}__close-mobile { - background-color: $c-primary; + background-color: var(--mf-c-primary); } } &--c-primary-alt { - background-color: $c-primary-alt-lightest; + background-color: var(--mf-c-primary-alt-lightest); #{$helpTipBaseClass}__close-mobile { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } } &--c-highlight { - background-color: $c-highlight-lightest; + background-color: var(--mf-c-highlight-lightest); #{$helpTipBaseClass}__close-mobile { - background-color: $c-highlight; + background-color: var(--mf-c-highlight); } } &--c-gray-dark { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); #{$helpTipBaseClass}__close-mobile { - background-color: $c-gray-dark; + background-color: var(--mf-c-gray-dark); } } &--c-error-red { - background-color: $c-error-red-lightest; + background-color: var(--mf-c-error-red-lightest); #{$helpTipBaseClass}__close-mobile { - background-color: $c-error-red; + background-color: var(--mf-c-error-red); } } &--c-white { - background-color: $c-bg;// <-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white? + background-color: var(--mf-c-bg);// <-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white? #{$helpTipBaseClass}__close-mobile { - background-color: $c-gray-dark; + background-color: var(--mf-c-gray-dark); } } } @@ -279,7 +279,7 @@ $border-width: 1px; margin: 0px; font-size: $fonts-medium; line-height: 1.1; - color: $c-font-base; + color: var(--mf-c-font-base); } } #{$helpTipBaseClass}__text, #{$helpTipBaseClass}__text--children { @@ -308,27 +308,27 @@ $border-width: 1px; bottom: auto; &--c-primary { - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); } &--c-primary-alt { - background-color: $c-primary-alt-lightest; + background-color: var(--mf-c-primary-alt-lightest); } &--c-highlight { - background-color: $c-highlight-lightest; + background-color: var(--mf-c-highlight-lightest); } &--c-gray-dark { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } &--c-error-red { - background-color: $c-error-red-lightest; + background-color: var(--mf-c-error-red-lightest); } &--c-white { - background-color: $c-bg;//<-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white? + background-color: var(--mf-c-bg);//<-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white? } } diff --git a/packages/assets/scss/03-organisms/_illustrated-header.scss b/packages/assets/scss/03-organisms/_illustrated-header.scss index 289493a16a..a9f3f28bef 100644 --- a/packages/assets/scss/03-organisms/_illustrated-header.scss +++ b/packages/assets/scss/03-organisms/_illustrated-header.scss @@ -79,7 +79,7 @@ $bp-illustrated-header-image-width: 360px; &__category { font-size: $fonts-large; font-weight: $fonts-bold; - color: $c-font-detail; + color: var(--mf-c-font-detail); letter-spacing: $letter-spacing-large; text-transform: uppercase; } @@ -159,14 +159,14 @@ $bp-illustrated-header-image-width: 360px; .ma__illustrated-header { &__image--empty { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } &__content { - background-color: $c-bg; + background-color: var(--mf-c-bg); &:after { - background-color: $c-bg; + background-color: var(--mf-c-bg); } } @@ -180,12 +180,12 @@ $bp-illustrated-header-image-width: 360px; &, .ma__page-header__title, .ma__illustrated-header__category { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } &, .ma__illustrated-header__content, .ma__illustrated-header__image--empty { - background: $c-primary; + background: var(--mf-c-primary); } } diff --git a/packages/assets/scss/03-organisms/_image-credit.scss b/packages/assets/scss/03-organisms/_image-credit.scss index 0cdea85db8..cd0259a47e 100644 --- a/packages/assets/scss/03-organisms/_image-credit.scss +++ b/packages/assets/scss/03-organisms/_image-credit.scss @@ -30,7 +30,7 @@ &__container { &:before { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__label { diff --git a/packages/assets/scss/03-organisms/_image-link-list.scss b/packages/assets/scss/03-organisms/_image-link-list.scss index ac2789df9b..c350947491 100644 --- a/packages/assets/scss/03-organisms/_image-link-list.scss +++ b/packages/assets/scss/03-organisms/_image-link-list.scss @@ -116,16 +116,16 @@ .ma__link-list--image-blocks { .ma__link-list__toggle { - color: $c-font-link; + color: var(--mf-c-font-link); font-weight: $fonts-bold; &:after { - border-color: $c-font-link; + border-color: var(--mf-c-font-link); opacity: .5; } &:hover { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/03-organisms/_in-page-alert.scss b/packages/assets/scss/03-organisms/_in-page-alert.scss index fe537a5c89..218c8b3d52 100644 --- a/packages/assets/scss/03-organisms/_in-page-alert.scss +++ b/packages/assets/scss/03-organisms/_in-page-alert.scss @@ -1,7 +1,7 @@ @use "00-base/configure" as *; .ma__in-page-alert { - background-color: $c-warning; + background-color: var(--mf-c-warning); font-size: 0; position: relative; z-index:1; @@ -36,7 +36,7 @@ a { display: inline; - color: $c-font-base; + color: var(--mf-c-font-base); svg { fill: rgba($c-font-base, .5); diff --git a/packages/assets/scss/03-organisms/_inline-links.scss b/packages/assets/scss/03-organisms/_inline-links.scss index 70c15d4028..1156676301 100644 --- a/packages/assets/scss/03-organisms/_inline-links.scss +++ b/packages/assets/scss/03-organisms/_inline-links.scss @@ -24,7 +24,7 @@ &:after { content: ""; - background: $c-gray-light; + background: var(--mf-c-gray-light); margin: 0 10px; width: 1px; height: $fonts-smaller; @@ -37,31 +37,31 @@ a { line-height: 1rem; text-decoration: none; - box-shadow: inset 0 0 $c-white, inset 0px -1px $c-bay-blue-lighter; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-bay-blue-lighter); font-weight: $fonts-normal; &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px $c-bay-blue-30-tint; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-bay-blue-30-tint); } } span { white-space: nowrap; - color: $c-font-detail; + color: var(--mf-c-font-detail); } } &--bg-gray { - background: $c-gray-lightest; + background: var(--mf-c-gray-lightest); .ma__inline-links_item { &:after { - background: $c-gray; + background: var(--mf-c-gray); } span { - color: $c-font-base; + color: var(--mf-c-font-base); } } } diff --git a/packages/assets/scss/03-organisms/_jump-links.scss b/packages/assets/scss/03-organisms/_jump-links.scss index fad0e9088c..db85af970c 100644 --- a/packages/assets/scss/03-organisms/_jump-links.scss +++ b/packages/assets/scss/03-organisms/_jump-links.scss @@ -259,31 +259,31 @@ &__inner { @media ($bp-small-min) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } &__title { background-image: linear-gradient(-60deg, transparent, transparent 35px, $c-primary-alt 35px); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-bold; } &__links { @media ($bp-small-max) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } &__column { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__link { & > svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); @media ($bp-small-max) { display: none; @@ -291,7 +291,7 @@ } &:hover a { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } @media ($bp-small-max) { @@ -301,23 +301,23 @@ } &.is-active a { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; } &.is-active:hover a { - color: $c-font-base; + color: var(--mf-c-font-base); border-bottom-color: transparent; } & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } } &__toggle-link { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/03-organisms/_link-list.scss b/packages/assets/scss/03-organisms/_link-list.scss index a81fa92054..c02e8ff014 100644 --- a/packages/assets/scss/03-organisms/_link-list.scss +++ b/packages/assets/scss/03-organisms/_link-list.scss @@ -84,7 +84,7 @@ &__item { padding: 5px 0; - color: $c-font-detail; + color: var(--mf-c-font-detail); .ma__decorative-link { display: block; @@ -139,7 +139,7 @@ .ma__link-list--no-line .ma__link-list__items { margin-bottom: 0; padding-left: 20px; - border-left: 3px solid $c-primary-lighter; + border-left: 3px solid var(--mf-c-primary-lighter); } .ma__link-list__items .ma__link-list__item { @@ -185,7 +185,7 @@ } .sidebar &__item + &__item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &--no-line { diff --git a/packages/assets/scss/03-organisms/_location-listing.scss b/packages/assets/scss/03-organisms/_location-listing.scss index 158e1b168b..91fd0f8e5b 100644 --- a/packages/assets/scss/03-organisms/_location-listing.scss +++ b/packages/assets/scss/03-organisms/_location-listing.scss @@ -102,15 +102,15 @@ $location-listin--map-min-width: 315px; } &__filters { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); .ma__button-search { - color: $c-font-base; + color: var(--mf-c-font-base); &:hover { - background-color: $c-font-base; - border-color: $c-font-base; - color: $c-font-inverse; + background-color: var(--mf-c-font-base); + border-color: var(--mf-c-font-base); + color: var(--mf-c-font-inverse); } } } diff --git a/packages/assets/scss/03-organisms/_mapped-locations.scss b/packages/assets/scss/03-organisms/_mapped-locations.scss index 0d21720e34..6b116f1626 100644 --- a/packages/assets/scss/03-organisms/_mapped-locations.scss +++ b/packages/assets/scss/03-organisms/_mapped-locations.scss @@ -51,7 +51,7 @@ } &__aside { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); display: flex; flex: 1 1 auto; flex-direction: column; diff --git a/packages/assets/scss/03-organisms/_mass-feedback-form.scss b/packages/assets/scss/03-organisms/_mass-feedback-form.scss index a37cd47e67..068e2be3d0 100644 --- a/packages/assets/scss/03-organisms/_mass-feedback-form.scss +++ b/packages/assets/scss/03-organisms/_mass-feedback-form.scss @@ -4,8 +4,8 @@ $formQuickTransitions: max-height 0.3s linear; @use "00-base/configure" as *; .ma__mass-feedback-form { - border: 2px solid $c-gray-light; - background: $c-bg; + border: 2px solid var(--mf-c-gray-light); + background: var(--mf-c-bg); max-width: 35em; margin: 0 0.5rem 5rem; @@ -16,7 +16,7 @@ $formQuickTransitions: max-height 0.3s linear; &__heading { padding: 1rem 20px; font-size: $fonts-larger; - border-bottom: 2px solid $c-gray-light; + border-bottom: 2px solid var(--mf-c-gray-light); margin-bottom: 0; @media ($bp-small-min) { @@ -181,15 +181,15 @@ $formQuickTransitions: max-height 0.3s linear; .ma__warn-msg { &.has-error, &.has-error-default { - border-left-color: $c-gray-lighter; + border-left-color: var(--mf-c-gray-lighter); } } .ma__alert-msg, .ma__error-msg { &.has-error { - color: $c-error; - border-left-color: $c-error; + color: var(--mf-c-error); + border-left-color: var(--mf-c-error); } } diff --git a/packages/assets/scss/03-organisms/_page-banner-legacy.scss b/packages/assets/scss/03-organisms/_page-banner-legacy.scss index 65c4610b76..becea2e8f0 100644 --- a/packages/assets/scss/03-organisms/_page-banner-legacy.scss +++ b/packages/assets/scss/03-organisms/_page-banner-legacy.scss @@ -32,7 +32,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); padding: 30px 0 45px 0; &:before { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } } @@ -52,7 +52,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); width: 100%; &, & > g { - fill: rgba($c-font-inverse,.5); + fill: rgba(var(--mf-c-font-inverse),.5); } @media ($bp-large-extended-min) { @@ -79,7 +79,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); margin-bottom: 0; vertical-align: middle; z-index: 1; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); @media ($bp-medium-min) { font-size: $fonts-8xlarge; @@ -106,7 +106,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); &__description, &__unlinked-title, .ma__decorative-link { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-normal; letter-spacing: $letter-spacing-small; line-height: 2.188rem; @@ -130,14 +130,14 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .ma__decorative-link a { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:hover { border-bottom-color: rgba($c-font-inverse, 0.5); } svg { - fill: rgba($c-font-inverse, 0.5); + fill: rgba(var(--mf-c-font-inverse), 0.5); } } @@ -162,7 +162,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); &__buttons-label { font-weight: $fonts-bold; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); margin-right: 1rem; margin-top: 1rem; letter-spacing: $letter-spacing-large; @@ -292,7 +292,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; height: auto; - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); @media ($bp-x-large-min) { height: 100%; @@ -303,7 +303,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); z-index: 1; top: -50%; transform: none; - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); @media ($bp-x-large-min) { margin-right: 70px; @@ -335,7 +335,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); flex-direction: column-reverse; padding-left: 0; - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } .ma__page-banner-legacy__image { @@ -360,7 +360,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); position: relative; display: flex; align-items: center; - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); background-image: none; height: 100%; width: 100%; @@ -468,17 +468,17 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // blue background &--blue { - background-color: $c-primary; + background-color: var(--mf-c-primary); &:before { - background-color: $c-primary; + background-color: var(--mf-c-primary); } &.ma__page-banner-legacy--taper .ma__page-banner-legacy__content { - background-color: $c-primary; + background-color: var(--mf-c-primary); &:before { - background-color: $c-primary; + background-color: var(--mf-c-primary); } } } @@ -486,17 +486,17 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // green background &--green { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); &:before { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } &.ma__page-banner-legacy--taper .ma__page-banner-legacy__content { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); &:before { - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); } } } @@ -505,7 +505,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); &--white { background-color: white; - color: $c-font-base; + color: var(--mf-c-font-base); &:before { background-color: white; @@ -524,13 +524,13 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); svg, svg > g { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } &--white &__title, &--white &__description { - color: $c-font-base; + color: var(--mf-c-font-base); } } diff --git a/packages/assets/scss/03-organisms/_page-flipper.scss b/packages/assets/scss/03-organisms/_page-flipper.scss index 6fd4b7e68d..fab5f1121d 100644 --- a/packages/assets/scss/03-organisms/_page-flipper.scss +++ b/packages/assets/scss/03-organisms/_page-flipper.scss @@ -84,7 +84,7 @@ .ma__page-flipper { &__container { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__context-label { @@ -93,6 +93,6 @@ &__blank, .ma__arrow-nav { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/03-organisms/_page-header-addons.scss b/packages/assets/scss/03-organisms/_page-header-addons.scss index 97badfed33..6f600fe57f 100644 --- a/packages/assets/scss/03-organisms/_page-header-addons.scss +++ b/packages/assets/scss/03-organisms/_page-header-addons.scss @@ -170,12 +170,12 @@ $page-header-widget-width: 350px; .ma__contact-us > .ma__contact-group:nth-child(2):nth-last-child(3), .ma__contact-us > .ma__contact-us__extra { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } .ma__contact-us__expand { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } diff --git a/packages/assets/scss/03-organisms/_page-header.scss b/packages/assets/scss/03-organisms/_page-header.scss index 28db267f85..1b3b1e4035 100644 --- a/packages/assets/scss/03-organisms/_page-header.scss +++ b/packages/assets/scss/03-organisms/_page-header.scss @@ -106,7 +106,7 @@ $page-header-widget-width: 350px; font-weight: $fonts-bold; letter-spacing: $letter-spacing-large; text-transform: uppercase; - color: $c-font-detail; + color: var(--mf-c-font-detail); @media ($bp-small-min) { font-size: $fonts-large; @@ -245,17 +245,17 @@ $page-header-widget-width: 350px; &__tags { @media ($bp-medium-min) { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } .ma__header-tags, .ma__social-links { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } &__sub-title { - color: $c-font-heading; + color: var(--mf-c-font-heading); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/03-organisms/_person-card.scss b/packages/assets/scss/03-organisms/_person-card.scss index 1f5018bd7f..fb2339f180 100644 --- a/packages/assets/scss/03-organisms/_person-card.scss +++ b/packages/assets/scss/03-organisms/_person-card.scss @@ -80,11 +80,11 @@ .ma__person-card { position: relative; - color: $c-font-base; - background-color: $c-bg; + color: var(--mf-c-font-base); + background-color: var(--mf-c-bg); @media ($bp-large-extended-min) { - border: 1px solid $c-primary-alt; + border: 1px solid var(--mf-c-primary-alt); box-shadow: 4px 2px 5px 0px rgba($c-gray-darkest,0.3); } @@ -95,7 +95,7 @@ height: 5px; transform: skew(-30deg); width: 100%; - background-color: $c-bd-input; + background-color: var(--mf-c-bd-input); @media ($bp-large-extended-min) { display: none; @@ -105,7 +105,7 @@ &__image { img { - border: 7px solid $c-bd-input; + border: 7px solid var(--mf-c-bd-input); } } @@ -114,7 +114,7 @@ margin-top: 0; &::after { - background-color: $c-gray-dark; + background-color: var(--mf-c-gray-dark); } } } diff --git a/packages/assets/scss/03-organisms/_personal-message.scss b/packages/assets/scss/03-organisms/_personal-message.scss index da7ef0bf86..6bcfd1488b 100644 --- a/packages/assets/scss/03-organisms/_personal-message.scss +++ b/packages/assets/scss/03-organisms/_personal-message.scss @@ -47,9 +47,9 @@ //theme .ma__personal-message { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); .main-content--two .page-content > &:before { - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); } } diff --git a/packages/assets/scss/03-organisms/_press-filters.scss b/packages/assets/scss/03-organisms/_press-filters.scss index ece6401a2e..d9ab3027ad 100644 --- a/packages/assets/scss/03-organisms/_press-filters.scss +++ b/packages/assets/scss/03-organisms/_press-filters.scss @@ -92,21 +92,21 @@ .ma__press-filters { &__container { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } &__organizations { - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); } label, legend { - color: $c-font-detail; + color: var(--mf-c-font-detail); } &__clear { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; - border-bottom-color: $c-font-base; + border-bottom-color: var(--mf-c-font-base); } } diff --git a/packages/assets/scss/03-organisms/_press-listing.scss b/packages/assets/scss/03-organisms/_press-listing.scss index 2559730eee..fa0063ef5a 100644 --- a/packages/assets/scss/03-organisms/_press-listing.scss +++ b/packages/assets/scss/03-organisms/_press-listing.scss @@ -158,14 +158,14 @@ .ma__press-listing { &__secondary-items { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__secondary-item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); &:after { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } } @@ -192,7 +192,7 @@ width: 1px; height: 100%; position: absolute; - background-color: $c-bd-divider; + background-color: var(--mf-c-bd-divider); top: 0; right: -30px; } diff --git a/packages/assets/scss/03-organisms/_pullquote.scss b/packages/assets/scss/03-organisms/_pullquote.scss index d51969498a..e3b9ff0cba 100644 --- a/packages/assets/scss/03-organisms/_pullquote.scss +++ b/packages/assets/scss/03-organisms/_pullquote.scss @@ -16,14 +16,14 @@ font-size: $fonts-2xlarge; font-weight: $fonts-bold; line-height: 1.285; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); &::before { content: ''; width: 75px; height: 20px; /* background fallback */ - background-color: $c-primary-alt; + background-color: var(--mf-c-primary-alt); /* will be on top of fallback, if browser supports it */ background-image: linear-gradient(120deg, $c-primary-alt 65px, $c-white 0); position: absolute; diff --git a/packages/assets/scss/03-organisms/_quick-actions.scss b/packages/assets/scss/03-organisms/_quick-actions.scss index 820fbedab3..bdbfdce5bc 100644 --- a/packages/assets/scss/03-organisms/_quick-actions.scss +++ b/packages/assets/scss/03-organisms/_quick-actions.scss @@ -57,7 +57,7 @@ &__item { & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_related-locations.scss b/packages/assets/scss/03-organisms/_related-locations.scss index b9853712a7..604c64b9da 100644 --- a/packages/assets/scss/03-organisms/_related-locations.scss +++ b/packages/assets/scss/03-organisms/_related-locations.scss @@ -1,12 +1,12 @@ @use "00-base/configure" as *; .ma__related-locations { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &__container { @include ma-container; - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid var(--mf-c-bd-divider); padding-top: 60px; padding-bottom: 50px; @@ -56,7 +56,7 @@ @media ($bp-large-extended-min) { width: 39%; - border-left: 1px solid $c-gray-light; + border-left: 1px solid var(--mf-c-gray-light); a { margin: 0 auto; @@ -67,7 +67,7 @@ &:nth-child(3) { @media ($bp-large-extended-min) { - border-left: 1px solid $c-gray-light; + border-left: 1px solid var(--mf-c-gray-light); a { float: right; @@ -97,7 +97,7 @@ display: inline-block; height: .6em; width: .6em; - fill: $c-bay-blue-lighter; + fill: var(--mf-c-bay-blue-lighter); margin-left: 5px; } diff --git a/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss b/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss index 7447bedfd8..b83547a03e 100644 --- a/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss +++ b/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss @@ -91,7 +91,7 @@ .ma__related-orgs-and-topics--toggle { position: relative; - color: $c-primary; + color: var(--mf-c-primary); font-weight: $fonts-bold; background-color: transparent; border: none; @@ -103,7 +103,7 @@ font-size: $fonts-small; &:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } &::after { @@ -113,8 +113,8 @@ transform: translateY(-50%) rotate(45deg); right: 0; display: inline-block; - border-right: 4px solid $c-link; - border-bottom: 4px solid $c-link; + border-right: 4px solid var(--mf-c-link); + border-bottom: 4px solid var(--mf-c-link); height: 10px; width: 10px; transition: all .2s; diff --git a/packages/assets/scss/03-organisms/_rich-text.scss b/packages/assets/scss/03-organisms/_rich-text.scss index 4c9a5983c7..239a09dcc3 100644 --- a/packages/assets/scss/03-organisms/_rich-text.scss +++ b/packages/assets/scss/03-organisms/_rich-text.scss @@ -283,11 +283,11 @@ $heading-indent: $gutter; } &__footnote { - border-color: $c-link; + border-color: var(--mf-c-link); &:hover { - background-color: $c-font-link; - color: $c-font-inverse; + background-color: var(--mf-c-font-link); + color: var(--mf-c-font-inverse); } } @@ -301,7 +301,7 @@ $heading-indent: $gutter; } a { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); &:hover { border-bottom-width: 3px; diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss index ad1d930e80..1f7ed5acf6 100644 --- a/packages/assets/scss/03-organisms/_search-banner.scss +++ b/packages/assets/scss/03-organisms/_search-banner.scss @@ -295,12 +295,12 @@ .ma__page-intro { h1 { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-light; } &__sub-title { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-light; } } @@ -308,14 +308,14 @@ // backward compatible with v5.6 - title was replaced with Page Intro &__title { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-light; } // backward compatible with v5.6 - intro was replaced with Page Intro &__intro { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-light; } @@ -327,25 +327,25 @@ } &::-webkit-input-placeholder { - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-light; font-style: italic; } &:-moz-placeholder { /* Firefox 18- */ - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-light; font-style: italic; } &::-moz-placeholder { /* Firefox 19+ */ - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-light; font-style: italic; } &:-ms-input-placeholder { - color: $c-font-medium; + color: var(--mf-c-font-medium); font-weight: $fonts-light; font-style: italic; } @@ -353,19 +353,19 @@ &__button { background-color: rgba($c-white,0.75); - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; & > svg { - fill: $c-font-dark; + fill: var(--mf-c-font-dark); } &:hover { - background-color: $c-primary-alt; - color: $c-font-inverse; + background-color: var(--mf-c-primary-alt); + color: var(--mf-c-font-inverse); & > svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } } @@ -373,11 +373,11 @@ &__links { .ma__comp-heading { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } .ma__decorative-link a { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-light; &:hover { @@ -395,7 +395,7 @@ &__icon { & > svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } @@ -411,7 +411,7 @@ &__icon { & > svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } diff --git a/packages/assets/scss/03-organisms/_search-box-with-links.scss b/packages/assets/scss/03-organisms/_search-box-with-links.scss index 1a62bc8b70..096d23ba84 100644 --- a/packages/assets/scss/03-organisms/_search-box-with-links.scss +++ b/packages/assets/scss/03-organisms/_search-box-with-links.scss @@ -34,7 +34,7 @@ &__form { padding: 40px; - background-color: $c-primary; + background-color: var(--mf-c-primary); flex-basis: 60%; @media (max-width: 910px) { @@ -46,7 +46,7 @@ } h3 { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); margin-bottom: 30px; display: block; } @@ -69,7 +69,7 @@ border-right: 0; &::placeholder { - color: $c-atlantic-gray; + color: var(--mf-c-atlantic-gray); } } @@ -81,7 +81,7 @@ } .ma__search-box-with-links__footer { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); a { @@ -90,7 +90,7 @@ &:hover, &:active, &:focus { - color:$c-white; + color:var(--mf-c-white); } &:hover, @@ -112,7 +112,7 @@ &__secondary { flex-basis: 40%; - background-color: $c-platinum-gray; + background-color: var(--mf-c-platinum-gray); padding: 40px; @media (max-width: 910px) { diff --git a/packages/assets/scss/03-organisms/_sidebar-widget.scss b/packages/assets/scss/03-organisms/_sidebar-widget.scss index 1190758271..07d066ff47 100644 --- a/packages/assets/scss/03-organisms/_sidebar-widget.scss +++ b/packages/assets/scss/03-organisms/_sidebar-widget.scss @@ -35,7 +35,7 @@ &:hover, &:after { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/03-organisms/_split50.scss b/packages/assets/scss/03-organisms/_split50.scss index 33f7844a6f..fa9be63000 100644 --- a/packages/assets/scss/03-organisms/_split50.scss +++ b/packages/assets/scss/03-organisms/_split50.scss @@ -44,11 +44,11 @@ &__container { > *:nth-child(2n) { - border-left-color: $c-bd-divider; + border-left-color: var(--mf-c-bd-divider); } } &--has-divider &__container { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } \ No newline at end of file diff --git a/packages/assets/scss/03-organisms/_stacked-row-section.scss b/packages/assets/scss/03-organisms/_stacked-row-section.scss index c96942b138..c5a8cca50b 100644 --- a/packages/assets/scss/03-organisms/_stacked-row-section.scss +++ b/packages/assets/scss/03-organisms/_stacked-row-section.scss @@ -96,10 +96,10 @@ &__section { & ~ & { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); .ma__stacked-row__container:before { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_steps-ordered.scss b/packages/assets/scss/03-organisms/_steps-ordered.scss index a7b0a8fca1..31a280aef7 100644 --- a/packages/assets/scss/03-organisms/_steps-ordered.scss +++ b/packages/assets/scss/03-organisms/_steps-ordered.scss @@ -85,7 +85,7 @@ $steps-ordered-icon-border: 3px; &__item { &:before { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index 8e8f4357d2..b627b2eab1 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -181,20 +181,20 @@ &__inner { @media ($bp-x-small-min) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } &__title { background-image: linear-gradient(-60deg, transparent, transparent 35px, $c-primary-alt 35px); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-bold; } &__links { @media ($bp-x-small-max) { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); } } @@ -207,7 +207,7 @@ a { & > svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); @media ($bp-x-small-max) { display: none; @@ -220,7 +220,7 @@ } &:hover a { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } &:nth-child(n+11) { @@ -242,28 +242,28 @@ } &.is-active a { - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; } &.is-active:hover a { - color: $c-font-base; + color: var(--mf-c-font-base); border-bottom-color: transparent; } & + & { - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); } } } &__toggle-link { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } &__footer { - border-top: 1px solid $c-bd-divider; + border-top: 1px solid var(--mf-c-bd-divider); padding: 20px; width: 95%; margin: 0 auto; @@ -274,7 +274,7 @@ button { position: relative; - color: $c-primary; + color: var(--mf-c-primary); font-weight: $fonts-bold; background-color: transparent; border: none; @@ -284,7 +284,7 @@ transition: border 0.4s ease; &:hover { - border-bottom-color: $c-font-link; + border-bottom-color: var(--mf-c-font-link); } &::after { @@ -294,8 +294,8 @@ transform: translateY(-50%) rotate(45deg); right: 0; display: inline-block; - border-right: 4px solid $c-font-link; - border-bottom: 4px solid $c-font-link; + border-right: 4px solid var(--mf-c-font-link); + border-bottom: 4px solid var(--mf-c-font-link); height: 10px; width: 10px; transition: all .2s; @@ -317,7 +317,7 @@ left: 0; transition: height 0.1s ease-out; width: 100%; - background-color: $c-bg-subtle; + background-color: var(--mf-c-bg-subtle); z-index: $z-sticky-content; box-shadow: $box-shadow; @@ -364,15 +364,15 @@ .ma__sticky-toc__sticky-top { padding-right: 30px; margin-right: 30px; - border-right: 1px solid $c-bd-divider; + border-right: 1px solid var(--mf-c-bd-divider); button { - border: 4px solid $c-link; + border: 4px solid var(--mf-c-link); height: 47px; position: relative; svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); transform: rotate(-90deg); width: 11px; height: 12px; @@ -388,7 +388,7 @@ text-transform: uppercase; font-size: $fonts-2xsmall; font-weight: $fonts-bold; - color: $c-primary; + color: var(--mf-c-primary); letter-spacing: $letter-spacing-large; margin-top: -4px; } @@ -412,7 +412,7 @@ font-weight: $fonts-bold; line-height: 1.2; padding: 10px 35px 10px 15px; - border: 1px solid $c-bd-divider; + border: 1px solid var(--mf-c-bd-divider); border-width: 1px 0 1px 0; + ul { @@ -435,8 +435,8 @@ position: relative; width: 35px; height: 35px; - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); .sticky-nav-open & { display: block; @@ -463,7 +463,7 @@ text-overflow: ellipsis; white-space: nowrap; font-weight: $fonts-bold; - color: $c-font-base; + color: var(--mf-c-font-base); margin-bottom: 0; display: none; @@ -480,7 +480,7 @@ max-width: 550px; top: 0; z-index: 99; - background-color: $c-bg; + background-color: var(--mf-c-bg); transition: right 0.3s ease-out; overflow: auto; @@ -506,8 +506,8 @@ font-weight: $fonts-normal; letter-spacing: $letter-spacing-large; text-transform: uppercase; - color: $c-gray-dark; - background-color: $c-bg; + color: var(--mf-c-gray-dark); + background-color: var(--mf-c-bg); height: 65px; padding: 10px 20px; width: 100%; @@ -523,7 +523,7 @@ width: calc(100% - 40px); height: 1px; bottom: 0; - background-color: $c-gray-dark; + background-color: var(--mf-c-gray-dark); } } diff --git a/packages/assets/scss/03-organisms/_suggested-pages.scss b/packages/assets/scss/03-organisms/_suggested-pages.scss index 13eacd2cc4..52623e5056 100644 --- a/packages/assets/scss/03-organisms/_suggested-pages.scss +++ b/packages/assets/scss/03-organisms/_suggested-pages.scss @@ -143,7 +143,7 @@ @include omega(2n); margin-right: 0; - border-right: 1px solid $c-bd-divider; + border-right: 1px solid var(--mf-c-bd-divider); &-figure { max-width: 230px; @@ -187,10 +187,10 @@ //theme .ma__suggested-pages { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); &__container { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__title { @@ -201,7 +201,7 @@ @media ($bp-large-min) { &__item + &__item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_tab-container.scss b/packages/assets/scss/03-organisms/_tab-container.scss index e708148628..0971ae3689 100644 --- a/packages/assets/scss/03-organisms/_tab-container.scss +++ b/packages/assets/scss/03-organisms/_tab-container.scss @@ -15,7 +15,7 @@ &:focus { outline: none; - box-shadow: inset 0px 0px 2px 2px $c-focus; + box-shadow: inset 0px 0px 2px 2px var(--mf-c-focus); } } @@ -34,15 +34,15 @@ &-body { padding: 1rem; - border: 1px solid $c-gray-light; + border: 1px solid var(--mf-c-gray-light); margin-top: -1px; @extend %focus; } .ma__tab-title { - border-left: 1px solid $c-gray-light; - border-top: 1px solid $c-gray-light; + border-left: 1px solid var(--mf-c-gray-light); + border-top: 1px solid var(--mf-c-gray-light); border-right: none; border-bottom: none; margin-bottom: -1px; @@ -52,7 +52,7 @@ } &:last-child { - border-right: 1px solid $c-gray-light; + border-right: 1px solid var(--mf-c-gray-light); } @@ -67,15 +67,15 @@ } &--active { - border-top: 5px solid $c-primary; - background-color: $c-bg; + border-top: 5px solid var(--mf-c-primary); + background-color: var(--mf-c-bg); z-index: 1; - outline: $c-error-red; + outline: var(--mf-c-error-red); button { padding-top: 1.5rem; font-weight: $fonts-bold; - color: $c-primary; + color: var(--mf-c-primary); @extend %focus; } @@ -87,7 +87,7 @@ .ma__tab-container { &-head { - border-bottom: 1px solid $c-gray-light; + border-bottom: 1px solid var(--mf-c-gray-light); } &-body { @@ -107,8 +107,8 @@ } &--active { - color: $c-primary; - border-bottom: 5px solid $c-primary; + color: var(--mf-c-primary); + border-bottom: 5px solid var(--mf-c-primary); button { padding-bottom: 1.25rem; diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index 02fe37f50a..60060f45e8 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -40,11 +40,11 @@ padding: 0; padding-top: 20px; list-style: none; - background: $c-gray-lightest; - border: 2px solid $c-gray-light; + background: var(--mf-c-gray-lightest); + border: 2px solid var(--mf-c-gray-light); > * + * { - border-top: 1px solid $c-gray-light; + border-top: 1px solid var(--mf-c-gray-light); } // Visual cue for the clickable area. @@ -55,7 +55,7 @@ a { border-bottom-width: 3px; border-bottom-style: solid; - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } @@ -77,8 +77,8 @@ margin-bottom: 0; display: none; padding: 20px 0 10px 20px; - background: $c-white; - border-top: 2px solid $c-gray-light; + background: var(--mf-c-white); + border-top: 2px solid var(--mf-c-gray-light); // Visual cue for the clickable area. @@ -89,7 +89,7 @@ a:hover { border-bottom-width: 3px; border-bottom-style: solid; - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } li { @@ -126,12 +126,12 @@ text-align: left; width: 100%; font-weight: $fonts-bolder; - color: $c-primary; + color: var(--mf-c-primary); &:after { font-size: $fonts-5xlarge; content: "+"; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); line-height: .65em; overflow: hidden; position: absolute; @@ -223,7 +223,7 @@ } .ma__accordion-content__body { - background: $c-white; + background: var(--mf-c-white); list-style: none; margin-bottom: unset; padding: 10px 0 10px 20px; diff --git a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss index 4ec470f618..6c578376b9 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss @@ -92,7 +92,7 @@ content: ""; position: fixed; z-index: -1; - background-color: $c-bg; + background-color: var(--mf-c-bg); opacity: 0; transition: opacity 0.2s ease; } @@ -180,25 +180,25 @@ .ma__toc--overlay { .ma__toc__toc__title { - background: $c-gray-lightest; - color: $c-primary; + background: var(--mf-c-gray-lightest); + color: var(--mf-c-primary); } .ma__toc--hierarchy { - border-bottom: 1px solid $c-gray-light; + border-bottom: 1px solid var(--mf-c-gray-light); } .ma__toc__toc__toggle[aria-expanded="false"] { - color: $c-primary; + color: var(--mf-c-primary); } .ma__toc__toc__toggle[aria-expanded="true"] { - color: $c-font-inverse; - background: $c-primary; + color: var(--mf-c-font-inverse); + background: var(--mf-c-primary); } .ma__toc__subtitle { - color: $c-gray-dark; + color: var(--mf-c-gray-dark); } .ma__toc--hierarchy__accordion { @@ -213,10 +213,10 @@ } .ma__toc--overlay__container { - background: $c-white; + background: var(--mf-c-white); } li.is-current:before { - background: $c-primary-alt; + background: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/03-organisms/_teaser-listing-group.scss b/packages/assets/scss/03-organisms/_teaser-listing-group.scss index d4b28bafc1..c9165b7348 100644 --- a/packages/assets/scss/03-organisms/_teaser-listing-group.scss +++ b/packages/assets/scss/03-organisms/_teaser-listing-group.scss @@ -39,7 +39,7 @@ @include ma-link-underline; &:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } &:after { diff --git a/packages/assets/scss/03-organisms/_teaser-listing.scss b/packages/assets/scss/03-organisms/_teaser-listing.scss index 21cd89f44a..c528ae9b23 100644 --- a/packages/assets/scss/03-organisms/_teaser-listing.scss +++ b/packages/assets/scss/03-organisms/_teaser-listing.scss @@ -234,7 +234,7 @@ @include ma-link-underline; &:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } &:after { @@ -298,7 +298,7 @@ .ma__teaser-listing { &__optional-content, &__featured-items, &__items, &__extra { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__featured-items .ma__general-teaser, @@ -306,7 +306,7 @@ &__item { &, &:after { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } } } diff --git a/packages/assets/scss/03-organisms/_teaser.scss b/packages/assets/scss/03-organisms/_teaser.scss index a77c66a048..0c0b7a0d6b 100644 --- a/packages/assets/scss/03-organisms/_teaser.scss +++ b/packages/assets/scss/03-organisms/_teaser.scss @@ -10,7 +10,7 @@ } &--active { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } } @@ -21,7 +21,7 @@ & + & { border-top-width: 1px; border-top-style: solid; - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); margin-top: 0; } @@ -73,7 +73,7 @@ letter-spacing: 0.1em; padding: 5px 7px; text-transform: uppercase; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); font-weight: $fonts-bold; } } @@ -99,7 +99,7 @@ span { font-size: $fonts-medium; - color: $c-gray-dark; + color: var(--mf-c-gray-dark); font-weight: $fonts-bold; } @@ -116,7 +116,7 @@ font-size: $fonts-small; line-height: 1; margin-bottom: 1em; - color: $c-font-dark; + color: var(--mf-c-font-dark); font-style: italic; font-weight: $fonts-bold; } @@ -128,7 +128,7 @@ } &__org { - border-left-color: $c-bd-divider; + border-left-color: var(--mf-c-bd-divider); &__show-more { @@ -141,7 +141,7 @@ } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); width: 1em; height: 0.6em; } @@ -208,13 +208,13 @@ flex: 1 1 40%; flex-grow: 1; padding-left: 0.75em; - border-left: 1px solid $c-gray-light; + border-left: 1px solid var(--mf-c-gray-light); } @media ($bp-small-min) { flex: 1 1 40%; flex-grow: 1; - border-left: 1px solid $c-gray-light; + border-left: 1px solid var(--mf-c-gray-light); align-content: flex-start; } } @@ -239,13 +239,13 @@ vertical-align: middle; height: 1.1rem; width: 1.1rem; - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } svg.link-arrow { height: 1rem; width: 1rem; - fill: $c-font-link; + fill: var(--mf-c-font-link); } .ma__decorative-link { @@ -253,7 +253,7 @@ svg { height: 1rem; width: 1rem; - fill: $c-font-link; + fill: var(--mf-c-font-link); } } @@ -264,7 +264,7 @@ .ma-icon { &__green { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } diff --git a/packages/assets/scss/03-organisms/_test-feed.scss b/packages/assets/scss/03-organisms/_test-feed.scss index e576c91b21..26a69f6ffb 100644 --- a/packages/assets/scss/03-organisms/_test-feed.scss +++ b/packages/assets/scss/03-organisms/_test-feed.scss @@ -132,7 +132,7 @@ &__icon { svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } } @@ -142,7 +142,7 @@ &:hover, &:after { - border-color: $c-link; + border-color: var(--mf-c-link); } } } diff --git a/packages/assets/scss/03-organisms/_top-actions.scss b/packages/assets/scss/03-organisms/_top-actions.scss index e8539f0686..dd042995fa 100644 --- a/packages/assets/scss/03-organisms/_top-actions.scss +++ b/packages/assets/scss/03-organisms/_top-actions.scss @@ -61,17 +61,17 @@ } &__item { - border-color: $c-bd-divider; + border-color: var(--mf-c-bd-divider); } &__link { a:hover { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } svg { - fill: $c-font-link; + fill: var(--mf-c-font-link); } } } diff --git a/packages/assets/scss/03-organisms/_transition-page.scss b/packages/assets/scss/03-organisms/_transition-page.scss index 844b159527..2b6cff7d32 100644 --- a/packages/assets/scss/03-organisms/_transition-page.scss +++ b/packages/assets/scss/03-organisms/_transition-page.scss @@ -45,7 +45,7 @@ } &__icon { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } &__message { diff --git a/packages/assets/scss/03-organisms/_utility-nav.scss b/packages/assets/scss/03-organisms/_utility-nav.scss index 7c282b0de2..7a65b64302 100644 --- a/packages/assets/scss/03-organisms/_utility-nav.scss +++ b/packages/assets/scss/03-organisms/_utility-nav.scss @@ -6,8 +6,8 @@ $utility-nav-height: 43px; position: relative; @media ($bp-header-toggle-min) { - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); } &__items { @@ -36,7 +36,7 @@ $utility-nav-height: 43px; position: relative; &:hover { - background-color: $c-bg; + background-color: var(--mf-c-bg); box-shadow: $box-shadow; } } @@ -81,12 +81,12 @@ $utility-nav-height: 43px; display: block; font-size: $fonts-medium; line-height: 1.45; - color: $c-font-base; + color: var(--mf-c-font-base); @media ($bp-header-toggle-min) { line-height: 2; transition: opacity .4s ease; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:hover { opacity: .7; @@ -94,15 +94,15 @@ $utility-nav-height: 43px; } &:after { - border-right-color: $c-primary-alt; - border-bottom-color: $c-primary-alt; + border-right-color: var(--mf-c-primary-alt); + border-bottom-color: var(--mf-c-primary-alt); } svg { - fill: $c-primary; + fill: var(--mf-c-primary); @media ($bp-header-toggle-min) { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); opacity: .7; stroke: transparent; } @@ -133,8 +133,8 @@ $utility-nav-height: 43px; position: absolute; right: 20px; top: 18px; - border-right-color: $c-primary-alt; - border-bottom-color: $c-primary-alt; + border-right-color: var(--mf-c-primary-alt); + border-bottom-color: var(--mf-c-primary-alt); } } @@ -196,12 +196,12 @@ $utility-nav-height: 43px; .goog-te-gadget-simple a { @include ma-chevron; - color: $c-font-base; + color: var(--mf-c-font-base); transform: none; border: 0; @media ($bp-header-toggle-min) { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); &:after { opacity: .7; @@ -281,7 +281,7 @@ $utility-nav-height: 43px; transition: visibility .5s ease, right .5s ease; width: 300px; z-index: $z-modal; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); .translated-rtl &, .translated-ltr & { @@ -301,15 +301,15 @@ $utility-nav-height: 43px; max-width: 720px; a { - color: $c-font-link; - border-bottom-color: $c-font-link; + color: var(--mf-c-font-link); + border-bottom-color: var(--mf-c-font-link); } } @media ($bp-header-toggle-min) { margin-top: 0; overflow: visible; - background-color: $c-primary; + background-color: var(--mf-c-primary); padding-left: 0; position: absolute; left: 0; @@ -326,8 +326,8 @@ $utility-nav-height: 43px; .ma__rich-text { a { - color: $c-font-inverse; - border-bottom-color: $c-font-inverse; + color: var(--mf-c-font-inverse); + border-bottom-color: var(--mf-c-font-inverse); } } } @@ -353,7 +353,7 @@ $utility-nav-height: 43px; height: calc(100vh - #{$header-mobile-controls-height}); padding-left: 20px; padding-right: 20px; - background-color: $c-primary; + background-color: var(--mf-c-primary); .translated-rtl &, .translated-ltr & { @@ -381,7 +381,7 @@ $utility-nav-height: 43px; text-transform: uppercase; vertical-align: middle; letter-spacing: $letter-spacing-large; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); opacity: 0.7; } @@ -407,7 +407,7 @@ $utility-nav-height: 43px; line-height: 1.45; font-weight: $fonts-normal; margin-bottom: 0; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } @media ($bp-header-toggle-min) { @@ -416,7 +416,7 @@ $utility-nav-height: 43px; svg { opacity: 0.7; - fill: $c-white; + fill: var(--mf-c-white); } & > span, diff --git a/packages/assets/scss/03-organisms/_utility-panel.scss b/packages/assets/scss/03-organisms/_utility-panel.scss index 77f025ed3f..f8de6848f5 100644 --- a/packages/assets/scss/03-organisms/_utility-panel.scss +++ b/packages/assets/scss/03-organisms/_utility-panel.scss @@ -4,8 +4,8 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; @use "00-base/configure" as *; .ma__utility-panel { - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); @media ($bp-header-toggle-min) { @@ -68,7 +68,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; padding-right: 28px; svg { - fill: $c-font-inverse; + fill: var(--mf-c-font-inverse); } } @@ -77,7 +77,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; font-size: $fonts-large; margin: 0; text-align: left; - color: $c-font-inverse; + color: var(--mf-c-font-inverse); font-weight: $fonts-normal; @media ($bp-header-toggle-min) and ($bp-utility-panel-reduce-links-max) { diff --git a/packages/assets/scss/04-templates/_form-page.scss b/packages/assets/scss/04-templates/_form-page.scss index a4b6243117..2ae973918c 100644 --- a/packages/assets/scss/04-templates/_form-page.scss +++ b/packages/assets/scss/04-templates/_form-page.scss @@ -15,7 +15,7 @@ label, .ma__input-group__title { - color: $c-font-detail; + color: var(--mf-c-font-detail); } & > fieldset, diff --git a/packages/assets/scss/04-templates/_services.scss b/packages/assets/scss/04-templates/_services.scss index 313362a875..0a29d21e51 100644 --- a/packages/assets/scss/04-templates/_services.scss +++ b/packages/assets/scss/04-templates/_services.scss @@ -360,7 +360,7 @@ } .service-section--enhanced-two-column { - background: $c-platinum-gray; + background: var(--mf-c-platinum-gray); padding-block: 20px; @media ($bp-large-min) { @@ -369,7 +369,7 @@ .ma__mapped-locations__aside, .ma__mapped-locations__map { - background-color: $c-white; + background-color: var(--mf-c-white); } } } diff --git a/packages/assets/scss/08-print/_print.scss b/packages/assets/scss/08-print/_print.scss index 20d0d376bb..2367160186 100644 --- a/packages/assets/scss/08-print/_print.scss +++ b/packages/assets/scss/08-print/_print.scss @@ -14,7 +14,7 @@ } body { - color: $c-font-heading !important; + color: var(--mf-c-font-heading) !important; } .main-content--two .page-content > *, @@ -91,7 +91,7 @@ } .ma__page-title { - color: $c-black !important; + color: var(--mf-c-black) !important; } .ma__search-banner { @@ -107,7 +107,7 @@ .sidebar--colored .ma__comp-heading { padding-left: 0; margin-left: 0; - color: $c-font-heading !important; + color: var(--mf-c-font-heading) !important; } .ma__location-listing__results, @@ -157,7 +157,7 @@ .ma__page-banner-legacy__title, .ma__page-banner-legacy__description { width: 100%; - color: $c-font-heading; + color: var(--mf-c-font-heading); padding: 0; } @@ -175,7 +175,7 @@ width: 100%; height: auto; top: 0; - color: $c-font-heading; + color: var(--mf-c-font-heading); &::before, { display: none; @@ -241,7 +241,7 @@ .ma__colored-heading, .ma__comp-heading { padding: 0 !important; - color: $c-font-heading !important; + color: var(--mf-c-font-heading) !important; } .ma__rich-text, @@ -316,7 +316,7 @@ .ma__action-step__header { padding: 20px 0 0; - color: $c-font-heading; + color: var(--mf-c-font-heading); } .ma__action-step__icon { @@ -429,7 +429,7 @@ .ma__featured-item__title-container { background-color: transparent; - color: $c-font-heading; + color: var(--mf-c-font-heading); position: relative; display: inline-block; width: 100%; From 6c863dcff3377c8a37c0c1e3cf0af88784465598 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 30 Apr 2025 20:26:24 +0600 Subject: [PATCH 04/25] fix color variables --- .../assets/scss/00-base/_color-tokens.scss | 198 +++++++++--------- packages/assets/scss/00-base/_colors.scss | 76 +++---- 2 files changed, 137 insertions(+), 137 deletions(-) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index 92291eb6f9..33b6a659bc 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -116,118 +116,118 @@ $c-focus-hightlight: #3e94cf !default; :root { // Bay Blue (#14558f) - --mf-c-bay-blue-90-tint: $c-bay-blue-90-tint; - --mf-c-bay-blue-80-tint: $c-bay-blue-80-tint; - --mf-c-bay-blue-70-tint: $c-bay-blue-70-tint; - --mf-c-bay-blue-60-tint: $c-bay-blue-60-tint; - --mf-c-bay-blue-50-tint: $c-bay-blue-50-tint; - --mf-c-bay-blue-40-tint: $c-bay-blue-40-tint; - --mf-c-bay-blue-30-tint: $c-bay-blue-30-tint; - --mf-c-bay-blue-20-tint: $c-bay-blue-20-tint; - --mf-c-bay-blue-10-tint: $c-bay-blue-10-tint; - --mf-c-bay-blue: $c-bay-blue; - --mf-c-bay-blue-10-shade: $c-bay-blue-10-shade; - --mf-c-bay-blue-20-shade: $c-bay-blue-20-shade; - --mf-c-bay-blue-30-shade: $c-bay-blue-30-shade; - --mf-c-bay-blue-40-shade: $c-bay-blue-40-shade; - --mf-c-bay-blue-50-shade: $c-bay-blue-50-shade; - - --mf-c-bay-blue-light: $c-bay-blue-light; //Commonly used in outlines - --mf-c-bay-blue-lighter: $c-bay-blue-lighter; //Commonly used in outlines - --mf-c-bay-blue-lightest: $c-bay-blue-lightest; //Commonly used in background - --mf-c-bay-blue-darker: $c-bay-blue-darker; - --mf-c-bay-blue-darkest: $c-bay-blue-darkest; + --mf-c-bay-blue-90-tint: #{$c-bay-blue-90-tint}; + --mf-c-bay-blue-80-tint: #{$c-bay-blue-80-tint}; + --mf-c-bay-blue-70-tint: #{$c-bay-blue-70-tint}; + --mf-c-bay-blue-60-tint: #{$c-bay-blue-60-tint}; + --mf-c-bay-blue-50-tint: #{$c-bay-blue-50-tint}; + --mf-c-bay-blue-40-tint: #{$c-bay-blue-40-tint}; + --mf-c-bay-blue-30-tint: #{$c-bay-blue-30-tint}; + --mf-c-bay-blue-20-tint: #{$c-bay-blue-20-tint}; + --mf-c-bay-blue-10-tint: #{$c-bay-blue-10-tint}; + --mf-c-bay-blue: #{$c-bay-blue}; + --mf-c-bay-blue-10-shade: #{$c-bay-blue-10-shade}; + --mf-c-bay-blue-20-shade: #{$c-bay-blue-20-shade}; + --mf-c-bay-blue-30-shade: #{$c-bay-blue-30-shade}; + --mf-c-bay-blue-40-shade: #{$c-bay-blue-40-shade}; + --mf-c-bay-blue-50-shade: #{$c-bay-blue-50-shade}; + + --mf-c-bay-blue-light: #{$c-bay-blue-light}; //Commonly used in outlines + --mf-c-bay-blue-lighter: #{$c-bay-blue-lighter}; //Commonly used in outlines + --mf-c-bay-blue-lightest: #{$c-bay-blue-lightest}; //Commonly used in background + --mf-c-bay-blue-darker: #{$c-bay-blue-darker}; + --mf-c-bay-blue-darkest: #{$c-bay-blue-darkest}; // Berkshires Green (#388557) - --mf-c-berkshires-green-90-tint: $c-berkshires-green-90-tint; - --mf-c-berkshires-green-80-tint: $c-berkshires-green-80-tint; - --mf-c-berkshires-green-70-tint: $c-berkshires-green-70-tint; - --mf-c-berkshires-green-60-tint: $c-berkshires-green-60-tint; - --mf-c-berkshires-green-50-tint: $c-berkshires-green-50-tint; - --mf-c-berkshires-green-40-tint: $c-berkshires-green-40-tint; - --mf-c-berkshires-green-30-tint: $c-berkshires-green-30-tint; - --mf-c-berkshires-green-20-tint: $c-berkshires-green-20-tint; - --mf-c-berkshires-green-10-tint: $c-berkshires-green-10-tint; - --mf-c-berkshires-green: $c-berkshires-green; - --mf-c-berkshires-green-10-shade: $c-berkshires-green-10-shade; - --mf-c-berkshires-green-20-shade: $c-berkshires-green-20-shade; - --mf-c-berkshires-green-30-shade: $c-berkshires-green-30-shade; - --mf-c-berkshires-green-40-shade: $c-berkshires-green-40-shade; - --mf-c-berkshires-green-50-shade: $c-berkshires-green-50-shade; - - --mf-c-berkshires-green-lighter: $c-berkshires-green-lighter; //Commonly used in outlines - --mf-c-berkshires-green-lightest: $c-berkshires-green-lightest; //Commonly used in background - --mf-c-berkshires-green-dark: $c-berkshires-green-dark; // Followup needed: should be replaced with one of the gradient colors - --mf-c-berkshires-green-darker: $c-berkshires-green-darker; - --mf-c-berkshires-green-darkest: $c-berkshires-green-darkest; + --mf-c-berkshires-green-90-tint: #{$c-berkshires-green-90-tint}; + --mf-c-berkshires-green-80-tint: #{$c-berkshires-green-80-tint}; + --mf-c-berkshires-green-70-tint: #{$c-berkshires-green-70-tint}; + --mf-c-berkshires-green-60-tint: #{$c-berkshires-green-60-tint}; + --mf-c-berkshires-green-50-tint: #{$c-berkshires-green-50-tint}; + --mf-c-berkshires-green-40-tint: #{$c-berkshires-green-40-tint}; + --mf-c-berkshires-green-30-tint: #{$c-berkshires-green-30-tint}; + --mf-c-berkshires-green-20-tint: #{$c-berkshires-green-20-tint}; + --mf-c-berkshires-green-10-tint: #{$c-berkshires-green-10-tint}; + --mf-c-berkshires-green: #{$c-berkshires-green}; + --mf-c-berkshires-green-10-shade: #{$c-berkshires-green-10-shade}; + --mf-c-berkshires-green-20-shade: #{$c-berkshires-green-20-shade}; + --mf-c-berkshires-green-30-shade: #{$c-berkshires-green-30-shade}; + --mf-c-berkshires-green-40-shade: #{$c-berkshires-green-40-shade}; + --mf-c-berkshires-green-50-shade: #{$c-berkshires-green-50-shade}; + + --mf-c-berkshires-green-lighter: #{$c-berkshires-green-lighter}; //Commonly used in outlines + --mf-c-berkshires-green-lightest: #{$c-berkshires-green-lightest}; //Commonly used in background + --mf-c-berkshires-green-dark: #{$c-berkshires-green-dark}; // Followup needed: should be replaced with one of the gradient colors + --mf-c-berkshires-green-darker: #{$c-berkshires-green-darker}; + --mf-c-berkshires-green-darkest: #{$c-berkshires-green-darkest}; // Duckling Yellow (#f6c51b) - --mf-c-duckling-yellow-90-tint: $c-duckling-yellow-90-tint; - --mf-c-duckling-yellow-80-tint: $c-duckling-yellow-80-tint; - --mf-c-duckling-yellow-70-tint: $c-duckling-yellow-70-tint; - --mf-c-duckling-yellow-60-tint: $c-duckling-yellow-60-tint; - --mf-c-duckling-yellow-50-tint: $c-duckling-yellow-50-tint; - --mf-c-duckling-yellow-40-tint: $c-duckling-yellow-40-tint; - --mf-c-duckling-yellow-30-tint: $c-duckling-yellow-30-tint; - --mf-c-duckling-yellow-20-tint: $c-duckling-yellow-20-tint; - --mf-c-duckling-yellow-10-tint: $c-duckling-yellow-10-tint; - --mf-c-duckling-yellow: $c-duckling-yellow; - --mf-c-duckling-yellow-10-shade: $c-duckling-yellow-10-shade; - --mf-c-duckling-yellow-20-shade: $c-duckling-yellow-20-shade; - --mf-c-duckling-yellow-30-shade: $c-duckling-yellow-30-shade; - --mf-c-duckling-yellow-40-shade: $c-duckling-yellow-40-shade; - --mf-c-duckling-yellow-50-shade: $c-duckling-yellow-50-shade; - - --mf-c-duckling-yellow-lighter: $c-duckling-yellow-lighter; //Commonly used in outlines - --mf-c-duckling-yellow-lightest: $c-duckling-yellow-lightest; //Commonly used in background - --mf-c-duckling-yellow-darker: $c-duckling-yellow-darker; - --mf-c-duckling-yellow-darkest: $c-duckling-yellow-darkest; + --mf-c-duckling-yellow-90-tint: #{$c-duckling-yellow-90-tint}; + --mf-c-duckling-yellow-80-tint: #{$c-duckling-yellow-80-tint}; + --mf-c-duckling-yellow-70-tint: #{$c-duckling-yellow-70-tint}; + --mf-c-duckling-yellow-60-tint: #{$c-duckling-yellow-60-tint}; + --mf-c-duckling-yellow-50-tint: #{$c-duckling-yellow-50-tint}; + --mf-c-duckling-yellow-40-tint: #{$c-duckling-yellow-40-tint}; + --mf-c-duckling-yellow-30-tint: #{$c-duckling-yellow-30-tint}; + --mf-c-duckling-yellow-20-tint: #{$c-duckling-yellow-20-tint}; + --mf-c-duckling-yellow-10-tint: #{$c-duckling-yellow-10-tint}; + --mf-c-duckling-yellow: #{$c-duckling-yellow}; + --mf-c-duckling-yellow-10-shade: #{$c-duckling-yellow-10-shade}; + --mf-c-duckling-yellow-20-shade: #{$c-duckling-yellow-20-shade}; + --mf-c-duckling-yellow-30-shade: #{$c-duckling-yellow-30-shade}; + --mf-c-duckling-yellow-40-shade: #{$c-duckling-yellow-40-shade}; + --mf-c-duckling-yellow-50-shade: #{$c-duckling-yellow-50-shade}; + + --mf-c-duckling-yellow-lighter: #{$c-duckling-yellow-lighter}; //Commonly used in outlines + --mf-c-duckling-yellow-lightest: #{$c-duckling-yellow-lightest}; //Commonly used in background + --mf-c-duckling-yellow-darker: #{$c-duckling-yellow-darker}; + --mf-c-duckling-yellow-darkest: #{$c-duckling-yellow-darkest}; // Independence Cranberry (#680A1D) - --mf-c-independence-cranberry-90-tint: $c-independence-cranberry-90-tint; - --mf-c-independence-cranberry-80-tint: $c-independence-cranberry-80-tint; - --mf-c-independence-cranberry-70-tint: $c-independence-cranberry-70-tint; - --mf-c-independence-cranberry-60-tint: $c-independence-cranberry-60-tint; - --mf-c-independence-cranberry-50-tint: $c-independence-cranberry-50-tint; - --mf-c-independence-cranberry-40-tint: $c-independence-cranberry-40-tint; - --mf-c-independence-cranberry-30-tint: $c-independence-cranberry-30-tint; - --mf-c-independence-cranberry-20-tint: $c-independence-cranberry-20-tint; - --mf-c-independence-cranberry-10-tint: $c-independence-cranberry-10-tint; - --mf-c-independence-cranberry: $c-independence-cranberry; - --mf-c-independence-cranberry-10-shade: $c-independence-cranberry-10-shade; - --mf-c-independence-cranberry-20-shade: $c-independence-cranberry-20-shade; - --mf-c-independence-cranberry-30-shade: $c-independence-cranberry-30-shade; - --mf-c-independence-cranberry-40-shade: $c-independence-cranberry-40-shade; - --mf-c-independence-cranberry-50-shade: $c-independence-cranberry-50-shade; - - --mf-c-independence-cranberry-lighter: $c-independence-cranberry-lighter; //Commonly used in outlines - --mf-c-independence-cranberry-lightest: $c-independence-cranberry-lightest; //Commonly used in outlines - --mf-c-independence-cranberry-darker: $c-independence-cranberry-darker; - --mf-c-independence-cranberry-darkest: $c-independence-cranberry-darkest; + --mf-c-independence-cranberry-90-tint: #{$c-independence-cranberry-90-tint}; + --mf-c-independence-cranberry-80-tint: #{$c-independence-cranberry-80-tint}; + --mf-c-independence-cranberry-70-tint: #{$c-independence-cranberry-70-tint}; + --mf-c-independence-cranberry-60-tint: #{$c-independence-cranberry-60-tint}; + --mf-c-independence-cranberry-50-tint: #{$c-independence-cranberry-50-tint}; + --mf-c-independence-cranberry-40-tint: #{$c-independence-cranberry-40-tint}; + --mf-c-independence-cranberry-30-tint: #{$c-independence-cranberry-30-tint}; + --mf-c-independence-cranberry-20-tint: #{$c-independence-cranberry-20-tint}; + --mf-c-independence-cranberry-10-tint: #{$c-independence-cranberry-10-tint}; + --mf-c-independence-cranberry: #{$c-independence-cranberry}; + --mf-c-independence-cranberry-10-shade: #{$c-independence-cranberry-10-shade}; + --mf-c-independence-cranberry-20-shade: #{$c-independence-cranberry-20-shade}; + --mf-c-independence-cranberry-30-shade: #{$c-independence-cranberry-30-shade}; + --mf-c-independence-cranberry-40-shade: #{$c-independence-cranberry-40-shade}; + --mf-c-independence-cranberry-50-shade: #{$c-independence-cranberry-50-shade}; + + --mf-c-independence-cranberry-lighter: #{$c-independence-cranberry-lighter}; //Commonly used in outlines + --mf-c-independence-cranberry-lightest: #{$c-independence-cranberry-lightest}; //Commonly used in outlines + --mf-c-independence-cranberry-darker: #{$c-independence-cranberry-darker}; + --mf-c-independence-cranberry-darkest: #{$c-independence-cranberry-darkest}; // Base Gray Scale Colors - --mf-c-revolution-gray: $c-revolution-gray; - --mf-c-granite-gray: $c-granite-gray; - --mf-c-atlantic-gray: $c-atlantic-gray; - --mf-c-overcast-gray: $c-overcast-gray; - --mf-c-platinum-gray: $c-platinum-gray; + --mf-c-revolution-gray: #{$c-revolution-gray}; + --mf-c-granite-gray: #{$c-granite-gray}; + --mf-c-atlantic-gray: #{$c-atlantic-gray}; + --mf-c-overcast-gray: #{$c-overcast-gray}; + --mf-c-platinum-gray: #{$c-platinum-gray}; // Gray Scale Spectrum Mapping - --mf-c-black: $c-black; - --mf-c-gray-darkest: $c-gray-darkest; + --mf-c-black: #{$c-black}; + --mf-c-gray-darkest: #{$c-gray-darkest}; // --mf-c-gray-darker: (place holder) - --mf-c-gray-dark: $c-gray-dark; - --mf-c-gray: $c-gray; - --mf-c-gray-light: $c-gray-light; - --mf-c-gray-lighter: $c-gray-lighter; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray - --mf-c-gray-lightest: $c-gray-lightest; - --mf-c-white: $c-white; + --mf-c-gray-dark: #{$c-gray-dark}; + --mf-c-gray: #{$c-gray}; + --mf-c-gray-light: #{$c-gray-light}; + --mf-c-gray-lighter: #{$c-gray-lighter}; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray + --mf-c-gray-lightest: #{$c-gray-lightest}; + --mf-c-white: #{$c-white}; // Error Red (#CD0D0D) - --mf-c-error-red: $c-error-red; - --mf-c-error-red-lighter: $c-error-red-lighter; //Commonly used in outlines - --mf-c-error-red-lightest: $c-error-red-lightest; //Commonly used in background + --mf-c-error-red: #{$c-error-red}; + --mf-c-error-red-lighter: #{$c-error-red-lighter}; //Commonly used in outlines + --mf-c-error-red-lightest: #{$c-error-red-lightest}; //Commonly used in background // Focus Highlight (#3e94cf) - --mf-c-focus-hightlight: $c-focus-hightlight; + --mf-c-focus-hightlight: #{$c-focus-hightlight}; } diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 00c5cc4f9c..80bdbc7403 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -51,48 +51,48 @@ $c-bd-input-dark: $c-gray !default; $c-box-shadow-black: rgba($c-black, 0.25) !default; :root { - --mf-c-primary: $c-primary; - --mf-c-primary-light: $c-primary-light; - --mf-c-primary-lighter: $c-primary-lighter; - --mf-c-primary-lightest: $c-primary-lightest; - --mf-c-primary-alt: $c-primary-alt; - --mf-c-primary-alt-lighter: $c-primary-alt-lighter; - --mf-c-primary-alt-lightest: $c-primary-alt-lightest; - --mf-c-primary-alt-dark: $c-primary-alt-dark; - --mf-c-highlight: $c-highlight; - --mf-c-highlight-lighter: $c-highlight-lighter; - --mf-c-highlight-lightest: $c-highlight-lightest; + --mf-c-primary: #{$c-primary}; + --mf-c-primary-light: #{$c-primary-light}; + --mf-c-primary-lighter: #{$c-primary-lighter}; + --mf-c-primary-lightest: #{$c-primary-lightest}; + --mf-c-primary-alt: #{$c-primary-alt}; + --mf-c-primary-alt-lighter: #{$c-primary-alt-lighter}; + --mf-c-primary-alt-lightest: #{$c-primary-alt-lightest}; + --mf-c-primary-alt-dark: #{$c-primary-alt-dark}; + --mf-c-highlight: #{$c-highlight}; + --mf-c-highlight-lighter: #{$c-highlight-lighter}; + --mf-c-highlight-lightest: #{$c-highlight-lightest}; - --mf-c-error: $c-error; - --mf-c-error-lighter: $c-error-lighter; - --mf-c-error-lightest: $c-error-lightest; - --mf-c-warning: $c-warning; - --mf-c-success: $c-success; - --mf-c-focus: $c-focus; - --mf-c-link: $c-link; - --mf-c-visited: $c-visited; + --mf-c-error: #{$c-error}; + --mf-c-error-lighter: #{$c-error-lighter}; + --mf-c-error-lightest: #{$c-error-lightest}; + --mf-c-warning: #{$c-warning}; + --mf-c-success: #{$c-success}; + --mf-c-focus: #{$c-focus}; + --mf-c-link: #{$c-link}; + --mf-c-visited: #{$c-visited}; - --mf-c-font-base: $c-font-base; - --mf-c-font-detail: $c-font-detail; - --mf-c-font-dark: $c-font-dark; - --mf-c-font-medium: $c-font-medium; + --mf-c-font-base: #{$c-font-base}; + --mf-c-font-detail: #{$c-font-detail}; + --mf-c-font-dark: #{$c-font-dark}; + --mf-c-font-medium: #{$c-font-medium}; - --mf-c-font-heading: $c-font-heading; - --mf-c-font-inverse: $c-font-inverse; - --mf-c-font-link: $c-font-link; - --mf-c-font-error: $c-font-error; + --mf-c-font-heading: #{$c-font-heading}; + --mf-c-font-inverse: #{$c-font-inverse}; + --mf-c-font-link: #{$c-font-link}; + --mf-c-font-error: #{$c-font-error}; - --mf-c-bg: $c-bg; - --mf-c-bg-comp-title: $c-bg-comp-title; - --mf-c-bg-subtle: $c-bg-subtle; - --mf-c-bg-section: $c-bg-section; + --mf-c-bg: #{$c-bg}; + --mf-c-bg-comp-title: #{$c-bg-comp-title}; + --mf-c-bg-subtle: #{$c-bg-subtle}; + --mf-c-bg-section: #{$c-bg-section}; - --mf-c-bd: $c-bd; - --mf-c-bd-divider: $c-bd-divider; - --mf-c-bd-divider-dark: $c-bd-divider-dark; - --mf-c-bd-error: $c-bd-error; - --mf-c-bd-input: $c-bd-input; - --mf-c-bd-input-dark: $c-bd-input-dark; + --mf-c-bd: #{$c-bd}; + --mf-c-bd-divider: #{$c-bd-divider}; + --mf-c-bd-divider-dark: #{$c-bd-divider-dark}; + --mf-c-bd-error: #{$c-bd-error}; + --mf-c-bd-input: #{$c-bd-input}; + --mf-c-bd-input-dark: #{$c-bd-input-dark}; - --mf-c-box-shadow-black: $c-box-shadow-black; + --mf-c-box-shadow-black: #{$c-box-shadow-black}; } From 9a2b7497708f8d8f123d780e469345ac24aa1668 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 30 Apr 2025 20:52:52 +0600 Subject: [PATCH 05/25] convert some more colors --- packages/assets/build/scss/_footer-links.scss | 2 +- .../scss/00-base/mixins/_ma-comp-heading.scss | 2 +- packages/core/stories/styles/_markdown.scss | 8 +++---- packages/core/stories/styles/index.scss | 4 ++-- .../stories/tokens/icons/_icon-display.scss | 2 +- .../atoms/buttons/Button/_index.scss | 6 ++--- .../components/base/Icon/_icon-display.scss | 2 +- .../components/base/Typography/_index.scss | 4 ++-- .../forms/CompoundSlider/_index.scss | 22 +++++++++---------- .../components/forms/FeedbackForm/_index.scss | 6 ++--- .../src/components/forms/Input/_index.scss | 8 +++---- .../molecules/SectionLinks/_index.scss | 18 +++++++-------- .../organisms/SearchBanner/_index.scss | 14 ++++++------ packages/site/src/components/section.scss | 6 ++--- packages/site/src/pages/index.scss | 4 ++-- 15 files changed, 54 insertions(+), 54 deletions(-) diff --git a/packages/assets/build/scss/_footer-links.scss b/packages/assets/build/scss/_footer-links.scss index 3e35b878f6..3891d478b9 100644 --- a/packages/assets/build/scss/_footer-links.scss +++ b/packages/assets/build/scss/_footer-links.scss @@ -12,7 +12,7 @@ border-bottom: none; .ma__sidebar-heading { - color: $c-gray; + color: var(--mf-c-gray); font-size: $fonts-smaller; } diff --git a/packages/assets/scss/00-base/mixins/_ma-comp-heading.scss b/packages/assets/scss/00-base/mixins/_ma-comp-heading.scss index e44b6995c9..065456c2f9 100644 --- a/packages/assets/scss/00-base/mixins/_ma-comp-heading.scss +++ b/packages/assets/scss/00-base/mixins/_ma-comp-heading.scss @@ -21,7 +21,7 @@ a { border: none; - color: $c-font-heading; + color: var(--mf-c-font-heading); } } } diff --git a/packages/core/stories/styles/_markdown.scss b/packages/core/stories/styles/_markdown.scss index fba3b81b5e..ebf2fbb422 100644 --- a/packages/core/stories/styles/_markdown.scss +++ b/packages/core/stories/styles/_markdown.scss @@ -7,7 +7,7 @@ h2, h3, h4, h5, h6 { } hr { - border: 1px solid $c-gray-light; + border: 1px solid var(--mf-c-gray-light); margin: 2rem 0; } @@ -80,7 +80,7 @@ ul { blockquote { margin: 0; padding: 0 1em; - border-left: .25em solid $c-gray-light; + border-left: .25em solid var(--mf-c-gray-light); &>:first-child { margin-top: 0; @@ -143,7 +143,7 @@ code { margin-left: 0; margin-right: 0; font-size: 85%; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); border-radius: 3px; } @@ -167,7 +167,7 @@ pre { overflow: auto; font-size: 85%; line-height: 1.45; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); border-radius: 3px; } diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss index e523f28a35..9a0fff6aa4 100644 --- a/packages/core/stories/styles/index.scss +++ b/packages/core/stories/styles/index.scss @@ -191,10 +191,10 @@ p.lang-label { margin-top: 0 !important; margin-bottom: 2rem; padding: 1rem; - border: 1px solid $c-gray-lightest; + border: 1px solid var(--mf-c-gray-lightest); hr { - color: $c-gray-lightest; + color: var(--mf-c-gray-lightest); } &--mono { diff --git a/packages/core/stories/tokens/icons/_icon-display.scss b/packages/core/stories/tokens/icons/_icon-display.scss index 8080b20685..6f57730a5b 100644 --- a/packages/core/stories/tokens/icons/_icon-display.scss +++ b/packages/core/stories/tokens/icons/_icon-display.scss @@ -31,7 +31,7 @@ margin-top: 20px; } span { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/atoms/buttons/Button/_index.scss b/packages/react/src/components/atoms/buttons/Button/_index.scss index d7868a221a..6d81835778 100644 --- a/packages/react/src/components/atoms/buttons/Button/_index.scss +++ b/packages/react/src/components/atoms/buttons/Button/_index.scss @@ -3,10 +3,10 @@ .ma__button.ma__button--secondary { &.ma__button--c-primary-alt{ - color: $c-primary-alt; + color: var(--mf-c-primary-alt); &:hover { - color: $c-white; - background-color: $c-primary-alt; + color: var(--mf-c-white); + background-color: var(--mf-c-primary-alt); } } } diff --git a/packages/react/src/components/base/Icon/_icon-display.scss b/packages/react/src/components/base/Icon/_icon-display.scss index eb72ad4fdc..17aa13e3a5 100644 --- a/packages/react/src/components/base/Icon/_icon-display.scss +++ b/packages/react/src/components/base/Icon/_icon-display.scss @@ -32,7 +32,7 @@ margin-top: 20px; } span { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/base/Typography/_index.scss b/packages/react/src/components/base/Typography/_index.scss index 7e07870e39..d3ec1351db 100644 --- a/packages/react/src/components/base/Typography/_index.scss +++ b/packages/react/src/components/base/Typography/_index.scss @@ -13,10 +13,10 @@ margin-top: 0 !important; margin-bottom: 2rem; padding: 1rem; - border: 1px solid $c-gray-lightest; + border: 1px solid var(--mf-c-gray-lightest); hr { - color: $c-gray-lightest; + color: var(--mf-c-gray-lightest); } &--mono { diff --git a/packages/react/src/components/forms/CompoundSlider/_index.scss b/packages/react/src/components/forms/CompoundSlider/_index.scss index 0f4c9db2d5..1050328f12 100644 --- a/packages/react/src/components/forms/CompoundSlider/_index.scss +++ b/packages/react/src/components/forms/CompoundSlider/_index.scss @@ -12,21 +12,21 @@ $margin: 20px; .ma__slider { &-rail { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); position: absolute; } &-track { - background-color: $c-primary-lighter; + background-color: var(--mf-c-primary-lighter); position: absolute; z-index: 1; cursor: pointer; } &-handle { - border: 1px solid $c-white; + border: 1px solid var(--mf-c-white); width: 26px; height: 26px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); - background-color: $c-primary; + background-color: var(--mf-c-primary); color: transparent; position: absolute; cursor: pointer; @@ -41,7 +41,7 @@ $margin: 20px; &:focus { outline: none; - box-shadow: 0 0 2px 2px $c-focus; + box-shadow: 0 0 2px 2px var(--mf-c-focus); } &-value { @@ -49,7 +49,7 @@ $margin: 20px; margin: -30px auto 0; position: absolute; left: 0; - color: $c-primary; + color: var(--mf-c-primary); font-weight: 500; } } @@ -59,11 +59,11 @@ $margin: 20px; opacity: 0.5; .ma__slider { &-track { - background-color: $c-gray; + background-color: var(--mf-c-gray); cursor: not-allowed; } &-handle { - background-color: $c-gray-dark; + background-color: var(--mf-c-gray-dark); cursor: not-allowed; opacity: 1; &:hover { @@ -71,7 +71,7 @@ $margin: 20px; } &-value { - color: $c-black; + color: var(--mf-c-black); } } } @@ -109,7 +109,7 @@ $margin: 20px; margin-left: -0.5px; width: 1px; height: 8px; - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } &--bottom { margin-top: 60px; @@ -151,7 +151,7 @@ $margin: 20px; margin-left: 10px; height: 1px; width: 6px; - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } &--bottom { margin-top: -5px; diff --git a/packages/react/src/components/forms/FeedbackForm/_index.scss b/packages/react/src/components/forms/FeedbackForm/_index.scss index 095849dfda..321a74ffa6 100644 --- a/packages/react/src/components/forms/FeedbackForm/_index.scss +++ b/packages/react/src/components/forms/FeedbackForm/_index.scss @@ -103,7 +103,7 @@ } #fsForm2521317 .messages .error { - color: $c-error-red; + color: var(--mf-c-error-red); text-align: left; } @@ -115,11 +115,11 @@ #fsForm2521317 fieldset.error textarea { width: 100%; - border: 1px solid $c-error-red !important; + border: 1px solid var(--mf-c-error-red) !important; } #fsForm2521317 fieldset.error legend { - color: $c-error-red; + color: var(--mf-c-error-red); } @media (min-width: 621px) {/* $bp-small-min */ diff --git a/packages/react/src/components/forms/Input/_index.scss b/packages/react/src/components/forms/Input/_index.scss index fa22c25d99..ff2babbd10 100644 --- a/packages/react/src/components/forms/Input/_index.scss +++ b/packages/react/src/components/forms/Input/_index.scss @@ -27,11 +27,11 @@ line-height: 1.75rem; margin-bottom: .5em; - color: $c-font-error; + color: var(--mf-c-font-error); font-weight: 500; &--success { - color: $c-primary-alt !important; + color: var(--mf-c-primary-alt) !important; } &.has-error { @@ -46,7 +46,7 @@ input:disabled { @extend %disabled; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } button:disabled { @@ -59,7 +59,7 @@ button:disabled { .ma__input-number-unit{ &--disabled { @extend %disabled; - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } diff --git a/packages/react/src/components/molecules/SectionLinks/_index.scss b/packages/react/src/components/molecules/SectionLinks/_index.scss index b11e7aa6c6..3d9a99bb19 100644 --- a/packages/react/src/components/molecules/SectionLinks/_index.scss +++ b/packages/react/src/components/molecules/SectionLinks/_index.scss @@ -3,21 +3,21 @@ .ma__section-links { position: relative; width: 100%; - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); @media ($bp-x-small-max) { border-top: 2px solid; margin: 0 -20px; width: calc(100% + 40px); - border-top-color: $c-bd-divider; - background-color: $c-white; + border-top-color: var(--mf-c-bd-divider); + background-color: var(--mf-c-white); &.is-open { - background-color: $c-white + background-color: var(--mf-c-white) } &:last-child { - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid var(--mf-c-bd-divider); } } @@ -69,7 +69,7 @@ font-size: $fonts-medium; padding: 0 20px 20px 0; width: 100%; - border-top-color: $c-bd-divider; + border-top-color: var(--mf-c-bd-divider); @media ($bp-x-small-max) { display: none; @@ -100,7 +100,7 @@ font-size: $fonts-larger; margin-bottom: .75em; padding: 0 16px .75em 0; - border-bottom-color: $c-bd-divider; + border-bottom-color: var(--mf-c-bd-divider); &--center { align-self: center; @@ -156,7 +156,7 @@ } &.ma__section-links__title--center a { - color: $c-primary; + color: var(--mf-c-primary); } .ma__decorative-link { @@ -169,7 +169,7 @@ &:after { - color: $c-primary-alt; + color: var(--mf-c-primary-alt); } svg { diff --git a/packages/react/src/components/organisms/SearchBanner/_index.scss b/packages/react/src/components/organisms/SearchBanner/_index.scss index 9a7574f69f..de51877199 100644 --- a/packages/react/src/components/organisms/SearchBanner/_index.scss +++ b/packages/react/src/components/organisms/SearchBanner/_index.scss @@ -1,9 +1,9 @@ @use "00-base/configure" as *; .ma__search-banner__top { - background: $c-gray-lightest; - border-top: 1px solid $c-gray-light; - border-bottom: 1px solid $c-gray-light; + background: var(--mf-c-gray-lightest); + border-top: 1px solid var(--mf-c-gray-light); + border-bottom: 1px solid var(--mf-c-gray-light); padding-top: 30px; margin-bottom: 50px; position: relative; @@ -51,7 +51,7 @@ .ma__input-typeahead { &--boxed { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } } @@ -62,7 +62,7 @@ padding: 8px 10px; font-size: $fonts-small; font-weight: 700; - color: $c-font-base; + color: var(--mf-c-font-base); background-color: #E8EEF4; border: 1px solid #8AAAC7; border-width: 1px 0; @@ -71,7 +71,7 @@ & > svg { display: inline-block; vertical-align: middle; - fill: $c-font-base; + fill: var(--mf-c-font-base); } @media ($bp-large-min) { @@ -112,7 +112,7 @@ @media ($bp-large-min) { border: 1px solid #8AAAC7; - border-top: 5px solid $c-primary; + border-top: 5px solid var(--mf-c-primary); border-bottom-color: #E8EEF4; & > svg { diff --git a/packages/site/src/components/section.scss b/packages/site/src/components/section.scss index c9c4573bc4..d2564e9b34 100644 --- a/packages/site/src/components/section.scss +++ b/packages/site/src/components/section.scss @@ -8,14 +8,14 @@ } &--primary { - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); } &--gray-light { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } &--primary-alt { - background-color: $c-primary-alt-lightest; + background-color: var(--mf-c-primary-alt-lightest); } } diff --git a/packages/site/src/pages/index.scss b/packages/site/src/pages/index.scss index b87ae54f25..10981c4d78 100644 --- a/packages/site/src/pages/index.scss +++ b/packages/site/src/pages/index.scss @@ -59,12 +59,12 @@ } .ma__search--tabs { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); } .ma__gen-teaser__image { overflow: hidden; - border-color: $c-gray-lighter; + border-color: var(--mf-c-gray-lighter); } .ma__section-wrapper h2.ma__gen-teaser__title { From 469249eae0fa030755492c3685bfd1749a2cc674 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 30 Apr 2025 23:56:31 +0600 Subject: [PATCH 06/25] update mix,rgba,darken,tint sass functions --- changelogs/DP-38077.yml | 13 +++++++++ packages/assets/scss/00-base/_pikaday.scss | 2 +- .../assets/scss/01-atoms/_button-tag.scss | 2 +- .../scss/01-atoms/_decorative-link.scss | 12 ++++---- packages/assets/scss/01-atoms/_forms.scss | 8 +++--- .../assets/scss/01-atoms/_input-checkbox.scss | 4 +-- .../assets/scss/01-atoms/_select-box.scss | 6 ++-- packages/assets/scss/01-atoms/_video.scss | 4 +-- .../assets/scss/02-molecules/_arrow-nav.scss | 2 +- .../scss/02-molecules/_button-alert.scss | 4 +-- .../scss/02-molecules/_callout-link.scss | 20 ++++++------- .../scss/02-molecules/_callout-stats.scss | 2 +- .../scss/02-molecules/_event-teaser.scss | 2 +- .../scss/02-molecules/_featured-item.scss | 2 +- .../scss/02-molecules/_footer-links.scss | 2 +- .../scss/02-molecules/_header-tags.scss | 2 +- .../scss/02-molecules/_illustrated-link.scss | 4 +-- .../scss/02-molecules/_keyword-search.scss | 2 +- .../assets/scss/02-molecules/_map-google.scss | 2 +- .../scss/02-molecules/_map-leaflet.scss | 2 +- .../_relationship-indicators.scss | 12 ++++---- .../scss/03-organisms/_action-card.scss | 20 ++++++------- .../scss/03-organisms/_action-finder.scss | 4 +-- .../scss/03-organisms/_banner-carousel.scss | 2 +- .../assets/scss/03-organisms/_blog-feed.scss | 2 +- .../scss/03-organisms/_breadcrumbs.scss | 4 +-- .../scss/03-organisms/_callout-alert.scss | 28 +++++++++---------- .../scss/03-organisms/_callout-message.scss | 6 ++-- .../assets/scss/03-organisms/_error-page.scss | 2 +- .../scss/03-organisms/_feedback-form.scss | 2 +- .../03-organisms/_footer-with-columns.scss | 4 +-- .../assets/scss/03-organisms/_footer.scss | 2 +- .../scss/03-organisms/_header-hamburger.scss | 8 +++--- .../assets/scss/03-organisms/_header.scss | 4 +-- .../assets/scss/03-organisms/_help-tip.scss | 2 +- .../scss/03-organisms/_in-page-alert.scss | 2 +- .../03-organisms/_page-banner-legacy.scss | 6 ++-- .../scss/03-organisms/_page-flipper.scss | 2 +- .../scss/03-organisms/_person-card.scss | 2 +- .../scss/03-organisms/_search-banner.scss | 20 ++++++------- .../03-organisms/_search-box-with-links.scss | 2 +- .../assets/scss/03-organisms/_sticky-toc.scss | 2 +- .../_table-of-contents-hierarchy.scss | 2 +- .../_table-of-contents-overlay.scss | 2 +- .../scss/03-organisms/_teaser-listing.scss | 2 +- .../scss/03-organisms/_transition-page.scss | 2 +- .../scss/03-organisms/_utility-panel.scss | 4 +-- .../scss/04-templates/_narrow-template.scss | 6 ++-- .../04-templates/_organization-details.scss | 2 +- .../stories/tokens/colors/_color-display.scss | 2 +- .../src/components/base/Colors/_index.scss | 2 +- .../molecules/SectionLinks/_index.scss | 8 +++--- 52 files changed, 140 insertions(+), 127 deletions(-) create mode 100644 changelogs/DP-38077.yml diff --git a/changelogs/DP-38077.yml b/changelogs/DP-38077.yml new file mode 100644 index 0000000000..fab204fc97 --- /dev/null +++ b/changelogs/DP-38077.yml @@ -0,0 +1,13 @@ +Added: + - project: Assets + component: color-tokens + description: Added css variables for colors (#1978) + issue: DP-38077 + impact: Patch + +Changed: + - project: Assets, Core, Patternlab, React, Site + component: scss files + description: Changed colors to use the new css variables rather than scss variables (#1978) + issue: DP-38077 + impact: Major diff --git a/packages/assets/scss/00-base/_pikaday.scss b/packages/assets/scss/00-base/_pikaday.scss index 40e063bf4e..538d088008 100644 --- a/packages/assets/scss/00-base/_pikaday.scss +++ b/packages/assets/scss/00-base/_pikaday.scss @@ -51,7 +51,7 @@ } &:hover { - background-color: mix($c-white, $c-primary, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-primary) 50%); border-radius: 0; } diff --git a/packages/assets/scss/01-atoms/_button-tag.scss b/packages/assets/scss/01-atoms/_button-tag.scss index 0aea63e790..d16ce5a62b 100644 --- a/packages/assets/scss/01-atoms/_button-tag.scss +++ b/packages/assets/scss/01-atoms/_button-tag.scss @@ -11,7 +11,7 @@ margin-right: .25em; padding: 8px 11px; white-space: nowrap; - background-color: mix($c-bg, $c-font-link,90%); + background-color: color-mix(in srgb, var(--c-font-link) 90%, transparent 10%); color: var(--mf-c-font-link); font-weight: $fonts-bold; diff --git a/packages/assets/scss/01-atoms/_decorative-link.scss b/packages/assets/scss/01-atoms/_decorative-link.scss index 370c379032..6ebceca43b 100644 --- a/packages/assets/scss/01-atoms/_decorative-link.scss +++ b/packages/assets/scss/01-atoms/_decorative-link.scss @@ -27,21 +27,21 @@ } a:hover { - border-bottom-color: rgba($c-font-inverse,.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } a:focus { // important needed to overwrite the focus border color - border-bottom-color: rgba($c-font-inverse,.5) !important; + border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%) !important; } svg { - fill: rgba($c-font-inverse,.5); + fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } } &.button-link { - outline: 1px solid rgba($c-font-link, 0.5); + outline: 1px solid color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); display: inline-block; width: auto; padding: .5rem 1.8rem .5rem .8rem; @@ -49,13 +49,13 @@ &:hover, &:focus { - outline: 1px solid rgba($c-font-link, 1); + outline: 1px solid color-mix(in srgb, var(--mf-c-font-link) 100%, transparent 0%); a { border-bottom-color: transparent; svg { - fill: rgba($c-font-link, 1); + fill: color-mix(in srgb, var(--mf-c-font-link) 100%, transparent 0%); } } } diff --git a/packages/assets/scss/01-atoms/_forms.scss b/packages/assets/scss/01-atoms/_forms.scss index 43ff3248f0..5c9a6ebbb4 100644 --- a/packages/assets/scss/01-atoms/_forms.scss +++ b/packages/assets/scss/01-atoms/_forms.scss @@ -12,8 +12,8 @@ input { } .ma__form--light & { - background-color: rgba($c-bg, 0.1); - border-color: rgba($c-bd-input,.5); + background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); + border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); color: var(--mf-c-font-inverse); &.has-error { @@ -81,8 +81,8 @@ textarea { } .ma__form--light & { - background-color: rgba($c-bg, 0.1); - border-color: rgba($c-bd-input, 0.5); + background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); + border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); color: var(--mf-c-font-inverse); &.has-error { diff --git a/packages/assets/scss/01-atoms/_input-checkbox.scss b/packages/assets/scss/01-atoms/_input-checkbox.scss index 39ded9e8ec..da7ec73541 100644 --- a/packages/assets/scss/01-atoms/_input-checkbox.scss +++ b/packages/assets/scss/01-atoms/_input-checkbox.scss @@ -88,8 +88,8 @@ border-color: var(--mf-c-bd-input-dark); .ma__form--light & { - background-color: rgba($c-bg, 0.1); - border-color: rgba($c-bd-input,.5); + background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); + border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/01-atoms/_select-box.scss b/packages/assets/scss/01-atoms/_select-box.scss index b6964fe721..a99d720314 100644 --- a/packages/assets/scss/01-atoms/_select-box.scss +++ b/packages/assets/scss/01-atoms/_select-box.scss @@ -98,8 +98,8 @@ border-color: var(--mf-c-bd-input); .ma__form--light & { - background-color: rgba($c-bg,.1); - border-color: rgba($c-bd-input,.5); + background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); + border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); } } @@ -111,7 +111,7 @@ border-color: var(--mf-c-bd-input); .ma__form--light & { - border-color: rgba($c-bd-input,.5); + border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); } } diff --git a/packages/assets/scss/01-atoms/_video.scss b/packages/assets/scss/01-atoms/_video.scss index c83838181a..764f1a9c99 100644 --- a/packages/assets/scss/01-atoms/_video.scss +++ b/packages/assets/scss/01-atoms/_video.scss @@ -12,7 +12,7 @@ padding: 13px; position: relative; padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px - background-color: rgba($c-primary,.1); + background-color: color-mix(in srgb, var(--mf-c-primary) 10%, transparent 90%); @media ($bp-large-min) { padding-bottom: 12px + 32px + 13px; @@ -118,7 +118,7 @@ // Backward Compatible - had to add the --new as a variant for the new styling .ma__video:not(.ma__video--new) { - background-color: rgba($c-primary,.1); + background-color: color-mix(in srgb, var(--mf-c-primary) 10%, transparent 90%); } // Override style for .ma__rich-text h2:first-child:not(.sticky-toc-jump-target). diff --git a/packages/assets/scss/02-molecules/_arrow-nav.scss b/packages/assets/scss/02-molecules/_arrow-nav.scss index e95c3d8e4c..8c82e06914 100644 --- a/packages/assets/scss/02-molecules/_arrow-nav.scss +++ b/packages/assets/scss/02-molecules/_arrow-nav.scss @@ -99,7 +99,7 @@ .ma__arrow-nav { &__title { - color: rgba($c-font-link, .8); + color: color-mix(in srgb, var(--mf-c-font-link) 80%, transparent 20%); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/02-molecules/_button-alert.scss b/packages/assets/scss/02-molecules/_button-alert.scss index 0cc81b9dbb..8c59384c2d 100644 --- a/packages/assets/scss/02-molecules/_button-alert.scss +++ b/packages/assets/scss/02-molecules/_button-alert.scss @@ -27,7 +27,7 @@ transform-origin: 65% 65%; transition: transform .5s; width: 8px; - border-color: rgba($c-font-inverse,.5); + border-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } // If the parent of the button-alert is an open accordion, then flip the arrow up. @@ -51,7 +51,7 @@ &:hover { transition: background-color .4s, color .4s, border .4s, fill .4s; - background-color: rgba($c-font-dark, 0.75); + background-color: color-mix(in srgb, var(--mf-c-font-dark) 75%, transparent 25%); } &__hide { diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss index c6485e6f85..0839c9e8d1 100644 --- a/packages/assets/scss/02-molecules/_callout-link.scss +++ b/packages/assets/scss/02-molecules/_callout-link.scss @@ -9,8 +9,8 @@ flex-flow: column wrap; justify-content: center; padding: 15px 20px; - background-color: mix($c-bg, $c-font-link,90%); - border-color: $c-link; + background-color: color-mix(in srgb, var(--mf-c-bg) 90%, var(--mf-c-font-link) 10%); + border-color: var(--mf-c-link); box-shadow: $box-shadow; text-decoration: none; @@ -22,7 +22,7 @@ &:focus { .ma__callout-link__text { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } @@ -54,7 +54,7 @@ svg { @include ma-link-arrow; - fill: $c-font-link; + fill: var(--mf-c-font-link); } } @@ -63,7 +63,7 @@ padding-top: 10px; font-size: $fonts-medium; font-weight: $fonts-light; - color: rgba($c-font-link,1); + color: color-mix(in srgb, var(--mf-c-font-link) 100%, transparent 0%); @media ($bp-x-small-min) { display: flex; @@ -73,7 +73,7 @@ } &__eyebrow { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); font-weight: $fonts-bold; } @@ -83,7 +83,7 @@ display: inline-flex; justify-content: space-between; margin-bottom: 10px; - color: $c-font-detail; + color: var(--mf-c-font-detail); @media ($bp-small-min) { margin-bottom: 15px; @@ -102,13 +102,13 @@ line-height: 1; padding-top: 15px; display: flex; - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; } &--white { - background-color: $c-bg; - border-color: mix($c-white, $c-font-detail,70%); + background-color: var(--mf-c-bg); + border-color: color-mix(in srgb, var(--mf-c-white) 70%, var(--mf-c-font-detail) 30%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/02-molecules/_callout-stats.scss b/packages/assets/scss/02-molecules/_callout-stats.scss index 240e02db03..949149e430 100644 --- a/packages/assets/scss/02-molecules/_callout-stats.scss +++ b/packages/assets/scss/02-molecules/_callout-stats.scss @@ -72,7 +72,7 @@ font-weight: 900; &:before { - background-color: rgba($c-primary-alt,.2); + background-color: color-mix(in srgb, var(--mf-c-primary-alt) 20%, transparent 80%); } &__stat { diff --git a/packages/assets/scss/02-molecules/_event-teaser.scss b/packages/assets/scss/02-molecules/_event-teaser.scss index 5fa549fb1e..15356fd3cd 100644 --- a/packages/assets/scss/02-molecules/_event-teaser.scss +++ b/packages/assets/scss/02-molecules/_event-teaser.scss @@ -137,7 +137,7 @@ } &__graphic { - background-color: mix($c-white, $c-primary-alt, 80%); + background-color: color-mix(in srgb, var(--mf-c-white) 80%, var(--mf-c-primary-alt) 20%); } &__spacer { diff --git a/packages/assets/scss/02-molecules/_featured-item.scss b/packages/assets/scss/02-molecules/_featured-item.scss index 8cacd75bbe..d28ea2542b 100644 --- a/packages/assets/scss/02-molecules/_featured-item.scss +++ b/packages/assets/scss/02-molecules/_featured-item.scss @@ -20,7 +20,7 @@ } &:hover:before { - background-color: rgba($c-black,0.1); + background-color: color-mix(in srgb, var(--mf-c-black) 10%, transparent 90%); } &:hover span { diff --git a/packages/assets/scss/02-molecules/_footer-links.scss b/packages/assets/scss/02-molecules/_footer-links.scss index 7fdf6773fa..5ea227c833 100644 --- a/packages/assets/scss/02-molecules/_footer-links.scss +++ b/packages/assets/scss/02-molecules/_footer-links.scss @@ -39,7 +39,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: rgba($c-font-dark,.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-font-dark) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/02-molecules/_header-tags.scss b/packages/assets/scss/02-molecules/_header-tags.scss index b551bf4971..5c95428d0d 100644 --- a/packages/assets/scss/02-molecules/_header-tags.scss +++ b/packages/assets/scss/02-molecules/_header-tags.scss @@ -123,7 +123,7 @@ &__terms { a { - border-color: rgba($c-font-link,.2); + border-color: color-mix(in srgb, var(--mf-c-font-link) 20%, transparent 80%); font-weight: $fonts-normal; &:hover { diff --git a/packages/assets/scss/02-molecules/_illustrated-link.scss b/packages/assets/scss/02-molecules/_illustrated-link.scss index aeb142de85..608555e85e 100644 --- a/packages/assets/scss/02-molecules/_illustrated-link.scss +++ b/packages/assets/scss/02-molecules/_illustrated-link.scss @@ -91,11 +91,11 @@ $illustrated-link-image-width: 130px; } &__label { - color: rgba($c-font-link,.9);// with background color, #e5ecf3 + color: color-mix(in srgb, var(--mf-c-font-link) 90%, transparent 10%);// with background color, #e5ecf3 } .ma__action-finder__items--all &__label { - color: rgba($c-font-link,.8);// with background color, #ffffff + color: color-mix(in srgb, var(--mf-c-font-link) 80%, transparent 20%);// with background color, #ffffff } &__title { diff --git a/packages/assets/scss/02-molecules/_keyword-search.scss b/packages/assets/scss/02-molecules/_keyword-search.scss index 9cd2fc7973..2d459a5333 100644 --- a/packages/assets/scss/02-molecules/_keyword-search.scss +++ b/packages/assets/scss/02-molecules/_keyword-search.scss @@ -93,7 +93,7 @@ $header-search-height: 46px; } .ma__form--light .ma__button-search { - border-left-color: rgba($c-bd-input,.5); + border-left-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); &:hover { border-left-color: var(--mf-c-primary-alt); diff --git a/packages/assets/scss/02-molecules/_map-google.scss b/packages/assets/scss/02-molecules/_map-google.scss index b3c2c21b5b..007bd1e3ff 100644 --- a/packages/assets/scss/02-molecules/_map-google.scss +++ b/packages/assets/scss/02-molecules/_map-google.scss @@ -27,7 +27,7 @@ color: var(--mf-c-font-inverse); svg { - fill: rgba($c-white, 0.7); + fill: color-mix(in srgb, var(--mf-c-white) 70%, transparent 30%); width: 12px; height: 12px; margin-bottom: -1px; diff --git a/packages/assets/scss/02-molecules/_map-leaflet.scss b/packages/assets/scss/02-molecules/_map-leaflet.scss index 6c503354c9..99dc29c17e 100644 --- a/packages/assets/scss/02-molecules/_map-leaflet.scss +++ b/packages/assets/scss/02-molecules/_map-leaflet.scss @@ -116,7 +116,7 @@ color: var(--mf-c-font-inverse); svg { - fill: rgba($c-white, 0.7); + fill: color-mix(in srgb, var(--mf-c-white) 70%, transparent 30%); width: 12px; height: 12px; margin-bottom: -1px; diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index fcb663a5cb..9a8fb1e192 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -159,12 +159,12 @@ a { color: var(--mf-c-primary); - box-shadow: inset 0 0 $c-white, inset 0px -1px $c-bay-blue-lighter; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-bay-blue-lighter); // border-bottom: 1px solid $c-bay-blue-lighter; &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px $c-bay-blue-30-tint; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-bay-blue-30-tint); // border-bottom: 2px solid $c-bay-blue-30-tint; } } @@ -193,10 +193,10 @@ a { color: var(--mf-c-primary-alt); - box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4);// This can be replaced with border-bottom. See L.163. + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px color-mix(in srgb, var(--mf-c-primary-alt) 40%, transparent 60%);// This can be replaced with border-bottom. See L.163. &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px rgba($c-primary-alt, 0.7);// This can be replaced with border-bottom. See L.163. + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px color-mix(in srgb, var(--mf-c-primary-alt) 70%, transparent 30%);// This can be replaced with border-bottom. See L.163. } } @@ -251,10 +251,10 @@ a { color: var(--mf-c-primary-alt); - box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4); + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px color-mix(in srgb, var(--mf-c-primary-alt) 40%, transparent 60%); &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px rgba($c-primary-alt, 0.7); + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px color-mix(in srgb, var(--mf-c-primary-alt) 70%, transparent 30%); } } } diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index ae8d71c59b..557263e0ef 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -169,7 +169,7 @@ box-shadow: $box-shadow; &:hover { - background-color: darken($c-bg-subtle, 10%); + background-color: color-mix(in srgb, var(--c-bg-subtle) 90%, var(--mf-c-black) 10%); a { border-bottom-color: var(--mf-c-font-link); @@ -180,7 +180,7 @@ background-color: var(--mf-c-primary); &:hover { - background-color: rgba($c-primary,.8); + background-color: color-mix(in srgb, var(--mf-c-primary) 80%, transparent 20%); a { border-bottom-color: var(--mf-c-font-inverse); @@ -192,7 +192,7 @@ background-color: var(--mf-c-primary-alt); &:hover { - background-color: rgba($c-primary-alt,.8); + background-color: color-mix(in srgb, var(--mf-c-primary-alt) 80%, transparent 20%); a { border-bottom-color: var(--mf-c-font-inverse); @@ -204,7 +204,7 @@ background-color: var(--mf-c-gray-dark); &:hover { - background-color: rgba($c-gray-dark,.8); + background-color: color-mix(in srgb, var(--mf-c-gray-dark) 80%, transparent 20%); a { border-bottom-color: var(--mf-c-font-inverse); @@ -217,7 +217,7 @@ svg, svg > g { - fill: rgba($c-font-medium,.7); + fill: color-mix(in srgb, var(--mf-c-font-medium) 70%, transparent 30%); } } @@ -227,20 +227,20 @@ svg, svg > g { - fill: rgba($c-font-inverse,.7); + fill: color-mix(in srgb, var(--mf-c-font-inverse) 70%, transparent 30%); } } &__category { - color: rgba($c-font-base,.85); + color: color-mix(in srgb, var(--mf-c-font-base) 85%, transparent 15%); font-weight: $fonts-bold; } &__item--blue &__category, &__item--green &__category, &__item--dark-gray &__category { - color: rgba($c-font-inverse,.8); - text-shadow: 0 0.125rem 0.125rem rgba($c-black, 0.5); + color: color-mix(in srgb, var(--mf-c-font-inverse) 80%, transparent 20%); + text-shadow: 0 0.125rem 0.125rem color-mix(in srgb, var(--mf-c-black) 50%, transparent 50%); } &__link { @@ -267,7 +267,7 @@ } svg { - fill: rgba(var(--mf-c-font-inverse), .5); + fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 265ce34d88..0b65d20c81 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -234,12 +234,12 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); color: var(--mf-c-font-inverse); &:hover { - border-color: rgba($c-font-inverse, .5); + border-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } } svg { - fill: rgba($c-font-inverse, .5); + fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/03-organisms/_banner-carousel.scss b/packages/assets/scss/03-organisms/_banner-carousel.scss index f18aee2ae2..ed493b1253 100644 --- a/packages/assets/scss/03-organisms/_banner-carousel.scss +++ b/packages/assets/scss/03-organisms/_banner-carousel.scss @@ -126,7 +126,7 @@ } &:before { - background-color: rgba($c-primary,.5); + background-color: color-mix(in srgb, var(--mf-c-primary) 50%, transparent 50%); } &:hover:before { diff --git a/packages/assets/scss/03-organisms/_blog-feed.scss b/packages/assets/scss/03-organisms/_blog-feed.scss index f5e62adf9f..a03992fa79 100644 --- a/packages/assets/scss/03-organisms/_blog-feed.scss +++ b/packages/assets/scss/03-organisms/_blog-feed.scss @@ -112,7 +112,7 @@ } &__date { - background-color: rgba($c-white,.8); + background-color: color-mix(in srgb, var(--mf-c-white) 80%, transparent 20%); color: var(--mf-c-font-base); font-weight: 900; } diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss index bbdd9d1e33..5e5fb5a1d9 100644 --- a/packages/assets/scss/03-organisms/_breadcrumbs.scss +++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss @@ -260,13 +260,13 @@ $breadcrumbs-scrollbar-height: 12px; /* Track */ &::-webkit-scrollbar-track { - background: mix($c-bg, $c-granite-gray, 80); + background: color-mix(in srgb, var(--mf-c-granite-gray) 80%, transparent 20%); } /* Handle */ &::-webkit-scrollbar-thumb { - background: mix($c-bg, $c-granite-gray, 50); + background: color-mix(in srgb, var(--mf-c-granite-gray) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index ec69180e60..f72b70b9d5 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -84,8 +84,8 @@ //default &__content { - background-color: mix($c-white, $c-warning, 90%); - border-color: mix($c-white, $c-warning, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-warning) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-warning) 50%); box-shadow: $box-shadow; } @@ -98,19 +98,19 @@ font-weight: bold; svg { - fill: rgba($c-font-dark,.5); + fill: color-mix(in srgb, var(--mf-c-font-dark) 50%, transparent 50%); } } &:hover &__link span { - border-color: rgba($c-font-base,.5); + border-color: color-mix(in srgb, var(--mf-c-font-base) 50%, transparent 50%); } //c-primary &--c-primary &__content { - background-color: mix($c-white, $c-primary, 90%); - border-color: mix($c-white, $c-primary, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-primary) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-primary) 50%); box-shadow: $box-shadow; } @@ -121,8 +121,8 @@ //c-primary-alt &--c-primary-alt &__content { - background-color: mix($c-white, $c-primary-alt, 90%); - border-color: mix($c-white, $c-primary-alt, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-primary-alt) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-primary-alt) 50%); box-shadow: $box-shadow; } @@ -133,8 +133,8 @@ //c-gray-dark &--c-gray-dark &__content { - background-color: mix($c-white, $c-gray-dark, 90%); - border-color: mix($c-white, $c-gray-dark, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-gray-dark) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-gray-dark) 50%); box-shadow: $box-shadow; } @@ -145,8 +145,8 @@ //c-error-red &--c-error-red &__content { - background-color: mix($c-white, $c-error-red, 90%); - border-color: mix($c-white, $c-error-red, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-error-red) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-error-red) 50%); box-shadow: $box-shadow; } @@ -157,8 +157,8 @@ //c-white &--c-white &__content { - background-color: mix($c-white, $c-white, 90%); - border-color: mix($c-white, $c-gray-dark, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--c-gray-dark) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--c-gray-dark) 50%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/03-organisms/_callout-message.scss b/packages/assets/scss/03-organisms/_callout-message.scss index 111fee47d0..ed385fae49 100644 --- a/packages/assets/scss/03-organisms/_callout-message.scss +++ b/packages/assets/scss/03-organisms/_callout-message.scss @@ -20,8 +20,8 @@ display:block; width: 100%; padding: 15px 20px; - background-color: mix($c-white, $c-font-link,90%); - border-color: mix($c-white, $c-font-link,50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-font-link) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-font-link) 50%); box-shadow: $box-shadow; @media ($bp-small-min) { @@ -39,7 +39,7 @@ &--white { background-color: var(--mf-c-bg); - border-color: mix($c-white, $c-font-detail,70%); + border-color: color-mix(in srgb, var(--mf-c-white) 70%, var(--mf-c-font-detail) 30%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss index f91d135d4d..f5d9a53436 100644 --- a/packages/assets/scss/03-organisms/_error-page.scss +++ b/packages/assets/scss/03-organisms/_error-page.scss @@ -46,7 +46,7 @@ .ma__error-page { &:before { - background-color: rgba($c-warning, .15); + background-color: color-mix(in srgb, var(--mf-c-warning) 15%, transparent 85%); } &__label { diff --git a/packages/assets/scss/03-organisms/_feedback-form.scss b/packages/assets/scss/03-organisms/_feedback-form.scss index d1d4f22166..8c4caf3a7f 100644 --- a/packages/assets/scss/03-organisms/_feedback-form.scss +++ b/packages/assets/scss/03-organisms/_feedback-form.scss @@ -167,7 +167,7 @@ $feedback-form-bp-min: "min-width: 751px"; .ma__feedback-form { &__overlay { - background-color: rgba($c-black,.6); + background-color: color-mix(in srgb, var(--mf-c-black) 60%, transparent 40%); color: var(--mf-c-font-inverse); } diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index fbcc9bd0ed..0a5a893f44 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -123,10 +123,10 @@ &__back2top { @include ma-button("outline",$c-primary); - background-color: rgba($c-white, .9); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, transparent 10%); svg { - fill: rgba($c-primary, .5); + fill: color-mix(in srgb, var(--mf-c-primary) 50%, transparent 50%); } &:hover { diff --git a/packages/assets/scss/03-organisms/_footer.scss b/packages/assets/scss/03-organisms/_footer.scss index e3cea7f170..91aeac0f57 100644 --- a/packages/assets/scss/03-organisms/_footer.scss +++ b/packages/assets/scss/03-organisms/_footer.scss @@ -63,7 +63,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: rgba($c-font-dark,.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-font-dark) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index 17d9d09dfc..ee2617db23 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -18,7 +18,7 @@ body.show-menu { visibility: hidden; opacity: 0; transition: visibility 0s 0.6s, opacity 0.6s linear; - background-color: rgba($c-gray-darkest, 0.4); + background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 40%, transparent 60%); top: 0; z-index: $z-overlay-shade;// Lay over the alerts. @@ -36,7 +36,7 @@ body.show-menu { visibility: hidden; opacity: 0; transition: visibility 0s 0.6s, opacity 0.6s linear; - background-color: rgba($c-gray-darkest, 0.4); + background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 40%, transparent 60%); top: 0px; z-index: $z-overlay-shade; @@ -685,8 +685,8 @@ body.show-menu { top: 0; white-space: nowrap; font-weight: $fonts-semibold; - background-color: tint($c-font-link, 90%); - border-color: tint($c-font-link, 50%); + background-color: color-mix(in srgb, var(--mf-c-font-link) 90%, var(--mf-c-white) 10%); + border-color: color-mix(in srgb, var(--mf-c-font-link) 50%, var(--mf-c-white) 50%); box-shadow: $box-shadow; color: var(--mf-c-font-link); font-size: $fonts-medium; diff --git a/packages/assets/scss/03-organisms/_header.scss b/packages/assets/scss/03-organisms/_header.scss index 9523b37356..1a87476031 100644 --- a/packages/assets/scss/03-organisms/_header.scss +++ b/packages/assets/scss/03-organisms/_header.scss @@ -480,8 +480,8 @@ body { a { font-weight: $fonts-normal; - background-color: mix($c-white, $c-font-link, 90%); - border-color: mix($c-white, $c-font-link, 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-font-link) 10%);; + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-font-link) 50%); box-shadow: $box-shadow; color: var(--mf-c-font-link); font-size: $fonts-medium; diff --git a/packages/assets/scss/03-organisms/_help-tip.scss b/packages/assets/scss/03-organisms/_help-tip.scss index b1e0de7b45..baabf42299 100644 --- a/packages/assets/scss/03-organisms/_help-tip.scss +++ b/packages/assets/scss/03-organisms/_help-tip.scss @@ -79,7 +79,7 @@ $border-width: 1px; color: var(--mf-c-font-inverse); svg { - fill: mix($c-white, $c-font-link, 70%); + fill: color-mix(in srgb, var(--mf-c-white) 70%, var(--mf-c-font-link) 30%);; } } diff --git a/packages/assets/scss/03-organisms/_in-page-alert.scss b/packages/assets/scss/03-organisms/_in-page-alert.scss index 218c8b3d52..48f5f155aa 100644 --- a/packages/assets/scss/03-organisms/_in-page-alert.scss +++ b/packages/assets/scss/03-organisms/_in-page-alert.scss @@ -39,7 +39,7 @@ color: var(--mf-c-font-base); svg { - fill: rgba($c-font-base, .5); + fill: color-mix(in srgb, var(--mf-c-font-base) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/03-organisms/_page-banner-legacy.scss b/packages/assets/scss/03-organisms/_page-banner-legacy.scss index becea2e8f0..06d02c4a21 100644 --- a/packages/assets/scss/03-organisms/_page-banner-legacy.scss +++ b/packages/assets/scss/03-organisms/_page-banner-legacy.scss @@ -133,7 +133,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); color: var(--mf-c-font-inverse); &:hover { - border-bottom-color: rgba($c-font-inverse, 0.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } svg { @@ -207,7 +207,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); .ma__page-banner-legacy__container { &:before { - background-color: rgba($c-primary-alt, 0.8); + background-color: color-mix(in srgb, var(--mf-c-primary-alt) 80%, transparent 20%); } } @@ -221,7 +221,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); align-items: stretch; &:before { - background-color: rgba($c-primary, 0.8); + background-color: color-mix(in srgb, var(--mf-c-primary) 80%, transparent 20%); } } } diff --git a/packages/assets/scss/03-organisms/_page-flipper.scss b/packages/assets/scss/03-organisms/_page-flipper.scss index fab5f1121d..e7cd7af88e 100644 --- a/packages/assets/scss/03-organisms/_page-flipper.scss +++ b/packages/assets/scss/03-organisms/_page-flipper.scss @@ -88,7 +88,7 @@ } &__context-label { - color: rgba($c-font-link, .8); + color: rcolor-mix(in srgb, var(--mf-c-font-link) 80%, transparent 20%); } &__blank, diff --git a/packages/assets/scss/03-organisms/_person-card.scss b/packages/assets/scss/03-organisms/_person-card.scss index fb2339f180..b0c3d3dd65 100644 --- a/packages/assets/scss/03-organisms/_person-card.scss +++ b/packages/assets/scss/03-organisms/_person-card.scss @@ -85,7 +85,7 @@ @media ($bp-large-extended-min) { border: 1px solid var(--mf-c-primary-alt); - box-shadow: 4px 2px 5px 0px rgba($c-gray-darkest,0.3); + box-shadow: 4px 2px 5px 0px color-mix(in srgb, var(--mf-c-gray-darkest) 30%, transparent 70%); } &::before, diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss index 1f7ed5acf6..939d871fe4 100644 --- a/packages/assets/scss/03-organisms/_search-banner.scss +++ b/packages/assets/scss/03-organisms/_search-banner.scss @@ -181,7 +181,7 @@ &__links { margin-left: auto; margin-right: auto; - background-color: rgba($c-black, 0.5); + background-color: color-mix(in srgb, var(--mf-c-black) 50%, transparent 50%); padding: 10px 20px; @media ($bp-medium-min) { @@ -284,7 +284,7 @@ position: relative; &:after { - background-color: rgba($c-gray-darkest, .6); + background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 60%, transparent 40%); } &__container { @@ -322,7 +322,7 @@ &__input { input { - background-color: rgba($c-white,0.75); + background-color: color-mix(in srgb, var(--mf-c-white) 75%, transparent 25%); font-weight: $fonts-light; } @@ -352,7 +352,7 @@ } &__button { - background-color: rgba($c-white,0.75); + background-color: color-mix(in srgb, var(--mf-c-white) 75%, transparent 25%); color: var(--mf-c-font-base); font-weight: $fonts-bold; @@ -381,11 +381,11 @@ font-weight: $fonts-light; &:hover { - border-bottom-color: rgba($c-font-inverse, .5); + border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } & svg { - fill: rgba($c-font-inverse, .5); + fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } } } @@ -400,11 +400,11 @@ } &__image-name { - color: rgba($c-font-inverse,.9); + color: color-mix(in srgb, var(--mf-c-font-inverse) 90%, transparent 10%); } &__image-author { - color: rgba($c-font-inverse, .5); + color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); } } @@ -416,12 +416,12 @@ } &__image-name { - color: rgba($c-font-inverse,.9); + color: color-mix(in srgb, var(--mf-c-font-inverse) 90%, transparent 10%); font-weight: $fonts-light; } &__image-author { - color: rgba($c-font-inverse, .5); + color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); font-weight: $fonts-light; } // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule diff --git a/packages/assets/scss/03-organisms/_search-box-with-links.scss b/packages/assets/scss/03-organisms/_search-box-with-links.scss index 096d23ba84..fd9c029456 100644 --- a/packages/assets/scss/03-organisms/_search-box-with-links.scss +++ b/packages/assets/scss/03-organisms/_search-box-with-links.scss @@ -96,7 +96,7 @@ &:hover, &:active, &:focus { - border-bottom-color: rgba($c-white, 0.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-white) 50%, transparent 50%); } } } diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index b627b2eab1..f9fd890e83 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -588,7 +588,7 @@ right: 0; bottom: 0; left: 0; - background-color: rgba($c-gray-darkest, 0.3); + background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 30%, transparent 70%); pointer-events: none; z-index: 99; diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index 60060f45e8..57ffce56ce 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -166,7 +166,7 @@ } &.is-current { - border-left-color: rgba($c-primary-alt, 0.5) !important; + border-left-color: color-mix(in srgb, var(--mf-c-primary-alt) 50%, transparent 50%) !important; } } diff --git a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss index 6c578376b9..b3e463fb9a 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss @@ -208,7 +208,7 @@ } .ma__toc--hierarchy__title.is-current { - border-left-color: rgba($c-primary-alt, 0.5) !important; + border-left-color: color-mix(in srgb, var(--mf-c-primary-alt) 50%, transparent 50%) !important; } } diff --git a/packages/assets/scss/03-organisms/_teaser-listing.scss b/packages/assets/scss/03-organisms/_teaser-listing.scss index c528ae9b23..28c5b107e1 100644 --- a/packages/assets/scss/03-organisms/_teaser-listing.scss +++ b/packages/assets/scss/03-organisms/_teaser-listing.scss @@ -216,7 +216,7 @@ } svg { - fill: rgba($c-font-link, 0.5); + fill: color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); } } diff --git a/packages/assets/scss/03-organisms/_transition-page.scss b/packages/assets/scss/03-organisms/_transition-page.scss index 2b6cff7d32..813cbcd419 100644 --- a/packages/assets/scss/03-organisms/_transition-page.scss +++ b/packages/assets/scss/03-organisms/_transition-page.scss @@ -41,7 +41,7 @@ .ma__transition-page { &:before { - background-color: rgba($c-primary-alt, .15); + background-color: color-mix(in srgb, var(--mf-c-primary-alt) 15%, transparent 85%); } &__icon { diff --git a/packages/assets/scss/03-organisms/_utility-panel.scss b/packages/assets/scss/03-organisms/_utility-panel.scss index f8de6848f5..deee410588 100644 --- a/packages/assets/scss/03-organisms/_utility-panel.scss +++ b/packages/assets/scss/03-organisms/_utility-panel.scss @@ -11,7 +11,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; &:nth-child(2) { padding-top: 20px; - border-top: 2px solid rgba($c-white, 0.4); + border-top: 2px solid color-mix(in srgb, var(--mf-c-white) 40%, transparent 60%); } } @@ -44,7 +44,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; cursor: pointer; font-size: 0; margin-bottom: 1.5%; - background-color: rgba($c-white, 0.2); + background-color: color-mix(in srgb, var(--mf-c-white) 20%, transparent 80%); display: flex; align-items: center; diff --git a/packages/assets/scss/04-templates/_narrow-template.scss b/packages/assets/scss/04-templates/_narrow-template.scss index 207fab9e1d..1b39f580c4 100644 --- a/packages/assets/scss/04-templates/_narrow-template.scss +++ b/packages/assets/scss/04-templates/_narrow-template.scss @@ -158,14 +158,14 @@ $narrow-template-header-height: 170px; //theme &--blue:before { - background-color: rgba($c-primary, .15); + background-color: color-mix(in srgb, var(--mf-c-primary) 15%, transparent 85%); } &--green:before { - background-color: rgba($c-primary-alt, .15); + background-color: color-mix(in srgb, var(--mf-c-primary-alt) 15%, transparent 85%); } &--yellow:before { - background-color: rgba($c-highlight, .15); + background-color: color-mix(in srgb, var(--mf-c-highlight) 15%, transparent 85%); } } diff --git a/packages/assets/scss/04-templates/_organization-details.scss b/packages/assets/scss/04-templates/_organization-details.scss index 0d62f23f7b..98a1bb4f83 100644 --- a/packages/assets/scss/04-templates/_organization-details.scss +++ b/packages/assets/scss/04-templates/_organization-details.scss @@ -35,7 +35,7 @@ left: 0.075rem; transform: skew(-30deg); width: 1.85em; - background-color: rgba($c-primary-alt, 0.5); + background-color: color-mix(in srgb, var(--mf-c-primary-alt) 50%, transparent 50%); } } diff --git a/packages/core/stories/tokens/colors/_color-display.scss b/packages/core/stories/tokens/colors/_color-display.scss index b9c16afb1f..71dfbf9ef2 100644 --- a/packages/core/stories/tokens/colors/_color-display.scss +++ b/packages/core/stories/tokens/colors/_color-display.scss @@ -49,7 +49,7 @@ font-size: $fonts-smaller; font-family: $fonts-mono; span { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/base/Colors/_index.scss b/packages/react/src/components/base/Colors/_index.scss index a9824b9ea0..bb9db1a842 100644 --- a/packages/react/src/components/base/Colors/_index.scss +++ b/packages/react/src/components/base/Colors/_index.scss @@ -47,7 +47,7 @@ font-size: $fonts-smaller; font-family: $fonts-mono; span { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/molecules/SectionLinks/_index.scss b/packages/react/src/components/molecules/SectionLinks/_index.scss index 3d9a99bb19..aa88e2b549 100644 --- a/packages/react/src/components/molecules/SectionLinks/_index.scss +++ b/packages/react/src/components/molecules/SectionLinks/_index.scss @@ -79,7 +79,7 @@ &__link { &:hover { - border-bottom-color: rgba($c-primary,.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-primary) 50%, transparent 50%); } } @@ -116,7 +116,7 @@ } svg { - fill: rgba($c-font-link,.5); + fill: color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); } a { @@ -127,7 +127,7 @@ &:hover { @media ($bp-x-small-max) { - border-bottom-color: rgba($c-font-link,.5); + border-bottom-color: color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); } } } @@ -173,7 +173,7 @@ } svg { - fill: rgba($c-font-heading,.5); + fill: color-mix(in srgb, var(--mf-c-font-heading) 50%, transparent 50%); } a { From 3aa1d7aa6f526950815b322f8f1ef22a6e786dd6 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 00:01:57 +0600 Subject: [PATCH 07/25] fix typo --- packages/assets/scss/03-organisms/_action-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index 557263e0ef..8cf90ff6d4 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -169,7 +169,7 @@ box-shadow: $box-shadow; &:hover { - background-color: color-mix(in srgb, var(--c-bg-subtle) 90%, var(--mf-c-black) 10%); + background-color: color-mix(in srgb, var(--mf-c-bg-subtle) 90%, var(--mf-c-black) 10%); a { border-bottom-color: var(--mf-c-font-link); From 58ee746a7b6b8ca324750d0db26d570f0f4aac7f Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 00:06:05 +0600 Subject: [PATCH 08/25] fix typo 1 --- packages/assets/scss/03-organisms/_callout-alert.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index f72b70b9d5..7b529a80b5 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -157,8 +157,8 @@ //c-white &--c-white &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--c-gray-dark) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--c-gray-dark) 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-white) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-gray-dark) 50%); box-shadow: $box-shadow; } From 04a2457870325d8a7dd97fbf401eeb90d2a8ee36 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 00:30:39 +0600 Subject: [PATCH 09/25] Revert "fix typo 1" This reverts commit 58ee746a7b6b8ca324750d0db26d570f0f4aac7f. --- packages/assets/scss/03-organisms/_callout-alert.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index 7b529a80b5..f72b70b9d5 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -157,8 +157,8 @@ //c-white &--c-white &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-white) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-gray-dark) 50%); + background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--c-gray-dark) 10%); + border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--c-gray-dark) 50%); box-shadow: $box-shadow; } From 3ee8ef16bdc9d115a4cbd1505025d07c9273ef10 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 00:31:02 +0600 Subject: [PATCH 10/25] Revert "fix typo" This reverts commit 3aa1d7aa6f526950815b322f8f1ef22a6e786dd6. --- packages/assets/scss/03-organisms/_action-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index 8cf90ff6d4..557263e0ef 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -169,7 +169,7 @@ box-shadow: $box-shadow; &:hover { - background-color: color-mix(in srgb, var(--mf-c-bg-subtle) 90%, var(--mf-c-black) 10%); + background-color: color-mix(in srgb, var(--c-bg-subtle) 90%, var(--mf-c-black) 10%); a { border-bottom-color: var(--mf-c-font-link); From 12612ca03a40f129226dfa8dd9ccf1bc9d4f00ee Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 00:31:24 +0600 Subject: [PATCH 11/25] Revert "update mix,rgba,darken,tint sass functions" This reverts commit 469249eae0fa030755492c3685bfd1749a2cc674. --- changelogs/DP-38077.yml | 13 --------- packages/assets/scss/00-base/_pikaday.scss | 2 +- .../assets/scss/01-atoms/_button-tag.scss | 2 +- .../scss/01-atoms/_decorative-link.scss | 12 ++++---- packages/assets/scss/01-atoms/_forms.scss | 8 +++--- .../assets/scss/01-atoms/_input-checkbox.scss | 4 +-- .../assets/scss/01-atoms/_select-box.scss | 6 ++-- packages/assets/scss/01-atoms/_video.scss | 4 +-- .../assets/scss/02-molecules/_arrow-nav.scss | 2 +- .../scss/02-molecules/_button-alert.scss | 4 +-- .../scss/02-molecules/_callout-link.scss | 20 ++++++------- .../scss/02-molecules/_callout-stats.scss | 2 +- .../scss/02-molecules/_event-teaser.scss | 2 +- .../scss/02-molecules/_featured-item.scss | 2 +- .../scss/02-molecules/_footer-links.scss | 2 +- .../scss/02-molecules/_header-tags.scss | 2 +- .../scss/02-molecules/_illustrated-link.scss | 4 +-- .../scss/02-molecules/_keyword-search.scss | 2 +- .../assets/scss/02-molecules/_map-google.scss | 2 +- .../scss/02-molecules/_map-leaflet.scss | 2 +- .../_relationship-indicators.scss | 12 ++++---- .../scss/03-organisms/_action-card.scss | 20 ++++++------- .../scss/03-organisms/_action-finder.scss | 4 +-- .../scss/03-organisms/_banner-carousel.scss | 2 +- .../assets/scss/03-organisms/_blog-feed.scss | 2 +- .../scss/03-organisms/_breadcrumbs.scss | 4 +-- .../scss/03-organisms/_callout-alert.scss | 28 +++++++++---------- .../scss/03-organisms/_callout-message.scss | 6 ++-- .../assets/scss/03-organisms/_error-page.scss | 2 +- .../scss/03-organisms/_feedback-form.scss | 2 +- .../03-organisms/_footer-with-columns.scss | 4 +-- .../assets/scss/03-organisms/_footer.scss | 2 +- .../scss/03-organisms/_header-hamburger.scss | 8 +++--- .../assets/scss/03-organisms/_header.scss | 4 +-- .../assets/scss/03-organisms/_help-tip.scss | 2 +- .../scss/03-organisms/_in-page-alert.scss | 2 +- .../03-organisms/_page-banner-legacy.scss | 6 ++-- .../scss/03-organisms/_page-flipper.scss | 2 +- .../scss/03-organisms/_person-card.scss | 2 +- .../scss/03-organisms/_search-banner.scss | 20 ++++++------- .../03-organisms/_search-box-with-links.scss | 2 +- .../assets/scss/03-organisms/_sticky-toc.scss | 2 +- .../_table-of-contents-hierarchy.scss | 2 +- .../_table-of-contents-overlay.scss | 2 +- .../scss/03-organisms/_teaser-listing.scss | 2 +- .../scss/03-organisms/_transition-page.scss | 2 +- .../scss/03-organisms/_utility-panel.scss | 4 +-- .../scss/04-templates/_narrow-template.scss | 6 ++-- .../04-templates/_organization-details.scss | 2 +- .../stories/tokens/colors/_color-display.scss | 2 +- .../src/components/base/Colors/_index.scss | 2 +- .../molecules/SectionLinks/_index.scss | 8 +++--- 52 files changed, 127 insertions(+), 140 deletions(-) delete mode 100644 changelogs/DP-38077.yml diff --git a/changelogs/DP-38077.yml b/changelogs/DP-38077.yml deleted file mode 100644 index fab204fc97..0000000000 --- a/changelogs/DP-38077.yml +++ /dev/null @@ -1,13 +0,0 @@ -Added: - - project: Assets - component: color-tokens - description: Added css variables for colors (#1978) - issue: DP-38077 - impact: Patch - -Changed: - - project: Assets, Core, Patternlab, React, Site - component: scss files - description: Changed colors to use the new css variables rather than scss variables (#1978) - issue: DP-38077 - impact: Major diff --git a/packages/assets/scss/00-base/_pikaday.scss b/packages/assets/scss/00-base/_pikaday.scss index 538d088008..40e063bf4e 100644 --- a/packages/assets/scss/00-base/_pikaday.scss +++ b/packages/assets/scss/00-base/_pikaday.scss @@ -51,7 +51,7 @@ } &:hover { - background-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-primary) 50%); + background-color: mix($c-white, $c-primary, 50%); border-radius: 0; } diff --git a/packages/assets/scss/01-atoms/_button-tag.scss b/packages/assets/scss/01-atoms/_button-tag.scss index d16ce5a62b..0aea63e790 100644 --- a/packages/assets/scss/01-atoms/_button-tag.scss +++ b/packages/assets/scss/01-atoms/_button-tag.scss @@ -11,7 +11,7 @@ margin-right: .25em; padding: 8px 11px; white-space: nowrap; - background-color: color-mix(in srgb, var(--c-font-link) 90%, transparent 10%); + background-color: mix($c-bg, $c-font-link,90%); color: var(--mf-c-font-link); font-weight: $fonts-bold; diff --git a/packages/assets/scss/01-atoms/_decorative-link.scss b/packages/assets/scss/01-atoms/_decorative-link.scss index 6ebceca43b..370c379032 100644 --- a/packages/assets/scss/01-atoms/_decorative-link.scss +++ b/packages/assets/scss/01-atoms/_decorative-link.scss @@ -27,21 +27,21 @@ } a:hover { - border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + border-bottom-color: rgba($c-font-inverse,.5); } a:focus { // important needed to overwrite the focus border color - border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%) !important; + border-bottom-color: rgba($c-font-inverse,.5) !important; } svg { - fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + fill: rgba($c-font-inverse,.5); } } &.button-link { - outline: 1px solid color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); + outline: 1px solid rgba($c-font-link, 0.5); display: inline-block; width: auto; padding: .5rem 1.8rem .5rem .8rem; @@ -49,13 +49,13 @@ &:hover, &:focus { - outline: 1px solid color-mix(in srgb, var(--mf-c-font-link) 100%, transparent 0%); + outline: 1px solid rgba($c-font-link, 1); a { border-bottom-color: transparent; svg { - fill: color-mix(in srgb, var(--mf-c-font-link) 100%, transparent 0%); + fill: rgba($c-font-link, 1); } } } diff --git a/packages/assets/scss/01-atoms/_forms.scss b/packages/assets/scss/01-atoms/_forms.scss index 5c9a6ebbb4..43ff3248f0 100644 --- a/packages/assets/scss/01-atoms/_forms.scss +++ b/packages/assets/scss/01-atoms/_forms.scss @@ -12,8 +12,8 @@ input { } .ma__form--light & { - background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); - border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); + background-color: rgba($c-bg, 0.1); + border-color: rgba($c-bd-input,.5); color: var(--mf-c-font-inverse); &.has-error { @@ -81,8 +81,8 @@ textarea { } .ma__form--light & { - background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); - border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); + background-color: rgba($c-bg, 0.1); + border-color: rgba($c-bd-input, 0.5); color: var(--mf-c-font-inverse); &.has-error { diff --git a/packages/assets/scss/01-atoms/_input-checkbox.scss b/packages/assets/scss/01-atoms/_input-checkbox.scss index da7ec73541..39ded9e8ec 100644 --- a/packages/assets/scss/01-atoms/_input-checkbox.scss +++ b/packages/assets/scss/01-atoms/_input-checkbox.scss @@ -88,8 +88,8 @@ border-color: var(--mf-c-bd-input-dark); .ma__form--light & { - background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); - border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); + background-color: rgba($c-bg, 0.1); + border-color: rgba($c-bd-input,.5); } } } diff --git a/packages/assets/scss/01-atoms/_select-box.scss b/packages/assets/scss/01-atoms/_select-box.scss index a99d720314..b6964fe721 100644 --- a/packages/assets/scss/01-atoms/_select-box.scss +++ b/packages/assets/scss/01-atoms/_select-box.scss @@ -98,8 +98,8 @@ border-color: var(--mf-c-bd-input); .ma__form--light & { - background-color: color-mix(in srgb, var(--mf-c-bg) 10%, transparent 90%); - border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); + background-color: rgba($c-bg,.1); + border-color: rgba($c-bd-input,.5); } } @@ -111,7 +111,7 @@ border-color: var(--mf-c-bd-input); .ma__form--light & { - border-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); + border-color: rgba($c-bd-input,.5); } } diff --git a/packages/assets/scss/01-atoms/_video.scss b/packages/assets/scss/01-atoms/_video.scss index 764f1a9c99..c83838181a 100644 --- a/packages/assets/scss/01-atoms/_video.scss +++ b/packages/assets/scss/01-atoms/_video.scss @@ -12,7 +12,7 @@ padding: 13px; position: relative; padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px - background-color: color-mix(in srgb, var(--mf-c-primary) 10%, transparent 90%); + background-color: rgba($c-primary,.1); @media ($bp-large-min) { padding-bottom: 12px + 32px + 13px; @@ -118,7 +118,7 @@ // Backward Compatible - had to add the --new as a variant for the new styling .ma__video:not(.ma__video--new) { - background-color: color-mix(in srgb, var(--mf-c-primary) 10%, transparent 90%); + background-color: rgba($c-primary,.1); } // Override style for .ma__rich-text h2:first-child:not(.sticky-toc-jump-target). diff --git a/packages/assets/scss/02-molecules/_arrow-nav.scss b/packages/assets/scss/02-molecules/_arrow-nav.scss index 8c82e06914..e95c3d8e4c 100644 --- a/packages/assets/scss/02-molecules/_arrow-nav.scss +++ b/packages/assets/scss/02-molecules/_arrow-nav.scss @@ -99,7 +99,7 @@ .ma__arrow-nav { &__title { - color: color-mix(in srgb, var(--mf-c-font-link) 80%, transparent 20%); + color: rgba($c-font-link, .8); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/02-molecules/_button-alert.scss b/packages/assets/scss/02-molecules/_button-alert.scss index 8c59384c2d..0cc81b9dbb 100644 --- a/packages/assets/scss/02-molecules/_button-alert.scss +++ b/packages/assets/scss/02-molecules/_button-alert.scss @@ -27,7 +27,7 @@ transform-origin: 65% 65%; transition: transform .5s; width: 8px; - border-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + border-color: rgba($c-font-inverse,.5); } // If the parent of the button-alert is an open accordion, then flip the arrow up. @@ -51,7 +51,7 @@ &:hover { transition: background-color .4s, color .4s, border .4s, fill .4s; - background-color: color-mix(in srgb, var(--mf-c-font-dark) 75%, transparent 25%); + background-color: rgba($c-font-dark, 0.75); } &__hide { diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss index 0839c9e8d1..c6485e6f85 100644 --- a/packages/assets/scss/02-molecules/_callout-link.scss +++ b/packages/assets/scss/02-molecules/_callout-link.scss @@ -9,8 +9,8 @@ flex-flow: column wrap; justify-content: center; padding: 15px 20px; - background-color: color-mix(in srgb, var(--mf-c-bg) 90%, var(--mf-c-font-link) 10%); - border-color: var(--mf-c-link); + background-color: mix($c-bg, $c-font-link,90%); + border-color: $c-link; box-shadow: $box-shadow; text-decoration: none; @@ -22,7 +22,7 @@ &:focus { .ma__callout-link__text { - border-bottom-color: var(--mf-c-link); + border-bottom-color: $c-link; } } @@ -54,7 +54,7 @@ svg { @include ma-link-arrow; - fill: var(--mf-c-font-link); + fill: $c-font-link; } } @@ -63,7 +63,7 @@ padding-top: 10px; font-size: $fonts-medium; font-weight: $fonts-light; - color: color-mix(in srgb, var(--mf-c-font-link) 100%, transparent 0%); + color: rgba($c-font-link,1); @media ($bp-x-small-min) { display: flex; @@ -73,7 +73,7 @@ } &__eyebrow { - background-color: var(--mf-c-bg-section); + background-color: $c-bg-section; font-weight: $fonts-bold; } @@ -83,7 +83,7 @@ display: inline-flex; justify-content: space-between; margin-bottom: 10px; - color: var(--mf-c-font-detail); + color: $c-font-detail; @media ($bp-small-min) { margin-bottom: 15px; @@ -102,13 +102,13 @@ line-height: 1; padding-top: 15px; display: flex; - color: var(--mf-c-font-base); + color: $c-font-base; font-weight: $fonts-bold; } &--white { - background-color: var(--mf-c-bg); - border-color: color-mix(in srgb, var(--mf-c-white) 70%, var(--mf-c-font-detail) 30%); + background-color: $c-bg; + border-color: mix($c-white, $c-font-detail,70%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/02-molecules/_callout-stats.scss b/packages/assets/scss/02-molecules/_callout-stats.scss index 949149e430..240e02db03 100644 --- a/packages/assets/scss/02-molecules/_callout-stats.scss +++ b/packages/assets/scss/02-molecules/_callout-stats.scss @@ -72,7 +72,7 @@ font-weight: 900; &:before { - background-color: color-mix(in srgb, var(--mf-c-primary-alt) 20%, transparent 80%); + background-color: rgba($c-primary-alt,.2); } &__stat { diff --git a/packages/assets/scss/02-molecules/_event-teaser.scss b/packages/assets/scss/02-molecules/_event-teaser.scss index 15356fd3cd..5fa549fb1e 100644 --- a/packages/assets/scss/02-molecules/_event-teaser.scss +++ b/packages/assets/scss/02-molecules/_event-teaser.scss @@ -137,7 +137,7 @@ } &__graphic { - background-color: color-mix(in srgb, var(--mf-c-white) 80%, var(--mf-c-primary-alt) 20%); + background-color: mix($c-white, $c-primary-alt, 80%); } &__spacer { diff --git a/packages/assets/scss/02-molecules/_featured-item.scss b/packages/assets/scss/02-molecules/_featured-item.scss index d28ea2542b..8cacd75bbe 100644 --- a/packages/assets/scss/02-molecules/_featured-item.scss +++ b/packages/assets/scss/02-molecules/_featured-item.scss @@ -20,7 +20,7 @@ } &:hover:before { - background-color: color-mix(in srgb, var(--mf-c-black) 10%, transparent 90%); + background-color: rgba($c-black,0.1); } &:hover span { diff --git a/packages/assets/scss/02-molecules/_footer-links.scss b/packages/assets/scss/02-molecules/_footer-links.scss index 5ea227c833..7fdf6773fa 100644 --- a/packages/assets/scss/02-molecules/_footer-links.scss +++ b/packages/assets/scss/02-molecules/_footer-links.scss @@ -39,7 +39,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: color-mix(in srgb, var(--mf-c-font-dark) 50%, transparent 50%); + border-bottom-color: rgba($c-font-dark,.5); } } } diff --git a/packages/assets/scss/02-molecules/_header-tags.scss b/packages/assets/scss/02-molecules/_header-tags.scss index 5c95428d0d..b551bf4971 100644 --- a/packages/assets/scss/02-molecules/_header-tags.scss +++ b/packages/assets/scss/02-molecules/_header-tags.scss @@ -123,7 +123,7 @@ &__terms { a { - border-color: color-mix(in srgb, var(--mf-c-font-link) 20%, transparent 80%); + border-color: rgba($c-font-link,.2); font-weight: $fonts-normal; &:hover { diff --git a/packages/assets/scss/02-molecules/_illustrated-link.scss b/packages/assets/scss/02-molecules/_illustrated-link.scss index 608555e85e..aeb142de85 100644 --- a/packages/assets/scss/02-molecules/_illustrated-link.scss +++ b/packages/assets/scss/02-molecules/_illustrated-link.scss @@ -91,11 +91,11 @@ $illustrated-link-image-width: 130px; } &__label { - color: color-mix(in srgb, var(--mf-c-font-link) 90%, transparent 10%);// with background color, #e5ecf3 + color: rgba($c-font-link,.9);// with background color, #e5ecf3 } .ma__action-finder__items--all &__label { - color: color-mix(in srgb, var(--mf-c-font-link) 80%, transparent 20%);// with background color, #ffffff + color: rgba($c-font-link,.8);// with background color, #ffffff } &__title { diff --git a/packages/assets/scss/02-molecules/_keyword-search.scss b/packages/assets/scss/02-molecules/_keyword-search.scss index 2d459a5333..9cd2fc7973 100644 --- a/packages/assets/scss/02-molecules/_keyword-search.scss +++ b/packages/assets/scss/02-molecules/_keyword-search.scss @@ -93,7 +93,7 @@ $header-search-height: 46px; } .ma__form--light .ma__button-search { - border-left-color: color-mix(in srgb, var(--mf-c-bd-input) 50%, transparent 50%); + border-left-color: rgba($c-bd-input,.5); &:hover { border-left-color: var(--mf-c-primary-alt); diff --git a/packages/assets/scss/02-molecules/_map-google.scss b/packages/assets/scss/02-molecules/_map-google.scss index 007bd1e3ff..b3c2c21b5b 100644 --- a/packages/assets/scss/02-molecules/_map-google.scss +++ b/packages/assets/scss/02-molecules/_map-google.scss @@ -27,7 +27,7 @@ color: var(--mf-c-font-inverse); svg { - fill: color-mix(in srgb, var(--mf-c-white) 70%, transparent 30%); + fill: rgba($c-white, 0.7); width: 12px; height: 12px; margin-bottom: -1px; diff --git a/packages/assets/scss/02-molecules/_map-leaflet.scss b/packages/assets/scss/02-molecules/_map-leaflet.scss index 99dc29c17e..6c503354c9 100644 --- a/packages/assets/scss/02-molecules/_map-leaflet.scss +++ b/packages/assets/scss/02-molecules/_map-leaflet.scss @@ -116,7 +116,7 @@ color: var(--mf-c-font-inverse); svg { - fill: color-mix(in srgb, var(--mf-c-white) 70%, transparent 30%); + fill: rgba($c-white, 0.7); width: 12px; height: 12px; margin-bottom: -1px; diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index 9a8fb1e192..fcb663a5cb 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -159,12 +159,12 @@ a { color: var(--mf-c-primary); - box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-bay-blue-lighter); + box-shadow: inset 0 0 $c-white, inset 0px -1px $c-bay-blue-lighter; // border-bottom: 1px solid $c-bay-blue-lighter; &:hover { - box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-bay-blue-30-tint); + box-shadow: inset 0 0 $c-white, inset 0px -2px $c-bay-blue-30-tint; // border-bottom: 2px solid $c-bay-blue-30-tint; } } @@ -193,10 +193,10 @@ a { color: var(--mf-c-primary-alt); - box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px color-mix(in srgb, var(--mf-c-primary-alt) 40%, transparent 60%);// This can be replaced with border-bottom. See L.163. + box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4);// This can be replaced with border-bottom. See L.163. &:hover { - box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px color-mix(in srgb, var(--mf-c-primary-alt) 70%, transparent 30%);// This can be replaced with border-bottom. See L.163. + box-shadow: inset 0 0 $c-white, inset 0px -2px rgba($c-primary-alt, 0.7);// This can be replaced with border-bottom. See L.163. } } @@ -251,10 +251,10 @@ a { color: var(--mf-c-primary-alt); - box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px color-mix(in srgb, var(--mf-c-primary-alt) 40%, transparent 60%); + box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4); &:hover { - box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px color-mix(in srgb, var(--mf-c-primary-alt) 70%, transparent 30%); + box-shadow: inset 0 0 $c-white, inset 0px -2px rgba($c-primary-alt, 0.7); } } } diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index 557263e0ef..ae8d71c59b 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -169,7 +169,7 @@ box-shadow: $box-shadow; &:hover { - background-color: color-mix(in srgb, var(--c-bg-subtle) 90%, var(--mf-c-black) 10%); + background-color: darken($c-bg-subtle, 10%); a { border-bottom-color: var(--mf-c-font-link); @@ -180,7 +180,7 @@ background-color: var(--mf-c-primary); &:hover { - background-color: color-mix(in srgb, var(--mf-c-primary) 80%, transparent 20%); + background-color: rgba($c-primary,.8); a { border-bottom-color: var(--mf-c-font-inverse); @@ -192,7 +192,7 @@ background-color: var(--mf-c-primary-alt); &:hover { - background-color: color-mix(in srgb, var(--mf-c-primary-alt) 80%, transparent 20%); + background-color: rgba($c-primary-alt,.8); a { border-bottom-color: var(--mf-c-font-inverse); @@ -204,7 +204,7 @@ background-color: var(--mf-c-gray-dark); &:hover { - background-color: color-mix(in srgb, var(--mf-c-gray-dark) 80%, transparent 20%); + background-color: rgba($c-gray-dark,.8); a { border-bottom-color: var(--mf-c-font-inverse); @@ -217,7 +217,7 @@ svg, svg > g { - fill: color-mix(in srgb, var(--mf-c-font-medium) 70%, transparent 30%); + fill: rgba($c-font-medium,.7); } } @@ -227,20 +227,20 @@ svg, svg > g { - fill: color-mix(in srgb, var(--mf-c-font-inverse) 70%, transparent 30%); + fill: rgba($c-font-inverse,.7); } } &__category { - color: color-mix(in srgb, var(--mf-c-font-base) 85%, transparent 15%); + color: rgba($c-font-base,.85); font-weight: $fonts-bold; } &__item--blue &__category, &__item--green &__category, &__item--dark-gray &__category { - color: color-mix(in srgb, var(--mf-c-font-inverse) 80%, transparent 20%); - text-shadow: 0 0.125rem 0.125rem color-mix(in srgb, var(--mf-c-black) 50%, transparent 50%); + color: rgba($c-font-inverse,.8); + text-shadow: 0 0.125rem 0.125rem rgba($c-black, 0.5); } &__link { @@ -267,7 +267,7 @@ } svg { - fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + fill: rgba(var(--mf-c-font-inverse), .5); } } } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 0b65d20c81..265ce34d88 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -234,12 +234,12 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); color: var(--mf-c-font-inverse); &:hover { - border-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + border-color: rgba($c-font-inverse, .5); } } svg { - fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + fill: rgba($c-font-inverse, .5); } } } diff --git a/packages/assets/scss/03-organisms/_banner-carousel.scss b/packages/assets/scss/03-organisms/_banner-carousel.scss index ed493b1253..f18aee2ae2 100644 --- a/packages/assets/scss/03-organisms/_banner-carousel.scss +++ b/packages/assets/scss/03-organisms/_banner-carousel.scss @@ -126,7 +126,7 @@ } &:before { - background-color: color-mix(in srgb, var(--mf-c-primary) 50%, transparent 50%); + background-color: rgba($c-primary,.5); } &:hover:before { diff --git a/packages/assets/scss/03-organisms/_blog-feed.scss b/packages/assets/scss/03-organisms/_blog-feed.scss index a03992fa79..f5e62adf9f 100644 --- a/packages/assets/scss/03-organisms/_blog-feed.scss +++ b/packages/assets/scss/03-organisms/_blog-feed.scss @@ -112,7 +112,7 @@ } &__date { - background-color: color-mix(in srgb, var(--mf-c-white) 80%, transparent 20%); + background-color: rgba($c-white,.8); color: var(--mf-c-font-base); font-weight: 900; } diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss index 5e5fb5a1d9..bbdd9d1e33 100644 --- a/packages/assets/scss/03-organisms/_breadcrumbs.scss +++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss @@ -260,13 +260,13 @@ $breadcrumbs-scrollbar-height: 12px; /* Track */ &::-webkit-scrollbar-track { - background: color-mix(in srgb, var(--mf-c-granite-gray) 80%, transparent 20%); + background: mix($c-bg, $c-granite-gray, 80); } /* Handle */ &::-webkit-scrollbar-thumb { - background: color-mix(in srgb, var(--mf-c-granite-gray) 50%, transparent 50%); + background: mix($c-bg, $c-granite-gray, 50); } } } diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index f72b70b9d5..ec69180e60 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -84,8 +84,8 @@ //default &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-warning) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-warning) 50%); + background-color: mix($c-white, $c-warning, 90%); + border-color: mix($c-white, $c-warning, 50%); box-shadow: $box-shadow; } @@ -98,19 +98,19 @@ font-weight: bold; svg { - fill: color-mix(in srgb, var(--mf-c-font-dark) 50%, transparent 50%); + fill: rgba($c-font-dark,.5); } } &:hover &__link span { - border-color: color-mix(in srgb, var(--mf-c-font-base) 50%, transparent 50%); + border-color: rgba($c-font-base,.5); } //c-primary &--c-primary &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-primary) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-primary) 50%); + background-color: mix($c-white, $c-primary, 90%); + border-color: mix($c-white, $c-primary, 50%); box-shadow: $box-shadow; } @@ -121,8 +121,8 @@ //c-primary-alt &--c-primary-alt &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-primary-alt) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-primary-alt) 50%); + background-color: mix($c-white, $c-primary-alt, 90%); + border-color: mix($c-white, $c-primary-alt, 50%); box-shadow: $box-shadow; } @@ -133,8 +133,8 @@ //c-gray-dark &--c-gray-dark &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-gray-dark) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-gray-dark) 50%); + background-color: mix($c-white, $c-gray-dark, 90%); + border-color: mix($c-white, $c-gray-dark, 50%); box-shadow: $box-shadow; } @@ -145,8 +145,8 @@ //c-error-red &--c-error-red &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-error-red) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-error-red) 50%); + background-color: mix($c-white, $c-error-red, 90%); + border-color: mix($c-white, $c-error-red, 50%); box-shadow: $box-shadow; } @@ -157,8 +157,8 @@ //c-white &--c-white &__content { - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--c-gray-dark) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--c-gray-dark) 50%); + background-color: mix($c-white, $c-white, 90%); + border-color: mix($c-white, $c-gray-dark, 50%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/03-organisms/_callout-message.scss b/packages/assets/scss/03-organisms/_callout-message.scss index ed385fae49..111fee47d0 100644 --- a/packages/assets/scss/03-organisms/_callout-message.scss +++ b/packages/assets/scss/03-organisms/_callout-message.scss @@ -20,8 +20,8 @@ display:block; width: 100%; padding: 15px 20px; - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-font-link) 10%); - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-font-link) 50%); + background-color: mix($c-white, $c-font-link,90%); + border-color: mix($c-white, $c-font-link,50%); box-shadow: $box-shadow; @media ($bp-small-min) { @@ -39,7 +39,7 @@ &--white { background-color: var(--mf-c-bg); - border-color: color-mix(in srgb, var(--mf-c-white) 70%, var(--mf-c-font-detail) 30%); + border-color: mix($c-white, $c-font-detail,70%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss index f5d9a53436..f91d135d4d 100644 --- a/packages/assets/scss/03-organisms/_error-page.scss +++ b/packages/assets/scss/03-organisms/_error-page.scss @@ -46,7 +46,7 @@ .ma__error-page { &:before { - background-color: color-mix(in srgb, var(--mf-c-warning) 15%, transparent 85%); + background-color: rgba($c-warning, .15); } &__label { diff --git a/packages/assets/scss/03-organisms/_feedback-form.scss b/packages/assets/scss/03-organisms/_feedback-form.scss index 8c4caf3a7f..d1d4f22166 100644 --- a/packages/assets/scss/03-organisms/_feedback-form.scss +++ b/packages/assets/scss/03-organisms/_feedback-form.scss @@ -167,7 +167,7 @@ $feedback-form-bp-min: "min-width: 751px"; .ma__feedback-form { &__overlay { - background-color: color-mix(in srgb, var(--mf-c-black) 60%, transparent 40%); + background-color: rgba($c-black,.6); color: var(--mf-c-font-inverse); } diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index 0a5a893f44..fbcc9bd0ed 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -123,10 +123,10 @@ &__back2top { @include ma-button("outline",$c-primary); - background-color: color-mix(in srgb, var(--mf-c-white) 90%, transparent 10%); + background-color: rgba($c-white, .9); svg { - fill: color-mix(in srgb, var(--mf-c-primary) 50%, transparent 50%); + fill: rgba($c-primary, .5); } &:hover { diff --git a/packages/assets/scss/03-organisms/_footer.scss b/packages/assets/scss/03-organisms/_footer.scss index 91aeac0f57..e3cea7f170 100644 --- a/packages/assets/scss/03-organisms/_footer.scss +++ b/packages/assets/scss/03-organisms/_footer.scss @@ -63,7 +63,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: color-mix(in srgb, var(--mf-c-font-dark) 50%, transparent 50%); + border-bottom-color: rgba($c-font-dark,.5); } } } diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index ee2617db23..17d9d09dfc 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -18,7 +18,7 @@ body.show-menu { visibility: hidden; opacity: 0; transition: visibility 0s 0.6s, opacity 0.6s linear; - background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 40%, transparent 60%); + background-color: rgba($c-gray-darkest, 0.4); top: 0; z-index: $z-overlay-shade;// Lay over the alerts. @@ -36,7 +36,7 @@ body.show-menu { visibility: hidden; opacity: 0; transition: visibility 0s 0.6s, opacity 0.6s linear; - background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 40%, transparent 60%); + background-color: rgba($c-gray-darkest, 0.4); top: 0px; z-index: $z-overlay-shade; @@ -685,8 +685,8 @@ body.show-menu { top: 0; white-space: nowrap; font-weight: $fonts-semibold; - background-color: color-mix(in srgb, var(--mf-c-font-link) 90%, var(--mf-c-white) 10%); - border-color: color-mix(in srgb, var(--mf-c-font-link) 50%, var(--mf-c-white) 50%); + background-color: tint($c-font-link, 90%); + border-color: tint($c-font-link, 50%); box-shadow: $box-shadow; color: var(--mf-c-font-link); font-size: $fonts-medium; diff --git a/packages/assets/scss/03-organisms/_header.scss b/packages/assets/scss/03-organisms/_header.scss index 1a87476031..9523b37356 100644 --- a/packages/assets/scss/03-organisms/_header.scss +++ b/packages/assets/scss/03-organisms/_header.scss @@ -480,8 +480,8 @@ body { a { font-weight: $fonts-normal; - background-color: color-mix(in srgb, var(--mf-c-white) 90%, var(--mf-c-font-link) 10%);; - border-color: color-mix(in srgb, var(--mf-c-white) 50%, var(--mf-c-font-link) 50%); + background-color: mix($c-white, $c-font-link, 90%); + border-color: mix($c-white, $c-font-link, 50%); box-shadow: $box-shadow; color: var(--mf-c-font-link); font-size: $fonts-medium; diff --git a/packages/assets/scss/03-organisms/_help-tip.scss b/packages/assets/scss/03-organisms/_help-tip.scss index baabf42299..b1e0de7b45 100644 --- a/packages/assets/scss/03-organisms/_help-tip.scss +++ b/packages/assets/scss/03-organisms/_help-tip.scss @@ -79,7 +79,7 @@ $border-width: 1px; color: var(--mf-c-font-inverse); svg { - fill: color-mix(in srgb, var(--mf-c-white) 70%, var(--mf-c-font-link) 30%);; + fill: mix($c-white, $c-font-link, 70%); } } diff --git a/packages/assets/scss/03-organisms/_in-page-alert.scss b/packages/assets/scss/03-organisms/_in-page-alert.scss index 48f5f155aa..218c8b3d52 100644 --- a/packages/assets/scss/03-organisms/_in-page-alert.scss +++ b/packages/assets/scss/03-organisms/_in-page-alert.scss @@ -39,7 +39,7 @@ color: var(--mf-c-font-base); svg { - fill: color-mix(in srgb, var(--mf-c-font-base) 50%, transparent 50%); + fill: rgba($c-font-base, .5); } } } diff --git a/packages/assets/scss/03-organisms/_page-banner-legacy.scss b/packages/assets/scss/03-organisms/_page-banner-legacy.scss index 06d02c4a21..becea2e8f0 100644 --- a/packages/assets/scss/03-organisms/_page-banner-legacy.scss +++ b/packages/assets/scss/03-organisms/_page-banner-legacy.scss @@ -133,7 +133,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); color: var(--mf-c-font-inverse); &:hover { - border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + border-bottom-color: rgba($c-font-inverse, 0.5); } svg { @@ -207,7 +207,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); .ma__page-banner-legacy__container { &:before { - background-color: color-mix(in srgb, var(--mf-c-primary-alt) 80%, transparent 20%); + background-color: rgba($c-primary-alt, 0.8); } } @@ -221,7 +221,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); align-items: stretch; &:before { - background-color: color-mix(in srgb, var(--mf-c-primary) 80%, transparent 20%); + background-color: rgba($c-primary, 0.8); } } } diff --git a/packages/assets/scss/03-organisms/_page-flipper.scss b/packages/assets/scss/03-organisms/_page-flipper.scss index e7cd7af88e..fab5f1121d 100644 --- a/packages/assets/scss/03-organisms/_page-flipper.scss +++ b/packages/assets/scss/03-organisms/_page-flipper.scss @@ -88,7 +88,7 @@ } &__context-label { - color: rcolor-mix(in srgb, var(--mf-c-font-link) 80%, transparent 20%); + color: rgba($c-font-link, .8); } &__blank, diff --git a/packages/assets/scss/03-organisms/_person-card.scss b/packages/assets/scss/03-organisms/_person-card.scss index b0c3d3dd65..fb2339f180 100644 --- a/packages/assets/scss/03-organisms/_person-card.scss +++ b/packages/assets/scss/03-organisms/_person-card.scss @@ -85,7 +85,7 @@ @media ($bp-large-extended-min) { border: 1px solid var(--mf-c-primary-alt); - box-shadow: 4px 2px 5px 0px color-mix(in srgb, var(--mf-c-gray-darkest) 30%, transparent 70%); + box-shadow: 4px 2px 5px 0px rgba($c-gray-darkest,0.3); } &::before, diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss index 939d871fe4..1f7ed5acf6 100644 --- a/packages/assets/scss/03-organisms/_search-banner.scss +++ b/packages/assets/scss/03-organisms/_search-banner.scss @@ -181,7 +181,7 @@ &__links { margin-left: auto; margin-right: auto; - background-color: color-mix(in srgb, var(--mf-c-black) 50%, transparent 50%); + background-color: rgba($c-black, 0.5); padding: 10px 20px; @media ($bp-medium-min) { @@ -284,7 +284,7 @@ position: relative; &:after { - background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 60%, transparent 40%); + background-color: rgba($c-gray-darkest, .6); } &__container { @@ -322,7 +322,7 @@ &__input { input { - background-color: color-mix(in srgb, var(--mf-c-white) 75%, transparent 25%); + background-color: rgba($c-white,0.75); font-weight: $fonts-light; } @@ -352,7 +352,7 @@ } &__button { - background-color: color-mix(in srgb, var(--mf-c-white) 75%, transparent 25%); + background-color: rgba($c-white,0.75); color: var(--mf-c-font-base); font-weight: $fonts-bold; @@ -381,11 +381,11 @@ font-weight: $fonts-light; &:hover { - border-bottom-color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + border-bottom-color: rgba($c-font-inverse, .5); } & svg { - fill: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + fill: rgba($c-font-inverse, .5); } } } @@ -400,11 +400,11 @@ } &__image-name { - color: color-mix(in srgb, var(--mf-c-font-inverse) 90%, transparent 10%); + color: rgba($c-font-inverse,.9); } &__image-author { - color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + color: rgba($c-font-inverse, .5); } } @@ -416,12 +416,12 @@ } &__image-name { - color: color-mix(in srgb, var(--mf-c-font-inverse) 90%, transparent 10%); + color: rgba($c-font-inverse,.9); font-weight: $fonts-light; } &__image-author { - color: color-mix(in srgb, var(--mf-c-font-inverse) 50%, transparent 50%); + color: rgba($c-font-inverse, .5); font-weight: $fonts-light; } // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule diff --git a/packages/assets/scss/03-organisms/_search-box-with-links.scss b/packages/assets/scss/03-organisms/_search-box-with-links.scss index fd9c029456..096d23ba84 100644 --- a/packages/assets/scss/03-organisms/_search-box-with-links.scss +++ b/packages/assets/scss/03-organisms/_search-box-with-links.scss @@ -96,7 +96,7 @@ &:hover, &:active, &:focus { - border-bottom-color: color-mix(in srgb, var(--mf-c-white) 50%, transparent 50%); + border-bottom-color: rgba($c-white, 0.5); } } } diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index f9fd890e83..b627b2eab1 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -588,7 +588,7 @@ right: 0; bottom: 0; left: 0; - background-color: color-mix(in srgb, var(--mf-c-gray-darkest) 30%, transparent 70%); + background-color: rgba($c-gray-darkest, 0.3); pointer-events: none; z-index: 99; diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index 57ffce56ce..60060f45e8 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -166,7 +166,7 @@ } &.is-current { - border-left-color: color-mix(in srgb, var(--mf-c-primary-alt) 50%, transparent 50%) !important; + border-left-color: rgba($c-primary-alt, 0.5) !important; } } diff --git a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss index b3e463fb9a..6c578376b9 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss @@ -208,7 +208,7 @@ } .ma__toc--hierarchy__title.is-current { - border-left-color: color-mix(in srgb, var(--mf-c-primary-alt) 50%, transparent 50%) !important; + border-left-color: rgba($c-primary-alt, 0.5) !important; } } diff --git a/packages/assets/scss/03-organisms/_teaser-listing.scss b/packages/assets/scss/03-organisms/_teaser-listing.scss index 28c5b107e1..c528ae9b23 100644 --- a/packages/assets/scss/03-organisms/_teaser-listing.scss +++ b/packages/assets/scss/03-organisms/_teaser-listing.scss @@ -216,7 +216,7 @@ } svg { - fill: color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); + fill: rgba($c-font-link, 0.5); } } diff --git a/packages/assets/scss/03-organisms/_transition-page.scss b/packages/assets/scss/03-organisms/_transition-page.scss index 813cbcd419..2b6cff7d32 100644 --- a/packages/assets/scss/03-organisms/_transition-page.scss +++ b/packages/assets/scss/03-organisms/_transition-page.scss @@ -41,7 +41,7 @@ .ma__transition-page { &:before { - background-color: color-mix(in srgb, var(--mf-c-primary-alt) 15%, transparent 85%); + background-color: rgba($c-primary-alt, .15); } &__icon { diff --git a/packages/assets/scss/03-organisms/_utility-panel.scss b/packages/assets/scss/03-organisms/_utility-panel.scss index deee410588..f8de6848f5 100644 --- a/packages/assets/scss/03-organisms/_utility-panel.scss +++ b/packages/assets/scss/03-organisms/_utility-panel.scss @@ -11,7 +11,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; &:nth-child(2) { padding-top: 20px; - border-top: 2px solid color-mix(in srgb, var(--mf-c-white) 40%, transparent 60%); + border-top: 2px solid rgba($c-white, 0.4); } } @@ -44,7 +44,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; cursor: pointer; font-size: 0; margin-bottom: 1.5%; - background-color: color-mix(in srgb, var(--mf-c-white) 20%, transparent 80%); + background-color: rgba($c-white, 0.2); display: flex; align-items: center; diff --git a/packages/assets/scss/04-templates/_narrow-template.scss b/packages/assets/scss/04-templates/_narrow-template.scss index 1b39f580c4..207fab9e1d 100644 --- a/packages/assets/scss/04-templates/_narrow-template.scss +++ b/packages/assets/scss/04-templates/_narrow-template.scss @@ -158,14 +158,14 @@ $narrow-template-header-height: 170px; //theme &--blue:before { - background-color: color-mix(in srgb, var(--mf-c-primary) 15%, transparent 85%); + background-color: rgba($c-primary, .15); } &--green:before { - background-color: color-mix(in srgb, var(--mf-c-primary-alt) 15%, transparent 85%); + background-color: rgba($c-primary-alt, .15); } &--yellow:before { - background-color: color-mix(in srgb, var(--mf-c-highlight) 15%, transparent 85%); + background-color: rgba($c-highlight, .15); } } diff --git a/packages/assets/scss/04-templates/_organization-details.scss b/packages/assets/scss/04-templates/_organization-details.scss index 98a1bb4f83..0d62f23f7b 100644 --- a/packages/assets/scss/04-templates/_organization-details.scss +++ b/packages/assets/scss/04-templates/_organization-details.scss @@ -35,7 +35,7 @@ left: 0.075rem; transform: skew(-30deg); width: 1.85em; - background-color: color-mix(in srgb, var(--mf-c-primary-alt) 50%, transparent 50%); + background-color: rgba($c-primary-alt, 0.5); } } diff --git a/packages/core/stories/tokens/colors/_color-display.scss b/packages/core/stories/tokens/colors/_color-display.scss index 71dfbf9ef2..b9c16afb1f 100644 --- a/packages/core/stories/tokens/colors/_color-display.scss +++ b/packages/core/stories/tokens/colors/_color-display.scss @@ -49,7 +49,7 @@ font-size: $fonts-smaller; font-family: $fonts-mono; span { - background-color: var(--mf-c-gray-lightest); + background-color: $c-gray-lightest; padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/base/Colors/_index.scss b/packages/react/src/components/base/Colors/_index.scss index bb9db1a842..a9824b9ea0 100644 --- a/packages/react/src/components/base/Colors/_index.scss +++ b/packages/react/src/components/base/Colors/_index.scss @@ -47,7 +47,7 @@ font-size: $fonts-smaller; font-family: $fonts-mono; span { - background-color: var(--mf-c-gray-lightest); + background-color: $c-gray-lightest; padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/molecules/SectionLinks/_index.scss b/packages/react/src/components/molecules/SectionLinks/_index.scss index aa88e2b549..3d9a99bb19 100644 --- a/packages/react/src/components/molecules/SectionLinks/_index.scss +++ b/packages/react/src/components/molecules/SectionLinks/_index.scss @@ -79,7 +79,7 @@ &__link { &:hover { - border-bottom-color: color-mix(in srgb, var(--mf-c-primary) 50%, transparent 50%); + border-bottom-color: rgba($c-primary,.5); } } @@ -116,7 +116,7 @@ } svg { - fill: color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); + fill: rgba($c-font-link,.5); } a { @@ -127,7 +127,7 @@ &:hover { @media ($bp-x-small-max) { - border-bottom-color: color-mix(in srgb, var(--mf-c-font-link) 50%, transparent 50%); + border-bottom-color: rgba($c-font-link,.5); } } } @@ -173,7 +173,7 @@ } svg { - fill: color-mix(in srgb, var(--mf-c-font-heading) 50%, transparent 50%); + fill: rgba($c-font-heading,.5); } a { From 720010e48fd0251b9dd422459acbceea4d855350 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 03:39:23 +0600 Subject: [PATCH 12/25] convert some more colors --- .../00-base/mixins/_ma-emergency-header.scss | 2 +- .../scss/01-atoms/_button-with-icon.scss | 36 +++++++++---------- packages/assets/scss/01-atoms/_buttons.scss | 12 +++---- .../scss/02-molecules/_brand-banner.scss | 8 ++--- .../scss/02-molecules/_callout-link.scss | 14 ++++---- .../scss/02-molecules/_emergency-alert.scss | 8 ++--- .../scss/02-molecules/_emergency-header.scss | 4 +-- .../_relationship-indicators.scss | 4 +-- .../scss/03-organisms/_campaign-video.scss | 6 ++-- .../scss/03-organisms/_emergency-alerts.scss | 8 ++--- .../scss/03-organisms/_key-message.scss | 4 +-- .../scss/03-organisms/_page-banner.scss | 4 +-- .../stories/tokens/colors/_color-display.scss | 2 +- .../src/components/base/Colors/_index.scss | 2 +- 14 files changed, 57 insertions(+), 57 deletions(-) diff --git a/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss b/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss index 5d34f17107..5d6ec12039 100644 --- a/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss +++ b/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss @@ -20,7 +20,7 @@ border-right-color: rgba($c-font-base,.3); svg { - fill: $c-font-base; + fill: var(--mf-c-font-base); } } @else { color: var(--mf-c-font-inverse); diff --git a/packages/assets/scss/01-atoms/_button-with-icon.scss b/packages/assets/scss/01-atoms/_button-with-icon.scss index e885c6dbf2..99bcdb978b 100644 --- a/packages/assets/scss/01-atoms/_button-with-icon.scss +++ b/packages/assets/scss/01-atoms/_button-with-icon.scss @@ -19,8 +19,8 @@ $quaternary-colors: ( .ma__button-icon { - background-color: $c-bg; - border: 2px solid $c-gray-light; + background-color: var(--mf-c-bg); + border: 2px solid var(--mf-c-gray-light); display: inline-flex; align-items: center; font-weight: $fonts-bold; @@ -29,7 +29,7 @@ $quaternary-colors: ( text-transform: uppercase; transition: background-color .4s, color .4s, border .4s, fill .4s; white-space: nowrap; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); min-height: 46px; font-size: $fonts-xsmall; @@ -38,7 +38,7 @@ $quaternary-colors: ( @if $c == $c-highlight { border-color: $c; - color: $c-font-base + color: var(--mf-c-font-base) } @else { color: $c; } @@ -79,7 +79,7 @@ $quaternary-colors: ( } & > svg { - fill: $c-gray-dark; + fill: var(--mf-c-gray-dark); height: 20px; transition: transform .5s, fill .4s; } @@ -96,10 +96,10 @@ $quaternary-colors: ( &--expanded, &:hover { @include ma-button("solid",$c-primary-alt); - color: $c-font-inverse; + color: var(--mf-c-font-inverse); svg { - fill: $c-white; + fill: var(--mf-c-white); } @each $class, $c in $colors { @@ -125,10 +125,10 @@ $quaternary-colors: ( &--tertiary, &--expanded.ma__button-icon--tertiary, &:hover.ma__button-icon--tertiary { @include ma-button("solid",$c-gray-light); - color: $c-font-base; + color: var(--mf-c-font-base); svg { - fill: $c-gray-darkest; + fill: var(--mf-c-gray-darkest); } } @@ -139,16 +139,16 @@ $quaternary-colors: ( border: none; padding: 0; text-transform: none; - border-bottom: 2px solid $c-link; - color: $c-primary; + border-bottom: 2px solid var(--mf-c-link); + color: var(--mf-c-primary); letter-spacing: $letter-spacing-default; svg { - fill: $c-link; + fill: var(--mf-c-link); } &:hover, &.active { - border-color: $c-primary; + border-color: var(--mf-c-primary); background-color: transparent !important; } @@ -169,7 +169,7 @@ $quaternary-colors: ( } &--expanded.ma__button-icon--quaternary-simple, &:hover.ma__button-icon--quaternary-simple:hover { - background-color: $c-gray-light; + background-color: var(--mf-c-gray-light); } &--quaternary-simple { @@ -183,7 +183,7 @@ $quaternary-colors: ( padding: 5px 5px; text-transform: none; cursor: pointer; - color: $c-primary-alt; + color: var(--mf-c-primary-alt); svg { width: 10px; @@ -216,8 +216,8 @@ $quaternary-colors: ( min-height: unset; border: none; display: inline-block; - color: $c-font-inverse; - background-color: $c-primary-alt; + color: var(--mf-c-font-inverse); + background-color: var(--mf-c-primary-alt); &.ma__button-icon > svg { fill: rgba($c-white,.5); @@ -229,7 +229,7 @@ $quaternary-colors: ( background-color: $c; @if $c == $c-highlight { - color: $c-font-base; + color: var(--mf-c-font-base); &.ma__button-icon > svg { fill: rgba($c-gray-darkest,.5); diff --git a/packages/assets/scss/01-atoms/_buttons.scss b/packages/assets/scss/01-atoms/_buttons.scss index 085e83c2b9..1bb56a02a9 100644 --- a/packages/assets/scss/01-atoms/_buttons.scss +++ b/packages/assets/scss/01-atoms/_buttons.scss @@ -78,10 +78,10 @@ button { .ma__button--tertiary { @include ma-button("solid",$c-gray-light); - color: $c-font-base; + color: var(--mf-c-font-base); svg { - fill: $c-gray-darkest; + fill: var(--mf-c-gray-darkest); } } @@ -89,18 +89,18 @@ button { background-color: transparent; box-shadow: none; border: none; - border-bottom: 2px solid $c-link; - color: $c-primary; + border-bottom: 2px solid var(--mf-c-link); + color: var(--mf-c-primary); padding: 0; text-transform: none; letter-spacing: $letter-spacing-default; svg { - fill: $c-primary; + fill: var(--mf-c-primary); } &:hover:not(:disabled) { - border-bottom: 3px solid $c-primary; + border-bottom: 3px solid var(--mf-c-primary); background-color: transparent; } } diff --git a/packages/assets/scss/02-molecules/_brand-banner.scss b/packages/assets/scss/02-molecules/_brand-banner.scss index b0ad4094f3..fcdaaa08af 100644 --- a/packages/assets/scss/02-molecules/_brand-banner.scss +++ b/packages/assets/scss/02-molecules/_brand-banner.scss @@ -3,7 +3,7 @@ .ma__brand-banner { width: 100%; - background-color: $c-primary-lightest; + background-color: var(--mf-c-primary-lightest); font-size: $fonts-xsmall; @media ($bp-small-min) { @@ -91,15 +91,15 @@ // Icon colors &.light-c-primary > svg { - fill: $c-primary; + fill: var(--mf-c-primary); } &.light-c-primary-alt>svg { - fill: $c-primary-alt; + fill: var(--mf-c-primary-alt); } &.dark > svg { - fill: $c-white; + fill: var(--mf-c-white); } & + & { diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss index c6485e6f85..f02c4cac0b 100644 --- a/packages/assets/scss/02-molecules/_callout-link.scss +++ b/packages/assets/scss/02-molecules/_callout-link.scss @@ -10,7 +10,7 @@ justify-content: center; padding: 15px 20px; background-color: mix($c-bg, $c-font-link,90%); - border-color: $c-link; + border-color: var(--mf-c-link); box-shadow: $box-shadow; text-decoration: none; @@ -22,7 +22,7 @@ &:focus { .ma__callout-link__text { - border-bottom-color: $c-link; + border-bottom-color: var(--mf-c-link); } } @@ -54,7 +54,7 @@ svg { @include ma-link-arrow; - fill: $c-font-link; + fill: var(--mf-c-font-link); } } @@ -73,7 +73,7 @@ } &__eyebrow { - background-color: $c-bg-section; + background-color: var(--mf-c-bg-section); font-weight: $fonts-bold; } @@ -83,7 +83,7 @@ display: inline-flex; justify-content: space-between; margin-bottom: 10px; - color: $c-font-detail; + color: var(--mf-c-font-detail); @media ($bp-small-min) { margin-bottom: 15px; @@ -102,12 +102,12 @@ line-height: 1; padding-top: 15px; display: flex; - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-bold; } &--white { - background-color: $c-bg; + background-color: var(--mf-c-bg); border-color: mix($c-white, $c-font-detail,70%); box-shadow: $box-shadow; } diff --git a/packages/assets/scss/02-molecules/_emergency-alert.scss b/packages/assets/scss/02-molecules/_emergency-alert.scss index f5e0bc9a1b..f367959998 100644 --- a/packages/assets/scss/02-molecules/_emergency-alert.scss +++ b/packages/assets/scss/02-molecules/_emergency-alert.scss @@ -3,14 +3,14 @@ @use "sass:color" as *; .ma__emergency-alert { - background-color: $c-highlight-lightest; + background-color: var(--mf-c-highlight-lightest); font-size: $fonts-medium; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0; & + & { - border-top: 1px solid $c-highlight-lighter; + border-top: 1px solid var(--mf-c-highlight-lighter); } &__time-stamp { @@ -31,7 +31,7 @@ border-bottom-width: 1px; font-size: $fonts-medium; border-bottom-color: rgba($c-font-base, .5); - color: $c-font-base; + color: var(--mf-c-font-base); &:hover { border-bottom-width: 3px; @@ -89,7 +89,7 @@ width: .5em; border-right: 3px solid; border-bottom: 3px solid; - border-color: $c-gray-darkest; + border-color: var(--mf-c-gray-darkest); } } } diff --git a/packages/assets/scss/02-molecules/_emergency-header.scss b/packages/assets/scss/02-molecules/_emergency-header.scss index 0e89a573fa..4377759a02 100644 --- a/packages/assets/scss/02-molecules/_emergency-header.scss +++ b/packages/assets/scss/02-molecules/_emergency-header.scss @@ -22,7 +22,7 @@ padding: 8px; font-size: inherit; line-height: inherit; - background-color: $c-warning; + background-color: var(--mf-c-warning); @media ($bp-small-max) { text-align: center; @@ -76,7 +76,7 @@ &__toggle { cursor: pointer; - color: $c-font-base; + color: var(--mf-c-font-base); font-weight: $fonts-light; @media ($bp-small-max) { diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index fcb663a5cb..7d051ea2c2 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -159,12 +159,12 @@ a { color: var(--mf-c-primary); - box-shadow: inset 0 0 $c-white, inset 0px -1px $c-bay-blue-lighter; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-bay-blue-lighter); // border-bottom: 1px solid $c-bay-blue-lighter; &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px $c-bay-blue-30-tint; + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-bay-blue-30-tint); // border-bottom: 2px solid $c-bay-blue-30-tint; } } diff --git a/packages/assets/scss/03-organisms/_campaign-video.scss b/packages/assets/scss/03-organisms/_campaign-video.scss index b708cee4a2..2d22c8797a 100644 --- a/packages/assets/scss/03-organisms/_campaign-video.scss +++ b/packages/assets/scss/03-organisms/_campaign-video.scss @@ -17,10 +17,10 @@ $colors: ( background-color: $c; @if ($c == $c-primary or $c == $c-primary-alt) { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); .ma__campaign-video__title { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } a { @@ -30,7 +30,7 @@ $colors: ( &:hover, &:active, &:focus { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } } diff --git a/packages/assets/scss/03-organisms/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss index 35cef21528..66d3d215e8 100644 --- a/packages/assets/scss/03-organisms/_emergency-alerts.scss +++ b/packages/assets/scss/03-organisms/_emergency-alerts.scss @@ -22,7 +22,7 @@ $colors: ( z-index: $z-dropdown - 1; &__header { - background-color: $c-warning; + background-color: var(--mf-c-warning); .ma__emergency-header { margin-left: 0; @@ -118,7 +118,7 @@ $colors: ( } @media ($bp-small-max) { - background-color: $c-warning; + background-color: var(--mf-c-warning); padding: 20px; padding-top: 0; transition: background-color .5s; @@ -140,10 +140,10 @@ $colors: ( &__hide--#{$class} { @if $c == $c-warning { - color: $c-font-base; + color: var(--mf-c-font-base); } @else { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } } &--#{$class} { diff --git a/packages/assets/scss/03-organisms/_key-message.scss b/packages/assets/scss/03-organisms/_key-message.scss index c60e91f91c..980912ef93 100644 --- a/packages/assets/scss/03-organisms/_key-message.scss +++ b/packages/assets/scss/03-organisms/_key-message.scss @@ -331,9 +331,9 @@ $colors: ( &--#{$class} { @if ($c == $c-primary or $c == $c-primary-alt or $c == $c-primary-alt-dark) { - color: $c-font-inverse; + color: var(--mf-c-font-inverse); } @else { - color: $c-font-base; + color: var(--mf-c-font-base); } } } diff --git a/packages/assets/scss/03-organisms/_page-banner.scss b/packages/assets/scss/03-organisms/_page-banner.scss index d8e1757881..55fc890dae 100644 --- a/packages/assets/scss/03-organisms/_page-banner.scss +++ b/packages/assets/scss/03-organisms/_page-banner.scss @@ -15,8 +15,8 @@ $textcolors: ( /* Apply basic styling to the banner container */ .ma__page-banner { - background-color: $c-primary; - color: $c-font-inverse; + background-color: var(--mf-c-primary); + color: var(--mf-c-font-inverse); margin-bottom: 20px; @each $class, $c in $bgcolors { diff --git a/packages/core/stories/tokens/colors/_color-display.scss b/packages/core/stories/tokens/colors/_color-display.scss index b9c16afb1f..71dfbf9ef2 100644 --- a/packages/core/stories/tokens/colors/_color-display.scss +++ b/packages/core/stories/tokens/colors/_color-display.scss @@ -49,7 +49,7 @@ font-size: $fonts-smaller; font-family: $fonts-mono; span { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); padding: 0.1em 0.2em; } } diff --git a/packages/react/src/components/base/Colors/_index.scss b/packages/react/src/components/base/Colors/_index.scss index a9824b9ea0..bb9db1a842 100644 --- a/packages/react/src/components/base/Colors/_index.scss +++ b/packages/react/src/components/base/Colors/_index.scss @@ -47,7 +47,7 @@ font-size: $fonts-smaller; font-family: $fonts-mono; span { - background-color: $c-gray-lightest; + background-color: var(--mf-c-gray-lightest); padding: 0.1em 0.2em; } } From f5b1054aeae132ecb0d496331ffc6f7dd34adbe1 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 19:13:34 +0600 Subject: [PATCH 13/25] add changelog --- changelogs/DP-38077.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 changelogs/DP-38077.yml diff --git a/changelogs/DP-38077.yml b/changelogs/DP-38077.yml new file mode 100644 index 0000000000..249e775aa2 --- /dev/null +++ b/changelogs/DP-38077.yml @@ -0,0 +1,13 @@ +Added: + - project: Assets + component: _color-tokens, _colors + description: Added css variables for colors (#1981) + issue: DP-38077 + impact: Patch + +Changed: + - project: Assets, Core, Patternlab, React, Site + component: scss files + description: Changed colors to use the new css variables rather than scss variables (#1981) + issue: DP-38077 + impact: Major \ No newline at end of file From 15b89ed6c5f679639a5d3c2e8afc9437225edd2c Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 19:36:02 +0600 Subject: [PATCH 14/25] update colors --- packages/assets/scss/00-base/_colors.scss | 74 +++++++++++------------ 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 80bdbc7403..69c4a866cc 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -51,48 +51,48 @@ $c-bd-input-dark: $c-gray !default; $c-box-shadow-black: rgba($c-black, 0.25) !default; :root { - --mf-c-primary: #{$c-primary}; - --mf-c-primary-light: #{$c-primary-light}; - --mf-c-primary-lighter: #{$c-primary-lighter}; - --mf-c-primary-lightest: #{$c-primary-lightest}; - --mf-c-primary-alt: #{$c-primary-alt}; - --mf-c-primary-alt-lighter: #{$c-primary-alt-lighter}; - --mf-c-primary-alt-lightest: #{$c-primary-alt-lightest}; - --mf-c-primary-alt-dark: #{$c-primary-alt-dark}; - --mf-c-highlight: #{$c-highlight}; - --mf-c-highlight-lighter: #{$c-highlight-lighter}; - --mf-c-highlight-lightest: #{$c-highlight-lightest}; + --mf-c-primary: var(--mf-$c-bay-blue); + --mf-c-primary-light: var(--mf-$c-bay-blue-light); + --mf-c-primary-lighter: var(--mf-$c-bay-blue-lighter); + --mf-c-primary-lightest: var(--mf-$c-bay-blue-lightest); + --mf-c-primary-alt: var(--mf-$c-berkshires-green); + --mf-c-primary-alt-lighter: var(--mf-$c-berkshires-green-lighter); + --mf-c-primary-alt-lightest: var(--mf-$c-berkshires-greenlightest); + --mf-c-primary-alt-dark: var(--mf-$c-berkshires-green-dark); + --mf-c-highlight: var(--mf-$c-duckling-yellow); + --mf-c-highlight-lighter: var(--mf-$c-duckling-yellow-lighter); + --mf-c-highlight-lightest: var(--mf-$c-duckling-yellow-lightest); - --mf-c-error: #{$c-error}; - --mf-c-error-lighter: #{$c-error-lighter}; - --mf-c-error-lightest: #{$c-error-lightest}; - --mf-c-warning: #{$c-warning}; - --mf-c-success: #{$c-success}; - --mf-c-focus: #{$c-focus}; - --mf-c-link: #{$c-link}; - --mf-c-visited: #{$c-visited}; + --mf-c-error: var(--mf-$c-error-red); + --mf-c-error-lighter: var(--mf-$c-error-red-lighter); + --mf-c-error-lightest: var(--mf-$c-error-red-lightest); + --mf-c-warning: var(--mf-$c-duckling-yellow); + --mf-c-success: var(--mf-$c-berkshires-green); + --mf-c-focus: var(--mf-$c-focus-hightlight); + --mf-c-link: var(--mf-$c-bay-blue-40-tint); + --mf-c-visited: var(--mf-$c-independence-cranberry-10-tint); - --mf-c-font-base: #{$c-font-base}; - --mf-c-font-detail: #{$c-font-detail}; - --mf-c-font-dark: #{$c-font-dark}; - --mf-c-font-medium: #{$c-font-medium}; + --mf-c-font-base: var(--mf-$c-gray-darkest); + --mf-c-font-detail: var(--mf-$c-gray-dark); + --mf-c-font-dark: var(--mf-$c-gray-darkest); + --mf-c-font-medium: var(--mf-$c-gray); - --mf-c-font-heading: #{$c-font-heading}; - --mf-c-font-inverse: #{$c-font-inverse}; - --mf-c-font-link: #{$c-font-link}; - --mf-c-font-error: #{$c-font-error}; + --mf-c-font-heading: var(--mf-$c-gray-darkest); + --mf-c-font-inverse: var(--mf-$c-white); + --mf-c-font-link: var(--mf-$c-bay-blue); + --mf-c-font-error: var(--mf-$c-error); - --mf-c-bg: #{$c-bg}; - --mf-c-bg-comp-title: #{$c-bg-comp-title}; - --mf-c-bg-subtle: #{$c-bg-subtle}; - --mf-c-bg-section: #{$c-bg-section}; + --mf-c-bg: var(--mf-$c-white); + --mf-c-bg-comp-title: var(--mf-$c-gray-dark); + --mf-c-bg-subtle: var(--mf-$c-gray-lightest); + --mf-c-bg-section: var(--mf-$c-gray-lightest); - --mf-c-bd: #{$c-bd}; - --mf-c-bd-divider: #{$c-bd-divider}; - --mf-c-bd-divider-dark: #{$c-bd-divider-dark}; - --mf-c-bd-error: #{$c-bd-error}; - --mf-c-bd-input: #{$c-bd-input}; - --mf-c-bd-input-dark: #{$c-bd-input-dark}; + --mf-c-bd: var(--mf-$c-gray-light); + --mf-c-bd-divider: var(--mf-$c-gray-light); + --mf-c-bd-divider-dark: var(--mf-$c-gray-dark); + --mf-c-bd-error: var(--mf-$c-error); + --mf-c-bd-input: var(--mf-$c-gray-light); + --mf-c-bd-input-dark: var(--mf-$c-gray); --mf-c-box-shadow-black: #{$c-box-shadow-black}; } From 058177f43a4ca9496b46a3762fe74a365044ff22 Mon Sep 17 00:00:00 2001 From: notraiyan Date: Thu, 1 May 2025 20:11:13 +0600 Subject: [PATCH 15/25] revert colors --- packages/assets/scss/00-base/_colors.scss | 74 +++++++++++------------ 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 69c4a866cc..80bdbc7403 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -51,48 +51,48 @@ $c-bd-input-dark: $c-gray !default; $c-box-shadow-black: rgba($c-black, 0.25) !default; :root { - --mf-c-primary: var(--mf-$c-bay-blue); - --mf-c-primary-light: var(--mf-$c-bay-blue-light); - --mf-c-primary-lighter: var(--mf-$c-bay-blue-lighter); - --mf-c-primary-lightest: var(--mf-$c-bay-blue-lightest); - --mf-c-primary-alt: var(--mf-$c-berkshires-green); - --mf-c-primary-alt-lighter: var(--mf-$c-berkshires-green-lighter); - --mf-c-primary-alt-lightest: var(--mf-$c-berkshires-greenlightest); - --mf-c-primary-alt-dark: var(--mf-$c-berkshires-green-dark); - --mf-c-highlight: var(--mf-$c-duckling-yellow); - --mf-c-highlight-lighter: var(--mf-$c-duckling-yellow-lighter); - --mf-c-highlight-lightest: var(--mf-$c-duckling-yellow-lightest); + --mf-c-primary: #{$c-primary}; + --mf-c-primary-light: #{$c-primary-light}; + --mf-c-primary-lighter: #{$c-primary-lighter}; + --mf-c-primary-lightest: #{$c-primary-lightest}; + --mf-c-primary-alt: #{$c-primary-alt}; + --mf-c-primary-alt-lighter: #{$c-primary-alt-lighter}; + --mf-c-primary-alt-lightest: #{$c-primary-alt-lightest}; + --mf-c-primary-alt-dark: #{$c-primary-alt-dark}; + --mf-c-highlight: #{$c-highlight}; + --mf-c-highlight-lighter: #{$c-highlight-lighter}; + --mf-c-highlight-lightest: #{$c-highlight-lightest}; - --mf-c-error: var(--mf-$c-error-red); - --mf-c-error-lighter: var(--mf-$c-error-red-lighter); - --mf-c-error-lightest: var(--mf-$c-error-red-lightest); - --mf-c-warning: var(--mf-$c-duckling-yellow); - --mf-c-success: var(--mf-$c-berkshires-green); - --mf-c-focus: var(--mf-$c-focus-hightlight); - --mf-c-link: var(--mf-$c-bay-blue-40-tint); - --mf-c-visited: var(--mf-$c-independence-cranberry-10-tint); + --mf-c-error: #{$c-error}; + --mf-c-error-lighter: #{$c-error-lighter}; + --mf-c-error-lightest: #{$c-error-lightest}; + --mf-c-warning: #{$c-warning}; + --mf-c-success: #{$c-success}; + --mf-c-focus: #{$c-focus}; + --mf-c-link: #{$c-link}; + --mf-c-visited: #{$c-visited}; - --mf-c-font-base: var(--mf-$c-gray-darkest); - --mf-c-font-detail: var(--mf-$c-gray-dark); - --mf-c-font-dark: var(--mf-$c-gray-darkest); - --mf-c-font-medium: var(--mf-$c-gray); + --mf-c-font-base: #{$c-font-base}; + --mf-c-font-detail: #{$c-font-detail}; + --mf-c-font-dark: #{$c-font-dark}; + --mf-c-font-medium: #{$c-font-medium}; - --mf-c-font-heading: var(--mf-$c-gray-darkest); - --mf-c-font-inverse: var(--mf-$c-white); - --mf-c-font-link: var(--mf-$c-bay-blue); - --mf-c-font-error: var(--mf-$c-error); + --mf-c-font-heading: #{$c-font-heading}; + --mf-c-font-inverse: #{$c-font-inverse}; + --mf-c-font-link: #{$c-font-link}; + --mf-c-font-error: #{$c-font-error}; - --mf-c-bg: var(--mf-$c-white); - --mf-c-bg-comp-title: var(--mf-$c-gray-dark); - --mf-c-bg-subtle: var(--mf-$c-gray-lightest); - --mf-c-bg-section: var(--mf-$c-gray-lightest); + --mf-c-bg: #{$c-bg}; + --mf-c-bg-comp-title: #{$c-bg-comp-title}; + --mf-c-bg-subtle: #{$c-bg-subtle}; + --mf-c-bg-section: #{$c-bg-section}; - --mf-c-bd: var(--mf-$c-gray-light); - --mf-c-bd-divider: var(--mf-$c-gray-light); - --mf-c-bd-divider-dark: var(--mf-$c-gray-dark); - --mf-c-bd-error: var(--mf-$c-error); - --mf-c-bd-input: var(--mf-$c-gray-light); - --mf-c-bd-input-dark: var(--mf-$c-gray); + --mf-c-bd: #{$c-bd}; + --mf-c-bd-divider: #{$c-bd-divider}; + --mf-c-bd-divider-dark: #{$c-bd-divider-dark}; + --mf-c-bd-error: #{$c-bd-error}; + --mf-c-bd-input: #{$c-bd-input}; + --mf-c-bd-input-dark: #{$c-bd-input-dark}; --mf-c-box-shadow-black: #{$c-box-shadow-black}; } From 43e59ea4c5b3e847299904e3108ec11ae3f2888b Mon Sep 17 00:00:00 2001 From: notraiyan Date: Wed, 7 May 2025 15:38:32 +0600 Subject: [PATCH 16/25] resolve feedback --- changelogs/DP-38077.yml | 6 +++--- packages/assets/scss/00-base/_variables.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/changelogs/DP-38077.yml b/changelogs/DP-38077.yml index 249e775aa2..1a5daafdff 100644 --- a/changelogs/DP-38077.yml +++ b/changelogs/DP-38077.yml @@ -1,13 +1,13 @@ Added: - project: Assets component: _color-tokens, _colors - description: Added css variables for colors (#1981) + description: Added CSS variables for colors (#1981) issue: DP-38077 impact: Patch Changed: - project: Assets, Core, Patternlab, React, Site - component: scss files - description: Changed colors to use the new css variables rather than scss variables (#1981) + component: SCSS files + description: Changed colors to use the new CSS variables rather than SCSS variables (#1981) issue: DP-38077 impact: Major \ No newline at end of file diff --git a/packages/assets/scss/00-base/_variables.scss b/packages/assets/scss/00-base/_variables.scss index 94c2bcd45c..9a69a9622a 100644 --- a/packages/assets/scss/00-base/_variables.scss +++ b/packages/assets/scss/00-base/_variables.scss @@ -107,4 +107,4 @@ $letter-spacing-default: 0; // Box shadow -$box-shadow: 0 0.25rem 0.5rem $c-box-shadow-black !default; +$box-shadow: 0 0.25rem 0.5rem var(--mf-c-box-shadow-black) !default; From f3eeae3a433c2e6bf2019160e82f3139acf7f466 Mon Sep 17 00:00:00 2001 From: Ethansev Date: Wed, 9 Jul 2025 06:36:09 -0700 Subject: [PATCH 17/25] Deprecated scss functions and replace span-columns mixins with css grid. --- .../assets/scss/00-base/_breakpoints.scss | 46 +++--- packages/assets/scss/00-base/_mixins.scss | 3 +- .../assets/scss/00-base/mixins/_ma-grid.scss | 70 ++++++++ .../00-base/mixins/bourbon-neat/_omega.scss | 24 ++- .../00-base/mixins/bourbon-neat/_private.scss | 84 +++++----- .../00-base/mixins/bourbon-neat/_shift.scss | 20 ++- .../mixins/bourbon-neat/_span-columns.scss | 44 ++--- .../00-base/mixins/bourbon/_clearfix.scss | 4 + .../01-atoms/_colored-heading-from-left.scss | 6 +- .../scss/02-molecules/_footer-links.scss | 21 +-- .../scss/02-molecules/_location-filters.scss | 86 +++++++--- .../scss/02-molecules/_press-status.scss | 19 +-- .../scss/02-molecules/_section-links.scss | 42 +++-- .../scss/03-organisms/_action-card.scss | 32 ++-- .../scss/03-organisms/_action-finder.scss | 74 ++++----- .../assets/scss/03-organisms/_blog-feed.scss | 41 ++--- .../03-organisms/_callout-links-three-up.scss | 32 +--- .../scss/03-organisms/_collage-header.scss | 45 ++++-- .../scss/03-organisms/_feedback-form.scss | 36 +++-- .../03-organisms/_footer-with-columns.scss | 43 +++-- .../scss/03-organisms/_key-actions.scss | 12 +- .../assets/scss/03-organisms/_link-list.scss | 23 +-- .../scss/03-organisms/_page-overview.scss | 6 +- .../scss/03-organisms/_sections-three-up.scss | 42 +---- .../scss/03-organisms/_split-columns.scss | 64 ++------ .../assets/scss/03-organisms/_split50.scss | 12 +- .../scss/03-organisms/_suggested-pages.scss | 151 +++++++++--------- .../assets/scss/03-organisms/_test-feed.scss | 40 +++-- .../scss/03-organisms/_top-actions.scss | 23 +-- packages/assets/scss/08-print/_print.scss | 18 +-- 30 files changed, 594 insertions(+), 569 deletions(-) create mode 100644 packages/assets/scss/00-base/mixins/_ma-grid.scss diff --git a/packages/assets/scss/00-base/_breakpoints.scss b/packages/assets/scss/00-base/_breakpoints.scss index aa01918f6f..f15ac4b9f5 100644 --- a/packages/assets/scss/00-base/_breakpoints.scss +++ b/packages/assets/scss/00-base/_breakpoints.scss @@ -1,39 +1,37 @@ @use "variables" as *; // breakpoint values used for below only -$bp-xs: 480px !default; -$bp-s: 620px !default; -$bp-m: 780px !default; -$bp-l: 910px !default; +$bp-xs: 480px !default; +$bp-s: 620px !default; +$bp-m: 780px !default; +$bp-l: 910px !default; $bp-l-ex: 1000px !default; -$bp-xl: 1200px !default; - +$bp-xl: 1200px !default; // Global breakpoint media variables. -$bp-x-small-min: "min-width: " + ($bp-xs + 1) !default; -$bp-x-small-max: "max-width:" + $bp-xs !default; -$bp-small-min: "min-width: " + ($bp-s + 1) !default; -$bp-small-max: "max-width:" + $bp-s !default; -$bp-medium-min: "min-width: " + ($bp-m + 1) !default; -$bp-medium-max: "max-width:" + $bp-m !default; -$bp-large-min: "min-width: " + ($bp-l + 1) !default; -$bp-large-max: "max-width:" + $bp-l !default; -$bp-large-extended-min: "min-width: " + ($bp-l-ex + 1) !default; -$bp-large-extended-max: "max-width:" + $bp-l-ex !default; -$bp-x-large-min: "min-width: " + ($bp-xl + 1) !default; -$bp-x-large-max: "max-width:" + $bp-xl !default; +$bp-x-small-min: "min-width: " + ($bp-xs + 1) !default; +$bp-x-small-max: "max-width:" + $bp-xs !default; +$bp-small-min: "min-width: " + ($bp-s + 1) !default; +$bp-small-max: "max-width:" + $bp-s !default; +$bp-medium-min: "min-width: " + ($bp-m + 1) !default; +$bp-medium-max: "max-width:" + $bp-m !default; +$bp-large-min: "min-width: " + ($bp-l + 1) !default; +$bp-large-max: "max-width:" + $bp-l !default; +$bp-large-extended-min: "min-width: " + ($bp-l-ex + 1) !default; +$bp-large-extended-max: "max-width:" + $bp-l-ex !default; +$bp-x-large-min: "min-width: " + ($bp-xl + 1) !default; +$bp-x-large-max: "max-width:" + $bp-xl !default; // See max-width in variables -$bp-page-width-min: "min-width:" + ($max-width + 1) !default; -$bp-page-width-max: "max-width:" + $max-width !default; - +$bp-page-width-min: "min-width:" + ($max-width + 1) !default; +$bp-page-width-max: "max-width:" + $max-width !default; // One-off breakpoints (consider consolidation) $bp-centered-content-width: "min-width: 1315px" !default; // Semi Global breakpoint media variables // switch the header from full width to hamburger -$bp-header-toggle-min: "min-width: 941px" !default; -$bp-header-toggle-max: "max-width: 940px" !default; +$bp-header-toggle-min: "min-width: 941px" !default; +$bp-header-toggle-max: "max-width: 940px" !default; // Feedback form custom breakpoint -$bp-feedback-min: "min-width: 650px" !default; +$bp-feedback-min: "min-width: 650px" !default; diff --git a/packages/assets/scss/00-base/_mixins.scss b/packages/assets/scss/00-base/_mixins.scss index a0fb3d3f0b..0f432a7a21 100644 --- a/packages/assets/scss/00-base/_mixins.scss +++ b/packages/assets/scss/00-base/_mixins.scss @@ -10,6 +10,8 @@ @forward "mixins/bourbon-neat/omega"; +@forward "mixins/ma-grid"; + @forward "mixins/ma-aspect-ratio"; @forward "mixins/ma-auto-size"; @@ -64,7 +66,6 @@ @forward "mixins/ma-accordion-icon"; - @forward "mixins/ma-background-colors"; @forward "mixins/ma-layout"; diff --git a/packages/assets/scss/00-base/mixins/_ma-grid.scss b/packages/assets/scss/00-base/mixins/_ma-grid.scss new file mode 100644 index 0000000000..5721e6501f --- /dev/null +++ b/packages/assets/scss/00-base/mixins/_ma-grid.scss @@ -0,0 +1,70 @@ +// Modern CSS Grid System to replace span-columns mixin +// Based on a 12-column grid with 20px gaps +// Full backward compatibility with span-columns syntax + +@use "00-base/variables" as *; + +@use "00-base/breakpoints" as *; + +/// Primary grid container mixin +/// @param {Number} $columns [12] - Number of columns in the grid +/// @param {Number} $gap [$gutter] - Gap between grid items + +@mixin ma-grid($columns: 12, $gap: $gutter) { + display: grid; + grid-template-columns: repeat($columns, 1fr); + gap: $gap; +} + +/// Grid item spanning mixin with full span-columns compatibility +/// @param {Number|List} $span - Number of columns to span or "X of Y" syntax +/// @param {Number} $start [auto] - Starting column position + +@mixin ma-grid-span($span, $start: auto) { + + @if type-of($span) == list { + // Handle "X of Y" syntax like "4 of 8" + $columns: nth($span, 1); + + // If "of Y" is provided, we could use this for subgrid in the future + // For now, just span the specified columns + grid-column: span $columns; + } @else { + // Handle simple number like "6" + grid-column: span $span; + } + + @if $start != auto { + grid-column-start: $start; + } +} + +/// Responsive grid with mobile-first approach +/// @param {Number} $mobile [1] - Columns on mobile +/// @param {Number} $tablet [2] - Columns on tablet +/// @param {Number} $desktop [12] - Columns on desktop +/// @param {Number} $gap [$gutter] - Gap between grid items + +@mixin ma-grid-responsive($mobile: 1, $tablet: 2, $desktop: 12, $gap: $gutter) { + display: grid; + grid-template-columns: repeat($mobile, 1fr); + gap: $gap; + + @media ($bp-medium-min) { + grid-template-columns: repeat($tablet, 1fr); + } + + @media ($bp-large-min) { + grid-template-columns: repeat($desktop, 1fr); + } +} + +/// Two-column grid layout with customizable ratio +/// @param {Number} $gap [$gutter] - Gap between grid items +/// @param {List} $ratio [1fr 1fr] - Column width ratio (e.g., 1fr 2fr, 30% 70%) + +@mixin ma-grid-two-column($gap: $gutter, $ratio: 1fr 1fr) { + display: grid; + grid-template-columns: $ratio; + gap: $gap; +} diff --git a/packages/assets/scss/00-base/mixins/bourbon-neat/_omega.scss b/packages/assets/scss/00-base/mixins/bourbon-neat/_omega.scss index 9920b26b3b..f31ac60ea2 100644 --- a/packages/assets/scss/00-base/mixins/bourbon-neat/_omega.scss +++ b/packages/assets/scss/00-base/mixins/bourbon-neat/_omega.scss @@ -7,6 +7,8 @@ @use "private" as *; /// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts. /// +/// @deprecated CSS Grid automatically handles spacing without needing omega. Use `@include ma-grid()` on container instead. +/// /// @param {List} $query [block] /// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). /// @@ -37,19 +39,28 @@ /// } @mixin omega($query: block, $direction: default) { + + @include neat-warn( + "DEPRECATED: The 'omega' mixin is deprecated. CSS Grid automatically handles spacing. Use '@include ma-grid()' on container instead." + ); + $table: belongs-to(table, $query); $auto: belongs-to(auto, $query); @if $direction != default { - @include neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); + @include neat-warn( + "The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin." + ); } @else { $direction: get-direction($layout-direction, $default-layout-direction); } @if $table { - @include neat-warn("The omega mixin no longer removes padding in table layouts."); + @include neat-warn( + "The omega mixin no longer removes padding in table layouts." + ); } @if length($query) == 1 { @@ -83,6 +94,11 @@ } @mixin nth-child($query, $direction) { + + @include neat-warn( + "DEPRECATED: The 'nth-child' mixin is deprecated along with 'omega'. CSS Grid automatically handles spacing. Use '@include ma-grid()' on container instead." + ); + $opposite-direction: get-opposite-direction($direction); &:nth-child(#{$query}) { @@ -116,8 +132,8 @@ } } } @else if type-of($query) == number and unit($query) == "n" { - &:nth-child(#{$query}+1) { + &:nth-child(#{$query} + 1) { clear: $opposite-direction; } } -} \ No newline at end of file +} diff --git a/packages/assets/scss/00-base/mixins/bourbon-neat/_private.scss b/packages/assets/scss/00-base/mixins/bourbon-neat/_private.scss index dd6285bc52..77b96f422c 100644 --- a/packages/assets/scss/00-base/mixins/bourbon-neat/_private.scss +++ b/packages/assets/scss/00-base/mixins/bourbon-neat/_private.scss @@ -4,6 +4,8 @@ @function is-not($value) { + @warn "The is-not() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + @return if($value, false, true); } @@ -11,6 +13,8 @@ @function is-even($int) { + @warn "The is-even() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + @return $int % 2 == 0; } @@ -18,11 +22,15 @@ @function belongs-to($tested-item, $list) { + @warn "The belongs-to() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + @return is-not(not-belongs-to($tested-item, $list)); } @function not-belongs-to($tested-item, $list) { + @warn "The not-belongs-to() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + @return is-not(index($list, $tested-item)); } @@ -30,16 +38,18 @@ @function contains-display-value($query) { - @return belongs-to(table, $query) - or belongs-to(block, $query) - or belongs-to(inline-block, $query) - or belongs-to(inline, $query); + @warn "The contains-display-value() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + + @return belongs-to(table, $query) or belongs-to(block, $query) or + belongs-to(inline-block, $query) or belongs-to(inline, $query); } // Parses the first argument of span-columns() @function container-span($span: $span) { + @warn "The container-span() function is deprecated and will be removed in a future version. Please migrate to CSS Grid or CSS custom properties instead."; + @if length($span) == 3 { $container-columns: nth($span, 3); @@ -54,6 +64,8 @@ } @function container-shift($shift: $shift) { + + @warn "The container-shift() function is deprecated and will be removed in a future version. Please migrate to CSS Grid or CSS custom properties instead."; $parent-columns: $grid-columns !default !global; @if length($shift) == 3 { @@ -69,40 +81,11 @@ @return $parent-columns; } -// Generates a striped background - -@function gradient-stops($grid-columns, $color: $visual-grid-color) { - $transparent: transparent; - $alt-color: darken($color, 10%); - - $column-width: flex-grid(1, $grid-columns); - $gutter-width: flex-gutter($grid-columns); - $column-offset: $column-width; - $alternate: false; - - $values: ($transparent 0, if($alternate, $color, $alt-color) 0); - - @for $i from 1 to $grid-columns*2 { - - @if is-even($i) { - $values: append($values, $transparent $column-offset, comma); - $values: append($values, if($alternate, $color, $alt-color) $column-offset, comma); - $column-offset: $column-offset + $column-width; - } @else { - $values: append($values, if($alternate, $color, $alt-color) $column-offset, comma); - $values: append($values, $transparent $column-offset, comma); - $column-offset: $column-offset + $gutter-width; - - $alternate: not $alternate; - } - } - - @return $values; -} - // Layout direction @function get-direction($layout, $default) { + + @warn "The get-direction() function is deprecated and will be removed in a future version. Please use CSS logical properties or CSS custom properties instead."; $direction: null; @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { @@ -115,6 +98,8 @@ } @function direction-from-layout($layout) { + + @warn "The direction-from-layout() function is deprecated and will be removed in a future version. Please use CSS logical properties or CSS custom properties instead."; $direction: null; @if to-upper-case($layout) == "LTR" { @@ -127,6 +112,8 @@ } @function get-opposite-direction($direction) { + + @warn "The get-opposite-direction() function is deprecated and will be removed in a future version. Please use CSS logical properties or CSS custom properties instead."; $opposite-direction: left; @if $direction == "left" { @@ -136,11 +123,12 @@ @return $opposite-direction; } - @function to-number($string) { + + @warn "The to-number() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; $string: str-replace($string, " ", ""); $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; - $numbers: 0 1 2 3 4 5 6 7 8 9; + $numbers: 0 1 2 3 4 5 6 7 8 9; $result: 0; @for $i from 1 through str-length($string) { @@ -162,6 +150,9 @@ } @function str-replace($string, $search, $replace: "") { + + @warn "The str-replace() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + $index: str-index($string, $search); @if $index { @@ -181,13 +172,22 @@ $fg-gutter: $gutter; $fg-max-columns: $grid-columns; @function flex-grid($columns, $container-columns: $fg-max-columns) { + + @warn "The flex-grid() function is deprecated and will be removed in a future version. Please migrate to CSS Grid or CSS custom properties instead."; + $width: flex-width($columns); $container-width: flex-width($container-columns); @return percentage($width / $container-width); } -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { +@function flex-gutter( + $container-columns: $fg-max-columns, + $gutter: $fg-gutter +) { + + @warn "The flex-gutter() function is deprecated and will be removed in a future version. Please migrate to CSS Grid or CSS custom properties instead."; + $container-width: flex-width($container-columns); @return percentage($gutter / $container-width); @@ -195,11 +195,15 @@ $fg-max-columns: $grid-columns; @function flex-width($n, $column-width: $fg-column, $gutter-width: $fg-gutter) { + @warn "The flex-width() function is deprecated and will be removed in a future version. Please migrate to CSS Grid or CSS custom properties instead."; + @return $n * $column-width + ($n - 1) * $gutter-width; } @function get-parent-columns($columns) { + @warn "The get-parent-columns() function is deprecated and will be removed in a future version. Please migrate to CSS Grid or CSS custom properties instead."; + @if $columns != $grid-columns { $parent-columns: $columns !global; } @else { @@ -211,5 +215,7 @@ $fg-max-columns: $grid-columns; @function is-display-table($container-is-display-table, $display) { + @warn "The is-display-table() function is deprecated and will be removed in a future version. Please use vanilla CSS or CSS custom properties instead."; + @return $container-is-display-table == true or $display == table; -} \ No newline at end of file +} diff --git a/packages/assets/scss/00-base/mixins/bourbon-neat/_shift.scss b/packages/assets/scss/00-base/mixins/bourbon-neat/_shift.scss index c2832e3ebb..d2d4b7eb06 100644 --- a/packages/assets/scss/00-base/mixins/bourbon-neat/_shift.scss +++ b/packages/assets/scss/00-base/mixins/bourbon-neat/_shift.scss @@ -1,8 +1,12 @@ @use "00-base/variables" as *; @use "private" as *; + +@use "neat-warn" as *; /// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. /// +/// @deprecated Use CSS Grid `grid-column-start` or `@include ma-grid-span($span, $start)` instead. +/// /// @param {Number (unitless)} $n-columns [1] /// Number of columns by which the element shifts. /// @@ -18,11 +22,17 @@ @mixin shift($n-columns: 1) { + @include neat-warn( + "DEPRECATED: The 'shift' mixin is deprecated. Use CSS Grid 'grid-column-start' or '@include ma-grid-span($span, $start)' instead." + ); + @include shift-in-context($n-columns); } /// Translates an element horizontally by a number of columns, in a specific nesting context. /// +/// @deprecated Use CSS Grid `grid-column-start` or `@include ma-grid-span($span, $start)` instead. +/// /// @param {List} $shift /// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). /// @@ -39,14 +49,20 @@ /// } @mixin shift-in-context($shift: $columns of $container-columns) { + + @include neat-warn( + "DEPRECATED: The 'shift-in-context' mixin is deprecated. Use CSS Grid 'grid-column-start' or '@include ma-grid-span($span, $start)' instead." + ); + $n-columns: nth($shift, 1); $parent-columns: container-shift($shift) !global; $direction: get-direction($layout-direction, $default-layout-direction); $opposite-direction: get-opposite-direction($direction); - margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); + margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + + $n-columns * flex-gutter($parent-columns); // Reset nesting context $parent-columns: $grid-columns !global; -} \ No newline at end of file +} diff --git a/packages/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss b/packages/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss index a68015bc46..95cfae3e5e 100644 --- a/packages/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss +++ b/packages/assets/scss/00-base/mixins/bourbon-neat/_span-columns.scss @@ -2,6 +2,8 @@ /// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well. /// +/// @deprecated Use `@include ma-grid()` on container and `@include ma-grid-span()` on items instead +/// /// @param {List} $span /// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). /// @@ -18,7 +20,7 @@ /// /// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid. /// -/// @example scss - Usage +/// @example scss - Usage (DEPRECATED) /// .element { /// @include span-columns(6); /// @@ -27,35 +29,31 @@ /// } /// } /// -/// @example css - CSS Output -/// .element { -/// display: block; -/// float: left; -/// margin-right: 2.35765%; -/// width: 48.82117%; +/// @example scss - Modern CSS Grid Alternative +/// .container { +/// @include ma-grid(12); /// } /// -/// .element:last-child { -/// margin-right: 0; -/// } -/// -/// .element .nested-element { -/// display: block; -/// float: left; -/// margin-right: 4.82916%; -/// width: 30.11389%; -/// } +/// .element { +/// @include ma-grid-span(6); /// -/// .element .nested-element:last-child { -/// margin-right: 0; +/// .nested-element { +/// @include ma-grid-span(2); +/// } /// } @use "00-base/variables" as *; @use "private" as *; +@use "neat-warn" as *; + @mixin span-columns($span: $columns of $container-columns, $display: block) { + @include neat-warn( + "DEPRECATED: The 'span-columns' mixin is deprecated. Use '@include ma-grid()' on container and '@include ma-grid-span()' on items instead." + ); + $columns: nth($span, 1); $container-columns: container-span($span); @@ -78,16 +76,18 @@ @if $display == collapse { - @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); + @include neat-warn( + "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." + ); } @if $display == collapse or $display == block-collapse { - width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); + width: flex-grid($columns, $container-columns) + + flex-gutter($container-columns); &:last-child { width: flex-grid($columns, $container-columns); } - } @else { margin-#{$direction}: flex-gutter($container-columns); width: flex-grid($columns, $container-columns); diff --git a/packages/assets/scss/00-base/mixins/bourbon/_clearfix.scss b/packages/assets/scss/00-base/mixins/bourbon/_clearfix.scss index 91fda59331..4f1aab39b0 100644 --- a/packages/assets/scss/00-base/mixins/bourbon/_clearfix.scss +++ b/packages/assets/scss/00-base/mixins/bourbon/_clearfix.scss @@ -2,6 +2,8 @@ /// Provides an easy way to include a clearfix for containing floats. /// +/// @deprecated CSS Grid doesn't use floats, so clearfix is not needed. Use `@include ma-grid()` instead. +/// /// @link https://goo.gl/yP5hiZ /// /// @example scss @@ -18,6 +20,8 @@ @mixin clearfix { + @warn "DEPRECATED: The 'clearfix' mixin is deprecated. CSS Grid doesn't use floats. Use '@include ma-grid()' instead."; + &::after { clear: both; content: ""; diff --git a/packages/assets/scss/01-atoms/_colored-heading-from-left.scss b/packages/assets/scss/01-atoms/_colored-heading-from-left.scss index 0171cfcee5..4f7f2128fa 100644 --- a/packages/assets/scss/01-atoms/_colored-heading-from-left.scss +++ b/packages/assets/scss/01-atoms/_colored-heading-from-left.scss @@ -6,7 +6,7 @@ margin-bottom: 60px; &:before { - content: ''; + content: ""; height: 100%; position: absolute; top: 0; @@ -43,7 +43,7 @@ &--highlighted { - @include ma-border-decorative($c-highlight,1); + @include ma-border-decorative($c-highlight, 1); padding-top: 0px; padding-bottom: 15px; @@ -58,7 +58,7 @@ margin-bottom: 0; margin-right: 1.6129%; // $gutter in % form vertical-align: middle; - width: 66.12903%; // @include span-columns(8 of 12); + width: 66.12903%; } } } diff --git a/packages/assets/scss/02-molecules/_footer-links.scss b/packages/assets/scss/02-molecules/_footer-links.scss index 7fdf6773fa..1d05441726 100644 --- a/packages/assets/scss/02-molecules/_footer-links.scss +++ b/packages/assets/scss/02-molecules/_footer-links.scss @@ -1,9 +1,11 @@ @use "00-base/configure" as *; - .ma__footer-links { - @include clearfix; + @media ($bp-small-min) { + + @include ma-grid(9); + } &__items { @@ -18,7 +20,8 @@ } } - &__nav {// react version + &__nav { + // react version &--heading { border-bottom: none; @@ -39,7 +42,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: rgba($c-font-dark,.5); + border-bottom-color: rgba($c-font-dark, 0.5); } } } @@ -65,14 +68,6 @@ } @media ($bp-small-min) { - - @include span-columns(3 of 9); - } - - @media ($bp-x-large-min) { - - @include span-columns(2 of 9); - - @include shift(1 of 9); + grid-column: span 3; } } diff --git a/packages/assets/scss/02-molecules/_location-filters.scss b/packages/assets/scss/02-molecules/_location-filters.scss index e6b2290fa7..bc95efb437 100644 --- a/packages/assets/scss/02-molecules/_location-filters.scss +++ b/packages/assets/scss/02-molecules/_location-filters.scss @@ -6,20 +6,55 @@ form { @include ma-container; - display: flex; + + @media ($bp-medium-min) and ($bp-large-extended-max) { + + @include ma-grid(2, $gutter); + } + + @media ($bp-large-extended-min) and ($bp-x-large-max) { + + @include ma-grid(2, $gutter); + } + + @media ($bp-x-large-min) { + + @include ma-grid(3, $gutter); + } + + @media ($bp-medium-max) { + display: flex; flex-wrap: wrap; + } } &__row { - - @include clearfix; - display: flex; - flex-wrap: wrap; width: 100%; + @media ($bp-medium-min) and ($bp-large-extended-max) { + + @include ma-grid-span(2); + + @include ma-grid(2); + } + + @media ($bp-large-extended-min) and ($bp-x-large-max) { + + @include ma-grid-span(2); + + @include ma-grid(2); + } + @media ($bp-x-large-min) { - margin-right: 1.6129%; - width: 66.12903%; //@include span-columns(8 of 12); + + @include ma-grid-span(2); + + @include ma-grid(2); + } + + @media ($bp-medium-max) { + display: flex; + flex-wrap: wrap; } } @@ -27,6 +62,10 @@ margin-bottom: 30px; width: 100%; + @media ($bp-medium-min) { + grid-column: 1 / -1; + } + input { width: 100%; } @@ -36,25 +75,16 @@ &__by-keyword { margin-bottom: 30px; width: 100%; - } - - &__by-activity { @media ($bp-medium-min) { - - @include span-columns(4 of 8); - } - - .ma__select-box { - width: 100%; + margin-bottom: 0; } } - &__by-activity + &__by-keyword { - - @media ($bp-medium-min) { + &__by-activity { - @include span-columns(4 of 8); + .ma__select-box { + width: 100%; } } @@ -73,8 +103,14 @@ margin-top: 10px; } + @media ($bp-medium-min) and ($bp-x-large-max) { + grid-column: 1 / -1; + margin-bottom: 30px; + } + @media ($bp-x-large-min) { - width: 32.25806%; //@include span-columns(4 of 12); + + @include ma-grid-span(1); margin-bottom: 30px; padding-left: 80px; padding-top: 45px; @@ -111,6 +147,10 @@ margin-bottom: 30px; width: 100%; + @media ($bp-medium-min) { + grid-column: 1 / -1; + } + @media ($bp-x-large-min) { margin-bottom: 45px; } @@ -118,7 +158,7 @@ &__submit { - @include ma-button-size('small'); + @include ma-button-size("small"); } } @@ -136,6 +176,6 @@ &__submit { - @include ma-button('solid',$c-primary); + @include ma-button("solid", $c-primary); } } diff --git a/packages/assets/scss/02-molecules/_press-status.scss b/packages/assets/scss/02-molecules/_press-status.scss index 7e799f7c68..0c5b1d0b08 100644 --- a/packages/assets/scss/02-molecules/_press-status.scss +++ b/packages/assets/scss/02-molecules/_press-status.scss @@ -20,8 +20,8 @@ content: ""; height: 100%; position: absolute; - right: 100%; - top: 0; + right: 100%; + top: 0; width: 50vw; } } @@ -37,31 +37,28 @@ &__content { - @include clearfix; + @media ($bp-small-min) { + + @include ma-grid-two-column($ratio: 3fr 5fr); + } } &__date { margin-bottom: 5px; @media ($bp-small-min) { - - @include span-columns(3 of 8); + margin-bottom: 0; } } &__names { @include ma-reset-list; - - @media ($bp-small-min) { - - @include span-columns(5 of 8); - } } &__name { font-size: $fonts-medium; - margin-bottom: .5em; + margin-bottom: 0.5em; } } diff --git a/packages/assets/scss/02-molecules/_section-links.scss b/packages/assets/scss/02-molecules/_section-links.scss index d71b0140cc..460fa35a74 100644 --- a/packages/assets/scss/02-molecules/_section-links.scss +++ b/packages/assets/scss/02-molecules/_section-links.scss @@ -27,7 +27,7 @@ &__content { height: 100%; - padding: 10px 20px 0 10px; + padding: 10px 20px 10px 10px; @media ($bp-x-small-min) { padding: 10px 20px 20px 10px; @@ -35,9 +35,9 @@ @media ($bp-small-min) { display: flex; - align-items: flex-start; - flex-direction: column; - flex-wrap: wrap; + align-items: flex-start; + flex-direction: column; + flex-wrap: wrap; padding: 12px 30px 0; } @@ -75,9 +75,9 @@ } & a > svg { - height: .75em; + height: 0.75em; margin-right: -16px; - width: .75em; + width: 0.75em; } a { @@ -90,25 +90,17 @@ &__title { @include ma-h3; - margin-bottom: .5em; .ma__decorative-link { - width: 94%;// Slightely bigger than the parent box to prevent extra bottom space with one line content. + width: 94%; // Slightely bigger than the parent box to prevent extra bottom space with one line content. box-sizing: content-box; } @media ($bp-x-small-min) { - position: relative; } - @media ($bp-small-min) { - - margin-bottom: .5em; - } - @media ($bp-large-extended-max) { - width: 99%; .ma__decorative-link { @@ -135,12 +127,10 @@ .ma__section-links--compact & { @media ($bp-large-extended-max) { - - width: auto; + width: auto; } @media ($bp-x-small-max) { - padding-right: 0; } } @@ -165,10 +155,17 @@ display: none; } } + + .js-accordion &[aria-expanded="false"] { + + @media ($bp-x-small-max) { + margin-bottom: 0; + } + } } &--accordion__toggle { - all: unset;// reeset any styles applied to button to match ones for decorative links. + all: unset; // reeset any styles applied to button to match ones for decorative links. box-sizing: inherit; display: none; @@ -184,7 +181,6 @@ } @media ($bp-x-small-max) { - padding-right: 0.8em; .js-accordion & { @@ -200,14 +196,14 @@ &--status { display: block; font-size: 1.5em; //$fonts-5xlarge; - line-height: .75em; + line-height: 0.75em; border: none; overflow: hidden; position: absolute; right: 15px; top: 15px; transform-origin: center center; - transition: transform .5s ease; + transition: transform 0.5s ease; padding-left: 0; margin-left: 0; @@ -240,7 +236,6 @@ @include ma-reset-list; } - // skip the first item &__item + &__item { @@ -294,7 +289,6 @@ svg { fill: var(--mf-c-font-link); } - } &--accordion__toggle--status { diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index ae8d71c59b..d47792fa40 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -38,14 +38,17 @@ &__items { - @include clearfix; + @media ($bp-medium-min) { + + @include ma-grid(2); + } } &__item { @include ma-valign-block; cursor: pointer; - font-size: 0; //valign fix + font-size: 0; //valign fix margin-bottom: 20px; padding: 30px 20px; width: 100%; @@ -55,16 +58,9 @@ } @media ($bp-medium-min) { - - @include span-columns(6); - - @include omega(2n); height: 215px; padding: 40px 20px; - - &:nth-last-child(2) { - margin-bottom: 0; - } + margin-bottom: 0; } @media ($bp-large-min) { @@ -180,7 +176,7 @@ background-color: var(--mf-c-primary); &:hover { - background-color: rgba($c-primary,.8); + background-color: rgba($c-primary, 0.8); a { border-bottom-color: var(--mf-c-font-inverse); @@ -192,7 +188,7 @@ background-color: var(--mf-c-primary-alt); &:hover { - background-color: rgba($c-primary-alt,.8); + background-color: rgba($c-primary-alt, 0.8); a { border-bottom-color: var(--mf-c-font-inverse); @@ -204,7 +200,7 @@ background-color: var(--mf-c-gray-dark); &:hover { - background-color: rgba($c-gray-dark,.8); + background-color: rgba($c-gray-dark, 0.8); a { border-bottom-color: var(--mf-c-font-inverse); @@ -217,7 +213,7 @@ svg, svg > g { - fill: rgba($c-font-medium,.7); + fill: rgba($c-font-medium, 0.7); } } @@ -227,19 +223,19 @@ svg, svg > g { - fill: rgba($c-font-inverse,.7); + fill: rgba($c-font-inverse, 0.7); } } &__category { - color: rgba($c-font-base,.85); + color: rgba($c-font-base, 0.85); font-weight: $fonts-bold; } &__item--blue &__category, &__item--green &__category, &__item--dark-gray &__category { - color: rgba($c-font-inverse,.8); + color: rgba($c-font-inverse, 0.8); text-shadow: 0 0.125rem 0.125rem rgba($c-black, 0.5); } @@ -267,7 +263,7 @@ } svg { - fill: rgba(var(--mf-c-font-inverse), .5); + fill: rgba(var(--mf-c-font-inverse), 0.5); } } } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 265ce34d88..079e112883 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -13,8 +13,8 @@ $action-finder-bp: 900px; content: ""; height: 100%; position: absolute; - top: 0; - left: 0; + top: 0; + left: 0; width: 100%; z-index: 1; } @@ -39,22 +39,12 @@ $action-finder-bp: 900px; padding-top: 0; } - &__category { - - @include ma-h5; - } - - h3.ma__action-finder__category { - - @include ma-h3; - } - &__search { @media ($bp-large-min) { display: inline-block; vertical-align: middle; - width: 32.25806%; // @include span-columns(4 of 12); + width: 32.25806%; } } @@ -62,8 +52,8 @@ $action-finder-bp: 900px; margin-top: 25px; padding-right: 20px; position: absolute; - top: 100%; - left: 30px; + top: 100%; + left: 30px; transform: skew(30deg); @media ($bp-large-min) { @@ -76,44 +66,38 @@ $action-finder-bp: 900px; &__items { @include ma-reset-list; + gap: 20px; display: flex; - flex-wrap: wrap; - justify-content: stretch; - } + flex-direction: column; - &__items { - padding-bottom: 25px; + @media ($bp-small-min) { + + @include ma-grid-responsive(2, 2, 3, 20px); + } + + padding-bottom: 45px; @media ($bp-medium-min) { - padding-bottom: 45px; + padding-bottom: 65px; } } .ma__illustrated-link, .ma__callout-link { display: flex; - margin-bottom: 20px; height: auto; width: 100%; - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - - @media screen and ($bp-small-min) and ($bp-large-max) { - - @include span-columns(4 of 8); + } - @include omega(2n); - display: flex; - } + &__category { - @media ($bp-large-min) { + @include ma-h5; + font-weight: $fonts-normal; + } - @include span-columns(4 of 12); + h3.ma__action-finder__category { - @include omega(3n); - display: flex; - } + @include ma-h3; } &__items--all { @@ -172,13 +156,18 @@ $action-finder-bp: 900px; } //theme -$action-finder-bg-color: mix($c-bg, $c-primary,89%); -$action-finder-border-color: mix($c-white, $c-primary,50%); +$action-finder-bg-color: mix($c-bg, $c-primary, 89%); +$action-finder-border-color: mix($c-white, $c-primary, 50%); .ma__action-finder { &:after { - background-image: linear-gradient(180deg, rgba($c-black,.6), transparent 90%, transparent); + background-image: linear-gradient( + 180deg, + rgba($c-black, 0.6), + transparent 90%, + transparent + ); } &--no-background { @@ -187,7 +176,6 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); &__category { color: var(--mf-c-font-inverse); - font-weight: $fonts-normal; } &--no-background &__category { @@ -234,12 +222,12 @@ $action-finder-border-color: mix($c-white, $c-primary,50%); color: var(--mf-c-font-inverse); &:hover { - border-color: rgba($c-font-inverse, .5); + border-color: rgba($c-font-inverse, 0.5); } } svg { - fill: rgba($c-font-inverse, .5); + fill: rgba($c-font-inverse, 0.5); } } } diff --git a/packages/assets/scss/03-organisms/_blog-feed.scss b/packages/assets/scss/03-organisms/_blog-feed.scss index f5e62adf9f..d366a926ea 100644 --- a/packages/assets/scss/03-organisms/_blog-feed.scss +++ b/packages/assets/scss/03-organisms/_blog-feed.scss @@ -22,21 +22,25 @@ } &__items { - - @include clearfix; margin-bottom: 30px; + + @media ($bp-large-min) { + + @include ma-grid(2); + } } &__item { - - @include clearfix; margin-bottom: 30px; - @media ($bp-large-min) { + @media ($bp-x-small-min) { - @include span-columns(3 of 6); + @include ma-grid-two-column($ratio: 38% 57%); + align-items: start; + gap: 5%; + } - @include omega(2n); + @media ($bp-large-min) { margin-bottom: 0; } @@ -52,9 +56,6 @@ @media ($bp-x-small-min) { display: block; - float: left; - margin-right: 5%; - width: 38%; } } @@ -63,21 +64,13 @@ line-height: 1.79; padding: 0 10px; position: absolute; - top: 0; - right: 0; - } - - &__content { - - @media ($bp-x-small-min) { - float: left; - width: 57%; - } + top: 0; + right: 0; } &__link { font-size: $fonts-xlarge; - margin-bottom: .5em; + margin-bottom: 0.5em; } &__description { @@ -95,8 +88,8 @@ display: inline-block; &:after { - height: .5em; - width: .5em; + height: 0.5em; + width: 0.5em; } } } @@ -112,7 +105,7 @@ } &__date { - background-color: rgba($c-white,.8); + background-color: rgba($c-white, 0.8); color: var(--mf-c-font-base); font-weight: 900; } diff --git a/packages/assets/scss/03-organisms/_callout-links-three-up.scss b/packages/assets/scss/03-organisms/_callout-links-three-up.scss index 1a72b99495..57e3bb41ba 100644 --- a/packages/assets/scss/03-organisms/_callout-links-three-up.scss +++ b/packages/assets/scss/03-organisms/_callout-links-three-up.scss @@ -10,18 +10,12 @@ $bp-section-3up-large-max: "max-width:950px"; @include ma-container; } - &__container { - - @include clearfix; - display: flex; - align-items: stretch; - flex-wrap: wrap; - flex-direction: column; - @media ($bp-small-min) { - flex-flow: row wrap; + + @include ma-grid-responsive(1, 2, 3); + align-items: stretch; } & > * { @@ -31,26 +25,8 @@ $bp-section-3up-large-max: "max-width:950px"; } @media ($bp-small-min) { - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; - } - - - @media ($bp-small-min) and ($bp-section-3up-large-max) { - - @include span-columns(4 of 8); - - @include omega(2n); - } - - @media ($bp-section-3up-large-min) { - - @include span-columns(4 of 12); - - @include omega(3n); + margin-bottom: 0; } } } - } diff --git a/packages/assets/scss/03-organisms/_collage-header.scss b/packages/assets/scss/03-organisms/_collage-header.scss index f39e80915b..4ec25d4c43 100644 --- a/packages/assets/scss/03-organisms/_collage-header.scss +++ b/packages/assets/scss/03-organisms/_collage-header.scss @@ -32,10 +32,26 @@ $collage-header-bp-min: "min-width: 701px"; margin: 0; padding-bottom: 20px; position: absolute; - top: 0; - right: 0; + top: 0; + right: 0; width: calc(100% - 420px); z-index: 1; + + @media ($bp-large-min) { + --collage-gap: 16px; + + @media ($bp-x-large-min) { + --collage-gap: 20px; + } + + @media ($bp-page-width-min) { + --collage-gap: 24px; + } + + @include ma-grid(8, var(--collage-gap)); + grid-template-rows: 60% 37.5%; + gap: var(--collage-gap); + } } } @@ -53,11 +69,11 @@ $collage-header-bp-min: "min-width: 701px"; padding: 0; width: 100%; - @media ($bp-large-min) { - @include span-columns(5 of 8); - height: 30%; + @include ma-grid-span(5); + grid-row: 2; + height: 100%; margin-bottom: 0; } @@ -68,8 +84,9 @@ $collage-header-bp-min: "min-width: 701px"; @media ($bp-large-min) { - @include span-columns(8 of 8); - height: 68%; + @include ma-grid-span(8); + grid-row: 1; + height: 100%; } } @@ -78,7 +95,9 @@ $collage-header-bp-min: "min-width: 701px"; @media ($bp-large-min) { - @include span-columns(3 of 8); + @include ma-grid-span(3); + grid-row: 2; + height: 100%; } } } @@ -108,8 +127,8 @@ $collage-header-bp-min: "min-width: 701px"; content: ""; height: 100%; position: absolute; - top: 0; - right: calc(100% - 480px); + top: 0; + right: calc(100% - 480px); width: 100vw; transform: skew(-30deg); } @@ -158,10 +177,10 @@ $collage-header-bp-min: "min-width: 701px"; } } - &__lead { + &__lead { - @include ma-h3; - } + @include ma-h3; + } } //theme diff --git a/packages/assets/scss/03-organisms/_feedback-form.scss b/packages/assets/scss/03-organisms/_feedback-form.scss index d1d4f22166..f6facb2103 100644 --- a/packages/assets/scss/03-organisms/_feedback-form.scss +++ b/packages/assets/scss/03-organisms/_feedback-form.scss @@ -14,6 +14,11 @@ $feedback-form-bp-min: "min-width: 751px"; max-width: ($column + $gutter) * 8 - $gutter; padding-top: 60px; padding-bottom: 60px; + + @media ($feedback-form-bp-min) { + + @include ma-grid(2); + } } &__header { @@ -22,6 +27,10 @@ $feedback-form-bp-min: "min-width: 751px"; @media ($bp-small-min) { margin-bottom: $feedback-form-spacing; } + + @media ($feedback-form-bp-min) { + grid-column: 1 / -1; + } } &__title { @@ -60,11 +69,6 @@ $feedback-form-bp-min: "min-width: 751px"; margin-bottom: $feedback-form-spacing; } - @media ($feedback-form-bp-min) { - - @include span-columns(4 of 8); - } - input { width: 100%; } @@ -75,7 +79,6 @@ $feedback-form-bp-min: "min-width: 751px"; @media ($feedback-form-bp-min) { margin-bottom: 0; } - } &__email { @@ -90,6 +93,10 @@ $feedback-form-bp-min: "min-width: 751px"; margin-bottom: $feedback-form-spacing; } + @media ($feedback-form-bp-min) { + grid-column: 1 / -1; + } + textarea { width: 100%; } @@ -103,8 +110,7 @@ $feedback-form-bp-min: "min-width: 751px"; } @media ($feedback-form-bp-min) { - - @include span-columns(4 of 8); + grid-column: 1 / -1; } .ma__select-box { @@ -121,11 +127,13 @@ $feedback-form-bp-min: "min-width: 751px"; padding-left: 0; padding-right: 0; - @media ($bp-small-min) { margin-bottom: $feedback-form-spacing; } + @media ($feedback-form-bp-min) { + grid-column: 1 / -1; + } legend { font-size: $fonts-medium; @@ -140,6 +148,10 @@ $feedback-form-bp-min: "min-width: 751px"; &__controls { text-align: right; + @media ($feedback-form-bp-min) { + grid-column: 1 / -1; + } + button, input[type="submit"], input[type="button"] { @@ -167,13 +179,13 @@ $feedback-form-bp-min: "min-width: 751px"; .ma__feedback-form { &__overlay { - background-color: rgba($c-black,.6); + background-color: rgba($c-black, 0.6); color: var(--mf-c-font-inverse); } &__title { - @include ma-border-decorative($c-highlight,1); + @include ma-border-decorative($c-highlight, 1); color: var(--mf-c-font-inverse); } @@ -183,7 +195,7 @@ $feedback-form-bp-min: "min-width: 751px"; input[type="button"], input[type="submit"] { - @include ma-button("solid",$c-primary); + @include ma-button("solid", $c-primary); } } diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index fbcc9bd0ed..e7a4a6c71a 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -1,5 +1,7 @@ @use "00-base/configure" as *; +@use "00-base/mixins/ma-grid" as *; + .ma__footer { padding: 20px 0 30px; position: relative; @@ -8,24 +10,28 @@ padding: 40px 0 50px; } + .main-content--full .page-content > & { + margin-top: 0; + } + &__back2top { @include ma-button-size("small"); letter-spacing: $letter-spacing-large; opacity: 1; - padding: .5em .7em; + padding: 0.5em 0.7em; position: fixed; - bottom: 1.3125rem; - right: 1.5625rem; - transition: all .5s; + bottom: 1.3125rem; + right: 1.5625rem; + transition: all 0.5s; visibility: visible; z-index: $z-sticky-content; @media ($bp-small-max) { - padding: .4em .4em 0 .4em; + padding: 0.4em 0.4em 0 0.4em; position: fixed; - bottom: 1rem; - right: 1rem; + bottom: 1rem; + right: 1rem; } &.is-hidden { @@ -39,7 +45,7 @@ height: 18px; transform: rotate(-90deg); transform-origin: center center; - transition: all .5s; + transition: all 0.5s; } span { @@ -56,12 +62,15 @@ @include ma-container; - @include clearfix; - @media ($bp-large-max) { display: flex; flex-direction: column; } + + @media ($bp-large-min) { + + @include ma-grid(12); + } } &__nav { @@ -69,9 +78,8 @@ @media ($bp-large-min) { - @include span-columns(9); - float: right; - margin-right: 0; + @include ma-grid-span(9); + grid-column: 4 / -1; margin-bottom: 20px; } } @@ -84,7 +92,8 @@ @media ($bp-large-min) { - @include span-columns(3); + @include ma-grid-span(3); + grid-row: 1; } } @@ -122,11 +131,11 @@ &__back2top { - @include ma-button("outline",$c-primary); - background-color: rgba($c-white, .9); + @include ma-button("outline", $c-primary); + background-color: rgba($c-white, 0.9); svg { - fill: rgba($c-primary, .5); + fill: rgba($c-primary, 0.5); } &:hover { diff --git a/packages/assets/scss/03-organisms/_key-actions.scss b/packages/assets/scss/03-organisms/_key-actions.scss index 73e3b5e0de..d56baf7a58 100644 --- a/packages/assets/scss/03-organisms/_key-actions.scss +++ b/packages/assets/scss/03-organisms/_key-actions.scss @@ -14,8 +14,8 @@ @media ($bp-medium-min) { display: flex; - flex-wrap: wrap; - align-items: stretch; + flex-wrap: wrap; + align-items: stretch; margin-left: -2.43902%; margin-bottom: -20px; } @@ -30,7 +30,6 @@ margin-left: -2.43902%; } } - } .ma__illustrated-link, @@ -53,13 +52,11 @@ } @media ($bp-medium-min) and ($bp-x-large-max) { - //@include span-columns(4 of 8); margin-left: 2.43902%; width: 50% - 2.43902%; } @media ($bp-x-large-min) { - //@include span-columns(4 of 12); margin-left: 1.6129%; width: 33.3333% - 1.6129%; } @@ -67,16 +64,13 @@ .main-content--two & { @media ($bp-medium-min) { - //@include span-columns(4 of 8); margin-left: 2.43902%; width: 50% - 2.43902%; } - // stacked (two column was too narrow) - @media ($bp-large-min) and ($bp-x-large-max) { width: 100% - 2.43902%; } } } -} \ No newline at end of file +} diff --git a/packages/assets/scss/03-organisms/_link-list.scss b/packages/assets/scss/03-organisms/_link-list.scss index c02e8ff014..d87a62abd0 100644 --- a/packages/assets/scss/03-organisms/_link-list.scss +++ b/packages/assets/scss/03-organisms/_link-list.scss @@ -13,11 +13,6 @@ margin-bottom: 1em; } - &__container { - - @include clearfix; - } - &__items { margin-bottom: 0; padding-left: 20px; @@ -31,12 +26,7 @@ @media ($bp-medium-min) { - .item-left { - - @include span-columns(6); - margin-right: calc(#{flex-gutter(12)} + 10px); - display: list-item; - } + @include ma-grid(2, 0); } } @@ -44,12 +34,7 @@ @media ($bp-medium-min) { - .item-left { - - @include span-columns(6); - margin-right: flex-gutter(12); - display: list-item; - } + @include ma-grid(2, 0); } } @@ -72,7 +57,7 @@ margin-right: 0.5rem; margin-bottom: -6px; } - + &__title { display: inline; width: unset; @@ -91,8 +76,6 @@ } } - - .sidebar &__item + &__item { border-top-style: solid; border-top-width: 1px; diff --git a/packages/assets/scss/03-organisms/_page-overview.scss b/packages/assets/scss/03-organisms/_page-overview.scss index c946c31b3c..e65a051883 100644 --- a/packages/assets/scss/03-organisms/_page-overview.scss +++ b/packages/assets/scss/03-organisms/_page-overview.scss @@ -11,16 +11,14 @@ @include ma-container(); } - &__event-image { - + @media ($bp-small-min) { - // @include span-columns(4 of 8); float: right; font-size: 0; margin-left: 2.43902%; margin-bottom: 1rem; - max-width: 48.78049%; + max-width: 48.78049%; } } diff --git a/packages/assets/scss/03-organisms/_sections-three-up.scss b/packages/assets/scss/03-organisms/_sections-three-up.scss index 7d0bf2289a..f58af76a01 100644 --- a/packages/assets/scss/03-organisms/_sections-three-up.scss +++ b/packages/assets/scss/03-organisms/_sections-three-up.scss @@ -14,14 +14,10 @@ $bp-section-3up-large-max: "max-width:950px"; @include ma-container; - @include clearfix; - display: flex; - align-items: stretch; - flex-wrap: wrap; - flex-direction: column; - @media ($bp-small-min) { - flex-flow: row wrap; + + @include ma-grid-responsive(1, 2, 3); + align-items: stretch; } & > * { @@ -31,26 +27,9 @@ $bp-section-3up-large-max: "max-width:950px"; } @media ($bp-small-min) { - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; + margin-bottom: 0; padding-bottom: 20px; } - - - @media ($bp-small-min) and ($bp-section-3up-large-max) { - - @include span-columns(4 of 8); - - @include omega(2n); - } - - @media ($bp-section-3up-large-min) { - - @include span-columns(4 of 12); - - @include omega(3n); - } } & > .ma__card__wrapper { @@ -64,14 +43,10 @@ $bp-section-3up-large-max: "max-width:950px"; @include ma-container; - @include clearfix; - display: flex; - align-items: stretch; - flex-wrap: wrap; - flex-direction: column; - @media ($bp-small-min) { - flex-flow: row wrap; + + @include ma-grid-responsive(1, 2, 3); + align-items: stretch; } & > * { @@ -90,9 +65,8 @@ $bp-section-3up-large-max: "max-width:950px"; } // Single CTA cards - + .ma__sections-3up__container:has(.ma__card__wrapper) { - display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; diff --git a/packages/assets/scss/03-organisms/_split-columns.scss b/packages/assets/scss/03-organisms/_split-columns.scss index 85a7b3dac4..6f71412c18 100644 --- a/packages/assets/scss/03-organisms/_split-columns.scss +++ b/packages/assets/scss/03-organisms/_split-columns.scss @@ -6,74 +6,42 @@ @include ma-container; - @include clearfix; - .main-content--two & { padding-left: 0; padding-right: 0; } - } - - &__column { - - @include ma-component-spacing; - // two items (50/50) + @media ($bp-medium-min) { - &:first-child:nth-last-child(2), - &:first-child:nth-last-child(2) ~ & { - - @media ($bp-medium-min) { - - @include span-columns(2 of 4); - margin-top: 0; - } + @include ma-grid-responsive(1, 2, 3, 3.3%); } - @media ($bp-x-large-min) { - - &:first-child:nth-last-child(2), - &:first-child:nth-last-child(2) ~ & { - margin: 0; - width: 50%; - } + // When there are exactly 2 items, force 2-column grid instead of 3 - &:first-child:nth-last-child(2) { - padding-right: ($column + $gutter) /2; - } + &:has(.ma__split-columns__column:first-child:nth-last-child(2)) { - &:first-child:nth-last-child(2) ~ & { - padding-left: ($column + $gutter) /2; + @media ($bp-large-min) { + grid-template-columns: repeat(2, 1fr); } } + } - // three columns + &__column { - &:first-child:nth-last-child(3), - &:first-child:nth-last-child(3) ~ & { - - @media ($bp-large-min) { + @include ma-component-spacing; - @include span-columns(2 of 6); - margin-top: 0; - } + @media ($bp-medium-min) { + margin-top: 0; } - - // two items (50/50) in a 2/3 width + + // Special handling for 2/3 width content area - force single column when space is constrained .main-content--two &:first-child:nth-last-child(2), .main-content--two &:first-child:nth-last-child(2) ~ & { - @media ($bp-large-min) { - // restack when page-content becomes 2/3 - - @include span-columns(12); - } - - @media ($bp-x-large-min) { - - @include span-columns(2 of 4); + @media ($bp-large-min) and ($bp-x-large-max) { + grid-column: 1 / -1; } } } -} \ No newline at end of file +} diff --git a/packages/assets/scss/03-organisms/_split50.scss b/packages/assets/scss/03-organisms/_split50.scss index fa9be63000..90f9ae7cc6 100644 --- a/packages/assets/scss/03-organisms/_split50.scss +++ b/packages/assets/scss/03-organisms/_split50.scss @@ -7,17 +7,13 @@ &__container { @media ($bp-medium-min) { - - @include clearfix; padding-top: 60px; padding-bottom: 60px; - > *:nth-last-child(n+2), - > *:nth-last-child(n+2) ~ * { - - @include span-columns(6); + > *:nth-last-child(n + 2), + > *:nth-last-child(n + 2) ~ * { - @include omega(2n); + @include ma-grid-two-column; margin-top: 0; margin-bottom: 0; padding-top: 0; @@ -51,4 +47,4 @@ &--has-divider &__container { border-top-color: var(--mf-c-bd-divider); } -} \ No newline at end of file +} diff --git a/packages/assets/scss/03-organisms/_suggested-pages.scss b/packages/assets/scss/03-organisms/_suggested-pages.scss index 52623e5056..ea97164aae 100644 --- a/packages/assets/scss/03-organisms/_suggested-pages.scss +++ b/packages/assets/scss/03-organisms/_suggested-pages.scss @@ -2,6 +2,43 @@ .ma__suggested-pages { + &--centered { + + .ma__suggested-pages__title { + text-align: center; + display: block; + + &:after { + left: 50%; + transform: translateX(-50%); + } + } + + .ma__suggested-pages__items { + justify-content: center; + } + + // For 3-item layout on tablet: center the third item between the first two (centered variant) + + .ma__suggested-pages__item:nth-child(3):nth-last-child(1) { + + @media (max-width: 749px) { + grid-column: 1 / -1; + max-width: 100%; + margin: 0; + } + + @media (min-width: 750px) and ($bp-x-large-max) { + grid-column: 1 / -1; + margin: 0 auto; + max-width: 50%; + justify-self: center; + } + } + } + + // Kept for backwards compatability + &.guide { text-align: center; @@ -17,6 +54,24 @@ .ma__suggested-pages__items { justify-content: center; } + + // For 3-item layout on tablet: center the third item between the first two (guide only) + + .ma__suggested-pages__item:nth-child(3):nth-last-child(1) { + + @media (max-width: 749px) { + grid-column: 1 / -1; + max-width: 100%; + margin: 0; + } + + @media (min-width: 750px) and ($bp-x-large-max) { + grid-column: 1 / -1; + margin: 0 auto; + max-width: 50%; + justify-self: center; + } + } } &__container { @@ -48,51 +103,34 @@ } &__items { - - @include clearfix; - display: flex; - flex-wrap: wrap; - - margin: 0 0 0 0; + margin: 0 0 30px 0; padding: 0 0 0 0; list-style: none; - } - &__item { - margin-bottom: 30px; - width: 100%; + @media (min-width: 750px) { - &::after { - content: ""; - position: relative; + @include ma-grid(2); } - &--guide { + @media ($bp-x-large-min) { - @media (min-width: 750px) and ($bp-x-large-max) { - - @include span-columns(4 of 8); - - @include omega(2n); - } - - @media ($bp-x-large-min) { - - @include span-columns(4); - - @include omega(3n); - } + @include ma-grid(3); } } - .ma__link-list { - text-align: left; - } - &__item { margin-bottom: 30px; width: 100%; + @media (min-width: 750px) { + margin-bottom: 0; + } + + &::after { + content: ""; + position: relative; + } + a { height: 100%; width: 100%; @@ -107,23 +145,6 @@ } } - &--guide { - - @media (min-width: 750px) and ($bp-x-large-max) { - - @include span-columns(4 of 8); - - @include omega(2n); - } - - @media ($bp-x-large-min) { - - @include span-columns(4); - - @include omega(3n); - } - } - &--suggested { .ma__decorative-link { @@ -135,28 +156,15 @@ &-figure { position: relative; - } - - @media ($bp-x-large-min) { - - @include span-columns(4 of 13); - - @include omega(2n); - margin-right: 0; - border-right: 1px solid var(--mf-c-bd-divider); - &-figure { + @media ($bp-x-large-min) { max-width: 230px; margin: auto; } + } - &:nth-child(2):not(:nth-last-child(3n+1)) { - - @include span-columns(5 of 13); - - @include omega(2n); - margin-right: 0; - } + @media ($bp-x-large-min) { + border-right: 1px solid var(--mf-c-bd-divider); &:nth-child(1) { @@ -165,7 +173,7 @@ } } - &:nth-last-child(3n+1) { + &:last-child { border-right: 0; .ma__suggested-pages__item--suggested-figure { @@ -173,15 +181,12 @@ } } } - - @media (min-width: 750px) and ($bp-x-large-max) { - - @include span-columns(4 of 8); - - @include omega(2n); - } } } + + .ma__link-list { + text-align: left; + } } //theme diff --git a/packages/assets/scss/03-organisms/_test-feed.scss b/packages/assets/scss/03-organisms/_test-feed.scss index 26a69f6ffb..7117e4847d 100644 --- a/packages/assets/scss/03-organisms/_test-feed.scss +++ b/packages/assets/scss/03-organisms/_test-feed.scss @@ -11,21 +11,19 @@ } &__items { - - @include clearfix; padding-top: 10px; + + @media ($bp-medium-min) { + + @include ma-grid(2); + } } &__item { - - @include clearfix; padding-bottom: 30px; @media ($bp-medium-min) { - - @include span-columns(6); - - @include omega(2n); + padding-bottom: 0; } } @@ -68,23 +66,22 @@ padding-bottom: 0; &:after { - height: .5em; - width: .5em; + height: 0.5em; + width: 0.5em; } } } @media ($bp-medium-max) { - .ma__split50__container > &:nth-last-child(n+2), - .ma__split50__container > *:nth-last-child(n+2) ~ & { - padding-left: 0; - padding-right: 0; - } + .ma__split50__container > &:nth-last-child(n + 2), + .ma__split50__container > *:nth-last-child(n + 2) ~ & { + padding-left: 0; + padding-right: 0; + } } - @media ($bp-medium-min) { - + @media ($bp-medium-min) { // left side .ma__split50__container > &:nth-child(odd) { @@ -99,8 +96,8 @@ // more than two in a 50/50 - .ma__split50__container > &:nth-last-child(n+2), - .ma__split50__container > *:nth-last-child(n+2) ~ & { + .ma__split50__container > &:nth-last-child(n + 2), + .ma__split50__container > *:nth-last-child(n + 2) ~ & { .ma__test-feed__title { font-size: $fonts-3xlarge; @@ -111,13 +108,12 @@ } } - .ma__test-feed__item { + .ma__test-feed__items { - @include span-columns(12); + @include ma-grid(1); } } } - } //theme diff --git a/packages/assets/scss/03-organisms/_top-actions.scss b/packages/assets/scss/03-organisms/_top-actions.scss index dd042995fa..e5faf7714c 100644 --- a/packages/assets/scss/03-organisms/_top-actions.scss +++ b/packages/assets/scss/03-organisms/_top-actions.scss @@ -19,13 +19,10 @@ &__items { - @include clearfix; - @media ($bp-small-min) { - display: flex; + + @include ma-grid-responsive(1, 2, 4); align-items: stretch; - flex-wrap: wrap; - justify-content: center; } } @@ -33,20 +30,8 @@ display: flex; margin-bottom: 20px; - @media ($bp-small-min) and ($bp-x-large-max) { - - @include span-columns(6); - - @include omega(2n); - display: flex; - } - - @media ($bp-x-large-min) { - - @include span-columns(3); - - @include omega(4n); - display: flex; + @media ($bp-small-min) { + margin-bottom: 0; } } } diff --git a/packages/assets/scss/08-print/_print.scss b/packages/assets/scss/08-print/_print.scss index 8d3236aa46..4d7fd2187d 100644 --- a/packages/assets/scss/08-print/_print.scss +++ b/packages/assets/scss/08-print/_print.scss @@ -76,7 +76,7 @@ } a::after { - content: " ("attr(href)")"; + content: " (" attr(href) ")"; font-size: 0.8em; font-weight: normal; width: 100%; @@ -154,7 +154,6 @@ } a:after { - content: ""; } } @@ -163,17 +162,15 @@ .ma__footer-new { &__logo { - display: none !important; } &__navlinks { - display: none !important; } } - .ma__sticky-toc__link:nth-child(n+11) { + .ma__sticky-toc__link:nth-child(n + 11) { display: block !important; } @@ -195,7 +192,8 @@ &.ma__page-banner--c-primary { - .ma__page-header__title, .ma__page-header__description { + .ma__page-header__title, + .ma__page-header__description { color: $c-black !important; } } @@ -252,7 +250,7 @@ top: 0; color: var(--mf-c-font-heading); - &::before, { + &::before { display: none; } } @@ -499,7 +497,7 @@ max-width: none; .ma__image { - display: none; + display: none; } .ma__featured-item__title-container { @@ -555,7 +553,6 @@ } } - a[href^="tel:"], a[href^="#"], a[href^="mailto:"] { @@ -580,10 +577,9 @@ &::before { // checkbox content: "\2610"; - margin-right:5px; + margin-right: 5px; font-size: $fonts-5xlarge; } } } - } From a77dd68a47ea96daaee11b74700e051699b6b990 Mon Sep 17 00:00:00 2001 From: Ethansev Date: Wed, 9 Jul 2025 09:59:46 -0700 Subject: [PATCH 18/25] Refactor SCSS to use CSS variables for colors and gradients. --- .../assets/scss/01-atoms/_button-search.scss | 4 ++-- .../scss/01-atoms/_button-with-icon.scss | 2 +- .../scss/01-atoms/_colored-heading.scss | 2 +- .../assets/scss/01-atoms/_comp-heading.scss | 8 ++++---- .../scss/02-molecules/_action-gallery.scss | 2 +- .../scss/02-molecules/_back-button.scss | 2 +- .../scss/02-molecules/_brand-banner.scss | 20 +++++++++---------- .../scss/02-molecules/_event-filters.scss | 2 +- .../scss/02-molecules/_location-filters.scss | 2 +- .../assets/scss/02-molecules/_main-nav.scss | 2 +- .../assets/scss/02-molecules/_wait-time.scss | 2 +- .../scss/03-organisms/_action-card.scss | 2 +- .../scss/03-organisms/_action-details.scss | 2 +- .../scss/03-organisms/_action-finder.scss | 2 +- .../assets/scss/03-organisms/_blog-feed.scss | 2 +- .../assets/scss/03-organisms/_change-log.scss | 2 +- .../scss/03-organisms/_feedback-form.scss | 4 ++-- .../03-organisms/_footer-with-columns.scss | 2 +- .../scss/03-organisms/_header-hamburger.scss | 2 +- .../assets/scss/03-organisms/_help-tip.scss | 2 +- .../assets/scss/03-organisms/_jump-links.scss | 2 +- .../scss/03-organisms/_page-banner.scss | 12 +++++------ .../assets/scss/03-organisms/_pullquote.scss | 2 +- .../scss/03-organisms/_related-locations.scss | 2 +- .../assets/scss/03-organisms/_rich-text.scss | 2 +- .../assets/scss/03-organisms/_sticky-toc.scss | 4 ++-- .../scss/03-organisms/_suggested-pages.scss | 2 +- .../assets/scss/03-organisms/_test-feed.scss | 2 +- .../scss/03-organisms/_top-actions.scss | 2 +- .../assets/scss/04-templates/_details.scss | 2 +- 30 files changed, 50 insertions(+), 50 deletions(-) diff --git a/packages/assets/scss/01-atoms/_button-search.scss b/packages/assets/scss/01-atoms/_button-search.scss index 536191ecbe..6c131d10b7 100644 --- a/packages/assets/scss/01-atoms/_button-search.scss +++ b/packages/assets/scss/01-atoms/_button-search.scss @@ -59,12 +59,12 @@ //primary button search - @include ma-button-search($c-primary-alt, $c-white); + @include ma-button-search(var(--mf-c-primary-alt), var(--mf-c-white)); //secondary button search &--secondary { - @include ma-button-search($c-white, $c-primary-alt); + @include ma-button-search(var(--mf-c-white), var(--mf-c-primary-alt)); } } diff --git a/packages/assets/scss/01-atoms/_button-with-icon.scss b/packages/assets/scss/01-atoms/_button-with-icon.scss index 99bcdb978b..f2ac8fb217 100644 --- a/packages/assets/scss/01-atoms/_button-with-icon.scss +++ b/packages/assets/scss/01-atoms/_button-with-icon.scss @@ -124,7 +124,7 @@ $quaternary-colors: ( &--tertiary, &--expanded.ma__button-icon--tertiary, &:hover.ma__button-icon--tertiary { - @include ma-button("solid",$c-gray-light); + @include ma-button("solid",var(--mf-c-gray-light)); color: var(--mf-c-font-base); svg { diff --git a/packages/assets/scss/01-atoms/_colored-heading.scss b/packages/assets/scss/01-atoms/_colored-heading.scss index 01daf42807..cfcfeb25c3 100644 --- a/packages/assets/scss/01-atoms/_colored-heading.scss +++ b/packages/assets/scss/01-atoms/_colored-heading.scss @@ -21,7 +21,7 @@ .ma__colored-heading { - @include ma-heading-colored($c-bg-comp-title); + @include ma-heading-colored(var(--mf-c-bg-comp-title)); &--green { background-color: var(--mf-c-primary-alt); diff --git a/packages/assets/scss/01-atoms/_comp-heading.scss b/packages/assets/scss/01-atoms/_comp-heading.scss index 6d7b77e421..a0915dd9ce 100644 --- a/packages/assets/scss/01-atoms/_comp-heading.scss +++ b/packages/assets/scss/01-atoms/_comp-heading.scss @@ -54,21 +54,21 @@ .sidebar &, &--sidebar { - @include ma-sidebar-heading($c-bd-divider,$c-font-base); + @include ma-sidebar-heading(var(--mf-c-bd-divider),var(--mf-c-font-base)); } .sidebar--colored & { - @include ma-heading-colored($c-bg-comp-title); + @include ma-heading-colored(var(--mf-c-bg-comp-title)); } &--yellow { - @include ma-border-decorative($c-highlight, 1); + @include ma-border-decorative(var(--mf-c-highlight), 1); } &--gray { - @include ma-border-decorative($c-gray, 1); + @include ma-border-decorative(var(--mf-c-gray), 1); } } diff --git a/packages/assets/scss/02-molecules/_action-gallery.scss b/packages/assets/scss/02-molecules/_action-gallery.scss index b2bc26c3bc..5791cd00c2 100644 --- a/packages/assets/scss/02-molecules/_action-gallery.scss +++ b/packages/assets/scss/02-molecules/_action-gallery.scss @@ -46,6 +46,6 @@ .ma__action-gallery { &__view-more { - background-image: linear-gradient(90deg, transparent, $c-white 30%); + background-image: linear-gradient(90deg, transparent, var(--mf-c-white) 30%); } } \ No newline at end of file diff --git a/packages/assets/scss/02-molecules/_back-button.scss b/packages/assets/scss/02-molecules/_back-button.scss index be04f86581..08c0b8b7ad 100644 --- a/packages/assets/scss/02-molecules/_back-button.scss +++ b/packages/assets/scss/02-molecules/_back-button.scss @@ -52,7 +52,7 @@ a:not(.ma__button) { - @include ma-button("",$c-font-link); + @include ma-button("",var(--mf-c-font-link)); border-color: var(--mf-c-bay-blue-lighter); &:before { diff --git a/packages/assets/scss/02-molecules/_brand-banner.scss b/packages/assets/scss/02-molecules/_brand-banner.scss index fcdaaa08af..27dc05d05d 100644 --- a/packages/assets/scss/02-molecules/_brand-banner.scss +++ b/packages/assets/scss/02-molecules/_brand-banner.scss @@ -13,18 +13,18 @@ @include background-colors( $lightTheme: ( - "c-primary": $c-primary-lightest, - "c-primary-alt": $c-primary-alt-lightest, - "c-highlight": $c-highlight-lightest, - "c-gray": $c-platinum-gray, - "c-white": $c-white + "c-primary": var(--mf-c-primary-lightest), + "c-primary-alt": var(--mf-c-primary-alt-lightest), + "c-highlight": var(--mf-c-highlight-lightest), + "c-gray": var(--mf-c-platinum-gray), + "c-white": var(--mf-c-white) ), $darkTheme: ( - "c-primary": $c-primary, - "c-primary-alt": $c-primary-alt, - "c-highlight": $c-highlight, - "c-gray": $c-gray-darkest, - "c-black": $c-gray-darkest + "c-primary": var(--mf-c-primary), + "c-primary-alt": var(--mf-c-primary-alt), + "c-highlight": var(--mf-c-highlight), + "c-gray": var(--mf-c-gray-darkest), + "c-black": var(--mf-c-gray-darkest) ) ); diff --git a/packages/assets/scss/02-molecules/_event-filters.scss b/packages/assets/scss/02-molecules/_event-filters.scss index 85a699bd8c..8f4df77ae8 100644 --- a/packages/assets/scss/02-molecules/_event-filters.scss +++ b/packages/assets/scss/02-molecules/_event-filters.scss @@ -46,6 +46,6 @@ &__submit { - @include ma-button('solid',$c-primary); + @include ma-button('solid',var(--mf-c-primary)); } } diff --git a/packages/assets/scss/02-molecules/_location-filters.scss b/packages/assets/scss/02-molecules/_location-filters.scss index bc95efb437..c0bf32ad98 100644 --- a/packages/assets/scss/02-molecules/_location-filters.scss +++ b/packages/assets/scss/02-molecules/_location-filters.scss @@ -176,6 +176,6 @@ &__submit { - @include ma-button("solid", $c-primary); + @include ma-button("solid", var(--mf-c-primary)); } } diff --git a/packages/assets/scss/02-molecules/_main-nav.scss b/packages/assets/scss/02-molecules/_main-nav.scss index 0bd518dd01..a8ecae8d95 100644 --- a/packages/assets/scss/02-molecules/_main-nav.scss +++ b/packages/assets/scss/02-molecules/_main-nav.scss @@ -265,7 +265,7 @@ &.is-active { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } } diff --git a/packages/assets/scss/02-molecules/_wait-time.scss b/packages/assets/scss/02-molecules/_wait-time.scss index 31fee5a0e7..d2cb1cdca2 100644 --- a/packages/assets/scss/02-molecules/_wait-time.scss +++ b/packages/assets/scss/02-molecules/_wait-time.scss @@ -83,7 +83,7 @@ &__title { - @include ma-border-decorative($c-highlight); + @include ma-border-decorative(var(--mf-c-highlight)); svg { fill: var(--mf-c-highlight); diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index d47792fa40..2ad7179bd9 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -155,7 +155,7 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } &__item { diff --git a/packages/assets/scss/03-organisms/_action-details.scss b/packages/assets/scss/03-organisms/_action-details.scss index 4af3d5faba..94d4e2cb30 100644 --- a/packages/assets/scss/03-organisms/_action-details.scss +++ b/packages/assets/scss/03-organisms/_action-details.scss @@ -159,7 +159,7 @@ &__title { - @include ma-heading-colored($c-primary-alt); + @include ma-heading-colored(var(--mf-c-primary-alt)); color: var(--mf-c-font-inverse); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 079e112883..302c498d5c 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -171,7 +171,7 @@ $action-finder-border-color: mix($c-white, $c-primary, 50%); } &--no-background { - background-image: linear-gradient(180deg, $c-bg 50px, $c-bg-section 51px); + background-image: linear-gradient(180deg, var(--mf-c-bg) 50px, var(--mf-c-bg-section) 51px); } &__category { diff --git a/packages/assets/scss/03-organisms/_blog-feed.scss b/packages/assets/scss/03-organisms/_blog-feed.scss index d366a926ea..412a3b89f7 100644 --- a/packages/assets/scss/03-organisms/_blog-feed.scss +++ b/packages/assets/scss/03-organisms/_blog-feed.scss @@ -101,7 +101,7 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } &__date { diff --git a/packages/assets/scss/03-organisms/_change-log.scss b/packages/assets/scss/03-organisms/_change-log.scss index 1999998f1e..e62bf4ae44 100644 --- a/packages/assets/scss/03-organisms/_change-log.scss +++ b/packages/assets/scss/03-organisms/_change-log.scss @@ -108,7 +108,7 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } &__date { diff --git a/packages/assets/scss/03-organisms/_feedback-form.scss b/packages/assets/scss/03-organisms/_feedback-form.scss index f6facb2103..afa7c8a67f 100644 --- a/packages/assets/scss/03-organisms/_feedback-form.scss +++ b/packages/assets/scss/03-organisms/_feedback-form.scss @@ -185,7 +185,7 @@ $feedback-form-bp-min: "min-width: 751px"; &__title { - @include ma-border-decorative($c-highlight, 1); + @include ma-border-decorative(var(--mf-c-highlight), 1); color: var(--mf-c-font-inverse); } @@ -195,7 +195,7 @@ $feedback-form-bp-min: "min-width: 751px"; input[type="button"], input[type="submit"] { - @include ma-button("solid", $c-primary); + @include ma-button("solid", var(--mf-c-primary)); } } diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index e7a4a6c71a..20ceb939ad 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -131,7 +131,7 @@ &__back2top { - @include ma-button("outline", $c-primary); + @include ma-button("outline", var(--mf-c-primary)); background-color: rgba($c-white, 0.9); svg { diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index d1eb767fb7..9e2ce25af6 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -300,7 +300,7 @@ body.show-menu { } &__menu-home-link { - color: $c-white; + color: var(--mf-c-white); display: inline-flex; gap: 0.5em; align-items: center; diff --git a/packages/assets/scss/03-organisms/_help-tip.scss b/packages/assets/scss/03-organisms/_help-tip.scss index b1e0de7b45..800cb9d41e 100644 --- a/packages/assets/scss/03-organisms/_help-tip.scss +++ b/packages/assets/scss/03-organisms/_help-tip.scss @@ -149,7 +149,7 @@ $border-width: 1px; &:focus { outline: 0; - box-shadow: focus-shadow($border-width, $c-focus); + box-shadow: focus-shadow($border-width, var(--mf-c-focus)); } } diff --git a/packages/assets/scss/03-organisms/_jump-links.scss b/packages/assets/scss/03-organisms/_jump-links.scss index db85af970c..3c5c85d923 100644 --- a/packages/assets/scss/03-organisms/_jump-links.scss +++ b/packages/assets/scss/03-organisms/_jump-links.scss @@ -264,7 +264,7 @@ } &__title { - background-image: linear-gradient(-60deg, transparent, transparent 35px, $c-primary-alt 35px); + background-image: linear-gradient(-60deg, transparent, transparent 35px, var(--mf-c-primary-alt) 35px); color: var(--mf-c-font-inverse); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/03-organisms/_page-banner.scss b/packages/assets/scss/03-organisms/_page-banner.scss index 55fc890dae..790d899f6e 100644 --- a/packages/assets/scss/03-organisms/_page-banner.scss +++ b/packages/assets/scss/03-organisms/_page-banner.scss @@ -1,15 +1,15 @@ @use "00-base/configure" as *; $bgcolors: ( - "c-primary": $c-primary, - "c-primary-alt": $c-primary-alt, - "c-white": $c-white + "c-primary": var(--mf-c-primary), + "c-primary-alt": var(--mf-c-primary-alt), + "c-white": var(--mf-c-white) ); $textcolors: ( - "c-primary": $c-font-inverse, - "c-primary-alt": $c-font-inverse, - "c-white": $c-font-base, + "c-primary": var(--mf-c-font-inverse), + "c-primary-alt": var(--mf-c-font-inverse), + "c-white": var(--mf-c-font-base), ); /* Apply basic styling to the banner container */ diff --git a/packages/assets/scss/03-organisms/_pullquote.scss b/packages/assets/scss/03-organisms/_pullquote.scss index e3b9ff0cba..b57c0e2ca4 100644 --- a/packages/assets/scss/03-organisms/_pullquote.scss +++ b/packages/assets/scss/03-organisms/_pullquote.scss @@ -25,7 +25,7 @@ /* background fallback */ background-color: var(--mf-c-primary-alt); /* will be on top of fallback, if browser supports it */ - background-image: linear-gradient(120deg, $c-primary-alt 65px, $c-white 0); + background-image: linear-gradient(120deg, var(--mf-c-primary-alt) 65px, var(--mf-c-white) 0); position: absolute; top: 0; } diff --git a/packages/assets/scss/03-organisms/_related-locations.scss b/packages/assets/scss/03-organisms/_related-locations.scss index 604c64b9da..d90c967826 100644 --- a/packages/assets/scss/03-organisms/_related-locations.scss +++ b/packages/assets/scss/03-organisms/_related-locations.scss @@ -26,7 +26,7 @@ @include ma-border-decorative; - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); margin-bottom: 45px; padding-bottom: 16px; } diff --git a/packages/assets/scss/03-organisms/_rich-text.scss b/packages/assets/scss/03-organisms/_rich-text.scss index 108395a5e2..9a8dca0b42 100644 --- a/packages/assets/scss/03-organisms/_rich-text.scss +++ b/packages/assets/scss/03-organisms/_rich-text.scss @@ -292,7 +292,7 @@ $heading-indent: $gutter; h2, h3, h4 { - @include ma-comp-heading($c-primary-alt); + @include ma-comp-heading(var(--mf-c-primary-alt)); } h5 { diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index b627b2eab1..dd1baebf16 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -186,7 +186,7 @@ } &__title { - background-image: linear-gradient(-60deg, transparent, transparent 35px, $c-primary-alt 35px); + background-image: linear-gradient(-60deg, transparent, transparent 35px, var(--mf-c-primary-alt) 35px); color: var(--mf-c-font-inverse); font-weight: $fonts-bold; } @@ -400,7 +400,7 @@ button { - @include ma-button("solid",$c-primary); + @include ma-button("solid",var(--mf-c-primary)); font-size: $fonts-large; padding: 10px 0; width: 100%; diff --git a/packages/assets/scss/03-organisms/_suggested-pages.scss b/packages/assets/scss/03-organisms/_suggested-pages.scss index ea97164aae..282ced9049 100644 --- a/packages/assets/scss/03-organisms/_suggested-pages.scss +++ b/packages/assets/scss/03-organisms/_suggested-pages.scss @@ -200,7 +200,7 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } @media ($bp-large-min) { diff --git a/packages/assets/scss/03-organisms/_test-feed.scss b/packages/assets/scss/03-organisms/_test-feed.scss index 7117e4847d..0b844014e2 100644 --- a/packages/assets/scss/03-organisms/_test-feed.scss +++ b/packages/assets/scss/03-organisms/_test-feed.scss @@ -122,7 +122,7 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } &__icon { diff --git a/packages/assets/scss/03-organisms/_top-actions.scss b/packages/assets/scss/03-organisms/_top-actions.scss index e5faf7714c..9e891982df 100644 --- a/packages/assets/scss/03-organisms/_top-actions.scss +++ b/packages/assets/scss/03-organisms/_top-actions.scss @@ -42,7 +42,7 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt)); } &__item { diff --git a/packages/assets/scss/04-templates/_details.scss b/packages/assets/scss/04-templates/_details.scss index d9a66c0149..a1eb65b8bd 100644 --- a/packages/assets/scss/04-templates/_details.scss +++ b/packages/assets/scss/04-templates/_details.scss @@ -66,7 +66,7 @@ .ma__sidebar-heading, .ma__comp-heading { - @include ma-heading-colored($c-primary-alt); + @include ma-heading-colored(var(--mf-c-primary-alt)); } } From 2c5003c77a5ca8ca72d9b906b8653704dd5dc806 Mon Sep 17 00:00:00 2001 From: Ethansev Date: Sun, 13 Jul 2025 14:37:53 -0700 Subject: [PATCH 19/25] Added new pre-calculated CSS variables for transparency and gradients. Created new --mf-box-shadow css variable and updated mixins to handle dynamic variables. --- .../assets/scss/00-base/_color-tokens.scss | 637 ++++++++++++------ packages/assets/scss/00-base/_colors.scss | 152 ++--- packages/assets/scss/00-base/_pikaday.scss | 2 +- packages/assets/scss/00-base/_variables.scss | 4 + .../00-base/mixins/_ma-border-decorative.scss | 47 +- .../scss/00-base/mixins/_ma-button-base.scss | 2 +- .../scss/00-base/mixins/_ma-button.scss | 38 +- .../00-base/mixins/_ma-emergency-alert.scss | 48 +- .../00-base/mixins/_ma-emergency-header.scss | 18 +- .../00-base/mixins/_ma-layout-left-col.scss | 4 +- .../mixins/_ma-truncated-body-text.scss | 4 +- .../scss/01-atoms/_button-with-icon.scss | 187 +++-- .../scss/01-atoms/_decorative-link.scss | 12 +- packages/assets/scss/01-atoms/_forms.scss | 8 +- .../assets/scss/01-atoms/_input-checkbox.scss | 4 +- .../assets/scss/01-atoms/_input-fuzzy.scss | 2 +- .../assets/scss/01-atoms/_input-radio.scss | 26 +- .../scss/01-atoms/_input-typeahead.scss | 2 +- .../assets/scss/01-atoms/_select-box.scss | 6 +- .../scss/01-atoms/_table-responsive.scss | 8 +- packages/assets/scss/01-atoms/_video.scss | 4 +- .../assets/scss/02-molecules/_arrow-nav.scss | 2 +- .../scss/02-molecules/_button-alert.scss | 6 +- .../scss/02-molecules/_callout-link.scss | 23 +- .../scss/02-molecules/_callout-stats.scss | 2 +- .../scss/02-molecules/_emergency-alert.scss | 8 +- .../scss/02-molecules/_emergency-header.scss | 4 +- .../scss/02-molecules/_featured-item.scss | 2 +- .../scss/02-molecules/_footer-links.scss | 2 +- .../scss/02-molecules/_header-tags.scss | 2 +- .../scss/02-molecules/_illustrated-link.scss | 6 +- .../scss/02-molecules/_keyword-search.scss | 2 +- .../scss/02-molecules/_link-dropdown.scss | 2 +- .../scss/02-molecules/_location-filters.scss | 2 +- .../assets/scss/02-molecules/_main-nav.scss | 4 +- .../assets/scss/02-molecules/_map-google.scss | 2 +- .../scss/02-molecules/_map-leaflet.scss | 2 +- .../02-molecules/_multiselect-dropdown.scss | 2 +- .../assets/scss/02-molecules/_popover.scss | 2 +- .../_relationship-indicators.scss | 8 +- .../scss/02-molecules/_secondary-nav.scss | 2 +- .../assets/scss/02-molecules/_sticky-nav.scss | 4 +- .../assets/scss/02-molecules/_wait-time.scss | 2 +- .../scss/03-organisms/_action-card.scss | 24 +- .../scss/03-organisms/_action-finder.scss | 10 +- .../scss/03-organisms/_banner-carousel.scss | 2 +- .../assets/scss/03-organisms/_blog-feed.scss | 4 +- .../scss/03-organisms/_breadcrumbs.scss | 10 +- .../scss/03-organisms/_callout-alert.scss | 40 +- .../scss/03-organisms/_callout-message.scss | 10 +- .../scss/03-organisms/_campaign-video.scss | 4 +- .../assets/scss/03-organisms/_change-log.scss | 2 +- .../scss/03-organisms/_emergency-alerts.scss | 81 ++- .../assets/scss/03-organisms/_error-page.scss | 2 +- .../scss/03-organisms/_feedback-form.scss | 2 +- .../03-organisms/_footer-with-columns.scss | 4 +- .../assets/scss/03-organisms/_footer.scss | 2 +- .../scss/03-organisms/_header-hamburger.scss | 10 +- .../assets/scss/03-organisms/_header.scss | 6 +- .../assets/scss/03-organisms/_help-tip.scss | 2 +- .../scss/03-organisms/_in-page-alert.scss | 2 +- .../scss/03-organisms/_key-message.scss | 4 +- .../03-organisms/_page-banner-legacy.scss | 12 +- .../scss/03-organisms/_page-flipper.scss | 2 +- .../scss/03-organisms/_person-card.scss | 2 +- .../scss/03-organisms/_related-locations.scss | 2 +- .../scss/03-organisms/_search-banner.scss | 20 +- .../03-organisms/_search-box-with-links.scss | 2 +- .../assets/scss/03-organisms/_sticky-toc.scss | 4 +- .../scss/03-organisms/_suggested-pages.scss | 2 +- .../_table-of-contents-hierarchy.scss | 2 +- .../_table-of-contents-overlay.scss | 2 +- .../scss/03-organisms/_teaser-listing.scss | 2 +- .../assets/scss/03-organisms/_test-feed.scss | 2 +- .../scss/03-organisms/_top-actions.scss | 2 +- .../scss/03-organisms/_transition-page.scss | 2 +- .../scss/03-organisms/_utility-nav.scss | 2 +- .../scss/03-organisms/_utility-panel.scss | 4 +- .../scss/04-templates/_narrow-template.scss | 6 +- .../04-templates/_organization-details.scss | 2 +- .../stories/tokens/colors/_color-display.scss | 44 +- .../src/components/base/Colors/_index.scss | 60 +- 82 files changed, 1023 insertions(+), 680 deletions(-) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index 33b6a659bc..2c62153ab2 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -1,233 +1,448 @@ // Bay Blue (#14558f) -$c-bay-blue-90-tint: #E8EEF4 !default; -$c-bay-blue-80-tint: #D0DDE9 !default; -$c-bay-blue-70-tint: #B9CCDD !default; -$c-bay-blue-60-tint: #A1BBD2 !default; -$c-bay-blue-50-tint: #8AAAC7 !default; -$c-bay-blue-40-tint: #7299BC !default; -$c-bay-blue-30-tint: #5B88B1 !default; -$c-bay-blue-20-tint: #4377A5 !default; -$c-bay-blue-10-tint: #2C669A !default; -$c-bay-blue: #14558f !default; -$c-bay-blue-10-shade: #124D81 !default; -$c-bay-blue-20-shade: #104472 !default; -$c-bay-blue-30-shade: #0E3C64 !default; -$c-bay-blue-40-shade: #0C3356 !default; -$c-bay-blue-50-shade: #0A2B48 !default; - -$c-bay-blue-light: $c-bay-blue-20-tint; //Commonly used in outlines -$c-bay-blue-lighter: $c-bay-blue-50-tint !default; //Commonly used in outlines -$c-bay-blue-lightest: $c-bay-blue-90-tint !default; //Commonly used in background -$c-bay-blue-darker: $c-bay-blue-30-shade !default; -$c-bay-blue-darkest: $c-bay-blue-50-shade !default; +$c-bay-blue-90-tint: #e8eef4 !default; +$c-bay-blue-80-tint: #d0dde9 !default; +$c-bay-blue-70-tint: #b9ccdd !default; +$c-bay-blue-60-tint: #a1bbd2 !default; +$c-bay-blue-50-tint: #8aaac7 !default; +$c-bay-blue-40-tint: #7299bc !default; +$c-bay-blue-30-tint: #5b88b1 !default; +$c-bay-blue-20-tint: #4377a5 !default; +$c-bay-blue-10-tint: #2c669a !default; +$c-bay-blue: #14558f !default; +$c-bay-blue-10-shade: #124d81 !default; +$c-bay-blue-20-shade: #104472 !default; +$c-bay-blue-30-shade: #0e3c64 !default; +$c-bay-blue-40-shade: #0c3356 !default; +$c-bay-blue-50-shade: #0a2b48 !default; + +$c-bay-blue-light: $c-bay-blue-20-tint; //Commonly used in outlines +$c-bay-blue-lighter: $c-bay-blue-50-tint !default; //Commonly used in outlines +$c-bay-blue-lightest: $c-bay-blue-90-tint !default; //Commonly used in background +$c-bay-blue-darker: $c-bay-blue-30-shade !default; +$c-bay-blue-darkest: $c-bay-blue-50-shade !default; // Berkshires Green (#388557) -$c-berkshires-green-90-tint: #EBF3EE !default; -$c-berkshires-green-80-tint: #D7E7DD !default; -$c-berkshires-green-70-tint: #C3DACD !default; -$c-berkshires-green-60-tint: #AFCEBC !default; -$c-berkshires-green-50-tint: #9CC2AB !default; -$c-berkshires-green-40-tint: #88B69A !default; -$c-berkshires-green-30-tint: #74AA89 !default; -$c-berkshires-green-20-tint: #609D79 !default; -$c-berkshires-green-10-tint: #4C9168 !default; -$c-berkshires-green: #388557 !default; -$c-berkshires-green-10-shade: #32784E !default; -$c-berkshires-green-20-shade: #2D6A46 !default; -$c-berkshires-green-30-shade: #275D3D !default; -$c-berkshires-green-40-shade: #225034 !default; -$c-berkshires-green-50-shade: #1C432C !default; - -$c-berkshires-green-lighter: $c-berkshires-green-50-tint !default; //Commonly used in outlines -$c-berkshires-green-lightest: $c-berkshires-green-80-tint !default; //Commonly used in background -$c-berkshires-green-dark: #214F34 !default; // Followup needed: should be replaced with one of the gradient colors -$c-berkshires-green-darker: $c-berkshires-green-30-shade !default; -$c-berkshires-green-darkest: $c-berkshires-green-50-shade !default; +$c-berkshires-green-90-tint: #ebf3ee !default; +$c-berkshires-green-80-tint: #d7e7dd !default; +$c-berkshires-green-70-tint: #c3dacd !default; +$c-berkshires-green-60-tint: #afcebc !default; +$c-berkshires-green-50-tint: #9cc2ab !default; +$c-berkshires-green-40-tint: #88b69a !default; +$c-berkshires-green-30-tint: #74aa89 !default; +$c-berkshires-green-20-tint: #609d79 !default; +$c-berkshires-green-10-tint: #4c9168 !default; +$c-berkshires-green: #388557 !default; +$c-berkshires-green-10-shade: #32784e !default; +$c-berkshires-green-20-shade: #2d6a46 !default; +$c-berkshires-green-30-shade: #275d3d !default; +$c-berkshires-green-40-shade: #225034 !default; +$c-berkshires-green-50-shade: #1c432c !default; + +$c-berkshires-green-lighter: $c-berkshires-green-50-tint !default; //Commonly used in outlines +$c-berkshires-green-lightest: $c-berkshires-green-80-tint !default; //Commonly used in background +$c-berkshires-green-dark: #214f34 !default; // Followup needed: should be replaced with one of the gradient colors +$c-berkshires-green-darker: $c-berkshires-green-30-shade !default; +$c-berkshires-green-darkest: $c-berkshires-green-50-shade !default; // Duckling Yellow (#f6c51b) -$c-duckling-yellow-90-tint: #FEF9E8 !default; -$c-duckling-yellow-80-tint: #FDF3D1 !default; -$c-duckling-yellow-70-tint: #FCEEBB !default; -$c-duckling-yellow-60-tint: #FBE8A4 !default; -$c-duckling-yellow-50-tint: #FBE28D !default; -$c-duckling-yellow-40-tint: #FADC76 !default; -$c-duckling-yellow-30-tint: #F9D65F !default; -$c-duckling-yellow-20-tint: #F8D149 !default; -$c-duckling-yellow-10-tint: #F7CB32 !default; -$c-duckling-yellow: #f6c51b !default; -$c-duckling-yellow-10-shade: #DDB118 !default; -$c-duckling-yellow-20-shade: #C59E16 !default; -$c-duckling-yellow-30-shade: #AC8A13 !default; -$c-duckling-yellow-40-shade: #947610 !default; -$c-duckling-yellow-50-shade: #7B630E !default; - -$c-duckling-yellow-lighter: $c-duckling-yellow-50-tint !default; //Commonly used in outlines -$c-duckling-yellow-lightest: $c-duckling-yellow-90-tint !default; //Commonly used in background -$c-duckling-yellow-darker: $c-duckling-yellow-30-shade !default; -$c-duckling-yellow-darkest: $c-duckling-yellow-50-shade !default; +$c-duckling-yellow-90-tint: #fef9e8 !default; +$c-duckling-yellow-80-tint: #fdf3d1 !default; +$c-duckling-yellow-70-tint: #fceebb !default; +$c-duckling-yellow-60-tint: #fbe8a4 !default; +$c-duckling-yellow-50-tint: #fbe28d !default; +$c-duckling-yellow-40-tint: #fadc76 !default; +$c-duckling-yellow-30-tint: #f9d65f !default; +$c-duckling-yellow-20-tint: #f8d149 !default; +$c-duckling-yellow-10-tint: #f7cb32 !default; +$c-duckling-yellow: #f6c51b !default; +$c-duckling-yellow-10-shade: #ddb118 !default; +$c-duckling-yellow-20-shade: #c59e16 !default; +$c-duckling-yellow-30-shade: #ac8a13 !default; +$c-duckling-yellow-40-shade: #947610 !default; +$c-duckling-yellow-50-shade: #7b630e !default; + +$c-duckling-yellow-lighter: $c-duckling-yellow-50-tint !default; //Commonly used in outlines +$c-duckling-yellow-lightest: $c-duckling-yellow-90-tint !default; //Commonly used in background +$c-duckling-yellow-darker: $c-duckling-yellow-30-shade !default; +$c-duckling-yellow-darkest: $c-duckling-yellow-50-shade !default; // Independence Cranberry (#680A1D) -$c-independence-cranberry-90-tint: #F0E7E8 !default; -$c-independence-cranberry-80-tint: #E1CED2 !default; -$c-independence-cranberry-70-tint: #D2B6BB !default; -$c-independence-cranberry-60-tint: #C39DA5 !default; -$c-independence-cranberry-50-tint: #B4858E !default; -$c-independence-cranberry-40-tint: #A46C77 !default; -$c-independence-cranberry-30-tint: #955461 !default; -$c-independence-cranberry-20-tint: #863B4A !default; -$c-independence-cranberry-10-tint: #772334 !default; -$c-independence-cranberry: #680A1D !default; -$c-independence-cranberry-10-shade: #5E091A !default; +$c-independence-cranberry-90-tint: #f0e7e8 !default; +$c-independence-cranberry-80-tint: #e1ced2 !default; +$c-independence-cranberry-70-tint: #d2b6bb !default; +$c-independence-cranberry-60-tint: #c39da5 !default; +$c-independence-cranberry-50-tint: #b4858e !default; +$c-independence-cranberry-40-tint: #a46c77 !default; +$c-independence-cranberry-30-tint: #955461 !default; +$c-independence-cranberry-20-tint: #863b4a !default; +$c-independence-cranberry-10-tint: #772334 !default; +$c-independence-cranberry: #680a1d !default; +$c-independence-cranberry-10-shade: #5e091a !default; $c-independence-cranberry-20-shade: #530817 !default; $c-independence-cranberry-30-shade: #490714 !default; -$c-independence-cranberry-40-shade: #3E0611 !default; -$c-independence-cranberry-50-shade: #34050F !default; +$c-independence-cranberry-40-shade: #3e0611 !default; +$c-independence-cranberry-50-shade: #34050f !default; -$c-independence-cranberry-lighter: $c-independence-cranberry-50-tint !default; //Commonly used in outlines -$c-independence-cranberry-lightest: $c-independence-cranberry-90-tint !default; //Commonly used in outlines -$c-independence-cranberry-darker: $c-independence-cranberry-30-shade !default; -$c-independence-cranberry-darkest: $c-independence-cranberry-50-shade !default; +$c-independence-cranberry-lighter: $c-independence-cranberry-50-tint !default; //Commonly used in outlines +$c-independence-cranberry-lightest: $c-independence-cranberry-90-tint !default; //Commonly used in outlines +$c-independence-cranberry-darker: $c-independence-cranberry-30-shade !default; +$c-independence-cranberry-darkest: $c-independence-cranberry-50-shade !default; // Base Gray Scale Colors -$c-revolution-gray: #141414 !default; -$c-granite-gray: #535353 !default; -$c-atlantic-gray: #707070 !default; -$c-overcast-gray: #DCDCDC !default; -$c-platinum-gray: #F2F2F2 !default; +$c-revolution-gray: #141414 !default; +$c-granite-gray: #535353 !default; +$c-atlantic-gray: #707070 !default; +$c-overcast-gray: #dcdcdc !default; +$c-platinum-gray: #f2f2f2 !default; // Gray Scale Spectrum Mapping -$c-black: #000000 !default; -$c-gray-darkest: $c-revolution-gray !default; +$c-black: #000000 !default; +$c-gray-darkest: $c-revolution-gray !default; // $c-gray-darker: (place holder) -$c-gray-dark: $c-granite-gray !default; -$c-gray: $c-atlantic-gray !default; -$c-gray-light: $c-overcast-gray !default; -$c-gray-lighter: #CCCCCC !default; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray -$c-gray-lightest: $c-platinum-gray !default; -$c-white: white !default; +$c-gray-dark: $c-granite-gray !default; +$c-gray: $c-atlantic-gray !default; +$c-gray-light: $c-overcast-gray !default; +$c-gray-lighter: #cccccc !default; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray +$c-gray-lightest: $c-platinum-gray !default; +$c-white: white !default; // Error Red (#CD0D0D) -$c-error-red: #CD0D0D !default; -$c-error-red-lighter: #EEACAC !default; //Commonly used in outlines -$c-error-red-lightest: #FCF3F3 !default; //Commonly used in background +$c-error-red: #cd0d0d !default; +$c-error-red-lighter: #eeacac !default; //Commonly used in outlines +$c-error-red-lightest: #fcf3f3 !default; //Commonly used in background // Focus Highlight (#3e94cf) -$c-focus-hightlight: #3e94cf !default; +$c-focus-hightlight: #3e94cf !default; :root { - // Bay Blue (#14558f) - --mf-c-bay-blue-90-tint: #{$c-bay-blue-90-tint}; - --mf-c-bay-blue-80-tint: #{$c-bay-blue-80-tint}; - --mf-c-bay-blue-70-tint: #{$c-bay-blue-70-tint}; - --mf-c-bay-blue-60-tint: #{$c-bay-blue-60-tint}; - --mf-c-bay-blue-50-tint: #{$c-bay-blue-50-tint}; - --mf-c-bay-blue-40-tint: #{$c-bay-blue-40-tint}; - --mf-c-bay-blue-30-tint: #{$c-bay-blue-30-tint}; - --mf-c-bay-blue-20-tint: #{$c-bay-blue-20-tint}; - --mf-c-bay-blue-10-tint: #{$c-bay-blue-10-tint}; - --mf-c-bay-blue: #{$c-bay-blue}; - --mf-c-bay-blue-10-shade: #{$c-bay-blue-10-shade}; - --mf-c-bay-blue-20-shade: #{$c-bay-blue-20-shade}; - --mf-c-bay-blue-30-shade: #{$c-bay-blue-30-shade}; - --mf-c-bay-blue-40-shade: #{$c-bay-blue-40-shade}; - --mf-c-bay-blue-50-shade: #{$c-bay-blue-50-shade}; - - --mf-c-bay-blue-light: #{$c-bay-blue-light}; //Commonly used in outlines - --mf-c-bay-blue-lighter: #{$c-bay-blue-lighter}; //Commonly used in outlines - --mf-c-bay-blue-lightest: #{$c-bay-blue-lightest}; //Commonly used in background - --mf-c-bay-blue-darker: #{$c-bay-blue-darker}; - --mf-c-bay-blue-darkest: #{$c-bay-blue-darkest}; - - // Berkshires Green (#388557) - --mf-c-berkshires-green-90-tint: #{$c-berkshires-green-90-tint}; - --mf-c-berkshires-green-80-tint: #{$c-berkshires-green-80-tint}; - --mf-c-berkshires-green-70-tint: #{$c-berkshires-green-70-tint}; - --mf-c-berkshires-green-60-tint: #{$c-berkshires-green-60-tint}; - --mf-c-berkshires-green-50-tint: #{$c-berkshires-green-50-tint}; - --mf-c-berkshires-green-40-tint: #{$c-berkshires-green-40-tint}; - --mf-c-berkshires-green-30-tint: #{$c-berkshires-green-30-tint}; - --mf-c-berkshires-green-20-tint: #{$c-berkshires-green-20-tint}; - --mf-c-berkshires-green-10-tint: #{$c-berkshires-green-10-tint}; - --mf-c-berkshires-green: #{$c-berkshires-green}; - --mf-c-berkshires-green-10-shade: #{$c-berkshires-green-10-shade}; - --mf-c-berkshires-green-20-shade: #{$c-berkshires-green-20-shade}; - --mf-c-berkshires-green-30-shade: #{$c-berkshires-green-30-shade}; - --mf-c-berkshires-green-40-shade: #{$c-berkshires-green-40-shade}; - --mf-c-berkshires-green-50-shade: #{$c-berkshires-green-50-shade}; - - --mf-c-berkshires-green-lighter: #{$c-berkshires-green-lighter}; //Commonly used in outlines - --mf-c-berkshires-green-lightest: #{$c-berkshires-green-lightest}; //Commonly used in background - --mf-c-berkshires-green-dark: #{$c-berkshires-green-dark}; // Followup needed: should be replaced with one of the gradient colors - --mf-c-berkshires-green-darker: #{$c-berkshires-green-darker}; - --mf-c-berkshires-green-darkest: #{$c-berkshires-green-darkest}; - - // Duckling Yellow (#f6c51b) - --mf-c-duckling-yellow-90-tint: #{$c-duckling-yellow-90-tint}; - --mf-c-duckling-yellow-80-tint: #{$c-duckling-yellow-80-tint}; - --mf-c-duckling-yellow-70-tint: #{$c-duckling-yellow-70-tint}; - --mf-c-duckling-yellow-60-tint: #{$c-duckling-yellow-60-tint}; - --mf-c-duckling-yellow-50-tint: #{$c-duckling-yellow-50-tint}; - --mf-c-duckling-yellow-40-tint: #{$c-duckling-yellow-40-tint}; - --mf-c-duckling-yellow-30-tint: #{$c-duckling-yellow-30-tint}; - --mf-c-duckling-yellow-20-tint: #{$c-duckling-yellow-20-tint}; - --mf-c-duckling-yellow-10-tint: #{$c-duckling-yellow-10-tint}; - --mf-c-duckling-yellow: #{$c-duckling-yellow}; - --mf-c-duckling-yellow-10-shade: #{$c-duckling-yellow-10-shade}; - --mf-c-duckling-yellow-20-shade: #{$c-duckling-yellow-20-shade}; - --mf-c-duckling-yellow-30-shade: #{$c-duckling-yellow-30-shade}; - --mf-c-duckling-yellow-40-shade: #{$c-duckling-yellow-40-shade}; - --mf-c-duckling-yellow-50-shade: #{$c-duckling-yellow-50-shade}; - - --mf-c-duckling-yellow-lighter: #{$c-duckling-yellow-lighter}; //Commonly used in outlines - --mf-c-duckling-yellow-lightest: #{$c-duckling-yellow-lightest}; //Commonly used in background - --mf-c-duckling-yellow-darker: #{$c-duckling-yellow-darker}; - --mf-c-duckling-yellow-darkest: #{$c-duckling-yellow-darkest}; - - // Independence Cranberry (#680A1D) - --mf-c-independence-cranberry-90-tint: #{$c-independence-cranberry-90-tint}; - --mf-c-independence-cranberry-80-tint: #{$c-independence-cranberry-80-tint}; - --mf-c-independence-cranberry-70-tint: #{$c-independence-cranberry-70-tint}; - --mf-c-independence-cranberry-60-tint: #{$c-independence-cranberry-60-tint}; - --mf-c-independence-cranberry-50-tint: #{$c-independence-cranberry-50-tint}; - --mf-c-independence-cranberry-40-tint: #{$c-independence-cranberry-40-tint}; - --mf-c-independence-cranberry-30-tint: #{$c-independence-cranberry-30-tint}; - --mf-c-independence-cranberry-20-tint: #{$c-independence-cranberry-20-tint}; - --mf-c-independence-cranberry-10-tint: #{$c-independence-cranberry-10-tint}; - --mf-c-independence-cranberry: #{$c-independence-cranberry}; - --mf-c-independence-cranberry-10-shade: #{$c-independence-cranberry-10-shade}; - --mf-c-independence-cranberry-20-shade: #{$c-independence-cranberry-20-shade}; - --mf-c-independence-cranberry-30-shade: #{$c-independence-cranberry-30-shade}; - --mf-c-independence-cranberry-40-shade: #{$c-independence-cranberry-40-shade}; - --mf-c-independence-cranberry-50-shade: #{$c-independence-cranberry-50-shade}; - - --mf-c-independence-cranberry-lighter: #{$c-independence-cranberry-lighter}; //Commonly used in outlines - --mf-c-independence-cranberry-lightest: #{$c-independence-cranberry-lightest}; //Commonly used in outlines - --mf-c-independence-cranberry-darker: #{$c-independence-cranberry-darker}; - --mf-c-independence-cranberry-darkest: #{$c-independence-cranberry-darkest}; - - // Base Gray Scale Colors - --mf-c-revolution-gray: #{$c-revolution-gray}; - --mf-c-granite-gray: #{$c-granite-gray}; - --mf-c-atlantic-gray: #{$c-atlantic-gray}; - --mf-c-overcast-gray: #{$c-overcast-gray}; - --mf-c-platinum-gray: #{$c-platinum-gray}; - - // Gray Scale Spectrum Mapping - --mf-c-black: #{$c-black}; - --mf-c-gray-darkest: #{$c-gray-darkest}; - // --mf-c-gray-darker: (place holder) - --mf-c-gray-dark: #{$c-gray-dark}; - --mf-c-gray: #{$c-gray}; - --mf-c-gray-light: #{$c-gray-light}; - --mf-c-gray-lighter: #{$c-gray-lighter}; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray - --mf-c-gray-lightest: #{$c-gray-lightest}; - --mf-c-white: #{$c-white}; - - // Error Red (#CD0D0D) - --mf-c-error-red: #{$c-error-red}; - --mf-c-error-red-lighter: #{$c-error-red-lighter}; //Commonly used in outlines - --mf-c-error-red-lightest: #{$c-error-red-lightest}; //Commonly used in background - - // Focus Highlight (#3e94cf) - --mf-c-focus-hightlight: #{$c-focus-hightlight}; + // Bay Blue (#14558f) + --mf-c-bay-blue-90-tint: #{$c-bay-blue-90-tint}; + --mf-c-bay-blue-80-tint: #{$c-bay-blue-80-tint}; + --mf-c-bay-blue-70-tint: #{$c-bay-blue-70-tint}; + --mf-c-bay-blue-60-tint: #{$c-bay-blue-60-tint}; + --mf-c-bay-blue-50-tint: #{$c-bay-blue-50-tint}; + --mf-c-bay-blue-40-tint: #{$c-bay-blue-40-tint}; + --mf-c-bay-blue-30-tint: #{$c-bay-blue-30-tint}; + --mf-c-bay-blue-20-tint: #{$c-bay-blue-20-tint}; + --mf-c-bay-blue-10-tint: #{$c-bay-blue-10-tint}; + --mf-c-bay-blue: #{$c-bay-blue}; + --mf-c-bay-blue-10-shade: #{$c-bay-blue-10-shade}; + --mf-c-bay-blue-20-shade: #{$c-bay-blue-20-shade}; + --mf-c-bay-blue-30-shade: #{$c-bay-blue-30-shade}; + --mf-c-bay-blue-40-shade: #{$c-bay-blue-40-shade}; + --mf-c-bay-blue-50-shade: #{$c-bay-blue-50-shade}; + + --mf-c-bay-blue-light: #{$c-bay-blue-light}; //Commonly used in outlines + --mf-c-bay-blue-lighter: #{$c-bay-blue-lighter}; //Commonly used in outlines + --mf-c-bay-blue-lightest: #{$c-bay-blue-lightest}; //Commonly used in background + --mf-c-bay-blue-darker: #{$c-bay-blue-darker}; + --mf-c-bay-blue-darkest: #{$c-bay-blue-darkest}; + + // Berkshires Green (#388557) + --mf-c-berkshires-green-90-tint: #{$c-berkshires-green-90-tint}; + --mf-c-berkshires-green-80-tint: #{$c-berkshires-green-80-tint}; + --mf-c-berkshires-green-70-tint: #{$c-berkshires-green-70-tint}; + --mf-c-berkshires-green-60-tint: #{$c-berkshires-green-60-tint}; + --mf-c-berkshires-green-50-tint: #{$c-berkshires-green-50-tint}; + --mf-c-berkshires-green-40-tint: #{$c-berkshires-green-40-tint}; + --mf-c-berkshires-green-30-tint: #{$c-berkshires-green-30-tint}; + --mf-c-berkshires-green-20-tint: #{$c-berkshires-green-20-tint}; + --mf-c-berkshires-green-10-tint: #{$c-berkshires-green-10-tint}; + --mf-c-berkshires-green: #{$c-berkshires-green}; + --mf-c-berkshires-green-10-shade: #{$c-berkshires-green-10-shade}; + --mf-c-berkshires-green-20-shade: #{$c-berkshires-green-20-shade}; + --mf-c-berkshires-green-30-shade: #{$c-berkshires-green-30-shade}; + --mf-c-berkshires-green-40-shade: #{$c-berkshires-green-40-shade}; + --mf-c-berkshires-green-50-shade: #{$c-berkshires-green-50-shade}; + + --mf-c-berkshires-green-lighter: #{$c-berkshires-green-lighter}; //Commonly used in outlines + --mf-c-berkshires-green-lightest: #{$c-berkshires-green-lightest}; //Commonly used in background + --mf-c-berkshires-green-dark: #{$c-berkshires-green-dark}; // Followup needed: should be replaced with one of the gradient colors + --mf-c-berkshires-green-darker: #{$c-berkshires-green-darker}; + --mf-c-berkshires-green-darkest: #{$c-berkshires-green-darkest}; + + // Duckling Yellow (#f6c51b) + --mf-c-duckling-yellow-90-tint: #{$c-duckling-yellow-90-tint}; + --mf-c-duckling-yellow-80-tint: #{$c-duckling-yellow-80-tint}; + --mf-c-duckling-yellow-70-tint: #{$c-duckling-yellow-70-tint}; + --mf-c-duckling-yellow-60-tint: #{$c-duckling-yellow-60-tint}; + --mf-c-duckling-yellow-50-tint: #{$c-duckling-yellow-50-tint}; + --mf-c-duckling-yellow-40-tint: #{$c-duckling-yellow-40-tint}; + --mf-c-duckling-yellow-30-tint: #{$c-duckling-yellow-30-tint}; + --mf-c-duckling-yellow-20-tint: #{$c-duckling-yellow-20-tint}; + --mf-c-duckling-yellow-10-tint: #{$c-duckling-yellow-10-tint}; + --mf-c-duckling-yellow: #{$c-duckling-yellow}; + --mf-c-duckling-yellow-10-shade: #{$c-duckling-yellow-10-shade}; + --mf-c-duckling-yellow-20-shade: #{$c-duckling-yellow-20-shade}; + --mf-c-duckling-yellow-30-shade: #{$c-duckling-yellow-30-shade}; + --mf-c-duckling-yellow-40-shade: #{$c-duckling-yellow-40-shade}; + --mf-c-duckling-yellow-50-shade: #{$c-duckling-yellow-50-shade}; + + --mf-c-duckling-yellow-lighter: #{$c-duckling-yellow-lighter}; //Commonly used in outlines + --mf-c-duckling-yellow-lightest: #{$c-duckling-yellow-lightest}; //Commonly used in background + --mf-c-duckling-yellow-darker: #{$c-duckling-yellow-darker}; + --mf-c-duckling-yellow-darkest: #{$c-duckling-yellow-darkest}; + + // Independence Cranberry (#680A1D) + --mf-c-independence-cranberry-90-tint: #{$c-independence-cranberry-90-tint}; + --mf-c-independence-cranberry-80-tint: #{$c-independence-cranberry-80-tint}; + --mf-c-independence-cranberry-70-tint: #{$c-independence-cranberry-70-tint}; + --mf-c-independence-cranberry-60-tint: #{$c-independence-cranberry-60-tint}; + --mf-c-independence-cranberry-50-tint: #{$c-independence-cranberry-50-tint}; + --mf-c-independence-cranberry-40-tint: #{$c-independence-cranberry-40-tint}; + --mf-c-independence-cranberry-30-tint: #{$c-independence-cranberry-30-tint}; + --mf-c-independence-cranberry-20-tint: #{$c-independence-cranberry-20-tint}; + --mf-c-independence-cranberry-10-tint: #{$c-independence-cranberry-10-tint}; + --mf-c-independence-cranberry: #{$c-independence-cranberry}; + --mf-c-independence-cranberry-10-shade: #{$c-independence-cranberry-10-shade}; + --mf-c-independence-cranberry-20-shade: #{$c-independence-cranberry-20-shade}; + --mf-c-independence-cranberry-30-shade: #{$c-independence-cranberry-30-shade}; + --mf-c-independence-cranberry-40-shade: #{$c-independence-cranberry-40-shade}; + --mf-c-independence-cranberry-50-shade: #{$c-independence-cranberry-50-shade}; + + --mf-c-independence-cranberry-lighter: #{$c-independence-cranberry-lighter}; //Commonly used in outlines + --mf-c-independence-cranberry-lightest: #{$c-independence-cranberry-lightest}; //Commonly used in outlines + --mf-c-independence-cranberry-darker: #{$c-independence-cranberry-darker}; + --mf-c-independence-cranberry-darkest: #{$c-independence-cranberry-darkest}; + + // Base Gray Scale Colors + --mf-c-revolution-gray: #{$c-revolution-gray}; + --mf-c-granite-gray: #{$c-granite-gray}; + --mf-c-atlantic-gray: #{$c-atlantic-gray}; + --mf-c-overcast-gray: #{$c-overcast-gray}; + --mf-c-platinum-gray: #{$c-platinum-gray}; + + // Gray Scale Spectrum Mapping + --mf-c-black: #{$c-black}; + --mf-c-gray-darkest: #{$c-gray-darkest}; + // --mf-c-gray-darker: (place holder) + --mf-c-gray-dark: #{$c-gray-dark}; + --mf-c-gray: #{$c-gray}; + --mf-c-gray-light: #{$c-gray-light}; + --mf-c-gray-lighter: #{$c-gray-lighter}; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray + --mf-c-gray-lightest: #{$c-gray-lightest}; + --mf-c-white: #{$c-white}; + + // Error Red (#CD0D0D) + --mf-c-error-red: #{$c-error-red}; + --mf-c-error-red-lighter: #{$c-error-red-lighter}; //Commonly used in outlines + --mf-c-error-red-lightest: #{$c-error-red-lightest}; //Commonly used in background + + // Focus Highlight (#3e94cf) + --mf-c-focus-hightlight: #{$c-focus-hightlight}; + + // White transparent variations + --mf-c-white-90: #ffffffe6; + --mf-c-white-89: #ffffffe3; + --mf-c-white-85: #ffffffd9; + --mf-c-white-80: #ffffffcc; + --mf-c-white-75: #ffffffbf; + --mf-c-white-70: #ffffffb3; + --mf-c-white-50: #ffffff80; + --mf-c-white-30: #ffffff4d; + + // Black transparent variations + --mf-c-black-60: #00000099; + --mf-c-black-50: #00000080; + --mf-c-black-25: #00000040; + --mf-c-black-20: #00000033; + --mf-c-black-16: #00000029; + --mf-c-box-shadow-black: #00000040; // 25% opacity (box shadows) + + // Revolution Gray transparent variations (font-base/gray-darkest) + --mf-c-font-base-89: #141414e3; + --mf-c-font-base-85: #141414d9; + --mf-c-font-base-80: #141414cc; + --mf-c-font-base-75: #141414bf; + --mf-c-font-base-50: #14141480; + --mf-c-font-base-30: #1414144d; + --mf-c-gray-darkest-60: #14141499; + --mf-c-gray-darkest-50: #14141480; + --mf-c-gray-darkest-40: #14141466; + --mf-c-gray-darkest-30: #1414144d; + + // Font dark variations (gray-dark/granite-gray) + --mf-c-font-dark-75: #535353bf; + --mf-c-font-dark-50: #53535380; + --mf-c-gray-dark-80: #535353cc; + --mf-c-gray-dark-75: #535353bf; + --mf-c-gray-dark-50: #70707080; + + // Font medium variations (gray/atlantic-gray) + --mf-c-font-medium-70: #707070b3; + --mf-c-gray-90: #707070e6; + --mf-c-gray-89: #707070e3; + --mf-c-gray-80: #707070cc; + --mf-c-gray-50: #70707080; + + // Font inverse variations (white) + --mf-c-font-inverse-90: #ffffffe6; + --mf-c-font-inverse-80: #ffffffcc; + --mf-c-font-inverse-75: #ffffffbf; + --mf-c-font-inverse-70: #ffffffb3; + --mf-c-font-inverse-50: #ffffff80; + --mf-c-font-inverse-30: #ffffff4d; + + // Border input variations (gray-light/overcast-gray) + --mf-c-bd-input-50: #cccccc80; + + // Background variations (white) + --mf-c-bg-50: #ffffff80; + --mf-c-bg-10: #ffffff1a; + + // Primary variations (bay-blue) + --mf-c-primary-89: #14558fe3; + --mf-c-primary-80: #14558fcc; + --mf-c-primary-75: #14558fbf; + --mf-c-primary-50: #14558f80; + --mf-c-primary-15: #14558f26; + --mf-c-primary-10: #14558f1a; + + // Primary alt variations (berkshires-green) + --mf-c-primary-alt-80: #388557cc; + --mf-c-primary-alt-75: #388557bf; + --mf-c-primary-alt-70: #388557b3; + --mf-c-primary-alt-50: #38855780; + --mf-c-primary-alt-40: #38855766; + --mf-c-primary-alt-15: #38855726; + + // Font link variations (bay-blue-40-tint) + --mf-c-font-link-80: #14558fcc; + --mf-c-font-link-70: #7299bcb3; + --mf-c-font-link-50: #7299bc80; + --mf-c-font-link-20: #7299bc33; + + // Highlight/Warning variations (duckling-yellow) + --mf-c-highlight-50: #f3c72480; + --mf-c-highlight-15: #f3c72426; + --mf-c-warning-90: #f3c724e6; + --mf-c-warning-50: #f3c72480; + + // Error variations + --mf-c-error-90: #cd0d0de6; + --mf-c-error-75: #cd0d0dbf; + --mf-c-error-50: #cd0d0d80; + + // Mixed colors + --mf-c-white-font-base-mix: #969696; // 50% white + 50% gray-darkest + --mf-c-bg-subtle-black-90: #ebebeb; // 90% bg-subtle + 10% black + --mf-c-font-link-white-10: #f5f8fb; // 10% font-link + 90% white + --mf-c-font-link-white-50: #d3e2ef; // 50% font-link + 50% white + --mf-c-bg-granite-gray-80: #e8e8e8; // 80% white + 20% granite-gray + --mf-c-white-gray-dark-90: #f7f7f7; // 90% white + 10% gray-dark + --mf-c-white-gray-dark-50: #a9a9a9; // 50% white + 50% gray-dark + --mf-c-white-error-red-90: #fde8e8; // 90% white + 10% error-red + + // Pre-mixed background colors (using existing tints) + --mf-c-bg-warning-90: #{$c-duckling-yellow-90-tint}; + --mf-c-bg-primary-90: #{$c-bay-blue-90-tint}; + --mf-c-bg-primary-alt-90: #{$c-berkshires-green-90-tint}; + --mf-c-bg-error-90: #{$c-error-red-lightest}; + --mf-c-bg-gray-90: #f2f2f2; // 90% white + 10% gray + + // Pre-mixed 50% blends + --mf-c-bg-warning-50: #{$c-duckling-yellow-50-tint}; + --mf-c-bg-primary-50: #{$c-bay-blue-50-tint}; + --mf-c-bg-primary-alt-50: #{$c-berkshires-green-50-tint}; + --mf-c-bg-error-50: #e99ba0; // 50% white + 50% error + --mf-c-bg-gray-50: #bfbfbf; // 50% white + 50% gray + + // Additional transparent variations for color-mix replacements + --mf-c-black-10: #0000001a; + --mf-c-white-40: #ffffff66; + --mf-c-white-20: #ffffff33; + --mf-c-primary-alt-20: #38855733; + --mf-c-font-link-90: #7299bce6; + --mf-c-bg-primary-89: #e9f0f6; // 89% white + 11% primary + --mf-c-bg-granite-gray-50: #b4b4b4; // 50% white + 50% granite-gray + --mf-c-font-link-white-70: #e8f0f7; // 70% white + 30% font-link + --mf-c-font-detail-white-70: #d5d5d5; // 70% white + 30% font-detail + --mf-c-warning-15: #f3c72426; // 15% opacity (alias for duckling-yellow) + --mf-c-font-link-white-90: #f7fafc; // 90% white + 10% font-link + + // Bay Blue tints (mixed with white) + --mf-c-bay-blue-90: #{$c-bay-blue-90-tint}; + --mf-c-bay-blue-80: #{$c-bay-blue-80-tint}; + --mf-c-bay-blue-70: #{$c-bay-blue-70-tint}; + --mf-c-bay-blue-60: #{$c-bay-blue-60-tint}; + --mf-c-bay-blue-50: #{$c-bay-blue-50-tint}; + --mf-c-bay-blue-40: #{$c-bay-blue-40-tint}; + --mf-c-bay-blue-30: #{$c-bay-blue-30-tint}; + --mf-c-bay-blue-20: #{$c-bay-blue-20-tint}; + --mf-c-bay-blue-10: #{$c-bay-blue-10-tint}; + + // Bay Blue shades (mixed with black) + --mf-c-bay-blue-shade-10: #{$c-bay-blue-10-shade}; + --mf-c-bay-blue-shade-20: #{$c-bay-blue-20-shade}; + --mf-c-bay-blue-shade-30: #{$c-bay-blue-30-shade}; + --mf-c-bay-blue-shade-40: #{$c-bay-blue-40-shade}; + --mf-c-bay-blue-shade-50: #{$c-bay-blue-50-shade}; + + // Duckling Yellow tints + --mf-c-duckling-yellow-90: #{$c-duckling-yellow-90-tint}; + --mf-c-duckling-yellow-80: #{$c-duckling-yellow-80-tint}; + --mf-c-duckling-yellow-70: #{$c-duckling-yellow-70-tint}; + --mf-c-duckling-yellow-60: #{$c-duckling-yellow-60-tint}; + --mf-c-duckling-yellow-50: #{$c-duckling-yellow-50-tint}; + --mf-c-duckling-yellow-40: #{$c-duckling-yellow-40-tint}; + --mf-c-duckling-yellow-30: #{$c-duckling-yellow-30-tint}; + --mf-c-duckling-yellow-20: #{$c-duckling-yellow-20-tint}; + --mf-c-duckling-yellow-10: #{$c-duckling-yellow-10-tint}; + + // Duckling Yellow shades + --mf-c-duckling-yellow-shade-10: #{$c-duckling-yellow-10-shade}; + --mf-c-duckling-yellow-shade-20: #{$c-duckling-yellow-20-shade}; + --mf-c-duckling-yellow-shade-30: #{$c-duckling-yellow-30-shade}; + --mf-c-duckling-yellow-shade-40: #{$c-duckling-yellow-40-shade}; + --mf-c-duckling-yellow-shade-50: #{$c-duckling-yellow-50-shade}; + + // Berkshires Green tints + --mf-c-berkshires-green-90: #{$c-berkshires-green-90-tint}; + --mf-c-berkshires-green-80: #{$c-berkshires-green-80-tint}; + --mf-c-berkshires-green-70: #{$c-berkshires-green-70-tint}; + --mf-c-berkshires-green-60: #{$c-berkshires-green-60-tint}; + --mf-c-berkshires-green-50: #{$c-berkshires-green-50-tint}; + --mf-c-berkshires-green-40: #{$c-berkshires-green-40-tint}; + --mf-c-berkshires-green-30: #{$c-berkshires-green-30-tint}; + --mf-c-berkshires-green-20: #{$c-berkshires-green-20-tint}; + --mf-c-berkshires-green-10: #{$c-berkshires-green-10-tint}; + + // Berkshires Green shades + --mf-c-berkshires-green-shade-10: #{$c-berkshires-green-10-shade}; + --mf-c-berkshires-green-shade-20: #{$c-berkshires-green-20-shade}; + --mf-c-berkshires-green-shade-30: #{$c-berkshires-green-30-shade}; + --mf-c-berkshires-green-shade-40: #{$c-berkshires-green-40-shade}; + --mf-c-berkshires-green-shade-50: #{$c-berkshires-green-50-shade}; + + // Independence Cranberry tints + --mf-c-independence-cranberry-90: #{$c-independence-cranberry-90-tint}; + --mf-c-independence-cranberry-80: #{$c-independence-cranberry-80-tint}; + --mf-c-independence-cranberry-70: #{$c-independence-cranberry-70-tint}; + --mf-c-independence-cranberry-60: #{$c-independence-cranberry-60-tint}; + --mf-c-independence-cranberry-50: #{$c-independence-cranberry-50-tint}; + --mf-c-independence-cranberry-40: #{$c-independence-cranberry-40-tint}; + --mf-c-independence-cranberry-30: #{$c-independence-cranberry-30-tint}; + --mf-c-independence-cranberry-20: #{$c-independence-cranberry-20-tint}; + --mf-c-independence-cranberry-10: #{$c-independence-cranberry-10-tint}; + + // Independence Cranberry shades + --mf-c-independence-cranberry-shade-10: #{$c-independence-cranberry-10-shade}; + --mf-c-independence-cranberry-shade-20: #{$c-independence-cranberry-20-shade}; + --mf-c-independence-cranberry-shade-30: #{$c-independence-cranberry-30-shade}; + --mf-c-independence-cranberry-shade-40: #{$c-independence-cranberry-40-shade}; + --mf-c-independence-cranberry-shade-50: #{$c-independence-cranberry-50-shade}; + + // Button Icon Component Colors + --mf-button-icon-primary-base: var(--mf-c-primary); + --mf-button-icon-primary-transparent: var(--mf-c-primary-50); + --mf-button-icon-primary-alt-base: var(--mf-c-primary-alt); + --mf-button-icon-primary-alt-transparent: var(--mf-c-primary-alt-50); + --mf-button-icon-gray-darkest-base: var(--mf-c-gray-darkest); + --mf-button-icon-gray-darkest-transparent: var(--mf-c-gray-darkest-50); + --mf-button-icon-gray-dark-base: var(--mf-c-gray-dark); + --mf-button-icon-gray-dark-transparent: var(--mf-c-gray-dark-50); + --mf-button-icon-white-base: var(--mf-c-white); + --mf-button-icon-white-transparent: var(--mf-c-white-50); + --mf-button-icon-highlight-base: var(--mf-c-highlight); + --mf-button-icon-highlight-transparent: var(--mf-c-highlight-50); } diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 80bdbc7403..bb71f46ca5 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -1,98 +1,98 @@ // Mayflower Color Theme and Usage Mapping -@use 'color-tokens' as *; +@use "color-tokens" as *; // Theme Color Variables -$c-primary: $c-bay-blue !default; -$c-primary-light: $c-bay-blue-light !default; -$c-primary-lighter: $c-bay-blue-lighter !default; -$c-primary-lightest: $c-bay-blue-lightest !default; -$c-primary-alt: $c-berkshires-green !default; -$c-primary-alt-lighter: $c-berkshires-green-lighter !default; +$c-primary: $c-bay-blue !default; +$c-primary-light: $c-bay-blue-light !default; +$c-primary-lighter: $c-bay-blue-lighter !default; +$c-primary-lightest: $c-bay-blue-lightest !default; +$c-primary-alt: $c-berkshires-green !default; +$c-primary-alt-lighter: $c-berkshires-green-lighter !default; $c-primary-alt-lightest: $c-berkshires-green-lightest !default; -$c-primary-alt-dark: $c-berkshires-green-dark !default; -$c-highlight: $c-duckling-yellow !default; -$c-highlight-lighter: $c-duckling-yellow-lighter !default; -$c-highlight-lightest: $c-duckling-yellow-lightest !default; +$c-primary-alt-dark: $c-berkshires-green-dark !default; +$c-highlight: $c-duckling-yellow !default; +$c-highlight-lighter: $c-duckling-yellow-lighter !default; +$c-highlight-lightest: $c-duckling-yellow-lightest !default; // Utility Colors Variables -$c-error: $c-error-red !default; -$c-error-lighter: $c-error-red-lighter !default; -$c-error-lightest: $c-error-red-lightest !default; -$c-warning: $c-duckling-yellow !default; -$c-success: $c-berkshires-green !default; -$c-focus: $c-focus-hightlight !default; -$c-link: $c-bay-blue-40-tint !default;// For non text link elements -$c-visited: $c-independence-cranberry-10-tint !default; +$c-error: $c-error-red !default; +$c-error-lighter: $c-error-red-lighter !default; +$c-error-lightest: $c-error-red-lightest !default; +$c-warning: $c-duckling-yellow !default; +$c-success: $c-berkshires-green !default; +$c-focus: $c-focus-hightlight !default; +$c-link: $c-bay-blue-40-tint !default; // For non text link elements +$c-visited: $c-independence-cranberry-10-tint !default; -$c-font-base: $c-gray-darkest !default; -$c-font-detail: $c-gray-dark !default; -$c-font-dark: $c-gray-darkest !default; -$c-font-medium: $c-gray !default; +$c-font-base: $c-gray-darkest !default; +$c-font-detail: $c-gray-dark !default; +$c-font-dark: $c-gray-darkest !default; +$c-font-medium: $c-gray !default; -$c-font-heading: $c-gray-darkest !default; -$c-font-inverse: $c-white !default; -$c-font-link: $c-bay-blue !default; -$c-font-error: $c-error !default; +$c-font-heading: $c-gray-darkest !default; +$c-font-inverse: $c-white !default; +$c-font-link: $c-bay-blue !default; +$c-font-error: $c-error !default; -$c-bg: $c-white !default; -$c-bg-comp-title: $c-gray-dark !default; -$c-bg-subtle: $c-gray-lightest !default; -$c-bg-section: $c-gray-lightest !default; +$c-bg: $c-white !default; +$c-bg-comp-title: $c-gray-dark !default; +$c-bg-subtle: $c-gray-lightest !default; +$c-bg-section: $c-gray-lightest !default; -$c-bd: $c-gray-light !default; -$c-bd-divider: $c-gray-light !default; -$c-bd-divider-dark: $c-gray-dark !default; -$c-bd-error: $c-error !default; -$c-bd-input: $c-gray-light !default; -$c-bd-input-dark: $c-gray !default; +$c-bd: $c-gray-light !default; +$c-bd-divider: $c-gray-light !default; +$c-bd-divider-dark: $c-gray-dark !default; +$c-bd-error: $c-error !default; +$c-bd-input: $c-gray-light !default; +$c-bd-input-dark: $c-gray !default; // Box shadow -$c-box-shadow-black: rgba($c-black, 0.25) !default; +$c-box-shadow-black: var(--mf-c-black-25) !default; :root { - --mf-c-primary: #{$c-primary}; - --mf-c-primary-light: #{$c-primary-light}; - --mf-c-primary-lighter: #{$c-primary-lighter}; - --mf-c-primary-lightest: #{$c-primary-lightest}; - --mf-c-primary-alt: #{$c-primary-alt}; - --mf-c-primary-alt-lighter: #{$c-primary-alt-lighter}; - --mf-c-primary-alt-lightest: #{$c-primary-alt-lightest}; - --mf-c-primary-alt-dark: #{$c-primary-alt-dark}; - --mf-c-highlight: #{$c-highlight}; - --mf-c-highlight-lighter: #{$c-highlight-lighter}; - --mf-c-highlight-lightest: #{$c-highlight-lightest}; + --mf-c-primary: #{$c-primary}; + --mf-c-primary-light: #{$c-primary-light}; + --mf-c-primary-lighter: #{$c-primary-lighter}; + --mf-c-primary-lightest: #{$c-primary-lightest}; + --mf-c-primary-alt: #{$c-primary-alt}; + --mf-c-primary-alt-lighter: #{$c-primary-alt-lighter}; + --mf-c-primary-alt-lightest: #{$c-primary-alt-lightest}; + --mf-c-primary-alt-dark: #{$c-primary-alt-dark}; + --mf-c-highlight: #{$c-highlight}; + --mf-c-highlight-lighter: #{$c-highlight-lighter}; + --mf-c-highlight-lightest: #{$c-highlight-lightest}; - --mf-c-error: #{$c-error}; - --mf-c-error-lighter: #{$c-error-lighter}; - --mf-c-error-lightest: #{$c-error-lightest}; - --mf-c-warning: #{$c-warning}; - --mf-c-success: #{$c-success}; - --mf-c-focus: #{$c-focus}; - --mf-c-link: #{$c-link}; - --mf-c-visited: #{$c-visited}; + --mf-c-error: #{$c-error}; + --mf-c-error-lighter: #{$c-error-lighter}; + --mf-c-error-lightest: #{$c-error-lightest}; + --mf-c-warning: #{$c-warning}; + --mf-c-success: #{$c-success}; + --mf-c-focus: #{$c-focus}; + --mf-c-link: #{$c-link}; + --mf-c-visited: #{$c-visited}; - --mf-c-font-base: #{$c-font-base}; - --mf-c-font-detail: #{$c-font-detail}; - --mf-c-font-dark: #{$c-font-dark}; - --mf-c-font-medium: #{$c-font-medium}; + --mf-c-font-base: #{$c-font-base}; + --mf-c-font-detail: #{$c-font-detail}; + --mf-c-font-dark: #{$c-font-dark}; + --mf-c-font-medium: #{$c-font-medium}; - --mf-c-font-heading: #{$c-font-heading}; - --mf-c-font-inverse: #{$c-font-inverse}; - --mf-c-font-link: #{$c-font-link}; - --mf-c-font-error: #{$c-font-error}; + --mf-c-font-heading: #{$c-font-heading}; + --mf-c-font-inverse: #{$c-font-inverse}; + --mf-c-font-link: #{$c-font-link}; + --mf-c-font-error: #{$c-font-error}; - --mf-c-bg: #{$c-bg}; - --mf-c-bg-comp-title: #{$c-bg-comp-title}; - --mf-c-bg-subtle: #{$c-bg-subtle}; - --mf-c-bg-section: #{$c-bg-section}; + --mf-c-bg: #{$c-bg}; + --mf-c-bg-comp-title: #{$c-bg-comp-title}; + --mf-c-bg-subtle: #{$c-bg-subtle}; + --mf-c-bg-section: #{$c-bg-section}; - --mf-c-bd: #{$c-bd}; - --mf-c-bd-divider: #{$c-bd-divider}; - --mf-c-bd-divider-dark: #{$c-bd-divider-dark}; - --mf-c-bd-error: #{$c-bd-error}; - --mf-c-bd-input: #{$c-bd-input}; - --mf-c-bd-input-dark: #{$c-bd-input-dark}; + --mf-c-bd: #{$c-bd}; + --mf-c-bd-divider: #{$c-bd-divider}; + --mf-c-bd-divider-dark: #{$c-bd-divider-dark}; + --mf-c-bd-error: #{$c-bd-error}; + --mf-c-bd-input: #{$c-bd-input}; + --mf-c-bd-input-dark: #{$c-bd-input-dark}; - --mf-c-box-shadow-black: #{$c-box-shadow-black}; + --mf-c-box-shadow-black: #{$c-box-shadow-black}; } diff --git a/packages/assets/scss/00-base/_pikaday.scss b/packages/assets/scss/00-base/_pikaday.scss index 40e063bf4e..f098a9f2f0 100644 --- a/packages/assets/scss/00-base/_pikaday.scss +++ b/packages/assets/scss/00-base/_pikaday.scss @@ -51,7 +51,7 @@ } &:hover { - background-color: mix($c-white, $c-primary, 50%); + background-color: var(--mf-c-bg-primary-50); border-radius: 0; } diff --git a/packages/assets/scss/00-base/_variables.scss b/packages/assets/scss/00-base/_variables.scss index 9a69a9622a..1b7a5739fb 100644 --- a/packages/assets/scss/00-base/_variables.scss +++ b/packages/assets/scss/00-base/_variables.scss @@ -108,3 +108,7 @@ $letter-spacing-default: 0; // Box shadow $box-shadow: 0 0.25rem 0.5rem var(--mf-c-box-shadow-black) !default; + +:root { + --mf-box-shadow: 0 0.25rem 0.5rem var(--mf-c-box-shadow-black); +} diff --git a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss index 48adca0527..fa61e9e21b 100644 --- a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss +++ b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss @@ -5,28 +5,63 @@ @use "00-base/colors" as *; -@mixin ma-border-decorative($fg: transparent, $opacity: .5) { +@use "00-base/color-tokens" as *; +@mixin ma-border-decorative($fg: transparent, $opacity: 0.5) { @if ($fg == transparent) { position: relative; } &:after { - @if ($fg == transparent) { content: ""; height: 3px; position: absolute; - bottom: 0; - left: 0.075em; + bottom: 0; + left: 0.075em; transform: skew(-30deg); - width: $column; //85px + width: $column; //85px @media print { display: none; } } @else { - background-color: rgba($fg,$opacity); + // Handle different opacity values with pre-calculated CSS variables + + // Check if it's a CSS variable and use them directly + + @if (type-of($fg) == "string" and str-slice(#{$fg}, 1, 4) == "var(") { + background-color: $fg; + } @else { + @if $opacity == 0.5 { + @if $fg == $c-primary { + background-color: var(--mf-c-primary-50); + } @else if $fg == $c-primary-alt { + background-color: var(--mf-c-primary-alt-50); + } @else if $fg == $c-highlight { + background-color: var(--mf-c-highlight-50); + } @else if $fg == $c-error { + background-color: var(--mf-c-error-50); + } @else { + // Fallback for unknown colors + background-color: rgba($fg, $opacity); + } + } @else if $opacity == 0.75 { + @if $fg == $c-primary { + background-color: var(--mf-c-primary-75); + } @else if $fg == $c-primary-alt { + background-color: var(--mf-c-primary-alt-75); + } @else if $fg == $c-error { + background-color: var(--mf-c-error-75); + } @else { + // Fallback for unknown colors + background-color: rgba($fg, $opacity); + } + } @else { + // Fallback for other opacity values + background-color: rgba($fg, $opacity); + } + } .no-cssgradients & { background-color: $fg; diff --git a/packages/assets/scss/00-base/mixins/_ma-button-base.scss b/packages/assets/scss/00-base/mixins/_ma-button-base.scss index 43459f51c5..b1433af22f 100644 --- a/packages/assets/scss/00-base/mixins/_ma-button-base.scss +++ b/packages/assets/scss/00-base/mixins/_ma-button-base.scss @@ -4,7 +4,7 @@ @mixin ma-button-base { border: 3px solid; - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); display: inline-flex; align-items: center; justify-content: center; diff --git a/packages/assets/scss/00-base/mixins/_ma-button.scss b/packages/assets/scss/00-base/mixins/_ma-button.scss index f0fe55f19f..3149f002b3 100644 --- a/packages/assets/scss/00-base/mixins/_ma-button.scss +++ b/packages/assets/scss/00-base/mixins/_ma-button.scss @@ -13,8 +13,7 @@ @use "ma-button-base" as *; -@mixin ma-button ($type:"solid", $color:"transparent") { - +@mixin ma-button($type: "solid", $color: "transparent") { @if ($color != "transparent") { font-weight: $fonts-bold; // solid - primary usage (default) @@ -24,7 +23,17 @@ border-color: transparent; &:hover:not(:disabled) { - background-color: rgba($color,.75); + @if $color == $c-primary { + background-color: var(--mf-c-primary-75); + } @else if $color == $c-primary-alt { + background-color: var(--mf-c-primary-alt-75); + } @else if $color == $c-error { + background-color: var(--mf-c-error-75); + } @else if $color == $c-gray-dark { + background-color: var(--mf-c-gray-dark-75); + } @else { + background-color: $color; + } } @if $color == $c-white { @@ -37,7 +46,6 @@ &:hover:not(:disabled) { background-color: var(--mf-c-gray-light); } - } @else if $color == $c-highlight { color: var(--mf-c-gray-darkest); @@ -51,20 +59,30 @@ fill: var(--mf-c-font-inverse); } } - } // outline - secondary usage @else { background-color: var(--mf-c-font-inverse); - border-color: rgba($color,.5); + + @if $color == $c-primary { + border-color: var(--mf-c-primary-50); + } @else if $color == $c-primary-alt { + border-color: var(--mf-c-primary-alt-50); + } @else if $color == $c-error { + border-color: var(--mf-c-error-50); + } @else if $color == $c-gray-dark { + border-color: var(--mf-c-font-dark-50); + } @else { + border-color: rgba($color, 0.5); + } &:hover:not(:disabled) { - background-color: rgba($color,1); + background-color: $color; } @if $color == $c-highlight { color: var(--mf-c-gray-darkest); - border-color: rgba($c-highlight,.5); + border-color: var(--mf-c-highlight-50); svg { fill: var(--mf-c-gray-darkest); @@ -77,7 +95,6 @@ fill: var(--mf-c-gray-darkest); } } - } @else { color: $color; @@ -97,8 +114,7 @@ } } -@mixin ma-button-size ($size:"normal") { - +@mixin ma-button-size($size: "normal") { @if ($size == "normal") { font-size: $fonts-medium; line-height: 1.4; diff --git a/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss b/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss index 80ed65b848..53023a51ec 100644 --- a/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss +++ b/packages/assets/scss/00-base/mixins/_ma-emergency-alert.scss @@ -8,10 +8,46 @@ @mixin ma-emergency-alert ($color) { color: var(--mf-c-font-base); - background-color: mix($c-bg, $color, 90%); - + + // Use pre-defined color mixes for known colors + + @if $color == $c-warning { + background-color: var(--mf-c-bg-warning-90); + + & + & { + border-top-color: var(--mf-c-bg-warning-50); + } + } @else if $color == $c-primary { + background-color: var(--mf-c-bg-primary-90); + + & + & { + border-top-color: var(--mf-c-bg-primary-50); + } + } @else if $color == $c-primary-alt { + background-color: var(--mf-c-bg-primary-alt-90); + + & + & { + border-top-color: var(--mf-c-bg-primary-alt-50); + } + } @else if $color == $c-error { + background-color: var(--mf-c-bg-error-90); + + & + & { + border-top-color: var(--mf-c-bg-error-50); + } + } @else if $color == $c-gray { + background-color: var(--mf-c-bg-gray-90); + & + & { - border-top-color: mix($c-bg, $color, 50%); + border-top-color: var(--mf-c-bg-gray-50); + } + } @else { + // Fallback for unknown colors + background-color: var(--mf-c-bg); + + & + & { + border-top-color: var(--mf-c-bd-divider); + } } .ma__emergency-alert__link { @@ -26,15 +62,15 @@ span { display: inline; - border-bottom: 1px solid rgba($c-font-base, .5); + border-bottom: 1px solid var(--mf-c-font-base-50); &:hover { - border-bottom: 3px solid rgba($c-font-base, .75); + border-bottom: 3px solid var(--mf-c-font-base-75); } } svg { - fill: mix($c-white, $c-font-base, 50%); + fill: var(--mf-c-white-font-base-mix); } &:hover { diff --git a/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss b/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss index 5d6ec12039..1ebc0cd0e5 100644 --- a/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss +++ b/packages/assets/scss/00-base/mixins/_ma-emergency-header.scss @@ -10,21 +10,21 @@ } @else { color: var(--mf-c-font-inverse); } - background-color: rgba($color, 1); - border-color: rgba($color, 1); + background-color: $color; + border-color: $color; .ma__emergency-header__label { @if $color == $c-highlight { - color: rgba($c-font-base, .8); - border-right-color: rgba($c-font-base,.3); + color: var(--mf-c-font-base-80); + border-right-color: var(--mf-c-font-base-30); svg { fill: var(--mf-c-font-base); } } @else { color: var(--mf-c-font-inverse); - border-right-color: rgba($c-font-inverse,.3); + border-right-color: var(--mf-c-font-inverse-30); svg { fill: var(--mf-c-font-inverse); @@ -40,20 +40,20 @@ .ma__content-link { color: var(--mf-c-font-base); - border-bottom: 1px solid rgba($c-font-base, .5); + border-bottom: 1px solid var(--mf-c-font-base-50); &:hover { - border-bottom: 3px solid rgba($c-font-base, .75); + border-bottom: 3px solid var(--mf-c-font-base-75); } } } @else { .ma__content-link { color: var(--mf-c-font-inverse); - border-bottom: 1px solid rgba($c-font-inverse, .5); + border-bottom: 1px solid var(--mf-c-font-inverse-50); &:hover { - border-bottom: 3px solid rgba($c-font-inverse, .75); + border-bottom: 3px solid var(--mf-c-font-inverse-75); } } } diff --git a/packages/assets/scss/00-base/mixins/_ma-layout-left-col.scss b/packages/assets/scss/00-base/mixins/_ma-layout-left-col.scss index d400898647..141038c1f3 100644 --- a/packages/assets/scss/00-base/mixins/_ma-layout-left-col.scss +++ b/packages/assets/scss/00-base/mixins/_ma-layout-left-col.scss @@ -1,4 +1,4 @@ -@use "variables" as *; +@use "00-base/variables" as *; @use "00-base/breakpoints" as *; @@ -17,4 +17,4 @@ $layout-left-col-width-x-largin: 170px; @media ($bp-medium-max) { width: 100%; } -} \ No newline at end of file +} diff --git a/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss b/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss index 413362b884..f61ffa7e18 100644 --- a/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss +++ b/packages/assets/scss/00-base/mixins/_ma-truncated-body-text.scss @@ -46,8 +46,8 @@ bottom: 0; background: linear-gradient( to bottom, - rgba($c-white, 0) 0%, - rgba($c-white, 1) 100% + transparent 0%, + var(--mf-c-white) 100% ); } diff --git a/packages/assets/scss/01-atoms/_button-with-icon.scss b/packages/assets/scss/01-atoms/_button-with-icon.scss index f2ac8fb217..1e5bd9ed50 100644 --- a/packages/assets/scss/01-atoms/_button-with-icon.scss +++ b/packages/assets/scss/01-atoms/_button-with-icon.scss @@ -1,48 +1,56 @@ @use "00-base/configure" as *; -$colors: ( - "c-highlight": $c-highlight, - "c-primary": $c-primary, - "c-primary-alt": $c-primary-alt, - "c-black": $c-gray-darkest, - "c-gray-dark": $c-gray-dark, - "c-white": $c-white -); - -$quaternary-colors: ( - "c-primary": $c-primary, - "c-primary-alt": $c-primary-alt, - "c-black": $c-gray-darkest, - "c-gray-dark": $c-gray-dark, - "c-white": $c-white -); - - .ma__button-icon { + // These will be overridden by color modifier classes + --button-color: var(--mf-c-primary-alt); + --button-color-transparent: var(--mf-c-primary-alt-50); + --button-border-color: var(--mf-c-gray-light); + --button-svg-fill: var(--mf-c-gray-dark); + background-color: var(--mf-c-bg); - border: 2px solid var(--mf-c-gray-light); + border: 2px solid var(--button-border-color); display: inline-flex; align-items: center; font-weight: $fonts-bold; letter-spacing: $letter-spacing-large; padding: 10px 14px; text-transform: uppercase; - transition: background-color .4s, color .4s, border .4s, fill .4s; + transition: background-color 0.4s, color 0.4s, border 0.4s, fill 0.4s; white-space: nowrap; - color: var(--mf-c-primary-alt); + color: var(--button-color); min-height: 46px; font-size: $fonts-xsmall; - @each $class, $c in $colors { - &--#{$class} { + &--c-primary { + --button-color: var(--mf-button-icon-primary-base); + --button-color-transparent: var(--mf-button-icon-primary-transparent); + } - @if $c == $c-highlight { - border-color: $c; - color: var(--mf-c-font-base) - } @else { - color: $c; - } - } + &--c-primary-alt { + --button-color: var(--mf-button-icon-primary-alt-base); + --button-color-transparent: var(--mf-button-icon-primary-alt-transparent); + } + + &--c-black { + --button-color: var(--mf-button-icon-gray-darkest-base); + --button-color-transparent: var(--mf-button-icon-gray-darkest-transparent); + } + + &--c-gray-dark { + --button-color: var(--mf-button-icon-gray-dark-base); + --button-color-transparent: var(--mf-button-icon-gray-dark-transparent); + } + + &--c-white { + --button-color: var(--mf-button-icon-white-base); + --button-color-transparent: var(--mf-button-icon-white-transparent); + } + + &--c-highlight { + --button-color: var(--mf-button-icon-highlight-base); + --button-color-transparent: var(--mf-button-icon-highlight-transparent); + --button-border-color: var(--mf-c-highlight); + color: var(--mf-c-font-base); } &--small { @@ -67,7 +75,6 @@ $quaternary-colors: ( } &--expanded { - & > svg { transform: rotate(-180deg); } @@ -79,9 +86,9 @@ $quaternary-colors: ( } & > svg { - fill: var(--mf-c-gray-dark); + fill: var(--button-svg-fill); height: 20px; - transition: transform .5s, fill .4s; + transition: transform 0.5s, fill 0.4s; } &.ma__icon-small > svg { @@ -93,38 +100,26 @@ $quaternary-colors: ( cursor: not-allowed; } - &--expanded, &:hover { - - @include ma-button("solid",$c-primary-alt); + &--expanded, + &:hover { + @include ma-button("solid", var(--button-color)); color: var(--mf-c-font-inverse); svg { fill: var(--mf-c-white); } - - @each $class, $c in $colors { - &.ma__button-icon--#{$class} { - - @include ma-button("solid",$c); - } - } } - &--secondary, &--expanded.ma__button-icon--secondary, &:hover.ma__button-icon--secondary { - - @include ma-button("outline",$c-primary-alt); - - @each $class, $c in $colors { - &.ma__button-icon--#{$class} { - - @include ma-button("outline",$c); - } - } + &--secondary, + &--expanded.ma__button-icon--secondary, + &:hover.ma__button-icon--secondary { + @include ma-button("outline", var(--button-color)); } - &--tertiary, &--expanded.ma__button-icon--tertiary, &:hover.ma__button-icon--tertiary { - - @include ma-button("solid",var(--mf-c-gray-light)); + &--tertiary, + &--expanded.ma__button-icon--tertiary, + &:hover.ma__button-icon--tertiary { + @include ma-button("solid", var(--mf-c-gray-light)); color: var(--mf-c-font-base); svg { @@ -132,43 +127,32 @@ $quaternary-colors: ( } } - &--quaternary, &--expanded.ma__button-icon--quaternary, &:hover.ma__button-icon--quaternary { + &--quaternary, + &--expanded.ma__button-icon--quaternary, + &:hover.ma__button-icon--quaternary { min-height: 0px; background-color: transparent; box-shadow: none; border: none; padding: 0; text-transform: none; - border-bottom: 2px solid var(--mf-c-link); - color: var(--mf-c-primary); + border-bottom: 2px solid var(--button-color-transparent); + color: var(--button-color); letter-spacing: $letter-spacing-default; svg { - fill: var(--mf-c-link); + fill: var(--button-color-transparent); } - &:hover, &.active { - border-color: var(--mf-c-primary); + &:hover, + &.active { + border-bottom-color: var(--button-color); background-color: transparent !important; } - - @each $class, $c in $quaternary-colors { - &.ma__button-icon--#{$class} { - border-bottom-color: rgba($c,0.5); - color: $c; - - svg { - fill: rgba($c,0.5); - } - - &:hover, &.active { - border-bottom-color: $c; - } - } - } } - &--expanded.ma__button-icon--quaternary-simple, &:hover.ma__button-icon--quaternary-simple:hover { + &--expanded.ma__button-icon--quaternary-simple, + &:hover.ma__button-icon--quaternary-simple:hover { background-color: var(--mf-c-gray-light); } @@ -176,29 +160,21 @@ $quaternary-colors: ( background-color: transparent; } - &--quaternary-simple, &--expanded.ma__button-icon--quaternary-simple, &:hover.ma__button-icon--quaternary-simple:hover { + &--quaternary-simple, + &--expanded.ma__button-icon--quaternary-simple, + &:hover.ma__button-icon--quaternary-simple:hover { min-height: unset; box-shadow: none; border: none; padding: 5px 5px; text-transform: none; cursor: pointer; - color: var(--mf-c-primary-alt); + color: var(--button-color); svg { width: 10px; height: 10px; - fill: rgba($c-primary-alt,0.5); - } - - @each $class, $c in $quaternary-colors { - &.ma__button-icon--#{$class} { - color: $c; - - svg { - fill: rgba($c,0.5); - } - } + fill: var(--button-color-transparent); } } @@ -207,37 +183,30 @@ $quaternary-colors: ( font-weight: $fonts-bold; letter-spacing: $letter-spacing-large; line-height: 1; - padding: .4em; - padding-left: .7em; - padding-right: .8em; + padding: 0.4em; + padding-left: 0.7em; + padding-right: 0.8em; text-transform: uppercase; white-space: nowrap; - box-shadow: $box-shadow; + box-shadow: 0 0.25rem 0.5rem var(--mf-c-box-shadow-black); min-height: unset; border: none; display: inline-block; color: var(--mf-c-font-inverse); - background-color: var(--mf-c-primary-alt); + background-color: var(--button-color); &.ma__button-icon > svg { - fill: rgba($c-white,.5); + fill: var(--mf-c-white-50); width: 10px; } - @each $class, $c in $colors { - &.ma__button-icon--#{$class} { - background-color: $c; - - @if $c == $c-highlight { - color: var(--mf-c-font-base); + // Special case for highlight color on alert buttons + &.ma__button-icon--c-highlight { + color: var(--mf-c-font-base); - &.ma__button-icon > svg { - fill: rgba($c-gray-darkest,.5); - } - } + &.ma__button-icon > svg { + fill: var(--mf-c-gray-darkest-50); } } - } - } diff --git a/packages/assets/scss/01-atoms/_decorative-link.scss b/packages/assets/scss/01-atoms/_decorative-link.scss index 370c379032..f0c61a94cf 100644 --- a/packages/assets/scss/01-atoms/_decorative-link.scss +++ b/packages/assets/scss/01-atoms/_decorative-link.scss @@ -27,21 +27,21 @@ } a:hover { - border-bottom-color: rgba($c-font-inverse,.5); + border-bottom-color: var(--mf-c-font-inverse-50); } a:focus { // important needed to overwrite the focus border color - border-bottom-color: rgba($c-font-inverse,.5) !important; + border-bottom-color: var(--mf-c-font-inverse-50) !important; } svg { - fill: rgba($c-font-inverse,.5); + fill: var(--mf-c-font-inverse-50); } } &.button-link { - outline: 1px solid rgba($c-font-link, 0.5); + outline: 1px solid var(--mf-c-font-link-50); display: inline-block; width: auto; padding: .5rem 1.8rem .5rem .8rem; @@ -49,13 +49,13 @@ &:hover, &:focus { - outline: 1px solid rgba($c-font-link, 1); + outline: 1px solid var(--mf-c-font-link); a { border-bottom-color: transparent; svg { - fill: rgba($c-font-link, 1); + fill: var(--mf-c-font-link); } } } diff --git a/packages/assets/scss/01-atoms/_forms.scss b/packages/assets/scss/01-atoms/_forms.scss index 43ff3248f0..7d21ebd0ef 100644 --- a/packages/assets/scss/01-atoms/_forms.scss +++ b/packages/assets/scss/01-atoms/_forms.scss @@ -12,8 +12,8 @@ input { } .ma__form--light & { - background-color: rgba($c-bg, 0.1); - border-color: rgba($c-bd-input,.5); + background-color: var(--mf-c-bg-10); + border-color: var(--mf-c-bd-input-50); color: var(--mf-c-font-inverse); &.has-error { @@ -81,8 +81,8 @@ textarea { } .ma__form--light & { - background-color: rgba($c-bg, 0.1); - border-color: rgba($c-bd-input, 0.5); + background-color: var(--mf-c-bg-10); + border-color: var(--mf-c-bd-input-50); color: var(--mf-c-font-inverse); &.has-error { diff --git a/packages/assets/scss/01-atoms/_input-checkbox.scss b/packages/assets/scss/01-atoms/_input-checkbox.scss index 39ded9e8ec..a4726405d9 100644 --- a/packages/assets/scss/01-atoms/_input-checkbox.scss +++ b/packages/assets/scss/01-atoms/_input-checkbox.scss @@ -88,8 +88,8 @@ border-color: var(--mf-c-bd-input-dark); .ma__form--light & { - background-color: rgba($c-bg, 0.1); - border-color: rgba($c-bd-input,.5); + background-color: var(--mf-c-bg-10); + border-color: var(--mf-c-bd-input-50); } } } diff --git a/packages/assets/scss/01-atoms/_input-fuzzy.scss b/packages/assets/scss/01-atoms/_input-fuzzy.scss index 8b86fc110b..d51ffd4f3f 100644 --- a/packages/assets/scss/01-atoms/_input-fuzzy.scss +++ b/packages/assets/scss/01-atoms/_input-fuzzy.scss @@ -33,7 +33,7 @@ max-height: 15em; overflow: scroll; overflow-y: auto; - box-shadow: 0 0.25rem 0.5rem rgba(1,1,1,0.2); + box-shadow: 0 0.25rem 0.5rem var(--mf-c-black-20); background: var(--mf-c-bg);//$c-white; <-- THIS MIGHT BE INTENTIONALLY SET $c-white. } } diff --git a/packages/assets/scss/01-atoms/_input-radio.scss b/packages/assets/scss/01-atoms/_input-radio.scss index 70d0958eaf..3d0c305562 100644 --- a/packages/assets/scss/01-atoms/_input-radio.scss +++ b/packages/assets/scss/01-atoms/_input-radio.scss @@ -163,40 +163,40 @@ $control-height: 1.2rem; &::after { background-color: $background-color; border-color: $border-color; - box-shadow: 0 0 2px 2px $box-shadow; + box-shadow: 0 0 2px 2px var(--mf-box-shadow); } } } //label-appearance(text-color, background-color, border-color, box-shadow, control-state, class-modifier) - @include label-appearance($c-primary, $c-white, $c-primary, '','', ''); + @include label-appearance(var(--mf-c-primary), var(--mf-c-white), var(--mf-c-primary), '','', ''); - @include label-appearance($c-primary, $c-primary-lightest, $c-primary, '', ':hover', ''); + @include label-appearance(var(--mf-c-primary), var(--mf-c-primary-lightest), var(--mf-c-primary), '', ':hover', ''); - @include label-appearance($c-white, $c-primary, $c-primary, '',':checked', ''); + @include label-appearance(var(--mf-c-white), var(--mf-c-primary), var(--mf-c-primary), '',':checked', ''); - @include label-appearance($c-white, $c-primary-light, $c-primary, '', ':checked:hover', ''); + @include label-appearance(var(--mf-c-white), var(--mf-c-primary-light), var(--mf-c-primary), '', ':checked:hover', ''); - @include label-appearance($c-white, $c-primary, $c-primary, $c-focus, ':focus', ''); + @include label-appearance(var(--mf-c-white), var(--mf-c-primary), var(--mf-c-primary), var(--mf-box-shadow), ':focus', ''); //:disabled - @include label-appearance($c-white, $c-gray-light, $c-gray-dark, '', ':disabled', ''); + @include label-appearance(var(--mf-c-white), var(--mf-c-gray-light), var(--mf-c-gray-dark), '', ':disabled', ''); - @include label-appearance($c-gray-dark, $c-gray-light, $c-gray-dark, '', ':checked:disabled', ''); + @include label-appearance(var(--mf-c-gray-dark), var(--mf-c-gray-light), var(--mf-c-gray-dark), '', ':checked:disabled', ''); //--error - @include label-appearance($c-error, $c-white, $c-error, '', '', '--error'); + @include label-appearance(var(--mf-c-error), var(--mf-c-white), var(--mf-c-error), '', '', '--error'); - @include label-appearance($c-error, $c-error-lightest, $c-error, '', ':hover', '--error'); + @include label-appearance(var(--mf-c-error), var(--mf-c-error-lightest), var(--mf-c-error), '', ':hover', '--error'); - @include label-appearance($c-error, $c-error-lighter, $c-error, '', ':checked', '--error'); + @include label-appearance(var(--mf-c-error), var(--mf-c-error-lighter), var(--mf-c-error), '', ':checked', '--error'); - @include label-appearance($c-error, $c-error-lighter, $c-error, '', ':checked:hover', '--error'); + @include label-appearance(var(--mf-c-error), var(--mf-c-error-lighter), var(--mf-c-error), '', ':checked:hover', '--error'); - @include label-appearance($c-error, $c-error-lighter, $c-error, $c-error-lighter, ':focus', '--error'); + @include label-appearance(var(--mf-c-error), var(--mf-c-error-lighter), var(--mf-c-error), var(--mf-box-shadow), ':focus', '--error'); &__control:disabled + &__label { pointer-events: none; diff --git a/packages/assets/scss/01-atoms/_input-typeahead.scss b/packages/assets/scss/01-atoms/_input-typeahead.scss index fe631d84ba..0ea67f721c 100644 --- a/packages/assets/scss/01-atoms/_input-typeahead.scss +++ b/packages/assets/scss/01-atoms/_input-typeahead.scss @@ -89,7 +89,7 @@ input[type=search] { z-index: 2; max-height: 15.6em; overflow-y: auto; - box-shadow: 0 0.25rem 0.5rem rgba(1,1,1,0.2); + box-shadow: 0 0.25rem 0.5rem var(--mf-c-black-20); background: var(--mf-c-bg); } } diff --git a/packages/assets/scss/01-atoms/_select-box.scss b/packages/assets/scss/01-atoms/_select-box.scss index b6964fe721..8905d54b0a 100644 --- a/packages/assets/scss/01-atoms/_select-box.scss +++ b/packages/assets/scss/01-atoms/_select-box.scss @@ -98,8 +98,8 @@ border-color: var(--mf-c-bd-input); .ma__form--light & { - background-color: rgba($c-bg,.1); - border-color: rgba($c-bd-input,.5); + background-color: var(--mf-c-bg-10); + border-color: var(--mf-c-bd-input-50); } } @@ -111,7 +111,7 @@ border-color: var(--mf-c-bd-input); .ma__form--light & { - border-color: rgba($c-bd-input,.5); + border-color: var(--mf-c-bd-input-50); } } diff --git a/packages/assets/scss/01-atoms/_table-responsive.scss b/packages/assets/scss/01-atoms/_table-responsive.scss index 51c419a033..7c82fe2af6 100644 --- a/packages/assets/scss/01-atoms/_table-responsive.scss +++ b/packages/assets/scss/01-atoms/_table-responsive.scss @@ -31,10 +31,10 @@ .ma__table--responsive__wrapper { // Pure CSS scrolling shadows with background-attachment: local. // Code taken from https://codepen.io/aardrian/pen/MWeRJWd - background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), - linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%, - linear-gradient(to right, $c-gray-light 30%, rgba(255, 255, 255, 0)), - linear-gradient(to right, rgba(255, 255, 255, 0), $c-gray-light 70%) 0 100%, + background: linear-gradient(to right, #fff 30%, transparent), + linear-gradient(to right, transparent, #fff 70%) 0 100%, + linear-gradient(to right, var(--mf-c-gray-light) 30%, transparent), + linear-gradient(to right, transparent, var(--mf-c-gray-light) 70%) 0 100%, 0 100%; background-repeat: no-repeat; background-color: #fff; diff --git a/packages/assets/scss/01-atoms/_video.scss b/packages/assets/scss/01-atoms/_video.scss index c83838181a..8003f9ab83 100644 --- a/packages/assets/scss/01-atoms/_video.scss +++ b/packages/assets/scss/01-atoms/_video.scss @@ -12,7 +12,7 @@ padding: 13px; position: relative; padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px - background-color: rgba($c-primary,.1); + background-color: var(--mf-c-primary-10); @media ($bp-large-min) { padding-bottom: 12px + 32px + 13px; @@ -118,7 +118,7 @@ // Backward Compatible - had to add the --new as a variant for the new styling .ma__video:not(.ma__video--new) { - background-color: rgba($c-primary,.1); + background-color: var(--mf-c-primary-10); } // Override style for .ma__rich-text h2:first-child:not(.sticky-toc-jump-target). diff --git a/packages/assets/scss/02-molecules/_arrow-nav.scss b/packages/assets/scss/02-molecules/_arrow-nav.scss index e95c3d8e4c..0aa2e46e0d 100644 --- a/packages/assets/scss/02-molecules/_arrow-nav.scss +++ b/packages/assets/scss/02-molecules/_arrow-nav.scss @@ -99,7 +99,7 @@ .ma__arrow-nav { &__title { - color: rgba($c-font-link, .8); + color: var(--mf-c-font-link-80); font-weight: $fonts-bold; } diff --git a/packages/assets/scss/02-molecules/_button-alert.scss b/packages/assets/scss/02-molecules/_button-alert.scss index 0cc81b9dbb..92b8287eac 100644 --- a/packages/assets/scss/02-molecules/_button-alert.scss +++ b/packages/assets/scss/02-molecules/_button-alert.scss @@ -16,7 +16,7 @@ white-space: nowrap; color: var(--mf-c-font-inverse); background-color: var(--mf-c-gray-darkest); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); &:after { border-width: 3px; @@ -27,7 +27,7 @@ transform-origin: 65% 65%; transition: transform .5s; width: 8px; - border-color: rgba($c-font-inverse,.5); + border-color: var(--mf-c-font-inverse-50); } // If the parent of the button-alert is an open accordion, then flip the arrow up. @@ -51,7 +51,7 @@ &:hover { transition: background-color .4s, color .4s, border .4s, fill .4s; - background-color: rgba($c-font-dark, 0.75); + background-color: var(--mf-c-font-dark-75); } &__hide { diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss index f02c4cac0b..d699a1e555 100644 --- a/packages/assets/scss/02-molecules/_callout-link.scss +++ b/packages/assets/scss/02-molecules/_callout-link.scss @@ -4,14 +4,14 @@ .ma__callout-link { border: 3px solid; - display:flex; + display: flex; width: 100%; flex-flow: column wrap; justify-content: center; padding: 15px 20px; - background-color: mix($c-bg, $c-font-link,90%); + background-color: var(--mf-c-font-link-white-90); border-color: var(--mf-c-link); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); text-decoration: none; @media ($bp-small-min) { @@ -20,7 +20,6 @@ &:hover, &:focus { - .ma__callout-link__text { border-bottom-color: var(--mf-c-link); } @@ -42,17 +41,15 @@ font-size: $fonts-xlarge; line-height: 1.3; vertical-align: middle; - padding-right: .8em; + padding-right: 0.8em; width: 100%; } &__text { - @include ma-link-underline; display: inline; svg { - @include ma-link-arrow; fill: var(--mf-c-font-link); } @@ -63,7 +60,7 @@ padding-top: 10px; font-size: $fonts-medium; font-weight: $fonts-light; - color: rgba($c-font-link,1); + color: var(--mf-c-font-link); @media ($bp-x-small-min) { display: flex; @@ -86,11 +83,12 @@ color: var(--mf-c-font-detail); @media ($bp-small-min) { - margin-bottom: 15px; + margin-bottom: 15px; } } - &__eyebrow, &__time { + &__eyebrow, + &__time { font-size: $fonts-xsmall; letter-spacing: $letter-spacing-large; text-transform: uppercase; @@ -108,14 +106,13 @@ &--white { background-color: var(--mf-c-bg); - border-color: mix($c-white, $c-font-detail,70%); - box-shadow: $box-shadow; + border-color: var(--mf-c-font-detail-white-70); + box-shadow: var(--mf-box-shadow); } // removed after version 5.5.0 &__info { - @include ma-visually-hidden; } } diff --git a/packages/assets/scss/02-molecules/_callout-stats.scss b/packages/assets/scss/02-molecules/_callout-stats.scss index 240e02db03..54c4fd733b 100644 --- a/packages/assets/scss/02-molecules/_callout-stats.scss +++ b/packages/assets/scss/02-molecules/_callout-stats.scss @@ -72,7 +72,7 @@ font-weight: 900; &:before { - background-color: rgba($c-primary-alt,.2); + background-color: var(--mf-c-primary-alt-20); } &__stat { diff --git a/packages/assets/scss/02-molecules/_emergency-alert.scss b/packages/assets/scss/02-molecules/_emergency-alert.scss index f367959998..eed861a38b 100644 --- a/packages/assets/scss/02-molecules/_emergency-alert.scss +++ b/packages/assets/scss/02-molecules/_emergency-alert.scss @@ -30,16 +30,16 @@ span { border-bottom-width: 1px; font-size: $fonts-medium; - border-bottom-color: rgba($c-font-base, .5); + border-bottom-color: var(--mf-c-font-base-50); color: var(--mf-c-font-base); &:hover { border-bottom-width: 3px; - border-bottom-color: rgba($c-font-base, .5); + border-bottom-color: var(--mf-c-font-base-50); } &:after { - border-color: rgba($c-font-base, .5); + border-color: var(--mf-c-font-base-50); } } } @@ -70,7 +70,7 @@ span { border-bottom-width: 3px; - border-bottom-color: rgba($c-font-base, .5); + border-bottom-color: var(--mf-c-font-base-50); } } diff --git a/packages/assets/scss/02-molecules/_emergency-header.scss b/packages/assets/scss/02-molecules/_emergency-header.scss index 4377759a02..9bc4c9681f 100644 --- a/packages/assets/scss/02-molecules/_emergency-header.scss +++ b/packages/assets/scss/02-molecules/_emergency-header.scss @@ -33,11 +33,11 @@ flex-basis: auto; letter-spacing: $letter-spacing-large; white-space: nowrap; - color: rgba($c-font-base,.8); + color: var(--mf-c-font-base-80); font-weight: $fonts-bold; border-right-width: 1px; border-right-style: solid; - border-right-color: rgba($c-font-base,.3); + border-right-color: var(--mf-c-font-base-30); padding-right: .5rem; margin-right: .5rem; diff --git a/packages/assets/scss/02-molecules/_featured-item.scss b/packages/assets/scss/02-molecules/_featured-item.scss index 8cacd75bbe..ac76078f3d 100644 --- a/packages/assets/scss/02-molecules/_featured-item.scss +++ b/packages/assets/scss/02-molecules/_featured-item.scss @@ -20,7 +20,7 @@ } &:hover:before { - background-color: rgba($c-black,0.1); + background-color: var(--mf-c-black-10); } &:hover span { diff --git a/packages/assets/scss/02-molecules/_footer-links.scss b/packages/assets/scss/02-molecules/_footer-links.scss index 1d05441726..85bd410e26 100644 --- a/packages/assets/scss/02-molecules/_footer-links.scss +++ b/packages/assets/scss/02-molecules/_footer-links.scss @@ -42,7 +42,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: rgba($c-font-dark, 0.5); + border-bottom-color: var(--mf-c-font-dark-50); } } } diff --git a/packages/assets/scss/02-molecules/_header-tags.scss b/packages/assets/scss/02-molecules/_header-tags.scss index b551bf4971..f5a706edcb 100644 --- a/packages/assets/scss/02-molecules/_header-tags.scss +++ b/packages/assets/scss/02-molecules/_header-tags.scss @@ -123,7 +123,7 @@ &__terms { a { - border-color: rgba($c-font-link,.2); + border-color: var(--mf-c-font-link-20); font-weight: $fonts-normal; &:hover { diff --git a/packages/assets/scss/02-molecules/_illustrated-link.scss b/packages/assets/scss/02-molecules/_illustrated-link.scss index aeb142de85..3f4192a00d 100644 --- a/packages/assets/scss/02-molecules/_illustrated-link.scss +++ b/packages/assets/scss/02-molecules/_illustrated-link.scss @@ -80,7 +80,7 @@ $illustrated-link-image-width: 130px; .ma__illustrated-link { border-color: var(--mf-c-link); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); &__content { background-color: var(--mf-c-primary-lightest); @@ -91,11 +91,11 @@ $illustrated-link-image-width: 130px; } &__label { - color: rgba($c-font-link,.9);// with background color, #e5ecf3 + color: var(--mf-c-font-link-90);// with background color, #e5ecf3 } .ma__action-finder__items--all &__label { - color: rgba($c-font-link,.8);// with background color, #ffffff + color: var(--mf-c-font-link-80);// with background color, #ffffff } &__title { diff --git a/packages/assets/scss/02-molecules/_keyword-search.scss b/packages/assets/scss/02-molecules/_keyword-search.scss index 9cd2fc7973..6d7e9409aa 100644 --- a/packages/assets/scss/02-molecules/_keyword-search.scss +++ b/packages/assets/scss/02-molecules/_keyword-search.scss @@ -93,7 +93,7 @@ $header-search-height: 46px; } .ma__form--light .ma__button-search { - border-left-color: rgba($c-bd-input,.5); + border-left-color: var(--mf-c-bd-input-50); &:hover { border-left-color: var(--mf-c-primary-alt); diff --git a/packages/assets/scss/02-molecules/_link-dropdown.scss b/packages/assets/scss/02-molecules/_link-dropdown.scss index 4999f7ddde..ddcd54638c 100644 --- a/packages/assets/scss/02-molecules/_link-dropdown.scss +++ b/packages/assets/scss/02-molecules/_link-dropdown.scss @@ -14,7 +14,7 @@ background-color: var(--mf-c-bg); &--expanded { - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } .ma__link-dropdown-item { diff --git a/packages/assets/scss/02-molecules/_location-filters.scss b/packages/assets/scss/02-molecules/_location-filters.scss index c0bf32ad98..5ea3e0ab42 100644 --- a/packages/assets/scss/02-molecules/_location-filters.scss +++ b/packages/assets/scss/02-molecules/_location-filters.scss @@ -59,7 +59,7 @@ } &__by-location { - margin-bottom: 30px; + margin-bottom: 10px; width: 100%; @media ($bp-medium-min) { diff --git a/packages/assets/scss/02-molecules/_main-nav.scss b/packages/assets/scss/02-molecules/_main-nav.scss index a8ecae8d95..58110b603b 100644 --- a/packages/assets/scss/02-molecules/_main-nav.scss +++ b/packages/assets/scss/02-molecules/_main-nav.scss @@ -260,12 +260,12 @@ &.is-open, &.has-focus { background-color: var(--mf-c-bg); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } &.is-active { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } } diff --git a/packages/assets/scss/02-molecules/_map-google.scss b/packages/assets/scss/02-molecules/_map-google.scss index b3c2c21b5b..10881700bf 100644 --- a/packages/assets/scss/02-molecules/_map-google.scss +++ b/packages/assets/scss/02-molecules/_map-google.scss @@ -27,7 +27,7 @@ color: var(--mf-c-font-inverse); svg { - fill: rgba($c-white, 0.7); + fill: var(--mf-c-white-70); width: 12px; height: 12px; margin-bottom: -1px; diff --git a/packages/assets/scss/02-molecules/_map-leaflet.scss b/packages/assets/scss/02-molecules/_map-leaflet.scss index 6c503354c9..872f891112 100644 --- a/packages/assets/scss/02-molecules/_map-leaflet.scss +++ b/packages/assets/scss/02-molecules/_map-leaflet.scss @@ -116,7 +116,7 @@ color: var(--mf-c-font-inverse); svg { - fill: rgba($c-white, 0.7); + fill: var(--mf-c-white-70); width: 12px; height: 12px; margin-bottom: -1px; diff --git a/packages/assets/scss/02-molecules/_multiselect-dropdown.scss b/packages/assets/scss/02-molecules/_multiselect-dropdown.scss index e1f50e66fd..3f0cc2bf68 100644 --- a/packages/assets/scss/02-molecules/_multiselect-dropdown.scss +++ b/packages/assets/scss/02-molecules/_multiselect-dropdown.scss @@ -17,7 +17,7 @@ overflow-y: auto; &--expanded { - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } .ma__multiselect-dropdown-item { diff --git a/packages/assets/scss/02-molecules/_popover.scss b/packages/assets/scss/02-molecules/_popover.scss index d8f0a52dc4..4b737c8c0b 100644 --- a/packages/assets/scss/02-molecules/_popover.scss +++ b/packages/assets/scss/02-molecules/_popover.scss @@ -40,7 +40,7 @@ grid-template-rows: auto auto; grid-template-columns: auto 2.75rem; grid-template-areas: "title close" "content content"; - box-shadow: 0 0.75rem 3rem rgba(0,0,0,0.16); + box-shadow: 0 0.75rem 3rem var(--mf-c-black-16); visibility: hidden; z-index: $z-skyline; } diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index 7d051ea2c2..ea9b706ba8 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -193,10 +193,10 @@ a { color: var(--mf-c-primary-alt); - box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4);// This can be replaced with border-bottom. See L.163. + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-primary-alt-40);// This can be replaced with border-bottom. See L.163. &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px rgba($c-primary-alt, 0.7);// This can be replaced with border-bottom. See L.163. + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-primary-alt-70);// This can be replaced with border-bottom. See L.163. } } @@ -251,10 +251,10 @@ a { color: var(--mf-c-primary-alt); - box-shadow: inset 0 0 $c-white, inset 0px -1px rgba($c-primary-alt, 0.4); + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-primary-alt-40); &:hover { - box-shadow: inset 0 0 $c-white, inset 0px -2px rgba($c-primary-alt, 0.7); + box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-primary-alt-70); } } } diff --git a/packages/assets/scss/02-molecules/_secondary-nav.scss b/packages/assets/scss/02-molecules/_secondary-nav.scss index 622c024d0f..ae6654cf54 100644 --- a/packages/assets/scss/02-molecules/_secondary-nav.scss +++ b/packages/assets/scss/02-molecules/_secondary-nav.scss @@ -135,7 +135,7 @@ inset-block-start: 100%; inset-inline-start: 0; background-color: var(--mf-c-bg); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); width: 300px; } diff --git a/packages/assets/scss/02-molecules/_sticky-nav.scss b/packages/assets/scss/02-molecules/_sticky-nav.scss index c5775cdedd..c17f6c190c 100644 --- a/packages/assets/scss/02-molecules/_sticky-nav.scss +++ b/packages/assets/scss/02-molecules/_sticky-nav.scss @@ -34,7 +34,7 @@ // when the nav is sticky, add a box shadow &[data-sticky="middle"],&[data-sticky="bottom"] { - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } } @@ -220,7 +220,7 @@ @media ($bp-medium-min) { background-color: var(--mf-c-gray-lightest); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } &[data-sticky="middle"],&[data-sticky="bottom"] { diff --git a/packages/assets/scss/02-molecules/_wait-time.scss b/packages/assets/scss/02-molecules/_wait-time.scss index d2cb1cdca2..5dbc88e683 100644 --- a/packages/assets/scss/02-molecules/_wait-time.scss +++ b/packages/assets/scss/02-molecules/_wait-time.scss @@ -83,7 +83,7 @@ &__title { - @include ma-border-decorative(var(--mf-c-highlight)); + @include ma-border-decorative(var(--mf-c-highlight-50)); svg { fill: var(--mf-c-highlight); diff --git a/packages/assets/scss/03-organisms/_action-card.scss b/packages/assets/scss/03-organisms/_action-card.scss index 2ad7179bd9..f4f4f4e7d7 100644 --- a/packages/assets/scss/03-organisms/_action-card.scss +++ b/packages/assets/scss/03-organisms/_action-card.scss @@ -155,17 +155,17 @@ &__title { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__item { @include ma-link-transition; background-color: var(--mf-c-bg-subtle); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); &:hover { - background-color: darken($c-bg-subtle, 10%); + background-color: var(--mf-c-bg-subtle-black-90); a { border-bottom-color: var(--mf-c-font-link); @@ -176,7 +176,7 @@ background-color: var(--mf-c-primary); &:hover { - background-color: rgba($c-primary, 0.8); + background-color: var(--mf-c-primary-80); a { border-bottom-color: var(--mf-c-font-inverse); @@ -188,7 +188,7 @@ background-color: var(--mf-c-primary-alt); &:hover { - background-color: rgba($c-primary-alt, 0.8); + background-color: var(--mf-c-primary-alt-80); a { border-bottom-color: var(--mf-c-font-inverse); @@ -200,7 +200,7 @@ background-color: var(--mf-c-gray-dark); &:hover { - background-color: rgba($c-gray-dark, 0.8); + background-color: var(--mf-c-gray-dark-80); a { border-bottom-color: var(--mf-c-font-inverse); @@ -213,7 +213,7 @@ svg, svg > g { - fill: rgba($c-font-medium, 0.7); + fill: var(--mf-c-font-medium-70); } } @@ -223,20 +223,20 @@ svg, svg > g { - fill: rgba($c-font-inverse, 0.7); + fill: var(--mf-c-font-inverse-70); } } &__category { - color: rgba($c-font-base, 0.85); + color: var(--mf-c-font-base-85); font-weight: $fonts-bold; } &__item--blue &__category, &__item--green &__category, &__item--dark-gray &__category { - color: rgba($c-font-inverse, 0.8); - text-shadow: 0 0.125rem 0.125rem rgba($c-black, 0.5); + color: var(--mf-c-font-inverse-80); + text-shadow: 0 0.125rem 0.125rem var(--mf-c-black-50); } &__link { @@ -263,7 +263,7 @@ } svg { - fill: rgba(var(--mf-c-font-inverse), 0.5); + fill: var(--mf-c-font-inverse-50); } } } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 302c498d5c..556a878032 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -156,15 +156,15 @@ $action-finder-bp: 900px; } //theme -$action-finder-bg-color: mix($c-bg, $c-primary, 89%); -$action-finder-border-color: mix($c-white, $c-primary, 50%); +$action-finder-bg-color: var(--mf-c-bg-primary-89); +$action-finder-border-color: var(--mf-c-bg-primary-50); .ma__action-finder { &:after { background-image: linear-gradient( 180deg, - rgba($c-black, 0.6), + var(--mf-c-black-60), transparent 90%, transparent ); @@ -222,12 +222,12 @@ $action-finder-border-color: mix($c-white, $c-primary, 50%); color: var(--mf-c-font-inverse); &:hover { - border-color: rgba($c-font-inverse, 0.5); + border-color: var(--mf-c-font-inverse-50); } } svg { - fill: rgba($c-font-inverse, 0.5); + fill: var(--mf-c-font-inverse-50); } } } diff --git a/packages/assets/scss/03-organisms/_banner-carousel.scss b/packages/assets/scss/03-organisms/_banner-carousel.scss index f18aee2ae2..bc26a8ed11 100644 --- a/packages/assets/scss/03-organisms/_banner-carousel.scss +++ b/packages/assets/scss/03-organisms/_banner-carousel.scss @@ -126,7 +126,7 @@ } &:before { - background-color: rgba($c-primary,.5); + background-color: var(--mf-c-primary-50); } &:hover:before { diff --git a/packages/assets/scss/03-organisms/_blog-feed.scss b/packages/assets/scss/03-organisms/_blog-feed.scss index 412a3b89f7..696814efef 100644 --- a/packages/assets/scss/03-organisms/_blog-feed.scss +++ b/packages/assets/scss/03-organisms/_blog-feed.scss @@ -101,11 +101,11 @@ &__title { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__date { - background-color: rgba($c-white, 0.8); + background-color: var(--mf-c-white-80); color: var(--mf-c-font-base); font-weight: 900; } diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss index bbdd9d1e33..002ed22e4c 100644 --- a/packages/assets/scss/03-organisms/_breadcrumbs.scss +++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss @@ -22,12 +22,12 @@ $breadcrumbs-scrollbar-height: 12px; &:before { left: 0; - background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); + background: linear-gradient(90deg, var(--mf-c-white) 20%, transparent 100%); } &:after { right: 0; - background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 80%); + background: linear-gradient(90deg, transparent 0, var(--mf-c-white) 80%); } &--fade-left { @@ -260,13 +260,13 @@ $breadcrumbs-scrollbar-height: 12px; /* Track */ &::-webkit-scrollbar-track { - background: mix($c-bg, $c-granite-gray, 80); + background: var(--mf-c-bg-granite-gray-80); } /* Handle */ &::-webkit-scrollbar-thumb { - background: mix($c-bg, $c-granite-gray, 50); + background: var(--mf-c-bg-granite-gray-50); } } } @@ -291,7 +291,7 @@ $breadcrumbs-scrollbar-height: 12px; &__sub-items { background-color: var(--mf-c-bg); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } &--light { diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index ec69180e60..c4b4bde7cb 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -84,9 +84,9 @@ //default &__content { - background-color: mix($c-white, $c-warning, 90%); - border-color: mix($c-white, $c-warning, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-bg-warning-90); + border-color: var(--mf-c-bg-warning-50); + box-shadow: var(--mf-box-shadow); } &__icon svg { @@ -98,20 +98,20 @@ font-weight: bold; svg { - fill: rgba($c-font-dark,.5); + fill: var(--mf-c-font-dark-50); } } &:hover &__link span { - border-color: rgba($c-font-base,.5); + border-color: var(--mf-c-font-base-50); } //c-primary &--c-primary &__content { - background-color: mix($c-white, $c-primary, 90%); - border-color: mix($c-white, $c-primary, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-bg-primary-90); + border-color: var(--mf-c-bg-primary-50); + box-shadow: var(--mf-box-shadow); } &--c-primary &__icon svg { @@ -121,9 +121,9 @@ //c-primary-alt &--c-primary-alt &__content { - background-color: mix($c-white, $c-primary-alt, 90%); - border-color: mix($c-white, $c-primary-alt, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-bg-primary-alt-90); + border-color: var(--mf-c-bg-primary-alt-50); + box-shadow: var(--mf-box-shadow); } &--c-primary-alt &__icon svg { @@ -133,9 +133,9 @@ //c-gray-dark &--c-gray-dark &__content { - background-color: mix($c-white, $c-gray-dark, 90%); - border-color: mix($c-white, $c-gray-dark, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-white-gray-dark-90); + border-color: var(--mf-c-white-gray-dark-50); + box-shadow: var(--mf-box-shadow); } &--c-gray-dark &__icon svg { @@ -145,9 +145,9 @@ //c-error-red &--c-error-red &__content { - background-color: mix($c-white, $c-error-red, 90%); - border-color: mix($c-white, $c-error-red, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-white-error-red-90); + border-color: var(--mf-c-error-50); + box-shadow: var(--mf-box-shadow); } &--c-error-red &__icon svg { @@ -157,9 +157,9 @@ //c-white &--c-white &__content { - background-color: mix($c-white, $c-white, 90%); - border-color: mix($c-white, $c-gray-dark, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-white-90); + border-color: var(--mf-c-white-gray-dark-50); + box-shadow: var(--mf-box-shadow); } &--c-white &__icon svg { diff --git a/packages/assets/scss/03-organisms/_callout-message.scss b/packages/assets/scss/03-organisms/_callout-message.scss index 111fee47d0..f26226f6db 100644 --- a/packages/assets/scss/03-organisms/_callout-message.scss +++ b/packages/assets/scss/03-organisms/_callout-message.scss @@ -20,9 +20,9 @@ display:block; width: 100%; padding: 15px 20px; - background-color: mix($c-white, $c-font-link,90%); - border-color: mix($c-white, $c-font-link,50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-font-link-white-90); + border-color: var(--mf-c-font-link-white-50); + box-shadow: var(--mf-box-shadow); @media ($bp-small-min) { padding: 30px; @@ -39,8 +39,8 @@ &--white { background-color: var(--mf-c-bg); - border-color: mix($c-white, $c-font-detail,70%); - box-shadow: $box-shadow; + border-color: var(--mf-c-font-detail-white-70); + box-shadow: var(--mf-box-shadow); } @for $i from 2 through 6 { diff --git a/packages/assets/scss/03-organisms/_campaign-video.scss b/packages/assets/scss/03-organisms/_campaign-video.scss index 2d22c8797a..87f82f79a0 100644 --- a/packages/assets/scss/03-organisms/_campaign-video.scss +++ b/packages/assets/scss/03-organisms/_campaign-video.scss @@ -41,12 +41,12 @@ $colors: ( &:hover, &:active, &:focus { - border-bottom-color: rgba($c-white, 0.5); + border-bottom-color: var(--mf-c-white-50); } } svg { - fill: rgba($c-white, 0.5); + fill: var(--mf-c-white-50); } } } diff --git a/packages/assets/scss/03-organisms/_change-log.scss b/packages/assets/scss/03-organisms/_change-log.scss index e62bf4ae44..d10fbc5b27 100644 --- a/packages/assets/scss/03-organisms/_change-log.scss +++ b/packages/assets/scss/03-organisms/_change-log.scss @@ -108,7 +108,7 @@ &__title { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__date { diff --git a/packages/assets/scss/03-organisms/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss index 66d3d215e8..7323cbc4b5 100644 --- a/packages/assets/scss/03-organisms/_emergency-alerts.scss +++ b/packages/assets/scss/03-organisms/_emergency-alerts.scss @@ -14,7 +14,7 @@ $colors: ( "c-primary": $c-primary, "c-primary-alt": $c-primary-alt, "c-error": $c-error, - "c-gray": $c-gray + "c-gray": $c-gray, ); .ma__emergency-alerts { @@ -33,14 +33,13 @@ $colors: ( } &__hide { - @include ma-button-reset; font-size: $fonts-7xlarge; - line-height: .65; + line-height: 0.65; overflow: hidden; position: absolute; - top: 50%; - right: 10px; + top: 50%; + right: 10px; transform: translateY(-50%) rotate(45deg); } @@ -53,17 +52,16 @@ $colors: ( } @media ($bp-small-min) and ($bp-large-max) { - @include ma-container; margin: 0; position: absolute; - top: 0; - right: 0; + top: 0; + right: 0; } } &__content { - background-color: mix($c-white, $c-warning, 90%); + background-color: var(--mf-c-bg-warning-90); .js & { display: none; @@ -74,7 +72,8 @@ $colors: ( height: 0px; } - &.collapsing, &.expanding { + &.collapsing, + &.expanding { position: relative; overflow: hidden; visibility: visible; @@ -87,15 +86,13 @@ $colors: ( } &.expanded { - height: auto; - visibility: visible; - display: block; + height: auto; + visibility: visible; + display: block; } - } &__container { - @include ma-container; } @@ -109,7 +106,6 @@ $colors: ( } &__interface { - @include ma-container; font-size: 0; @@ -121,13 +117,14 @@ $colors: ( background-color: var(--mf-c-warning); padding: 20px; padding-top: 0; - transition: background-color .5s; + transition: background-color 0.5s; .is-open & { - background-color: mix($c-white, $c-warning, 90%); + background-color: var(--mf-c-bg-warning-90); } - .ma__button-alert, .ma__button-icon--alert { + .ma__button-alert, + .ma__button-icon--alert { width: 100%; } } @@ -135,25 +132,22 @@ $colors: ( } @each $class, $c in $colors { - .ma__emergency-alerts { &__hide--#{$class} { - @if $c == $c-warning { color: var(--mf-c-font-base); - } @else { color: var(--mf-c-font-inverse); } } &--#{$class} { - &.collapsed { visibility: hidden; height: 0px; } - &.collapsing, &.expanding { + &.collapsing, + &.expanding { position: relative; overflow: hidden; visibility: visible; @@ -166,25 +160,48 @@ $colors: ( } &.expanded { - height: auto; - visibility: visible; - display: block; + height: auto; + visibility: visible; + display: block; } } &__content--#{$class} { - background-color: mix($c-white, $c, 90%); + @if $c == $c-warning { + background-color: var(--mf-c-bg-warning-90); + } @else if $c == $c-primary { + background-color: var(--mf-c-bg-primary-90); + } @else if $c == $c-primary-alt { + background-color: var(--mf-c-bg-primary-alt-90); + } @else if $c == $c-error { + background-color: var(--mf-c-bg-error-90); + } @else if $c == $c-gray { + background-color: var(--mf-c-bg-gray-90); + } @else { + background-color: mix(white, $c, 90%); + } } &__header--#{$class} { - background-color: rgba($c, 1); + background-color: $c; } &__interface--#{$class} { - &.open { - background-color: mix($c-white, $c, 90%); + @if $c == $c-warning { + background-color: var(--mf-c-bg-warning-90); + } @else if $c == $c-primary { + background-color: var(--mf-c-bg-primary-90); + } @else if $c == $c-primary-alt { + background-color: var(--mf-c-bg-primary-alt-90); + } @else if $c == $c-error { + background-color: var(--mf-c-bg-error-90); + } @else if $c == $c-gray { + background-color: var(--mf-c-bg-gray-90); + } @else { + background-color: mix(white, $c, 90%); + } } &.closed { - background-color: rgba($c, 1); + background-color: $c; } } } diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss index f91d135d4d..8e0befe8af 100644 --- a/packages/assets/scss/03-organisms/_error-page.scss +++ b/packages/assets/scss/03-organisms/_error-page.scss @@ -46,7 +46,7 @@ .ma__error-page { &:before { - background-color: rgba($c-warning, .15); + background-color: var(--mf-c-warning-15); } &__label { diff --git a/packages/assets/scss/03-organisms/_feedback-form.scss b/packages/assets/scss/03-organisms/_feedback-form.scss index afa7c8a67f..f086af039e 100644 --- a/packages/assets/scss/03-organisms/_feedback-form.scss +++ b/packages/assets/scss/03-organisms/_feedback-form.scss @@ -179,7 +179,7 @@ $feedback-form-bp-min: "min-width: 751px"; .ma__feedback-form { &__overlay { - background-color: rgba($c-black, 0.6); + background-color: var(--mf-c-black-60); color: var(--mf-c-font-inverse); } diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index 20ceb939ad..74b99300f5 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -132,10 +132,10 @@ &__back2top { @include ma-button("outline", var(--mf-c-primary)); - background-color: rgba($c-white, 0.9); + background-color: var(--mf-c-white-90); svg { - fill: rgba($c-primary, 0.5); + fill: var(--mf-c-primary-50); } &:hover { diff --git a/packages/assets/scss/03-organisms/_footer.scss b/packages/assets/scss/03-organisms/_footer.scss index e3cea7f170..1a26cbec0c 100644 --- a/packages/assets/scss/03-organisms/_footer.scss +++ b/packages/assets/scss/03-organisms/_footer.scss @@ -63,7 +63,7 @@ font-weight: $fonts-normal; &:hover { - border-bottom-color: rgba($c-font-dark,.5); + border-bottom-color: var(--mf-c-font-dark-50); } } } diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index 9e2ce25af6..df954ad594 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -18,7 +18,7 @@ body.show-menu { visibility: hidden; opacity: 0; transition: visibility 0s 0.6s, opacity 0.6s linear; - background-color: rgba($c-gray-darkest, 0.4); + background-color: var(--mf-c-gray-darkest-40); top: 0; z-index: $z-overlay-shade;// Lay over the alerts. @@ -36,7 +36,7 @@ body.show-menu { visibility: hidden; opacity: 0; transition: visibility 0s 0.6s, opacity 0.6s linear; - background-color: rgba($c-gray-darkest, 0.4); + background-color: var(--mf-c-gray-darkest-40); top: 0px; z-index: $z-overlay-shade; @@ -718,9 +718,9 @@ body.show-menu { top: 0; white-space: nowrap; font-weight: $fonts-semibold; - background-color: tint($c-font-link, 90%); - border-color: tint($c-font-link, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-font-link-white-10); + border-color: var(--mf-c-font-link-white-50); + box-shadow: var(--mf-box-shadow); color: var(--mf-c-font-link); font-size: $fonts-medium; diff --git a/packages/assets/scss/03-organisms/_header.scss b/packages/assets/scss/03-organisms/_header.scss index 9523b37356..814dd404bd 100644 --- a/packages/assets/scss/03-organisms/_header.scss +++ b/packages/assets/scss/03-organisms/_header.scss @@ -480,9 +480,9 @@ body { a { font-weight: $fonts-normal; - background-color: mix($c-white, $c-font-link, 90%); - border-color: mix($c-white, $c-font-link, 50%); - box-shadow: $box-shadow; + background-color: var(--mf-c-font-link-white-90); + border-color: var(--mf-c-font-link-white-50); + box-shadow: var(--mf-box-shadow); color: var(--mf-c-font-link); font-size: $fonts-medium; diff --git a/packages/assets/scss/03-organisms/_help-tip.scss b/packages/assets/scss/03-organisms/_help-tip.scss index 800cb9d41e..69c25c8476 100644 --- a/packages/assets/scss/03-organisms/_help-tip.scss +++ b/packages/assets/scss/03-organisms/_help-tip.scss @@ -79,7 +79,7 @@ $border-width: 1px; color: var(--mf-c-font-inverse); svg { - fill: mix($c-white, $c-font-link, 70%); + fill: var(--mf-c-font-link-white-70); } } diff --git a/packages/assets/scss/03-organisms/_in-page-alert.scss b/packages/assets/scss/03-organisms/_in-page-alert.scss index 218c8b3d52..46400ac57f 100644 --- a/packages/assets/scss/03-organisms/_in-page-alert.scss +++ b/packages/assets/scss/03-organisms/_in-page-alert.scss @@ -39,7 +39,7 @@ color: var(--mf-c-font-base); svg { - fill: rgba($c-font-base, .5); + fill: var(--mf-c-font-base-50); } } } diff --git a/packages/assets/scss/03-organisms/_key-message.scss b/packages/assets/scss/03-organisms/_key-message.scss index 980912ef93..4ea02a1b5a 100644 --- a/packages/assets/scss/03-organisms/_key-message.scss +++ b/packages/assets/scss/03-organisms/_key-message.scss @@ -157,7 +157,7 @@ $colors: ( &--c-gray-lightest { .ma__key-message__content+.ma__key-message__cta .ma__button { - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } } } @@ -265,7 +265,7 @@ $colors: ( margin-left: auto; margin-right: auto; transform: translateY(33%); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); &--half-image { transform: translateY(0%); diff --git a/packages/assets/scss/03-organisms/_page-banner-legacy.scss b/packages/assets/scss/03-organisms/_page-banner-legacy.scss index becea2e8f0..1de406c160 100644 --- a/packages/assets/scss/03-organisms/_page-banner-legacy.scss +++ b/packages/assets/scss/03-organisms/_page-banner-legacy.scss @@ -3,7 +3,7 @@ $icon-width: 3.5rem; $page-banner-legacy-icon-width: $icon-width + 1rem; $page-banner-legacy-height: 273px; -$text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +$text-shadow: 0px 4px 4px var(--mf-c-black-25); .ma__page-banner-legacy { background-size: cover; @@ -52,7 +52,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); width: 100%; &, & > g { - fill: rgba(var(--mf-c-font-inverse),.5); + fill: var(--mf-c-font-inverse-50); } @media ($bp-large-extended-min) { @@ -133,11 +133,11 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); color: var(--mf-c-font-inverse); &:hover { - border-bottom-color: rgba($c-font-inverse, 0.5); + border-bottom-color: var(--mf-c-font-inverse-50); } svg { - fill: rgba(var(--mf-c-font-inverse), 0.5); + fill: var(--mf-c-font-inverse-50); } } @@ -207,7 +207,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); .ma__page-banner-legacy__container { &:before { - background-color: rgba($c-primary-alt, 0.8); + background-color: var(--mf-c-primary-alt-80); } } @@ -221,7 +221,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); align-items: stretch; &:before { - background-color: rgba($c-primary, 0.8); + background-color: var(--mf-c-primary-80); } } } diff --git a/packages/assets/scss/03-organisms/_page-flipper.scss b/packages/assets/scss/03-organisms/_page-flipper.scss index fab5f1121d..af8fd5ed8a 100644 --- a/packages/assets/scss/03-organisms/_page-flipper.scss +++ b/packages/assets/scss/03-organisms/_page-flipper.scss @@ -88,7 +88,7 @@ } &__context-label { - color: rgba($c-font-link, .8); + color: var(--mf-c-font-link-80); } &__blank, diff --git a/packages/assets/scss/03-organisms/_person-card.scss b/packages/assets/scss/03-organisms/_person-card.scss index fb2339f180..5c15d4d56d 100644 --- a/packages/assets/scss/03-organisms/_person-card.scss +++ b/packages/assets/scss/03-organisms/_person-card.scss @@ -85,7 +85,7 @@ @media ($bp-large-extended-min) { border: 1px solid var(--mf-c-primary-alt); - box-shadow: 4px 2px 5px 0px rgba($c-gray-darkest,0.3); + box-shadow: 4px 2px 5px 0px var(--mf-c-gray-darkest-30); } &::before, diff --git a/packages/assets/scss/03-organisms/_related-locations.scss b/packages/assets/scss/03-organisms/_related-locations.scss index d90c967826..af92693105 100644 --- a/packages/assets/scss/03-organisms/_related-locations.scss +++ b/packages/assets/scss/03-organisms/_related-locations.scss @@ -26,7 +26,7 @@ @include ma-border-decorative; - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); margin-bottom: 45px; padding-bottom: 16px; } diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss index 1f7ed5acf6..a618f5c848 100644 --- a/packages/assets/scss/03-organisms/_search-banner.scss +++ b/packages/assets/scss/03-organisms/_search-banner.scss @@ -181,7 +181,7 @@ &__links { margin-left: auto; margin-right: auto; - background-color: rgba($c-black, 0.5); + background-color: var(--mf-c-black-50); padding: 10px 20px; @media ($bp-medium-min) { @@ -284,7 +284,7 @@ position: relative; &:after { - background-color: rgba($c-gray-darkest, .6); + background-color: var(--mf-c-gray-darkest-60); } &__container { @@ -322,7 +322,7 @@ &__input { input { - background-color: rgba($c-white,0.75); + background-color: var(--mf-c-white-75); font-weight: $fonts-light; } @@ -352,7 +352,7 @@ } &__button { - background-color: rgba($c-white,0.75); + background-color: var(--mf-c-white-75); color: var(--mf-c-font-base); font-weight: $fonts-bold; @@ -381,11 +381,11 @@ font-weight: $fonts-light; &:hover { - border-bottom-color: rgba($c-font-inverse, .5); + border-bottom-color: var(--mf-c-font-inverse-50); } & svg { - fill: rgba($c-font-inverse, .5); + fill: var(--mf-c-font-inverse-50); } } } @@ -400,11 +400,11 @@ } &__image-name { - color: rgba($c-font-inverse,.9); + color: var(--mf-c-font-inverse-90); } &__image-author { - color: rgba($c-font-inverse, .5); + color: var(--mf-c-font-inverse-50); } } @@ -416,12 +416,12 @@ } &__image-name { - color: rgba($c-font-inverse,.9); + color: var(--mf-c-font-inverse-90); font-weight: $fonts-light; } &__image-author { - color: rgba($c-font-inverse, .5); + color: var(--mf-c-font-inverse-50); font-weight: $fonts-light; } // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule diff --git a/packages/assets/scss/03-organisms/_search-box-with-links.scss b/packages/assets/scss/03-organisms/_search-box-with-links.scss index 096d23ba84..864aa739c9 100644 --- a/packages/assets/scss/03-organisms/_search-box-with-links.scss +++ b/packages/assets/scss/03-organisms/_search-box-with-links.scss @@ -96,7 +96,7 @@ &:hover, &:active, &:focus { - border-bottom-color: rgba($c-white, 0.5); + border-bottom-color: var(--mf-c-white-50); } } } diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index dd1baebf16..695363fa08 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -320,7 +320,7 @@ background-color: var(--mf-c-bg-subtle); z-index: $z-sticky-content; - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); @media ($bp-header-toggle-max) { // Sticky toc is over the nav bar. @@ -588,7 +588,7 @@ right: 0; bottom: 0; left: 0; - background-color: rgba($c-gray-darkest, 0.3); + background-color: var(--mf-c-gray-darkest-30); pointer-events: none; z-index: 99; diff --git a/packages/assets/scss/03-organisms/_suggested-pages.scss b/packages/assets/scss/03-organisms/_suggested-pages.scss index 282ced9049..7aa5c56ebd 100644 --- a/packages/assets/scss/03-organisms/_suggested-pages.scss +++ b/packages/assets/scss/03-organisms/_suggested-pages.scss @@ -200,7 +200,7 @@ &__title { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } @media ($bp-large-min) { diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index 60060f45e8..6cbe646c3f 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -166,7 +166,7 @@ } &.is-current { - border-left-color: rgba($c-primary-alt, 0.5) !important; + border-left-color: var(--mf-c-primary-alt-50) !important; } } diff --git a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss index 6c578376b9..e5d55f9ab1 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss @@ -208,7 +208,7 @@ } .ma__toc--hierarchy__title.is-current { - border-left-color: rgba($c-primary-alt, 0.5) !important; + border-left-color: var(--mf-c-primary-alt-50) !important; } } diff --git a/packages/assets/scss/03-organisms/_teaser-listing.scss b/packages/assets/scss/03-organisms/_teaser-listing.scss index c528ae9b23..74c9643ea1 100644 --- a/packages/assets/scss/03-organisms/_teaser-listing.scss +++ b/packages/assets/scss/03-organisms/_teaser-listing.scss @@ -216,7 +216,7 @@ } svg { - fill: rgba($c-font-link, 0.5); + fill: var(--mf-c-font-link-50); } } diff --git a/packages/assets/scss/03-organisms/_test-feed.scss b/packages/assets/scss/03-organisms/_test-feed.scss index 0b844014e2..fd4e0d51cf 100644 --- a/packages/assets/scss/03-organisms/_test-feed.scss +++ b/packages/assets/scss/03-organisms/_test-feed.scss @@ -122,7 +122,7 @@ &__title { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__icon { diff --git a/packages/assets/scss/03-organisms/_top-actions.scss b/packages/assets/scss/03-organisms/_top-actions.scss index 9e891982df..bd8055f510 100644 --- a/packages/assets/scss/03-organisms/_top-actions.scss +++ b/packages/assets/scss/03-organisms/_top-actions.scss @@ -42,7 +42,7 @@ &__title { - @include ma-border-decorative(var(--mf-c-primary-alt)); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__item { diff --git a/packages/assets/scss/03-organisms/_transition-page.scss b/packages/assets/scss/03-organisms/_transition-page.scss index 2b6cff7d32..cb71991d8d 100644 --- a/packages/assets/scss/03-organisms/_transition-page.scss +++ b/packages/assets/scss/03-organisms/_transition-page.scss @@ -41,7 +41,7 @@ .ma__transition-page { &:before { - background-color: rgba($c-primary-alt, .15); + background-color: var(--mf-c-primary-alt-15); } &__icon { diff --git a/packages/assets/scss/03-organisms/_utility-nav.scss b/packages/assets/scss/03-organisms/_utility-nav.scss index 7a65b64302..b6654b38fd 100644 --- a/packages/assets/scss/03-organisms/_utility-nav.scss +++ b/packages/assets/scss/03-organisms/_utility-nav.scss @@ -37,7 +37,7 @@ $utility-nav-height: 43px; &:hover { background-color: var(--mf-c-bg); - box-shadow: $box-shadow; + box-shadow: var(--mf-box-shadow); } } diff --git a/packages/assets/scss/03-organisms/_utility-panel.scss b/packages/assets/scss/03-organisms/_utility-panel.scss index f8de6848f5..246ddc037c 100644 --- a/packages/assets/scss/03-organisms/_utility-panel.scss +++ b/packages/assets/scss/03-organisms/_utility-panel.scss @@ -11,7 +11,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; &:nth-child(2) { padding-top: 20px; - border-top: 2px solid rgba($c-white, 0.4); + border-top: 2px solid var(--mf-c-white-40); } } @@ -44,7 +44,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; cursor: pointer; font-size: 0; margin-bottom: 1.5%; - background-color: rgba($c-white, 0.2); + background-color: var(--mf-c-white-20); display: flex; align-items: center; diff --git a/packages/assets/scss/04-templates/_narrow-template.scss b/packages/assets/scss/04-templates/_narrow-template.scss index 207fab9e1d..1787f8248a 100644 --- a/packages/assets/scss/04-templates/_narrow-template.scss +++ b/packages/assets/scss/04-templates/_narrow-template.scss @@ -158,14 +158,14 @@ $narrow-template-header-height: 170px; //theme &--blue:before { - background-color: rgba($c-primary, .15); + background-color: var(--mf-c-primary-15); } &--green:before { - background-color: rgba($c-primary-alt, .15); + background-color: var(--mf-c-primary-alt-15); } &--yellow:before { - background-color: rgba($c-highlight, .15); + background-color: var(--mf-c-highlight-15); } } diff --git a/packages/assets/scss/04-templates/_organization-details.scss b/packages/assets/scss/04-templates/_organization-details.scss index 0d62f23f7b..5e31dffe8c 100644 --- a/packages/assets/scss/04-templates/_organization-details.scss +++ b/packages/assets/scss/04-templates/_organization-details.scss @@ -35,7 +35,7 @@ left: 0.075rem; transform: skew(-30deg); width: 1.85em; - background-color: rgba($c-primary-alt, 0.5); + background-color: var(--mf-c-primary-alt-50); } } diff --git a/packages/core/stories/tokens/colors/_color-display.scss b/packages/core/stories/tokens/colors/_color-display.scss index 3d92e9a342..8d04238633 100644 --- a/packages/core/stories/tokens/colors/_color-display.scss +++ b/packages/core/stories/tokens/colors/_color-display.scss @@ -55,16 +55,42 @@ } } -// Programetically generate gradient colors +// Programetically generate gradient colors using pre-calculated CSS variables $tiles: 10; -@mixin ma_gradient($name, $mode, $base) { +@mixin ma_gradient($name, $mode) { .#{$name} { &--#{$mode} { - @for $i from 0 through $tiles { - $amount: $i * 10%; - &:nth-child(#{$i + 1}) { - .sg-swatch { - background-color: color-mix(in srgb, #{$base} $amount, var(--mf-#{$name})); + @if $mode == 'tint' { + @for $i from 0 through $tiles { + &:nth-child(#{$i + 1}) { + .sg-swatch { + @if $i == 0 { + background-color: var(--mf-c-white); + } @else if $i == 10 { + background-color: var(--mf-#{$name}); + } @else { + $percentage: (10 - $i) * 10; + background-color: var(--mf-#{$name}-#{$percentage}); + } + } + } + } + } @else if $mode == 'shade' { + @for $i from 0 through $tiles { + &:nth-child(#{$i + 1}) { + .sg-swatch { + @if $i == 0 { + background-color: var(--mf-c-black); + } @else if $i == 10 { + background-color: var(--mf-#{$name}); + } @else if $i <= 5 { + $percentage: $i * 10; + background-color: var(--mf-#{$name}-shade-#{$percentage}); + } @else { + // Shades above 50% don't exist, interpolate or use base color + background-color: var(--mf-#{$name}-shade-50); + } + } } } } @@ -79,6 +105,6 @@ $tiles: 10; "c-independence-cranberry", "c-granite-gray" ) { - @include ma_gradient($name, 'tint', white); - @include ma_gradient($name, 'shade', black); + @include ma_gradient($name, 'tint'); + @include ma_gradient($name, 'shade'); } \ No newline at end of file diff --git a/packages/react/src/components/base/Colors/_index.scss b/packages/react/src/components/base/Colors/_index.scss index cf969a9ec7..ba2ba48014 100644 --- a/packages/react/src/components/base/Colors/_index.scss +++ b/packages/react/src/components/base/Colors/_index.scss @@ -53,16 +53,42 @@ } } -// Programetically generate gradient colors +// Programmatically generate gradient colors using pre-calculated CSS variables $tiles: 10; -@mixin ma_gradient($name, $mode, $base) { +@mixin ma_gradient($name, $mode) { .#{$name} { &--#{$mode} { - @for $i from 0 through $tiles { - $amount: $i * 10%; - &:nth-child(#{$i + 1}) { - .sg-swatch { - background-color: color-mix(in srgb, #{$base} $amount, var(--mf-#{$name})); + @if $mode == "tint" { + @for $i from 0 through $tiles { + &:nth-child(#{$i + 1}) { + .sg-swatch { + @if $i == 0 { + background-color: var(--mf-c-white); + } @else if $i == 10 { + background-color: var(--mf-#{$name}); + } @else { + $percentage: (10 - $i) * 10; + background-color: var(--mf-#{$name}-#{$percentage}); + } + } + } + } + } @else if $mode == "shade" { + @for $i from 0 through $tiles { + &:nth-child(#{$i + 1}) { + .sg-swatch { + @if $i == 0 { + background-color: var(--mf-c-black); + } @else if $i == 10 { + background-color: var(--mf-#{$name}); + } @else if $i <= 5 { + $percentage: $i * 10; + background-color: var(--mf-#{$name}-shade-#{$percentage}); + } @else { + // Shades above 50% don't exist, interpolate or use base color + background-color: var(--mf-#{$name}-shade-50); + } + } } } } @@ -70,13 +96,15 @@ $tiles: 10; } } -@each $name in ( - "c-bay-blue", - "c-duckling-yellow", - "c-berkshires-green", - "c-independence-cranberry", - "c-granite-gray" -) { - @include ma_gradient($name, 'tint', white); - @include ma_gradient($name, 'shade', black); +@each $name + in ( + "c-bay-blue", + "c-duckling-yellow", + "c-berkshires-green", + "c-independence-cranberry", + "c-granite-gray" + ) +{ + @include ma_gradient($name, "tint"); + @include ma_gradient($name, "shade"); } From 6103c4f26dc07fb12a0a273add09d671323bf15d Mon Sep 17 00:00:00 2001 From: Ethansev Date: Sun, 13 Jul 2025 15:33:43 -0700 Subject: [PATCH 20/25] Added new CSS variables for gray shades and added warnings for missing color variables in mixins. --- .../assets/scss/00-base/_color-tokens.scss | 2 + .../00-base/mixins/_ma-border-decorative.scss | 53 ++++++++++++++++--- .../scss/00-base/mixins/_ma-button.scss | 12 ++++- .../assets/scss/01-atoms/_button-tag.scss | 2 +- .../scss/02-molecules/_event-teaser.scss | 2 +- .../scss/03-organisms/_emergency-alerts.scss | 8 ++- 6 files changed, 68 insertions(+), 11 deletions(-) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index 2c62153ab2..4d5f1a2a57 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -256,6 +256,7 @@ $c-focus-hightlight: #3e94cf !default; --mf-c-font-base-75: #141414bf; --mf-c-font-base-50: #14141480; --mf-c-font-base-30: #1414144d; + --mf-c-gray-darkest-75: #141414bf; --mf-c-gray-darkest-60: #14141499; --mf-c-gray-darkest-50: #14141480; --mf-c-gray-darkest-40: #14141466; @@ -273,6 +274,7 @@ $c-focus-hightlight: #3e94cf !default; --mf-c-gray-90: #707070e6; --mf-c-gray-89: #707070e3; --mf-c-gray-80: #707070cc; + --mf-c-gray-75: #707070bf; --mf-c-gray-50: #70707080; // Font inverse variations (white) diff --git a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss index fa61e9e21b..26049bbb51 100644 --- a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss +++ b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss @@ -7,6 +7,8 @@ @use "00-base/color-tokens" as *; +@use "bourbon-neat/neat-warn" as *; + @mixin ma-border-decorative($fg: transparent, $opacity: 0.5) { @if ($fg == transparent) { position: relative; @@ -42,9 +44,18 @@ background-color: var(--mf-c-highlight-50); } @else if $fg == $c-error { background-color: var(--mf-c-error-50); + } @else if $fg == $c-gray { + background-color: var(--mf-c-gray-50); + } @else if $fg == $c-gray-dark { + background-color: var(--mf-c-gray-dark-50); + } @else if $fg == $c-gray-darkest { + background-color: var(--mf-c-gray-darkest-50); + } @else if $fg == $c-white { + background-color: var(--mf-c-white-50); } @else { - // Fallback for unknown colors - background-color: rgba($fg, $opacity); + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.5. Please add '--mf-c-#{$fg}-50' to _color-tokens.scss"); + // Fallback to solid color + background-color: $fg; } } @else if $opacity == 0.75 { @if $fg == $c-primary { @@ -53,13 +64,43 @@ background-color: var(--mf-c-primary-alt-75); } @else if $fg == $c-error { background-color: var(--mf-c-error-75); + } @else if $fg == $c-gray { + background-color: var(--mf-c-gray-75); + } @else if $fg == $c-gray-dark { + background-color: var(--mf-c-gray-dark-75); + } @else if $fg == $c-gray-darkest { + background-color: var(--mf-c-gray-darkest-75); + } @else if $fg == $c-white { + background-color: var(--mf-c-white-75); + } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.75. Please add '--mf-c-#{$fg}-75' to _color-tokens.scss"); + // Fallback to solid color + background-color: $fg; + } + } @else if $opacity == 0.89 { + @if $fg == $c-primary { + background-color: var(--mf-c-primary-89); + } @else if $fg == $c-gray { + background-color: var(--mf-c-gray-89); + } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.89. Please add '--mf-c-#{$fg}-89' to _color-tokens.scss"); + // Fallback to solid color + background-color: $fg; + } + } @else if $opacity == 0.8 { + @if $fg == $c-primary { + background-color: var(--mf-c-primary-80); + } @else if $fg == $c-gray { + background-color: var(--mf-c-gray-80); } @else { - // Fallback for unknown colors - background-color: rgba($fg, $opacity); + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.8. Please add '--mf-c-#{$fg}-80' to _color-tokens.scss"); + // Fallback to solid color + background-color: $fg; } } @else { - // Fallback for other opacity values - background-color: rgba($fg, $opacity); + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity #{$opacity}. Please add the appropriate CSS variable to _color-tokens.scss"); + // Fallback to solid color + background-color: $fg; } } diff --git a/packages/assets/scss/00-base/mixins/_ma-button.scss b/packages/assets/scss/00-base/mixins/_ma-button.scss index 3149f002b3..db2abab254 100644 --- a/packages/assets/scss/00-base/mixins/_ma-button.scss +++ b/packages/assets/scss/00-base/mixins/_ma-button.scss @@ -13,6 +13,8 @@ @use "ma-button-base" as *; +@use "bourbon-neat/neat-warn" as *; + @mixin ma-button($type: "solid", $color: "transparent") { @if ($color != "transparent") { font-weight: $fonts-bold; @@ -72,8 +74,16 @@ border-color: var(--mf-c-error-50); } @else if $color == $c-gray-dark { border-color: var(--mf-c-font-dark-50); + } @else if $color == $c-gray-darkest { + border-color: var(--mf-c-gray-darkest-50); + } @else if $color == $c-white { + border-color: var(--mf-c-white-50); + } @else if $color == $c-gray { + border-color: var(--mf-c-gray-50); } @else { - border-color: rgba($color, 0.5); + @include neat-warn("ma-button: No CSS variable found for color '#{$color}' with 50% opacity. Please add '--mf-c-#{$color}-50' to _color-tokens.scss"); + // Fallback to solid color for border + border-color: $color; } &:hover:not(:disabled) { diff --git a/packages/assets/scss/01-atoms/_button-tag.scss b/packages/assets/scss/01-atoms/_button-tag.scss index 0aea63e790..a77c9f54ca 100644 --- a/packages/assets/scss/01-atoms/_button-tag.scss +++ b/packages/assets/scss/01-atoms/_button-tag.scss @@ -11,7 +11,7 @@ margin-right: .25em; padding: 8px 11px; white-space: nowrap; - background-color: mix($c-bg, $c-font-link,90%); + background-color: var(--mf-c-font-link-white-90); color: var(--mf-c-font-link); font-weight: $fonts-bold; diff --git a/packages/assets/scss/02-molecules/_event-teaser.scss b/packages/assets/scss/02-molecules/_event-teaser.scss index 5fa549fb1e..6847972fd5 100644 --- a/packages/assets/scss/02-molecules/_event-teaser.scss +++ b/packages/assets/scss/02-molecules/_event-teaser.scss @@ -137,7 +137,7 @@ } &__graphic { - background-color: mix($c-white, $c-primary-alt, 80%); + background-color: var(--mf-c-berkshires-green-80); } &__spacer { diff --git a/packages/assets/scss/03-organisms/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss index 7323cbc4b5..2d21fd5b7d 100644 --- a/packages/assets/scss/03-organisms/_emergency-alerts.scss +++ b/packages/assets/scss/03-organisms/_emergency-alerts.scss @@ -177,7 +177,9 @@ $colors: ( } @else if $c == $c-gray { background-color: var(--mf-c-bg-gray-90); } @else { - background-color: mix(white, $c, 90%); + @include neat-warn("emergency-alerts: No CSS variable found for color '#{$c}' mixed with white at 90%. Please add '--mf-c-bg-#{$c}-90' to _color-tokens.scss"); + // Fallback to solid color + background-color: $c; } } &__header--#{$class} { @@ -196,7 +198,9 @@ $colors: ( } @else if $c == $c-gray { background-color: var(--mf-c-bg-gray-90); } @else { - background-color: mix(white, $c, 90%); + @include neat-warn("emergency-alerts: No CSS variable found for color '#{$c}' mixed with white at 90%. Please add '--mf-c-bg-#{$c}-90' to _color-tokens.scss"); + // Fallback to solid color + background-color: $c; } } From fb8e2d66c557b91ead651e6d84ff08d031a19f00 Mon Sep 17 00:00:00 2001 From: Ethansev Date: Sun, 13 Jul 2025 19:25:06 -0700 Subject: [PATCH 21/25] Updated grid mixins by adding alignment and justification parameters,. Added grid span to end mixin. --- .../assets/scss/00-base/mixins/_ma-grid.scss | 65 +++++++++++++++---- .../03-organisms/_footer-with-columns.scss | 3 +- 2 files changed, 54 insertions(+), 14 deletions(-) diff --git a/packages/assets/scss/00-base/mixins/_ma-grid.scss b/packages/assets/scss/00-base/mixins/_ma-grid.scss index 5721e6501f..4dc12fd98b 100644 --- a/packages/assets/scss/00-base/mixins/_ma-grid.scss +++ b/packages/assets/scss/00-base/mixins/_ma-grid.scss @@ -6,14 +6,25 @@ @use "00-base/breakpoints" as *; +@use "bourbon-neat/neat-warn" as *; + /// Primary grid container mixin /// @param {Number} $columns [12] - Number of columns in the grid /// @param {Number} $gap [$gutter] - Gap between grid items +/// @param {String} $align [stretch] - Align items (stretch, start, end, center) +/// @param {String} $justify [stretch] - Justify items (stretch, start, end, center) -@mixin ma-grid($columns: 12, $gap: $gutter) { +@mixin ma-grid( + $columns: 12, + $gap: $gutter, + $align: stretch, + $justify: stretch +) { display: grid; grid-template-columns: repeat($columns, 1fr); gap: $gap; + align-items: $align; + justify-items: $justify; } /// Grid item spanning mixin with full span-columns compatibility @@ -21,21 +32,29 @@ /// @param {Number} $start [auto] - Starting column position @mixin ma-grid-span($span, $start: auto) { + @if type-of($span) == number and $span < 1 { + @include neat-warn( + "ma-grid-span: Column span must be at least 1, got #{$span}" + ); + $span: 1; + } + $columns: $span; @if type-of($span) == list { - // Handle "X of Y" syntax like "4 of 8" $columns: nth($span, 1); - // If "of Y" is provided, we could use this for subgrid in the future - // For now, just span the specified columns - grid-column: span $columns; - } @else { - // Handle simple number like "6" - grid-column: span $span; + @if $columns < 1 { + @include neat-warn( + "ma-grid-span: Column span must be at least 1, got #{$columns}" + ); + $columns: 1; + } } @if $start != auto { - grid-column-start: $start; + grid-column: #{$start} / span #{$columns}; + } @else { + grid-column: span #{$columns}; } } @@ -44,17 +63,32 @@ /// @param {Number} $tablet [2] - Columns on tablet /// @param {Number} $desktop [12] - Columns on desktop /// @param {Number} $gap [$gutter] - Gap between grid items +/// @param {String} $tablet-breakpoint [$bp-medium-min] - Tablet breakpoint +/// @param {String} $desktop-breakpoint [$bp-large-min] - Desktop breakpoint +/// @param {String} $align [stretch] - Align items +/// @param {String} $justify [stretch] - Justify items -@mixin ma-grid-responsive($mobile: 1, $tablet: 2, $desktop: 12, $gap: $gutter) { +@mixin ma-grid-responsive( + $mobile: 1, + $tablet: 2, + $desktop: 12, + $gap: $gutter, + $tablet-breakpoint: $bp-medium-min, + $desktop-breakpoint: $bp-large-min, + $align: stretch, + $justify: stretch +) { display: grid; grid-template-columns: repeat($mobile, 1fr); gap: $gap; + align-items: $align; + justify-items: $justify; - @media ($bp-medium-min) { + @media ($tablet-breakpoint) { grid-template-columns: repeat($tablet, 1fr); } - @media ($bp-large-min) { + @media ($desktop-breakpoint) { grid-template-columns: repeat($desktop, 1fr); } } @@ -68,3 +102,10 @@ grid-template-columns: $ratio; gap: $gap; } + +/// Helper to span from a column to the end of the grid +/// @param {Number} $start - Starting column position + +@mixin ma-grid-span-to-end($start) { + grid-column: #{$start} / -1; +} diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss index 74b99300f5..4c4bcdc505 100644 --- a/packages/assets/scss/03-organisms/_footer-with-columns.scss +++ b/packages/assets/scss/03-organisms/_footer-with-columns.scss @@ -78,8 +78,7 @@ @media ($bp-large-min) { - @include ma-grid-span(9); - grid-column: 4 / -1; + @include ma-grid-span-to-end(4); margin-bottom: 20px; } } From 3432a09ae0acbda854e4b7719f4052193b809e1a Mon Sep 17 00:00:00 2001 From: Ethansev Date: Sun, 13 Jul 2025 19:25:24 -0700 Subject: [PATCH 22/25] Changed the color hexcode for font-link. --- packages/assets/scss/00-base/_color-tokens.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index 4d5f1a2a57..acf3d39fad 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -354,13 +354,13 @@ $c-focus-hightlight: #3e94cf !default; --mf-c-white-40: #ffffff66; --mf-c-white-20: #ffffff33; --mf-c-primary-alt-20: #38855733; - --mf-c-font-link-90: #7299bce6; + --mf-c-font-link-90: #14558fe6; --mf-c-bg-primary-89: #e9f0f6; // 89% white + 11% primary --mf-c-bg-granite-gray-50: #b4b4b4; // 50% white + 50% granite-gray --mf-c-font-link-white-70: #e8f0f7; // 70% white + 30% font-link --mf-c-font-detail-white-70: #d5d5d5; // 70% white + 30% font-detail --mf-c-warning-15: #f3c72426; // 15% opacity (alias for duckling-yellow) - --mf-c-font-link-white-90: #f7fafc; // 90% white + 10% font-link + --mf-c-font-link-white-90: #e8eef8; // 90% white + 10% font-link // Bay Blue tints (mixed with white) --mf-c-bay-blue-90: #{$c-bay-blue-90-tint}; From 25e489af6f33edfed01dc07266c1b09c471591c8 Mon Sep 17 00:00:00 2001 From: Ethansev Date: Sun, 13 Jul 2025 19:58:04 -0700 Subject: [PATCH 23/25] Added DP-39213 changelog. --- changelogs/DP-39213.yml | 52 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 changelogs/DP-39213.yml diff --git a/changelogs/DP-39213.yml b/changelogs/DP-39213.yml new file mode 100644 index 0000000000..617ef1d48a --- /dev/null +++ b/changelogs/DP-39213.yml @@ -0,0 +1,52 @@ +Changed: + - project: Assets + component: _color-tokens + description: |- + Complete CSS variables transition started in DP-38077 by adding pre-calculated transparency and gradient variables. + - Added ~105 new CSS variables for transparency variations (10%, 15%, 20%, 25%, 30%, 40%, 50%, 60%, 70%, 75%, 80%, 85%, 89%, 90%) + - Added pre-mixed color combinations to replace rgba() usage + - Added tint/shade CSS variables for all brand colors (bay-blue, berkshires-green, duckling-yellow, independence-cranberry) + issue: DP-39213 + impact: Minor + - project: Assets + component: _variables + description: |- + Created new CSS variable for standardized box shadows. + - Added --mf-box-shadow CSS variable to replace SCSS $box-shadow usage + - Updated all box-shadow instances to use the new CSS variable + issue: DP-39213 + impact: Patch + +Fixed: + - project: Assets + component: Mixins + description: |- + Remove all SCSS color functions (rgba) to complete CSS variables transition. + - Replaced rgba() fallbacks with pre-calculated CSS variables + - Added neat-warn messages with solid color fallbacks for unknown colors + - Fixed ma-border-decorative mixin to properly detect and handle CSS variables + issue: DP-39213 + impact: Patch + - project: Assets + component: Grid + description: |- + Added new CSS Grid mixins to replace deprecated bourbon-neat span-columns system. + - ma-grid: Creates CSS grid containers with customizable columns, gaps, and alignment + - ma-grid-span: Handles grid item spanning with support for legacy "X of Y" syntax + - ma-grid-responsive: Provides mobile-first responsive grids with customizable breakpoints + - ma-grid-two-column: Simple two-column layout with customizable ratios + - ma-grid-span-to-end: Helper for spanning from a column to grid end + - Includes input validation and developer warnings for better DX + - Updated components to migrate from span-columns to new grid mixins + issue: DP-39213 + impact: Minor + +Deprecated: + - project: Assets + component: Mixins + description: |- + Deprecated legacy bourbon-neat span-columns mixins in favor of CSS Grid. + - Added deprecation warnings to span-columns, shift, and omega mixins + - Provided modern CSS Grid alternatives in documentation + issue: DP-39213 + impact: Minor \ No newline at end of file From 04cfe04598cd9e7cf7abd10d81300816f7dfa055 Mon Sep 17 00:00:00 2001 From: Ethansev Date: Mon, 14 Jul 2025 10:27:56 -0700 Subject: [PATCH 24/25] Added empty lines to fix linting. --- .../scss/00-base/mixins/_ma-border-decorative.scss | 12 ++++++++++++ packages/assets/scss/00-base/mixins/_ma-button.scss | 4 ++++ packages/assets/scss/00-base/mixins/_ma-grid.scss | 4 ++++ packages/assets/scss/01-atoms/_button-with-icon.scss | 5 +++++ packages/assets/scss/02-molecules/_callout-link.scss | 4 ++++ .../assets/scss/03-organisms/_emergency-alerts.scss | 12 ++++++++++++ 6 files changed, 41 insertions(+) diff --git a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss index 26049bbb51..656e823821 100644 --- a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss +++ b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss @@ -10,11 +10,13 @@ @use "bourbon-neat/neat-warn" as *; @mixin ma-border-decorative($fg: transparent, $opacity: 0.5) { + @if ($fg == transparent) { position: relative; } &:after { + @if ($fg == transparent) { content: ""; height: 3px; @@ -35,7 +37,9 @@ @if (type-of($fg) == "string" and str-slice(#{$fg}, 1, 4) == "var(") { background-color: $fg; } @else { + @if $opacity == 0.5 { + @if $fg == $c-primary { background-color: var(--mf-c-primary-50); } @else if $fg == $c-primary-alt { @@ -53,11 +57,13 @@ } @else if $fg == $c-white { background-color: var(--mf-c-white-50); } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.5. Please add '--mf-c-#{$fg}-50' to _color-tokens.scss"); // Fallback to solid color background-color: $fg; } } @else if $opacity == 0.75 { + @if $fg == $c-primary { background-color: var(--mf-c-primary-75); } @else if $fg == $c-primary-alt { @@ -73,31 +79,37 @@ } @else if $fg == $c-white { background-color: var(--mf-c-white-75); } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.75. Please add '--mf-c-#{$fg}-75' to _color-tokens.scss"); // Fallback to solid color background-color: $fg; } } @else if $opacity == 0.89 { + @if $fg == $c-primary { background-color: var(--mf-c-primary-89); } @else if $fg == $c-gray { background-color: var(--mf-c-gray-89); } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.89. Please add '--mf-c-#{$fg}-89' to _color-tokens.scss"); // Fallback to solid color background-color: $fg; } } @else if $opacity == 0.8 { + @if $fg == $c-primary { background-color: var(--mf-c-primary-80); } @else if $fg == $c-gray { background-color: var(--mf-c-gray-80); } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity 0.8. Please add '--mf-c-#{$fg}-80' to _color-tokens.scss"); // Fallback to solid color background-color: $fg; } } @else { + @include neat-warn("ma-border-decorative: No CSS variable found for color '#{$fg}' with opacity #{$opacity}. Please add the appropriate CSS variable to _color-tokens.scss"); // Fallback to solid color background-color: $fg; diff --git a/packages/assets/scss/00-base/mixins/_ma-button.scss b/packages/assets/scss/00-base/mixins/_ma-button.scss index db2abab254..8a928ba38b 100644 --- a/packages/assets/scss/00-base/mixins/_ma-button.scss +++ b/packages/assets/scss/00-base/mixins/_ma-button.scss @@ -16,6 +16,7 @@ @use "bourbon-neat/neat-warn" as *; @mixin ma-button($type: "solid", $color: "transparent") { + @if ($color != "transparent") { font-weight: $fonts-bold; // solid - primary usage (default) @@ -25,6 +26,7 @@ border-color: transparent; &:hover:not(:disabled) { + @if $color == $c-primary { background-color: var(--mf-c-primary-75); } @else if $color == $c-primary-alt { @@ -81,6 +83,7 @@ } @else if $color == $c-gray { border-color: var(--mf-c-gray-50); } @else { + @include neat-warn("ma-button: No CSS variable found for color '#{$color}' with 50% opacity. Please add '--mf-c-#{$color}-50' to _color-tokens.scss"); // Fallback to solid color for border border-color: $color; @@ -125,6 +128,7 @@ } @mixin ma-button-size($size: "normal") { + @if ($size == "normal") { font-size: $fonts-medium; line-height: 1.4; diff --git a/packages/assets/scss/00-base/mixins/_ma-grid.scss b/packages/assets/scss/00-base/mixins/_ma-grid.scss index 4dc12fd98b..f2ece060f6 100644 --- a/packages/assets/scss/00-base/mixins/_ma-grid.scss +++ b/packages/assets/scss/00-base/mixins/_ma-grid.scss @@ -32,7 +32,9 @@ /// @param {Number} $start [auto] - Starting column position @mixin ma-grid-span($span, $start: auto) { + @if type-of($span) == number and $span < 1 { + @include neat-warn( "ma-grid-span: Column span must be at least 1, got #{$span}" ); @@ -40,10 +42,12 @@ } $columns: $span; + @if type-of($span) == list { $columns: nth($span, 1); @if $columns < 1 { + @include neat-warn( "ma-grid-span: Column span must be at least 1, got #{$columns}" ); diff --git a/packages/assets/scss/01-atoms/_button-with-icon.scss b/packages/assets/scss/01-atoms/_button-with-icon.scss index 1e5bd9ed50..a4d59cf930 100644 --- a/packages/assets/scss/01-atoms/_button-with-icon.scss +++ b/packages/assets/scss/01-atoms/_button-with-icon.scss @@ -75,6 +75,7 @@ } &--expanded { + & > svg { transform: rotate(-180deg); } @@ -102,6 +103,7 @@ &--expanded, &:hover { + @include ma-button("solid", var(--button-color)); color: var(--mf-c-font-inverse); @@ -113,12 +115,14 @@ &--secondary, &--expanded.ma__button-icon--secondary, &:hover.ma__button-icon--secondary { + @include ma-button("outline", var(--button-color)); } &--tertiary, &--expanded.ma__button-icon--tertiary, &:hover.ma__button-icon--tertiary { + @include ma-button("solid", var(--mf-c-gray-light)); color: var(--mf-c-font-base); @@ -201,6 +205,7 @@ } // Special case for highlight color on alert buttons + &.ma__button-icon--c-highlight { color: var(--mf-c-font-base); diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss index d699a1e555..d51a5066d6 100644 --- a/packages/assets/scss/02-molecules/_callout-link.scss +++ b/packages/assets/scss/02-molecules/_callout-link.scss @@ -20,6 +20,7 @@ &:hover, &:focus { + .ma__callout-link__text { border-bottom-color: var(--mf-c-link); } @@ -46,10 +47,12 @@ } &__text { + @include ma-link-underline; display: inline; svg { + @include ma-link-arrow; fill: var(--mf-c-font-link); } @@ -113,6 +116,7 @@ // removed after version 5.5.0 &__info { + @include ma-visually-hidden; } } diff --git a/packages/assets/scss/03-organisms/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss index 2d21fd5b7d..d7d9829c32 100644 --- a/packages/assets/scss/03-organisms/_emergency-alerts.scss +++ b/packages/assets/scss/03-organisms/_emergency-alerts.scss @@ -33,6 +33,7 @@ $colors: ( } &__hide { + @include ma-button-reset; font-size: $fonts-7xlarge; line-height: 0.65; @@ -52,6 +53,7 @@ $colors: ( } @media ($bp-small-min) and ($bp-large-max) { + @include ma-container; margin: 0; position: absolute; @@ -93,6 +95,7 @@ $colors: ( } &__container { + @include ma-container; } @@ -106,6 +109,7 @@ $colors: ( } &__interface { + @include ma-container; font-size: 0; @@ -132,8 +136,10 @@ $colors: ( } @each $class, $c in $colors { + .ma__emergency-alerts { &__hide--#{$class} { + @if $c == $c-warning { color: var(--mf-c-font-base); } @else { @@ -141,6 +147,7 @@ $colors: ( } } &--#{$class} { + &.collapsed { visibility: hidden; height: 0px; @@ -166,6 +173,7 @@ $colors: ( } } &__content--#{$class} { + @if $c == $c-warning { background-color: var(--mf-c-bg-warning-90); } @else if $c == $c-primary { @@ -177,6 +185,7 @@ $colors: ( } @else if $c == $c-gray { background-color: var(--mf-c-bg-gray-90); } @else { + @include neat-warn("emergency-alerts: No CSS variable found for color '#{$c}' mixed with white at 90%. Please add '--mf-c-bg-#{$c}-90' to _color-tokens.scss"); // Fallback to solid color background-color: $c; @@ -186,7 +195,9 @@ $colors: ( background-color: $c; } &__interface--#{$class} { + &.open { + @if $c == $c-warning { background-color: var(--mf-c-bg-warning-90); } @else if $c == $c-primary { @@ -198,6 +209,7 @@ $colors: ( } @else if $c == $c-gray { background-color: var(--mf-c-bg-gray-90); } @else { + @include neat-warn("emergency-alerts: No CSS variable found for color '#{$c}' mixed with white at 90%. Please add '--mf-c-bg-#{$c}-90' to _color-tokens.scss"); // Fallback to solid color background-color: $c; From f3af11a51f25cf29d4a18ce339497ae957d62bcc Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Thu, 9 Oct 2025 17:07:06 -0400 Subject: [PATCH 25/25] resolve conflicts --- .../scss/01-atoms/_button-with-icon.scss | 95 ------------------- 1 file changed, 95 deletions(-) diff --git a/packages/assets/scss/01-atoms/_button-with-icon.scss b/packages/assets/scss/01-atoms/_button-with-icon.scss index bfbb30bd51..a4d59cf930 100644 --- a/packages/assets/scss/01-atoms/_button-with-icon.scss +++ b/packages/assets/scss/01-atoms/_button-with-icon.scss @@ -1,25 +1,5 @@ @use "00-base/configure" as *; -<<<<<<< HEAD -======= -$colors: ( - "c-highlight": $c-highlight, - "c-primary": $c-primary, - "c-primary-alt": $c-primary-alt, - "c-black": $c-gray-darkest, - "c-gray-dark": $c-gray-dark, - "c-white": $c-white, -); - -$quaternary-colors: ( - "c-primary": $c-primary, - "c-primary-alt": $c-primary-alt, - "c-black": $c-gray-darkest, - "c-gray-dark": $c-gray-dark, - "c-white": $c-white, -); - ->>>>>>> develop .ma__button-icon { // These will be overridden by color modifier classes --button-color: var(--mf-c-primary-alt); @@ -46,7 +26,6 @@ $quaternary-colors: ( --button-color-transparent: var(--mf-button-icon-primary-transparent); } -<<<<<<< HEAD &--c-primary-alt { --button-color: var(--mf-button-icon-primary-alt-base); --button-color-transparent: var(--mf-button-icon-primary-alt-transparent); @@ -72,15 +51,6 @@ $quaternary-colors: ( --button-color-transparent: var(--mf-button-icon-highlight-transparent); --button-border-color: var(--mf-c-highlight); color: var(--mf-c-font-base); -======= - @if $c == $c-highlight { - border-color: $c; - color: var(--mf-c-font-base); - } @else { - color: $c; - } - } ->>>>>>> develop } &--small { @@ -134,55 +104,26 @@ $quaternary-colors: ( &--expanded, &:hover { -<<<<<<< HEAD @include ma-button("solid", var(--button-color)); -======= - @include ma-button("solid", $c-primary-alt); ->>>>>>> develop color: var(--mf-c-font-inverse); svg { fill: var(--mf-c-white); } -<<<<<<< HEAD -======= - - @each $class, $c in $colors { - &.ma__button-icon--#{$class} { - - @include ma-button("solid", $c); - } - } ->>>>>>> develop } &--secondary, &--expanded.ma__button-icon--secondary, &:hover.ma__button-icon--secondary { -<<<<<<< HEAD @include ma-button("outline", var(--button-color)); -======= - @include ma-button("outline", $c-primary-alt); - - @each $class, $c in $colors { - &.ma__button-icon--#{$class} { - - @include ma-button("outline", $c); - } - } ->>>>>>> develop } &--tertiary, &--expanded.ma__button-icon--tertiary, &:hover.ma__button-icon--tertiary { -<<<<<<< HEAD @include ma-button("solid", var(--mf-c-gray-light)); -======= - @include ma-button("solid", $c-gray-light); ->>>>>>> develop color: var(--mf-c-font-base); svg { @@ -209,31 +150,9 @@ $quaternary-colors: ( &:hover, &.active { -<<<<<<< HEAD border-bottom-color: var(--button-color); background-color: transparent !important; } -======= - border-color: var(--mf-c-primary); - background-color: transparent !important; - } - - @each $class, $c in $quaternary-colors { - &.ma__button-icon--#{$class} { - border-bottom-color: rgba($c, 0.5); - color: $c; - - svg { - fill: $c; - } - - &:hover, - &.active { - border-bottom-color: $c; - } - } - } ->>>>>>> develop } &--expanded.ma__button-icon--quaternary-simple, @@ -259,21 +178,7 @@ $quaternary-colors: ( svg { width: 10px; height: 10px; -<<<<<<< HEAD fill: var(--button-color-transparent); -======= - fill: rgba($c-primary-alt, 0.5); - } - - @each $class, $c in $quaternary-colors { - &.ma__button-icon--#{$class} { - color: $c; - - svg { - fill: rgba($c, 0.5); - } - } ->>>>>>> develop } }