@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/button/styles/button.css

@@ -0,0 +1,251 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-button-font-size: var(--jkl-body-font-size);
+  --jkl-button-line-height: 3rem;
+  --jkl-button-font-weight: 700;
+  --jkl-button-min-width: 6.5rem;
+  --jkl-button-padding: 0 1.5rem;
+  --jkl-button-tertiary-padding: 0 0.125rem;
+  --jkl-button-children-padding-with-icon: 0.125rem;
+  --jkl-button-tertiary-padding-with-icon: 0;
+  --jkl-button-focus-ring-placement: -0.3125rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-button-line-height: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-button-font-size: var(--jkl-small-font-size);
+  --jkl-button-line-height: 2rem;
+  --jkl-button-font-weight: 700;
+  --jkl-button-min-width: 4.75rem;
+  --jkl-button-padding: 0 0.75rem;
+  --jkl-button-tertiary-padding: 0 0.125rem;
+  --jkl-button-children-padding-with-icon: 0.125rem;
+  --jkl-button-tertiary-padding-with-icon: 0.125rem;
+  --jkl-button-focus-ring-placement: -0.1875rem;
+}
+
+a.jkl-button {
+  text-decoration: none;
+}
+
+.jkl-button {
+  --border-color: var(--jkl-color-background-action);
+  --text-color: var(--jkl-color-background-action);
+  --focus-color: var(--jkl-color-background-action);
+  --background-color: transparent;
+  display: inline-flex;
+  box-sizing: border-box;
+  justify-content: center;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-size: var(--jkl-button-font-size);
+  line-height: var(--jkl-button-line-height);
+  font-weight: var(--jkl-button-font-weight);
+  height: var(--jkl-button-line-height);
+  min-width: var(--jkl-button-min-width);
+  cursor: pointer;
+  user-select: none;
+  overflow: visible;
+  position: relative;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transform-origin: 50% 90%;
+  transition-property: transform, background-color;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-button:active, .jkl-button:hover, .jkl-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-button:active, .jkl-button:hover, .jkl-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-button:focus-visible, html:not([data-touchnavigation]) .jkl-button:hover {
+  transform: scale(1.05);
+}
+html:not([data-mousenavigation]) .jkl-button:active, html:not([data-touchnavigation]) .jkl-button:active, .jkl-button:active {
+  transform: scale(1);
+}
+.jkl-button:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+html[data-touchnavigation] .jkl-button--pressed {
+  transform: scale(0.95);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.jkl-button__content {
+  height: var(--jkl-button-line-height);
+  overflow: hidden;
+}
+.jkl-button__slider {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: transform;
+}
+.jkl-button__slider--show-loader {
+  transform: translateY(-51%);
+}
+.jkl-button__loader {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  height: var(--jkl-button-line-height);
+}
+.jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
+  border: solid 0.0625rem var(--border-color);
+  border-radius: 999px;
+  padding: var(--jkl-button-padding);
+}
+.jkl-button--primary::before, .jkl-button--secondary::before, .jkl-button--ghost::before {
+  content: "";
+  position: absolute;
+  border-radius: 999px;
+  inset: 0;
+}
+html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed::before, html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed::before, html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed::before {
+  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-flash-ugcc57p;
+}
+.jkl-button--ghost {
+  --border-color: transparent;
+  border-radius: 0.25rem;
+  padding: 0 0.25rem;
+}
+.jkl-button--ghost:focus-visible, html:not([data-touchnavigation]) .jkl-button--ghost:hover {
+  --background-color: var(--jkl-color-background-interactive-hover);
+  transform: scale(1);
+}
+.jkl-button--ghost.jkl-button--icon-left .jkl-button__children {
+  padding-left: var(--jkl-button-children-padding-with-icon);
+}
+.jkl-button--ghost.jkl-button--icon-right .jkl-button__children {
+  padding-right: var(--jkl-button-children-padding-with-icon);
+}
+.jkl-button--primary {
+  --background-color: var(--jkl-color-background-action);
+  --text-color: var(--jkl-color-text-on-action);
+}
+.jkl-button--secondary {
+  transition-property: box-shadow, transform, background-color;
+}
+.jkl-button--secondary:hover, .jkl-button--secondary:focus-visible, html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed {
+  box-shadow: inset 0 0 0 1px var(--border-color), inset 0 0 0 1px var(--border-color);
+}
+.jkl-button--tertiary {
+  border-bottom: solid 0.0625rem var(--border-color);
+  border-top: solid 0.0625rem transparent;
+  padding: var(--jkl-button-tertiary-padding);
+  transition: transform 100ms cubic-bezier(0.6, 0.2, 0.35, 1), border 100ms cubic-bezier(0.6, 0.2, 0.35, 1);
+  min-width: unset;
+}
+.jkl-button--tertiary::before {
+  content: "";
+  pointer-events: none;
+  display: block;
+  position: absolute;
+  left: var(--jkl-touch-xcoord, 50%);
+  top: var(--jkl-touch-ycoord, 50%);
+  transform: translate3d(-50%, -50%, 0);
+  border-radius: 100%;
+  width: 1rem;
+  height: 1rem;
+  background-color: transparent;
+}
+html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed::before {
+  animation: cubic-bezier(0, 0, 0.375, 1.17) 400ms jkl-tertiary-flash-ugcc587;
+}
+.jkl-button--tertiary:focus-visible {
+  border: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-button--tertiary:focus-visible {
+    border: revert;
+  }
+}
+.jkl-button--tertiary:hover, .jkl-button--tertiary:focus-visible, html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed {
+  border-bottom-color: var(--focus-color);
+  border-bottom-width: 0.125rem;
+  color: var(--focus-color);
+}
+.jkl-button--icon-left .jkl-button__icon, .jkl-button--icon-right .jkl-button__icon {
+  display: inline-block;
+  vertical-align: sub;
+}
+.jkl-button--icon-left {
+  padding-left: 0.5rem;
+}
+.jkl-button--icon-left .jkl-button__children {
+  padding-left: var(--jkl-button-children-padding-with-icon);
+}
+.jkl-button--icon-left.jkl-button--tertiary {
+  padding-left: var(--jkl-button-tertiary-padding-with-icon);
+}
+.jkl-button--icon-right {
+  padding-right: 0.5rem;
+}
+.jkl-button--icon-right .jkl-button__children {
+  padding-right: var(--jkl-button-children-padding-with-icon);
+}
+.jkl-button--icon-right.jkl-button--tertiary {
+  padding-right: var(--jkl-button-tertiary-padding-with-icon);
+}
+@media screen and (forced-colors: active) {
+  .jkl-button.jkl-button--primary:not(a), .jkl-button.jkl-button--secondary:not(a), .jkl-button.jkl-button--primary:hover:not(a), .jkl-button.jkl-button--secondary:hover:not(a), .jkl-button.jkl-button--primary:focus:not(a), .jkl-button.jkl-button--secondary:focus:not(a) {
+    border-color: ButtonText;
+  }
+  .jkl-button .jkl-loader__dot {
+    background-color: ButtonText;
+  }
+  .jkl-button.jkl-button--tertiary {
+    outline-offset: 0.125rem;
+    border-top-style: none;
+    border-right-style: none;
+    border-left-style: none;
+  }
+}
+
+@keyframes jkl-flash-ugcc57p {
+  0% {
+    box-shadow: 0 0 0 0 var(--focus-color);
+    opacity: 0.5;
+  }
+  100% {
+    box-shadow: 0 0 0 1rem var(--focus-color);
+    opacity: 0;
+  }
+}
+@keyframes jkl-tertiary-flash-ugcc587 {
+  0% {
+    box-shadow: 0 0 0 0 var(--focus-color);
+    background-color: var(--focus-color);
+    opacity: 0.5;
+  }
+  100% {
+    box-shadow: 0 0 0 2.5rem var(--focus-color);
+    background-color: var(--focus-color);
+    opacity: 0;
+  }
+}

package/src/components/button/styles/button.min.css

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:var(--jkl-body-font-size);--jkl-button-line-height:3rem;--jkl-button-font-weight:700;--jkl-button-min-width:6.5rem;--jkl-button-padding:0 1.5rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0;--jkl-button-focus-ring-placement:-0.3125rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-line-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:var(--jkl-small-font-size);--jkl-button-line-height:2rem;--jkl-button-font-weight:700;--jkl-button-min-width:4.75rem;--jkl-button-padding:0 0.75rem;--jkl-button-tertiary-padding:0 0.125rem;--jkl-button-children-padding-with-icon:0.125rem;--jkl-button-tertiary-padding-with-icon:0.125rem;--jkl-button-focus-ring-placement:-0.1875rem}a.jkl-button{text-decoration:none}.jkl-button{--border-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-background-action);--focus-color:var(--jkl-color-background-action);--background-color:#0000;background-color:var(--background-color);border-style:none;box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-size:var(--jkl-button-font-size);font-weight:var(--jkl-button-font-weight);height:var(--jkl-button-line-height);justify-content:center;line-height:var(--jkl-button-line-height);min-width:var(--jkl-button-min-width);overflow:visible;position:relative;transform-origin:50% 90%;transition-duration:.15s;transition-property:transform,background-color;transition-timing-function:ease;-webkit-user-select:none;user-select:none}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-button{border-style:revert}.jkl-button,.jkl-button:active,.jkl-button:focus,.jkl-button:hover{outline:revert;outline-style:revert}}.jkl-button:focus-visible,html:not([data-touchnavigation]) .jkl-button:hover{transform:scale(1.05)}.jkl-button:active,html:not([data-mousenavigation]) .jkl-button:active,html:not([data-touchnavigation]) .jkl-button:active{transform:scale(1)}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}html[data-touchnavigation] .jkl-button--pressed{-webkit-tap-highlight-color:rgba(0,0,0,0);transform:scale(.95)}.jkl-button__content{height:var(--jkl-button-line-height);overflow:hidden}.jkl-button__slider{transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-button__slider--show-loader{transform:translateY(-51%)}.jkl-button__loader{align-items:center;display:flex;height:var(--jkl-button-line-height);justify-content:center;padding:0}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{border:.0625rem solid var(--border-color);border-radius:999px;padding:var(--jkl-button-padding)}.jkl-button--ghost:before,.jkl-button--primary:before,.jkl-button--secondary:before{border-radius:999px;content:"";inset:0;position:absolute}html[data-touchnavigation] .jkl-button--ghost.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--primary.jkl-button--pressed:before,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed:before{animation:jkl-flash-ugcc57p .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--ghost{--border-color:#0000;border-radius:.25rem;padding:0 .25rem}.jkl-button--ghost:focus-visible,html:not([data-touchnavigation]) .jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover);transform:scale(1)}.jkl-button--ghost.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--ghost.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary{transition-property:box-shadow,transform,background-color}.jkl-button--secondary:focus-visible,.jkl-button--secondary:hover,html[data-touchnavigation] .jkl-button--secondary.jkl-button--pressed{box-shadow:inset 0 0 0 1px var(--border-color),inset 0 0 0 1px var(--border-color)}.jkl-button--tertiary{border-bottom:.0625rem solid var(--border-color);border-top:.0625rem solid #0000;min-width:unset;padding:var(--jkl-button-tertiary-padding);transition:transform .1s cubic-bezier(.6,.2,.35,1),border .1s cubic-bezier(.6,.2,.35,1)}.jkl-button--tertiary:before{background-color:initial;border-radius:100%;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform:translate3d(-50%,-50%,0);width:1rem}html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed:before{animation:jkl-tertiary-flash-ugcc587 .4s cubic-bezier(0,0,.375,1.17)}.jkl-button--tertiary:focus-visible{border:none}@media screen and (forced-colors:active){.jkl-button--tertiary:focus-visible{border:revert}}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:hover,html[data-touchnavigation] .jkl-button--tertiary.jkl-button--pressed{border-bottom-color:var(--focus-color);border-bottom-width:.125rem;color:var(--focus-color)}.jkl-button--icon-left .jkl-button__icon,.jkl-button--icon-right .jkl-button__icon{display:inline-block;vertical-align:sub}.jkl-button--icon-left{padding-left:.5rem}.jkl-button--icon-left .jkl-button__children{padding-left:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-left.jkl-button--tertiary{padding-left:var(--jkl-button-tertiary-padding-with-icon)}.jkl-button--icon-right{padding-right:.5rem}.jkl-button--icon-right .jkl-button__children{padding-right:var(--jkl-button-children-padding-with-icon)}.jkl-button--icon-right.jkl-button--tertiary{padding-right:var(--jkl-button-tertiary-padding-with-icon)}@media screen and (forced-colors:active){.jkl-button.jkl-button--primary:focus:not(a),.jkl-button.jkl-button--primary:hover:not(a),.jkl-button.jkl-button--primary:not(a),.jkl-button.jkl-button--secondary:focus:not(a),.jkl-button.jkl-button--secondary:hover:not(a),.jkl-button.jkl-button--secondary:not(a){border-color:ButtonText}.jkl-button .jkl-loader__dot{background-color:ButtonText}.jkl-button.jkl-button--tertiary{border-left-style:none;border-right-style:none;border-top-style:none;outline-offset:.125rem}}@keyframes jkl-flash-ugcc57p{0%{box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{box-shadow:0 0 0 1rem var(--focus-color);opacity:0}}@keyframes jkl-tertiary-flash-ugcc587{0%{background-color:var(--focus-color);box-shadow:0 0 0 0 var(--focus-color);opacity:.5}to{background-color:var(--focus-color);box-shadow:0 0 0 2.5rem var(--focus-color);opacity:0}}

package/src/components/button/styles/button.scss

@@ -0,0 +1,294 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+
+$_animation-timing: jkl.timing("snappy") jkl.easing("focus");
+$_flash-animation-name: jkl-flash-#{string.unique-id()};
+$_tertiary-flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
+$_hover-elevation-distance: -0.25rem;
+
+$_button-border-width: jkl.rem(1px);
+$_focus-ring-distance: jkl.rem(4px);
+$_focus-ring-width: jkl.rem(2px);
+
+@include jkl.comfortable-density-variables {
+    --jkl-button-font-size: var(--jkl-body-font-size);
+    --jkl-button-line-height: #{jkl.rem(48px)};
+    --jkl-button-font-weight: #{jkl.$typography-weight-bold};
+    --jkl-button-min-width: #{jkl.rem(104px)};
+    --jkl-button-padding: 0 #{jkl.$spacing-24};
+    --jkl-button-tertiary-padding: 0 #{jkl.$spacing-2};
+    --jkl-button-children-padding-with-icon: #{jkl.$spacing-2};
+    --jkl-button-tertiary-padding-with-icon: 0;
+    --jkl-button-focus-ring-placement: -#{($_button-border-width + $_focus-ring-distance)};
+
+    @include jkl.small-device {
+        --jkl-button-line-height: #{jkl.rem(44px)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-button-font-size: var(--jkl-small-font-size);
+    --jkl-button-line-height: #{jkl.rem(32px)};
+    --jkl-button-font-weight: #{jkl.$typography-weight-bold};
+    --jkl-button-min-width: #{jkl.rem(76px)};
+    --jkl-button-padding: 0 #{jkl.$spacing-12};
+    --jkl-button-tertiary-padding: 0 #{jkl.$spacing-2};
+    --jkl-button-children-padding-with-icon: #{jkl.$spacing-2};
+    --jkl-button-tertiary-padding-with-icon: #{jkl.$spacing-2};
+    --jkl-button-focus-ring-placement: -#{($_button-border-width + calc($_focus-ring-distance / 2))};
+}
+
+a.jkl-button {
+    text-decoration: none;
+}
+
+.jkl-button {
+    --border-color: var(--jkl-color-background-action);
+    --text-color: var(--jkl-color-background-action);
+    --focus-color: var(--jkl-color-background-action);
+    --background-color: transparent;
+
+    display: inline-flex;
+    box-sizing: border-box;
+    justify-content: center;
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+
+    @include jkl.use-font-variables("jkl-button");
+
+    height: var(--jkl-button-line-height);
+    min-width: var(--jkl-button-min-width);
+    cursor: pointer;
+    user-select: none;
+    overflow: visible;
+    position: relative;
+
+    @include jkl.motion;
+    transform-origin: 50% 90%;
+    transition-property: transform, background-color;
+
+    @include jkl.reset-outline;
+
+    &:focus-visible,
+    html:not([data-touchnavigation]) &:hover {
+        transform: scale(1.05);
+    }
+
+    html:not([data-mousenavigation]) &:active,
+    html:not([data-touchnavigation]) &:active,
+    &:active {
+        transform: scale(1);
+    }
+
+    &:focus-visible {
+        @include jkl.focus-outline;
+    }
+
+    html[data-touchnavigation] &--pressed {
+        transform: scale(0.95);
+        -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+    }
+
+    &__content {
+        height: var(--jkl-button-line-height);
+        overflow: hidden;
+    }
+
+    &__slider {
+        @include jkl.motion;
+        transition-property: transform;
+
+        &--show-loader {
+            transform: translateY(-51%);
+        }
+    }
+
+    &__loader {
+        display: flex;
+        padding: 0;
+        align-items: center;
+        justify-content: center;
+        height: var(--jkl-button-line-height);
+    }
+
+    // ********* VARIANTS *********
+
+    &--primary,
+    &--secondary,
+    &--ghost {
+        border: solid $_button-border-width var(--border-color);
+        border-radius: 999px;
+        padding: var(--jkl-button-padding);
+
+        &::before {
+            content: "";
+            position: absolute;
+            border-radius: 999px;
+            inset: 0;
+        }
+
+        html[data-touchnavigation] &.jkl-button--pressed::before {
+            animation: jkl.easing("easeInBounceOut") jkl.timing("lazy") $_flash-animation-name;
+        }
+    }
+
+    &--ghost {
+        --border-color: transparent;
+        border-radius: jkl.rem(4px);
+        padding: 0 jkl.$spacing-4;
+
+        &:focus-visible,
+        html:not([data-touchnavigation]) &:hover {
+            --background-color: var(--jkl-color-background-interactive-hover);
+            transform: scale(1);
+        }
+
+        &.jkl-button--icon-left .jkl-button__children {
+            padding-left: var(--jkl-button-children-padding-with-icon);
+        }
+
+        &.jkl-button--icon-right .jkl-button__children {
+            padding-right: var(--jkl-button-children-padding-with-icon);
+        }
+    }
+
+    &--primary {
+        --background-color: var(--jkl-color-background-action);
+        --text-color: var(--jkl-color-text-on-action);
+    }
+
+    &--secondary {
+        transition-property: box-shadow, transform, background-color;
+
+        &:hover,
+        &:focus-visible,
+        html[data-touchnavigation] &.jkl-button--pressed {
+            box-shadow: inset 0 0 0 1px var(--border-color), inset 0 0 0 1px var(--border-color);
+        }
+    }
+
+    &--tertiary {
+        border-bottom: solid $_button-border-width var(--border-color);
+        border-top: solid $_button-border-width transparent;
+        padding: var(--jkl-button-tertiary-padding);
+        transition: transform $_animation-timing, border $_animation-timing;
+        min-width: unset;
+
+        // Base for touch-effekt
+        &::before {
+            content: "";
+            pointer-events: none;
+            display: block;
+            position: absolute;
+            left: var(--jkl-touch-xcoord, 50%);
+            top: var(--jkl-touch-ycoord, 50%);
+            transform: translate3d(-50%, -50%, 0);
+            border-radius: 100%;
+            width: jkl.rem(16px);
+            height: jkl.rem(16px);
+            background-color: transparent;
+        }
+
+        html[data-touchnavigation] &.jkl-button--pressed::before {
+            animation: jkl.easing("easeInBounceOut") jkl.timing("lazy") $_tertiary-flash-animation-name;
+        }
+
+        &:focus-visible {
+            border: none;
+
+            @include jkl.forced-colors-mode {
+                border: revert;
+            }
+        }
+
+        &:hover,
+        &:focus-visible,
+        html[data-touchnavigation] &.jkl-button--pressed {
+            border-bottom-color: var(--focus-color);
+            border-bottom-width: $_focus-ring-width;
+            color: var(--focus-color);
+        }
+    }
+
+    &--icon-left,
+    &--icon-right {
+        .jkl-button__icon {
+            display: inline-block;
+            vertical-align: sub;
+        }
+    }
+
+    &--icon-left {
+        padding-left: jkl.$spacing-8;
+
+        .jkl-button__children {
+            padding-left: var(--jkl-button-children-padding-with-icon);
+        }
+
+        &.jkl-button--tertiary {
+            padding-left: var(--jkl-button-tertiary-padding-with-icon);
+        }
+    }
+
+    &--icon-right {
+        padding-right: jkl.$spacing-8;
+
+        .jkl-button__children {
+            padding-right: var(--jkl-button-children-padding-with-icon);
+        }
+
+        &.jkl-button--tertiary {
+            padding-right: var(--jkl-button-tertiary-padding-with-icon);
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        &.jkl-button--primary:not(a),
+        &.jkl-button--secondary:not(a),
+        &.jkl-button--primary:hover:not(a),
+        &.jkl-button--secondary:hover:not(a),
+        &.jkl-button--primary:focus:not(a),
+        &.jkl-button--secondary:focus:not(a) {
+            border-color: ButtonText;
+        }
+
+        & .jkl-loader__dot {
+            background-color: ButtonText;
+        }
+
+        &.jkl-button--tertiary {
+            outline-offset: jkl.$spacing-3xs;
+            border-top-style: none;
+            border-right-style: none;
+            border-left-style: none;
+        }
+    }
+}
+
+@keyframes #{$_flash-animation-name} {
+    0% {
+        box-shadow: 0 0 0 0 var(--focus-color);
+        opacity: 0.5;
+    }
+
+    100% {
+        box-shadow: 0 0 0 #{jkl.rem(16px)} var(--focus-color);
+        opacity: 0;
+    }
+}
+
+@keyframes #{$_tertiary-flash-animation-name} {
+    0% {
+        box-shadow: 0 0 0 0 var(--focus-color);
+        background-color: var(--focus-color);
+        opacity: 0.5;
+    }
+
+    100% {
+        box-shadow: 0 0 0 #{jkl.rem(40px)} var(--focus-color);
+        background-color: var(--focus-color);
+        opacity: 0;
+    }
+}

package/src/components/checkbox/styles/_index.scss

@@ -0,0 +1 @@
+@forward "checkbox";