@aragon/gov-ui-kit 1.6.0 → 1.7.0

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

@@ -1,5 +1,5 @@
 import type { IDefinitionListItemProps } from '../../core';
-export interface IDefinitionSetting extends Pick<IDefinitionListItemProps, 'term' | 'link'> {
+export interface IDefinitionSetting extends Pick<IDefinitionListItemProps, 'term' | 'link' | 'description' | 'copyValue'> {
     /**
      * The definition for the term in the list item.
      */

package/index.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aragon/gov-ui-kit",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Implementation of the Aragon's Governance UI Kit",
   "main": "dist/index.es.js",
   "types": "dist/types/src/index.d.ts",
@@ -10,8 +10,7 @@
     "index.css",
     "build.css",
     "src/**/*.css",
-    "src/theme/fonts/*",
-    "tailwind.config.js"
+    "src/theme/fonts/*"
   ],
   "scripts": {
     "setup": "husky",
@@ -65,21 +64,21 @@
     "@tiptap/starter-kit": "^2.12.0",
     "blockies-ts": "^1.0.0",
     "classnames": "^2.5.0",
-    "framer-motion": "^12.11.0",
+    "framer-motion": "^12.14.0",
     "luxon": "^3.6.0",
     "react-dropzone": "^14.3.0",
     "react-imask": "^7.6.0",
-    "sanitize-html": "^2.16.0",
+    "sanitize-html": "^2.17.0",
     "tiptap-markdown": "^0.8.10"
   },
   "peerDependencies": {
     "@tailwindcss/typography": "^0.5.0",
-    "@tanstack/react-query": "^5.76.0",
+    "@tanstack/react-query": "^5.77.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-hook-form": "^7.56.0",
-    "tailwindcss": "^3.4.0",
-    "viem": "^2.29.0",
+    "tailwindcss": "^4.1.0",
+    "viem": "^2.30.0",
     "wagmi": "^2.15.0"
   },
   "devDependencies": {
@@ -95,39 +94,37 @@
     "@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-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
     "@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",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.1.7",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/react-query": "^5.76.0",
+    "@tanstack/react-query": "^5.77.2",
     "@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.3",
-    "@types/react-dom": "^19.1.4",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
     "@types/sanitize-html": "^2.16.0",
-    "autoprefixer": "^10.4.21",
     "cross-env": "^7.0.3",
-    "eslint": "^9.26.0",
-    "eslint-import-resolver-typescript": "^4.3.4",
+    "eslint": "^9.27.0",
+    "eslint-import-resolver-typescript": "^4.4.1",
     "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",
+    "eslint-plugin-testing-library": "^7.2.2",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -139,19 +136,19 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.3",
-    "rollup": "^4.40.2",
+    "react-hook-form": "^7.56.4",
+    "rollup": "^4.41.1",
     "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.2",
+    "rollup-plugin-visualizer": "^6.0.0",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^4.1.7",
+    "ts-jest": "^29.3.4",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
-    "vercel": "^41.7.4",
-    "viem": "^2.29.2",
-    "wagmi": "^2.15.2"
+    "vercel": "^42.1.1",
+    "viem": "^2.30.1",
+    "wagmi": "^2.15.4"
   },
   "bugs": {
     "url": "https://github.com/aragon/gov-ui-kit/issues"
@@ -166,8 +163,7 @@
       "default": "./dist/index.es.js"
     },
     "./index.css": "./index.css",
-    "./build.css": "./build.css",
-    "./tailwind.config": "./tailwind.config.js"
+    "./build.css": "./build.css"
   },
   "packageManager": "yarn@4.9.1"
 }

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

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

package/src/theme/index.css

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

package/src/theme/tokens/index.css

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

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

@@ -1,9 +1,10 @@
-: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;
+@theme {
+  --radius-*: initial;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+  --radius-none: none;
 }

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

@@ -0,0 +1,16 @@
+:root {
+  --breakpoint-sm-px: 640;
+  --breakpoint-md-px: 768;
+  --breakpoint-lg-px: 1024;
+  --breakpoint-xl-px: 1280;
+  --breakpoint-2xl-px: 1536;
+}
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+}

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

@@ -1,73 +1,83 @@
-:root {
+@theme {
+  --color-*: initial;
+
   /* 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;
+  --color-primary-50: #f5f8ff;
+  --color-primary-100: #c4d7ff;
+  --color-primary-200: #93b2ff;
+  --color-primary-300: #628cfe;
+  --color-primary-400: #3164fa;
+  --color-primary-500: #003bf5;
+  --color-primary-600: #0037d2;
+  --color-primary-700: #0031ad;
+  --color-primary-800: #002985;
+  --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;
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f5f7fa;
+  --color-neutral-100: #e4e7eb;
+  --color-neutral-200: #cbd2d9;
+  --color-neutral-300: #9aa5b1;
+  --color-neutral-400: #7b8794;
+  --color-neutral-500: #616e7c;
+  --color-neutral-600: #52606d;
+  --color-neutral-700: #3e4c59;
+  --color-neutral-800: #323f4b;
+  --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;
+  --color-info-100: #d1fdfa;
+  --color-info-200: #a4f9fb;
+  --color-info-300: #75e8f3;
+  --color-info-400: #52cfe7;
+  --color-info-500: #1eadd8;
+  --color-info-600: #1588b9;
+  --color-info-700: #0f669b;
+  --color-info-800: #09497d;
+  --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;
+  --color-success-100: #f3fccc;
+  --color-success-200: #e4f99a;
+  --color-success-300: #ccef66;
+  --color-success-400: #b2e040;
+  --color-success-500: #8ecc0a;
+  --color-success-600: #74af07;
+  --color-success-700: #5c9205;
+  --color-success-800: #467603;
+  --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;
+  --color-warning-100: #fff3d6;
+  --color-warning-200: #ffe4ad;
+  --color-warning-300: #ffd083;
+  --color-warning-400: #ffbe65;
+  --color-warning-500: #ff9f32;
+  --color-warning-600: #db7d24;
+  --color-warning-700: #b75e19;
+  --color-warning-800: #93430f;
+  --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;
+  --color-critical-100: #fee4d6;
+  --color-critical-200: #fec3ae;
+  --color-critical-300: #fd9a86;
+  --color-critical-400: #fb7467;
+  --color-critical-500: #f93636;
+  --color-critical-600: #d62736;
+  --color-critical-700: #b31b35;
+  --color-critical-800: #901132;
+  --color-critical-900: #770a30;
 
   /* Transparent */
-  --guk-color-transparent: transparent;
+  --color-transparent: transparent;
+}
+
+@utility gradient-neutral-50-transparent-to-b {
+  @apply bg-linear-to-b from-neutral-50/100 to-neutral-50/0;
+}
+
+@utility gradient-neutral-50-transparent-to-t {
+  @apply bg-linear-to-t from-neutral-50/100 to-neutral-50/0;
 }

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

@@ -0,0 +1,56 @@
+@theme {
+  --ring-color-*: initial;
+
+  --ring-color-primary: var(--color-primary-200);
+  --ring-color-success: var(--color-success-200);
+  --ring-color-warning: var(--color-warning-200);
+  --ring-color-critical: var(--color-critical-200);
+}
+
+@utility focus-ring {
+  &:focus,
+  &:has(:focus) {
+    outline: none;
+  }
+
+  &:focus-visible,
+  &:has(:focus-visible) {
+    @apply ring-3 ring-offset-3;
+  }
+}
+
+@utility focus-ring-primary {
+  @apply focus-ring;
+
+  &:focus-visible,
+  &:has(:focus-visible) {
+    @apply ring-primary;
+  }
+}
+
+@utility focus-ring-success {
+  @apply focus-ring;
+
+  &:focus-visible,
+  &:has(:focus-visible) {
+    @apply ring-success;
+  }
+}
+
+@utility focus-ring-warning {
+  @apply focus-ring;
+
+  &:focus-visible,
+  &:has(:focus-visible) {
+    @apply ring-warning;
+  }
+}
+
+@utility focus-ring-critical {
+  @apply focus-ring;
+
+  &:focus-visible,
+  &:has(:focus-visible) {
+    @apply ring-critical;
+  }
+}

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

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

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

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

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

@@ -1,37 +1,3 @@
-: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);
+@theme {
+  --spacing: 4px;
 }

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

@@ -1,28 +1,26 @@
-:root {
-  /******* Font Weight *******/
-  --guk-font-weight-normal: 400;
-  --guk-font-weight-semibold: 600;
+@theme {
+  --font-*: initial;
 
-  /******* 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:
+  --font-sans:
     "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-weight-normal: 400;
+  --font-weight-semibold: 600;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
 }
 
 @font-face {

package/src/theme/utils/animations.css

@@ -0,0 +1,23 @@
+@theme {
+  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+
+  @keyframes shake {
+    10%,
+    90% {
+      transform: translate3d(-1px, 0, 0);
+    }
+    20%,
+    80% {
+      transform: translate3d(2px, 0, 0);
+    }
+    30%,
+    50%,
+    70% {
+      transform: translate3d(-4px, 0, 0);
+    }
+    40%,
+    60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+}

package/src/theme/utils/index.css

@@ -0,0 +1,3 @@
+@import "./animations.css";
+@import "./prose.css";
+@import "./pseudoElements.css";