@oslokommune/punkt-css 18.0.0 → 18.3.0

package/dist/css/pkt-utilities.css

@@ -262,30 +262,126 @@
   border-color: #ffffff !important;
 }
 
-.pkt-color-bg-brand-neutrals-100 {
+.pkt-color-bg-brand-neutrals-50 {
   background-color: #f9f9f9 !important;
 }
 
-.pkt-color-txt-brand-neutrals-100 {
+.pkt-color-txt-brand-neutrals-50 {
   color: #f9f9f9 !important;
 }
 
-.pkt-color-border-brand-neutrals-100 {
+.pkt-color-border-brand-neutrals-50 {
   border-color: #f9f9f9 !important;
 }
 
-.pkt-color-bg-brand-neutrals-200 {
+.pkt-color-bg-brand-neutrals-100 {
   background-color: #f2f2f2 !important;
 }
 
-.pkt-color-txt-brand-neutrals-200 {
+.pkt-color-txt-brand-neutrals-100 {
   color: #f2f2f2 !important;
 }
 
-.pkt-color-border-brand-neutrals-200 {
+.pkt-color-border-brand-neutrals-100 {
   border-color: #f2f2f2 !important;
 }
 
+.pkt-color-bg-brand-neutrals-200 {
+  background-color: #e6e6e6 !important;
+}
+
+.pkt-color-txt-brand-neutrals-200 {
+  color: #e6e6e6 !important;
+}
+
+.pkt-color-border-brand-neutrals-200 {
+  border-color: #e6e6e6 !important;
+}
+
+.pkt-color-bg-brand-neutrals-300 {
+  background-color: #cccccc !important;
+}
+
+.pkt-color-txt-brand-neutrals-300 {
+  color: #cccccc !important;
+}
+
+.pkt-color-border-brand-neutrals-300 {
+  border-color: #cccccc !important;
+}
+
+.pkt-color-bg-brand-neutrals-400 {
+  background-color: #b3b3b3 !important;
+}
+
+.pkt-color-txt-brand-neutrals-400 {
+  color: #b3b3b3 !important;
+}
+
+.pkt-color-border-brand-neutrals-400 {
+  border-color: #b3b3b3 !important;
+}
+
+.pkt-color-bg-brand-neutrals-500 {
+  background-color: #9a9a9a !important;
+}
+
+.pkt-color-txt-brand-neutrals-500 {
+  color: #9a9a9a !important;
+}
+
+.pkt-color-border-brand-neutrals-500 {
+  border-color: #9a9a9a !important;
+}
+
+.pkt-color-bg-brand-neutrals-600 {
+  background-color: #808080 !important;
+}
+
+.pkt-color-txt-brand-neutrals-600 {
+  color: #808080 !important;
+}
+
+.pkt-color-border-brand-neutrals-600 {
+  border-color: #808080 !important;
+}
+
+.pkt-color-bg-brand-neutrals-700 {
+  background-color: #666666 !important;
+}
+
+.pkt-color-txt-brand-neutrals-700 {
+  color: #666666 !important;
+}
+
+.pkt-color-border-brand-neutrals-700 {
+  border-color: #666666 !important;
+}
+
+.pkt-color-bg-brand-neutrals-800 {
+  background-color: #4d4d4d !important;
+}
+
+.pkt-color-txt-brand-neutrals-800 {
+  color: #4d4d4d !important;
+}
+
+.pkt-color-border-brand-neutrals-800 {
+  border-color: #4d4d4d !important;
+}
+
+.pkt-color-bg-brand-neutrals-900 {
+  background-color: #333333 !important;
+}
+
+.pkt-color-txt-brand-neutrals-900 {
+  color: #333333 !important;
+}
+
+.pkt-color-border-brand-neutrals-900 {
+  border-color: #333333 !important;
+}
+
 .pkt-color-bg-brand-neutrals-1000 {
   background-color: #2c2c2c !important;
 }
@@ -730,6 +826,18 @@
   border-color: var(--pkt-color-surface-default-light-green) !important;
 }
 
+.pkt-color-bg-surface-default-pale-blue {
+  background-color: var(--pkt-color-surface-default-pale-blue) !important;
+}
+
+.pkt-color-txt-surface-default-pale-blue {
+  color: var(--pkt-color-surface-default-pale-blue) !important;
+}
+
+.pkt-color-border-surface-default-pale-blue {
+  border-color: var(--pkt-color-surface-default-pale-blue) !important;
+}
+
 .pkt-color-bg-surface-default-red {
   background-color: var(--pkt-color-surface-default-red) !important;
 }
@@ -886,6 +994,18 @@
   border-color: var(--pkt-color-surface-subtle-light-red) !important;
 }
 
+.pkt-color-bg-surface-subtle-gray {
+  background-color: var(--pkt-color-surface-subtle-gray) !important;
+}
+
+.pkt-color-txt-surface-subtle-gray {
+  color: var(--pkt-color-surface-subtle-gray) !important;
+}
+
+.pkt-color-border-surface-subtle-gray {
+  border-color: var(--pkt-color-surface-subtle-gray) !important;
+}
+
 .pkt-color-bg-surface-subtle-pale-blue {
   background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
 }
@@ -1030,6 +1150,18 @@
   border-color: var(--pkt-color-input-background-disabled) !important;
 }
 
+.pkt-color-bg-input-background-open {
+  background-color: var(--pkt-color-input-background-open) !important;
+}
+
+.pkt-color-txt-input-background-open {
+  color: var(--pkt-color-input-background-open) !important;
+}
+
+.pkt-color-border-input-background-open {
+  border-color: var(--pkt-color-input-background-open) !important;
+}
+
 .pkt-color-bg-input-border-active {
   background-color: var(--pkt-color-input-border-active) !important;
 }
@@ -1162,6 +1294,54 @@
   border-color: var(--pkt-color-input-text-open) !important;
 }
 
+.pkt-color-bg-tag-text-normal {
+  background-color: var(--pkt-color-tag-text-normal) !important;
+}
+
+.pkt-color-txt-tag-text-normal {
+  color: var(--pkt-color-tag-text-normal) !important;
+}
+
+.pkt-color-border-tag-text-normal {
+  border-color: var(--pkt-color-tag-text-normal) !important;
+}
+
+.pkt-color-bg-tag-text-hover {
+  background-color: var(--pkt-color-tag-text-hover) !important;
+}
+
+.pkt-color-txt-tag-text-hover {
+  color: var(--pkt-color-tag-text-hover) !important;
+}
+
+.pkt-color-border-tag-text-hover {
+  border-color: var(--pkt-color-tag-text-hover) !important;
+}
+
+.pkt-color-bg-tag-text-active {
+  background-color: var(--pkt-color-tag-text-active) !important;
+}
+
+.pkt-color-txt-tag-text-active {
+  color: var(--pkt-color-tag-text-active) !important;
+}
+
+.pkt-color-border-tag-text-active {
+  border-color: var(--pkt-color-tag-text-active) !important;
+}
+
+.pkt-color-bg-tag-text-focus {
+  background-color: var(--pkt-color-tag-text-focus) !important;
+}
+
+.pkt-color-txt-tag-text-focus {
+  color: var(--pkt-color-tag-text-focus) !important;
+}
+
+.pkt-color-border-tag-text-focus {
+  border-color: var(--pkt-color-tag-text-focus) !important;
+}
+
 .pkt-color-bg-input-check-background {
   background-color: var(--pkt-color-input-check-background) !important;
 }
@@ -1210,6 +1390,414 @@
   border-color: var(--pkt-color-input-check-text-hover) !important;
 }
 
+.pkt-color-bg-button-primary-background-normal {
+  background-color: var(--pkt-color-button-primary-background-normal) !important;
+}
+
+.pkt-color-txt-button-primary-background-normal {
+  color: var(--pkt-color-button-primary-background-normal) !important;
+}
+
+.pkt-color-border-button-primary-background-normal {
+  border-color: var(--pkt-color-button-primary-background-normal) !important;
+}
+
+.pkt-color-bg-button-primary-background-hover {
+  background-color: var(--pkt-color-button-primary-background-hover) !important;
+}
+
+.pkt-color-txt-button-primary-background-hover {
+  color: var(--pkt-color-button-primary-background-hover) !important;
+}
+
+.pkt-color-border-button-primary-background-hover {
+  border-color: var(--pkt-color-button-primary-background-hover) !important;
+}
+
+.pkt-color-bg-button-primary-background-focus {
+  background-color: var(--pkt-color-button-primary-background-focus) !important;
+}
+
+.pkt-color-txt-button-primary-background-focus {
+  color: var(--pkt-color-button-primary-background-focus) !important;
+}
+
+.pkt-color-border-button-primary-background-focus {
+  border-color: var(--pkt-color-button-primary-background-focus) !important;
+}
+
+.pkt-color-bg-button-primary-background-active {
+  background-color: var(--pkt-color-button-primary-background-active) !important;
+}
+
+.pkt-color-txt-button-primary-background-active {
+  color: var(--pkt-color-button-primary-background-active) !important;
+}
+
+.pkt-color-border-button-primary-background-active {
+  border-color: var(--pkt-color-button-primary-background-active) !important;
+}
+
+.pkt-color-bg-button-primary-background-disabled {
+  background-color: var(--pkt-color-button-primary-background-disabled) !important;
+}
+
+.pkt-color-txt-button-primary-background-disabled {
+  color: var(--pkt-color-button-primary-background-disabled) !important;
+}
+
+.pkt-color-border-button-primary-background-disabled {
+  border-color: var(--pkt-color-button-primary-background-disabled) !important;
+}
+
+.pkt-color-bg-button-primary-background-success {
+  background-color: var(--pkt-color-button-primary-background-success) !important;
+}
+
+.pkt-color-txt-button-primary-background-success {
+  color: var(--pkt-color-button-primary-background-success) !important;
+}
+
+.pkt-color-border-button-primary-background-success {
+  border-color: var(--pkt-color-button-primary-background-success) !important;
+}
+
+.pkt-color-bg-button-primary-background-danger {
+  background-color: var(--pkt-color-button-primary-background-danger) !important;
+}
+
+.pkt-color-txt-button-primary-background-danger {
+  color: var(--pkt-color-button-primary-background-danger) !important;
+}
+
+.pkt-color-border-button-primary-background-danger {
+  border-color: var(--pkt-color-button-primary-background-danger) !important;
+}
+
+.pkt-color-bg-button-primary-border-focus {
+  background-color: var(--pkt-color-button-primary-border-focus) !important;
+}
+
+.pkt-color-txt-button-primary-border-focus {
+  color: var(--pkt-color-button-primary-border-focus) !important;
+}
+
+.pkt-color-border-button-primary-border-focus {
+  border-color: var(--pkt-color-button-primary-border-focus) !important;
+}
+
+.pkt-color-bg-button-primary-text-normal {
+  background-color: var(--pkt-color-button-primary-text-normal) !important;
+}
+
+.pkt-color-txt-button-primary-text-normal {
+  color: var(--pkt-color-button-primary-text-normal) !important;
+}
+
+.pkt-color-border-button-primary-text-normal {
+  border-color: var(--pkt-color-button-primary-text-normal) !important;
+}
+
+.pkt-color-bg-button-primary-text-hover {
+  background-color: var(--pkt-color-button-primary-text-hover) !important;
+}
+
+.pkt-color-txt-button-primary-text-hover {
+  color: var(--pkt-color-button-primary-text-hover) !important;
+}
+
+.pkt-color-border-button-primary-text-hover {
+  border-color: var(--pkt-color-button-primary-text-hover) !important;
+}
+
+.pkt-color-bg-button-primary-text-focus {
+  background-color: var(--pkt-color-button-primary-text-focus) !important;
+}
+
+.pkt-color-txt-button-primary-text-focus {
+  color: var(--pkt-color-button-primary-text-focus) !important;
+}
+
+.pkt-color-border-button-primary-text-focus {
+  border-color: var(--pkt-color-button-primary-text-focus) !important;
+}
+
+.pkt-color-bg-button-primary-text-active {
+  background-color: var(--pkt-color-button-primary-text-active) !important;
+}
+
+.pkt-color-txt-button-primary-text-active {
+  color: var(--pkt-color-button-primary-text-active) !important;
+}
+
+.pkt-color-border-button-primary-text-active {
+  border-color: var(--pkt-color-button-primary-text-active) !important;
+}
+
+.pkt-color-bg-button-primary-text-disabled {
+  background-color: var(--pkt-color-button-primary-text-disabled) !important;
+}
+
+.pkt-color-txt-button-primary-text-disabled {
+  color: var(--pkt-color-button-primary-text-disabled) !important;
+}
+
+.pkt-color-border-button-primary-text-disabled {
+  border-color: var(--pkt-color-button-primary-text-disabled) !important;
+}
+
+.pkt-color-bg-button-secondary-background-hover {
+  background-color: var(--pkt-color-button-secondary-background-hover) !important;
+}
+
+.pkt-color-txt-button-secondary-background-hover {
+  color: var(--pkt-color-button-secondary-background-hover) !important;
+}
+
+.pkt-color-border-button-secondary-background-hover {
+  border-color: var(--pkt-color-button-secondary-background-hover) !important;
+}
+
+.pkt-color-bg-button-secondary-background-active {
+  background-color: var(--pkt-color-button-secondary-background-active) !important;
+}
+
+.pkt-color-txt-button-secondary-background-active {
+  color: var(--pkt-color-button-secondary-background-active) !important;
+}
+
+.pkt-color-border-button-secondary-background-active {
+  border-color: var(--pkt-color-button-secondary-background-active) !important;
+}
+
+.pkt-color-bg-button-secondary-background-disabled {
+  background-color: var(--pkt-color-button-secondary-background-disabled) !important;
+}
+
+.pkt-color-txt-button-secondary-background-disabled {
+  color: var(--pkt-color-button-secondary-background-disabled) !important;
+}
+
+.pkt-color-border-button-secondary-background-disabled {
+  border-color: var(--pkt-color-button-secondary-background-disabled) !important;
+}
+
+.pkt-color-bg-button-secondary-border-normal {
+  background-color: var(--pkt-color-button-secondary-border-normal) !important;
+}
+
+.pkt-color-txt-button-secondary-border-normal {
+  color: var(--pkt-color-button-secondary-border-normal) !important;
+}
+
+.pkt-color-border-button-secondary-border-normal {
+  border-color: var(--pkt-color-button-secondary-border-normal) !important;
+}
+
+.pkt-color-bg-button-secondary-border-yellow {
+  background-color: var(--pkt-color-button-secondary-border-yellow) !important;
+}
+
+.pkt-color-txt-button-secondary-border-yellow {
+  color: var(--pkt-color-button-secondary-border-yellow) !important;
+}
+
+.pkt-color-border-button-secondary-border-yellow {
+  border-color: var(--pkt-color-button-secondary-border-yellow) !important;
+}
+
+.pkt-color-bg-button-secondary-border-focus {
+  background-color: var(--pkt-color-button-secondary-border-focus) !important;
+}
+
+.pkt-color-txt-button-secondary-border-focus {
+  color: var(--pkt-color-button-secondary-border-focus) !important;
+}
+
+.pkt-color-border-button-secondary-border-focus {
+  border-color: var(--pkt-color-button-secondary-border-focus) !important;
+}
+
+.pkt-color-bg-button-secondary-text-normal {
+  background-color: var(--pkt-color-button-secondary-text-normal) !important;
+}
+
+.pkt-color-txt-button-secondary-text-normal {
+  color: var(--pkt-color-button-secondary-text-normal) !important;
+}
+
+.pkt-color-border-button-secondary-text-normal {
+  border-color: var(--pkt-color-button-secondary-text-normal) !important;
+}
+
+.pkt-color-bg-button-secondary-text-hover {
+  background-color: var(--pkt-color-button-secondary-text-hover) !important;
+}
+
+.pkt-color-txt-button-secondary-text-hover {
+  color: var(--pkt-color-button-secondary-text-hover) !important;
+}
+
+.pkt-color-border-button-secondary-text-hover {
+  border-color: var(--pkt-color-button-secondary-text-hover) !important;
+}
+
+.pkt-color-bg-button-secondary-text-focus {
+  background-color: var(--pkt-color-button-secondary-text-focus) !important;
+}
+
+.pkt-color-txt-button-secondary-text-focus {
+  color: var(--pkt-color-button-secondary-text-focus) !important;
+}
+
+.pkt-color-border-button-secondary-text-focus {
+  border-color: var(--pkt-color-button-secondary-text-focus) !important;
+}
+
+.pkt-color-bg-button-secondary-text-active {
+  background-color: var(--pkt-color-button-secondary-text-active) !important;
+}
+
+.pkt-color-txt-button-secondary-text-active {
+  color: var(--pkt-color-button-secondary-text-active) !important;
+}
+
+.pkt-color-border-button-secondary-text-active {
+  border-color: var(--pkt-color-button-secondary-text-active) !important;
+}
+
+.pkt-color-bg-button-secondary-text-disabled {
+  background-color: var(--pkt-color-button-secondary-text-disabled) !important;
+}
+
+.pkt-color-txt-button-secondary-text-disabled {
+  color: var(--pkt-color-button-secondary-text-disabled) !important;
+}
+
+.pkt-color-border-button-secondary-text-disabled {
+  border-color: var(--pkt-color-button-secondary-text-disabled) !important;
+}
+
+.pkt-color-bg-button-tertiary-background-hover {
+  background-color: var(--pkt-color-button-tertiary-background-hover) !important;
+}
+
+.pkt-color-txt-button-tertiary-background-hover {
+  color: var(--pkt-color-button-tertiary-background-hover) !important;
+}
+
+.pkt-color-border-button-tertiary-background-hover {
+  border-color: var(--pkt-color-button-tertiary-background-hover) !important;
+}
+
+.pkt-color-bg-button-tertiary-background-focus {
+  background-color: var(--pkt-color-button-tertiary-background-focus) !important;
+}
+
+.pkt-color-txt-button-tertiary-background-focus {
+  color: var(--pkt-color-button-tertiary-background-focus) !important;
+}
+
+.pkt-color-border-button-tertiary-background-focus {
+  border-color: var(--pkt-color-button-tertiary-background-focus) !important;
+}
+
+.pkt-color-bg-button-tertiary-background-active {
+  background-color: var(--pkt-color-button-tertiary-background-active) !important;
+}
+
+.pkt-color-txt-button-tertiary-background-active {
+  color: var(--pkt-color-button-tertiary-background-active) !important;
+}
+
+.pkt-color-border-button-tertiary-background-active {
+  border-color: var(--pkt-color-button-tertiary-background-active) !important;
+}
+
+.pkt-color-bg-button-tertiary-background-disabled {
+  background-color: var(--pkt-color-button-tertiary-background-disabled) !important;
+}
+
+.pkt-color-txt-button-tertiary-background-disabled {
+  color: var(--pkt-color-button-tertiary-background-disabled) !important;
+}
+
+.pkt-color-border-button-tertiary-background-disabled {
+  border-color: var(--pkt-color-button-tertiary-background-disabled) !important;
+}
+
+.pkt-color-bg-button-tertiary-border-focus {
+  background-color: var(--pkt-color-button-tertiary-border-focus) !important;
+}
+
+.pkt-color-txt-button-tertiary-border-focus {
+  color: var(--pkt-color-button-tertiary-border-focus) !important;
+}
+
+.pkt-color-border-button-tertiary-border-focus {
+  border-color: var(--pkt-color-button-tertiary-border-focus) !important;
+}
+
+.pkt-color-bg-button-tertiary-text-normal {
+  background-color: var(--pkt-color-button-tertiary-text-normal) !important;
+}
+
+.pkt-color-txt-button-tertiary-text-normal {
+  color: var(--pkt-color-button-tertiary-text-normal) !important;
+}
+
+.pkt-color-border-button-tertiary-text-normal {
+  border-color: var(--pkt-color-button-tertiary-text-normal) !important;
+}
+
+.pkt-color-bg-button-tertiary-text-hover {
+  background-color: var(--pkt-color-button-tertiary-text-hover) !important;
+}
+
+.pkt-color-txt-button-tertiary-text-hover {
+  color: var(--pkt-color-button-tertiary-text-hover) !important;
+}
+
+.pkt-color-border-button-tertiary-text-hover {
+  border-color: var(--pkt-color-button-tertiary-text-hover) !important;
+}
+
+.pkt-color-bg-button-tertiary-text-focus {
+  background-color: var(--pkt-color-button-tertiary-text-focus) !important;
+}
+
+.pkt-color-txt-button-tertiary-text-focus {
+  color: var(--pkt-color-button-tertiary-text-focus) !important;
+}
+
+.pkt-color-border-button-tertiary-text-focus {
+  border-color: var(--pkt-color-button-tertiary-text-focus) !important;
+}
+
+.pkt-color-bg-button-tertiary-text-active {
+  background-color: var(--pkt-color-button-tertiary-text-active) !important;
+}
+
+.pkt-color-txt-button-tertiary-text-active {
+  color: var(--pkt-color-button-tertiary-text-active) !important;
+}
+
+.pkt-color-border-button-tertiary-text-active {
+  border-color: var(--pkt-color-button-tertiary-text-active) !important;
+}
+
+.pkt-color-bg-button-tertiary-text-disabled {
+  background-color: var(--pkt-color-button-tertiary-text-disabled) !important;
+}
+
+.pkt-color-txt-button-tertiary-text-disabled {
+  color: var(--pkt-color-button-tertiary-text-disabled) !important;
+}
+
+.pkt-color-border-button-tertiary-text-disabled {
+  border-color: var(--pkt-color-button-tertiary-text-disabled) !important;
+}
+
 .bg-color-blue {
   background-color: #6fe9ff !important;
 }