diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js index 0d683a7dcf856f..faa5ab2bc8f1de 100644 --- a/docs/data/joy/getting-started/templates/TemplateCollection.js +++ b/docs/data/joy/getting-started/templates/TemplateCollection.js @@ -159,6 +159,7 @@ export default function TemplateCollection() { {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} + {( + Object.keys(theme.materials || {}) as Array + ).map((material) => ( + + + {material} + + + ))} + + ); +} + +export default function IosExample() { + // const [disableTheme, setDisableTheme] = React.useState(false); + const [view, setView] = React.useState('bars'); + return ( + + + ({ + ':root': { + '--Icon-color': theme.vars.palette.label.secondary, + }, + })} + /> + +
+ setView(value)} /> + + {view === 'bars' && } + {view === 'controls' && } + {view === 'views' && } + {view === 'color' && } + {view === 'text' && } + {view === 'material' && } + + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/Bars.tsx b/docs/data/joy/getting-started/templates/ios/Bars.tsx new file mode 100644 index 00000000000000..ba98336304ff81 --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/Bars.tsx @@ -0,0 +1,484 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import IconButton from '@mui/joy/IconButton'; +import Input from '@mui/joy/Input'; +import Link from '@mui/joy/Link'; +import ListItemDecorator from '@mui/joy/ListItemDecorator'; +import Tabs from '@mui/joy/Tabs'; +import TabList from '@mui/joy/TabList'; +import Tab from '@mui/joy/Tab'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; +import KeyboardArrowLeftRounded from '@mui/icons-material/KeyboardArrowLeftRounded'; +import CropFreeIcon from '@mui/icons-material/CropFree'; +import AddRoundedIcon from '@mui/icons-material/AddRounded'; +import SearchIcon from '@mui/icons-material/Search'; +import MicIcon from '@mui/icons-material/Mic'; +import EditIcon from '@mui/icons-material/EditOutlined'; +import StarIcon from '@mui/icons-material/StarRounded'; +import UploadIcon from '@mui/icons-material/UploadOutlined'; +import FolderIcon from '@mui/icons-material/FolderOutlined'; +import DeleteIcon from '@mui/icons-material/DeleteOutlined'; +import Frame from './Frame'; + +export default function Bars() { + return ( + .wrapper': { + display: 'flex', + flexDirection: 'column', + gap: '12px', + }, + }} + > + + + + + + } + underline="none" + > + Parent Title + + + + Title + + + + + + + + + + + + + + + + Title + + + + + + + + + + + + } + underline="none" + > + Parent Title + + + + + + + Large Title + + + + + + + + + } + endDecorator={} + sx={{ flex: 1 }} + /> + + + + + + + + } + underline="none" + > + Parent Title + + + + Title + + + + + + + + } + endDecorator={} + sx={{ flex: 1 }} + /> + + + + + + + } + underline="none" + > + Parent Title + + + + + + + Large Title + + } + endDecorator={} + sx={{ flex: 1 }} + /> + + + + + + This is a prompt message. + + } + endDecorator={} + sx={{ flex: 1 }} + /> + + + + + + This is a prompt message. + + + + + + + Title + + + + + + } + endDecorator={} + sx={{ flex: 1 }} + /> + + + + + + + + + + + + + + Tab 1 + + + + + + Sharing + + + + + + Browse + + + + + + + + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/ColorSystem.tsx b/docs/data/joy/getting-started/templates/ios/ColorSystem.tsx new file mode 100644 index 00000000000000..7dbc87892b4155 --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/ColorSystem.tsx @@ -0,0 +1,275 @@ +import * as React from 'react'; +import { useTheme } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Divider from '@mui/joy/Divider'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; + +import Frame from './Frame'; + +function ColorSwatch({ + name, + rawLight, + rawDark, + cssVar, +}: { + name: string; + rawLight: string; + rawDark: string; + cssVar: string; +}) { + return ( + + div': { + display: 'flex', + justifyContent: 'center', + backgroundImage: ( + theme, + ) => `linear-gradient(90deg, ${theme.vars.palette.fill.tertiary} 50%, transparent 50%) + ,linear-gradient(90deg, transparent 50%, ${theme.vars.palette.fill.tertiary} 50%) + ,linear-gradient(90deg, ${theme.vars.palette.fill.tertiary} 50%, transparent 50%) + ,linear-gradient(90deg, transparent 50%, ${theme.vars.palette.fill.tertiary} 50%) + ,linear-gradient(90deg, ${theme.vars.palette.fill.tertiary} 50%, transparent 50%) + ,linear-gradient(90deg, transparent 50%, ${theme.vars.palette.fill.tertiary} 50%) + ,linear-gradient(90deg, ${theme.vars.palette.fill.tertiary} 50%, transparent 50%) + ,linear-gradient(90deg, transparent 50%, ${theme.vars.palette.fill.tertiary} 50%)`, + backgroundRepeat: 'repeat-x', + backgroundSize: + '20px 10px, 20px 10px, 20px 10px, 20px 10px, 20px 10px, 20px 10px, 20px 10px, 20px 10px', + backgroundPosition: + '0 0, 0 10px, 0 20px, 0 30px, 0 40px, 0 50px, 0 60px, 0 70px, 0 80px', + }, + }} + > + + + {rawLight} + + + + + + {rawDark} + + + + + + ); +} + +export default function ColorSystem() { + const theme = useTheme(); + const systemColors = [ + 'red', + 'orange', + 'yellow', + 'green', + 'mint', + 'teal', + 'cyan', + 'blue', + 'indigo', + 'purple', + 'pink', + 'brown', + 'black', + 'grey', + 'grey2', + 'grey3', + 'grey4', + 'grey5', + 'grey6', + 'white', + 'userAccent', + ] as const; + const background = ['primary', 'secondary', 'tertiary'] as const; + const groupedBackground = ['primary', 'secondary', 'tertiary'] as const; + const labelColors = ['primary', 'secondary', 'tertiary', 'quarternary'] as const; + const fills = ['primary', 'secondary', 'tertiary', 'quarternary'] as const; + const separators = ['opaque', 'nonOpaque'] as const; + return ( + + + System Colors + + + {systemColors.map((color) => ( + + ))} + + + + + + + + System Backgrounds + + + {background.map((color) => ( + + ))} + + + + + + System Grouped Backgrounds + + + {groupedBackground.map((color) => ( + + ))} + + + + + + + + Label Colors + + + {labelColors.map((color) => ( + + ))} + + + + + + Fill Colors + + + {fills.map((color) => ( + + ))} + + + + + + Separator Colors + + + {separators.map((color) => ( + + ))} + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/Controls.tsx b/docs/data/joy/getting-started/templates/ios/Controls.tsx new file mode 100644 index 00000000000000..40fde0a89492dd --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/Controls.tsx @@ -0,0 +1,878 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import * as React from 'react'; +import AspectRatio from '@mui/joy/AspectRatio'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Divider, { DividerProps } from '@mui/joy/Divider'; +import IconButton, { iconButtonClasses, IconButtonProps } from '@mui/joy/IconButton'; +import Input from '@mui/joy/Input'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import LinearProgress from '@mui/joy/LinearProgress'; +import List from '@mui/joy/List'; +import ListSubheader from '@mui/joy/ListSubheader'; +import ListItem from '@mui/joy/ListItem'; +import ListItemContent from '@mui/joy/ListItemContent'; +import ListItemButton from '@mui/joy/ListItemButton'; +import ListDivider from '@mui/joy/ListDivider'; +import Tabs from '@mui/joy/Tabs'; +import TabList from '@mui/joy/TabList'; +import Tab from '@mui/joy/Tab'; +import Typography from '@mui/joy/Typography'; +import Switch from '@mui/joy/Switch'; +import Slider from '@mui/joy/Slider'; +import Sheet, { SheetProps } from '@mui/joy/Sheet'; +import InfoOutlined from '@mui/icons-material/InfoOutlined'; +import AddCircle from '@mui/icons-material/AddCircle'; +import PlayArrow from '@mui/icons-material/PlayArrowRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import CancelRoundedIcon from '@mui/icons-material/CancelRounded'; +import WbSunny from '@mui/icons-material/WbSunnyOutlined'; +import LightMode from '@mui/icons-material/LightModeOutlined'; +import CheckRounded from '@mui/icons-material/CheckRounded'; +import MenuRounded from '@mui/icons-material/MenuRounded'; +import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; +import CropFreeIcon from '@mui/icons-material/CropFree'; +import AddRoundedIcon from '@mui/icons-material/AddRounded'; +import UploadIcon from '@mui/icons-material/UploadOutlined'; +import Frame from './Frame'; + +function Navbar({ sx, ...props }: SheetProps) { + return ( + + ); +} + +function VerticalSeparator({ sx, ...props }: DividerProps) { + return ( + + ); +} + +function ListItemRightAction({ sx, ...props }: IconButtonProps) { + return ( + + ); +} + +function ListItemLeftAction({ sx, ...props }: IconButtonProps) { + return ( + + ); +} + +export default function Views() { + return ( + .wrapper': { + display: 'flex', + flexDirection: 'column', + gap: '12px', + }, + }} + > + + + + + + + + + + + + + + + + + + + + {(['sm', 'md', 'lg'] as const).map((size) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + + + + + + + + Label + Label + Label + + + + + + + + + Title + + + + + + + + + + + + + + + + + + Title + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Sending… + + + + + + + + + Name + + + + } + sx={{ flex: 1, ml: '52px' }} + /> + + + + + + + + + + Title + + + Title + + + + + Title + + Detail + + + + + + Title + + + + + + + + + Title + + + + + + + + + Title + + + + + + + + + Title + + + + + + + + + + + + Title + + + + + + + + Label + Destructive Action + Destructive Action + + + + + + + + + Title + + Subtitle + + + + + + + Title + + Subtitle + + + + Detail + + + + + + + Title + + Subtitle + + + + + + + + + + + + Title + + Subtitle + + + + + + + + + + + + Title + + Subtitle + + + + + + + + + + + + Title + + Subtitle + + + + + + + + + + + + + + + Title + + Subtitle + + + + + + + + + + + + + + + + Title + + + + + Title + + + + + Title + + + + + + + + Grouped table view header + + + + + + Title + + + + + Title + + + + + Title + + + + + + + Grouped table view footer + + + + + + Title + + + + + Title + + + + + Title + + + + + + + + Grouped table view header + + + + Title + + + + + Title + + + + + Title + + + + + Grouped table view footer + + + + + + + + + + + + A + + Alexander Valley + + Anderson Valley + + Atlas Peak + + + + B + + Bennett Valley + + + + C + + Calistoga + + Chalk Hill + + + + D + + Diamond Mountain + + Dry Creek Vally + + + + F + + Fort Ross / Seaview + + + + G + + Green Valley + + + + H + + Howell Mountain + + + + + {['#', 'A', 'B', 'C', 'D', 'F', 'G'].map((text) => ( + ({ + ...theme.typography.caption2, + lineHeight: '10px', + fontWeight: 'lg', + })} + > + {text} + + ))} + + + + + + + + [role="separator"]': { + height: 8, + marginInline: 0, + backgroundColor: 'rgba(0 0 0 / 0.08)', + }, + }} + > + + + + + + Label + + Sublabel + + + + + + + + + + + Action + + + + + Action + + + + + Action + + + + + + + + + Action + + + + + Action + + + + + Action + + + + + Action + + + + + + + + + Action + + + + + Action + + + + + Action + + + + + Action + + + + + + + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/Frame.tsx b/docs/data/joy/getting-started/templates/ios/Frame.tsx new file mode 100644 index 00000000000000..be107598da6a2b --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/Frame.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import Box, { BoxProps } from '@mui/joy/Box'; + +export default function Frame({ name, sx, ...props }: BoxProps & { name?: string }) { + return ( + ({ + ...(name && { + marginTop: '24px', + position: 'relative', + '&:before': { + content: `'${name}'`, + color: theme.vars.palette.info.plainColor, + fontFamily: theme.vars.fontFamily.body, + display: 'block', + position: 'absolute', + top: 0, + left: 0, + transform: 'translateY(-100%)', + letterSpacing: '0.1px', + padding: '4px 6px', + ...theme.typography.caption1, + }, + }), + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + /> + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/Header.tsx b/docs/data/joy/getting-started/templates/ios/Header.tsx new file mode 100644 index 00000000000000..4bf227ba52fe2f --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/Header.tsx @@ -0,0 +1,100 @@ +import * as React from 'react'; +import { useColorScheme } from '@mui/joy/styles'; +import GlobalStyles from '@mui/joy/GlobalStyles'; +import Sheet from '@mui/joy/Sheet'; +import IconButton from '@mui/joy/IconButton'; +import Typography from '@mui/joy/Typography'; +import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded'; +import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded'; +import InsertPhotoOutlinedIcon from '@mui/icons-material/InsertPhotoOutlined'; +import HideImageOutlinedIcon from '@mui/icons-material/HideImageOutlined'; +import GitHubIcon from '@mui/icons-material/GitHub'; + +function ModeToggle() { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return ; + } + return ( + { + if (mode === 'light') { + setMode('dark'); + } else { + setMode('light'); + } + }} + > + {mode === 'light' ? : } + + ); +} + +export default function Navigation() { + const [hasWallpaper, setHasWallpaper] = React.useState(true); + return ( + ({ + position: 'sticky', + top: 0, + px: 2, + gridArea: 'header', + display: 'flex', + gap: 1, + alignItems: 'center', + boxShadow: + '0 0 0 0.5px rgba(0 0 0 / .04), 0 3px 8px 0px rgba(0 0 0 / .15), 0 3px 1px 0 rgba(0 0 0 / .06)', + zIndex: 1, + ...theme.materials.navbar, + })} + > + {hasWallpaper && ( + ({ + body: { + backgroundImage: `url(/static/images/templates/ios-wallpaper-light.png)`, + backgroundSize: 'cover', + backgroundRepeat: 'no-repeat', + backgroundAttachment: 'fixed', + [theme.getColorSchemeSelector('dark')]: { + backgroundImage: `url(/static/images/templates/ios-wallpaper-dark.png)`, + }, + }, + })} + /> + )} + + Joy UI — iOS Theme + + + + + setHasWallpaper(!hasWallpaper)} + variant="outlined" + color="neutral" + size="sm" + > + {hasWallpaper ? : } + + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/Navigation.tsx b/docs/data/joy/getting-started/templates/ios/Navigation.tsx new file mode 100644 index 00000000000000..8c4d651a8f9a68 --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/Navigation.tsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import Sheet from '@mui/joy/Sheet'; +import List from '@mui/joy/List'; +import ListDivider from '@mui/joy/ListDivider'; +import ListItem from '@mui/joy/ListItem'; +import IconButton, { iconButtonClasses } from '@mui/joy/IconButton'; +import Tooltip from '@mui/joy/Tooltip'; +import ColorLensIcon from '@mui/icons-material/ColorLens'; +import TextFieldsIcon from '@mui/icons-material/TextFields'; +import LayersIcon from '@mui/icons-material/Layers'; +import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit'; +import TuneIcon from '@mui/icons-material/Tune'; +import ViewDayIcon from '@mui/icons-material/ViewDay'; + +export type NavigationView = + | 'bars' + | 'controls' + | 'views' + | 'color' + | 'text' + | 'material'; + +export default function Navigation({ + value, + onItemClick, +}: { + value: NavigationView; + onItemClick: (value: NavigationView) => void; +}) { + return ( + ({ + position: 'sticky', + top: 'calc(var(--header-height) + 0.5rem)', + gridArea: 'nav', + m: '0.5rem', + ml: 'calc(0.5rem + env(safe-area-inset-left))', + maxHeight: + 'calc(100vh - var(--header-height) - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))', + borderRadius: '10px', + [`& .${iconButtonClasses.variantSoft}`]: { + backgroundColor: 'rgba(255 255 255 / 0.6)', + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: 'rgba(0 0 0 / 0.5)', + }, + }, + ...theme.materials.ultrathin, + })} + > + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/TypographySystem.tsx b/docs/data/joy/getting-started/templates/ios/TypographySystem.tsx new file mode 100644 index 00000000000000..05d6237d6566c2 --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/TypographySystem.tsx @@ -0,0 +1,619 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Typography from '@mui/joy/Typography'; + +export default function TypographySystem() { + return ( + .wrapper': { + display: 'flex', + flexDirection: 'column', + gap: '11px', + }, + }} + > + Label Color + Secondary Label Color + Tertiary Label Color + Quarternary Label Color + + + LargeTitle + + LargeTitle + + + + + LargeTitle + + + LargeTitle + + + + + LargeTitle + + + LargeTitle + + + + + LargeTitle + + + LargeTitle + + + + + TITLE1 + + Title1 + + + + + Title1 + + + Title1 + + + + + Title1 + + + Title1 + + + + + Title1 + + + Title1 + + + + + Title2 + + Title2 + + + + + Title2 + + + Title2 + + + + + Title2 + + + Title2 + + + + + Title2 + + + Title2 + + + + + Title3 + + Title3 + + + + + Title3 + + + Title3 + + + + + Title3 + + + Title3 + + + + + Title3 + + + Title3 + + + + + Headline + + Headline + + + + + Headline + + + Headline + + + + + Headline + + + Headline + + + + + Headline + + + Headline + + + + + Body + Body + Body + + Body + + + + Body + + Body + + + Body + + + Body + + + + Body + + Body + + + Body + + + Body + + + + Body + + Body + + + Body + + + Body + + + + + Callout + + Callout + + + Callout + + + Callout + + + + + Callout + + + Callout + + + Callout + + + Callout + + + + + Callout + + + Callout + + + Callout + + + Callout + + + + + Callout + + + Callout + + + Callout + + + Callout + + + + + Subheadline + + Subheadline + + + Subheadline + + + Subheadline + + + + + Subheadline + + + Subheadline + + + Subheadline + + + Subheadline + + + + + Subheadline + + + Subheadline + + + Subheadline + + + Subheadline + + + + + Subheadline + + + Subheadline + + + Subheadline + + + Subheadline + + + + + FOOTNOTE + + Footnote + + + Footnote + + + Footnote + + + + + FOOTNOTE + + + FOOTNOTE + + + Footnote + + + Footnote + + + + + Footnote + + + Footnote + + + Footnote + + + Footnote + + + + + Footnote + + + Footnote + + + Footnote + + + Footnote + + + + + Caption1 + + Caption1 + + + Caption1 + + + Caption1 + + + + + Caption1 + + + Caption1 + + + Caption1 + + + Caption1 + + + + + Caption1 + + + Caption1 + + + Caption1 + + + Caption1 + + + + + Caption1 + + + Caption1 + + + Caption1 + + + Caption1 + + + + + Caption2 + + Caption2 + + + Caption2 + + + Caption2 + + + + + Caption2 + + + Caption2 + + + Caption2 + + + Caption2 + + + + + Caption2 + + + Caption2 + + + Caption2 + + + Caption2 + + + + + Caption2 + + + Caption2 + + + Caption2 + + + Caption2 + + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/ViewOverlay.tsx b/docs/data/joy/getting-started/templates/ios/ViewOverlay.tsx new file mode 100644 index 00000000000000..694ad5f42ecde9 --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/ViewOverlay.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import Box, { BoxProps } from '@mui/joy/Box'; + +export default function ViewOverlay({ + name, + sx, + ...props +}: BoxProps & { name?: string }) { + return ( + ({ + position: 'relative', + display: 'flex', + flexDirection: 'column', + bgcolor: 'rgba(0 0 0 / 0.2)', + [theme.getColorSchemeSelector('dark')]: { + bgcolor: 'rgba(0 0 0 / 0.6)', + }, + ...(name && { + marginTop: '24px', + position: 'relative', + '&:before': { + content: `'${name}'`, + color: theme.vars.palette.info.plainColor, + fontFamily: theme.vars.fontFamily.body, + display: 'block', + position: 'absolute', + top: 0, + transform: 'translateY(-100%)', + letterSpacing: '0.1px', + padding: '4px 6px', + ...theme.typography.caption1, + }, + }), + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + /> + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/Views.tsx b/docs/data/joy/getting-started/templates/ios/Views.tsx new file mode 100644 index 00000000000000..9d78e771f6293e --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/Views.tsx @@ -0,0 +1,196 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Divider from '@mui/joy/Divider'; +import Input from '@mui/joy/Input'; +import List from '@mui/joy/List'; +import ListDivider from '@mui/joy/ListDivider'; +import ListItem from '@mui/joy/ListItem'; +import ListItemContent from '@mui/joy/ListItemContent'; +import ListItemButton from '@mui/joy/ListItemButton'; +import ModalDialog from '@mui/joy/ModalDialog'; +import Typography from '@mui/joy/Typography'; +import Fingerprint from '@mui/icons-material/Fingerprint'; +import ViewOverlay from './ViewOverlay'; + +export default function Views() { + return ( + div': { + minHeight: 500, + }, + }} + > + + + + + + + A Short Title is Best + + + A message should be a short, complete sentence + + + + + + Action + + + + Action + + + + Action + + + + + + + + + + A Short Title is Best + + A message should be a short, complete sentence + + + + + + Label + + + + + + + + + A Short Title is Best + + A message should be a short, complete sentence + + + + + Cancel + + + Action + + + + + + + + A Short Title is Best + + A message should be a short, complete sentence + + + + + + Label + + + Label + + Label + + + + + + + + A Short Title is Best + + A message should be a short, complete sentence + + + + + + Label + + + Label + + + + + + + + + + Touch ID + + john.appleseed@icloud.com + + + + + + Cancel + + + + + + ); +} diff --git a/docs/data/joy/getting-started/templates/ios/theme.tsx b/docs/data/joy/getting-started/templates/ios/theme.tsx new file mode 100644 index 00000000000000..196c16654a79a4 --- /dev/null +++ b/docs/data/joy/getting-started/templates/ios/theme.tsx @@ -0,0 +1,889 @@ +import { CSSObject } from '@mui/system'; +import { extendTheme } from '@mui/joy/styles'; +import { tabClasses } from '@mui/joy/Tab'; +import { sliderClasses } from '@mui/joy/Slider'; +import { listItemButtonClasses } from '@mui/joy/ListItemButton'; + +interface IosMaterial { + materials?: { + thick: CSSObject; + regular: CSSObject; + thin: CSSObject; + ultrathin: CSSObject; + navbar: CSSObject; + toolbar: CSSObject; + }; +} + +declare module '@mui/joy/ModalDialog' { + interface ModalDialogPropsVariantOverrides { + ios: true; + } +} + +declare module '@mui/joy/Tabs' { + interface TabsPropsVariantOverrides { + ios: true; + iosBar: true; + } +} + +declare module '@mui/joy/TabList' { + interface TabListPropsVariantOverrides { + ios: true; + iosBar: true; + } +} + +declare module '@mui/joy/Tab' { + interface TabPropsVariantOverrides { + ios: true; + iosBar: true; + } +} + +declare module '@mui/joy/Button' { + interface ButtonPropsVariantOverrides { + label: true; + } +} + +declare module '@mui/joy/IconButton' { + interface IconButtonPropsVariantOverrides { + ios: true; + } +} + +declare module '@mui/joy/Input' { + interface InputPropsVariantOverrides { + ios: true; + } +} + +declare module '@mui/joy/Switch' { + interface SwitchPropsVariantOverrides { + ios: true; + } +} + +declare module '@mui/joy/Slider' { + interface SliderPropsVariantOverrides { + ios: true; + } +} + +declare module '@mui/joy/LinearProgress' { + interface LinearProgressPropsVariantOverrides { + ios: true; + } +} + +declare module '@mui/joy/styles' { + interface TypographySystemOverrides { + /* To remove the default typography system from the types, uncomment the section below. */ + // display1: false; + // display2: false; + // h1: false; + // h2: false; + // h3: false; + // h4: false; + // h5: false; + // h6: false; + // body1: false; + // body2: false; + // body3: false; + // body4: false; + // body5: false; + + largeTitle: true; + title1: true; + title2: true; + title3: true; + headline: true; + body: true; + callout: true; + subheadline: true; + footnote: true; + caption1: true; + caption2: true; + } + + interface Palette { + system: { + red: string; + orange: string; + yellow: string; + green: string; + mint: string; + teal: string; + cyan: string; + blue: string; + indigo: string; + purple: string; + pink: string; + brown: string; + black: string; + grey: string; + grey2: string; + grey3: string; + grey4: string; + grey5: string; + grey6: string; + white: string; + userAccent: string; + }; + fill: { + primary: string; + secondary: string; + tertiary: string; + quarternary: string; + }; + label: { + primary: string; + secondary: string; + tertiary: string; + quarternary: string; + }; + groupedBackground: { + primary: string; + secondary: string; + tertiary: string; + primaryElevated: string; + secondaryElevated: string; + tertiaryElevated: string; + }; + separator: { + opaque: string; + nonOpaque: string; + }; + } + + interface PaletteBackground { + primary: string; + secondary: string; + tertiary: string; + primaryElevated: string; + secondaryElevated: string; + tertiaryElevated: string; + } + + interface Theme extends IosMaterial {} + + interface CssVarsThemeOptions extends IosMaterial {} +} + +export default extendTheme({ + cssVarPrefix: 'ios', + colorSchemes: { + light: { + palette: { + primary: { + plainColor: 'var(--ios-palette-system-blue)', + plainHoverBg: undefined, + plainActiveBg: 'var(--ios-palette-fill-tertiary)', + plainDisabledColor: 'rgba(60 60 67 / 0.3)', + softColor: 'var(--ios-palette-system-blue)', + softHoverColor: undefined, + softBg: 'rgba(0 122 255 / 0.15)', + softHoverBg: undefined, + softActiveBg: 'rgba(0 122 255 / 0.2)', + softDisabledBg: 'rgba(120 120 128 / 0.16)', + softDisabledColor: 'rgba(60 60 67 / 0.3)', + solidBg: 'var(--ios-palette-system-blue)', + solidHoverBg: undefined, + solidActiveBg: 'rgba(0 122 255 / 0.8)', + solidDisabledBg: 'rgba(120 120 128 / 0.16)', + solidDisabledColor: 'rgba(60 60 67 / 0.3)', + mainChannel: '0 122 255', + }, + neutral: { + plainColor: 'var(--ios-palette-label-primary)', + plainHoverColor: undefined, + plainHoverBg: undefined, + plainActiveBg: 'var(--ios-palette-fill-tertiary)', + plainDisabledColor: 'rgba(60 60 67 / 0.3)', + softColor: 'var(--ios-palette-system-blue)', + softHoverColor: undefined, + softBg: 'rgba(120 120 128 / 0.16)', + softDisabledBg: 'rgba(120 120 128 / 0.16)', + softDisabledColor: 'rgba(60 60 67 / 0.3)', + softHoverBg: undefined, + softActiveBg: 'rgba(120 120 128 / 0.32)', + }, + danger: { + plainColor: 'var(--ios-palette-system-red)', + solidBg: 'var(--ios-palette-system-red)', + }, + system: { + red: '#FF3B30', + orange: '#FF9500', + yellow: '#FFCC00', + green: '#34C759', + mint: '#00C7BE', + teal: '#30B0C7', + cyan: '#32ADE6', + blue: '#007AFF', + indigo: '#5856D6', + purple: '#AF52DE', + pink: '#FF2D55', + brown: '#A2845E', + black: '#000000', + grey: '#8E8E93', + grey2: '#AEAEB2', + grey3: '#C7C7CC', + grey4: '#D1D1D6', + grey5: '#E5E5EA', + grey6: '#F2F2F7', + white: '#FFFFFF', + userAccent: '#0A7AFF', + }, + background: { + // Joy specific + body: 'var(--ios-palette-system-grey4)', + // ios specific + primary: '#FFFFFF', + secondary: '#F2F2F7', + tertiary: '#FFFFFF', + primaryElevated: '#FFFFFF', + secondaryElevated: '#F2F2F7', + tertiaryElevated: '#FFFFFF', + }, + groupedBackground: { + primary: '#F2F2F7', + secondary: '#FFFFFF', + tertiary: '#F2F2F7', + primaryElevated: '#F2F2F7', + secondaryElevated: '#FFFFFF', + tertiaryElevated: '#F2F2F7', + }, + label: { + primary: '#000000', + secondary: 'rgba(60 60 67 / .60)', + tertiary: 'rgba(60 60 67 / .30)', + quarternary: 'rgba(60 60 67 / .18)', + }, + fill: { + primary: 'rgba(120 120 128 / .20)', + secondary: 'rgba(120 120 128 / .16)', + tertiary: 'rgba(120 120 128 / .12)', + quarternary: 'rgba(120 120 128 / .8)', + }, + separator: { + opaque: '#C6C6C8', + nonOpaque: 'rgba(60 60 67 / .36)', + }, + focusVisible: 'var(--ios-palette-system-userAccent)', + }, + }, + dark: { + palette: { + primary: { + plainColor: 'var(--ios-palette-system-blue)', + plainHoverBg: undefined, + plainActiveBg: 'var(--ios-palette-fill-tertiary)', + plainDisabledColor: 'rgba(235 235 245 / 0.3)', + softColor: 'var(--ios-palette-system-blue)', + softHoverColor: undefined, + softBg: 'rgba(16 109 220 / 0.3)', + softHoverBg: undefined, + softActiveBg: 'rgba(16 109 220 / 0.6)', + softDisabledBg: 'rgba(120 120 128 / 0.32)', + softDisabledColor: 'rgba(235 235 245 / 0.3)', + solidBg: 'var(--ios-palette-system-blue)', + solidHoverBg: undefined, + solidActiveBg: 'rgba(0 122 255 / 0.8)', + solidDisabledBg: 'rgba(120 120 128 / 0.32)', + solidDisabledColor: 'rgba(235 235 245 / 0.3)', + mainChannel: '10 132 255', + }, + neutral: { + plainColor: 'var(--ios-palette-label-primary)', + plainHoverColor: undefined, + plainHoverBg: undefined, + plainActiveBg: 'var(--ios-palette-fill-tertiary)', + plainDisabledColor: 'rgba(235 235 245 / 0.3)', + softColor: 'var(--ios-palette-system-blue)', + softHoverColor: undefined, + softBg: 'rgba(120 120 128 / 0.32)', + softDisabledBg: 'rgba(120 120 128 / 0.24)', + softDisabledColor: 'rgba(235 235 245 / 0.3)', + softHoverBg: undefined, + softActiveBg: 'rgba(120 120 128 / 0.6)', + }, + danger: { + plainColor: 'var(--ios-palette-system-red)', + solidBg: 'var(--ios-palette-system-red)', + }, + system: { + red: '#FF453A', + orange: '#FF9F0A', + yellow: '#FFD60A', + green: '#30D158', + mint: '#63E6E2', + teal: '#40CBE0', + cyan: '#64D2FF', + blue: '#0A84FF', + indigo: '#5E5CE6', + purple: '#BF5AF2', + pink: '#FF375F', + brown: '#AC8E68', + black: '#000000', + grey: '#8E8E93', + grey2: '#636366', + grey3: '#48484A', + grey4: '#3A3A3C', + grey5: '#2C2C2E', + grey6: '#1C1C1E', + white: '#FFFFFF', + userAccent: '#0084FF', + }, + background: { + primary: '#000000', + secondary: '#1C1C1E', + tertiary: '#2C2C2E', + primaryElevated: '#1C1C1E', + secondaryElevated: '#2C2C2E', + tertiaryElevated: '#3A3A3C', + }, + groupedBackground: { + primary: '#000000', + secondary: '#1C1C1E', + tertiary: '#2C2C2E', + primaryElevated: '#1C1C1E', + secondaryElevated: '#2C2C2E', + tertiaryElevated: '#3A3A3C', + }, + label: { + primary: '#ffffff', + secondary: 'rgba(235 235 245 / .60)', + tertiary: 'rgba(235 235 245 / .30)', + quarternary: 'rgba(235 235 245 / .18)', + }, + fill: { + primary: 'rgba(120 120 128 / .36)', + secondary: 'rgba(120 120 128 / .32)', + tertiary: 'rgba(120 120 128 / .24)', + quarternary: 'rgba(120 120 128 / .18)', + }, + separator: { + opaque: '#38383A', + nonOpaque: 'rgba(84 84 88 / .65)', + }, + }, + }, + }, + fontFamily: { + body: '"SF Pro", var(--ios-fontFamily-fallback)', + }, + materials: { + thick: { + background: `linear-gradient(rgba(255 255 255 / 0.78), rgba(255 255 255 / 0.78)) + ,linear-gradient(rgba(255 255 255 / 0.34), rgba(255 255 255 / 0.34))`, + backdropFilter: 'blur(50px)', + [`[data-joy-color-scheme="dark"] &`]: { + background: 'rgba(0 0 0 / 0.6)', + }, + }, + regular: { + background: `linear-gradient(rgba(255 255 255 / 0.39), rgba(255 255 255 / 0.39)) + ,linear-gradient(rgba(255 255 255 / 0.27), rgba(255 255 255 / 0.27))`, + backdropFilter: 'blur(50px) saturate(121%)', + [`[data-joy-color-scheme="dark"] &`]: { + background: 'rgba(0 0 0 / 0.41)', + backdropFilter: 'blur(50px)', + }, + }, + thin: { + background: `linear-gradient(rgba(255 255 255 / 0.51), rgba(255 255 255 / 0.51)) + ,linear-gradient(rgba(255 255 255 / 0.05), rgba(255 255 255 / 0.05))`, + backdropFilter: 'blur(50px) saturate(145%)', + [`[data-joy-color-scheme="dark"] &`]: { + background: 'rgba(0 0 0 / 0.26)', + backdropFilter: 'blur(50px)', + }, + }, + ultrathin: { + background: `linear-gradient(rgba(255 255 255 / 0.12), rgba(255 255 255 / 0.12)) + ,linear-gradient(rgba(255 255 255 / 0.11), rgba(255 255 255 / 0.11))`, + backdropFilter: 'blur(30px)', + [`[data-joy-color-scheme="dark"] &`]: { + background: 'rgba(0 0 0 / 0.1)', + backdropFilter: 'blur(50px)', + }, + }, + navbar: { + backgroundColor: 'rgba(249 249 249 / 0.94)', + boxShadow: '0 0.33px 0 0 rgba(0 0 0 / 0.3)', + backdropFilter: 'blur(20px)', + [`[data-joy-color-scheme="dark"] &`]: { + backgroundColor: 'rgba(29 29 29 / 0.94)', + boxShadow: '0 0.33px 0 0 rgba(255 255 255 / 0.15)', + backdropFilter: 'blur(20px) saturate(130%)', + }, + }, + toolbar: { + backgroundColor: 'rgba(249 249 249 / 0.94)', + boxShadow: '0 -0.5px 0 0 rgba(0 0 0 / 0.3)', + backdropFilter: 'blur(20px)', + [`[data-joy-color-scheme="dark"] &`]: { + backgroundColor: 'rgba(22 22 22 / 0.8)', + boxShadow: '0 -0.5px 0 0 rgba(255 255 255 / 0.16)', + backdropFilter: 'blur(20px) saturate(130%)', + }, + }, + }, + unstable_sxConfig: { + material: { + style: (props) => props.theme.materials?.[props.material], + }, + }, + fontSize: { + xl3: '34px', + xl2: '28px', + xl: '22px', + lg: '20px', + md: '17px', + sm: '16px', + xs: '15px', + xs2: '13px', + xs3: '12px', + }, + typography: { + // @ts-ignore + display1: undefined, + display2: undefined, + h1: undefined, + h2: undefined, + h3: undefined, + h4: undefined, + h5: undefined, + h6: undefined, + body1: undefined, + body2: undefined, + body3: undefined, + body4: undefined, + body5: undefined, + largeTitle: { + fontSize: 'var(--ios-fontSize-xl3)', + lineHeight: '41px', + }, + title1: { + fontSize: 'var(--ios-fontSize-xl2)', + lineHeight: '34px', + }, + title2: { + fontSize: 'var(--ios-fontSize-xl)', + lineHeight: '28px', + }, + title3: { + fontSize: 'var(--ios-fontSize-lg)', + lineHeight: '24px', + }, + headline: { + fontSize: 'var(--ios-fontSize-md)', + lineHeight: '22px', + fontWeight: '600', + }, + body: { + fontSize: 'var(--ios-fontSize-md)', + lineHeight: '22px', + }, + callout: { + fontSize: 'var(--ios-fontSize-sm)', + lineHeight: '22px', + }, + subheadline: { + fontSize: 'var(--ios-fontSize-xs)', + lineHeight: '18px', + }, + footnote: { + fontSize: 'var(--ios-fontSize-xs2)', + lineHeight: '18px', + }, + caption1: { + fontSize: 'var(--ios-fontSize-xs3)', + lineHeight: '16px', + }, + caption2: { + fontSize: '11px', + lineHeight: '13px', + }, + }, + components: { + JoyTypography: { + defaultProps: { + level: 'body', + }, + }, + JoyLink: { + defaultProps: { + level: 'body', + }, + }, + JoyFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + ...theme.typography.body, + fontWeight: 'normal', + }), + }, + }, + JoyButton: { + styleOverrides: { + root: ({ ownerState, theme }) => [ + { + '--Icon-color': 'currentColor', + ...(ownerState.size === 'sm' && { + ...theme.typography.subheadline, + fontWeight: '400', + paddingInline: '10px', + minHeight: '28px', + borderRadius: '14px', + '--Button-gap': '0px', + }), + ...(ownerState.size === 'md' && { + fontWeight: '400', + minHeight: '34px', + paddingInline: '12px', + borderRadius: '17px', + '--Button-gap': '2px', + }), + ...(ownerState.size === 'lg' && { + fontWeight: '400', + minHeight: 50, + paddingInline: '20px', + borderRadius: '12px', + '--Button-gap': '2px', + }), + }, + ownerState.variant === 'label' && { + cursor: 'pointer', + minHeight: 44, + paddingInline: '17px', + color: theme.vars.palette.system.blue, + '&:active': { + backgroundColor: theme.vars.palette.fill.tertiary, + }, + }, + ], + startDecorator: ({ ownerState }) => ({ + ...(ownerState.size === 'sm' && { + '--Icon-margin': '0 0 0 -4.2px', + }), + ...(ownerState.size === 'md' && { + '--Icon-margin': '0 0 0 -5.17px', + }), + ...(ownerState.size === 'lg' && { + '--Icon-margin': '0 0 0 -8px', + }), + }), + }, + }, + JoyIconButton: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState, theme }) => [ + { + '--Icon-color': 'currentColor', + borderRadius: '50%', + cursor: 'pointer', + ...(ownerState.size === 'sm' && { + '--IconButton-size': '28px', + }), + }, + ownerState.variant === 'ios' && { + ...(ownerState.size === 'md' && { + '--IconButton-size': '44px', + '--Icon-fontSize': '28px', + }), + ...(ownerState.color === 'neutral' && { + color: theme.vars.palette.label.secondary, + }), + ...(ownerState.color === 'primary' && { + color: theme.vars.palette.system.blue, + }), + '&:active': { + backgroundColor: theme.vars.palette.fill.tertiary, + }, + }, + ], + }, + }, + JoySwitch: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState }) => ({ + ...(ownerState.variant === 'ios' && { + '--Switch-thumb-size': '27px', + '--Switch-track-height': '31px', + '--Switch-track-width': '51px', + '&:active': { + '--Switch-thumb-width': '32px', + }, + }), + }), + track: ({ ownerState, theme }) => ({ + ...(ownerState.variant === 'ios' && { + ...(!ownerState.checked && { + backgroundColor: theme.vars.palette.fill.secondary, + }), + ...(ownerState.checked && { + backgroundColor: theme.vars.palette.system.green, + }), + }), + }), + thumb: ({ ownerState }) => ({ + ...(ownerState.variant === 'ios' && { + backgroundColor: '#fff', + boxShadow: `0 0 0 0.5px rgba(0 0 0 / .04), 0 3px 8px 0px rgba(0 0 0 / .15), 0 3px 1px 0 rgba(0 0 0 / .06)`, + transition: 'width 0.2s, left 0.2s', + }), + }), + }, + }, + JoySlider: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState }) => ({ + ...(ownerState.variant === 'ios' && { + '--Slider-track-size': '4px', + '--Slider-thumb-size': '28px', + }), + }), + rail: ({ ownerState, theme }) => ({ + ...(ownerState.variant === 'ios' && { + backgroundColor: theme.vars.palette.fill.primary, + }), + }), + track: ({ ownerState, theme }) => ({ + ...(ownerState.variant === 'ios' && { + backgroundColor: theme.vars.palette.system.blue, + }), + }), + thumb: ({ ownerState }) => ({ + ...(ownerState.variant === 'ios' && { + backgroundColor: '#fff', + boxShadow: + '0 0.5px 4px 0 rgba(0 0 0 / .12), 0 6px 13px 0 rgba(0 0 0 / .12)', + [`&.${sliderClasses.focusVisible}`]: { + outline: 'none', + }, + '&::before': { + border: 'none', + }, + }), + }), + }, + }, + JoyList: { + styleOverrides: { + root: ({ ownerState }) => ({ + '--List-divider-gap': '0px', + ...(ownerState.size === 'md' && { + '--List-item-paddingY': '5px', + '--List-item-paddingX': '16px', + '--List-item-minHeight': '44px', + }), + }), + }, + }, + JoyListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + minBlockSize: '29px', + fontWeight: theme.vars.fontWeight.lg, + paddingBlock: '3px', + backgroundColor: theme.vars.palette.fill.secondary, + color: theme.vars.palette.label.primary, + ...theme.typography.body, + }), + }, + }, + JoyListDivider: { + defaultProps: { + inset: 'startDecorator', + }, + styleOverrides: { + root: ({ theme }) => ({ + '--Divider-thickness': '0.5px', + backgroundColor: theme.vars.palette.separator.nonOpaque, + }), + }, + }, + JoyLinearProgress: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + ...(ownerState.variant === 'ios' && { + '--LinearProgress-thickness': '4px', + backgroundColor: theme.vars.palette.fill.primary, + color: theme.vars.palette.system.blue, + }), + }), + }, + }, + JoyModalDialog: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState }) => [ + ownerState.variant === 'ios' && { + '--ModalDialog-padding': '0px', + minWidth: + 'min(calc(100vw - 2 * var(--ModalDialog-padding)), var(--ModalDialog-minWidth, 270px))', + boxShadow: 'none', + borderRadius: '14px', + backgroundColor: 'rgba(242 242 242 / 0.8)', + backdropFilter: 'blur(20px)', + textAlign: 'center', + [`[data-joy-color-scheme="dark"] &`]: { + backgroundColor: 'rgba(30 30 30 / 0.75)', + backdropFilter: 'blur(30px) saturate(90%)', + }, + [`& .${listItemButtonClasses.root}`]: { + flex: 1, + justifyContent: 'center', + }, + }, + ], + }, + }, + JoyFormControl: { + styleOverrides: { + root: { + '--FormLabel-alignSelf': 'center', + }, + }, + }, + JoyInput: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.variant === 'ios' && { + '--Input-focusedThickness': '0px', + '--Input-placeholderOpacity': '1', + '--Input-placeholderColor': theme.vars.palette.label.tertiary, + color: theme.vars.palette.label.primary, + }), + ...(ownerState.type === 'search' && { + '--Input-placeholderColor': theme.vars.palette.label.secondary, + backgroundColor: theme.vars.palette.fill.tertiary, + borderRadius: '11px', + }), + ...(ownerState.size === 'sm' && { + borderRadius: '5px', + minHeight: '26px', + }), + ...(ownerState.variant === 'outlined' && { + '--Input-focusedThickness': '0px', + borderWidth: '0.5px', + borderColor: 'rgba(60 60 67 / 0.29)', + [theme.getColorSchemeSelector('dark')]: { + borderColor: 'rgba(84 84 88 / 0.65)', + }, + }), + }), + input: ({ theme, ownerState }) => ({ + ...((ownerState.variant === 'ios' || + ownerState.variant === 'outlined') && { + caretColor: theme.vars.palette.system.blue, + }), + }), + }, + }, + JoyTabs: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState }) => ({ + ...(ownerState.variant === 'ios' && { + background: 'none', + }), + ...(ownerState.variant === 'iosBar' && { + background: 'none', + '--Tabs-gap': '0px', + }), + }), + }, + }, + JoyTabList: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + ...(ownerState.variant === 'ios' && { + '--List-radius': '8.91px', + '--List-padding': '2px', + '--List-item-minHeight': '24px', + backgroundColor: theme.vars.palette.fill.tertiary, + }), + ...(ownerState.variant === 'iosBar' && { + background: 'none', + justifyContent: 'space-around', + '--List-decorator-color': '#999999', + }), + }), + }, + }, + JoyTab: { + defaultProps: { + variant: 'ios', + }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + ...(ownerState.variant === 'ios' && { + fontSize: '13px', + lineHeight: '18px', + paddingTop: '3px', + paddingBottom: '3px', + ...(ownerState.selected && { + fontWeight: 600, + boxShadow: + '0 0 0 0.5px rgba(0 0 0 / .04), 0 0.5px 4px 0 rgba(0 0 0 / .12), 0 6px 13px 0 rgba(0 0 0 / .12)', + backgroundColor: '#fff', + '&:hover': { + backgroundColor: '#fff', + }, + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.system.grey2, + '&:hover': { + backgroundColor: theme.vars.palette.system.grey2, + }, + }, + }), + }), + ...(ownerState.variant === 'iosBar' && { + background: 'none', + '&:hover': { + background: 'none', + }, + fontSize: '10px', + lineHeight: '12px', + boxShadow: 'none', + color: theme.vars.palette.label.secondary, + fontWeight: theme.vars.fontWeight.md, + [`&.${tabClasses.selected}`]: { + color: theme.vars.palette.system.blue, + }, + '& svg': { + fontSize: theme.vars.fontSize.xl3, + }, + }), + }), + }, + }, + }, +}); diff --git a/docs/pages/joy-ui/getting-started/templates/ios.js b/docs/pages/joy-ui/getting-started/templates/ios.js new file mode 100644 index 00000000000000..861b737b9b0e29 --- /dev/null +++ b/docs/pages/joy-ui/getting-started/templates/ios.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import Head from 'docs/src/modules/components/Head'; +import TeamApp from 'docs/data/joy/getting-started/templates/ios/App'; +import { NextNProgressBar } from 'docs/src/modules/components/AppFrame'; + +export default function Team() { + return ( + + + + + + + + ); +} diff --git a/docs/public/static/images/templates/ios-wallpaper-dark.png b/docs/public/static/images/templates/ios-wallpaper-dark.png new file mode 100644 index 00000000000000..89b5a72c34a5fd Binary files /dev/null and b/docs/public/static/images/templates/ios-wallpaper-dark.png differ diff --git a/docs/public/static/images/templates/ios-wallpaper-light.png b/docs/public/static/images/templates/ios-wallpaper-light.png new file mode 100644 index 00000000000000..5484666712c234 Binary files /dev/null and b/docs/public/static/images/templates/ios-wallpaper-light.png differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg index fba75fcf7fdbef..05e7785c6a1265 100644 Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg index b7f37a1749c63d..06e843ffefbd64 100644 Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg index 4c6463bd121e50..fda8ca60ed64ae 100644 Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg index f80e749a2f1ca1..6efa784114c75b 100644 Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/ios-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/ios-dark.jpg new file mode 100644 index 00000000000000..7dcf04276f8388 Binary files /dev/null and b/docs/public/static/screenshots/joy-ui/getting-started/templates/ios-dark.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/ios.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/ios.jpg new file mode 100644 index 00000000000000..04ed37746bbd39 Binary files /dev/null and b/docs/public/static/screenshots/joy-ui/getting-started/templates/ios.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg index 5ad08bde8d8d10..e013441e347c26 100644 Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg differ diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg index e7fbb05cfb2565..5d565730c8e535 100644 Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg differ diff --git a/docs/scripts/generateTemplateScreenshots.ts b/docs/scripts/generateTemplateScreenshots.ts index 7587bf70255cde..cdf4d1967afbcd 100644 --- a/docs/scripts/generateTemplateScreenshots.ts +++ b/docs/scripts/generateTemplateScreenshots.ts @@ -7,6 +7,7 @@ const urls = [ '/joy-ui/getting-started/templates/email/', '/joy-ui/getting-started/templates/files/', '/joy-ui/getting-started/templates/team/', + '/joy-ui/getting-started/templates/ios/', ]; (async () => {