| 1 |
// All Variables Required for Spectra are listed here. |
| 2 |
|
| 3 |
// Only the variables defined here will be used throughout Spectra based on their category. |
| 4 |
// Certain Variables will have the same value. This is for Consistency during usage, and will not affect perfomance as Sass is a preprocessor for CSS. |
| 5 |
|
| 6 |
/* stylelint-disable color-hex-case, color-hex-length */ |
| 7 |
|
| 8 |
// ------------------------------------------- |
| 9 |
// All General CSS Variables Below This Point. |
| 10 |
// ------------------------------------------- |
| 11 |
|
| 12 |
// Spectra Colors. |
| 13 |
|
| 14 |
$spectra-color-primary : #007CBA; |
| 15 |
$spectra-color-secondary : #0063A1; |
| 16 |
$spectra-color-heading : #1D2327; |
| 17 |
$spectra-color-body : #50575E; |
| 18 |
$spectra-color-light-background : #F0F0F1; |
| 19 |
$spectra-color-plain-background : #FFFFFF; |
| 20 |
$spectra-color-border : #E6E7E9; |
| 21 |
$spectra-color-border-hover : #959595; |
| 22 |
$spectra-color-icon : #555D66; |
| 23 |
$spectra-color-icon-disabled : #CCCCCC; |
| 24 |
$spectra-color-tab-background : #DCF2FF; |
| 25 |
$spectra-color-tab-border : #CDE9F9; |
| 26 |
|
| 27 |
// Spectra Font Sizes. |
| 28 |
|
| 29 |
$spectra-font-size-title-large : 32px; |
| 30 |
$spectra-font-size-title-medium : 24px; |
| 31 |
$spectra-font-size-title-small : 20px; |
| 32 |
$spectra-font-size-subtitle : 16px; |
| 33 |
$spectra-font-size-subtitle-small : 14px; |
| 34 |
$spectra-font-size-body : 13px; |
| 35 |
$spectra-font-size-button : 13px; |
| 36 |
$spectra-font-size-label : 13px; |
| 37 |
$spectra-font-size-label-semibold : 13px; |
| 38 |
$spectra-font-size-link-text : 13px; |
| 39 |
$spectra-font-size-placeholder : 13px; |
| 40 |
$spectra-font-size-body-small : 12px; |
| 41 |
$spectra-font-size-helper-text : 12px; |
| 42 |
$spectra-font-size-small-button-text : 11px; |
| 43 |
$spectra-font-size-section-heading : 11px; |
| 44 |
|
| 45 |
// Spectra Font Weights. |
| 46 |
|
| 47 |
$spectra-font-weight-title-large : 400; |
| 48 |
$spectra-font-weight-title-medium : 400; |
| 49 |
$spectra-font-weight-title-small : 400; |
| 50 |
$spectra-font-weight-subtitle : 600; |
| 51 |
$spectra-font-weight-subtitle-small : 600; |
| 52 |
$spectra-font-weight-body : 400; |
| 53 |
$spectra-font-weight-button : 400; |
| 54 |
$spectra-font-weight-label : 400; |
| 55 |
$spectra-font-weight-label-semibold : 600; |
| 56 |
$spectra-font-weight-link-text : 400; |
| 57 |
$spectra-font-weight-placeholder : 400; |
| 58 |
$spectra-font-weight-body-small : 400; |
| 59 |
$spectra-font-weight-helper-text : 400; |
| 60 |
$spectra-font-weight-small-button-text : 400; |
| 61 |
$spectra-font-weight-section-heading : 500; |
| 62 |
|
| 63 |
// Spectra Line Heights. |
| 64 |
|
| 65 |
$spectra-line-height-title-large : 40px; |
| 66 |
$spectra-line-height-title-medium : 32px; |
| 67 |
$spectra-line-height-title-small : 28px; |
| 68 |
$spectra-line-height-subtitle : 24px; |
| 69 |
$spectra-line-height-subtitle-small : 20px; |
| 70 |
$spectra-line-height-body : 1.4em; |
| 71 |
$spectra-line-height-button : 13px; |
| 72 |
$spectra-line-height-label : 1.4em; |
| 73 |
$spectra-line-height-label-semibold : 1.4em; |
| 74 |
$spectra-line-height-link-text : 1.4em; |
| 75 |
$spectra-line-height-placeholder : 1em; |
| 76 |
$spectra-line-height-body-small : 1.4em; |
| 77 |
$spectra-line-height-helper-text : 1.4em; |
| 78 |
$spectra-line-height-small-button-text : 22px; |
| 79 |
$spectra-line-height-section-heading : 1.4em; |
| 80 |
|
| 81 |
// Spectra Text Transforms. |
| 82 |
|
| 83 |
$spectra-text-transform-title-large : none; |
| 84 |
$spectra-text-transform-title-medium : none; |
| 85 |
$spectra-text-transform-title-small : none; |
| 86 |
$spectra-text-transform-subtitle : none; |
| 87 |
$spectra-text-transform-subtitle-small : none; |
| 88 |
$spectra-text-transform-body : none; |
| 89 |
$spectra-text-transform-button : none; |
| 90 |
$spectra-text-transform-label : none; |
| 91 |
$spectra-text-transform-label-semibold : none; |
| 92 |
$spectra-text-transform-link-text : none; |
| 93 |
$spectra-text-transform-placeholder : none; |
| 94 |
$spectra-text-transform-body-small : none; |
| 95 |
$spectra-text-transform-helper-text : none; |
| 96 |
$spectra-text-transform-small-button-text : uppercase; |
| 97 |
$spectra-text-transform-section-heading : uppercase; |
| 98 |
|
| 99 |
// Spectra Letter Spacing. |
| 100 |
|
| 101 |
$spectra-letter-spacing : 0; |
| 102 |
|
| 103 |
// -------------------------------------------- |
| 104 |
// All Specific CSS Variables Below This Point. |
| 105 |
// -------------------------------------------- |
| 106 |
|
| 107 |
// Spectra Panel UI. |
| 108 |
|
| 109 |
$spectra-panel-heading-padding : 16px 48px 16px 16px; |
| 110 |
$spectra-panel-body-padding : 16px; |
| 111 |
|
| 112 |
// Spectra Control UI. |
| 113 |
|
| 114 |
$spectra-control-vertical-gap : 25px; |
| 115 |
$spectra-control-label-bottom-margin : 10px; |
| 116 |
$spectra-control-border-radius : 3px; |
| 117 |
$spectra-control-input-padding : 7px 12px; |
| 118 |
$spectra-control-input-height : 30px; |
| 119 |
$spectra-control-circle-indicator : 28px; |
| 120 |
$spectra-control-mediapicker-height : 130px; |
| 121 |
$spectra-control-mediapicker-height-small : 96px; |
| 122 |
|
| 123 |
// Spectra Control Popup UI. |
| 124 |
|
| 125 |
$spectra-control-popup-padding : 16px; |
| 126 |
$spectra-control-popup-vertical-gap : 15px; |
| 127 |
$spectra-control-popup-border-radius : 2px; |
| 128 |
$spectra-control-popup-box-shadow : 0 2px 8px rgba(0, 0, 0, 0.2); |
| 129 |
|
| 130 |
// Spectra Fullscreen Popup UI. |
| 131 |
|
| 132 |
$spectra-popup-heading-padding : 18px 66px 18px 30px; |
| 133 |
$spectra-popup-content-padding : 18px 30px; |
| 134 |
$spectra-popup-vertical-gap : 30px; |
| 135 |
$spectra-popup-border-radius : 2px; |
| 136 |
$spectra-popup-box-shadow : 0 4px 4px rgba(0, 0, 0, 0.25); |
| 137 |
|
