Merge remote-tracking branch 'origin/main'

CODEOWNERS

@@ -0,0 +1 @@
+* @navikt/teampam

src/packages/arbeidsplassen-css/footer.css

@@ -73,7 +73,7 @@
 .arb-footer-section ul li a:focus {
   text-decoration: none;
   outline: none;
-  color: var(--a-text-on-action);
+  color: var(--arb-footer-focus-text);
   background: var(--a-border-focus);
 }
 

src/packages/arbeidsplassen-theme/common.css

@@ -123,6 +123,13 @@
   border-bottom-right-radius: 0 !important;
 }
 
+/******************************************************
+ * Combobox overrides
+ ******************************************************/
+.navds-combobox__input {
+  background-color: var(--a-surface-default);
+ }
+
 /******************************************************
  * Tag overrides
  ******************************************************/

src/packages/arbeidsplassen-theme/dark.css

@@ -17,21 +17,21 @@
     --a-surface-default: var(--arb-green-900);
     --a-surface-hover: var(--arb-whitealpha-50);
     --a-surface-active: var(--arb-whitealpha-100);
-    --a-surface-selected: var(--arb-blue-50);
+    --a-surface-selected: var(--arb-green-700);
     --a-surface-subtle: var(--arb-dark-mode-shade-100);
     --a-surface-transparent: var(--arb-transparent);
     --a-surface-backdrop: var(--arb-grayalpha-700);
-    --a-surface-inverted: var(--arb-dark-mode-shade-400);
+    --a-surface-inverted: var(--arb-dark-mode-shade-300);
     --a-surface-inverted-hover: var(--arb-dark-mode-shade-300);
     --a-surface-inverted-active: var(--arb-dark-mode-shade-300);
 
     --a-surface-action: var(--arb-blue-200);
     --a-surface-action-hover: var(--arb-blue-300);
-    --a-surface-action-active: var(--arb-green-500);
+    --a-surface-action-active: var(--arb-green-700);
     --a-surface-action-subtle: var(--arb-whitealpha-50);
     --a-surface-action-subtle-hover: var(--arb-whitealpha-50);
-    --a-surface-action-selected: var(--arb-green-500);
-    --a-surface-action-selected-hover: var(--arb-green-400);
+    --a-surface-action-selected: var(--arb-green-700);
+    --a-surface-action-selected-hover: var(--arb-green-600);
 
     --a-surface-neutral: var(--arb-dark-mode-shade-200);
     --a-surface-neutral-moderate: var(--arb-dark-mode-shade-400);
@@ -81,14 +81,17 @@
    ******************************************************/
     --a-text-default: var(--arb-dark-mode-shade-900);
     --a-text-subtle: var(--arb-dark-mode-shade-600);
-    --a-text-visited: var(--arb-blue-900);
+    --a-text-visited: var(--a-purple-300);
     --a-text-danger: var(--arb-red-300);
+
     --a-text-action: var(--arb-blue-200);
+    --a-text-action-hover: var(--arb-white);
     --a-text-action-selected: var(--arb-green-500);
-    --a-text-action-on-action-subtle: var(--arb-blue-100);
+    --a-text-action-on-action-subtle: var(--arb-white);
+
     --a-text-on-inverted: var(--arb-white);
     --a-text-on-neutral: var(--arb-white);
-    --a-text-on-action: var(--arb-green-900);
+    --a-text-on-action: var(--arb-white);
     --a-text-on-info: var(--arb-white);
     --a-text-on-success: var(--arb-green-800);
     --a-text-on-warning: var(--arb-green-800);
@@ -103,19 +106,24 @@
     --a-border-default: var(--arb-dark-mode-shade-700);
     --a-border-strong: var(--arb-dark-mode-shade-900);
     --a-border-divider: var(--arb-dark-mode-shade-200);
-    --a-border-subtle: var(--arb-dark-mode-shade-300);
-    --a-border-subtle-hover: var(--arb-dark-mode-shade-300);
+    --a-border-subtle: var(--arb-whitealpha-100);
+    --a-border-subtle-hover: var(--arb-whitealpha-50);
+    --a-border-on-inverted: var(--arb-gray-200);
+    --a-border-on-inverted-subtle: var(--arb-gray-700);
+
     --a-border-action: var(--arb-blue-200);
-    --a-border-action-selected: var(--arb-blue-600);
-    --a-border-selected: var(--arb-blue-600);
+    --a-border-action-hover: var(--arb-blue-200);
+    --a-border-action-selected: var(--a-border-default);
+    --a-border-selected: var(--a-border-default);
+
     --a-border-success: var(--arb-green-400);
     --a-border-danger: var(--arb-red-300);
     --a-border-warning: var(--arb-orange-400);
     --a-border-info: var(--arb-blue-300);
-    --a-border-on-inverted: var(--arb-gray-200);
-    --a-border-on-inverted-subtle: var(--arb-gray-700);
+
     --a-border-focus: var(--arb-dark-mode-shade-900);
     --a-border-focus-on-inverted: var(--arb-blue-200);
+
     --a-border-alt-1: var(--arb-dark-mode-shade-700);
     --a-border-alt-2: var(--arb-dark-mode-shade-700);
     --a-border-alt-3: var(--arb-dark-mode-shade-700);
@@ -139,17 +147,42 @@
     --a-icon-alt-3: var(--arb-peach-200);
 
     --a-icon-action: var(--arb-blue-200);
-    --a-icon-action-selected: var(--arb-blue-700);
-    --a-icon-action-on-action-subtle: var(--arb-blue-200);
+    --a-icon-action-hover: var(--arb-white);
+    --a-icon-action-selected: var(--arb-green-500);
+    --a-icon-action-on-action-subtle: var(--arb-white);
 
     --a-icon-on-neutral: var(--arb-white);
-    --a-icon-on-action: var(--arb-green-900);
+    --a-icon-on-action: var(--arb-white);
     --a-icon-on-success: var(--arb-green-800);
     --a-icon-on-danger: var(--arb-white);
     --a-icon-on-warning: var(--arb-green-800);
     --a-icon-on-info: var(--arb-white);
     --a-icon-on-inverted: var(--arb-white);
 
+    /*****************************************************
+  * Shadows
+  ******************************************************/
+    --a-shadow-xlarge: 0px 10px 24px 0px rgba(0, 0, 0, 0.45),
+      0px 3px 5px 0px rgba(0, 0, 0, 0.35),
+      0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset,
+      0px 0px 1px 0px rgba(255, 255, 255, 0.35) inset;
+    --a-shadow-large: 0px 10px 16px 0px rgba(0, 0, 0, 0.35),
+      0px 2px 5px 0px rgba(0, 0, 0, 0.35),
+      0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset,
+      0px 0px 1px 0px rgba(255, 255, 255, 0.35) inset;
+    --a-shadow-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.35),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.5),
+      0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset,
+      0px 0px 1px 0px rgba(255, 255, 255, 0.3) inset;
+    --a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.35),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.5),
+      0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset,
+      0px 0px 1px 0px rgba(255, 255, 255, 0.3) inset;
+    --a-shadow-xsmall: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.5),
+      0px 1px 0px 0px rgba(255, 255, 255, 0.1) inset,
+      0px 0px 1px 0px rgba(255, 255, 255, 0.3) inset;
+
     /*****************************************************
   * Custom components variables
   ******************************************************/
@@ -170,12 +203,18 @@
     --ac-alert-success-border: var(--arb-green-800);
     --ac-alert-success-bg: var(--arb-green-800);
 
+    /* Button */
+    --ac-button-primary-bg: var(--arb-blue-600);
+    --ac-button-primary-hover-bg: var(--arb-blue-500);
+    --ac-button-tertiary-neutral-hover-text: var(--arb-white);
+    --ac-button-tertiary-focus-border: transparent;
+    --ac-button-tertiary-neutral-focus-border: transparent;
+
     /* Chip */
-    --ac-chip-toggle-border: var(--a-border-action);
     --ac-chip-toggle-bg: var(--arb-transparent);
     --ac-chip-toggle-text: var(--a-text-action);
-    --ac-chip-toggle-hover-border: var(--a-text-action-on-action-subtle);
     --ac-chip-toggle-hover-bg: var(--a-surface-action-subtle);
+    --ac-chip-toggle-neutral-border: var(--arb-transparent);
 
     --ac-chip-removable-neutral-border: var(--a-border-action);
     --ac-chip-removable-neutral-bg: var(--arb-transparent);
@@ -185,26 +224,54 @@
     );
     --ac-chip-removable-neutral-hover-bg: var(--a-surface-action-subtle);
 
-    /* Button */
-    --ac-button-secondary-text: var(--arb-dark-mode-shade-900);
-    --ac-button-secondary-hover-text: var(--arb-dark-mode-shade-900);
-    --ac-button-secondary-border: var(--arb-dark-mode-shade-800);
-    --ac-button-tertiary-text: var(--arb-dark-mode-shade-900);
-    --ac-button-tertiary-hover-text: var(--arb-dark-mode-shade-900);
-    --ac-button-secondary-focus-border: var(--ac-button-secondary-border);
-    --ac-button-secondary-neutral-focus-border: var(
-      --ac-button-secondary-border
-    );
-    --ac-button-tertiary-focus-border: transparent;
-    --ac-button-tertiary-neutral-focus-border: transparent;
+    /* Combobox */
+    --ac-combobox-list-item-hover-bg: var(--arb-dark-mode-shade-100);
+    --ac-combobox-list-item-selected-bg: var(--arb-dark-mode-shade-200);
+    --ac-combobox-list-item-selected-hover-bg: var(--arb-dark-mode-shade-300);
+    --ac-combobox-list-item-hover-border-left: var(--a-border-default);
+    --ac-combobox-list-item-selected-hover-border-left: var(--arb-green-400);
 
-    /* Tabs */
-    --ac-tabs-selected-border: var(--arb-green-400);
+    /* Link */
+    --ac-link-active-bg: var(--a-border-focus);
+    --ac-link-active-text: var(--arb-green-800);
+    --ac-link-focus-text: var(--arb-green-800);
+
+    /* Popover */
+    --ac-popover-bg: var(--arb-dark-mode-shade-100);
+    --ac-modal-bg: var(--arb-dark-mode-shade-100);
+    --ac-modal-backdrop: var(--a-surface-backdrop);
 
     /* ReadMore */
     --ac-read-more-hover-bg: var(--arb-whitealpha-50);
     --ac-read-more-line: var(--arb-green-400);
 
+    /* Stepper */
+    --ac-stepper-non-interactive-line-completed: var(--arb-dark-mode-shade-600);
+    --ac-stepper-line: var(--a-border-subtle);
+    --ac-stepper-line-completed: var(--arb-blue-300);
+    --ac-stepper-active-border: var(--a-surface-action-selected);
+    --ac-stepper-text: var(--arb-blue-600);
+
+    /* Progress bar */
+    --ac-progress-bar-fg: var(--arb-green-600);
+
+    /* Switch */
+    --ac-switch-action: var(--a-text-action);
+    --ac-switch-bg: var(--a-surface-neutral);
+    --ac-switch-hover-bg: var(--a-surface-neutral);
+    --ac-switch-checked-bg: var(--arb-green-600);
+    --ac-switch-checked-hover-bg: var(--arb-green-600);
+    --ac-switch-thumb-bg: var(--arb-dark-mode-shade-900);
+    --ac-switch-thumb-icon: var(--arb-grayalpha-500);
+    --ac-switch-thumb-icon-checked: var(--arb-green-600);
+
+    /* Table */
+    --a-table-sort-button-sorted-text: var(--a-text-on-action);
+
+    /* Tabs */
+    --ac-tabs-selected-border: var(--arb-green-400);
+    --ac-tabs-hover-border: var(--a-border-subtle);
+
     /* Tag */
     --ac-tag-info-moderate-text: var(--arb-green-900);
     --ac-tag-success-moderate-text: var(--arb-green-900);
@@ -223,27 +290,6 @@
     --ac-tag-alt-3-moderate-bg: var(--arb-whitealpha-50);
     --ac-tag-alt-3-filled-bg: var(--arb-whitealpha-100);
 
-    /* Stepper */
-    --ac-stepper-non-interactive-line-completed: var(--arb-dark-mode-shade-600);
-    --ac-stepper-line: var(--a-border-subtle);
-    --ac-stepper-line-completed: var(--arb-blue-300);
-    --ac-stepper-active-border: var(--a-surface-action-selected);
-
-    /* Table */
-    --a-table-sort-button-sorted-text: var(--a-text-on-action);
-
-    /* Popover */
-    --ac-popover-bg: var(--arb-dark-mode-shade-100);
-    --ac-modal-bg: var(--arb-dark-mode-shade-100);
-    --ac-modal-backdrop: var(--a-surface-backdrop);
-
-    /* Switch */
-    --ac-switch-bg: var(--arb-dark-mode-shade-400);
-    --ac-switch-hover-bg: var(--arb-dark-mode-shade-500);
-
-    /* Combobox */
-    --ac-combobox-list-bg: var(--arb-dark-mode-shade-100);
-
     /*****************************************************
     * Arbeidsplassen specific variables
     ******************************************************/
@@ -253,23 +299,24 @@
 
     --arb-footer-bg: var(--arb-dark-mode-shade-100);
     --arb-footer-text: var(--a-text-default);
+    --arb-footer-focus-text: var(--arb-green-800);
+
+    --arb-illustration-arms-and-legs: var(--arb-green-600);
+    --arb-illustration-face: var(--arb-green-700);
+    --arb-illustration-items: var(--arb-green-600);
+    --arb-illustration-shadow: var(--arb-whitealpha-50);
 
     --arb-link-panel-description-on-color: var(--a-text-default);
     --arb-link-panel-primary-bg: var(--arb-dark-mode-shade-100);
     --arb-link-panel-primary-text: var(--arb-green-200);
     --arb-link-panel-secondary-bg: var(--arb-dark-mode-shade-100);
-    --arb-link-panel-secondary-text: var(--a-blue-100);
+    --arb-link-panel-secondary-text: var(--arb-blue-100);
     --arb-link-panel-tertiary-bg: var(--arb-dark-mode-shade-100);
     --arb-link-panel-tertiary-text: var(--arb-peach-200);
 
     --arb-logo-bg: var(--arb-green-800);
     --arb-logo-letters: var(--arb-green-200);
     --arb-logo-inverted-bg: var(--arb-green-200);
     --arb-logo-inverted-letters: var(--arb-green-800);
-
-    --arb-illustration-arms-and-legs: var(--arb-green-600);
-    --arb-illustration-face: var(--arb-green-700);
-    --arb-illustration-items: var(--arb-green-600);
-    --arb-illustration-shadow: var(--arb-whitealpha-50);
   }
 }