Skip to content

Commit 8598d2f

Browse files
mrholekmrholek
committed
refactor: update variables
1 parent 78e2b8d commit 8598d2f

File tree

2 files changed

+42
-42
lines changed

2 files changed

+42
-42
lines changed

‎scss/_variables.scss‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1223,21 +1223,21 @@ $form-multi-select-font-size: $input-font-size !default;
12231223
$form-multi-select-font-weight: $input-font-weight !default;
12241224
$form-multi-select-line-height: $input-line-height !default;
12251225
$form-multi-select-color: $input-color !default;
1226-
$form-multi-select-disabled-color: $gray-600 !default;
1226+
$form-multi-select-disabled-color: $input-disabled-color !default;
12271227
$form-multi-select-bg: $input-bg !default;
12281228

12291229
$form-multi-select-bg-position: right $form-multi-select-padding-x center !default;
12301230
$form-multi-select-bg-size: 16px 12px !default; // In pixels because image dimensions
1231-
$form-multi-select-disabled-bg: $gray-200 !default;
1231+
$form-multi-select-disabled-bg: $input-disabled-bg !default;
12321232
$form-multi-select-indicator-padding: $form-multi-select-padding-x * 3 !default; // Extra padding to account for the presence of the background-image based indicator
1233-
$form-multi-select-indicator-color: $gray-800 !default;
1233+
$form-multi-select-indicator-color: $body-secondary-color !default;
12341234
$form-multi-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-multi-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
12351235

12361236
$form-multi-select-border-width: $input-border-width !default;
12371237
$form-multi-select-border-color: $input-border-color !default;
1238-
$form-multi-select-border-radius: $border-radius !default;
1239-
$form-multi-select-border-radius-sm: $border-radius-sm !default;
1240-
$form-multi-select-border-radius-lg: $border-radius-lg !default;
1238+
$form-multi-select-border-radius: $input-border-radius !default;
1239+
$form-multi-select-border-radius-sm: $input-border-radius-sm !default;
1240+
$form-multi-select-border-radius-lg: $input-border-radius-lg !default;
12411241
$form-multi-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
12421242

12431243
$form-multi-select-focus-width: $input-focus-width !default;
@@ -1249,15 +1249,15 @@ $form-multi-select-focus-box-shadow: 0 0 0 $form-multi-select-focus-width
12491249
$form-multi-select-selection-tags-padding-y: .125rem !default;
12501250
$form-multi-select-selection-tags-padding-x: .125rem !default;
12511251

1252-
$form-multi-select-tag-bg: $light !default;
1253-
$form-multi-select-tag-border-width: $border-width !default;
1254-
$form-multi-select-tag-border-color: $border-color !default;
1252+
$form-multi-select-tag-bg: var(--#{$prefix}secondary-bg) !default;
1253+
$form-multi-select-tag-border-width: var(--#{$prefix}border-width) !default;
1254+
$form-multi-select-tag-border-color: var(--#{$prefix}border-color) !default;
12551255
$form-multi-select-tag-border-radius: .25rem !default;
12561256
$form-multi-select-tag-border-radius-sm: .125rem !default;
12571257
$form-multi-select-tag-border-radius-lg: .375rem !default;
12581258
$form-multi-select-tag-margin-y: .125rem !default;
12591259
$form-multi-select-tag-margin-x: .125rem !default;
1260-
$form-multi-select-tag-padding-y: subtract(($form-multi-select-padding-y - $form-multi-select-selection-tags-padding-y - $form-multi-select-tag-margin-y), $form-multi-select-tag-border-width) !default;
1260+
$form-multi-select-tag-padding-y: calc(($form-multi-select-padding-y - $form-multi-select-selection-tags-padding-y - $form-multi-select-tag-margin-y) - $form-multi-select-tag-border-width) !default; // stylelint-disable-line function-disallowed-list
12611261
$form-multi-select-tag-padding-x: .5rem !default;
12621262

12631263
$form-multi-select-search-color: $input-color !default;
@@ -1268,19 +1268,19 @@ $form-multi-select-cleaner-width: .75rem !default;
12681268
$form-multi-select-cleaner-height: .75rem !default;
12691269
$form-multi-select-cleaner-padding-x: .75rem !default;
12701270
$form-multi-select-cleaner-padding-y: .5rem !default;
1271-
$form-multi-select-cleaner-color: $medium-emphasis !default;
1271+
$form-multi-select-cleaner-color: $body-secondary-color !default;
12721272
$form-multi-select-cleaner-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
1273-
$form-multi-select-cleaner-hover-color: $high-emphasis !default;
1273+
$form-multi-select-cleaner-hover-color: $body-color !default;
12741274
$form-multi-select-cleaner-hover-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-hover-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
1275-
$form-multi-select-cleaner-focus-color: $high-emphasis !default;
1275+
$form-multi-select-cleaner-focus-color: $body-color !default;
12761276
$form-multi-select-cleaner-focus-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-focus-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
12771277
$form-multi-select-cleaner-border-color: $input-border-color !default;
12781278

12791279
$form-multi-select-select-all-padding-y: .5rem !default;
12801280
$form-multi-select-select-all-padding-x: .75rem !default;
1281-
$form-multi-select-select-all-color: $medium-emphasis !default;
1281+
$form-multi-select-select-all-color: var(--#{$prefix}body-secondary-color) !default;
12821282
$form-multi-select-select-all-bg: transparent !default;
1283-
$form-multi-select-select-all-hover-color: $high-emphasis !default;
1283+
$form-multi-select-select-all-hover-color: var(--#{$prefix}body-color) !default;
12841284
$form-multi-select-select-all-hover-bg: transparent !default;
12851285
$form-multi-select-select-all-border-width: $input-border-width !default;
12861286
$form-multi-select-select-all-border-color: $input-border-color !default;
@@ -1289,14 +1289,14 @@ $form-multi-select-options-padding-y: .5rem !default;
12891289
$form-multi-select-options-padding-x: .75rem !default;
12901290
$form-multi-select-options-margin-top: .625rem !default;
12911291
$form-multi-select-options-font-size: $font-size-base !default;
1292-
$form-multi-select-options-color: $body-color !default;
1292+
$form-multi-select-options-color: var(--#{$prefix}body-color) !default;
12931293
$form-multi-select-options-bg: $white !default;
12941294
$form-multi-select-options-border-color: $border-color !default;
12951295
$form-multi-select-options-border-width: $border-width !default;
12961296
$form-multi-select-options-border-radius: $border-radius !default;
12971297

12981298
$form-multi-select-optgroup-label-font-weight: $font-weight-bold !default;
1299-
$form-multi-select-optgroup-label-color: $disabled !default;
1299+
$form-multi-select-optgroup-label-color: var(--#{$prefix}tertiary-color) !default;
13001300

13011301
$form-multi-select-option-padding-y: .5rem !default;
13021302
$form-multi-select-option-padding-x: 1.25rem !default;
@@ -2323,45 +2323,45 @@ $calendar-table-cell-size: 2.75rem !default;
23232323

23242324
$calendar-nav-padding: .5rem !default;
23252325
$calendar-nav-border-width: 1px !default;
2326-
$calendar-nav-border-color: $border-color !default;
2327-
$calendar-nav-date-color: $body-color !default;
2328-
$calendar-nav-date-hover-color: $primary !default;
2326+
$calendar-nav-border-color: var(--#{$prefix}border-color) !default;
2327+
$calendar-nav-date-color: var(--#{$prefix}body-color) !default;
2328+
$calendar-nav-date-hover-color: var(--#{$prefix}primary) !default;
23292329
$calendar-nav-icon-width: 1rem !default;
23302330
$calendar-nav-icon-height: 1rem !default;
23312331

2332-
$calendar-nav-icon-double-next-color: $gray-600 !default;
2332+
$calendar-nav-icon-double-next-color: $body-tertiary-color !default;
23332333
$calendar-nav-icon-double-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
23342334
$calendar-nav-icon-double-next-hover-color: $body-color !default;
23352335
$calendar-nav-icon-double-next-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
23362336

2337-
$calendar-nav-icon-double-prev-color: $gray-600 !default;
2337+
$calendar-nav-icon-double-prev-color: $body-tertiary-color !default;
23382338
$calendar-nav-icon-double-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
23392339
$calendar-nav-icon-double-prev-hover-color: $body-color !default;
23402340
$calendar-nav-icon-double-prev-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
23412341

2342-
$calendar-nav-icon-next-color: $gray-600 !default;
2342+
$calendar-nav-icon-next-color: $body-tertiary-color !default;
23432343
$calendar-nav-icon-next: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
23442344
$calendar-nav-icon-next-hover-color: $body-color !default;
23452345
$calendar-nav-icon-next-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-hover-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
23462346

2347-
$calendar-nav-icon-prev-color: $gray-600 !default;
2347+
$calendar-nav-icon-prev-color: $body-tertiary-color !default;
23482348
$calendar-nav-icon-prev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
23492349
$calendar-nav-icon-prev-hover-color: $body-color !default;
23502350
$calendar-nav-icon-prev-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-hover-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
23512351

2352-
$calendar-cell-header-inner-color: $text-medium-emphasis !default;
2352+
$calendar-cell-header-inner-color: var(--#{$prefix}secondary-color) !default;
23532353

2354-
$calendar-cell-hover-bg: $gray-200 !default;
2355-
$calendar-cell-disabled-color: $text-disabled !default;
2354+
$calendar-cell-hover-bg: var(--#{$prefix}tertiary-bg) !default;
2355+
$calendar-cell-disabled-color: var(--#{$prefix}tertiary-color) !default;
23562356

23572357
$calendar-cell-selected-color: $white !default;
2358-
$calendar-cell-selected-bg: $primary !default;
2358+
$calendar-cell-selected-bg: var(--#{$prefix}primary) !default;
23592359

2360-
$calendar-cell-range-bg: rgba($primary, .125) !default;
2361-
$calendar-cell-range-hover-bg: rgba($primary, .25) !default;
2362-
$calendar-cell-range-hover-border-color: $primary !default;
2360+
$calendar-cell-range-bg: rgba(var(--#{$prefix}primary-rgb), .125) !default;
2361+
$calendar-cell-range-hover-bg: rgba(var(--#{$prefix}primary-rgb), .25) !default;
2362+
$calendar-cell-range-hover-border-color: var(--#{$prefix}primary) !default;
23632363

2364-
$calendar-cell-today-color: $danger !default;
2364+
$calendar-cell-today-color: var(--#{$prefix}$danger) !default;
23652365
// scss-docs-end calendar-variables
23662366

23672367
// Picker
@@ -2388,19 +2388,19 @@ $date-picker-separator-icon-rtl: url("data:image/svg+xml,<svg xmlns='http:
23882388
$date-picker-ranges-width: 10rem !default;
23892389
$date-picker-ranges-padding: $spacer * .5 !default;
23902390
$date-picker-ranges-border-width: 1px !default;
2391-
$date-picker-ranges-border-color: $border-color !default;
2391+
$date-picker-ranges-border-color: var(--#{$prefix}border-color) !default;
23922392

23932393
$date-picker-timepicker-width: (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin) !default;
23942394
$date-picker-timepicker-border-width: 1px !default;
2395-
$date-picker-timepicker-border-color: $border-color !default;
2395+
$date-picker-timepicker-border-color: var(--#{$prefix}border-color) !default;
23962396
// scss-docs-end date-picker-variables
23972397

23982398
// Time Picker
23992399
// scss-docs-start time-picker-variables
24002400
$time-picker-default-icon-color: $gray-600 !default;
24012401
$time-picker-default-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-default-icon-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$time-picker-default-icon-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
24022402
$time-picker-invalid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-invalid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-invalid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
2403-
$time-picker-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-valid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-valid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
2403+
$time-picker-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-valid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-valid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
24042404

24052405
$time-picker-cleaner-icon-color: $gray-600 !default;
24062406
$time-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-color}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302' class='ci-primary'></polygon><path fill='#{$time-picker-cleaner-icon-color}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z' class='ci-primary'></path></svg>") !default;
@@ -2409,5 +2409,5 @@ $time-picker-cleaner-icon-hover: url("data:image/svg+xml,<svg xmlns='http:
24092409

24102410
$time-picker-body-padding: $spacer * .5 !default;
24112411
$time-picker-roll-col-border-width: 1px !default;
2412-
$time-picker-roll-col-border-color: $border-color !default;
2412+
$time-picker-roll-col-border-color: var(--#{$prefix}border-color) !default;
24132413
// scss-docs-end time-picker-variables

0 commit comments

Comments
 (0)