{props.children}
,
}));
-describe('
diff --git a/src/modules/components/proposal/proposalActions/actions/proposalActionChangeSettings/proposalActionChangeSettings.tsx b/src/modules/components/proposal/proposalActions/actions/proposalActionChangeSettings/proposalActionChangeSettings.tsx
index b3d35fe9b..27bd6f770 100644
--- a/src/modules/components/proposal/proposalActions/actions/proposalActionChangeSettings/proposalActionChangeSettings.tsx
+++ b/src/modules/components/proposal/proposalActions/actions/proposalActionChangeSettings/proposalActionChangeSettings.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { DefinitionList, Toggle, ToggleGroup } from '../../../../../../core';
-import { useOdsModulesContext } from '../../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../../gukModulesProvider';
import { type IProposalActionChangeSettings, type IProposalActionComponentProps } from '../../proposalActionsTypes';
export interface IProposalActionChangeSettingsProps
@@ -9,7 +9,7 @@ export interface IProposalActionChangeSettingsProps
export const ProposalActionChangeSettings: React.FC = (props) => {
const { action } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const [toggleValue, setToggleValue] = useState('existingSettings');
diff --git a/src/modules/components/proposal/proposalActions/actions/proposalActionTokenMint/proposalActionTokenMint.test.tsx b/src/modules/components/proposal/proposalActions/actions/proposalActionTokenMint/proposalActionTokenMint.test.tsx
index fa1ef935e..78a34fd12 100644
--- a/src/modules/components/proposal/proposalActions/actions/proposalActionTokenMint/proposalActionTokenMint.test.tsx
+++ b/src/modules/components/proposal/proposalActions/actions/proposalActionTokenMint/proposalActionTokenMint.test.tsx
@@ -1,5 +1,5 @@
import { render, screen } from '@testing-library/react';
-import { OdsModulesProvider } from '../../../../odsModulesProvider';
+import { GukModulesProvider } from '../../../../gukModulesProvider';
import { generateProposalActionTokenMint } from '../generators';
import { ProposalActionTokenMint, type IProposalActionTokenMintProps } from './proposalActionTokenMint';
@@ -18,9 +18,9 @@ describe('
+
+
);
};
diff --git a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.test.tsx b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.test.tsx
index 146f62e41..233f95ca0 100644
--- a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.test.tsx
+++ b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.test.tsx
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { modulesCopy } from '../../../../assets';
-import { OdsModulesProvider } from '../../../odsModulesProvider';
+import { GukModulesProvider } from '../../../gukModulesProvider';
import { generateProposalAction } from '../actions/generators/proposalAction';
import { generateProposalActionWithdrawToken } from '../actions/generators/proposalActionWithdrawToken';
import { ProposalActionType, type IProposalAction } from '../proposalActionsTypes';
@@ -25,9 +25,9 @@ describe('
+
+
);
};
diff --git a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.tsx b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.tsx
index eecc2da98..d6a3440f6 100644
--- a/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.tsx
+++ b/src/modules/components/proposal/proposalActions/proposalActions/proposalActions.tsx
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import { useRef, useState } from 'react';
import { Accordion, Button, Card, EmptyState } from '../../../../../core';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ProposalActionsAction } from '../proposalActionsAction';
import type { IProposalAction } from '../proposalActionsTypes';
import type { IProposalActionsProps } from './proposalActions.api';
@@ -23,7 +23,7 @@ export const ProposalActions = (['0']);
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const actionsContainerRef = useRef(null);
diff --git a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsAction.tsx b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsAction.tsx
index 53dda9a12..1e90f9aa9 100644
--- a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsAction.tsx
+++ b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsAction.tsx
@@ -1,7 +1,7 @@
import { useMemo, useRef, useState } from 'react';
import { Accordion, AlertCard, Button, Dropdown, Heading, Icon, IconType } from '../../../../../core';
import type { IWeb3ComponentProps } from '../../../../types';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import {
ProposalActionChangeMembers,
ProposalActionChangeSettings,
@@ -49,7 +49,7 @@ export const ProposalActionsAction = {
const { action, index, name, CustomComponent, dropdownItems, ...web3Props } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const contentRef = useRef(null);
const itemRef = useRef(null);
diff --git a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionDecodedView/proposalActionsActionDecodedView.tsx b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionDecodedView/proposalActionsActionDecodedView.tsx
index 75449e32c..3860d8353 100644
--- a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionDecodedView/proposalActionsActionDecodedView.tsx
+++ b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionDecodedView/proposalActionsActionDecodedView.tsx
@@ -1,5 +1,5 @@
import { InputText } from '../../../../../../core';
-import { useOdsModulesContext } from '../../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../../gukModulesProvider';
import type { IProposalAction } from '../../proposalActionsTypes';
export interface IProposalActionsActionDecodedViewProps {
@@ -11,7 +11,7 @@ export interface IProposalActionsActionDecodedViewProps {
export const ProposalActionsActionDecodedView: React.FC = (props) => {
const { action } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
return (
diff --git a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionRawView/proposalActionsActionRawView.tsx b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionRawView/proposalActionsActionRawView.tsx
index 0b4603837..d3e469f5d 100644
--- a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionRawView/proposalActionsActionRawView.tsx
+++ b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionRawView/proposalActionsActionRawView.tsx
@@ -1,5 +1,5 @@
import { Button, clipboardUtils, InputText, TextArea } from '../../../../../../core';
-import { useOdsModulesContext } from '../../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../../gukModulesProvider';
import type { IProposalAction } from '../../proposalActionsTypes';
export interface IProposalActionsActionRawViewProps {
@@ -12,7 +12,7 @@ export interface IProposalActionsActionRawViewProps {
export const ProposalActionsActionRawView: React.FC = (props) => {
const { action } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
return (
diff --git a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionViewAsMenu/proposalActionsActionViewAsMenu.tsx b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionViewAsMenu/proposalActionsActionViewAsMenu.tsx
index 3c667fd7d..1228dc771 100644
--- a/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionViewAsMenu/proposalActionsActionViewAsMenu.tsx
+++ b/src/modules/components/proposal/proposalActions/proposalActionsAction/proposalActionsActionViewAsMenu/proposalActionsActionViewAsMenu.tsx
@@ -1,5 +1,5 @@
import { Dropdown } from '../../../../../../core';
-import { useOdsModulesContext } from '../../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../../gukModulesProvider';
import { ProposalActionViewMode } from '../../proposalActionsTypes';
export interface IProposalActionsActionViewAsMenuProps {
@@ -24,7 +24,7 @@ export interface IProposalActionsActionViewAsMenuProps {
export const ProposalActionsActionViewAsMenu: React.FC = (props) => {
const { viewMode, disableBasic, disableDecoded, onViewModeChange } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
return (
diff --git a/src/modules/components/proposal/proposalDataListItem/approvalThresholdResult/approvalThresholdResult.tsx b/src/modules/components/proposal/proposalDataListItem/approvalThresholdResult/approvalThresholdResult.tsx
index caa542ffa..3ed1a724b 100644
--- a/src/modules/components/proposal/proposalDataListItem/approvalThresholdResult/approvalThresholdResult.tsx
+++ b/src/modules/components/proposal/proposalDataListItem/approvalThresholdResult/approvalThresholdResult.tsx
@@ -1,5 +1,5 @@
import { NumberFormat, Progress, formatterUtils } from '../../../../../core';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { type IApprovalThresholdResult } from '../proposalDataListItemStructure';
export interface IApprovalThresholdResultProps extends IApprovalThresholdResult {}
@@ -11,7 +11,7 @@ export const ApprovalThresholdResult: React.FC =
const { approvalAmount, approvalThreshold, stage } = props;
const percentage = approvalThreshold !== 0 ? (approvalAmount / approvalThreshold) * 100 : 100;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const formattedApprovalThreshold = formatterUtils.formatNumber(approvalThreshold, {
format: NumberFormat.GENERIC_SHORT,
diff --git a/src/modules/components/proposal/proposalDataListItem/majorityVotingResult/majorityVotingResult.tsx b/src/modules/components/proposal/proposalDataListItem/majorityVotingResult/majorityVotingResult.tsx
index ef5f6b5d9..2c26e22f3 100644
--- a/src/modules/components/proposal/proposalDataListItem/majorityVotingResult/majorityVotingResult.tsx
+++ b/src/modules/components/proposal/proposalDataListItem/majorityVotingResult/majorityVotingResult.tsx
@@ -1,5 +1,5 @@
import { Progress } from '../../../../../core';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { type IMajorityVotingResult } from '../proposalDataListItemStructure';
export interface IMajorityVotingResultProps extends IMajorityVotingResult {}
@@ -10,7 +10,7 @@ export interface IMajorityVotingResultProps extends IMajorityVotingResult {}
export const MajorityVotingResult: React.FC = (props) => {
const { option, stage, voteAmount, votePercentage } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
return (
diff --git a/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStatus/proposalDataListItemStatus.tsx b/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStatus/proposalDataListItemStatus.tsx
index 662f2c039..be65c935c 100644
--- a/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStatus/proposalDataListItemStatus.tsx
+++ b/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStatus/proposalDataListItemStatus.tsx
@@ -10,7 +10,7 @@ import {
type StatePingAnimationVariant,
} from '../../../../../core';
import type { ModulesCopy } from '../../../../assets';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ProposalStatus, proposalStatusToTagVariant } from '../../proposalUtils';
import { type IProposalDataListItemStructureProps } from '../proposalDataListItemStructure';
import { proposalDataListItemUtils } from '../proposalDataListItemUtils';
@@ -40,7 +40,7 @@ export const ProposalDataListItemStatus: React.FC
diff --git a/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx b/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx
index 5cfebe973..7a974e2fc 100644
--- a/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx
+++ b/src/modules/components/proposal/proposalDataListItem/proposalDataListItemStructure/proposalDataListItemStructure.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
import { useAccount } from 'wagmi';
import { DataList, Link, Tag } from '../../../../../core';
import { addressUtils } from '../../../../utils/addressUtils';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ApprovalThresholdResult } from '../approvalThresholdResult';
import { MajorityVotingResult } from '../majorityVotingResult';
import { ProposalDataListItemStatus } from '../proposalDataListItemStatus';
@@ -40,7 +40,7 @@ export const ProposalDataListItemStructure: React.FC = (props) => {
const { approvalsAmount, minApprovals, children, ...otherProps } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
invariant(minApprovals > 0, 'ProposalVotingBreakdownMultisig: minApprovals property must be a positive number');
diff --git a/src/modules/components/proposal/proposalVoting/proposalVotingBreakdownToken/proposalVotingBreakdownToken.tsx b/src/modules/components/proposal/proposalVoting/proposalVotingBreakdownToken/proposalVotingBreakdownToken.tsx
index bab6516e2..ca2cb7b23 100644
--- a/src/modules/components/proposal/proposalVoting/proposalVotingBreakdownToken/proposalVotingBreakdownToken.tsx
+++ b/src/modules/components/proposal/proposalVoting/proposalVotingBreakdownToken/proposalVotingBreakdownToken.tsx
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import { type ITabsContentProps, NumberFormat, Tabs, formatterUtils, invariant } from '../../../../../core';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ProposalVotingTab } from '../proposalVotingDefinitions';
import { ProposalVotingProgress } from '../proposalVotingProgress';
@@ -49,7 +49,7 @@ export const ProposalVotingBreakdownToken: React.FC = (props) => {
const { className, settings, ...otherProps } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const { startDate, endDate } = useProposalVotingStageContext();
const formattedStartDate = formatterUtils.formatDate(startDate, { format: DateFormat.YEAR_MONTH_DAY_TIME });
diff --git a/src/modules/components/proposal/proposalVoting/proposalVotingStage/proposalVotingStage.tsx b/src/modules/components/proposal/proposalVoting/proposalVotingStage/proposalVotingStage.tsx
index de833454a..b7236313d 100644
--- a/src/modules/components/proposal/proposalVoting/proposalVotingStage/proposalVotingStage.tsx
+++ b/src/modules/components/proposal/proposalVoting/proposalVotingStage/proposalVotingStage.tsx
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import { useMemo, useRef, type ComponentProps } from 'react';
import { Accordion, invariant } from '../../../../../core';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ProposalVotingStatus } from '../../proposalUtils';
import { ProposalVotingTab } from '../proposalVotingDefinitions';
import { ProposalVotingStageContextProvider } from '../proposalVotingStageContext';
@@ -59,7 +59,7 @@ export const ProposalVotingStage: React.FC = (props)
...otherProps
} = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const stateDefaultTab = [ProposalVotingStatus.PENDING, ProposalVotingStatus.UNREACHED].includes(status)
? ProposalVotingTab.DETAILS
diff --git a/src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.tsx b/src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.tsx
index 0f3dd25cb..e6152571f 100644
--- a/src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.tsx
+++ b/src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.tsx
@@ -11,7 +11,7 @@ import {
StatePingAnimation,
} from '../../../../../core';
import type { ModulesCopy } from '../../../../assets';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ProposalVotingStatus } from '../../proposalUtils';
export interface IProposalVotingStageStatusProps extends ComponentProps<'div'> {
@@ -57,7 +57,7 @@ const statusToIcon: Map = (props) => {
const { status = ProposalVotingStatus.PENDING, endDate, isMultiStage, className, ...otherProps } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const mainText = getStatusText(status, copy, isMultiStage);
const secondaryText = statusToSecondaryText(copy)[status];
diff --git a/src/modules/components/proposal/proposalVoting/proposalVotingTabs/proposalVotingTabs.tsx b/src/modules/components/proposal/proposalVoting/proposalVotingTabs/proposalVotingTabs.tsx
index e327bfab3..9bf625125 100644
--- a/src/modules/components/proposal/proposalVoting/proposalVotingTabs/proposalVotingTabs.tsx
+++ b/src/modules/components/proposal/proposalVoting/proposalVotingTabs/proposalVotingTabs.tsx
@@ -1,6 +1,6 @@
import { useRef, type RefObject } from 'react';
import { Tabs, type ITabsRootProps } from '../../../../../core';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { ProposalVotingStatus } from '../../proposalUtils';
import { ProposalVotingTab } from '../proposalVotingDefinitions';
@@ -23,7 +23,7 @@ export interface IProposalVotingTabsProps extends ITabsRootProps {
export const ProposalVotingTabs: React.FC = (props) => {
const { defaultValue = ProposalVotingTab.BREAKDOWN, accordionRef, children, status, ...otherProps } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const contentRef = useRef(null);
diff --git a/src/modules/components/vote/voteDataListItem/voteDataListItemStructure/voteDataListItemStructure.tsx b/src/modules/components/vote/voteDataListItem/voteDataListItemStructure/voteDataListItemStructure.tsx
index d9e051c3b..5d9fd5b11 100644
--- a/src/modules/components/vote/voteDataListItem/voteDataListItemStructure/voteDataListItemStructure.tsx
+++ b/src/modules/components/vote/voteDataListItem/voteDataListItemStructure/voteDataListItemStructure.tsx
@@ -3,8 +3,8 @@ import { useAccount } from 'wagmi';
import { DataList, NumberFormat, Tag, formatterUtils, type IDataListItemProps } from '../../../../../core';
import { type ICompositeAddress } from '../../../../types';
import { addressUtils } from '../../../../utils';
+import { useGukModulesContext } from '../../../gukModulesProvider';
import { MemberAvatar } from '../../../member';
-import { useOdsModulesContext } from '../../../odsModulesProvider';
import { voteIndicatorToTagVariant, type VoteIndicator } from '../../voteUtils';
export type IVoteDataListItemStructureProps = IDataListItemProps & {
@@ -34,7 +34,7 @@ export const VoteDataListItemStructure: React.FC = (props) => {
const { proposalTitle, proposalId, voteIndicator, date, confirmationLabel, className, ...otherProps } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
return (
({
@@ -25,9 +25,9 @@ describe('
+
+
);
};
diff --git a/src/modules/components/wallet/wallet.tsx b/src/modules/components/wallet/wallet.tsx
index f986ec7ac..05165689c 100644
--- a/src/modules/components/wallet/wallet.tsx
+++ b/src/modules/components/wallet/wallet.tsx
@@ -3,8 +3,8 @@ import { useEnsName } from 'wagmi';
import { StateSkeletonBar } from '../../../core';
import { type ICompositeAddress, type IWeb3ComponentProps } from '../../types';
import { addressUtils } from '../../utils';
+import { useGukModulesContext } from '../gukModulesProvider';
import { MemberAvatar } from '../member';
-import { useOdsModulesContext } from '../odsModulesProvider';
export interface IWalletProps extends React.ButtonHTMLAttributes, IWeb3ComponentProps {
/**
@@ -16,7 +16,7 @@ export interface IWalletProps extends React.ButtonHTMLAttributes = (props) => {
const { user, className, chainId, wagmiConfig, ...otherProps } = props;
- const { copy } = useOdsModulesContext();
+ const { copy } = useGukModulesContext();
const { data: ensName, isLoading: isEnsLoading } = useEnsName({
address: user != null ? addressUtils.getChecksum(user.address) : undefined,
diff --git a/src/modules/index.mdx b/src/modules/index.mdx
index 718b04c3c..8129bc2d2 100644
--- a/src/modules/index.mdx
+++ b/src/modules/index.mdx
@@ -5,15 +5,15 @@ import LinkTo from '@storybook/addon-links/react';
# Modules
-The `Modules` package of the Aragon ODS library includes all the components and utilties that are web3 specific and / or
-handle DAO business logic.
+The `Modules` package of the Aragon Governance UI Kit library includes all the components and utilties that are web3
+specific and / or handle DAO business logic.
Check the documentation and usage of the modules components and utilities under the `/components` and `/utilities`
sub-folders.
## Usage
-In order to use the ODS Modules components, make sure to:
+In order to use the GovKit Modules components, make sure to:
- Install the required packages:
@@ -27,15 +27,15 @@ In order to use the ODS Modules components, make sure to:
npm install viem wagmi @tanstack/reat-query
```
-- Wrap your application using the `{/** ... */} ;
+ return {/** ... */} ;
}
```
- Refer to the [OdsModulesProvider doc](/docs/modules-components-odsmodulesprovider--docs) for further details about
+ Refer to the [GukModulesProvider doc](/docs/modules-components-gukmodulesprovider--docs) for further details about
the provider.
diff --git a/src/theme/index.mdx b/src/theme/index.mdx
index b33ddc9d9..40013a696 100644
--- a/src/theme/index.mdx
+++ b/src/theme/index.mdx
@@ -5,10 +5,10 @@ import LinkTo from '@storybook/addon-links/react';
# Theme
-The `Theme` package of the Aragon ODS library includes all the assets and design tokens needed to build the Aragon
-theme.
+The `Theme` package of the Aragon Governance UI Kit library includes all the assets and design tokens needed to build
+the Aragon theme.
-Explore the following pages to learn how to use and customise the theme of the Aragon ODS library:
+Explore the following pages to learn how to use and customise the theme of the Aragon Governance UI Kit library:
- [Design tokens](/docs/theme-tokens-documentation--docs)
- Fonts (SOON)
diff --git a/src/theme/tokens/index.mdx b/src/theme/tokens/index.mdx
index 44e7c66f3..77cfc810a 100644
--- a/src/theme/tokens/index.mdx
+++ b/src/theme/tokens/index.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
# Tokens
-The design tokens in the `@aragon/ods` UI library serve as the foundational elements for creating consistent and
+The design tokens in the `@aragon/gov-ui-kit` UI library serve as the foundational elements for creating consistent and
visually appealing interfaces. These tokens are implemented using
[CSS custom variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and, when integrated with Tailwind CSS,
they can be conveniently accessed through Tailwind classes. When used as a standalone library, design tokens should be
@@ -14,8 +14,8 @@ used as CSS custom properties.
### With Tailwind CSS
-In projects using both `@aragon/ods` and `Tailwind CSS`, design tokens are readily available as Tailwind classes. For
-instance:
+In projects using both `@aragon/gov-ui-kit` and `Tailwind CSS`, design tokens are readily available as Tailwind classes.
+For instance:
```html
@@ -25,12 +25,13 @@ instance:
### Standalone Usage
-When using `@aragon/ods` as a standalone library, design tokens are applied as CSS custom properties. For example:
+When using `@aragon/gov-ui-kit` as a standalone library, design tokens are applied as CSS custom properties. For
+example:
```css
.my-section {
- margin-top: var(--ods-space-2);
- color: var(--ods-color-primary-500);
+ margin-top: var(--guk-space-2);
+ color: var(--guk-color-primary-500);
}
```
diff --git a/src/theme/tokens/primitives/borderRadius.css b/src/theme/tokens/primitives/borderRadius.css
index 7482a25a0..115901d53 100644
--- a/src/theme/tokens/primitives/borderRadius.css
+++ b/src/theme/tokens/primitives/borderRadius.css
@@ -1,9 +1,9 @@
:root {
- --ods-border-rounded: 4px;
- --ods-border-rounded-lg: 8px;
- --ods-border-rounded-xl: 12px;
- --ods-border-rounded-2xl: 16px;
- --ods-border-rounded-3xl: 24px;
- --ods-border-rounded-full: 9999px;
- --ods-border-rounded-none: none;
+ --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;
}
diff --git a/src/theme/tokens/primitives/colors.css b/src/theme/tokens/primitives/colors.css
index 9b8fdfd08..a74ab3bb2 100644
--- a/src/theme/tokens/primitives/colors.css
+++ b/src/theme/tokens/primitives/colors.css
@@ -1,73 +1,73 @@
:root {
/* Primary */
- --ods-color-primary-50: #f5f8ff;
- --ods-color-primary-100: #c4d7ff;
- --ods-color-primary-200: #93b2ff;
- --ods-color-primary-300: #628cfe;
- --ods-color-primary-400: #3164fa;
- --ods-color-primary-500: #003bf5;
- --ods-color-primary-600: #0037d2;
- --ods-color-primary-700: #0031ad;
- --ods-color-primary-800: #002985;
- --ods-color-primary-900: #001f5c;
+ --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 */
- --ods-color-neutral-0: #ffffff;
- --ods-color-neutral-50: #f5f7fa;
- --ods-color-neutral-100: #e4e7eb;
- --ods-color-neutral-200: #cbd2d9;
- --ods-color-neutral-300: #9aa5b1;
- --ods-color-neutral-400: #7b8794;
- --ods-color-neutral-500: #616e7c;
- --ods-color-neutral-600: #52606d;
- --ods-color-neutral-700: #3e4c59;
- --ods-color-neutral-800: #323f4b;
- --ods-color-neutral-900: #1f2933;
+ --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 */
- --ods-color-info-100: #d1fdfa;
- --ods-color-info-200: #a4f9fb;
- --ods-color-info-300: #75e8f3;
- --ods-color-info-400: #52cfe7;
- --ods-color-info-500: #1eadd8;
- --ods-color-info-600: #1588b9;
- --ods-color-info-700: #0f669b;
- --ods-color-info-800: #09497d;
- --ods-color-info-900: #053467;
+ --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 */
- --ods-color-success-100: #f3fccc;
- --ods-color-success-200: #e4f99a;
- --ods-color-success-300: #ccef66;
- --ods-color-success-400: #b2e040;
- --ods-color-success-500: #8ecc0a;
- --ods-color-success-600: #74af07;
- --ods-color-success-700: #5c9205;
- --ods-color-success-800: #467603;
- --ods-color-success-900: #366101;
+ --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 */
- --ods-color-warning-100: #fff3d6;
- --ods-color-warning-200: #ffe4ad;
- --ods-color-warning-300: #ffd083;
- --ods-color-warning-400: #ffbe65;
- --ods-color-warning-500: #ff9f32;
- --ods-color-warning-600: #db7d24;
- --ods-color-warning-700: #b75e19;
- --ods-color-warning-800: #93430f;
- --ods-color-warning-900: #7a3009;
+ --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 */
- --ods-color-critical-100: #fee4d6;
- --ods-color-critical-200: #fec3ae;
- --ods-color-critical-300: #fd9a86;
- --ods-color-critical-400: #fb7467;
- --ods-color-critical-500: #f93636;
- --ods-color-critical-600: #d62736;
- --ods-color-critical-700: #b31b35;
- --ods-color-critical-800: #901132;
- --ods-color-critical-900: #770a30;
+ --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 */
- --ods-color-transparent: transparent;
+ --guk-color-transparent: transparent;
}
diff --git a/src/theme/tokens/primitives/colors.mdx b/src/theme/tokens/primitives/colors.mdx
index a5be64904..abd80037b 100644
--- a/src/theme/tokens/primitives/colors.mdx
+++ b/src/theme/tokens/primitives/colors.mdx
@@ -10,7 +10,7 @@ export const getColorConfig = (colorGroupName) => {
const rootStyles = getComputedStyle(document.documentElement);
return shades
- .map((shade) => ({ shade, value: rootStyles.getPropertyValue(`--ods-color-${colorGroupName}-${shade}`) }))
+ .map((shade) => ({ shade, value: rootStyles.getPropertyValue(`--guk-color-${colorGroupName}-${shade}`) }))
.filter((shade) => shade.value.trim() !== '');
}
@@ -38,7 +38,7 @@ export const ColorSwatch = ({ colorGroupName }) => {
{shade}
diff --git a/src/theme/tokens/primitives/shadows.css b/src/theme/tokens/primitives/shadows.css
index 83670e91b..c18c0af15 100644
--- a/src/theme/tokens/primitives/shadows.css
+++ b/src/theme/tokens/primitives/shadows.css
@@ -1,52 +1,52 @@
:root {
/* Neutral */
- --ods-shadow-neutral-sm: 0px 1px 2px 0px rgba(97, 110, 124, 0.05);
- --ods-shadow-neutral: 0px 1px 3px 0px rgba(97, 110, 124, 0.1), 0px 1px 2px -1px rgba(97, 110, 124, 0.1);
- --ods-shadow-neutral-md: 0px 4px 6px -1px rgba(82, 96, 109, 0.1), 0px 2px 4px -2px rgba(82, 96, 109, 0.1);
- --ods-shadow-neutral-lg: 0px 10px 15px -3px rgba(82, 96, 109, 0.1), 0px 4px 6px -4px rgba(82, 96, 109, 0.1);
- --ods-shadow-neutral-xl: 0px 20px 25px -5px rgba(82, 96, 109, 0.1), 0px 8px 10px -6px rgba(82, 96, 109, 0.1);
- --ods-shadow-neutral-2xl: 0px 25px 50px -12px rgba(82, 96, 109, 0.24);
+ --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 */
- --ods-shadow-primary-sm: 0px 1px 2px 0px rgba(0, 59, 245, 0.05);
- --ods-shadow-primary: 0px 1px 3px 0px rgba(0, 59, 245, 0.1), 0px 1px 2px -1px rgba(0, 59, 245, 0.1);
- --ods-shadow-primary-md: 0px 4px 6px -1px rgba(0, 59, 245, 0.1), 0px 2px 4px -2px rgba(0, 59, 245, 0.1);
- --ods-shadow-primary-lg: 0px 10px 15px -3px rgba(0, 59, 245, 0.1), 0px 4px 6px -4px rgba(0, 59, 245, 0.1);
- --ods-shadow-primary-xl: 0px 20px 25px -5px rgba(0, 59, 245, 0.1), 0px 8px 10px -6px rgba(0, 59, 245, 0.1);
- --ods-shadow-primary-2xl: 0px 25px 50px -12px rgba(0, 59, 245, 0.24);
+ --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 */
- --ods-shadow-success-sm: 0px 1px 2px 0px rgba(116, 175, 7, 0.05);
- --ods-shadow-success: 0px 1px 3px 0px rgba(116, 175, 7, 0.1), 0px 1px 2px -1px rgba(116, 175, 7, 0.1);
- --ods-shadow-success-md: 0px 4px 6px -1px rgba(116, 175, 7, 0.1), 0px 2px 4px -2px rgba(116, 175, 7, 0.1);
- --ods-shadow-success-lg: 0px 10px 15px -3px rgba(116, 175, 7, 0.1), 0px 4px 6px -4px rgba(116, 175, 7, 0.1);
- --ods-shadow-success-xl: 0px 20px 25px -5px rgba(116, 175, 7, 0.1), 0px 8px 10px -6px rgba(116, 175, 7, 0.1);
- --ods-shadow-success-2xl: 0px 25px 50px -12px rgba(116, 175, 7, 0.24);
+ --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 */
- --ods-shadow-warning-sm: 0px 1px 2px 0px rgba(219, 125, 36, 0.05);
- --ods-shadow-warning: 0px 1px 3px 0px rgba(219, 125, 36, 0.1), 0px 1px 2px -1px rgba(219, 125, 36, 0.1);
- --ods-shadow-warning-md: 0px 4px 6px -1px rgba(219, 125, 36, 0.1), 0px 2px 4px -2px rgba(219, 125, 36, 0.1);
- --ods-shadow-warning-lg: 0px 10px 15px -3px rgba(219, 125, 36, 0.1), 0px 4px 6px -4px rgba(219, 125, 36, 0.1);
- --ods-shadow-warning-xl: 0px 20px 25px -5px rgba(219, 125, 36, 0.1), 0px 8px 10px -6px rgba(219, 125, 36, 0.1);
- --ods-shadow-warning-2xl: 0px 25px 50px -12px rgba(219, 125, 36, 0.24);
+ --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 */
- --ods-shadow-critical-sm: 0px 1px 2px 0px rgba(214, 39, 54, 0.05);
- --ods-shadow-critical: 0px 1px 3px 0px rgba(214, 39, 54, 0.1), 0px 1px 2px -1px rgba(214, 39, 54, 0.1);
- --ods-shadow-critical-md: 0px 4px 6px -1px rgba(214, 39, 54, 0.1), 0px 2px 4px -2px rgba(214, 39, 54, 0.1);
- --ods-shadow-critical-lg: 0px 10px 15px -3px rgba(214, 39, 54, 0.1), 0px 4px 6px -4px rgba(214, 39, 54, 0.1);
- --ods-shadow-critical-xl: 0px 20px 25px -5px rgba(214, 39, 54, 0.1), 0px 8px 10px -6px rgba(214, 39, 54, 0.1);
- --ods-shadow-critical-2xl: 0px 25px 50px -12px rgba(214, 39, 54, 0.24);
+ --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 */
- --ods-shadow-info-sm: 0px 1px 2px 0px rgba(21, 136, 185, 0.05);
- --ods-shadow-info: 0px 1px 3px 0px rgba(21, 136, 185, 0.1), 0px 1px 2px -1px rgba(21, 136, 185, 0.1);
- --ods-shadow-info-md: 0px 4px 6px -1px rgba(21, 136, 185, 0.1), 0px 2px 4px -2px rgba(21, 136, 185, 0.1);
- --ods-shadow-info-lg: 0px 10px 15px -3px rgba(21, 136, 185, 0.1), 0px 4px 6px -4px rgba(21, 136, 185, 0.1);
- --ods-shadow-info-xl: 0px 20px 25px -5px rgba(21, 136, 185, 0.1), 0px 8px 10px -6px rgba(21, 136, 185, 0.1);
- --ods-shadow-info-2xl: 0px 25px 50px -12px rgba(21, 136, 185, 0.24);
+ --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 */
- --ods-shadow-none: 0px 0px #0000;
+ --guk-shadow-none: 0px 0px #0000;
}
diff --git a/src/theme/tokens/primitives/shadows.mdx b/src/theme/tokens/primitives/shadows.mdx
index 26ca872ae..485cce8f8 100644
--- a/src/theme/tokens/primitives/shadows.mdx
+++ b/src/theme/tokens/primitives/shadows.mdx
@@ -34,13 +34,13 @@ export const shadowVariants = {
let textColor;
if (variant === "primary") {
- backgroundColor = `var(--ods-color-${variant}-400)`;
- textColor = `var(--ods-color-${variant}-50)`;
+ backgroundColor = `var(--guk-color-${variant}-400)`;
+ textColor = `var(--guk-color-${variant}-50)`;
}else if (variant === 'neutral') {
- backgroundColor = `var(--ods-color-${variant}-0)`;
+ backgroundColor = `var(--guk-color-${variant}-0)`;
}else {
- backgroundColor = `var(--ods-color-${variant}-100)`;
- textColor = `var(--ods-color-${variant}-800)`;
+ backgroundColor = `var(--guk-color-${variant}-100)`;
+ textColor = `var(--guk-color-${variant}-800)`;
}
return (
@@ -57,7 +57,7 @@ export const shadowVariants = {
{` color-${variant}-600`}
-