@oslokommune/punkt-css 5.0.10 → 5.1.0

package/dist/css/pkt.css

@@ -227,42 +227,42 @@ textarea {
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 400;
-  src: url("../fonts/OsloSans-Regular.woff2") format("woff2"), url("../fonts/OsloSans-Regular.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Regular.woff2") format("woff2"), url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Regular.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: italic;
   font-weight: 400;
-  src: url("../fonts/OsloSans-RegularItalic.woff2") format("woff2"), url("../fonts/OsloSans-RegularItalic.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/dist/fonts/OsloSans-RegularItalic.woff2") format("woff2"), url("@oslokommune/punkt-assets/dist/fonts/OsloSans-RegularItalic.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 300;
-  src: url("../fonts/OsloSans-Light.woff2") format("woff2"), url("../fonts/OsloSans-Light.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Light.woff2") format("woff2"), url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Light.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 500;
-  src: url("../fonts/OsloSans-Medium.woff2") format("woff2"), url("../fonts/OsloSans-Medium.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Medium.woff2") format("woff2"), url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Medium.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Sans;
   font-style: normal;
   font-weight: 700;
-  src: url("../fonts/OsloSans-Bold.woff2") format("woff2"), url("../fonts/OsloSans-Bold.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Bold.woff2") format("woff2"), url("@oslokommune/punkt-assets/dist/fonts/OsloSans-Bold.woff") format("woff");
 }
 @font-face {
   font-display: swap;
   font-family: Oslo Icons;
   font-style: normal;
   font-weight: 400;
-  src: url("../fonts/OsloIcons.woff2") format("woff2"), url("../fonts/OsloIcons.woff") format("woff");
+  src: url("@oslokommune/punkt-assets/dist/fonts/OsloIcons.woff2") format("woff2"), url("@oslokommune/punkt-assets/dist/fonts/OsloIcons.woff") format("woff");
 }
 /* 
  * Colors
@@ -10708,7 +10708,7 @@ a:active, a.pkt-link--active {
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/5.0/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/5.1/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -11643,7 +11643,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: 6px solid var(--choice-checked-rb-bc);
 }
 .pkt-form-check-input:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/5.0/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/5.1/icons/check-medium.svg);
   position: relative;
   background-color: blue;
 }
@@ -12056,7 +12056,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * så dette må refaktoreres ved anledning.
  */
 .pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/5.0/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/5.1/icons/chevron-thin-down.svg);
   display: block;
   background-color: var(--color-white);
   background-image: var(--svg);
@@ -12256,56 +12256,128 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 /* 
- * Badge element
+ * Tag element
  */
-.pkt-badge {
-  display: inline-flex;
-  height: 1.5em;
-  margin-left: 0.4em;
-  padding: 0.25em 0.4em;
-  color: black;
+.pkt-tag {
+  font-size: 0.875rem;
   font-weight: 500;
-  font-size: 0.75em;
-  line-height: 1em;
-  background: #b3f5ff;
-  border-radius: 1px;
+  letter-spacing: -0.2px;
+  line-height: 1.5em;
+  background: var(--color-blue-light);
+  padding: 0.25rem 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  height: 1.875rem;
+  column-gap: 0;
 }
-
-.pkt-btn > .pkt-badge.pkt-badge--strong,
-.pkt-badge--strong {
-  color: #b3f5ff;
-  background: #2a2859;
+.pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
+  background-color: var(--color-blue);
+  color: var(--color-active);
+  text-decoration: underline;
+  border-color: transparent;
 }
-
-.pkt-btn > .pkt-badge.pkt-badge--info,
-.pkt-badge--info {
-  background: #f9c66b;
+.pkt-tag.pkt-btn:focus, .pkt-tag.pkt-tag--focus {
+  background-color: var(--color-blue);
+  border-color: var(--color-active);
+  outline: 4px solid var(--color-focus);
+  color: var(--color-active);
 }
-
-.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-tag.pkt-btn:active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
+  background-color: var(--color-blue);
+  color: var(--color-active);
 }
-
-.pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
-  color: inherit;
-  background: transparent;
-  border: 1px solid #2a2859;
-  border-radius: 4px;
+.pkt-tag__icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 0.5rem;
 }
-
-.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-tag__close-btn {
+  width: 16px;
+  height: 16px;
+  margin-left: 0.5rem;
+}
+.pkt-tag--green {
+  background: var(--color-green-light);
+}
+.pkt-tag--green.pkt-btn:hover, .pkt-tag--green.pkt-tag--hover {
+  background-color: var(--color-green);
+}
+.pkt-tag--green.pkt-btn:focus, .pkt-tag--green.pkt-tag--focus {
+  background-color: var(--color-green);
+}
+.pkt-tag--green.pkt-btn:active, .pkt-tag--green.pkt-tag--active {
+  background-color: var(--color-green);
+}
+.pkt-tag--yellow {
+  background: var(--color-yellow-50);
+}
+.pkt-tag--yellow.pkt-btn:hover, .pkt-tag--yellow.pkt-tag--hover {
+  background-color: var(--color-yellow);
+}
+.pkt-tag--yellow.pkt-btn:focus, .pkt-tag--yellow.pkt-tag--focus {
+  background-color: var(--color-yellow);
+}
+.pkt-tag--yellow.pkt-btn:active, .pkt-tag--yellow.pkt-tag--active {
+  background-color: var(--color-yellow);
+}
+.pkt-tag--red {
+  background: var(--color-red-light);
+}
+.pkt-tag--red.pkt-btn:hover, .pkt-tag--red.pkt-tag--hover {
+  background-color: var(--color-red);
+  color: var(--color-blue-dark);
+}
+.pkt-tag--red.pkt-btn:focus, .pkt-tag--red.pkt-tag--focus {
+  background-color: var(--color-red);
+  color: var(--color-blue-dark);
+}
+.pkt-tag--red.pkt-btn:active, .pkt-tag--red.pkt-tag--active {
+  background-color: var(--color-red);
+  color: var(--color-blue-dark);
+}
+.pkt-tag--beige {
+  background: var(--color-beige-light);
+}
+.pkt-tag--beige.pkt-btn:hover, .pkt-tag--beige.pkt-tag--hover {
+  background-color: var(--color-beige-dark);
+}
+.pkt-tag--beige.pkt-btn:focus, .pkt-tag--beige.pkt-tag--focus {
+  background-color: var(--color-beige-dark);
+}
+.pkt-tag--beige.pkt-btn:active, .pkt-tag--beige.pkt-tag--active {
+  background-color: var(--color-beige-dark);
+}
+.pkt-tag--grey {
+  background: var(--color-gray);
+}
+.pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
+  background-color: var(--color-grayscale-20);
+}
+.pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
+  background-color: var(--color-grayscale-20);
+}
+.pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
+  background-color: var(--color-grayscale-20);
+}
+.pkt-tag--small {
+  padding: 0.25rem;
+  height: 1.375rem;
+}
+.pkt-tag--medium {
+  padding: 0.25rem 0.5rem;
+  height: 1.875rem;
+}
+.pkt-tag--large {
+  font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.5em;
+  padding: 0.25rem 0.5rem;
+  height: 2.25rem;
 }
 
-.pkt-btn--small > .pkt-badge {
-  padding-top: 0.28em;
-  transform: translateY(-0.1em);
+:root [data-mode=dark] .pkt-tag {
+  color: var(--color-blue-dark);
 }
 
 /* 
@@ -12349,6 +12421,59 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   flex-grow: 1;
 }
 
+/* 
+ * Badge element
+ */
+.pkt-badge {
+  display: inline-flex;
+  height: 1.5em;
+  margin-left: 0.4em;
+  padding: 0.25em 0.4em;
+  color: black;
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1em;
+  background: #b3f5ff;
+  border-radius: 1px;
+}
+
+.pkt-btn > .pkt-badge.pkt-badge--strong,
+.pkt-badge--strong {
+  color: #b3f5ff;
+  background: #2a2859;
+}
+
+.pkt-btn > .pkt-badge.pkt-badge--info,
+.pkt-badge--info {
+  background: #f9c66b;
+}
+
+.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 #2a2859;
+  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-top: 0.28em;
+  transform: translateY(-0.1em);
+}
+
 /* 
  * Breadcrumbs component
  */