@oslokommune/punkt-css 18.0.0 → 18.3.0

package/dist/css/pkt-components.css

@@ -473,48 +473,6 @@ pkt-alert {
   line-height: unset;
 }
 
-/* 
- * Badge element
- * DEPRECATED - use tag instead 
- */
-.pkt-badge {
-  display: inline-flex;
-  height: 1.5em;
-  margin-inline-start: 0.4em;
-  padding: 0.25em 0.4em;
-  color: black;
-  font-weight: 500;
-  font-size: 0.75em;
-  line-height: 1em;
-  border-radius: 1px;
-}
-
-.pkt-badge.pkt-badge--small,
-.pkt-h1 > .pkt-badge,
-.pkt-h2 > .pkt-badge,
-.pkt-h3 > .pkt-badge {
-  font-size: 0.5em;
-  transform: translateY(-0.25em);
-}
-
-.pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
-  color: inherit;
-  background: transparent;
-  border: 1px solid;
-  border-radius: 4px;
-}
-
-.pkt-btn--pri:not(.pkt-btn--neg) > .pkt-badge,
-.pkt-btn--neg.pkt-btn--ter > .pkt-badge,
-.pkt-btn--neg.pkt-btn--ghost > .pkt-badge {
-  border-color: white;
-}
-
-.pkt-btn--small > .pkt-badge {
-  padding-block-start: 0.28em;
-  transform: translateY(-0.1em);
-}
-
 .pkt-bodytext--large {
   letter-spacing: -0.2px;
   font-weight: 300;
@@ -808,7 +766,7 @@ pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days {
 pkt-calendar .pkt-cal-other,
 pkt-calendar .pkt-cal-days [data-disabled] {
   cursor: not-allowed;
-  color: var(--pkt-color-grays-gray-200);
+  color: var(--pkt-color-brand-neutrals-300);
   background: transparent;
   border: none;
 }
@@ -865,7 +823,7 @@ pkt-calendar .pkt-cal-range-hover .pkt-btn {
 }
 .pkt-calendar .pkt-cal-excluded,
 pkt-calendar .pkt-cal-excluded {
-  background-color: var(--pkt-color-brand-neutrals-100);
+  background-color: var(--pkt-color-brand-neutrals-50);
 }
 .pkt-calendar .pkt-cal-excluded :before,
 .pkt-calendar .pkt-cal-excluded :after,
@@ -1047,7 +1005,7 @@ pkt-card {
   background-color: transparent;
 }
 .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray {
-  background-color: var(--pkt-color-brand-neutrals-100);
+  background-color: var(--pkt-color-brand-neutrals-50);
 }
 .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue {
   background-color: var(--pkt-color-brand-blue-200);
@@ -1063,13 +1021,13 @@ pkt-card {
   outline-offset: -2px;
 }
 .pkt-card--outlined {
-  outline: 2px solid var(--pkt-color-grays-gray-100);
+  outline: 2px solid var(--pkt-color-brand-neutrals-200);
 }
 .pkt-card--outlined-beige {
   outline: 2px solid var(--pkt-color-brand-light-beige-1000);
 }
 .pkt-card--gray {
-  background-color: var(--pkt-color-brand-neutrals-100);
+  background-color: var(--pkt-color-brand-neutrals-50);
 }
 .pkt-card--blue {
   background-color: var(--pkt-color-brand-blue-200);
@@ -1597,7 +1555,7 @@ pkt-fileupload {
   width: 100%;
 }
 .pkt-fileupload--error .pkt-fileupload__drop-zone {
-  border-color: var(--pkt-color-brand-red-700);
+  border-color: var(--pkt-color-input-border-error, #ff8274);
 }
 .pkt-fileupload--error .pkt-alert--error.pkt-fileupload__error-alert {
   margin-block-end: 1rem;
@@ -1786,7 +1744,7 @@ pkt-fileupload {
   grid-row: 1;
   align-self: center;
   justify-self: center;
-  color: var(--pkt-color-text-subtle);
+  color: var(--pkt-color-text-placeholder, #666666);
 }
 .pkt-fileupload__queue-display__item__title {
   letter-spacing: -0.2px;
@@ -1953,7 +1911,7 @@ pkt-fileupload {
   line-height: 1.25rem;
   display: block;
   margin-block-start: 0.25rem;
-  color: var(--pkt-color-text-subtle);
+  color: var(--pkt-color-text-placeholder, #666666);
 }
 .pkt-fileupload__queue-display__item__comment__actions {
   display: flex;
@@ -1968,7 +1926,7 @@ pkt-fileupload {
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--pkt-color-text-subtle);
+  color: var(--pkt-color-text-placeholder, #666666);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2089,7 +2047,7 @@ pkt-fileupload {
   line-height: 1.25rem;
   grid-column: 2;
   grid-row: 2;
-  color: var(--pkt-color-text-default);
+  color: var(--pkt-color-text-body-default, #2a2859);
 }
 .pkt-fileupload__queue-display__item--in-progress .pkt-progressbar__bar-wrapper, .pkt-fileupload__queue-display__item--error .pkt-progressbar__bar-wrapper {
   height: 0.25rem;
@@ -2259,7 +2217,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__container {
 .pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__content,
 pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__content {
   padding: 0 1rem 1rem;
-  background: var(--pkt-color-surface-default);
+  background: var(--pkt-color-background-default, #ffffff);
   background-image: none;
   box-shadow: none;
   min-height: 0;
@@ -2293,7 +2251,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 
 .pkt-fileupload__image-preview {
   position: relative;
-  background-color: var(--pkt-color-surface-default);
+  background-color: var(--pkt-color-background-default, #ffffff);
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: minmax(0, 1fr) auto;
@@ -2414,7 +2372,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 }
 .pkt-footer__band--global {
   --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
-  --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
+  --pkt-footer-fg: var(--pkt-color-text-body-light, #ffffff);
   --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
 }
 .pkt-footer__band a {
@@ -2890,7 +2848,7 @@ a.pkt-footer-simple__link:hover {
   margin: 0;
 }
 .pkt-user-menu__label {
-  color: var(--pkt-color-grays-gray-600);
+  color: var(--pkt-color-brand-neutrals-700);
   letter-spacing: -0.2px;
   font-weight: 500;
   font-size: 0.875rem;
@@ -4826,7 +4784,7 @@ pkt-input-wrapper[inline] {
 }
 
 [data-mode=dark] .pkt-inputwrapper {
-  color: white;
+  color: var(--pkt-color-text-body-light, #ffffff);
 }
 
 /*
@@ -5051,7 +5009,7 @@ pkt-listbox {
 }
 .pkt-listbox .pkt-listbox__option[data-disabled] {
   cursor: not-allowed;
-  color: var(--pkt-color-grays-gray-500);
+  color: var(--pkt-color-brand-neutrals-600);
 }
 .pkt-listbox .pkt-listbox__option {
   margin-block-end: 0.125rem;
@@ -5067,7 +5025,7 @@ pkt-listbox {
 }
 .pkt-listbox .pkt-listbox__empty {
   padding: 0.75rem;
-  color: var(--pkt-color-text-body-muted);
+  color: var(--pkt-color-text-placeholder, #666666);
   list-style: none;
 }
 .pkt-listbox .pkt-listbox__banners {
@@ -5218,7 +5176,7 @@ pkt-listbox {
   width: 5em;
   height: 6.5em;
   left: 0em;
-  background: repeating-linear-gradient(#ff8274, #ff8274 1em, #f9c66b 1em, #f9c66b 2em);
+  background: repeating-linear-gradient(var(--pkt-color-surface-strong-red, #ff8274), var(--pkt-color-surface-strong-red, #ff8274) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 2em);
   border-radius: 50% 50% 50% 50%/55% 55% 45% 45%;
   transform: translate3d(0, 0, 0);
   animation-name: eggroll;
@@ -5229,15 +5187,15 @@ pkt-listbox {
   opacity: 0;
 }
 .pkt-loader .egg.two {
-  background: repeating-linear-gradient(#6fe9ff, #6fe9ff 1em, #ff8274 1em, #ff8274 2em);
+  background: repeating-linear-gradient(var(--pkt-color-surface-strong-blue, #6fe9ff), var(--pkt-color-surface-strong-blue, #6fe9ff) 1em, var(--pkt-color-surface-strong-red, #ff8274) 1em, var(--pkt-color-surface-strong-red, #ff8274) 2em);
   animation-delay: 0.5s;
 }
 .pkt-loader .egg.three {
-  background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #f9c66b 1em, #f9c66b 2em);
+  background: repeating-linear-gradient(var(--pkt-color-surface-strong-green, #43f8b6), var(--pkt-color-surface-strong-green, #43f8b6) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 2em);
   animation-delay: 1s;
 }
 .pkt-loader .egg.four {
-  background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #ff8274 1em, #ff8274 2em);
+  background: repeating-linear-gradient(var(--pkt-color-surface-strong-green, #43f8b6), var(--pkt-color-surface-strong-green, #43f8b6) 1em, var(--pkt-color-surface-strong-red, #ff8274) 1em, var(--pkt-color-surface-strong-red, #ff8274) 2em);
   animation-delay: 1.5s;
 }
 
@@ -5480,7 +5438,7 @@ pkt-listbox {
   padding-block-start: 0;
   position: relative;
   color: var(--pkt-color-text-body-default);
-  background: linear-gradient(var(--pkt-color-white) 30%, transparent) top, linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;
+  background: linear-gradient(var(--pkt-color-background-card, #ffffff) 30%, transparent) top, linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
   background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
@@ -5699,7 +5657,7 @@ pkt-messagebox {
   text-align: center;
 }
 .pkt-progressbar__bar-wrapper {
-  background-color: var(--pkt-color-grays-gray-100);
+  background-color: var(--pkt-color-brand-neutrals-200);
   height: 8px;
   overflow: hidden;
 }
@@ -6083,18 +6041,18 @@ pkt-messagebox {
 }
 
 .pkt-step--incomplete .pkt-step__line {
-  background-color: var(--pkt-color-grays-gray-200);
+  background-color: var(--pkt-color-brand-neutrals-300);
 }
 .pkt-step--incomplete .pkt-step__title,
 .pkt-step--incomplete .pkt-step__content {
-  color: var(--pkt-color-grays-gray-600);
+  color: var(--pkt-color-brand-neutrals-700);
 }
 
 .pkt-step--current + .pkt-step--incomplete .pkt-step__line--1 {
   background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-step--current + .pkt-step--incomplete .pkt-step__line--2 {
-  background-color: var(--pkt-color-grays-gray-200);
+  background-color: var(--pkt-color-brand-neutrals-300);
 }
 
 .pkt-step:last-of-type .pkt-step__line--3,
@@ -6107,11 +6065,11 @@ pkt-messagebox {
 }
 .pkt-step--current .pkt-step__line--2,
 .pkt-step--current .pkt-step__line--3 {
-  background-color: var(--pkt-color-grays-gray-200);
+  background-color: var(--pkt-color-brand-neutrals-300);
 }
 
 .pkt-step--current + .pkt-step--incomplete .pkt-step__line--1 {
-  background-color: var(--pkt-color-grays-gray-200);
+  background-color: var(--pkt-color-brand-neutrals-300);
 }
 
 .pkt-step--hideContent:not(.pkt-step--current) .pkt-step__content {
@@ -6264,20 +6222,6 @@ pkt-tab-item {
 /*
  * Tag element
  */
-.pkt-tag {
-  --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
-}
-
-[data-mode=dark] .pkt-tag {
-  --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
-}
-
 pkt-tag {
   display: inline-block;
   vertical-align: middle;
@@ -6503,12 +6447,12 @@ button.pkt-tag {
 }
 .pkt-tag.pkt-tag--blue-dark {
   background: var(--pkt-color-brand-dark-blue-1000);
-  color: var(--pkt-color-brand-neutrals-200);
-  --fg-color: var(--pkt-color-brand-neutrals-200);
+  color: var(--pkt-color-brand-neutrals-100);
+  --fg-color: var(--pkt-color-brand-neutrals-100);
 }
 .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark:is(button):hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark:is(button):focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
   background-color: var(--pkt-color-brand-warm-blue-1000) !important;
-  color: var(--pkt-color-brand-neutrals-200) !important;
+  color: var(--pkt-color-brand-neutrals-100) !important;
 }
 .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
 .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark:is(button):hover,
@@ -6516,7 +6460,7 @@ button.pkt-tag {
 .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark:is(button):focus,
 .pkt-tag.pkt-tag--blue-dark:is(button):focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
 .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
-  --fg-color: var(--pkt-color-brand-neutrals-200) !important;
+  --fg-color: var(--pkt-color-brand-neutrals-100) !important;
 }
 .pkt-tag.pkt-tag--small {
   padding: 0 0.25rem;