From fdd902cd3d0c6cb48d505909526a052ee3f9b123 Mon Sep 17 00:00:00 2001 From: tuva-odegard Date: Mon, 20 Jan 2025 09:27:08 +0100 Subject: [PATCH 1/2] =?UTF-8?q?feat(ffe-accordion):=20modernisering=20og?= =?UTF-8?q?=20oppdatering=20til=20semantiske=20farger=20BREAKING=20CHANGE:?= =?UTF-8?q?=20Nye=20semantiske=20farger.=20Slettet=20theme.less.=20Ingen?= =?UTF-8?q?=20endringer=20n=C3=B8dvendig?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ffe-accordion/less/accordion.less | 99 --------------- .../ffe-accordion/less/ffe-accordion.less | 118 +++++++++++++++++- packages/ffe-accordion/less/theme.less | 16 --- 3 files changed, 116 insertions(+), 117 deletions(-) delete mode 100644 packages/ffe-accordion/less/accordion.less delete mode 100644 packages/ffe-accordion/less/theme.less diff --git a/packages/ffe-accordion/less/accordion.less b/packages/ffe-accordion/less/accordion.less deleted file mode 100644 index 841f53e28c..0000000000 --- a/packages/ffe-accordion/less/accordion.less +++ /dev/null @@ -1,99 +0,0 @@ -.ffe-accordion { - width: 100%; - border: 1px solid transparent; - font-family: var(--ffe-g-font); - - .ffe-accordion-item__heading { - margin: 0; - } -} - -.ffe-accordion-item { - --icon-color: var(--ffe-v-accordion-primary-color); - --icon-border-color: var(--ffe-v-accordion-primary-color); - --icon-background-color: var(--ffe-v-accordion-secondary-color); - - margin-bottom: var(--ffe-spacing-xs); - transition: margin-bottom var(--ffe-transition-duration) - var(--ffe-ease-in-out-back); - box-shadow: 0 1px 4px rgb(38 38 38 / 30%); - border-radius: 16px; - border: 2px solid transparent; - background-color: var(--ffe-v-accordion-secondary-color); - - &__heading, - &__body { - overflow-wrap: anywhere; - margin: 0; - } - - &__heading-button { - width: 100%; - background: none; - border: none; - padding: var(--ffe-spacing-sm); - font-family: var(--ffe-g-font-heading-small); - cursor: pointer; - outline: none; - color: var(--ffe-v-accordion-primary-color); - - @media (hover: hover) and (pointer: fine) { - &:hover { - --icon-color: var(--ffe-v-accordion-secondary-color); - --icon-background-color: var(--ffe-v-accordion-primary-color); - } - } - - &:focus-visible { - outline: none; - } - } - - &__heading-button-content { - text-align: left; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--ffe-spacing-xs); - } - - &__heading-icon-wrapper { - line-height: 0; - border: 1px solid var(--icon-border-color); - border-radius: 50%; - padding: var(--ffe-spacing-xs); - background: var(--icon-background-color); - transition: background-color var(--ffe-transition-duration) - var(--ffe-ease); - } - - &__heading-icon.ffe-icons { - display: block; - flex: 0 0 auto; - color: var(--icon-color); - transition: - transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), - color var(--ffe-transition-duration) var(--ffe-ease); - } - - &__body { - padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm) - var(--ffe-spacing-md); - color: var(--ffe-v-accordion-body-text-color); - } - - &--open { - &:not(:last-of-type) { - margin-bottom: var(--ffe-spacing-md); - } - - .ffe-accordion-item__heading-icon { - transform: rotateZ(180deg); - } - } - - &--focus { - border-color: var(--ffe-v-accordion-focus-border-color); - } -} diff --git a/packages/ffe-accordion/less/ffe-accordion.less b/packages/ffe-accordion/less/ffe-accordion.less index 8e3101b029..a7aac4a14a 100644 --- a/packages/ffe-accordion/less/ffe-accordion.less +++ b/packages/ffe-accordion/less/ffe-accordion.less @@ -1,2 +1,116 @@ -@import 'theme'; -@import 'accordion'; +.ffe-accordion { + --ffe-v-accordion-hover-color: var( + --ffe-color-surface-primary-default-hover + ); + --ffe-v-accordion-border-color: var(--ffe-color-border-primary-subtle); + --ffe-v-accordion-border-hover-color: var(--ffe-color-border-primary-hover); + --ffe-v-accordion-border-focus-color: var( + --ffe-color-border-interactive-focus + ); + --ffe-v-accordion-header-text-color: var(--ffe-color-foreground-emphasis); + --ffe-v-accordion-body-text-color: var(--ffe-color-foreground-default); + + width: 100%; + border: var(--ffe-g-border-width) solid transparent; + font-family: var(--ffe-g-font); + + .ffe-accordion-item__heading { + margin: 0; + } + + .ffe-accordion-item { + color: var(--ffe-v-accordion-body-text-color); + margin-bottom: var(--ffe-spacing-xs); + transition: all var(--ffe-transition-duration) + var(--ffe-ease); + border-radius: 16px; + border: var(--ffe-g-border-width) solid + var(--ffe-v-accordion-border-color); + + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-v-accordion-border-hover-color); + } + } + + &__heading, + &__body { + overflow-wrap: anywhere; + margin: 0; + } + + &__heading-button { + width: 100%; + background: none; + border: none; + padding: var(--ffe-spacing-sm); + font-family: var(--ffe-g-font-heading-small); + cursor: pointer; + outline: none; + color: var(--ffe-v-accordion-header-text-color); + border-radius: 16px; + transition: background-color var(--ffe-transition-duration) + var(--ffe-ease); + + &--open { + border-radius: 16px 16px 0 0; + } + + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: var(--ffe-v-accordion-hover-color); + } + } + } + + &__heading-button-content { + text-align: left; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--ffe-spacing-xs); + } + + &__heading-icon-wrapper { + line-height: 0; + } + + &__heading-icon.ffe-icons { + display: block; + flex: 0 0 auto; + color: var(--ffe-v-accordion-header-text-color); + transition: + transform var(--ffe-transition-duration) + var(--ffe-ease-in-out-back), + color var(--ffe-transition-duration) var(--ffe-ease); + } + + &__body { + padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm) + var(--ffe-spacing-md); + color: var(--ffe-v-accordion-body-text-color); + } + + &--open { + &:not(:last-of-type) { + margin-bottom: var(--ffe-spacing-md); + } + + .ffe-accordion-item__heading-icon { + transform: rotateZ(180deg); + } + } + + &--focus { + box-shadow: 0 0 0 var(--ffe-g-border-width-focus) + var(--ffe-v-accordion-border-focus-color); + + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-v-accordion-border-color); + } + } + } + } +} diff --git a/packages/ffe-accordion/less/theme.less b/packages/ffe-accordion/less/theme.less deleted file mode 100644 index 15a9e37235..0000000000 --- a/packages/ffe-accordion/less/theme.less +++ /dev/null @@ -1,16 +0,0 @@ -:root, -:host { - --ffe-v-accordion-primary-color: var(--ffe-farge-vann); - --ffe-v-accordion-secondary-color: var(--ffe-farge-hvit); - --ffe-v-accordion-body-text-color: var(--ffe-farge-svart); - --ffe-v-accordion-focus-border-color: var(--ffe-farge-vann); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-accordion-primary-color: var(--ffe-farge-frost); - --ffe-v-accordion-secondary-color: var(--ffe-farge-natt); - --ffe-v-accordion-body-text-color: var(--ffe-farge-hvit); - --ffe-v-accordion-focus-border-color: var(--ffe-farge-hvit); - } - } -} From 294d33978b95a6057b17fda0c085dba90c8a6636 Mon Sep 17 00:00:00 2001 From: tuva-odegard Date: Mon, 20 Jan 2025 09:28:16 +0100 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20legger=20til=20kode=20s=C3=A5=20de?= =?UTF-8?q?t=20g=C3=A5r=20=C3=A5=20bygge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 57b4478b0b..e257c1d4d4 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,6 @@ import type { StorybookConfig } from '@storybook/react-vite'; - +import { createRequire } from 'module'; +const require = createRequire(import.meta.url); import { join, dirname } from 'path'; /**