@navikt/ds-css 7.13.0 → 7.14.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 7.14.1
+
+## 7.14.0
+
+### Minor Changes
+
+- DatePicker: Updated `date.css` to support `react-day-picker v9`. ([#3525](https://github.com/navikt/aksel/pull/3525))
+
+### Patch Changes
+
+- Darkside: Added 'arrow' back to Tooltip. ([#3589](https://github.com/navikt/aksel/pull/3589))
+
 ## 7.13.0
 
 ### Patch Changes

package/darkside/index.css

@@ -11,6 +11,7 @@
 @import "./baseline/print.darkside.css" layer(aksel.print);
 
 /* ------------------------------- Components ------------------------------- */
+@import "./theme.darkside.css" layer(aksel.components);
 @import "./typography.darkside.css" layer(aksel.components);
 @import "./button.darkside.css" layer(aksel.components);
 @import "./chips.darkside.css" layer(aksel.components);
@@ -53,7 +54,6 @@
 @import "./table.darkside.css" layer(aksel.components);
 @import "./tabs.darkside.css" layer(aksel.components);
 @import "./list.darkside.css" layer(aksel.components);
-@import "./theme.darkside.css" layer(aksel.components);
 
 /* --------------------------------- Layout --------------------------------- */
 @import "./primitives/index.css" layer(aksel.layout);

package/darkside/tooltip.darkside.css

@@ -1,7 +1,7 @@
 .navds-tooltip {
   z-index: 3000;
-  background-color: var(--ax-bg-raised);
-  color: var(--ax-text-neutral);
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
   border-radius: var(--ax-border-radius-medium);
   padding: 0 var(--ax-space-6);
   align-items: center;
@@ -10,8 +10,28 @@
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   animation-duration: 150ms;
   text-align: center;
-  border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
+  border: 1px solid transparent;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.navds-tooltip__arrow {
+  height: 0.5rem;
+  width: 0.5rem;
+  z-index: -1;
+  background-color: var(--ax-bg-neutral-strong);
+  position: absolute;
+  border-radius: 1px;
+  transform: rotate(45deg);
+
+  @media (forced-colors: active) {
+    & {
+      display: none;
+    }
+  }
 }
 
 .navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
@@ -96,7 +116,7 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--ax-border-radius-small);
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-neutral-moderate);
 
   @media (forced-colors: active) {
     & {

package/date.css

@@ -22,30 +22,13 @@
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
-
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -303,6 +286,13 @@
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }

package/dist/component/date.css

@@ -22,30 +22,13 @@
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
-
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -306,6 +289,13 @@
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }

package/dist/component/date.min.css

@@ -1 +1 @@
-.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:fit-content}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover,:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-radius:calc(var(--a-border-radius-medium) - 1px);border-end-start-radius:0;border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__field--readonly .navds-date__field-button{color:var(--a-gray-500);cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}.navds-date__modal.navds-date{padding:0}.navds-date__modal-body{align-items:flex-end;display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4)}.navds-date__modal-body>.navds-date{padding:0}.navds-date__popover:where(.navds-popover){border:none}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__modal-body{padding:var(--a-spacing-6)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}
+.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date__weeknumber-number{color:var(--a-text-subtle);font-size:.875rem}.navds-date__weeknumber:active .navds-date__weeknumber-number{color:var(--a-text-on-neutral)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:fit-content}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover,:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-radius:calc(var(--a-border-radius-medium) - 1px);border-end-start-radius:0;border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__field--readonly .navds-date__field-button{color:var(--a-gray-500);cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}span.rdp-weeknumber{display:grid;height:2rem;place-content:center;width:2rem}.navds-date__modal.navds-date{padding:0}.navds-date__modal-body{align-items:flex-end;display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4)}.navds-date__modal-body>.navds-date{padding:0}.navds-date__popover:where(.navds-popover){border:none}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__modal-body{padding:var(--a-spacing-6)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}

package/dist/components.css

@@ -5416,30 +5416,13 @@ button.navds-internalheader__title:active,
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
 }
 
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
-  color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -5700,6 +5683,13 @@ button.navds-internalheader__title:active,
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }