Merge pull request #2582 from SpareBank1/color-default-mode

Color default mode
SpareBank1 · Feb 26, 2025 · aaea9ec · aaea9ec
2 parents 2f20133 + 1393ed8
commit aaea9ec
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/packages/ffe-core/documentation/Accent.mdx b/packages/ffe-core/documentation/Accent.mdx
@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+import { colors } from '../gen-src/semantic-color-names.json';
+
+<Meta title="Design/Farger/Accent" />
+
+# Accent
+
+Accent mode aktiveres med å legge klassen `ffe-accent-mode` på elementet eller på
+containeren til elementet. Trenger en default mode inne i eccentmode kan en legge på klassen `.ffe-default-mode`.
+
+Noen vanlige eksempler på bruk av accent mode
+
+```jsx
+// En komponent med accent mode
+<PrimaryButton
+    className="ffe-accent-mode">
+    Primærknapp
+</PrimaryButton>
+
+
+// Flere komponenter med accent mode i samme område
+<div
+   className="ffe-accent-mode"
+   style={{backgroundColor:"var(--ffe-color-background-default)"}}>
+   <PrimaryButton>
+      Primærknapp
+   </PrimaryButton>
+   <SecondaryButton>
+      Sekundærknapp
+   </SecondaryButton>
+</div>
+
+
+// En komponent med accent mode i et accentområde og en komponent med default mode
+<div
+   className="ffe-accent-mode"
+   style={{backgroundColor:"var(--ffe-color-background-default)"}}>
+   <PrimaryButton>
+      Primærknapp
+   </PrimaryButton>
+   <SecondaryButton className="ffe-default-mode">
+      Sekundærknapp
+   </SecondaryButton>
+</div>
+```
+
+Se eksempelet [på en slik side med en accent section]() WIP
diff --git a/packages/ffe-core/documentation/Colors.mdx b/packages/ffe-core/documentation/Colors.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
 import { colors } from '../gen-src/semantic-color-names.json';
 
-<Meta title="Design/Farger" />
+<Meta title="Design/Farger/Introduksjon" />
 
 # Farger
 
@@ -16,11 +16,7 @@ kan vi variere hvilke farge som vises på tvers av appen. Vi støtter 4 moduser
 
 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
+containeren til elementet. Se mer om accent mode på [siden om accent mode](./?path=/docs/design-farger-accent--docs) WIP
 
 ## Tailwind
 

diff --git a/packages/ffe-core/scripts/generate-semantic-colors.js b/packages/ffe-core/scripts/generate-semantic-colors.js
@@ -170,7 +170,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function generateSemanticColors() {
     let cssContent = '// Generated from Figma tokens';
     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// Context \n:root,\n:host,\n.ffe-default-mode {\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))}`;
     cssContent += `\n\n${convertPrimitivesJsonToCss(filePath(files.primitive))}`;