From 132b676ff792b17796f95049c6d5a6ac511046c7 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Fri, 5 Jan 2024 11:54:39 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20Toast=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This component allows to create dynamic Toast appearing at the bottom of the screen for few seconds. --- .changeset/sixty-actors-poke.md | 5 + .../src/components/Toast/ToastProvider.tsx | 145 ++++++++++++++++ .../react/src/components/Toast/index.scss | 153 +++++++++++++++++ .../react/src/components/Toast/index.spec.tsx | 162 ++++++++++++++++++ .../src/components/Toast/index.stories.tsx | 120 +++++++++++++ packages/react/src/components/Toast/index.tsx | 120 +++++++++++++ packages/react/src/components/Toast/tokens.ts | 13 ++ packages/react/src/cunningham-tokens.css | 7 + packages/react/src/cunningham-tokens.js | 2 +- packages/react/src/cunningham-tokens.scss | 9 + packages/react/src/cunningham-tokens.ts | 2 +- packages/react/src/index.scss | 1 + packages/react/src/index.ts | 2 + 13 files changed, 739 insertions(+), 2 deletions(-) create mode 100644 .changeset/sixty-actors-poke.md create mode 100644 packages/react/src/components/Toast/ToastProvider.tsx create mode 100644 packages/react/src/components/Toast/index.scss create mode 100644 packages/react/src/components/Toast/index.spec.tsx create mode 100644 packages/react/src/components/Toast/index.stories.tsx create mode 100644 packages/react/src/components/Toast/index.tsx create mode 100644 packages/react/src/components/Toast/tokens.ts diff --git a/.changeset/sixty-actors-poke.md b/.changeset/sixty-actors-poke.md new file mode 100644 index 0000000..29be81b --- /dev/null +++ b/.changeset/sixty-actors-poke.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +add Toast component diff --git a/packages/react/src/components/Toast/ToastProvider.tsx b/packages/react/src/components/Toast/ToastProvider.tsx new file mode 100644 index 0000000..4cf8ee4 --- /dev/null +++ b/packages/react/src/components/Toast/ToastProvider.tsx @@ -0,0 +1,145 @@ +import React, { PropsWithChildren, useContext, useMemo, useRef } from "react"; +import { Toast, ToastProps } from ":/components/Toast/index"; +import { tokens } from ":/cunningham-tokens"; +import { Queue } from ":/utils/Queue"; + +export enum ToastType { + INFO = "info", + SUCCESS = "success", + WARNING = "warning", + ERROR = "error", + NEUTRAL = "neutral", +} + +export interface ToastProviderContext { + toast: ( + message: string, + type?: ToastType, + options?: Partial>, + ) => void; +} + +const ToastContext = React.createContext( + undefined as any, +); + +export const useToastProvider = () => { + const context = useContext(ToastContext); + if (context === undefined) { + throw new Error("useToastProvider must be used within a ToastProvider."); + } + return context; +}; + +type ToastInterface = ToastProps & { + i: number; + message: string; +}; + +let toastsCounter = 1; +const DEFAULT_TOAST_DURATION = 6000; + +const getSlideInDuration = (): number => { + return parseInt( + tokens.themes.default.components.toast["slide-in-duration"].replace( + "ms", + "", + ), + 10, + ); +}; + +export const ToastProvider = ({ children }: PropsWithChildren) => { + const container = useRef(null); + const previousContainerHeight = useRef(0); + const [list, setList] = React.useState([]); + const queue = useRef(new Queue()); + + const context: ToastProviderContext = useMemo( + () => ({ + toast: (message, type = ToastType.NEUTRAL, options = {}) => { + // We want to wait for the previous toast to be added ( taking into account the animation ) + // before adding a new one, that's why we use a queue. + queue.current?.push( + () => + new Promise((resolve) => { + // We need to snapshot the value as the setList execution is async. + const currentIndex = toastsCounter; + toastsCounter += 1; + previousContainerHeight.current = container.current!.offsetHeight; + setList((currentList) => { + return [ + ...currentList, + { + ...options, + message, + i: currentIndex, + type, + duration: options?.duration ?? DEFAULT_TOAST_DURATION, + }, + ]; + }); + + setTimeout(() => { + // We consider that the toast is added when its animation is done. + resolve(); + }, getSlideInDuration()); + }), + ); + }, + }), + [container, previousContainerHeight, list], + ); + + const animateContainer = async () => { + // FLIP pattern: https://aerotwist.com/blog/flip-your-animations/ + // FIRST + const first = previousContainerHeight.current; + + // LAST + const last = container.current!.offsetHeight; + + // INVERT + const invert = last - first; + + // PLAY + container.current!.animate( + [ + { transform: `translateY(${invert}px)` }, + { transform: "translateY(0)" }, + ], + { + duration: getSlideInDuration(), + easing: "ease", + }, + ); + }; + + // We only want this to be triggered when an item gets ADDED to the list, not when + // it gets removed, that's why we use toastsCounter as a dependency and not only + // list. + React.useEffect(() => { + animateContainer(); + }, [toastsCounter]); + + return ( + + {children} +
+ {list.map((toast) => ( + { + setList((value) => { + return value.filter((t) => t.i !== toast.i); + }); + }} + {...toast} + > + {toast.message} + + ))} +
+ + ); +}; diff --git a/packages/react/src/components/Toast/index.scss b/packages/react/src/components/Toast/index.scss new file mode 100644 index 0000000..fe64bf2 --- /dev/null +++ b/packages/react/src/components/Toast/index.scss @@ -0,0 +1,153 @@ +@use "../../utils/responsive" as *; + +.c__toast__container { + position: fixed; + bottom: 0; + left: 0; + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 0.5rem; + padding-left: 3rem; + padding-bottom: 3rem; +} + +@include media(sm) { + .c__toast__container { + padding: 0.5rem; + right: 0; + + .c__toast { + width: 100%; + min-width: auto; + max-width: none; + } + } +} + +.c__toast { + border-radius: 4px; + box-shadow: 0 2px 6px 2px #0C1A2B26; + background-color: var(--c--components--toast--background-color); + min-width: 18rem; + max-width: 27rem; + overflow: hidden; + will-change: transform; + color: var(--c--components--toast--color); + font-weight: var(--c--components--toast--font-weight); + + &:not(.c__toast--no-animate) { + animation: slide-in var(--c--components--toast--slide-in-duration) ease; + } + + &--disappear:not(.c__toast--no-animate) { + animation: slide-out var(--c--components--toast--slide-out-duration) ease forwards; + } + + &__icon { + display: flex; + align-items: center; + width: 1.5rem; + height: 1.5rem; + justify-content: center; + flex-shrink: 0; + + span { + font-size: var(--c--components--toast--icon-size); + } + } + + &__content { + padding: 1rem; + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 0.5rem; + + &__buttons { + flex-shrink: 0; + } + + &__children { + flex-grow: 1; + } + } + + .c__progress-bar { + --c--progress--color: var(--c--theme--colors--greyscale-600); + } + + &--info { + .c__progress-bar { + --c--progress--color: var(--c--theme--colors--primary-500); + } + + .c__toast__icon { + color: var(--c--theme--colors--primary-600); + } + } + + &--success { + .c__progress-bar { + --c--progress--color: var(--c--theme--colors--success-500); + } + + .c__toast__icon { + color: var(--c--theme--colors--success-600); + } + } + + &--warning { + .c__progress-bar { + --c--progress--color: var(--c--theme--colors--warning-500); + } + + .c__toast__icon { + color: var(--c--theme--colors--warning-600); + } + } + + &--error { + .c__progress-bar { + --c--progress--color: var(--c--theme--colors--danger-500); + } + + .c__toast__icon { + color: var(--c--theme--colors--danger-600); + } + } + +} + +@keyframes slide-out { + from { + transform: translateX(0) + } + to { + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes fade-in { + from { + opacity: 0 + } +} + +@keyframes slide-in { + from { + transform: translateY(200px) + } +} + +.c__progress-bar { + height: var(--c--components--toast--progress-bar-height); + --c--progress--color: var(--c--theme--colors--primary-500); + + &__content { + height: 100%; + background-color: var(--c--progress--color); + } +} + diff --git a/packages/react/src/components/Toast/index.spec.tsx b/packages/react/src/components/Toast/index.spec.tsx new file mode 100644 index 0000000..8224e30 --- /dev/null +++ b/packages/react/src/components/Toast/index.spec.tsx @@ -0,0 +1,162 @@ +import React, { PropsWithChildren } from "react"; +import { + render, + screen, + waitFor, + waitForElementToBeRemoved, +} from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { within } from "@testing-library/dom"; +import { CunninghamProvider } from ":/components/Provider"; +import { ToastType, useToastProvider } from ":/components/Toast/ToastProvider"; +import { Button } from ":/components/Button"; + +describe("", () => { + const Wrapper = ({ children }: PropsWithChildren) => { + return {children}; + }; + + it("shows a toast when clicking on the button and disappears", async () => { + const Inner = () => { + const { toast } = useToastProvider(); + return ( + + ); + }; + + render(, { wrapper: Wrapper }); + + const user = userEvent.setup(); + const button = screen.getByText("Create toast"); + + // No toast displayed. + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + + await user.click(button); + + // Toast displayed. + const toast = await screen.findByRole("alert"); + expect(toast).toHaveTextContent("Toast content"); + + await waitForElementToBeRemoved(toast); + }); + + it("shows a toast with a primary button", async () => { + let flag = false; + const Inner = () => { + const { toast } = useToastProvider(); + return ( + + ); + }; + + render(, { wrapper: Wrapper }); + + const user = userEvent.setup(); + const button = screen.getByText("Create toast"); + + // No toast displayed. + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + + await user.click(button); + + // Toast displayed. + const toast = await screen.findByRole("alert"); + expect(toast).toHaveTextContent("Toast content"); + // Toast has a button. + const $button = within(toast).getByRole("button", { name: "Action" }); + + // Button is not clicked yet. + expect(flag).toBe(false); + await user.click($button); + // Button is clicked. + await waitFor(() => expect(flag).toBe(true)); + }); + it("shows a toast with custom buttons", async () => { + const Inner = () => { + const { toast } = useToastProvider(); + return ( + , + }) + } + > + Create toast + + ); + }; + + render(, { wrapper: Wrapper }); + + const user = userEvent.setup(); + const button = screen.getByText("Create toast"); + + // No toast displayed. + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + + await user.click(button); + + // Toast displayed. + const toast = await screen.findByRole("alert"); + expect(toast).toHaveTextContent("Toast content"); + // Toast has custom button. + within(toast).getByRole("button", { name: "Tertiary" }); + }); + + it.each([ + [ToastType.INFO, "info"], + [ToastType.SUCCESS, "task_alt"], + [ToastType.WARNING, "warning"], + [ToastType.ERROR, "cancel"], + [ToastType.NEUTRAL, undefined], + ])("shows a %s toast", async (type, iconName) => { + const Inner = () => { + const { toast } = useToastProvider(); + return ( + + ); + }; + + render(, { wrapper: Wrapper }); + + const user = userEvent.setup(); + const button = screen.getByText("Create toast"); + + // No toast displayed. + expect(screen.queryByRole("alert")).not.toBeInTheDocument(); + + await user.click(button); + + // Toast displayed. + const toast = await screen.findByRole("alert"); + expect(toast).toHaveTextContent("Toast content"); + if (iconName === undefined) { + const icon = document.querySelector(".c__toast__icon"); + expect(icon).not.toBeInTheDocument(); + } else { + const icon = document.querySelector(".c__toast__icon"); + expect(icon).toHaveTextContent(iconName); + } + }); +}); diff --git a/packages/react/src/components/Toast/index.stories.tsx b/packages/react/src/components/Toast/index.stories.tsx new file mode 100644 index 0000000..2570770 --- /dev/null +++ b/packages/react/src/components/Toast/index.stories.tsx @@ -0,0 +1,120 @@ +import { Meta, StoryObj } from "@storybook/react"; +import React, { useEffect } from "react"; +import { faker } from "@faker-js/faker"; +import { ProgressBar, Toast } from ":/components/Toast/index"; +import { Button } from ":/components/Button"; +import { ToastType, useToastProvider } from ":/components/Toast/ToastProvider"; + +const meta: Meta = { + title: "Components/Toast", + component: Toast, + args: { + children: "Corrupti vestigium aiunt aeneus demulceo consequatur.", + duration: 30000, + disableAnimate: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Demo: Story = { + render: () => { + const { toast } = useToastProvider(); + const TYPES = [ + ToastType.INFO, + ToastType.SUCCESS, + ToastType.WARNING, + ToastType.ERROR, + ToastType.NEUTRAL, + ]; + + useEffect(() => { + toast(faker.lorem.sentence({ min: 5, max: 10 }), ToastType.SUCCESS, { + primaryLabel: "Read more", + primaryOnClick: () => { + // eslint-disable-next-line no-alert + alert("Clicked here !"); + }, + }); + }, []); + + return ( +
+ +
+ ); + }, +}; + +export const Info: Story = { + args: { + type: ToastType.INFO, + }, +}; + +export const InfoWithButton: Story = { + args: { + type: ToastType.INFO, + primaryLabel: "Primary", + }, +}; + +export const InfoCustom: Story = { + args: { + type: ToastType.INFO, + actions: ( + <> + + + + ), + }, +}; + +export const Success: Story = { + args: { + type: ToastType.SUCCESS, + }, +}; + +export const Warning: Story = { + args: { + type: ToastType.WARNING, + }, +}; + +export const Error: Story = { + args: { + type: ToastType.ERROR, + }, +}; + +export const Neutral: Story = { + args: { + type: ToastType.NEUTRAL, + }, +}; + +export const ProgressBarExample: Story = { + render: () => { + return ( +
+ +
+ ); + }, +}; diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx new file mode 100644 index 0000000..bb8cfbc --- /dev/null +++ b/packages/react/src/components/Toast/index.tsx @@ -0,0 +1,120 @@ +import React, { + PropsWithChildren, + ReactNode, + useEffect, + useMemo, + useRef, +} from "react"; +import classNames from "classnames"; +import { ToastType } from ":/components/Toast/ToastProvider"; +import { iconFromType } from ":/components/Alert/Utils"; +import { Button, ButtonProps } from ":/components/Button"; + +export interface ToastProps extends PropsWithChildren { + duration: number; + type: ToastType; + onDelete?: () => void; + icon?: ReactNode; + primaryLabel?: string; + primaryOnClick?: ButtonProps["onClick"]; + primaryProps?: ButtonProps; + disableAnimate?: boolean; + actions?: ReactNode; +} + +export const Toast = (props: ToastProps) => { + const [animateDisappear, setAnimateDisappear] = React.useState(false); + const container = useRef(null); + const disappearTimeout = useRef(); + + // Register a timeout to remove the toast after the duration. + useEffect(() => { + if (props.disableAnimate) { + return; + } + disappearTimeout.current = setTimeout(async () => { + setAnimateDisappear(true); + disappearTimeout.current = undefined; + }, props.duration); + return () => { + if (disappearTimeout.current) { + clearTimeout(disappearTimeout.current); + } + }; + }, []); + + const removeAfterAnimation = async () => { + await Promise.allSettled( + container.current!.getAnimations().map((animation) => animation.finished), + ); + props.onDelete?.(); + }; + + // Remove the toast after the animation finishes. + useEffect(() => { + if (animateDisappear) { + removeAfterAnimation(); + } + }, [animateDisappear]); + + return ( +
+ +
+ {props.primaryLabel && ( +
+ +
+ )} + {props.actions} +
{props.children}
+ +
+
+ ); +}; + +export const ToastIcon = ({ type, ...props }: ToastProps) => { + const icon = useMemo(() => iconFromType(type), [type]); + if (props.icon) { + return props.icon; + } + if (!icon) { + return null; + } + return ( +
+ {icon} +
+ ); +}; + +export const ProgressBar = ({ duration }: { duration: number }) => { + const content = useRef(null); + + useEffect(() => { + content.current!.animate([{ width: "0%" }, { width: "100%" }], { + duration, + easing: "linear", + }); + }, []); + + return ( +
+
+
+ ); +}; diff --git a/packages/react/src/components/Toast/tokens.ts b/packages/react/src/components/Toast/tokens.ts new file mode 100644 index 0000000..65c61cc --- /dev/null +++ b/packages/react/src/components/Toast/tokens.ts @@ -0,0 +1,13 @@ +import { DefaultTokens } from "@openfun/cunningham-tokens"; + +export const tokens = (defaults: DefaultTokens) => { + return { + "slide-in-duration": "1000ms", + "slide-out-duration": "300ms", + "background-color": defaults.theme.colors["greyscale-100"], + color: defaults.theme.colors["greyscale-900"], + "font-weight": defaults.theme.font.weights.regular, + "icon-size": defaults.theme.font.sizes.l, + "progress-bar-height": "3px", + }; +}; diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index 6c101f0..cd7a2ee 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -112,6 +112,13 @@ --c--theme--breakpoints--lg: 992px; --c--theme--breakpoints--xl: 1200px; --c--theme--breakpoints--xxl: 1400px; + --c--components--toast--slide-in-duration: 1000ms; + --c--components--toast--slide-out-duration: 300ms; + --c--components--toast--background-color: var(--c--theme--colors--greyscale-100); + --c--components--toast--color: var(--c--theme--colors--greyscale-900); + --c--components--toast--font-weight: var(--c--theme--font--weights--regular); + --c--components--toast--icon-size: var(--c--theme--font--sizes--l); + --c--components--toast--progress-bar-height: 3px; --c--components--forms-textarea--font-weight: var(--c--theme--font--weights--regular); --c--components--forms-textarea--font-size: var(--c--theme--font--sizes--l); --c--components--forms-textarea--border-radius: 8px; diff --git a/packages/react/src/cunningham-tokens.js b/packages/react/src/cunningham-tokens.js index 680981a..75b6104 100644 --- a/packages/react/src/cunningham-tokens.js +++ b/packages/react/src/cunningham-tokens.js @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"1rem","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; +export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#FAFAFB","color":"#0C1A2B","font-weight":400,"icon-size":"1rem","progress-bar-height":"3px"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"1rem","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; diff --git a/packages/react/src/cunningham-tokens.scss b/packages/react/src/cunningham-tokens.scss index 9e034f7..a9865ce 100644 --- a/packages/react/src/cunningham-tokens.scss +++ b/packages/react/src/cunningham-tokens.scss @@ -134,6 +134,15 @@ $themes: ( ) ), 'components': ( + 'toast': ( + 'slide-in-duration': 1000ms, + 'slide-out-duration': 300ms, + 'background-color': #FAFAFB, + 'color': #0C1A2B, + 'font-weight': 400, + 'icon-size': 1rem, + 'progress-bar-height': 3px + ), 'forms-textarea': ( 'font-weight': 400, 'font-size': 1rem, diff --git a/packages/react/src/cunningham-tokens.ts b/packages/react/src/cunningham-tokens.ts index 680981a..75b6104 100644 --- a/packages/react/src/cunningham-tokens.ts +++ b/packages/react/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"1rem","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; +export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#FAFAFB","color":"#0C1A2B","font-weight":400,"icon-size":"1rem","progress-bar-height":"3px"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"1rem","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss index e50efe6..6781145 100644 --- a/packages/react/src/index.scss +++ b/packages/react/src/index.scss @@ -21,6 +21,7 @@ @use "./components/Loader"; @use "./components/Pagination"; @use "./components/Popover"; +@use "./components/Toast"; body { font-family: var(--c--theme--font--families--base); diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 0b6bbbd..29daf88 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -20,6 +20,8 @@ export * from "./components/Loader"; export * from "./components/Pagination"; export * from "./components/Popover"; export * from "./components/Provider"; +export * from "./components/Toast"; +export * from "./components/Toast/ToastProvider"; export type DefaultTokens = PartialNested; export const defaultTokens = tokens.themes.default;