@navikt/ds-css 0.7.4 → 0.8.3

package/form/textarea.css

@@ -1,3 +1,16 @@
+:root {
+  --navds-textarea-color-background: var(--navds-color-white);
+  --navds-textarea-color-border: var(--navds-color-gray-60);
+  --navds-textarea-color-border-hover: var(--navds-color-blue-50);
+  --navds-textarea-color-border-error: var(--navds-color-red-50);
+  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
+  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
+  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
+  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
+  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
+  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
+}
+
 .navds-textarea__wrapper {
   position: relative;
   width: 100%;
@@ -6,9 +19,9 @@
 .navds-textarea__input {
   appearance: none;
   padding: var(--navds-spacing-2);
-  background-color: white;
+  background-color: var(--navds-textarea-color-background);
   border-radius: 4px;
-  border: 1px solid var(--navds-color-border);
+  border: 1px solid var(--navds-textarea-color-border);
   resize: none;
   width: 100%;
   transition: height 0.1s ease-out;
@@ -21,7 +34,7 @@
 }
 
 .navds-textarea__input:hover {
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-textarea-color-border-hover);
 }
 
 .navds-textarea__input:focus {
@@ -29,18 +42,18 @@
   box-shadow: var(--navds-shadow-focus);
 }
 
-.navds-form-field--s .navds-textarea__input {
+.navds-form-field--small .navds-textarea__input {
   padding: var(--navds-spacing-1);
   min-height: 32px;
 }
 
-.navds-form-field--s .navds-textarea--counter.navds-textarea__input {
+.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
   padding-bottom: var(--navds-spacing-7);
 }
 
 .navds-textarea__counter {
   pointer-events: none;
-  color: var(--navds-color-gray-40);
+  color: var(--navds-textarea-color-counter-text);
   font-style: italic;
   position: absolute;
   text-align: right;
@@ -50,7 +63,7 @@
 }
 
 .navds-textarea__counter--error {
-  color: var(--navds-color-red-50);
+  color: var(--navds-textarea-color-counter-text-error);
 }
 
 /**
@@ -58,19 +71,18 @@
 */
 .navds-textarea--error
   .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50);
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
+  border-color: var(--navds-textarea-color-border-error);
 }
 
 /*
-  TODO: Oppdater denne til riktige farger
   Disabled handling
  */
 .navds-textarea__input:disabled,
 .navds-textarea__input[readonly] {
-  background-color: #f1f1f1;
-  border-color: #6a6a6a;
+  background-color: var(--navds-textarea-color-background-disabled);
+  border-color: var(--navds-textarea-color-border-disabled);
   box-shadow: none;
-  color: #262626;
+  color: var(--navds-textarea-color-text-disabled);
   cursor: not-allowed;
 }

package/guide-panel.css

@@ -0,0 +1,76 @@
+:root {
+  --navds-guide-panel-color-background: var(--navds-color-background);
+  --navds-guide-panel-color-border: var(--navds-color-blue-40);
+  --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+}
+
+/**
+ * GuidePanel component
+ */
+.navds-guide-panel {
+  position: relative;
+  padding-left: 2.5rem;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--navds-guide-panel-color-background);
+  border-radius: 4px;
+  border: 2px solid var(--navds-guide-panel-color-border);
+  min-height: 7.25rem;
+  padding: 1.5rem;
+  padding-left: 3.5rem;
+}
+
+.navds-guide-panel--poster {
+  padding-left: 0;
+  padding-top: 3.125rem;
+}
+
+.navds-guide-panel--poster .navds-guide-panel__content {
+  padding: 2rem;
+  padding-top: 4.25rem;
+}
+
+.navds-guide-panel .navds-guide {
+  position: absolute;
+  top: 1rem;
+  transform: translateX(-50%);
+}
+
+.navds-guide-panel--poster .navds-guide {
+  left: 50%;
+  top: 0;
+}
+
+/**
+ * Guide component
+ */
+.navds-guide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Guide illustration frame */
+.navds-guide__illustration {
+  background: var(--navds-guide-panel-color-illustration-background);
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.navds-guide__illustration svg,
+.navds-guide__illustration img {
+  height: 100%;
+  width: 100%;
+}
+
+/* Illustration sizes */
+.navds-guide__illustration--small {
+  height: 5rem;
+  width: 5rem;
+}
+
+.navds-guide__illustration--medium {
+  height: 6.25rem;
+  width: 6.25rem;
+}

package/help-text.css

@@ -0,0 +1,54 @@
+:root {
+  --navds-help-text-color-button-background: transparent;
+  --navds-help-text-color-icon: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-hover: var(--navds-color-white);
+  --navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-focus: var(--navds-color-white);
+  --navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
+  --navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
+  --navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
+}
+
+.navds-help-text__button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: var(--navds-help-text-color-button-background);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navds-help-text__button:focus {
+  outline: none;
+}
+
+.navds-help-text__icon {
+  border-radius: 50%;
+  font-size: 1.5rem;
+  color: var(--navds-help-text-color-icon);
+}
+
+.navds-help-text__button:hover > .navds-help-text__icon {
+  color: var(--navds-help-text-color-icon-hover);
+  background: var(--navds-help-text-color-icon-background-hover);
+  box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
+}
+
+.navds-help-text__button:focus > .navds-help-text__icon {
+  outline: none;
+  color: var(--navds-help-text-color-icon-focus);
+  background: var(--navds-help-text-color-icon-background-focus);
+  box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
+}
+
+.navds-help-text__popover > .navds-popover__arrow::before {
+  background-color: var(--navds-help-text-color-popover-background);
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--navds-help-text-color-popover-background);
+}

package/index.css

@@ -6,12 +6,12 @@
 @import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
-@import "card.css";
 @import "content-container.css";
 @import "copy-to-clipboard.css";
-@import "header.css";
 @import "internal-header.css";
+@import "guide-panel.css";
 @import "form/index.css";
+@import "help-text.css";
 @import "link.css";
 @import "loader.css";
 @import "modal.css";
@@ -20,3 +20,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "speech-bubble.css";
+
+/* Navno spesific packages */
+@import "page-header.css";
+@import "card.css";

package/internal-header.css

@@ -1,3 +1,9 @@
+:root {
+  --navds-internal-header-color-background: var(--navds-color-darkgray);
+  --navds-internal-header-color-border: var(--navds-color-gray-40);
+  --navds-internal-header-color-text: var(--navds-color-text-inverse);
+}
+
 /**************************
  * .navds-header *
  **************************/
@@ -5,8 +11,8 @@
 .navds-interal-header {
   display: flex;
   align-items: center;
-  background: var(--navds-color-darkgray);
-  color: white;
+  background: var(--navds-internal-header-color-background);
+  color: var(--navds-internal-header-color-text);
   max-width: 100vw;
   min-height: 50px;
 }
@@ -22,13 +28,13 @@
 
 .navds-interal-header__title {
   padding: 0 var(--navds-spacing-6);
-  border-right: 1px solid var(--navds-color-gray-40);
+  border-right: 1px solid var(--navds-internal-header-color-border);
   display: flex;
   align-self: stretch;
   align-items: center;
   text-decoration: none;
   margin: 0;
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-internal-header-color-text);
 }
 
 .navds-interal-header__title > span > a {
@@ -46,10 +52,10 @@
   **************************/
 
 .navds-interal-header__user {
-  color: var(--navds-color-text-inverse);
+  color: var(--navds-internal-header-color-text);
   padding: 0 var(--navds-spacing-6);
   margin-left: auto;
-  border-left: 1px solid var(--navds-color-gray-40);
+  border-left: 1px solid var(--navds-internal-header-color-border);
   display: flex;
   align-self: stretch;
   align-items: center;

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--primary .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.3",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -18,14 +18,14 @@
   "main": "./dist/index.css",
   "scripts": {
     "build": "postcss --use postcss-import -o dist/index.css index.css",
-    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
+    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.4.4",
+    "@navikt/ds-tokens": "^0.5.1",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.2.7",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.0"
+    "postcss-import": "^14.0.2"
   },
-  "gitHead": "0e426ee9054592446a90b31ce4c1f46b424b4af6"
+  "gitHead": "5fd28b01316ea6651a8983b87aaaf7d29db3e797"
 }

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);
 }