oneslash-design-system 2.2.0 → 2.3.0

package/README.md

@@ -15,10 +15,10 @@ The package ships Tailwind class names, CSS variables and untranspiled `.jsx`. E
 3. **Tailwind v4:** import `oneslash-design-system/theme.css` (toggle) or `theme-auto.css` (OS), plus `typography.css` if you want the type scale.
 4. **Next.js:** `transpilePackages: ["oneslash-design-system"]` in `next.config`.
 5. **Scan the components:** v3 `content` gets `./node_modules/oneslash-design-system/dist/**/*.{js,jsx}`; v4 CSS gets `@source "../node_modules/oneslash-design-system/dist/**/*.jsx";`.
-6. **Load the fonts:** the package names Inter (`font-inter`) and JetBrains Mono (`font-mono`, for code, identifiers and type names) but does not ship them. Load both under their real family names, for example with one Google Fonts link in `<head>`:
+6. **Load the fonts:** the package names Inter (`font-inter`) and Fira Code (`font-mono`, for code, identifiers and type names; use it with `text-code`, the 14px weight-300 code style) but does not ship them. Load both under their real family names, for example with one Google Fonts link in `<head>`:
 
 ```html
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=JetBrains+Mono:wght@400&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Fira+Code:wght@300;400&display=swap">
 ```
 
    `next/font/google` registers a hashed family name instead, so with it apply `mono.className` to the code element rather than relying on `font-mono`.

package/dist/designTokens.d.ts

@@ -1646,6 +1646,16 @@ export declare namespace typography {
         let letterSpacing_10: string;
         export { letterSpacing_10 as letterSpacing };
     }
+    namespace code {
+        let weight_11: string;
+        export { weight_11 as weight };
+        let size_11: string;
+        export { size_11 as size };
+        let lineHeight_11: string;
+        export { lineHeight_11 as lineHeight };
+        let letterSpacing_11: string;
+        export { letterSpacing_11 as letterSpacing };
+    }
     namespace alignments {
         let left: string;
         let center: string;

package/dist/designTokens.js

@@ -189,7 +189,7 @@ var base = {
     },
     typography: {
         family: 'Inter, sans-serif',
-        monoFamily: "'JetBrains Mono', ui-monospace, monospace",
+        monoFamily: "'Fira Code', ui-monospace, monospace",
         h1: {
             weight: '400',
             size: '96px',
@@ -256,6 +256,15 @@ var base = {
             lineHeight: '18px',
             letterSpacing: '0.5px',
         },
+        // Code, identifiers and type names; pair with font-mono. Light weight
+        // because Fira Code's regular is dark next to Inter; 0 tracking because
+        // letter-spacing disables its ligatures.
+        code: {
+            weight: '300',
+            size: '14px',
+            lineHeight: '21px',
+            letterSpacing: '0px',
+        },
         alignments: {
             left: 'left',
             center: 'center',

package/dist/tailwind-preset-auto.js

@@ -356,11 +356,19 @@ module.exports = {
             "letterSpacing": "0.5px",
             "fontWeight": "400"
           }
+        ],
+        "code": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0px",
+            "fontWeight": "300"
+          }
         ]
       },
       "fontFamily": {
         "inter": "Inter, sans-serif",
-        "mono": "'JetBrains Mono', ui-monospace, monospace"
+        "mono": "'Fira Code', ui-monospace, monospace"
       },
       "fontWeight": {
         "h1": "400",
@@ -373,7 +381,8 @@ module.exports = {
         "subtitle2": "400",
         "body1": "400",
         "body2": "400",
-        "caption": "400"
+        "caption": "400",
+        "code": "300"
       },
       "letterSpacing": {
         "h1": "-1.5px",
@@ -386,7 +395,8 @@ module.exports = {
         "subtitle2": "0.1px",
         "body1": "0.2px",
         "body2": "0.2px",
-        "caption": "0.5px"
+        "caption": "0.5px",
+        "code": "0px"
       },
       "lineHeight": {
         "h1": "115px",
@@ -399,7 +409,8 @@ module.exports = {
         "subtitle2": "21px",
         "body1": "24px",
         "body2": "21px",
-        "caption": "18px"
+        "caption": "18px",
+        "code": "21px"
       }
     }
   }

package/dist/tailwind-preset.js

@@ -350,11 +350,19 @@ module.exports = {
             "letterSpacing": "0.5px",
             "fontWeight": "400"
           }
+        ],
+        "code": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0px",
+            "fontWeight": "300"
+          }
         ]
       },
       "fontFamily": {
         "inter": "Inter, sans-serif",
-        "mono": "'JetBrains Mono', ui-monospace, monospace"
+        "mono": "'Fira Code', ui-monospace, monospace"
       },
       "fontWeight": {
         "h1": "400",
@@ -367,7 +375,8 @@ module.exports = {
         "subtitle2": "400",
         "body1": "400",
         "body2": "400",
-        "caption": "400"
+        "caption": "400",
+        "code": "300"
       },
       "letterSpacing": {
         "h1": "-1.5px",
@@ -380,7 +389,8 @@ module.exports = {
         "subtitle2": "0.1px",
         "body1": "0.2px",
         "body2": "0.2px",
-        "caption": "0.5px"
+        "caption": "0.5px",
+        "code": "0px"
       },
       "lineHeight": {
         "h1": "115px",
@@ -393,7 +403,8 @@ module.exports = {
         "subtitle2": "21px",
         "body1": "24px",
         "body2": "21px",
-        "caption": "18px"
+        "caption": "18px",
+        "code": "21px"
       }
     }
   }

package/dist/typography.css

@@ -1,7 +1,7 @@
 /* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
 @theme inline {
   --font-inter: Inter, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
   --text-h1: 96px;
   --text-h1--line-height: 115px;
   --text-h1--letter-spacing: -1.5px;
@@ -79,4 +79,11 @@
   --font-weight-caption: 400;
   --leading-caption: 18px;
   --tracking-caption: 0.5px;
+  --text-code: 14px;
+  --text-code--line-height: 21px;
+  --text-code--letter-spacing: 0px;
+  --text-code--font-weight: 300;
+  --font-weight-code: 300;
+  --leading-code: 21px;
+  --tracking-code: 0px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",