@oslokommune/punkt-css 12.37.2 → 12.38.2

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/12.37/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/12.38/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_card.scss

@@ -8,70 +8,246 @@
 
 pkt-card {
   display: block;
+  width: 100%;
 }
 
 .pkt-card {
-  padding: map.get(variables.$spacing, 'size-24');
+  position: relative;
   display: flex;
-  gap: 2rem;
+  align-items: center;
+  width: 100%;
+  min-width: 12.5rem;
+  padding: map.get(variables.$spacing, 'size-32');
 
-  &__wrapper {
+  .pkt-card__wrapper {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    flex: 1 1 53%;
+    width: 100%;
+    overflow: hidden;
   }
 
-  &__tags {
+  // PADDING AND MARGINS
+
+  &.pkt-card--padding-none {
+    padding: 0;
+    background-color: transparent;
+  }
+
+  // HEADINGS, TEXT, SUBTEXT
+
+  .pkt-card__heading {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      padding: 0;
+      margin: 0;
+      font-size: map.get(variables.$font-size, 'size-30');
+      font-weight: map.get(variables.$font-weight, 'regular');
+      margin-bottom: map.get(variables.$spacing, 'size-8');
+      hyphens: auto;
+      overflow-wrap: break-word;
+    }
+  }
+
+  .pkt-card__link {
+    text-decoration-thickness: 0.12rem;
+    text-underline-offset: 0.15em;
+  }
+
+  p.pkt-card__subheading {
+    padding: 0;
+    margin: 0;
+    line-height: unset;
+    margin-bottom: map.get(variables.$spacing, 'size-16');
+    font-size: map.get(variables.$font-size, 'size-20');
+    font-weight: map.get(variables.$font-weight, 'light');
+    hyphens: auto;
+    overflow-wrap: break-word;
+  }
+
+  .pkt-card__creditline {
+    margin-top: map.get(variables.$spacing, 'size-16');
+    margin-bottom: 0;
+    line-height: unset;
+    gap: map.get(variables.$spacing, 'size-8');
+  }
+
+  .pkt-card__creditline-author {
+    font-weight: map.get(variables.$font-weight, 'medium');
+  }
+
+  .pkt-card__tags {
     display: flex;
-    gap: 1rem;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: map.get(variables.$spacing, 'size-8');
+    margin-top: 0;
+    &-bottom {
+      margin-top: map.get(variables.$spacing, 'size-8');
+      margin-bottom: 0;
+    }
   }
 
   // DIRECTION
-  &--landscape {
+
+  &.pkt-card--landscape {
     flex-direction: row;
-    max-width: 950px;
 
-    .pkt-card__image {
-      min-width: 320px;
-      overflow: hidden;
-      img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        object-position: center;
-      }
+    @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
+      flex-direction: column;
     }
   }
 
-  &--portrait {
+  &.pkt-card--portrait {
     flex-direction: column;
-    max-width: 500px;
+    min-width: 12.5rem;
+  }
+
+  // IMAGE
+
+  .pkt-card__image {
+    aspect-ratio: 1;
+    flex: 1 1 47%;
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
 
+    &.pkt-card__image-round {
+      border-radius: 50%;
+      align-self: unset;
+      max-height: 400px;
+      max-width: 400px;
+    }
+  }
+
+  //landscape image styles
+  &.pkt-card--landscape {
     .pkt-card__image {
+      max-width: 400px;
+      margin-right: 2rem;
+      &-square {
+        align-self: stretch;
+      }
+
+      @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
+        margin-right: 0;
+        margin-bottom: 2rem;
+        max-height: 400px;
+        &-square {
+          max-width: unset;
+        }
+      }
+    }
+  }
+
+  // portait image styles
+  &.pkt-card--portrait {
+    .pkt-card__image {
+      margin-bottom: 2rem;
       max-height: 400px;
-      overflow: hidden;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
+    }
+  }
+
+  // Padding none variants
+  &.pkt-card--padding-none {
+    &.pkt-card--portrait {
+      .pkt-card__image-square {
+        aspect-ratio: 19 / 10;
+      }
+    }
+
+    &.pkt-card--landscape {
+      .pkt-card__image-square {
+        @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
+          aspect-ratio: 19 / 10;
+        }
       }
     }
   }
 
+  // LINK
+
+  .pkt-card__wrapper .pkt-card__link::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    box-shadow: 0px 0px 0px 0px transparent;
+    outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
+    outline-offset: -2px;
+    outline-color: transparent;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .pkt-card__link-heading {
+    transition:
+      color 0.2s ease-in-out,
+      text-decoration-color 0.2s ease-in-out;
+  }
+
+  // HOVER STATE
+
+  &:hover,
+  &:focus-visible,
+  &:focus-within {
+    &.pkt-card--border-on-hover .pkt-card__link::before {
+      cursor: pointer;
+      outline-color: var(--pkt-color-brand-warm-blue-1000);
+    }
+    .pkt-card__link-heading {
+      color: var(--pkt-color-brand-warm-blue-1000);
+      text-decoration-color: var(--pkt-color-brand-warm-blue-1000);
+    }
+  }
+
+  // FOCUS STATES
+
+  .pkt-card__link:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .pkt-card__link-heading:focus-within {
+    color: var(--pkt-color-brand-warm-blue-1000);
+    text-decoration-color: var(--pkt-color-brand-warm-blue-1000);
+  }
+
+  .pkt-card__wrapper .pkt-card__link:focus-visible::before {
+    box-shadow: 0px 0px 0px 4px var(--pkt-color-brand-purple-1000);
+  }
+
   // SKINS
 
-  &--outlined {
-    border: 3px solid var(--pkt-color-grays-gray-100);
+  &--outlined,
+  &--outlined-beige {
     background-color: var(--pkt-color-background-default);
+    outline-offset: -4px;
+  }
+
+  &--outlined {
+    outline: 4px solid var(--pkt-color-grays-gray-100);
+  }
+
+  &--outlined-beige {
+    outline: 4px solid var(--pkt-color-brand-light-beige-1000);
   }
 
   &--gray {
-    background-color: var(--pkt-color-background-subtle);
+    background-color: var(--pkt-color-brand-neutrals-100);
   }
 
   &--blue {
-    background-color: var(--pkt-color-brand-blue-300);
+    background-color: var(--pkt-color-brand-blue-200);
   }
 
   &--green {
@@ -82,15 +258,8 @@ pkt-card {
     background-color: var(--pkt-color-brand-light-beige-1000);
   }
 
-  // Removes auto paddings and margins that comes with these elements so that we can control
-  // the gaps  between each elements ourseles
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  p {
-    padding: 0;
-    margin: 0;
+  &--padding-none {
+    background-color: transparent;
+    outline: none;
   }
 }

package/dist/scss/elements/_button.scss

@@ -357,6 +357,7 @@ $-skins: (
   column-gap: 0.5rem;
   -webkit-appearance: none;
   appearance: none;
+  width: fit-content;
 
   // button sizes & variants
 
@@ -419,8 +420,8 @@ $-skins: (
     div.pkt-btn:not([data-disabled]):active,
     &:enabled:active,
     &:active:not(:disabled):not([disabled]):not([data-disabled]),
-    &.pkt-btn--active,
-    &.pkt-btn--active:hover {
+    &.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]),
+    &.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]):hover {
     background-color: var(--pkt-color-button-background-active);
     border-color: var(--pkt-color-button-border-active);
     color: var(--pkt-color-button-text-active);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.37.2",
+  "version": "12.38.2",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "d6608a66551554a1f07952e1c1f7ffe414190a54"
+  "gitHead": "8fbbad35ae8acad17550674f96d23f8b77044c8d"
 }