diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000..672cc2f
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1 @@
+* @navikt/teampam
diff --git a/src/packages/arbeidsplassen-css/footer.css b/src/packages/arbeidsplassen-css/footer.css
index ae4095c..421d797 100644
--- a/src/packages/arbeidsplassen-css/footer.css
+++ b/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);
}
diff --git a/src/packages/arbeidsplassen-theme/common.css b/src/packages/arbeidsplassen-theme/common.css
index 69e6189..9160e6f 100644
--- a/src/packages/arbeidsplassen-theme/common.css
+++ b/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
******************************************************/
diff --git a/src/packages/arbeidsplassen-theme/dark.css b/src/packages/arbeidsplassen-theme/dark.css
index 0d1268b..e47f4d4 100644
--- a/src/packages/arbeidsplassen-theme/dark.css
+++ b/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,12 +299,18 @@
--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);
@@ -266,10 +318,5 @@
--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);
}
}
diff --git a/src/packages/arbeidsplassen-theme/light.css b/src/packages/arbeidsplassen-theme/light.css
index afe152e..ccdcb43 100644
--- a/src/packages/arbeidsplassen-theme/light.css
+++ b/src/packages/arbeidsplassen-theme/light.css
@@ -23,7 +23,7 @@
--a-surface-action: var(--arb-blue-500);
--a-surface-action-hover: var(--arb-blue-600);
- --a-surface-action-active: var(--arb-blue-800);
+ --a-surface-action-active: var(--arb-green-700);
--a-surface-action-subtle: var(--arb-blue-50);
--a-surface-action-subtle-hover: var(--arb-blue-50);
--a-surface-action-selected: var(--arb-green-700);
@@ -77,11 +77,14 @@
******************************************************/
--a-text-default: var(--arb-green-800);
--a-text-subtle: var(--arb-grayalpha-700);
- --a-text-visited: var(--arb-blue-900);
+ --a-text-visited: var(--a-purple-500);
--a-text-danger: var(--arb-red-500);
+
--a-text-action: var(--arb-blue-500);
+ --a-text-action-hover: var(--arb-blue-600);
--a-text-action-selected: var(--arb-green-700);
--a-text-action-on-action-subtle: var(--arb-blue-600);
+
--a-text-on-inverted: var(--arb-white);
--a-text-on-neutral: var(--arb-white);
--a-text-on-action: var(--arb-white);
@@ -101,18 +104,22 @@
--a-border-divider: var(--arb-grayalpha-200);
--a-border-subtle: var(--arb-grayalpha-200);
--a-border-subtle-hover: var(--arb-grayalpha-300);
+ --a-border-on-inverted: var(--arb-gray-200);
+ --a-border-on-inverted-subtle: var(--arb-gray-700);
+
--a-border-action: var(--arb-blue-500);
--a-border-action-hover: var(--arb-blue-500);
--a-border-action-selected: var(--arb-blue-600);
--a-border-selected: var(--arb-blue-600);
+
--a-border-success: var(--arb-green-400);
--a-border-danger: var(--arb-red-500);
--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-blue-900);
+
+ --a-border-focus: var(--arb-green-700);
--a-border-focus-on-inverted: var(--arb-blue-200);
+
--a-border-alt-1: var(--arb-green-400);
--a-border-alt-2: var(--arb-blue-300);
--a-border-alt-3: var(--arb-peach-300);
@@ -137,6 +144,7 @@
--a-icon-action: var(--arb-blue-500);
--a-icon-action-selected: var(--arb-blue-700);
+ --a-icon-action-hover: var(--arb-blue-600);
--a-icon-action-on-action-subtle: var(--arb-blue-600);
--a-icon-on-neutral: var(--arb-white);
@@ -167,6 +175,10 @@
--ac-alert-success-border: var(--arb-green-200);
--ac-alert-success-bg: var(--arb-green-200);
+ /* Button */
+ --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);
@@ -175,6 +187,8 @@
--ac-chip-toggle-hover-bg: var(--a-surface-action-subtle);
--ac-chip-toggle-circle-border: var(--a-border-action);
+ --ac-chip-toggle-neutral-border: var(--a-border-subtle);
+
--ac-chip-removable-neutral-border: var(--a-border-action);
--ac-chip-removable-neutral-bg: var(--arb-transparent);
--ac-chip-removable-neutral-text: var(--a-text-action);
@@ -183,37 +197,56 @@
);
--ac-chip-removable-neutral-hover-bg: var(--a-surface-action-subtle);
- /* Button */
- --ac-button-secondary-text: var(--arb-blue-500);
- --ac-button-secondary-hover-text: var(--arb-blue-600);
- --ac-button-secondary-border: var(--arb-blue-500);
- --ac-button-tertiary-text: var(--arb-blue-500);
- --ac-button-tertiary-hover-text: var(--arb-blue-600);
- --ac-button-tertiary-focus-border: transparent;
- --ac-button-tertiary-neutral-focus-border: transparent;
+ /* Combobox */
+ --ac-combobox-list-item-selected-bg: var(--a-surface-alt-1-moderate);
+ --ac-combobox-list-item-selected-hover-bg: var(--a-surface-alt-1);
+ --ac-combobox-list-item-hover-border-left: var(--a-border-subtle-hover);
+ --ac-combobox-list-item-selected-hover-border-left: var(--a-border-focus);
- /* Tabs */
- --ac-tabs-selected-border: var(--arb-green-400);
+ /* Dropdown */
+ --ac-dropdown-item-active-bg: var(--a-surface-action-selected);
+
+ /* Link */
+ --ac-link-active-bg: var(--a-surface-action-selected);
+
+ /* Modal */
+ --ac-modal-bg: var(--a-surface-default);
+ --ac-modal-backdrop: var(--a-surface-backdrop);
+
+ /* Popover */
+ --ac-popover-bg: var(--a-surface-default);
+ --ac-popover-border: var(--a-border-divider);
/* ReadMore */
--ac-read-more-hover-bg: var(--arb-blue-50);
--ac-read-more-line: var(--arb-green-200);
+ /* Radio and Checkbox */
+ --ac-radio-checkbox-action: var(--a-surface-action);
+
/* Stepper */
--ac-stepper-non-interactive-line-completed: var(--arb-grayalpha-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);
- /* Popover */
- --ac-popover-bg: var(--a-surface-default);
- --ac-popover-border: var(--a-border-divider);
+ /* 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(--a-surface-success);
+ --ac-switch-checked-hover-bg: var(--a-surface-success);
+ --ac-switch-thumb-bg: var(--a-surface-default);
+ --ac-switch-thumb-icon: var(--arb-grayalpha-500);
+ --ac-switch-thumb-icon-checked: var(--a-icon-success);
- /* Dropdown */
- --ac-dropdown-item-active-bg: var(--a-text-action-selected);
+ /* Progress bar */
+ --ac-progress-bar-fg: var(--arb-green-300);
- /* Tag */
+ /* Tabs */
+ --ac-tabs-selected-border: var(--arb-green-400);
+ /* Tag */
--ac-tag-alt-1-bg: var(--a-surface-alt-1-subtle);
--ac-tag-alt-1-moderate-bg: var(--a-surface-alt-1-moderate);
--ac-tag-alt-1-filled-bg: var(--a-surface-alt-1);
@@ -226,23 +259,6 @@
--ac-tag-alt-3-moderate-bg: var(--a-surface-alt-3-moderate);
--ac-tag-alt-3-filled-bg: var(--a-surface-alt-3);
- /* ComboBox */
- --ac-combobox-list-bg: var(--a-surface-action-subtle);
- --ac-combobox-list-item-bg: var(--a-surface-action-subtle);
- --ac-combobox-list-item-hover-bg: var(--arb-blue-100);
- --ac-combobox-list-item-hover-border-left: var(--a-surface-action-active);
-
- /* Modal */
- --ac-modal-bg: var(--a-surface-default);
- --ac-modal-backdrop: var(--a-surface-backdrop);
-
- /* Switch */
- --ac-switch-bg: var(--a-surface-neutral);
- --ac-switch-hover-bg: var(--a-surface-neutral-hover);
-
- /* Radio and Checkbox */
- --ac-radio-checkbox-action: var(--a-surface-action);
-
/*****************************************************
* Arbeidsplassen specific variables
******************************************************/
@@ -252,6 +268,12 @@
--arb-footer-bg: var(--a-surface-alt-1);
--arb-footer-text: var(--arb-green-700);
+ --arb-footer-focus-text: var(--arb-white);
+
+ --arb-illustration-arms-and-legs: var(--arb-green-700);
+ --arb-illustration-face: var(--arb-green-700);
+ --arb-illustration-shadow: var(--arb-blue-50);
+ --arb-illustration-items: var(--arb-green-700);
--arb-link-panel-description-on-color: var(--arb-green-700);
--arb-link-panel-primary-bg: var(--a-surface-alt-1);
@@ -265,9 +287,4 @@
--arb-logo-letters: var(--arb-green-800);
--arb-logo-inverted-bg: var(--arb-green-800);
--arb-logo-inverted-letters: var(--arb-green-200);
-
- --arb-illustration-arms-and-legs: var(--arb-green-700);
- --arb-illustration-face: var(--arb-green-700);
- --arb-illustration-shadow: var(--arb-blue-50);
- --arb-illustration-items: var(--arb-green-700);
}
diff --git a/src/packages/arbeidsplassen-theme/package.json b/src/packages/arbeidsplassen-theme/package.json
index ef9e089..44bb217 100644
--- a/src/packages/arbeidsplassen-theme/package.json
+++ b/src/packages/arbeidsplassen-theme/package.json
@@ -1,6 +1,6 @@
{
"name": "@navikt/arbeidsplassen-theme",
- "version": "6.0.2",
+ "version": "6.0.5",
"main": "index.css",
"private": false,
"scripts": {
diff --git a/src/pages/Link.js b/src/pages/Link.js
index 328ec39..b8172be 100644
--- a/src/pages/Link.js
+++ b/src/pages/Link.js
@@ -1,20 +1,28 @@
-import { BodyLong, Link } from "@navikt/ds-react";
+import { BodyLong, Link, VStack } from "@navikt/ds-react";
import Layout from "../examples/Layout";
const LinkExample = () => {
return (