ctct-theme 0.0.1-security → 1.756.11

package/dist/scss/variables/legacy/_customVariables.scss

@@ -0,0 +1,778 @@
+// CTCT created variables
+
+@import './sharedVariables';
+@import './themeVariables';
+
+// ######################################################
+// ### Things that Bootstrap should have              ###
+// ######################################################
+
+// Font size
+$font-size-xxl:             24px !default;
+$font-size-xl:              21px !default;
+$font-size-xs:              11px !default;
+
+// Font weight
+$font-weight-medium:        600 !default;
+
+// Colors
+$red-lightest:              $lava-10 !default;
+$red-lighter:               $lava-10 !default;
+$red-light:                 $lava-20 !default;
+$red-dark:                  $lava-30 !default;
+$red-darker:                $lava-40 !default;
+$red-darkest:               $lava-50 !default;
+
+$orange-lightest:           $orange-200 !default;
+$orange-lighter:            $orange-300 !default;
+$orange-light:              $orange-400 !default;
+$orange-dark:               $orange-600 !default;
+$orange-darker:             $orange-700 !default;
+$orange-darkest:            $orange-800 !default;
+
+$yellow-lightest:           $yellow-200 !default;
+$yellow-lighter:            $yellow-300 !default;
+$yellow-light:              $yellow-400 !default;
+$yellow-dark:               $yellow-600 !default;
+$yellow-darker:             $yellow-700 !default;
+$yellow-darkest:            $yellow-800 !default;
+
+$green-lightest:            $light-green-200 !default;
+$green-lighter:             $light-green-300 !default;
+$green-light:               $light-green-400 !default;
+$green-dark:                $light-green-600 !default;
+$green-darker:              $light-green-700 !default;
+$green-darkest:             $light-green-800 !default;
+
+$teal-lightest:             $teal-200 !default;
+$teal-lighter:              $teal-300 !default;
+$teal-light:                $teal-400 !default;
+$teal-dark:                 $teal-600 !default;
+$teal-darker:               $teal-700 !default;
+$teal-darkest:              $teal-800 !default;
+
+$purple-lightest:           $deep-purple-200 !default;
+$purple-lighter:            $deep-purple-300 !default;
+$purple-light:              $deep-purple-400 !default;
+$purple-dark:               $deep-purple-600 !default;
+$purple-darker:             $deep-purple-700 !default;
+$purple-darkest:            $deep-purple-800 !default;
+
+$blue-lightest:             $blue-200 !default;
+$blue-lighter:              $blue-300 !default;
+$blue-light:                $blue-400 !default;
+$blue-dark:                 $blue-600 !default;
+$blue-darker:               $blue-700 !default;
+$blue-darkest:              $blue-800 !default;
+
+$baseColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$baseColors: map-merge(
+    (
+      'red': $lava-40,
+      'orange': $orange-500,
+      'yellow': $yellow-500,
+      'green': $light-green-500,
+      'blue': $blue-500,
+      'teal': $teal-500,
+      'purple': $deep-purple-500
+    ),
+    $baseColors
+);
+
+$lightColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$lightColors: map-merge(
+    (
+      'red-light': $red-light,
+      'orange-light': $orange-light,
+      'yellow-light': $yellow-light,
+      'green-light': $green-light,
+      'blue-light': $blue-light,
+      'teal-light': $teal-light,
+      'purple-light': $purple-light
+    ),
+    $lightColors
+);
+
+$lighterColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$lighterColors: map-merge(
+    (
+      'red-lighter': $red-lighter,
+      'orange-lighter': $orange-lighter,
+      'yellow-lighter': $yellow-lighter,
+      'green-lighter': $green-lighter,
+      'blue-lighter': $blue-lighter,
+      'teal-lighter': $teal-lighter,
+      'purple-lighter': $purple-lighter
+    ),
+    $lighterColors
+);
+
+
+$lightestColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$lightestColors: map-merge(
+    (
+      'red-lightest': $red-lightest,
+      'orange-lightest': $orange-lightest,
+      'yellow-lightest': $yellow-lightest,
+      'green-lightest': $green-lightest,
+      'blue-lightest': $blue-lightest,
+      'teal-lightest': $teal-lightest,
+      'purple-lightest': $purple-lightest
+    ),
+    $lightestColors
+);
+
+$darkColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$darkColors: map-merge(
+    (
+      'red-dark': $red-dark,
+      'orange-dark': $orange-dark,
+      'yellow-dark': $yellow-dark,
+      'green-dark': $green-dark,
+      'teal-dark': $teal-dark,
+      'blue-dark': $blue-dark,
+      'purple-dark': $purple-dark
+    ),
+    $darkColors
+);
+
+$darkerColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$darkerColors: map-merge(
+    (
+      'red-darker': $red-darker,
+      'orange-darker': $orange-darker,
+      'yellow-darker': $yellow-darker,
+      'green-darker': $green-darker,
+      'teal-darker': $teal-darker,
+      'purple-darker': $purple-darker,
+      'blue-darker': $blue-darker
+    ),
+    $darkerColors
+);
+
+$darkestColors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$darkestColors: map-merge(
+    (
+      'red-darkest': $red-darkest,
+      'orange-darkest': $orange-darkest,
+      'yellow-darkest': $yellow-darkest,
+      'green-darkest': $green-darkest,
+      'teal-darkest': $teal-darkest,
+      'blue-darkest': $blue-darkest,
+      'purple-darkest': $purple-darkest
+    ),
+    $darkestColors
+);
+
+
+$allColors: map-merge($baseColors, map-merge($lightColors, map-merge($lighterColors, map-merge($lightestColors, map-merge($darkColors, map-merge($darkerColors, $darkestColors))))));
+
+
+
+
+
+// ######################################################
+// ### Global                                         ###
+// ######################################################
+
+
+// Font
+//$font-path:                 '~ctct-theme/dist/scss/font' !default;
+$font-family-icon:          'ctct-icon-font' !default;
+
+//$font-feature-path:         '~ctct-theme/dist/scss/font/feature-icon' !default;
+$font-family-icon-feature:  'ctct-feature-icon-font' !default;
+
+// Images
+$image-path:                './images' !default;
+
+// Icons
+// TODO: DOG-3763 - It doesn't seem like these are actually needed or doing anything. If I remove one, the font still loads in the styleguide.
+$editorIcons: (
+  brush: '089',
+  bucket: '08a',
+  addTable: '914',
+  alignCenter: '090',
+  alignRight: '091',
+  alignLeft: '092',
+  textStyleOff: '922',
+  code: '04a',
+  colorPalette: '088',
+  font: '90b',
+  fontBold: '093',
+  fontItalic: '094',
+  fontUnderline: '095',
+  highlight: '927',
+  highlightFilled: '926',
+  imageFill: '086',
+  imageFit: '085',
+  images: '084',
+  indent: '096',
+  lineHeight: '928',
+  listBullet: '08c',
+  listNumber: '08b',
+  outdent: '098',
+  paddingHorizontal: '099',
+  paddingVertical: '09a',
+  radius: '92b',
+  tableAllBorders: '915',
+  tableBorder: '916',
+  tableNoBorder: '917',
+  textAlignCenter: '08d',
+  textAlignRight: '08e',
+  textAlignLeft: '08f',
+  textAlignJustify: '097',
+  textStrikethrough: '02e',
+  textSubscript: '02f',
+  textSuperscript: '030',
+);
+
+$objectIcons: (
+  bell: '03d',
+  bellFilled: '03e',
+  bellOff: '03f',
+  blog: '909',
+  booking: '923',
+  bounce: '905',
+  briefcase: '080',
+  briefcaseFilled: '081',
+  bubbleComment: '04b',
+  bubbleMention: '067',
+  bubbleMessage: '068',
+  bulb: '040',
+  calendar: '041',
+  calendarFilled: '042',
+  camera: '043',
+  cameraFilled: '044',
+  car: '039',
+  chat: '045',
+  chatFilled: '046',
+  clip: '906',
+  clock: '047',
+  cloud: '048',
+  cloudFilled: '049',
+  computer: '04c',
+  copy: '921',
+  copyFilled: '920',
+  creditCard: '04f',
+  doc: '051',
+  docPDF: '052',
+  download: '053',
+  email: '054',
+  emailFilled: '055',
+  emailOpen: '056',
+  event: '057',
+  face: '082',
+  food: '083',
+  flag: '037',
+  folder: '058',
+  folderFilled: '059',
+  folderOpen: '05a',
+  gear: '05b',
+  gearFilled: '908',
+  graph: '05c',
+  heart: '03a',
+  landline: '91d',
+  lightning: '91f',
+  lightningFilled: '91e',
+  link: '062',
+  location: '06a',
+  locationFilled: '06b',
+  lock: '064',
+  lockFilled: '065',
+  lockOpen: '066',
+  megaphone: '03c',
+  megaphoneFilled: '904',
+  page: '061',
+  paw: '03b',
+  pencil: '022',
+  pencilFilled: '023',
+  phone: '069',
+  pin: '903',
+  pinFilled: '902',
+  post: '06c',
+  eye: '06d',
+  eyeFilled: '06e',
+  eyeOff: '06f',
+  person: '070',
+  personFilled: '071',
+  rocket: '91c',
+  save: '900',
+  search: '02a',
+  send: '072',
+  sent: '901',
+  share: '073',
+  signupForm: '074',
+  soccer: '038',
+  star: '075',
+  starFilled: '076',
+  store: '919',
+  tablet: '077',
+  tag: '078',
+  tagFilled: '079',
+  thumbsDown: '07a',
+  thumbsDownFilled: '07b',
+  thumbsUp: '07c',
+  thumbsUpFilled: '07d',
+  trash: '07e',
+  trashFilled: '907',
+  upload: '918',
+  video: '07f',
+);
+
+$logoIcons: (
+  artworkTool: '087',
+  ctct: '050',
+  facebook: '031',
+  googleAds: '90c',
+  googleMyBusiness: '92a',
+  googlePlus: '032',
+  instagram: '033',
+  linkedin: '034',
+  pinterest: '035',
+  snapChat: '91b',
+  snapChatFilled: '91a',
+  tiktok: '929',
+  twitter: '036',
+  youtube: '90d',
+);
+
+$navigationIcons: (
+  actions: '01e',
+  apps: '02d',
+  configure: '019',
+  grid: '01b',
+  list: '063',
+  menu: '01c',
+);
+
+$utilityIcons: (
+  arrowEast: '000',
+  arrowNorth: '001',
+  arrowNorthEast: '925',
+  arrowSouth: '002',
+  arrowSouthEast: '924',
+  arrowWest: '003',
+  arrowEastShort: '90e',
+  arrowNorthShort: '90f',
+  arrowSouthShort: '910',
+  arrowWestShort: '911',
+  caretEast: '004',
+  caretNorth: '005',
+  caretSouth: '006',
+  caretWest: '007',
+  check: '008',
+  checkCircle: '009',
+  checkCircleFilled: '00b',
+  checkSmall: '00c',
+  chevronEast: '00d',
+  chevronNorth: '00e',
+  chevronSkipEast: '00f',
+  chevronSkipWest: '010',
+  chevronSouth: '011',
+  chevronWest: '012',
+  close: '015',
+  closeCircle: '016',
+  closeCircleFilled: '017',
+  closeSmall: '912',
+  alertCircle: '013',
+  alertCircleFilled: '014',
+  helpCircle: '05d',
+  helpCircleFilled: '05e',
+  infoCircle: '05f',
+  infoCircleFilled: '060',
+  drag: '018',
+  grabber: '01a',
+  minus: '01f',
+  minusCircle: '020',
+  minusCircleFilled: '021',
+  minusSmall: '913',
+  newWindow: '90a',
+  plus: '024',
+  plusCircle: '025',
+  plusCircleFilled: '026',
+  redo: '027',
+  resize: '028',
+  rotate: '029',
+  sync: '02b',
+  undo: '02c',
+);
+
+$icons: map-merge($editorIcons, map-merge($objectIcons, map-merge($logoIcons, map-merge($navigationIcons, $utilityIcons))));
+
+
+$icon-size-xs:              12px !default;
+$icon-size-sm:              18px !default;
+$icon-size:                 20px !default;
+$icon-size-lg:              26px !default;
+$icon-size-xl:              40px !default;
+
+// Feature Icons
+$objectIconsFeature: (
+  rocket: '900',
+  ad: '901',
+);
+
+$feature-icons: map-merge($editorIcons, map-merge($objectIconsFeature, map-merge($logoIcons, map-merge($navigationIcons, $utilityIcons))));
+
+$feature-icon-size:         48px !default;
+
+// Responsive Variables
+$grid-gutters-widths: (
+  xs: 16px,
+  sm: 16px,
+  md: 24px,
+  lg: 24px,
+  xl: 32px
+) !default;
+
+$grid-page-margins: (
+  xs: 16px,
+  sm: 16px,
+  md: 32px,
+  lg: 48px,
+  xl: 80px
+) !default;
+
+$grid-columns: (
+  xs: 4,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 12
+) !default;
+
+$table-vertical-padding: (
+  xs: 8,
+  sm: 8,
+  md: 12,
+  lg: 12,
+  xl: 12
+) !default;
+
+$table-horizontal-padding: (
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 16,
+  xl: 16
+) !default;
+
+
+// Controls
+$control-margin:            2px !default;
+$control-height:            36px !default;
+$control-height-sm:         30px !default;
+$control-height-lg:         42px !default;
+$control-focus-box-shadow:              0 0 0 0.2rem rgba($blue, .5);
+$control-active-box-shadow:             0 0 0 0.2rem rgba($blue, .75);
+$control-focus-invalid-box-shadow:      0 0 0 0.2rem rgba($red, .5);
+$input-disabled-opacity:    0.5;
+$input-margin-invalid: 2px 2px 8px 2px;
+$field-margin: 2px 2px 8px 2px;
+$field-margin-invalid: 2px;
+$error-list-padding: 4px 0;
+$error-list-margin: 0 0 0 6px;
+$intro-margin: 0 0 4px 0;
+$outro-margin: 4px 0 0 26px;
+
+// Animation
+$easeInOutQuad:             cubic-bezier(0.455, 0.03, 0.515, 0.955) !default;
+$brand-transition:          0.2s $easeInOutQuad !default;
+$brand-transition-fast:     0.1s $easeInOutQuad !default;
+
+// Padding
+$padding-sm:                1.125rem;
+$padding-md:                1.5rem;
+
+/*
+* These variables are copied from react-datepicker@2.3.0 in order to better customize the module.
+* Original path: node_modules/react-datepicker/src/stylesheets/variables.scss
+*/
+
+$datepicker__background-color: $secondary;
+$datepicker__border-color: $border-color;
+$datepicker__highlighted-color: #3dcc4a !default;
+$datepicker__muted-color: $text-muted;
+$datepicker__selected-color: $primary;
+$datepicker__text-color: $body-color;
+$datepicker__header-color: $black;
+$datepicker__navigation-disabled-color: lighten($datepicker__muted-color, 10%)
+!default;
+
+$datepicker__border-radius: $border-radius;
+$datepicker__day-margin: 0.166rem !default;
+$datepicker__font-size: $font-size-sm;
+$datepicker__font-family: $font-family-base;
+$datepicker__item-size: 1.7rem !default;
+$datepicker__margin: 0.4rem !default;
+$datepicker__navigation-size: 0.45rem !default;
+$datepicker__triangle-size: 10px;
+$timepicker__width: 100px;
+
+
+
+// ######################################################
+// ### Components                                     ###
+// ######################################################
+
+// Account Menu
+$menu-footer-height: 62px;
+$account-menu-max-height: 350px;
+$account-menu-width: 450px;
+$menu-empty-text-width: 450px;
+$menu-empty-text-padding: 24px;
+$dropdown-footer-icon-size: 40px;
+$dropdown-multi-select-text-indent: 48px;
+
+// Dropdown Menu
+$dropdown-menu-max-width: 375px !default;
+$dropdown-item-icon-right-margin: 4px !default;
+$dropdown-item-icon-item-content-left-padding: 8px !default;
+$dropdown-item-icon-only-icon-width: 22px !default;
+
+// Calendar Event
+$calendar-event-height: 40px;
+$calendar-event-header-height: 18px;
+$calendar-event-body-height: 20px;
+$calendar-event-icon-size: 16px;
+
+// Tabs
+$nav-tabs-border-style:     none none solid none !default;
+$nav-tabs-width:            3px !default;
+
+// Progress
+$progress-height-large:     12px !default;
+
+// Modal
+$modal-footer-inner-padding:            $spacer;
+$modal-header-bg:                       $gray-200 !default;
+$modal-header-height:                   54px !default;
+
+$modal-body-paddings: (
+  xs: 12px,
+  sm: 12px,
+  md: 24px,
+  lg: 24px,
+  xl: 24px
+) !default;
+
+
+$card-section-paddings: (
+  xs: 8px,
+  sm: 8px,
+  md: 12px,
+  lg: 16px,
+  xl: 16px
+) !default;
+
+$list-item-paddings: (
+  xs: 8px 12px,
+  sm: 8px 12px,
+  md: 8px 16px,
+  lg: 8px 16px,
+  xl: 8px 16px
+) !default;
+
+$list-item-part-margins: (
+  xs: 0 6px,
+  sm: 0 6px,
+  md: 0 8px,
+  lg: 0 8px,
+  xl: 0 8px
+) !default;
+
+// ColorPicker
+$ctct-color-picker-menu-saturation-width:  196px !default;
+$ctct-color-picker-menu-saturation-height: 196px !default;
+
+// SocialLogo
+$social-logo-size: 24px;
+$social-logo-size-large: 48px;
+
+// Avatar
+$avatar-size: 56px;
+$avatar-size-sm: 48px;
+$avatar-size-mini: 40px;
+
+// SocialPreviewFrame
+$social-preview-frame-border-radius: 4px;
+$social-preview-frame-network-icon-size: 15px;
+$social-preview-frame-font-size: 14px;
+
+// SocialAccountIndicator
+$social-account-indicator-circle-size: 16px;
+$social-account-indicator-circle-size-large: 26px;
+$social-account-indicator-squeeze-left: ($social-account-indicator-circle-size / -2);
+$social-account-indicator-space: 2px;
+$social-account-indicator-font-size: 8px;
+$social-account-indicator-font-size-large: 16px;
+
+
+// Preview Thumbnail Button
+$preview-thumbnail-button-size: 240px;
+$preview-thumbnail-button-size-xs: 60px;
+$preview-thumbnail-button-size-sm: 120px;
+$preview-thumbnail-button-size-lg: 300px;
+$preview-thumbnail-default-hover-color: $gray-300 !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+    (
+      'featured': $lilac-40,
+      'featured-light': $lilac-10,
+    ),
+    $theme-colors
+);
+
+// CampaignPicker
+$list-image-size: 48px;
+$list-item-focus-background: $gray-100;
+
+// Loading States
+$loading-text-heading-line-height: 27px;
+$loading-text-heading-font-size: 22px;
+$loading-text-heading-width: 200px;
+
+$loading-text-sub-heading-line-height: 24px;
+$loading-text-sub-heading-font-size: 18px;
+$loading-text-sub-heading-width: 150px;
+
+$loading-text-body-line-height: 24px;
+$loading-text-body-font-size: 18px;
+$loading-text-body-width: 500px;
+
+$loading-image-thumbnail-size: 80px;
+$loading-image-thumbnail-size-sm: 64px;
+$loading-image-theme-size: 56px;
+$loading-image-theme-size-lg: 160px;
+
+// SiteNav
+$sitenav-height: 48px !default;
+$sitenav-icon-button-size: 24px !default;
+$sitenav-btn-padding: 16px !default;
+$sitenav-background: $gray-700 !default;
+$sitenav-item-hover-background: $gray-800 !default;
+$sitenav-item-active-box-shadow: $blue !default;
+$sitenav-item-color: $gray-400 !default;
+$sitenav-item-hover-color: $white !default;
+$sitenav-mobile-menu-padding: 25px 0 !default;
+$sitenav-mobile-menu-items-padding: 12px 36px !default;
+$sitenav-mobile-menu-heading-left-padding: 36px !default;
+
+// Site Nav Slide Out Panel
+$site-nav-slide-out-panel-width: 375px !default;
+
+// SiteFooter
+$site-footer-item-margin: 12px !default;
+
+// Page layout
+$page-view-max-width: 1440px !default;
+$section-margin: 36px !default;
+
+// Table
+$table-column-width-small: 56px !default;
+$table-column-width-small-sortable: 82px !default;
+$table-icon-padding-left: 2px !default;
+$table-icon-sort-arrow-position: 3px !default;
+$table-content-actions-margin-y: -11px !default;
+$table-content-actions-margin-x: -8px !default;
+$table-content-alert-margin: -12px !default;
+$table-sort-arrow-margin-left: 8px !default;
+$table-metrics-cell-padding: 2px 12px 2px 0 !default;
+$table-details-cell-padding: 6px !default;
+
+// Select
+$select-padding-left: $spacer !default;
+$select-padding-right: ($spacer * 3) !default;
+$select-background-position: calc(100% - 8px) 50% !default;
+$select-background-image-size: 16px 16px !default;
+$select-sm-background-position-x: calc(100% - 6px) !default;
+$select-sm-right-padding: 28px !default;
+$select-sm-left-padding: 8px !default;
+$select-lg-background-position-x: calc(100% - 16px) !default;
+$select-lg-right-padding: ($spacer * 4) !default;
+$select-lg-left-padding: 20px !default;
+
+// Panel
+$panel-light-background-color: $white;
+$panel-light-color: $gray-700;
+$panel-light-btn-secondary-border: $gray-600;
+$panel-default-background-color: $primary;
+$panel-default-color: $white;
+$panel-dark-background-color: $gray-900;
+$panel-dark-color: $white;
+$panel-slide-distance: 10px;
+$panel-arrow-offset: 8px;
+$panel-arrow-box-size: 10px;
+$panel-arrow-box-size-rotated: $panel-arrow-box-size * 1.414213;
+$panel-arrow-box-size-with-shadow: 40px;
+$panel-header-height: 44px;
+$panel-header-actions-padding: 24px;
+$panel-footer-padding: 16px;
+
+// FloatingPanel
+$floating-panel-width: 375px;
+
+// Toaster
+$toaster-position-side-width: 350px;
+$toaster-position-center-width: 500px;
+
+// Alert
+$featured: $lilac-40;
+$featured-light: $lilac-10;
+$alert-icon-margin-top: 2px !default;
+
+$alert-small-inner-padding: 6px 6px 6px 10px !default;
+$alert-small-min-height: 36px !default;
+$alert-small-margin: 6px 0 !default;
+$alert-small-actions-margin: -5px !default;
+
+$alert-default-actions-margin: -8px !default;
+$alert-default-small-dimiss-margin: -8px -8px -8px 12px !default;
+$alert-default-small-actions-margin: 14px 0 0 !default;
+$alert-default-small-dimiss-btn-top: 4px !default;
+$alert-default-small-dimiss-btn-right: 12px !default;
+
+// (width of the screen - max page size) divided by 2 to split evenly between the two sides, then add the standard amount of padding for view-inner,
+// then subtract 60px to make it extend beyond the margins of the page, as per the design
+$alert-full-side-padding: calc(calc(calc(calc(100% - #{$page-view-max-width}) / 2) + (2 * #{$spacer})) - 60px);
+$alert-full-width-border-radius: 0 !default;
+$alert-full-width-font-size: $font-size-lg !default;
+$alert-full-width-padding: 20px $alert-full-side-padding !default;
+$alert-two-line-vertical-padding: 16px !default;
+$alert-two-line-actions-margin-top: 0px !default;
+
+$alert-full-width-side-paddings: (
+  xs: 16px,
+  sm: 16px,
+  md: 16px,
+  lg: 24px,
+  xl: 40px
+) !default;
+
+// Well
+$well-padding: 12px;
+
+// ControlGroup
+$control-group-error-margin: 8px 2px 2px 2px !default;
+$control-group-input-invalid-padding-right: 12px !default;
+$control-group-sm-input-invalid-padding-right: 8px !default;
+$control-group-lg-input-invalid-padding-right: 16px !default;
+$control-group-add-on-line-height: 35px !default;
+$control-group-add-on-sm-line-height: 27px !default;
+$control-group-add-on-green: $green-20 !default;
+$control-group-add-on-orange: $apricot-30 !default;
+
+// SettingsCard/SettingsItem
+$settings-card-child-margin-bottom: 1rem !default;
+$settings-item-content-font-size: $font-size-base !default;
+$settings-item-tag-margin-top: 4px !default;
+$settings-item-switch-padding: 6px 0 !default;