diff --git a/package-lock.json b/package-lock.json index b5a7cc355..e14dd267e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11695,9 +11695,6 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "dev": true, - "dependencies": { - "graceful-fs": "^4.1.6" - }, "optionalDependencies": { "graceful-fs": "^4.1.6" } @@ -17955,7 +17952,6 @@ "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "dependencies": { - "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", "neo-async": "^2.5.0", "watchpack-chokidar2": "^2.0.1" @@ -18020,7 +18016,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", diff --git a/public/index.html b/public/index.html index 84665a8b4..9047c9643 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss index 2a87319f3..b27b97536 100644 --- a/src/assets/scss/_CustomVariables.scss +++ b/src/assets/scss/_CustomVariables.scss @@ -1,50 +1,72 @@ // Color system -// scss-docs-start gray-color-variables +// White/black $white: #FFFFFF; -$gray-100: #F4F4F4; -$gray-200: #CACBCC; -$gray-300: #B3B4B5; -$gray-400: #B0B3B3;//Default Gray (Gray 400) $black: #000; -// scss-docs-end gray-color-variables -// fusv-disable -// scss-docs-start gray-colors-map -$grays: ( -"100": $gray-100, -"200": $gray-200, -"300": $gray-300, -"400": $gray-400, -); -// scss-docs-end gray-colors-map -// fusv-enable - -// scss-docs-start color-variables -$blue-100: #E4F1F7; -$blue-200: #E7F1F6; -$blue-300: #B9D7E6; -$blue-400: #125B7E; -$blue-600: #1574A1; +// Blues +$blue-100: #E4F1F7;// Used in theme +$blue-200: #C1DFEE; +$blue-300: #9FCEE6; +$blue-400: #69ADCF;// Used in theme +$blue-500: #3B8FB8; +$blue: #167CAC;// Default Blue $blue-700: #06577C; -$blue: #167CAC;//Default Blue (Blue 500) +$blue-800: #003D58; +$blue-900: #002433;// Used in theme + +// Reds +$red-100: #FFE6E4; +$red-200: #FDC0BB; +$red-300: #FB9A93; +$red-400: #EB5E54; +$red: #DA291C;// Default Red +$red-600: #B0160B; +$red-700: #870900; +$red-800: #5D0600; +$red-900: #330300; + +// Greens +$green-100: #E3F2EA; +$green-200: #BCEDD4; +$green-300: #94D7B6; +$green-400: #EB594F;// Used in theme +$green-500: #2CA168; +$green: #C40E01;// Default Green +$green-700: #006A36; +$green-800: #004F28; +$green-900: #00331A; + +// Yellows +$yellow-100: #FFF5EB; +$yellow-200: #FFE7C7; +$yellow-300: #FFD8A1; +$yellow-400: #FFB25C; +$yellow: #F88F1C;// Default Yellow +$yellow-600: #C76902; +$yellow-700: #964E00; +$yellow-800: #643400; +$yellow-900: #331A00; + +// Grays +$gray-100: #F5F5F5;// Used in theme +$gray-200: #E3E4E4;// Used in theme +$gray-300: #D2D4D4; +$gray: #B0B3B3;// Default Gray +$gray-500: #8E9292;// Used in theme +$gray-600: #4D5151;// Used in theme +$gray-700: #303333;// Used in theme +$gray-800: #222424;// Used in theme +$gray-900: #181A1A;// Used in theme + +// Miscellaneous Colors $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; -$red-200: #FBE9E8; -$red-300: #F3BEBA; -$red: #DA291C;//Default Red (Red 400) -$red-500: #AF2117; $orange: #fd7e14; -$yellow-200: #FEF6E8; -$yellow-300: #FCE6BA; -$yellow: #F88F1C;//Default Yellow (Yellow 400) -$green-200: #E6F2EC; -$green-300: #B5DAC8; -$green: #098649;//Default Green (Green 400) -$green-500: #075F35; $teal: #20c997; $cyan: #0dcaf0; + // scss-docs-end color-variables // scss-docs-start colors-map @@ -60,20 +82,20 @@ $colors: ( "teal": $teal, "cyan": $cyan, "white": $white, -"gray": $gray-400, -"gray-dark": $gray-400 +"gray": $gray, +"gray-dark": $gray-500 ); // scss-docs-end colors-map // scss-docs-start theme-color-variables -$primary: $red; -$secondary: $gray-400; +$primary: $blue; +$secondary: $red; $success: $green; $info: $cyan; $warning: $yellow; -$danger: $red-500; +$danger: $red; $light: $gray-100; -$dark: $gray-400; +$dark: $gray-500; // scss-docs-end theme-color-variables // scss-docs-start theme-colors-map @@ -95,12 +117,48 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati // stylelint-enable value-keyword-case $font-family-base: $font-family-sans-serif; $font-family-code: $font-family-monospace; +$font-size-base: 1rem; // Assumes the browser default, typically `16px` -//Gutters -$grid-gutter-width: .75rem; +//Font weight +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-bolder: bolder !default; + +//Headings +$h1-font-size: $font-size-base * 3; +$h2-font-size: $font-size-base * 2.625; +$h3-font-size: $font-size-base * 2; +$h4-font-size: $font-size-base * 1.625; +$h5-font-size: $font-size-base * 1.25; +$h6-font-size: $font-size-base * .875; //Border Radius $border-radius: .25rem; $border-radius-sm: .2rem; $border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. -$border-radius-pill: 50rem; \ No newline at end of file +$border-radius-pill: 50rem; + +//Spacing +// Seven spacers available instead of the usual 5 +$spacer: 1rem; +$spacers: ( + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 2, + 6: $spacer * 2.5, + 7: $spacer * 3, +); + +//Grid breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 838px, + lg: 1074px, + xl: 1416px +); diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss index 1646125b5..29f36210c 100644 --- a/src/assets/scss/_GlobalStyles.scss +++ b/src/assets/scss/_GlobalStyles.scss @@ -1,18 +1,62 @@ body { font-size: 16px; background-color: #fff; - padding: 0 .75rem; -} - -a { - color: $blue-600; - text-decoration: none; - border-bottom: 1px solid $blue-600; - &:hover { - color: $blue-400; + padding: .5rem; + .container-fluid { + max-width: 576px; + &.container-shadow { + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper + } + } + a { + color: $blue-600; + text-decoration: none; + border-bottom: 1px solid $blue-600; + &:hover { + color: $blue-400; + } + } + .pointer { + cursor: pointer; } } -.pointer { - cursor: pointer; +//Typogrophy + +p { + line-height: 1.625; + font-weight: 400; + small,.small { + font-size: .875rem; + } +} + +//Headings +//font-size defined in _CustomVariables.scss +//add helper fw-bold to any element to get bold style (500) +//add helper fw-light to any element to get light style (300) +h1,.h1 { + line-height: 1.325; + font-weight: 300; +} +h2,.h2 { + line-height: 1.325; + font-weight: 300; +} +h3,.h3 { + line-height: 1.375; + font-weight: 300; +} +h4,.h4 { + line-height: 1.6; + font-weight: 300; +} +h5,.h5 { + line-height: 1.325; + font-weight: 400; +} +h6,.h6 { + line-height: 1.7; + letter-spacing: .75px; + text-transform: uppercase; } diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index bf3cbf883..21087a117 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -3,7 +3,7 @@ &.btn-primary { position: relative; background: $blue-700; - background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%); + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); border: none; border-radius: $border-radius-lg; height: 48px; @@ -51,6 +51,10 @@ border-radius: $border-radius-lg; border: 1px solid rgba($gray-300,.3); width: 100%; + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + box-shadow: none; + } &.button-loader { padding: 0 40px 0 12px; &:after { diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 493b9c1d4..1128790eb 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -1,6 +1,6 @@ diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue index 70a7cec82..249646f82 100644 --- a/src/uxComponents/radioCard/radioCard.vue +++ b/src/uxComponents/radioCard/radioCard.vue @@ -1,5 +1,5 @@