@scania/tegel 0.0.51 → 0.0.61

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

@@ -119,18 +119,17 @@
   --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);
+  --sdds-dropdown-background-disabled: var(--sdds-dropdown-background);
 }
 :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);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-50);
 }
 :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-dropdown-background-disabled: var(--sdds-white);
 }
 
 .sdds-mode-dark {
@@ -138,7 +137,6 @@
   --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);
@@ -147,16 +145,15 @@
   --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-dropdown-background-disabled: var(--sdds-dropdown-background);
 }
 .sdds-mode-dark .sdds-mode-variant-primary {
   --sdds-dropdown-background: var(--sdds-grey-868);
   --sdds-dropdown-background-hover: var(--sdds-grey-800);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-868);
 }
 .sdds-mode-dark .sdds-mode-variant-secondary {
   --sdds-dropdown-background: var(--sdds-grey-900);
   --sdds-dropdown-background-hover: var(--sdds-grey-800);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
 }
 
 .sdds-dropdown-helper {
@@ -300,6 +297,8 @@
   --sdds-checkbox-interaction-02: var(--sdds-white);
   --sdds-checkbox-background-hover: var(--sdds-blue-800);
   --sdds-checkbox-background-focus: var(--sdds-blue-800);
+  --sdds-checkbox-background-opacity-hover: 0.12;
+  --sdds-checkbox-background-opacity-focus: 0.24;
   --sdds-checkbox-disabled: var(--sdds-grey-400);
   --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>");
@@ -311,8 +310,10 @@
   --sdds-checkbox-color: var(--sdds-white);
   --sdds-checkbox-interaction-01: var(--sdds-white);
   --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-background-hover: white;
-  --sdds-checkbox-background-focus: white;
+  --sdds-checkbox-background-hover: var(--sdds-grey-600);
+  --sdds-checkbox-background-focus: var(--sdds-grey-600);
+  --sdds-checkbox-background-opacity-hover: 0.48;
+  --sdds-checkbox-background-opacity-focus: 0.72;
   --sdds-checkbox-disabled: white;
   --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>");
@@ -354,13 +355,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
+  border-radius: 4px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
   border: 1px solid var(--sdds-checkbox-interaction-01);
@@ -369,14 +370,15 @@
   height: 16px;
   left: 4px;
   top: 4px;
+  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
   background-color: var(--sdds-checkbox-background-focus);
-  opacity: 0.24;
+  opacity: var(--sdds-checkbox-background-opacity-focus);
   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 {
@@ -426,13 +428,16 @@
 
 :host,
 ::slotted(*) {
-  --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);
   box-sizing: border-box;
 }
+:host .sdds-dropdown-label-outside,
+::slotted(*) .sdds-dropdown-label-outside {
+  color: var(--sdds-dropdown-label-outside);
+  text-decoration: none;
+}
 
 :host {
   position: relative;