@navikt/ds-css 0.7.4 → 0.8.0

package/link-panel.css

@@ -1,19 +1,26 @@
+:root {
+  --navds-link-panel-color-text: var(--navds-color-gray-90);
+  --navds-link-panel-color-border-hover: var(--navds-color-blue-50);
+  --navds-link-panel-color-title-hover: var(--navds-color-text-link);
+}
+
 .navds-link-panel {
+  text-decoration: none;
+  color: var(--navds-link-panel-color-text);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  text-decoration: none;
-  color: var(--navds-color-gray-90);
+  justify-content: space-between;
+  gap: var(--navds-spacing-2);
 }
 
-.navds-link-panel:hover .navds-link-panel-title {
+.navds-link-panel:hover .navds-link-panel__title {
   text-decoration: underline;
-  color: var(--navds-color-text-link);
+  color: var(--navds-link-panel-color-title-hover);
 }
 
 .navds-link-panel:hover {
   box-shadow: var(--navds-shadow-hover);
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-link-panel-color-border-hover);
 }
 
 .navds-link-panel:focus {
@@ -22,12 +29,16 @@
 }
 
 .navds-link-panel__chevron {
+  flex-shrink: 0;
   font-size: 1.5rem;
   transition: transform 200ms;
-  flex-shrink: 0;
 }
 
 .navds-link-panel:hover > .navds-link-panel__chevron,
 .navds-link-panel:focus-within > .navds-link-panel__chevron {
   transform: translateX(4px);
 }
+
+.navds-link-panel__description {
+  margin-top: var(--navds-spacing-2);
+}

package/link.css

@@ -1,16 +1,30 @@
+:root {
+  --navds-link-color-text: var(--navds-color-text-link);
+  --navds-link-color-text-focus: var(--navds-color-text-inverse);
+  --navds-link-color-text-active: var(--navds-color-text-inverse);
+  --navds-link-color-background-focus: var(--navds-text-focus);
+  --navds-link-color-background-active: var(--navds-text-focus);
+  --navds-link-color-icon: var(--navds-color-text-link);
+  --navds-link-color-icon-focus: var(--navds-color-text-inverse);
+  --navds-link-color-on-info-background: var(--navds-color-text-primary);
+  --navds-link-color-on-error-background: var(--navds-color-text-primary);
+}
+
 .navds-link {
-  color: var(--navds-color-text-link);
+  color: var(--navds-link-color-text);
   text-decoration: underline;
-  display: inline-grid;
-  grid-auto-flow: column;
+  display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-alert--info .navds-link {
+  color: var(--navds-link-color-on-info-background);
 }
 
 .navds-alert--error .navds-link,
-.navds-alert--info .navds-link,
 .navds-confirmation-panel--error .navds-link {
-  color: var(--navds-color-text-primary);
+  color: var(--navds-link-color-on-error-background);
 }
 
 .navds-link:hover {
@@ -19,24 +33,24 @@
 
 .navds-link:focus {
   outline: none;
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-link-color-text-focus);
   text-decoration: none;
-  background-color: var(--navds-text-focus);
+  background-color: var(--navds-link-color-background-focus);
   box-shadow: var(--navds-text-shadow);
 }
 
 .navds-link:active {
   outline: none;
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-link-color-text-active);
   text-decoration: none;
-  background-color: var(--navds-text-focus);
+  background-color: var(--navds-link-color-background-active);
   box-shadow: var(--navds-text-shadow);
 }
 
 .navds-link svg {
-  color: var(--navds-color-text-link);
+  color: var(--navds-link-color-icon);
 }
 
 .navds-link:focus svg {
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-link-color-icon-focus);
 }

package/loader.css

@@ -1,3 +1,15 @@
+:root {
+  --navds-loader-color-foreground: var(--navds-color-gray-40);
+  --navds-loader-color-background: var(--navds-color-gray-10);
+  --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
+  --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
+  --navds-loader-color-inverted-foreground: var(--navds-color-white);
+  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-transparent-background: transparent;
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
+}
+
 .navds-loader {
   width: 1.5rem;
   display: inline-block;
@@ -9,54 +21,54 @@
   animation: loader-dasharray 1.4s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--navds-color-gray-40);
+  stroke: var(--navds-loader-color-foreground);
 }
 
 .navds-loader__background {
-  stroke: var(--navds-color-gray-10);
+  stroke: var(--navds-loader-color-background);
 }
 
 .navds-loader--neutral .navds-loader__foreground {
-  stroke: var(--navds-color-gray-40);
+  stroke: var(--navds-loader-color-neutral-foreground);
 }
 
 .navds-loader--interaction .navds-loader__foreground {
-  stroke: var(--navds-color-blue-50);
+  stroke: var(--navds-loader-color-interaction-foreground);
 }
 
 .navds-loader--inverted .navds-loader__foreground {
-  stroke: white;
+  stroke: var(--navds-loader-color-inverted-foreground);
 }
 
 .navds-loader--inverted .navds-loader__background {
-  stroke: rgba(255, 255, 255, 0.3);
+  stroke: var(--navds-loader-color-inverted-background);
 }
 
 .navds-loader--transparent .navds-loader__background {
-  stroke: transparent;
+  stroke: var(--navds-loader-color-transparent-background);
 }
 
-.navds-loader--2xl {
+.navds-loader--2xlarge {
   width: 4rem;
 }
 
-.navds-loader--xl {
+.navds-loader--xlarge {
   width: 2.5rem;
 }
 
-.navds-loader--l {
+.navds-loader--large {
   width: 2rem;
 }
 
-.navds-loader--m {
+.navds-loader--medium {
   width: 1.5rem;
 }
 
-.navds-loader--s {
+.navds-loader--small {
   width: 1.25rem;
 }
 
-.navds-loader--xs {
+.navds-loader--xsmall {
   width: 1rem;
 }
 
@@ -65,20 +77,20 @@
  */
 
 .navds-button .navds-loader .navds-loader__foreground {
-  stroke: currentColor;
+  stroke: var(--navds-loader-color-on-button-foreground);
 }
 
 .navds-button:hover .navds-loader .navds-loader__background {
-  stroke: rgba(255, 255, 255, 0.3);
+  stroke: var(--navds-loader-color-on-button-background);
 }
 
 .navds-button:active .navds-loader .navds-loader__background {
-  stroke: rgba(255, 255, 255, 0.3);
+  stroke: var(--navds-loader-color-on-button-background);
 }
 
 .navds-button--action .navds-loader .navds-loader__background,
 .navds-button--danger .navds-loader .navds-loader__background {
-  stroke: rgba(255, 255, 255, 0.3);
+  stroke: var(--navds-loader-color-on-button-background);
 }
 
 @keyframes loader-rotate {

package/modal.css

@@ -1,16 +1,23 @@
+:root {
+  --navds-modal-color-background: var(--navds-color-background);
+  --navds-modal-color-overlay: var(--navds-color-modal-overlay);
+}
+
 .ReactModal__Body--open {
   overflow: hidden;
 }
 
 .navds-modal {
-  background-color: var(--navds-color-background);
-  padding: var(--navds-spacing-4);
+  background-color: var(--navds-modal-color-background);
   border-radius: 4px;
   display: block;
   position: relative;
   overflow: auto;
   max-height: 100%;
-  z-index: var(--navds-z-index-modal-content);
+}
+
+.navds-modal__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-modal:focus,
@@ -21,12 +28,12 @@
 
 .navds-modal__overlay {
   position: fixed;
-  z-index: var(--navds-z-index-modal-overlay);
+  z-index: var(--navds-z-index-modal);
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--navds-color-modal-overlay);
+  background-color: var(--navds-modal-color-overlay);
   padding: var(--navds-spacing-4);
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,11 +21,11 @@
     "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.4.4",
+    "@navikt/ds-tokens": "^0.5.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.7",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.0"
   },
-  "gitHead": "0e426ee9054592446a90b31ce4c1f46b424b4af6"
+  "gitHead": "c485e1bfc7de8e30386b9b3c094a3032783db26f"
 }

package/page-header.css

@@ -0,0 +1,70 @@
+:root {
+  --navds-page-header-color-background: var(--navds-color-background);
+  --navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
+  --navds-page-header-color-shadow-product: var(--navds-color-green-40);
+  --navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
+}
+
+.navds-page-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-page-header-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-page-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-page-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-page-header--left > .navds-page-header__wrapper {
+  text-align: start;
+}
+
+.navds-page-header--center > .navds-page-header__wrapper {
+  text-align: center;
+}
+
+.navds-page-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-page-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-page-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
+}
+.navds-page-header--product {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
+}
+.navds-page-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-page-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-page-header__title {
+    font-size: var(--navds-font-size-title-xl);
+  }
+}

package/panel.css

@@ -1,11 +1,15 @@
+:root {
+  --navds-panel-color-background: var(--navds-color-white);
+  --navds-panel-color-border: var(--navds-color-border);
+}
+
 .navds-panel {
-  background-color: var(--navds-color-white);
-  display: block;
+  background-color: var(--navds-panel-color-background);
   padding: var(--navds-spacing-4);
   border-radius: var(--navds-border-radius);
   border: 1px solid transparent;
 }
 
 .navds-panel--border {
-  border-color: var(--navds-color-border);
+  border-color: var(--navds-panel-color-border);
 }

package/popover.css

@@ -1,9 +1,20 @@
+:root {
+  --navds-popover-color-background: var(--navds-color-background);
+  --navds-popover-color-border: var(--navds-color-gray-40);
+  --navds-popover-color-shadow: var(--navds-color-gray-20);
+}
+
 .navds-popover {
-  z-index: var(--navds-z-index-popover-default);
-  background-color: var(--navds-color-background);
-  box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
-  border: var(--navds-border-default);
-  border-radius: 2px;
+  z-index: var(--navds-z-index-popover);
+  background-color: var(--navds-popover-color-background);
+  box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
+  border-radius: 4px;
+}
+
+.navds-popover__content {
+  padding: var(--navds-spacing-4);
 }
 
 .navds-popover--hidden {
@@ -16,22 +27,20 @@
 }
 
 .navds-popover__arrow {
-  z-index: var(--navds-z-index-popover-arrow);
+  z-index: -1;
 }
 
 .navds-popover__arrow::before {
-  content: "";
   display: block;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--navds-popover-color-background);
+  border: 1px solid;
+  border-color: var(--navds-popover-color-border);
   width: 1rem;
   height: 1rem;
-  transform: rotate(45deg);
-  background-color: var(--navds-color-background);
-  border: var(--navds-border-default);
-}
-
-.navds-popover__arrow::before .navds-popover--small {
-  width: 0.67rem;
-  height: 0.67rem;
+  top: 0;
+  left: 0;
 }
 
 .navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {

package/speech-bubble.css

@@ -1,3 +1,13 @@
+:root {
+  --navds-speechbubble-color-background: var(--navds-color-gray-10);
+  --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
+  --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
+  --navds-speechbubble-color-illustration-background: var(
+    --navds-color-gray-20
+  );
+  --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
+}
+
 .navds-speechbubble {
   display: flex;
   align-items: flex-end;
@@ -23,8 +33,8 @@
 
 .navds-speechbubble__illustration {
   align-items: center;
-  background: var(--navds-color-gray-20);
-  color: var(--navds-color-darkgray);
+  background: var(--navds-speechbubble-color-illustration-background);
+  color: var(--navds-speechbubble-color-illustration);
   border-radius: 50%;
   display: flex;
   flex-shrink: 0;
@@ -42,10 +52,10 @@
 
 .navds-speechbubble__bubble {
   padding: 1rem;
-  box-shadow: 0 2px 4px 0 var(--navds-color-gray-20);
+  box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
   width: fit-content;
   max-width: 37.5rem;
-  background-color: var(--navds-color-gray-10);
+  background-color: var(--navds-speechbubble-color-background);
   border-radius: 12px;
   border-bottom-left-radius: 2px;
   display: flex;
@@ -65,5 +75,5 @@
 }
 
 .navds-speechbubble__top-text {
-  color: var(--navds-color-gray-60);
+  color: var(--navds-speechbubble-color-detail-text);
 }