From 474dd76635fd2d85ebb01af1662b7970091b632b Mon Sep 17 00:00:00 2001 From: Anders Johnsen Date: Mon, 3 Mar 2025 15:34:11 +0100 Subject: [PATCH 1/2] docs(ffe-buttons-react): endrer tekst i eksempel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * vis mer og vis mindre gjør det motsatte av det de sier --- packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx b/packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx index 23161e7d81..b28ed6bb3b 100644 --- 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'} From 21b24402537fe33cafc2d2ab768c454546f63e7c Mon Sep 17 00:00:00 2001 From: Anders Johnsen Date: Mon, 3 Mar 2025 15:36:20 +0100 Subject: [PATCH 2/2] fix(ffe-buttons): bugfikser ifm semantiske farger * faser ut theme.less * diverse visuelle bugfikser BREAKING CHANGE: theme.less er ikke lenger i bruk --- packages/ffe-buttons/less/base-button.less | 12 +- packages/ffe-buttons/less/buttons.less | 1 - .../ffe-buttons/less/inline-base-button.less | 7 +- packages/ffe-buttons/less/theme.less | 210 ------------------ 4 files changed, 9 insertions(+), 221 deletions(-) delete mode 100644 packages/ffe-buttons/less/theme.less diff --git a/packages/ffe-buttons/less/base-button.less b/packages/ffe-buttons/less/base-button.less index c5cf99096b..fc8c01788c 100644 --- 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 index b8e818b1b2..fe848972e4 100644 --- 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 index 6e7a8bf00a..a4a99d0be4 100644 --- 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 deleted file mode 100644 index 5d74714d62..0000000000 --- a/packages/ffe-buttons/less/theme.less +++ /dev/null @@ -1,210 +0,0 @@ -:root, -:host { - /** Buttons */ - - /* Common button text color */ - --ffe-v-button-text-color: var( - --ffe-color-component-button-primary-foreground-default - ); - - /* Button border radius renders as 50% */ - --ffe-v-buttons-border-radius: 6em; - - /* Button box shadow */ - --ffe-v-button-shadow-color: var(--ffe-color-border-interactive-focus); - - /** Action button */ - --ffe-v-button-action-color: var( - --ffe-color-component-button-action-fill-default - ); - --ffe-v-button-action-color-hover: var( - --ffe-color-component-button-action-fill-hover - ); - --ffe-v-button-action-color-pressed: var( - --ffe-color-component-button-action-fill-pressed - ); - --ffe-v-button-action-color-text: var( - --ffe-color-component-button-action-foreground-default - ); - - /** Primary button */ - --ffe-v-button-primary-color: var( - --ffe-color-component-button-primary-fill-default - ); - --ffe-v-button-primary-color-hover: var( - --ffe-color-component-button-primary-fill-hover - ); - --ffe-v-button-primary-color-pressed: var( - --ffe-color-component-button-primary-fill-pressed - ); - --ffe-v-button-primary-color-text: var( - --ffe-color-component-button-primary-foreground-default - ); - - /** Secondary buttons (+ back, expand, etc) */ - --ffe-v-button-secondary-color: var( - --ffe-color-component-button-secondary-fill-default - ); - --ffe-v-button-secondary-border-color: var( - --ffe-color-component-button-secondary-border-default - ); - --ffe-v-button-secondary-color-text-hover: var( - --ffe-color-component-button-secondary-foreground-hover - ); - --ffe-v-button-secondary-color-bg-hover: var( - --ffe-color-component-button-secondary-fill-hover - ); - --ffe-v-button-secondary-color-bg-pressed: var( - --ffe-color-component-button-secondary-fill-pressed - ); - --ffe-v-button-secondary-color-text: var( - --ffe-color-component-button-secondary-foreground-default - ); - - /** Tertiary button */ - --ffe-v-button-tertiary-color: var( - --ffe-color-component-button-tertiary-fill-default - ); - --ffe-v-button-tertiary-color-hover: var( - --ffe-color-component-button-tertiary-fill-hover - ); - --ffe-v-button-tertiary-color-pressed: var( - --ffe-color-component-button-tertiary-fill-pressed - ); - --ffe-v-button-tertiary-color-focus: var( - --ffe-color-border-interactive-focus - ); - - /** Task button */ - --ffe-v-button-task-color: var( - --ffe-color-component-button-secondary-fill-default - ); - --ffe-v-button-task-color-hover: var( - --ffe-color-component-button-secondary-fill-hover - ); - --ffe-v-button-task-color-pressed: var( - --ffe-color-component-button-secondary-fill-pressed - ); - --ffe-v-button-task-color-border-hover: var( - --ffe-color-component-button-secondary-border-hover - ); - --ffe-v-button-task-color-border: var( - --ffe-color-component-button-secondary-border-default - ); - --ffe-v-button-task-color-text: var( - --ffe-color-component-button-secondary-foreground-default - ); - --ffe-v-button-task-color-text-hover: var( - --ffe-color-component-button-secondary-foreground-hover - ); - --ffe-v-button-task-color-icon: var( - --ffe-color-component-button-secondary-foreground-default - ); - --ffe-v-button-task-color-icon-hover: var( - --ffe-color-component-button-secondary-foreground-hover - ); - --ffe-v-button-task-border-focus: var(--ffe-color-border-interactive-focus); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-button-text-color: var( - --ffe-color-component-button-primary-foreground-default - ); - --ffe-v-button-shadow-color: var( - --ffe-color-border-interactive-focus - ); - - /** Action button */ - --ffe-v-button-action-color: var( - --ffe-color-component-button-action-fill-inverse - ); - --ffe-v-button-action-color-hover: var( - --ffe-color-component-button-action-fill-inverse-hover - ); - --ffe-v-button-action-color-pressed: var( - --ffe-color-component-button-action-fill-inverse-pressed - ); - --ffe-v-button-action-color-text: var( - --ffe-color-component-button-action-foreground-inverse - ); - - /** Primary button */ - --ffe-v-button-primary-color: var( - --ffe-color-component-button-primary-fill-inverse - ); - --ffe-v-button-primary-color-hover: var( - --ffe-color-component-button-primary-fill-inverse-hover - ); - --ffe-v-button-primary-color-pressed: var( - --ffe-color-component-button-primary-fill-inverse-pressed - ); - --ffe-v-button-primary-color-text: var( - --ffe-color-component-button-primary-foreground-inverse - ); - - /** Secondary buttons (+ task, back, expand, etc) */ - --ffe-v-button-secondary-color: var( - --ffe-color-component-button-secondary-fill-inverse - ); - --ffe-v-button-secondary-border-color: var( - --ffe-color-component-button-secondary-border-inverse - ); - --ffe-v-button-secondary-color-text-hover: var( - --ffe-color-component-button-secondary-foreground-inverse-hover - ); - --ffe-v-button-secondary-color-bg-hover: var( - --ffe-color-component-button-secondary-fill-inverse-hover - ); - --ffe-v-button-secondary-color-bg-pressed: var( - --ffe-color-component-button-secondary-fill-inverse-pressed - ); - --ffe-v-button-secondary-color-text: var( - --ffe-color-component-button-secondary-foreground-inverse - ); - - /** Tertiary button */ - --ffe-v-button-tertiary-color: var( - --ffe-color-component-button-tertiary-fill-inverse - ); - --ffe-v-button-tertiary-color-hover: var( - --ffe-color-component-button-tertiary-fill-inverse-hover - ); - --ffe-v-button-tertiary-color-pressed: var( - --ffe-color-component-button-tertiary-fill-inverse-pressed - ); - --ffe-v-button-tertiary-color-focus: var( - --ffe-color-border-interactive-focus - ); - - /** Task button */ - --ffe-v-button-task-color: transparent; - --ffe-v-button-task-color-hover: var( - --ffe-color-component-button-secondary-fill-inverse-hover - ); - --ffe-v-button-task-color-pressed: var( - --ffe-color-component-button-secondary-fill-inverse-pressed - ); - --ffe-v-button-task-color-border-hover: var( - --ffe-color-component-button-secondary-border-inverse-hover - ); - --ffe-v-button-task-color-border: var( - --ffe-color-component-button-secondary-border-inverse - ); - --ffe-v-button-task-color-text: var( - --ffe-color-component-button-secondary-foreground-inverse - ); - --ffe-v-button-task-color-text-hover: var( - --ffe-color-component-button-secondary-foreground-inverse-hover - ); - --ffe-v-button-task-color-icon: var( - --ffe-color-component-button-secondary-foreground-inverse - ); - --ffe-v-button-task-color-icon-hover: var( - --ffe-color-component-button-secondary-foreground-inverse - ); - --ffe-v-button-task-border-focus: var( - --ffe-color-border-interactive-focus - ); - } - } -}