diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss index 594b8668f511..d31893489c96 100644 --- a/src/components/date-picker/_date-picker.scss +++ b/src/components/date-picker/_date-picker.scss @@ -333,4 +333,66 @@ width: rem(225px); margin-bottom: $spacing-2xs; } + + .#{$prefix}--date-picker__calendar--v2.open { + margin-top: 1px !important; + } + + .#{$prefix}--date-picker--v2 { + .#{$prefix}--date-picker-container { + display: flex; + flex-direction: column; + } + + & ~ .#{$prefix}--label { + order: 1; + } + } + + .#{$prefix}--date-picker--v2 .#{$prefix}--date-picker__input { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 2; + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + + &:focus ~ .#{$prefix}--label { + color: $brand-01; + } + + &[data-invalid], + &[data-invalid]:focus { + box-shadow: 0 2px 0 0 $support-01; + } + + &[data-invalid]:focus + .#{$prefix}--label { + color: $support-01; + } + + & ~ .#{$prefix}--form-requirement { + order: 3; + color: $support-01; + font-weight: 400; + margin-top: $spacing-2xs; + overflow: visible; + + &::before { + display: none; + } + } + + &:focus ~ .#{$prefix}--form__helper-text { + z-index: 0; + max-height: 3rem; + opacity: 1; + margin-bottom: $spacing-xs; + } + } + + .#{$prefix}--date-picker--light input { + background: $field-02; + } } diff --git a/src/components/date-picker/date-picker--range-v2-light.html b/src/components/date-picker/date-picker--range-v2-light.html new file mode 100644 index 000000000000..14b26faa52b9 --- /dev/null +++ b/src/components/date-picker/date-picker--range-v2-light.html @@ -0,0 +1,41 @@ + +
+
+
+ + +
+
+ + +
+ + + + + +
+
+ + +
+
+
+ + +
+
+ + +
+ + + + + +
+
diff --git a/src/components/date-picker/date-picker--range-v2.html b/src/components/date-picker/date-picker--range-v2.html new file mode 100644 index 000000000000..cb7baf3d8a3d --- /dev/null +++ b/src/components/date-picker/date-picker--range-v2.html @@ -0,0 +1,42 @@ + +
+
+
+ + +
+
+ + +
+ + + + + +
+
+ + +
+
+
+ + +
+
+ + +
+ + + + + +
+
+ diff --git a/src/components/date-picker/date-picker--single-v2-light.html b/src/components/date-picker/date-picker--single-v2-light.html new file mode 100644 index 000000000000..6531e0ce83c0 --- /dev/null +++ b/src/components/date-picker/date-picker--single-v2-light.html @@ -0,0 +1,30 @@ + +
+
+
+ + + + + + + +
+
+
+ +
+
+
+ + + + + + + +
+
+
diff --git a/src/components/date-picker/date-picker--single-v2.html b/src/components/date-picker/date-picker--single-v2.html new file mode 100644 index 000000000000..ee42e7761816 --- /dev/null +++ b/src/components/date-picker/date-picker--single-v2.html @@ -0,0 +1,30 @@ + +
+
+
+ + + + + + + +
+
+
+ +
+
+
+ + + + + + + +
+
+
diff --git a/src/components/date-picker/date-picker--v2-light.html b/src/components/date-picker/date-picker--v2-light.html new file mode 100644 index 000000000000..168f86bde9c8 --- /dev/null +++ b/src/components/date-picker/date-picker--v2-light.html @@ -0,0 +1,35 @@ +
+
+
+ + +
+
+
+ +
+
+
+ + +
+ Optional helper text here; if message is more than one line text should wrap (~100 character count maximum) +
+
+
+
+ +
+
+
+ + +
+ Invalid date format. +
+
+
+
diff --git a/src/components/date-picker/date-picker--v2.html b/src/components/date-picker/date-picker--v2.html new file mode 100644 index 000000000000..43a6fa74c7a0 --- /dev/null +++ b/src/components/date-picker/date-picker--v2.html @@ -0,0 +1,35 @@ +
+
+
+ + +
+
+
+ +
+
+
+ + +
+ Optional helper text here; if message is more than one line text should wrap (~100 character count maximum) +
+
+
+
+ +
+
+
+ + +
+ Invalid date format. +
+
+
+
diff --git a/src/components/date-picker/date-picker.js b/src/components/date-picker/date-picker.js index 984aec3f5c18..6a16f54f72f0 100644 --- a/src/components/date-picker/date-picker.js +++ b/src/components/date-picker/date-picker.js @@ -259,7 +259,12 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles) _updateClassNames = calendar => { const calendarContainer = calendar.calendarContainer; - calendarContainer.classList.add(this.options.classCalendarContainer); + if (this.element.dataset.datePickerVersion === 'v2') { + calendarContainer.classList.add(this.options.classCalendarContainer); + calendarContainer.classList.add(this.options.classCalendarContainerV2); + } else { + calendarContainer.classList.add(this.options.classCalendarContainer); + } calendarContainer.querySelector('.flatpickr-month').classList.add(this.options.classMonth); calendarContainer.querySelector('.flatpickr-weekdays').classList.add(this.options.classWeekdays); calendarContainer.querySelector('.flatpickr-days').classList.add(this.options.classDays); @@ -320,6 +325,7 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles) selectorDatePickerInputTo: '[data-date-picker-input-to]', selectorDatePickerIcon: '[data-date-picker-icon]', classCalendarContainer: `${prefix}--date-picker__calendar`, + classCalendarContainerV2: `${prefix}--date-picker__calendar--v2`, classMonth: `${prefix}--date-picker__month`, classWeekdays: `${prefix}--date-picker__weekdays`, classDays: `${prefix}--date-picker__days`, diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss index 4d5820632129..3d61c97a7c55 100644 --- a/src/components/dropdown/_dropdown.scss +++ b/src/components/dropdown/_dropdown.scss @@ -37,6 +37,10 @@ } } + .#{$prefix}--dropdown--light { + background-color: $field-02; + } + .#{$prefix}--dropdown--up { &.#{$prefix}--dropdown--open:focus { box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01; @@ -154,4 +158,23 @@ outline: none; } } + + .#{$prefix}--dropdown--v2 { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 1; + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + } + + .#{$prefix}--dropdown--v2.#{$prefix}--dropdown--open:focus { + box-shadow: none; + + .#{$prefix}--dropdown-list { + box-shadow: 0 2px 0 0 $brand-01; + } + } } diff --git a/src/components/dropdown/dropdown--v2-light.html b/src/components/dropdown/dropdown--v2-light.html new file mode 100644 index 000000000000..ff6496f0b12c --- /dev/null +++ b/src/components/dropdown/dropdown--v2-light.html @@ -0,0 +1,25 @@ + diff --git a/src/components/dropdown/dropdown--v2.html b/src/components/dropdown/dropdown--v2.html new file mode 100644 index 000000000000..152d6549f888 --- /dev/null +++ b/src/components/dropdown/dropdown--v2.html @@ -0,0 +1,25 @@ + diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss index 3ebb377830cd..16149346536a 100644 --- a/src/components/form/_form.scss +++ b/src/components/form/_form.scss @@ -12,6 +12,8 @@ .#{$prefix}--form-item { @include font-family; + display: flex; + flex-direction: column; flex: 1; margin-right: $spacing-md; margin-bottom: $spacing-lg; @@ -22,6 +24,11 @@ } } + .#{$prefix}--form-item--light input, + .#{$prefix}--form-item--light input[type='number'] { + background: $field-02 !important; + } + .#{$prefix}--label { @include reset; @include font-family; @@ -65,4 +72,15 @@ color: $support-01; } } + + .#{$prefix}--form__helper-text { + @include typescale('omega'); + color: $text-02; + z-index: -1; + transition: $transition--base $carbon--standard-easing; + order: 1; + max-height: 0; + opacity: 0; + line-height: 1.5; + } } diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss index e2c2c2e675a5..d4bbb56806e2 100644 --- a/src/components/number-input/_number-input.scss +++ b/src/components/number-input/_number-input.scss @@ -99,13 +99,82 @@ fill: $brand-02; } } -} -.#{$prefix}--number[data-invalid] { - input[type='number'] { - box-shadow: 0 2px 0px 0px $support-01; + .#{$prefix}--number[data-invalid] { + input[type='number'] { + box-shadow: 0 2px 0px 0px $support-01; + } + ~ .#{$prefix}--form-requirement { + max-height: rem(200px); + } + } + + .#{$prefix}--number--v2 { + display: flex; + flex-direction: column; + position: relative; + } + + .#{$prefix}--number--v2 .#{$prefix}--number__controls { + position: absolute; + left: auto; + right: 0.5rem; + bottom: 0.5rem; + } + + .#{$prefix}--number--v2[data-invalid] .#{$prefix}--number__controls { + bottom: 0.75rem; } - ~ .#{$prefix}--form-requirement { - max-height: rem(200px); + + .#{$prefix}--number--v2 input[type='number'] { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 2; + + & ~ .#{$prefix}--label { + order: 1; + } + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + + &:focus ~ .#{$prefix}--label { + color: $brand-01; + } + + &:focus ~ .#{$prefix}--form__helper-text { + z-index: 0; + max-height: 3rem; + opacity: 1; + margin-bottom: $spacing-xs; + } + + & ~ .#{$prefix}--form-requirement { + order: 3; + color: $support-01; + font-weight: 400; + margin-top: $spacing-2xs; + overflow: visible; + + &::before { + display: none; + } + } + } + + .#{$prefix}--number--v2[data-invalid] input[type='number'], + .#{$prefix}--number--v2[data-invalid] input[type='number']:focus { + outline: none; + box-shadow: 0 2px 0 0 $support-01; + } + + .#{$prefix}--number--v2[data-invalid] input[type='number']:focus ~ .#{$prefix}--label { + color: $support-01; + } + + .#{$prefix}--number--light input[type='number'] { + background-color: $field-02; } } diff --git a/src/components/number-input/number-input--v2-light.html b/src/components/number-input/number-input--v2-light.html new file mode 100644 index 000000000000..e467b5809811 --- /dev/null +++ b/src/components/number-input/number-input--v2-light.html @@ -0,0 +1,62 @@ +
+
+
+ + +
+ + +
+
+ +
+
+ +
+ + +
+ +
+ Invalid number +
+
+
+ +
+
+ +
+ + +
+ +
+ Optional helper text here; if message is more than one line text should wrap (~100 character count maximum) +
+
+
diff --git a/src/components/number-input/number-input--v2.html b/src/components/number-input/number-input--v2.html new file mode 100644 index 000000000000..94bc36daf4f4 --- /dev/null +++ b/src/components/number-input/number-input--v2.html @@ -0,0 +1,62 @@ +
+
+
+ + +
+ + +
+
+ +
+
+ +
+ + +
+ +
+ Invalid number +
+
+
+ +
+
+ +
+ + +
+ +
+ Optional helper text here; if message is more than one line text should wrap (~100 character count maximum) +
+
+
diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss index 129dba642d25..e2da67c0c264 100644 --- a/src/components/search/_search.scss +++ b/src/components/search/_search.scss @@ -99,7 +99,7 @@ height: rem(40px); width: rem(40px); min-width: rem(40px); - margin-left: $spacing-2xs;; + margin-left: $spacing-2xs; background-color: $ui-01; position: relative; padding: 0; @@ -136,4 +136,27 @@ .#{$prefix}--search-view--hidden { display: none; } + + .#{$prefix}--search--v2 { + display: flex; + } + + .#{$prefix}--search--v2 .#{$prefix}--search-input { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 1; + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + } + + .#{$prefix}--search--v2 .#{$prefix}--search-button { + order: 2; + } + + .#{$prefix}--search--light input { + background: $field-02; + } } diff --git a/src/components/search/search-large-v2-light.html b/src/components/search/search-large-v2-light.html new file mode 100644 index 000000000000..81db04ab94cc --- /dev/null +++ b/src/components/search/search-large-v2-light.html @@ -0,0 +1,29 @@ + diff --git a/src/components/search/search-large-v2.html b/src/components/search/search-large-v2.html new file mode 100644 index 000000000000..a83c8abd2d44 --- /dev/null +++ b/src/components/search/search-large-v2.html @@ -0,0 +1,29 @@ + diff --git a/src/components/search/search-small-v2-light.html b/src/components/search/search-small-v2-light.html new file mode 100644 index 000000000000..50ac5702ccb7 --- /dev/null +++ b/src/components/search/search-small-v2-light.html @@ -0,0 +1,13 @@ +
+ +
diff --git a/src/components/search/search-small-v2.html b/src/components/search/search-small-v2.html new file mode 100644 index 000000000000..6b6c64006bb2 --- /dev/null +++ b/src/components/search/search-small-v2.html @@ -0,0 +1,13 @@ +
+ +
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss index 40faf9f462e3..9e3dca0ff602 100644 --- a/src/components/select/_select.scss +++ b/src/components/select/_select.scss @@ -72,26 +72,85 @@ color: $text-01; } } -} -.#{$prefix}--select--inline { - display: flex; - align-items: center; + .#{$prefix}--select--inline { + display: flex; + align-items: center; + + .#{$prefix}--label { + white-space: nowrap; + margin: 0 $spacing-xs 0 0; + font-weight: 400; + } + + .#{$prefix}--select-input { + background-color: transparent; + color: $brand-01; + font-weight: 600; - .#{$prefix}--label { - white-space: nowrap; - margin: 0 $spacing-xs 0 0; - font-weight: 400; + &:disabled ~ * { + opacity: 0.5; + cursor: not-allowed; + } + } } - .#{$prefix}--select-input { - background-color: transparent; - color: $brand-01; - font-weight: 600; + .#{$prefix}--select--v2 { + display: flex; + flex-direction: column; - &:disabled ~ * { - opacity: 0.5; - cursor: not-allowed; + .#{$prefix}--select__arrow { + top: 2.625rem; + } + } + + .#{$prefix}--select--v2 .#{$prefix}--select-input { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 2; + + & ~ .#{$prefix}--label { + order: 1; + } + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + + &[data-invalid], + &[data-invalid]:focus { + box-shadow: 0 2px 0 0 $support-01; + } + + &:focus ~ .#{$prefix}--label { + color: $brand-01; + } + + &[data-invalid]:focus ~ .#{$prefix}--label { + color: $support-01; } + + &:focus ~ .#{$prefix}--form__helper-text { + z-index: 0; + max-height: 3rem; + opacity: 1; + margin-bottom: $spacing-xs; + } + + & ~ .#{$prefix}--form-requirement { + order: 3; + color: $support-01; + font-weight: 400; + margin-top: $spacing-2xs; + + &::before { + display: none; + } + } + } + + .#{$prefix}--select--light select { + background: $field-02; } } diff --git a/src/components/select/inline-select.html b/src/components/select/select--inline.html similarity index 100% rename from src/components/select/inline-select.html rename to src/components/select/select--inline.html diff --git a/src/components/select/select--v2-light.html b/src/components/select/select--v2-light.html new file mode 100644 index 000000000000..0736c912b2e0 --- /dev/null +++ b/src/components/select/select--v2-light.html @@ -0,0 +1,65 @@ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+ Validation message here +
+
+
+ +
+
+ + + + + +
+
diff --git a/src/components/select/select--v2.html b/src/components/select/select--v2.html new file mode 100644 index 000000000000..7a5d3ae2c348 --- /dev/null +++ b/src/components/select/select--v2.html @@ -0,0 +1,65 @@ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+ Validation message here +
+
+
+ +
+
+ + + + + +
+
diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss index 78a80bb00202..f48dd4e54b8a 100644 --- a/src/components/text-area/_text-area.scss +++ b/src/components/text-area/_text-area.scss @@ -41,4 +41,54 @@ border: $input-border; } } + + .#{$prefix}--text-area--v2 { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 2; + + & ~ .#{$prefix}--label { + order: 1; + } + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + + &[data-invalid], + &[data-invalid]:focus { + box-shadow: 0 2px 0 0 $support-01; + } + + &:focus ~ .#{$prefix}--label { + color: $brand-01; + } + + &[data-invalid]:focus + .#{$prefix}--label { + color: $support-01; + } + + &:focus ~ .#{$prefix}--form__helper-text { + z-index: 0; + max-height: 3rem; + opacity: 1; + margin-bottom: $spacing-xs; + } + + & ~ .#{$prefix}--form-requirement { + order: 3; + color: $support-01; + font-weight: 400; + margin-top: $spacing-2xs; + + &::before { + display: none; + } + } + } + + .#{$prefix}--text-area--light { + background: $field-02; + } } diff --git a/src/components/text-area/text-area--v2-light.html b/src/components/text-area/text-area--v2-light.html new file mode 100644 index 000000000000..16d1814537f3 --- /dev/null +++ b/src/components/text-area/text-area--v2-light.html @@ -0,0 +1,20 @@ +
+ + +
+ +
+ + +
+ Validation message here +
+
+ +
+ + +
+ Optional helper text goes here +
+
diff --git a/src/components/text-area/text-area--v2.html b/src/components/text-area/text-area--v2.html new file mode 100644 index 000000000000..386452399e96 --- /dev/null +++ b/src/components/text-area/text-area--v2.html @@ -0,0 +1,20 @@ +
+ + +
+ +
+ + +
+ Validation message here +
+
+ +
+ + +
+ Optional helper text goes here +
+
diff --git a/src/components/text-area/text-area.html b/src/components/text-area/text-area.html index 40b3f9c72d6b..d7a61bf10be5 100644 --- a/src/components/text-area/text-area.html +++ b/src/components/text-area/text-area.html @@ -1,2 +1,4 @@ - - +
+ + +
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss index 02db59675d5f..59eca58425dd 100644 --- a/src/components/text-input/_text-input.scss +++ b/src/components/text-input/_text-input.scss @@ -19,7 +19,7 @@ display: block; width: 100%; height: rem(40px); - min-width: 10rem; + min-width: rem(300px); padding: 0 $spacing-md; color: $text-01; background-color: $field-01; @@ -42,4 +42,58 @@ border: $input-border; } } + + .#{$prefix}--text-input--v2 { + border: none; + box-shadow: 0 1px 0 0 $text-02; + order: 2; + + & ~ .#{$prefix}--label { + order: 1; + } + + &:focus { + outline: none; + box-shadow: 0 2px 0 0 $brand-01; + } + + &[data-invalid], + &[data-invalid]:focus { + box-shadow: 0 2px 0 0 $support-01; + } + + &:focus ~ .#{$prefix}--label { + color: $brand-01; + } + + &:focus ~ .#{$prefix}--form__helper-text { + z-index: 0; + max-height: 3rem; + opacity: 1; + margin-bottom: $spacing-xs; + } + + &[data-invalid]:focus + .#{$prefix}--label { + color: $support-01; + } + + &:disabled:hover { + border: none; + } + + & ~ .#{$prefix}--form-requirement { + order: 3; + color: $support-01; + font-weight: 400; + margin-top: $spacing-2xs; + + &::before { + display: none; + } + } + } + + .#{$prefix}--text-input--light { + background: $field-02; + } } diff --git a/src/components/text-input/text-input--v2-light.html b/src/components/text-input/text-input--v2-light.html new file mode 100644 index 000000000000..5231d658f851 --- /dev/null +++ b/src/components/text-input/text-input--v2-light.html @@ -0,0 +1,33 @@ +
+ + +
+ +
+ + +
+ Validation message here +
+
+ +
+ + +
+ Optional helper text goes here +
+
+ +
+ + +
+ Optional helper text here; if message is more than one line text should wrap (~100 character count maximum) +
+
+ +
+ + +
diff --git a/src/components/text-input/text-input--v2.html b/src/components/text-input/text-input--v2.html new file mode 100644 index 000000000000..327277c71ce2 --- /dev/null +++ b/src/components/text-input/text-input--v2.html @@ -0,0 +1,33 @@ +
+ + +
+ +
+ + +
+ Validation message here +
+
+ +
+ + +
+ Optional helper text goes here +
+
+ +
+ + +
+ Optional helper text here; if message is more than one line text should wrap (~100 character count maximum) +
+
+ +
+ + +
diff --git a/src/globals/js/settings.js b/src/globals/js/settings.js index d80d3d196b85..72c371dab3d0 100644 --- a/src/globals/js/settings.js +++ b/src/globals/js/settings.js @@ -14,5 +14,6 @@ */ const settings = { prefix: 'bx', + v2inputs: true, }; export default settings; diff --git a/src/globals/scss/_colors.scss b/src/globals/scss/_colors.scss index a1b952a475dd..bdf285562436 100644 --- a/src/globals/scss/_colors.scss +++ b/src/globals/scss/_colors.scss @@ -3,7 +3,7 @@ $color__blue-20: #7cc7ff !default; $color__blue-30: #5aaafa !default; $color__blue-40: #5596e6 !default; $color__blue-50: #4178be !default; -$color__blue-90: #152935 !default; +$color__blue-90: #152934 !default; $color__navy-gray-1: #0f212e !default; $color__navy-gray-2: #20343e !default; $color__navy-gray-3: #2d3f49 !default; diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss index a3a19b4eb2c6..0187b5816ed4 100644 --- a/src/globals/scss/_vars.scss +++ b/src/globals/scss/_vars.scss @@ -25,16 +25,18 @@ $brand-01: $color__blue-51 !default; $brand-02: $color__blue-40 !default; $brand-03: $color__teal-20 !default; $inverse-01: $color__white !default; +$inverse-02: #272d33 !default; $ui-01: $color__white !default; -$ui-02: $color__gray-3 !default; -$ui-03: $color__gray-2 !default; -$ui-04: $color__gray-1 !default; -$ui-05: $color__navy-gray-7 !default; +$ui-02: #f4f7fb !default; +$ui-03: $color__gray-1 !default; +$ui-04: #8897a2 !default; +$ui-05: $color__navy-gray-6 !default; $text-01: $color__blue-90 !default; $text-02: $color__navy-gray-6 !default; -$text-03: $color__navy-gray-6 !default; -$field-01: rgba($color__blue-51, 0.1) !default; -$support-01: #E0182D !default; +$text-03: #cdd1d4 !default; +$field-01: #f4f7fb !default; +$field-02: $color__white !default; +$support-01: #e0182d !default; $support-02: $color__green-40 !default; $support-03: $color__yellow-30 !default; $support-04: $color__blue-30 !default; @@ -47,6 +49,12 @@ $nav-06: $color__teal-50 !default; $nav-07: $color__blue-30 !default; $nav-08: $color__blue-51 !default; +$hover-primary: darken($brand-01, 10%) !default; +$hover-primary-text: darken($brand-01, 15%) !default; +$hover-danger: darken($support-01, 10%) !default; +$hover-secondary: $brand-01 !default; +$hover-row: rgba($brand-02, 0.1) !default; + // Global $input-border: 1px solid transparent !default; $input-label-weight: 600 !default; @@ -65,7 +73,7 @@ $accordion-flex-direction: row !default; $accordion-justify-content: flex-start !default; $accordion-arrow-margin: 0 0 0 $spacing-2xs !default; $accordion-title-margin: 0 0 0 $spacing-md !default; -$accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default; +$accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default; // Card $card-text-align: center !default; @@ -75,7 +83,7 @@ $card-flex-align: center !default; $checkbox-border-width: 2px !default; // Code Snippet -$snippet-background-color: $field-01 !default; +$snippet-background-color: rgba($color__blue-51, 0.1) !default; // Content Switcher $content-switcher-border-radius: 8px !default; @@ -88,7 +96,7 @@ $data-table-row-height: 2rem !default; // Modal $modal-border-top: $brand-01 4px solid !default; -$modal-footer-background-color: $ui-03 !default; +$modal-footer-background-color: $ui-02 !default; // Progress Indicator $progress-indicator-bar-width: 1px inset transparent !default;