@oslokommune/punkt-css 1.0.1 → 2.0.1

package/dist/css/pkt.css

@@ -9954,7 +9954,7 @@ a:active {
  * Skin: primary, secondary, tertiary, flat, primary-confirm
  * State: normal, focus, hover, active, disabled
  * Variant: label-only, icon-left, icon-right, icon-only
- * Mode: light, dark
+ * Background: light, dark
  */
 .pkt-btn {
   --btn-link-bg: var(--color-blue-dark);
@@ -9963,6 +9963,7 @@ a:active {
   --btn-focus-bg: var(--color-active);
   --btn-focus-bc: var(--color-active);
   --btn-focus-txt: var(--color-white);
+  --btn-focus-outline: var(--color-active);
   --btn-hover-bg: var(--color-active);
   --btn-hover-bc: var(--color-active);
   --btn-hover-txt: var(--color-white);
@@ -9971,7 +9972,7 @@ a:active {
   --btn-active-txt: var(--color-white);
   --btn-disabled-bg: var(--color-gray);
   --btn-disabled-bc: var(--color-gray);
-  --btn-disabled-txt: var(--color-grayscale-30);
+  --btn-disabled-txt: var(--color-disabled);
 }
 
 [data-mode=dark] .pkt-btn {
@@ -9981,6 +9982,7 @@ a:active {
   --btn-focus-bg: var(--color-blue);
   --btn-focus-bc: var(--color-blue);
   --btn-focus-txt: var(--color-blue-dark);
+  --btn-focus-outline: var(--color-active-light);
   --btn-hover-bg: var(--color-blue);
   --btn-hover-bc: var(--color-blue);
   --btn-hover-txt: var(--color-blue-dark);
@@ -9989,7 +9991,7 @@ a:active {
   --btn-active-txt: var(--color-blue-dark);
   --btn-disabled-bg: var(--color-gray);
   --btn-disabled-bc: var(--color-gray);
-  --btn-disabled-txt: var(--color-grayscale-30);
+  --btn-disabled-txt: var(--color-disabled);
 }
 
 .pkt-btn--secondary {
@@ -9997,39 +9999,22 @@ a:active {
   --btn-link-txt: var(--color-blue-dark);
   --btn-focus-bg: var(--color-transparent);
   --btn-focus-txt: var(--color-active);
-  --btn-hover-bg: var(--color-transparent);
-  --btn-hover-txt: var(--color-active);
 }
 
 [data-mode=dark] .pkt-btn--secondary {
   --btn-link-bg: var(--color-transparent);
   --btn-link-bc: var(--color-white);
   --btn-link-txt: var(--color-white);
-  --btn-hover-bg: var(--color-transparent);
-  --btn-hover-txt: var(--color-blue);
-}
-
-.pkt-btn--tertiary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-yellow);
-  --btn-link-txt: var(--color-blue-dark);
   --btn-focus-bg: var(--color-transparent);
-  --btn-focus-txt: var(--color-active);
-  --btn-hover-bg: var(--color-transparent);
-  --btn-hover-txt: var(--color-active);
+  --btn-focus-bc: var(--color-active-light);
+  --btn-focus-txt: var(--color-active-light);
+  --btn-hover-bg: var(--color-active-light);
+  --btn-hover-bc: var(--color-active-light);
+  --btn-active-bg: var(--color-active-light);
+  --btn-active-bc: var(--color-active-light);
 }
 
-[data-mode=dark] .pkt-btn--tertiary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-yellow);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-transparent);
-  --btn-focus-txt: var(--color-blue);
-  --btn-hover-bg: var(--color-transparent);
-  --btn-hover-txt: var(--color-blue);
-}
-
-.pkt-btn--flat {
+.pkt-btn--tertiary {
   --btn-link-bg: var(--color-transparent);
   --btn-link-bc: var(--color-transparent);
   --btn-link-txt: var(--color-blue-dark);
@@ -10039,40 +10024,22 @@ a:active {
   --btn-hover-bg: var(--color-gray);
   --btn-hover-bc: var(--color-gray);
   --btn-hover-txt: var(--color-active);
-  --btn-active-bg: var(--color-transparent);
-  --btn-active-bc: var(--color-transparent);
-  --btn-active-txt: var(--color-active);
   --btn-disabled-bg: var(--color-transparent);
   --btn-disabled-bc: var(--color-transparent);
 }
 
-[data-mode=dark] .pkt-btn--flat {
+[data-mode=dark] .pkt-btn--tertiary {
   --btn-link-bg: var(--color-transparent);
   --btn-link-bc: var(--color-transparent);
   --btn-link-txt: var(--color-white);
   --btn-focus-bg: var(--color-blue-5);
   --btn-focus-bc: var(--color-blue-5);
-  --btn-focus-txt: var(--color-blue);
   --btn-hover-bg: var(--color-blue-5);
   --btn-hover-bc: var(--color-blue-5);
-  --btn-hover-txt: var(--color-blue);
-  --btn-active-bg: var(--color-transparent);
+  --btn-active-bg: var(--color-blue-dark-10);
   --btn-active-bc: var(--color-transparent);
-  --btn-active-txt: var(--color-blue);
   --btn-disabled-bg: var(--color-transparent);
   --btn-disabled-bc: var(--color-transparent);
-  --btn-disabled-txt: var(--color-white);
-}
-
-.pkt-btn--primary-confirm {
-  --btn-link-bg: var(--color-green);
-  --btn-link-bc: var(--color-green);
-  --btn-link-txt: var(--color-blue-dark);
-}
-
-[data-mode=dark] .pkt-btn--primary-confirm {
-  --btn-link-bg: var(--color-green);
-  --btn-link-bc: var(--color-green);
 }
 
 .pkt-btn {
@@ -10081,7 +10048,7 @@ a:active {
   display: inline-flex;
   font-family: inherit;
   font-weight: normal;
-  margin: 0;
+  margin: 6px;
   overflow: hidden;
   position: relative;
   -moz-user-select: none;
@@ -10097,8 +10064,10 @@ a:active {
   text-underline-offset: 0.3em;
   text-align: left;
   font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
   line-height: 1.5em;
-  padding: 0.625rem 0.9375rem;
+  padding: 0.5rem 1rem;
 }
 .pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
   display: block;
@@ -10113,10 +10082,11 @@ a:active {
 }
 a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
   background-color: var(--btn-focus-bg);
-  border-color: var(--btn-focus-bc);
   color: var(--btn-focus-txt);
-  outline: 0;
-  text-decoration: underline;
+  border-color: var(--btn-focus-bc);
+  outline: 2px solid var(--btn-focus-outline);
+  outline-offset: 4px;
+  text-decoration: none;
 }
 
 a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
@@ -10141,6 +10111,26 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   color: var(--btn-disabled-txt);
   cursor: inherit;
 }
+.pkt-btn--small {
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.5em;
+  padding: 0.5rem 1rem;
+}
+.pkt-btn--small .pkt-btn__icon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
+  margin: 0 0.5rem 0 0;
+}
+.pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
+  margin: 0 0 0 0.5rem;
+}
+.pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
+  margin: 0 -0.3125rem;
+}
 .pkt-btn__icon {
   height: 1.5rem;
   width: 1.5rem;
@@ -10152,49 +10142,42 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   flex-direction: row;
 }
 .pkt-btn--icon-left .pkt-btn__icon {
-  margin: 0.09375rem 0.3125rem 0 0;
+  margin: 0.09375rem 0.5rem 0 0;
 }
 .pkt-btn--icon-right {
   flex-direction: row-reverse;
 }
 .pkt-btn--icon-right .pkt-btn__icon {
-  margin: 0.09375rem 0 0 0.3125rem;
-}
-.pkt-btn--icon-only .pkt-btn__icon {
-  margin: 0.09375rem -0.21875rem;
-}
-.pkt-btn--small {
-  font-size: 1rem;
-  line-height: 1.5em;
-  padding: 0.3125rem 0.625rem;
+  margin: 0.09375rem 0 0 0.5rem;
 }
-.pkt-btn--small .pkt-btn__icon {
-  height: 1.5rem;
-  width: 1.5rem;
+.pkt-btn--icons-right-and-left {
+  flex-direction: row;
 }
-.pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
-  margin: 0 0.3125rem 0 0;
+.pkt-btn--icons-right-and-left .pkt-btn__icon:first-of-type {
+  margin: 0.09375rem 0.5rem 0 0;
 }
-.pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
-  margin: 0 0 0 0.3125rem;
+.pkt-btn--icons-right-and-left .pkt-btn__icon:last-of-type {
+  margin: 0.09375rem 0 0 0.5rem;
 }
-.pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
-  margin: 0 -0.3125rem;
+.pkt-btn--icon-only .pkt-btn__icon {
+  margin: 0.09375rem -0.21875rem;
 }
 .pkt-btn--large {
   font-size: 1.5rem;
-  line-height: 1.4166666667em;
-  padding: 0.9375rem 1.25rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.5em;
+  padding: 0.75rem 1rem;
 }
 .pkt-btn--large .pkt-btn__icon {
   height: 2rem;
   width: 2rem;
 }
 .pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon {
-  margin: 0.0625rem 0.625rem 0 0;
+  margin: 0.0625rem 0.5rem 0 0;
 }
 .pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon {
-  margin: 0.0625rem 0 0 0.625rem;
+  margin: 0.0625rem 0 0 0.5rem;
 }
 .pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon {
   margin: 0.0625rem -0.25rem;
@@ -10851,9 +10834,6 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   display: flex;
   float: right;
   margin-left: 1.5rem;
-  height: 40px;
-  width: 40px;
-  margin-top: -4px;
 }
 .pkt-alert__icon {
   margin-right: 1rem;