@aragon/gov-ui-kit 0.0.0-20250408144901

package/dist/types/src/modules/types/compositeAddress.d.ts

@@ -0,0 +1,14 @@
+export interface ICompositeAddress {
+    /**
+     * Address of the blockchain entity.
+     */
+    address: string;
+    /**
+     * Name (e.g. ENS name) linked to the address.
+     */
+    name?: string;
+    /**
+     * URL of the avatar (e.g. ENS avatar) linked to the address.
+     */
+    avatarSrc?: string;
+}

package/dist/types/src/modules/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './compositeAddress';
+export type * from './web3ComponentConfig';

package/dist/types/src/modules/types/web3ComponentConfig.d.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'wagmi';
+/**
+ * Properties for components making RPC requests.
+ */
+export interface IWeb3ComponentProps {
+    /**
+     * ID of the chain to use when making RPC requests. Defaults to the first chain set on the Wagmi config.
+     * (@see https://github.com/wevm/wagmi/blob/main/packages/core/src/createConfig.ts#L193C23-L193C31)
+     */
+    chainId?: number;
+    /**
+     * Custom Wagmi configurations to use instead of retrieving it from the closest WagmiProvider.
+     */
+    wagmiConfig?: Config;
+}

package/dist/types/src/modules/utils/addressUtils/addressUtils.d.ts

@@ -0,0 +1,38 @@
+import { type Address } from 'viem';
+export interface IIsAddressParams {
+    /**
+     * Whether or not to compare the address against its checksum.
+     * @default false
+     */
+    strict?: boolean;
+}
+declare class AddressUtils {
+    /**
+     * Checks if the given address is a valid address or not
+     * @param address The address to be checked
+     * @param options Options for the address check (@see IIsAddressParams)
+     * @returns True when the given address is a valid address, false otherwise.
+     */
+    isAddress: (address?: string, options?: IIsAddressParams) => boolean;
+    /**
+     * Truncates the input address by displaying the first and last 4 characters.
+     * @param address The address to truncate
+     * @returns The truncated address when the address input is valid, the address input as is otherwise.
+     */
+    truncateAddress: (address?: string) => string;
+    /**
+     * Returns the address on its checksum format
+     * @param address The address to be formatted
+     * @returns The address in checksum format
+     */
+    getChecksum: (address?: string) => Address;
+    /**
+     * Compares two addresses (ignoring checksum) to see if they are the same
+     * @param addressOne The first address
+     * @param addressTwo The second address
+     * @returns true if the addresses are the same, false otherwise
+     */
+    isAddressEqual: (addressOne?: string, addressTwo?: string) => boolean;
+}
+export declare const addressUtils: AddressUtils;
+export {};

package/dist/types/src/modules/utils/addressUtils/index.d.ts

@@ -0,0 +1 @@
+export { addressUtils, type IIsAddressParams } from './addressUtils';

package/dist/types/src/modules/utils/ensUtils/ensUtils.d.ts

@@ -0,0 +1,17 @@
+declare class EnsUtils {
+    private ensPattern;
+    /**
+     * Checks if the given value is a valid ENS name or not.
+     * @param value The value to be checked.
+     * @returns True when the given value is a valid ENS name, false otherwise.
+     */
+    isEnsName: (value?: string) => boolean;
+    /**
+     * Truncates the ENS name by displaying the first 5 characters and the eth suffix.
+     * @param address The ENS name to truncate
+     * @returns The truncated ENS name when the ens input is valid, the ENS input as is otherwise.
+     */
+    truncateEns: (ens?: string) => string;
+}
+export declare const ensUtils: EnsUtils;
+export {};

package/dist/types/src/modules/utils/ensUtils/index.d.ts

@@ -0,0 +1 @@
+export { ensUtils } from './ensUtils';

package/dist/types/src/modules/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './addressUtils';
+export * from './ensUtils';

package/index.css

@@ -0,0 +1,5 @@
+@import "./src";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/package.json

@@ -0,0 +1,173 @@
+{
+  "name": "@aragon/gov-ui-kit",
+  "version": "0.0.0-20250408144901",
+  "description": "Implementation of the Aragon's Governance UI Kit",
+  "main": "dist/index.es.js",
+  "types": "dist/types/src/index.d.ts",
+  "license": "GPL-3.0",
+  "files": [
+    "dist",
+    "index.css",
+    "build.css",
+    "src/**/*.css",
+    "src/theme/fonts/*",
+    "tailwind.config.js"
+  ],
+  "scripts": {
+    "setup": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build": "rollup -c",
+    "build:watch": "rollup -c --watch",
+    "build:analyze": "cross-env ANALYZE=true rollup -c",
+    "build:storybook": "storybook build",
+    "test": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --fix",
+    "prettify": "prettier . --check",
+    "prettify:fix": "prettier . --write",
+    "type-check": "tsc --noemit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aragon/gov-ui-kit.git"
+  },
+  "keywords": [
+    "aragon",
+    "design-system",
+    "governance-ui-kit",
+    "react",
+    "tailwind"
+  ],
+  "author": "Aragon Association",
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@tiptap/extension-code-block": "^2.11.0",
+    "@tiptap/extension-image": "^2.11.0",
+    "@tiptap/extension-link": "^2.11.0",
+    "@tiptap/extension-placeholder": "^2.11.0",
+    "@tiptap/extension-text-style": "^2.11.0",
+    "@tiptap/pm": "^2.11.0",
+    "@tiptap/react": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "blockies-ts": "^1.0.0",
+    "classnames": "^2.5.0",
+    "framer-motion": "^12.6.0",
+    "luxon": "^3.6.0",
+    "react-dropzone": "^14.3.0",
+    "react-imask": "^7.6.0",
+    "sanitize-html": "^2.15.0",
+    "tiptap-markdown": "^0.8.10"
+  },
+  "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.0",
+    "@tanstack/react-query": "^5.72.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-hook-form": "^7.55.0",
+    "tailwindcss": "^3.4.0",
+    "viem": "^2.26.0",
+    "wagmi": "^2.14.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.28.1",
+    "@hookform/devtools": "^4.4.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-designs": "^8.2.1",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@svgr/rollup": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-query": "^5.72.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/luxon": "^3.6.2",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@types/sanitize-html": "^2.15.0",
+    "autoprefixer": "^10.4.21",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.24.0",
+    "eslint-import-resolver-typescript": "^4.3.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.5.0",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.55.0",
+    "rollup": "^4.39.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.6.12",
+    "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.3.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.1",
+    "vercel": "^41.4.1",
+    "viem": "^2.26.0",
+    "wagmi": "^2.14.16"
+  },
+  "bugs": {
+    "url": "https://github.com/aragon/gov-ui-kit/issues"
+  },
+  "homepage": "https://github.com/aragon/gov-ui-kit#readme",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "default": "./dist/index.es.js"
+    },
+    "./index.css": "./index.css",
+    "./build.css": "./build.css",
+    "./tailwind.config": "./tailwind.config.js"
+  },
+  "packageManager": "yarn@4.8.1"
+}

package/src/core/components/avatars/avatar/index.css

@@ -0,0 +1,4 @@
+:root {
+  /* Position property of the avatar container */
+  --guk-avatar-container-position: static;
+}

package/src/core/components/avatars/index.css

@@ -0,0 +1 @@
+@import "./avatar";

package/src/core/components/collapsible/index.css

@@ -0,0 +1,4 @@
+:root {
+  /* Z-index property of the collapsible overlay */
+  --guk-collapsible-overlay-z-index: auto;
+}

package/src/core/components/dialogs/dialog/dialogRoot/index.css

@@ -0,0 +1,7 @@
+:root {
+  /* Z-index property of the dialog overlay */
+  --guk-dialog-overlay-z-index: auto;
+
+  /* Z-index property of the dialog content */
+  --guk-dialog-content-z-index: auto;
+}

package/src/core/components/dialogs/dialog/index.css

@@ -0,0 +1 @@
+@import "./dialogRoot";

package/src/core/components/dialogs/dialogAlert/dialogAlertRoot/index.css

@@ -0,0 +1,7 @@
+:root {
+  /* Z-index property of the dialog overlay */
+  --guk-dialog-alert-overlay-z-index: auto;
+
+  /* Z-index property of the dialog content */
+  --guk-dialog-alert-content-z-index: auto;
+}

package/src/core/components/dialogs/dialogAlert/index.css

@@ -0,0 +1 @@
+@import "./dialogAlertRoot";

package/src/core/components/dialogs/index.css

@@ -0,0 +1,2 @@
+@import "./dialog";
+@import "./dialogAlert";

package/src/core/components/dropdown/dropdownContainer/index.css

@@ -0,0 +1,4 @@
+:root {
+  /* Z-index property of the content insdie the dropdown container */
+  --guk-dropdown-container-content-z-index: auto;
+}

package/src/core/components/dropdown/index.css

@@ -0,0 +1 @@
+@import "./dropdownContainer";

package/src/core/components/forms/index.css

@@ -0,0 +1 @@
+@import "./textAreaRichText";

package/src/core/components/forms/textAreaRichText/index.css

@@ -0,0 +1,4 @@
+:root {
+  /* Z-index property of the TextAreaRichText component when expanded */
+  --guk-text-area-rich-text-expanded-z-index: auto;
+}

package/src/core/components/illustrations/index.css

@@ -0,0 +1,7 @@
+:root {
+  /* Accent color for the illustrations */
+  --guk-illustration-accent-color: var(--guk-color-primary-400);
+
+  /* Primary color for the illustrations */
+  --guk-illustration-primary-color: var(--guk-color-primary-900);
+}

package/src/core/components/index.css

@@ -0,0 +1,6 @@
+@import "./avatars";
+@import "./collapsible";
+@import "./dialogs";
+@import "./dropdown";
+@import "./forms";
+@import "./illustrations";

package/src/core/index.css

@@ -0,0 +1 @@
+@import "./components";

package/src/index.css

@@ -0,0 +1,2 @@
+@import "./core";
+@import "./theme";

package/src/theme/index.css

@@ -0,0 +1 @@
+@import "./tokens/index.css";

package/src/theme/tokens/index.css

@@ -0,0 +1 @@
+@import "./primitives/index.css";

package/src/theme/tokens/primitives/borderRadius.css

@@ -0,0 +1,9 @@
+:root {
+  --guk-border-rounded: 4px;
+  --guk-border-rounded-lg: 8px;
+  --guk-border-rounded-xl: 12px;
+  --guk-border-rounded-2xl: 16px;
+  --guk-border-rounded-3xl: 24px;
+  --guk-border-rounded-full: 9999px;
+  --guk-border-rounded-none: none;
+}

package/src/theme/tokens/primitives/colors.css

@@ -0,0 +1,73 @@
+:root {
+  /* Primary */
+  --guk-color-primary-50: #f5f8ff;
+  --guk-color-primary-100: #c4d7ff;
+  --guk-color-primary-200: #93b2ff;
+  --guk-color-primary-300: #628cfe;
+  --guk-color-primary-400: #3164fa;
+  --guk-color-primary-500: #003bf5;
+  --guk-color-primary-600: #0037d2;
+  --guk-color-primary-700: #0031ad;
+  --guk-color-primary-800: #002985;
+  --guk-color-primary-900: #001f5c;
+
+  /* Neutral */
+  --guk-color-neutral-0: #ffffff;
+  --guk-color-neutral-50: #f5f7fa;
+  --guk-color-neutral-100: #e4e7eb;
+  --guk-color-neutral-200: #cbd2d9;
+  --guk-color-neutral-300: #9aa5b1;
+  --guk-color-neutral-400: #7b8794;
+  --guk-color-neutral-500: #616e7c;
+  --guk-color-neutral-600: #52606d;
+  --guk-color-neutral-700: #3e4c59;
+  --guk-color-neutral-800: #323f4b;
+  --guk-color-neutral-900: #1f2933;
+
+  /* Info */
+  --guk-color-info-100: #d1fdfa;
+  --guk-color-info-200: #a4f9fb;
+  --guk-color-info-300: #75e8f3;
+  --guk-color-info-400: #52cfe7;
+  --guk-color-info-500: #1eadd8;
+  --guk-color-info-600: #1588b9;
+  --guk-color-info-700: #0f669b;
+  --guk-color-info-800: #09497d;
+  --guk-color-info-900: #053467;
+
+  /* Success */
+  --guk-color-success-100: #f3fccc;
+  --guk-color-success-200: #e4f99a;
+  --guk-color-success-300: #ccef66;
+  --guk-color-success-400: #b2e040;
+  --guk-color-success-500: #8ecc0a;
+  --guk-color-success-600: #74af07;
+  --guk-color-success-700: #5c9205;
+  --guk-color-success-800: #467603;
+  --guk-color-success-900: #366101;
+
+  /* Warning */
+  --guk-color-warning-100: #fff3d6;
+  --guk-color-warning-200: #ffe4ad;
+  --guk-color-warning-300: #ffd083;
+  --guk-color-warning-400: #ffbe65;
+  --guk-color-warning-500: #ff9f32;
+  --guk-color-warning-600: #db7d24;
+  --guk-color-warning-700: #b75e19;
+  --guk-color-warning-800: #93430f;
+  --guk-color-warning-900: #7a3009;
+
+  /* Critical */
+  --guk-color-critical-100: #fee4d6;
+  --guk-color-critical-200: #fec3ae;
+  --guk-color-critical-300: #fd9a86;
+  --guk-color-critical-400: #fb7467;
+  --guk-color-critical-500: #f93636;
+  --guk-color-critical-600: #d62736;
+  --guk-color-critical-700: #b31b35;
+  --guk-color-critical-800: #901132;
+  --guk-color-critical-900: #770a30;
+
+  /* Transparent */
+  --guk-color-transparent: transparent;
+}

package/src/theme/tokens/primitives/index.css

@@ -0,0 +1,5 @@
+@import "./borderRadius.css";
+@import "./colors.css";
+@import "./spacing.css";
+@import "./shadows.css";
+@import "./typography.css";

package/src/theme/tokens/primitives/shadows.css

@@ -0,0 +1,52 @@
+:root {
+  /* Neutral */
+  --guk-shadow-neutral-sm: 0px 1px 2px 0px rgba(97, 110, 124, 0.05);
+  --guk-shadow-neutral: 0px 1px 3px 0px rgba(97, 110, 124, 0.1), 0px 1px 2px -1px rgba(97, 110, 124, 0.1);
+  --guk-shadow-neutral-md: 0px 4px 6px -1px rgba(82, 96, 109, 0.1), 0px 2px 4px -2px rgba(82, 96, 109, 0.1);
+  --guk-shadow-neutral-lg: 0px 10px 15px -3px rgba(82, 96, 109, 0.1), 0px 4px 6px -4px rgba(82, 96, 109, 0.1);
+  --guk-shadow-neutral-xl: 0px 20px 25px -5px rgba(82, 96, 109, 0.1), 0px 8px 10px -6px rgba(82, 96, 109, 0.1);
+  --guk-shadow-neutral-2xl: 0px 25px 50px -12px rgba(82, 96, 109, 0.24);
+
+  /* Primary */
+  --guk-shadow-primary-sm: 0px 1px 2px 0px rgba(0, 59, 245, 0.05);
+  --guk-shadow-primary: 0px 1px 3px 0px rgba(0, 59, 245, 0.1), 0px 1px 2px -1px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-md: 0px 4px 6px -1px rgba(0, 59, 245, 0.1), 0px 2px 4px -2px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-lg: 0px 10px 15px -3px rgba(0, 59, 245, 0.1), 0px 4px 6px -4px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-xl: 0px 20px 25px -5px rgba(0, 59, 245, 0.1), 0px 8px 10px -6px rgba(0, 59, 245, 0.1);
+  --guk-shadow-primary-2xl: 0px 25px 50px -12px rgba(0, 59, 245, 0.24);
+
+  /* Success */
+  --guk-shadow-success-sm: 0px 1px 2px 0px rgba(116, 175, 7, 0.05);
+  --guk-shadow-success: 0px 1px 3px 0px rgba(116, 175, 7, 0.1), 0px 1px 2px -1px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-md: 0px 4px 6px -1px rgba(116, 175, 7, 0.1), 0px 2px 4px -2px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-lg: 0px 10px 15px -3px rgba(116, 175, 7, 0.1), 0px 4px 6px -4px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-xl: 0px 20px 25px -5px rgba(116, 175, 7, 0.1), 0px 8px 10px -6px rgba(116, 175, 7, 0.1);
+  --guk-shadow-success-2xl: 0px 25px 50px -12px rgba(116, 175, 7, 0.24);
+
+  /* Warning */
+  --guk-shadow-warning-sm: 0px 1px 2px 0px rgba(219, 125, 36, 0.05);
+  --guk-shadow-warning: 0px 1px 3px 0px rgba(219, 125, 36, 0.1), 0px 1px 2px -1px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-md: 0px 4px 6px -1px rgba(219, 125, 36, 0.1), 0px 2px 4px -2px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-lg: 0px 10px 15px -3px rgba(219, 125, 36, 0.1), 0px 4px 6px -4px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-xl: 0px 20px 25px -5px rgba(219, 125, 36, 0.1), 0px 8px 10px -6px rgba(219, 125, 36, 0.1);
+  --guk-shadow-warning-2xl: 0px 25px 50px -12px rgba(219, 125, 36, 0.24);
+
+  /* Critical */
+  --guk-shadow-critical-sm: 0px 1px 2px 0px rgba(214, 39, 54, 0.05);
+  --guk-shadow-critical: 0px 1px 3px 0px rgba(214, 39, 54, 0.1), 0px 1px 2px -1px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-md: 0px 4px 6px -1px rgba(214, 39, 54, 0.1), 0px 2px 4px -2px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-lg: 0px 10px 15px -3px rgba(214, 39, 54, 0.1), 0px 4px 6px -4px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-xl: 0px 20px 25px -5px rgba(214, 39, 54, 0.1), 0px 8px 10px -6px rgba(214, 39, 54, 0.1);
+  --guk-shadow-critical-2xl: 0px 25px 50px -12px rgba(214, 39, 54, 0.24);
+
+  /* Info */
+  --guk-shadow-info-sm: 0px 1px 2px 0px rgba(21, 136, 185, 0.05);
+  --guk-shadow-info: 0px 1px 3px 0px rgba(21, 136, 185, 0.1), 0px 1px 2px -1px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-md: 0px 4px 6px -1px rgba(21, 136, 185, 0.1), 0px 2px 4px -2px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-lg: 0px 10px 15px -3px rgba(21, 136, 185, 0.1), 0px 4px 6px -4px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-xl: 0px 20px 25px -5px rgba(21, 136, 185, 0.1), 0px 8px 10px -6px rgba(21, 136, 185, 0.1);
+  --guk-shadow-info-2xl: 0px 25px 50px -12px rgba(21, 136, 185, 0.24);
+
+  /* None */
+  --guk-shadow-none: 0px 0px #0000;
+}

package/src/theme/tokens/primitives/spacing.css

@@ -0,0 +1,37 @@
+:root {
+  --guk-space-base: 4px;
+  --guk-space-0: calc(var(--guk-space-base) * 0);
+  --guk-space-0-25: calc(var(--guk-space-base) * 0.25);
+  --guk-space-0-5: calc(var(--guk-space-base) * 0.5);
+  --guk-space-1-5: calc(var(--guk-space-base) * 1.5);
+  --guk-space-2: calc(var(--guk-space-base) * 2);
+  --guk-space-2-5: calc(var(--guk-space-base) * 2.5);
+  --guk-space-3: calc(var(--guk-space-base) * 3);
+  --guk-space-3-5: calc(var(--guk-space-base) * 3.5);
+  --guk-space-4: calc(var(--guk-space-base) * 4);
+  --guk-space-5: calc(var(--guk-space-base) * 5);
+  --guk-space-6: calc(var(--guk-space-base) * 6);
+  --guk-space-7: calc(var(--guk-space-base) * 7);
+  --guk-space-8: calc(var(--guk-space-base) * 8);
+  --guk-space-9: calc(var(--guk-space-base) * 9);
+  --guk-space-10: calc(var(--guk-space-base) * 10);
+  --guk-space-11: calc(var(--guk-space-base) * 11);
+  --guk-space-12: calc(var(--guk-space-base) * 12);
+  --guk-space-14: calc(var(--guk-space-base) * 14);
+  --guk-space-16: calc(var(--guk-space-base) * 16);
+  --guk-space-20: calc(var(--guk-space-base) * 20);
+  --guk-space-24: calc(var(--guk-space-base) * 24);
+  --guk-space-28: calc(var(--guk-space-base) * 28);
+  --guk-space-32: calc(var(--guk-space-base) * 32);
+  --guk-space-36: calc(var(--guk-space-base) * 36);
+  --guk-space-40: calc(var(--guk-space-base) * 40);
+  --guk-space-44: calc(var(--guk-space-base) * 44);
+  --guk-space-48: calc(var(--guk-space-base) * 48);
+  --guk-space-52: calc(var(--guk-space-base) * 52);
+  --guk-space-56: calc(var(--guk-space-base) * 56);
+  --guk-space-60: calc(var(--guk-space-base) * 60);
+  --guk-space-64: calc(var(--guk-space-base) * 64);
+  --guk-space-72: calc(var(--guk-space-base) * 72);
+  --guk-space-80: calc(var(--guk-space-base) * 80);
+  --guk-space-96: calc(var(--guk-space-base) * 96);
+}

package/src/theme/tokens/primitives/typography.css

@@ -0,0 +1,42 @@
+:root {
+  /******* Font Weight *******/
+  --guk-font-weight-normal: 400;
+  --guk-font-weight-semibold: 600;
+
+  /******* Font Size *******/
+  --guk-font-size-xs: 0.75rem;
+  --guk-font-size-sm: 0.875rem;
+  --guk-font-size-base: 1rem;
+  --guk-font-size-lg: 1.125rem;
+  --guk-font-size-xl: 1.25rem;
+  --guk-font-size-2xl: 1.5rem;
+  --guk-font-size-3xl: 1.875rem;
+  --guk-font-size-4xl: 2.25rem;
+  --guk-font-size-5xl: 3rem;
+
+  /******* Line Height *******/
+  --guk-line-height-normal: 1.5;
+  --guk-line-height-tight: 1.25;
+  --guk-line-height-relaxed: 1.65;
+
+  /******* Font Family *******/
+  --guk-font-family:
+    "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../../fonts/Manrope-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../../fonts/Manrope-SemiBold.ttf") format("truetype");
+}