@oslokommune/punkt-css 9.2.6 → 9.4.0

package/dist/scss/elements/_button.scss

@@ -39,108 +39,109 @@ $-sizes: (
 );
 
 $-skins: (
-  'primary': ('light': ('link-bg': --color-blue-dark,
-      'link-bc': --color-blue-dark,
-      'link-txt': --color-white,
-      'focus-bg': --color-active,
-      'focus-bc': --color-active,
-      'focus-txt': --color-white,
-      'focus-outline': --color-focus,
-      'hover-bg': --color-active,
-      'hover-bc': --color-active,
-      'hover-txt': --color-white,
-      'active-bg': --color-active,
-      'active-bc': --color-active,
-      'active-txt': --color-white,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-disabled,
+  'primary': ('light': ('button-background-normal': --pkt-color-brand-dark-blue-1000,
+      'button-border-normal': --pkt-color-brand-dark-blue-1000,
+      'button-text-normal': --pkt-color-brand-neutrals-white,
+      'button-background-focus': --pkt-color-brand-warm-blue-1000,
+      'button-border-focus': --pkt-color-brand-warm-blue-1000,
+      'button-text-focus': --pkt-color-brand-neutrals-white,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-warm-blue-1000,
+      'button-border-hover': --pkt-color-brand-warm-blue-1000,
+      'button-text-hover': --pkt-color-brand-neutrals-white,
+      'button-background-active': --pkt-color-brand-warm-blue-1000,
+      'button-border-active': --pkt-color-brand-warm-blue-1000,
+      'button-text-active': --pkt-color-brand-neutrals-white,
+      'button-background-disabled': --pkt-color-brand-neutrals-100,
+      'button-border-disabled': --pkt-color-brand-neutrals-100,
+      'button-text-disabled': --pkt-color-grays-gray-500,
     ),
-    'dark': ('link-bg': --color-blue-light,
-      'link-bc': --color-blue-light,
-      'link-txt': --color-blue-dark,
-      'focus-bg': --color-blue,
-      'focus-bc': --color-blue,
-      'focus-txt': --color-blue-dark,
-      'focus-outline': --color-focus,
-      'hover-bg': --color-blue,
-      'hover-bc': --color-blue,
-      'hover-txt': --color-blue-dark,
-      'active-bg': --color-blue,
-      'active-bc': --color-blue,
-      'active-txt': --color-blue-dark,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-disabled,
+    'dark': ('button-background-normal': --pkt-color-brand-blue-500,
+      'button-border-normal': --pkt-color-brand-blue-500,
+      'button-text-normal': --pkt-color-brand-dark-blue-1000,
+      'button-background-focus': --pkt-color-brand-blue-1000,
+      'button-border-focus': --pkt-color-brand-blue-1000,
+      'button-text-focus': --pkt-color-brand-dark-blue-1000,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-blue-1000,
+      'button-border-hover': --pkt-color-brand-blue-1000,
+      'button-text-hover': --pkt-color-brand-dark-blue-1000,
+      'button-background-active': --pkt-color-brand-blue-1000,
+      'button-border-active': --pkt-color-brand-blue-1000,
+      'button-text-active': --pkt-color-brand-dark-blue-1000,
+      'button-background-disabled': --pkt-color-brand-neutrals-100,
+      'button-border-disabled': --pkt-color-brand-neutrals-100,
+      'button-text-disabled': --pkt-color-grays-gray-600,
     ),
   ),
-  'secondary': ('light': ('link-bg': --color-transparent,
-      'link-bc': --color-blue-dark,
-      'link-txt': --color-blue-dark,
-      'focus-bg': --color-transparent,
-      'focus-bc': --color-active,
-      'focus-txt': --color-active,
-      'focus-outline': --color-focus,
-      'hover-bg': --color-active,
-      'hover-bc': --color-active,
-      'hover-txt': --color-white,
-      'active-bg': --color-active,
-      'active-bc': --color-active,
-      'active-txt': --color-white,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-disabled,
+  'secondary': ('light': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
+      'button-border-normal': --pkt-color-brand-neutrals-transparent,
+      'button-text-normal': --pkt-color-brand-dark-blue-1000,
+      'button-background-focus': --pkt-color-brand-warm-blue-1000,
+      'button-border-focus': --pkt-color-brand-warm-blue-1000,
+      'button-text-focus': --pkt-color-brand-neutrals-white,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-warm-blue-1000,
+      'button-border-hover': --pkt-color-brand-warm-blue-1000,
+      'button-text-hover': --pkt-color-brand-neutrals-white,
+      'button-background-active': --pkt-color-brand-warm-blue-1000,
+      'button-border-active': --pkt-color-brand-warm-blue-1000,
+      'button-text-active': --pkt-color-brand-neutrals-white,
+      'button-background-disabled': --pkt-color-brand-neutrals-100,
+      'button-border-disabled': --pkt-color-brand-neutrals-100,
+      'button-text-disabled': --pkt-color-grays-gray-600,
     ),
-    'dark': ('link-bg': --color-transparent,
-      'link-bc': --color-white,
-      'link-txt': --color-white,
-      'focus-bg': --color-transparent,
-      'focus-bc': --color-active-light,
-      'focus-txt': --color-active-light,
-      'focus-outline': --color-focus,
-      'hover-bg': --color-active-light,
-      'hover-bc': --color-active-light,
-      'hover-txt': --color-blue-dark,
-      'active-bg': --color-active-light,
-      'active-bc': --color-active-light,
-      'active-txt': --color-blue-dark,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-disabled,
+    'dark': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
+      'button-border-normal': --pkt-color-brand-neutrals-white,
+      'button-text-normal': --pkt-color-brand-neutrals-white,
+      'button-background-focus': --pkt-color-brand-blue-500,
+      'button-border-focus': --pkt-color-brand-blue-500,
+      'button-text-focus': --pkt-color-brand-dark-blue-1000,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-blue-500,
+      'button-border-hover': --pkt-color-brand-blue-500,
+      'button-text-hover': --pkt-color-brand-dark-blue-1000,
+      'button-background-active': --pkt-color-brand-blue-500,
+      'button-border-active': --pkt-color-brand-blue-500,
+      'button-text-active': --pkt-color-brand-dark-blue-1000,
+      'button-background-disabled': --pkt-color-grays-gray-100,
+      'button-border-disabled': --pkt-color-grays-gray-100,
+      'button-text-disabled': --pkt-color-grays-gray-600,
     ),
   ),
-  'tertiary': ('light': ('link-bg': --color-transparent,
-      'link-bc': --color-transparent,
-      'link-txt': --color-blue-dark,
-      'focus-bg': --color-gray,
-      'focus-bc': --color-active,
-      'focus-txt': --color-active,
-      'hover-bg': --color-gray,
-      'hover-bc': --color-gray,
-      'hover-txt': --color-active,
-      'active-bg': --color-active,
-      'active-bc': --color-active,
-      'active-txt': --color-white,
-      'disabled-bg': --color-transparent,
-      'disabled-bc': --color-transparent,
-      'disabled-txt': --color-disabled,
+  'tertiary': ('light': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
+      'button-border-normal': --pkt-color-brand-neutrals-transparent,
+      'button-text-normal': --pkt-color-brand-dark-blue-1000,
+      'button-background-focus': --pkt-color-brand-neutrals-200,
+      'button-border-focus': --pkt-color-brand-warm-blue-1000,
+      'button-text-focus': --pkt-color-brand-warm-blue-1000,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-neutrals-200,
+      'button-border-hover': --pkt-color-brand-neutrals-200,
+      'button-text-hover': --pkt-color-brand-warm-blue-1000,
+      'button-background-active': --pkt-color-brand-warm-blue-1000,
+      'button-border-active': --pkt-color-brand-warm-blue-1000,
+      'button-text-active': --pkt-color-brand-neutrals-white,
+      'button-background-disabled': --pkt-color-brand-neutrals-100,
+      'button-border-disabled': --pkt-color-brand-neutrals-100,
+      'button-text-disabled': --pkt-color-grays-gray-600,
     ),
-    'dark': ('link-bg': --color-transparent,
-      'link-bc': --color-transparent,
-      'link-txt': --color-white,
-      'focus-bg': --color-blue-5,
-      'focus-bc': --color-active,
-      'focus-txt': --color-blue-dark,
-      'focus-outline': --color-focus,
-      'hover-bg': --color-blue-5,
-      'hover-bc': --color-blue-5,
-      'hover-txt': --color-blue-dark,
-      'active-bg': --color-blue-dark-10,
-      'active-bc': --color-transparent,
-      'active-txt': --color-blue-dark,
-      'disabled-bg': --color-transparent,
-      'disabled-bc': --color-transparent,
-      'disabled-txt': --color-disabled,
+    'dark': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
+      'button-border-normal': --pkt-color-brand-neutrals-transparent,
+      'button-text-normal': --pkt-color-brand-neutrals-white,
+      'button-background-focus': --pkt-color-brand-dark-blue-700,
+      'button-border-focus': --pkt-color-brand-dark-blue-700,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-text-focus': --pkt-color-brand-neutrals-white,
+      'button-background-hover': --pkt-color-brand-dark-blue-700,
+      'button-border-hover': --pkt-color-brand-dark-blue-700,
+      'button-text-hover': --pkt-color-brand-neutrals-white,
+      'button-background-active': --pkt-color-brand-dark-blue-700,
+      'button-border-active': --pkt-color-brand-dark-blue-700,
+      'button-text-active': --pkt-color-brand-neutrals-white,
+      'button-background-disabled': --pkt-color-brand-neutrals-100,
+      'button-border-disabled': --pkt-color-brand-neutrals-100,
+      'button-text-disabled': --pkt-color-grays-gray-600,
     ),
   ),
 );
@@ -152,7 +153,7 @@ $-skins: (
 
     // Only print primary skin and css vars that differ from primary
     @if $name =='primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
-      --btn-#{$key}: var(#{$value});
+      --pkt-color-#{$key}: var(#{$value});
     }
   }
 }
@@ -239,13 +240,76 @@ $-skins: (
     );
 
     // Dark mode
-    &--green-dark-outline,
-    &--green-outline,
-    &--blue-outline,
-    &--beige-dark-outline,
-    &--yellow-outline,
+    &--green-dark {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--green-dark-outline {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--green {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--green-outline {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--blue {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--blue-outline {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--beige-light {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--beige-dark-outline {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--yellow {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--yellow-outline {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--red {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
     &--red-outline {
-      color: var(--color-white);
+      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
     }
   }
 }
@@ -269,9 +333,9 @@ $value in $-skins {
   -ms-user-select: none;
   user-select: none;
   vertical-align: top;
-  background-color: var(--btn-link-bg);
-  border: 2px solid var(--btn-link-bc);
-  color: var(--btn-link-txt);
+  background-color: var(--pkt-color-button-background-normal);
+  border: 2px solid var(--pkt-color-button-border-normal);
+  color: var(--pkt-color-button-text-normal);
   text-decoration: none;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
@@ -291,25 +355,25 @@ $value in $-skins {
 
   &:link,
   &:visited {
-    color: var(--btn-link-txt);
+    color: var(--pkt-color-button-text-normal);
   }
 
   @at-root a.#{$-module-name}:focus,
   &:enabled:focus,
   &.#{$-module-name}--focus {
-    background-color: var(--btn-focus-bg);
-    color: var(--btn-focus-txt);
-    border-color: var(--btn-focus-bc);
-    outline: 4px solid var(--btn-focus-outline);
+    background-color: var(--pkt-color-button-background-focus);
+    color: var(--pkt-color-button-text-focus);
+    border-color: var(--pkt-color-button-border-focus);
+    outline: 4px solid var(--pkt-color-border-states-focus);
     text-decoration: none;
   }
 
   @at-root a.#{$-module-name}:hover,
   &:enabled:hover,
   &.#{$-module-name}--hover {
-    background-color: var(--btn-hover-bg);
-    border-color: var(--btn-hover-bc);
-    color: var(--btn-hover-txt);
+    background-color: var(--pkt-color-button-background-hover);
+    border-color: var(--pkt-color-button-border-hover);
+    color: var(--pkt-color-button-text-hover);
     outline: 0;
     text-decoration: underline;
   }
@@ -318,17 +382,17 @@ $value in $-skins {
   &:enabled:active,
   &.#{$-module-name}--active,
   &.#{$-module-name}--active:hover {
-    background-color: var(--btn-active-bg);
-    border-color: var(--btn-active-bc);
-    color: var(--btn-active-txt);
+    background-color: var(--pkt-color-button-background-active);
+    border-color: var(--pkt-color-button-border-active);
+    color: var(--pkt-color-button-text-active);
     outline: 0;
     text-decoration: none;
   }
 
   &:disabled {
-    background-color: var(--btn-disabled-bg);
-    border-color: var(--btn-disabled-bc);
-    color: var(--btn-disabled-txt);
+    background-color: var(--pkt-color-button-background-disabled);
+    border-color: var(--pkt-color-button-border-disabled);
+    color: var(--pkt-color-button-text-disabled);
     cursor: inherit;
   }
 
@@ -345,76 +409,76 @@ $value in $-skins {
   }
 
 
-  // button colors
+  // button colors modifiers
   &--green-dark {
-    --btn-link-bg: var(--color-green-dark);
-    --btn-link-bc: var(--color-green-dark);
-    --btn-link-txt: var(--color-white);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
   }
 
   &--green-dark-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-green-dark);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--green {
-    --btn-link-bg: var(--color-green);
-    --btn-link-bc: var(--color-green);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--green-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-green);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--blue {
-    --btn-link-bg: var(--color-blue);
-    --btn-link-bc: var(--color-blue);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--blue-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-blue);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--beige-light {
-    --btn-link-bg: var(--color-beige-light);
-    --btn-link-bc: var(--color-beige-light);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--beige-dark-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-beige-dark);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--yellow {
-    --btn-link-bg: var(--color-yellow);
-    --btn-link-bc: var(--color-yellow);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--yellow-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-yellow);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--red {
-    --btn-link-bg: var(--color-red);
-    --btn-link-bc: var(--color-red);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--red-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-red);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 }