oneslash-design-system 2.1.0 → 2.3.0

package/README.md

@@ -15,6 +15,13 @@ 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 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=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`.
 
 ```css
 /* Tailwind v4, OS-driven dark mode */

package/dist/designTokens.d.ts

@@ -1539,6 +1539,7 @@ export declare namespace spacing {
 }
 export declare namespace typography {
     let family: string;
+    let monoFamily: string;
     namespace h1 {
         let weight: string;
         let size: string;
@@ -1645,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,6 +189,7 @@ var base = {
     },
     typography: {
         family: 'Inter, sans-serif',
+        monoFamily: "'Fira Code', ui-monospace, monospace",
         h1: {
             weight: '400',
             size: '96px',
@@ -255,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,10 +356,19 @@ module.exports = {
             "letterSpacing": "0.5px",
             "fontWeight": "400"
           }
+        ],
+        "code": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0px",
+            "fontWeight": "300"
+          }
         ]
       },
       "fontFamily": {
-        "inter": "Inter, sans-serif"
+        "inter": "Inter, sans-serif",
+        "mono": "'Fira Code', ui-monospace, monospace"
       },
       "fontWeight": {
         "h1": "400",
@@ -372,7 +381,8 @@ module.exports = {
         "subtitle2": "400",
         "body1": "400",
         "body2": "400",
-        "caption": "400"
+        "caption": "400",
+        "code": "300"
       },
       "letterSpacing": {
         "h1": "-1.5px",
@@ -385,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",
@@ -398,7 +409,8 @@ module.exports = {
         "subtitle2": "21px",
         "body1": "24px",
         "body2": "21px",
-        "caption": "18px"
+        "caption": "18px",
+        "code": "21px"
       }
     }
   }

package/dist/tailwind-preset.js

@@ -350,10 +350,19 @@ module.exports = {
             "letterSpacing": "0.5px",
             "fontWeight": "400"
           }
+        ],
+        "code": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0px",
+            "fontWeight": "300"
+          }
         ]
       },
       "fontFamily": {
-        "inter": "Inter, sans-serif"
+        "inter": "Inter, sans-serif",
+        "mono": "'Fira Code', ui-monospace, monospace"
       },
       "fontWeight": {
         "h1": "400",
@@ -366,7 +375,8 @@ module.exports = {
         "subtitle2": "400",
         "body1": "400",
         "body2": "400",
-        "caption": "400"
+        "caption": "400",
+        "code": "300"
       },
       "letterSpacing": {
         "h1": "-1.5px",
@@ -379,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",
@@ -392,7 +403,8 @@ module.exports = {
         "subtitle2": "21px",
         "body1": "24px",
         "body2": "21px",
-        "caption": "18px"
+        "caption": "18px",
+        "code": "21px"
       }
     }
   }

package/dist/typography.css

@@ -1,6 +1,7 @@
 /* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
 @theme inline {
   --font-inter: Inter, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
   --text-h1: 96px;
   --text-h1--line-height: 115px;
   --text-h1--letter-spacing: -1.5px;
@@ -78,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.1.0",
+  "version": "2.3.0",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",