1:root { 2 /* Accordian */ 3 --accordian-border-color: #00000020; 4 --accordian-title-background-color: #00000007; 5 6 /* Alert Primary */ 7 --alert-primary-text-color: #004085; 8 --alert-primary-background-color: #cce5ff; 9 --alert-primary-border-color: #b8daff; 10 11 /* Alert Secondary */ 12 --alert-secondary-text-color: #383d41; 13 --alert-secondary-background-color: #e2e3e5; 14 --alert-secondary-border-color: #d6d8db; 15 16 /* Alert Success */ 17 --alert-success-text-color: #155724; 18 --alert-success-background-color: #d4edda; 19 --alert-success-border-color: #c3e6cb; 20 21 /* Alert Danger */ 22 --alert-danger-text-color: #721c24; 23 --alert-danger-background-color: #f8d7da; 24 --alert-danger-border-color: #f5c6cb; 25 26 /* Alert Warning */ 27 --alert-warning-text-color: #856404; 28 --alert-warning-background-color: #fff3cd; 29 --alert-warning-border-color: #ffeeba; 30 31 /* Alert Info */ 32 --alert-info-text-color: #0c5460; 33 --alert-info-background-color: #d1ecf1; 34 --alert-info-border-color: #bee5eb; 35 36 /* Alert Light */ 37 --alert-light-text-color: #818182; 38 --alert-light-background-color: #fefefe; 39 --alert-light-border-color: #fdfdfe; 40 41 /* Alert Dark */ 42 --alert-dark-text-color: #1b1e21; 43 --alert-dark-background-color: #d6d8d9; 44 --alert-dark-border-color: #c6c8ca; 45 46 /* Blockquote */ 47 --blockquote-footer-text-color: #6c757d; 48 49 /* Box */ 50 --box-background-color: #0000000c; 51 52 /* Button Default (Primary) */ 53 --button-default-text-color: #ffffff; 54 --button-default-text-hover-color: #ffffff; 55 --button-default-background-color: #007bff; 56 --button-default-background-hover-color: #0069d9; 57 --button-default-border-color: #007bff; 58 --button-default-border-hover-color: #0062cc; 59 60 /* Button Secondary */ 61 --button-secondary-text-color: #fff; 62 --button-secondary-text-hover-color: #fff; 63 --button-secondary-background-color: #6c757d; 64 --button-secondary-background-hover-color: #5a6268; 65 --button-secondary-border-color: #6c757d; 66 --button-secondary-border-hover-color: #545b62; 67 68 /* Button Success */ 69 --button-success-text-color: #fff; 70 --button-success-text-hover-color: #fff; 71 --button-success-background-color: #28a745; 72 --button-success-background-hover-color: #218838; 73 --button-success-border-color: #28a745; 74 --button-success-border-hover-color: #1e7e34; 75 76 /* Button Danger */ 77 --button-danger-text-color: #fff; 78 --button-danger-background-color: #dc3545; 79 --button-danger-border-color: #dc3545; 80 --button-danger-text-hover-color: #fff; 81 --button-danger-background-hover-color: #c82333; 82 --button-danger-border-hover-color: #bd2130; 83 84 /* Button Warning */ 85 --button-warning-text-color: #fff; 86 --button-warning-background-color: #ffc107; 87 --button-warning-border-color: #ffc107; 88 --button-warning-text-hover-color: #fff; 89 --button-warning-background-hover-color: #e0a800; 90 --button-warning-border-hover-color: #d39e00; 91 92 /* Button Info */ 93 --button-info-text-color: #fff; 94 --button-info-background-color: #17a2b8; 95 --button-info-border-color: #17a2b8; 96 --button-info-text-hover-color: #fff; 97 --button-info-background-hover-color: #138496; 98 --button-info-border-hover-color: #117a8b; 99 100 /* Button Light */ 101 --button-light-text-color: #212529; 102 --button-light-background-color: #f8f9fa; 103 --button-light-border-color: #f8f9fa; 104 --button-light-hover-text-hover-color: #212529; 105 --button-light-hover-background-hover-color: #e2e6ea; 106 --button-light-hover-border-hover-color: #dae0e5; 107 108 /* Button Dark */ 109 --button-dark-text-color: #fff; 110 --button-dark-background-color: #343a40; 111 --button-dark-border-color: #343a40; 112 --button-dark-text-hover-color: #fff; 113 --button-dark-background-hover-color: #23272b; 114 --button-dark-border-hover-color: #1d2124; 115 116 /* Button Link */ 117 --button-link-text-color: #007bff; 118 --button-link-background-color: transparent; 119 --button-link-border-color: transparent; 120 --button-link-text-hover-color: #0056b3; 121 --button-link-background-hover-color: transparent; 122 --button-link-border-hover-color: transparent; 123 124 /* Card */ 125 --card-background-color: #ffffff20; 126 --card-border-color: #00000020; 127 --card-header-background-color: #00000007; 128 --card-subtitle-text-color: #6c757d; 129 --card-footer-text-color: #6c757d; 130 --card-footer-background-color: #00000007; 131 132 /* Carousel */ 133 --carousel-title-text-color: #fff; 134 --carousel-caption-text-color: #fff; 135 --carousel-caption-background-color: #00000080; 136 --carousel-control-fill-color: #fff; 137 --carousel-control-stroke-color: #000; 138 --carousel-indicator-color: #fff; 139 140 /* Listgroup */ 141 --listgroup-item-border-color: #00000020; 142 --listgroup-item-link-background-hover-color: #f8f9fa; 143 144 /* Pagenation */ 145 --pagenation-border-color: #dee2e6; 146 --pagenation-link-text-color: #007bff; 147 --pagenation-link-background-color: #fff; 148 --pagenation-link-background-hover-color: #e9ecef; 149 150 /* Placeholder */ 151 --placeholder-background-color: #00000020; 152 153 /* Progressbar */ 154 --progressbar-background-color: #00000020; 155 156 /* Reveal */ 157 --reveal-text-color: #dee2e6; 158 --reveal-background-color: #868e96; 159 160 /* Steps */ 161 --steps-step-text-color: #000; 162 --steps-step-border-color: #dee2e6; 163 --steps-step-background-color: #fff; 164 --steps-step-background-complete-color: #f8f8f8; 165 166 /* Tabgroup */ 167 --tabgroup-background-color: #00000007; 168 --tabgroup-border-color: #dee2e6; 169 --tabgroup-tab-text-color: #007bff; 170 --tabgroup-tab-text-hover-color: #0056b3; 171 --tabgroup-tab-text-active-color: #495057; 172 --tabgroup-tab-background-active-color: #fff; 173 --tabgroup-tab-border-hover-color: #e9ecef; 174 175 /* Tooltip */ 176 --tooltip-text-color: #333; 177 --tooltip-background-color: #fcf3cf; 178 --tooltip-border-color: #9a7d0a; 179 180 /* Quiz */ 181 --quiz-border-color: #00000020; 182 --quiz-status-text-color: #6c757d; 183 --quiz-status-background-color: #00000007; 184 185/** 186 Calculations Below 187**/ 188 /* Button Primary */ 189 --button-primary-text-color: var(--button-default-text-color); 190 --button-primary-text-hover-color: var(--button-default-text-hover-color); 191 --button-primary-background-color: var(--button-default-background-hover-color); 192 --button-primary-background-hover-color: var(--button-default-background-hover-color); 193 --button-primary-border-color: var(--button-default-border-color); 194 --button-primary-border-hover-color: var(--button-default-border-hover-color); 195 196 /* Button Primary Outline */ 197 --button-outline-primary-text-color: var(--button-default-background-color); 198 --button-outline-primary-text-hover-color: var(--button-default-background-hover-color); 199 --button-outline-primary-background-color: transparent; 200 --button-outline-primary-background-hover-color: #00000020; 201 --button-outline-primary-border-color: var(--button-default-border-color); 202 --button-outline-primary-border-hover-color: var(--button-default-border-hover-color); 203 204 /* Button Secondary Outline */ 205 --button-outline-secondary-text-color: var(--button-secondary-background-color); 206 --button-outline-secondary-text-hover-color: var(--button-secondary-background-hover-color); 207 --button-outline-secondary-background-color: transparent; 208 --button-outline-secondary-background-hover-color: #00000020; 209 --button-outline-secondary-border-color: var(--button-secondary-border-color); 210 --button-outline-secondary-border-hover-color: var(--button-secondary-border-hover-color); 211 212 /* Button Success Outline */ 213 --button-outline-success-text-color: var(--button-success-background-color); 214 --button-outline-success-text-hover-color: var(--button-success-background-hover-color); 215 --button-outline-success-background-color: transparent; 216 --button-outline-success-background-hover-color: #00000020; 217 --button-outline-success-border-color: var(--button-success-border-color); 218 --button-outline-success-border-hover-color: var(--button-success-border-hover-color); 219 220 /* Button Danger Outline */ 221 --button-outline-danger-text-color: var(--button-danger-background-color); 222 --button-outline-danger-text-hover-color: var(--button-danger-background-hover-color); 223 --button-outline-danger-background-color: transparent; 224 --button-outline-danger-background-hover-color: #00000020; 225 --button-outline-danger-border-color: var(--button-danger-border-color); 226 --button-outline-danger-border-hover-color: var(--button-danger-border-hover-color); 227 228 /* Button Warning Outline */ 229 --button-outline-warning-text-color: var(--button-warning-background-color); 230 --button-outline-warning-text-hover-color: var(--button-warning-background-hover-color); 231 --button-outline-warning-background-color: transparent; 232 --button-outline-warning-background-hover-color: #00000020; 233 --button-outline-warning-border-color: var(--button-warning-border-color); 234 --button-outline-warning-border-hover-color: var(--button-warning-border-hover-color); 235 236 /* Button Info Outline */ 237 --button-outline-info-text-color: var(--button-info-background-color); 238 --button-outline-info-text-hover-color: var(--button-info-background-hover-color); 239 --button-outline-info-background-color: transparent; 240 --button-outline-info-background-hover-color: #00000020; 241 --button-outline-info-border-color: var(--button-info-border-color); 242 --button-outline-info-border-hover-color: var(--button-info-border-hover-color); 243 244 /* Button Light Outline */ 245 --button-outline-light-text-color: var(--button-light-background-color); 246 --button-outline-light-text-hover-color: var(--button-light-background-hover-color); 247 --button-outline-light-background-color: transparent; 248 --button-outline-light-background-hover-color: #00000020; 249 --button-outline-light-border-color: var(--button-light-border-color); 250 --button-outline-light-border-hover-color: var(--button-light-border-hover-color); 251 252 /* Button Dark Outline */ 253 --button-outline-dark-text-color: var(--button-dark-background-color); 254 --button-outline-dark-text-hover-color: var(--button-dark-background-hover-color); 255 --button-outline-dark-background-color: transparent; 256 --button-outline-dark-background-hover-color: #00000020; 257 --button-outline-dark-border-color: var(--button-dark-border-color); 258 --button-outline-dark-border-hover-color: var(--button-dark-border-hover-color); 259} 260 261:root[data-theme="theme-dark"] { 262 /* Placeholder */ 263 --placeholder-background-color: #ffffff20; 264 265 /* Progressbar */ 266 --progressbar-background-color: #ffffff20; 267 268 /* Steps */ 269 --steps-step-text-color: #fff; 270 --steps-step-border-color: #ffffff20; 271 --steps-step-background-color: #00000020; 272 --steps-step-background-complete-color: #000; 273}