@withlayers/components.button 0.7.1 → 0.8.1

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 (4) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/mixins.css +30 -134
  3. package/package.json +4 -5
  4. package/dist/tokens.json +0 -694
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:var(--l--theme--button--border--style);background-color:var(--l--theme--button--color--background--primary--on-default--rest);border-color:var(--l--theme--button--color--border--primary--on-default--rest);color:var(--l--theme--button--color--content--primary--on-default--rest)}.button:active{background-color:var(--l--theme--button--color--background--primary--on-default--active);border-color:var(--l--theme--button--color--border--primary--on-default--active);color:var(--l--theme--button--color--content--primary--on-default--active)}.button:focus-visible{background-color:var(--l--theme--button--color--background--primary--on-default--focus);border-color:var(--l--theme--button--color--border--primary--on-default--focus);color:var(--l--theme--button--color--content--primary--on-default--focus)}.button:hover{background-color:var(--l--theme--button--color--background--primary--on-default--hover);border-color:var(--l--theme--button--color--border--primary--on-default--hover);color:var(--l--theme--button--color--content--primary--on-default--hover)}.button:disabled{background-color:var(--l--theme--button--color--background--primary--on-default--disabled);border-color:var(--l--theme--button--color--border--primary--on-default--disabled);color:var(--l--theme--button--color--content--primary--on-default--disabled)}.button{border-radius:var(--l--theme--button--border--radius--md);border-width:var(--l--theme--button--border--width--md);padding-block:var(--l--theme--button--space--inset--block--md);padding-inline:var(--l--theme--button--space--inset--inline--md);font-family:var(--l--theme--typography--button--font-family--md);font-size:var(--l--theme--typography--button--font-size--md);font-style:var(--l--theme--typography--button--font-style--md);font-variant-caps:var(--l--theme--typography--button--font-variant-caps--md);font-weight:var(--l--theme--typography--button--font-weight--md);letter-spacing:var(--l--theme--typography--button--letter-spacing--md);line-height:var(--l--theme--typography--button--line-height--md);text-transform:var(--l--theme--typography--button--text-transform--md)}.button--xs{border-radius:var(--l--theme--button--border--radius--xs);border-width:var(--l--theme--button--border--width--xs);padding-block:var(--l--theme--button--space--inset--block--xs);padding-inline:var(--l--theme--button--space--inset--inline--xs);font-family:var(--l--theme--typography--button--font-family--xs);font-size:var(--l--theme--typography--button--font-size--xs);font-style:var(--l--theme--typography--button--font-style--xs);font-variant-caps:var(--l--theme--typography--button--font-variant-caps--xs);font-weight:var(--l--theme--typography--button--font-weight--xs);letter-spacing:var(--l--theme--typography--button--letter-spacing--xs);line-height:var(--l--theme--typography--button--line-height--xs);text-transform:var(--l--theme--typography--button--text-transform--xs)}.button--sm{border-radius:var(--l--theme--button--border--radius--sm);border-width:var(--l--theme--button--border--width--sm);padding-block:var(--l--theme--button--space--inset--block--sm);padding-inline:var(--l--theme--button--space--inset--inline--sm);font-family:var(--l--theme--typography--button--font-family--sm);font-size:var(--l--theme--typography--button--font-size--sm);font-style:var(--l--theme--typography--button--font-style--sm);font-variant-caps:var(--l--theme--typography--button--font-variant-caps--sm);font-weight:var(--l--theme--typography--button--font-weight--sm);letter-spacing:var(--l--theme--typography--button--letter-spacing--sm);line-height:var(--l--theme--typography--button--line-height--sm);text-transform:var(--l--theme--typography--button--text-transform--sm)}.button--md{border-radius:var(--l--theme--button--border--radius--md);border-width:var(--l--theme--button--border--width--md);padding-block:var(--l--theme--button--space--inset--block--md);padding-inline:var(--l--theme--button--space--inset--inline--md);font-family:var(--l--theme--typography--button--font-family--md);font-size:var(--l--theme--typography--button--font-size--md);font-style:var(--l--theme--typography--button--font-style--md);font-variant-caps:var(--l--theme--typography--button--font-variant-caps--md);font-weight:var(--l--theme--typography--button--font-weight--md);letter-spacing:var(--l--theme--typography--button--letter-spacing--md);line-height:var(--l--theme--typography--button--line-height--md);text-transform:var(--l--theme--typography--button--text-transform--md)}.button--lg{border-radius:var(--l--theme--button--border--radius--lg);border-width:var(--l--theme--button--border--width--lg);padding-block:var(--l--theme--button--space--inset--block--lg);padding-inline:var(--l--theme--button--space--inset--inline--lg);font-family:var(--l--theme--typography--button--font-family--lg);font-size:var(--l--theme--typography--button--font-size--lg);font-style:var(--l--theme--typography--button--font-style--lg);font-variant-caps:var(--l--theme--typography--button--font-variant-caps--lg);font-weight:var(--l--theme--typography--button--font-weight--lg);letter-spacing:var(--l--theme--typography--button--letter-spacing--lg);line-height:var(--l--theme--typography--button--line-height--lg);text-transform:var(--l--theme--typography--button--text-transform--lg)}.button--secondary{background-color:var(--l--theme--button--color--background--secondary--on-default--rest);border-color:var(--l--theme--button--color--border--secondary--on-default--rest);color:var(--l--theme--button--color--content--secondary--on-default--rest)}.button--secondary:active{background-color:var(--l--theme--button--color--background--secondary--on-default--active);border-color:var(--l--theme--button--color--border--secondary--on-default--active);color:var(--l--theme--button--color--content--secondary--on-default--active)}.button--secondary:focus-visible{background-color:var(--l--theme--button--color--background--secondary--on-default--focus);border-color:var(--l--theme--button--color--border--secondary--on-default--focus);color:var(--l--theme--button--color--content--secondary--on-default--focus)}.button--secondary:hover{background-color:var(--l--theme--button--color--background--secondary--on-default--hover);border-color:var(--l--theme--button--color--border--secondary--on-default--hover);color:var(--l--theme--button--color--content--secondary--on-default--hover)}.button--secondary:disabled{background-color:var(--l--theme--button--color--background--secondary--on-default--disabled);border-color:var(--l--theme--button--color--border--secondary--on-default--disabled);color:var(--l--theme--button--color--content--secondary--on-default--disabled)}.button--tertiary{background-color:var(--l--theme--button--color--background--tertiary--on-default--rest);border-color:var(--l--theme--button--color--border--tertiary--on-default--rest);color:var(--l--theme--button--color--content--tertiary--on-default--rest)}.button--tertiary:active{background-color:var(--l--theme--button--color--background--tertiary--on-default--active);border-color:var(--l--theme--button--color--border--tertiary--on-default--active);color:var(--l--theme--button--color--content--tertiary--on-default--active)}.button--tertiary:focus-visible{background-color:var(--l--theme--button--color--background--tertiary--on-default--focus);border-color:var(--l--theme--button--color--border--tertiary--on-default--focus);color:var(--l--theme--button--color--content--tertiary--on-default--focus)}.button--tertiary:hover{background-color:var(--l--theme--button--color--background--tertiary--on-default--hover);border-color:var(--l--theme--button--color--border--tertiary--on-default--hover);color:var(--l--theme--button--color--content--tertiary--on-default--hover)}.button--tertiary:disabled{background-color:var(--l--theme--button--color--background--tertiary--on-default--disabled);border-color:var(--l--theme--button--color--border--tertiary--on-default--disabled);color:var(--l--theme--button--color--content--tertiary--on-default--disabled)}.button--destructive{background-color:var(--l--theme--button--color--background--destructive--on-default--rest);border-color:var(--l--theme--button--color--border--destructive--on-default--rest);color:var(--l--theme--button--color--content--destructive--on-default--rest)}.button--destructive:active{background-color:var(--l--theme--button--color--background--destructive--on-default--active);border-color:var(--l--theme--button--color--border--destructive--on-default--active);color:var(--l--theme--button--color--content--destructive--on-default--active)}.button--destructive:focus-visible{background-color:var(--l--theme--button--color--background--destructive--on-default--focus);border-color:var(--l--theme--button--color--border--destructive--on-default--focus);color:var(--l--theme--button--color--content--destructive--on-default--focus)}.button--destructive:hover{background-color:var(--l--theme--button--color--background--destructive--on-default--hover);border-color:var(--l--theme--button--color--border--destructive--on-default--hover);color:var(--l--theme--button--color--content--destructive--on-default--hover)}.button--destructive:disabled{background-color:var(--l--theme--button--color--background--destructive--on-default--disabled);border-color:var(--l--theme--button--color--border--destructive--on-default--disabled);color:var(--l--theme--button--color--content--destructive--on-default--disabled)}
1
+ .button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--l--theme--border--interactive--radius--md);border-style:var(--l--theme--border--interactive--style);border-width:var(--l--theme--border--interactive--width--md);padding-block:var(--l--theme--space--interactive--inset--block--md);padding-inline:var(--l--theme--space--interactive--inset--inline--md);font-family:var(--l--theme--typography--interactive--font-family--md);font-size:var(--l--theme--typography--interactive--font-size--md);font-style:var(--l--theme--typography--interactive--font-style--md);font-variant-caps:var(--l--theme--typography--interactive--font-variant-caps--md);font-weight:var(--l--theme--typography--interactive--font-weight--md);letter-spacing:var(--l--theme--typography--interactive--letter-spacing--md);line-height:var(--l--theme--typography--interactive--line-height--md);text-transform:var(--l--theme--typography--interactive--text-transform--md);background-color:var(--l--theme--color--interactive--background--primary--on-default--rest);border-color:var(--l--theme--color--interactive--border--primary--on-default--rest);color:var(--l--theme--color--interactive--content--primary--on-default--rest)}.button:active{background-color:var(--l--theme--color--interactive--background--primary--on-default--active);border-color:var(--l--theme--color--interactive--border--primary--on-default--active);color:var(--l--theme--color--interactive--content--primary--on-default--active)}.button:focus-visible{background-color:var(--l--theme--color--interactive--background--primary--on-default--focus);border-color:var(--l--theme--color--interactive--border--primary--on-default--focus);color:var(--l--theme--color--interactive--content--primary--on-default--focus)}.button:hover{background-color:var(--l--theme--color--interactive--background--primary--on-default--hover);border-color:var(--l--theme--color--interactive--border--primary--on-default--hover);color:var(--l--theme--color--interactive--content--primary--on-default--hover)}.button:disabled{background-color:var(--l--theme--color--interactive--background--primary--on-default--disabled);border-color:var(--l--theme--color--interactive--border--primary--on-default--disabled);color:var(--l--theme--color--interactive--content--primary--on-default--disabled)}.button--lg{border-radius:var(--l--theme--border--interactive--radius--lg);border-style:var(--l--theme--border--interactive--style);border-width:var(--l--theme--border--interactive--width--lg);padding-block:var(--l--theme--space--interactive--inset--block--lg);padding-inline:var(--l--theme--space--interactive--inset--inline--lg);font-family:var(--l--theme--typography--interactive--font-family--lg);font-size:var(--l--theme--typography--interactive--font-size--lg);font-style:var(--l--theme--typography--interactive--font-style--lg);font-variant-caps:var(--l--theme--typography--interactive--font-variant-caps--lg);font-weight:var(--l--theme--typography--interactive--font-weight--lg);letter-spacing:var(--l--theme--typography--interactive--letter-spacing--lg);line-height:var(--l--theme--typography--interactive--line-height--lg);text-transform:var(--l--theme--typography--interactive--text-transform--lg)}.button--md{border-radius:var(--l--theme--border--interactive--radius--md);border-style:var(--l--theme--border--interactive--style);border-width:var(--l--theme--border--interactive--width--md);padding-block:var(--l--theme--space--interactive--inset--block--md);padding-inline:var(--l--theme--space--interactive--inset--inline--md);font-family:var(--l--theme--typography--interactive--font-family--md);font-size:var(--l--theme--typography--interactive--font-size--md);font-style:var(--l--theme--typography--interactive--font-style--md);font-variant-caps:var(--l--theme--typography--interactive--font-variant-caps--md);font-weight:var(--l--theme--typography--interactive--font-weight--md);letter-spacing:var(--l--theme--typography--interactive--letter-spacing--md);line-height:var(--l--theme--typography--interactive--line-height--md);text-transform:var(--l--theme--typography--interactive--text-transform--md)}.button--sm{border-radius:var(--l--theme--border--interactive--radius--sm);border-style:var(--l--theme--border--interactive--style);border-width:var(--l--theme--border--interactive--width--sm);padding-block:var(--l--theme--space--interactive--inset--block--sm);padding-inline:var(--l--theme--space--interactive--inset--inline--sm);font-family:var(--l--theme--typography--interactive--font-family--sm);font-size:var(--l--theme--typography--interactive--font-size--sm);font-style:var(--l--theme--typography--interactive--font-style--sm);font-variant-caps:var(--l--theme--typography--interactive--font-variant-caps--sm);font-weight:var(--l--theme--typography--interactive--font-weight--sm);letter-spacing:var(--l--theme--typography--interactive--letter-spacing--sm);line-height:var(--l--theme--typography--interactive--line-height--sm);text-transform:var(--l--theme--typography--interactive--text-transform--sm)}.button--xs{border-radius:var(--l--theme--border--interactive--radius--xs);border-style:var(--l--theme--border--interactive--style);border-width:var(--l--theme--border--interactive--width--xs);padding-block:var(--l--theme--space--interactive--inset--block--xs);padding-inline:var(--l--theme--space--interactive--inset--inline--xs);font-family:var(--l--theme--typography--interactive--font-family--xs);font-size:var(--l--theme--typography--interactive--font-size--xs);font-style:var(--l--theme--typography--interactive--font-style--xs);font-variant-caps:var(--l--theme--typography--interactive--font-variant-caps--xs);font-weight:var(--l--theme--typography--interactive--font-weight--xs);letter-spacing:var(--l--theme--typography--interactive--letter-spacing--xs);line-height:var(--l--theme--typography--interactive--line-height--xs);text-transform:var(--l--theme--typography--interactive--text-transform--xs)}.button--destructive{background-color:var(--l--theme--color--interactive--background--destructive--on-default--rest);border-color:var(--l--theme--color--interactive--border--destructive--on-default--rest);color:var(--l--theme--color--interactive--content--destructive--on-default--rest)}.button--destructive:active{background-color:var(--l--theme--color--interactive--background--destructive--on-default--active);border-color:var(--l--theme--color--interactive--border--destructive--on-default--active);color:var(--l--theme--color--interactive--content--destructive--on-default--active)}.button--destructive:focus-visible{background-color:var(--l--theme--color--interactive--background--destructive--on-default--focus);border-color:var(--l--theme--color--interactive--border--destructive--on-default--focus);color:var(--l--theme--color--interactive--content--destructive--on-default--focus)}.button--destructive:hover{background-color:var(--l--theme--color--interactive--background--destructive--on-default--hover);border-color:var(--l--theme--color--interactive--border--destructive--on-default--hover);color:var(--l--theme--color--interactive--content--destructive--on-default--hover)}.button--destructive:disabled{background-color:var(--l--theme--color--interactive--background--destructive--on-default--disabled);border-color:var(--l--theme--color--interactive--border--destructive--on-default--disabled);color:var(--l--theme--color--interactive--content--destructive--on-default--disabled)}.button--primary{background-color:var(--l--theme--color--interactive--background--primary--on-default--rest);border-color:var(--l--theme--color--interactive--border--primary--on-default--rest);color:var(--l--theme--color--interactive--content--primary--on-default--rest)}.button--primary:active{background-color:var(--l--theme--color--interactive--background--primary--on-default--active);border-color:var(--l--theme--color--interactive--border--primary--on-default--active);color:var(--l--theme--color--interactive--content--primary--on-default--active)}.button--primary:focus-visible{background-color:var(--l--theme--color--interactive--background--primary--on-default--focus);border-color:var(--l--theme--color--interactive--border--primary--on-default--focus);color:var(--l--theme--color--interactive--content--primary--on-default--focus)}.button--primary:hover{background-color:var(--l--theme--color--interactive--background--primary--on-default--hover);border-color:var(--l--theme--color--interactive--border--primary--on-default--hover);color:var(--l--theme--color--interactive--content--primary--on-default--hover)}.button--primary:disabled{background-color:var(--l--theme--color--interactive--background--primary--on-default--disabled);border-color:var(--l--theme--color--interactive--border--primary--on-default--disabled);color:var(--l--theme--color--interactive--content--primary--on-default--disabled)}.button--secondary{background-color:var(--l--theme--color--interactive--background--secondary--on-default--rest);border-color:var(--l--theme--color--interactive--border--secondary--on-default--rest);color:var(--l--theme--color--interactive--content--secondary--on-default--rest)}.button--secondary:active{background-color:var(--l--theme--color--interactive--background--secondary--on-default--active);border-color:var(--l--theme--color--interactive--border--secondary--on-default--active);color:var(--l--theme--color--interactive--content--secondary--on-default--active)}.button--secondary:focus-visible{background-color:var(--l--theme--color--interactive--background--secondary--on-default--focus);border-color:var(--l--theme--color--interactive--border--secondary--on-default--focus);color:var(--l--theme--color--interactive--content--secondary--on-default--focus)}.button--secondary:hover{background-color:var(--l--theme--color--interactive--background--secondary--on-default--hover);border-color:var(--l--theme--color--interactive--border--secondary--on-default--hover);color:var(--l--theme--color--interactive--content--secondary--on-default--hover)}.button--secondary:disabled{background-color:var(--l--theme--color--interactive--background--secondary--on-default--disabled);border-color:var(--l--theme--color--interactive--border--secondary--on-default--disabled);color:var(--l--theme--color--interactive--content--secondary--on-default--disabled)}.button--tertiary{background-color:var(--l--theme--color--interactive--background--tertiary--on-default--rest);border-color:var(--l--theme--color--interactive--border--tertiary--on-default--rest);color:var(--l--theme--color--interactive--content--tertiary--on-default--rest)}.button--tertiary:active{background-color:var(--l--theme--color--interactive--background--tertiary--on-default--active);border-color:var(--l--theme--color--interactive--border--tertiary--on-default--active);color:var(--l--theme--color--interactive--content--tertiary--on-default--active)}.button--tertiary:focus-visible{background-color:var(--l--theme--color--interactive--background--tertiary--on-default--focus);border-color:var(--l--theme--color--interactive--border--tertiary--on-default--focus);color:var(--l--theme--color--interactive--content--tertiary--on-default--focus)}.button--tertiary:hover{background-color:var(--l--theme--color--interactive--background--tertiary--on-default--hover);border-color:var(--l--theme--color--interactive--border--tertiary--on-default--hover);color:var(--l--theme--color--interactive--content--tertiary--on-default--hover)}.button--tertiary:disabled{background-color:var(--l--theme--color--interactive--background--tertiary--on-default--disabled);border-color:var(--l--theme--color--interactive--border--tertiary--on-default--disabled);color:var(--l--theme--color--interactive--content--tertiary--on-default--disabled)}
package/dist/mixins.css CHANGED
@@ -1,152 +1,48 @@
1
- @define-mixin button-core {
1
+ @import url('@withlayers/mixins/dist/index.css');
2
+
3
+ @define-mixin button {
2
4
  appearance: none;
3
- border-style: var(--l--theme--button--border--style);
4
- }
5
5
 
6
- @define-mixin button-shape-xs {
7
- border-radius: var(--l--theme--button--border--radius--xs);
8
- border-width: var(--l--theme--button--border--width--xs);
9
- padding-block: var(--l--theme--button--space--inset--block--xs);
10
- padding-inline: var(--l--theme--button--space--inset--inline--xs);
6
+ @mixin button--md;
7
+ @mixin button--primary;
11
8
  }
12
9
 
13
- @define-mixin button-shape-sm {
14
- border-radius: var(--l--theme--button--border--radius--sm);
15
- border-width: var(--l--theme--button--border--width--sm);
16
- padding-block: var(--l--theme--button--space--inset--block--sm);
17
- padding-inline: var(--l--theme--button--space--inset--inline--sm);
10
+ @define-mixin button--lg {
11
+ @mixin is-border-interactive-lg;
12
+ @mixin is-space-interactive-lg;
13
+ @mixin is-typography-interactive-lg;
18
14
  }
19
15
 
20
- @define-mixin button-shape-md {
21
- border-radius: var(--l--theme--button--border--radius--md);
22
- border-width: var(--l--theme--button--border--width--md);
23
- padding-block: var(--l--theme--button--space--inset--block--md);
24
- padding-inline: var(--l--theme--button--space--inset--inline--md);
16
+ @define-mixin button--md {
17
+ @mixin is-border-interactive-md;
18
+ @mixin is-space-interactive-md;
19
+ @mixin is-typography-interactive-md;
25
20
  }
26
21
 
27
- @define-mixin button-shape-lg {
28
- border-radius: var(--l--theme--button--border--radius--lg);
29
- border-width: var(--l--theme--button--border--width--lg);
30
- padding-block: var(--l--theme--button--space--inset--block--lg);
31
- padding-inline: var(--l--theme--button--space--inset--inline--lg);
22
+ @define-mixin button--sm {
23
+ @mixin is-border-interactive-sm;
24
+ @mixin is-space-interactive-sm;
25
+ @mixin is-typography-interactive-sm;
32
26
  }
33
27
 
34
- @define-mixin button-color-primary {
35
- background-color: var(--l--theme--button--color--background--primary--on-default--rest);
36
- border-color: var(--l--theme--button--color--border--primary--on-default--rest);
37
- color: var(--l--theme--button--color--content--primary--on-default--rest);
38
-
39
- &:active {
40
- background-color: var(--l--theme--button--color--background--primary--on-default--active);
41
- border-color: var(--l--theme--button--color--border--primary--on-default--active);
42
- color: var(--l--theme--button--color--content--primary--on-default--active);
43
- }
44
-
45
- &:focus-visible {
46
- background-color: var(--l--theme--button--color--background--primary--on-default--focus);
47
- border-color: var(--l--theme--button--color--border--primary--on-default--focus);
48
- color: var(--l--theme--button--color--content--primary--on-default--focus);
49
- }
50
-
51
- &:hover {
52
- background-color: var(--l--theme--button--color--background--primary--on-default--hover);
53
- border-color: var(--l--theme--button--color--border--primary--on-default--hover);
54
- color: var(--l--theme--button--color--content--primary--on-default--hover);
55
- }
56
-
57
- &:disabled {
58
- background-color: var(--l--theme--button--color--background--primary--on-default--disabled);
59
- border-color: var(--l--theme--button--color--border--primary--on-default--disabled);
60
- color: var(--l--theme--button--color--content--primary--on-default--disabled);
61
- }
28
+ @define-mixin button--xs {
29
+ @mixin is-border-interactive-xs;
30
+ @mixin is-space-interactive-xs;
31
+ @mixin is-typography-interactive-xs;
62
32
  }
63
33
 
64
- @define-mixin button-color-secondary {
65
- background-color: var(--l--theme--button--color--background--secondary--on-default--rest);
66
- border-color: var(--l--theme--button--color--border--secondary--on-default--rest);
67
- color: var(--l--theme--button--color--content--secondary--on-default--rest);
68
-
69
- &:active {
70
- background-color: var(--l--theme--button--color--background--secondary--on-default--active);
71
- border-color: var(--l--theme--button--color--border--secondary--on-default--active);
72
- color: var(--l--theme--button--color--content--secondary--on-default--active);
73
- }
74
-
75
- &:focus-visible {
76
- background-color: var(--l--theme--button--color--background--secondary--on-default--focus);
77
- border-color: var(--l--theme--button--color--border--secondary--on-default--focus);
78
- color: var(--l--theme--button--color--content--secondary--on-default--focus);
79
- }
80
-
81
- &:hover {
82
- background-color: var(--l--theme--button--color--background--secondary--on-default--hover);
83
- border-color: var(--l--theme--button--color--border--secondary--on-default--hover);
84
- color: var(--l--theme--button--color--content--secondary--on-default--hover);
85
- }
86
-
87
- &:disabled {
88
- background-color: var(--l--theme--button--color--background--secondary--on-default--disabled);
89
- border-color: var(--l--theme--button--color--border--secondary--on-default--disabled);
90
- color: var(--l--theme--button--color--content--secondary--on-default--disabled);
91
- }
34
+ @define-mixin button--destructive {
35
+ @mixin is-color-interactive-destructive;
92
36
  }
93
37
 
94
- @define-mixin button-color-tertiary {
95
- background-color: var(--l--theme--button--color--background--tertiary--on-default--rest);
96
- border-color: var(--l--theme--button--color--border--tertiary--on-default--rest);
97
- color: var(--l--theme--button--color--content--tertiary--on-default--rest);
98
-
99
- &:active {
100
- background-color: var(--l--theme--button--color--background--tertiary--on-default--active);
101
- border-color: var(--l--theme--button--color--border--tertiary--on-default--active);
102
- color: var(--l--theme--button--color--content--tertiary--on-default--active);
103
- }
104
-
105
- &:focus-visible {
106
- background-color: var(--l--theme--button--color--background--tertiary--on-default--focus);
107
- border-color: var(--l--theme--button--color--border--tertiary--on-default--focus);
108
- color: var(--l--theme--button--color--content--tertiary--on-default--focus);
109
- }
110
-
111
- &:hover {
112
- background-color: var(--l--theme--button--color--background--tertiary--on-default--hover);
113
- border-color: var(--l--theme--button--color--border--tertiary--on-default--hover);
114
- color: var(--l--theme--button--color--content--tertiary--on-default--hover);
115
- }
116
-
117
- &:disabled {
118
- background-color: var(--l--theme--button--color--background--tertiary--on-default--disabled);
119
- border-color: var(--l--theme--button--color--border--tertiary--on-default--disabled);
120
- color: var(--l--theme--button--color--content--tertiary--on-default--disabled);
121
- }
38
+ @define-mixin button--primary {
39
+ @mixin is-color-interactive-primary;
122
40
  }
123
41
 
124
- @define-mixin button-color-destructive {
125
- background-color: var(--l--theme--button--color--background--destructive--on-default--rest);
126
- border-color: var(--l--theme--button--color--border--destructive--on-default--rest);
127
- color: var(--l--theme--button--color--content--destructive--on-default--rest);
128
-
129
- &:active {
130
- background-color: var(--l--theme--button--color--background--destructive--on-default--active);
131
- border-color: var(--l--theme--button--color--border--destructive--on-default--active);
132
- color: var(--l--theme--button--color--content--destructive--on-default--active);
133
- }
134
-
135
- &:focus-visible {
136
- background-color: var(--l--theme--button--color--background--destructive--on-default--focus);
137
- border-color: var(--l--theme--button--color--border--destructive--on-default--focus);
138
- color: var(--l--theme--button--color--content--destructive--on-default--focus);
139
- }
140
-
141
- &:hover {
142
- background-color: var(--l--theme--button--color--background--destructive--on-default--hover);
143
- border-color: var(--l--theme--button--color--border--destructive--on-default--hover);
144
- color: var(--l--theme--button--color--content--destructive--on-default--hover);
145
- }
42
+ @define-mixin button--secondary {
43
+ @mixin is-color-interactive-secondary;
44
+ }
146
45
 
147
- &:disabled {
148
- background-color: var(--l--theme--button--color--background--destructive--on-default--disabled);
149
- border-color: var(--l--theme--button--color--border--destructive--on-default--disabled);
150
- color: var(--l--theme--button--color--content--destructive--on-default--disabled);
151
- }
46
+ @define-mixin button--tertiary {
47
+ @mixin is-color-interactive-tertiary;
152
48
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/components.button",
3
- "version": "0.7.1",
3
+ "version": "0.8.1",
4
4
  "description": "Button component",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
@@ -8,8 +8,7 @@
8
8
  "main": "dist/index.css",
9
9
  "exports": {
10
10
  ".": "./dist/index.css",
11
- "./mixins": "./dist/mixins.css",
12
- "./tokens": "./dist/tokens.json"
11
+ "./mixins": "./dist/mixins.css"
13
12
  },
14
13
  "files": [
15
14
  "dist"
@@ -21,8 +20,8 @@
21
20
  "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
22
21
  },
23
22
  "dependencies": {
24
- "@withlayers/mixins": "0.14.1",
25
- "@withlayers/tokens": "0.22.0"
23
+ "@withlayers/mixins": "0.15.1",
24
+ "@withlayers/tokens": "0.24.0"
26
25
  },
27
26
  "devDependencies": {
28
27
  "clsx": "^2.1.1",
package/dist/tokens.json DELETED
@@ -1,694 +0,0 @@
1
- {
2
- "button": {
3
- "$level": "component",
4
- "border": {
5
- "$level": "category",
6
- "style": {
7
- "$level": "property",
8
- "value": "{border.style.solid}"
9
- },
10
- "width": {
11
- "$level": "property",
12
- "xs": {
13
- "$level": "scale",
14
- "value": "{border.width.sm}"
15
- },
16
- "sm": {
17
- "$level": "scale",
18
- "value": "{border.width.sm}"
19
- },
20
- "md": {
21
- "$level": "scale",
22
- "value": "{border.width.sm}"
23
- },
24
- "lg": {
25
- "$level": "scale",
26
- "value": "{border.width.sm}"
27
- }
28
- },
29
- "radius": {
30
- "$level": "property",
31
- "xs": {
32
- "$level": "scale",
33
- "value": "{border.radius.md}"
34
- },
35
- "sm": {
36
- "$level": "scale",
37
- "value": "{border.radius.md}"
38
- },
39
- "md": {
40
- "$level": "scale",
41
- "value": "{border.radius.md}"
42
- },
43
- "lg": {
44
- "$level": "scale",
45
- "value": "{border.radius.md}"
46
- }
47
- }
48
- },
49
- "space": {
50
- "$level": "category",
51
- "inset": {
52
- "$level": "property",
53
- "block": {
54
- "$level": "subproperty",
55
- "xs": {
56
- "$level": "scale",
57
- "value": "{space.20}"
58
- },
59
- "sm": {
60
- "$level": "scale",
61
- "value": "{space.30}"
62
- },
63
- "md": {
64
- "$level": "scale",
65
- "value": "{space.40}"
66
- },
67
- "lg": {
68
- "$level": "scale",
69
- "value": "{space.50}"
70
- }
71
- },
72
- "inline": {
73
- "$level": "subproperty",
74
- "xs": {
75
- "$level": "scale",
76
- "value": "{space.40}"
77
- },
78
- "sm": {
79
- "$level": "scale",
80
- "value": "{space.50}"
81
- },
82
- "md": {
83
- "$level": "scale",
84
- "value": "{space.60}"
85
- },
86
- "lg": {
87
- "$level": "scale",
88
- "value": "{space.70}"
89
- }
90
- }
91
- }
92
- },
93
- "color": {
94
- "$level": "category",
95
- "background": {
96
- "$level": "property",
97
- "primary": {
98
- "$level": "variant",
99
- "on-default": {
100
- "$level": "mode",
101
- "rest": {
102
- "$level": "state",
103
- "value": "{color.neutral.100}"
104
- },
105
- "active": {
106
- "$level": "state",
107
- "value": "{color.neutral.80}"
108
- },
109
- "disabled": {
110
- "$level": "state",
111
- "value": "{color.neutral.80}"
112
- },
113
- "focus": {
114
- "$level": "state",
115
- "value": "{color.neutral.100}"
116
- },
117
- "hover": {
118
- "$level": "state",
119
- "value": "{color.neutral.80}"
120
- }
121
- },
122
- "on-knockout": {
123
- "$level": "mode",
124
- "rest": {
125
- "$level": "state",
126
- "value": "{color.neutral.0}"
127
- },
128
- "active": {
129
- "$level": "state",
130
- "value": "{color.neutral.10}"
131
- },
132
- "disabled": {
133
- "$level": "state",
134
- "value": "{color.neutral.10}"
135
- },
136
- "focus": {
137
- "$level": "state",
138
- "value": "{color.neutral.0}"
139
- },
140
- "hover": {
141
- "$level": "state",
142
- "value": "{color.neutral.10}"
143
- }
144
- }
145
- },
146
- "secondary": {
147
- "$level": "variant",
148
- "on-default": {
149
- "$level": "mode",
150
- "rest": {
151
- "$level": "state",
152
- "value": "{color.neutral.alpha.dark.0}"
153
- },
154
- "active": {
155
- "$level": "state",
156
- "value": "{color.neutral.alpha.dark.10}"
157
- },
158
- "disabled": {
159
- "$level": "state",
160
- "value": "{color.neutral.alpha.dark.0}"
161
- },
162
- "focus": {
163
- "$level": "state",
164
- "value": "{color.neutral.0}"
165
- },
166
- "hover": {
167
- "$level": "state",
168
- "value": "{color.neutral.alpha.dark.10}"
169
- }
170
- },
171
- "on-knockout": {
172
- "$level": "mode",
173
- "rest": {
174
- "$level": "state",
175
- "value": "{color.neutral.alpha.light.0}"
176
- },
177
- "active": {
178
- "$level": "state",
179
- "value": "{color.neutral.alpha.light.10}"
180
- },
181
- "disabled": {
182
- "$level": "state",
183
- "value": "{color.neutral.alpha.light.0}"
184
- },
185
- "focus": {
186
- "$level": "state",
187
- "value": "{color.neutral.90}"
188
- },
189
- "hover": {
190
- "$level": "state",
191
- "value": "{color.neutral.alpha.light.10}"
192
- }
193
- }
194
- },
195
- "tertiary": {
196
- "$level": "variant",
197
- "on-default": {
198
- "$level": "mode",
199
- "rest": {
200
- "$level": "state",
201
- "value": "{color.neutral.10}"
202
- },
203
- "active": {
204
- "$level": "state",
205
- "value": "{color.neutral.20}"
206
- },
207
- "disabled": {
208
- "$level": "state",
209
- "value": "{color.neutral.10}"
210
- },
211
- "focus": {
212
- "$level": "state",
213
- "value": "{color.neutral.20}"
214
- },
215
- "hover": {
216
- "$level": "state",
217
- "value": "{color.neutral.20}"
218
- }
219
- },
220
- "on-knockout": {
221
- "$level": "mode",
222
- "rest": {
223
- "$level": "state",
224
- "value": "{color.neutral.80}"
225
- },
226
- "active": {
227
- "$level": "state",
228
- "value": "{color.neutral.70}"
229
- },
230
- "disabled": {
231
- "$level": "state",
232
- "value": "{color.neutral.80}"
233
- },
234
- "focus": {
235
- "$level": "state",
236
- "value": "{color.neutral.70}"
237
- },
238
- "hover": {
239
- "$level": "state",
240
- "value": "{color.neutral.70}"
241
- }
242
- }
243
- },
244
- "destructive": {
245
- "$level": "variant",
246
- "on-default": {
247
- "$level": "mode",
248
- "rest": {
249
- "$level": "state",
250
- "value": "{color.red.70}"
251
- },
252
- "active": {
253
- "$level": "state",
254
- "value": "{color.red.60}"
255
- },
256
- "disabled": {
257
- "$level": "state",
258
- "value": "{color.red.40}"
259
- },
260
- "focus": {
261
- "$level": "state",
262
- "value": "{color.red.70}"
263
- },
264
- "hover": {
265
- "$level": "state",
266
- "value": "{color.red.60}"
267
- }
268
- },
269
- "on-knockout": {
270
- "$level": "mode",
271
- "rest": {
272
- "$level": "state",
273
- "value": "{color.red.30}"
274
- },
275
- "active": {
276
- "$level": "state",
277
- "value": "{color.red.40}"
278
- },
279
- "disabled": {
280
- "$level": "state",
281
- "value": "{color.red.50}"
282
- },
283
- "focus": {
284
- "$level": "state",
285
- "value": "{color.red.30}"
286
- },
287
- "hover": {
288
- "$level": "state",
289
- "value": "{color.red.40}"
290
- }
291
- }
292
- }
293
- },
294
- "border": {
295
- "$level": "property",
296
- "primary": {
297
- "$level": "variant",
298
- "on-default": {
299
- "$level": "mode",
300
- "rest": {
301
- "$level": "state",
302
- "value": "{color.neutral.100}"
303
- },
304
- "active": {
305
- "$level": "state",
306
- "value": "{color.neutral.80}"
307
- },
308
- "disabled": {
309
- "$level": "state",
310
- "value": "{color.neutral.80}"
311
- },
312
- "focus": {
313
- "$level": "state",
314
- "value": "{color.neutral.100}"
315
- },
316
- "hover": {
317
- "$level": "state",
318
- "value": "{color.neutral.80}"
319
- }
320
- },
321
- "on-knockout": {
322
- "$level": "mode",
323
- "rest": {
324
- "$level": "state",
325
- "value": "{color.neutral.0}"
326
- },
327
- "active": {
328
- "$level": "state",
329
- "value": "{color.neutral.10}"
330
- },
331
- "disabled": {
332
- "$level": "state",
333
- "value": "{color.neutral.10}"
334
- },
335
- "focus": {
336
- "$level": "state",
337
- "value": "{color.neutral.0}"
338
- },
339
- "hover": {
340
- "$level": "state",
341
- "value": "{color.neutral.10}"
342
- }
343
- }
344
- },
345
- "secondary": {
346
- "$level": "variant",
347
- "on-default": {
348
- "$level": "mode",
349
- "rest": {
350
- "$level": "state",
351
- "value": "{color.neutral.90}"
352
- },
353
- "active": {
354
- "$level": "state",
355
- "value": "{color.neutral.90}"
356
- },
357
- "disabled": {
358
- "$level": "state",
359
- "value": "{color.neutral.40}"
360
- },
361
- "focus": {
362
- "$level": "state",
363
- "value": "{color.neutral.90}"
364
- },
365
- "hover": {
366
- "$level": "state",
367
- "value": "{color.neutral.90}"
368
- }
369
- },
370
- "on-knockout": {
371
- "$level": "mode",
372
- "rest": {
373
- "$level": "state",
374
- "value": "{color.neutral.0}"
375
- },
376
- "active": {
377
- "$level": "state",
378
- "value": "{color.neutral.0}"
379
- },
380
- "disabled": {
381
- "$level": "state",
382
- "value": "{color.neutral.50}"
383
- },
384
- "focus": {
385
- "$level": "state",
386
- "value": "{color.neutral.0}"
387
- },
388
- "hover": {
389
- "$level": "state",
390
- "value": "{color.neutral.0}"
391
- }
392
- }
393
- },
394
- "tertiary": {
395
- "$level": "variant",
396
- "on-default": {
397
- "$level": "mode",
398
- "rest": {
399
- "$level": "state",
400
- "value": "{color.neutral.10}"
401
- },
402
- "active": {
403
- "$level": "state",
404
- "value": "{color.neutral.20}"
405
- },
406
- "disabled": {
407
- "$level": "state",
408
- "value": "{color.neutral.10}"
409
- },
410
- "focus": {
411
- "$level": "state",
412
- "value": "{color.neutral.20}"
413
- },
414
- "hover": {
415
- "$level": "state",
416
- "value": "{color.neutral.20}"
417
- }
418
- },
419
- "on-knockout": {
420
- "$level": "mode",
421
- "rest": {
422
- "$level": "state",
423
- "value": "{color.neutral.80}"
424
- },
425
- "active": {
426
- "$level": "state",
427
- "value": "{color.neutral.70}"
428
- },
429
- "disabled": {
430
- "$level": "state",
431
- "value": "{color.neutral.80}"
432
- },
433
- "focus": {
434
- "$level": "state",
435
- "value": "{color.neutral.70}"
436
- },
437
- "hover": {
438
- "$level": "state",
439
- "value": "{color.neutral.70}"
440
- }
441
- }
442
- },
443
- "destructive": {
444
- "$level": "variant",
445
- "on-default": {
446
- "$level": "mode",
447
- "rest": {
448
- "$level": "state",
449
- "value": "{color.red.70}"
450
- },
451
- "active": {
452
- "$level": "state",
453
- "value": "{color.red.60}"
454
- },
455
- "disabled": {
456
- "$level": "state",
457
- "value": "{color.red.40}"
458
- },
459
- "focus": {
460
- "$level": "state",
461
- "value": "{color.red.70}"
462
- },
463
- "hover": {
464
- "$level": "state",
465
- "value": "{color.red.60}"
466
- }
467
- },
468
- "on-knockout": {
469
- "$level": "mode",
470
- "rest": {
471
- "$level": "state",
472
- "value": "{color.red.30}"
473
- },
474
- "active": {
475
- "$level": "state",
476
- "value": "{color.red.40}"
477
- },
478
- "disabled": {
479
- "$level": "state",
480
- "value": "{color.red.50}"
481
- },
482
- "focus": {
483
- "$level": "state",
484
- "value": "{color.red.30}"
485
- },
486
- "hover": {
487
- "$level": "state",
488
- "value": "{color.red.40}"
489
- }
490
- }
491
- }
492
- },
493
- "content": {
494
- "$level": "property",
495
- "primary": {
496
- "$level": "variant",
497
- "on-default": {
498
- "$level": "mode",
499
- "rest": {
500
- "$level": "state",
501
- "value": "{color.neutral.10}"
502
- },
503
- "active": {
504
- "$level": "state",
505
- "value": "{color.neutral.10}"
506
- },
507
- "disabled": {
508
- "$level": "state",
509
- "value": "{color.neutral.40}"
510
- },
511
- "focus": {
512
- "$level": "state",
513
- "value": "{color.neutral.10}"
514
- },
515
- "hover": {
516
- "$level": "state",
517
- "value": "{color.neutral.10}"
518
- }
519
- },
520
- "on-knockout": {
521
- "$level": "mode",
522
- "rest": {
523
- "$level": "state",
524
- "value": "{color.neutral.90}"
525
- },
526
- "active": {
527
- "$level": "state",
528
- "value": "{color.neutral.90}"
529
- },
530
- "disabled": {
531
- "$level": "state",
532
- "value": "{color.neutral.50}"
533
- },
534
- "focus": {
535
- "$level": "state",
536
- "value": "{color.neutral.90}"
537
- },
538
- "hover": {
539
- "$level": "state",
540
- "value": "{color.neutral.90}"
541
- }
542
- }
543
- },
544
- "secondary": {
545
- "$level": "variant",
546
- "on-default": {
547
- "$level": "mode",
548
- "rest": {
549
- "$level": "state",
550
- "value": "{color.neutral.90}"
551
- },
552
- "active": {
553
- "$level": "state",
554
- "value": "{color.neutral.90}"
555
- },
556
- "disabled": {
557
- "$level": "state",
558
- "value": "{color.neutral.40}"
559
- },
560
- "focus": {
561
- "$level": "state",
562
- "value": "{color.neutral.90}"
563
- },
564
- "hover": {
565
- "$level": "state",
566
- "value": "{color.neutral.90}"
567
- }
568
- },
569
- "on-knockout": {
570
- "$level": "mode",
571
- "rest": {
572
- "$level": "state",
573
- "value": "{color.neutral.0}"
574
- },
575
- "active": {
576
- "$level": "state",
577
- "value": "{color.neutral.0}"
578
- },
579
- "disabled": {
580
- "$level": "state",
581
- "value": "{color.neutral.50}"
582
- },
583
- "focus": {
584
- "$level": "state",
585
- "value": "{color.neutral.0}"
586
- },
587
- "hover": {
588
- "$level": "state",
589
- "value": "{color.neutral.0}"
590
- }
591
- }
592
- },
593
- "tertiary": {
594
- "$level": "variant",
595
- "on-default": {
596
- "$level": "mode",
597
- "rest": {
598
- "$level": "state",
599
- "value": "{color.neutral.90}"
600
- },
601
- "active": {
602
- "$level": "state",
603
- "value": "{color.neutral.90}"
604
- },
605
- "disabled": {
606
- "$level": "state",
607
- "value": "{color.neutral.40}"
608
- },
609
- "focus": {
610
- "$level": "state",
611
- "value": "{color.neutral.90}"
612
- },
613
- "hover": {
614
- "$level": "state",
615
- "value": "{color.neutral.90}"
616
- }
617
- },
618
- "on-knockout": {
619
- "$level": "mode",
620
- "rest": {
621
- "$level": "state",
622
- "value": "{color.neutral.0}"
623
- },
624
- "active": {
625
- "$level": "state",
626
- "value": "{color.neutral.0}"
627
- },
628
- "disabled": {
629
- "$level": "state",
630
- "value": "{color.neutral.50}"
631
- },
632
- "focus": {
633
- "$level": "state",
634
- "value": "{color.neutral.0}"
635
- },
636
- "hover": {
637
- "$level": "state",
638
- "value": "{color.neutral.0}"
639
- }
640
- }
641
- },
642
- "destructive": {
643
- "$level": "variant",
644
- "on-default": {
645
- "$level": "mode",
646
- "rest": {
647
- "$level": "state",
648
- "value": "{color.red.10}"
649
- },
650
- "active": {
651
- "$level": "state",
652
- "value": "{color.red.10}"
653
- },
654
- "disabled": {
655
- "$level": "state",
656
- "value": "{color.red.20}"
657
- },
658
- "focus": {
659
- "$level": "state",
660
- "value": "{color.red.10}"
661
- },
662
- "hover": {
663
- "$level": "state",
664
- "value": "{color.red.10}"
665
- }
666
- },
667
- "on-knockout": {
668
- "$level": "mode",
669
- "rest": {
670
- "$level": "state",
671
- "value": "{color.red.90}"
672
- },
673
- "active": {
674
- "$level": "state",
675
- "value": "{color.red.90}"
676
- },
677
- "disabled": {
678
- "$level": "state",
679
- "value": "{color.red.70}"
680
- },
681
- "focus": {
682
- "$level": "state",
683
- "value": "{color.red.90}"
684
- },
685
- "hover": {
686
- "$level": "state",
687
- "value": "{color.red.90}"
688
- }
689
- }
690
- }
691
- }
692
- }
693
- }
694
- }