chore: improve token preview in storefront (#665)

Co-authored-by: Michael Marszalek <[email protected]>

.eslintrc.js

@@ -46,6 +46,7 @@ module.exports = {
     'react/jsx-no-bind': 'off',
     'react/display-name': 'off',
     'import/no-unresolved': 'error',
+    'import/namespace': ['error', { allowComputed: true }],
     'import/order': [
       'warn',
       {

packages/tokens/brand/altinn/tokens.cjs.js

@@ -33,11 +33,11 @@ module.exports = {
   "semantic_surface_action_secondary_subtle": "#f4f5f6",
   "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
   "semantic_surface_action_secondary_default": "#00315d",
-  "semantic_surface_action_secondary_hover": "rgba(#00315d, 0.9)",
-  "semantic_surface_action_secondary_active": "rgba(#00315d, 0.8)",
+  "semantic_surface_action_secondary_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_secondary_active": "rgba(0, 49, 93, 0.8)",
   "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(#00315d, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(#00315d, 0.2)",
+  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",

packages/tokens/brand/altinn/tokens.css

@@ -37,11 +37,11 @@
   --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
   --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
   --fds-semantic-surface-action-secondary-default: #00315d;
-  --fds-semantic-surface-action-secondary-hover: rgba(#00315d, 0.9);
-  --fds-semantic-surface-action-secondary-active: rgba(#00315d, 0.8);
+  --fds-semantic-surface-action-secondary-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-secondary-active: rgba(0, 49, 93, 0.8);
   --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(#00315d, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(#00315d, 0.2);
+  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;

packages/tokens/brand/altinn/tokens.esm.js

@@ -32,11 +32,11 @@ export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_secondary_subtle = "#f4f5f6";
 export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
 export const semantic_surface_action_secondary_default = "#00315d";
-export const semantic_surface_action_secondary_hover = "rgba(#00315d, 0.9)";
-export const semantic_surface_action_secondary_active = "rgba(#00315d, 0.8)";
+export const semantic_surface_action_secondary_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_secondary_active = "rgba(0, 49, 93, 0.8)";
 export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(#00315d, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(#00315d, 0.2)";
+export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";

packages/tokens/brand/brreg/tokens.cjs.js

@@ -33,11 +33,11 @@ module.exports = {
   "semantic_surface_action_secondary_subtle": "#f4f5f6",
   "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
   "semantic_surface_action_secondary_default": "#00315d",
-  "semantic_surface_action_secondary_hover": "rgba(#00315d, 0.9)",
-  "semantic_surface_action_secondary_active": "rgba(#00315d, 0.8)",
+  "semantic_surface_action_secondary_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_secondary_active": "rgba(0, 49, 93, 0.8)",
   "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(#00315d, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(#00315d, 0.2)",
+  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",

packages/tokens/brand/brreg/tokens.css

@@ -37,11 +37,11 @@
   --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
   --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
   --fds-semantic-surface-action-secondary-default: #00315d;
-  --fds-semantic-surface-action-secondary-hover: rgba(#00315d, 0.9);
-  --fds-semantic-surface-action-secondary-active: rgba(#00315d, 0.8);
+  --fds-semantic-surface-action-secondary-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-secondary-active: rgba(0, 49, 93, 0.8);
   --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(#00315d, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(#00315d, 0.2);
+  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;

packages/tokens/brand/brreg/tokens.esm.js

@@ -32,11 +32,11 @@ export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_secondary_subtle = "#f4f5f6";
 export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
 export const semantic_surface_action_secondary_default = "#00315d";
-export const semantic_surface_action_secondary_hover = "rgba(#00315d, 0.9)";
-export const semantic_surface_action_secondary_active = "rgba(#00315d, 0.8)";
+export const semantic_surface_action_secondary_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_secondary_active = "rgba(0, 49, 93, 0.8)";
 export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(#00315d, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(#00315d, 0.2)";
+export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";

packages/tokens/brand/digdir/tokens.cjs.js

@@ -33,11 +33,11 @@ module.exports = {
   "semantic_surface_action_secondary_subtle": "#f4f5f6",
   "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
   "semantic_surface_action_secondary_default": "#00315d",
-  "semantic_surface_action_secondary_hover": "rgba(#00315d, 0.9)",
-  "semantic_surface_action_secondary_active": "rgba(#00315d, 0.8)",
+  "semantic_surface_action_secondary_hover": "rgba(0, 49, 93, 0.9)",
+  "semantic_surface_action_secondary_active": "rgba(0, 49, 93, 0.8)",
   "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(#00315d, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(#00315d, 0.2)",
+  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",

packages/tokens/brand/digdir/tokens.css

@@ -37,11 +37,11 @@
   --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
   --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
   --fds-semantic-surface-action-secondary-default: #00315d;
-  --fds-semantic-surface-action-secondary-hover: rgba(#00315d, 0.9);
-  --fds-semantic-surface-action-secondary-active: rgba(#00315d, 0.8);
+  --fds-semantic-surface-action-secondary-hover: rgba(0, 49, 93, 0.9);
+  --fds-semantic-surface-action-secondary-active: rgba(0, 49, 93, 0.8);
   --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(#00315d, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(#00315d, 0.2);
+  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;

packages/tokens/brand/digdir/tokens.esm.js

@@ -32,11 +32,11 @@ export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_secondary_subtle = "#f4f5f6";
 export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
 export const semantic_surface_action_secondary_default = "#00315d";
-export const semantic_surface_action_secondary_hover = "rgba(#00315d, 0.9)";
-export const semantic_surface_action_secondary_active = "rgba(#00315d, 0.8)";
+export const semantic_surface_action_secondary_hover = "rgba(0, 49, 93, 0.9)";
+export const semantic_surface_action_secondary_active = "rgba(0, 49, 93, 0.8)";
 export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(#00315d, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(#00315d, 0.2)";
+export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";

packages/tokens/brand/tilsynet/tokens.cjs.js

@@ -36,8 +36,8 @@ module.exports = {
   "semantic_surface_action_secondary_hover": "#376C5E",
   "semantic_surface_action_secondary_active": "#376C5E",
   "semantic_surface_action_secondary_no_fill": "#ffffff",
-  "semantic_surface_action_secondary_no_fill_hover": "rgba(#00315d, 0.1)",
-  "semantic_surface_action_secondary_no_fill_active": "rgba(#00315d, 0.2)",
+  "semantic_surface_action_secondary_no_fill_hover": "rgba(0, 49, 93, 0.1)",
+  "semantic_surface_action_secondary_no_fill_active": "rgba(0, 49, 93, 0.2)",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",

packages/tokens/brand/tilsynet/tokens.css

@@ -40,8 +40,8 @@
   --fds-semantic-surface-action-secondary-hover: #376C5E;
   --fds-semantic-surface-action-secondary-active: #376C5E;
   --fds-semantic-surface-action-secondary-no_fill: #ffffff;
-  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(#00315d, 0.1);
-  --fds-semantic-surface-action-secondary-no_fill-active: rgba(#00315d, 0.2);
+  --fds-semantic-surface-action-secondary-no_fill-hover: rgba(0, 49, 93, 0.1);
+  --fds-semantic-surface-action-secondary-no_fill-active: rgba(0, 49, 93, 0.2);
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;

packages/tokens/brand/tilsynet/tokens.esm.js

@@ -35,8 +35,8 @@ export const semantic_surface_action_secondary_default = "#407d6d";
 export const semantic_surface_action_secondary_hover = "#376C5E";
 export const semantic_surface_action_secondary_active = "#376C5E";
 export const semantic_surface_action_secondary_no_fill = "#ffffff";
-export const semantic_surface_action_secondary_no_fill_hover = "rgba(#00315d, 0.1)";
-export const semantic_surface_action_secondary_no_fill_active = "rgba(#00315d, 0.2)";
+export const semantic_surface_action_secondary_no_fill_hover = "rgba(0, 49, 93, 0.1)";
+export const semantic_surface_action_secondary_no_fill_active = "rgba(0, 49, 93, 0.2)";
 export const semantic_surface_success_subtle = "#d1f4e1";
 export const semantic_surface_success_subtle_hover = "#8be4b5";
 export const semantic_surface_success_default = "#118849";

packages/tokens/scripts/build.ts

@@ -68,6 +68,7 @@ StyleDictionary.registerTransformGroup({
     'ts/size/lineheight',
     'ts/shadow/css/shorthand',
     sizePx.name,
+    'ts/color/css/hexrgba',
   ],
 });
 StyleDictionary.registerTransformGroup({
@@ -79,6 +80,7 @@ StyleDictionary.registerTransformGroup({
     'ts/size/px',
     'ts/size/lineheight',
     'ts/shadow/css/shorthand',
+    'ts/color/css/hexrgba',
   ],
 });
 

packages/tokens/scripts/formatters.ts

@@ -89,35 +89,12 @@ const groupByType = R.groupBy(
   (token: TransformedToken) => token.type as string,
 );
 
-const groupByPathIndex = (level: number, tokens: TransformedToken[]) =>
-  R.groupBy((token: TransformedToken) => token.path[level], tokens);
-
-const shouldGroupPath = (level: number, tokens: TransformedToken[]) => {
-  const token = R.head(tokens);
-  const [, next] = R.splitAt(level, token?.path ?? []);
-  return next.length > 1;
-};
+/** Add token name with prefix to list for removal */
+const removeUnwatedTokens = R.filter(
+  (token: TransformedToken) =>
+    !['fds-base_spacing', 'fds-base_sizing'].includes(token.name),
+);
 
-const groupByNextPathIndex = <
-  T extends Partial<Record<string, TransformedToken[]>>,
->(
-  level: number,
-  record: T,
-): Record<string, unknown> =>
-  R.mapObjIndexed((tokens, key, obj) => {
-    if (R.isNil(tokens) || R.isNil(obj)) {
-      return tokens;
-    }
-
-    if (shouldGroupPath(level, tokens)) {
-      const grouped = groupByPathIndex(level, tokens);
-      return groupByNextPathIndex(level + 1, grouped);
-    }
-    return tokens;
-  }, record || {});
-
-const groupFromPathIndex = R.curry(groupByNextPathIndex);
-const groupTokens = R.pipe(groupByType, groupFromPathIndex(0));
 const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
 
 /**
@@ -131,13 +108,18 @@ export const groupedTokens: Named<Format> = {
       format: 'css',
     });
 
-    const formattedTokens = dictionary.allTokens.map((token) => ({
+    const formatTokens = R.map((token: TransformedToken) => ({
       ...token,
-      lastName: R.last(token.path),
       name: toCssVarName(format(token)),
     }));
 
-    const tokens = groupTokens(formattedTokens);
+    const processTokens = R.pipe(
+      removeUnwatedTokens,
+      formatTokens,
+      groupByType,
+    );
+
+    const tokens = processTokens(dictionary.allTokens);
 
     const content =
       fileHeader({ file }) +

storefront/components/ClipboardBtn/ClipboardBtn.module.css

@@ -1,14 +1,19 @@
 .btn {
-  border: none;
-  height: 40px;
-  width: 40px;
-  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  border-radius: 4px;
+  padding: 0 8px 0 4px;
   transition: 0.1s all;
+  border: none;
   cursor: pointer;
+  background-color: transparent;
+  font-size: 15px;
 }
 
 .btn:hover {
-  background-color: #cfcfcf;
+  background-color: #ddd;
 }
 
 .btn:hover svg {
@@ -18,3 +23,7 @@
 .tippy {
   font-family: 'Inter', sans-serif;
 }
+
+.text {
+  margin-left: 1px;
+}

storefront/components/ClipboardBtn/ClipboardBtn.tsx

@@ -1,43 +1,46 @@
 import React, { useState } from 'react';
-import { FilesIcon } from '@navikt/aksel-icons';
+import { ClipboardIcon } from '@navikt/aksel-icons';
 import Tippy from '@tippyjs/react';
 
 import classes from './ClipboardBtn.module.css';
 
 interface ClipboardBtnProps {
-  text: string;
+  title: string;
+  value: string;
+  text?: string;
 }
 
-const ClipboardBtn = ({ text }: ClipboardBtnProps) => {
+const ClipboardBtn = ({ title, value, text = '' }: ClipboardBtnProps) => {
   const [toolTipText, setToolTipText] = useState('Kopier');
 
-  const onClick = (text: string) => {
+  const onBtnClick = (text: string) => {
     setToolTipText('Kopiert!');
-    navigator.clipboard.writeText('--' + text).catch((reason) => {
+    navigator.clipboard.writeText(text).catch((reason) => {
       throw Error(String(reason));
     });
   };
 
   return (
-    <div>
+    <>
       <Tippy
         content={toolTipText}
         hideOnClick={false}
         className={classes.tippy}
       >
         <button
-          onMouseEnter={() => setToolTipText('Kopier')}
-          onClick={() => onClick(text)}
+          onMouseEnter={() => setToolTipText(title)}
+          onClick={() => onBtnClick(value)}
           className={classes.btn}
-          title='Kopier'
+          title={title}
         >
-          <FilesIcon
-            fontSize={24}
+          <ClipboardIcon
+            fontSize={20}
             color='#585858'
           />
+          {text && <span className={classes.text}>{text}</span>}
         </button>
       </Tippy>
-    </div>
+    </>
   );
 };
 

storefront/components/MdxContent/MdxContent.module.css

@@ -1,3 +1,8 @@
+.content {
+  padding: 8px 24px;
+  width: 100%;
+}
+
 .content > p,
 .content > h2,
 .content > h3,

storefront/components/Section/index.ts

@@ -1 +1 @@
-export { Section } from './Section';
+export { Section } from './Section';