@sb1/ffe-buttons 16.0.0 → 16.1.1

package/less/base-button.less

@@ -153,6 +153,11 @@
     &:focus,
     &:visited {
         color: var(--ffe-v-button-secondary-color);
+        .native & {
+            @media (prefers-color-scheme: dark) {
+                color: var(--ffe-v-button-secondary-color);
+            }
+        }
     }
 
     &:focus {
@@ -167,6 +172,11 @@
         background-color: var(--ffe-v-button-secondary-color);
         border-color: var(--ffe-v-button-secondary-color);
         color: var(--ffe-v-button-secondary-color-bg);
+        .native & {
+            @media (prefers-color-scheme: dark) {
+                color: var(--ffe-v-button-secondary-color-bg);
+            }
+        }
     }
 }
 
@@ -185,37 +195,20 @@
     border-radius: 1.75rem;
     border: 2px solid transparent;
     box-shadow: none;
-    color: @ffe-farge-vann;
+    color: var(--ffe-v-button-task-primary-color);
     display: inline-block;
     padding: @ffe-spacing-2xs @ffe-spacing-sm @ffe-spacing-2xs @ffe-spacing-2xs;
     text-align: left;
     transition: all @ffe-transition-duration @ffe-ease;
     width: auto;
-    .native & {
-        @media (prefers-color-scheme: dark) {
-            color: @ffe-farge-vann-30;
-        }
-    }
 
     &:hover {
-        color: @ffe-farge-fjell;
+        color: var(--ffe-v-button-task-text-color-hover);
         box-shadow: none;
-
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                color: @ffe-farge-hvit;
-            }
-        }
     }
 
     &:focus {
-        border-color: @ffe-farge-vann;
-
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                border-color: @ffe-farge-hvit;
-            }
-        }
+        border-color: var(--ffe-v-button-task-border-focus);
 
         &::after {
             display: none;
@@ -260,10 +253,10 @@
     }
 
     .ffe-button--task & {
-        border: 2px solid @ffe-farge-vann;
+        border: 2px solid var(--ffe-v-button-primary-color);
         border-radius: 50%;
         background-color: @ffe-farge-hvit;
-        fill: @ffe-farge-vann;
+        fill: var(--ffe-v-button-task-primary-color);
         height: 45px;
         padding: 13px;
         margin: 0 @ffe-spacing-xs 0 0;
@@ -271,22 +264,16 @@
         transition: all @ffe-transition-duration @ffe-ease;
         .native & {
             @media (prefers-color-scheme: dark) {
-                border-color: @ffe-farge-vann-70;
                 background-color: transparent;
-                fill: @ffe-farge-vann-30;
             }
         }
     }
 
     .ffe-button--expand & {
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                fill: @ffe-farge-vann-30;
-            }
-        }
+        fill: var(--ffe-v-button-task-primary-color);
     }
-
     .ffe-button--expand:hover & {
+        fill: @ffe-farge-hvit;
         .native & {
             @media (prefers-color-scheme: dark) {
                 fill: @ffe-farge-svart;
@@ -295,16 +282,9 @@
     }
 
     .ffe-button--task:hover & {
-        border-color: @ffe-farge-vann;
-        background-color: @ffe-farge-vann;
-        fill: @ffe-farge-hvit;
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                border-color: @ffe-farge-vann-70;
-                background-color: @ffe-farge-vann-70;
-                fill: @ffe-farge-svart;
-            }
-        }
+        border-color: var(--ffe-v-button-primary-color);
+        background-color: var(--ffe-v-button-primary-color);
+        fill: var(--ffe-v-button-primary-color-text);
     }
 }
 

package/less/theme.less

@@ -27,6 +27,11 @@
     --ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
     --ffe-v-button-tertiary-color-text: var(--ffe-farge-hvit);
 
+    /** Task button */
+    --ffe-v-button-task-primary-color: var(--ffe-farge-vann);
+    --ffe-v-button-task-text-color-hover: var(--ffe-farge-fjell);
+    --ffe-v-button-task-border-focus: var(--ffe-farge-vann);
+
     @media (prefers-color-scheme: dark) {
         .native {
             --ffe-v-button-text-color: var(--ffe-farge-svart);
@@ -42,6 +47,9 @@
             --ffe-v-button-tertiary-color: var(--ffe-farge-vann-70);
             --ffe-v-button-tertiary-color-hover: var(--ffe-farge-vann-30);
             --ffe-v-button-tertiary-color-text: var(--ffe-farge-svart);
+            --ffe-v-button-task-text-color-hover: var(--ffe-farge-hvit);
+            --ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
+            --ffe-v-button-task-primary-color: var(--ffe-farge-vann-30);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-buttons",
-    "version": "16.0.0",
+    "version": "16.1.1",
     "license": "MIT",
     "author": "SpareBank1",
     "files": [
@@ -11,12 +11,12 @@
         "url": "ssh://git@github.com:SpareBank1/designsystem.git"
     },
     "scripts": {
-        "lint": "stylelint less/*.less",
+        "lint": "ffe-buildtool stylelint less/*.less",
         "test": "npm run lint"
     },
     "devDependencies": {
-        "@sb1/ffe-core": "^26.0.0",
-        "stylelint": "^13.0.0"
+        "@sb1/ffe-buildtool": "^0.5.0",
+        "@sb1/ffe-core": "^26.1.0"
     },
     "peerDependencies": {
         "@sb1/ffe-core": "*"
@@ -24,5 +24,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "eb0ffe88825587ac9cb2cedf582a208d9cf73a65"
+    "gitHead": "2d84d7d8af7cdf628ae70a2c75e2f692081acf27"
 }