@oslokommune/punkt-css 7.2.0 → 8.0.4

package/dist/scss/base/_typography.scss

@@ -143,7 +143,7 @@ a,
 
   &--external::after {
     content: ' ';
-    --svg: url(https://punkt-cdn.oslo.kommune.no/7.2/icons/new-window-small.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/8.0/icons/new-window-small.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-size: 18px 18px;

package/dist/scss/components/_inputwrapper.scss

@@ -22,12 +22,22 @@
   }
 
   &__helptext {
+    width: min(100%, 31rem);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: map.get(variables.$spacing, 'size-4');
     @include typography.get-text('pkt-txt-14-light');
 
+    > * {
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
     &-expandable {
       display: inline-flex;
       text-align: left;
@@ -39,7 +49,6 @@
       }
 
       &-open {
-        width: 100%;
         display: block;
         border-left: 2px solid var(--color-blue-dark);
         padding: map.get(variables.$spacing, 'size-8')
@@ -75,7 +84,7 @@
 
   // Alert
   .pkt-alert {
-    width: 100%;
+    width: min(100%, 31rem);
     padding: 0.75rem 1rem 0.75rem calc(8px - 4px);
     margin: 0 0 0.5rem 0;
 
@@ -108,26 +117,26 @@
   }
 
   &--error {
-    .pkt-textinput__input,
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
+    .pkt-input,
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
       border-color: var(--color-red);
     }
 
-    .pkt-textinput__input:hover,
-    .pkt-textinput__container:hover .pkt-textinput__input,
-    .pkt-textinput__container:hover .pkt-textinput__input-prefix,
-    .pkt-textinput__container:hover .pkt-textinput__input-suffix,
-    .pkt-textinput__container:hover .pkt-textinput__input-icon {
+    .pkt-input:hover,
+    .pkt-input__container:hover .pkt-input,
+    .pkt-input__container:hover .pkt-input-prefix,
+    .pkt-input__container:hover .pkt-input-suffix,
+    .pkt-input__container:hover .pkt-input-icon {
       border-color: var(--color-red);
     }
 
-    .pkt-textinput__input:focus-within,
-    .pkt-textinput__container:focus-within .pkt-textinput__input,
-    .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
-    .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
-    .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
+    .pkt-input:focus-within,
+    .pkt-input__container:focus-within .pkt-input,
+    .pkt-input__container:focus-within .pkt-input-prefix,
+    .pkt-input__container:focus-within .pkt-input-suffix,
+    .pkt-input__container:focus-within .pkt-input-icon {
       border-color: var(--color-red);
     }
   }
@@ -136,45 +145,36 @@
     color: var(--color-disabled);
     cursor: inherit;
 
-    .pkt-textinput__input,
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
+    .pkt-input,
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
       border-color: var(--color-disabled);
       background-color: var(--color-disabled-light);
     }
 
-    .pkt-textinput__container:hover .pkt-textinput__input,
-    .pkt-textinput__container:hover .pkt-textinput__input-prefix,
-    .pkt-textinput__container:hover .pkt-textinput__input-suffix,
-    .pkt-textinput__container:hover .pkt-textinput__input-icon {
+    .pkt-input__container:hover .pkt-input,
+    .pkt-input__container:hover .pkt-input-prefix,
+    .pkt-input__container:hover .pkt-input-suffix,
+    .pkt-input__container:hover .pkt-input-icon {
       border-color: var(--color-disabled);
     }
 
-    .pkt-textinput__input:hover {
+    .pkt-input:hover {
       border-color: var(--color-disabled);
       box-shadow: none;
     }
 
-    .pkt-textinput__input:focus {
+    .pkt-input:focus {
       border-color: var(--color-disabled);
       box-shadow: none;
       outline: none;
     }
 
-    .pkt-textinput__container:active .pkt-textinput__input {
+    .pkt-input__container:active .pkt-input {
       border-right: none;
       box-shadow: none;
       outline: none;
     }
   }
-  // Dark mode
-  @at-root [data-mode='dark'] {
-    .pkt-textinput__input-prefix,
-    .pkt-textinput__input-suffix,
-    .pkt-textinput__input-icon {
-      background-color: var(--color-white);
-      color: var(--color-blue-dark);
-    }
-  }
 }

package/dist/scss/components/_textinput.scss

@@ -1,180 +1,13 @@
-/* textinput */
-@use 'sass:map';
-@use '../abstracts/variables';
-@use '../abstracts/functions';
-@use '../abstracts/mixins/typography';
+/* 
+ * Textinput component 
+ *
+ * Denne blir stilsatt av .pkt-input
+ * Ikke bruk klassen .pkt-textinput 
+*/
+@use '../elements/input';
 
 .pkt-textinput {
   &__input {
-    @include typography.get-text('pkt-txt-18-light');
-    display: flex;
-    align-items: center;
-    appearance: none; // Fix appearance on date inputs in Safari
-    background-color: var(--color-white);
-    border: 2px solid var(--color-blue-dark);
-    border-radius: 0;
-    color: var(--color-blue-dark);
-    margin: 0;
-    padding: 0.5rem 1rem;
-    width: 100%;
-
-    &:is(textarea) {
-      min-height: map.get(variables.$spacing, 'size-128');
-    }
-
-    // 1. Override Firefox's default opacity
-    &::placeholder {
-      color: var(--color-grayscale-50);
-      opacity: 1; // 1
-    }
-
-    // states
-    &:hover,
-    &.pkt-textinput__textinput--hover {
-      border-color: var(--color-hover);
-    }
-
-    &:focus-visible + .pkt-textinput-suffix,
-    &.pkt-textinput__textinput--focus {
-      box-shadow: 0 0 0 2px var(--color-active);
-      border-color: var(--color-active);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--color-active);
-      border-color: var(--color-active);
-    }
-
-    &:disabled,
-    &:disabled::placeholder,
-    &[readonly] {
-      opacity: 1;
-      background-color: var(--color-disabled-light);
-      border-color: var(--color-disabled);
-      cursor: inherit;
-    }
-
-    &:disabled:active {
-      border: 2px solid var(--color-disabled);
-    }
-
-    &-prefix,
-    &-suffix,
-    &-icon {
-      @include typography.get-text('pkt-txt-18-light');
-      display: flex;
-      align-items: center;
-      width: auto;
-      height: 3rem;
-      border: 2px solid var(--color-blue-dark);
-      flex-shrink: 0;
-    }
-
-    &-prefix {
-      padding: 0.5rem 0rem 0.5rem 1rem;
-
-      &::after {
-        content: '';
-        width: 1px;
-        margin-left: 0.5rem;
-        height: 100%;
-        background-color: var(--color-blue-dark);
-      }
-    }
-
-    &-suffix {
-      padding: 0.5rem 1rem 0.5rem 0rem;
-
-      svg {
-        width: 1.5rem;
-        height: 1.5rem;
-        margin-left: 0.5rem;
-      }
-
-      &::before {
-        content: '';
-        width: 1px;
-        margin-right: 0.5rem;
-        height: 1.5rem;
-        background-color: var(--color-blue-dark);
-      }
-    }
-
-    &-icon {
-      padding: 0.5rem 1rem;
-      align-self: stretch;
-
-      & svg {
-        width: 1.5rem;
-        height: 1.5rem;
-        margin-left: 0.5rem;
-      }
-    }
-
-    &--counter-error,
-    &--counter-error:focus {
-      border-color: var(--color-red);
-      background-color: var(--color-red-30);
-    }
-    &--counter-error:focus {
-      box-shadow: 0 0 0 2px var(--color-red);
-    }
-  }
-
-  &__container {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-
-    :first-child:not(:only-child) {
-      border-right: none;
-    }
-
-    :last-child:not(:only-child) {
-      border-left: none;
-    }
-
-    :not(:first-child):not(:last-child) {
-      border-left: none;
-      border-right: none;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    //states
-    & input:focus {
-      box-shadow: none;
-    }
-
-    &:hover .pkt-textinput__input,
-    &:hover .pkt-textinput__input-prefix,
-    &:hover .pkt-textinput__input-suffix,
-    &:hover .pkt-textinput__input-icon {
-      border-color: var(--color-hover);
-    }
-
-    &:focus-within {
-      outline: 2px solid var(--color-active);
-
-      .pkt-textinput__input,
-      .pkt-textinput__input-prefix,
-      .pkt-textinput__input-suffix,
-      .pkt-textinput__input-icon {
-        border-color: var(--color-active);
-      }
-    }
-  }
-
-  &__counter {
-    @include typography.get-text('pkt-txt-14-light');
-    width: 100%;
-    text-align: right;
-    &--error {
-      @include typography.get-text('pkt-txt-14-medium');
-      color: var(--color-red);
-    }
+    @extend .pkt-input;
   }
 }

package/dist/scss/elements/_checkbox-radio.scss

@@ -81,7 +81,7 @@ $-module-name: 'pkt-form-check-input';
     }
 
     &[type='checkbox'] {
-      --svg: url(https://punkt-cdn.oslo.kommune.no/7.2/icons/check-medium.svg);
+      --svg: url(https://punkt-cdn.oslo.kommune.no/8.0/icons/check-medium.svg);
       position: relative;
       background-color: blue;
     }

package/dist/scss/elements/_index.scss

@@ -3,6 +3,7 @@
 @forward 'checkbox-radio';
 @forward 'hr';
 @forward 'image';
+@forward 'input';
 @forward 'list';
 @forward 'section';
 @forward 'select';

package/dist/scss/elements/_input.scss

@@ -0,0 +1,218 @@
+/* Common styles for all inputs */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+@use '../abstracts/mixins/typography';
+
+.pkt-input {
+  @include typography.get-text('pkt-txt-18-light');
+  display: flex;
+  align-items: center;
+  appearance: none; // Fix appearance on date inputs in Safari
+  background-color: var(--color-white);
+  border: 2px solid var(--color-blue-dark);
+  border-radius: 0;
+  color: var(--color-blue-dark);
+  margin: 0;
+  padding: 0.5rem 1rem;
+
+  &:not(textarea[cols]):not(input[size]):not(&--fullwidth),
+  &__container:not(:has(textarea[cols])):not(:has(input[size])):not(
+      :has(&--fullwidth)
+    ) {
+    width: min(100%, 31rem);
+  }
+
+  &--fullwidth {
+    width: 100%;
+  }
+
+  &:is(textarea) {
+    min-height: map.get(variables.$spacing, 'size-128');
+  }
+
+  &:is(select) {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-right: 3rem;
+
+    &:not([multiple]) {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--fg-color  %232A2859)' fill-rule='evenodd' d='M16 19.41 6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 0.7rem top 50%;
+      background-size: 1.5rem auto, 100%;
+    }
+
+    option {
+      background-color: var(--color-white);
+      color: var(--color-blue-dark);
+      font-weight: normal;
+    }
+  }
+
+  // 1. Override Firefox's default opacity
+  &::placeholder {
+    color: var(--color-grayscale-50);
+    opacity: 1; // 1
+  }
+
+  // states
+  &:hover,
+  &.pkt-input--hover {
+    border-color: var(--color-hover);
+  }
+
+  &:focus-visible + &-suffix,
+  &.pkt-input__textinput--focus {
+    box-shadow: 0 0 0 2px var(--color-active);
+    border-color: var(--color-active);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-active);
+    border-color: var(--color-active);
+  }
+
+  &:disabled,
+  &:disabled::placeholder,
+  &[readonly] {
+    opacity: 1;
+    background-color: var(--color-disabled-light);
+    border-color: var(--color-disabled);
+    cursor: inherit;
+  }
+
+  &:disabled:active {
+    border: 2px solid var(--color-disabled);
+  }
+
+  &-prefix,
+  &-suffix,
+  &-icon {
+    @include typography.get-text('pkt-txt-18-light');
+    display: flex;
+    align-items: center;
+    width: auto;
+    height: 3rem;
+    border: 2px solid var(--color-blue-dark);
+    flex-shrink: 0;
+  }
+
+  &-prefix {
+    padding: 0.5rem 0rem 0.5rem 1rem;
+
+    &::after {
+      content: '';
+      width: 1px;
+      margin-left: 0.5rem;
+      height: 100%;
+      background-color: var(--color-blue-dark);
+    }
+  }
+
+  &-suffix {
+    padding: 0.5rem 1rem 0.5rem 0rem;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0.5rem;
+    }
+
+    &::before {
+      content: '';
+      width: 1px;
+      margin-right: 0.5rem;
+      height: 1.5rem;
+      background-color: var(--color-blue-dark);
+    }
+  }
+
+  &-icon {
+    padding: 0.5rem 1rem;
+    align-self: stretch;
+
+    & svg {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0.5rem;
+    }
+  }
+
+  &--counter-error,
+  &--counter-error:focus {
+    border-color: var(--color-red);
+    background-color: var(--color-red-30);
+  }
+  &--counter-error:focus {
+    box-shadow: 0 0 0 2px var(--color-red);
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    :first-child:not(:only-child) {
+      border-right: none;
+    }
+
+    :last-child:not(:only-child) {
+      border-left: none;
+    }
+
+    :not(:first-child):not(:last-child) {
+      border-left: none;
+      border-right: none;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    //states
+    & input:focus {
+      box-shadow: none;
+    }
+
+    &:hover .pkt-input,
+    &:hover .pkt-input-prefix,
+    &:hover .pkt-input-suffix,
+    &:hover .pkt-input-icon {
+      border-color: var(--color-hover);
+    }
+
+    &:focus-within {
+      outline: 2px solid var(--color-active);
+
+      .pkt-input,
+      .pkt-input-prefix,
+      .pkt-input-suffix,
+      .pkt-input-icon {
+        border-color: var(--color-active);
+      }
+    }
+  }
+
+  &__counter {
+    @include typography.get-text('pkt-txt-14-light');
+    width: 100%;
+    text-align: right;
+    &--error {
+      @include typography.get-text('pkt-txt-14-medium');
+      color: var(--color-red);
+    }
+  }
+}
+
+// Dark mode
+@at-root [data-mode='dark'] {
+  .pkt-input-prefix,
+  .pkt-input-suffix,
+  .pkt-input-icon {
+    background-color: var(--color-white);
+    color: var(--color-blue-dark);
+  }
+}

package/dist/scss/elements/_select.scss

@@ -1,73 +1,13 @@
 /* 
  * Select component
  *
- * TODO: Det er ikke optimalt løst å duplisere svg-ikonet,
- * så dette må refaktoreres ved anledning.
+ * Denne blir stilsatt av .pkt-input
+ * Ikke bruk klassen .pkt-select 
  */
 
-@use 'sass:map';
-@use '../abstracts/variables';
-@use '../abstracts/functions';
+@use './input';
 
-.pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.2/icons/chevron-thin-down.svg);
-
-  display: block;
-  background-color: var(--color-white);
-  background-image: var(--svg);
-  background-repeat: no-repeat;
-  background-position: right 0.7rem top 50%;
-  background-size: 2rem auto, 100%;
-  border: 2px solid var(--color-blue-dark);
-  border-radius: 0;
-  color: var(--color-blue-dark);
-  font-family: inherit;
-  font-size: map.get(variables.$font-size, 'size-16');
-  font-weight: normal;
-  height: 3.125rem;
-  line-height: 2rem;
-  margin: 0;
-  max-width: 100%;
-  padding: 0.4375rem 3rem 0.4375rem 0.5rem;
-  width: 100%;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  &::-ms-expand {
-    display: none;
-  }
-
-  &:enabled:focus {
-    border-color: var(--color-active);
-    outline: 2px solid var(--color-active);
-  }
-
-  &:enabled:hover {
-    --fg-color: var(--color-active);
-    border-color: var(--color-active);
-    color: var(--color-active);
-  }
-
-  &:enabled:active {
-    border-color: var(--color-active);
-    outline: none;
-  }
-
-  // Remove outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 var(--color-active);
-  }
-
-  &:disabled {
-    filter: grayscale(1) brightness(4.16);
-    font-weight: 500;
-  }
-
-  option {
-    background-color: var(--color-white);
-    color: var(--color-blue-dark);
-    font-weight: normal;
-  }
+.pkt-select select,
+.pkt-select:is(select) {
+  @extend .pkt-input;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "7.2.0",
+  "version": "8.0.4",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^7.0.0",
+    "@oslokommune/punkt-assets": "^8.0.0",
     "astro": "^2.8.1",
     "edit-json-file": "^1.7.0",
     "fs-extra": "^11.1.0",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f66d7532315a855442edf9e19cf883d7862a787f"
+  "gitHead": "76e06018fc3c83228f894bde62f9b41bf111c9b1"
 }