@sb1/ffe-buttons 19.0.0 → 19.0.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/less/base-button.less +26 -60
  2. package/less/inline-base-button.less +23 -41
  3. package/less/theme.less +38 -14
  4. package/package.json +2 -2
package/less/base-button.less CHANGED
@@ -28,12 +28,8 @@
28
28
  background: transparent;
29
29
  border-radius: 1.5rem;
30
30
  inset: -5px;
31
- box-shadow: 0 0 0 2px var(--ffe-farge-vann);
31
+ box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
32
32
  transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
33
-
34
- .regard-color-scheme-preference & {
35
- box-shadow: 0 0 0 2px var(--ffe-farge-hvit);
36
- }
37
33
  }
38
34
 
39
35
  &:focus::after {
@@ -66,17 +62,12 @@
66
62
 
67
63
  .ffe-button--action {
68
64
  background-color: var(--ffe-v-button-action-color);
69
- color: var(--ffe-v-button-text-color);
65
+ color: var(--ffe-v-button-action-color-text);
70
66
 
71
67
  .ffe-button__icon {
72
- color: var(--ffe-v-button-text-color);
68
+ color: var(--ffe-v-button-action-color-text);
73
69
  }
74
70
 
75
- .regard-color-scheme-preference & {
76
- @media (prefers-color-scheme: dark) {
77
- border: 2px solid transparent;
78
- }
79
- }
80
71
  &:focus {
81
72
  background-color: var(--ffe-v-button-action-color);
82
73
  }
@@ -90,10 +81,10 @@
90
81
 
91
82
  .ffe-button--primary {
92
83
  background-color: var(--ffe-v-button-primary-color);
93
- color: var(--ffe-v-button-text-color);
84
+ color: var(--ffe-v-button-primary-color-text);
94
85
 
95
86
  .ffe-button__icon {
96
- color: var(--ffe-v-button-text-color);
87
+ color: var(--ffe-v-button-primary-color-text);
97
88
  }
98
89
 
99
90
  &:focus {
@@ -110,42 +101,30 @@
110
101
  .ffe-button--secondary,
111
102
  .ffe-button--shortcut,
112
103
  .ffe-button--expand {
113
- background-color: var(--ffe-v-button-secondary-color-bg);
104
+ background-color: var(--ffe-v-button-secondary-color);
114
105
  border: solid 2px var(--ffe-v-button-secondary-border-color);
115
- color: var(--ffe-v-button-secondary-color);
106
+ color: var(--ffe-v-button-secondary-color-text);
116
107
 
117
- .ffe-button__icon {
118
- color: var(--ffe-v-button-secondary-color);
108
+ .ffe-button__icon,
109
+ .ffe-button__label {
110
+ color: var(--ffe-v-button-secondary-color-text);
119
111
  }
120
112
 
121
113
  &:active,
122
114
  &:focus,
123
115
  &:visited {
124
- color: var(--ffe-v-button-secondary-color);
125
- .regard-color-scheme-preference & {
126
- @media (prefers-color-scheme: dark) {
127
- color: var(--ffe-v-button-secondary-color);
128
- }
129
- }
116
+ color: var(--ffe-v-button-secondary-color-text);
130
117
  }
131
118
 
132
119
  @media (hover: hover) and (pointer: fine) {
133
120
  &:hover {
134
- background-color: var(--ffe-v-button-secondary-color);
135
- border-color: var(--ffe-v-button-secondary-color);
136
- color: var(--ffe-v-button-secondary-color-bg);
121
+ background-color: var(--ffe-v-button-secondary-color-bg-hover);
122
+ border-color: var(--ffe-v-button-secondary-color-bg-hover);
123
+ color: var(--ffe-v-button-secondary-color-text-hover);
137
124
 
138
- .ffe-button__icon {
139
- color: var(--ffe-v-button-secondary-color-bg);
140
- }
141
- .regard-color-scheme-preference & {
142
- @media (prefers-color-scheme: dark) {
143
- background-color: var(
144
- --ffe-v-button-secondary-border-color
145
- );
146
- border-color: var(--ffe-v-button-secondary-border-color);
147
- color: var(--ffe-v-button-secondary-color-bg);
148
- }
125
+ .ffe-button__icon,
126
+ .ffe-button__label {
127
+ color: var(--ffe-v-button-secondary-color-text-hover);
149
128
  }
150
129
  }
151
130
  }
@@ -165,7 +144,7 @@
165
144
  border-radius: 1.75rem;
166
145
  border: 2px solid transparent;
167
146
  box-shadow: none;
168
- color: var(--ffe-v-button-task-primary-color);
147
+ color: var(--ffe-v-button-task-color-text);
169
148
  display: inline-block;
170
149
  padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm) var(--ffe-spacing-2xs)
171
150
  var(--ffe-spacing-2xs);
@@ -175,16 +154,16 @@
175
154
 
176
155
  .ffe-button__icon > .ffe-icons {
177
156
  display: block;
178
- color: var(--ffe-v-button-task-primary-color);
157
+ color: var(--ffe-v-button-task-color-icon);
179
158
  }
180
159
 
181
160
  @media (hover: hover) and (pointer: fine) {
182
161
  &:hover {
183
- color: var(--ffe-v-button-task-text-color-hover);
162
+ color: var(--ffe-v-button-task-color-text-hover);
184
163
  box-shadow: none;
185
164
 
186
165
  .ffe-button__icon > .ffe-icons {
187
- color: var(--ffe-v-button-primary-color-text);
166
+ color: var(--ffe-v-button-task-color-icon-hover);
188
167
  }
189
168
  }
190
169
  }
@@ -234,22 +213,17 @@
234
213
  }
235
214
 
236
215
  .ffe-button--task & {
237
- border: 2px solid var(--ffe-v-button-primary-color);
216
+ border: 2px solid var(--ffe-v-button-task-color-border);
238
217
  border-radius: 50%;
239
- background-color: var(--ffe-farge-hvit);
240
- color: var(--ffe-v-button-task-primary-color);
218
+ background-color: var(--ffe-v-button-task-color);
219
+ color: var(--ffe-v-button-task-color-icon);
241
220
  height: 45px;
221
+ width: 45px;
242
222
  display: flex;
243
223
  align-items: center;
244
224
  justify-content: center;
245
225
  margin: 0 var(--ffe-spacing-xs) 0 0;
246
- width: 45px;
247
226
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
248
- .regard-color-scheme-preference & {
249
- @media (prefers-color-scheme: dark) {
250
- background-color: transparent;
251
- }
252
- }
253
227
  }
254
228
 
255
229
  .ffe-button--expand & {
@@ -258,17 +232,9 @@
258
232
 
259
233
  @media (hover: hover) and (pointer: fine) {
260
234
  .ffe-button--expand:hover & {
261
- color: var(--ffe-farge-hvit);
262
-
263
- .regard-color-scheme-preference & {
264
- @media (prefers-color-scheme: dark) {
265
- color: var(--ffe-farge-svart);
266
- }
267
- }
235
+ color: var(--ffe-v-button-secondary-color-text-hover);
268
236
  }
269
- }
270
237
 
271
- @media (hover: hover) and (pointer: fine) {
272
238
  .ffe-button--task:hover & {
273
239
  border-color: var(--ffe-v-button-primary-color);
274
240
  background-color: var(--ffe-v-button-primary-color);
package/less/inline-base-button.less CHANGED
@@ -19,19 +19,30 @@
19
19
  }
20
20
 
21
21
  &:focus {
22
- box-shadow: 0 0 0 2px var(--ffe-farge-vann);
22
+ box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
23
23
  outline: none;
24
-
25
- .regard-color-scheme-preference & {
26
- @media (prefers-color-scheme: dark) {
27
- box-shadow: 0 0 0 2px var(--ffe-farge-hvit);
28
- }
29
- }
30
24
  }
31
25
 
32
26
  &:focus:not(:focus-visible) {
33
27
  box-shadow: none;
34
28
  }
29
+
30
+ &__icon {
31
+ margin-bottom: -2px;
32
+ will-change: transform, opacity;
33
+
34
+ .ffe-inline-button--expanded & {
35
+ transform: rotateZ(180deg);
36
+ }
37
+
38
+ &--left {
39
+ margin-right: 6px;
40
+ }
41
+
42
+ &--right {
43
+ margin-left: 6px;
44
+ }
45
+ }
35
46
  }
36
47
 
37
48
  .ffe-inline-button--back {
@@ -57,8 +68,8 @@
57
68
  }
58
69
 
59
70
  &:hover .ffe-inline-button__label {
60
- color: var(--ffe-v-button-secondary-color-hover);
61
- border-bottom-color: var(--ffe-v-button-secondary-color-hover);
71
+ color: var(--ffe-v-button-primary-color-hover);
72
+ border-bottom-color: var(--ffe-v-button-primary-color-hover);
62
73
  }
63
74
  }
64
75
  }
@@ -105,21 +116,14 @@
105
116
 
106
117
  &:focus {
107
118
  box-shadow: none;
108
- border-color: var(--ffe-v-button-tertiary-color);
119
+ border-color: var(--ffe-v-button-tertiary-color-focus);
109
120
  color: var(--ffe-v-button-tertiary-color);
110
121
 
111
- .regard-color-scheme-preference & {
112
- @media (prefers-color-scheme: dark) {
113
- border-color: var(--ffe-farge-hvit);
114
- box-shadow: none;
115
- }
122
+ &:not(:focus-visible) {
123
+ border-color: transparent;
116
124
  }
117
125
  }
118
126
 
119
- &:focus:not(:focus-visible) {
120
- border-color: transparent;
121
- }
122
-
123
127
  @media (hover: hover) and (pointer: fine) {
124
128
  &:hover {
125
129
  color: var(--ffe-v-button-tertiary-color-hover);
@@ -127,28 +131,6 @@
127
131
  .ffe-inline-button__icon {
128
132
  color: var(--ffe-v-button-tertiary-color-hover);
129
133
  }
130
- .regard-color-scheme-preference & {
131
- @media (prefers-color-scheme: dark) {
132
- color: var(--ffe-farge-hvit);
133
- }
134
- }
135
134
  }
136
135
  }
137
136
  }
138
-
139
- .ffe-inline-button__icon {
140
- margin-bottom: -2px;
141
- will-change: transform, opacity;
142
-
143
- .ffe-inline-button--expanded & {
144
- transform: rotateZ(180deg);
145
- }
146
- }
147
-
148
- .ffe-inline-button__icon--left {
149
- margin-right: 6px;
150
- }
151
-
152
- .ffe-inline-button__icon--right {
153
- margin-left: 6px;
154
- }
package/less/theme.less CHANGED
@@ -8,9 +8,12 @@
8
8
  /* Button border radius renders as 50% */
9
9
  --ffe-v-buttons-border-radius: 6em;
10
10
 
11
+ /* Button box shadow */
12
+ --ffe-v-button-shadow-color: var(--ffe-farge-vann);
13
+
11
14
  /** Action button */
12
15
  --ffe-v-button-action-color: var(--ffe-farge-skog);
13
- --ffe-v-button-action-color-hover: #095139; // Temporary, until dark mode palette is finished
16
+ --ffe-v-button-action-color-hover: #095139;
14
17
  --ffe-v-button-action-color-text: var(--ffe-farge-hvit);
15
18
 
16
19
  /** Primary button */
@@ -18,41 +21,62 @@
18
21
  --ffe-v-button-primary-color-hover: var(--ffe-farge-fjell);
19
22
  --ffe-v-button-primary-color-text: var(--ffe-farge-hvit);
20
23
 
21
- /** Secondary buttons (+ task, back, expand, etc) are inverted */
22
- --ffe-v-button-secondary-color: var(--ffe-farge-vann);
24
+ /** Secondary buttons (+ back, expand, etc) */
25
+ --ffe-v-button-secondary-color: var(--ffe-farge-hvit);
23
26
  --ffe-v-button-secondary-border-color: var(--ffe-farge-vann);
24
- --ffe-v-button-secondary-color-hover: var(--ffe-farge-fjell);
25
- --ffe-v-button-secondary-color-bg: var(--ffe-farge-hvit);
27
+ --ffe-v-button-secondary-color-text-hover: var(--ffe-farge-hvit);
28
+ --ffe-v-button-secondary-color-bg-hover: var(--ffe-farge-vann);
29
+ --ffe-v-button-secondary-color-text: var(--ffe-farge-vann);
26
30
 
27
31
  /** Tertiary button */
28
32
  --ffe-v-button-tertiary-color: var(--ffe-farge-vann);
29
33
  --ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
30
- --ffe-v-button-tertiary-color-text: var(--ffe-farge-hvit);
34
+ --ffe-v-button-tertiary-color-focus: var(--ffe-farge-vann);
31
35
 
32
36
  /** Task button */
33
- --ffe-v-button-task-primary-color: var(--ffe-farge-vann);
34
- --ffe-v-button-task-text-color-hover: var(--ffe-farge-fjell);
37
+ --ffe-v-button-task-color: var(--ffe-farge-hvit);
38
+ --ffe-v-button-task-color-border: var(--ffe-farge-vann);
39
+ --ffe-v-button-task-color-text: var(--ffe-farge-vann);
40
+ --ffe-v-button-task-color-text-hover: var(--ffe-farge-fjell);
41
+ --ffe-v-button-task-color-icon: var(--ffe-farge-vann);
42
+ --ffe-v-button-task-color-icon-hover: var(--ffe-farge-hvit);
35
43
  --ffe-v-button-task-border-focus: var(--ffe-farge-vann);
36
44
 
37
45
  @media (prefers-color-scheme: dark) {
38
46
  .regard-color-scheme-preference {
39
47
  --ffe-v-button-text-color: var(--ffe-farge-svart);
48
+ --ffe-v-button-shadow-color: var(--ffe-farge-hvit);
49
+
50
+ /** Action button */
40
51
  --ffe-v-button-action-color: var(--ffe-farge-skog-70);
41
52
  --ffe-v-button-action-color-hover: var(--ffe-farge-skog-30);
42
53
  --ffe-v-button-action-color-text: var(--ffe-farge-svart);
54
+
55
+ /** Primary button */
43
56
  --ffe-v-button-primary-color: var(--ffe-farge-vann-70);
44
57
  --ffe-v-button-primary-color-hover: var(--ffe-farge-vann-30);
45
58
  --ffe-v-button-primary-color-text: var(--ffe-farge-svart);
46
- --ffe-v-button-secondary-color: var(--ffe-farge-vann-30);
59
+
60
+ /** Secondary buttons (+ task, back, expand, etc) */
61
+ --ffe-v-button-secondary-color: var(--ffe-farge-svart);
47
62
  --ffe-v-button-secondary-border-color: var(--ffe-farge-vann-70);
48
- --ffe-v-button-secondary-color-hover: var(--ffe-farge-vann-30);
49
- --ffe-v-button-secondary-color-bg: var(--ffe-farge-svart);
63
+ --ffe-v-button-secondary-color-text-hover: var(--ffe-farge-svart);
64
+ --ffe-v-button-secondary-color-bg-hover: var(--ffe-farge-vann-30);
65
+ --ffe-v-button-secondary-color-text: var(--ffe-farge-vann-30);
66
+
67
+ /** Tertiary button */
50
68
  --ffe-v-button-tertiary-color: var(--ffe-farge-vann-30);
51
69
  --ffe-v-button-tertiary-color-hover: var(--ffe-farge-hvit);
52
- --ffe-v-button-tertiary-color-text: var(--ffe-farge-svart);
53
- --ffe-v-button-task-text-color-hover: var(--ffe-farge-hvit);
70
+ --ffe-v-button-tertiary-color-focus: var(--ffe-farge-hvit);
71
+
72
+ /** Task button */
73
+ --ffe-v-button-task-color: transparent;
74
+ --ffe-v-button-task-color-border: var(--ffe-farge-vann-30);
75
+ --ffe-v-button-task-color-text: var(--ffe-farge-vann-30);
76
+ --ffe-v-button-task-color-text-hover: var(--ffe-farge-hvit);
77
+ --ffe-v-button-task-color-icon: var(--ffe-farge-vann-30);
78
+ --ffe-v-button-task-color-icon-hover: var(--ffe-farge-svart);
54
79
  --ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
55
- --ffe-v-button-task-primary-color: var(--ffe-farge-vann-30);
56
80
  }
57
81
  }
58
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "19.0.0",
3
+ "version": "19.0.1",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -23,5 +23,5 @@
23
23
  "publishConfig": {
24
24
  "access": "public"
25
25
  },
26
- "gitHead": "98d33cf2e867ce718139edf1adf97336b8da6b68"
26
+ "gitHead": "9c05608e31d932eed0da68020f93c44af1252573"
27
27
  }