@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/dropdown/dropdown.css

@@ -105,20 +105,55 @@
 }
 
 :root,
-:host,
-::slotted(*),
-.sdds-theme-light {
-  --sdds-link: var(--sdds-grey-958);
+.sdds-mode-light {
+  /* This one is overriding the --sdds-link css for the link component. */
   --sdds-link-text-decoration: none;
-  --sdds-dropdown-bg: var(--sdds-white);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-50);
-}
-:root .sdds-on-white-bg,
-:host .sdds-on-white-bg,
-::slotted(*) .sdds-on-white-bg,
-.sdds-theme-light .sdds-on-white-bg {
-  --sdds-dropdown-bg: var(--sdds-grey-50);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-100);
+  --sdds-dropdown-color: var(--sdds-grey-958);
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+  --sdds-dropdown-background-disabled: var(--sdds-white);
+  --sdds-dropdown-disabled: var(--sdds-grey-400);
+  --sdds-dropdown-border: var(--sdds-grey-100);
+  --sdds-dropdown-label-inside: var(--sdds-grey-700);
+  --sdds-dropdown-label-outside: var(--sdds-grey-958);
+  --sdds-dropdown-placeholder: var(--sdds-grey-700);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-900);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-400);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-white);
+  --sdds-dropdown-background-hover: var(--sdds-grey-50);
+}
+
+.sdds-mode-dark {
+  --sdds-link-text-decoration: none;
+  --sdds-dropdown-color: var(--sdds-grey-400);
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
+  --sdds-dropdown-disabled: var(--sdds-grey-800);
+  --sdds-dropdown-border: var(--sdds-grey-800);
+  --sdds-dropdown-label-inside: var(--sdds-grey-400);
+  --sdds-dropdown-label-outside: var(--sdds-grey-100);
+  --sdds-dropdown-placeholder: var(--sdds-grey-400);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-50);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-grey-900);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
 }
 
 .sdds-dropdown-helper {
@@ -138,14 +173,14 @@
 .sdds-dropdown-label-inside {
   font: var(--sdds-detail-ex-07);
   letter-spacing: var(--sdds-detail-ex-07-ls);
-  color: var(--sdds-grey-700);
+  color: var(--sdds-dropdown-label-inside);
 }
 
 .sdds-dropdown-label-outside {
   font: var(--sdds-detail-ex-05);
   letter-spacing: var(--sdds-detail-ex-05-ls);
   display: block;
-  color: var(--sdds-grey-958);
+  color: var(--sdds-dropdown-label-outside);
   margin-bottom: var(--sdds-spacing-element-8);
 }
 
@@ -256,20 +291,55 @@
 }
 
 :root,
-:host,
-::slotted(*),
-.sdds-theme-light {
-  --sdds-link: var(--sdds-grey-958);
+.sdds-mode-light {
+  /* This one is overriding the --sdds-link css for the link component. */
   --sdds-link-text-decoration: none;
-  --sdds-dropdown-bg: var(--sdds-white);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-50);
-}
-:root .sdds-on-white-bg,
-:host .sdds-on-white-bg,
-::slotted(*) .sdds-on-white-bg,
-.sdds-theme-light .sdds-on-white-bg {
-  --sdds-dropdown-bg: var(--sdds-grey-50);
-  --sdds-dropdown-bg-hover: var(--sdds-grey-100);
+  --sdds-dropdown-color: var(--sdds-grey-958);
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+  --sdds-dropdown-background-disabled: var(--sdds-white);
+  --sdds-dropdown-disabled: var(--sdds-grey-400);
+  --sdds-dropdown-border: var(--sdds-grey-100);
+  --sdds-dropdown-label-inside: var(--sdds-grey-700);
+  --sdds-dropdown-label-outside: var(--sdds-grey-958);
+  --sdds-dropdown-placeholder: var(--sdds-grey-700);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-900);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-400);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-50);
+  --sdds-dropdown-background-hover: var(--sdds-grey-100);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-white);
+  --sdds-dropdown-background-hover: var(--sdds-grey-50);
+}
+
+.sdds-mode-dark {
+  --sdds-link-text-decoration: none;
+  --sdds-dropdown-color: var(--sdds-grey-400);
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
+  --sdds-dropdown-disabled: var(--sdds-grey-800);
+  --sdds-dropdown-border: var(--sdds-grey-800);
+  --sdds-dropdown-label-inside: var(--sdds-grey-400);
+  --sdds-dropdown-label-outside: var(--sdds-grey-100);
+  --sdds-dropdown-placeholder: var(--sdds-grey-400);
+  --sdds-dropdown-border-not-focused: var(--sdds-grey-600);
+  --sdds-dropdown-option-color: var(--sdds-grey-50);
+  --sdds-dropdown-option-disabled-color: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-dropdown-background: var(--sdds-grey-868);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-dropdown-background: var(--sdds-grey-900);
+  --sdds-dropdown-background-hover: var(--sdds-grey-800);
 }
 
 /* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
@@ -379,28 +449,28 @@
 }
 
 :root,
-.sdds-theme-light {
+.sdds-mode-light {
   --sdds-checkbox-color: var(--sdds-grey-900);
   --sdds-checkbox-interaction-01: var(--sdds-blue-800);
   --sdds-checkbox-interaction-02: var(--sdds-white);
-  --sdds-checkbox-bg-hover: var(--sdds-blue-800);
-  --sdds-checkbox-bg-focus: var(--sdds-blue-800);
+  --sdds-checkbox-background-hover: var(--sdds-blue-800);
+  --sdds-checkbox-background-focus: var(--sdds-blue-800);
   --sdds-checkbox-disabled: var(--sdds-grey-400);
-  --sdds-checkbox-bg-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-bg-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-500);
   --sdds-checkbox-color-disabled-after: var(--sdds-grey-500);
 }
-:root .sdds-theme-dark,
-.sdds-theme-light .sdds-theme-dark {
+:root .sdds-mode-dark,
+.sdds-mode-light .sdds-mode-dark {
   --sdds-checkbox-color: var(--sdds-white);
   --sdds-checkbox-interaction-01: var(--sdds-white);
   --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-bg-hover: white;
-  --sdds-checkbox-bg-focus: white;
+  --sdds-checkbox-background-hover: white;
+  --sdds-checkbox-background-focus: white;
   --sdds-checkbox-disabled: white;
-  --sdds-checkbox-bg-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-bg-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-700);
   --sdds-checkbox-color-disabled-after: var(--sdds-grey-700);
 }
@@ -430,7 +500,7 @@
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox] + label {
   color: var(--sdds-checkbox-color);
-  padding-left: var(--sdds-spacing-element-8);
+  padding-left: var(--sdds-spacing-element-4);
   padding-top: var(--sdds-spacing-element-4);
   padding-bottom: var(--sdds-spacing-element-4);
   cursor: pointer;
@@ -456,13 +526,13 @@
   top: 4px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
-  background-color: var(--sdds-checkbox-bg-hover);
+  background-color: var(--sdds-checkbox-background-hover);
   opacity: 0.12;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
-  background-color: var(--sdds-checkbox-bg-focus);
+  background-color: var(--sdds-checkbox-background-focus);
   opacity: 0.24;
-  animation: cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
+  transition: opacity 0.2s ease-in-out;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {
   cursor: not-allowed;
@@ -479,7 +549,7 @@
 }
 
 .sdds-form-input[type=checkbox]:checked::after {
-  background-image: var(--sdds-checkbox-bg-img);
+  background-image: var(--sdds-checkbox-background-img);
   background-color: var(--sdds-checkbox-interaction-01);
   background-repeat: no-repeat;
   background-position: center;
@@ -493,25 +563,11 @@
   border: 1px solid #b0b7c4;
 }
 .sdds-form-input[type=checkbox]:checked:disabled::after, .sdds-form-input[type=checkbox]:checked.disabled::after {
-  background-image: var(--sdds-checkbox-bg-img-disabled);
+  background-image: var(--sdds-checkbox-background-img-disabled);
   background-color: var(--sdds-checkbox-interaction-02);
   color: var(--sdds-checkbox-color-disabled-after);
 }
 
-@keyframes cb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
 :host,
 ::slotted(*) {
   color: var(--sdds-grey-958);
@@ -525,8 +581,8 @@
 
 :host,
 ::slotted(*) {
-  --sdds-link: var(--sdds-grey-958);
-  --sdds-link-text-decoration: none;
+  --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);
+  --sdds-dropdown-label-outside-text-decoration: none;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   color: var(--sdds-grey-958);
@@ -562,15 +618,15 @@
 .sdds-dropdown .sdds-dropdown-toggle {
   font: var(--sdds-detail-ex-02);
   letter-spacing: var(--sdds-detail-ex-02-ls);
-  color: var(--sdds-grey-958);
+  color: var(--sdds-dropdown-color);
   display: flex;
   align-items: center;
-  background-color: var(--sdds-dropdown-bg);
+  background-color: var(--sdds-dropdown-background);
   cursor: pointer;
   transition: box-shadow 0.1s ease-in, border-bottom-color 150ms ease;
   border-radius: 4px 4px 0 0;
   border: none;
-  border-bottom: 1px solid var(--sdds-grey-400);
+  border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);
   box-shadow: none;
   width: 100%;
   text-align: left;
@@ -592,7 +648,7 @@
   border-bottom: 2px solid var(--sdds-blue-400);
 }
 .sdds-dropdown .sdds-dropdown-toggle:active, .sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected {
-  border-bottom-color: var(--sdds-grey-800);
+  border-bottom-color: var(--sdds-dropdown-border-not-focused);
 }
 .sdds-dropdown .sdds-dropdown-toggle.is-filter {
   transition: border 0.1s ease-in 0.1s;
@@ -614,7 +670,7 @@
   padding: 16px 16px 12px;
 }
 .sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus) {
-  border-bottom: 1px solid var(--sdds-grey-800);
+  border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);
 }
 .sdds-dropdown .sdds-dropdown-arrow {
   width: 20px;
@@ -644,7 +700,7 @@
   outline: none;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-958);
+  color: var(--sdds-dropdown-link);
   width: 100%;
   background: transparent;
 }
@@ -656,8 +712,8 @@
   opacity: 1;
 }
 .sdds-dropdown .sdds-dropdown-menu {
-  z-index: 10000;
-  background-color: var(--sdds-white);
+  z-index: 100;
+  background-color: var(--sdds-dropdown-background);
   position: absolute;
   top: 100%;
   left: 0;
@@ -665,10 +721,10 @@
   max-height: 360px;
   border-color: transparent;
   border-style: solid;
-  border-width: 0 1px;
+  border-width: 0 1px 1px;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
-  border-left-color: var(--sdds-grey-100);
-  border-right-color: var(--sdds-grey-100);
+  border-left-color: var(--sdds-dropdown-border);
+  border-right-color: var(--sdds-dropdown-border);
   overflow-x: hidden;
   overflow-y: auto;
   transform: scaleY(0);
@@ -712,15 +768,15 @@
 }
 :host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle {
   pointer-events: none;
-  color: var(--sdds-grey-400);
+  color: var(--sdds-dropdown-option-disabled-color);
   border: none;
   padding: 0 16px;
 }
 :host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-dropdown-placeholder);
 }
 :host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-dropdown-label-inside);
 }
 :host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before {
   content: none;
@@ -742,13 +798,14 @@
 :host ::slotted(sdds-dropdown-option) {
   display: flex;
   padding: var(--sdds-spacing-element-16);
-  background-color: var(--sdds-white);
+  background-color: var(--sdds-dropdown-background);
   border-top: 1px solid transparent;
-  border-bottom: 1px solid var(--sdds-grey-100);
+  border-bottom: 1px solid var(--sdds-dropdown-border);
   opacity: 0;
   visibility: hidden;
   cursor: pointer;
   box-sizing: border-box;
+  color: var(--sdds-dropdown-option-color);
 }
 :host ::slotted(sdds-dropdown-option:last-child) {
   border-bottom-color: transparent;
@@ -757,10 +814,10 @@
 }
 :host ::slotted(sdds-dropdown-option:hover),
 :host ::slotted(sdds-dropdown-option:focus) {
-  background-color: var(--sdds-dropdown-bg-hover);
+  background-color: var(--sdds-dropdown-background-hover);
 }
 :host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {
-  background-color: var(--sdds-dropdown-bg-hover);
+  background-color: var(--sdds-dropdown-background-hover);
 }
 :host ::slotted(sdds-dropdown-option:hover:focus) {
   outline: none;
@@ -773,9 +830,9 @@
 :host ::slotted(sdds-dropdown-option.selected),
 :host ::slotted(sdds-dropdown-option.active),
 :host ::slotted(sdds-dropdown-option:active) {
-  background-color: var(--sdds-grey-300);
-  border-top: 1px solid var(--sdds-grey-300);
-  border-bottom: 1px solid var(--sdds-grey-300);
+  background-color: var(--sdds-dropdown-background-hover);
+  border-top: 1px solid var(--sdds-dropdown-border);
+  border-bottom: 1px solid var(--sdds-dropdown-border);
 }
 :host ::slotted(sdds-dropdown-option.sdds-option--no-result) {
   cursor: not-allowed;
@@ -784,8 +841,8 @@
 :host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),
 :host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {
   cursor: not-allowed;
-  color: var(--sdds-grey-400);
-  background-color: var(--sdds-white);
+  color: var(--sdds-dropdown-option-disabled-color);
+  background-color: var(--sdds-dropdown-background-disabled);
 }
 
 :host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child) {
@@ -793,7 +850,7 @@
 }
 :host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child) {
   border-radius: 0;
-  border-bottom: 1px solid var(--sdds-grey-300);
+  border-bottom: 1px solid var(--sdds-dropdown-border);
 }
 
 .sdds-option-label {
@@ -810,6 +867,9 @@
   transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
   margin-left: var(--sdds-spacing-element-16);
 }
+.sdds-option-checkmark path {
+  color: var(--sdds-dropdown-option-color);
+}
 
 :host([size=sm]) ::slotted(sdds-dropdown-option) {
   padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);
@@ -847,7 +907,7 @@
 .sdds-dropdown-label-inside {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-700);
+  color: var(--sdds-dropdown-label-inside);
   position: absolute;
   transition: transform 250ms ease, color 200ms ease;
   width: calc(100% - 63px);