From 8f54295b208cfb9ac1142477cea127ffbcbf9f72 Mon Sep 17 00:00:00 2001 From: Anders Johnsen Date: Tue, 25 Feb 2025 16:07:59 +0100 Subject: [PATCH] fix(ffe-file-upload): semantiske farger i file upload MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * alle farger er erstattet med den semantiske paletten * fil som importeres er nå file-upload.less/css BREAKING CHANGE: endring i farger og import --- packages/ffe-file-upload/README.md | 12 +- .../ffe-file-upload/less/ffe-file-upload.less | 298 ----------------- .../ffe-file-upload/less/file-upload.less | 300 +++++++++++++++++- packages/ffe-file-upload/less/theme.less | 24 -- 4 files changed, 299 insertions(+), 335 deletions(-) delete mode 100644 packages/ffe-file-upload/less/ffe-file-upload.less delete mode 100644 packages/ffe-file-upload/less/theme.less diff --git a/packages/ffe-file-upload/README.md b/packages/ffe-file-upload/README.md index 27c7e20c99..293e822544 100644 --- a/packages/ffe-file-upload/README.md +++ b/packages/ffe-file-upload/README.md @@ -11,7 +11,7 @@ npm install --save @sb1/ffe-file-upload Full documentation on file upload usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/#fileupload. ```less -@import 'path/to/node_modules/@sb1/ffe-file.upload/less/ffe-file-upload.less'; +@import 'path/to/node_modules/@sb1/ffe-file.upload/less/file-upload.less'; ``` ### Importing compiled CSS @@ -24,16 +24,6 @@ If your project does not use Less, you can import the compiled styling: See also `@sb1/ffe-file-upload-react`. -## Theming with CSS custom properties - -In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`. - -If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`: - -```css -@import '~@sb1/ffe-core/less/theme'; -``` - ## Development To start a local development server, run the following from the designsystem root folder: diff --git a/packages/ffe-file-upload/less/ffe-file-upload.less b/packages/ffe-file-upload/less/ffe-file-upload.less deleted file mode 100644 index 59e59c9a69..0000000000 --- a/packages/ffe-file-upload/less/ffe-file-upload.less +++ /dev/null @@ -1,298 +0,0 @@ -@import (reference) '@sb1/ffe-core/less/breakpoints'; -@import (reference) '@sb1/ffe-core/less/typography'; - -.ffe-file-upload { - margin-top: var(--ffe-spacing-2xl); - display: grid; - max-width: 400px; - grid-template-columns: 1fr; - font-family: var(--ffe-g-font); - - @media (min-width: @breakpoint-md) { - max-width: 100%; - } - - &__title { - font-family: var(--ffe-g-font-heading-small); - font-size: var(--ffe-fontsize-h5); - color: var(--ffe-g-heading-color); - margin-bottom: 0; - } - - input[type='file'] { - display: none; - } - - &__info-section { - .ffe-body-text(); - - margin-bottom: var(--ffe-spacing-md); - grid-row: 2; - - @media (min-width: @breakpoint-md) { - margin-right: var(--ffe-spacing-md); - margin-bottom: 0; - grid-column: 1; - } - } - - &__info-section-text { - margin-bottom: var(--ffe-spacing-sm); - } - - &__file-items-section { - margin-top: var(--ffe-spacing-sm); - line-height: 2.1875rem; - grid-row: 4; - - @media (min-width: @breakpoint-md) { - margin-top: 0; - grid-row: 2; - } - - li { - display: grid; - grid-template-columns: 1fr; - } - } - - &__upload-section { - min-height: 150px; - background-color: var(--ffe-v-fileupload-bgcolor); - border-radius: 10px; - text-align: center; - padding: var(--ffe-spacing-2xs); - grid-row: 3; - - @media (min-width: @breakpoint-md) { - margin-top: 0; - min-height: 220px; - width: 280px; - padding: 0; - grid-row: 2; - grid-column: 2; - } - } - - &__upload-section-border { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: 140px; - margin: var(--ffe-spacing-2xs); - padding: var(--ffe-spacing-2xs) var(--ffe-spacing-lg); - border: 2px dashed var(--ffe-v-fileupload-bordercolor); - border-radius: 10px; - position: relative; - width: 100%; - right: 5px; - bottom: 5px; - - @media (min-width: @breakpoint-md) { - width: 270px; - min-height: 210px; - right: 0; - bottom: 0; - } - - &--hover { - opacity: 0.5; - border-style: solid; - } - } - - &__upload-section-title { - font-family: var(--ffe-g-font-heading-small); - font-size: var(--ffe-fontsize-h5); - color: var(--ffe-g-heading-color); - margin-bottom: var(--ffe-spacing-xs); - display: none; - - @media (min-width: @breakpoint-md) { - display: block; - } - } - - &__upload-section-microtext { - .ffe-micro-text(); - - display: none; - - @media (min-width: @breakpoint-md) { - display: block; - } - } - - &__upload-section-subtext { - .ffe-small-text(); - - margin-top: var(--ffe-spacing-xs); - } - - &__file-item-delete-icon { - display: inline-block; - } - - &__file-item-delete-button { - padding-top: var(--ffe-spacing-2xs); - margin-left: auto; - background-color: transparent; - border: none; - line-height: 1.125rem; - position: relative; - color: var(--ffe-v-fileupload-btn-delete-color); - cursor: pointer; - font-size: 0.875rem; - grid-column: 3; - grid-row: 1; - display: flex; - align-items: center; - - @media (min-width: @breakpoint-md) { - margin-right: var(--ffe-spacing-sm); - } - - @media (hover: hover) and (pointer: fine) { - &:hover { - color: var(--ffe-v-fileupload-btn-delete-color-hover); - - ~ .ffe-file-upload__file-item-filename { - text-decoration: underline; - } - - ~ .ffe-file-upload__file-item-error-info - > .ffe-file-upload__file-item-error-filename { - text-decoration: underline; - } - - ~ .ffe-file-upload__file-item-stencil-info - > .ffe-file-upload__file-item-stencil-info-filename { - text-decoration: underline; - } - - .ffe-file-upload__file-item-delete-button-text { - text-decoration: underline; - } - } - } - - &:active, - &:focus { - color: var(--ffe-v-fileupload-btn-delete-color-hover); - - ~ .ffe-file-upload__file-item-filename { - text-decoration: underline; - } - - ~ .ffe-file-upload__file-item-error-info - > .ffe-file-upload__file-item-error-filename { - text-decoration: underline; - } - - ~ .ffe-file-upload__file-item-stencil-info - > .ffe-file-upload__file-item-stencil-info-filename { - text-decoration: underline; - } - - .ffe-file-upload__file-item-delete-button-text { - text-decoration: underline; - } - } - } - - &__file-item-stencil { - display: grid; - grid-template-columns: 1fr; - } - - &__file-item-stencil-info { - display: grid; - grid-column: 1; - grid-row: 1; - grid-template-columns: 1fr; - overflow: hidden; - } - - &__file-item-stencil-info-background { - height: 10px; - border-radius: 5px; - background-color: var(--ffe-v-fileupload-stencil-bg); - } - - &__file-item-stencil-info-filename { - .ffe-micro-text(); - - margin-top: var(--ffe-spacing-2xs); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__file-item-loaded { - display: grid; - grid-template-columns: 1fr; - } - - &__file-item-filename { - grid-row: 1; - grid-column: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-top: 2px; - color: var(--ffe-v-fileupload-filename-color); - } - - &__file-item-error { - display: grid; - grid-gap: 5px; - grid-template-columns: 25px 1fr; - } - - &__file-item-error-icon { - background-color: var(--ffe-v-error-message-icon-color); - border-radius: 50%; - width: 18px; - height: 18px; - margin-right: var(--ffe-spacing-2xs); - padding: 3px; - font-family: arial, sans-serif; - display: inline-flex; - align-items: center; - justify-content: center; - align-self: center; - grid-column: 1; - grid-row: 1; - - .ffe-icons { - color: var(--ffe-v-fileupload-error-icon-color); - } - } - - &__file-item-error-info { - display: grid; - grid-row: 1; - grid-column: 2; - grid-template-columns: 1fr; - align-content: center; - } - - &__file-item-error-filename { - .ffe-micro-text(); - - grid-row: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__file-item-error-message { - .ffe-micro-text(); - - grid-row: 2; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} diff --git a/packages/ffe-file-upload/less/file-upload.less b/packages/ffe-file-upload/less/file-upload.less index 02c17e07c4..2d985ff4b3 100644 --- a/packages/ffe-file-upload/less/file-upload.less +++ b/packages/ffe-file-upload/less/file-upload.less @@ -1,2 +1,298 @@ -@import 'theme'; -@import 'ffe-file-upload'; +@import (reference) '@sb1/ffe-core/less/breakpoints'; +@import (reference) '@sb1/ffe-core/less/typography'; + +.ffe-file-upload { + margin-top: var(--ffe-spacing-2xl); + display: grid; + max-width: 400px; + grid-template-columns: 1fr; + font-family: var(--ffe-g-font); + + @media (min-width: @breakpoint-md) { + max-width: 100%; + } + + &__title { + font-family: var(--ffe-g-font-heading-small); + font-size: var(--ffe-fontsize-h5); + color: var(--ffe-color-foreground-emphasis); + margin-bottom: 0; + } + + input[type='file'] { + display: none; + } + + &__info-section { + .ffe-body-text(); + + margin-bottom: var(--ffe-spacing-md); + grid-row: 2; + + @media (min-width: @breakpoint-md) { + margin-right: var(--ffe-spacing-md); + margin-bottom: 0; + grid-column: 1; + } + } + + &__info-section-text { + margin-bottom: var(--ffe-spacing-sm); + } + + &__file-items-section { + margin-top: var(--ffe-spacing-sm); + line-height: 2.1875rem; + grid-row: 4; + + @media (min-width: @breakpoint-md) { + margin-top: 0; + grid-row: 2; + } + + li { + display: grid; + grid-template-columns: 1fr; + } + } + + &__upload-section { + min-height: 150px; + background-color: var(--ffe-color-surface-secondary-default); + border-radius: 10px; + text-align: center; + padding: var(--ffe-spacing-2xs); + grid-row: 3; + + @media (min-width: @breakpoint-md) { + margin-top: 0; + min-height: 220px; + width: 280px; + padding: 0; + grid-row: 2; + grid-column: 2; + } + } + + &__upload-section-border { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 140px; + margin: var(--ffe-spacing-2xs); + padding: var(--ffe-spacing-2xs) var(--ffe-spacing-lg); + border: 2px dashed var(--ffe-color-border-primary-emphasis); + border-radius: 10px; + position: relative; + width: 100%; + right: 5px; + bottom: 5px; + + @media (min-width: @breakpoint-md) { + width: 270px; + min-height: 210px; + right: 0; + bottom: 0; + } + + &--hover { + opacity: 0.5; + border-style: solid; + } + } + + &__upload-section-title { + font-family: var(--ffe-g-font-heading-small); + font-size: var(--ffe-fontsize-h5); + color: var(--ffe-color-foreground-emphasis); + margin-bottom: var(--ffe-spacing-xs); + display: none; + + @media (min-width: @breakpoint-md) { + display: block; + } + } + + &__upload-section-microtext { + .ffe-micro-text(); + + display: none; + + @media (min-width: @breakpoint-md) { + display: block; + } + } + + &__upload-section-subtext { + .ffe-small-text(); + + margin-top: var(--ffe-spacing-xs); + } + + &__file-item-delete-icon { + display: inline-block; + } + + &__file-item-delete-button { + padding-top: var(--ffe-spacing-2xs); + margin-left: auto; + background-color: transparent; + border: none; + line-height: 1.125rem; + position: relative; + color: var(--ffe-color-foreground-interactive-link); + cursor: pointer; + font-size: 0.875rem; + grid-column: 3; + grid-row: 1; + display: flex; + align-items: center; + + @media (min-width: @breakpoint-md) { + margin-right: var(--ffe-spacing-sm); + } + + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-color-foreground-interactive-link-hover); + + ~ .ffe-file-upload__file-item-filename { + text-decoration: underline; + } + + ~ .ffe-file-upload__file-item-error-info + > .ffe-file-upload__file-item-error-filename { + text-decoration: underline; + } + + ~ .ffe-file-upload__file-item-stencil-info + > .ffe-file-upload__file-item-stencil-info-filename { + text-decoration: underline; + } + + .ffe-file-upload__file-item-delete-button-text { + text-decoration: underline; + } + } + } + + &:active, + &:focus { + color: var(--ffe-color-foreground-interactive-link-hover); + + ~ .ffe-file-upload__file-item-filename { + text-decoration: underline; + } + + ~ .ffe-file-upload__file-item-error-info + > .ffe-file-upload__file-item-error-filename { + text-decoration: underline; + } + + ~ .ffe-file-upload__file-item-stencil-info + > .ffe-file-upload__file-item-stencil-info-filename { + text-decoration: underline; + } + + .ffe-file-upload__file-item-delete-button-text { + text-decoration: underline; + } + } + } + + &__file-item-stencil { + display: grid; + grid-template-columns: 1fr; + } + + &__file-item-stencil-info { + display: grid; + grid-column: 1; + grid-row: 1; + grid-template-columns: 1fr; + overflow: hidden; + } + + &__file-item-stencil-info-background { + height: 10px; + border-radius: 5px; + background-color: var(--ffe-color-surface-secondary-default); + } + + &__file-item-stencil-info-filename { + .ffe-micro-text(); + + margin-top: var(--ffe-spacing-2xs); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__file-item-loaded { + display: grid; + grid-template-columns: 1fr; + } + + &__file-item-filename { + grid-row: 1; + grid-column: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; + color: var(--ffe-color-foreground-emphasis); + } + + &__file-item-error { + display: grid; + grid-gap: 5px; + grid-template-columns: 25px 1fr; + } + + &__file-item-error-icon { + background-color: var(--ffe-color-foreground-feedback-critical); + border-radius: 50%; + width: 18px; + height: 18px; + margin-right: var(--ffe-spacing-2xs); + padding: 3px; + font-family: arial, sans-serif; + display: inline-flex; + align-items: center; + justify-content: center; + align-self: center; + grid-column: 1; + grid-row: 1; + + .ffe-icons { + color: var(--ffe-color-surface-primary-default); + } + } + + &__file-item-error-info { + display: grid; + grid-row: 1; + grid-column: 2; + grid-template-columns: 1fr; + align-content: center; + } + + &__file-item-error-filename { + .ffe-micro-text(); + + grid-row: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__file-item-error-message { + .ffe-micro-text(); + + grid-row: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} diff --git a/packages/ffe-file-upload/less/theme.less b/packages/ffe-file-upload/less/theme.less deleted file mode 100644 index a3f9e62484..0000000000 --- a/packages/ffe-file-upload/less/theme.less +++ /dev/null @@ -1,24 +0,0 @@ -:root, -:host { - --ffe-v-fileupload-bgcolor: var(--ffe-farge-frost-30); - --ffe-v-fileupload-bordercolor: var(--ffe-farge-vann); - --ffe-v-fileupload-btn-delete-color: var(--ffe-g-link-color); - --ffe-v-fileupload-btn-delete-color-hover: var(--ffe-g-link-color-hover); - --ffe-v-fileupload-stencil-bg: var(--ffe-farge-frost-30); - --ffe-v-fileupload-filename-color: var(--ffe-farge-fjell); - --ffe-v-fileupload-error-icon-color: var(--ffe-farge-hvit); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-fileupload-bgcolor: var(--ffe-farge-svart); - --ffe-v-fileupload-bordercolor: var(--ffe-farge-vann-30); - --ffe-v-fileupload-btn-delete-color: var(--ffe-g-link-color); - --ffe-v-fileupload-btn-delete-color-hover: var( - --ffe-g-link-color-hover - ); - --ffe-v-fileupload-stencil-bg: var(--ffe-farge-frost-70); - --ffe-v-fileupload-filename-color: var(--ffe-farge-vann-30); - --ffe-v-fileupload-error-icon-color: var(--ffe-farge-fjell); - } - } -}