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 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/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index 33b6a659bc..acf3d39fad 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -1,233 +1,450 @@ // 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-75: #141414bf; + --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-75: #707070bf; + --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: #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: #e8eef8; // 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 28e1858282..25ee35017f 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -1,96 +1,96 @@ // 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 !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 !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: #{$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-box-shadow-black: #{$c-box-shadow-black}; + --mf-c-box-shadow-black: #{$c-box-shadow-black}; } diff --git a/packages/assets/scss/00-base/_mixins.scss b/packages/assets/scss/00-base/_mixins.scss index 93184e4b2e..5ddb943f03 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"; @@ -66,7 +68,6 @@ @forward "mixins/ma-accordion-icon"; - @forward "mixins/ma-background-colors"; @forward "mixins/ma-layout"; diff --git a/packages/assets/scss/00-base/_pikaday.scss b/packages/assets/scss/00-base/_pikaday.scss index 6af08aeb52..b48c49cec5 100644 --- a/packages/assets/scss/00-base/_pikaday.scss +++ b/packages/assets/scss/00-base/_pikaday.scss @@ -53,7 +53,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..656e823821 100644 --- a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss +++ b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss @@ -5,7 +5,11 @@ @use "00-base/colors" as *; -@mixin ma-border-decorative($fg: transparent, $opacity: .5) { +@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; @@ -17,16 +21,100 @@ 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 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 { + + @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 { + 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 { + + @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; + } + } .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..8a928ba38b 100644 --- a/packages/assets/scss/00-base/mixins/_ma-button.scss +++ b/packages/assets/scss/00-base/mixins/_ma-button.scss @@ -13,7 +13,9 @@ @use "ma-button-base" as *; -@mixin ma-button ($type:"solid", $color:"transparent") { +@use "bourbon-neat/neat-warn" as *; + +@mixin ma-button($type: "solid", $color: "transparent") { @if ($color != "transparent") { font-weight: $fonts-bold; @@ -24,7 +26,18 @@ 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 +50,6 @@ &:hover:not(:disabled) { background-color: var(--mf-c-gray-light); } - } @else if $color == $c-highlight { color: var(--mf-c-gray-darkest); @@ -51,20 +63,39 @@ 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 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 { + + @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) { - 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 +108,6 @@ fill: var(--mf-c-gray-darkest); } } - } @else { color: $color; @@ -97,7 +127,7 @@ } } -@mixin ma-button-size ($size:"normal") { +@mixin ma-button-size($size: "normal") { @if ($size == "normal") { font-size: $fonts-medium; 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-grid.scss b/packages/assets/scss/00-base/mixins/_ma-grid.scss new file mode 100644 index 0000000000..f2ece060f6 --- /dev/null +++ b/packages/assets/scss/00-base/mixins/_ma-grid.scss @@ -0,0 +1,115 @@ +// 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 *; + +@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, + $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 +/// @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) == 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 { + $columns: nth($span, 1); + + @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} / span #{$columns}; + } @else { + grid-column: span #{$columns}; + } +} + +/// 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 +/// @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, + $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 ($tablet-breakpoint) { + grid-template-columns: repeat($tablet, 1fr); + } + + @media ($desktop-breakpoint) { + 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; +} + +/// 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/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/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/_button-search.scss b/packages/assets/scss/01-atoms/_button-search.scss index a3ad60376e..926352179d 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-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/01-atoms/_button-with-icon.scss b/packages/assets/scss/01-atoms/_button-with-icon.scss index 74e39759e8..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,14 @@ @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; @@ -28,20 +17,40 @@ $quaternary-colors: ( text-transform: uppercase; 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 { @@ -78,7 +87,7 @@ $quaternary-colors: ( } & > svg { - fill: var(--mf-c-gray-dark); + fill: var(--button-svg-fill); height: 20px; transition: transform 0.5s, fill 0.4s; } @@ -95,40 +104,26 @@ $quaternary-colors: ( &--expanded, &:hover { - @include ma-button("solid", $c-primary-alt); + @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); - } - } + @include ma-button("outline", var(--button-color)); } &--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 { @@ -145,35 +140,19 @@ $quaternary-colors: ( 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); + 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: $c; - } - - &:hover, - &.active { - border-bottom-color: $c; - } - } - } } &--expanded.ma__button-icon--quaternary-simple, @@ -194,22 +173,12 @@ $quaternary-colors: ( 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); } } @@ -223,29 +192,25 @@ $quaternary-colors: ( 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, 0.5); + fill: var(--mf-c-white-50); width: 10px; } - @each $class, $c in $colors { - &.ma__button-icon--#{$class} { - background-color: $c; + // Special case for highlight color on alert buttons - @if $c == $c-highlight { - color: var(--mf-c-font-base); + &.ma__button-icon--c-highlight { + color: var(--mf-c-font-base); - &.ma__button-icon > svg { - fill: rgba($c-gray-darkest, 0.5); - } - } + &.ma__button-icon > svg { + fill: var(--mf-c-gray-darkest-50); } } } 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/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/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/_iframe.scss b/packages/assets/scss/01-atoms/_iframe.scss index f16858dbc1..2294177f5f 100644 --- a/packages/assets/scss/01-atoms/_iframe.scss +++ b/packages/assets/scss/01-atoms/_iframe.scss @@ -85,11 +85,6 @@ $iframe-ratios: ( .ma__iframe { -// Comment out for DP-8190 -// &__container { -// background-color: rgba($c-primary,.1); -// } - &__link { font-size: $fonts-medium; } diff --git a/packages/assets/scss/01-atoms/_input-checkbox.scss b/packages/assets/scss/01-atoms/_input-checkbox.scss index e2fc51064d..211d26bc8e 100644 --- a/packages/assets/scss/01-atoms/_input-checkbox.scss +++ b/packages/assets/scss/01-atoms/_input-checkbox.scss @@ -141,9 +141,8 @@ // Light theme label:after { - - 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); } } } 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 a01942c28f..7ff39068d8 100644 --- a/packages/assets/scss/01-atoms/_input-radio.scss +++ b/packages/assets/scss/01-atoms/_input-radio.scss @@ -227,40 +227,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 cff8a46eee..2cc09fded0 100644 --- a/packages/assets/scss/01-atoms/_input-typeahead.scss +++ b/packages/assets/scss/01-atoms/_input-typeahead.scss @@ -91,7 +91,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 339423b4e1..190dde7356 100644 --- a/packages/assets/scss/01-atoms/_select-box.scss +++ b/packages/assets/scss/01-atoms/_select-box.scss @@ -112,8 +112,8 @@ } .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); } } @@ -142,7 +142,7 @@ } .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 6c2bcc91c2..2c6ec86c67 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 2b2306c5ea..76cf1a7138 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; @@ -121,7 +121,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/_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/_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/_back-button.scss b/packages/assets/scss/02-molecules/_back-button.scss index ffc2b29900..453eb80acf 100644 --- a/packages/assets/scss/02-molecules/_back-button.scss +++ b/packages/assets/scss/02-molecules/_back-button.scss @@ -53,7 +53,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/_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..d51a5066d6 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) { @@ -42,7 +42,7 @@ font-size: $fonts-xlarge; line-height: 1.3; vertical-align: middle; - padding-right: .8em; + padding-right: 0.8em; width: 100%; } @@ -63,7 +63,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 +86,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,8 +109,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); } // removed after version 5.5.0 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/_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/_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/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 7fdf6773fa..85bd410e26 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: var(--mf-c-font-dark-50); } } } @@ -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/_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 a50646a3c3..471fcbb931 100644 --- a/packages/assets/scss/02-molecules/_keyword-search.scss +++ b/packages/assets/scss/02-molecules/_keyword-search.scss @@ -98,7 +98,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 e6b2290fa7..5ea3e0ab42 100644 --- a/packages/assets/scss/02-molecules/_location-filters.scss +++ b/packages/assets/scss/02-molecules/_location-filters.scss @@ -6,27 +6,66 @@ 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; } } &__by-location { - margin-bottom: 30px; + margin-bottom: 10px; 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", 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..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($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 2a994bada5..6ff6ef1b4a 100644 --- a/packages/assets/scss/02-molecules/_popover.scss +++ b/packages/assets/scss/02-molecules/_popover.scss @@ -47,7 +47,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); z-index: $z-skyline; transition: opacity 0.2s ease, visibility 0.2s ease; } diff --git a/packages/assets/scss/02-molecules/_press-status.scss b/packages/assets/scss/02-molecules/_press-status.scss index 10cbe1cd0f..3fbb7c7303 100644 --- a/packages/assets/scss/02-molecules/_press-status.scss +++ b/packages/assets/scss/02-molecules/_press-status.scss @@ -21,8 +21,8 @@ content: ""; height: 100%; position: absolute; - right: 100%; - top: 0; + right: 100%; + top: 0; width: 50vw; } } @@ -38,31 +38,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/_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/_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/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 31fee5a0e7..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($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 ae8d71c59b..f4f4f4e7d7 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) { @@ -159,17 +155,17 @@ &__title { - @include ma-border-decorative($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); @@ -180,7 +176,7 @@ background-color: var(--mf-c-primary); &:hover { - background-color: rgba($c-primary,.8); + background-color: var(--mf-c-primary-80); 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: var(--mf-c-primary-alt-80); 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: var(--mf-c-gray-dark-80); a { border-bottom-color: var(--mf-c-font-inverse); @@ -217,7 +213,7 @@ svg, svg > g { - fill: rgba($c-font-medium,.7); + fill: var(--mf-c-font-medium-70); } } @@ -227,20 +223,20 @@ svg, svg > g { - fill: rgba($c-font-inverse,.7); + fill: var(--mf-c-font-inverse-70); } } &__category { - color: rgba($c-font-base,.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,.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 { @@ -267,7 +263,7 @@ } svg { - fill: rgba(var(--mf-c-font-inverse), .5); + fill: var(--mf-c-font-inverse-50); } } } 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 265ce34d88..556a878032 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,22 +156,26 @@ $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,.6), transparent 90%, transparent); + background-image: linear-gradient( + 180deg, + var(--mf-c-black-60), + transparent 90%, + transparent + ); } &--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 { 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: var(--mf-c-font-inverse-50); } } svg { - fill: rgba($c-font-inverse, .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 f5e62adf9f..696814efef 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; } } } @@ -108,11 +101,11 @@ &__title { - @include ma-border-decorative($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__date { - background-color: rgba($c-white,.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 77577b3fdf..d14e3789c8 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -86,9 +86,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 { @@ -100,20 +100,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 { @@ -123,9 +123,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 { @@ -135,9 +135,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 { @@ -147,9 +147,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 { @@ -159,9 +159,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-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/_callout-message.scss b/packages/assets/scss/03-organisms/_callout-message.scss index 6f237ac4e4..b53ed1cc41 100644 --- a/packages/assets/scss/03-organisms/_callout-message.scss +++ b/packages/assets/scss/03-organisms/_callout-message.scss @@ -22,9 +22,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; @@ -41,8 +41,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 1999998f1e..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($c-primary-alt); + @include ma-border-decorative(var(--mf-c-primary-alt-50)); } &__date { 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/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss index 66d3d215e8..d7d9829c32 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 { @@ -36,11 +36,11 @@ $colors: ( @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); } @@ -57,13 +57,13 @@ $colors: ( @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 +74,8 @@ $colors: ( height: 0px; } - &.collapsing, &.expanding { + &.collapsing, + &.expanding { position: relative; overflow: hidden; visibility: visible; @@ -87,11 +88,10 @@ $colors: ( } &.expanded { - height: auto; - visibility: visible; - display: block; + height: auto; + visibility: visible; + display: block; } - } &__container { @@ -121,13 +121,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%; } } @@ -141,7 +142,6 @@ $colors: ( @if $c == $c-warning { color: var(--mf-c-font-base); - } @else { color: var(--mf-c-font-inverse); } @@ -153,7 +153,8 @@ $colors: ( height: 0px; } - &.collapsing, &.expanding { + &.collapsing, + &.expanding { position: relative; overflow: hidden; visibility: visible; @@ -166,25 +167,57 @@ $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 { + + @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} { - 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 { + + @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; + } } &.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 d1d4f22166..f086af039e 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: var(--mf-c-black-60); color: var(--mf-c-font-inverse); } &__title { - @include ma-border-decorative($c-highlight,1); + @include ma-border-decorative(var(--mf-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", 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 fbcc9bd0ed..4c4bcdc505 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,7 @@ @media ($bp-large-min) { - @include span-columns(9); - float: right; - margin-right: 0; + @include ma-grid-span-to-end(4); margin-bottom: 20px; } } @@ -84,7 +91,8 @@ @media ($bp-large-min) { - @include span-columns(3); + @include ma-grid-span(3); + grid-row: 1; } } @@ -122,11 +130,11 @@ &__back2top { - @include ma-button("outline",$c-primary); - background-color: rgba($c-white, .9); + @include ma-button("outline", var(--mf-c-primary)); + background-color: var(--mf-c-white-90); svg { - fill: rgba($c-primary, .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 d1eb767fb7..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; @@ -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; @@ -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 b1e0de7b45..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); } } @@ -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/_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/_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/_key-actions.scss b/packages/assets/scss/03-organisms/_key-actions.scss index a906cce5ed..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,13 +64,10 @@ .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%; } 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/_link-list.scss b/packages/assets/scss/03-organisms/_link-list.scss index 20ee080ece..2965a4cff2 100644 --- a/packages/assets/scss/03-organisms/_link-list.scss +++ b/packages/assets/scss/03-organisms/_link-list.scss @@ -14,11 +14,6 @@ margin-bottom: 1em; } - &__container { - - @include clearfix; - } - &__items { margin-bottom: 0; padding-left: 20px; @@ -32,12 +27,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); } } @@ -45,12 +35,7 @@ @media ($bp-medium-min) { - .item-left { - - @include span-columns(6); - margin-right: flex-gutter(12); - display: list-item; - } + @include ma-grid(2, 0); } } @@ -92,8 +77,6 @@ } } - - .sidebar &__item + &__item { border-top-style: solid; border-top-width: 1px; 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-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/_page-flipper.scss b/packages/assets/scss/03-organisms/_page-flipper.scss index 9bd1bc423a..dbc410bf5b 100644 --- a/packages/assets/scss/03-organisms/_page-flipper.scss +++ b/packages/assets/scss/03-organisms/_page-flipper.scss @@ -89,7 +89,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/_page-overview.scss b/packages/assets/scss/03-organisms/_page-overview.scss index 78f99d80d1..b094ad38b0 100644 --- a/packages/assets/scss/03-organisms/_page-overview.scss +++ b/packages/assets/scss/03-organisms/_page-overview.scss @@ -12,11 +12,9 @@ @include ma-container(); } - &__event-image { @media ($bp-small-min) { - // @include span-columns(4 of 8); float: right; font-size: 0; margin-left: 2.43902%; diff --git a/packages/assets/scss/03-organisms/_person-card.scss b/packages/assets/scss/03-organisms/_person-card.scss index 845cd6e123..4d33cf84a5 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/_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..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($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/_rich-text.scss b/packages/assets/scss/03-organisms/_rich-text.scss index 6788ae18d4..adbdb98a21 100644 --- a/packages/assets/scss/03-organisms/_rich-text.scss +++ b/packages/assets/scss/03-organisms/_rich-text.scss @@ -296,7 +296,7 @@ $heading-indent: $gutter; h2, h3, h4 { - @include ma-comp-heading($c-primary-alt); + @include ma-comp-heading(var(--mf-c-primary-alt)); } h2.ma__collapsible-header, 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/_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/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index b627b2eab1..695363fa08 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; } @@ -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. @@ -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%; @@ -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 52623e5056..7aa5c56ebd 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 @@ -195,7 +200,7 @@ &__title { - @include ma-border-decorative($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 662d487493..9cf716e08a 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-overlay.scss @@ -206,7 +206,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 c891d11108..d9ace45f3b 100644 --- a/packages/assets/scss/03-organisms/_teaser-listing.scss +++ b/packages/assets/scss/03-organisms/_teaser-listing.scss @@ -217,7 +217,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 26a69f6ffb..fd4e0d51cf 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 @@ -126,7 +122,7 @@ &__title { - @include ma-border-decorative($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 dd042995fa..bd8055f510 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; } } } @@ -57,7 +42,7 @@ &__title { - @include ma-border-decorative($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/_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)); } } 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/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; } } } - } 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"); } diff --git a/packages/react/src/components/molecules/SectionLinks/_index.scss b/packages/react/src/components/molecules/SectionLinks/_index.scss index 3d9a99bb19..18ca2310ae 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: var(--mf-c-primary-50); } } @@ -116,7 +116,7 @@ } svg { - fill: rgba($c-font-link,.5); + fill: var(--mf-c-font-link-50); } a { @@ -127,7 +127,7 @@ &:hover { @media ($bp-x-small-max) { - border-bottom-color: rgba($c-font-link,.5); + border-bottom-color: var(--mf-c-font-link-50); } } } @@ -173,7 +173,7 @@ } svg { - fill: rgba($c-font-heading,.5); + fill: var(--mf-c-font-heading-50); } a {