@sb1/ffe-buttons 20.0.6 → 21.0.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/css/buttons.css +9 -93
  2. package/less/base-button.less +5 -7
  3. package/less/buttons.less +0 -1
  4. package/less/inline-base-button.less +4 -3
  5. package/package.json +2 -2
  6. package/less/theme.less +0 -210
package/css/buttons.css CHANGED
@@ -1,86 +1,3 @@
1
- :root,
2
- :host {
3
- /** Buttons */
4
- /* Common button text color */
5
- --ffe-v-button-text-color: var(--ffe-color-component-button-primary-foreground-default);
6
- /* Button border radius renders as 50% */
7
- --ffe-v-buttons-border-radius: 6em;
8
- /* Button box shadow */
9
- --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus);
10
- /** Action button */
11
- --ffe-v-button-action-color: var(--ffe-color-component-button-action-fill-default);
12
- --ffe-v-button-action-color-hover: var(--ffe-color-component-button-action-fill-hover);
13
- --ffe-v-button-action-color-pressed: var(--ffe-color-component-button-action-fill-pressed);
14
- --ffe-v-button-action-color-text: var(--ffe-color-component-button-action-foreground-default);
15
- /** Primary button */
16
- --ffe-v-button-primary-color: var(--ffe-color-component-button-primary-fill-default);
17
- --ffe-v-button-primary-color-hover: var(--ffe-color-component-button-primary-fill-hover);
18
- --ffe-v-button-primary-color-pressed: var(--ffe-color-component-button-primary-fill-pressed);
19
- --ffe-v-button-primary-color-text: var(--ffe-color-component-button-primary-foreground-default);
20
- /** Secondary buttons (+ back, expand, etc) */
21
- --ffe-v-button-secondary-color: var(--ffe-color-component-button-secondary-fill-default);
22
- --ffe-v-button-secondary-border-color: var(--ffe-color-component-button-secondary-border-default);
23
- --ffe-v-button-secondary-color-text-hover: var(--ffe-color-component-button-secondary-foreground-hover);
24
- --ffe-v-button-secondary-color-bg-hover: var(--ffe-color-component-button-secondary-fill-hover);
25
- --ffe-v-button-secondary-color-bg-pressed: var(--ffe-color-component-button-secondary-fill-pressed);
26
- --ffe-v-button-secondary-color-text: var(--ffe-color-component-button-secondary-foreground-default);
27
- /** Tertiary button */
28
- --ffe-v-button-tertiary-color: var(--ffe-color-component-button-tertiary-fill-default);
29
- --ffe-v-button-tertiary-color-hover: var(--ffe-color-component-button-tertiary-fill-hover);
30
- --ffe-v-button-tertiary-color-pressed: var(--ffe-color-component-button-tertiary-fill-pressed);
31
- --ffe-v-button-tertiary-color-focus: var(--ffe-color-border-interactive-focus);
32
- /** Task button */
33
- --ffe-v-button-task-color: var(--ffe-color-component-button-secondary-fill-default);
34
- --ffe-v-button-task-color-hover: var(--ffe-color-component-button-secondary-fill-hover);
35
- --ffe-v-button-task-color-pressed: var(--ffe-color-component-button-secondary-fill-pressed);
36
- --ffe-v-button-task-color-border-hover: var(--ffe-color-component-button-secondary-border-hover);
37
- --ffe-v-button-task-color-border: var(--ffe-color-component-button-secondary-border-default);
38
- --ffe-v-button-task-color-text: var(--ffe-color-component-button-secondary-foreground-default);
39
- --ffe-v-button-task-color-text-hover: var(--ffe-color-component-button-secondary-foreground-hover);
40
- --ffe-v-button-task-color-icon: var(--ffe-color-component-button-secondary-foreground-default);
41
- --ffe-v-button-task-color-icon-hover: var(--ffe-color-component-button-secondary-foreground-hover);
42
- --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus);
43
- }
44
- @media (prefers-color-scheme: dark) {
45
- :root .regard-color-scheme-preference,
46
- :host .regard-color-scheme-preference {
47
- --ffe-v-button-text-color: var(--ffe-color-component-button-primary-foreground-default);
48
- --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus);
49
- /** Action button */
50
- --ffe-v-button-action-color: var(--ffe-color-component-button-action-fill-inverse);
51
- --ffe-v-button-action-color-hover: var(--ffe-color-component-button-action-fill-inverse-hover);
52
- --ffe-v-button-action-color-pressed: var(--ffe-color-component-button-action-fill-inverse-pressed);
53
- --ffe-v-button-action-color-text: var(--ffe-color-component-button-action-foreground-inverse);
54
- /** Primary button */
55
- --ffe-v-button-primary-color: var(--ffe-color-component-button-primary-fill-inverse);
56
- --ffe-v-button-primary-color-hover: var(--ffe-color-component-button-primary-fill-inverse-hover);
57
- --ffe-v-button-primary-color-pressed: var(--ffe-color-component-button-primary-fill-inverse-pressed);
58
- --ffe-v-button-primary-color-text: var(--ffe-color-component-button-primary-foreground-inverse);
59
- /** Secondary buttons (+ task, back, expand, etc) */
60
- --ffe-v-button-secondary-color: var(--ffe-color-component-button-secondary-fill-inverse);
61
- --ffe-v-button-secondary-border-color: var(--ffe-color-component-button-secondary-border-inverse);
62
- --ffe-v-button-secondary-color-text-hover: var(--ffe-color-component-button-secondary-foreground-inverse-hover);
63
- --ffe-v-button-secondary-color-bg-hover: var(--ffe-color-component-button-secondary-fill-inverse-hover);
64
- --ffe-v-button-secondary-color-bg-pressed: var(--ffe-color-component-button-secondary-fill-inverse-pressed);
65
- --ffe-v-button-secondary-color-text: var(--ffe-color-component-button-secondary-foreground-inverse);
66
- /** Tertiary button */
67
- --ffe-v-button-tertiary-color: var(--ffe-color-component-button-tertiary-fill-inverse);
68
- --ffe-v-button-tertiary-color-hover: var(--ffe-color-component-button-tertiary-fill-inverse-hover);
69
- --ffe-v-button-tertiary-color-pressed: var(--ffe-color-component-button-tertiary-fill-inverse-pressed);
70
- --ffe-v-button-tertiary-color-focus: var(--ffe-color-border-interactive-focus);
71
- /** Task button */
72
- --ffe-v-button-task-color: transparent;
73
- --ffe-v-button-task-color-hover: var(--ffe-color-component-button-secondary-fill-inverse-hover);
74
- --ffe-v-button-task-color-pressed: var(--ffe-color-component-button-secondary-fill-inverse-pressed);
75
- --ffe-v-button-task-color-border-hover: var(--ffe-color-component-button-secondary-border-inverse-hover);
76
- --ffe-v-button-task-color-border: var(--ffe-color-component-button-secondary-border-inverse);
77
- --ffe-v-button-task-color-text: var(--ffe-color-component-button-secondary-foreground-inverse);
78
- --ffe-v-button-task-color-text-hover: var(--ffe-color-component-button-secondary-foreground-inverse-hover);
79
- --ffe-v-button-task-color-icon: var(--ffe-color-component-button-secondary-foreground-inverse);
80
- --ffe-v-button-task-color-icon-hover: var(--ffe-color-component-button-secondary-foreground-inverse);
81
- --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus);
82
- }
83
- }
84
1
  .ffe-button-group {
85
2
  display: -webkit-box;
86
3
  display: -ms-flexbox;
@@ -141,7 +58,7 @@
141
58
  -moz-appearance: none;
142
59
  appearance: none;
143
60
  border: 2px solid transparent;
144
- border-radius: var(--ffe-v-buttons-border-radius);
61
+ border-radius: 6em;
145
62
  color: var(--ffe-color-component-button-primary-foreground-default);
146
63
  cursor: pointer;
147
64
  display: -webkit-box;
@@ -214,20 +131,20 @@
214
131
  }
215
132
  .ffe-button--action {
216
133
  background-color: var(--ffe-color-component-button-action-fill-default);
217
- color: var(--ffe-color-default-neutral-inverted);
134
+ color: var(--ffe-color-component-button-action-foreground-default);
218
135
  border: none;
219
136
  }
220
137
  .ffe-button--action :where(.ffe-button__icon) {
221
- color: var(--ffe-color-default-neutral-inverted);
138
+ color: var(--ffe-color-component-button-action-foreground-default);
222
139
  }
223
140
  .ffe-button--action:active {
224
141
  -webkit-transform: scale(0.97);
225
142
  transform: scale(0.97);
226
- background-color: var(--ffe-color-default-feedback-success-strongest);
143
+ background-color: var(--ffe-color-component-button-action-fill-pressed);
227
144
  }
228
145
  @media (hover: hover) and (pointer: fine) {
229
146
  .ffe-button--action:hover:not(:active):not(.ffe-button--pressed) {
230
- background-color: var(--ffe-color-default-feedback-success-stronger);
147
+ background-color: var(--ffe-color-component-button-action-fill-hover);
231
148
  }
232
149
  }
233
150
  .ffe-button--primary {
@@ -364,7 +281,6 @@
364
281
  -webkit-box-pack: center;
365
282
  -ms-flex-pack: center;
366
283
  justify-content: center;
367
- margin: 0 var(--ffe-spacing-xs) 0 0;
368
284
  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
369
285
  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
370
286
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
@@ -492,8 +408,8 @@
492
408
  transform: scale(0.97);
493
409
  }
494
410
  .ffe-inline-button:focus {
495
- -webkit-box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
496
- box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
411
+ -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
412
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
497
413
  outline: none;
498
414
  }
499
415
  .ffe-inline-button:focus:not(:focus-visible) {
@@ -517,7 +433,7 @@
517
433
  .ffe-inline-button--back {
518
434
  background-color: var(--background-color);
519
435
  color: var(--ffe-color-component-button-tertiary-foreground-default);
520
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
436
+ padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs) var(--ffe-spacing-sm);
521
437
  }
522
438
  .ffe-inline-button--back .ffe-inline-button__label::after {
523
439
  border-bottom: solid 1px currentcolor;
@@ -604,7 +520,7 @@
604
520
  }
605
521
  @media (hover: hover) and (pointer: fine) {
606
522
  .ffe-inline-button--tertiary:hover {
607
- color: var(--ffe-color-component-button-tertiary-border-hover);
523
+ color: var(--ffe-color-component-button-tertiary-foreground-hover);
608
524
  background-color: var(--ffe-color-component-button-tertiary-fill-hover);
609
525
  }
610
526
  .ffe-inline-button--tertiary:hover .ffe-inline-button__icon {
package/less/base-button.less CHANGED
@@ -4,7 +4,7 @@
4
4
  align-items: center;
5
5
  appearance: none;
6
6
  border: 2px solid transparent;
7
- border-radius: var(--ffe-v-buttons-border-radius);
7
+ border-radius: 6em;
8
8
  color: var(--ffe-color-component-button-primary-foreground-default);
9
9
  cursor: pointer;
10
10
  display: flex;
@@ -71,22 +71,22 @@
71
71
 
72
72
  .ffe-button--action {
73
73
  background-color: var(--ffe-color-component-button-action-fill-default);
74
- color: var(--ffe-color-default-neutral-inverted);
74
+ color: var(--ffe-color-component-button-action-foreground-default);
75
75
  border: none;
76
76
 
77
77
  :where(.ffe-button__icon) {
78
- color: var(--ffe-color-default-neutral-inverted);
78
+ color: var(--ffe-color-component-button-action-foreground-default);
79
79
  }
80
80
 
81
81
  &:active {
82
82
  transform: scale(0.97);
83
- background-color: var(--ffe-color-default-feedback-success-strongest);
83
+ background-color: var(--ffe-color-component-button-action-fill-pressed);
84
84
  }
85
85
 
86
86
  @media (hover: hover) and (pointer: fine) {
87
87
  &:hover:not(:active):not(.ffe-button--pressed) {
88
88
  background-color: var(
89
- --ffe-color-default-feedback-success-stronger
89
+ --ffe-color-component-button-action-fill-hover
90
90
  );
91
91
  }
92
92
  }
@@ -232,7 +232,6 @@
232
232
 
233
233
  .ffe-button--task {
234
234
  --text-color: var(--ffe-color-foreground-emphasis);
235
-
236
235
  background: transparent;
237
236
  border-radius: 1.75rem;
238
237
  border: none;
@@ -258,7 +257,6 @@
258
257
  display: flex;
259
258
  align-items: center;
260
259
  justify-content: center;
261
- margin: 0 var(--ffe-spacing-xs) 0 0;
262
260
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
263
261
 
264
262
  :where(.ffe-icons) {
package/less/buttons.less CHANGED
@@ -1,4 +1,3 @@
1
- @import 'theme';
2
1
  @import 'button-group';
3
2
  @import 'base-button';
4
3
  @import 'inline-base-button';
package/less/inline-base-button.less CHANGED
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  &:focus {
22
- box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
22
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
23
23
  outline: none;
24
24
  }
25
25
 
@@ -48,7 +48,8 @@
48
48
  .ffe-inline-button--back {
49
49
  background-color: var(--background-color);
50
50
  color: var(--ffe-color-component-button-tertiary-foreground-default);
51
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
51
+ padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs)
52
+ var(--ffe-spacing-sm);
52
53
 
53
54
  .ffe-inline-button__label {
54
55
  &::after {
@@ -162,7 +163,7 @@
162
163
 
163
164
  @media (hover: hover) and (pointer: fine) {
164
165
  &:hover {
165
- color: var(--ffe-color-component-button-tertiary-border-hover);
166
+ color: var(--ffe-color-component-button-tertiary-foreground-hover);
166
167
  background-color: var(
167
168
  --ffe-color-component-button-tertiary-fill-hover
168
169
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "20.0.6",
3
+ "version": "21.0.0",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -25,5 +25,5 @@
25
25
  "publishConfig": {
26
26
  "access": "public"
27
27
  },
28
- "gitHead": "c66c1a3fbcef3fd2d074f4430de29938781275ce"
28
+ "gitHead": "b0e6531049cef4a29b0f9c41c57272bb31ea1ef0"
29
29
  }
package/less/theme.less DELETED
@@ -1,210 +0,0 @@
1
- :root,
2
- :host {
3
- /** Buttons */
4
-
5
- /* Common button text color */
6
- --ffe-v-button-text-color: var(
7
- --ffe-color-component-button-primary-foreground-default
8
- );
9
-
10
- /* Button border radius renders as 50% */
11
- --ffe-v-buttons-border-radius: 6em;
12
-
13
- /* Button box shadow */
14
- --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus);
15
-
16
- /** Action button */
17
- --ffe-v-button-action-color: var(
18
- --ffe-color-component-button-action-fill-default
19
- );
20
- --ffe-v-button-action-color-hover: var(
21
- --ffe-color-component-button-action-fill-hover
22
- );
23
- --ffe-v-button-action-color-pressed: var(
24
- --ffe-color-component-button-action-fill-pressed
25
- );
26
- --ffe-v-button-action-color-text: var(
27
- --ffe-color-component-button-action-foreground-default
28
- );
29
-
30
- /** Primary button */
31
- --ffe-v-button-primary-color: var(
32
- --ffe-color-component-button-primary-fill-default
33
- );
34
- --ffe-v-button-primary-color-hover: var(
35
- --ffe-color-component-button-primary-fill-hover
36
- );
37
- --ffe-v-button-primary-color-pressed: var(
38
- --ffe-color-component-button-primary-fill-pressed
39
- );
40
- --ffe-v-button-primary-color-text: var(
41
- --ffe-color-component-button-primary-foreground-default
42
- );
43
-
44
- /** Secondary buttons (+ back, expand, etc) */
45
- --ffe-v-button-secondary-color: var(
46
- --ffe-color-component-button-secondary-fill-default
47
- );
48
- --ffe-v-button-secondary-border-color: var(
49
- --ffe-color-component-button-secondary-border-default
50
- );
51
- --ffe-v-button-secondary-color-text-hover: var(
52
- --ffe-color-component-button-secondary-foreground-hover
53
- );
54
- --ffe-v-button-secondary-color-bg-hover: var(
55
- --ffe-color-component-button-secondary-fill-hover
56
- );
57
- --ffe-v-button-secondary-color-bg-pressed: var(
58
- --ffe-color-component-button-secondary-fill-pressed
59
- );
60
- --ffe-v-button-secondary-color-text: var(
61
- --ffe-color-component-button-secondary-foreground-default
62
- );
63
-
64
- /** Tertiary button */
65
- --ffe-v-button-tertiary-color: var(
66
- --ffe-color-component-button-tertiary-fill-default
67
- );
68
- --ffe-v-button-tertiary-color-hover: var(
69
- --ffe-color-component-button-tertiary-fill-hover
70
- );
71
- --ffe-v-button-tertiary-color-pressed: var(
72
- --ffe-color-component-button-tertiary-fill-pressed
73
- );
74
- --ffe-v-button-tertiary-color-focus: var(
75
- --ffe-color-border-interactive-focus
76
- );
77
-
78
- /** Task button */
79
- --ffe-v-button-task-color: var(
80
- --ffe-color-component-button-secondary-fill-default
81
- );
82
- --ffe-v-button-task-color-hover: var(
83
- --ffe-color-component-button-secondary-fill-hover
84
- );
85
- --ffe-v-button-task-color-pressed: var(
86
- --ffe-color-component-button-secondary-fill-pressed
87
- );
88
- --ffe-v-button-task-color-border-hover: var(
89
- --ffe-color-component-button-secondary-border-hover
90
- );
91
- --ffe-v-button-task-color-border: var(
92
- --ffe-color-component-button-secondary-border-default
93
- );
94
- --ffe-v-button-task-color-text: var(
95
- --ffe-color-component-button-secondary-foreground-default
96
- );
97
- --ffe-v-button-task-color-text-hover: var(
98
- --ffe-color-component-button-secondary-foreground-hover
99
- );
100
- --ffe-v-button-task-color-icon: var(
101
- --ffe-color-component-button-secondary-foreground-default
102
- );
103
- --ffe-v-button-task-color-icon-hover: var(
104
- --ffe-color-component-button-secondary-foreground-hover
105
- );
106
- --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus);
107
-
108
- @media (prefers-color-scheme: dark) {
109
- .regard-color-scheme-preference {
110
- --ffe-v-button-text-color: var(
111
- --ffe-color-component-button-primary-foreground-default
112
- );
113
- --ffe-v-button-shadow-color: var(
114
- --ffe-color-border-interactive-focus
115
- );
116
-
117
- /** Action button */
118
- --ffe-v-button-action-color: var(
119
- --ffe-color-component-button-action-fill-inverse
120
- );
121
- --ffe-v-button-action-color-hover: var(
122
- --ffe-color-component-button-action-fill-inverse-hover
123
- );
124
- --ffe-v-button-action-color-pressed: var(
125
- --ffe-color-component-button-action-fill-inverse-pressed
126
- );
127
- --ffe-v-button-action-color-text: var(
128
- --ffe-color-component-button-action-foreground-inverse
129
- );
130
-
131
- /** Primary button */
132
- --ffe-v-button-primary-color: var(
133
- --ffe-color-component-button-primary-fill-inverse
134
- );
135
- --ffe-v-button-primary-color-hover: var(
136
- --ffe-color-component-button-primary-fill-inverse-hover
137
- );
138
- --ffe-v-button-primary-color-pressed: var(
139
- --ffe-color-component-button-primary-fill-inverse-pressed
140
- );
141
- --ffe-v-button-primary-color-text: var(
142
- --ffe-color-component-button-primary-foreground-inverse
143
- );
144
-
145
- /** Secondary buttons (+ task, back, expand, etc) */
146
- --ffe-v-button-secondary-color: var(
147
- --ffe-color-component-button-secondary-fill-inverse
148
- );
149
- --ffe-v-button-secondary-border-color: var(
150
- --ffe-color-component-button-secondary-border-inverse
151
- );
152
- --ffe-v-button-secondary-color-text-hover: var(
153
- --ffe-color-component-button-secondary-foreground-inverse-hover
154
- );
155
- --ffe-v-button-secondary-color-bg-hover: var(
156
- --ffe-color-component-button-secondary-fill-inverse-hover
157
- );
158
- --ffe-v-button-secondary-color-bg-pressed: var(
159
- --ffe-color-component-button-secondary-fill-inverse-pressed
160
- );
161
- --ffe-v-button-secondary-color-text: var(
162
- --ffe-color-component-button-secondary-foreground-inverse
163
- );
164
-
165
- /** Tertiary button */
166
- --ffe-v-button-tertiary-color: var(
167
- --ffe-color-component-button-tertiary-fill-inverse
168
- );
169
- --ffe-v-button-tertiary-color-hover: var(
170
- --ffe-color-component-button-tertiary-fill-inverse-hover
171
- );
172
- --ffe-v-button-tertiary-color-pressed: var(
173
- --ffe-color-component-button-tertiary-fill-inverse-pressed
174
- );
175
- --ffe-v-button-tertiary-color-focus: var(
176
- --ffe-color-border-interactive-focus
177
- );
178
-
179
- /** Task button */
180
- --ffe-v-button-task-color: transparent;
181
- --ffe-v-button-task-color-hover: var(
182
- --ffe-color-component-button-secondary-fill-inverse-hover
183
- );
184
- --ffe-v-button-task-color-pressed: var(
185
- --ffe-color-component-button-secondary-fill-inverse-pressed
186
- );
187
- --ffe-v-button-task-color-border-hover: var(
188
- --ffe-color-component-button-secondary-border-inverse-hover
189
- );
190
- --ffe-v-button-task-color-border: var(
191
- --ffe-color-component-button-secondary-border-inverse
192
- );
193
- --ffe-v-button-task-color-text: var(
194
- --ffe-color-component-button-secondary-foreground-inverse
195
- );
196
- --ffe-v-button-task-color-text-hover: var(
197
- --ffe-color-component-button-secondary-foreground-inverse-hover
198
- );
199
- --ffe-v-button-task-color-icon: var(
200
- --ffe-color-component-button-secondary-foreground-inverse
201
- );
202
- --ffe-v-button-task-color-icon-hover: var(
203
- --ffe-color-component-button-secondary-foreground-inverse
204
- );
205
- --ffe-v-button-task-border-focus: var(
206
- --ffe-color-border-interactive-focus
207
- );
208
- }
209
- }
210
- }