Merge pull request #2598 from SpareBank1/buttons-farger-bugfix

Semantiske farger i buttons - bugfikser
SpareBank1 · Mar 4, 2025 · 6419bab · 6419bab
2 parents c66c1a3 + 21b2440
commit 6419bab
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 222 deletions.
diff --git a/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx b/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx
@@ -52,7 +52,7 @@ export const Standard: Story = {
                         isExpanded={isExpanded}
                         onClick={() => setExpanded(!isExpanded)}
                     >
-                        {isExpanded ? 'Vis mer' : 'Vis mindre'}
+                        {isExpanded ? 'Vis mindre' : 'Vis mer'}
                     </InlineExpandButton>
                 </Paragraph>
 

diff --git a/packages/ffe-buttons/less/base-button.less b/packages/ffe-buttons/less/base-button.less
@@ -4,7 +4,7 @@
     align-items: center;
     appearance: none;
     border: 2px solid transparent;
-    border-radius: var(--ffe-v-buttons-border-radius);
+    border-radius: 6em;
     color: var(--ffe-color-component-button-primary-foreground-default);
     cursor: pointer;
     display: flex;
@@ -71,22 +71,22 @@
 
 .ffe-button--action {
     background-color: var(--ffe-color-component-button-action-fill-default);
-    color: var(--ffe-color-default-neutral-inverted);
+    color: var(--ffe-color-component-button-action-foreground-default);
     border: none;
 
     :where(.ffe-button__icon) {
-        color: var(--ffe-color-default-neutral-inverted);
+        color: var(--ffe-color-component-button-action-foreground-default);
     }
 
     &:active {
         transform: scale(0.97);
-        background-color: var(--ffe-color-default-feedback-success-strongest);
+        background-color: var(--ffe-color-component-button-action-fill-pressed);
     }
 
     @media (hover: hover) and (pointer: fine) {
         &:hover:not(:active):not(.ffe-button--pressed) {
             background-color: var(
-                --ffe-color-default-feedback-success-stronger
+                --ffe-color-component-button-action-fill-hover
             );
         }
     }
@@ -232,7 +232,6 @@
 
 .ffe-button--task {
     --text-color: var(--ffe-color-foreground-emphasis);
-
     background: transparent;
     border-radius: 1.75rem;
     border: none;
@@ -258,7 +257,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 0 var(--ffe-spacing-xs) 0 0;
         transition: all var(--ffe-transition-duration) var(--ffe-ease);
 
         :where(.ffe-icons) {

diff --git a/packages/ffe-buttons/less/buttons.less b/packages/ffe-buttons/less/buttons.less
@@ -1,4 +1,3 @@
-@import 'theme';
 @import 'button-group';
 @import 'base-button';
 @import 'inline-base-button';
diff --git a/packages/ffe-buttons/less/inline-base-button.less b/packages/ffe-buttons/less/inline-base-button.less
@@ -19,7 +19,7 @@
     }
 
     &:focus {
-        box-shadow: 0 0 0 2px var(--ffe-v-button-shadow-color);
+        box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
         outline: none;
     }
 
@@ -48,7 +48,8 @@
 .ffe-inline-button--back {
     background-color: var(--background-color);
     color: var(--ffe-color-component-button-tertiary-foreground-default);
-    padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
+    padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs)
+        var(--ffe-spacing-sm);
 
     .ffe-inline-button__label {
         &::after {
@@ -162,7 +163,7 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            color: var(--ffe-color-component-button-tertiary-border-hover);
+            color: var(--ffe-color-component-button-tertiary-foreground-hover);
             background-color: var(
                 --ffe-color-component-button-tertiary-fill-hover
             );

diff --git a/packages/ffe-buttons/less/theme.less b/packages/ffe-buttons/less/theme.less