From 20b9076365f4f19617ddaf78544af089ddf7d042 Mon Sep 17 00:00:00 2001 From: Ans Date: Fri, 16 Aug 2024 17:07:46 -0400 Subject: [PATCH] Remove underscore named files | Move custom props to mixin | Move some vars to global space --- docs/pages/variables.md | 2 +- packages/cfpb-design-system/src/_index.scss | 50 ----- .../src/abstracts/brand-colors.scss | 170 ----------------- .../src/abstracts/custom-props.scss | 175 ++++++++++++++++++ .../cfpb-design-system/src/abstracts/index.js | 2 +- .../src/abstracts/{_index.scss => index.scss} | 6 +- .../src/abstracts/vars-breakpoints.js | 2 +- .../src/abstracts/vars.scss | 75 +++++++- .../src/base/{_index.scss => index.scss} | 0 .../cfpb-buttons/{_vars.scss => vars.scss} | 0 .../{_vars.scss => vars.scss} | 0 .../src/components/cfpb-forms/_vars.scss | 70 ------- .../src/components/cfpb-forms/form-alert.scss | 1 - .../src/components/cfpb-forms/form-field.scss | 1 - .../src/components/cfpb-forms/label.scss | 2 - .../components/cfpb-forms/multiselect.scss | 1 - .../src/components/cfpb-forms/range.scss | 1 - .../src/components/cfpb-forms/select.scss | 1 - .../src/components/cfpb-forms/text-input.scss | 1 - .../cfpb-layout/featured-content-module.scss | 4 - .../{_vars.scss => vars.scss} | 0 .../cfpb-pagination/{_vars.scss => vars.scss} | 0 .../cfpb-tables/{_vars.scss => vars.scss} | 0 .../cfpb-typography/{_vars.scss => vars.scss} | 0 .../src/utilities/breakpoint-state.js | 2 +- .../src/utilities/{_index.scss => index.scss} | 0 26 files changed, 249 insertions(+), 317 deletions(-) delete mode 100644 packages/cfpb-design-system/src/_index.scss delete mode 100644 packages/cfpb-design-system/src/abstracts/brand-colors.scss create mode 100644 packages/cfpb-design-system/src/abstracts/custom-props.scss rename packages/cfpb-design-system/src/abstracts/{_index.scss => index.scss} (83%) rename packages/cfpb-design-system/src/base/{_index.scss => index.scss} (100%) rename packages/cfpb-design-system/src/components/cfpb-buttons/{_vars.scss => vars.scss} (100%) rename packages/cfpb-design-system/src/components/cfpb-expandables/{_vars.scss => vars.scss} (100%) delete mode 100644 packages/cfpb-design-system/src/components/cfpb-forms/_vars.scss rename packages/cfpb-design-system/src/components/cfpb-notifications/{_vars.scss => vars.scss} (100%) rename packages/cfpb-design-system/src/components/cfpb-pagination/{_vars.scss => vars.scss} (100%) rename packages/cfpb-design-system/src/components/cfpb-tables/{_vars.scss => vars.scss} (100%) rename packages/cfpb-design-system/src/components/cfpb-typography/{_vars.scss => vars.scss} (100%) rename packages/cfpb-design-system/src/utilities/{_index.scss => index.scss} (100%) diff --git a/docs/pages/variables.md b/docs/pages/variables.md index a962b23c47..ecfb794626 100644 --- a/docs/pages/variables.md +++ b/docs/pages/variables.md @@ -9,7 +9,7 @@ description: > is, but if needed can be overwritten by duplicating the variable in a `@key: value` format with a different value. This customized variable would be placed in the same file where this component’s less file is imported. Color variables - referenced in comments are from cf-core cf-brand-colors.scss. + referenced in comments are from custom-props.scss. variation_groups: - variation_group_name: Buttons variations: diff --git a/packages/cfpb-design-system/src/_index.scss b/packages/cfpb-design-system/src/_index.scss deleted file mode 100644 index bca0a77941..0000000000 --- a/packages/cfpb-design-system/src/_index.scss +++ /dev/null @@ -1,50 +0,0 @@ -@forward 'abstracts'; -@forward 'base'; - -@forward 'components/cfpb-buttons/button-group'; -@forward 'components/cfpb-buttons/button-link'; -@forward 'components/cfpb-buttons/button-with-icon'; -@forward 'components/cfpb-buttons/button'; - -@forward 'components/cfpb-expandables/expandable-group'; -@forward 'components/cfpb-expandables/expandable'; -@forward 'components/cfpb-expandables/summary-minimal'; -@forward 'components/cfpb-expandables/summary'; - -@forward 'components/cfpb-forms/form-alert'; -@forward 'components/cfpb-forms/form-field'; -@forward 'components/cfpb-forms/form'; -@forward 'components/cfpb-forms/label'; -@forward 'components/cfpb-forms/multiselect'; -@forward 'components/cfpb-forms/range'; -@forward 'components/cfpb-forms/search-input'; -@forward 'components/cfpb-forms/select'; -@forward 'components/cfpb-forms/text-input'; - -@forward 'components/cfpb-icons/icon'; - -@forward 'components/cfpb-layout/card-group'; -@forward 'components/cfpb-layout/card'; -@forward 'components/cfpb-layout/email-signup'; -@forward 'components/cfpb-layout/featured-content-module'; -@forward 'components/cfpb-layout/hero'; -@forward 'components/cfpb-layout/layout'; -@forward 'components/cfpb-layout/text-introduction'; -@forward 'components/cfpb-layout/well'; - -@forward 'components/cfpb-notifications/banner'; -@forward 'components/cfpb-notifications/notification'; - -@forward 'components/cfpb-pagination/pagination'; - -@forward 'components/cfpb-tables/table'; - -@forward 'components/cfpb-typography/date'; -@forward 'components/cfpb-typography/link'; -@forward 'components/cfpb-typography/list'; -@forward 'components/cfpb-typography/meta-header'; -@forward 'components/cfpb-typography/pull-quote'; -@forward 'components/cfpb-typography/slug-header'; -@forward 'components/cfpb-typography/tagline'; - -@forward 'utilities'; diff --git a/packages/cfpb-design-system/src/abstracts/brand-colors.scss b/packages/cfpb-design-system/src/abstracts/brand-colors.scss deleted file mode 100644 index 9c7efbdd9b..0000000000 --- a/packages/cfpb-design-system/src/abstracts/brand-colors.scss +++ /dev/null @@ -1,170 +0,0 @@ -:root { - /* ========================================================================== - Design System - Color variables - ========================================================================== */ - - // Official CFPB color palette. - // Current as of November 20, 2020. - // To view the colors in the Design System, visit: - // https://cfpb.github.io/design-system/foundation/color - // - // | Beige | Green | Teal | Pacific | Navy | Purple | Red | Gold | Neutral | Gray | - // | ------ | ------ | ------ | ------- | ------ | ------ | ------ | ------ | ------- | ------ | - // darker | | | | | | | | | | 293037 | - // dark | | 1e9642 | 005e5d | 0050b4 | 002d72 | a01b68 | b63014 | dc731c | 745745 | 43484e | - // mid-dark | | 1fa040 | 126b69 | 0061c1 | 123c7c | aa2071 | c3381c | ed881b | 7d604b | 4f5257 | - // base | bea96f | 20aa3f | 257675 | 0072ce | 254b87 | b4267a | d14124 | ff9e1b | 8a6c57 | 5a5d61 | - // 90 | | 48b753 | 3e8685 | 2284d5 | 3e5f95 | be438b | d75a40 | ffab39 | 957865 | 676a6f | - // 80 | | 66c368 | 579695 | 4497dc | 5674a3 | c55998 | dd735d | ffb858 | a18573 | 75787b | - // 70 | | 93cf7c | 70a6a5 | 61a7e2 | 6f88b2 | cd70a5 | e28875 | ffc372 | ad9484 | 838588 | - // 60 | d8c8a0 | addc91 | 89b6b5 | 7eb7e8 | 889cc0 | d486b2 | e79e8e | ffce8d | baa496 | 919395 | - // 50 | | bae0a2 | 9ec4c3 | 96c4ed | 9daecc | dc9cbf | ebb0a3 | ffd8a3 | c6b4a9 | a2a3a4 | - // 40 | | c7e5b3 | b4d2d1 | afd2f2 | b3c0d9 | e3b2cc | f0c3b8 | ffe1b9 | d3c5bc | b4b5b6 | - // 30 | f0e8d8 | d4eac6 | c4dddc | c3ddf6 | c3cde2 | ebc9d9 | f3d1c8 | ffe8cb | ddd1c9 | c3c4c4 | - // 20 | | e2efd8 | d4e7e6 | d6e8fa | d3daeb | f0d8e2 | f7e0d9 | fff0dd | e7ddd7 | d2d3d5 | - // 15 | | | | | | | | | | dcdddf | - // 10 | | f0f8eb | f0f7f6 | eff8fd | f4f6fa | fdf3f8 | fbefec | fff6ec | f8f5f2 | e7e8e9 | - // 5 | | | | | | | | | | f7f8f9 | - // - // CFPB Black: 101820 - // CFPB White: ffffff - - // Beige family - --beige: #bea96f; - --beige-30: #f0e8d8; - --beige-60: #d8c8a0; - - // Green family - --green-dark: #1e9642; - --green-mid-dark: #1fa040; - --green: #20aa3f; // Primary brand green color, aka "CFPB Green" - --green-90: #48b753; - --green-80: #66c368; - --green-70: #93cf7c; - --green-60: #addc91; - --green-50: #bae0a2; - --green-40: #c7e5b3; - --green-30: #d4eac6; - --green-20: #e2efd8; - --green-10: #f0f8eb; - - // Teal family - --teal-dark: #005e5d; - --teal-mid-dark: #126b69; - --teal: #257675; - --teal-90: #3e8685; - --teal-80: #579695; - --teal-70: #70a6a5; - --teal-60: #89b6b5; - --teal-50: #9ec4c3; - --teal-40: #b4d2d1; - --teal-30: #c4dddc; - --teal-20: #d4e7e6; - --teal-10: #f0f7f6; - - // Pacific family - --pacific-dark: #0050b4; - --pacific-mid-dark: #0061c1; - --pacific: #0072ce; - --pacific-90: #2284d5; - --pacific-80: #4497dc; - --pacific-70: #61a7e2; - --pacific-60: #7eb7e8; - --pacific-50: #96c4ed; - --pacific-40: #afd2f2; - --pacific-30: #c3ddf6; - --pacific-20: #d6e8fa; - --pacific-10: #eff8fd; - - // Navy family - --navy-dark: #002d72; - --navy-mid-dark: #123c7c; - --navy: #254b87; - --navy-90: #3e5f95; - --navy-80: #5674a3; - --navy-70: #6f88b2; - --navy-60: #889cc0; - --navy-50: #9daecc; - --navy-40: #b3c0d9; - --navy-30: #c3cde2; - --navy-20: #d3daeb; - --navy-10: #f4f6fa; - - // Purple family - --purple-dark: #a01b68; - --purple-mid-dark: #aa2071; - --purple: #b4267a; - --purple-90: #be438b; - --purple-80: #c55998; - --purple-70: #cd70a5; - --purple-60: #d486b2; - --purple-50: #dc9cbf; - --purple-40: #e3b2cc; - --purple-30: #ebc9d9; - --purple-20: #f0d8e2; - --purple-10: #fdf3f8; - - // Red family - --red-dark: #b63014; - --red-mid-dark: #c3381c; - --red: #d14124; - --red-90: #d75a40; - --red-80: #dd735d; - --red-70: #e28875; - --red-60: #e79e8e; - --red-50: #ebb0a3; - --red-40: #f0c3b8; - --red-30: #f3d1c8; - --red-20: #f7e0d9; - --red-10: #fbefec; - - // Gold family - --gold-dark: #dc731c; - --gold-mid-dark: #ed881b; - --gold: #ff9e1b; - --gold-90: #ffab39; - --gold-80: #ffb858; - --gold-70: #ffc372; - --gold-60: #ffce8d; - --gold-50: #ffd8a3; - --gold-40: #ffe1b9; - --gold-30: #ffe8cb; - --gold-20: #fff0dd; - --gold-10: #fff6ec; - - // Neutral family - --neutral-dark: #745745; - --neutral-mid-dark: #7d604b; - --neutral: #8a6c57; - --neutral-90: #957865; - --neutral-80: #a18573; - --neutral-70: #ad9484; - --neutral-60: #baa496; - --neutral-50: #c6b4a9; - --neutral-40: #d3c5bc; - --neutral-30: #ddd1c9; - --neutral-20: #e7ddd7; - --neutral-10: #f8f5f2; - - // Gray family - --gray-darker: #293037; - --gray-dark: #43484e; - --gray-mid-dark: #4f5257; - --gray: #5a5d61; - --gray-90: #676a6f; - --gray-80: #75787b; - --gray-70: #838588; - --gray-60: #919395; - --gray-50: #a2a3a4; - --gray-40: #b4b5b6; - --gray-30: #c3c4c4; - --gray-20: #d2d3d5; - --gray-15: #dcdddf; - --gray-10: #e7e8e9; - --gray-5: #f7f8f9; - - // with special guests - --black: #101820; // Also known as "CFPB Black" - --white: #fff; -} diff --git a/packages/cfpb-design-system/src/abstracts/custom-props.scss b/packages/cfpb-design-system/src/abstracts/custom-props.scss new file mode 100644 index 0000000000..6aa474def6 --- /dev/null +++ b/packages/cfpb-design-system/src/abstracts/custom-props.scss @@ -0,0 +1,175 @@ +@mixin define-custom-props() { + :root { + // Default font variable. + --font-stack: system-ui, sans-serif; + + /* ========================================================================== + Design System + Color variables + ========================================================================== */ + + // Official CFPB color palette. + // Current as of November 20, 2020. + // To view the colors in the Design System, visit: + // https://cfpb.github.io/design-system/foundation/color + // + // | Beige | Green | Teal | Pacific | Navy | Purple | Red | Gold | Neutral | Gray | + // | ------ | ------ | ------ | ------- | ------ | ------ | ------ | ------ | ------- | ------ | + // darker | | | | | | | | | | 293037 | + // dark | | 1e9642 | 005e5d | 0050b4 | 002d72 | a01b68 | b63014 | dc731c | 745745 | 43484e | + // mid-dark | | 1fa040 | 126b69 | 0061c1 | 123c7c | aa2071 | c3381c | ed881b | 7d604b | 4f5257 | + // base | bea96f | 20aa3f | 257675 | 0072ce | 254b87 | b4267a | d14124 | ff9e1b | 8a6c57 | 5a5d61 | + // 90 | | 48b753 | 3e8685 | 2284d5 | 3e5f95 | be438b | d75a40 | ffab39 | 957865 | 676a6f | + // 80 | | 66c368 | 579695 | 4497dc | 5674a3 | c55998 | dd735d | ffb858 | a18573 | 75787b | + // 70 | | 93cf7c | 70a6a5 | 61a7e2 | 6f88b2 | cd70a5 | e28875 | ffc372 | ad9484 | 838588 | + // 60 | d8c8a0 | addc91 | 89b6b5 | 7eb7e8 | 889cc0 | d486b2 | e79e8e | ffce8d | baa496 | 919395 | + // 50 | | bae0a2 | 9ec4c3 | 96c4ed | 9daecc | dc9cbf | ebb0a3 | ffd8a3 | c6b4a9 | a2a3a4 | + // 40 | | c7e5b3 | b4d2d1 | afd2f2 | b3c0d9 | e3b2cc | f0c3b8 | ffe1b9 | d3c5bc | b4b5b6 | + // 30 | f0e8d8 | d4eac6 | c4dddc | c3ddf6 | c3cde2 | ebc9d9 | f3d1c8 | ffe8cb | ddd1c9 | c3c4c4 | + // 20 | | e2efd8 | d4e7e6 | d6e8fa | d3daeb | f0d8e2 | f7e0d9 | fff0dd | e7ddd7 | d2d3d5 | + // 15 | | | | | | | | | | dcdddf | + // 10 | | f0f8eb | f0f7f6 | eff8fd | f4f6fa | fdf3f8 | fbefec | fff6ec | f8f5f2 | e7e8e9 | + // 5 | | | | | | | | | | f7f8f9 | + // + // CFPB Black: 101820 + // CFPB White: ffffff + + // Beige family + --beige: #bea96f; + --beige-30: #f0e8d8; + --beige-60: #d8c8a0; + + // Green family + --green-dark: #1e9642; + --green-mid-dark: #1fa040; + --green: #20aa3f; // Primary brand green color, aka "CFPB Green" + --green-90: #48b753; + --green-80: #66c368; + --green-70: #93cf7c; + --green-60: #addc91; + --green-50: #bae0a2; + --green-40: #c7e5b3; + --green-30: #d4eac6; + --green-20: #e2efd8; + --green-10: #f0f8eb; + + // Teal family + --teal-dark: #005e5d; + --teal-mid-dark: #126b69; + --teal: #257675; + --teal-90: #3e8685; + --teal-80: #579695; + --teal-70: #70a6a5; + --teal-60: #89b6b5; + --teal-50: #9ec4c3; + --teal-40: #b4d2d1; + --teal-30: #c4dddc; + --teal-20: #d4e7e6; + --teal-10: #f0f7f6; + + // Pacific family + --pacific-dark: #0050b4; + --pacific-mid-dark: #0061c1; + --pacific: #0072ce; + --pacific-90: #2284d5; + --pacific-80: #4497dc; + --pacific-70: #61a7e2; + --pacific-60: #7eb7e8; + --pacific-50: #96c4ed; + --pacific-40: #afd2f2; + --pacific-30: #c3ddf6; + --pacific-20: #d6e8fa; + --pacific-10: #eff8fd; + + // Navy family + --navy-dark: #002d72; + --navy-mid-dark: #123c7c; + --navy: #254b87; + --navy-90: #3e5f95; + --navy-80: #5674a3; + --navy-70: #6f88b2; + --navy-60: #889cc0; + --navy-50: #9daecc; + --navy-40: #b3c0d9; + --navy-30: #c3cde2; + --navy-20: #d3daeb; + --navy-10: #f4f6fa; + + // Purple family + --purple-dark: #a01b68; + --purple-mid-dark: #aa2071; + --purple: #b4267a; + --purple-90: #be438b; + --purple-80: #c55998; + --purple-70: #cd70a5; + --purple-60: #d486b2; + --purple-50: #dc9cbf; + --purple-40: #e3b2cc; + --purple-30: #ebc9d9; + --purple-20: #f0d8e2; + --purple-10: #fdf3f8; + + // Red family + --red-dark: #b63014; + --red-mid-dark: #c3381c; + --red: #d14124; + --red-90: #d75a40; + --red-80: #dd735d; + --red-70: #e28875; + --red-60: #e79e8e; + --red-50: #ebb0a3; + --red-40: #f0c3b8; + --red-30: #f3d1c8; + --red-20: #f7e0d9; + --red-10: #fbefec; + + // Gold family + --gold-dark: #dc731c; + --gold-mid-dark: #ed881b; + --gold: #ff9e1b; + --gold-90: #ffab39; + --gold-80: #ffb858; + --gold-70: #ffc372; + --gold-60: #ffce8d; + --gold-50: #ffd8a3; + --gold-40: #ffe1b9; + --gold-30: #ffe8cb; + --gold-20: #fff0dd; + --gold-10: #fff6ec; + + // Neutral family + --neutral-dark: #745745; + --neutral-mid-dark: #7d604b; + --neutral: #8a6c57; + --neutral-90: #957865; + --neutral-80: #a18573; + --neutral-70: #ad9484; + --neutral-60: #baa496; + --neutral-50: #c6b4a9; + --neutral-40: #d3c5bc; + --neutral-30: #ddd1c9; + --neutral-20: #e7ddd7; + --neutral-10: #f8f5f2; + + // Gray family + --gray-darker: #293037; + --gray-dark: #43484e; + --gray-mid-dark: #4f5257; + --gray: #5a5d61; + --gray-90: #676a6f; + --gray-80: #75787b; + --gray-70: #838588; + --gray-60: #919395; + --gray-50: #a2a3a4; + --gray-40: #b4b5b6; + --gray-30: #c3c4c4; + --gray-20: #d2d3d5; + --gray-15: #dcdddf; + --gray-10: #e7e8e9; + --gray-5: #f7f8f9; + + // with special guests + --black: #101820; // Also known as "CFPB Black" + --white: #fff; + } +} diff --git a/packages/cfpb-design-system/src/abstracts/index.js b/packages/cfpb-design-system/src/abstracts/index.js index 8b46b167bc..557e8d6844 100644 --- a/packages/cfpb-design-system/src/abstracts/index.js +++ b/packages/cfpb-design-system/src/abstracts/index.js @@ -1 +1 @@ -export * as varsBreakpoints from './vars-breakpoints'; +export { varsBreakpoints } from './vars-breakpoints'; diff --git a/packages/cfpb-design-system/src/abstracts/_index.scss b/packages/cfpb-design-system/src/abstracts/index.scss similarity index 83% rename from packages/cfpb-design-system/src/abstracts/_index.scss rename to packages/cfpb-design-system/src/abstracts/index.scss index eb76a72d24..53e00be858 100644 --- a/packages/cfpb-design-system/src/abstracts/_index.scss +++ b/packages/cfpb-design-system/src/abstracts/index.scss @@ -1,6 +1,6 @@ -@forward 'brand-colors'; +@forward 'custom-props'; +@forward 'vars'; +@forward 'vars-breakpoints'; @forward 'grid-mixins'; @forward 'heading-mixins'; @forward 'media-queries'; -@forward 'vars-breakpoints'; -@forward 'vars'; diff --git a/packages/cfpb-design-system/src/abstracts/vars-breakpoints.js b/packages/cfpb-design-system/src/abstracts/vars-breakpoints.js index bf82728743..8adb97a478 100644 --- a/packages/cfpb-design-system/src/abstracts/vars-breakpoints.js +++ b/packages/cfpb-design-system/src/abstracts/vars-breakpoints.js @@ -7,7 +7,7 @@ they need to be adjusted in vars-breakpoints.scss as well. ========================================================================== */ -export default { +export const varsBreakpoints = { bpXS: { min: 0, max: 600, diff --git a/packages/cfpb-design-system/src/abstracts/vars.scss b/packages/cfpb-design-system/src/abstracts/vars.scss index bd5f80cad1..5d5a774470 100644 --- a/packages/cfpb-design-system/src/abstracts/vars.scss +++ b/packages/cfpb-design-system/src/abstracts/vars.scss @@ -1,8 +1,5 @@ @use 'sass:math'; -// Import external dependencies -@use './brand-colors'; - /* ========================================================================== Design System Variables @@ -52,11 +49,6 @@ $size-v: 14px; // h5-site $size-vi: 12px; // h6-size $size-code: 13px; // Custom size only for Mono code blocks -// Font variables -:root { - --font-stack: system-ui, sans-serif; -} - // Icon variables // Icons' SVG viewbox are a consistent 19px (h) x variable (w). @@ -89,3 +81,70 @@ $block-border-left: $block-border; // .content__main $content-main-border: var(--gray-40); + +// Form variables + +// .a-text-input borders +$input-border: var(--gray-60); +$input-border-hover: var(--pacific); +$input-border-focused: var(--pacific); +$input-border-error: var(--red); +$input-border-error-hover: var(--red-dark); +$input-border-warning: var(--gold); +$input-border-warning-hover: var(--gold-dark); +$input-border-success: var(--green); +$input-border-success-hover: var(--green-dark); + +// .a-text-input backgrounds +$input-bg: var(--white); +$input-bg-selected: var(--pacific); +$input-bg-disabled: var(--gray-10); +$input-bg-disabled-selected: var(--gray-40); + +// .a-text-input text +$input-text: var(--black); +$input-text-disabled: var(--gray-dark); +$input-text-placeholder: var(--gray-dark); + +// .a-text-input icons +$input-icon: var(--gray); +$input-icon-success: var(--green); +$input-icon-warning: var(--gold); +$input-icon-error: var(--red); + +// .a-select +$select-border: $input-border; +$select-icon-bg: var(--gray-10); +$select-text-disabled: $input-text-disabled; + +// .m-form-field +$form-field-input-border: $input-border; +$form-field-input-border-disabled: var(--gray-60); +$form-field-inset: var(--white); + +// .m-form-field--lg-target +$form-field-input-lg-target-bg: var(--gray-10); +$form-field-input-lg-target-bg-selected: var(--pacific-20); +$form-field-input-lg-target-bg-disabled: var(--gray-20); +$form-field-input-lg-target-border: var(--pacific); + +// .a-label__helper +$label-helper: var(--gray-dark); + +// .a-range borders +$range-border: var(--gray-40); +$range-border-focused: var(--pacific); + +// .a-range backgrounds +$range-bg: var(--gray-10); +$range-bg-track: var(--gray-80); +$range-bg-focused: var(--pacific-20); + +// Sizing variables + +// .a-select +$select-height: 35px; + +// Featured Content Module sizing variables. +$fcm-visual-width: 270px; +$fcm-min-height: 220px; diff --git a/packages/cfpb-design-system/src/base/_index.scss b/packages/cfpb-design-system/src/base/index.scss similarity index 100% rename from packages/cfpb-design-system/src/base/_index.scss rename to packages/cfpb-design-system/src/base/index.scss diff --git a/packages/cfpb-design-system/src/components/cfpb-buttons/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-buttons/vars.scss similarity index 100% rename from packages/cfpb-design-system/src/components/cfpb-buttons/_vars.scss rename to packages/cfpb-design-system/src/components/cfpb-buttons/vars.scss diff --git a/packages/cfpb-design-system/src/components/cfpb-expandables/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-expandables/vars.scss similarity index 100% rename from packages/cfpb-design-system/src/components/cfpb-expandables/_vars.scss rename to packages/cfpb-design-system/src/components/cfpb-expandables/vars.scss diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-forms/_vars.scss deleted file mode 100644 index 74d4394375..0000000000 --- a/packages/cfpb-design-system/src/components/cfpb-forms/_vars.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* ========================================================================== - Design System - Form Element Styling - ========================================================================== */ -// -// Theme variables -// - -// Color variables - -// .a-text-input borders -$input-border: var(--gray-60); -$input-border-hover: var(--pacific); -$input-border-focused: var(--pacific); -$input-border-error: var(--red); -$input-border-error-hover: var(--red-dark); -$input-border-warning: var(--gold); -$input-border-warning-hover: var(--gold-dark); -$input-border-success: var(--green); -$input-border-success-hover: var(--green-dark); - -// .a-text-input backgrounds -$input-bg: var(--white); -$input-bg-selected: var(--pacific); -$input-bg-disabled: var(--gray-10); -$input-bg-disabled-selected: var(--gray-40); - -// .a-text-input text -$input-text: var(--black); -$input-text-disabled: var(--gray-dark); -$input-text-placeholder: var(--gray-dark); - -// .a-text-input icons -$input-icon: var(--gray); -$input-icon-success: var(--green); -$input-icon-warning: var(--gold); -$input-icon-error: var(--red); - -// .a-select -$select-border: $input-border; -$select-icon-bg: var(--gray-10); -$select-text-disabled: $input-text-disabled; - -// .m-form-field -$form-field-input-border: $input-border; -$form-field-input-border-disabled: var(--gray-60); -$form-field-inset: var(--white); - -// .m-form-field--lg-target -$form-field-input-lg-target-bg: var(--gray-10); -$form-field-input-lg-target-bg-selected: var(--pacific-20); -$form-field-input-lg-target-bg-disabled: var(--gray-20); -$form-field-input-lg-target-border: var(--pacific); - -// .a-label__helper -$label-helper: var(--gray-dark); - -// .a-range borders -$range-border: var(--gray-40); -$range-border-focused: var(--pacific); - -// .a-range backgrounds -$range-bg: var(--gray-10); -$range-bg-track: var(--gray-80); -$range-bg-focused: var(--pacific-20); - -// Sizing variables - -// .a-select -$select-height: 35px; diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/form-alert.scss b/packages/cfpb-design-system/src/components/cfpb-forms/form-alert.scss index bbd1a82833..12452e2854 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/form-alert.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/form-alert.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use './vars' as *; @use '../../abstracts' as *; .a-form-alert { diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/form-field.scss b/packages/cfpb-design-system/src/components/cfpb-forms/form-field.scss index 03c3e73b41..53f94631dc 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/form-field.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/form-field.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use './vars' as *; @use '../../abstracts' as *; @use '../../utilities' as *; diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/label.scss b/packages/cfpb-design-system/src/components/cfpb-forms/label.scss index 7563a5fe69..599e46ad21 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/label.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/label.scss @@ -1,6 +1,4 @@ @use 'sass:math'; -@use './vars.scss' as *; -@use '../../abstracts' as *; @use '../../abstracts' as *; .a-label { diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/multiselect.scss b/packages/cfpb-design-system/src/components/cfpb-forms/multiselect.scss index 4b5d409738..d38ed4e041 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/multiselect.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/multiselect.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use './vars.scss' as *; @use '../../abstracts' as *; // Initial and no-js state. diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/range.scss b/packages/cfpb-design-system/src/components/cfpb-forms/range.scss index e7e75e5524..a3b5775212 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/range.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/range.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use './vars.scss' as *; @use '../../abstracts' as *; @mixin u-range-track-styles() { diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/select.scss b/packages/cfpb-design-system/src/components/cfpb-forms/select.scss index af7373c015..05f203d3bc 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/select.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/select.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use './vars.scss' as *; @use '../../abstracts' as *; .a-select { diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/text-input.scss b/packages/cfpb-design-system/src/components/cfpb-forms/text-input.scss index 8e8e8590c5..ce1be7119d 100644 --- a/packages/cfpb-design-system/src/components/cfpb-forms/text-input.scss +++ b/packages/cfpb-design-system/src/components/cfpb-forms/text-input.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use './vars.scss' as *; @use '../../abstracts' as *; // Border and Outline Status styling. diff --git a/packages/cfpb-design-system/src/components/cfpb-layout/featured-content-module.scss b/packages/cfpb-design-system/src/components/cfpb-layout/featured-content-module.scss index f16e151d6e..af0f75b070 100644 --- a/packages/cfpb-design-system/src/components/cfpb-layout/featured-content-module.scss +++ b/packages/cfpb-design-system/src/components/cfpb-layout/featured-content-module.scss @@ -1,10 +1,6 @@ @use 'sass:math'; @use '../../abstracts' as *; -// Featured Content Module variables -$fcm-visual-width: 270px; -$fcm-min-height: 220px; - .o-featured-content-module { min-height: $fcm-min-height; position: relative; diff --git a/packages/cfpb-design-system/src/components/cfpb-notifications/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-notifications/vars.scss similarity index 100% rename from packages/cfpb-design-system/src/components/cfpb-notifications/_vars.scss rename to packages/cfpb-design-system/src/components/cfpb-notifications/vars.scss diff --git a/packages/cfpb-design-system/src/components/cfpb-pagination/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-pagination/vars.scss similarity index 100% rename from packages/cfpb-design-system/src/components/cfpb-pagination/_vars.scss rename to packages/cfpb-design-system/src/components/cfpb-pagination/vars.scss diff --git a/packages/cfpb-design-system/src/components/cfpb-tables/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-tables/vars.scss similarity index 100% rename from packages/cfpb-design-system/src/components/cfpb-tables/_vars.scss rename to packages/cfpb-design-system/src/components/cfpb-tables/vars.scss diff --git a/packages/cfpb-design-system/src/components/cfpb-typography/_vars.scss b/packages/cfpb-design-system/src/components/cfpb-typography/vars.scss similarity index 100% rename from packages/cfpb-design-system/src/components/cfpb-typography/_vars.scss rename to packages/cfpb-design-system/src/components/cfpb-typography/vars.scss diff --git a/packages/cfpb-design-system/src/utilities/breakpoint-state.js b/packages/cfpb-design-system/src/utilities/breakpoint-state.js index 11a7c9e384..e3178c96aa 100644 --- a/packages/cfpb-design-system/src/utilities/breakpoint-state.js +++ b/packages/cfpb-design-system/src/utilities/breakpoint-state.js @@ -2,7 +2,7 @@ Get Breakpoint State ========================================================================== */ -import varsBreakpoints from '../abstracts/vars-breakpoints.js'; +import { varsBreakpoints } from '../abstracts/vars-breakpoints.js'; /** * @returns {number} The base font size set on the body element. diff --git a/packages/cfpb-design-system/src/utilities/_index.scss b/packages/cfpb-design-system/src/utilities/index.scss similarity index 100% rename from packages/cfpb-design-system/src/utilities/_index.scss rename to packages/cfpb-design-system/src/utilities/index.scss