@aragon/gov-ui-kit 1.6.0 → 1.8.0

package/dist/types/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.d.ts

@@ -13,13 +13,18 @@ export type IVoteProposalDataListItemStructureProps = IDataListItemProps & {
      * The vote of the user.
      */
     voteIndicator: VoteIndicator;
+    /**
+     * Additional description for the vote indicator, displayed after the tag.
+     */
+    voteIndicatorDescription?: string;
     /**
      *  Date of the vote on the proposal in ISO format or as a timestamp
      */
     date?: number | string;
     /**
-     *   Custom label for the tag
+     * Defines if the voting is for vetoing the proposal or not.
+     * @default false
      */
-    confirmationLabel?: string;
+    isVeto?: boolean;
 };
 export declare const VoteProposalDataListItemStructure: React.FC<IVoteProposalDataListItemStructureProps>;

package/dist/types/src/modules/components/vote/voteUtils.d.ts

@@ -1,3 +1,3 @@
 import { type TagVariant } from '../../../core';
-export type VoteIndicator = 'yes' | 'no' | 'abstain' | 'approve';
-export declare const voteIndicatorToTagVariant: Record<VoteIndicator, TagVariant>;
+export type VoteIndicator = 'yes' | 'no' | 'abstain' | 'approve' | 'veto';
+export declare const getTagVariant: (voteIndicator: VoteIndicator, isVeto?: boolean) => TagVariant;

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.8.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",
@@ -55,103 +54,99 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@radix-ui/react-visually-hidden": "^1.2.0",
-    "@tiptap/extension-code-block": "^2.12.0",
-    "@tiptap/extension-image": "^2.12.0",
-    "@tiptap/extension-link": "^2.12.0",
-    "@tiptap/extension-placeholder": "^2.12.0",
-    "@tiptap/extension-text-style": "^2.12.0",
-    "@tiptap/pm": "^2.12.0",
-    "@tiptap/react": "^2.12.0",
-    "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/core": "^2.14.0",
+    "@tiptap/extension-code-block": "^2.14.0",
+    "@tiptap/extension-image": "^2.14.0",
+    "@tiptap/extension-link": "^2.14.0",
+    "@tiptap/extension-placeholder": "^2.14.0",
+    "@tiptap/extension-text-style": "^2.14.0",
+    "@tiptap/pm": "^2.14.0",
+    "@tiptap/react": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
     "blockies-ts": "^1.0.0",
     "classnames": "^2.5.0",
-    "framer-motion": "^12.11.0",
+    "framer-motion": "^12.18.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.80.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",
+    "react-hook-form": "^7.58.0",
+    "tailwindcss": "^4.1.0",
+    "viem": "^2.31.0",
     "wagmi": "^2.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.4",
     "@hookform/devtools": "^4.4.0",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.5",
     "@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",
+    "@storybook/addon-docs": "^9.0.10",
+    "@storybook/react-vite": "^9.0.10",
     "@svgr/rollup": "^8.1.0",
-    "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/react-query": "^5.76.0",
+    "@tanstack/react-query": "^5.80.7",
     "@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/jest": "^30.0.0",
     "@types/luxon": "^3.6.2",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.4",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@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.29.0",
+    "eslint-import-resolver-typescript": "^4.4.3",
     "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-storybook": "^9.0.10",
+    "eslint-plugin-testing-library": "^7.5.3",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^16.0.0",
-    "postcss": "^8.5.3",
+    "jest": "^30.0.0",
+    "jest-environment-jsdom": "^30.0.0",
+    "lint-staged": "^16.1.2",
+    "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.3",
-    "rollup": "^4.40.2",
+    "react-hook-form": "^7.58.0",
+    "rollup": "^4.43.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.2",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "storybook": "^9.0.10",
+    "tailwindcss": "^4.1.10",
+    "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
-    "vercel": "^41.7.4",
-    "viem": "^2.29.2",
-    "wagmi": "^2.15.2"
+    "typescript-eslint": "^8.34.1",
+    "vercel": "^42.3.0",
+    "viem": "^2.31.3",
+    "vite": "^6.3.5",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-static-copy": "^3.0.2",
+    "vite-plugin-svgr": "^4.3.0",
+    "wagmi": "^2.15.6"
   },
   "bugs": {
     "url": "https://github.com/aragon/gov-ui-kit/issues"
@@ -166,8 +161,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;
 }