@justeattakeaway/pie-icon-button 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.js +47 -39
  3. package/dist/react.d.ts +1 -1
  4. package/package.json +1 -1
  5. package/src/defs.ts +2 -1
  6. package/src/iconButton.scss +51 -42
package/dist/index.d.ts CHANGED
@@ -33,6 +33,6 @@ export declare class PieIconButton extends LitElement implements IconButtonProps
33
33
 
34
34
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
35
35
 
36
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
36
+ export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
37
37
 
38
38
  export { }
package/dist/index.js CHANGED
@@ -1,67 +1,75 @@
1
- import { unsafeCSS as h, LitElement as f, html as p } from "lit";
2
- import { property as d } from "lit/decorators.js";
3
- const b = (t, o, r) => function(n, a) {
4
- const e = `#${a}`;
5
- Object.defineProperty(n, a, {
1
+ import { unsafeCSS as f, LitElement as m, html as u } from "lit";
2
+ import { property as v } from "lit/decorators.js";
3
+ const b = (r, o, a) => function(t, e) {
4
+ const c = `#${e}`;
5
+ Object.defineProperty(t, e, {
6
6
  get() {
7
- return this[e];
7
+ return this[c];
8
8
  },
9
9
  set(l) {
10
- const u = this[e];
11
- o.includes(l) ? this[e] = l : (console.error(
12
- `<${t}> Invalid value "${l}" provided for property "${a}".`,
10
+ const h = this[c];
11
+ o.includes(l) ? this[c] = l : (console.error(
12
+ `<${r}> Invalid value "${l}" provided for property "${e}".`,
13
13
  `Must be one of: ${o.join(" | ")}.`,
14
- `Falling back to default value: "${r}"`
15
- ), this[e] = r), this.requestUpdate(a, u);
14
+ `Falling back to default value: "${a}"`
15
+ ), this[c] = a), this.requestUpdate(e, h);
16
16
  }
17
17
  });
18
18
  };
19
- function g(t, o) {
20
- customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, o);
19
+ function g(r, o) {
20
+ customElements.get(r) ? console.warn(`PIE Web Component: "${r}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(r, o);
21
21
  }
22
- const m = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-dimension);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-dimension)}}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=outline] .o-iconBtn{border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[disabled]{--btn-bg-color: var(--dt-color-disabled-01) !important;--btn-icon-fill: var(--dt-color-content-disabled) !important}.o-iconBtn[disabled] .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-iconBtn[disabled][variant=outline] .o-iconBtn{outline:none}.o-iconBtn[disabled][variant=ghost],.o-iconBtn[disabled][variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-secondary] .o-iconBtn{outline:none;border:none}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
23
- `, y = ["xsmall", "small", "medium", "large"], B = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
24
- var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, s = (t, o, r, i) => {
25
- for (var n = i > 1 ? void 0 : i ? z(o, r) : o, a = t.length - 1, e; a >= 0; a--)
26
- (e = t[a]) && (n = (i ? e(o, r, n) : e(n)) || n);
27
- return i && n && x(o, r, n), n;
22
+ const p = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
23
+ `, y = ["xsmall", "small", "medium", "large"], k = [
24
+ "primary",
25
+ "secondary",
26
+ "outline",
27
+ "ghost",
28
+ "ghost-secondary",
29
+ "inverse",
30
+ "ghost-inverse"
31
+ ];
32
+ var B = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (r, o, a, i) => {
33
+ for (var t = i > 1 ? void 0 : i ? x(o, a) : o, e = r.length - 1, c; e >= 0; e--)
34
+ (c = r[e]) && (t = (i ? c(o, a, t) : c(t)) || t);
35
+ return i && t && B(o, a, t), t;
28
36
  };
29
- const v = "pie-icon-button";
30
- class c extends f {
37
+ const s = "pie-icon-button";
38
+ class n extends m {
31
39
  constructor() {
32
40
  super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
33
41
  }
34
42
  render() {
35
43
  const {
36
44
  disabled: o,
37
- size: r,
45
+ size: a,
38
46
  variant: i
39
47
  } = this;
40
- return p`
48
+ return u`
41
49
  <button
42
50
  class="o-iconBtn"
43
- size=${r}
51
+ size=${a}
44
52
  variant=${i}
45
53
  ?disabled=${o}>
46
54
  <slot></slot>
47
55
  </button>`;
48
56
  }
49
57
  }
50
- c.styles = h(m);
51
- s([
52
- d(),
53
- b(v, y, "medium")
54
- ], c.prototype, "size", 2);
55
- s([
56
- d(),
57
- b(v, B, "primary")
58
- ], c.prototype, "variant", 2);
59
- s([
60
- d({ type: Boolean })
61
- ], c.prototype, "disabled", 2);
62
- g(v, c);
58
+ n.styles = f(p);
59
+ d([
60
+ v(),
61
+ b(s, y, "medium")
62
+ ], n.prototype, "size", 2);
63
+ d([
64
+ v(),
65
+ b(s, k, "primary")
66
+ ], n.prototype, "variant", 2);
67
+ d([
68
+ v({ type: Boolean })
69
+ ], n.prototype, "disabled", 2);
70
+ g(s, n);
63
71
  export {
64
- c as PieIconButton,
72
+ n as PieIconButton,
65
73
  y as sizes,
66
- B as variants
74
+ k as variants
67
75
  };
package/dist/react.d.ts CHANGED
@@ -36,6 +36,6 @@ declare class PieIconButton_2 extends LitElement implements IconButtonProps {
36
36
 
37
37
  export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
38
38
 
39
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
39
+ export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
40
40
 
41
41
  export { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "0.19.0",
3
+ "version": "0.20.0",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/defs.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
2
- export const variants = ['primary', 'secondary', 'outline', 'ghost', 'ghost-secondary'] as const;
2
+ export const variants = ['primary', 'secondary', 'outline', 'ghost',
3
+ 'ghost-secondary', 'inverse', 'ghost-inverse'] as const;
3
4
 
4
5
  export interface IconButtonProps {
5
6
  /**
package/src/iconButton.scss CHANGED
@@ -1,12 +1,25 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
2
 
3
- @mixin button-interactive-states($bg-color) {
3
+ @mixin button-interactive-states($bg-color, $mode: 'default') {
4
4
  &:hover:not(:disabled) {
5
- background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
5
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
6
+ --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
7
+
8
+ // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
9
+ @if $mode == 'transparent' {
10
+ --hover-modifier: var(--dt-color-hover-01);
11
+ --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
12
+ }
6
13
  }
7
14
 
8
15
  &:active:not(:disabled) {
9
- background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
16
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
17
+ --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
18
+
19
+ @if $mode == 'transparent' {
20
+ --active-modifier: var(--dt-color-active-01);
21
+ --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
22
+ }
10
23
  }
11
24
  }
12
25
 
@@ -22,27 +35,20 @@
22
35
  // Base button styles
23
36
  .o-iconBtn {
24
37
  --btn-border-radius: var(--dt-radius-rounded-e);
25
-
26
- // The following values set to default background and color
27
- // currently this sets the primary button styles
28
38
  --btn-bg-color: var(--dt-color-interactive-brand);
29
39
  --btn-icon-fill: var(--dt-color-content-interactive-primary);
30
- --btn-focus: var(--dt-color-focus-outer);
31
-
32
- min-block-size: var(--btn-dimension);
33
- aspect-ratio: 1 / 1;
34
40
 
35
- @supports not (aspect-ratio: 1 / 1) {
36
- min-inline-size: var(--btn-dimension);
37
- }
41
+ block-size: var(--btn-dimension);
42
+ inline-size: var(--btn-dimension);
38
43
 
39
- border: none;
44
+ border-color: var(--btn-border-color);
40
45
  border-radius: var(--btn-border-radius);
41
- outline: none;
42
46
  background-color: var(--btn-bg-color);
43
47
  color: var(--btn-icon-fill);
44
48
  cursor: pointer;
45
49
  user-select: none;
50
+ outline: none;
51
+ border: none;
46
52
 
47
53
  display: flex;
48
54
  align-items: center;
@@ -58,6 +64,8 @@
58
64
  }
59
65
 
60
66
  &[variant='primary'] {
67
+ /* Same as default styles */
68
+
61
69
  @include button-interactive-states('--dt-color-interactive-brand');
62
70
  }
63
71
 
@@ -69,54 +77,55 @@
69
77
  }
70
78
 
71
79
  &[variant='outline'] {
72
- --btn-bg-color: var(--dt-color-container-default);
80
+ --btn-bg-color: transparent;
73
81
  --btn-icon-fill: var(--dt-color-content-interactive-brand);
74
82
 
75
- & .o-iconBtn {
76
- border: 1px solid var(--dt-color-border-strong);
77
- }
83
+ border: 1px solid var(--dt-color-border-strong);
78
84
 
79
- @include button-interactive-states('--dt-color-container-default');
85
+ @include button-interactive-states('--dt-color-black', 'transparent');
80
86
  }
81
87
 
82
88
  &[variant='ghost'] {
83
- --btn-bg-color: var(--dt-color-container-default);
89
+ --btn-bg-color: transparent;
84
90
  --btn-icon-fill: var(--dt-color-content-interactive-brand);
85
91
 
86
- @include button-interactive-states('--dt-color-container-default');
92
+ @include button-interactive-states('--dt-color-black', 'transparent');
87
93
  }
88
94
 
89
95
  &[variant='ghost-secondary'] {
90
- --btn-bg-color: var(--dt-color-container-default);
96
+ --btn-bg-color: transparent;
91
97
  --btn-icon-fill: var(--dt-color-content-interactive-secondary);
92
98
 
93
- @include button-interactive-states('--dt-color-container-default');
99
+ @include button-interactive-states('--dt-color-black', 'transparent');
94
100
  }
95
101
 
96
- &[disabled] {
97
- --btn-bg-color: var(--dt-color-disabled-01) !important;
98
- --btn-icon-fill: var(--dt-color-content-disabled) !important;
102
+ &[variant='inverse'] {
103
+ --btn-bg-color: var(--dt-color-interactive-inverse);
104
+ --btn-icon-fill: var(--dt-color-content-interactive-brand);
99
105
 
100
- & .o-iconBtn {
101
- border: 1px solid var(--dt-color-disabled-01);
102
- cursor: not-allowed;
103
- }
106
+ @include button-interactive-states('--dt-color-interactive-inverse');
104
107
  }
105
108
 
106
- &[disabled][variant='outline'] {
107
- & .o-iconBtn {
108
- outline: none;
109
- }
109
+ &[variant='ghost-inverse'] {
110
+ --btn-bg-color: transparent;
111
+ --btn-icon-fill: var(--dt-color-content-inverse);
112
+
113
+ @include button-interactive-states('--dt-color-container-default', 'transparent');
110
114
  }
111
115
 
112
- &[disabled][variant='ghost'],
113
- &[disabled][variant='ghost-secondary'] {
114
- --btn-bg-color: transparent;
115
- --btn-icon-fill: var(--dt-color-content-default);
116
+ &[disabled] {
117
+ --btn-icon-fill: var(--dt-color-content-disabled);
118
+
119
+ cursor: not-allowed;
120
+
121
+ // For every variant (except ghost variants) set the disabled background color
122
+ &:not([variant='ghost'], [variant='ghost-secondary'], [variant='ghost-inverse']) {
123
+ --btn-bg-color: var(--dt-color-disabled-01);
124
+ }
116
125
 
117
- & .o-iconBtn {
118
- outline: none;
119
- border: none;
126
+ // For outline variants, set the border to the disabled color
127
+ &[variant='outline'] {
128
+ border-color: var(--dt-color-disabled-01);
120
129
  }
121
130
  }
122
131