@oslokommune/punkt-css 5.1.19 → 5.2.1

package/dist/scss/components/_textinput.scss

@@ -0,0 +1,365 @@
+/* textinput */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+@use '../abstracts/mixins/typography';
+
+.pkt-textinput {
+  &__label {
+    @include typography.get-text('pkt-txt-18-medium');
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: map.get(variables.$spacing, 'size-8');
+    > h2 {
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+      display: inline;
+      margin-bottom: 0;
+    }
+  }
+
+  &__helptext {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: map.get(variables.$spacing, 'size-4');
+    @include typography.get-text('pkt-txt-14-light');
+
+    &-expandable {
+      display: inline-flex;
+      text-align: left;
+      align-items: center;
+
+      &-heading {
+        @include typography.get-text('pkt-txt-18-medium');
+        margin: 0;
+      }
+
+      &-open {
+        width: 100%;
+        display: block;
+      }
+
+      &-closed {
+        display: none;
+      }
+    }
+  }
+
+  &__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%;
+
+    // 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] {
+      background-color: var(--color-disabled-light);
+      border-color: var(--color-disabled);
+      cursor: inherit;
+    }
+
+    &:disabled:active {
+      border: 2px solid var(--color-disabled);
+    }
+
+    &-prefix-wrapper {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      :not(:first-child) {
+        border-left: none;
+      }
+
+      :first-child {
+        border-right: none;
+      }
+
+      //states
+      & input:focus {
+        box-shadow: none;
+      }
+
+      &:hover .pkt-textinput__input,
+      &:hover .pkt-textinput__input-prefix {
+        border-color: var(--color-hover);
+      }
+
+      &:focus-within {
+        outline: 2px solid var(--color-active);
+      }
+
+      &:focus-within .pkt-textinput__input,
+      &:focus-within .pkt-textinput__input-prefix {
+        border-color: var(--color-active);
+      }
+    }
+
+    &-prefix {
+      @include typography.get-text('pkt-txt-18-light');
+      align-items: center;
+      display: flex;
+      width: auto;
+      height: 3rem;
+      border: 2px solid var(--color-blue-dark);
+      padding: 0.5rem 0rem 0.5rem 1rem;
+
+      &::after {
+        content: '';
+        width: 1px;
+        margin-left: 0.5rem;
+        height: 100%;
+        background-color: var(--color-blue-dark);
+      }
+    }
+
+    &-suffix-wrapper {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      :not(:first-child) {
+        border-left: none;
+      }
+
+      :first-child {
+        border-right: none;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      //states
+      & input:focus {
+        box-shadow: none;
+      }
+
+      &:hover .pkt-textinput__input,
+      &:hover .pkt-textinput__input-suffix,
+      &:hover .pkt-textinput__input-icon {
+        border-color: var(--color-hover);
+      }
+
+      &:focus-within {
+        outline: 2px solid var(--color-active);
+      }
+
+      &:focus-within .pkt-textinput__input-icon,
+      &:focus-within .pkt-textinput__input,
+      &:focus-within .pkt-textinput__input-suffix,
+      &:focus-within .pkt-textinput__input-icon {
+        border-color: var(--color-active);
+      }
+    }
+
+    &-suffix {
+      @include typography.get-text('pkt-txt-18-light');
+      display: flex;
+      align-items: center;
+      width: auto;
+      border: 2px solid var(--color-blue-dark);
+      padding: 0.5rem 1rem 0.5rem 0rem;
+      flex-shrink: 0;
+
+      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 {
+      @include typography.get-text('pkt-txt-18-light');
+      display: flex;
+      flex-shrink: 0;
+      padding: 0.5rem 1rem;
+      align-items: center;
+      align-self: stretch;
+      border: 2px solid var(--color-blue-dark);
+
+      & svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-left: 0.5rem;
+      }
+    }
+  }
+
+  // Modifiers
+  &--disabled {
+    color: var(--color-disabled);
+    cursor: inherit;
+
+    .pkt-tag {
+      background-color: var(--color-disabled-light);
+    }
+
+    .pkt-alert {
+      background-color: var(--color-disabled-light);
+      border-color: var(--color-disabled);
+    }
+
+    .pkt-textinput__input,
+    .pkt-textinput__input-prefix,
+    .pkt-textinput__input-suffix,
+    .pkt-textinput__input-icon {
+      border-color: var(--color-disabled);
+      background-color: var(--color-disabled-light);
+    }
+
+    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
+    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
+    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
+    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
+    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+      border-color: var(--color-disabled);
+    }
+
+    .pkt-textinput__input:hover {
+      border-color: var(--color-disabled);
+      box-shadow: none;
+    }
+
+    .pkt-textinput__input:focus {
+      border-color: var(--color-disabled);
+      box-shadow: none;
+      outline: none;
+    }
+
+    .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
+      border-right: none;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
+  &--error {
+    .pkt-textinput__input,
+    .pkt-textinput__input-prefix,
+    .pkt-textinput__input-suffix,
+    .pkt-textinput__input-icon {
+      border-color: var(--color-red);
+    }
+
+    .pkt-textinput__input:hover,
+    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
+    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
+    .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
+    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
+    .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+      border-color: var(--color-red);
+    }
+
+    .pkt-textinput__input:focus-within,
+    .pkt-textinput__input-prefix-wrapper:focus-within
+      .pkt-textinput__input-icon,
+    .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
+    .pkt-textinput__input-prefix-wrapper:focus-within
+      .pkt-textinput__input-prefix,
+    .pkt-textinput__input-prefix-wrapper:focus-within
+      .pkt-textinput__input-icon,
+    .pkt-textinput__input-suffix-wrapper:focus-within
+      .pkt-textinput__input-icon,
+    .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
+    .pkt-textinput__input-suffix-wrapper:focus-within
+      .pkt-textinput__input-suffix,
+    .pkt-textinput__input-suffix-wrapper:focus-within
+      .pkt-textinput__input-icon {
+      border-color: var(--color-red);
+    }
+  }
+
+  &--inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
+  // 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);
+    }
+  }
+
+  // Alert
+  .pkt-alert {
+    width: 100%;
+    padding: 0.75rem 1rem 0.75rem calc(8px - 4px);
+    margin: 0 0 0.5rem 0;
+
+    &--error {
+      margin: 0.5rem 0 0.5rem 0;
+    }
+
+    &__icon {
+      width: 1.375rem;
+      height: 1.375rem;
+      top: 0.81rem;
+      left: 1.25rem;
+    }
+
+    &__text {
+      @include typography.get-text('pkt-txt-16-light');
+      margin: 0 0 0 2.875rem;
+    }
+  }
+
+  // Tag
+  .pkt-tag {
+    margin-left: 8px;
+  }
+
+  .pkt-btn {
+    @include typography.get-text('pkt-txt-14-light');
+    padding: 0;
+  }
+}

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/5.1/icons/check-medium.svg);
+      --svg: url(https://punkt-cdn.oslo.kommune.no/5.2/icons/check-medium.svg);
       position: relative;
       background-color: blue;
     }

package/dist/scss/elements/_form.scss

@@ -36,6 +36,9 @@
    */
   &-label {
     width: 100%;
+    > p:first-child {
+      display: inline;
+    }
   }
 
   &-help {

package/dist/scss/elements/_select.scss

@@ -10,7 +10,7 @@
 @use '../abstracts/functions';
 
 .pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/5.1/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/5.2/icons/chevron-thin-down.svg);
 
   display: block;
   background-color: var(--color-white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "5.1.19",
+  "version": "5.2.1",
   "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": "3560fc1d72d67a49cf959925d5691d0fa0f60b02"
+  "gitHead": "582b1bb38c470e76cbdb5e0ec2dc98231f674291"
 }