@navikt/ds-css 5.18.3 → 6.0.0

package/tokens.json

@@ -40,6 +40,7 @@
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-secondary-hover-border": "--a-border-action-hover",
     "--ac-button-secondary-focus-border": "--a-border-action",
     "--ac-button-secondary-active-text": "--a-text-on-action",
     "--ac-button-secondary-active-bg": "--a-surface-action-active",
@@ -117,7 +118,7 @@
     "--ac-copybutton-border-radius": "--a-border-radius-medium",
     "--ac-copybutton-action-text": "--a-text-action",
     "--ac-copybutton-action-bg": "--a-surface-transparent",
-    "--ac-copybutton-action-hover-text": "--a-text-action",
+    "--ac-copybutton-action-hover-text": "--a-text-action-hover",
     "--ac-copybutton-action-hover-bg": "--a-surface-hover",
     "--ac-copybutton-action-active-text": "--a-icon-success",
     "--ac-copybutton-neutral-text": "--a-text-subtle",
@@ -161,16 +162,19 @@
     "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle"
   },
   "helptext": {
+    "--ac-help-text-popover-bg": "--a-surface-info-subtle",
     "--ac-help-text-button-color": "--a-surface-action",
-    "--ac-help-text-popover-bg": "--a-surface-info-subtle"
+    "--ac-help-text-button-hover-color": "--a-surface-action-hover",
+    "--ac-help-text-button-active-color": "--a-surface-action-active"
   },
   "linkpanel": {
     "--ac-link-panel-text": "--a-text-default",
-    "--ac-link-panel-hover-text": "--a-text-action",
-    "--ac-link-panel-hover-border": "--a-border-action"
+    "--ac-link-panel-hover-text": "--a-text-action-hover",
+    "--ac-link-panel-hover-border": "--a-border-action-hover"
   },
   "link": {
     "--ac-link-text": "--a-text-action",
+    "--ac-link-hover-text": "--a-text-action-hover",
     "--ac-link-focus-text": "--a-text-on-action",
     "--ac-link-focus-bg": "--a-border-focus",
     "--ac-link-focus-border": "--a-border-focus",
@@ -217,6 +221,7 @@
   "readmore": {
     "--ac-read-more-text": "--a-text-action",
     "--ac-read-more-hover-bg": "--a-surface-hover",
+    "--ac-read-more-hover-text": "--a-text-action-hover",
     "--ac-read-more-active-bg": "--a-surface-active",
     "--ac-read-more-line": "--a-border-divider"
   },
@@ -232,6 +237,7 @@
     "--ac-stepper-active-bg": "--a-surface-action-selected",
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
+    "--ac-stepper-hover-active": "--a-text-action-hover",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
@@ -258,7 +264,7 @@
     "--ac-tabs-border": "--a-border-divider",
     "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
-    "--ac-tabs-selected-border": "--a-border-action",
+    "--ac-tabs-selected-border": "--a-border-action-selected",
     "--ac-tabs-selected-text": "--a-text-default",
     "--ac-tabs-focus-text": "--a-text-default"
   },
@@ -361,7 +367,7 @@
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
     "--ac-radio-checkbox-border": "--a-border-default",
-    "--ac-radio-checkbox-action": "--a-surface-action",
+    "--ac-radio-checkbox-action": "--a-surface-action-selected",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
     "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
@@ -372,9 +378,9 @@
   },
   "search": {
     "--ac-search-button-border": "--a-border-default",
-    "--ac-search-button-border-hover": "--a-border-action",
+    "--ac-search-button-border-hover": "--a-border-action-hover",
     "--ac-search-clear-icon": "--a-text-default",
-    "--ac-search-clear-icon-hover": "--a-text-action",
+    "--ac-search-clear-icon-hover": "--a-text-action-hover",
     "--ac-search-button-focus-active-border": "--a-surface-default",
     "--ac-search-error-border": "--a-border-danger"
   },
@@ -400,7 +406,8 @@
     "--ac-select-bg": "--a-surface-default",
     "--ac-select-text": "--a-text-default",
     "--ac-select-border": "--a-border-default",
-    "--ac-select-hover-bg": "--a-border-action",
+    "--ac-select-hover-border": "--a-border-action-hover",
+    "--ac-select-active-border": "--a-border-action-selected",
     "--ac-select-error-border": "--a-surface-danger"
   },
   "switch": {
@@ -418,7 +425,8 @@
     "--ac-textfield-border": "--a-border-default",
     "--ac-textfield-text": "--a-text-default",
     "--ac-textfield-placeholder": "--a-text-subtle",
-    "--ac-textfield-hover-border": "--a-border-action",
+    "--ac-textfield-hover-border": "--a-border-action-hover",
+    "--ac-textfield-active-border": "--a-border-action-selected",
     "--ac-textfield-error-border": "--a-border-danger"
   },
   "textarea": {
@@ -426,7 +434,8 @@
     "--ac-textarea-border": "--a-border-default",
     "--ac-textarea-text": "--a-text-default",
     "--ac-textarea-placeholder": "--a-text-subtle",
-    "--ac-textarea-hover-border": "--a-border-action",
+    "--ac-textarea-hover-border": "--a-border-action-hover",
+    "--ac-textarea-active-border": "--a-border-action-selected",
     "--ac-textarea-counter-text": "--a-text-subtle",
     "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
@@ -435,6 +444,7 @@
     "--ac-dropdown-text": "--a-text-default",
     "--ac-dropdown-item-text": "--a-text-action",
     "--ac-dropdown-item-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-dropdown-item-hover-text": "--a-text-action-hover",
     "--ac-dropdown-item-active-bg": "--a-surface-action-active",
     "--ac-dropdown-item-active-text": "--a-text-on-active"
   },

package/content-container.css

@@ -1,17 +0,0 @@
-:root,
-:host {
-  --navds-content-container-max-width: 79.5rem;
-}
-
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--a-spacing-6);
-  }
-}

package/dist/component/contentcontainer.css

@@ -1,17 +0,0 @@
-:root,
-:host {
-  --navds-content-container-max-width: 79.5rem;
-}
-
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--a-spacing-6);
-  }
-}

package/dist/component/contentcontainer.min.css

@@ -1 +0,0 @@
-:host,:root{--navds-content-container-max-width:79.5rem}.navds-content-container{margin-left:auto;margin-right:auto;max-width:var(--navds-content-container-max-width);padding:var(--a-spacing-4)}@media (min-width:448px){.navds-content-container{padding:var(--a-spacing-6)}}

package/dist/component/grid.css

@@ -1,217 +0,0 @@
-/**************************
- * .navds-grid *
- **************************/
-
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--a-spacing-6);
-  }
-}
-
-/**************************
- * .navds-grid__cell *
- **************************/
-
-.navds-grid__cell--xs-1 {
-  grid-column: span 1;
-}
-
-.navds-grid__cell--xs-2 {
-  grid-column: span 2;
-}
-
-.navds-grid__cell--xs-3 {
-  grid-column: span 3;
-}
-
-.navds-grid__cell--xs-4 {
-  grid-column: span 4;
-}
-
-.navds-grid__cell--xs-5 {
-  grid-column: span 5;
-}
-
-.navds-grid__cell--xs-6 {
-  grid-column: span 6;
-}
-
-.navds-grid__cell--xs-7 {
-  grid-column: span 7;
-}
-
-.navds-grid__cell--xs-8 {
-  grid-column: span 8;
-}
-
-.navds-grid__cell--xs-9 {
-  grid-column: span 9;
-}
-
-.navds-grid__cell--xs-10 {
-  grid-column: span 10;
-}
-
-.navds-grid__cell--xs-11 {
-  grid-column: span 11;
-}
-
-.navds-grid__cell--xs-12 {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-grid__cell--sm-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--sm-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--sm-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--sm-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--sm-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--sm-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--sm-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--sm-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--sm-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--sm-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--sm-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--sm-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-grid__cell--md-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--md-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--md-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--md-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--md-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--md-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--md-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--md-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--md-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--md-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--md-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--md-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-grid__cell--lg-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--lg-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--lg-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--lg-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--lg-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--lg-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--lg-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--lg-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--lg-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--lg-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--lg-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--lg-12 {
-    grid-column: span 12;
-  }
-}

package/dist/component/grid.min.css

@@ -1 +0,0 @@
-.navds-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:var(--a-spacing-4)}@media (min-width:448px){.navds-grid{grid-gap:var(--a-spacing-6)}}.navds-grid__cell--xs-1{grid-column:span 1}.navds-grid__cell--xs-2{grid-column:span 2}.navds-grid__cell--xs-3{grid-column:span 3}.navds-grid__cell--xs-4{grid-column:span 4}.navds-grid__cell--xs-5{grid-column:span 5}.navds-grid__cell--xs-6{grid-column:span 6}.navds-grid__cell--xs-7{grid-column:span 7}.navds-grid__cell--xs-8{grid-column:span 8}.navds-grid__cell--xs-9{grid-column:span 9}.navds-grid__cell--xs-10{grid-column:span 10}.navds-grid__cell--xs-11{grid-column:span 11}.navds-grid__cell--xs-12{grid-column:span 12}@media (min-width:448px){.navds-grid__cell--sm-1{grid-column:span 1}.navds-grid__cell--sm-2{grid-column:span 2}.navds-grid__cell--sm-3{grid-column:span 3}.navds-grid__cell--sm-4{grid-column:span 4}.navds-grid__cell--sm-5{grid-column:span 5}.navds-grid__cell--sm-6{grid-column:span 6}.navds-grid__cell--sm-7{grid-column:span 7}.navds-grid__cell--sm-8{grid-column:span 8}.navds-grid__cell--sm-9{grid-column:span 9}.navds-grid__cell--sm-10{grid-column:span 10}.navds-grid__cell--sm-11{grid-column:span 11}.navds-grid__cell--sm-12{grid-column:span 12}}@media (min-width:648px){.navds-grid__cell--md-1{grid-column:span 1}.navds-grid__cell--md-2{grid-column:span 2}.navds-grid__cell--md-3{grid-column:span 3}.navds-grid__cell--md-4{grid-column:span 4}.navds-grid__cell--md-5{grid-column:span 5}.navds-grid__cell--md-6{grid-column:span 6}.navds-grid__cell--md-7{grid-column:span 7}.navds-grid__cell--md-8{grid-column:span 8}.navds-grid__cell--md-9{grid-column:span 9}.navds-grid__cell--md-10{grid-column:span 10}.navds-grid__cell--md-11{grid-column:span 11}.navds-grid__cell--md-12{grid-column:span 12}}@media (min-width:960px){.navds-grid__cell--lg-1{grid-column:span 1}.navds-grid__cell--lg-2{grid-column:span 2}.navds-grid__cell--lg-3{grid-column:span 3}.navds-grid__cell--lg-4{grid-column:span 4}.navds-grid__cell--lg-5{grid-column:span 5}.navds-grid__cell--lg-6{grid-column:span 6}.navds-grid__cell--lg-7{grid-column:span 7}.navds-grid__cell--lg-8{grid-column:span 8}.navds-grid__cell--lg-9{grid-column:span 9}.navds-grid__cell--lg-10{grid-column:span 10}.navds-grid__cell--lg-11{grid-column:span 11}.navds-grid__cell--lg-12{grid-column:span 12}}

package/grid.css

@@ -1,217 +0,0 @@
-/**************************
- * .navds-grid *
- **************************/
-
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--a-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--a-spacing-6);
-  }
-}
-
-/**************************
- * .navds-grid__cell *
- **************************/
-
-.navds-grid__cell--xs-1 {
-  grid-column: span 1;
-}
-
-.navds-grid__cell--xs-2 {
-  grid-column: span 2;
-}
-
-.navds-grid__cell--xs-3 {
-  grid-column: span 3;
-}
-
-.navds-grid__cell--xs-4 {
-  grid-column: span 4;
-}
-
-.navds-grid__cell--xs-5 {
-  grid-column: span 5;
-}
-
-.navds-grid__cell--xs-6 {
-  grid-column: span 6;
-}
-
-.navds-grid__cell--xs-7 {
-  grid-column: span 7;
-}
-
-.navds-grid__cell--xs-8 {
-  grid-column: span 8;
-}
-
-.navds-grid__cell--xs-9 {
-  grid-column: span 9;
-}
-
-.navds-grid__cell--xs-10 {
-  grid-column: span 10;
-}
-
-.navds-grid__cell--xs-11 {
-  grid-column: span 11;
-}
-
-.navds-grid__cell--xs-12 {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-grid__cell--sm-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--sm-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--sm-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--sm-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--sm-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--sm-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--sm-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--sm-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--sm-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--sm-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--sm-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--sm-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-grid__cell--md-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--md-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--md-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--md-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--md-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--md-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--md-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--md-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--md-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--md-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--md-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--md-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-grid__cell--lg-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--lg-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--lg-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--lg-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--lg-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--lg-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--lg-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--lg-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--lg-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--lg-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--lg-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--lg-12 {
-    grid-column: span 12;
-  }
-}