@sb1/ffe-core 30.0.7 → 30.1.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.
- package/css/colors-semantic.css +4 -1
- package/css/ffe.css +12 -7
- package/less/colors-semantic-chevron.less +4 -4
- package/less/colors-semantic-storybook.less +1 -0
- package/less/colors-semantic.less +4 -1
- package/less/ffe.less +1 -0
- package/less/theme.less +0 -8
- package/less/variables.less +8 -0
- package/package.json +2 -2
package/css/colors-semantic.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// Context accent
|
|
4
4
|
.ffe-accent-mode {
|
|
5
5
|
--ffe-color-background-default: var(--ffe-color-speciality-background-accent);
|
|
6
|
-
--ffe-color-background-subtle: var(--ffe-color-speciality-background-accent);
|
|
6
|
+
--ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
|
|
7
7
|
--ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
|
|
8
8
|
--ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
|
|
9
9
|
--ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
|
|
@@ -377,6 +377,7 @@
|
|
|
377
377
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
|
|
378
378
|
--ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
|
|
379
379
|
--ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
|
|
380
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-850);
|
|
380
381
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
|
|
381
382
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
|
|
382
383
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
|
|
@@ -506,6 +507,7 @@
|
|
|
506
507
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
|
|
507
508
|
--ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
|
|
508
509
|
--ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
|
|
510
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-1000);
|
|
509
511
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
|
|
510
512
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
|
|
511
513
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
|
|
@@ -656,6 +658,7 @@
|
|
|
656
658
|
--ffe-color-vann-650: #084f91;
|
|
657
659
|
--ffe-color-vann-700: #073f83;
|
|
658
660
|
--ffe-color-vann-800: #002776;
|
|
661
|
+
--ffe-color-vann-850: #08235e;
|
|
659
662
|
--ffe-color-vann-1000: #070d27;
|
|
660
663
|
--ffe-color-natt-50: #dfe6f1;
|
|
661
664
|
--ffe-color-natt-100: #c9d5e8;
|
package/css/ffe.css
CHANGED
|
@@ -389,7 +389,7 @@ html,
|
|
|
389
389
|
/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
|
|
390
390
|
.ffe-accent-mode {
|
|
391
391
|
--ffe-color-background-default: var(--ffe-color-speciality-background-accent);
|
|
392
|
-
--ffe-color-background-subtle: var(--ffe-color-speciality-background-accent);
|
|
392
|
+
--ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
|
|
393
393
|
--ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
|
|
394
394
|
--ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
|
|
395
395
|
--ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
|
|
@@ -759,6 +759,7 @@ html,
|
|
|
759
759
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
|
|
760
760
|
--ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
|
|
761
761
|
--ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
|
|
762
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-850);
|
|
762
763
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
|
|
763
764
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
|
|
764
765
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
|
|
@@ -886,6 +887,7 @@ html,
|
|
|
886
887
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
|
|
887
888
|
--ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
|
|
888
889
|
--ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
|
|
890
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-1000);
|
|
889
891
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
|
|
890
892
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
|
|
891
893
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
|
|
@@ -1035,6 +1037,7 @@ html,
|
|
|
1035
1037
|
--ffe-color-vann-650: #084f91;
|
|
1036
1038
|
--ffe-color-vann-700: #073f83;
|
|
1037
1039
|
--ffe-color-vann-800: #002776;
|
|
1040
|
+
--ffe-color-vann-850: #08235e;
|
|
1038
1041
|
--ffe-color-vann-1000: #070d27;
|
|
1039
1042
|
--ffe-color-natt-50: #dfe6f1;
|
|
1040
1043
|
--ffe-color-natt-100: #c9d5e8;
|
|
@@ -1231,14 +1234,8 @@ html,
|
|
|
1231
1234
|
--ffe-g-secondary-color: var(--ffe-color-foreground-emphasis);
|
|
1232
1235
|
/* Error messages, invalid inputs, etc */
|
|
1233
1236
|
--ffe-g-error-color: var(--ffe-color-fill-feedback-critical);
|
|
1234
|
-
/** Theme borders */
|
|
1235
1237
|
/* Form element borders */
|
|
1236
1238
|
--ffe-g-border-color: var(--ffe-color-border-primary-default);
|
|
1237
|
-
--ffe-g-border-radius: 8px;
|
|
1238
|
-
--ffe-g-border-radius-lg: 16px;
|
|
1239
|
-
--ffe-g-border-width: 1px;
|
|
1240
|
-
--ffe-g-border-width-focus: 2px;
|
|
1241
|
-
/** Fonts */
|
|
1242
1239
|
/* Default font */
|
|
1243
1240
|
--ffe-g-font: 'SpareBank1-regular', arial, sans-serif;
|
|
1244
1241
|
/* h1 - h2 */
|
|
@@ -1639,6 +1636,14 @@ html,
|
|
|
1639
1636
|
position: absolute !important;
|
|
1640
1637
|
width: 1px;
|
|
1641
1638
|
}
|
|
1639
|
+
:root,
|
|
1640
|
+
:host {
|
|
1641
|
+
/* Form element borders */
|
|
1642
|
+
--ffe-g-border-radius: 8px;
|
|
1643
|
+
--ffe-g-border-radius-lg: 16px;
|
|
1644
|
+
--ffe-g-border-width: 1px;
|
|
1645
|
+
--ffe-g-border-focus-box-shadow: 0 0 0 1px;
|
|
1646
|
+
}
|
|
1642
1647
|
.ffe-wave {
|
|
1643
1648
|
position: relative;
|
|
1644
1649
|
width: 100%;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Chevron colors to make it work with semantic colors
|
|
3
|
-
@ffe-color-chevron-light-default:
|
|
4
|
-
@ffe-color-chevron-dark-default:
|
|
5
|
-
@ffe-color-chevron-light-accent:
|
|
6
|
-
@ffe-color-chevron-dark-accent:
|
|
3
|
+
@ffe-color-chevron-light-default: 292929;
|
|
4
|
+
@ffe-color-chevron-dark-default: ffffff;
|
|
5
|
+
@ffe-color-chevron-light-accent: ffffff;
|
|
6
|
+
@ffe-color-chevron-dark-accent: ffffff;
|
|
@@ -116,6 +116,7 @@
|
|
|
116
116
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
|
|
117
117
|
--ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
|
|
118
118
|
--ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
|
|
119
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-1000);
|
|
119
120
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
|
|
120
121
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
|
|
121
122
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// Context accent
|
|
4
4
|
.ffe-accent-mode {
|
|
5
5
|
--ffe-color-background-default: var(--ffe-color-speciality-background-accent);
|
|
6
|
-
--ffe-color-background-subtle: var(--ffe-color-speciality-background-accent);
|
|
6
|
+
--ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
|
|
7
7
|
--ffe-color-surface-primary-default: var(--ffe-color-accent-neutral-sublest);
|
|
8
8
|
--ffe-color-surface-primary-default-hover: var(--ffe-color-accent-neutral-subtler);
|
|
9
9
|
--ffe-color-surface-primary-default-pressed: var(--ffe-color-accent-neutral-subtle);
|
|
@@ -377,6 +377,7 @@
|
|
|
377
377
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
|
|
378
378
|
--ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
|
|
379
379
|
--ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
|
|
380
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-850);
|
|
380
381
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
|
|
381
382
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
|
|
382
383
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-vann-50);
|
|
@@ -506,6 +507,7 @@
|
|
|
506
507
|
--ffe-color-speciality-background-default: var(--ffe-color-alpha-black-100);
|
|
507
508
|
--ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
|
|
508
509
|
--ffe-color-speciality-background-accent: var(--ffe-color-natt-950);
|
|
510
|
+
--ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-1000);
|
|
509
511
|
--ffe-color-speciality-background-surface-default: var(--ffe-color-gray-850);
|
|
510
512
|
--ffe-color-speciality-background-surface-default-hover: var(--ffe-color-gray-750);
|
|
511
513
|
--ffe-color-speciality-background-surface-default-pressed: var(--ffe-color-gray-700);
|
|
@@ -656,6 +658,7 @@
|
|
|
656
658
|
--ffe-color-vann-650: #084f91;
|
|
657
659
|
--ffe-color-vann-700: #073f83;
|
|
658
660
|
--ffe-color-vann-800: #002776;
|
|
661
|
+
--ffe-color-vann-850: #08235e;
|
|
659
662
|
--ffe-color-vann-1000: #070d27;
|
|
660
663
|
--ffe-color-natt-50: #dfe6f1;
|
|
661
664
|
--ffe-color-natt-100: #c9d5e8;
|
package/less/ffe.less
CHANGED
package/less/theme.less
CHANGED
|
@@ -136,16 +136,8 @@
|
|
|
136
136
|
/* Error messages, invalid inputs, etc */
|
|
137
137
|
--ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
|
|
138
138
|
|
|
139
|
-
/** Theme borders */
|
|
140
|
-
|
|
141
139
|
/* Form element borders */
|
|
142
140
|
--ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
|
|
143
|
-
--ffe-g-border-radius: 8px;
|
|
144
|
-
--ffe-g-border-radius-lg: 16px;
|
|
145
|
-
--ffe-g-border-width: 1px;
|
|
146
|
-
--ffe-g-border-width-focus: 2px;
|
|
147
|
-
|
|
148
|
-
/** Fonts */
|
|
149
141
|
|
|
150
142
|
/* Default font */
|
|
151
143
|
--ffe-g-font: 'SpareBank1-regular', arial, sans-serif;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-core",
|
|
3
|
-
"version": "30.
|
|
3
|
+
"version": "30.1.1",
|
|
4
4
|
"description": "Rammeverk for Felles Front End",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "2ff1ce6aa6e7ea7f11da6944332998a585cd8226"
|
|
39
39
|
}
|