@oslokommune/punkt-css 2.0.1 → 2.0.4

package/dist/scss/abstracts/variables/_colors.scss

@@ -30,12 +30,16 @@ $colors: (
   color-blue-dark-10: #d9e9f2,
   color-blue-5: #f1fdff,
   color-blue-10: #e5fcff,
+  color-blue-60: #cdf5fb,
   color-green-dark-5: #f2fff3,
   color-green-dark-10: #d9f2ef,
   color-green-10: #e5ffe6,
+  color-green-30: #c0f6e3,
   color-red-5: #fff3f2,
   color-red-10: #ffe8e5,
+  color-red-30: #f9cfca,
   color-yellow-5: #fef9f0,
+  color-yellow-50: #fae1b6,
   // grayscale digital
   color-gray-light: #f9f9f9,
   color-gray: #f2f2f2,

package/dist/scss/base/_defaults.scss

@@ -40,6 +40,8 @@ p {
 }
 
 body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   overflow-y: scroll;
   line-height: 1.5;

package/dist/scss/components/_alert.scss

@@ -6,132 +6,94 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
+$-module-name: 'pkt-alert';
+
 // Spacing
 $-alert-spacing: map.get(variables.$spacing, 'size-24');
+$-border-thickness: map.get(variables.$spacing, 'size-4');
+
+// default is "info"
+.#{$-module-name} {
+  --pkt-alert-bc: var(--color-blue);
+  --pkt-alert-bg: var(--color-blue-60);
+  --pkt-alert-txt: var(--color-blue-dark);
+  --pkt-alert-icon-fg: var(--color-blue-dark);
+  --pkt-alert-close-fg: var(--color-blue-dark);
+}
+.#{$-module-name}--error {
+  --pkt-alert-bc: var(--color-red);
+  --pkt-alert-bg: var(--color-red-30);
+}
 
-//// Colors
-$-alert-red-error: map.get(variables.$colors, 'color-error');
-$-alert-green-dark: map.get(variables.$colors, 'color-green-dark');
-$-alert-blue-dark: map.get(variables.$colors, 'color-blue-dark');
-
-// Error
-$-alert-error-border: 3px solid $-alert-red-error;
-$-alert-error-bg: map.get(variables.$colors, 'color-red-5');
-$-alert-error-color: $-alert-red-error;
-
-// Success
-$-alert-success-border: 3px solid $-alert-green-dark;
-$-alert-success-bg: map.get(variables.$colors, 'color-green-dark-5');
-$-alert-success-color: $-alert-green-dark;
-
-// Warning
-$-alert-warning-border: 3px solid map.get(variables.$colors, 'color-yellow');
-$-alert-warning-bg: map.get(variables.$colors, 'color-yellow-5');
-$-alert-warning-color: map.get(variables.$colors, 'color-warning');
-
-// Info
-$-alert-info-border: 3px solid $-alert-blue-dark;
-$-alert-info-bg: map.get(variables.$colors, 'color-blue-dark-5');
-$-alert-info-color: $-alert-blue-dark;
+.#{$-module-name}--success {
+  --pkt-alert-bc: var(--color-green);
+  --pkt-alert-bg: var(--color-green-30);
+}
 
-// Close hover color
-$-alert-close-hover-color: map.get(variables.$colors, 'color-hover');
+.#{$-module-name}--warning {
+  --pkt-alert-bc: var(--color-yellow);
+  --pkt-alert-bg: var(--color-yellow-50);
+}
 
-.pkt-alert {
-  padding: $-alert-spacing;
+.#{$-module-name} {
+  padding: $-alert-spacing $-alert-spacing $-alert-spacing
+    calc($-alert-spacing - $-border-thickness);
   display: block;
-  overflow: hidden;
   position: relative;
-
-  &__text {
-    @include get-text('pkt-txt-18-light');
-    margin-bottom: 0;
-    padding: 0;
-  }
+  border-left: $-border-thickness solid var(--pkt-alert-bc);
+  background-color: var(--pkt-alert-bg);
+  color: var(--pkt-alert-txt);
 
   &__title {
     @include get-text('pkt-txt-18-medium');
-    display: flex;
-    align-items: center;
-    margin-bottom: $-alert-spacing;
+    margin: 0 0 $-alert-spacing 2.5rem;
   }
 
-  &__content {
-    display: flex;
-    align-items: flex-start;
+  &__close ~ &__title {
+    margin: 0 4rem $-alert-spacing 2.5rem;
   }
 
-  &__date {
-    @include get-text('pkt-txt-14-light');
-    margin-top: $-alert-spacing;
-  }
+  &__text {
+    @include get-text('pkt-txt-18-light');
+    margin: 0 0 0 2.5rem;
 
-  &__close {
-    display: flex;
-    float: right;
-    margin-left: $-alert-spacing;
-  }
+    p {
+      margin-bottom: map.get(variables.$spacing, 'size-16');
 
-  &__icon {
-    margin-right: map.get(variables.$spacing, 'size-16');
-    height: 1.875rem;
-    width: 1.875rem;
-    flex-shrink: 0;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
   }
 
-  // skins
-  // default is "info"
-
-  &--success {
-    border-left: $-alert-success-border;
-    background-color: $-alert-success-bg;
-    color: $-alert-success-color;
+  &__close + &__text {
+    margin: 0 4rem 0 2.5rem;
+  }
 
-    &.pkt-alert .pkt-alert__icon {
-      --bg-color: var(--color-green-dark);
-      --fg-color: var(--color-green-dark-5);
-    }
-    &.pkt-alert .pkt-alert__close {
-      --fg-color: var(--color-green-dark);
-    }
+  &__title + &__text {
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  &--error {
-    border-left: $-alert-error-border;
-    background-color: $-alert-error-bg;
-    color: $-alert-error-color;
-    &.pkt-alert .pkt-alert__icon {
-      --bg-color: var(--color-error);
-      --fg-color: var(--color-red-5);
-    }
-    &.pkt-alert .pkt-alert__close {
-      --fg-color: var(--color-error);
-    }
+  &__date {
+    @include get-text('pkt-txt-14-light');
+    margin-top: $-alert-spacing;
   }
 
-  &--warning {
-    border-left: $-alert-warning-border;
-    background-color: $-alert-warning-bg;
-    color: $-alert-warning-color;
-    &.pkt-alert .pkt-alert__icon {
-      --bg-color: var(--color-yellow);
-      --fg-color: var(--color-blue-dark);
-    }
-    &.pkt-alert .pkt-alert__close {
-      --fg-color: var(--color-warning);
-    }
+  &__icon {
+    --fg-color: var(--pkt-alert-icon-fg);
+
+    height: 2rem;
+    width: 2rem;
+    position: absolute;
+    top: 22px;
+    left: 20px;
   }
 
-  &--info {
-    border-left: $-alert-info-border;
-    background-color: $-alert-info-bg;
-    color: $-alert-info-color;
-    &.pkt-alert .pkt-alert__icon {
-      --bg-color: var(--color-blue);
-      --fg-color: var(--color-blue-dark);
-    }
-    &.pkt-alert .pkt-alert__close {
-      --fg-color: var(--color-blue-dark);
-    }
+  &__close {
+    --fg-color: var(--pkt-alert-close-fg);
+    position: absolute;
+    right: 1.125rem;
+    top: 0.625rem;
   }
 }

package/dist/scss/components/_icon.scss

@@ -27,57 +27,3 @@
     width: 4rem;
   }
 }
-
-.pkt-font-icon {
-  display: inline-block;
-  font-size: map.get(variables.$font-size, 'large');
-  font-family: #{map.get(variables.$font-family, 'icon')};
-
-  &--chevron-left::before {
-    content: '\E907';
-  }
-
-  &--chevron-right::before {
-    content: '\E908';
-  }
-
-  &--chevron-up::before {
-    content: '\E909';
-  }
-
-  &--chevron-down::before {
-    content: '\E906';
-  }
-
-  &--user::before {
-    content: '\E921';
-  }
-
-  &--menu::before {
-    content: '\E917';
-  }
-
-  &--close::before {
-    content: '\E923';
-  }
-
-  &--search::before {
-    content: '\E915';
-  }
-
-  &--trash::before {
-    content: '\E92D';
-  }
-
-  &--edit::before {
-    content: '\E949';
-  }
-
-  &--filter::before {
-    content: '\E910';
-  }
-
-  &--envelope::before {
-    content: '\E929';
-  }
-}

package/dist/scss/elements/_button.scss

@@ -17,27 +17,27 @@ $-module-name: 'pkt-btn';
 $-sizes: (
   'small': (
     'text-class': 'pkt-txt-14-medium',
-    'padding': 0.5rem 1rem,
-    'icon-m-icon-left': 0 0.5rem 0 0,
-    'icon-m-icon-right': 0 0 0 0.5rem,
-    'icon-m-icon-only': 0 -0.3125rem,
+    'padding': 0 0.5rem,
+    'padding-icon-only': 0 0.5625rem,
     'icon-size': 1.25rem,
+    'height': 2.625rem,
+    'line-height': 1.1,
   ),
   'medium': (
     'text-class': 'pkt-txt-18-medium',
-    'padding': 0.5rem 1rem,
-    'icon-m-icon-left': 0.09375rem 0.5rem 0 0,
-    'icon-m-icon-right': 0.09375rem 0 0 0.5rem,
-    'icon-m-icon-only': 0.09375rem -0.21875rem,
+    'padding': 0 1rem,
+    'padding-icon-only': 0 0.625rem,
     'icon-size': 1.5rem,
+    'height': 3rem,
+    'line-height': 1.1,
   ),
   'large': (
     'text-class': 'pkt-txt-24-medium',
-    'padding': 0.75rem 1rem,
-    'icon-m-icon-left': 0.0625rem 0.5rem 0 0,
-    'icon-m-icon-right': 0.0625rem 0 0 0.5rem,
-    'icon-m-icon-only': 0.0625rem -0.25rem,
+    'padding': 0 1rem,
+    'padding-icon-only': 0 0.875rem,
     'icon-size': 2rem,
+    'height': 4rem,
+    'line-height': 1.1,
   ),
 );
 $-skins: (
@@ -169,12 +169,14 @@ $-skins: (
 @mixin -size($name, $o) {
   @if $name == medium {
     @include typography.get-text(map.get($o, 'text-class'));
+    height: map.get($o, 'height');
+    line-height: map.get($o, 'line-height');
     padding: map.get($o, 'padding');
 
     &__icon {
       height: map.get($o, 'icon-size');
-      width: map.get($o, 'icon-size');
       margin: map.get($o, 'icon-margin');
+      width: map.get($o, 'icon-size');
     }
 
     // button variants (base)
@@ -186,54 +188,35 @@ $-skins: (
 
     &--icon-left {
       flex-direction: row;
-
-      .#{$-module-name}__icon {
-        margin: map.get($o, 'icon-m-icon-left');
-      }
     }
 
     &--icon-right {
       flex-direction: row-reverse;
-
-      .#{$-module-name}__icon {
-        margin: map.get($o, 'icon-m-icon-right');
-      }
     }
     &--icons-right-and-left {
       flex-direction: row;
-      .#{$-module-name}__icon:first-of-type {
-        margin: map.get($o, 'icon-m-icon-left');
-      }
-      .#{$-module-name}__icon:last-of-type {
-        margin: map.get($o, 'icon-m-icon-right');
-      }
     }
     &--icon-only {
+      padding: map.get($o, 'padding-icon-only');
+
       .#{$-module-name}__text {
         @extend %sr-only;
       }
-      .#{$-module-name}__icon {
-        margin: map.get($o, 'icon-m-icon-only');
-      }
     }
   } @else {
     &--#{$name} {
       @include typography.get-text(map.get($o, 'text-class'));
+      height: map.get($o, 'height');
+      line-height: map.get($o, 'line-height');
       padding: map.get($o, 'padding');
     }
     &--#{$name} &__icon {
       height: map.get($o, 'icon-size');
-      width: map.get($o, 'icon-size');
       margin: map.get($o, 'icon-margin');
+      width: map.get($o, 'icon-size');
     }
-    .#{$-module-name}--#{$name}.#{$-module-name}--icon-left &__icon {
-      margin: map.get($o, 'icon-m-icon-left');
-    }
-    .#{$-module-name}--#{$name}.#{$-module-name}--icon-right &__icon {
-      margin: map.get($o, 'icon-m-icon-right');
-    }
-    .#{$-module-name}--#{$name}.#{$-module-name}--icon-only &__icon {
-      margin: map.get($o, 'icon-m-icon-only');
+    &--#{$name}.#{$-module-name}--icon-only {
+      padding: map.get($o, 'padding-icon-only');
     }
   }
 }
@@ -273,7 +256,6 @@ $-skins: (
   font-family: inherit;
   font-weight: normal;
   margin: 6px;
-  overflow: hidden;
   position: relative;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -287,6 +269,8 @@ $-skins: (
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
   text-align: left;
+  align-items: center;
+  column-gap: 0.5rem;
 
   &[class*='pkt-btn--icon'] > .pkt-btn__icon {
     display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -21,7 +21,7 @@
     "watch": "chokidar \"src/scss/**/*\" -c \"npm run build\""
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^2.0.1",
+    "@oslokommune/punkt-assets": "^2.0.4",
     "astro": "^2.0.2",
     "chokidar-cli": "^3.0.0",
     "edit-json-file": "^1.7.0",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "a051333929386ca562d829a3f3aedda17f4d289e"
+  "gitHead": "035f27105ef83f6e175d996e4cd4e09d85fd9a7e"
 }