@navikt/ds-css 0.18.23 → 1.0.0-rc.2

package/form/textarea.css

@@ -37,7 +37,6 @@
   resize: none;
   width: 100%;
   display: block;
-  min-height: 48px;
   color: var(--navds-text-field-color-text);
 }
 

package/help-text.css

@@ -15,7 +15,6 @@
   --navds-help-text-color-shadow-hover: var(
     --navds-semantic-color-interaction-primary
   );
-  --navds-help-text-color-shadow-focus: var(--navds-semantic-color-focus);
   --navds-help-text-color-popover-background: var(
     --navds-semantic-color-feedback-info-background
   );
@@ -35,27 +34,36 @@
   font-size: 1.5rem;
 }
 
-.navds-help-text__button:hover {
-  color: var(--navds-help-text-color-hover);
-  background: var(--navds-help-text-color-background-hover);
-  box-shadow: 0 0 0 2px var(--navds-help-text-color-shadow-hover);
-}
-
 .navds-help-text__button:focus {
   outline: none;
-  color: var(--navds-help-text-color-focus);
-  background: var(--navds-help-text-color-background-focus);
-  box-shadow: 0 0 0 3px var(--navds-help-text-color-shadow-focus);
+  box-shadow: 0 0 0 1px var(--navds-global-color-white),
+    0 0 0 4px var(--navds-semantic-color-focus);
 }
 
 .navds-help-text__icon {
   border-radius: var(--navds-border-radius-full);
 }
 
-.navds-help-text__popover > .navds-popover__arrow::before {
+.navds-help-text__popover > .navds-popover__arrow {
   background-color: var(--navds-help-text-color-popover-background);
 }
 
 .navds-help-text__popover.navds-popover {
   background-color: var(--navds-help-text-color-popover-background);
+
+  --navds-popover-color-border: rgba(38 38 38 / 0.22);
+}
+
+.navds-help-text__icon--filled {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"])
+  > .navds-help-text__icon {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"])
+  > .navds-help-text__icon--filled {
+  display: inherit;
 }

package/index.css

@@ -7,12 +7,12 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
+@import "chat.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
 @import "link.css";
 @import "loader.css";
-@import "menu.css";
 @import "modal.css";
 @import "pagination.css";
 @import "popover.css";
@@ -22,12 +22,6 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "read-more.css";
-@import "speech-bubble.css";
-@import "step-indicator.css";
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";
-
-/* Navno spesific packages */
-@import "page-header.css";
-@import "card.css";

package/link-panel.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--navds-spacing-2);
+  gap: var(--navds-spacing-4);
 }
 
 .navds-link-panel:hover .navds-link-panel__title {
@@ -42,5 +42,5 @@
 }
 
 .navds-link-panel__description {
-  margin-top: var(--navds-spacing-2);
+  margin-top: var(--navds-spacing-1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.23",
+  "version": "1.0.0-rc.2",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,12 +20,12 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.9.7",
+    "@navikt/ds-tokens": "^1.0.0-rc.2",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   },
-  "gitHead": "0826fcf332a3499c610d8d2035fbd542c9ed0433"
+  "gitHead": "60f13970436275f5af4a206995c545475c2f09db"
 }

package/pagination.css

@@ -1,25 +1,12 @@
 :root {
-  --navds-pagination-color-background-hover: var(
-    --navds-semantic-color-canvas-background
-  );
-  --navds-pagination-color-background-active: var(
-    --navds-semantic-color-interaction-primary-selected
-  );
-  --navds-pagination-color-text-active: var(
-    --navds-semantic-color-text-inverted
-  );
   --navds-pagination-color-background-selected: var(
-    --navds-semantic-color-interaction-primary
+    --navds-semantic-color-interaction-primary-selected
   );
   --navds-pagination-color-text-selected: var(
     --navds-semantic-color-text-inverted
   );
 }
 
-.navds-pagination {
-  display: flex;
-}
-
 .navds-pagination__list {
   margin: 0;
   padding: 0;
@@ -32,89 +19,48 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--navds-spacing-8);
+  width: var(--navds-spacing-12);
   cursor: default;
 }
 
 .navds-pagination--small .navds-pagination__ellipsis {
-  width: var(--navds-spacing-6);
-}
-
-.navds-pagination__item {
-  display: flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-1) var(--navds-spacing-3);
-}
-
-.navds-pagination--small .navds-pagination__item {
-  padding: 2px var(--navds-spacing-2);
+  width: var(--navds-spacing-8);
 }
 
-.navds-pagination__item:hover {
-  background-color: var(--navds-pagination-color-background-hover);
+.navds-pagination--xsmall .navds-pagination__ellipsis {
+  width: var(--navds-spacing-6);
 }
 
-.navds-pagination__item:active {
-  background-color: var(--navds-pagination-color-background-active);
-  color: var(--navds-pagination-color-text-active);
+.navds-pagination__item {
+  color: var(--navds-semantic-color-text);
 }
 
-.navds-pagination__item:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus),
-    inset 0 0 0 3px white;
-  outline: none;
+.navds-pagination--medium .navds-pagination__item {
+  border-radius: var(--navds-border-radius-medium);
 }
 
 .navds-pagination__item[aria-current="true"] {
   background-color: var(--navds-pagination-color-background-selected);
   color: var(--navds-pagination-color-text-selected);
-  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-pagination__item[aria-current="true"]:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
 }
 
 .navds-pagination__prev-next {
   display: flex;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  text-decoration: underline;
-  color: var(--navds-semantic-color-link);
   align-items: center;
   gap: var(--navds-spacing-1);
-  border-radius: var(--navds-border-radius-small);
-}
-
-.navds-pagination__prev-next:focus {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
-}
-
-.navds-pagination__prev-next:disabled {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-.navds-pagination__prev-next-icon {
-  margin: 7px;
-}
-
-.navds-pagination--small .navds-pagination__prev-next-icon {
-  margin: var(--navds-spacing-1);
-  font-size: 1rem;
 }
 
-.navds-pagination__next-text {
-  padding-left: 0.75rem;
+.navds-pagination--small .navds-pagination__prev-next {
+  padding: 0.375rem;
 }
 
-.navds-pagination__prev-text {
-  padding-right: 0.75rem;
+.navds-pagination--xsmall .navds-pagination__prev-next {
+  padding: 0.125rem;
 }
 
 .navds-pagination--invisible {

package/popover.css

@@ -28,55 +28,33 @@
 }
 
 .navds-popover__arrow {
+  position: absolute;
   z-index: -1;
-}
-
-.navds-popover__arrow::before {
-  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;
-  top: 0;
-  left: 0;
 }
 
-.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {
-  bottom: calc(1rem / -2);
-}
-
-.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="top"] > .navds-popover__arrow {
   border-left-color: transparent;
   border-top-color: transparent;
 }
 
-.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow {
-  top: calc(1rem / -2);
-}
-
 /* prettier-ignore */
-.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
   border-bottom-color: transparent;
   border-right-color: transparent;
 }
 
-.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow {
-  right: calc(1rem / -2);
-}
-
-.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="left"] > .navds-popover__arrow {
   border-left-color: transparent;
   border-bottom-color: transparent;
 }
 
-.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow {
-  left: calc(1rem / -2);
-}
-
-.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="right"] > .navds-popover__arrow {
   border-right-color: transparent;
   border-top-color: transparent;
 }

package/table.css

@@ -148,7 +148,7 @@
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .navds-table__header-cell--align-center .navds-table__sort-button {

package/tabs.css

@@ -74,6 +74,10 @@
   gap: var(--navds-spacing-1);
 }
 
+.navds-tabs__tab-inner svg {
+  flex-shrink: 0;
+}
+
 .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
   flex-direction: column;
   gap: 0;

package/tooltip.css

@@ -10,9 +10,6 @@
 
 .navds-tooltip {
   z-index: var(--navds-z-index-tooltip);
-}
-
-.navds-tooltip__inner {
   background-color: var(--navds-semantic-color-component-background-inverted);
   color: var(--navds-semantic-color-text-inverted);
   border-radius: var(--navds-border-radius-small);

package/card.css

@@ -1,55 +0,0 @@
-:root {
-  --navds-card-micro-color-text: var(--navds-semantic-color-text);
-  --navds-card-micro-color-background: var(--navds-global-color-orange-200);
-  --navds-card-micro-color-border: transparent;
-  --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
-  --navds-card-micro-color-background-hover: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-card-micro-color-border-hover: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
-  --navds-card-micro-color-background-focus: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
-  --navds-card-micro-color-background-active: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-card-micro-color-text-active: var(
-    --navds-semantic-color-text-inverted
-  );
-}
-
-/*
-  MicroCard
-*/
-
-.navds-card__micro {
-  border-radius: var(--navds-border-radius-full);
-  color: var(--navds-card-micro-color-text);
-  display: inline-flex;
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
-  text-decoration: none;
-  background-color: var(--navds-card-micro-color-background);
-  border: 1px solid var(--navds-card-micro-color-border);
-}
-
-.navds-card__micro:hover {
-  background-color: var(--navds-card-micro-color-background-hover);
-  border-color: var(--navds-card-micro-color-border-hover);
-  color: var(--navds-card-micro-color-text-hover);
-}
-
-.navds-card__micro:focus {
-  background-color: var(--navds-card-micro-color-background-focus);
-  color: var(--navds-card-micro-color-text-focus);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
-}
-
-.navds-card__micro:active {
-  background-color: var(--navds-card-micro-color-background-active);
-  color: var(--navds-card-micro-color-text-active);
-}

package/menu.css

@@ -1,102 +0,0 @@
-:root {
-  --navds-menu-color-text: var(--navds-semantic-color-link);
-  --navds-menu-color-text-hover: var(--navds-semantic-color-text);
-  --navds-menu-color-text-focus: var(--navds-semantic-color-text);
-  --navds-menu-color-background-hover: var(--navds-global-color-blue-50);
-  --navds-menu-color-text-active: var(--navds-semantic-color-text);
-  --navds-menu-outline-focus: var(--navds-semantic-color-focus);
-}
-
-.navds-menu__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  padding: 0 0.5rem;
-}
-
-.navds-menu__list--inner {
-  padding: 0;
-}
-
-.navds-menu-collapse__button {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  font: inherit;
-  text-align: inherit;
-  margin: 0;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-menu-color-text);
-}
-
-.navds-menu-item,
-.navds-menu-collapse__button {
-  font-weight: var(--navds-font-weight-bold);
-  display: flex;
-  padding: var(--navds-spacing-3) var(--navds-spacing-2);
-  text-decoration: none;
-}
-
-.navds-menu-item:focus,
-.navds-menu-collapse__button:focus {
-  outline: 3px solid var(--navds-menu-outline-focus);
-  outline-offset: -3px;
-  color: var(--navds-menu-color-text-focus);
-}
-
-.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
-  color: var(--navds-menu-color-focus);
-}
-
-.navds-menu-item:hover,
-.navds-menu-collapse__button:hover {
-  background-color: var(--navds-menu-color-background-hover);
-  color: var(--navds-menu-color-text-hover);
-}
-
-.navds-menu-item--active {
-  box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
-  color: var(--navds-menu-color-text-active);
-  text-decoration: none;
-}
-
-/* Collapse icon */
-.navds-menu-collapse__expand-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-  margin-left: var(--navds-spacing-2);
-}
-
-.navds-menu-collapse__expand-icon--filled,
-.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
-  display: none;
-}
-
-.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
-  display: block;
-}
-
-.navds-menu-collapse--open
-  > .navds-menu-collapse__button
-  > .navds-menu-collapse__expand-icon {
-  transform: rotate(180deg);
-}
-
-/* Nesting levels */
-.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
-.navds-menu__list[data-depth="1"] .navds-menu-item {
-  padding-left: var(--navds-spacing-6);
-}
-
-.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
-.navds-menu__list[data-depth="2"] .navds-menu-item {
-  padding-left: var(--navds-spacing-10);
-}
-
-.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
-.navds-menu__list[data-depth="3"] .navds-menu-item {
-  padding-left: var(--navds-spacing-14);
-}

package/page-header.css

@@ -1,76 +0,0 @@
-:root {
-  --navds-page-header-color-background: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-page-header-color-shadow-situation: var(
-    --navds-global-color-orange-400
-  );
-  --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
-  --navds-page-header-color-shadow-guide: var(
-    --navds-global-color-deepblue-400
-  );
-}
-
-.navds-page-header {
-  display: flex;
-  justify-content: center;
-  background-color: var(--navds-page-header-color-background);
-  padding: 1.5rem 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: left;
-}
-
-.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: left;
-}
-
-.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-heading-xlarge);
-  }
-}

package/speech-bubble.css

@@ -1,85 +0,0 @@
-:root {
-  --navds-speechbubble-color-background: var(
-    --navds-semantic-color-component-background-alternate
-  );
-  --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
-  --navds-speechbubble-color-illustration-background: var(
-    --navds-semantic-color-canvas-background
-  );
-  --navds-speechbubble-color-detail-text: var(
-    --navds-semantic-color-text-muted
-  );
-}
-
-.navds-speechbubble {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--navds-spacing-4);
-}
-
-.navds-speechbubble--right {
-  flex-direction: row-reverse;
-}
-
-.navds-speechbubble__bubble-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-3);
-}
-
-.navds-speechbubble--right .navds-speechbubble__bubble-list {
-  align-items: flex-end;
-}
-
-.navds-speechbubble__illustration {
-  align-items: center;
-  background: var(--navds-speechbubble-color-illustration-background);
-  color: var(--navds-speechbubble-color-illustration);
-  border-radius: var(--navds-border-radius-full);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  overflow: hidden;
-  height: 3rem;
-  width: 3rem;
-}
-
-.navds-speechbubble__illustration svg {
-  align-self: center;
-  height: 100%;
-  width: 100%;
-}
-
-.navds-speechbubble__bubble {
-  padding: 1rem;
-  box-shadow: var(--navds-shadow-small);
-  width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--navds-speechbubble-color-background);
-  border-radius: var(--navds-border-radius-xlarge);
-  border-bottom-left-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-speechbubble__bubble:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-speechbubble--right .navds-speechbubble__bubble {
-  border-radius: var(--navds-border-radius-xlarge);
-  border-bottom-right-radius: 2px;
-}
-
-.navds-speechbubble__top-text {
-  color: var(--navds-speechbubble-color-detail-text);
-}
-
-.navds-speechbubble--right .navds-speechbubble__top-text {
-  align-self: flex-end;
-}