diff --git a/.changeset/ninety-avocados-shout.md b/.changeset/ninety-avocados-shout.md new file mode 100644 index 0000000000..904cf75b43 --- /dev/null +++ b/.changeset/ninety-avocados-shout.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": minor +"@twilio-paste/core": minor +--- + +[Design Tokens] Update aliases and add new tokens for elevation foundations diff --git a/.changeset/selfish-bottles-argue.md b/.changeset/selfish-bottles-argue.md new file mode 100644 index 0000000000..a6c224bb2f --- /dev/null +++ b/.changeset/selfish-bottles-argue.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/in-page-navigation": minor +"@twilio-paste/core": minor +--- + +[InPageNavigation] modified vertical items to wrap text as opposed to using ellipses diff --git a/.changeset/tough-moles-film.md b/.changeset/tough-moles-film.md new file mode 100644 index 0000000000..467785d164 --- /dev/null +++ b/.changeset/tough-moles-film.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/ai-chat-log": minor +"@twilio-paste/core": minor +--- + +[AI Chat Log] added optional typewriter animation to AIChatMessageBody diff --git a/.github/workflows/on_pull_request_open.yml b/.github/workflows/on_pull_request_open.yml index 6c7c415904..b98077c9e4 100644 --- a/.github/workflows/on_pull_request_open.yml +++ b/.github/workflows/on_pull_request_open.yml @@ -20,9 +20,6 @@ jobs: # List of all teams for dsys team: "[Design Systems PD,design-systems,Design Systems Eng,Design Systems Eng Leads]" - - name: Debug in group - run: echo "${{ github.actor }} is team member ${{ steps.teamAffiliation.outputs.isTeamMember }}" - - name: Auto contribution labeler if: ${{ steps.teamAffiliation.outputs.isTeamMember == 'false' }} uses: actions/labeler@v5 diff --git a/apps/backend/package.json b/apps/backend/package.json index 7ed6989204..ef7b193cbc 100644 --- a/apps/backend/package.json +++ b/apps/backend/package.json @@ -9,6 +9,6 @@ "db:reset": "yarn supabase db reset" }, "devDependencies": { - "supabase": "^1.204.3" + "supabase": "^2.6.8" } } diff --git a/apps/backend/supabase/migrations/20230928013336_initial_schema.sql b/apps/backend/supabase/migrations/20230928013336_initial_schema.sql index 855cae57ff..17db7677c3 100644 --- a/apps/backend/supabase/migrations/20230928013336_initial_schema.sql +++ b/apps/backend/supabase/migrations/20230928013336_initial_schema.sql @@ -1,4 +1,4 @@ -create extension if not exists "vector" with schema "public" version '0.5.0'; +create extension if not exists "vector" with schema "public"; create sequence "public"."page_id_seq"; diff --git a/apps/backend/supabase/schema.gen.ts b/apps/backend/supabase/schema.gen.ts index c37ce9b7c5..d7c0e7c109 100644 --- a/apps/backend/supabase/schema.gen.ts +++ b/apps/backend/supabase/schema.gen.ts @@ -225,6 +225,19 @@ export type Database = { [_ in never]: never } Functions: { + binary_quantize: + | { + Args: { + "": string + } + Returns: unknown + } + | { + Args: { + "": unknown + } + Returns: unknown + } get_page_parents: { Args: { page_id: number @@ -236,18 +249,104 @@ export type Database = { meta: Json }[] } + halfvec_avg: { + Args: { + "": number[] + } + Returns: unknown + } + halfvec_out: { + Args: { + "": unknown + } + Returns: unknown + } + halfvec_send: { + Args: { + "": unknown + } + Returns: string + } + halfvec_typmod_in: { + Args: { + "": unknown[] + } + Returns: number + } + hnsw_bit_support: { + Args: { + "": unknown + } + Returns: unknown + } + hnsw_halfvec_support: { + Args: { + "": unknown + } + Returns: unknown + } + hnsw_sparsevec_support: { + Args: { + "": unknown + } + Returns: unknown + } hnswhandler: { Args: { "": unknown } Returns: unknown } + ivfflat_bit_support: { + Args: { + "": unknown + } + Returns: unknown + } + ivfflat_halfvec_support: { + Args: { + "": unknown + } + Returns: unknown + } ivfflathandler: { Args: { "": unknown } Returns: unknown } + l2_norm: + | { + Args: { + "": unknown + } + Returns: number + } + | { + Args: { + "": unknown + } + Returns: number + } + l2_normalize: + | { + Args: { + "": string + } + Returns: string + } + | { + Args: { + "": unknown + } + Returns: unknown + } + | { + Args: { + "": unknown + } + Returns: unknown + } match_discussions: { Args: { embedding: string @@ -320,6 +419,24 @@ export type Database = { count: number }[] } + sparsevec_out: { + Args: { + "": unknown + } + Returns: unknown + } + sparsevec_send: { + Args: { + "": unknown + } + Returns: string + } + sparsevec_typmod_in: { + Args: { + "": unknown[] + } + Returns: number + } upsert_story_and_create_story_render: { Args: { _storybook_id: string @@ -338,12 +455,19 @@ export type Database = { } Returns: string } - vector_dims: { - Args: { - "": string - } - Returns: number - } + vector_dims: + | { + Args: { + "": string + } + Returns: number + } + | { + Args: { + "": unknown + } + Returns: number + } vector_norm: { Args: { "": string diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index 8e2a1b4188..f1dd9df8bd 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -138,9 +138,9 @@ export const SITEMAP = [ "/components/input/", "/components/input/api", "/components/input/changelog", - "components/keyboard-key", - "components/keyboard-key/api", - "components/keyboard-key/changelog", + "/components/keyboard-key", + "/components/keyboard-key/api", + "/components/keyboard-key/changelog", "/components/label/", "/components/label/api", "/components/label/changelog", @@ -281,6 +281,7 @@ export const SITEMAP = [ "/foundations/content/content-checklist/", "/foundations/content/voice-and-tone/", "/foundations/content/word-list/", + "/foundations/elevation/", "/foundations/illustrations/", "/foundations/data-visualization/", "/foundations/spacing-and-layout/", @@ -340,7 +341,7 @@ export const SITEMAP = [ "/tokens/", ]; -const SITEMAP_CHUNKS: string[][] = []; +const SITEMAP_CHUNKS = []; const CHUNK_SIZE = 25; for (let i = 0, len = SITEMAP.length; i < len; i += CHUNK_SIZE) { diff --git a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx index ef51fe17df..d59add5634 100644 --- a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx +++ b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx @@ -4,6 +4,7 @@ import type { HTMLPasteProps } from "@twilio-paste/types"; import * as React from "react"; import { AIMessageContext } from "./AIMessageContext"; +import { useAnimatedText } from "./utils"; const Sizes: Record = { default: { @@ -35,11 +36,59 @@ export interface AIChatMessageBodyProps extends HTMLPasteProps<"div"> { * @memberof AIChatMessageBodyProps */ size?: "default" | "fullScreen"; + /** + * Whether the text should be animated with type writer effect + * + * @default false + * @type {boolean} + * @memberof AIChatMessageBodyProps + */ + animated?: boolean; + /** + * A callback when the animation is started + * + * @default false + * @type {() => void} + * @memberof AIChatMessageBodyProps + */ + onAnimationStart?: () => void; + /** + * A callback when the animation is complete + * + * @default false + * @type {() => void} + * @memberof AIChatMessageBodyProps + */ + onAnimationEnd?: () => void; } export const AIChatMessageBody = React.forwardRef( - ({ children, size = "default", element = "AI_CHAT_MESSAGE_BODY", ...props }, ref) => { + ( + { + children, + size = "default", + element = "AI_CHAT_MESSAGE_BODY", + animated = false, + onAnimationEnd, + onAnimationStart, + ...props + }, + ref, + ) => { const { id } = React.useContext(AIMessageContext); + const [showAnimation] = React.useState(animated && children !== undefined); + const animationSpeed = size === "fullScreen" ? 8 : 10; + const { animatedChildren, isAnimating } = useAnimatedText(children, animationSpeed, showAnimation); + + React.useEffect(() => { + if (onAnimationStart && animated && isAnimating) { + onAnimationStart(); + } + + if (animated && !isAnimating && onAnimationEnd) { + onAnimationEnd(); + } + }, [isAnimating, showAnimation]); return ( - {children} + {animatedChildren} ); }, diff --git a/packages/paste-core/components/ai-chat-log/src/utils.tsx b/packages/paste-core/components/ai-chat-log/src/utils.tsx new file mode 100644 index 0000000000..92adfe94b4 --- /dev/null +++ b/packages/paste-core/components/ai-chat-log/src/utils.tsx @@ -0,0 +1,79 @@ +import React, { useEffect, useState } from "react"; + +// Hook to animate text content of React elements +export const useAnimatedText = ( + children: React.ReactNode, + speed = 10, + enabled = true, +): { animatedChildren: React.ReactNode; isAnimating: boolean } => { + const [animatedChildren, setAnimatedChildren] = useState(); + const [textIndex, setTextIndex] = useState(0); + + // Effect to increment textIndex at a specified speed + useEffect(() => { + const interval = setInterval(() => { + setTextIndex((prevIndex) => prevIndex + 1); + }, speed); + + return () => clearInterval(interval); + }, [speed]); + + // Function to calculate the total length of text within nested elements + const calculateTotalTextLength = (nodes: React.ReactNode): number => { + let length = 0; + React.Children.forEach(nodes, (child) => { + if (typeof child === "string") { + length += child.length; + } else if (React.isValidElement(child)) { + length += calculateTotalTextLength(child.props.children); + } + }); + return length; + }; + + // Function to recursively clone children and apply text animation + const cloneChildren = (nodes: React.ReactNode, currentIndex: number): React.ReactNode => { + let currentTextIndex = currentIndex; + return React.Children.map(nodes, (child) => { + if (typeof child === "string") { + // Only include text nodes if their animation has started + if (currentTextIndex > 0) { + const visibleText = child.slice(0, currentTextIndex); + currentTextIndex -= child.length; + return visibleText; + } + return null; + } else if (React.isValidElement(child)) { + const totalChildTextLength = calculateTotalTextLength(child.props.children); + // Only include elements if their text animation has started + if (currentTextIndex > 0) { + const clonedChild = React.cloneElement(child, {}, cloneChildren(child.props.children, currentTextIndex)); + currentTextIndex -= totalChildTextLength; + return clonedChild; + } else if (currentTextIndex === 0 && totalChildTextLength === 0) { + return child; + } + return null; + } + + return child; + }); + }; + + // Effect to update animated children based on the current text index + useEffect(() => { + if (enabled) { + const totaLength = calculateTotalTextLength(children); + if (textIndex <= totaLength) { + setAnimatedChildren(cloneChildren(children, textIndex)); + } + } + }, [children, textIndex, enabled]); + + return { + animatedChildren: enabled ? animatedChildren : children, + isAnimating: enabled && textIndex < calculateTotalTextLength(children), + }; +}; + +export default useAnimatedText; diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index f1883b2d1a..39f1312430 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -59,7 +59,7 @@ const BotMessage = (props): JSX.Element => { ) : ( Good Bot - {props.message as string} + {props.message as string} ); }; diff --git a/packages/paste-core/components/ai-chat-log/stories/parts.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/parts.stories.tsx index 0949285fac..0eedc41940 100644 --- a/packages/paste-core/components/ai-chat-log/stories/parts.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/parts.stories.tsx @@ -1,14 +1,34 @@ -// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable eslint-comments/disable-enable-pair */ +/* eslint-disable react/jsx-max-depth */ /* eslint-disable import/no-extraneous-dependencies */ +import { StoryFn } from "@storybook/react"; +import { Anchor } from "@twilio-paste/anchor"; +import { Blockquote, BlockquoteCitation, BlockquoteContent } from "@twilio-paste/blockquote/"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; +import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout"; +import { CodeBlock, CodeBlockHeader, CodeBlockWrapper } from "@twilio-paste/code-block"; +import { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure"; +import { Heading } from "@twilio-paste/heading"; +import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon"; import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon"; import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; import { UserIcon } from "@twilio-paste/icons/esm/UserIcon"; import { InlineCode } from "@twilio-paste/inline-code"; +import { ListItem, UnorderedList } from "@twilio-paste/list"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Separator } from "@twilio-paste/separator"; +import { + SidePanel, + SidePanelBody, + SidePanelButton, + SidePanelContainer, + SidePanelHeader, + SidePanelPushContentWrapper, +} from "@twilio-paste/side-panel"; import * as React from "react"; import { @@ -72,7 +92,7 @@ export const AIMessageLoading = (): React.ReactNode => { return ( - +

Pssst! The three rows have dynamic widths. Refresh to see it in action!

 @@ -153,7 +173,7 @@ export const FullAIMessage = (): React.ReactNode => { Good Bot - + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit nesciunt impedit repellat assumenda. @@ -204,3 +224,183 @@ export const FullAIMessage = (): React.ReactNode => { ); }; + +const rubyCode = `#!/usr/bin/ruby + +# Import the library. This is a really really long line that should be wrapped. +require 'tk' + +# Root window. +root = TkRoot.new { + title 'Push Me' + background '#111188' +} + +# Add a label to the root window. +lab = TkLabel.new(root) { + text "Hey there,\nPush a button!" + background '#3333AA' + foreground '#CCCCFF' +} +`; + +export const MessageBodyTypeWriterEnrichedText = (): React.ReactNode => { + return ( + + + With enriched text + + + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt + delectus fuga, necessitatibus eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat + quisquam itaque, earum sit nesciunt impedit repellat assumenda. new text,{" "} + + 434324 + + + Item 1 + Item 2 + Item 3 + + + + + ); +}; + +export const MessageBodyTypeWriterComplexComponents = (): React.ReactNode => { + return ( + + + With complex components + + + + + + This + is text that contains icons between elements + + + +
+ + With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for + the human experience as a whole. + + +
+ + + + Heads up! + This is some information you need to know. + + + + + Build a button + + + + + + + Between the World and Me by Ta-Nehisi Coates + + + But race is the child of racism, not the father. And the process of naming “the people” has never been a + matter of genealogy and physiognomy so much as one of hierarchy. Difference in hue and hair is old. But + the belief in the preeminence of hue and hair, the notion that these factors can correctly organize a + society and that they signify deeper attributes, which are indelible—this is the new idea at the heart + of these new people who have been brought up hopelessly, tragically, deceitfully, to believe that they + are white. + + + + + + + ); +}; + +export const MessageBodyTypeWriterFullscreen = (): React.ReactNode => { + return ( + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt + delectus fuga, necessitatibus eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat + quisquam itaque, earum sit nesciunt impedit repellat assumenda. new text,{" "} + + 434324 + + + Item 1 + Item 2 + Item 3 + + + ); +}; + +export const MessageBodyTypeWriterDefaultSidePanel: StoryFn = () => { + const [isOpen, setIsOpen] = React.useState(true); + return ( + + + + + + Assistant + + + + + + + + Good Bot + + Lorem ipsum dolor, sit amet consectetur adipisicing elit.{" "} + Deserunt delectus fuga, necessitatibus eligendiiure adipisci facilis exercitationem officiis dolorem + laborum, ex fugiat quisquam itaque, earum sit{" "} + nesciunt impedit repellat assumenda. new text,{" "} + + 434324 + + + Item 1 + Item 2 + Item 3 + + + + + + + + + + Toggle Side Panel + + + + ); +}; +MessageBodyTypeWriterDefaultSidePanel.parameters = { + padding: false, + a11y: { + config: { + rules: [ + { + /* + * Using position="relative" on SidePanel causes it to overflow other themes in stacked and side-by-side views, and therefore fail color contrast checks based on SidePanelBody's content. + * The DefaultVRT test below serves to test color contrast on the Side Panel component without this issue causing false failures. + */ + id: "color-contrast", + selector: "*:not(*)", + }, + ], + }, + }, +}; diff --git a/packages/paste-core/components/ai-chat-log/stories/scrollableSidePanel.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/scrollableSidePanel.stories.tsx new file mode 100644 index 0000000000..32f5cbda26 --- /dev/null +++ b/packages/paste-core/components/ai-chat-log/stories/scrollableSidePanel.stories.tsx @@ -0,0 +1,366 @@ +/* eslint-disable eslint-comments/disable-enable-pair */ +/* eslint-disable react/jsx-max-depth */ +/* eslint-disable import/no-extraneous-dependencies */ +import { StoryFn } from "@storybook/react"; +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; +import { Heading } from "@twilio-paste/heading"; +import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; +import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; +import { + $getRoot, + CLEAR_EDITOR_COMMAND, + COMMAND_PRIORITY_HIGH, + ClearEditorPlugin, + KEY_ENTER_COMMAND, + LexicalEditor, + useLexicalComposerContext, +} from "@twilio-paste/lexical-library"; +import { ListItem, UnorderedList } from "@twilio-paste/list"; +import { Separator } from "@twilio-paste/separator"; +import { + SidePanel, + SidePanelBody, + SidePanelButton, + SidePanelContainer, + SidePanelFooter, + SidePanelHeader, + SidePanelPushContentWrapper, +} from "@twilio-paste/side-panel"; +import * as React from "react"; + +import { + AIChat, + AIChatLog, + AIChatLogger, + AIChatMessage, + AIChatMessageActionCard, + AIChatMessageActionGroup, + AIChatMessageAuthor, + AIChatMessageBody, + AIChatMessageLoading, + useAIChatLogger, +} from "../src"; + +// eslint-disable-next-line import/no-default-export +export default { + title: "Components/AI Chat Log", + component: AIChatLog, +}; + +function getRandomInt(max: number): number { + return Math.floor(Math.random() * max); +} + +const BotMessage = (props: any): JSX.Element => { + const [isLoading, setIsLoading] = React.useState(true); + + setTimeout(() => { + setIsLoading(false); + }, 3000); + return isLoading ? ( + + Good Bot + { + setIsLoading(false); + }} + /> + + ) : ( + + Good Bot + + {props.message} + + + ); +}; + +const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }): null => { + const [editor] = useLexicalComposerContext(); + + const handleEnterKey = React.useCallback( + (event: KeyboardEvent) => { + const { shiftKey, ctrlKey } = event; + if (shiftKey || ctrlKey) return false; + event.preventDefault(); + event.stopPropagation(); + onKeyDown(); + editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + return true; + }, + [editor, onKeyDown], + ); + + React.useEffect(() => { + return editor.registerCommand(KEY_ENTER_COMMAND, handleEnterKey, COMMAND_PRIORITY_HIGH); + }, [editor, handleEnterKey]); + return null; +}; + +export const SidePanelScroll: StoryFn = () => { + const [isOpen, setIsOpen] = React.useState(true); + const [isAnimating, setIsAnimating] = React.useState(false); + const { aiChats, push } = useAIChatLogger( + { + variant: "user", + content: ( + + Gibby Radki + Hi, I am getting errors codes when sending an SMS. + + ), + }, + { + variant: "bot", + content: ( + + Good Bot + + Error codes can be returned from various parts of the process. What error codes are you encountering? + + + + + + + + + + + Is this helpful? + + + + + + ), + }, + { + variant: "user", + content: ( + + Gibby Radki + I am getting the error 30007 when attemptin to send a mass message. + + ), + }, + { + variant: "bot", + content: ( + + Good Bot + + This is an indicator that the message was filtered (blocked) by Twilio or by the carrier. This may be done + by Twilio for violating Twilio&aposs{" "} + + Messaging Policy + {" "} + or{" "} + + Acceptable Use Policy + + , or by a wireless carrier for violating carrier rules or regulations. + + + + Is this helpful? + + + + + + ), + }, + ); + const [message, setMessage] = React.useState(""); + const [mounted, setMounted] = React.useState(false); + const [userInterctedScroll, setUserInteractedScroll] = React.useState(false); + const loggerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + React.useEffect(() => { + setMounted(true); + }, []); + + const scrollToChatEnd = (): void => { + const scrollPosition: any = scrollerRef.current; + const scrollHeight: any = loggerRef.current; + scrollPosition?.scrollTo({ top: scrollHeight.scrollHeight, behavior: "smooth" }); + }; + + React.useEffect(() => { + if (!mounted || !loggerRef.current) return; + scrollToChatEnd(); + }, [aiChats, mounted]); + + const handleComposerChange = (editorState: any): void => { + editorState.read(() => { + const text = $getRoot().getTextContent(); + setMessage(text); + }); + }; + + const onAnimationEnd = (): void => { + setIsAnimating(false); + setUserInteractedScroll(false); + }; + + const onAnimationStart = (): void => { + setUserInteractedScroll(false); + setIsAnimating(true); + }; + + const userScrolled = (): void => setUserInteractedScroll(true); + + React.useEffect(() => { + scrollerRef.current?.addEventListener("wheel", userScrolled); + scrollerRef.current?.addEventListener("touchmove", userScrolled); + + const interval = setInterval(() => isAnimating && !userInterctedScroll && scrollToChatEnd(), 5); + return () => { + if (interval) clearInterval(interval); + scrollerRef.current?.removeEventListener("wheel", userScrolled); + scrollerRef.current?.removeEventListener("touchmove", userScrolled); + }; + }, [isAnimating, userInterctedScroll]); + + // eslint-disable-next-line storybook/prefer-pascal-case + const createNewMessage = (newMessage: any, forceBot?: boolean): Omit => { + const messageDirection = getRandomInt(2) === 1 && !forceBot ? "user" : "bot"; + + return { + variant: messageDirection, + content: + messageDirection === "user" ? ( + + Gibby Radki + {newMessage} + + ) : ( + + + + ), + }; + }; + + const submitMessage = (): void => { + if (message === "") return; + push(createNewMessage(message)); + }; + + const pushLargeBotMessage = (): void => { + push( + createNewMessage( + <> + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt + delectus fuga, necessitatibus eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat + quisquam itaque, earum sit nesciunt impedit repellat assumenda. new text,{" "} + + 434324 + + + Item 1 + Item 2 + Item 3 + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt + delectus fuga, necessitatibus eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat + quisquam itaque, earum sit nesciunt impedit repellat assumenda. new text,{" "} + + 434324 + + , + true, + ), + ); + }; + + const editorInstanceRef = React.useRef(null); + + return ( + + + + + + Assistant + + + + + + + + + + + { + throw e; + }, + }} + placeholder="Type here..." + ariaLabel="Chat input" + editorInstanceRef={editorInstanceRef} + onChange={handleComposerChange} + > + + + + + + + + + + + + Toggle Side Panel + + + + + ); +}; +SidePanelScroll.parameters = { + padding: false, + a11y: { + disable: true, + }, +}; diff --git a/packages/paste-core/components/ai-chat-log/stories/useAIChatLogger.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/useAIChatLogger.stories.tsx index 3c443c64b0..3fe85ba619 100644 --- a/packages/paste-core/components/ai-chat-log/stories/useAIChatLogger.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/useAIChatLogger.stories.tsx @@ -105,7 +105,7 @@ export const UseChatLogger: StoryFn = () => { {isBot ? "Good Bot" : "Gibby Radki"} - {message} + {message} ), }; diff --git a/packages/paste-core/components/ai-chat-log/type-docs.json b/packages/paste-core/components/ai-chat-log/type-docs.json index b5f4f87b59..972b106312 100644 --- a/packages/paste-core/components/ai-chat-log/type-docs.json +++ b/packages/paste-core/components/ai-chat-log/type-docs.json @@ -3186,6 +3186,13 @@ "required": false, "externalProp": true }, + "animated": { + "type": "boolean", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "Whether the text should be animated with type writer effect" + }, "aria-activedescendant": { "type": "string", "defaultValue": null, @@ -3688,10 +3695,11 @@ "externalProp": true }, "onAnimationEnd": { - "type": "AnimationEventHandler", - "defaultValue": null, + "type": "() => void", + "defaultValue": false, "required": false, - "externalProp": true + "externalProp": false, + "description": "A callback when the animation is complete" }, "onAnimationEndCapture": { "type": "AnimationEventHandler", @@ -3712,10 +3720,11 @@ "externalProp": true }, "onAnimationStart": { - "type": "AnimationEventHandler", - "defaultValue": null, + "type": "() => void", + "defaultValue": false, "required": false, - "externalProp": true + "externalProp": false, + "description": "A callback when the animation is started" }, "onAnimationStartCapture": { "type": "AnimationEventHandler", diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx index 054ec2aa04..147ccb11ad 100644 --- a/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx +++ b/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx @@ -63,6 +63,7 @@ const VERTICAL_BASE_STYLES: BoxStyleProps = { paddingRight: "space50", borderBottomRightRadius: "borderRadius30", borderTopRightRadius: "borderRadius30", + whiteSpace: "break-spaces", _focus: { boxShadow: "shadowFocusInset", outline: "none", diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index 724125ffcb..c987a126e0 100644 --- a/packages/paste-core/primitives/box/type-docs.json +++ b/packages/paste-core/primitives/box/type-docs.json @@ -727,7 +727,7 @@ "description": "Responsive prop for the CSS `background-attachment` property" }, "backgroundColor": { - "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }", + "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -958,7 +958,7 @@ "description": "Responsive prop for the CSS `bottom` property" }, "boxShadow": { - "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json index d3afa5f1de..24b82c3189 100644 --- a/packages/paste-core/primitives/sibling-box/type-docs.json +++ b/packages/paste-core/primitives/sibling-box/type-docs.json @@ -829,7 +829,7 @@ "description": "Responsive prop for the CSS `background-attachment` property" }, "backgroundColor": { - "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 56 more ... | { ...; }", + "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -1060,7 +1060,7 @@ "description": "Responsive prop for the CSS `bottom` property" }, "boxShadow": { - "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json index cbf3cb3985..ec4863fead 100644 --- a/packages/paste-core/primitives/text/type-docs.json +++ b/packages/paste-core/primitives/text/type-docs.json @@ -531,7 +531,7 @@ "description": "Responsive prop for the CSS `bottom` property" }, "boxShadow": { - "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 75 more ... | { ...; }", + "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap index da3a350385..ab2623772d 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -10,10 +10,14 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-background-destructive-stronger\\": \\"rgb(252, 207, 207)\\", \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\", + \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", + \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", + \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", \\"color-background-new\\": \\"rgb(56, 14, 120)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -50,16 +54,20 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\", + \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\", \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\", \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\", + \\"color-background-inverse-weak-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\", + \\"color-background-weaker\\": \\"rgb(18, 28, 45)\\", \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\", \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\", \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\", \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\", \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\", \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\", \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\", @@ -133,6 +141,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\", \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\", + \\"shadow-elevation-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\", @@ -143,9 +152,12 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", + \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\", \\"shadow-focus\\": \\"0 0 0 4px #606b85\\", \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\", @@ -154,6 +166,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", + \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #f6b1b1\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\", @@ -188,14 +201,18 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border\\": \\"0 0 0 1px #606b85\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\", \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\", + \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #1f304c\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -207,6 +224,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", + \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\", \\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", @@ -261,7 +279,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-gray-70\\": \\"rgb(75, 86, 113)\\", \\"color-gray-60\\": \\"rgb(96, 107, 133)\\", \\"color-gray-50\\": \\"rgb(136, 145, 170)\\", - \\"color-gray-40\\": \\"rgb(174, 178, 193)\\", + \\"color-gray-40\\": \\"rgb(142, 150, 174)\\", \\"color-brand\\": \\"rgb(0, 20, 137)\\", \\"color-gray-30\\": \\"rgb(202, 205, 216)\\", \\"color-gray-20\\": \\"rgb(225, 227, 234)\\", @@ -474,10 +492,14 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-background-destructive-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-background-primary-weaker\\": \\"rgb(204, 228, 255)\\", \\"color-background-destructive-weaker\\": \\"rgb(252, 207, 207)\\", + \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", + \\"color-background-body-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", + \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\", \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -487,7 +509,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-background-busy\\": \\"rgb(244, 124, 34)\\", \\"color-background-success\\": \\"rgb(20, 176, 83)\\", \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\", - \\"color-background-offline\\": \\"rgb(174, 178, 193)\\", + \\"color-background-offline\\": \\"rgb(142, 150, 174)\\", \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\", \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\", \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\", @@ -514,16 +536,20 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\", + \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\", \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\", \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\", + \\"color-background-inverse-weak-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\", + \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\", \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\", \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\", \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\", \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-background-brand-stronger\\": \\"rgb(6, 3, 58)\\", \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\", @@ -597,6 +623,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\", + \\"shadow-elevation-05\\": \\"0 0 0 1px #edeef2\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\", @@ -607,9 +634,12 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", + \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", @@ -618,6 +648,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", + \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", @@ -652,14 +683,18 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", + \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #edeef2\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -671,6 +706,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", + \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\", @@ -735,7 +771,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-gray-70\\": \\"rgb(75, 86, 113)\\", \\"color-gray-60\\": \\"rgb(96, 107, 133)\\", \\"color-gray-50\\": \\"rgb(136, 145, 170)\\", - \\"color-gray-40\\": \\"rgb(174, 178, 193)\\", + \\"color-gray-40\\": \\"rgb(142, 150, 174)\\", \\"color-brand\\": \\"rgb(0, 20, 137)\\", \\"color-gray-30\\": \\"rgb(202, 205, 216)\\", \\"color-gray-20\\": \\"rgb(225, 227, 234)\\", @@ -909,7 +945,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\", \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\", \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\", - \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\", + \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\", \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\", \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\", \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\", @@ -938,10 +974,14 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-background-destructive-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-background-primary-weaker\\": \\"rgb(204, 228, 255)\\", \\"color-background-destructive-weaker\\": \\"rgb(252, 207, 207)\\", + \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", + \\"color-background-body-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", + \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\", \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\", \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -951,7 +991,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-background-busy\\": \\"rgb(244, 124, 34)\\", \\"color-background-success\\": \\"rgb(20, 176, 83)\\", \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\", - \\"color-background-offline\\": \\"rgb(174, 178, 193)\\", + \\"color-background-offline\\": \\"rgb(142, 150, 174)\\", \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\", \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\", \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\", @@ -978,16 +1018,20 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\", + \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\", \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\", \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\", + \\"color-background-inverse-weak-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\", + \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\", \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\", \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\", \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\", \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-background-brand-stronger\\": \\"rgb(6, 3, 58)\\", \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\", @@ -1061,6 +1105,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\", + \\"shadow-elevation-05\\": \\"0 0 0 1px #edeef2\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\", @@ -1071,9 +1116,12 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", + \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7)\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", @@ -1082,6 +1130,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", + \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", @@ -1116,14 +1165,18 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", + \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #edeef2\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -1135,6 +1188,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", + \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\", @@ -1199,7 +1253,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-gray-70\\": \\"rgb(75, 86, 113)\\", \\"color-gray-60\\": \\"rgb(96, 107, 133)\\", \\"color-gray-50\\": \\"rgb(136, 145, 170)\\", - \\"color-gray-40\\": \\"rgb(174, 178, 193)\\", + \\"color-gray-40\\": \\"rgb(142, 150, 174)\\", \\"color-brand\\": \\"rgb(0, 20, 137)\\", \\"color-gray-30\\": \\"rgb(202, 205, 216)\\", \\"color-gray-20\\": \\"rgb(225, 227, 234)\\", @@ -1373,7 +1427,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\", \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\", \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\", - \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\", + \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\", \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\", \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\", \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\", @@ -1402,10 +1456,14 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-background-destructive-stronger\\": \\"rgb(252, 207, 207)\\", \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\", + \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", + \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", + \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new\\": \\"rgb(56, 14, 120)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\", @@ -1442,16 +1500,20 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\", + \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\", \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\", \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\", + \\"color-background-inverse-weak-elevation\\": \\"rgb(18, 28, 45)\\", \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\", + \\"color-background-weaker\\": \\"rgb(18, 28, 45)\\", \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\", \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\", \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\", \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\", \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\", \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\", @@ -1525,6 +1587,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow\\": \\"0 4px 16px 0 rgba(0, 0, 0, 0.5)\\", \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #c28e00\\", + \\"shadow-elevation-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #fccfcf\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\", @@ -1535,9 +1598,12 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\", + \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-border-strong\\": \\"0 0 0 1px #8891aa\\", \\"shadow-focus\\": \\"0 0 0 2px #121c2d, 0 0 0 3px #ffffff, 0 0 0 5px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\", @@ -1546,6 +1612,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\", + \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #f58a8a\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\", @@ -1580,14 +1647,18 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border\\": \\"0 0 0 1px #606b85\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\", \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\", + \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #1f304c\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -1599,6 +1670,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", + \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\", \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", @@ -1653,7 +1725,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-gray-70\\": \\"rgb(75, 86, 113)\\", \\"color-gray-60\\": \\"rgb(96, 107, 133)\\", \\"color-gray-50\\": \\"rgb(136, 145, 170)\\", - \\"color-gray-40\\": \\"rgb(174, 178, 193)\\", + \\"color-gray-40\\": \\"rgb(142, 150, 174)\\", \\"color-brand\\": \\"rgb(0, 20, 137)\\", \\"color-gray-30\\": \\"rgb(202, 205, 216)\\", \\"color-gray-20\\": \\"rgb(225, 227, 234)\\", @@ -1866,10 +1938,14 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-background-destructive-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-background-primary-weaker\\": \\"rgb(204, 228, 255)\\", \\"color-background-destructive-weaker\\": \\"rgb(252, 207, 207)\\", + \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\", + \\"color-background-body-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-warning\\": \\"rgb(244, 124, 34)\\", + \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\", \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\", \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\", \\"color-background-new\\": \\"rgb(245, 240, 252)\\", + \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\", \\"color-background-strong\\": \\"rgb(225, 227, 234)\\", \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\", \\"color-background-destructive\\": \\"rgb(199, 35, 35)\\", @@ -1879,7 +1955,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-background-busy\\": \\"rgb(244, 124, 34)\\", \\"color-background-success\\": \\"rgb(20, 176, 83)\\", \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\", - \\"color-background-offline\\": \\"rgb(174, 178, 193)\\", + \\"color-background-offline\\": \\"rgb(142, 150, 174)\\", \\"color-background-row-striped\\": \\"rgb(249, 249, 250)\\", \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\", \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\", @@ -1906,16 +1982,20 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\", \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\", \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\", + \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\", \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\", \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\", \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\", \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\", + \\"color-background-inverse-weak-elevation\\": \\"rgb(18, 28, 45)\\", \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\", + \\"color-background-weaker\\": \\"rgb(255, 255, 255)\\", \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\", \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\", \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\", \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\", \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\", \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\", @@ -1989,6 +2069,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow\\": \\"0 4px 16px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-border-bottom-inverse-weaker-inset\\": \\"inset 0 -1px 0 0 #394762\\", \\"shadow-border-subaccount\\": \\"0 0 0 1px #fff1b3\\", + \\"shadow-elevation-05\\": \\"0 0 0 1px #edeef2\\", \\"shadow-border-destructive-stronger\\": \\"0 0 0 1px #4a0b0b\\", \\"shadow-border-success-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-new-weaker\\": \\"0 0 0 1px #5817bd\\", @@ -1999,9 +2080,12 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-top-inverse-strongest\\": \\"0 -1px 0 #cce4ff\\", \\"shadow-border-bottom-weak\\": \\"0 1px 0 #cacdd8\\", \\"shadow-border-new-weaker\\": \\"0 0 0 1px #e7dcfa\\", + \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\", \\"shadow-low\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\", + \\"shadow-elevation-left-20\\": \\"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #fddcc4\\", + \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #edeef2\\", \\"shadow-border-strong\\": \\"0 0 0 1px #606b85\\", \\"shadow-focus\\": \\"0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff\\", \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\", @@ -2010,6 +2094,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-destructive\\": \\"0 0 0 1px #c72323\\", \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\", \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", + \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\", \\"shadow-border-error-strong\\": \\"0 0 0 1px #750c0c\\", \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\", \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", @@ -2021,7 +2106,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\", \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\", - \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #aeb2c1\\", + \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8e96ae\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #66b3ff\\", \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\", @@ -2044,14 +2129,18 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\", \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", + \\"shadow-elevation-top-05\\": \\"0 -1px 0 0 #edeef2\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\", + \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\", \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\", + \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\", \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\", \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\", \\"shadow-border-bottom-inverse-new-weaker\\": \\"0 1px 0 #5817bd\\", @@ -2063,6 +2152,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\", \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\", + \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\", \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\", @@ -2117,7 +2207,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-gray-70\\": \\"rgb(75, 86, 113)\\", \\"color-gray-60\\": \\"rgb(96, 107, 133)\\", \\"color-gray-50\\": \\"rgb(136, 145, 170)\\", - \\"color-gray-40\\": \\"rgb(174, 178, 193)\\", + \\"color-gray-40\\": \\"rgb(142, 150, 174)\\", \\"color-brand\\": \\"rgb(0, 20, 137)\\", \\"color-gray-30\\": \\"rgb(202, 205, 216)\\", \\"color-gray-20\\": \\"rgb(225, 227, 234)\\", @@ -2301,7 +2391,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\", \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\", \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\", - \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\", + \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\", \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\", \\"color-text-icon-warning\\": \\"rgb(195, 83, 35)\\", \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\", diff --git a/packages/paste-design-tokens/tokens/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml index 4b81813ef1..1078fd3a9b 100644 --- a/packages/paste-design-tokens/tokens/aliases/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml @@ -3,7 +3,7 @@ imports: - ./offset.yml - ./spacing.yml aliases: - shadow-elevation-0: "none" - shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-40} {!offset-0} {!palette-gray-100-transparent-10}" - shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-gray-100-transparent-20}" - shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-0} {!palette-gray-100-transparent-20}" + deprecated-shadow-elevation-0: "none" + deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-40} {!offset-0} {!palette-gray-100-transparent-10}" + deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-gray-100-transparent-20}" + deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-0} {!palette-gray-100-transparent-20}" diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml index 8a9df18c83..f524ee34f6 100644 --- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml +++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml @@ -29,14 +29,19 @@ aliases: palette-gray-0: "#ffffff" palette-gray-05: "#f9f9fa" palette-gray-10: "#f4f4f6" + palette-gray-15: "#edeef2" palette-gray-20: "#e1e3ea" palette-gray-30: "#cacdd8" - palette-gray-40: "#aeb2c1" + palette-gray-40: "#8e96ae" palette-gray-50: "#8891aa" + palette-gray-55: "#67728e" palette-gray-60: "#606b85" palette-gray-70: "#4b5671" + palette-gray-75: "#404f6e" palette-gray-80: "#394762" + palette-gray-85: "#25395b" palette-gray-90: "#1f304c" + palette-gray-95: "#19273E" palette-gray-100: "#121c2d" palette-gray-110: "#0F1621" @@ -52,7 +57,7 @@ aliases: palette-gray-0-transparent-90: "rgba(255, 255, 255, 0.9)" palette-gray-0-transparent-100: "rgba(255, 255, 255, 1)" - ## Grays transparent based on darkest gray + ## Grays transparent based on dark gray palette-gray-100-transparent-10: "rgba(18, 28, 45, 0.1)" palette-gray-100-transparent-20: "rgba(18, 28, 45, 0.2)" palette-gray-100-transparent-30: "rgba(18, 28, 45, 0.3)" @@ -64,6 +69,13 @@ aliases: palette-gray-100-transparent-90: "rgba(18, 28, 45, 0.9)" palette-gray-100-transparent-100: "rgba(18, 28, 45, 1)" + ## Grays transparent based on darkest gray + palette-gray-110-transparent-05: "rgba(15, 22, 33, 0.05)" + palette-gray-110-transparent-10: "rgba(15, 22, 33, 0.1)" + + ## Blacks transparent + palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" + ## Blues transparent based on darkest blue palette-blue-100-transparent-10: "rgba(6, 3, 58, 0.1)" palette-blue-100-transparent-20: "rgba(6, 3, 58, 0.2)" diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml index 801741936d..57c02860a2 100644 --- a/packages/paste-design-tokens/tokens/aliases/color.yml +++ b/packages/paste-design-tokens/tokens/aliases/color.yml @@ -11,4 +11,3 @@ aliases: sun: "#FF7A00" white: "#FFFFFF" white-accent: "#F6FBFE" - black-transparent-40: "rgba(0, 0, 0, 0.4)" diff --git a/packages/paste-design-tokens/tokens/aliases/offset.yml b/packages/paste-design-tokens/tokens/aliases/offset.yml index 753518ce58..bf1aec7bbf 100644 --- a/packages/paste-design-tokens/tokens/aliases/offset.yml +++ b/packages/paste-design-tokens/tokens/aliases/offset.yml @@ -14,3 +14,4 @@ aliases: offset-90: "32px" offset-negative-05: -1px offset-negative-20: -4px + offset-negative-60: -16px diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml index 3ae9a24caf..6dc9a25a20 100644 --- a/packages/paste-design-tokens/tokens/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/global/background-color.yml @@ -33,6 +33,9 @@ props: color-background-weak: value: "{!palette-gray-05}" comment: Weak background color used for containers. + color-background-weaker: + value: "{!palette-gray-0}" + comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus. # brand backgrounds color-background-brand: @@ -210,3 +213,26 @@ props: color-background-notification: value: "{!palette-red-60}" comment: Background color used for notifications. + + #elevation background + color-background-body-elevation: + value: "{!palette-gray-05}" + comment: Elevation token for color-background-body elements. + color-background-weak-elevation: + value: "{!palette-gray-05}" + comment: Elevation token for color-background-weak elements. + color-background-elevation: + value: "{!palette-gray-15}" + comment: Elevation token for color-background elements. + color-background-inverse-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background-inverse elements. + color-background-inverse-weak-elevation: + value: "{!palette-gray-85}" + comment: Elevation token for color-background-inverse-weak elements. + color-background-inverse-strong-elevation: + value: "{!palette-gray-75}" + comment: Elevation token for color-background-inverse-strong elements. + color-background-inverse-stronger-elevation: + value: "{!palette-gray-75}" + comment: Elevation token for color-background-inverse-stronger elements. diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index 67095948e7..45eaa882fc 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -4,19 +4,18 @@ global: imports: - ../aliases/box-shadow.yml - ../aliases/offset.yml - - ../aliases/color.yml props: shadow-high: - value: "{!shadow-elevation-30}" + value: "{!deprecated-shadow-elevation-30}" comment: High elevation default shadow. shadow: - value: "{!shadow-elevation-20}" + value: "{!deprecated-shadow-elevation-20}" comment: Default shadow. shadow-low: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Low elevation default shadow. shadow-card: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Shadow for cards. shadow-focus: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}" @@ -250,11 +249,43 @@ props: value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}" comment: Left shadow border for elements. shadow-left-inverse: - value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" + value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}" comment: Left shadow border for inverse elements. shadow-right: value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-gray-100-transparent-20}" comment: Right shadow border for elements. shadow-right-inverse: - value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" + value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}" comment: Right shadow border for inverse elements. + + # Elevation + shadow-elevation-05: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-15}" + comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-top-05: + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-15}" + comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-bottom-05: + value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-15}" + comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-inverse-05: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" + comment: Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-bottom-inverse-05: + value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" + comment: Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-right-inverse-05: + value: "{!offset-05} {!offset-0} {!offset-0} {!offset-0} {!palette-gray-90}" + comment: Accent shadows that subtly define the right edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-10: + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-10}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}" + comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them. + shadow-elevation-inverse-10: + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}" + comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them. + shadow-elevation-20: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" + comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them. + shadow-elevation-left-20: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}" + comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface. diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml index c64fff9e2b..15f410f617 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml @@ -2,9 +2,8 @@ imports: - ../../../aliases/box-shadow.yml - ../../../aliases/offset.yml - ./color-palette.yml - - ./color.yml aliases: - shadow-elevation-0: "none" - shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}" - shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!black-transparent-50}" - shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!black-transparent-50}" + deprecated-shadow-elevation-0: "none" + deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" + deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}" + deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}" diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml index 530c80ddd5..f062895d37 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml @@ -99,6 +99,18 @@ aliases: palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)" palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)" + ## Blacks transparent + palette-black-transparent-10: "rgba(0, 0, 0, 0.1)" + palette-black-transparent-20: "rgba(0, 0, 0, 0.2)" + palette-black-transparent-30: "rgba(0, 0, 0, 0.3)" + palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" + palette-black-transparent-50: "rgba(0, 0, 0, 0.5)" + palette-black-transparent-60: "rgba(0, 0, 0, 0.6)" + palette-black-transparent-70: "rgba(0, 0, 0, 0.7)" + palette-black-transparent-80: "rgba(0, 0, 0, 0.8)" + palette-black-transparent-90: "rgba(0, 0, 0, 0.9)" + palette-black-transparent-100: "rgba(0, 0, 0, 1)" + ## Greens palette-green-10: "#edfdf3" palette-green-20: "#d1fae0" diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml deleted file mode 100644 index 35682e1aec..0000000000 --- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color.yml +++ /dev/null @@ -1,14 +0,0 @@ -imports: - - ../../../aliases/color.yml - -aliases: - black-transparent-10: "rgba(0, 0, 0, 0.1)" - black-transparent-20: "rgba(0, 0, 0, 0.2)" - black-transparent-30: "rgba(0, 0, 0, 0.3)" - black-transparent-40: "rgba(0, 0, 0, 0.4)" - black-transparent-50: "rgba(0, 0, 0, 0.5)" - black-transparent-60: "rgba(0, 0, 0, 0.6)" - black-transparent-70: "rgba(0, 0, 0, 0.7)" - black-transparent-80: "rgba(0, 0, 0, 0.8)" - black-transparent-90: "rgba(0, 0, 0, 0.9)" - black-transparent-100: "rgba(0, 0, 0, 1)" diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml index 8de81872c3..a08aa9b979 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml @@ -3,7 +3,6 @@ global: category: background-color imports: - ../../../global/background-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # base background @@ -31,6 +30,9 @@ props: color-background-weak: value: "{!palette-gray-100}" comment: Weak default background color. + color-background-weaker: + value: "{!palette-gray-100}" + comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus. # brand backgrounds color-background-brand: @@ -191,3 +193,14 @@ props: color-background-decorative-40-weakest: value: "{!palette-purple-80}" comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens." + + #elevation background + color-background-body-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background-body elements. + color-background-weak-elevation: + value: "{!palette-gray-100}" + comment: Elevation token for color-background-weak elements. + color-background-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background elements. diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml index 47c7c0b7c0..d46ed7a693 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml @@ -3,7 +3,6 @@ global: category: border-color imports: - ../../../global/border-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: color-border-strong: diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml index b34336e5a2..f802ce9356 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml @@ -6,16 +6,16 @@ imports: - ../aliases/box-shadow.yml props: shadow-high: - value: "{!shadow-elevation-30}" + value: "{!deprecated-shadow-elevation-30}" comment: High elevation default shadow. shadow: - value: "{!shadow-elevation-20}" + value: "{!deprecated-shadow-elevation-20}" comment: Default shadow. shadow-low: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Low elevation default shadow. shadow-card: - value: "{!shadow-elevation-10}" + value: "{!deprecated-shadow-elevation-10}" comment: Shadow for cards. shadow-focus: value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-60}" @@ -179,8 +179,28 @@ props: # Left / Right shadow-left: - value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" + value: "{!offset-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}" comment: Left shadow border for elements. shadow-right: - value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!black-transparent-40}" + value: "{!offset-negative-20} {!offset-0} {!offset-40} {!offset-negative-20} {!palette-black-transparent-40}" comment: Right shadow border for elements. + + # Elevation + shadow-elevation-05: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-90}" + comment: Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-top-05: + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}" + comment: Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-bottom-05: + value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-90}" + comment: Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations. + shadow-elevation-10: + value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}" + comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them. + shadow-elevation-20: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}" + comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them. + shadow-elevation-left-20: + value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-black-transparent-20}" + comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface. diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml index bc2825bb23..d9ec03766d 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml @@ -3,7 +3,6 @@ global: category: text-color imports: - ../../../global/text-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # body text diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml index c64fff9e2b..15f410f617 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml @@ -2,9 +2,8 @@ imports: - ../../../aliases/box-shadow.yml - ../../../aliases/offset.yml - ./color-palette.yml - - ./color.yml aliases: - shadow-elevation-0: "none" - shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}" - shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!black-transparent-50}" - shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!black-transparent-50}" + deprecated-shadow-elevation-0: "none" + deprecated-shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!palette-black-transparent-40}" + deprecated-shadow-elevation-20: "{!offset-0} {!offset-20} {!offset-60} {!offset-0} {!palette-black-transparent-50}" + deprecated-shadow-elevation-30: "{!offset-0} {!offset-60} {!offset-80} {!offset-20} {!palette-black-transparent-50}" diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml index 530c80ddd5..b40682f9bc 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color-palette.yml @@ -99,6 +99,18 @@ aliases: palette-gray-80-transparent-90: "rgba(57, 71, 98, 0.9)" palette-gray-80-transparent-100: "rgba(57, 71, 98, 1)" + # Blacks transparent + palette-black-transparent-10: "rgba(0, 0, 0, 0.1)" + palette-black-transparent-20: "rgba(0, 0, 0, 0.2)" + palette-black-transparent-30: "rgba(0, 0, 0, 0.3)" + palette-black-transparent-40: "rgba(0, 0, 0, 0.4)" + palette-black-transparent-50: "rgba(0, 0, 0, 0.5)" + palette-black-transparent-60: "rgba(0, 0, 0, 0.6)" + palette-black-transparent-70: "rgba(0, 0, 0, 0.7)" + palette-black-transparent-80: "rgba(0, 0, 0, 0.8)" + palette-black-transparent-90: "rgba(0, 0, 0, 0.9)" + palette-black-transparent-100: "rgba(0, 0, 0, 1)" + ## Greens palette-green-10: "#edfdf3" palette-green-20: "#d1fae0" diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml deleted file mode 100644 index 35682e1aec..0000000000 --- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/color.yml +++ /dev/null @@ -1,14 +0,0 @@ -imports: - - ../../../aliases/color.yml - -aliases: - black-transparent-10: "rgba(0, 0, 0, 0.1)" - black-transparent-20: "rgba(0, 0, 0, 0.2)" - black-transparent-30: "rgba(0, 0, 0, 0.3)" - black-transparent-40: "rgba(0, 0, 0, 0.4)" - black-transparent-50: "rgba(0, 0, 0, 0.5)" - black-transparent-60: "rgba(0, 0, 0, 0.6)" - black-transparent-70: "rgba(0, 0, 0, 0.7)" - black-transparent-80: "rgba(0, 0, 0, 0.8)" - black-transparent-90: "rgba(0, 0, 0, 0.9)" - black-transparent-100: "rgba(0, 0, 0, 1)" diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml index 2f389d2da4..a0dfd4558a 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml @@ -3,7 +3,6 @@ global: category: background-color imports: - ../../../global/background-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # base background @@ -14,7 +13,7 @@ props: value: "#E6E8F0" comment: Strong default background color. color-background-stronger: - value: "#C1C4D6" + value: "{!palette-gray-30}" comment: Stronger default background color. color-background-strongest: value: "#696F8C" @@ -23,13 +22,13 @@ props: value: "#F9FAFC" comment: Weak default background color. color-background-inverse: - value: "#101840" + value: "{!palette-gray-100}" comment: Inverse background color for any container. Must be used on color-background-body-inverse. color-background-inverse-strong: - value: "#474D66" + value: "{!palette-gray-75}" comment: Strong inverse background color for any container. Must be used on color-background-body-inverse. color-background-inverse-stronger: - value: "#696F8C" + value: "{!palette-gray-60}" comment: Stronger inverse background color for any container. Must be used on color-background-body-inverse. # brand backgrounds @@ -61,7 +60,7 @@ props: value: "#FFFFFF" comment: Background color used for the main page body. color-background-body-inverse: - value: "#101840" + value: "{!palette-gray-100}" comment: Inverse background color used for the main page body. # status @@ -182,3 +181,14 @@ props: color-background-decorative-40-weakest: value: "F8F7FD" comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens." + + #elevation background + color-background-inverse-weak-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background-inverse-weak elements. + color-background-inverse-strong-elevation: + value: "{!palette-gray-70}" + comment: Elevation token for color-background-inverse-strong elements. + color-background-inverse-stronger-elevation: + value: "{!palette-gray-55}" + comment: Elevation token for color-background-inverse-stronger elements. diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml index 719b8281f9..721f3ae0c8 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml @@ -3,7 +3,6 @@ global: category: border-color imports: - ../../../global/border-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: color-border-strong: diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml index decdbae90f..6ab24ee943 100644 --- a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml +++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml @@ -3,7 +3,6 @@ global: category: text-color imports: - ../../../global/text-color.yml - - ../aliases/color.yml - ../aliases/color-palette.yml props: # body text diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml index 8203df2cb0..7613686f9b 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml @@ -11,6 +11,8 @@ props: color-background-inverse-strong: value: "{!palette-gray-90}" comment: Strong inverse background color for any container. Must be used on color-background-body-inverse. + color-background-weaker: + value: "{!palette-gray-100}" # brand backgrounds color-background-brand: @@ -61,3 +63,20 @@ props: color-background-decorative-40-weakest: value: "{!palette-purple-90}" comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens." + + #elevation background + color-background-body-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background-body elements. + color-background-weak-elevation: + value: "{!palette-gray-100}" + comment: Elevation token for color-background-weak elements. + color-background-elevation: + value: "{!palette-gray-95}" + comment: Elevation token for color-background elements. + color-background-inverse-weak-elevation: + value: "{!palette-gray-100}" + comment: Elevation token for color-background-inverse-weak elements. + color-background-inverse-strong-elevation: + value: "{!palette-gray-85}" + comment: Elevation token for color-background-inverse-strong elements. diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml index a728db6d75..8ad8c41a85 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml @@ -86,3 +86,11 @@ props: color-background-decorative-40-weakest: value: "{!palette-purple-05}" comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens." + + #elevation background + color-background-inverse-weak-elevation: + value: "{!palette-gray-100}" + comment: Elevation token for color-background-inverse-weak elements. + color-background-inverse-strong-elevation: + value: "{!palette-gray-85}" + comment: Elevation token for color-background-inverse-strong elements. diff --git a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap index f75e26094c..1e7b20ed73 100644 --- a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap +++ b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap @@ -22,7 +22,7 @@ Object { ], "credits": Object { "style": Object { - "color": "rgb(174, 178, 193)", + "color": "rgb(142, 150, 174)", }, }, "labels": Object { @@ -188,7 +188,7 @@ Object { ], "credits": Object { "style": Object { - "color": "rgb(174, 178, 193)", + "color": "rgb(142, 150, 174)", }, }, "labels": Object { diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json index bfa168268b..1c6ab6f097 100644 --- a/packages/paste-website/package.json +++ b/packages/paste-website/package.json @@ -175,7 +175,7 @@ "micromark-extension-mdxjs": "^2.0.0", "minimist": "^1.2.8", "next": "^14.0.0", - "openai": "^4.20.1", + "openai": "^4.79.1", "pretty-format": "^28.1.0", "prism-react-renderer": "^1.3.5", "react": "^18.0.0", diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx index f6e7b965e5..033d0e6c6d 100644 --- a/packages/paste-website/src/__tests__/colorGradient.test.tsx +++ b/packages/paste-website/src/__tests__/colorGradient.test.tsx @@ -4,14 +4,19 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20", const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"]; const aliasValues = [ "#121c2d", + "#19273E", "#1f304c", + "#25395b", "#394762", + "#404f6e", "#4b5671", "#606b85", + "#67728e", "#8891aa", - "#aeb2c1", + "#8e96ae", "#cacdd8", "#e1e3ea", + "#edeef2", "#f4f4f6", ]; diff --git a/packages/paste-website/src/assets/images/foundations/elevation/elevated-background-color-tokens.png b/packages/paste-website/src/assets/images/foundations/elevation/elevated-background-color-tokens.png new file mode 100644 index 0000000000..1874cf926c Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/elevated-background-color-tokens.png differ diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-1-accent-shadow.png b/packages/paste-website/src/assets/images/foundations/elevation/level-1-accent-shadow.png new file mode 100644 index 0000000000..f9280814d0 Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/level-1-accent-shadow.png differ diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-1-tonal-change.png b/packages/paste-website/src/assets/images/foundations/elevation/level-1-tonal-change.png new file mode 100644 index 0000000000..1a7f7b37bb Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/level-1-tonal-change.png differ diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png b/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png new file mode 100644 index 0000000000..2e73fc7d1b Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/level-2-accent-shadow.png differ diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-2-risen-shadow.png b/packages/paste-website/src/assets/images/foundations/elevation/level-2-risen-shadow.png new file mode 100644 index 0000000000..6b7c176543 Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/level-2-risen-shadow.png differ diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-3-overlay.png b/packages/paste-website/src/assets/images/foundations/elevation/level-3-overlay.png new file mode 100644 index 0000000000..4a151bee60 Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/level-3-overlay.png differ diff --git a/packages/paste-website/src/assets/images/foundations/elevation/level-3-risen-shadow.png b/packages/paste-website/src/assets/images/foundations/elevation/level-3-risen-shadow.png new file mode 100644 index 0000000000..c8b3a7becb Binary files /dev/null and b/packages/paste-website/src/assets/images/foundations/elevation/level-3-risen-shadow.png differ diff --git a/packages/paste-website/src/component-examples/AIChatLogExamples.ts b/packages/paste-website/src/component-examples/AIChatLogExamples.ts index ff9e831a7e..c6c68d2baa 100644 --- a/packages/paste-website/src/component-examples/AIChatLogExamples.ts +++ b/packages/paste-website/src/component-examples/AIChatLogExamples.ts @@ -712,3 +712,135 @@ const SystemError = () => { render( )`.trim(); + +export const animatedBotWithFeedback = ` +const AnimatedMessageWithFeedback = () => { + const [animated, setAnimated] = React.useState(true) + + const restart = () => { + setAnimated(false) + setTimeout(() => { + setAnimated(true) + }, 100) + } + + return ( + <> + + + + Good Bot + + I found multiple solutions for the issue with your environment variable, TWILIO_AUTH_TOKEN. Other helpful resources can be found at Twilio API Docs. + + + + Is this helpful? + + + + + + + + + + + + ); +}; + +render( + +)`.trim(); + +export const animatedBotScrollable = ` +const exampleAIResponseText = + "Twilio error codes are numeric codes returned by the Twilio API when an error occurs during a request, providing specific information about the problem encountered, such as invalid phone numbers, network issues, or authentication failures; they help developers identify and troubleshoot issues within their applications using Twilio services"; + +const AnimatedBotScrollable = () => { + const [isAnimating, setIsAnimating] = React.useState(false); + const [userInterctedScroll, setUserInteractedScroll] = React.useState(false); + const loggerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + const { aiChats, push } = useAIChatLogger({ + variant: "bot", + content: ( + + Good Bot + {exampleAIResponseText} + + ), + }); + + const scrollToChatEnd = () => { + const scrollPosition = scrollerRef.current; + const scrollHeight = loggerRef.current; + scrollPosition?.scrollTo({ top: scrollHeight.scrollHeight, behavior: "smooth" }); + }; + + const userScrolled = () => setUserInteractedScroll(true); + + const onAnimationEnd = () => { + setIsAnimating(false); + setUserInteractedScroll(false); + }; + + const onAnimationStart = () => { + setUserInteractedScroll(false); + setIsAnimating(true); + }; + + React.useEffect(() => { + scrollerRef.current?.addEventListener("wheel", userScrolled); + scrollerRef.current?.addEventListener("touchmove", userScrolled); + + const interval = setInterval(() => isAnimating && !userInterctedScroll && scrollToChatEnd(), 5); + + return () => { + if (interval) clearInterval(interval); + scrollerRef.current?.removeEventListener("wheel", userScrolled); + scrollerRef.current?.removeEventListener("touchmove", userScrolled); + }; + }, [isAnimating, userInterctedScroll, scrollerRef]); + + const pushLargeBotMessage = () => { + push({ + variant: "bot", + content: ( + + Good Bot + + {exampleAIResponseText} + + + ), + }); + }; + + return ( + + + + + + + ); +}; + +render( + +)`.trim(); diff --git a/packages/paste-website/src/component-examples/ElevationExamples.ts b/packages/paste-website/src/component-examples/ElevationExamples.ts new file mode 100644 index 0000000000..9fe2f7dbbc --- /dev/null +++ b/packages/paste-website/src/component-examples/ElevationExamples.ts @@ -0,0 +1,284 @@ +export const ElevatedBackgroundColorTokensExample = ` +const ElevatedBackgroundColorTokens = () => { + const TokensTemplate = ({ + backgroundColor, + backgroundColorElevated, + hasBorder, + backgroundColorBase, + backgroundColorElevation, + }) => { + return ( + + + + + + + + Base: + + + {backgroundColorBase} + + + Elevation: + + + {backgroundColorElevation} + + + + ); + }; + return ( + + + + + + + ); +}; + +render( + +) +`.trim(); + +export const ShadowTokensLevel1Example = ` +const ShadowTokensLevel1 = () => { + return ( + + + + + Shadow (accent) + + + $shadow-elevation-05 + + + + + + + + Shadow (accent) + + + $shadow-elevation-05 + + + + + + ); +}; + +render( + +) +`.trim(); + +export const ShadowTokensLevel2Example = ` +const ShadowTokensLevel2 = () => { + return ( + + + + + Shadow (accent) + + + $shadow-elevation-10 + + + + + + + + Shadow (accent) + + + $shadow-elevation-10 + + + + + + ); +}; + +render( + +) +`.trim(); + +export const ShadowTokensLevel3Example = ` +const ShadowTokensLevel3 = () => { + return ( + + + + + Shadow (accent) + + + $shadow-elevation-20 + + + + + + + + Shadow (accent) + + + $shadow-elevation-20 + + + + + + ); +}; + +render( + +) +`.trim(); diff --git a/packages/paste-website/src/component-examples/ElevationFoundationExamples.tsx b/packages/paste-website/src/component-examples/ElevationFoundationExamples.tsx new file mode 100644 index 0000000000..4157f90710 --- /dev/null +++ b/packages/paste-website/src/component-examples/ElevationFoundationExamples.tsx @@ -0,0 +1,30 @@ +import { ImageCaption } from "../components/ImageCaption"; + +export const ApplyingLevel1ImgCaption = (): JSX.Element => ( + + For example: The Side Panel pushes content at Level 0 but is categorized as Level 1 because it contains a task that + requires user focus while still relying on the background content. + +); + +export const CalloutExampleImgCaption = (): JSX.Element => ( + + For example: a Callout is typically placed inline with the background content and relies on that context for its + meaning. However, it uses a slight background change to subtly appear more prominent and make its information stand + out. + +); + +export const ApplyLevel2ImgCaption = (): JSX.Element => ( + + For example: a Top bar role is not to be on a high hierarchy but to have enough emphasis and differentiation to be + easily identified at any point of the experience. + +); + +export const PopoverExampleImgCaption = (): JSX.Element => ( + + For example: a Popover uses a subtle, sharp shadow to create the illusion of floating above the content. This adds + depth without dominating the interaction. + +); diff --git a/packages/paste-website/src/components/assistant/Assistant.tsx b/packages/paste-website/src/components/assistant/Assistant.tsx index 83282a9ed9..8cef8e2073 100644 --- a/packages/paste-website/src/components/assistant/Assistant.tsx +++ b/packages/paste-website/src/components/assistant/Assistant.tsx @@ -1,5 +1,5 @@ /* eslint-disable camelcase */ -import type { ThreadMessage } from "openai/resources/beta/threads/messages/messages"; +import type { Message } from "openai/resources/beta/threads/messages"; import * as React from "react"; import { @@ -19,14 +19,14 @@ import { AsssistantLayout } from "./AssistantLayout"; import { AssistantThreads } from "./AssistantThreads"; import { AssistantHeader } from "./AsststantHeader"; -const getMockMessage = ({ message }: { message: string }): ThreadMessage => { +const getMockMessage = ({ message, threadId }: { message: string; threadId: string }): Message => { const date = new Date(); return { id: "", object: "thread.message", created_at: Math.floor(date.getTime() / 1000), - thread_id: "xxxx", + thread_id: threadId, role: "user", content: [ { @@ -37,10 +37,14 @@ const getMockMessage = ({ message }: { message: string }): ThreadMessage => { }, }, ], - file_ids: [], assistant_id: null, run_id: null, metadata: {}, + attachments: null, + completed_at: null, + incomplete_at: null, + incomplete_details: null, + status: "incomplete", }; }; @@ -58,7 +62,7 @@ export const Assistant: React.FC = () => { const handleMessageCreation = (message: string, threadId: string): void => { // add the new user message to the store to optimistically render it whilst we wait for openAI to do its thing - addMessage(getMockMessage({ message })); + addMessage(getMockMessage({ message, threadId })); // Create a new "assistant run" on the thread so that openAI processes the new message and updates the thread with a response createAssistantRun.mutate( @@ -105,7 +109,7 @@ export const Assistant: React.FC = () => { * * @param {string} message */ - const handleCannedThreadCreation = (message: string): void => { + const handleThreadCreationWithMessage = (message: string): void => { createThreadMutation.mutate( {}, { @@ -130,11 +134,19 @@ export const Assistant: React.FC = () => { {threadsStore.selectedThreadID == null && ( - + )} {threadsStore.selectedThreadID != null && } - + { + if (!threadId) { + handleThreadCreationWithMessage(message); + } else { + handleMessageCreation(message, threadId); + } + }} + /> diff --git a/packages/paste-website/src/components/assistant/AssistantComposer.tsx b/packages/paste-website/src/components/assistant/AssistantComposer.tsx index 767fb2046d..3e1ad0b75d 100644 --- a/packages/paste-website/src/components/assistant/AssistantComposer.tsx +++ b/packages/paste-website/src/components/assistant/AssistantComposer.tsx @@ -14,7 +14,7 @@ import { useAssistantThreadsStore } from "../../stores/assistantThreadsStore"; import useStoreWithLocalStorage from "../../stores/useStore"; import { EnterKeySubmitPlugin } from "./EnterKeySubmitPlugin"; -export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, selectedThread: string) => void }> = ({ +export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, selectedThread?: string) => void }> = ({ onMessageCreation, }) => { const [message, setMessage] = React.useState(""); @@ -31,7 +31,7 @@ export const AssistantComposer: React.FC<{ onMessageCreation: (message: string, }; const submitMessage = (): void => { - if (message === "" || selectedThread == null) return; + if (message === "") return; onMessageCreation(message, selectedThread); }; diff --git a/packages/paste-website/src/components/assistant/AssistantMessage.tsx b/packages/paste-website/src/components/assistant/AssistantMessage.tsx index 5b22f59a9e..22861fac43 100644 --- a/packages/paste-website/src/components/assistant/AssistantMessage.tsx +++ b/packages/paste-website/src/components/assistant/AssistantMessage.tsx @@ -1,11 +1,11 @@ import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log"; -import { type ThreadMessage } from "openai/resources/beta/threads/messages"; +import { type Message } from "openai/resources/beta/threads/messages"; import * as React from "react"; import { formatTimestamp } from "../../utils/formatTimestamp"; import { AssistantMarkdown } from "./AssistantMarkdown"; -export const AssistantMessage: React.FC<{ threadMessage: ThreadMessage }> = ({ threadMessage }) => { +export const AssistantMessage: React.FC<{ threadMessage: Message }> = ({ threadMessage }) => { return ( diff --git a/packages/paste-website/src/components/assistant/UserMessage.tsx b/packages/paste-website/src/components/assistant/UserMessage.tsx index 21477ca2d4..c994f610f6 100644 --- a/packages/paste-website/src/components/assistant/UserMessage.tsx +++ b/packages/paste-website/src/components/assistant/UserMessage.tsx @@ -1,12 +1,12 @@ import { AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log"; import { UserIcon } from "@twilio-paste/icons/esm/UserIcon"; -import { type ThreadMessage } from "openai/resources/beta/threads/messages"; +import { type Message } from "openai/resources/beta/threads/messages"; import * as React from "react"; import { formatTimestamp } from "../../utils/formatTimestamp"; import { AssistantMarkdown } from "./AssistantMarkdown"; -export const UserMessage: React.FC<{ threadMessage: ThreadMessage }> = ({ threadMessage }) => { +export const UserMessage: React.FC<{ threadMessage: Message }> = ({ threadMessage }) => { return ( > = ({ onChange={onChange} data-cy="paste-docsearch-input" ref={inputRef} + autoComplete="off" /> diff --git a/packages/paste-website/src/components/tokens-list/TokensListFilter.tsx b/packages/paste-website/src/components/tokens-list/TokensListFilter.tsx index 0e0a3283a1..173bf2ef0c 100644 --- a/packages/paste-website/src/components/tokens-list/TokensListFilter.tsx +++ b/packages/paste-website/src/components/tokens-list/TokensListFilter.tsx @@ -46,7 +46,7 @@ export const TokensListFilter: React.FC> = (props) => ( const defaultTheme = "twilio"; const defaultFormat = "css"; +const hiddenTokens = { + "box-shadows": ["shadow", "shadow-low", "shadow-high", "shadow-card"], + "color-schemes": ["color-scheme"], +}; + const getTokenListByTheme = (theme: Themes): Tokens => { let tokenList: Tokens = TwilioThemeTokens.tokens; @@ -61,6 +66,19 @@ const getTokenListByTheme = (theme: Themes): Tokens => { tokenList = TwilioThemeTokens.tokens; break; } + + // Remove hidden tokens from tokenList + Object.keys(hiddenTokens).forEach((category) => { + const cat = category as keyof typeof hiddenTokens; + hiddenTokens[cat].forEach((token) => { + tokenList[cat].forEach((tokenObj) => { + if (tokenObj.name === token) { + tokenList[cat] = tokenList[cat].filter((item) => item.name !== token); + } + }); + }); + }); + return tokenList; }; diff --git a/packages/paste-website/src/pages/api/paste-assistant-message.ts b/packages/paste-website/src/pages/api/paste-assistant-message.ts index 0f9c0181c8..48f08fa276 100644 --- a/packages/paste-website/src/pages/api/paste-assistant-message.ts +++ b/packages/paste-website/src/pages/api/paste-assistant-message.ts @@ -29,7 +29,7 @@ const LOG_PREFIX = "[/api/paste-assistant-message]:"; async function createUserMessage({ threadId, message, -}: { threadId: string; message: string }): Promise { +}: { threadId: string; message: string }): Promise { return openai.beta.threads.messages.create(threadId, { role: "user", content: message }); } @@ -182,7 +182,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) /** * perform run on the assistant to process the newly added user message */ - let run = await openai.beta.threads.runs.create(threadId, { assistant_id: assistantID }); + let run = await openai.beta.threads.runs.create(threadId, { assistant_id: assistantID, model: "gpt-4o" }); /** * poll the run to see if it's complete or if the assistant need to call some "Functions" find it's status diff --git a/packages/paste-website/src/pages/api/paste-assistant-messages/[tid].ts b/packages/paste-website/src/pages/api/paste-assistant-messages/[tid].ts index 8aab8567ea..02f7d0844c 100644 --- a/packages/paste-website/src/pages/api/paste-assistant-messages/[tid].ts +++ b/packages/paste-website/src/pages/api/paste-assistant-messages/[tid].ts @@ -22,7 +22,7 @@ const LOG_PREFIX = "[/api/paste-assistant-messages/:tid]:"; async function getThreadMessages({ threadId, -}: { threadId: OpenAI.Beta.Thread["id"] }): Promise { +}: { threadId: OpenAI.Beta.Thread["id"] }): Promise { return openai.beta.threads.messages.list(threadId, { order: "asc" }); } diff --git a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx index feb662d0cb..21f6ace080 100644 --- a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx +++ b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx @@ -22,6 +22,7 @@ import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; import { HelpText } from "@twilio-paste/help-text"; import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon"; +import { ResetIcon } from "@twilio-paste/icons/esm/ResetIcon"; import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon"; import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; @@ -30,6 +31,7 @@ import { Paragraph } from "@twilio-paste/paragraph"; import { Stack } from "@twilio-paste/stack"; import { uid } from "@twilio-paste/uid-library"; + import Logo from "../../../assets/logo.svg"; import { SidebarCategoryRoutes } from "../../../constants"; @@ -58,11 +60,14 @@ import { messageGenerationError, sendingMessageError, systemError, + animatedBotScrollable } from "../../../component-examples/AIChatLogExamples"; import ComponentPageLayout from "../../../layouts/ComponentPageLayout"; import { getFeature, getNavigationData } from "../../../utils/api"; import { Text } from "@twilio-paste/text"; import { Alert } from "@twilio-paste/alert"; +import { Switch } from "@twilio-paste/switch"; +import { InlineCode } from "@twilio-paste/inline-code"; export default ComponentPageLayout; @@ -251,14 +256,14 @@ Actions can still be added in `AIChatMessageBody` which are returned from the AI {botWithBodyActions} -### Loading States +### Generating Messages + +#### Loading Use the `AIChatMessageLoading` component to indicate that the bot is typing or processing a response. During this time **no user input should be accepted**. No new messages should be added to a chat until the AI operation is finished processing. The SkeletonLoader lengths vary on each render to give a more natural pending message body interaction. -#### Loading - -#### Loading with Stop Button +##### Loading with Stop Button +#### Animating +The `AIChatMessageBody` component has an optional `animated` prop that can be used to apply a typewriter animation to the text. This should only be applied to the messages received from the AI. + +It also accepts `onAnimationStart` and `onAnimationEnd` props to trigger actions when the animation starts and ends allowing additional logic such as scrolling to be implemented. + + + {animatedBotScrollable} + + + ### Customizing Avatar `AIChatMessageAuthor` can be customized by passing an icon, image, or string to the `avatarIcon`, `avatarSrc`, or `avatarName` props. [Learn more about the API](/components/ai-chat-log/api#aichatmessageauthor). diff --git a/packages/paste-website/src/pages/foundations/elevation/index.mdx b/packages/paste-website/src/pages/foundations/elevation/index.mdx new file mode 100644 index 0000000000..703ac0d09c --- /dev/null +++ b/packages/paste-website/src/pages/foundations/elevation/index.mdx @@ -0,0 +1,218 @@ +export const meta = { + title: 'Elevation', + description: 'Elevation organizes elements along a visual hierarchy creating a sense of depth in an interface.', + slug: '/foundations/elevation/', +}; + +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' +import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {UnorderedList, ListItem} from '@twilio-paste/list'; +import {Box} from '@twilio-paste/box'; +import {Text} from '@twilio-paste/text'; +import {Theme} from '@twilio-paste/theme'; + +import {ResponsiveImage} from '../../../components/ResponsiveImage'; +import {DoDont, Do, Dont} from '../../../components/DoDont'; +import {SidebarCategoryRoutes} from '../../../constants'; +import AccentShadow from '../../../assets/images/foundations/elevation/level-1-accent-shadow.png'; +import TonalChange from '../../../assets/images/foundations/elevation/level-1-tonal-change.png'; +import Level2AccentChange from '../../../assets/images/foundations/elevation/level-2-accent-shadow.png'; +import Level2RisenShadow from '../../../assets/images/foundations/elevation/level-2-risen-shadow.png'; +import Level3Overlay from '../../../assets/images/foundations/elevation/level-3-overlay.png'; +import Level3RisenShadow from '../../../assets/images/foundations/elevation/level-3-risen-shadow.png'; +import ElevatedBackgroundTokens from '../../../assets/images/foundations/elevation/elevated-background-color-tokens.png'; + +import { + ApplyingLevel1ImgCaption, + CalloutExampleImgCaption, + ApplyLevel2ImgCaption, + PopoverExampleImgCaption, +} from '../../../component-examples/ElevationFoundationExamples'; +import DefaultLayout from '../../../layouts/DefaultLayout'; +import {getNavigationData} from '../../../utils/api'; +import { ElevatedBackgroundColorTokensExample, ShadowTokensLevel1Example, ShadowTokensLevel2Example, ShadowTokensLevel3Example } from '../../../component-examples/ElevationExamples'; + +export default DefaultLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + return { + props: { + navigationData, + }, + }; +}; + + + + + + + + + + + + + + + +## Introduction + +Elevation represents how "close" or "far" an element feels from the user in a digital context, using a combination of **shadows**, **colors** and **overlays** to create a layering effect, making elements feel distinct, focused or prioritized. + +Paste’s elevation system is: + +- Subtle: Provides just enough visual contrast to create a sense of depth, avoiding excessive visual clutter. +- Intentional: Provides clear meaning to guide users through interfaces, improving user efficiency by consistently communicating the level of importance of elements across different pages. +- Dynamic: Adapts to different background colors and themes, ensuring consistent depth perception and usability across light, dark, and custom design contexts. + +## Elevation levels + +Paste has a total of 4 levels of elevation, each elevation level corresponds to a perceived distance within the interface. All components are assigned a level based on their intended distance against the surface behind them. + +### Level 0 + +Elements at this level are the baseline for all the other levels and represent the background of the interface. + +The majority of elements will be at this level in their resting states, however an element on this level can move to a higher level when interacted with. + +For example: a Button might be ‘Level 0’ in its resting state, but ‘Level 1’ when hovered. + +### Level 1 + +Elements at this level require subtle differentiation from the surface behind them without adding too much distance. These elements are either presented by default or triggered within the composition but typically do not open on top of other elements. + +There are 2 different ways to communicate an element's elevation in level 1: + +1. **Use an accent shadow** for elements that need to be distinct from the surrounding elements but not highlighted. + + + + + +2. **Use a tonal difference** when elements need to be highlighted as well as distinct from the background. + + + + + +### Level 2 + +Elements that rest at this level are commonly distinctly separated from the background and dynamically overlap content layers creating visible distance while still being bound to Level 0 elements. + +There are 2 different ways to communicate an element's elevation in level 2: + +1. **Use a tonal difference with an accent shadow** when an element needs to be highlighted and prominent but does not overlap content by default. **Combine this with a soft sharp shadow** when the element overlaps other content and extra distance is necessary to make it distinct from the background. + + + + + +2. **Use a soft and sharp shadow** for elements that have temporary prominence or subtly float above the content. + +*Interactive states like vertical or horizontal scroll can dynamically use a soft, sharp shadow to indicate that there is overflown content. + + + + + +### Level 3 + +Elements that rest at this level, float above all other levels, and tend to contain crucial actions or information that temporarily becomes the top hierarchy of the surface. + +1. **Use a large, soft shadow with edges**, for elements that are at the top priority and require user focus, but still allow the user to interact with the surrounding content. + +For elements with decorative or semantic use of color (background or borders), use a large soft shadow without edges. + + + + +2. **Use a large soft shadow along with an overlay** for elements that completely isolate the interface to draw full focus from the user. + + + +## Elevated background color tokens + +Subtle tonal shifts are an effective way to communicate hierarchy and prominence for elevated elements without adding visual clutter to the screen. + +Paste's elevated background color tokens are derived from a base background color with tonal shifts to indicate elevation. Elevated surfaces darken on light backgrounds and lighten on dark backgrounds, ensuring clarity and consistency across themes. + + + {ElevatedBackgroundColorTokensExample} + + +Elevated elements across levels that share the same background color as the main page body should use the token `$color-background-weakest`. This token matches the page body tone in light mode but appears slightly lighter in dark mode to subtly reinforce elevation. + + + +View our full list of Elevated background color tokens + + + Different uses of color + + + Elevation Colors: Subtle tones for prominence and hierarchy, used to separate elements visually from the background. + Semantic Colors: Used to communicate meaning or status, such as success, warning, or error. + Decorative Colors: Reflect the brand identity or give a branded feel to a composition. + + Tip: use elevation colors for hierarchy, semantic colors for purpose, and branded colors for identity and style. + + + +## Shadow tokens + +Shadows are the most extreme way to display elevation. Overuse of shadows without understanding your page’s visual hierarchy can have a negative effect on the user experience. + +**Level 1 shadows** are accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations. + + + {ShadowTokensLevel1Example} + + +**Level 2 shadows** are small and sharp and indicate a close distance with the surface behind them. Shadows used in dark backgrounds use a slightly darker hue so the perceived depth is consistent. + + + {ShadowTokensLevel2Example} + + +**Level 3 shadows** are larger and softer, this indicates a further distance from the surface behind them. Shadows used in dark backgrounds use a slightly darker hue so the perceived depth is consistent. + + + {ShadowTokensLevel3Example} + + + + diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx index 4704dfb767..fa335e24a9 100644 --- a/packages/paste-website/src/pages/index.tsx +++ b/packages/paste-website/src/pages/index.tsx @@ -37,6 +37,7 @@ const HomePage = ({ navigationData }: InferGetStaticPropsType{SiteMetaDefaults.TITLE} + diff --git a/packages/paste-website/src/pages/sitemap.xml.tsx b/packages/paste-website/src/pages/sitemap.xml.tsx index b858aebcdc..8b0318ddb6 100644 --- a/packages/paste-website/src/pages/sitemap.xml.tsx +++ b/packages/paste-website/src/pages/sitemap.xml.tsx @@ -1,46 +1,25 @@ -import { globby } from "globby-esm"; import type { GetServerSideProps } from "next"; -import { unstable_noStore as noStore } from "next/cache"; + +import { SITEMAP } from "../../../../cypress/integration/sitemap-vrt/constants"; // Import the SITEMAP used for cypress const Sitemap = (): React.ReactElement | null => { return null; }; export const getServerSideProps: GetServerSideProps = async ({ res }) => { - noStore(); const BASE_URL = "https://paste.twilio.design"; - // Get a list of all pages currently in the site, must be mdx and not tsx which they all currently are - const uncompiledPaths = await globby(["**/pages/**/*.mdx", "!**/api/**", "!**/pages/404/**"]); - - const urlPaths = uncompiledPaths.map((path) => { - // Remove `src/pages/` - let modifiedPath = path.replace(/^src\/pages\//, ""); - // Remove `.mdx` - modifiedPath = modifiedPath.replace(/\.mdx$/, ""); - // Remove `/index` if it's at the end of the path - modifiedPath = modifiedPath.replace(/\/index$/, ""); - return `${BASE_URL}/${modifiedPath}`; - }); - const sitemap = ` - - ${BASE_URL} - daily - 0.7 - - ${urlPaths - .map((url) => { - return ` + ${SITEMAP.map((url) => { + return ` - ${url} + ${BASE_URL}${url} daily 0.7 `; - }) - .join("")} + }).join("")} `; diff --git a/packages/paste-website/src/stores/assistantMessagesStore.ts b/packages/paste-website/src/stores/assistantMessagesStore.ts index 5dea7727b2..43c64e0c88 100644 --- a/packages/paste-website/src/stores/assistantMessagesStore.ts +++ b/packages/paste-website/src/stores/assistantMessagesStore.ts @@ -1,12 +1,12 @@ -import { type ThreadMessage, type ThreadMessagesPage } from "openai/resources/beta/threads/messages"; +import { type Message, type MessagesPage } from "openai/resources/beta/threads/messages"; import { create } from "zustand"; import { devtools } from "zustand/middleware"; -export type AssistantThreadMessages = ThreadMessagesPage["data"]; +export type AssistantThreadMessages = MessagesPage["data"]; type State = { messages: AssistantThreadMessages }; type Actions = { setMessages: (newMessages: AssistantThreadMessages) => void; - addMessage: (newMessage: ThreadMessage) => void; + addMessage: (newMessage: Message) => void; resetMessages: () => void; }; diff --git a/packages/paste-website/stories/Elevation.stories.tsx b/packages/paste-website/stories/Elevation.stories.tsx new file mode 100644 index 0000000000..ca85dd7739 --- /dev/null +++ b/packages/paste-website/stories/Elevation.stories.tsx @@ -0,0 +1,180 @@ +import { Box } from "@twilio-paste/box"; +import type { BackgroundColor, BoxShadow } from "@twilio-paste/style-props"; +import { Text } from "@twilio-paste/text"; +import { Theme } from "@twilio-paste/theme"; +import * as React from "react"; + +export const ElevatedBackgroundColorTokens = (): React.ReactNode => { + interface TokensTemplateProps { + backgroundColor: BackgroundColor; + backgroundColorElevated: BackgroundColor; + hasBorder?: boolean; + backgroundColorBase: string; + backgroundColorElevation: string; + } + + const TokensTemplate: React.FC = ({ + backgroundColor, + backgroundColorElevated, + hasBorder, + backgroundColorBase, + backgroundColorElevation, + }) => { + return ( + + + + + + + + Base: + + + {backgroundColorBase} + + + Elevation: + + + {backgroundColorElevation} + + + + ); + }; + return ( + + + + + + + ); +}; + +const ShadowTokens: React.FC<{ boxShadow: BoxShadow; boxShadowlabel: string }> = ({ boxShadow, boxShadowlabel }) => { + return ( + + + + + Shadow (accent) + + + {boxShadowlabel} + + + + + + + + Shadow (accent) + + + {boxShadowlabel} + + + + + + ); +}; + +export const ShadowTokensLevel1 = (): React.ReactNode => { + return ; +}; + +ShadowTokensLevel1.parameters = { + padding: false, +}; + +export const ShadowTokensLevel2 = (): React.ReactNode => { + return ; +}; + +ShadowTokensLevel2.parameters = { + padding: false, +}; + +export const ShadowTokensLevel3 = (): React.ReactNode => { + return ; +}; + +ShadowTokensLevel3.parameters = { + padding: false, +}; + +export default { + title: "Website/Elevation", +}; diff --git a/yarn.lock b/yarn.lock index 0a006a6d53..d15d830b31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11533,7 +11533,7 @@ __metadata: version: 0.0.0-use.local resolution: "@twilio-paste/backend@workspace:apps/backend" dependencies: - supabase: ^1.204.3 + supabase: ^2.6.8 languageName: unknown linkType: soft @@ -16269,7 +16269,7 @@ __metadata: micromark-extension-mdxjs: ^2.0.0 minimist: ^1.2.8 next: ^14.0.0 - openai: ^4.20.1 + openai: ^4.79.1 pretty-format: ^28.1.0 prism-react-renderer: ^1.3.5 react: ^18.0.0 @@ -20183,13 +20183,6 @@ __metadata: languageName: node linkType: hard -"base-64@npm:^0.1.0": - version: 0.1.0 - resolution: "base-64@npm:0.1.0" - checksum: 5a42938f82372ab5392cbacc85a5a78115cbbd9dbef9f7540fa47d78763a3a8bd7d598475f0d92341f66285afd377509851a9bb5c67bbecb89686e9255d5b3eb - languageName: node - linkType: hard - "base64-js@npm:0.0.8": version: 0.0.8 resolution: "base64-js@npm:0.0.8" @@ -21261,13 +21254,6 @@ __metadata: languageName: node linkType: hard -"charenc@npm:0.0.2": - version: 0.0.2 - resolution: "charenc@npm:0.0.2" - checksum: 81dcadbe57e861d527faf6dd3855dc857395a1c4d6781f4847288ab23cffb7b3ee80d57c15bba7252ffe3e5e8019db767757ee7975663ad2ca0939bb8fcaf2e5 - languageName: node - linkType: hard - "check-more-types@npm:2.24.0, check-more-types@npm:^2.24.0": version: 2.24.0 resolution: "check-more-types@npm:2.24.0" @@ -22581,13 +22567,6 @@ __metadata: languageName: node linkType: hard -"crypt@npm:0.0.2": - version: 0.0.2 - resolution: "crypt@npm:0.0.2" - checksum: baf4c7bbe05df656ec230018af8cf7dbe8c14b36b98726939cef008d473f6fe7a4fad906cfea4062c93af516f1550a3f43ceb4d6615329612c6511378ed9fe34 - languageName: node - linkType: hard - "crypto-random-string@npm:^2.0.0": version: 2.0.0 resolution: "crypto-random-string@npm:2.0.0" @@ -23845,16 +23824,6 @@ __metadata: languageName: node linkType: hard -"digest-fetch@npm:^1.3.0": - version: 1.3.0 - resolution: "digest-fetch@npm:1.3.0" - dependencies: - base-64: ^0.1.0 - md5: ^2.3.0 - checksum: 8ebdb4b9ef02b1ac0da532d25c7d08388f2552813dfadabfe7c4630e944bb4a48093b997fc926440a10e1ccf4912f2ce9adcf2d6687b0518dab8480e08f22f9d - languageName: node - linkType: hard - "dir-glob@npm:^3.0.1": version: 3.0.1 resolution: "dir-glob@npm:3.0.1" @@ -29585,7 +29554,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-buffer@npm:^1.0.2, is-buffer@npm:^1.1.5, is-buffer@npm:~1.1.6": +"is-buffer@npm:^1.0.2, is-buffer@npm:^1.1.5": version: 1.1.6 resolution: "is-buffer@npm:1.1.6" checksum: 4a186d995d8bbf9153b4bd9ff9fd04ae75068fe695d29025d25e592d9488911eeece84eefbd8fa41b8ddcc0711058a71d4c466dcf6f1f6e1d83830052d8ca707 @@ -33634,17 +33603,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"md5@npm:^2.3.0": - version: 2.3.0 - resolution: "md5@npm:2.3.0" - dependencies: - charenc: 0.0.2 - crypt: 0.0.2 - is-buffer: ~1.1.6 - checksum: a63cacf4018dc9dee08c36e6f924a64ced735b37826116c905717c41cebeb41a522f7a526ba6ad578f9c80f02cb365033ccd67fe186ffbcc1a1faeb75daa9b6e - languageName: node - linkType: hard - "mdast-squeeze-paragraphs@npm:^4.0.0": version: 4.0.0 resolution: "mdast-squeeze-paragraphs@npm:4.0.0" @@ -36598,22 +36556,28 @@ fsevents@^1.2.7: languageName: node linkType: hard -"openai@npm:^4.20.1": - version: 4.20.1 - resolution: "openai@npm:4.20.1" +"openai@npm:^4.79.1": + version: 4.79.1 + resolution: "openai@npm:4.79.1" dependencies: "@types/node": ^18.11.18 "@types/node-fetch": ^2.6.4 abort-controller: ^3.0.0 agentkeepalive: ^4.2.1 - digest-fetch: ^1.3.0 form-data-encoder: 1.7.2 formdata-node: ^4.3.2 node-fetch: ^2.6.7 - web-streams-polyfill: ^3.2.1 + peerDependencies: + ws: ^8.18.0 + zod: ^3.23.8 + peerDependenciesMeta: + ws: + optional: true + zod: + optional: true bin: openai: bin/cli - checksum: 01d2aeaf9c1a0e93159cd49207d86188edf43a6276aeb1a4aab8614727f64591452bbe19baa344f799d0a94314ff386e39c019b62f305543952606759a3927f1 + checksum: 24b4a8d00add042ef1d16768bd5db09f69f8a9f5a60cef5a2af70877e21b003566ec89d4e96e9fffb3f828090864058bee204691ea59b173e186652c9c14c007 languageName: node linkType: hard @@ -43221,9 +43185,9 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"supabase@npm:^1.204.3": - version: 1.226.4 - resolution: "supabase@npm:1.226.4" +"supabase@npm:^2.6.8": + version: 2.8.1 + resolution: "supabase@npm:2.8.1" dependencies: bin-links: ^5.0.0 https-proxy-agent: ^7.0.2 @@ -43231,7 +43195,7 @@ resolve@^2.0.0-next.3: tar: 7.4.3 bin: supabase: bin/supabase - checksum: 1550cc1d7a912a10097f1c2647e46224349d0e35a71d682c846bb47fec293657a1b325e6ac74be79ad2f172518f00f9a8cea6118ff8b8645a1f3537fb7a00aeb + checksum: 10b240963da4263ad8d03e84b97939504f5690eb894a9ee8ae225d69c0b8f31a890e9e24e9d4b2757c714eb38addb6878f6e531f9f7279c22de50a991b8e7cd4 languageName: node linkType: hard @@ -45800,7 +45764,7 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"web-streams-polyfill@npm:^3.0.3, web-streams-polyfill@npm:^3.2.1": +"web-streams-polyfill@npm:^3.0.3": version: 3.2.1 resolution: "web-streams-polyfill@npm:3.2.1" checksum: b119c78574b6d65935e35098c2afdcd752b84268e18746606af149e3c424e15621b6f1ff0b42b2676dc012fc4f0d313f964b41a4b5031e525faa03997457da02