{"_id":"@ahmed-shareef-ogp/pgo-uif","_rev":"4-138091979a57005e0629d2d63c488a38","name":"@ahmed-shareef-ogp/pgo-uif","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@ahmed-shareef-ogp/pgo-uif","version":"1.0.0","_id":"@ahmed-shareef-ogp/pgo-uif@1.0.0","maintainers":[{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"}],"dist":{"shasum":"8be2e66303c3ffc2119ec86ab9a277d6aaa61121","tarball":"https://registry.npmjs.org/@ahmed-shareef-ogp/pgo-uif/-/pgo-uif-1.0.0.tgz","fileCount":3,"integrity":"sha512-ZBLehDDS5iOOY+4GEw6iSqgkpgpgIgzGtHQ8xcs7jo2PhjKIDN7uLq0dV8xXp0R7O5LSCJvMtdm3lcQkY/BLHA==","signatures":[{"sig":"MEYCIQC3VcQ0ana1w3YojHqDm/sONYKXP2KglBPyhzqDX+qEtgIhAKdbmzxsT1Su1QIPMbEoMQM/8yf2rFAQm2YL+QBfMKzy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33610},"type":"module","exports":{".":"./pgo-foundations-tw.css"},"_npmUser":{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"},"_npmVersion":"11.3.0","description":"Setup (see guide at the bottom of this file): 1. @import \"tailwindcss\"; 2. @import \"./pgo-foundations-tw.css\";","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/pgo-uif_1.0.0_1779334403900_0.815446722971932","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ahmed-shareef-ogp/pgo-uif","version":"1.0.1","_id":"@ahmed-shareef-ogp/pgo-uif@1.0.1","maintainers":[{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"}],"dist":{"shasum":"e28d27297c4f2fc5bea31459aa1209c4222f01ca","tarball":"https://registry.npmjs.org/@ahmed-shareef-ogp/pgo-uif/-/pgo-uif-1.0.1.tgz","fileCount":3,"integrity":"sha512-LTBxMQMzOK3QUsxpz1+KGoNbqOreonuTzV+kIWS1DZstaXroFETeTEDk0kmpSrFlM3EObyX+v3UmtG6Rvm3i0Q==","signatures":[{"sig":"MEUCIGDSPlZdKBs52EOQnELL+SB0ELjak+Y8y9w/Ttp5ziXGAiEA5fTLK2u5T2eMwAj3d6ui6HJGakjvNpTCj0ndLJAkGRk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33345},"type":"module","exports":{".":"./pgo-foundations-tw.css"},"_npmUser":{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"},"_npmVersion":"11.3.0","description":"Setup (see guide at the bottom of this file): 1. @import \"tailwindcss\"; 2. @import \"./pgo-foundations-tw.css\";","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/pgo-uif_1.0.1_1779338540610_0.8836696970360378","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ahmed-shareef-ogp/pgo-uif","version":"1.0.2","_id":"@ahmed-shareef-ogp/pgo-uif@1.0.2","maintainers":[{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"}],"dist":{"shasum":"26ce5becc9de221546a40c0ae4a32d53372d9db6","tarball":"https://registry.npmjs.org/@ahmed-shareef-ogp/pgo-uif/-/pgo-uif-1.0.2.tgz","fileCount":3,"integrity":"sha512-ZXYwnC5HLoVSuyfRfV51jaqDWI7Z655ViZ193D6meB8OjR9hhLErpGhI7Wx2wrcKO959tE3oQ9YzMO/hgdyNhg==","signatures":[{"sig":"MEQCID4/6ZToQ3PD5pJh5jDM1wayhMQiuCuuLgZWHMJIdiCLAiA1cJdYVAonR0OGsCecsGuwGwMQ860qc8He88gLhUE2UA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34329},"type":"module","exports":{".":"./pgo-foundations-tw.css"},"_npmUser":{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"},"_npmVersion":"11.3.0","description":"PGO Design Foundations for **Tailwind CSS v4**. Provides the full design token layer — colors, typography, spacing, shadows, radii, and grid utilities — as a single CSS import.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/pgo-uif_1.0.2_1779345550620_0.7106973388299294","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@ahmed-shareef-ogp/pgo-uif","version":"1.0.3","type":"module","exports":{".":"./pgo-foundations-tw.css"},"_id":"@ahmed-shareef-ogp/pgo-uif@1.0.3","description":"PGO Design Foundations for **Tailwind CSS v4**. Provides the full design token layer — colors, typography, spacing, shadows, radii, and grid utilities — as a single CSS import.","_nodeVersion":"22.14.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-GWuywL9QeTiTyUo1fau6ynP7L3qWyXEIHcIr2kl90Vo3NkC8qGYZD+pVCt+sDx9YBJwmVPnFoWpISZ3dZudTnQ==","shasum":"922a9f68641f36f69f9886383913ab4d68a1416f","tarball":"https://registry.npmjs.org/@ahmed-shareef-ogp/pgo-uif/-/pgo-uif-1.0.3.tgz","fileCount":10,"unpackedSize":271006,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDBYmIUqoIsq2NvT5aHxBCYP+nXuTBCdQcYBrWyEiRi0wIhAOFlbVfZgoSPJRLrU4TWdep5q3xyHavHCx9SzPzg4COs"}]},"_npmUser":{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"},"directories":{},"maintainers":[{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pgo-uif_1.0.3_1779345689771_0.19760565720666667"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T03:33:23.735Z","modified":"2026-05-21T06:41:30.106Z","1.0.0":"2026-05-21T03:33:24.039Z","1.0.1":"2026-05-21T04:42:20.739Z","1.0.2":"2026-05-21T06:39:10.774Z","1.0.3":"2026-05-21T06:41:29.981Z"},"description":"PGO Design Foundations for **Tailwind CSS v4**. Provides the full design token layer — colors, typography, spacing, shadows, radii, and grid utilities — as a single CSS import.","maintainers":[{"name":"ahmed-shareef-ogp","email":"ahmed.shareef@pgoffice.gov.mv"}],"readme":"# @ahmed-shareef-ogp/pgo-uif\n\nPGO Design Foundations for **Tailwind CSS v4**. Provides the full design token layer — colors, typography, spacing, shadows, radii, and grid utilities — as a single CSS import.\n\n---\n\n## Installation\n\n```bash\nnpm install @ahmed-shareef-ogp/pgo-uif\n```\n\n---\n\n## Setup\n\n### 1. Install Tailwind CSS v4\n\n```bash\n# Vite\nnpm install tailwindcss @tailwindcss/vite\n\n# CLI\nnpm install tailwindcss @tailwindcss/cli\n```\n\n### 2. Configure Vite (if using Vite)\n\n```js\n// vite.config.js\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default {\n plugins: [tailwindcss()],\n};\n```\n\n### 3. Import in your main CSS file\n\n```css\n/* app.css */\n@import \"tailwindcss\";\n@import \"@ahmed-shareef-ogp/pgo-uif\";\n```\n\nNo `tailwind.config.js` needed.\n\n---\n\n## Fonts\n\nAll font files are **bundled with the package** — no separate downloads needed. The `@font-face` declarations in the CSS reference them via relative paths (`./fonts/`) that resolve correctly once installed.\n\n| File | Family | Usage |\n|------|--------|-------|\n| `PlusJakartaSans-Regular/Medium/SemiBold/Bold.woff2` | Plus Jakarta Sans | Default UI font (`font-sans`) |\n| `PGFont-Regular.otf` | PG Font | Display/heading font (`font-display`) |\n| `PGFont-Thaana.ttf` | PGFont-Thaana | Thaana script (`font-thaana`) |\n| `MVFaseyha.woff2` | MVFaseyha | Faseyha script (`font-faseyha`) |\n\n---\n\n## Token Reference\n\nAll tokens are available as Tailwind utilities and as CSS custom properties (`var(--color-brand-500)`, etc.).\n\n### Colors\n\n```html\nbg-brand-600 text-neutral-900 border-red-500\nbg-brand-600/50 \nring-brand-500\n```\n\n**Palettes:** `neutral`, `brand`, `golden-oak`, `graphite`, `ivory`, `red`, `orange`, `yellow`, `green`, `blue`\n\n### Typography\n\n**Size + line-height:**\n```\ntext-xs (12px/16px) text-sm (14px/20px)\ntext-sm-tight (14px/14px) text-base (16px/24px)\ntext-lg (18px/28px) text-xl (20px/30px)\ntext-2xl (24px/32px) text-3xl (30px/38px)\ntext-4xl (36px/44px) text-5xl (48px/60px)\ntext-6xl (60px/72px) text-7xl (72px/90px)\n```\n`text-sm-tight` is for icon labels and tags (14px with collapsed line-height).\n\n**Families:**\n```\nfont-sans Plus Jakarta Sans (UI default)\nfont-display PG Font (headings)\nfont-thaana PGFont-Thaana\nfont-faseyha MVFaseyha\n```\n\n**Weights:**\n```\nfont-regular font-medium font-semibold font-bold\n```\n\n### Spacing\n\nNamed semantic scale — works with `p-`, `m-`, `gap-`, `w-`, `h-`, `inset-`, etc.\n\n```\nnone xxs(2px) xs(4px) sm(6px) md(8px) lg(12px) xl(16px)\n2xl(20px) 3xl(24px) 4xl(32px) 5xl(40px) 6xl(48px)\n7xl(64px) 8xl(80px) 9xl(96px) 10xl(128px) 11xl(160px)\n```\n\n### Border Radius\n\n```\nrounded-none rounded-xxs(2px) rounded-xs(4px) rounded-sm(6px)\nrounded-md(8px) rounded-lg(10px) rounded-xl(12px) rounded-2xl(16px)\nrounded-3xl(20px) rounded-4xl(24px) rounded-full\n```\n\n### Shadows\n\n```\nshadow-xs shadow-sm shadow-md shadow-lg shadow-xl\nshadow-2xl shadow-3xl shadow-xs-skeuomorphic\nshadow-elevation-0 shadow-elevation-1 shadow-elevation-2 shadow-elevation-3 shadow-elevation-4\n```\n\n**Focus rings** (use as utility classes):\n```\nshadow-focus blue/brand ring for interactive elements\nshadow-focus-error red ring for error state\nfocus-ring shorthand utility\nfocus-ring-error shorthand utility\n```\n\n### Backdrop Blur\n\n```\nbackdrop-blur-sm(8px) backdrop-blur-md(16px)\nbackdrop-blur-lg(24px) backdrop-blur-xl(40px)\n```\n\n### Responsive Breakpoints\n\n```\nsm: ≥ 640px\nmd: ≥ 768px ← tablet\nlg: ≥ 1024px\nxl: ≥ 1440px ← desktop (shifted from TW default 1280px)\n2xl: ≥ 1920px\n```\n\n### Width Tokens\n\nNo auto-generated `max-w-*` to avoid conflicts with TW's built-in scale. Reference via CSS variable syntax:\n\n```html\n