ctct-theme 0.0.1-security → 1.756.11

package/dist/scss/variables/_color.scss

@@ -0,0 +1,107 @@
+// 2020 colors that were introduced into the legacy theme
+// Neutrals
+$charcoal-10: #efefef;
+$charcoal-20: #dee1e3;
+$charcoal-30: #b4b6b8;
+$charcoal-40: #757677;
+$charcoal-50: #333333;
+$charcoal-60: #1a1a1a;
+
+// Primary
+$constant-blue-10: #cde4ff;
+$constant-blue-20: #a1c3fc;
+$constant-blue-30: #6293f5;
+$constant-blue-40: #1856ed;
+$constant-blue-50: #011ec3;
+
+// Secondary
+$retro-10: #b2f8df;
+$retro-20: #65f0be;
+$retro-30: #33c99c;
+$retro-40: #2f846c;
+$retro-50: #22604e;
+
+$apricot-10: #ffe8ba;
+$apricot-20: #ffbe67;
+$apricot-30: #ff9e1a;
+$apricot-40: #da7515;
+$apricot-50: #a55d03;
+
+// Tertiary
+$lilac-10: #f3e0ff;
+$lilac-20: #dca3de;
+$lilac-30: #ca6ace;
+$lilac-40: #a73dab;
+$lilac-50: #762b79;
+
+$citron-10: #fdf7ac;
+$citron-20: #f8ea57;
+$citron-30: #e8d001;
+$citron-40: #bca803;
+$citron-50: #877a1f;
+
+$lava-10: #fdc5bb;
+$lava-20: #f29093;
+$lava-30: #e65869;
+$lava-40: #c8203b;
+$lava-50: #050404;
+
+// Other
+$space: #0b1450;
+$white: #ffffff !default;
+$black: #000000 !default;
+
+$deep-purple-500: #673ab7;
+$light-green-700: #689f38;
+
+
+// Statuses
+$color-primary:         $constant-blue-50 !default;
+$color-standard:        $charcoal-10 !default;
+$color-light:           $charcoal-10 !default;
+$color-dark:            $charcoal-40 !default;
+
+$color-info:            $constant-blue-10 !default;
+$color-featured:        $lilac-40 !default;
+$color-featured-light:  $lilac-10 !default;
+
+$color-success:         $retro-10 !default;
+$color-warning:         $apricot-10 !default;
+$color-danger:          $lava-40 !default;
+
+
+// Data
+// Do we want to couple the concept of data pri, sec, and ter to pri, sec, and ter?
+// The value of these should not reference another variable as they should not be coupled!
+$color-data-primary-10: $constant-blue-10 !default;
+$color-data-primary-20: $constant-blue-20 !default;
+$color-data-primary-30: $constant-blue-30 !default;
+$color-data-primary-40: $constant-blue-40 !default;
+$color-data-primary-50: $constant-blue-50 !default;
+
+$color-data-secondary-10: $retro-10 !default;
+$color-data-secondary-20: $retro-20 !default;
+$color-data-secondary-30: $retro-30 !default;
+$color-data-secondary-40: $retro-40 !default;
+$color-data-secondary-50: $retro-50 !default;
+
+$color-data-tertiary-10: $apricot-10 !default;
+$color-data-tertiary-20: $apricot-20 !default;
+$color-data-tertiary-30: $apricot-30 !default;
+$color-data-tertiary-40: $apricot-40 !default;
+$color-data-tertiary-50: $apricot-50 !default;
+
+
+// Crap to get rid of
+
+$blue: $blue-500 !default;
+$blue-darker: $primary-40 !default;
+$green: $light-green-700 !default;
+$gray-100: #f6f6f6 !default;
+$gray-600: $blue-grey-600 !default;
+$gray-900: #212529 !default;
+
+// New variables to bridge
+
+$error: $lava-40 !default;
+$error-active: $lava-30 !default;

package/dist/scss/variables/_components.scss

@@ -0,0 +1,215 @@
+// Page
+$body-bg: $white !default;
+$body-color: $charcoal-60 !default;
+
+// Controls
+// Shared properties between Button, Input, Textarea, Select, (Checkbox and Radio)
+$control-bg: $white;
+$control-margin: 2px;
+$control-size-sm: 30px;
+$control-size: 36px;
+$control-size-lg: 44px;
+$control-border-radius: $border-radius-sm !default;
+
+// Button
+$button-font-size-sm: 14px;
+$button-font-size: 14px;
+$button-font-size-lg: 16px;
+$button-text-space-sm: 0.25;
+$button-text-space: 0.25;
+$button-text-space-lg: 0.25;
+$button-padding-x-sm: 12px;
+$button-padding-x: 16px;
+$button-padding-x-lg: 28px;
+
+// Links
+$link-color:                $color-primary !default;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%) !default;
+$link-hover-decoration:     underline !default;
+
+// Alert
+$alert-padding-x-sm: 8px !default;
+$alert-padding-y-sm: 6px !default;
+$alert-padding-x: 12px !default;
+$alert-padding-y: 12px !default;
+$alert-content-spacing: 12px !default;
+$alert-has-heading-padding-y: 16px !default;
+
+$alert-full-width-padding-x: (
+  xs: 16px,
+  sm: 16px,
+  md: 16px,
+  lg: 24px,
+  xl: 40px
+) !default;
+
+$alert-full-width-padding-y: 16px !default;
+$alert-border-width: 0 !default;
+$alert-min-height: (
+  xs: 44px,
+  sm: 44px,
+  md: 60px,
+  lg: 60px,
+  xl: 60px
+) !default;
+$alert-min-height-sm: 36px !default;
+
+// Tag
+$tag-border-radius: $border-radius-pill !default;
+$tag-size-sm: 18px !default;
+$tag-size: 22px !default;
+$tag-size-lg: 30px !default;
+$tag-padding-sm: 8px !default;
+$tag-padding: 10px !default;
+$tag-padding-lg: 12px !default;
+$tag-image-size: 24px !default;
+$tag-max-width: 230px !default;
+
+
+// Iconography
+$pictogram-size-lg:                     160px !default;
+$pictogram-size:                        56px !default;
+
+$icon-size-xs:                          12px !default;
+$icon-size-sm:                          18px !default;
+$icon-size:                             20px !default;
+$icon-size-lg:                          26px !default;
+$icon-size-xl:                          40px !default;
+
+$external-brand-logo-size-lg:           160px !default;
+$external-brand-logos-size:             56px !default;
+$external-brand-logos-lockup-size:      144px !default;
+
+$social-logo-size-lg:                   48px !default;
+$social-logo-size:                      24px !default;
+
+
+// Forms
+$input-padding-x-sm:                    8px !default;
+$input-padding-y-sm:                    8px !default;
+$input-padding-x:                       12px !default;
+$input-padding-y:                       12px !default;
+$input-padding-x-lg:                    12px !default;
+$input-padding-y-lg:                    12px !default;
+$input-border-color:                    $border-color !default;
+$input-border-width:                    $border-width !default;
+$input-border-radius:                   $border-radius-sm !default;
+$input-border-radius-lg:                $border-radius !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+$input-focus-border-color:              $state-focus-outline-color !default;
+
+$textarea-padding-y:                    6px !default;
+
+$checkbox-radio-size:                   22px !default;
+$checkbox-radio-color:                  $color-primary !default;
+$checkbox-check-size:                   22px !default;
+
+// SettingsCard/SettingsItem
+$settings-card-child-margin-bottom: 1rem !default;
+$settings-item-tag-margin-top: 4px !default;
+// TODO: Check with Irene and potentially change this to $settings-item-spacing-y
+$settings-item-switch-padding: 6px 0 !default;
+
+// Placeholder
+$placeholder-filled-bg:             rgba(#F3F6F9, 0.8);
+$placeholder-btn-border-color:      rgba(#263238, .5);
+$placeholder-btn-disabled-bg:       rgba($white, .5);
+
+// ListMenu
+$list-menu-min-height:                      52px !default;
+$list-menu-max-width:                       375px !default;
+$list-menu-min-width:                       150px !default;
+$list-menu-min-width-narrow:                auto !default;
+$list-menu-min-width-wide:                  350px !default;
+$list-menu-spacing-y:                       6px !default;
+$list-menu-item-padding-x:                  16px !default;
+$list-menu-item-selectable-padding-left:    48px !default;
+$list-menu-item-padding-y:                  6px !default;
+$list-menu-item-spacing-x:                  12px !default;
+$list-menu-item-hover-bg-color:             rgba($charcoal-50, 0.03) !default;
+$list-menu-empty-text-padding:              24px !default;
+$list-menu-highlighted-text-weight:         700 !default;
+$list-menu-busy-min-width:                  150px !default;
+
+// Card
+$card-element-padding-x:                    16px !default;
+$card-element-spacing-y:                    16px !default;
+
+$card-heading-spacing-y:                    4px !default;
+
+$card-body-padding-top:                     4px !default;
+$card-body-padding-bottom:                  8px !default;
+$card-body-padding-top-edge:                16px !default;
+$card-body-padding-bottom-edge:             16px !default;
+
+$card-header-padding-top:                   16px !default;
+$card-header-padding-bottom:                8px !default;
+$card-header-padding-top-edge:              16px !default;
+$card-header-padding-bottom-edge:           16px !default;
+
+$card-footer-padding-top:                   8px !default;
+$card-footer-padding-bottom:                16px !default;
+$card-footer-padding-top-edge:              16px !default;
+$card-footer-padding-bottom-edge:           16px !default;
+
+$card-media-padding-x:                      0 !default;
+$card-media-padding-top:                   6px !default;
+$card-media-padding-bottom:                6px !default;
+$card-media-padding-top-edge:              0px !default;
+$card-media-padding-bottom-edge:           16px !default;
+
+$card-hover-actions-paddings: (
+  xs: 48px,
+  sm: 48px,
+  md: 24px,
+  lg: 24px,
+  xl: 48px
+) !default;
+
+$card-template-starter-icon-sizes: (
+  xs: 60px,
+  sm: 55px,
+  md: 60px,
+  lg: 55px,
+  xl: 60px
+) !default;
+
+// MediaFrame
+$media-frame-desktop-width:                650px !default;
+$media-frame-desktop-max-width:            650px !default;
+$media-frame-desktop-height:               560px !default;
+$media-frame-desktop-max-height:           560px !default;
+$media-frame-desktop-header-height:         40px !default;
+$media-frame-desktop-header-padding-y:      15px !default;
+$media-frame-desktop-header-padding-x:      24px !default;
+$media-frame-desktop-header-bg-color:     $white !default;
+$media-frame-header-control-simulated-size: 10px !default;
+$media-frame-header-control-simulated-color: rgba($constant-blue-10, .5) !default;
+$media-frame-header-control-simulated-margin-top: 0 !default;
+$media-frame-header-control-simulated-margin-right: 8px !default;
+$media-frame-header-control-simulated-margin-bottom: 0 !default;
+$media-frame-header-control-simulated-margin-left: 0 !default;
+$media-frame-header-control-simulated-border-radius: 50% !default;
+$media-frame-phone-width:                  306px !default;
+$media-frame-phone-max-width:              306px !default;
+$media-frame-phone-height:                 560px !default;
+$media-frame-phone-max-height:             560px !default;
+$media-frame-phone-padding:                  8px !default;
+$media-frame-phone-border-radius:           52px !default;
+$media-frame-phone-bg-color:              $white !default;
+$media-frame-body-padding-y:                45px !default;
+$media-frame-body-padding-x:                   0 !default;
+$media-frame-body-border-radius:            45px !default;
+$media-frame-body-bg-color: rgba($charcoal-10, .5) !default;
+$media-frame-border: 1px solid rgba($charcoal-50, .08) !default;
+
+//Well
+$well-sms-border-radius:                    20px !default;
+$well-sms-padding:                          20px !default;
+$well-sms-border-color:                     $gray-200 !default;
+$well-sms-background-color:                 $gray-200 !default;
+
+// Editor
+$editor-sidebar-border-color: $gray-300 !default;
+$editor-main-background-color: $gray-100 !default;