diff --git a/packages/ffe-chart-donut-react/less/chart-donut.less b/packages/ffe-chart-donut-react/less/chart-donut.less deleted file mode 100644 index e49977210d..0000000000 --- a/packages/ffe-chart-donut-react/less/chart-donut.less +++ /dev/null @@ -1,73 +0,0 @@ -.ffe-chart-donut { - display: grid; - width: fit-content; - grid-template-columns: auto; - grid-template-rows: auto; - place-items: center; - position: relative; - text-align: left; - - &--first { - stroke: var(--ffe-color-default-brand-primary-subtle); - } - - &--last { - stroke: var(--ffe-color-foreground-emphasis); - } - - &__circle, - &__description { - grid-column: 1 e('/') 1; - grid-row: 1 e('/') 1; - } - - &__circle { - width: 12.5rem; - aspect-ratio: 1; - } - - &__description { - z-index: 1; - } - - &__name { - color: var(--ffe-color-foreground-emphasis); - text-align: center; - } - - &__fractions { - display: grid; - grid-template-columns: auto 1px auto; - grid-template-rows: auto auto; - grid-column-gap: var(--ffe-spacing-xs); - - &::after { - grid-column: 2 e('/') 3; - grid-row: 1 e('/') 2; - display: flex; - // Using subtle border color for the separator - background: var(--ffe-color-border-primary-subtle); - height: 1lh; - content: ''; - } - } - - &__fraction { - display: grid; - place-items: center; - } - - .ffe-chart-donut__amount { - color: var(--ffe-color-foreground-default); - } - - &__fraction:first-of-type { - grid-column: 1 e('/') 2; - grid-row: 1 e('/') 3; - } - - &__fraction:last-of-type { - grid-column: 3 e('/') 4; - grid-row: 1 e('/') 3; - } -} diff --git a/packages/ffe-chart-donut-react/less/ffe-chart-donut.less b/packages/ffe-chart-donut-react/less/ffe-chart-donut.less index d159423adc..e49977210d 100644 --- a/packages/ffe-chart-donut-react/less/ffe-chart-donut.less +++ b/packages/ffe-chart-donut-react/less/ffe-chart-donut.less @@ -1,2 +1,73 @@ -@import 'theme'; -@import 'chart-donut'; +.ffe-chart-donut { + display: grid; + width: fit-content; + grid-template-columns: auto; + grid-template-rows: auto; + place-items: center; + position: relative; + text-align: left; + + &--first { + stroke: var(--ffe-color-default-brand-primary-subtle); + } + + &--last { + stroke: var(--ffe-color-foreground-emphasis); + } + + &__circle, + &__description { + grid-column: 1 e('/') 1; + grid-row: 1 e('/') 1; + } + + &__circle { + width: 12.5rem; + aspect-ratio: 1; + } + + &__description { + z-index: 1; + } + + &__name { + color: var(--ffe-color-foreground-emphasis); + text-align: center; + } + + &__fractions { + display: grid; + grid-template-columns: auto 1px auto; + grid-template-rows: auto auto; + grid-column-gap: var(--ffe-spacing-xs); + + &::after { + grid-column: 2 e('/') 3; + grid-row: 1 e('/') 2; + display: flex; + // Using subtle border color for the separator + background: var(--ffe-color-border-primary-subtle); + height: 1lh; + content: ''; + } + } + + &__fraction { + display: grid; + place-items: center; + } + + .ffe-chart-donut__amount { + color: var(--ffe-color-foreground-default); + } + + &__fraction:first-of-type { + grid-column: 1 e('/') 2; + grid-row: 1 e('/') 3; + } + + &__fraction:last-of-type { + grid-column: 3 e('/') 4; + grid-row: 1 e('/') 3; + } +} diff --git a/packages/ffe-chart-donut-react/less/theme.less b/packages/ffe-chart-donut-react/less/theme.less deleted file mode 100644 index 5e6e54cfa7..0000000000 --- a/packages/ffe-chart-donut-react/less/theme.less +++ /dev/null @@ -1,14 +0,0 @@ -:root, -:host { - --ffe-v-chart-donut-first-color: var(--ffe-farge-vann); - --ffe-v-chart-donut-last-color: var(--ffe-farge-fjell); - --ffe-v-chart-donut-text-color: var(--ffe-farge-koksgraa); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-chart-donut-first-color: var(--ffe-farge-vann-30); - --ffe-v-chart-donut-last-color: var(--ffe-farge-vann-70); - --ffe-v-chart-donut-text-color: var(--ffe-farge-lysgraa); - } - } -}