@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/datetime/datetime.css

@@ -1,20 +1,20 @@
-.sdds-datetime-input[type=datetime-local] ~ .icon-time,
-.sdds-datetime-input-md[type=datetime-local] ~ .icon-time,
-.sdds-datetime-input-sm[type=datetime-local] ~ .icon-time {
+.tds-datetime-input[type=datetime-local] ~ .icon-time,
+.tds-datetime-input-md[type=datetime-local] ~ .icon-time,
+.tds-datetime-input-sm[type=datetime-local] ~ .icon-time {
   display: none;
 }
-.sdds-datetime-input[type=date] ~ .icon-time,
-.sdds-datetime-input-md[type=date] ~ .icon-time,
-.sdds-datetime-input-sm[type=date] ~ .icon-time {
+.tds-datetime-input[type=date] ~ .icon-time,
+.tds-datetime-input-md[type=date] ~ .icon-time,
+.tds-datetime-input-sm[type=date] ~ .icon-time {
   display: none;
 }
-.sdds-datetime-input[type=time] ~ .icon-datetime-local,
-.sdds-datetime-input-md[type=time] ~ .icon-datetime-local,
-.sdds-datetime-input-sm[type=time] ~ .icon-datetime-local {
+.tds-datetime-input[type=time] ~ .icon-datetime-local,
+.tds-datetime-input-md[type=time] ~ .icon-datetime-local,
+.tds-datetime-input-sm[type=time] ~ .icon-datetime-local {
   display: none;
 }
 
-.sdds-datetime-input {
+.tds-datetime-input {
   box-sizing: border-box;
   border-radius: 4px 4px 0 0;
   width: 100%;
@@ -23,35 +23,35 @@
   border: none;
   outline: none;
   height: 100%;
-  color: var(--sdds-datetime-color);
-  background-color: var(--sdds-datetime-background);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+  color: var(--tds-datetime-color);
+  background-color: var(--tds-datetime-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
-.sdds-datetime-input * {
+.tds-datetime-input * {
   box-sizing: border-box;
 }
-.sdds-datetime-input::placeholder {
+.tds-datetime-input::placeholder {
   opacity: 1;
-  color: var(--sdds-datetime-placeholder);
+  color: var(--tds-datetime-placeholder);
 }
-.sdds-datetime-input:focus::placeholder {
-  color: var(--sdds-datetime-placeholder-color-focus);
+.tds-datetime-input:focus::placeholder {
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.sdds-datetime-input:disabled {
-  background-color: var(--sdds-datetime-background-disabled);
-  color: var(--sdds-datetime-color-disabled);
+.tds-datetime-input:disabled {
+  background-color: var(--tds-datetime-background-disabled);
+  color: var(--tds-datetime-color-disabled);
   cursor: not-allowed;
 }
-.sdds-datetime-input:disabled::placeholder {
-  color: var(--sdds-datetime-placeholder-disabled);
+.tds-datetime-input:disabled::placeholder {
+  color: var(--tds-datetime-placeholder-disabled);
 }
-.sdds-datetime-input:disabled ~ .sdds-datetime-label-inside {
-  color: var(--sdds-datetime-label-disabled);
+.tds-datetime-input:disabled ~ .tds-datetime-label-inside {
+  color: var(--tds-datetime-label-disabled);
 }
 
-.sdds-datetime-input-md {
+.tds-datetime-input-md {
   box-sizing: border-box;
   border-radius: 4px 4px 0 0;
   width: 100%;
@@ -60,35 +60,35 @@
   border: none;
   outline: none;
   height: 100%;
-  color: var(--sdds-datetime-color);
-  background-color: var(--sdds-datetime-background);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  padding: var(--sdds-spacing-element-16);
+  color: var(--tds-datetime-color);
+  background-color: var(--tds-datetime-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-16);
 }
-.sdds-datetime-input-md * {
+.tds-datetime-input-md * {
   box-sizing: border-box;
 }
-.sdds-datetime-input-md::placeholder {
+.tds-datetime-input-md::placeholder {
   opacity: 1;
-  color: var(--sdds-datetime-placeholder);
+  color: var(--tds-datetime-placeholder);
 }
-.sdds-datetime-input-md:focus::placeholder {
-  color: var(--sdds-datetime-placeholder-color-focus);
+.tds-datetime-input-md:focus::placeholder {
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.sdds-datetime-input-md:disabled {
-  background-color: var(--sdds-datetime-background-disabled);
-  color: var(--sdds-datetime-color-disabled);
+.tds-datetime-input-md:disabled {
+  background-color: var(--tds-datetime-background-disabled);
+  color: var(--tds-datetime-color-disabled);
   cursor: not-allowed;
 }
-.sdds-datetime-input-md:disabled::placeholder {
-  color: var(--sdds-datetime-placeholder-disabled);
+.tds-datetime-input-md:disabled::placeholder {
+  color: var(--tds-datetime-placeholder-disabled);
 }
-.sdds-datetime-input-md:disabled ~ .sdds-datetime-label-inside {
-  color: var(--sdds-datetime-label-disabled);
+.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside {
+  color: var(--tds-datetime-label-disabled);
 }
 
-.sdds-datetime-input-sm {
+.tds-datetime-input-sm {
   box-sizing: border-box;
   border-radius: 4px 4px 0 0;
   width: 100%;
@@ -97,59 +97,59 @@
   border: none;
   outline: none;
   height: 100%;
-  color: var(--sdds-datetime-color);
-  background-color: var(--sdds-datetime-background);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  padding: var(--sdds-spacing-element-16);
+  color: var(--tds-datetime-color);
+  background-color: var(--tds-datetime-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-16);
 }
-.sdds-datetime-input-sm * {
+.tds-datetime-input-sm * {
   box-sizing: border-box;
 }
-.sdds-datetime-input-sm::placeholder {
+.tds-datetime-input-sm::placeholder {
   opacity: 1;
-  color: var(--sdds-datetime-placeholder);
+  color: var(--tds-datetime-placeholder);
 }
-.sdds-datetime-input-sm:focus::placeholder {
-  color: var(--sdds-datetime-placeholder-color-focus);
+.tds-datetime-input-sm:focus::placeholder {
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.sdds-datetime-input-sm:disabled {
-  background-color: var(--sdds-datetime-background-disabled);
-  color: var(--sdds-datetime-color-disabled);
+.tds-datetime-input-sm:disabled {
+  background-color: var(--tds-datetime-background-disabled);
+  color: var(--tds-datetime-color-disabled);
   cursor: not-allowed;
 }
-.sdds-datetime-input-sm:disabled::placeholder {
-  color: var(--sdds-datetime-placeholder-disabled);
+.tds-datetime-input-sm:disabled::placeholder {
+  color: var(--tds-datetime-placeholder-disabled);
 }
-.sdds-datetime-input-sm:disabled ~ .sdds-datetime-label-inside {
-  color: var(--sdds-datetime-label-disabled);
+.tds-datetime-input-sm:disabled ~ .tds-datetime-label-inside {
+  color: var(--tds-datetime-label-disabled);
 }
 
-.sdds-datetime-container {
+.tds-datetime-container {
   border-radius: 4px 4px 0 0;
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
-  background-color: var(--sdds-datetime-background);
-  border-bottom: 1px solid var(--sdds-datetime-border-bottom);
+  background-color: var(--tds-datetime-background);
+  border-bottom: 1px solid var(--tds-datetime-border-bottom);
   transition: border-bottom-color 200ms ease;
 }
-.sdds-datetime-container:hover {
-  border-bottom-color: var(--sdds-datetime-border-bottom-hover);
+.tds-datetime-container:hover {
+  border-bottom-color: var(--tds-datetime-border-bottom-hover);
 }
-.sdds-form-datetime-md .sdds-datetime-container {
+.tds-form-datetime-md .tds-datetime-container {
   height: 48px;
 }
-.sdds-form-datetime-sm .sdds-datetime-container {
+.tds-form-datetime-sm .tds-datetime-container {
   height: 40px;
 }
 
-.sdds-datetime-input-container {
+.tds-datetime-input-container {
   position: relative;
   width: 100%;
 }
-.sdds-datetime-input-container .datetime-icon {
+.tds-datetime-input-container .datetime-icon {
   height: 20px;
   width: 20px;
   position: absolute;
@@ -157,211 +157,191 @@
   transform: translateY(-50%);
   right: 18px;
   pointer-events: none;
-}
-.sdds-datetime-input-container .datetime-icon path {
-  fill: var(--sdds-datetime-icon);
+  color: var(--tds-datetime-icon);
 }
 
-.sdds-datetime-label {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+.tds-datetime-label {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
-  margin-bottom: var(--sdds-spacing-element-8);
-  color: var(--sdds-datetime-label-color);
+  margin-bottom: var(--tds-spacing-element-8);
+  color: var(--tds-datetime-label-color);
 }
 
-.sdds-datetime-label-inside {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+.tds-datetime-label-inside {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   position: absolute;
   pointer-events: none;
-  color: var(--sdds-datetime-label-inside-color);
+  color: var(--tds-datetime-label-inside-color);
   left: 16px;
 }
 
-.sdds-form-datetime {
+.tds-form-datetime {
   display: block;
   min-width: 208px;
   background: unset;
 }
-.sdds-form-datetime-nomin {
+.tds-form-datetime-nomin {
   min-width: auto;
 }
 
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input {
-  padding-top: var(--sdds-spacing-element-24);
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input {
+  padding-top: var(--tds-spacing-element-24);
   padding-bottom: 15px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ~ .sdds-datetime-label-inside {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
   top: 20px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::placeholder {
-  color: transparent;
-}
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::input-placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input::placeholder {
   color: transparent;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ::placeholder {
   color: transparent;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ::placeholder {
-  color: transparent;
-}
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:focus::placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--sdds-datetime-placeholder-color-focus);
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md {
-  padding-top: var(--sdds-spacing-element-20);
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md {
+  padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ~ .sdds-datetime-label-inside {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
   top: 16px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::placeholder {
-  color: transparent;
-}
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::input-placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md::placeholder {
   color: transparent;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ::placeholder {
   color: transparent;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ::placeholder {
-  color: transparent;
-}
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:focus::placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--sdds-datetime-placeholder-color-focus);
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm {
-  padding-top: var(--sdds-spacing-element-20);
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm {
+  padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
   top: 16px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::placeholder {
-  color: transparent;
-}
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::input-placeholder {
-  color: transparent;
-}
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm::placeholder {
   color: transparent;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ::placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ::placeholder {
   color: transparent;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:focus::placeholder {
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--sdds-datetime-placeholder-color-focus);
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-sm ~ .sdds-datetime-label-inside, .sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
+.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus .tds-datetime-input-sm ~ .tds-datetime-label-inside, .tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data .tds-datetime-input-sm ~ .tds-datetime-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-md ~ .sdds-datetime-label-inside, .sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-md ~ .sdds-datetime-label-inside {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
+.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus .tds-datetime-input-md ~ .tds-datetime-label-inside, .tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data .tds-datetime-input-md ~ .tds-datetime-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
-.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input ~ .sdds-datetime-label-inside, .sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input ~ .sdds-datetime-label-inside {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
+.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus .tds-datetime-input ~ .tds-datetime-label-inside, .tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data .tds-datetime-input ~ .tds-datetime-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 12px;
 }
 
-.sdds-datetime-bar {
+.tds-datetime-bar {
   position: absolute;
   width: 100%;
 }
-.sdds-datetime-bar::before, .sdds-datetime-bar::after {
+.tds-datetime-bar::before, .tds-datetime-bar::after {
   content: "";
   height: 2px;
   top: 54px;
   width: 0;
   position: absolute;
-  background: var(--sdds-datetime-bar);
+  background: var(--tds-datetime-bar);
   transition: 0.35s ease all;
 }
-.sdds-form-datetime-md .sdds-datetime-bar::before, .sdds-form-datetime-md .sdds-datetime-bar::after {
+.tds-form-datetime-md .tds-datetime-bar::before, .tds-form-datetime-md .tds-datetime-bar::after {
   top: 46px;
 }
-.sdds-form-datetime-sm .sdds-datetime-bar::before, .sdds-form-datetime-sm .sdds-datetime-bar::after {
+.tds-form-datetime-sm .tds-datetime-bar::before, .tds-form-datetime-sm .tds-datetime-bar::after {
   top: 40px;
 }
-.sdds-datetime-bar::before {
+.tds-datetime-bar::before {
   left: 50%;
 }
-.sdds-datetime-bar::after {
+.tds-datetime-bar::after {
   right: 50%;
 }
-.sdds-datetime-focus .sdds-datetime-bar::before, .sdds-datetime-focus .sdds-datetime-bar::after {
+.tds-datetime-focus .tds-datetime-bar::before, .tds-datetime-focus .tds-datetime-bar::after {
   width: 50%;
 }
 
-.sdds-datetime-helper {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+.tds-datetime-helper {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   flex-basis: 100%;
-  padding-top: var(--sdds-spacing-element-4);
-  color: var(--sdds-datetime-helper);
+  padding-top: var(--tds-spacing-element-4);
+  color: var(--tds-datetime-helper);
 }
-.sdds-datetime-helper .sdds-helper {
+.tds-datetime-helper .tds-helper {
   display: inline-flex;
   gap: 8px;
 }
 
-.sdds-form-datetime-disabled .sdds-datetime-container {
+.tds-form-datetime-disabled .tds-datetime-container {
   border-bottom-color: transparent;
 }
-.sdds-form-datetime-disabled .datetime-icon sdds-icon {
-  color: var(--sdds-datetime-icon-disabled);
+.tds-form-datetime-disabled .datetime-icon tds-icon {
+  color: var(--tds-datetime-icon-disabled);
 }
-.sdds-form-datetime-disabled .sdds-datetime-label {
-  color: var(--sdds-datetime-label-disabled);
+.tds-form-datetime-disabled .tds-datetime-label {
+  color: var(--tds-datetime-label-disabled);
   cursor: not-allowed;
 }
 
-.sdds-form-datetime-success .sdds-datetime-container {
-  border-bottom-color: var(--sdds-datetime-border-bottom-success);
-  color: var(--sdds-datetime-color-success);
+.tds-form-datetime-success .tds-datetime-container {
+  border-bottom-color: var(--tds-datetime-border-bottom-success);
+  color: var(--tds-datetime-color-success);
 }
-.sdds-form-datetime-success .sdds-datetime-bar::before, .sdds-form-datetime-success .sdds-datetime-bar::after {
-  background: var(--sdds-datetime-bar-sucess);
+.tds-form-datetime-success .tds-datetime-bar::before, .tds-form-datetime-success .tds-datetime-bar::after {
+  background: var(--tds-datetime-bar-sucess);
 }
 
-.sdds-form-datetime-error .sdds-datetime-helper {
-  color: var(--sdds-datetime-helper-error);
+.tds-form-datetime-error .tds-datetime-helper {
+  color: var(--tds-datetime-helper-error);
 }
-.sdds-form-datetime-error .sdds-datetime-container {
-  border-bottom-color: var(--sdds-datetime-border-bottom-error);
+.tds-form-datetime-error .tds-datetime-container {
+  border-bottom-color: var(--tds-datetime-border-bottom-error);
 }
-.sdds-form-datetime-error .sdds-datetime-bar::before, .sdds-form-datetime-error .sdds-datetime-bar::after {
-  background: var(--sdds-datetime-bar-error);
+.tds-form-datetime-error .tds-datetime-bar::before, .tds-form-datetime-error .tds-datetime-bar::after {
+  background: var(--tds-datetime-bar-error);
 }
-.sdds-form-datetime-error .datetime-icon sdds-icon {
-  color: var(--sdds-datetime-icon-error);
+.tds-form-datetime-error .datetime-icon tds-icon {
+  color: var(--tds-datetime-icon-error);
 }
 
-.sdds-datetime-textcounter {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-datetime-textcounter);
+.tds-datetime-textcounter {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-datetime-textcounter);
   float: right;
 }
-.sdds-datetime-textcounter .sdds-datetime-textcounter-divider {
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-datetime-textcounter-divider);
+.tds-datetime-textcounter .tds-datetime-textcounter-divider {
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-datetime-textcounter-divider);
 }
 
-/* datetime picker icon remove testing */
+/* Datetime picker icon remove testing */
 input[type=datetime-local]::-webkit-inner-spin-button,
 input[type=datetime-local]::-webkit-calendar-picker-indicator {
   opacity: 0;
@@ -377,10 +357,10 @@ input[type=time]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
 
-.sdds-mode-variant-primary {
-  --sdds-datetime-background: var(--sdds-datetime-background-primary);
+.tds-mode-variant-primary {
+  --tds-datetime-background: var(--tds-datetime-background-primary);
 }
 
-.sdds-mode-variant-secondary {
-  --sdds-datetime-background: var(--sdds-datetime-background-secondary);
+.tds-mode-variant-secondary {
+  --tds-datetime-background: var(--tds-datetime-background-secondary);
 }