diff --git a/src/components/FileUpload/FileUpload.stories.tsx b/src/components/FileUpload/FileUpload.stories.tsx new file mode 100644 index 00000000..199e0a47 --- /dev/null +++ b/src/components/FileUpload/FileUpload.stories.tsx @@ -0,0 +1,72 @@ +import { StoryFn } from "@storybook/react"; +import { FileUpload } from "@/components/FileUpload/FileUpload.tsx"; + +export default { + component: FileUpload, + title: "Forms/FileUpload", + tags: ["file-upload", "autodocs"], + decorators: [ + (Story: StoryFn) => ( +
+ +
+ ), + ], + argTypes: { + size: { + options: ["sm", "md"], + control: { type: "radio" }, + }, + supportedFileTypes: { + control: "array", + }, + progress: { + control: { type: "range", min: 0, max: 100, step: 1 }, + }, + showProgress: { + control: "boolean", + }, + showSuccess: { + control: "boolean", + }, + failureMessage: { + control: "text", + }, + onFileSelect: { action: "file selected" }, + onRetry: { action: "retry requested" }, + }, +}; + +export const SmallSize = { + args: { + title: "Upload file", + supportedFileTypes: [".txt", ".csv", ".json", ".sql"], + size: "sm", + progress: 75, + showProgress: false, + showSuccess: false, + }, + parameters: { + docs: { + description: { + story: "Shows the `FileUpload` component in small size variant", + }, + }, + }, +}; + +export const MediumSize = { + args: { + title: "Upload file", + supportedFileTypes: [".txt", ".csv", ".json", ".sql"], + progress: 65, + size: "md", + }, + parameters: { + docs: { + description: { + story: "Shows the `FileUpload` component in medium size variant", + }, + }, + }, +}; diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx new file mode 100644 index 00000000..1b9ec022 --- /dev/null +++ b/src/components/FileUpload/FileUpload.tsx @@ -0,0 +1,469 @@ +import React, { useEffect } from "react"; +import styled, { css } from "styled-components"; +import { useState, useRef, useCallback } from "react"; +import { Text } from "@/components/Typography/Text/Text"; +import { Title } from "@/components/Typography/Title/Title"; +import { Button, Icon, IconButton, ProgressBar } from "@/components"; +import { truncateFilename } from "@/utils/truncate.ts"; + +interface FileInfo { + name: string; + size: number; +} + +interface FileUploadProps { + title: string; + supportedFileTypes?: string[]; + size?: "sm" | "md"; + progress?: number; + showSuccess?: boolean; + showProgress?: boolean; + failureMessage?: string; + onRetry?: () => void; + onFileSelect?: (file: File) => void; + onFileSelectFailure?: () => void; +} + +const UploadArea = styled.div<{ + $isDragging: boolean; + $size: "sm" | "md"; + $hasFile: boolean; + $isError?: boolean; +}>` + background-color: ${({ theme }) => theme.click.fileUpload.color.background.default}; + border: ${({ theme }) => `1px solid ${theme.click.fileUpload.color.stroke.default}`}; + border-radius: ${({ theme, $hasFile }) => + $hasFile + ? `${theme.click.fileUpload.sm.radii.all}` + : `${theme.click.fileUpload.md.radii.all}`}; + padding: ${({ theme, $hasFile, $size }) => + $hasFile || $size === "sm" + ? `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}` + : `${theme.click.fileUpload.md.space.y} ${theme.click.fileUpload.md.space.x}`}; + display: flex; + flex-direction: ${props => + props.$hasFile ? "row" : props.$size === "sm" ? "row" : "column"}; + align-items: center; + justify-content: ${props => + props.$hasFile ? "space-between" : props.$size === "sm" ? "space-between" : "center"}; + gap: ${({ theme, $size }) => + $size === "sm" + ? theme.click.fileUpload.sm.space.gap + : theme.click.fileUpload.md.space.gap}; + cursor: ${props => (props.$hasFile ? "default" : "pointer")}; + transition: ${({ theme }) => theme.click.fileUpload.transitions.all}; + + ${props => + !props.$hasFile && + css` + border-style: dashed; + border-color: ${({ theme }) => theme.click.fileUpload.color.stroke.default}; + + ${props.$isDragging && + css` + background-color: ${({ theme }) => + theme.click.fileUpload.color.background.active}; + border-color: ${({ theme }) => theme.click.fileUpload.color.stroke.active}; + `} + `} + + ${props => + props.$isError && + css` + background-color: ${({ theme }) => theme.click.fileUpload.color.background.error}; + border: none; + `} +`; + +const FileUploadTitle = styled(Title)<{ $isNotSupported: boolean }>` + font: ${({ theme }) => theme.click.fileUpload.typography.title.default}; + color: ${({ theme, $isNotSupported }) => + $isNotSupported + ? theme.click.fileUpload.color.title.error + : theme.click.fileUpload.color.title.default}; +`; + +const FileUploadDescription = styled(Text)` + font: ${({ theme }) => theme.click.fileUpload.typography.description.default}; + color: ${({ theme }) => theme.click.fileUpload.color.description.default}; +`; + +const DocumentIcon = styled(Icon)` + svg { + width: ${({ theme }) => theme.click.fileUpload.sm.icon.size.width}; + height: ${({ theme }) => theme.click.fileUpload.sm.icon.size.height}; + color: ${({ theme }) => theme.click.fileUpload.sm.color.icon.default}; + } +`; + +const UploadIcon = styled(Icon)` + svg { + width: ${({ theme }) => theme.click.fileUpload.md.icon.size.width}; + height: ${({ theme }) => theme.click.fileUpload.md.icon.size.height}; + color: ${({ theme }) => theme.click.fileUpload.md.color.icon.default}; + } +`; + +const UploadText = styled.div<{ $size: "sm" | "md"; $hasFile: boolean }>` + text-align: ${props => (props.$hasFile || props.$size === "sm" ? "left" : "center")}; + ${props => + (props.$hasFile || props.$size === "sm") && + css` + flex: 1; + `} + + ${props => + !props.$hasFile && + props.$size === "md" && + css` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + `} +`; + +const FileInfoHeader = styled.div` + display: flex; + align-items: center; + gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap}; + width: 100%; +`; + +const FileInfo = styled.div` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.click.fileUpload.hasFile.header.space.gap}; + flex: 1; +`; + +const FileDetails = styled.div` + display: flex; + gap: ${({ theme }) => theme.click.fileUpload.md.space.gap}; + border: none; +`; + +const FileActions = styled.div` + display: flex; + align-items: center; + margin-left: auto; + gap: 0; +`; + +const ProgressContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; +`; + +const ProgressBarContainer = styled.div` + width: 100%; + flex: 1; +`; + +const ProgressPercentage = styled(Text)` + min-width: ${({ theme }) => theme.sizes[10]}; + text-align: right; + padding-right: ${({ theme }) => theme.click.fileUpload.md.space.gap}; +`; + +const formatFileSize = (sizeInBytes: number): string => { + if (sizeInBytes < 1024) { + return `${sizeInBytes.toFixed(1)} B`; + } else if (sizeInBytes < 1024 * 1024) { + return `${(sizeInBytes / 1024).toFixed(1)} KB`; + } else if (sizeInBytes < 1024 * 1024 * 1024) { + return `${(sizeInBytes / (1024 * 1024)).toFixed(1)} MB`; + } else { + return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; + } +}; + +const isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => { + if (!supportedTypes.length) return true; + + const extension = filename.toLowerCase().slice(filename.lastIndexOf(".")); + return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase()); +}; + +export const FileUpload = ({ + title, + supportedFileTypes = [".txt", ".sql"], + size = "sm", + onFileSelect, + onRetry, + progress = 0, + failureMessage = "Upload failed", + showProgress = false, + showSuccess = false, + onFileSelectFailure, +}: FileUploadProps) => { + const [isDragging, setIsDragging] = useState(false); + const [isNotSupported, setIsNotSupported] = useState(false); + const [file, setFile] = useState(null); + const fileInputRef = useRef(null); + const dragCounterRef = useRef(0); + + useEffect(() => { + let timeoutId: NodeJS.Timeout; + if (isNotSupported) { + timeoutId = setTimeout(() => { + setIsNotSupported(false); + }, 2000); + } + return () => { + if (timeoutId) { + clearTimeout(timeoutId); + } + }; + }, [isNotSupported]); + + const handleDragEnter = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + dragCounterRef.current += 1; + setIsDragging(true); + }, []); + + const handleDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + + dragCounterRef.current -= 1; + + // Only set to false when left the container + if (dragCounterRef.current <= 0) { + setIsDragging(false); + dragCounterRef.current = 0; + } + }, []); + + const handleDragOver = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + }, []); + + // Reset state when drag ends anywhere in the document + useEffect(() => { + const handleDragEnd = () => { + setIsDragging(false); + dragCounterRef.current = 0; + }; + + window.addEventListener("dragend", handleDragEnd); + document.addEventListener("drop", handleDragEnd); + document.addEventListener("mouseleave", handleDragEnd); + + return () => { + window.removeEventListener("dragend", handleDragEnd); + document.removeEventListener("drop", handleDragEnd); + document.removeEventListener("mouseleave", handleDragEnd); + }; + }, []); + + const processFile = useCallback( + (file: File) => { + if (!isFiletypeSupported(file.name, supportedFileTypes)) { + if (onFileSelectFailure) { + onFileSelectFailure(); + console.log("File type not supported"); + setIsNotSupported(true); + } else { + console.warn(`File type not supported: ${file.name}`); + } + return; + } + + const newFile: FileInfo = { + name: file.name, + size: file.size, + }; + + setFile(newFile); + + if (onFileSelect) { + onFileSelect(file); + setIsNotSupported(false); + } + }, + [onFileSelect, supportedFileTypes, onFileSelectFailure] + ); + + const handleDrop = useCallback( + (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(false); + dragCounterRef.current = 0; + + if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { + const file = e.dataTransfer.files[0]; + processFile(file); + } + }, + [processFile] + ); + + const handleFileSelect = useCallback( + (e: React.ChangeEvent) => { + if (e.target.files && e.target.files.length > 0) { + const file = e.target.files[0]; + processFile(file); + } + }, + [processFile] + ); + + const handleBrowseClick = useCallback(() => { + if (fileInputRef.current) { + fileInputRef.current.click(); + } + }, []); + + const handleRemoveFile = useCallback(() => { + setFile(null); + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }, []); + + const handleRetryUpload = useCallback(() => { + if (onRetry) { + onRetry(); + } + }, [onRetry]); + + const acceptedFileTypes = supportedFileTypes.join(","); + + return ( + <> + + {!file ? ( + <> + + + {isNotSupported ? ( + + Unsupported file type + + ) : ( + + {title} + + )} + + Files supported: {supportedFileTypes.join(", ")} + + + + + ) : ( + + + + + {truncateFilename(file.name)} + {(showSuccess || showProgress) && ( + + {formatFileSize(file.size)} + + )} + {!showProgress && !showSuccess && ( + + {failureMessage} + + )} + {showSuccess && ( + + )} + + + + {!showProgress && !showSuccess && ( + + )} + + + + + {showProgress && ( + + + + + + {progress}% + + + )} + + )} + + + + + ); +}; + +export type { FileUploadProps }; diff --git a/src/components/index.ts b/src/components/index.ts index 6f4ecf98..bac07d3d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -27,6 +27,7 @@ export { DateDetails } from "@/components/DateDetails/DateDetails"; export { DatePicker } from "./DatePicker/DatePicker"; export { Dialog } from "./Dialog/Dialog"; export { EllipsisContent } from "./EllipsisContent/EllipsisContent"; +export { FileUpload } from "./FileUpload/FileUpload"; export { Flyout } from "./Flyout/Flyout"; export { FormContainer } from "./FormContainer/FormContainer"; export { GridContainer } from "./GridContainer/GridContainer"; diff --git a/src/styles/types.ts b/src/styles/types.ts index 4fc34cba..5263ac6c 100644 --- a/src/styles/types.ts +++ b/src/styles/types.ts @@ -1366,6 +1366,138 @@ } } }, + "container": { + "space": { + "none": string, + "xxs": string, + "xs": string, + "sm": string, + "md": string, + "lg": string, + "xl": string, + "xxl": string + }, + "gap": { + "none": string, + "xxs": string, + "xs": string, + "sm": string, + "md": string, + "lg": string, + "xl": string, + "xxl": string + } + }, + "datePicker": { + "dateOption": { + "space": { + "gap": string + }, + "radii": { + "default": string, + "range": string + }, + "stroke": string, + "size": { + "height": string, + "width": string + }, + "typography": { + "label": { + "default": string, + "hover": string, + "active": string, + "disabled": string, + "range": string + } + }, + "color": { + "label": { + "default": string, + "hover": string, + "active": string, + "disabled": string, + "range": string + }, + "background": { + "default": string, + "hover": string, + "active": string, + "disabled": string, + "range": string + }, + "stroke": { + "default": string, + "hover": string, + "active": string, + "disabled": string, + "range": string + } + } + }, + "space": { + "gap": string + }, + "typography": { + "daytitle": { + "default": string + }, + "title": { + "default": string + } + }, + "color": { + "title": { + "default": string + }, + "daytitle": { + "default": string + } + } + }, + "dialog": { + "space": { + "y": string, + "x": string, + "gap": string + }, + "title": { + "space": { + "gap": string + } + }, + "radii": { + "all": string + }, + "shadow": { + "default": string + }, + "stroke": { + "default": string + }, + "typography": { + "title": { + "default": string + }, + "description": { + "default": string + } + }, + "color": { + "background": { + "default": string + }, + "title": { + "default": string + }, + "description": { + "default": string + }, + "opaqueBackground": { + "default": string + } + } + }, "docs": { "typography": { "titles": { @@ -1498,132 +1630,308 @@ } } }, - "genericMenu": { - "item": { - "space": { - "x": string, - "y": string, - "gap": string - }, + "fileUpload": { + "sm": { "icon": { "size": { "height": string, "width": string } }, - "typography": { - "label": { - "default": string, - "hover": string, - "active": string, - "disabled": string - }, - "sectionHeader": { - "default": string - }, - "subtext": { - "default": string, - "hover": string, - "active": string, - "disabled": string - } - }, - "two-lines": { - "space": { - "x": string, - "y": string, - "gap": string - } + "space": { + "gap": string, + "x": string, + "y": string }, - "size": { - "minWidth": string + "radii": { + "all": string }, "color": { - "text": { - "default": string, - "hover": string, - "active": string, - "disabled": string, - "muted": string - }, - "background": { - "default": string, - "hover": string, - "active": string, - "disabled": string - }, - "format": { - "default": string, - "hover": string, - "active": string, - "disabled": string, - "error": string - }, - "stroke": { + "icon": { "default": string - }, - "subtext": { - "default": string, - "hover": string, - "active": string, - "disabled": string } } }, - "itemCustom": { - "typography": { - "label": { - "sm": string, - "lg": string + "md": { + "icon": { + "size": { + "height": string, + "width": string } - } - }, - "button": { + }, "space": { "gap": string, + "x": string, "y": string }, - "typography": { - "label": { - "default": string, - "hover": string, - "active": string - } + "radii": { + "all": string }, "color": { - "background": { - "default": string - }, - "label": { - "default": string - }, - "stroke": { + "icon": { "default": string } } }, - "panel": { - "radii": { - "all": string + "typography": { + "title": { + "default": string }, - "shadow": { + "description": { "default": string + } + }, + "hasFile": { + "space": { + "gap": string }, - "color": { - "background": { - "default": string - }, - "stroke": { - "default": string + "header": { + "space": { + "gap": string } } }, - "autocomplete": { - "typography": { - "results": { - "label": { - "default": string - } + "transitions": { + "all": string + }, + "color": { + "background": { + "default": string, + "hover": string, + "active": string, + "error": string + }, + "stroke": { + "default": string, + "hover": string, + "active": string, + "error": string + }, + "title": { + "default": string, + "hover": string, + "active": string, + "error": string + }, + "description": { + "default": string, + "hover": string, + "active": string, + "error": string + } + } + }, + "flyout": { + "space": { + "default": { + "x": string, + "y": string, + "gap": string, + "top": string, + "content": { + "x": string, + "y": string, + "row-gap": string, + "column-gap": string + } + }, + "inline": { + "x": string, + "y": string, + "gap": string, + "top": string, + "content": { + "x": string, + "y": string, + "row-gap": string, + "column-gap": string + } + } + }, + "shadow": { + "default": string, + "reverse": string + }, + "size": { + "default": { + "width": string, + "height": string + }, + "wide": { + "width": string, + "height": string + }, + "narrow": { + "width": string, + "height": string + }, + "widest": { + "width": string, + "height": string + } + }, + "typography": { + "default": { + "description": { + "default": string + }, + "title": { + "default": string + } + }, + "inline": { + "description": { + "default": string + }, + "title": { + "default": string + } + } + }, + "color": { + "background": { + "default": string + }, + "title": { + "default": string + }, + "description": { + "default": string + }, + "opaqueBackground": { + "default": string + }, + "stroke": { + "default": string + } + } + }, + "genericMenu": { + "item": { + "space": { + "x": string, + "y": string, + "gap": string + }, + "icon": { + "size": { + "height": string, + "width": string + } + }, + "typography": { + "label": { + "default": string, + "hover": string, + "active": string, + "disabled": string + }, + "sectionHeader": { + "default": string + }, + "subtext": { + "default": string, + "hover": string, + "active": string, + "disabled": string + } + }, + "two-lines": { + "space": { + "x": string, + "y": string, + "gap": string + } + }, + "size": { + "minWidth": string + }, + "color": { + "text": { + "default": string, + "hover": string, + "active": string, + "disabled": string, + "muted": string + }, + "background": { + "default": string, + "hover": string, + "active": string, + "disabled": string + }, + "format": { + "default": string, + "hover": string, + "active": string, + "disabled": string, + "error": string + }, + "stroke": { + "default": string + }, + "subtext": { + "default": string, + "hover": string, + "active": string, + "disabled": string + } + } + }, + "itemCustom": { + "typography": { + "label": { + "sm": string, + "lg": string + } + } + }, + "button": { + "space": { + "gap": string, + "y": string + }, + "typography": { + "label": { + "default": string, + "hover": string, + "active": string + } + }, + "color": { + "background": { + "default": string + }, + "label": { + "default": string + }, + "stroke": { + "default": string + } + } + }, + "panel": { + "radii": { + "all": string + }, + "shadow": { + "default": string + }, + "color": { + "background": { + "default": string + }, + "stroke": { + "default": string + } + } + }, + "autocomplete": { + "typography": { + "results": { + "label": { + "default": string + } }, "search": { "placeholder": { @@ -1666,22 +1974,165 @@ } } }, - "image": { - "sm": { - "size": { - "height": string, - "width": string - } - }, - "xs": { - "size": { - "height": string, - "width": string - } - }, - "md": { - "size": { - "height": string, + "grid": { + "header": { + "cell": { + "space": { + "y": string, + "x": string + }, + "size": { + "height": string + }, + "color": { + "background": { + "default": string, + "selectIndirect": string, + "selectDirect": string + }, + "title": { + "default": string, + "selectIndirect": string, + "selectDirect": string + }, + "stroke": { + "default": string, + "selectIndirect": string, + "selectDirect": string + } + } + }, + "title": { + "default": string + } + }, + "body": { + "cell": { + "space": { + "y": string, + "x": string + }, + "size": { + "height": string + }, + "color": { + "background": { + "default": string, + "selectIndirect": string, + "selectDirect": string + }, + "stroke": { + "default": string, + "selectIndirect": string, + "selectDirect": string + }, + "text": { + "default": string, + "selectIndirect": string, + "selectDirect": string + } + } + } + }, + "cell": { + "text": { + "default": string + } + }, + "radii": { + "none": string, + "sm": string, + "md": string, + "lg": string + }, + "global": { + "color": { + "stroke": { + "default": string + }, + "background": { + "default": string + } + } + } + }, + "gridContainer": { + "gap": { + "none": string, + "xxs": string, + "xs": string, + "sm": string, + "md": string, + "lg": string, + "xl": string, + "xxl": string, + "unset": string + } + }, + "icon": { + "space": { + "xs": { + "all": string + }, + "sm": { + "all": string + }, + "md": { + "all": string + }, + "lg": { + "all": string + }, + "xl": { + "all": string + }, + "xxl": { + "all": string + } + }, + "color": { + "background": { + "default": string, + "success": string, + "neutral": string, + "danger": string, + "info": string, + "warning": string + }, + "text": { + "default": string, + "success": string, + "neutral": string, + "danger": string, + "info": string, + "warning": string + }, + "stroke": { + "default": string, + "success": string, + "neutral": string, + "danger": string, + "info": string, + "warning": string + } + } + }, + "image": { + "sm": { + "size": { + "height": string, + "width": string + } + }, + "xs": { + "size": { + "height": string, + "width": string + } + }, + "md": { + "size": { + "height": string, "width": string } }, @@ -1703,10 +2154,36 @@ "width": string } }, + "borderWidth": { + "default": string, + "thin": string + }, "color": { "stroke": string } }, + "link": { + "space": { + "md": { + "gap": string + }, + "sm": { + "gap": string + } + }, + "icon": { + "size": { + "sm": { + "height": string, + "width": string + }, + "md": { + "height": string, + "width": string + } + } + } + }, "panel": { "strokeWidth": { "default": string @@ -2363,434 +2840,42 @@ "x": string }, "sm": { - "y": string, - "x": string - } - } - } - }, - "mobile": { - "cell": { - "space": { - "y": string, - "x": string, - "gap": string - } - } - }, - "row": { - "color": { - "background": { - "default": string, - "hover": string, - "active": string - }, - "stroke": { - "default": string - }, - "text": { - "default": string, - "disabled": string - }, - "link": { - "default": string - }, - "label": { - "default": string - } - } - }, - "global": { - "color": { - "stroke": { - "default": string - }, - "background": { - "default": string - } - } - } - }, - "tabs": { - "space": { - "y": string, - "x": string - }, - "radii": { - "all": string - }, - "typography": { - "label": { - "default": string, - "hover": string, - "active": string - } - }, - "basic": { - "strokeWidth": { - "default": string, - "hover": string, - "active": string, - "global": string - }, - "color": { - "background": { - "default": string, - "hover": string, - "active": string - }, - "text": { - "default": string, - "hover": string, - "active": string - }, - "stroke": { - "default": string, - "hover": string, - "active": string - }, - "global": { - "default": string - } - } - }, - "fileTabs": { - "icon": { - "size": { - "height": string, - "width": string - } - }, - "space": { - "y": string, - "x": string, - "gap": string - }, - "typography": { - "label": { - "default": string, - "hover": string, - "active": string - } - }, - "radii": { - "all": string - }, - "color": { - "background": { - "default": string, - "hover": string, - "active": string - }, - "text": { - "default": string, - "hover": string, - "active": string - }, - "stroke": { - "default": string, - "hover": string, - "active": string - }, - "closeButton": { - "background": { - "default": string, - "hover": string - } - } - } - } - }, - "toast": { - "icon": { - "size": { - "height": string, - "width": string - } - }, - "space": { - "title": { - "gap": string - }, - "y": string, - "x": string, - "gap": string - }, - "radii": { - "all": string - }, - "shadow": string, - "typography": { - "title": { - "default": string - }, - "description": { - "default": string - } - }, - "size": { - "width": string - }, - "color": { - "title": { - "default": string - }, - "description": { - "default": string - }, - "stroke": { - "default": string - }, - "icon": { - "default": string, - "success": string, - "warning": string, - "danger": string - } - } - }, - "tooltip": { - "radii": { - "all": string - }, - "space": { - "x": string, - "y": string - }, - "typography": { - "label": { - "default": string - } - }, - "color": { - "background": { - "default": string - }, - "label": { - "default": string - } - } - }, - "dialog": { - "space": { - "y": string, - "x": string, - "gap": string - }, - "title": { - "space": { - "gap": string - } - }, - "radii": { - "all": string - }, - "shadow": { - "default": string - }, - "stroke": { - "default": string - }, - "typography": { - "title": { - "default": string - }, - "description": { - "default": string - } - }, - "color": { - "background": { - "default": string - }, - "title": { - "default": string - }, - "description": { - "default": string - }, - "opaqueBackground": { - "default": string - } - } - }, - "link": { - "space": { - "md": { - "gap": string - }, - "sm": { - "gap": string - } - }, - "icon": { - "size": { - "sm": { - "height": string, - "width": string - }, - "md": { - "height": string, - "width": string - } - } - } - }, - "flyout": { - "space": { - "default": { - "x": string, - "y": string, - "gap": string, - "top": string, - "content": { - "x": string, - "y": string, - "row-gap": string, - "column-gap": string - } - }, - "inline": { - "x": string, - "y": string, - "gap": string, - "top": string, - "content": { - "x": string, - "y": string, - "row-gap": string, - "column-gap": string - } - } - }, - "shadow": { - "default": string, - "reverse": string - }, - "size": { - "default": { - "width": string, - "height": string - }, - "wide": { - "width": string, - "height": string - }, - "narrow": { - "width": string, - "height": string - }, - "widest": { - "width": string, - "height": string - } - }, - "typography": { - "default": { - "description": { - "default": string - }, - "title": { - "default": string - } - }, - "inline": { - "description": { - "default": string - }, - "title": { - "default": string - } - } - }, - "color": { - "background": { - "default": string - }, - "title": { - "default": string - }, - "description": { - "default": string - }, - "opaqueBackground": { - "default": string - }, - "stroke": { - "default": string - } - } - }, - "grid": { - "header": { - "cell": { - "space": { - "y": string, - "x": string - }, - "size": { - "height": string - }, - "color": { - "background": { - "default": string, - "selectIndirect": string, - "selectDirect": string - }, - "title": { - "default": string, - "selectIndirect": string, - "selectDirect": string - }, - "stroke": { - "default": string, - "selectIndirect": string, - "selectDirect": string - } - } - }, - "title": { - "default": string - } - }, - "body": { - "cell": { - "space": { - "y": string, - "x": string - }, - "size": { - "height": string - }, - "color": { - "background": { - "default": string, - "selectIndirect": string, - "selectDirect": string - }, - "stroke": { - "default": string, - "selectIndirect": string, - "selectDirect": string - }, - "text": { - "default": string, - "selectIndirect": string, - "selectDirect": string + "y": string, + "x": string } } } }, - "cell": { - "text": { - "default": string + "mobile": { + "cell": { + "space": { + "y": string, + "x": string, + "gap": string + } } }, - "radii": { - "none": string, - "sm": string, - "md": string, - "lg": string + "row": { + "color": { + "background": { + "default": string, + "hover": string, + "active": string + }, + "stroke": { + "default": string + }, + "text": { + "default": string, + "disabled": string + }, + "link": { + "default": string + }, + "label": { + "default": string + } + } }, "global": { "color": { @@ -2803,152 +2888,162 @@ } } }, - "container": { + "tabs": { "space": { - "none": string, - "xxs": string, - "xs": string, - "sm": string, - "md": string, - "lg": string, - "xl": string, - "xxl": string + "y": string, + "x": string }, - "gap": { - "none": string, - "xxs": string, - "xs": string, - "sm": string, - "md": string, - "lg": string, - "xl": string, - "xxl": string - } - }, - "gridContainer": { - "gap": { - "none": string, - "xxs": string, - "xs": string, - "sm": string, - "md": string, - "lg": string, - "xl": string, - "xxl": string, - "unset": string - } - }, - "icon": { - "space": { - "xs": { - "all": string - }, - "sm": { - "all": string - }, - "md": { - "all": string - }, - "lg": { - "all": string - }, - "xl": { - "all": string - }, - "xxl": { - "all": string - } + "radii": { + "all": string }, - "color": { - "background": { + "typography": { + "label": { "default": string, - "success": string, - "neutral": string, - "danger": string, - "info": string, - "warning": string - }, - "text": { + "hover": string, + "active": string + } + }, + "basic": { + "strokeWidth": { "default": string, - "success": string, - "neutral": string, - "danger": string, - "info": string, - "warning": string + "hover": string, + "active": string, + "global": string }, - "stroke": { - "default": string, - "success": string, - "neutral": string, - "danger": string, - "info": string, - "warning": string + "color": { + "background": { + "default": string, + "hover": string, + "active": string + }, + "text": { + "default": string, + "hover": string, + "active": string + }, + "stroke": { + "default": string, + "hover": string, + "active": string + }, + "global": { + "default": string + } } - } - }, - "datePicker": { - "dateOption": { + }, + "fileTabs": { + "icon": { + "size": { + "height": string, + "width": string + } + }, "space": { + "y": string, + "x": string, "gap": string }, - "radii": { - "default": string, - "range": string - }, - "stroke": string, - "size": { - "height": string, - "width": string - }, "typography": { "label": { "default": string, "hover": string, - "active": string, - "disabled": string, - "range": string + "active": string } }, + "radii": { + "all": string + }, "color": { - "label": { + "background": { "default": string, "hover": string, - "active": string, - "disabled": string, - "range": string + "active": string }, - "background": { + "text": { "default": string, "hover": string, - "active": string, - "disabled": string, - "range": string + "active": string }, "stroke": { "default": string, "hover": string, - "active": string, - "disabled": string, - "range": string + "active": string + }, + "closeButton": { + "background": { + "default": string, + "hover": string + } } } + } + }, + "toast": { + "icon": { + "size": { + "height": string, + "width": string + } }, "space": { + "title": { + "gap": string + }, + "y": string, + "x": string, "gap": string }, + "radii": { + "all": string + }, + "shadow": string, "typography": { - "daytitle": { + "title": { "default": string }, - "title": { + "description": { "default": string } }, + "size": { + "width": string + }, "color": { "title": { "default": string }, - "daytitle": { + "description": { + "default": string + }, + "stroke": { + "default": string + }, + "icon": { + "default": string, + "success": string, + "warning": string, + "danger": string + } + } + }, + "tooltip": { + "radii": { + "all": string + }, + "space": { + "x": string, + "y": string + }, + "typography": { + "label": { + "default": string + } + }, + "color": { + "background": { + "default": string + }, + "label": { "default": string } } diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json index 258beab6..3e6f43dd 100644 --- a/src/styles/variables.classic.json +++ b/src/styles/variables.classic.json @@ -435,6 +435,126 @@ } } }, + "datePicker": { + "dateOption": { + "color": { + "label": { + "default": "#161517", + "hover": "#161517", + "active": "#ffffff", + "disabled": "#a0a0a0", + "range": "#161517" + }, + "background": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#151515", + "disabled": "#ffffff", + "range": "#e6e7e9" + }, + "stroke": { + "default": "#ffffff", + "hover": "#151515", + "active": "#151515", + "disabled": "#ffffff", + "range": "#e6e7e9" + } + } + }, + "color": { + "title": { + "default": "lch(10.2 1.39 305)" + }, + "daytitle": { + "default": "#696e79" + } + } + }, + "dialog": { + "typography": { + "title": { + "default": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + } + }, + "flyout": { + "typography": { + "title": { + "default": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "color": { + "background": { + "default": "#ffffff" + }, + "title": { + "default": "lch(10.2 1.39 305)" + }, + "description": { + "default": "#696e79" + }, + "opaqueBackground": { + "default": "lch(6.77 0 0 / 0.45)" + }, + "stroke": { + "default": "#e6e7e9" + } + } + }, + "grid": { + "header": { + "cell": { + "color": { + "background": { + "default": "#f6f7fa", + "selectIndirect": "lch(99.6 3.76 101)", + "selectDirect": "lch(97.5 12 97.4)" + }, + "title": { + "default": "#696e79", + "selectIndirect": "#161517", + "selectDirect": "#161517" + }, + "stroke": { + "default": "lch(89.3 1.07 266)", + "selectIndirect": "lch(92.8 31.1 85.9)", + "selectDirect": "lch(90.9 28.1 85.9)" + } + } + } + }, + "body": { + "cell": { + "color": { + "background": { + "default": "#ffffff", + "selectIndirect": "lch(99.4 8.48 102 / 0.2)", + "selectDirect": "lch(99.4 8.48 102 / 0.2)" + }, + "stroke": { + "default": "#e6e7e9", + "selectIndirect": "lch(74.1 25.6 85.9)", + "selectDirect": "#FFC029" + }, + "text": { + "default": "lch(7.17 1.44 305)", + "selectIndirect": "#161517", + "selectDirect": "#161517" + } + } + } + }, + "global": { + "color": { + "stroke": { + "default": "#e6e7e9" + }, + "background": { + "default": "#ffffff" + } + } + } + }, "sidebar": { "main": { "color": { @@ -689,126 +809,6 @@ } } }, - "dialog": { - "typography": { - "title": { - "default": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - } - }, - "flyout": { - "typography": { - "title": { - "default": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - }, - "color": { - "background": { - "default": "#ffffff" - }, - "title": { - "default": "lch(10.2 1.39 305)" - }, - "description": { - "default": "#696e79" - }, - "opaqueBackground": { - "default": "lch(6.77 0 0 / 0.45)" - }, - "stroke": { - "default": "#e6e7e9" - } - } - }, - "grid": { - "header": { - "cell": { - "color": { - "background": { - "default": "#f6f7fa", - "selectIndirect": "lch(99.6 3.76 101)", - "selectDirect": "lch(97.5 12 97.4)" - }, - "title": { - "default": "#696e79", - "selectIndirect": "#161517", - "selectDirect": "#161517" - }, - "stroke": { - "default": "lch(89.3 1.07 266)", - "selectIndirect": "lch(92.8 31.1 85.9)", - "selectDirect": "lch(90.9 28.1 85.9)" - } - } - } - }, - "body": { - "cell": { - "color": { - "background": { - "default": "#ffffff", - "selectIndirect": "lch(99.4 8.48 102 / 0.2)", - "selectDirect": "lch(99.4 8.48 102 / 0.2)" - }, - "stroke": { - "default": "#e6e7e9", - "selectIndirect": "lch(74.1 25.6 85.9)", - "selectDirect": "#FFC029" - }, - "text": { - "default": "lch(7.17 1.44 305)", - "selectIndirect": "#161517", - "selectDirect": "#161517" - } - } - } - }, - "global": { - "color": { - "stroke": { - "default": "#e6e7e9" - }, - "background": { - "default": "#ffffff" - } - } - } - }, - "datePicker": { - "dateOption": { - "color": { - "label": { - "default": "#161517", - "hover": "#161517", - "active": "#ffffff", - "disabled": "#a0a0a0", - "range": "#161517" - }, - "background": { - "default": "#ffffff", - "hover": "#ffffff", - "active": "#151515", - "disabled": "#ffffff", - "range": "#e6e7e9" - }, - "stroke": { - "default": "#ffffff", - "hover": "#151515", - "active": "#151515", - "disabled": "#ffffff", - "range": "#e6e7e9" - } - } - }, - "color": { - "title": { - "default": "lch(10.2 1.39 305)" - }, - "daytitle": { - "default": "#696e79" - } - } - }, "global": { "color": { "text": { diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json index f961bba6..3eb2055b 100644 --- a/src/styles/variables.dark.json +++ b/src/styles/variables.dark.json @@ -861,6 +861,57 @@ } } }, + "datePicker": { + "dateOption": { + "color": { + "label": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#1F1F1C", + "disabled": "#a0a0a0", + "range": "#ffffff" + }, + "background": { + "default": "#1F1F1C", + "hover": "#1F1F1C", + "active": "#FAFF69", + "disabled": "#1F1F1C", + "range": "#323232" + }, + "stroke": { + "default": "#1F1F1C", + "hover": "#FAFF69", + "active": "#FAFF69", + "disabled": "#1F1F1C", + "range": "#323232" + } + } + }, + "color": { + "title": { + "default": "rgb(97.5% 97.5% 97.5%)" + }, + "daytitle": { + "default": "#b3b6bd" + } + } + }, + "dialog": { + "color": { + "background": { + "default": "#1F1F1C" + }, + "title": { + "default": "rgb(97.5% 97.5% 97.5%)" + }, + "description": { + "default": "#b3b6bd" + }, + "opaqueBackground": { + "default": "lch(40.7 0 0 / 0.75)" + } + } + }, "field": { "color": { "background": { @@ -910,6 +961,67 @@ } } }, + "fileUpload": { + "sm": { + "color": { + "icon": { + "default": "#b3b6bd" + } + } + }, + "md": { + "color": { + "icon": { + "default": "#ffffff" + } + } + }, + "color": { + "background": { + "default": "#1F1F1C", + "hover": "#1F1F1C", + "active": "rgb(19.9% 19.9% 19.9%)", + "error": "rgb(100% 13.7% 13.7% / 0.2)" + }, + "stroke": { + "default": "rgb(23.6% 23.6% 23.6%)", + "hover": "rgb(23.6% 23.6% 23.6%)", + "active": "#414141", + "error": "rgba(0,0,0,0)" + }, + "title": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#ffffff", + "error": "#ffbaba" + }, + "description": { + "default": "#b3b6bd", + "hover": "#b3b6bd", + "active": "#b3b6bd", + "error": "#ffbaba" + } + } + }, + "flyout": { + "color": { + "background": { + "default": "#282828" + }, + "title": { + "default": "rgb(97.5% 97.5% 97.5%)" + }, + "description": { + "default": "#b3b6bd" + }, + "opaqueBackground": { + "default": "lch(6.77 0 0 / 0.45)" + }, + "stroke": { + "default": "#323232" + } + } + }, "genericMenu": { "item": { "color": { @@ -984,6 +1096,88 @@ } } }, + "grid": { + "header": { + "cell": { + "color": { + "background": { + "default": "#282828", + "selectIndirect": "lch(19.5 0 0)", + "selectDirect": "lch(27.3 0 0)" + }, + "title": { + "default": "#b3b6bd", + "selectIndirect": "#ffffff", + "selectDirect": "#ffffff" + }, + "stroke": { + "default": "lch(20.3 0 0)", + "selectIndirect": "lch(26.8 0 0)", + "selectDirect": "lch(29.4 0 0)" + } + } + } + }, + "body": { + "cell": { + "color": { + "background": { + "default": "#1F1F1C", + "selectIndirect": "lch(15.8 0 0)", + "selectDirect": "lch(15.8 0 0)" + }, + "stroke": { + "default": "#323232", + "selectIndirect": "lch(22 0 0)", + "selectDirect": "#FAFF69" + }, + "text": { + "default": "lch(100 0 0)", + "selectIndirect": "#ffffff", + "selectDirect": "#ffffff" + } + } + } + }, + "global": { + "color": { + "stroke": { + "default": "#323232" + }, + "background": { + "default": "#1F1F1C" + } + } + } + }, + "icon": { + "color": { + "background": { + "default": "rgba(0,0,0,0)", + "success": "rgb(20% 100% 26.7% / 0.2)", + "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)", + "danger": "rgb(100% 13.7% 13.7% / 0.2)", + "info": "rgb(26.3% 49.4% 93.7% / 0.2)", + "warning": "rgb(100% 46.7% 16.1% / 0.2)" + }, + "text": { + "default": "rgba(0,0,0,0)", + "success": "#CCFFD0", + "neutral": "#c0c0c0", + "danger": "#ffbaba", + "info": "#D0DFFB", + "warning": "#FFB88F" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "success": "rgb(20% 100% 26.7% / 0.05)", + "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)", + "danger": "rgb(100% 13.7% 13.7% / 0.05)", + "info": "rgb(26.3% 49.4% 93.7% / 0.05)", + "warning": "rgb(100% 46.7% 16.1% / 0.05)" + } + } + }, "image": { "color": { "stroke": "#ffffff" @@ -1403,158 +1597,6 @@ } } }, - "dialog": { - "color": { - "background": { - "default": "#1F1F1C" - }, - "title": { - "default": "rgb(97.5% 97.5% 97.5%)" - }, - "description": { - "default": "#b3b6bd" - }, - "opaqueBackground": { - "default": "lch(40.7 0 0 / 0.75)" - } - } - }, - "flyout": { - "color": { - "background": { - "default": "#282828" - }, - "title": { - "default": "rgb(97.5% 97.5% 97.5%)" - }, - "description": { - "default": "#b3b6bd" - }, - "opaqueBackground": { - "default": "lch(6.77 0 0 / 0.45)" - }, - "stroke": { - "default": "#323232" - } - } - }, - "grid": { - "header": { - "cell": { - "color": { - "background": { - "default": "#282828", - "selectIndirect": "lch(19.5 0 0)", - "selectDirect": "lch(27.3 0 0)" - }, - "title": { - "default": "#b3b6bd", - "selectIndirect": "#ffffff", - "selectDirect": "#ffffff" - }, - "stroke": { - "default": "lch(20.3 0 0)", - "selectIndirect": "lch(26.8 0 0)", - "selectDirect": "lch(29.4 0 0)" - } - } - } - }, - "body": { - "cell": { - "color": { - "background": { - "default": "#1F1F1C", - "selectIndirect": "lch(15.8 0 0)", - "selectDirect": "lch(15.8 0 0)" - }, - "stroke": { - "default": "#323232", - "selectIndirect": "lch(22 0 0)", - "selectDirect": "#FAFF69" - }, - "text": { - "default": "lch(100 0 0)", - "selectIndirect": "#ffffff", - "selectDirect": "#ffffff" - } - } - } - }, - "global": { - "color": { - "stroke": { - "default": "#323232" - }, - "background": { - "default": "#1F1F1C" - } - } - } - }, - "icon": { - "color": { - "background": { - "default": "rgba(0,0,0,0)", - "success": "rgb(20% 100% 26.7% / 0.2)", - "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)", - "danger": "rgb(100% 13.7% 13.7% / 0.2)", - "info": "rgb(26.3% 49.4% 93.7% / 0.2)", - "warning": "rgb(100% 46.7% 16.1% / 0.2)" - }, - "text": { - "default": "rgba(0,0,0,0)", - "success": "#CCFFD0", - "neutral": "#c0c0c0", - "danger": "#ffbaba", - "info": "#D0DFFB", - "warning": "#FFB88F" - }, - "stroke": { - "default": "rgba(0,0,0,0)", - "success": "rgb(20% 100% 26.7% / 0.05)", - "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)", - "danger": "rgb(100% 13.7% 13.7% / 0.05)", - "info": "rgb(26.3% 49.4% 93.7% / 0.05)", - "warning": "rgb(100% 46.7% 16.1% / 0.05)" - } - } - }, - "datePicker": { - "dateOption": { - "color": { - "label": { - "default": "#ffffff", - "hover": "#ffffff", - "active": "#1F1F1C", - "disabled": "#a0a0a0", - "range": "#ffffff" - }, - "background": { - "default": "#1F1F1C", - "hover": "#1F1F1C", - "active": "#FAFF69", - "disabled": "#1F1F1C", - "range": "#323232" - }, - "stroke": { - "default": "#1F1F1C", - "hover": "#FAFF69", - "active": "#FAFF69", - "disabled": "#1F1F1C", - "range": "#323232" - } - } - }, - "color": { - "title": { - "default": "rgb(97.5% 97.5% 97.5%)" - }, - "daytitle": { - "default": "#b3b6bd" - } - } - }, "global": { "color": { "background": { diff --git a/src/styles/variables.json b/src/styles/variables.json index 83302203..203e260e 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -1365,6 +1365,138 @@ } } }, + "container": { + "space": { + "none": "0", + "xxs": "0.25rem", + "xs": "0.5rem", + "sm": "0.75rem", + "md": "1rem", + "lg": "1.5rem", + "xl": "2rem", + "xxl": "4rem" + }, + "gap": { + "none": "0", + "xxs": "0.25rem", + "xs": "0.5rem", + "sm": "0.75rem", + "md": "1rem", + "lg": "1.5rem", + "xl": "2rem", + "xxl": "4rem" + } + }, + "datePicker": { + "dateOption": { + "space": { + "gap": "2px" + }, + "radii": { + "default": "0.25rem", + "range": "0" + }, + "stroke": "1px", + "size": { + "height": "2rem", + "width": "2rem" + }, + "typography": { + "label": { + "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "hover": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "active": "600 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "disabled": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "range": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "color": { + "label": { + "default": "#161517", + "hover": "#161517", + "active": "#ffffff", + "disabled": "#a0a0a0", + "range": "#161517" + }, + "background": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#151515", + "disabled": "#ffffff", + "range": "#e6e7e9" + }, + "stroke": { + "default": "#ffffff", + "hover": "#151515", + "active": "#151515", + "disabled": "#ffffff", + "range": "#e6e7e9" + } + } + }, + "space": { + "gap": "0.25rem" + }, + "typography": { + "daytitle": { + "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + }, + "title": { + "default": "600 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "color": { + "title": { + "default": "lch(11.1 1.37 305)" + }, + "daytitle": { + "default": "#696e79" + } + } + }, + "dialog": { + "space": { + "y": "1.5rem", + "x": "2rem", + "gap": "1rem" + }, + "title": { + "space": { + "gap": "0.25rem" + } + }, + "radii": { + "all": "0.5rem" + }, + "shadow": { + "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)" + }, + "stroke": { + "default": "1px solid #e6e7e9" + }, + "typography": { + "title": { + "default": "700 1.25rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + }, + "description": { + "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "color": { + "background": { + "default": "#ffffff" + }, + "title": { + "default": "lch(11.1 1.37 305)" + }, + "description": { + "default": "#696e79" + }, + "opaqueBackground": { + "default": "lch(6.77 0 0 / 0.75)" + } + } + }, "docs": { "typography": { "titles": { @@ -1497,124 +1629,300 @@ } } }, - "genericMenu": { - "item": { - "space": { - "x": "1rem", - "y": "0.344rem", - "gap": "0.5rem" - }, + "fileUpload": { + "sm": { "icon": { "size": { - "height": "0.969rem", - "width": "0.969rem" - } - }, - "typography": { - "label": { - "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "hover": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "active": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "disabled": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "sectionHeader": { - "default": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "subtext": { - "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "hover": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "active": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "disabled": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + "height": "1.5rem", + "width": "1.5rem" } }, - "two-lines": { - "space": { - "x": "1rem", - "y": "0.344rem", - "gap": "0.75rem" - } + "space": { + "gap": "0.75rem", + "x": "1rem", + "y": "0.5rem" }, - "size": { - "minWidth": "180px" + "radii": { + "all": "0.25rem" }, "color": { - "text": { - "default": "#161517", - "hover": "#161517", - "active": "#161517", - "disabled": "#c0c0c0", - "muted": "#696e79" - }, - "background": { - "default": "#ffffff", - "hover": "rgb(96.8% 97.1% 98.2%)", - "active": "#ffffff", - "disabled": "#ffffff" - }, - "format": { - "default": "lch(72 4.18 268)", - "hover": "lch(72 4.18 268)", - "active": "lch(72 4.18 268)", - "disabled": "#a0a0a0", - "error": "lch(72 4.18 268)" - }, - "stroke": { - "default": "#e6e7e9" - }, - "subtext": { - "default": "#696e79", - "hover": "#696e79", - "active": "#696e79", - "disabled": "#c0c0c0" + "icon": { + "default": "#696e79" } } }, - "itemCustom": { - "typography": { - "label": { - "sm": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "lg": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + "md": { + "icon": { + "size": { + "height": "2rem", + "width": "2rem" } - } - }, - "button": { + }, "space": { - "gap": "0.25rem", - "y": "0.5rem" + "gap": "0.5rem", + "x": "1rem", + "y": "0.75rem" }, - "typography": { - "label": { - "default": "500 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "hover": "400 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "active": "400 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } + "radii": { + "all": "0.5rem" }, "color": { - "background": { - "default": "#f6f7fa" - }, - "label": { - "default": "#696e79" - }, - "stroke": { - "default": "#e6e7e9" + "icon": { + "default": "#161517" } } }, - "panel": { - "radii": { - "all": "0.25rem" - }, - "shadow": { - "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)" + "typography": { + "title": { + "default": "500 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" }, - "color": { - "background": { - "default": "#ffffff" - }, - "stroke": { - "default": "#e6e7e9" - } + "description": { + "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "hasFile": { + "space": { + "gap": "0.75rem" + }, + "header": { + "space": { + "gap": "0.5rem" + } + } + }, + "transitions": { + "all": "all 100ms ease-in 0ms" + }, + "color": { + "background": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "rgb(96.6% 96.9% 98.1%)", + "error": "rgb(100% 13.7% 13.7% / 0.1)" + }, + "stroke": { + "default": "rgb(90.7% 91.1% 91.8%)", + "hover": "rgb(90.7% 91.1% 91.8%)", + "active": "#b3b6bd", + "error": "rgba(0,0,0,0)" + }, + "title": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "error": "#c10000" + }, + "description": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79", + "error": "#c10000" + } + } + }, + "flyout": { + "space": { + "default": { + "x": "0", + "y": "1.5rem", + "gap": "1rem", + "top": "0", + "content": { + "x": "1.5rem", + "y": "1.5rem", + "row-gap": "0.25rem", + "column-gap": "1rem" + } + }, + "inline": { + "x": "0", + "y": "0.75rem", + "gap": "0.75rem", + "top": "3.5rem", + "content": { + "x": "0.75rem", + "y": "0.75rem", + "row-gap": "0.25rem", + "column-gap": "0.75rem" + } + } + }, + "shadow": { + "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)", + "reverse": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)" + }, + "size": { + "default": { + "width": "27.5rem", + "height": "100%" + }, + "wide": { + "width": "37.5rem", + "height": "100vh" + }, + "narrow": { + "width": "21rem", + "height": "100%" + }, + "widest": { + "width": "55rem", + "height": "100vh" + } + }, + "typography": { + "default": { + "description": { + "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + }, + "title": { + "default": "700 1.25rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "inline": { + "description": { + "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + }, + "title": { + "default": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + } + }, + "color": { + "background": { + "default": "#ffffff" + }, + "title": { + "default": "lch(11.1 1.37 305)" + }, + "description": { + "default": "#696e79" + }, + "opaqueBackground": { + "default": "lch(6.77 0 0 / 0.45)" + }, + "stroke": { + "default": "#e6e7e9" + } + } + }, + "genericMenu": { + "item": { + "space": { + "x": "1rem", + "y": "0.344rem", + "gap": "0.5rem" + }, + "icon": { + "size": { + "height": "0.969rem", + "width": "0.969rem" + } + }, + "typography": { + "label": { + "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "hover": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "active": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "disabled": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + }, + "sectionHeader": { + "default": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + }, + "subtext": { + "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "hover": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "active": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "disabled": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "two-lines": { + "space": { + "x": "1rem", + "y": "0.344rem", + "gap": "0.75rem" + } + }, + "size": { + "minWidth": "180px" + }, + "color": { + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "disabled": "#c0c0c0", + "muted": "#696e79" + }, + "background": { + "default": "#ffffff", + "hover": "rgb(96.8% 97.1% 98.2%)", + "active": "#ffffff", + "disabled": "#ffffff" + }, + "format": { + "default": "lch(72 4.18 268)", + "hover": "lch(72 4.18 268)", + "active": "lch(72 4.18 268)", + "disabled": "#a0a0a0", + "error": "lch(72 4.18 268)" + }, + "stroke": { + "default": "#e6e7e9" + }, + "subtext": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79", + "disabled": "#c0c0c0" + } + } + }, + "itemCustom": { + "typography": { + "label": { + "sm": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "lg": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + } + }, + "button": { + "space": { + "gap": "0.25rem", + "y": "0.5rem" + }, + "typography": { + "label": { + "default": "500 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "hover": "400 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", + "active": "400 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "color": { + "background": { + "default": "#f6f7fa" + }, + "label": { + "default": "#696e79" + }, + "stroke": { + "default": "#e6e7e9" + } + } + }, + "panel": { + "radii": { + "all": "0.25rem" + }, + "shadow": { + "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)" + }, + "color": { + "background": { + "default": "#ffffff" + }, + "stroke": { + "default": "#e6e7e9" + } } }, "autocomplete": { @@ -1665,27 +1973,170 @@ } } }, - "image": { - "sm": { - "size": { - "height": "1rem", - "width": "1rem" - } - }, - "xs": { - "size": { - "height": "0.75rem", - "width": "0.75rem" - } - }, - "md": { - "size": { - "height": "1.25rem", - "width": "1.25rem" - } - }, - "lg": { - "size": { + "grid": { + "header": { + "cell": { + "space": { + "y": "0.438rem", + "x": "0.5rem" + }, + "size": { + "height": "2rem" + }, + "color": { + "background": { + "default": "#f6f7fa", + "selectIndirect": "lch(95.6 5.84 264)", + "selectDirect": "lch(93.2 7.7 264)" + }, + "title": { + "default": "#696e79", + "selectIndirect": "#161517", + "selectDirect": "#161517" + }, + "stroke": { + "default": "lch(89.3 1.07 266)", + "selectIndirect": "lch(91.8 7.59 264)", + "selectDirect": "lch(86.1 15.1 266)" + } + } + }, + "title": { + "default": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" + } + }, + "body": { + "cell": { + "space": { + "y": "5.5px", + "x": "0.5rem" + }, + "size": { + "height": "2rem" + }, + "color": { + "background": { + "default": "#ffffff", + "selectIndirect": "lch(94.1 7.78 264 / 0.2)", + "selectDirect": "lch(94.1 7.78 264 / 0.2)" + }, + "stroke": { + "default": "#e6e7e9", + "selectIndirect": "lch(70.7 12.4 266)", + "selectDirect": "#437EEF" + }, + "text": { + "default": "lch(7.17 1.44 305)", + "selectIndirect": "#161517", + "selectDirect": "#161517" + } + } + } + }, + "cell": { + "text": { + "default": "500 0.875rem/1.5 \"Inconsolata\", Consolas, '\"SFMono Regular\"', monospace" + } + }, + "radii": { + "none": "0", + "sm": "0.25rem", + "md": "0.5rem", + "lg": "0.75rem" + }, + "global": { + "color": { + "stroke": { + "default": "#e6e7e9" + }, + "background": { + "default": "#ffffff" + } + } + } + }, + "gridContainer": { + "gap": { + "none": "0", + "xxs": "0.25rem", + "xs": "0.5rem", + "sm": "0.75rem", + "md": "1rem", + "lg": "1.5rem", + "xl": "2rem", + "xxl": "4rem", + "unset": "" + } + }, + "icon": { + "space": { + "xs": { + "all": "0.25rem" + }, + "sm": { + "all": "0.25rem" + }, + "md": { + "all": "0.365rem" + }, + "lg": { + "all": "0.5rem" + }, + "xl": { + "all": "0.75rem" + }, + "xxl": { + "all": "1rem" + } + }, + "color": { + "background": { + "default": "rgba(0,0,0,0)", + "success": "rgb(20% 100% 26.7% / 0.1)", + "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", + "danger": "rgb(100% 13.7% 13.7% / 0.1)", + "info": "rgb(26.3% 49.4% 93.7% / 0.1)", + "warning": "rgb(100% 46.7% 16.1% / 0.1)" + }, + "text": { + "default": "rgba(0,0,0,0)", + "success": "#008A0B", + "neutral": "#53575f", + "danger": "#c10000", + "info": "#437EEF", + "warning": "#A33C00" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "success": "rgb(20% 100% 26.7% / 0.05)", + "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", + "danger": "rgb(100% 13.7% 13.7% / 0.05)", + "info": "rgb(26.3% 49.4% 93.7% / 0.05)", + "warning": "rgb(100% 46.7% 16.1% / 0.05)" + } + } + }, + "image": { + "sm": { + "size": { + "height": "1rem", + "width": "1rem" + } + }, + "xs": { + "size": { + "height": "0.75rem", + "width": "0.75rem" + } + }, + "md": { + "size": { + "height": "1.25rem", + "width": "1.25rem" + } + }, + "lg": { + "size": { "height": "1.5rem", "width": "1.5rem" } @@ -1702,10 +2153,36 @@ "width": "4rem" } }, + "borderWidth": { + "default": "1.5px", + "thin": "1px" + }, "color": { "stroke": "#161517" } }, + "link": { + "space": { + "md": { + "gap": "0.25rem" + }, + "sm": { + "gap": "2px" + } + }, + "icon": { + "size": { + "sm": { + "height": "0.75rem", + "width": "0.75rem" + }, + "md": { + "height": "1rem", + "width": "1rem" + } + } + } + }, "panel": { "strokeWidth": { "default": "1px" @@ -2570,388 +3047,6 @@ } } }, - "dialog": { - "space": { - "y": "1.5rem", - "x": "2rem", - "gap": "1rem" - }, - "title": { - "space": { - "gap": "0.25rem" - } - }, - "radii": { - "all": "0.5rem" - }, - "shadow": { - "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)" - }, - "stroke": { - "default": "1px solid #e6e7e9" - }, - "typography": { - "title": { - "default": "700 1.25rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "description": { - "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - }, - "color": { - "background": { - "default": "#ffffff" - }, - "title": { - "default": "lch(11.1 1.37 305)" - }, - "description": { - "default": "#696e79" - }, - "opaqueBackground": { - "default": "lch(6.77 0 0 / 0.75)" - } - } - }, - "link": { - "space": { - "md": { - "gap": "0.25rem" - }, - "sm": { - "gap": "2px" - } - }, - "icon": { - "size": { - "sm": { - "height": "0.75rem", - "width": "0.75rem" - }, - "md": { - "height": "1rem", - "width": "1rem" - } - } - } - }, - "flyout": { - "space": { - "default": { - "x": "0", - "y": "1.5rem", - "gap": "1rem", - "top": "0", - "content": { - "x": "1.5rem", - "y": "1.5rem", - "row-gap": "0.25rem", - "column-gap": "1rem" - } - }, - "inline": { - "x": "0", - "y": "0.75rem", - "gap": "0.75rem", - "top": "3.5rem", - "content": { - "x": "0.75rem", - "y": "0.75rem", - "row-gap": "0.25rem", - "column-gap": "0.75rem" - } - } - }, - "shadow": { - "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)", - "reverse": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)" - }, - "size": { - "default": { - "width": "27.5rem", - "height": "100%" - }, - "wide": { - "width": "37.5rem", - "height": "100vh" - }, - "narrow": { - "width": "21rem", - "height": "100%" - }, - "widest": { - "width": "55rem", - "height": "100vh" - } - }, - "typography": { - "default": { - "description": { - "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "title": { - "default": "700 1.25rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - }, - "inline": { - "description": { - "default": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "title": { - "default": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - } - }, - "color": { - "background": { - "default": "#ffffff" - }, - "title": { - "default": "lch(11.1 1.37 305)" - }, - "description": { - "default": "#696e79" - }, - "opaqueBackground": { - "default": "lch(6.77 0 0 / 0.45)" - }, - "stroke": { - "default": "#e6e7e9" - } - } - }, - "grid": { - "header": { - "cell": { - "space": { - "y": "0.438rem", - "x": "0.5rem" - }, - "size": { - "height": "2rem" - }, - "color": { - "background": { - "default": "#f6f7fa", - "selectIndirect": "lch(95.6 5.84 264)", - "selectDirect": "lch(93.2 7.7 264)" - }, - "title": { - "default": "#696e79", - "selectIndirect": "#161517", - "selectDirect": "#161517" - }, - "stroke": { - "default": "lch(89.3 1.07 266)", - "selectIndirect": "lch(91.8 7.59 264)", - "selectDirect": "lch(86.1 15.1 266)" - } - } - }, - "title": { - "default": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - }, - "body": { - "cell": { - "space": { - "y": "5.5px", - "x": "0.5rem" - }, - "size": { - "height": "2rem" - }, - "color": { - "background": { - "default": "#ffffff", - "selectIndirect": "lch(94.1 7.78 264 / 0.2)", - "selectDirect": "lch(94.1 7.78 264 / 0.2)" - }, - "stroke": { - "default": "#e6e7e9", - "selectIndirect": "lch(70.7 12.4 266)", - "selectDirect": "#437EEF" - }, - "text": { - "default": "lch(7.17 1.44 305)", - "selectIndirect": "#161517", - "selectDirect": "#161517" - } - } - } - }, - "cell": { - "text": { - "default": "500 0.875rem/1.5 \"Inconsolata\", Consolas, '\"SFMono Regular\"', monospace" - } - }, - "radii": { - "none": "0", - "sm": "0.25rem", - "md": "0.5rem", - "lg": "0.75rem" - }, - "global": { - "color": { - "stroke": { - "default": "#e6e7e9" - }, - "background": { - "default": "#ffffff" - } - } - } - }, - "container": { - "space": { - "none": "0", - "xxs": "0.25rem", - "xs": "0.5rem", - "sm": "0.75rem", - "md": "1rem", - "lg": "1.5rem", - "xl": "2rem", - "xxl": "4rem" - }, - "gap": { - "none": "0", - "xxs": "0.25rem", - "xs": "0.5rem", - "sm": "0.75rem", - "md": "1rem", - "lg": "1.5rem", - "xl": "2rem", - "xxl": "4rem" - } - }, - "gridContainer": { - "gap": { - "none": "0", - "xxs": "0.25rem", - "xs": "0.5rem", - "sm": "0.75rem", - "md": "1rem", - "lg": "1.5rem", - "xl": "2rem", - "xxl": "4rem", - "unset": "" - } - }, - "icon": { - "space": { - "xs": { - "all": "0.25rem" - }, - "sm": { - "all": "0.25rem" - }, - "md": { - "all": "0.365rem" - }, - "lg": { - "all": "0.5rem" - }, - "xl": { - "all": "0.75rem" - }, - "xxl": { - "all": "1rem" - } - }, - "color": { - "background": { - "default": "rgba(0,0,0,0)", - "success": "rgb(20% 100% 26.7% / 0.1)", - "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", - "danger": "rgb(100% 13.7% 13.7% / 0.1)", - "info": "rgb(26.3% 49.4% 93.7% / 0.1)", - "warning": "rgb(100% 46.7% 16.1% / 0.1)" - }, - "text": { - "default": "rgba(0,0,0,0)", - "success": "#008A0B", - "neutral": "#53575f", - "danger": "#c10000", - "info": "#437EEF", - "warning": "#A33C00" - }, - "stroke": { - "default": "rgba(0,0,0,0)", - "success": "rgb(20% 100% 26.7% / 0.05)", - "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", - "danger": "rgb(100% 13.7% 13.7% / 0.05)", - "info": "rgb(26.3% 49.4% 93.7% / 0.05)", - "warning": "rgb(100% 46.7% 16.1% / 0.05)" - } - } - }, - "datePicker": { - "dateOption": { - "space": { - "gap": "2px" - }, - "radii": { - "default": "0.25rem", - "range": "0" - }, - "stroke": "1px", - "size": { - "height": "2rem", - "width": "2rem" - }, - "typography": { - "label": { - "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "hover": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "active": "600 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "disabled": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", - "range": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - }, - "color": { - "label": { - "default": "#161517", - "hover": "#161517", - "active": "#ffffff", - "disabled": "#a0a0a0", - "range": "#161517" - }, - "background": { - "default": "#ffffff", - "hover": "#ffffff", - "active": "#151515", - "disabled": "#ffffff", - "range": "#e6e7e9" - }, - "stroke": { - "default": "#ffffff", - "hover": "#151515", - "active": "#151515", - "disabled": "#ffffff", - "range": "#e6e7e9" - } - } - }, - "space": { - "gap": "0.25rem" - }, - "typography": { - "daytitle": { - "default": "400 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "title": { - "default": "600 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - } - }, - "color": { - "title": { - "default": "lch(11.1 1.37 305)" - }, - "daytitle": { - "default": "#696e79" - } - } - }, "global": { "color": { "background": { diff --git a/src/styles/variables.light.json b/src/styles/variables.light.json index 37571c04..1faabc87 100644 --- a/src/styles/variables.light.json +++ b/src/styles/variables.light.json @@ -849,6 +849,57 @@ } } }, + "datePicker": { + "dateOption": { + "color": { + "label": { + "default": "#161517", + "hover": "#161517", + "active": "#ffffff", + "disabled": "#a0a0a0", + "range": "#161517" + }, + "background": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#151515", + "disabled": "#ffffff", + "range": "#e6e7e9" + }, + "stroke": { + "default": "#ffffff", + "hover": "#151515", + "active": "#151515", + "disabled": "#ffffff", + "range": "#e6e7e9" + } + } + }, + "color": { + "title": { + "default": "lch(11.1 1.37 305)" + }, + "daytitle": { + "default": "#696e79" + } + } + }, + "dialog": { + "color": { + "background": { + "default": "#ffffff" + }, + "title": { + "default": "lch(11.1 1.37 305)" + }, + "description": { + "default": "#696e79" + }, + "opaqueBackground": { + "default": "lch(6.77 0 0 / 0.75)" + } + } + }, "field": { "color": { "background": { @@ -898,6 +949,64 @@ } } }, + "fileUpload": { + "sm": { + "color": { + "icon": { + "default": "#696e79" + } + } + }, + "md": { + "color": { + "icon": { + "default": "#161517" + } + } + }, + "color": { + "background": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "rgb(96.6% 96.9% 98.1%)", + "error": "rgb(100% 13.7% 13.7% / 0.1)" + }, + "stroke": { + "default": "rgb(90.7% 91.1% 91.8%)", + "hover": "rgb(90.7% 91.1% 91.8%)", + "active": "#b3b6bd", + "error": "rgba(0,0,0,0)" + }, + "title": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "error": "#c10000" + }, + "description": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79", + "error": "#c10000" + } + } + }, + "flyout": { + "color": { + "background": { + "default": "#ffffff" + }, + "title": { + "default": "lch(11.1 1.37 305)" + }, + "description": { + "default": "#696e79" + }, + "stroke": { + "default": "#e6e7e9" + } + } + }, "genericMenu": { "item": { "color": { @@ -971,6 +1080,88 @@ } } }, + "grid": { + "header": { + "cell": { + "color": { + "background": { + "default": "#f6f7fa", + "selectIndirect": "lch(95.6 5.84 264)", + "selectDirect": "lch(93.2 7.7 264)" + }, + "title": { + "default": "#696e79", + "selectIndirect": "#161517", + "selectDirect": "#161517" + }, + "stroke": { + "default": "lch(89.3 1.07 266)", + "selectIndirect": "lch(91.8 7.59 264)", + "selectDirect": "lch(86.1 15.1 266)" + } + } + } + }, + "body": { + "cell": { + "color": { + "background": { + "default": "#ffffff", + "selectIndirect": "lch(94.1 7.78 264 / 0.2)", + "selectDirect": "lch(94.1 7.78 264 / 0.2)" + }, + "stroke": { + "default": "#e6e7e9", + "selectIndirect": "lch(70.7 12.4 266)", + "selectDirect": "#437EEF" + }, + "text": { + "default": "lch(7.17 1.44 305)", + "selectIndirect": "#161517", + "selectDirect": "#161517" + } + } + } + }, + "global": { + "color": { + "stroke": { + "default": "#e6e7e9" + }, + "background": { + "default": "#ffffff" + } + } + } + }, + "icon": { + "color": { + "background": { + "default": "rgba(0,0,0,0)", + "success": "rgb(20% 100% 26.7% / 0.1)", + "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", + "danger": "rgb(100% 13.7% 13.7% / 0.1)", + "info": "rgb(26.3% 49.4% 93.7% / 0.1)", + "warning": "rgb(100% 46.7% 16.1% / 0.1)" + }, + "text": { + "default": "rgba(0,0,0,0)", + "success": "#008A0B", + "neutral": "#53575f", + "danger": "#c10000", + "info": "#437EEF", + "warning": "#A33C00" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "success": "rgb(20% 100% 26.7% / 0.05)", + "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", + "danger": "rgb(100% 13.7% 13.7% / 0.05)", + "info": "rgb(26.3% 49.4% 93.7% / 0.05)", + "warning": "rgb(100% 46.7% 16.1% / 0.05)" + } + } + }, "image": { "color": { "stroke": "#161517" @@ -1393,155 +1584,6 @@ } } }, - "dialog": { - "color": { - "background": { - "default": "#ffffff" - }, - "title": { - "default": "lch(11.1 1.37 305)" - }, - "description": { - "default": "#696e79" - }, - "opaqueBackground": { - "default": "lch(6.77 0 0 / 0.75)" - } - } - }, - "flyout": { - "color": { - "background": { - "default": "#ffffff" - }, - "title": { - "default": "lch(11.1 1.37 305)" - }, - "description": { - "default": "#696e79" - }, - "stroke": { - "default": "#e6e7e9" - } - } - }, - "grid": { - "header": { - "cell": { - "color": { - "background": { - "default": "#f6f7fa", - "selectIndirect": "lch(95.6 5.84 264)", - "selectDirect": "lch(93.2 7.7 264)" - }, - "title": { - "default": "#696e79", - "selectIndirect": "#161517", - "selectDirect": "#161517" - }, - "stroke": { - "default": "lch(89.3 1.07 266)", - "selectIndirect": "lch(91.8 7.59 264)", - "selectDirect": "lch(86.1 15.1 266)" - } - } - } - }, - "body": { - "cell": { - "color": { - "background": { - "default": "#ffffff", - "selectIndirect": "lch(94.1 7.78 264 / 0.2)", - "selectDirect": "lch(94.1 7.78 264 / 0.2)" - }, - "stroke": { - "default": "#e6e7e9", - "selectIndirect": "lch(70.7 12.4 266)", - "selectDirect": "#437EEF" - }, - "text": { - "default": "lch(7.17 1.44 305)", - "selectIndirect": "#161517", - "selectDirect": "#161517" - } - } - } - }, - "global": { - "color": { - "stroke": { - "default": "#e6e7e9" - }, - "background": { - "default": "#ffffff" - } - } - } - }, - "icon": { - "color": { - "background": { - "default": "rgba(0,0,0,0)", - "success": "rgb(20% 100% 26.7% / 0.1)", - "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", - "danger": "rgb(100% 13.7% 13.7% / 0.1)", - "info": "rgb(26.3% 49.4% 93.7% / 0.1)", - "warning": "rgb(100% 46.7% 16.1% / 0.1)" - }, - "text": { - "default": "rgba(0,0,0,0)", - "success": "#008A0B", - "neutral": "#53575f", - "danger": "#c10000", - "info": "#437EEF", - "warning": "#A33C00" - }, - "stroke": { - "default": "rgba(0,0,0,0)", - "success": "rgb(20% 100% 26.7% / 0.05)", - "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)", - "danger": "rgb(100% 13.7% 13.7% / 0.05)", - "info": "rgb(26.3% 49.4% 93.7% / 0.05)", - "warning": "rgb(100% 46.7% 16.1% / 0.05)" - } - } - }, - "datePicker": { - "dateOption": { - "color": { - "label": { - "default": "#161517", - "hover": "#161517", - "active": "#ffffff", - "disabled": "#a0a0a0", - "range": "#161517" - }, - "background": { - "default": "#ffffff", - "hover": "#ffffff", - "active": "#151515", - "disabled": "#ffffff", - "range": "#e6e7e9" - }, - "stroke": { - "default": "#ffffff", - "hover": "#151515", - "active": "#151515", - "disabled": "#ffffff", - "range": "#e6e7e9" - } - } - }, - "color": { - "title": { - "default": "lch(11.1 1.37 305)" - }, - "daytitle": { - "default": "#696e79" - } - } - }, "global": { "color": { "background": { diff --git a/src/utils/truncate.test.ts b/src/utils/truncate.test.ts new file mode 100644 index 00000000..18b43ef4 --- /dev/null +++ b/src/utils/truncate.test.ts @@ -0,0 +1,34 @@ +import { expect } from "vitest"; +import { truncateFilename } from "@/utils/truncate.ts"; + +describe("truncateFilename", () => { + it("dotfile (short)", () => { + const filename = ".github"; + const truncated = truncateFilename(filename); + expect(truncated).toBe(".github"); + }); + + it("dotfile (long)", () => { + const filename = ".gitignoreverylongfilename"; + const truncated = truncateFilename(filename, 10, "..."); + expect(truncated).toBe(".gitignore..."); + }); + + it("file name with extension", () => { + const filename = "testalargefilename.png"; + const truncated = truncateFilename(filename, 10); + expect(truncated).toBe("testalarge~.png"); + }); + + it("file name with extension lower than threshold", () => { + const filename = "test.png"; + const truncated = truncateFilename(filename); + expect(truncated).toBe(filename); + }); + + it("file name with same length as the threshold", () => { + const filename = "test.png"; + const truncated = truncateFilename(filename, filename.length); + expect(truncated).toBe(filename); + }); +}); diff --git a/src/utils/truncate.ts b/src/utils/truncate.ts new file mode 100644 index 00000000..46ffebe3 --- /dev/null +++ b/src/utils/truncate.ts @@ -0,0 +1,35 @@ +/** + * truncateFilename + * + * On occasion, we may be dealing with filenames - which could be very large + * and not practical to display in the user interface. This utility func + * ensures that we return a name that looks recognisable and fits the + * component using the data. + * + * @param filename + * @param maxLength + * @param delimiter + */ +export const truncateFilename = ( + filename: string, + maxLength: number = 40, + delimiter: string = "~" +): string => { + if (filename.length <= maxLength) { + return filename; + } + + if (filename.startsWith(".")) { + return `${filename.slice(0, maxLength)}${delimiter}`; + } + + const extension = + filename.lastIndexOf(".") !== -1 ? filename.slice(filename.lastIndexOf(".")) : ""; + + const nameWithoutExtension = extension + ? filename.slice(0, filename.lastIndexOf(".")) + : filename; + + const truncatedName = nameWithoutExtension.slice(0, maxLength) + delimiter; + return truncatedName + extension; +};