@oslokommune/punkt-css 11.10.0 → 11.11.0

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

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

package/dist/scss/components/_accordion.scss

@@ -0,0 +1,169 @@
+/*
+ * Accordion/Expandable component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+
+.pkt-accordion {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0fr;
+  row-gap: map.get(variables.$spacing, 'size-8');
+  transition: grid-template-rows 500ms;
+
+  font-size: map.get(variables.$font-size, 'size-24');
+  font-weight: map.get(variables.$font-weight, 'medium');
+  letter-spacing: map.get(variables.$letter-spacing, 'tight');
+  line-height: map.get(variables.$line-height, 'lh-36');
+
+  &:focus-visible {
+    border: 0.25rem solid var(--pkt-color-border-states-hover);
+  }
+}
+
+// Skin variations
+.pkt-accordion--borderless {
+  .pkt-accordion-item {
+    border: none;
+
+    &[open] {
+      .pkt-accordion-item__title {
+        box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
+      }
+    }
+  }
+}
+
+.pkt-accordion--outlined {
+  .pkt-accordion-item {
+    border: 3px solid var(--pkt-color-border-gray);
+  }
+}
+
+.pkt-accordion--beige {
+  row-gap: 0;
+
+  .pkt-accordion-item {
+    &:nth-child(odd) {
+      background-color: var(--pkt-color-surface-default-light-beige);
+    }
+  }
+}
+
+.pkt-accordion--blue {
+  row-gap: 0;
+
+  .pkt-accordion-item {
+    &:nth-child(odd) {
+      background-color: var(--pkt-color-surface-default-light-blue);
+    }
+  }
+}
+
+// COMPACT
+
+.pkt-accordion--compact.pkt-accordion--borderless {
+  .pkt-accordion-item {
+    border: none;
+
+    &--open {
+      .pkt-accordion-item__title {
+        box-shadow: inset 0 0 0 0.125rem var(--pkt-color-border-states-active);
+      }
+    }
+  }
+}
+.pkt-accordion--compact > .pkt-accordion-item {
+  .pkt-accordion-item {
+    &__title {
+      padding: map.get(variables.$spacing, 'size-16');
+      font-size: map.get(variables.$font-size, 'size-16');
+      font-weight: map.get(variables.$font-weight, 'medium');
+      letter-spacing: map.get(variables.$letter-spacing, 'tight');
+      line-height: map.get(variables.$line-height, 'lh-24');
+    }
+
+    &__content {
+      padding: map.get(variables.$spacing, 'size-16');
+      font-size: map.get(variables.$font-size, 'size-16');
+      font-weight: map.get(variables.$font-weight, 'light');
+      letter-spacing: map.get(variables.$letter-spacing, 'tight');
+      line-height: map.get(variables.$line-height, 'lh-24');
+    }
+  }
+}
+
+// Accordion item
+.pkt-accordion-item {
+  color: var(--pkt-color-brand-dark-blue-1000);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  transition: transform 0.3s;
+  appearance: none;
+  text-align: left;
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  &__title {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    padding: map.get(variables.$spacing, 'size-24');
+
+    &:hover {
+      text-decoration: underline;
+
+      .pkt-accordion-item__icon {
+        transform: translateY(0.25rem);
+      }
+    }
+
+    &:focus-visible {
+      outline: 0.25rem solid var(--pkt-color-border-states-focus);
+    }
+  }
+
+  &__icon {
+    transition: transform 0.2s;
+  }
+
+  &__content {
+    border-top: none;
+    display: none;
+    font-size: map.get(variables.$font-size, 'size-18');
+    font-weight: map.get(variables.$font-weight, 'light');
+    letter-spacing: map.get(variables.$letter-spacing, 'tight');
+    line-height: map.get(variables.$line-height, 'lh-28');
+    padding: map.get(variables.$spacing, 'size-24');
+  }
+}
+
+// Accordion item when opened
+.pkt-accordion-item[open] {
+  .pkt-accordion-item__title {
+    border-bottom: none;
+    &:hover {
+      .pkt-accordion-item__icon {
+        transform: rotate(180deg) translateY(0.25rem);
+      }
+    }
+  }
+
+  .pkt-accordion-item__content {
+    display: block;
+  }
+
+  .pkt-accordion-item__icon {
+    transform: rotate(180deg) translateY(0);
+  }
+}
+
+.pkt-icon.pkt-accordion-item__icon > svg {
+  min-height: 2rem;
+  min-width: 2rem;
+}

package/dist/scss/components/_alert.scss

@@ -1,4 +1,4 @@
-/* 
+/*
  * Alert component
  */
 @use 'sass:map';
@@ -36,49 +36,6 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   --pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
 }
 
-// Påskemodus
-// Kode: PÅSKEFIGUR
-.#{$-module-name}--🐣 {
-  --pkt-color-alert-bc: var(--pkt-color-border-yellow);
-  --pkt-color-alert-bg: white;
-  --angle: 0deg;
-  border: $-border-thickness solid var(--pkt-color-alert-bc);
-  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
-  animation: 1s 🐣 linear infinite;
-  .#{$-module-name}__icon {
-    animation: 0.5s 🐰 linear infinite;
-    font-size: 2rem;
-  }
-  &.#{$-module-name}--compact .#{$-module-name}__icon {
-    font-size: 1.5rem;
-  }
-}
-
-@keyframes 🐣 {
-  to {
-    --angle: 360deg;
-  }
-}
-
-@keyframes 🐰 {
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(10deg);
-  }
-  50% {
-    transform: rotate(0eg);
-  }
-  75% {
-    transform: rotate(-10deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-// Slutt på påskemodus
-
 @property --angle {
   syntax: '<angle>';
   initial-value: 0deg;

package/dist/scss/components/_index.scss

@@ -1,3 +1,4 @@
+@forward 'accordion';
 @forward 'alert';
 @forward 'tag';
 @forward 'backlink';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "11.10.0",
+  "version": "11.11.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "fdad728821188991ca5ecafbc17313e7a7f2cbb7"
+  "gitHead": "91201c4a7cd0684df65f421b9868bd02c22a2ecf"
 }