@20minutes/hela 2.18.14 → 2.19.1

package/dist/scss/abstracts/mixins/_buttons.scss

@@ -0,0 +1,146 @@
+@use 'sass:map';
+@use '../functions' as *;
+@use '../variables' as *;
+
+// ── Button color schemes ────────────────────────────────────────────
+// Shared mixins consumed by both _button.scss and _icon-button.scss.
+// --button-scheme-color is the dominant color of the scheme.
+// Used by the ghost variant as text color (bg → text remapping).
+
+@mixin button-color-primary {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'primary', 'ultramarine')};
+  --button-base-background-color: #{map.get($token-variables, 'color', 'primary', 'ultramarine')};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-border-color: #{map.get($token-variables, 'color', 'primary', 'ultramarine')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'primary', 'ultramarine')};
+  --button-hover-background-opacity: 0.8;
+}
+
+@mixin button-color-secondary {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'greyscale', 'black')};
+  --button-base-background-color: #{map.get($token-variables, 'color', 'greyscale', 'black')};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-border-color: #{map.get($token-variables, 'color', 'greyscale', 'black')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'greyscale', 'black')};
+  --button-hover-background-opacity: 0.8;
+}
+
+@mixin button-color-tertiary {
+  --button-scheme-color: #{rgba(map.get($variables, 'color', 'greyscale', 'grey-900'), 0.6)};
+  --button-base-background-color: #{rgba(
+      map.get($variables, 'color', 'greyscale', 'grey-900'),
+      0.6
+    )};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-hover-background-color: #{rgba(
+      map.get($variables, 'color', 'greyscale', 'grey-900'),
+      0.8
+    )};
+  --button-base-border-width: 0;
+}
+
+@mixin button-color-translucent {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-background-color: transparent;
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-border-width: 1px;
+  --button-hover-background-color: #{rgba(map.get($variables, 'color', 'greyscale', 'white'), 0.1)};
+  --button-hover-background-opacity: 0.8;
+}
+
+@mixin button-color-dark {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-900')};
+  --button-base-background-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-900')};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-border-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-500')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-500')};
+  --button-hover-background-opacity: 1;
+}
+
+@mixin button-color-white {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-background-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-900')};
+  --button-base-border-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-hover-background-opacity: 0.8;
+}
+
+@mixin button-color-blue-ice {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'secondary', 'blue-ice')};
+  --button-base-background-color: #{map.get($token-variables, 'color', 'secondary', 'blue-ice')};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-900')};
+  --button-base-border-color: #{map.get($token-variables, 'color', 'secondary', 'blue-ice')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'secondary', 'blue-ice')};
+  --button-hover-background-opacity: 0.8;
+}
+
+// ── IconButton-specific color schemes ───────────────────────────────
+
+@mixin icon-button-color-default {
+  --button-scheme-color: var(--color-base);
+  --button-base-background-color: var(--color-background-1);
+  --button-base-color: var(--color-base);
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-100')};
+  --button-hover-background-opacity: 0.8;
+}
+
+@mixin button-color-blue-dark {
+  --button-scheme-color: #{map.get($token-variables, 'color', 'secondary', 'blue-grey')};
+  --button-base-background-color: #{map.get($token-variables, 'color', 'secondary', 'blue-grey')};
+  --button-base-color: #{map.get($token-variables, 'color', 'greyscale', 'white')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'secondary', 'blue-grey')};
+  --button-hover-background-opacity: 1;
+}
+
+// ── Variant mixins ──────────────────────────────────────────────────
+// Shared structural overrides consumed by both _button.scss and _icon-button.scss.
+
+@mixin button-variant-ghost {
+  --button-base-background-color: none;
+  --button-base-color: var(--button-scheme-color, inherit);
+  --button-base-border-width: 0;
+  --button-hover-background-color: transparent;
+  --button-hover-background-opacity: 0.6;
+}
+
+@mixin button-variant-outlined {
+  --button-base-background-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-50')};
+  --button-base-color: var(--button-scheme-color, inherit);
+  --button-base-border-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-200')};
+  --button-hover-background-color: #{map.get($token-variables, 'color', 'greyscale', 'grey-100')};
+  --button-base-border-width: 1px;
+  --button-hover-background-opacity: 1;
+}
+
+// ── State mixins ─────────────────────────────────────────────────────
+
+// we want to hide the text without adding a span around it, can't find a better solution
+// we want to keep the hover state
+// we want to keep the original button size
+@mixin button-is-loading($spinner-size: 24px) {
+  position: relative;
+  color: transparent;
+  background-color: var(--button-hover-background-color);
+  opacity: var(--button-hover-background-opacity);
+  pointer-events: none;
+
+  .c-icon,
+  .c-btn__counter { /* stylelint-disable-line -- kebab-case */
+    opacity: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: calc(50% - #{rem($spinner-size * 0.5)});
+    top: calc(50% - #{rem($spinner-size * 0.5)});
+    width: #{rem($spinner-size)};
+    height: #{rem($spinner-size)};
+    border: 2px solid var(--button-base-color);
+    border-bottom-color: var(--button-hover-background-color);
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+}

package/dist/scss/abstracts/mixins/_index.scss

@@ -1,2 +1,3 @@
+@forward 'buttons';
 @forward 'create-media-queries';
 @forward 'slider';

package/dist/scss/abstracts/variables/_token-variables.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 09:56:46 GMT
+ * Generated on Mon, 11 May 2026 11:45:07 GMT
  */
 
 $token-variables: (