From 5f79399779918fd588ae1f4d598b3de30998ca00 Mon Sep 17 00:00:00 2001 From: Eonasdan Date: Thu, 21 Dec 2023 18:44:46 -0500 Subject: [PATCH] 6.9.4 (#2887) * fixes #2884 * fixes #2886 * fixes #2881 * fixes #2879 * fixes #2857 * #2793 * #2793 v6.9.4 --- .github/ISSUE_TEMPLATE/bug_report.yml | 8 +- .github/PULL_REQUEST_TEMPLATE | 2 - README.md | 6 +- package-lock.json | 4 +- package.json | 2 +- sonar-project.properties | 2 +- src/docs/partials/change-log.html | 17 +++++ src/docs/partials/installing.html | 4 +- src/docs/templates/index.html | 6 +- src/docs/templates/shell.html | 4 +- src/js/dates.ts | 26 +++++-- src/js/datetime.ts | 2 +- src/js/display/calendar/date-display.ts | 4 +- src/js/display/calendar/decade-display.ts | 9 +++ src/js/jQuery-provider.js | 2 +- src/js/tempus-dominus.ts | 2 +- src/js/utilities/event-types.ts | 15 +++- src/js/utilities/optionConverter.ts | 9 +-- src/js/validation.ts | 2 +- src/nuget/TempusDominus.nuspec | 2 +- src/nuget/TempusDominus.scss.nuspec | 2 +- src/scss/_variables.scss | 36 +++++++++ src/scss/tempus-dominus.scss | 89 ++++++++++++----------- 23 files changed, 173 insertions(+), 82 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 50f69db1c..049e636c4 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -5,8 +5,8 @@ labels: ["Type: Bug", "State: Triage"] body: - type: markdown attributes: - value: "Note: I am no longer taking feature requests. - Beginning in 2024, tickets will be paid support only. Please see [this discussion](https://github.com/Eonasdan/tempus-dominus/discussions/2694)." + value: "

Note: I am no longer taking feature requests. + Beginning in 2024, tickets will be paid support only. Please see [this discussion](https://github.com/Eonasdan/tempus-dominus/discussions/2694).

" - type: checkboxes attributes: label: Prerequisites @@ -18,6 +18,8 @@ body: required: true - label: I have read the [contributing guidelines](https://github.com/Eonasdan/tempus-dominus/blob/master/.github/CONTRIBUTING.md). required: true + - label: I understand that only sponsored issues will be worked on and that if I wish to sponsor an issue, I will contact the owner FIRST. + required: true - type: textarea id: what-happened attributes: @@ -32,7 +34,7 @@ body: id: reduced-test-case attributes: label: StackBlitz fork - description: "You MUST provide an StackBlitz fork of one of the following examples: [HTML](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup), [Dev branch](https://stackblitz.com/edit/tempus-dominus-v6-next), [Typescript](https://stackblitz.com/edit/v6-typescript), [Using import](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-import), or [jQuery](https://stackblitz.com/edit/tempus-dominus-v6-simple-jquery-setup)." + description: "You MUST provide an StackBlitz fork of one of the following examples: [HTML](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup), [Typescript](https://stackblitz.com/edit/v6-typescript), [Using import](https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-import), or [jQuery](https://stackblitz.com/edit/tempus-dominus-v6-simple-jquery-setup)." validations: required: true - type: dropdown diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE index 4210a9418..a63d48724 100644 --- a/.github/PULL_REQUEST_TEMPLATE +++ b/.github/PULL_REQUEST_TEMPLATE @@ -1,10 +1,8 @@ PRs relating to the v4 will be closed and locked. * **Please check if the PR fulfills these requirements** -- [ ] The PR is against the `development` branch - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been added / updated (for bug fixes / features) -- [ ] Does NOT modify files under the "dist" folder. * **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...). If this is a fix, please tag a bug. diff --git a/README.md b/README.md index 80f459392..5d2eda3f0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/R6R53OEFF) -# Tempus Dominus Date/Time Picker v6.7.19 +# Paid support only + +Please note that I'm moving on to other projects. New issues will need to be sponsored. This can be done via BountySource or my other donation links. Please reach out to me first so we can discuss the terms. Thank you for your years of support. + +# Tempus Dominus Date/Time Picker v6.9.4 Tempus Dominus is a powerful and robust date time picker for javascript. Version 6 is another major rewrite over the previous version. V6 is written with modern browsers in mind and is written in typescript. Bootstrap, momentjs and jQuery are no longer required dependencies. Popper2 is all that is required for the picker to position correctly. If you still require jQuery (seriously, you should move off that asap) there's a jQuery provider that wraps the native js functions. diff --git a/package-lock.json b/package-lock.json index 4e8f34c74..86f85f546 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@eonasdan/tempus-dominus", - "version": "6.7.19", + "version": "6.9.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@eonasdan/tempus-dominus", - "version": "6.7.19", + "version": "6.9.4", "license": "MIT", "devDependencies": { "@eonasdan/parvus-server": "^1.1.9", diff --git a/package.json b/package.json index ebc3c6fd7..ba90fc1b4 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "Jonathan Peterson" }, "name": "@eonasdan/tempus-dominus", - "version": "6.7.19", + "version": "6.9.4", "style": "dist/css/tempus-dominus.css", "sass": "scss/tempus-dominus.scss", "main": "dist/js/tempus-dominus.js", diff --git a/sonar-project.properties b/sonar-project.properties index 5096127dc..c18703a51 100644 --- a/sonar-project.properties +++ b/sonar-project.properties @@ -2,7 +2,7 @@ sonar.organization=eonasdan sonar.projectKey=Eonasdan_tempus-dominus sonar.projectName=tempus-dominus -sonar.projectVersion=6.7.19 +sonar.projectVersion=6.9.4 sonar.sources = src/ sonar.tests = test/ diff --git a/src/docs/partials/change-log.html b/src/docs/partials/change-log.html index f9df69e4c..2213541aa 100644 --- a/src/docs/partials/change-log.html +++ b/src/docs/partials/change-log.html @@ -2,6 +2,23 @@

Version 6

+
+

6.9.4

+

New

+
    +
  • SCSS now provides root css variables #2857
    • +
  • Custom date format parsing errors are now caught and provided through the event system. #2793
    • +
+

Bug fixes

+
    +
  • Fixed #2886
    • +
  • Fixed #2884
    • +
  • Fixed #2881
    • +
  • Fixed #2879
    • +
  • Fixed #2877
    • +
+
+

6.7.19

New

diff --git a/src/docs/partials/installing.html b/src/docs/partials/installing.html index 0f4728c28..3915377cc 100644 --- a/src/docs/partials/installing.html +++ b/src/docs/partials/installing.html @@ -15,10 +15,10 @@

Via CDN

<!-- Popperjs --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script> <!-- Tempus Dominus JavaScript --> -<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.19/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script> <!-- Tempus Dominus Styles --> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.19/dist/css/tempus-dominus.min.css" crossorigin="anonymous"> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous">
diff --git a/src/docs/templates/index.html b/src/docs/templates/index.html index d832f9be2..bdee5f189 100644 --- a/src/docs/templates/index.html +++ b/src/docs/templates/index.html @@ -17,7 +17,7 @@

Powerful and robust date and time picker

- Currently v6.7.19 + Currently v6.9.4 · v5 docs

@@ -55,10 +55,10 @@

JsDelivr

<!-- Popperjs --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script> <!-- Tempus Dominus JavaScript --> -<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.19/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script> <!-- Tempus Dominus Styles --> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.19/dist/css/tempus-dominus.min.css" crossorigin="anonymous"> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous"> diff --git a/src/docs/templates/shell.html b/src/docs/templates/shell.html index e37d3b1fe..d9d2386cb 100644 --- a/src/docs/templates/shell.html +++ b/src/docs/templates/shell.html @@ -136,7 +136,7 @@ Tempus Dominus v6.0
diff --git a/src/js/dates.ts b/src/js/dates.ts index cf2fe901f..0772a0417 100644 --- a/src/js/dates.ts +++ b/src/js/dates.ts @@ -1,6 +1,10 @@ import { DateTime, getFormatByUnit, Unit } from './datetime'; import Namespace from './utilities/namespace'; -import { ChangeEvent, FailEvent } from './utilities/event-types'; +import { + ChangeEvent, + FailEvent, + ParseErrorEvent, +} from './utilities/event-types'; import Validation from './validation'; import { serviceLocator } from './utilities/service-locator'; import { EventEmitters } from './utilities/event-emitter'; @@ -57,11 +61,21 @@ export default class Dates { */ //eslint-disable-next-line @typescript-eslint/no-explicit-any parseInput(value: any): DateTime { - return OptionConverter.dateConversion( - value, - 'input', - this.optionsStore.options.localization - ); + try { + return OptionConverter.dateConversion( + value, + 'input', + this.optionsStore.options.localization + ); + } catch (e) { + this._eventEmitters.triggerEvent.emit({ + type: Namespace.events.error, + reason: Namespace.errorMessages.failedToParseInput, + format: this.optionsStore.options.localization.format, + value: value, + } as ParseErrorEvent); + return undefined; + } } /** diff --git a/src/js/datetime.ts b/src/js/datetime.ts index fb03a4621..c03c14b2b 100644 --- a/src/js/datetime.ts +++ b/src/js/datetime.ts @@ -632,7 +632,7 @@ export class DateTime extends Date { /(\[[^[\]]*])|y{1,4}|M{1,4}|d{1,4}|H{1,2}|h{1,2}|t|T|m{1,2}|s{1,2}|f{3}/g; //NOSONAR private formattingTokens = - /(\[[^[\]]*])|([-_:/.,()\s]+)|(T|t|yyyy|yy?|MM?M?M?|Do|dd?|hh?|HH?|mm?|ss?)/g; //NOSONAR is regex cannot be simplified beyond what it already is + /(\[[^[\]]*])|([-_:/.,()\s]+)|(T|t|yyyy|yy?|MM?M?M?|Do|dd?d?d?|hh?|HH?|mm?|ss?)/g; //NOSONAR is regex cannot be simplified beyond what it already is /** * Returns a list of month values based on the current locale diff --git a/src/js/display/calendar/date-display.ts b/src/js/display/calendar/date-display.ts index 01ad586cc..90ac6679f 100644 --- a/src/js/display/calendar/date-display.ts +++ b/src/js/display/calendar/date-display.ts @@ -135,7 +135,9 @@ export default class DateDisplay { private _dateToDataValue(date: DateTime): string { if (!DateTime.isValid(date)) return ''; - return `${date.year}-${date.monthFormatted}-${date.dateFormatted}`; + return `${date.year}-${date.month.toString().padStart(2, '0')}-${date.date + .toString() + .padStart(2, '0')}`; } private _handleDateRange(innerDate: DateTime, classes: string[]) { diff --git a/src/js/display/calendar/decade-display.ts b/src/js/display/calendar/decade-display.ts index 261e05ed2..1bc8e78b9 100644 --- a/src/js/display/calendar/decade-display.ts +++ b/src/js/display/calendar/decade-display.ts @@ -114,6 +114,15 @@ export default class DecadeDisplay { ) { classes.push(Namespace.css.active); } + if ( + !this.validation.isValid(this._startDecade, Unit.year) && + !this.validation.isValid( + this._startDecade.clone.manipulate(10, Unit.year), + Unit.year + ) + ) { + classes.push(Namespace.css.disabled); + } paint('decade', this._startDecade, classes, containerClone); diff --git a/src/js/jQuery-provider.js b/src/js/jQuery-provider.js index ebf087f9d..9b4e73234 100644 --- a/src/js/jQuery-provider.js +++ b/src/js/jQuery-provider.js @@ -2,7 +2,7 @@ /*global $, tempusDominus */ /*! - * Tempus Dominus v6.7.19 (https://getdatepicker.com/) + * Tempus Dominus v6.9.4 (https://getdatepicker.com/) * Copyright 2013-2021 Jonathan Peterson * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE) */ diff --git a/src/js/tempus-dominus.ts b/src/js/tempus-dominus.ts index 7d9f6e3b7..f30bf436d 100644 --- a/src/js/tempus-dominus.ts +++ b/src/js/tempus-dominus.ts @@ -646,7 +646,7 @@ const extend = function (plugin, option = undefined) { return tempusDominus; }; -const version = '6.7.19'; +const version = '6.9.4'; const tempusDominus = { TempusDominus, diff --git a/src/js/utilities/event-types.ts b/src/js/utilities/event-types.ts index f68b7eeda..b32f553e0 100644 --- a/src/js/utilities/event-types.ts +++ b/src/js/utilities/event-types.ts @@ -6,6 +6,12 @@ interface BaseEvent { viewMode?: keyof ViewMode; } +interface ParseErrorEvent extends BaseEvent { + reason: string; + value: unknown; + format: string; +} + /** * Triggers when setValue fails because of validation rules etc. * @event FailEvent @@ -40,4 +46,11 @@ interface ViewUpdateEvent extends BaseEvent { viewDate: DateTime; } -export { BaseEvent, FailEvent, HideEvent, ChangeEvent, ViewUpdateEvent }; +export { + BaseEvent, + FailEvent, + HideEvent, + ChangeEvent, + ViewUpdateEvent, + ParseErrorEvent, +}; diff --git a/src/js/utilities/optionConverter.ts b/src/js/utilities/optionConverter.ts index 6fb4f53ed..44489d05f 100644 --- a/src/js/utilities/optionConverter.ts +++ b/src/js/utilities/optionConverter.ts @@ -180,12 +180,7 @@ export class OptionConverter { if (eData?.tdTargetInput) delete eData.tdTargetInput; if (eData?.tdTargetToggle) delete eData.tdTargetToggle; - if ( - !eData || - Object.keys(eData).length === 0 || - eData.constructor !== DOMStringMap - ) - return options; + if (!eData || Object.keys(eData).length === 0) return options; const dataOptions = {} as Options; // because dataset returns camelCase including the 'td' key the option @@ -253,7 +248,7 @@ export class OptionConverter { if (keyOption === undefined) return internalObject; // if this is another object, continue down the rabbit hole - if (optionSubgroup[keyOption].constructor === Object) { + if (optionSubgroup[keyOption]?.constructor === Object) { index++; internalObject[keyOption] = normalizeObject( split, diff --git a/src/js/validation.ts b/src/js/validation.ts index cebababcf..7e3720fbc 100644 --- a/src/js/validation.ts +++ b/src/js/validation.ts @@ -137,7 +137,7 @@ export default class Validation { return true; } - private _enabledDisabledHoursIsValid(targetDate) { + private _enabledDisabledHoursIsValid(targetDate: DateTime) { if ( this.optionsStore.options.restrictions.disabledHours.length > 0 && this._isInDisabledHours(targetDate) diff --git a/src/nuget/TempusDominus.nuspec b/src/nuget/TempusDominus.nuspec index a29223ee0..26dce229c 100644 --- a/src/nuget/TempusDominus.nuspec +++ b/src/nuget/TempusDominus.nuspec @@ -2,7 +2,7 @@ TempusDominus - 6.7.19 + 6.9.4 Tempus Dominus Eonasdan Eonasdan diff --git a/src/nuget/TempusDominus.scss.nuspec b/src/nuget/TempusDominus.scss.nuspec index 9e4e6e863..163e72dcc 100644 --- a/src/nuget/TempusDominus.scss.nuspec +++ b/src/nuget/TempusDominus.scss.nuspec @@ -2,7 +2,7 @@ TempusDominus.scss - 6.7.19 + 6.9.4 Tempus Dominus Eonasdan Eonasdan diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4b34aaa3c..3f7e80090 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -33,3 +33,39 @@ $td-dark-secondary-border-color-rgba: rgba(232, 230, 227, 0.2) !default; $td-dark-primary-border-color: $td-dark !default; $td-dark-text-shadow: 0 -1px 0 rgba(232, 230, 227, 0.25) !default; $td-dark-dow-color: rgba(232, 230, 227, 0.5); + +:root { + --td-light: #{$td-light}; + --td-widget-background: #{$td-widget-background}; + --td-font-color: #{$td-font-color}; + --td-timepicker-font-size: #{$td-timepicker-font-size}; + --td-active-bg: #{$td-active-bg}; + --td-range-bg: #{$td-range-bg}; + --td-active-color: #{$td-active-color}; + --td-active-border-color: #{$td-active-border-color}; + --td-border-radius: #{$td-border-radius}; + --td-btn-hover-bg: #{$td-btn-hover-bg}; + --td-disabled-color: #{$td-disabled-color}; + --td-alternate-color: #{$td-alternate-color}; + --td-secondary-border-color: #{$td-secondary-border-color}; + --td-secondary-border-color-rgba: #{$td-secondary-border-color-rgba}; + --td-primary-border-color: #{$td-primary-border-color}; + --td-text-shadow: #{$td-text-shadow}; + --td-dow-color: #{$td-dow-color}; + + --td-dark: #{$td-dark}; + --td-dark-widget-background: #{$td-dark-widget-background}; + --td-dark-font-color: #{$td-dark-font-color}; + --td-dark-active-bg: #{$td-dark-active-bg}; + --td-dark-range-bg: #{$td-dark-range-bg}; + --td-dark-active-color: #{$td-dark-active-color}; + --td-dark-active-border-color: #{$td-dark-active-border-color}; + --td-dark-btn-hover-bg: #{$td-dark-btn-hover-bg}; + --td-dark-disabled-color: #{$td-dark-disabled-color}; + --td-dark-alternate-color: #{$td-dark-alternate-color}; + --td-dark-secondary-border-color: #{$td-dark-secondary-border-color}; + --td-dark-secondary-border-color-rgba: #{$td-dark-secondary-border-color-rgba}; + --td-dark-primary-border-color: #{$td-dark-primary-border-color}; + --td-dark-text-shadow: #{$td-dark-text-shadow}; + --td-dark-dow-color: #{$td-dark-dow-color}; +} diff --git a/src/scss/tempus-dominus.scss b/src/scss/tempus-dominus.scss index f7c32de11..a64ef30fc 100644 --- a/src/scss/tempus-dominus.scss +++ b/src/scss/tempus-dominus.scss @@ -148,7 +148,7 @@ grid-auto-rows: 40px; & div { - border-radius: $td-border-radius; + border-radius: var(--td-border-radius); align-items: center; justify-content: center; box-sizing: border-box; @@ -164,10 +164,10 @@ .range-in { @extend .active; - background-color: $td-range-bg !important; + background-color: var(--td-range-bg) !important; border: none; border-radius: 0 !important; - box-shadow: -5px 0 0 $td-range-bg, 5px 0 0 $td-range-bg; + box-shadow: -5px 0 0 var(--td-range-bg), 5px 0 0 var(--td-range-bg); } .range-end { @@ -238,7 +238,7 @@ div:not(.no-highlight) { width: 90%; height: 90%; - border-radius: $td-border-radius; + border-radius: var(--td-border-radius); align-items: center; justify-content: center; box-sizing: border-box; @@ -313,31 +313,31 @@ } &.light { - color: $td-font-color; - background-color: $td-widget-background; + color: var(--td-font-color); + background-color: var(--td-widget-background); [data-action] { &.disabled, &.disabled:hover { - color: $td-disabled-color; + color: var(--td-disabled-color); } } .toolbar { & div { &:hover { - background: $td-btn-hover-bg; + background: var(--td-btn-hover-bg); } } } .date-container-days { & .dow { - color: $td-dow-color; + color: var(--td-dow-color); } & .cw { - color: $td-alternate-color; + color: var(--td-alternate-color); } } @@ -351,81 +351,82 @@ .time-container-second { div:not(.no-highlight) { &:hover { - background: $td-btn-hover-bg; + background: var(--td-btn-hover-bg); } &.active { - background-color: $td-active-bg; - color: $td-active-color; - text-shadow: $td-text-shadow; + background-color: var(--td-active-bg); + color: var(--td-active-color); + text-shadow: var(--td-text-shadow); &.old, &.new { - color: $td-active-color; + color: var(--td-active-color); } } &.active.today:before { - border-bottom-color: $td-active-border-color; + border-bottom-color: var(--td-active-border-color); } &.old, &.new { - color: $td-alternate-color; + color: var(--td-alternate-color); } &.disabled, &.disabled:hover { - color: $td-disabled-color; + color: var(--td-disabled-color); } &.today { &:before { - border-bottom-color: $td-active-bg; - border-top-color: $td-secondary-border-color-rgba; + border-bottom-color: var(--td-active-bg); + border-top-color: var(--td-secondary-border-color-rgba); } } } } button { - color: $td-active-color; - background-color: $td-active-bg; - border-color: $td-active-bg; + color: var(--td-active-color); + background-color: var(--td-active-bg); + border-color: var(--td-active-bg); } } &.dark { - color: $td-dark-font-color; - background-color: $td-dark-widget-background; + color: var(--td-dark-font-color); + background-color: var(--td-dark-widget-background); [data-action] { &.disabled, &.disabled:hover { - color: $td-dark-disabled-color; + color: var(--td-dark-disabled-color); } } .toolbar { & div { &:hover { - background: $td-dark-btn-hover-bg; + background: var(--td-dark-btn-hover-bg); } } } .date-container-days { & .dow { - color: $td-dark-dow-color; + color: var(--td-dark-dow-color); } .range-in { - background-color: $td-dark-range-bg !important; - box-shadow: -5px 0 0 $td-dark-range-bg, 5px 0 0 $td-dark-range-bg; + background-color: var(--td-dark-range-bg) !important; + box-shadow: -5px 0 0 var(--td-dark-range-bg), + 5px 0 0 var(--td-dark-range-bg); } & .cw { - color: $td-dark-alternate-color; + color: var(--td-dark-alternate-color); } } @@ -439,47 +440,47 @@ .time-container-second { div:not(.no-highlight) { &:hover { - background: $td-dark-btn-hover-bg; + background: var(--td-dark-btn-hover-bg); } &.active { - background-color: $td-dark-active-bg; - color: $td-dark-active-color; - text-shadow: $td-dark-text-shadow; + background-color: var(--td-dark-active-bg); + color: var(--td-dark-active-color); + text-shadow: var(--td-dark-text-shadow); &.old, &.new { - color: $td-dark-active-color; + color: var(--td-dark-active-color); } } &.active.today:before { - border-bottom-color: $td-dark-active-border-color; + border-bottom-color: var(--td-dark-active-border-color); } &.old, &.new { - color: $td-dark-alternate-color; + color: var(--td-dark-alternate-color); } &.disabled, &.disabled:hover { - color: $td-dark-disabled-color; + color: var(--td-dark-disabled-color); } &.today { &:before { - border-bottom-color: $td-dark-active-bg; - border-top-color: $td-dark-secondary-border-color-rgba; + border-bottom-color: var(--td-dark-active-bg); + border-top-color: var(--td-dark-secondary-border-color-rgba); } } } } button { - color: $td-dark-active-color; - background-color: $td-dark-active-bg; - border-color: $td-dark-active-bg; + color: var(--td-dark-active-color); + background-color: var(--td-dark-active-bg); + border-color: var(--td-dark-active-bg); } } }