diff --git a/count-stories.js b/count-stories.js index 19dfb767ca..b84406472a 100644 --- a/count-stories.js +++ b/count-stories.js @@ -8,13 +8,28 @@ function countStoryFiles(directoryPath) { // Folders to exclude const excludeFolders = [ + 'ffe-accordion-react', + 'ffe-account-selector-react', 'ffe-buttons-react', - 'ffe-messages-react', - 'ffe-feedback-react', + 'ffe-cards-react', 'ffe-chips-react', + 'ffe-collapse-react', 'ffe-core', - 'ffe-accordion-react', + 'ffe-core-react', 'ffe-datepicker-react', + 'ffe-chart-donut-react', + 'ffe-feedback-react', + 'ffe-formatters', + 'ffe-form-react', + 'ffe-grid-react', + 'ffe-icons-react', + 'ffe-lists-react', + 'ffe-messages-react', + 'ffe-modals-react', + 'ffe-pagination-react', + 'ffe-searchable-dropdown-react', + 'ffe-spinner-react', + 'ffe-tabs-react', ]; const colors = { diff --git a/documentation/Changelog.mdx b/documentation/Changelog.mdx index 7d97a90d50..abf0543037 100644 --- a/documentation/Changelog.mdx +++ b/documentation/Changelog.mdx @@ -27,3 +27,22 @@ Variablene som var i komponentene av formen `--ffe-v-` fases ut. Disse var oppri Bruken av `--ffe-v-` har og sklidd ut i senere tid generelt i systemet. Fargene i formatet `--ffe-farge-` er fremdeles tilgjengelig, men vi anbefaler å bytte de ut med passende farger i formatet `--ffe-color-`, som man finner på fargesiden. Disse er semantiske og vil fungere i alle kontekster. + +Farger i `ffe-core/less/colors-deprecated.less` fjernes også. Dette er gamle Less-variabler på formatet `@ffe-blue-royal` + +#### Tailwind + +For de som bruker Tailwind kan en oppdatere importen fra `@sb1/ffe-core/lib/colors` til `@sb1/ffe-core/lib/senamticColors`. + +```tsx +import * as colors from '@sb1/ffe-core/lib/senamticColors'; +module.exports = { + theme: { + colors: { + ...colors, + }, + }, +}; +``` + +Da blir fargene tilgjengelige i camelCase uten `--ffe-color`. Feks `--ffe-color-background-default` -> `backgroundDefault` diff --git a/packages/ffe-core/documentation/Colors.mdx b/packages/ffe-core/documentation/Colors.mdx index ae381671f7..7d98a6dd1b 100644 --- a/packages/ffe-core/documentation/Colors.mdx +++ b/packages/ffe-core/documentation/Colors.mdx @@ -22,11 +22,26 @@ Bruken av accent er der en har en blokk på side med en annen bakgrunnsfarge enn Se eksempelet [på en slik side med en accent section]() WIP +## Tailwind + +For å bruke semantiske farger i Tailwind importerer en `@sb1/ffe-core/lib/senamticColors`. + +```tsx +import * as colors from '@sb1/ffe-core/lib/senamticColors'; +module.exports = { + theme: { + colors: { + ...colors, + }, + }, +}; +``` + +Da blir fargene tilgjengelige i camelCase uten `--ffe-color`. Feks `--ffe-color-background-default` -> `backgroundDefault` ## Liste over de semantiske fargene - - +
@@ -57,4 +72,3 @@ Se eksempelet [på en slik side med en accent section]() WIP ))}
Farge navn
-