@aragon/gov-ui-kit 1.6.0 → 1.8.0

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";

package/src/theme/utils/prose.css

@@ -0,0 +1,72 @@
+@plugin "@tailwindcss/typography";
+
+@utility prose {
+  h1 {
+    @apply mt-2 mb-10 text-2xl md:text-3xl;
+  }
+
+  h2 {
+    @apply mt-2 mb-8 text-xl md:text-2xl;
+  }
+
+  h3 {
+    @apply mt-2 mb-6 text-lg md:text-xl;
+  }
+
+  h4 {
+    @apply mt-0 mb-4 text-base md:text-lg;
+  }
+
+  h5 {
+    @apply mt-0 mb-2 text-sm md:text-base;
+  }
+
+  h6 {
+    @apply mt-0 mb-1 text-xs md:text-sm;
+  }
+
+  p {
+    @apply mt-0 mb-0 text-base md:text-lg;
+  }
+
+  a {
+    @apply text-primary-400 hover:text-primary-600 active:text-primary-800 no-underline;
+  }
+
+  strong {
+    @apply text-base text-neutral-500 md:text-lg;
+  }
+
+  em {
+    @apply text-base text-neutral-500 md:text-lg;
+  }
+
+  blockquote {
+    @apply shadow-neutral-md rounded-lg border border-neutral-200 bg-neutral-50 p-10;
+  }
+
+  pre {
+    @apply rounded-lg bg-neutral-900 text-neutral-50;
+  }
+
+  code {
+    @apply rounded-md bg-neutral-900 p-1 text-neutral-50 before:pl-1 before:content-[''] after:pr-1 after:content-[''];
+  }
+
+  img,
+  video {
+    @apply shadow-neutral-md overflow-hidden rounded-xl;
+  }
+
+  hr {
+    @apply mt-10 border border-neutral-200;
+  }
+}
+
+@utility prose-neutral {
+  --tw-prose-body: var(--color-neutral-500);
+  --tw-prose-headings: var(--color-neutral-800);
+  --tw-prose-lead: var(--color-neutral-600);
+  --tw-prose-links: var(--color-primary-400);
+  --tw-prose-quotes: var(--color-neutral-800);
+}

package/src/theme/utils/pseudoElements.css

@@ -0,0 +1,27 @@
+@utility calendar-icon-hidden {
+  &::-webkit-calendar-picker-indicator {
+    appearance: none;
+    display: none;
+  }
+
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    display: none;
+  }
+}
+
+@utility search-cancel-hidden {
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+}
+
+@utility spin-buttons-hidden {
+  &::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  &::-webkit-outer-spin-button {
+    appearance: none;
+  }
+}

package/dist/types/src/modules/components/proposal/proposalVoting/proposalVotingStageContext/index.d.ts

@@ -1 +0,0 @@
-export { ProposalVotingStageContextProvider, useProposalVotingStageContext, type IProposalVotingStageContext, } from './proposalVotingStageContext';

package/dist/types/src/modules/components/proposal/proposalVoting/proposalVotingStageContext/proposalVotingStageContext.d.ts

@@ -1,17 +0,0 @@
-import type { IProposalVotingStageProps } from '../proposalVotingStage/proposalVotingStage';
-export interface IProposalVotingStageContext extends Pick<IProposalVotingStageProps, 'startDate' | 'endDate'> {
-    /**
-     * List of plugin addresses to be displayed in the body summary list.
-     */
-    bodyList?: string[];
-    /**
-     * The active body to be displayed.
-     */
-    activeBody?: string;
-    /**
-     * Function to set the active body.
-     */
-    setActiveBody?: (id: string | undefined) => void;
-}
-export declare const ProposalVotingStageContextProvider: import("react").Provider<IProposalVotingStageContext | null>;
-export declare const useProposalVotingStageContext: () => IProposalVotingStageContext;

package/dist/types/src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/index.d.ts

@@ -1 +0,0 @@
-export { ProposalVotingStageStatus, type IProposalVotingStageStatusProps } from './proposalVotingStageStatus';

package/dist/types/src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.d.ts

@@ -1,18 +0,0 @@
-import type { ComponentProps } from 'react';
-import { ProposalVotingStatus } from '../../proposalUtils';
-export interface IProposalVotingStageStatusProps extends ComponentProps<'div'> {
-    /**
-     * Status of the proposal.
-     * @default ProposalVotingStatus.PENDING
-     */
-    status?: ProposalVotingStatus;
-    /**
-     * End date of the proposal in timestamp or ISO format.
-     */
-    endDate?: string | number;
-    /**
-     * Defines if the proposal is a multi-stage proposal.
-     */
-    isMultiStage?: boolean;
-}
-export declare const ProposalVotingStageStatus: React.FC<IProposalVotingStageStatusProps>;

package/tailwind.config.js

@@ -1,376 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ['./src/**/*.{jsx,ts,tsx,mdx}', './docs/**/*.{jsx,tsx,mdx}', '.storybook/*.{jsx,tsx}'],
-    theme: {
-        colors: {
-            primary: {
-                50: 'var(--guk-color-primary-50)',
-                100: 'var(--guk-color-primary-100)',
-                200: 'var(--guk-color-primary-200)',
-                300: 'var(--guk-color-primary-300)',
-                400: 'var(--guk-color-primary-400)',
-                500: 'var(--guk-color-primary-500)',
-                600: 'var(--guk-color-primary-600)',
-                700: 'var(--guk-color-primary-700)',
-                800: 'var(--guk-color-primary-800)',
-                900: 'var(--guk-color-primary-900)',
-            },
-            neutral: {
-                0: 'var(--guk-color-neutral-0)',
-                50: 'var(--guk-color-neutral-50)',
-                100: 'var(--guk-color-neutral-100)',
-                200: 'var(--guk-color-neutral-200)',
-                300: 'var(--guk-color-neutral-300)',
-                400: 'var(--guk-color-neutral-400)',
-                500: 'var(--guk-color-neutral-500)',
-                600: 'var(--guk-color-neutral-600)',
-                700: 'var(--guk-color-neutral-700)',
-                800: 'var(--guk-color-neutral-800)',
-                900: 'var(--guk-color-neutral-900)',
-            },
-            info: {
-                100: 'var(--guk-color-info-100)',
-                200: 'var(--guk-color-info-200)',
-                300: 'var(--guk-color-info-300)',
-                400: 'var(--guk-color-info-400)',
-                500: 'var(--guk-color-info-500)',
-                600: 'var(--guk-color-info-600)',
-                700: 'var(--guk-color-info-700)',
-                800: 'var(--guk-color-info-800)',
-                900: 'var(--guk-color-info-900)',
-            },
-            success: {
-                100: 'var(--guk-color-success-100)',
-                200: 'var(--guk-color-success-200)',
-                300: 'var(--guk-color-success-300)',
-                400: 'var(--guk-color-success-400)',
-                500: 'var(--guk-color-success-500)',
-                600: 'var(--guk-color-success-600)',
-                700: 'var(--guk-color-success-700)',
-                800: 'var(--guk-color-success-800)',
-                900: 'var(--guk-color-success-900)',
-            },
-            warning: {
-                100: 'var(--guk-color-warning-100)',
-                200: 'var(--guk-color-warning-200)',
-                300: 'var(--guk-color-warning-300)',
-                400: 'var(--guk-color-warning-400)',
-                500: 'var(--guk-color-warning-500)',
-                600: 'var(--guk-color-warning-600)',
-                700: 'var(--guk-color-warning-700)',
-                800: 'var(--guk-color-warning-800)',
-                900: 'var(--guk-color-warning-900)',
-            },
-            critical: {
-                100: 'var(--guk-color-critical-100)',
-                200: 'var(--guk-color-critical-200)',
-                300: 'var(--guk-color-critical-300)',
-                400: 'var(--guk-color-critical-400)',
-                500: 'var(--guk-color-critical-500)',
-                600: 'var(--guk-color-critical-600)',
-                700: 'var(--guk-color-critical-700)',
-                800: 'var(--guk-color-critical-800)',
-                900: 'var(--guk-color-critical-900)',
-            },
-            transparent: 'var(--guk-color-transparent)',
-        },
-        spacing: {
-            0: 'var(--guk-space-0)', // 0px
-            0.25: 'var(--guk-space-0-25)', // 1px
-            0.5: 'var(--guk-space-0-5)', // 2px
-            1: 'var(--guk-space-base)', // 4px
-            1.5: 'var(--guk-space-1-5)', // 6px
-            2: 'var(--guk-space-2)', // 8px
-            2.5: 'var(--guk-space-2-5)', // 10px
-            3: 'var(--guk-space-3)', // 12px
-            3.5: 'var(--guk-space-3-5)', // 14px
-            4: 'var(--guk-space-4)', // 16px
-            5: 'var(--guk-space-5)', // 20px
-            6: 'var(--guk-space-6)', // 24px
-            7: 'var(--guk-space-7)', // 28px
-            8: 'var(--guk-space-8)', // 32px
-            9: 'var(--guk-space-9)', // 36px
-            10: 'var(--guk-space-10)', // 40px
-            11: 'var(--guk-space-11)', // 44px
-            12: 'var(--guk-space-12)', // 48px
-            14: 'var(--guk-space-14)', // 56px
-            16: 'var(--guk-space-16)', // 64px
-            20: 'var(--guk-space-20)', // 80px
-            24: 'var(--guk-space-24)', // 96px
-            28: 'var(--guk-space-28)', // 112px
-            32: 'var(--guk-space-32)', // 128px
-            36: 'var(--guk-space-36)', // 144px
-            40: 'var(--guk-space-40)', // 160px
-            44: 'var(--guk-space-44)', // 176px
-            48: 'var(--guk-space-48)', // 192px
-            52: 'var(--guk-space-52)', // 208px
-            56: 'var(--guk-space-56)', // 224px
-            60: 'var(--guk-space-60)', // 240px
-            64: 'var(--guk-space-64)', // 256px
-            72: 'var(--guk-space-72)', // 288px
-            80: 'var(--guk-space-80)', // 320px
-            96: 'var(--guk-space-96)', // 384px
-        },
-        ringWidth: {
-            DEFAULT: '3px',
-        },
-        ringColor: {
-            primary: 'var(--guk-color-primary-200)',
-            success: 'var(--guk-color-success-200)',
-            warning: 'var(--guk-color-warning-200)',
-            critical: 'var(--guk-color-critical-200)',
-        },
-        ringOffsetWidth: {
-            DEFAULT: '2px',
-        },
-        borderRadius: {
-            DEFAULT: 'var(--guk-border-rounded)',
-            lg: 'var(--guk-border-rounded-lg)',
-            xl: 'var(--guk-border-rounded-xl)',
-            '2xl': 'var(--guk-border-rounded-2xl)',
-            '3xl': 'var(--guk-border-rounded-3xl)',
-            full: 'var(--guk-border-rounded-full)',
-            none: 'var(--guk-border-rounded-none)',
-        },
-        boxShadow: {
-            'neutral-sm': 'var(--guk-shadow-neutral-sm)',
-            neutral: 'var(--guk-shadow-neutral)',
-            'neutral-md': 'var(--guk-shadow-neutral-md)',
-            'neutral-ld': 'var(--guk-shadow-neutral-lg)',
-            'neutral-xl': 'var(--guk-shadow-neutral-xl)',
-            'neutral-2xl': 'var(--guk-shadow-neutral-2xl)',
-
-            'primary-sm': 'var(--guk-shadow-primary-sm)',
-            primary: 'var(--guk-shadow-primary)',
-            'primary-md': 'var(--guk-shadow-primary-md)',
-            'primary-lg': 'var(--guk-shadow-primary-lg)',
-            'primary-xl': 'var(--guk-shadow-primary-xl)',
-            'primary-2xl': 'var(--guk-shadow-primary-2xl)',
-
-            'success-sm': 'var(--guk-shadow-success-sm)',
-            success: 'var(--guk-shadow-success)',
-            'success-md': 'var(--guk-shadow-success-md)',
-            'success-lg': 'var(--guk-shadow-success-lg)',
-            'success-xl': 'var(--guk-shadow-success-xl)',
-            'success-2xl': 'var(--guk-shadow-success-2xl)',
-
-            'warning-sm': 'var(--guk-shadow-warning-sm)',
-            warning: 'var(--guk-shadow-warning)',
-            'warning-md': 'var(--guk-shadow-warning-md)',
-            'warning-lg': 'var(--guk-shadow-warning-lg)',
-            'warning-xl': 'var(--guk-shadow-warning-xl)',
-            'warning-2xl': 'var(--guk-shadow-warning-2xl)',
-
-            'critical-sm': 'var(--guk-shadow-critical-sm)',
-            critical: 'var(--guk-shadow-critical)',
-            'critical-md': 'var(--guk-shadow-critical-md)',
-            'critical-lg': 'var(--guk-shadow-critical-lg)',
-            'critical-xl': 'var(--guk-shadow-critical-xl)',
-            'critical-2xl': 'var(--guk-shadow-critical-2xl)',
-
-            'info-sm': 'var(--guk-shadow-info-sm)',
-            info: 'var(--guk-shadow-info)',
-            'info-md': 'var(--guk-shadow-info-md)',
-            'info-lg': 'var(--guk-shadow-info-lg)',
-            'info-xl': 'var(--guk-shadow-info-xl)',
-            'info-2xl': 'var(--guk-shadow-info-2xl)',
-
-            none: 'var(--guk-shadow-none)',
-        },
-        screens: {
-            sm: '640px',
-            md: '786px',
-            lg: '1024px',
-            xl: '1280px',
-            '2xl': '1536px',
-        },
-        fontFamily: {
-            sans: [`var(--guk-font-family)`],
-        },
-        fontSize: {
-            xs: 'var(--guk-font-size-xs)',
-            sm: 'var(--guk-font-size-sm)',
-            base: 'var(--guk-font-size-base)',
-            lg: 'var(--guk-font-size-lg)',
-            xl: 'var(--guk-font-size-xl)',
-            '2xl': 'var(--guk-font-size-2xl)',
-            '3xl': 'var(--guk-font-size-3xl)',
-            '4xl': 'var(--guk-font-size-4xl)',
-            '5xl': 'var(--guk-font-size-5xl)',
-        },
-        fontWeight: {
-            normal: 'var(--guk-font-weight-normal)',
-            semibold: 'var(--guk-font-weight-semibold)',
-        },
-        lineHeight: {
-            normal: 'var(--guk-line-height-normal)',
-            tight: 'var(--guk-line-height-tight)',
-            relaxed: 'var(--guk-line-height-relaxed)',
-        },
-        extend: {
-            animation: {
-                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)',
-                    },
-                },
-            },
-            backgroundImage: {
-                'modal-overlay': 'linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, #F5F7FA 100%)',
-                'modal-header': 'linear-gradient(180deg, #F5F7FA 0%, rgba(245, 247, 250, 0) 100%)',
-                'modal-footer': 'linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, #F5F7FA 100%)',
-            },
-            typography: ({ theme }) => ({
-                DEFAULT: {
-                    css: {
-                        '--tw-prose-body': theme('colors.neutral.500'),
-                        '--tw-prose-headings': theme('colors.neutral.800'),
-                        '--tw-prose-lead': theme('colors.neutral.600'),
-                        '--tw-prose-links': theme('colors.primary.400'),
-
-                        color: theme('colors.neutral.500'),
-                        maxWidth: 'none',
-
-                        h1: {
-                            marginTop: theme('spacing.2'),
-                            marginBottom: theme('spacing.10'),
-                            fontSize: theme('fontSize.2xl'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.3xl'),
-                            },
-                        },
-                        h2: {
-                            marginTop: theme('spacing.2'),
-                            marginBottom: theme('spacing.8'),
-                            fontSize: theme('fontSize.xl'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.2xl'),
-                            },
-                        },
-                        h3: {
-                            marginTop: theme('spacing.2'),
-                            marginBottom: theme('spacing.6'),
-                            fontSize: theme('fontSize.lg'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.xl'),
-                            },
-                        },
-                        h4: {
-                            marginBottom: theme('spacing.4'),
-                            fontSize: theme('fontSize.base'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.lg'),
-                            },
-                        },
-                        h5: {
-                            marginBottom: theme('spacing.2'),
-                            fontSize: theme('fontSize.sm'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.base'),
-                            },
-                        },
-                        h6: {
-                            marginBottom: theme('spacing.1'),
-                            fontSize: theme('fontSize.xs'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.sm'),
-                            },
-                        },
-                        p: {
-                            marginTop: '0',
-                            marginBottom: '0',
-                            fontSize: theme('fontSize.base'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.lg'),
-                            },
-                        },
-                        a: {
-                            color: theme('colors.primary.400'),
-                            textDecoration: 'none',
-                            '&:hover': {
-                                color: theme('colors.primary.600'),
-                            },
-                            '&:active': {
-                                color: theme('colors.primary.800'),
-                            },
-                        },
-                        strong: {
-                            fontSize: theme('fontSize.base'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.lg'),
-                            },
-                            color: theme('colors.neutral.500'),
-                        },
-                        em: {
-                            fontSize: theme('fontSize.base'),
-                            '@screen md': {
-                                fontSize: theme('fontSize.lg'),
-                            },
-                            color: theme('colors.neutral.500'),
-                        },
-                        blockquote: {
-                            borderRadius: theme('borderRadius.lg'),
-                            border: `1px solid ${theme('colors.neutral.200')}`,
-                            backgroundColor: theme('colors.neutral.50'),
-                            padding: theme('spacing.10'),
-                            boxShadow: theme('boxShadow.md'),
-                        },
-                        pre: {
-                            borderRadius: theme('borderRadius.lg'),
-                            backgroundColor: theme('colors.neutral.900'),
-                            color: theme('colors.neutral.50'),
-                        },
-                        code: {
-                            backgroundColor: theme('colors.neutral.900'),
-                            color: theme('colors.neutral.50'),
-                            padding: theme('spacing.1'),
-                            'border-radius': '0.25rem',
-                        },
-                        'code::before': {
-                            content: '""',
-                            'padding-left': '0.25rem',
-                        },
-                        'code::after': {
-                            content: '""',
-                            'padding-right': '0.25rem',
-                        },
-                        img: {
-                            overflow: 'hidden',
-                            borderRadius: theme('borderRadius.xl'),
-                            boxShadow: theme('boxShadow.md'),
-                        },
-                        video: {
-                            overflow: 'hidden',
-                            borderRadius: theme('borderRadius.xl'),
-                            boxShadow: theme('boxShadow.md'),
-                        },
-                        hr: {
-                            marginTop: theme('spacing.10'),
-                            borderColor: theme('colors.neutral.200'),
-                        },
-                    },
-                },
-            }),
-        },
-    },
-    plugins: [
-        require('@tailwindcss/typography'),
-        require('tailwindcss/plugin')(({ addVariant }) => {
-            addVariant('search-cancel', '&::-webkit-search-cancel-button');
-            addVariant('calendar-icon', ['&::-webkit-calendar-picker-indicator', '&::-webkit-inner-spin-button']);
-            addVariant('spin-buttons', ['&::-webkit-inner-spin-button', '&::-webkit-outer-spin-button']);
-        }),
-    ],
-};