@sb1/ffe-buttons 15.1.7 → 16.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 (5) hide show
  1. package/less/base-button.less +19 -71
  2. package/less/buttons.less +1 -0
  3. package/less/inline-base-button.less +11 -43
  4. package/less/theme.less +47 -0
  5. package/package.json +3 -3
package/less/base-button.less CHANGED
@@ -46,11 +46,11 @@
46
46
  align-items: center;
47
47
  appearance: none;
48
48
  border: 2px solid transparent;
49
- border-radius: 6em;
49
+ border-radius: var(--ffe-v-buttons-border-radius);
50
50
  color: @ffe-farge-hvit;
51
51
  cursor: pointer;
52
52
  display: flex;
53
- font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
53
+ font-family: var(--ffe-g-font);
54
54
  justify-content: center;
55
55
  line-height: 24px;
56
56
  overflow: hidden;
@@ -62,7 +62,7 @@
62
62
  user-select: none;
63
63
  white-space: nowrap;
64
64
  width: 100%;
65
- .ffe-fontsize-button();
65
+ font-size: var(--ffe-fontsize-button);
66
66
 
67
67
  &::after {
68
68
  content: '';
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  &:visited {
105
- color: @ffe-white;
105
+ color: @ffe-farge-hvit;
106
106
  }
107
107
 
108
108
  @media (min-width: @breakpoint-sm) {
@@ -112,113 +112,61 @@
112
112
  }
113
113
 
114
114
  .ffe-button--action {
115
- background-color: @ffe-farge-nordlys-wcag;
115
+ background-color: var(--ffe-v-button-action-color);
116
+ color: var(--ffe-v-button-text-color);
116
117
 
117
118
  .native & {
118
119
  @media (prefers-color-scheme: dark) {
119
- background-color: @ffe-farge-nordlys;
120
120
  border: 2px solid transparent;
121
- color: @ffe-farge-svart;
122
121
  }
123
122
  }
124
123
  &:focus {
125
- background-color: @ffe-farge-nordlys-wcag;
126
-
127
- .native & {
128
- @media (prefers-color-scheme: dark) {
129
- background-color: @ffe-farge-nordlys;
130
- }
131
- }
124
+ background-color: var(--ffe-v-button-action-color);
132
125
  }
133
126
 
134
127
  &:hover {
135
- background-color: @ffe-farge-skog;
136
- .native & {
137
- @media (prefers-color-scheme: dark) {
138
- background-color: @ffe-farge-nordlys-30;
139
- }
140
- }
128
+ background-color: var(--ffe-v-button-action-color-hover);
141
129
  }
142
130
  }
143
131
 
144
132
  .ffe-button--primary {
145
- background-color: @ffe-farge-vann;
146
- .native & {
147
- @media (prefers-color-scheme: dark) {
148
- background-color: @ffe-farge-vann-70;
149
- color: @ffe-farge-svart;
150
- }
151
- }
133
+ background-color: var(--ffe-v-button-primary-color);
134
+ color: var(--ffe-v-button-text-color);
152
135
 
153
136
  &:focus {
154
- background-color: @ffe-farge-vann;
155
-
156
- .native & {
157
- @media (prefers-color-scheme: dark) {
158
- background-color: @ffe-farge-vann-70;
159
- }
160
- }
137
+ background-color: var(--ffe-v-button-primary-color);
161
138
  }
162
139
 
163
140
  &:hover {
164
- background-color: @ffe-farge-fjell;
165
- .native & {
166
- @media (prefers-color-scheme: dark) {
167
- background-color: @ffe-farge-vann-30;
168
- }
169
- }
141
+ background-color: var(--ffe-v-button-primary-color-hover);
170
142
  }
171
143
  }
172
144
 
173
145
  .ffe-button--secondary,
174
146
  .ffe-button--shortcut,
175
147
  .ffe-button--expand {
176
- background-color: @ffe-farge-hvit;
177
- border: solid 2px @ffe-farge-vann;
178
- color: @ffe-farge-vann;
179
- .native & {
180
- @media (prefers-color-scheme: dark) {
181
- color: @ffe-farge-vann-30;
182
- background-color: @ffe-farge-svart;
183
- border-color: @ffe-farge-vann-70;
184
- }
185
- }
148
+ background-color: var(--ffe-v-button-secondary-color-bg);
149
+ border: solid 2px var(--ffe-v-button-secondary-color);
150
+ color: var(--ffe-v-button-secondary-color);
186
151
 
187
152
  &:active,
188
153
  &:focus,
189
154
  &:visited {
190
- color: @ffe-farge-vann;
191
-
192
- .native & {
193
- @media (prefers-color-scheme: dark) {
194
- background-color: transparent;
195
- color: @ffe-farge-vann-30;
196
- }
197
- }
155
+ color: var(--ffe-v-button-secondary-color);
198
156
  }
199
157
 
200
158
  &:focus {
201
159
  .native & {
202
160
  @media (prefers-color-scheme: dark) {
203
161
  background-color: transparent;
204
- border-color: @ffe-farge-vann-70;
205
- color: @ffe-farge-vann-30;
206
162
  }
207
163
  }
208
164
  }
209
165
 
210
166
  &:hover {
211
- background-color: @ffe-farge-vann;
212
- border-color: @ffe-farge-vann;
213
- color: @ffe-farge-hvit;
214
-
215
- .native & {
216
- @media (prefers-color-scheme: dark) {
217
- background-color: @ffe-farge-vann-70;
218
- border-color: @ffe-farge-vann-70;
219
- color: @ffe-farge-svart;
220
- }
221
- }
167
+ background-color: var(--ffe-v-button-secondary-color);
168
+ border-color: var(--ffe-v-button-secondary-color);
169
+ color: var(--ffe-v-button-secondary-color-bg);
222
170
  }
223
171
  }
224
172
 
package/less/buttons.less CHANGED
@@ -1,3 +1,4 @@
1
+ @import 'theme';
1
2
  @import 'button-group';
2
3
  @import 'base-button';
3
4
  @import 'inline-base-button';
package/less/inline-base-button.less CHANGED
@@ -18,13 +18,13 @@
18
18
  border-radius: 1.375rem;
19
19
  cursor: pointer;
20
20
  display: inline-flex;
21
- font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
21
+ font-family: var(--ffe-g-font);
22
22
  margin: 0 -4px; // Hack to allow box-shadow to float outside content on focus
23
23
  transition: all @ffe-transition-duration @ffe-ease;
24
24
  overflow: hidden;
25
25
  padding: 0 @ffe-spacing-2xs;
26
26
  text-decoration: none;
27
- .ffe-fontsize-body-text();
27
+ font-size: var(--ffe-fontsize-body-text);
28
28
 
29
29
  &:active {
30
30
  transform: scale(0.97);
@@ -49,13 +49,12 @@
49
49
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23005aa4' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
50
50
  background-repeat: no-repeat;
51
51
  background-position: 1.375rem center;
52
- color: @ffe-farge-vann;
52
+ color: var(--ffe-v-button-secondary-color);
53
53
  line-height: 24px;
54
54
  padding: @ffe-spacing-xs @ffe-spacing-md @ffe-spacing-xs @ffe-spacing-2xl;
55
55
  outline: none;
56
56
  .native & {
57
57
  @media (prefers-color-scheme: dark) {
58
- color: @ffe-farge-vann-70;
59
58
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%234d8cbf' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
60
59
  }
61
60
  }
@@ -65,14 +64,6 @@
65
64
  border-bottom: 1px solid transparent;
66
65
  }
67
66
 
68
- &:focus {
69
- .native & {
70
- @media (prefers-color-scheme: dark) {
71
- color: @ffe-farge-vann-70;
72
- }
73
- }
74
- }
75
-
76
67
  &:hover {
77
68
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23002776' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
78
69
 
@@ -84,49 +75,27 @@
84
75
  }
85
76
 
86
77
  &:hover .ffe-inline-button__label {
87
- color: @ffe-farge-fjell;
88
- border-bottom-color: @ffe-farge-fjell;
89
- .native & {
90
- @media (prefers-color-scheme: dark) {
91
- color: @ffe-farge-vann-30;
92
- border-bottom-color: @ffe-farge-vann-30;
93
- }
94
- }
78
+ color: var(--ffe-v-button-secondary-color-hover);
79
+ border-bottom-color: var(--ffe-v-button-secondary-color-hover);
95
80
  }
96
81
  }
97
82
 
98
83
  .ffe-inline-button--expand {
99
- color: @ffe-farge-vann;
84
+ color: var(--ffe-v-button-secondary-color);
100
85
  padding: 0 @ffe-spacing-xs;
101
86
  margin: 0;
102
87
 
103
- .native & {
104
- @media (prefers-color-scheme: dark) {
105
- color: @ffe-farge-vann-70;
106
- }
107
- }
108
-
109
88
  &:hover {
110
- color: @ffe-farge-fjell;
111
- .native & {
112
- @media (prefers-color-scheme: dark) {
113
- color: @ffe-farge-vann-30;
114
- }
115
- }
89
+ color: var(--ffe-v-button-secondary-color-hover);
116
90
  }
117
91
  }
118
92
 
119
93
  .ffe-inline-button--tertiary {
120
94
  align-content: center;
121
- color: @ffe-farge-vann;
95
+ color: var(--ffe-v-button-tertiary-color);
122
96
  flex-wrap: wrap;
123
97
  padding: @ffe-spacing-xs (@ffe-spacing-sm + 1);
124
98
  border: 2px solid transparent;
125
- .native & {
126
- @media (prefers-color-scheme: dark) {
127
- color: @ffe-farge-vann-30;
128
- }
129
- }
130
99
 
131
100
  &::after {
132
101
  border-bottom: solid 1px currentColor;
@@ -137,14 +106,13 @@
137
106
 
138
107
  &:focus {
139
108
  box-shadow: none;
140
- border-color: @ffe-farge-vann;
141
- color: @ffe-farge-vann;
109
+ border-color: var(--ffe-v-button-tertiary-color);
110
+ color: var(--ffe-v-button-tertiary-color);
142
111
 
143
112
  .native & {
144
113
  @media (prefers-color-scheme: dark) {
145
114
  border-color: @ffe-farge-hvit;
146
115
  box-shadow: none;
147
- color: @ffe-farge-vann-30;
148
116
  }
149
117
  }
150
118
  }
@@ -154,7 +122,7 @@
154
122
  }
155
123
 
156
124
  &:hover {
157
- color: @ffe-farge-fjell;
125
+ color: var(--ffe-v-button-tertiary-color-hover);
158
126
  .native & {
159
127
  @media (prefers-color-scheme: dark) {
160
128
  color: @ffe-farge-hvit;
package/less/theme.less ADDED
@@ -0,0 +1,47 @@
1
+ :root {
2
+ /** Buttons */
3
+
4
+ /* Common button text color */
5
+ --ffe-v-button-text-color: var(--ffe-farge-hvit);
6
+
7
+ /* Button border radius renders as 50% */
8
+ --ffe-v-buttons-border-radius: 6em;
9
+
10
+ /** Action button */
11
+ --ffe-v-button-action-color: var(--ffe-farge-nordlys-wcag);
12
+ --ffe-v-button-action-color-hover: var(--ffe-farge-skog);
13
+ --ffe-v-button-action-color-text: var(--ffe-farge-hvit);
14
+
15
+ /** Primary button */
16
+ --ffe-v-button-primary-color: var(--ffe-farge-vann);
17
+ --ffe-v-button-primary-color-hover: var(--ffe-farge-fjell);
18
+ --ffe-v-button-primary-color-text: var(--ffe-farge-hvit);
19
+
20
+ /** Secondary buttons (+ task, back, expand, etc) are inverted */
21
+ --ffe-v-button-secondary-color: var(--ffe-farge-vann);
22
+ --ffe-v-button-secondary-color-hover: var(--ffe-farge-fjell);
23
+ --ffe-v-button-secondary-color-bg: var(--ffe-farge-hvit);
24
+
25
+ /** Tertiary button */
26
+ --ffe-v-button-tertiary-color: var(--ffe-farge-vann);
27
+ --ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
28
+ --ffe-v-button-tertiary-color-text: var(--ffe-farge-hvit);
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ .native {
32
+ --ffe-v-button-text-color: var(--ffe-farge-svart);
33
+ --ffe-v-button-action-color: var(--ffe-farge-nordlys);
34
+ --ffe-v-button-action-color-hover: var(--ffe-farge-nordlys-30);
35
+ --ffe-v-button-action-color-text: var(--ffe-farge-svart);
36
+ --ffe-v-button-primary-color: var(--ffe-farge-vann-70);
37
+ --ffe-v-button-primary-color-hover: var(--ffe-farge-vann-30);
38
+ --ffe-v-button-primary-color-text: var(--ffe-farge-svart);
39
+ --ffe-v-button-secondary-color: var(--ffe-farge-vann-70);
40
+ --ffe-v-button-secondary-color-hover: var(--ffe-farge-vann-30);
41
+ --ffe-v-button-secondary-color-bg: var(--ffe-farge-svart);
42
+ --ffe-v-button-tertiary-color: var(--ffe-farge-vann-70);
43
+ --ffe-v-button-tertiary-color-hover: var(--ffe-farge-vann-30);
44
+ --ffe-v-button-tertiary-color-text: var(--ffe-farge-svart);
45
+ }
46
+ }
47
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "15.1.7",
3
+ "version": "16.0.0",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -15,7 +15,7 @@
15
15
  "test": "npm run lint"
16
16
  },
17
17
  "devDependencies": {
18
- "@sb1/ffe-core": "^25.0.0",
18
+ "@sb1/ffe-core": "^26.0.0",
19
19
  "stylelint": "^13.0.0"
20
20
  },
21
21
  "peerDependencies": {
@@ -24,5 +24,5 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "98d9ceeaa9bebcd35d5a730227aac61fd28937cf"
27
+ "gitHead": "eb0ffe88825587ac9cb2cedf582a208d9cf73a65"
28
28
  }