@navikt/ds-css 0.7.4 → 0.8.0

package/form/search-field.css

@@ -1,9 +1,17 @@
+:root {
+  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-search-field-color-border-error: var(--navds-color-red-50);
+  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+}
+
 .navds-search-field__input-wrapper {
   display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.navds-form-field--s .navds-search-field__input {
-  padding: 0.25rem;
+.navds-form-field--small .navds-search-field__input {
+  padding: 0.15rem;
   min-height: 32px;
 }
 
@@ -22,11 +30,33 @@
 }
 
 .navds-search-field__input-wrapper :focus {
-  z-index: 1;
+  z-index: var(--navds-z-index-focus);
 }
 
 .navds-search-field--error
   .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-color-red-50) inset;
-  border-color: var(--navds-color-red-50);
+  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
+  border-color: var(--navds-search-field-color-border-error);
+}
+
+.navds-search-field__clear-button {
+  background-color: initial;
+  border: 1px solid var(--navds-search-field-color-clearbutton-border);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0.5rem;
+}
+
+.navds-search-field__clear-button:focus {
+  border-color: transparent;
+}
+
+.navds-search-field__clear-button:not(:first-child) {
+  border-left: none;
+}
+
+.navds-search-field__clear-button:not(:last-child) {
+  border-right: none;
 }

package/form/select.css

@@ -1,9 +1,20 @@
+:root {
+  --navds-select-color-background: var(--navds-color-white);
+  --navds-select-color-border: var(--navds-color-gray-60);
+  --navds-select-color-border-hover: var(--navds-color-blue-50);
+  --navds-select-color-border-error: var(--navds-color-red-50);
+  --navds-select-color-shadow-error: var(--navds-color-red-50);
+  --navds-select-color-border-disabled: var(--navds-color-gray-40);
+  --navds-select-color-background-disabled: var(--navds-color-gray-10);
+  --navds-select-color-text-disabled: var(--navds-color-darkgray);
+}
+
 .navds-select__input {
   appearance: none;
   padding: 0.5rem;
-  background-color: white;
+  background-color: var(--navds-select-color-background);
   border-radius: 4px;
-  border: 1px solid var(--navds-color-gray-40);
+  border: 1px solid var(--navds-select-color-border);
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -13,7 +24,7 @@
 }
 
 .navds-select__input:hover {
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-select-color-border-hover);
 }
 
 .navds-select__input:focus {
@@ -35,7 +46,7 @@
   pointer-events: none;
 }
 
-.navds-form-field--s .navds-select__input {
+.navds-form-field--small .navds-select__input {
   min-height: 32px;
   padding: 0.25rem;
 }
@@ -44,19 +55,16 @@
   Error handling
 */
 .navds-select--error > * select: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-select-color-shadow-error);
+  border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
-  TODO: Oppdatere farger her
- */
+/* Disabled handling */
 .navds-select__input:disabled,
 .navds-select__input[read-only] {
-  background-color: var(--navds-color-gray-10);
-  border-color: var(--navds-color-gray-40);
+  background-color: var(--navds-select-color-background-disabled);
+  border-color: var(--navds-select-color-border-disabled);
   box-shadow: none;
-  color: var(--navds-color-darkgray);
+  color: var(--navds-select-color-text-disabled);
   cursor: not-allowed;
 }

package/form/text-field.css

@@ -1,20 +1,31 @@
+:root {
+  --navds-text-field-color-background: var(--navds-color-white);
+  --navds-text-field-color-border: var(--navds-color-gray-60);
+  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
+  --navds-text-field-color-border-error: var(--navds-color-red-50);
+  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
+  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
+  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
+  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
+}
+
 .navds-text-field__input {
   appearance: none;
   padding: 0.5rem;
-  background-color: white;
+  background-color: var(--navds-text-field-color-background);
   border-radius: 4px;
-  border: 1px solid var(--navds-color-border);
+  border: 1px solid var(--navds-text-field-color-border);
   min-height: 48px;
   width: 100%;
 }
 
-.navds-form-field--s > .navds-text-field__input {
-  padding: 0.25rem;
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0.15rem;
   min-height: 32px;
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--navds-color-blue-50);
+  border-color: var(--navds-text-field-color-border-hover);
 }
 
 .navds-text-field__input:focus {
@@ -27,19 +38,26 @@
 */
 .navds-text-field--error
   > .navds-text-field__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-text-field-color-shadow-error);
+  border-color: var(--navds-text-field-color-border-error);
 }
 
-/*
-  TODO: Oppdater denne til riktige farger
-  Disabled handling
- */
+/* Disabled handling */
 .navds-text-field__input:disabled,
 .navds-text-field__input[readonly] {
-  background-color: #f1f1f1;
-  border-color: #6a6a6a;
+  background-color: var(--navds-text-field-color-background-disabled);
+  border-color: var(--navds-text-field-color-border-disabled);
   box-shadow: none;
-  color: #262626;
+  color: var(--navds-text-field-color-text-disabled);
   cursor: not-allowed;
 }
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}

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;