feat: 🎨 V1 Release candidate

.eslintignore

@@ -5,5 +5,3 @@ packages/theme/brand/**/*
 packages/react-old/**/*
 tsc-build/
 .storybook
-
-apps/theme/**

.eslintrc.cjs

@@ -59,6 +59,7 @@ module.exports = {
     'import/namespace': ['error', { allowComputed: true }],
     'import/no-named-as-default': 'off',
     '@next/next/no-html-link-for-pages': ['error', 'apps/storefront/pages/'],
+    '@next/next/no-img-element': 'off',
     'jsx-a11y/no-autofocus': 'off',
     'import/order': [
       'warn',

.github/workflows/build-tokens.yml

@@ -1,11 +1,11 @@
 name: Build tokens
 on:
   workflow_dispatch:
-  pull_request:
-    branches:
-      - main
-    paths:
-      - 'design-tokens/**'
+  # pull_request:
+  #   branches:
+  #     - main
+  #   paths:
+  #     - 'design-tokens/**'
 jobs:
   checks:
     name: Builds, lints and tests code

.github/workflows/theme-deploy.yml

@@ -3,9 +3,9 @@ env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_THEME }}
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
+  pull_request:
+    types: [opened, synchronize]
     paths:
       - 'apps/theme/**'
 jobs:

.stylelintignore

@@ -1,4 +1,4 @@
 **/dist/**/*.css
-packages/theme/brand/**/*.css
+packages/theme/**/*.css
 packages/css/dist/**/*.css
-apps/theme/**
+apps/legacy-tokens.css

.vscode/settings.json

@@ -6,7 +6,7 @@
   "prettier.prettierPath": "./node_modules/prettier",
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cssvar.files": ["packages/theme/brand/digdir/tokens.css"],
+  "cssvar.files": ["packages/theme/brand/digdir/light.css"],
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },

packages/theme/brand/digdir/tokens.css → apps/legacy-tokens.css

@@ -1,11 +1,4 @@
-/**
- * Do not edit directly
- * These files are generated from design tokens defined in Figma using Token Studio
- */
-
 :root {
-  /** Referenced source tokens */ 
-  /** DO NOT OVERRIDE */ 
   --fds-colors-blue-100: #e6eff8;
   --fds-colors-blue-200: #b3d0ea;
   --fds-colors-blue-700: #0062ba;
@@ -39,8 +32,6 @@
   --fds-colors-grey-400: #bcbfc5;
   --fds-colors-red-800: #5a121d;
   --fds-colors-purple-700: #7a1265;
-
-  /** Tokens */ 
   --fds-brand-alt1-100: #feefef;
   --fds-brand-alt1-200: #fddfe0;
   --fds-brand-alt1-300: #fbbfc1;
@@ -49,7 +40,7 @@
   --fds-brand-alt1-600: #f45f63;
   --fds-brand-alt1-700: #dc5659;
   --fds-brand-alt1-800: #c34c4f;
-  --fds-brand-alt1-900: #B83D41;
+  --fds-brand-alt1-900: #b83d41;
   --fds-brand-alt2-100: #fcf7e9;
   --fds-brand-alt2-200: #faeec2;
   --fds-brand-alt2-300: #f5dda6;
@@ -58,7 +49,7 @@
   --fds-brand-alt2-600: #e5aa20;
   --fds-brand-alt2-700: #ce991d;
   --fds-brand-alt2-800: #b7881a;
-  --fds-brand-alt2-900: #A17717;
+  --fds-brand-alt2-900: #a17717;
   --fds-brand-alt3-100: #e9f5ff;
   --fds-brand-alt3-200: #d2eafd;
   --fds-brand-alt3-300: #a5d6fb;
@@ -67,7 +58,7 @@
   --fds-brand-alt3-600: #1e98f5;
   --fds-brand-alt3-700: #1b88dd;
   --fds-brand-alt3-800: #156aac;
-  --fds-brand-alt3-900: #125A91;
+  --fds-brand-alt3-900: #125a91;
   --fds-semantic-surface-first-light: var(--fds-brand-alt1-200);
   --fds-semantic-surface-first-light-hover: var(--fds-brand-alt1-300);
   --fds-semantic-surface-first-light-active: var(--fds-brand-alt1-400);
@@ -308,9 +299,9 @@
   --fds-border_width-default: 1px;
   --fds-border_width-active: 2px;
   --fds-border_width-tab_focus: 2px;
-  --fds-shadow-xsmall: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
-  --fds-shadow-small: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
-  --fds-shadow-medium: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
-  --fds-shadow-large: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
-  --fds-shadow-xlarge: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
+  --fds-shadow-xsmall: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
+  --fds-shadow-small: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --fds-shadow-medium: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
+  --fds-shadow-large: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14);
+  --fds-shadow-xlarge: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16);
 }

apps/storefront/components/Blog/Card/BlogCard.module.css

@@ -18,7 +18,7 @@
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
-    padding: var(--fds-spacing-8) var(--fds-spacing-10);
+    padding: var(--ds-spacing-8) var(--ds-spacing-10);
   }
 
   .card[data-featured='true'] .heading {
@@ -38,8 +38,8 @@
 
 .meta {
   display: flex;
-  gap: var(--fds-spacing-3);
-  color: var(--fds-semantic-text-neutral-subtle);
+  gap: var(--ds-spacing-3);
+  color: var(--ds-color-neutral-text-subtle);
   font-size: 14px !important;
 }
 
@@ -48,6 +48,6 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--fds-brand-alt1-600);
+  background-color: var(--ds-color-brand1-6);
   margin: auto;
 }

apps/storefront/components/Blog/Card/BlogCard.tsx

@@ -14,7 +14,7 @@ type BlogCardProps = {
   href: string;
   featured?: boolean;
   tagText?: string;
-  tagColor?: 'first' | 'second' | 'third';
+  tagColor?: 'brand1' | 'brand2' | 'brand3';
   level?: 2 | 3;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>;
 
@@ -54,26 +54,26 @@ export const BlogCard = ({
               <Tag
                 className={classes.tag}
                 color={tagColor}
-                size='small'
+                size='sm'
               >
                 {tagText}
               </Tag>
             )}
             <Heading
               level={level}
-              size={featured ? 'large' : 'small'}
+              size={featured ? 'lg' : 'sm'}
             >
               {title}
             </Heading>
           </Card.Header>
           <Card.Content>
-            <Paragraph size={featured ? 'large' : 'small'}>{desc}</Paragraph>
+            <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
           </Card.Content>
           {author ||
             (date && (
               <Card.Footer className={classes.footer}>
                 <Paragraph
-                  size={featured ? 'medium' : 'xsmall'}
+                  size={featured ? 'md' : 'xs'}
                   className={classes.meta}
                 >
                   <span>{date}</span>