@neo4j-ndl/base 2.10.0 → 2.11.5

package/lib/tokens/css/tokens.css

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 17 May 2024 07:47:03 GMT
+ * Generated on Wed, 19 Jun 2024 09:29:05 GMT
  */
 
 :root {
@@ -281,7 +281,7 @@
   --theme-light-palette-neutral-bg-on-bg-weak: 245 246 246 / 1; /* Original value: 245 246 246 / 1, alpha: 1 */
   --theme-light-palette-neutral-bg-strong: 226 227 229 / 1; /* Original value: 226 227 229 / 1, alpha: 1 */
   --theme-light-palette-neutral-bg-stronger: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
-  --theme-light-palette-neutral-bg-strongest: 77 81 87 / 1; /* Original value: 77 81 87 / 1, alpha: 1 */
+  --theme-light-palette-neutral-bg-strongest: 60 63 68 / 1; /* Original value: 60 63 68 / 1, alpha: 1 */
   --theme-light-palette-neutral-bg-status: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
   --theme-light-palette-neutral-border-weak: 226 227 229 / 1; /* Original value: 226 227 229 / 1, alpha: 1 */
   --theme-light-palette-neutral-border-strong: 187 190 195 / 1; /* Original value: 187 190 195 / 1, alpha: 1 */
@@ -352,6 +352,20 @@
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-light: 300;
+  --font-font-family-h1: Syne Neo;
+  --font-font-family-h2: Syne Neo;
+  --font-font-family-h3: Public Sans;
+  --font-font-family-h4: Public Sans;
+  --font-font-family-h5: Public Sans;
+  --font-font-family-h6: Public Sans;
+  --font-font-family-subheading-large: Public Sans;
+  --font-font-family-subheading-medium: Public Sans;
+  --font-font-family-subheading-small: Public Sans;
+  --font-font-family-body-large: Public Sans;
+  --font-font-family-body-medium: Public Sans;
+  --font-font-family-body-small: Public Sans;
+  --font-font-family-code: Fira Code;
+  --font-font-family-label: Public Sans;
   --space-0: 0px;
   --space-1: 1px;
   --space-2: 2px;

package/lib/tokens/js/tokens-raw.js

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 17 May 2024 07:47:03 GMT
+ * Generated on Wed, 19 Jun 2024 09:29:05 GMT
  */
 
 module.exports = {
@@ -5536,12 +5536,12 @@ module.exports = {
               ]
             },
             "strongest": {
-              "value": "#4D5157",
+              "value": "#3C3F44",
               "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout",
               "filePath": "src/tokens/light-theme.json",
               "isSource": true,
               "original": {
-                "value": "{colors.neutral.60.value}",
+                "value": "{colors.neutral.65.value}",
                 "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
               },
               "name": "ThemeLightPaletteNeutralBgStrongest",
@@ -7308,6 +7308,302 @@ module.exports = {
           "light"
         ]
       }
+    },
+    "font-family": {
+      "h1": {
+        "value": "Syne Neo",
+        "description": "Do not use, mainly for web",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Syne Neo",
+          "description": "Do not use, mainly for web"
+        },
+        "name": "FontFontFamilyH1",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "h1"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "h1"
+        ]
+      },
+      "h2": {
+        "value": "Syne Neo",
+        "description": "Use for page headers",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Syne Neo",
+          "description": "Use for page headers"
+        },
+        "name": "FontFontFamilyH2",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "h2"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "h2"
+        ]
+      },
+      "h3": {
+        "value": "Public Sans",
+        "description": "Use cautiously. Used for larger container header such as login screen and dialogs",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Use cautiously. Used for larger container header such as login screen and dialogs"
+        },
+        "name": "FontFontFamilyH3",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "h3"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "h3"
+        ]
+      },
+      "h4": {
+        "value": "Public Sans",
+        "description": "Use cautiously. Not used in any components",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Use cautiously. Not used in any components"
+        },
+        "name": "FontFontFamilyH4",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "h4"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "h4"
+        ]
+      },
+      "h5": {
+        "value": "Public Sans",
+        "description": "Used for larger containers such as drag & drop and drawer. Use instead of H3 if you want a more compact layout with less spacing and padding inside the container",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Used for larger containers such as drag & drop and drawer. Use instead of H3 if you want a more compact layout with less spacing and padding inside the container"
+        },
+        "name": "FontFontFamilyH5",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "h5"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "h5"
+        ]
+      },
+      "h6": {
+        "value": "Public Sans",
+        "description": "Common smaller header. Used in banner, buttons, context menu, widget and wizard",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Common smaller header. Used in banner, buttons, context menu, widget and wizard"
+        },
+        "name": "FontFontFamilyH6",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "h6"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "h6"
+        ]
+      },
+      "subheading-large": {
+        "value": "Public Sans",
+        "description": "Pair with larger headers. Not used in any components",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Pair with larger headers. Not used in any components"
+        },
+        "name": "FontFontFamilySubheadingLarge",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "subheading-large"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "subheading-large"
+        ]
+      },
+      "subheading-medium": {
+        "value": "Public Sans",
+        "description": "Use with medium sized headers or as a header of its own. Is used as header in smaller components and as a selected state to differentiate from body text. Is used in view selector, tabs and code block",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Use with medium sized headers or as a header of its own. Is used as header in smaller components and as a selected state to differentiate from body text. Is used in view selector, tabs and code block"
+        },
+        "name": "FontFontFamilySubheadingMedium",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "subheading-medium"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "subheading-medium"
+        ]
+      },
+      "subheading-small": {
+        "value": "Public Sans",
+        "description": "Use cautiously. Not used in any components",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Use cautiously. Not used in any components"
+        },
+        "name": "FontFontFamilySubheadingSmall",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "subheading-small"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "subheading-small"
+        ]
+      },
+      "body-large": {
+        "value": "Public Sans",
+        "description": "Use cautiously. Mainly used as the base font in web experiences. Can be used when wanting to create a subtle hierarchy such as in tables, dialogs. Is also used in some components where we provide a size “large”",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Use cautiously. Mainly used as the base font in web experiences. Can be used when wanting to create a subtle hierarchy such as in tables, dialogs. Is also used in some components where we provide a size “large”"
+        },
+        "name": "FontFontFamilyBodyLarge",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "body-large"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "body-large"
+        ]
+      },
+      "body-medium": {
+        "value": "Public Sans",
+        "description": "This is the base font and should be used as much as possible",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "This is the base font and should be used as much as possible"
+        },
+        "name": "FontFontFamilyBodyMedium",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "body-medium"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "body-medium"
+        ]
+      },
+      "body-small": {
+        "value": "Public Sans",
+        "description": "Smallest accessible font. Use when having little space or crowded layouts.Examples include charts (widgets) and help texts",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Smallest accessible font. Use when having little space or crowded layouts.Examples include charts (widgets) and help texts"
+        },
+        "name": "FontFontFamilyBodySmall",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "body-small"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "body-small"
+        ]
+      },
+      "code": {
+        "value": "Fira Code",
+        "description": "Base font for code. Uses the same font size as the base font for regular text (body/medium)",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Fira Code",
+          "description": "Base font for code. Uses the same font size as the base font for regular text (body/medium)"
+        },
+        "name": "FontFontFamilyCode",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "code"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "code"
+        ]
+      },
+      "label": {
+        "value": "Public Sans",
+        "description": "Mainly used for the label component but can also be used when needing a bold label inside a small component or space",
+        "filePath": "src/tokens/fonts.json",
+        "isSource": true,
+        "original": {
+          "value": "Public Sans",
+          "description": "Mainly used for the label component but can also be used when needing a bold label inside a small component or space"
+        },
+        "name": "FontFontFamilyLabel",
+        "attributes": {
+          "category": "font",
+          "type": "font-family",
+          "item": "label"
+        },
+        "path": [
+          "font",
+          "font-family",
+          "label"
+        ]
+      }
     }
   },
   "space": {

package/lib/tokens/js/tokens.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Fri, 17 May 2024 07:47:03 GMT
+* Generated on Wed, 19 Jun 2024 09:29:05 GMT
 */
 
 export const tokens = {
@@ -388,7 +388,7 @@ export const tokens = {
             "on-bg-weak": "#F5F6F6",
             "strong": "#E2E3E5",
             "stronger": "#A8ACB2",
-            "strongest": "#4D5157",
+            "strongest": "#3C3F44",
             "status": "#A8ACB2"
           },
           "border": {
@@ -508,6 +508,22 @@ export const tokens = {
       "normal": "400",
       "medium": "500",
       "light": "300"
+    },
+    "font-family": {
+      "h1": "Syne Neo",
+      "h2": "Syne Neo",
+      "h3": "Public Sans",
+      "h4": "Public Sans",
+      "h5": "Public Sans",
+      "h6": "Public Sans",
+      "subheading-large": "Public Sans",
+      "subheading-medium": "Public Sans",
+      "subheading-small": "Public Sans",
+      "body-large": "Public Sans",
+      "body-medium": "Public Sans",
+      "body-small": "Public Sans",
+      "code": "Fira Code",
+      "label": "Public Sans"
     }
   },
   "space": {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 17 May 2024 07:47:03 GMT
+// Generated on Wed, 19 Jun 2024 09:29:05 GMT
 
 $transitions-values-properties-default: all;
 $transitions-values-duration-quick: 100ms;
@@ -258,7 +258,7 @@ $theme-light-palette-neutral-bg-default: 245 246 246 / 1; // Original value: 245
 $theme-light-palette-neutral-bg-on-bg-weak: 245 246 246 / 1; // Original value: 245 246 246 / 1, alpha: 1
 $theme-light-palette-neutral-bg-strong: 226 227 229 / 1; // Original value: 226 227 229 / 1, alpha: 1
 $theme-light-palette-neutral-bg-stronger: 168 172 178 / 1; // Original value: 168 172 178 / 1, alpha: 1
-$theme-light-palette-neutral-bg-strongest: 77 81 87 / 1; // Original value: 77 81 87 / 1, alpha: 1
+$theme-light-palette-neutral-bg-strongest: 60 63 68 / 1; // Original value: 60 63 68 / 1, alpha: 1
 $theme-light-palette-neutral-bg-status: 168 172 178 / 1; // Original value: 168 172 178 / 1, alpha: 1
 $theme-light-palette-neutral-border-weak: 226 227 229 / 1; // Original value: 226 227 229 / 1, alpha: 1
 $theme-light-palette-neutral-border-strong: 187 190 195 / 1; // Original value: 187 190 195 / 1, alpha: 1
@@ -329,6 +329,20 @@ $font-weight-semibold: 600;
 $font-weight-normal: 400;
 $font-weight-medium: 500;
 $font-weight-light: 300;
+$font-font-family-h1: Syne Neo;
+$font-font-family-h2: Syne Neo;
+$font-font-family-h3: Public Sans;
+$font-font-family-h4: Public Sans;
+$font-font-family-h5: Public Sans;
+$font-font-family-h6: Public Sans;
+$font-font-family-subheading-large: Public Sans;
+$font-font-family-subheading-medium: Public Sans;
+$font-font-family-subheading-small: Public Sans;
+$font-font-family-body-large: Public Sans;
+$font-font-family-body-medium: Public Sans;
+$font-font-family-body-small: Public Sans;
+$font-font-family-code: Fira Code;
+$font-font-family-label: Public Sans;
 $space-0: 0px;
 $space-1: 1px;
 $space-2: 2px;

package/lib/types/tokens/js/storybook-design-token.d.ts

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Fri, 17 May 2024 07:47:03 GMT
+* Generated on Wed, 19 Jun 2024 09:29:05 GMT
 */
 export const tokens: {
     transitions: {

package/lib/types/tokens/js/tokens-esm.d.ts

@@ -625,8 +625,8 @@ export namespace tokens {
             export { palette_2 as palette };
         }
     }
-    namespace font {
-        let size: {
+    let font: {
+        size: {
             h1: string;
             h2: string;
             h3: string;
@@ -642,15 +642,30 @@ export namespace tokens {
             code: string;
             label: string;
         };
-        namespace weight {
-            export let bold: string;
-            export let semibold: string;
-            export let normal: string;
-            export let medium: string;
-            let light_1: string;
-            export { light_1 as light };
-        }
-    }
+        weight: {
+            bold: string;
+            semibold: string;
+            normal: string;
+            medium: string;
+            light: string;
+        };
+        "font-family": {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+            "subheading-large": string;
+            "subheading-medium": string;
+            "subheading-small": string;
+            "body-large": string;
+            "body-medium": string;
+            "body-small": string;
+            code: string;
+            label: string;
+        };
+    };
     let space: {
         "0": string;
         "1": string;

package/lib/types/tokens/js/tokens.d.ts

@@ -624,8 +624,8 @@ export namespace theme {
         export { palette_2 as palette };
     }
 }
-export namespace font {
-    let size: {
+export let font: {
+    size: {
         h1: string;
         h2: string;
         h3: string;
@@ -641,15 +641,30 @@ export namespace font {
         code: string;
         label: string;
     };
-    namespace weight {
-        export let bold: string;
-        export let semibold: string;
-        export let normal: string;
-        export let medium: string;
-        let light_1: string;
-        export { light_1 as light };
-    }
-}
+    weight: {
+        bold: string;
+        semibold: string;
+        normal: string;
+        medium: string;
+        light: string;
+    };
+    "font-family": {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        "subheading-large": string;
+        "subheading-medium": string;
+        "subheading-small": string;
+        "body-large": string;
+        "body-medium": string;
+        "body-small": string;
+        code: string;
+        label: string;
+    };
+};
 export let space: {
     "0": string;
     "1": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/base",
-  "version": "2.10.0",
+  "version": "2.11.5",
   "description": "Neo4j base package for the design system",
   "author": "Neo4j Inc.",
   "homepage": "https://www.neo4j.design",
@@ -29,21 +29,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "test": "echo 'No tests provided'",
-    "build": "yarn build:style-dictionary && yarn build:sass && yarn build:esm && yarn build:cjs && yarn build:css",
-    "build:style-dictionary": "style-dictionary build --config sd.config.js",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:sass": "sass --no-source-map src/base/theme-palettes.scss src/base/theme-palettes.css",
-    "build:css": "postcss src/styles.css -o lib/neo4j-ds-styles.css",
-    "watch:css": "postcss -w src/styles.css -o lib/neo4j-ds-styles.css",
-    "watch:esm": "tsc -p tsconfig.esm.json --watch",
-    "watch:cjs": "tsc -p tsconfig.cjs.json --watch"
-  },
   "devDependencies": {
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.18",
+    "autoprefixer": "10.4.0",
+    "postcss": "8.4.18",
     "postcss-cli": "^10.0.0",
     "postcss-discard-comments": "6.0.0",
     "postcss-import": "^14.0.2",
@@ -53,5 +41,19 @@
     "tailwindcss": "3.4.1",
     "ts-node": "^10.4.0",
     "typescript": "5.4.3"
+  },
+  "scripts": {
+    "test": "echo 'No tests provided'",
+    "build": "pnpm build:style-dictionary && pnpm build:sass && pnpm build:esm && pnpm build:cjs && pnpm build:css && pnpm build:fonts",
+    "build:style-dictionary": "style-dictionary build --config sd.config.js",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:sass": "sass --no-source-map src/base/theme-palettes.scss src/base/theme-palettes.css",
+    "build:css": "postcss src/styles.css -o lib/neo4j-ds-styles.css",
+    "build:fonts": "mkdir -p ./lib/fonts/ && cp ./src/fonts/*.woff2 ./lib/fonts/",
+    "watch:css": "postcss -w src/styles.css -o lib/neo4j-ds-styles.css",
+    "watch:esm": "tsc -p tsconfig.esm.json --watch",
+    "watch:cjs": "tsc -p tsconfig.cjs.json --watch",
+    "nuke:local": "npx --yes rimraf@5.0.5 .tsbuildinfo"
   }
 }