@nobak/design-system 1.0.0

package/lib/tokens/typography.js

@@ -0,0 +1,268 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * Nobak Design System - Typography Tokens
+ * 
+ * Punk Rock Minimal Japanese Aesthetic
+ * - Arboria: Geometric, clean, modern
+ * - IBM Plex Mono: Code, data, punk aesthetic
+ * 
+ * Scale: 1.250 (Major Third) - Musical harmony
+ */
+
+export var typography = {
+  // Font Families
+  fonts: {
+    primary: '"Arboria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"IBM Plex Mono": "SF Mono", Monaco, "Cascadia Code": "Roboto Mono", Consolas, "Courier New", monospace',
+    display: '"Arboria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  // Font Sizes (Modular Scale: 1.250 - Major Third)
+  sizes: {
+    // Display
+    display: {
+      fontSize: '72px',
+      lineHeight: '1.1',
+      letterSpacing: '-0.02em',
+      fontWeight: 700
+    },
+    // Headings
+    h1: {
+      fontSize: '60px',
+      lineHeight: '1.2',
+      letterSpacing: '-0.02em',
+      fontWeight: 700
+    },
+    h2: {
+      fontSize: '48px',
+      lineHeight: '1.25',
+      letterSpacing: '-0.01em',
+      fontWeight: 600
+    },
+    h3: {
+      fontSize: '38px',
+      lineHeight: '1.3',
+      letterSpacing: '-0.01em',
+      fontWeight: 600
+    },
+    h4: {
+      fontSize: '30px',
+      lineHeight: '1.4',
+      letterSpacing: '0',
+      fontWeight: 500
+    },
+    h5: {
+      fontSize: '24px',
+      lineHeight: '1.5',
+      letterSpacing: '0',
+      fontWeight: 500
+    },
+    h6: {
+      fontSize: '20px',
+      lineHeight: '1.5',
+      letterSpacing: '0',
+      fontWeight: 500
+    },
+    // Body
+    body: {
+      fontSize: '16px',
+      lineHeight: '1.6',
+      letterSpacing: '0',
+      fontWeight: 400
+    },
+    bodyLarge: {
+      fontSize: '18px',
+      lineHeight: '1.6',
+      letterSpacing: '0',
+      fontWeight: 400
+    },
+    bodySmall: {
+      fontSize: '14px',
+      lineHeight: '1.5',
+      letterSpacing: '0',
+      fontWeight: 400
+    },
+    // UI
+    small: {
+      fontSize: '13px',
+      lineHeight: '1.5',
+      letterSpacing: '0',
+      fontWeight: 400
+    },
+    micro: {
+      fontSize: '10px',
+      lineHeight: '1.4',
+      letterSpacing: '0.02em',
+      fontWeight: 500,
+      textTransform: 'uppercase'
+    },
+    // Code
+    code: {
+      fontSize: '14px',
+      lineHeight: '1.6',
+      letterSpacing: '0',
+      fontWeight: 400
+    },
+    codeSmall: {
+      fontSize: '12px',
+      lineHeight: '1.5',
+      letterSpacing: '0',
+      fontWeight: 400
+    }
+  },
+  // Font Weights
+  weights: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    black: 900
+  },
+  // Line Heights
+  lineHeights: {
+    tight: 1.1,
+    snug: 1.25,
+    normal: 1.5,
+    relaxed: 1.6,
+    loose: 1.75
+  },
+  // Letter Spacing
+  letterSpacing: {
+    tighter: '-0.02em',
+    tight: '-0.01em',
+    normal: '0',
+    wide: '0.01em',
+    wider: '0.02em',
+    widest: '0.05em'
+  }
+};
+
+// Type exports
+
+// CSS Custom Properties Generator
+export var generateTypographyVariables = function generateTypographyVariables() {
+  var vars = {};
+
+  // Font families
+  Object.entries(typography.fonts).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    vars["--font-".concat(key)] = value;
+  });
+
+  // Font weights
+  Object.entries(typography.weights).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    vars["--font-weight-".concat(key)] = String(value);
+  });
+
+  // Line heights
+  Object.entries(typography.lineHeights).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    vars["--line-height-".concat(key)] = String(value);
+  });
+
+  // Letter spacing
+  Object.entries(typography.letterSpacing).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      key = _ref8[0],
+      value = _ref8[1];
+    vars["--letter-spacing-".concat(key)] = value;
+  });
+  return vars;
+};
+
+// Tailwind Config Export
+export var tailwindTypography = {
+  fontFamily: {
+    sans: typography.fonts.primary.split(',').map(function (f) {
+      return f.trim().replace(/"/g, '');
+    }),
+    mono: typography.fonts.mono.split(',').map(function (f) {
+      return f.trim().replace(/"/g, '');
+    }),
+    display: typography.fonts.display.split(',').map(function (f) {
+      return f.trim().replace(/"/g, '');
+    })
+  },
+  fontSize: {
+    display: ['72px', {
+      lineHeight: '1.1',
+      letterSpacing: '-0.02em'
+    }],
+    h1: ['60px', {
+      lineHeight: '1.2',
+      letterSpacing: '-0.02em'
+    }],
+    h2: ['48px', {
+      lineHeight: '1.25',
+      letterSpacing: '-0.01em'
+    }],
+    h3: ['38px', {
+      lineHeight: '1.3',
+      letterSpacing: '-0.01em'
+    }],
+    h4: ['30px', {
+      lineHeight: '1.4'
+    }],
+    h5: ['24px', {
+      lineHeight: '1.5'
+    }],
+    h6: ['20px', {
+      lineHeight: '1.5'
+    }],
+    'body-lg': ['18px', {
+      lineHeight: '1.6'
+    }],
+    body: ['16px', {
+      lineHeight: '1.6'
+    }],
+    'body-sm': ['14px', {
+      lineHeight: '1.5'
+    }],
+    small: ['13px', {
+      lineHeight: '1.5'
+    }],
+    micro: ['10px', {
+      lineHeight: '1.4',
+      letterSpacing: '0.02em'
+    }],
+    code: ['14px', {
+      lineHeight: '1.6'
+    }],
+    'code-sm': ['12px', {
+      lineHeight: '1.5'
+    }]
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    black: 900
+  },
+  lineHeight: {
+    tight: '1.1',
+    snug: '1.25',
+    normal: '1.5',
+    relaxed: '1.6',
+    loose: '1.75'
+  },
+  letterSpacing: {
+    tighter: '-0.02em',
+    tight: '-0.01em',
+    normal: '0',
+    wide: '0.01em',
+    wider: '0.02em',
+    widest: '0.05em'
+  }
+};

package/package.json

@@ -0,0 +1,176 @@
+{
+  "name": "@nobak/design-system",
+  "description": "World-class design system for Nobak - Like Braun, like IBM, but for blockchain technology",
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "styles",
+    "tailwind.config.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nobak-net/nobak-design-system"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Julian Clatro <hola@julianclatro.com> (https://hacksur.com)",
+  "contributors": [
+    "Julian Clatro <hola@julianclatro.com> (https://hacksur.com)"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "clean": "rm -rf lib dist storybook-static",
+    "generate:tokens": "node scripts/generate-theme-css.cjs",
+    "build:components": "babel src --out-dir lib --extensions '.ts,.tsx'",
+    "build:styles": "cross-env NODE_ENV=production postcss styles/main.css -o styles/index.css",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationMap",
+    "build": "npm run clean && npm run generate:tokens && npm run build:styles && npm run build:components",
+    "build:storybook": "cross-env NODE_ENV=production storybook build",
+    "build-storybook": "npm run build:storybook",
+    "production": "npm run generate:tokens && npm run build && npm run build:storybook",
+    "dev": "npm run generate:tokens && concurrently 'npm:watch-*'",
+    "storybook": "storybook dev -p 6006",
+    "watch-tailwind": "postcss styles/main.css -o styles/index.css --watch",
+    "watch-build": "babel src --watch --out-dir lib --extensions '.ts,.tsx'",
+    "watch-storybook": "storybook dev --ci -h 0.0.0.0 -p 6006",
+    "watch-server": "node server.js",
+    "lint": "npm run lint:js && npm run lint:md",
+    "lint:js": "xo",
+    "lint:md": "remark . -qfo",
+    "typecheck": "tsc --noEmit",
+    "pretest": "npm run lint",
+    "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
+    "deploy:storybook:staging": "./scripts/deploy-storybook.sh staging",
+    "deploy:storybook:production": "./scripts/deploy-storybook.sh production",
+    "deploy:storybook": "./scripts/deploy-storybook.sh production",
+    "publish:patch": "./scripts/publish-npm.sh patch",
+    "publish:minor": "./scripts/publish-npm.sh minor",
+    "publish:major": "./scripts/publish-npm.sh major",
+    "new-component": "node ./scripts/new-component.cjs",
+    "pull-request": "node ./scripts/pull-request.cjs",
+    "publish-local": "node ./scripts/publish-local.cjs",
+    "webpack": "webpack --mode production",
+    "tailwind:dev": "cross-env NODE_ENV=development postcss styles/main.css -o styles/index.css",
+    "audit:react-imports": "node scripts/audit-react-imports.cjs",
+    "audit:react-imports:verbose": "VERBOSE=true node scripts/audit-react-imports.cjs",
+    "audit:react-imports:json": "node scripts/audit-react-imports.cjs --json",
+    "fix:react-imports": "node scripts/audit-react-imports.cjs --fix",
+    "fix:duplicate-react-imports": "node scripts/fix-duplicate-react-imports.cjs",
+    "promote-story": "node scripts/promote-story.cjs",
+    "setup:console": "./scripts/setup-console-structure.sh",
+    "link:console": "./scripts/link-to-console.sh",
+    "verdaccio:setup": "./scripts/setup-verdaccio.sh",
+    "verdaccio:stop": "pkill -f verdaccio || true",
+    "verdaccio:logs": "tail -f /tmp/verdaccio.log"
+  },
+  "keywords": [
+    "nobak",
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "tailwindcss",
+    "typescript",
+    "blockchain",
+    "stellar",
+    "web3",
+    "braun",
+    "ibm",
+    "design"
+  ],
+  "dependencies": {
+    "@emotion/is-prop-valid": "latest",
+    "@h6s/calendar": "latest",
+    "@headlessui/react": "^2.2.0",
+    "ahooks": "^3.8.1",
+    "clsx": "^1.2.1",
+    "date-fns": "latest",
+    "dayzed": "^3.2.3",
+    "framer-motion": "^6.5.1",
+    "lucide-react": "^0.552.0",
+    "luxon": "^3.4.4",
+    "qrcode-generator": "1.4.1",
+    "rci": "0.1.0",
+    "use-is-focused": "0.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "latest",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "latest",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/register": "^7.28.3",
+    "@chromatic-com/storybook": "^4.1.2",
+    "@commitlint/cli": "latest",
+    "@commitlint/config-conventional": "latest",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/addon-links": "^10.0.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "^10.0.4",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@types/luxon": "latest",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "latest",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "concurrently": "^9.1.2",
+    "cross-env": "^7.0.3",
+    "crypto-browserify": "^3.12.0",
+    "dotenv": "^16.3.1",
+    "fixpack": "latest",
+    "json-server": "^0.17.4",
+    "lunarphase-js": "latest",
+    "pm2": "latest",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-use": "17.5.1",
+    "storybook": "^10.0.4",
+    "tailwindcss": "^4.1.7",
+    "ts-loader": "latest",
+    "typescript": "latest",
+    "webpack": "latest",
+    "webpack-cli": "latest"
+  },
+  "peerDependencies": {
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "engines": {
+    "node": ">= 10"
+  },
+  "bugs": {
+    "url": "https://github.com/nobak-net/nobak-design-system/issues",
+    "email": "hola@julianclatro.com"
+  },
+  "xo": {
+    "prettier": true,
+    "space": true,
+    "extends": [
+      "xo-lass",
+      "xo-react",
+      "xo-typescript"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2021,
+      "sourceType": "module"
+    },
+    "webpack": true
+  },
+  "homepage": "https://github.com/nobak-net/nobak-design-system",
+  "volta": {
+    "node": "22.16.0"
+  },
+  "packageManager": "pnpm@8.9.2+sha1.5f2fa48d614263457cf5d7fb7be8b878da318d87"
+}