diff --git a/.storybook/colors.less b/.storybook/colors.less
new file mode 100644
index 0000000000..71868ce9bf
--- /dev/null
+++ b/.storybook/colors.less
@@ -0,0 +1,9 @@
+.ffe-color-table {
+ td {
+ &:first-child {
+ width: auto;
+ }
+ width: 100px;
+ }
+ border-collapse: collapse;
+}
diff --git a/.storybook/main.less b/.storybook/main.less
index 35f9ea538a..76a6e1472e 100644
--- a/.storybook/main.less
+++ b/.storybook/main.less
@@ -47,3 +47,4 @@
@import '../packages/ffe-tables/less/tables';
@import '../packages/ffe-tabs/less/tabs';
@import '../packages/ffe-chips/less/chip';
+@import './colors';
diff --git a/.storybook/main.ts b/.storybook/main.ts
index e257c1d4d4..48366ee1b9 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,7 @@
import type { StorybookConfig } from '@storybook/react-vite';
import { createRequire } from 'module';
+import { dirname, join } from 'path';
const require = createRequire(import.meta.url);
-import { join, dirname } from 'path';
/**
* This function is used to resolve the absolute path of a package.
@@ -13,6 +13,7 @@ function getAbsolutePath(value: string): any {
const config: StorybookConfig = {
stories: [
+ '../packages/ffe-core/documentation/Index.mdx',
'../packages/**/*.@(mdx)',
'../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index e4765553ad..5d56c284a7 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -48,6 +48,7 @@ const preview: Preview = {
options: {
storySort: {
method: 'alphabetical',
+ order: ['Introduksjon', 'Design', 'Komponenter', 'Sider'],
},
},
},
diff --git a/packages/ffe-core/documentation/AccentPage.mdx b/packages/ffe-core/documentation/AccentPage.mdx
new file mode 100644
index 0000000000..c42280d504
--- /dev/null
+++ b/packages/ffe-core/documentation/AccentPage.mdx
@@ -0,0 +1,7 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as AccentPageStories from './AccentPage.stories.tsx';
+
+
+
+
\ No newline at end of file
diff --git a/packages/ffe-core/documentation/AccentPage.stories.tsx b/packages/ffe-core/documentation/AccentPage.stories.tsx
new file mode 100644
index 0000000000..27e49952d8
--- /dev/null
+++ b/packages/ffe-core/documentation/AccentPage.stories.tsx
@@ -0,0 +1,35 @@
+import { PrimaryButton } from '@sb1/ffe-buttons-react';
+import { Heading1 } from '@sb1/ffe-core-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta = {
+ title: 'Pages/Accent',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Standard: Story = {
+ render: () => (
+
+ ),
+};
diff --git a/packages/ffe-core/documentation/Colors.mdx b/packages/ffe-core/documentation/Colors.mdx
new file mode 100644
index 0000000000..ae381671f7
--- /dev/null
+++ b/packages/ffe-core/documentation/Colors.mdx
@@ -0,0 +1,60 @@
+import { Meta } from '@storybook/blocks';
+import { colors } from '../gen-src/semantic-color-names.json';
+
+
+
+# Farger
+
+I designsystemet bruker vi semantiske farger. Det vil si at vi bruker farger med navn som
+`--ffe-color-background-default` i stedet for fargekoder som `#000000`. Ved å bruke slike navn
+kan vi variere hvilke farge som vises på tvers av appen. Vi støtter 4 moduser i dag:
+
+- Light - default
+- Light accent - for å fremheve elementer
+- Dark - for mørk modus
+- Dark accent - for å fremheve elementer i mørk modus
+
+Dark mode aktiveres automatisk basert på brukerens systeminnstillinger.
+Accent mode aktiveres med å legge klassen `ffe-accent-mode` på elementet eller på
+containeren til elementet.
+
+Bruken av accent er der en har en blokk på side med en annen bakgrunnsfarge enn resten.
+
+Se eksempelet [på en slik side med en accent section]() WIP
+
+
+## Liste over de semantiske fargene
+
+
+
+
+
+ | Farge navn |
+ Light |
+ Light accent |
+ Dark |
+ Dark accent |
+
+
+
+ {colors.map(color => (
+
+ | {color} |
+ |
+ |
+ |
+ |
+
+ ))}
+
+
+
diff --git a/packages/ffe-core/documentation/Index.mdx b/packages/ffe-core/documentation/Index.mdx
new file mode 100644
index 0000000000..06169764ab
--- /dev/null
+++ b/packages/ffe-core/documentation/Index.mdx
@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/blocks';
+import { colors } from '../gen-src/semantic-color-names.json';
+
+
+
+# Velkommen til Sparebank 1 Designsystem
\ No newline at end of file
diff --git a/packages/ffe-core/documentation/colors.tsx b/packages/ffe-core/documentation/colors.tsx
new file mode 100644
index 0000000000..ee6cbcafc8
--- /dev/null
+++ b/packages/ffe-core/documentation/colors.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+// import {colors} from '../gen-src/semantic-color-names.js;
+
+export const ColorsComponent = () => {
+ const colors = ['derp'];
+ return (
+
+
+
+ | Farge navn |
+ Light |
+ Light accent |
+ Dark |
+ Dark accent |
+
+
+
+ {colors.map(color => (
+
+ | {color} |
+ |
+ |
+ |
+ |
+
+ ))}
+
+
+ );
+};
diff --git a/packages/ffe-core/scripts/generate-semantic-colors.js b/packages/ffe-core/scripts/generate-semantic-colors.js
index f600d9b1c2..ad191e3dc6 100755
--- a/packages/ffe-core/scripts/generate-semantic-colors.js
+++ b/packages/ffe-core/scripts/generate-semantic-colors.js
@@ -5,6 +5,7 @@ const writeToFile = require('./lib/writeToFile');
const usedPrimitive = {};
const usedSemantic = {};
+const semanticColorNames = [];
const files = {
primitive: '01 Primitive.value.json',
@@ -46,6 +47,7 @@ const convertPrimitivesJsonToCss = jsonFile => {
const convertContextJsonToCss = jsonFile => {
const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
const cssLines = [];
+ const saveColors = semanticColorNames.length === 0;
const processColorTokens = (obj, prefix = '') => {
for (const [key, value] of Object.entries(obj)) {
@@ -64,6 +66,7 @@ const convertContextJsonToCss = jsonFile => {
: value.$value;
cssLines.push(`${cssVarName}: ${cssVarValue};`);
usedSemantic[cssVarValue] = true;
+ if (saveColors) semanticColorNames.push(cssVarName);
} else if (typeof value === 'object') {
processColorTokens(value, `${prefix}${key}-`);
}
@@ -80,7 +83,6 @@ const convertContextJsonToCss = jsonFile => {
const convertSemanticJsonToCss = (
jsonFile,
contextJsonFile,
- contextAccentJsonFile,
isStorybook = false,
) => {
const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
@@ -141,16 +143,18 @@ function generateSemanticColors() {
cssContent += `\n\n// Context accent \n.ffe-accent-mode {\n${convertContextJsonToCss(filePath(files.contextAccent)).join('\n')}}\n`;
cssContent += `\n\n// Context \n:root,\n:host {\n${convertContextJsonToCss(filePath(files.context)).join('\n')}}\n`;
cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticLight))}`;
- cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticDark), filePath(files.context), filePath(files.contextAccent))}`;
+ cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticDark), filePath(files.context))}`;
cssContent += `\n\n${convertPrimitivesJsonToCss(filePath(files.primitive))}`;
writeToFile('less/colors-semantic.less')(cssContent);
writeToFile('css/colors-semantic.css')(cssContent);
+ writeToFile('gen-src/semantic-color-names.json')(
+ JSON.stringify({ colors: semanticColorNames }),
+ );
const storybookCssContent = convertSemanticJsonToCss(
filePath(files.semanticDark),
filePath(files.context),
- filePath(files.contextAccent),
true,
);
writeToFile('less/colors-semantic-storybook.less')(storybookCssContent);