diff --git a/dist/OphInput.d.ts b/dist/OphInput.d.ts new file mode 100644 index 0000000..839d899 --- /dev/null +++ b/dist/OphInput.d.ts @@ -0,0 +1,8 @@ +import * as react from 'react'; +import { OutlinedInputProps, Theme } from '@mui/material'; +import { SystemProps } from '@mui/system'; + +type OphInputProps = Omit | 'label'>; +declare const OphInput: react.ForwardRefExoticComponent & react.RefAttributes>; + +export { OphInput, type OphInputProps }; diff --git a/dist/OphInput.js b/dist/OphInput.js new file mode 100644 index 0000000..d24de95 --- /dev/null +++ b/dist/OphInput.js @@ -0,0 +1,8 @@ +"use client"; +import { + OphInput +} from "./chunk-OY7DSKP6.js"; +export { + OphInput +}; +//# sourceMappingURL=OphInput.js.map \ No newline at end of file diff --git a/dist/OphInput.js.map b/dist/OphInput.js.map new file mode 100644 index 0000000..a464c67 --- /dev/null +++ b/dist/OphInput.js.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":""} \ No newline at end of file diff --git a/dist/chunk-T67FNJ7N.js b/dist/chunk-2Y6NCBS3.js similarity index 82% rename from dist/chunk-T67FNJ7N.js rename to dist/chunk-2Y6NCBS3.js index b0dcda7..d51e829 100644 --- a/dist/chunk-T67FNJ7N.js +++ b/dist/chunk-2Y6NCBS3.js @@ -3,7 +3,7 @@ import { focusOutlineStyle, getLocale -} from "./chunk-Z3OLQMEP.js"; +} from "./chunk-XMAEUMNX.js"; import { ophColors } from "./chunk-LVP2BKUK.js"; @@ -56,7 +56,8 @@ var COMMON_THEME_OPTIONS = { styleOverrides: { root: { borderRadius: "2px", - padding: "4px 16px", + padding: "6px 16px", + lineHeight: "24px", "&.Mui-disabled": { cursor: "not-allowed" }, @@ -64,7 +65,7 @@ var COMMON_THEME_OPTIONS = { width: "24px", height: "24px" }, - ...focusOutlineStyle(), + "&.Mui-focusVisible": focusOutlineStyle(), variants: [ { props: { variant: "contained", color: "primary" }, @@ -186,7 +187,10 @@ var COMMON_THEME_OPTIONS = { "& .MuiSvgIcon-root": { zIndex: 1 }, - ...focusOutlineStyle({ outlineOffset: "-2px", borderRadius: "5px" }), + "&.Mui-focusVisible": focusOutlineStyle({ + outlineOffset: "-2px", + borderRadius: "5px" + }), variants: [ { props: { color: "primary" }, @@ -245,7 +249,7 @@ var COMMON_THEME_OPTIONS = { "&:hover, &:active": { textDecoration: "underline" }, - ...focusOutlineStyle({ + "&.Mui-focusVisible": focusOutlineStyle({ textDecoration: "underline", borderRadius: "1px" }), @@ -277,20 +281,77 @@ var COMMON_THEME_OPTIONS = { } } }, + MuiInputBase: { + styleOverrides: { + root: { + borderColor: ophColors.grey800, + borderRadius: "2px" + } + } + }, MuiOutlinedInput: { styleOverrides: { - root: ({ theme }) => { - return { - backgroundColor: ophColors.white, - ".MuiOutlinedInput-notchedOutline": { - borderRadius: "2px", - borderWidth: "1px" + input: ({ theme }) => ({ + padding: theme.spacing(1, 1.5), + lineHeight: "24px", + height: "auto" + }), + root: { + variants: [ + { + props: () => true, + style: ({ theme }) => ({ + "& .MuiInputAdornment-root": { + margin: theme.spacing(1, 1, 1, 0) + }, + padding: 0, + backgroundColor: ophColors.white, + borderRadius: "2px", + "&:has(input:focus-visible)": focusOutlineStyle({ + borderRadius: "2px" + }), + "& .MuiSvgIcon-root": { + color: ophColors.grey800 + }, + "& .MuiOutlinedInput-notchedOutline": { + // Fix: nothcedOutline touches focus outline on firefox when fullscreen + top: "-4.5px", + borderColor: ophColors.grey800, + borderRadius: "2px", + borderWidth: "1px" + } + }) }, - "&:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline": { - borderWidth: "2px", - borderColor: theme.palette.primary.main + { + props: { error: true }, + style: ({ theme }) => ({ + color: theme.palette.error.main, + "& .MuiSvgIcon-root": { + color: theme.palette.error.main + } + }) + }, + { + props: (props) => props.color === "primary" && !props.disabled, + style: ({ theme }) => ({ + "&:hover .MuiOutlinedInput-notchedOutline": { + borderWidth: "2px", + borderColor: theme.palette.primary.main + } + }) + }, + { + props: { disabled: true }, + style: { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: ophColors.grey400 + }, + "& .MuiSvgIcon-root": { + color: ophColors.grey400 + } + } } - }; + ] } } }, @@ -310,7 +371,9 @@ var COMMON_THEME_OPTIONS = { MuiSelect: { styleOverrides: { select: { - padding: "12px" + "&:focus-visible": focusOutlineStyle({ + borderRadius: "2px" + }) } } }, @@ -329,8 +392,6 @@ var COMMON_THEME_OPTIONS = { }, styleOverrides: { root: ({ theme }) => ({ - paddingTop: 0, - paddingBottom: 0, color: ophColors.grey900, borderColor: theme.palette.primary.main, borderWidth: "2px", @@ -350,8 +411,7 @@ var COMMON_THEME_OPTIONS = { backgroundColor: ophColors.white, borderColor: theme.palette.primary.light, color: theme.palette.primary.main - }, - "&.Mui-disabled": {} + } }) } }, @@ -513,4 +573,4 @@ export { useOphTheme, OphThemeProvider }; -//# sourceMappingURL=chunk-T67FNJ7N.js.map \ No newline at end of file +//# sourceMappingURL=chunk-2Y6NCBS3.js.map \ No newline at end of file diff --git a/dist/chunk-2Y6NCBS3.js.map b/dist/chunk-2Y6NCBS3.js.map new file mode 100644 index 0000000..72ba636 --- /dev/null +++ b/dist/chunk-2Y6NCBS3.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/theme/theme.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ophColors } from '../colors';\nimport { CssBaseline } from '@mui/material';\nimport {\n type Theme,\n type ThemeOptions,\n createTheme,\n ThemeProvider,\n} from '@mui/material/styles';\nimport { deepmerge } from '@mui/utils';\nimport { useMemo, type ReactNode } from 'react';\nimport type { OphThemeParams } from '../types';\nimport CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined';\nimport IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined';\nimport { focusOutlineStyle, getLocale } from './theme-utils';\n\nconst themeBase = createTheme({\n breakpoints: {\n values: {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1600,\n xxl: 1920,\n },\n },\n});\n\nconst COMMON_THEME_OPTIONS: ThemeOptions = {\n palette: {\n error: {\n main: ophColors.alias.error,\n },\n },\n components: {\n MuiAccordion: {\n defaultProps: {\n disableGutters: true,\n },\n styleOverrides: {\n root: {\n boxShadow: 'none',\n },\n },\n },\n MuiButton: {\n defaultProps: {\n disableRipple: true,\n disableElevation: true,\n },\n styleOverrides: {\n root: {\n borderRadius: '2px',\n padding: '6px 16px',\n lineHeight: '24px',\n '&.Mui-disabled': {\n cursor: 'not-allowed',\n },\n '& .MuiButton-startIcon svg': {\n width: '24px',\n height: '24px',\n },\n '&.Mui-focusVisible': focusOutlineStyle(),\n variants: [\n {\n props: { variant: 'contained', color: 'primary' },\n style: ({ theme }) => {\n return {\n border: '2px solid transparent',\n '&.Mui-disabled': {\n backgroundColor: ophColors.grey400,\n color: ophColors.white,\n },\n '&:hover': {\n backgroundColor: theme.palette.primary.light,\n },\n '&:active': {\n backgroundColor: theme.palette.primary.dark,\n },\n };\n },\n },\n {\n props: { variant: 'outlined', color: 'primary' },\n style: ({ theme }) => {\n return {\n backgroundColor: ophColors.white,\n color: theme.palette.primary.main,\n borderWidth: '2px',\n borderColor: theme.palette.primary.main,\n '&.Mui-disabled': {\n borderWidth: '2px',\n color: ophColors.grey400,\n borderColor: ophColors.grey400,\n },\n '&:hover': {\n borderWidth: '2px',\n backgroundColor: ophColors.white,\n color: theme.palette.primary.light,\n borderColor: theme.palette.primary.light,\n },\n '&:active': {\n borderWidth: '2px',\n backgroundColor: ophColors.white,\n color: theme.palette.primary.dark,\n borderColor: theme.palette.primary.dark,\n },\n };\n },\n },\n {\n props: { variant: 'text', color: 'primary' },\n style: ({ theme }) => {\n return {\n border: '2px solid transparent',\n color: theme.palette.primary.main,\n '&.Mui-disabled': {\n color: ophColors.grey400,\n },\n '&:hover': {\n color: theme.palette.primary.light,\n background: 'none',\n },\n '&:active': {\n color: theme.palette.primary.dark,\n background: 'none',\n },\n };\n },\n },\n ],\n },\n },\n },\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n },\n },\n MuiFormControlLabel: {\n styleOverrides: {\n root: {\n margin: 0,\n },\n label: ({ theme }) => ({\n paddingLeft: theme.spacing(1),\n }),\n },\n },\n MuiCheckbox: {\n defaultProps: {\n disableRipple: true,\n checkedIcon: ,\n indeterminateIcon: ,\n },\n styleOverrides: {\n root: {\n borderRadius: '2px',\n padding: 0,\n zIndex: 0,\n color: ophColors.grey800,\n // Checkbox white background that doesn't overflow\n '&:before': {\n position: 'absolute',\n top: '4px',\n left: '4px',\n backgroundColor: ophColors.white,\n content: '\"\"',\n width: 'calc(100% - 8px)',\n height: 'calc(100% - 8px)',\n zIndex: 1,\n },\n '&.Mui-disabled': {\n color: ophColors.grey400,\n '&:before': {\n backgroundColor: ophColors.grey100,\n },\n },\n '& input': {\n zIndex: 2,\n },\n '& .MuiSvgIcon-root': {\n zIndex: 1,\n },\n '&.Mui-focusVisible': focusOutlineStyle({\n outlineOffset: '-2px',\n borderRadius: '5px',\n }),\n variants: [\n {\n props: { color: 'primary' },\n style: ({ theme }) => ({\n '&.Mui-focusVisible:not(.Mui-disabled)': {\n color: theme.palette.primary.light,\n },\n '&:hover': {\n color: theme.palette.primary.main,\n },\n }),\n },\n {\n props: { color: 'error' },\n style: ({ theme }) => ({\n color: theme.palette.error.main,\n '&.Mui-focusVisible:not(.Mui-disabled), &:hover': {\n color: theme.palette.error.main,\n },\n }),\n },\n ],\n },\n },\n },\n MuiFormControl: {\n defaultProps: {\n size: 'small',\n },\n },\n MuiFormLabel: {\n styleOverrides: {\n root: ({ theme }) => ({\n ...theme.typography.label,\n color: ophColors.black,\n '&.Mui-focused': {\n color: ophColors.black,\n },\n }),\n },\n },\n MuiInputLabel: {\n styleOverrides: {\n root: {\n color: ophColors.black,\n '&.Mui-focused': {\n color: ophColors.black,\n },\n },\n },\n },\n MuiLink: {\n styleOverrides: {\n root: {\n textDecoration: 'none',\n '&:hover, &:active': {\n textDecoration: 'underline',\n },\n '&.Mui-focusVisible': focusOutlineStyle({\n textDecoration: 'underline',\n borderRadius: '1px',\n }),\n '& svg.OphLink-OpenInNewIcon': {\n fontSize: '1.2em',\n marginLeft: '0.15em',\n verticalAlign: 'middle',\n marginTop: '-0.15em',\n },\n },\n },\n },\n MuiMenuItem: {\n styleOverrides: {\n root: ({ theme }) => {\n return {\n '&.Mui-selected': {\n backgroundColor: ophColors.grey50,\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: ophColors.grey50,\n },\n },\n '&.Mui-selected.Mui-focusVisible': {\n backgroundColor: ophColors.grey50,\n color: theme.palette.primary.main,\n },\n };\n },\n },\n },\n MuiInputBase: {\n styleOverrides: {\n root: {\n borderColor: ophColors.grey800,\n borderRadius: '2px',\n },\n },\n },\n MuiOutlinedInput: {\n styleOverrides: {\n input: ({ theme }) => ({\n padding: theme.spacing(1, 1.5),\n lineHeight: '24px',\n height: 'auto',\n }),\n root: {\n variants: [\n {\n props: () => true,\n style: ({ theme }) => ({\n '& .MuiInputAdornment-root': {\n margin: theme.spacing(1, 1, 1, 0),\n },\n padding: 0,\n backgroundColor: ophColors.white,\n borderRadius: '2px',\n '&:has(input:focus-visible)': focusOutlineStyle({\n borderRadius: '2px',\n }),\n '& .MuiSvgIcon-root': {\n color: ophColors.grey800,\n },\n '& .MuiOutlinedInput-notchedOutline': {\n // Fix: nothcedOutline touches focus outline on firefox when fullscreen\n top: '-4.5px',\n borderColor: ophColors.grey800,\n borderRadius: '2px',\n borderWidth: '1px',\n },\n }),\n },\n {\n props: { error: true },\n style: ({ theme }) => ({\n color: theme.palette.error.main,\n '& .MuiSvgIcon-root': {\n color: theme.palette.error.main,\n },\n }),\n },\n {\n props: (props) => props.color === 'primary' && !props.disabled,\n style: ({ theme }) => ({\n '&:hover .MuiOutlinedInput-notchedOutline': {\n borderWidth: '2px',\n borderColor: theme.palette.primary.main,\n },\n }),\n },\n {\n props: { disabled: true },\n style: {\n '& .MuiOutlinedInput-notchedOutline': {\n borderColor: ophColors.grey400,\n },\n '& .MuiSvgIcon-root': {\n color: ophColors.grey400,\n },\n },\n },\n ],\n },\n },\n },\n MuiPagination: {\n defaultProps: {\n variant: 'text',\n shape: 'rounded',\n },\n },\n MuiPaginationItem: {\n styleOverrides: {\n root: {\n borderRadius: '2px',\n },\n },\n },\n MuiSelect: {\n styleOverrides: {\n select: {\n '&:focus-visible': focusOutlineStyle({\n borderRadius: '2px',\n }),\n },\n },\n },\n MuiTable: {\n styleOverrides: {\n root: {\n '& .MuiTableCell-root': {\n fontSize: 'inherit',\n },\n },\n },\n },\n MuiToggleButton: {\n defaultProps: {\n disableRipple: true,\n },\n styleOverrides: {\n root: ({ theme }: { theme: Theme }) => ({\n color: ophColors.grey900,\n borderColor: theme.palette.primary.main,\n borderWidth: '2px',\n borderRadius: '2px',\n '&.Mui-selected': {\n backgroundColor: theme.palette.primary.main,\n color: ophColors.white,\n '&:hover': {\n backgroundColor: theme.palette.primary.light,\n color: ophColors.white,\n },\n '&:active, &.Mui-focusVisible': {\n backgroundColor: theme.palette.primary.dark,\n },\n },\n '&:hover': {\n backgroundColor: ophColors.white,\n borderColor: theme.palette.primary.light,\n color: theme.palette.primary.main,\n },\n }),\n },\n },\n MuiTypography: {\n defaultProps: {\n variantMapping: {\n subtitle1: 'body1',\n subtitle2: 'body2',\n },\n },\n },\n },\n typography: {\n fontFamily: 'Open Sans, sans-serif',\n fontWeightLight: 400,\n fontWeightRegular: 400,\n fontWeightMedium: 600,\n fontWeightBold: 700,\n h1: {\n fontSize: '34px',\n fontWeight: 700,\n lineHeight: '42px',\n color: ophColors.grey900,\n [themeBase.breakpoints.down('sm')]: {\n fontSize: '26px',\n lineHeight: '34px',\n },\n },\n h2: {\n fontSize: '24px',\n fontWeight: 700,\n lineHeight: '30px',\n color: ophColors.grey900,\n [themeBase.breakpoints.down('sm')]: {\n fontSize: '22px',\n lineHeight: '28px',\n },\n },\n h3: {\n fontSize: '20px',\n fontWeight: 700,\n lineHeight: '26px',\n color: ophColors.grey900,\n },\n h4: {\n fontSize: '18px',\n fontWeight: 700,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n h5: {\n fontSize: '16px',\n fontWeight: 700,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n h6: undefined,\n body1: {\n fontSize: '16px',\n fontWeight: 400,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n body2: {\n fontSize: '13px',\n fontWeight: 400,\n lineHeight: '16px',\n color: ophColors.grey900,\n },\n button: {\n fontSize: '16px',\n fontWeight: 600,\n textTransform: 'none',\n },\n label: {\n fontFamily: 'Open Sans, sans-serif',\n fontSize: '16px',\n fontWeight: 600,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n },\n};\n\nconst OPH_THEME_OPTIONS = Object.freeze(\n deepmerge(\n COMMON_THEME_OPTIONS,\n {\n palette: {\n background: {\n default: ophColors.grey50,\n },\n primary: {\n main: ophColors.blue2,\n light: ophColors.blue3,\n dark: ophColors.blue1,\n contrastText: ophColors.white,\n },\n },\n },\n { clone: true },\n ),\n);\n\nconst OPINTOPOLKU_THEME_OPTIONS = Object.freeze(\n deepmerge(\n COMMON_THEME_OPTIONS,\n {\n palette: {\n primary: {\n main: ophColors.green2,\n light: ophColors.green3,\n dark: ophColors.green1,\n contrastText: ophColors.white,\n },\n },\n },\n { clone: true },\n ),\n);\n\nconst EMPTY_OBJECT = {} as const;\n\nexport function createOphTheme({\n variant,\n lang,\n overrides = EMPTY_OBJECT,\n}: OphThemeParams) {\n switch (variant) {\n case 'oph':\n return createTheme(\n deepmerge(OPH_THEME_OPTIONS, overrides, { clone: true }),\n getLocale(lang),\n );\n case 'opintopolku':\n return createTheme(\n deepmerge(OPINTOPOLKU_THEME_OPTIONS, overrides, { clone: true }),\n getLocale(lang),\n );\n default:\n throw Error('Theme variant must be \"oph\" or \"opintopolku\"!');\n }\n}\n\nexport const useOphTheme = ({ variant, lang, overrides }: OphThemeParams) =>\n useMemo(\n () => createOphTheme({ variant, lang, overrides }),\n [variant, lang, overrides],\n );\n\nexport const OphThemeProvider = ({\n variant,\n lang,\n overrides,\n children,\n}: OphThemeParams & { children: ReactNode }) => {\n const theme = useOphTheme({ variant, lang, overrides });\n return (\n \n \n {children}\n \n );\n};\n"]} \ No newline at end of file diff --git a/dist/chunk-OY7DSKP6.js b/dist/chunk-OY7DSKP6.js new file mode 100644 index 0000000..4339279 --- /dev/null +++ b/dist/chunk-OY7DSKP6.js @@ -0,0 +1,18 @@ +'use client'; + +// src/OphInput.tsx +import { + OutlinedInput +} from "@mui/material"; +import { forwardRef } from "react"; +import { jsx } from "react/jsx-runtime"; +var OphInput = forwardRef( + function renderInput(props, ref) { + return /* @__PURE__ */ jsx(OutlinedInput, { ...props, ref }); + } +); + +export { + OphInput +}; +//# sourceMappingURL=chunk-OY7DSKP6.js.map \ No newline at end of file diff --git a/dist/chunk-OY7DSKP6.js.map b/dist/chunk-OY7DSKP6.js.map new file mode 100644 index 0000000..11252d2 --- /dev/null +++ b/dist/chunk-OY7DSKP6.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/OphInput.tsx"],"names":[],"mappings":";AAEA;AAAA,EACE;AAAA,OAGK;AACP,SAAS,kBAAkB;AAUhB;AAFJ,IAAM,WAAW;AAAA,EACtB,SAAS,YAAY,OAAO,KAAK;AAC/B,WAAO,oBAAC,iBAAe,GAAG,OAAO,KAAU;AAAA,EAC7C;AACF","sourcesContent":["'use client';\n\nimport {\n OutlinedInput,\n type OutlinedInputProps,\n type Theme,\n} from '@mui/material';\nimport { forwardRef } from 'react';\nimport { type SystemProps } from '@mui/system';\n\nexport type OphInputProps = Omit<\n OutlinedInputProps,\n keyof SystemProps | 'label'\n>;\n\nexport const OphInput = forwardRef(\n function renderInput(props, ref) {\n return ;\n },\n);\n"]} \ No newline at end of file diff --git a/dist/chunk-K2P3FLSP.js b/dist/chunk-PAFPTH2E.js similarity index 94% rename from dist/chunk-K2P3FLSP.js rename to dist/chunk-PAFPTH2E.js index d301e33..6a2548d 100644 --- a/dist/chunk-K2P3FLSP.js +++ b/dist/chunk-PAFPTH2E.js @@ -5,7 +5,7 @@ import { } from "./chunk-YQYVPFFR.js"; import { OphThemeProvider -} from "./chunk-T67FNJ7N.js"; +} from "./chunk-2Y6NCBS3.js"; // src/next/theme/theme-nextjs.tsx import { useMemo } from "react"; @@ -57,4 +57,4 @@ export { MUI_NEXTJS_OVERRIDES, OphNextJsThemeProvider }; -//# sourceMappingURL=chunk-K2P3FLSP.js.map \ No newline at end of file +//# sourceMappingURL=chunk-PAFPTH2E.js.map \ No newline at end of file diff --git a/dist/chunk-K2P3FLSP.js.map b/dist/chunk-PAFPTH2E.js.map similarity index 100% rename from dist/chunk-K2P3FLSP.js.map rename to dist/chunk-PAFPTH2E.js.map diff --git a/dist/chunk-T67FNJ7N.js.map b/dist/chunk-T67FNJ7N.js.map deleted file mode 100644 index 692feb4..0000000 --- a/dist/chunk-T67FNJ7N.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../src/theme/theme.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ophColors } from '../colors';\nimport { CssBaseline } from '@mui/material';\nimport {\n type Theme,\n type ThemeOptions,\n createTheme,\n ThemeProvider,\n} from '@mui/material/styles';\nimport { deepmerge } from '@mui/utils';\nimport { useMemo, type ReactNode } from 'react';\nimport type { OphThemeParams } from '../types';\nimport CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined';\nimport IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined';\nimport { focusOutlineStyle, getLocale } from './theme-utils';\n\nconst themeBase = createTheme({\n breakpoints: {\n values: {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1600,\n xxl: 1920,\n },\n },\n});\n\nconst COMMON_THEME_OPTIONS: ThemeOptions = {\n palette: {\n error: {\n main: ophColors.alias.error,\n },\n },\n components: {\n MuiAccordion: {\n defaultProps: {\n disableGutters: true,\n },\n styleOverrides: {\n root: {\n boxShadow: 'none',\n },\n },\n },\n MuiButton: {\n defaultProps: {\n disableRipple: true,\n disableElevation: true,\n },\n styleOverrides: {\n root: {\n borderRadius: '2px',\n padding: '4px 16px',\n '&.Mui-disabled': {\n cursor: 'not-allowed',\n },\n '& .MuiButton-startIcon svg': {\n width: '24px',\n height: '24px',\n },\n ...focusOutlineStyle(),\n variants: [\n {\n props: { variant: 'contained', color: 'primary' },\n style: ({ theme }) => {\n return {\n border: '2px solid transparent',\n '&.Mui-disabled': {\n backgroundColor: ophColors.grey400,\n color: ophColors.white,\n },\n '&:hover': {\n backgroundColor: theme.palette.primary.light,\n },\n '&:active': {\n backgroundColor: theme.palette.primary.dark,\n },\n };\n },\n },\n {\n props: { variant: 'outlined', color: 'primary' },\n style: ({ theme }) => {\n return {\n backgroundColor: ophColors.white,\n color: theme.palette.primary.main,\n borderWidth: '2px',\n borderColor: theme.palette.primary.main,\n '&.Mui-disabled': {\n borderWidth: '2px',\n color: ophColors.grey400,\n borderColor: ophColors.grey400,\n },\n '&:hover': {\n borderWidth: '2px',\n backgroundColor: ophColors.white,\n color: theme.palette.primary.light,\n borderColor: theme.palette.primary.light,\n },\n '&:active': {\n borderWidth: '2px',\n backgroundColor: ophColors.white,\n color: theme.palette.primary.dark,\n borderColor: theme.palette.primary.dark,\n },\n };\n },\n },\n {\n props: { variant: 'text', color: 'primary' },\n style: ({ theme }) => {\n return {\n border: '2px solid transparent',\n color: theme.palette.primary.main,\n '&.Mui-disabled': {\n color: ophColors.grey400,\n },\n '&:hover': {\n color: theme.palette.primary.light,\n background: 'none',\n },\n '&:active': {\n color: theme.palette.primary.dark,\n background: 'none',\n },\n };\n },\n },\n ],\n },\n },\n },\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n },\n },\n MuiFormControlLabel: {\n styleOverrides: {\n root: {\n margin: 0,\n },\n label: ({ theme }) => ({\n paddingLeft: theme.spacing(1),\n }),\n },\n },\n MuiCheckbox: {\n defaultProps: {\n disableRipple: true,\n checkedIcon: ,\n indeterminateIcon: ,\n },\n styleOverrides: {\n root: {\n borderRadius: '2px',\n padding: 0,\n zIndex: 0,\n color: ophColors.grey800,\n // Checkbox white background that doesn't overflow\n '&:before': {\n position: 'absolute',\n top: '4px',\n left: '4px',\n backgroundColor: ophColors.white,\n content: '\"\"',\n width: 'calc(100% - 8px)',\n height: 'calc(100% - 8px)',\n zIndex: 1,\n },\n '&.Mui-disabled': {\n color: ophColors.grey400,\n '&:before': {\n backgroundColor: ophColors.grey100,\n },\n },\n '& input': {\n zIndex: 2,\n },\n '& .MuiSvgIcon-root': {\n zIndex: 1,\n },\n ...focusOutlineStyle({ outlineOffset: '-2px', borderRadius: '5px' }),\n variants: [\n {\n props: { color: 'primary' },\n style: ({ theme }) => ({\n '&.Mui-focusVisible:not(.Mui-disabled)': {\n color: theme.palette.primary.light,\n },\n '&:hover': {\n color: theme.palette.primary.main,\n },\n }),\n },\n {\n props: { color: 'error' },\n style: ({ theme }) => ({\n color: theme.palette.error.main,\n '&.Mui-focusVisible:not(.Mui-disabled), &:hover': {\n color: theme.palette.error.main,\n },\n }),\n },\n ],\n },\n },\n },\n MuiFormControl: {\n defaultProps: {\n size: 'small',\n },\n },\n MuiFormLabel: {\n styleOverrides: {\n root: ({ theme }) => ({\n ...theme.typography.label,\n color: ophColors.black,\n '&.Mui-focused': {\n color: ophColors.black,\n },\n }),\n },\n },\n MuiInputLabel: {\n styleOverrides: {\n root: {\n color: ophColors.black,\n '&.Mui-focused': {\n color: ophColors.black,\n },\n },\n },\n },\n MuiLink: {\n styleOverrides: {\n root: {\n textDecoration: 'none',\n '&:hover, &:active': {\n textDecoration: 'underline',\n },\n ...focusOutlineStyle({\n textDecoration: 'underline',\n borderRadius: '1px',\n }),\n '& svg.OphLink-OpenInNewIcon': {\n fontSize: '1.2em',\n marginLeft: '0.15em',\n verticalAlign: 'middle',\n marginTop: '-0.15em',\n },\n },\n },\n },\n MuiMenuItem: {\n styleOverrides: {\n root: ({ theme }) => {\n return {\n '&.Mui-selected': {\n backgroundColor: ophColors.grey50,\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: ophColors.grey50,\n },\n },\n '&.Mui-selected.Mui-focusVisible': {\n backgroundColor: ophColors.grey50,\n color: theme.palette.primary.main,\n },\n };\n },\n },\n },\n MuiOutlinedInput: {\n styleOverrides: {\n root: ({ theme }) => {\n return {\n backgroundColor: ophColors.white,\n '.MuiOutlinedInput-notchedOutline': {\n borderRadius: '2px',\n borderWidth: '1px',\n },\n '&:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': {\n borderWidth: '2px',\n borderColor: theme.palette.primary.main,\n },\n };\n },\n },\n },\n MuiPagination: {\n defaultProps: {\n variant: 'text',\n shape: 'rounded',\n },\n },\n MuiPaginationItem: {\n styleOverrides: {\n root: {\n borderRadius: '2px',\n },\n },\n },\n MuiSelect: {\n styleOverrides: {\n select: {\n padding: '12px',\n },\n },\n },\n MuiTable: {\n styleOverrides: {\n root: {\n '& .MuiTableCell-root': {\n fontSize: 'inherit',\n },\n },\n },\n },\n MuiToggleButton: {\n defaultProps: {\n disableRipple: true,\n },\n styleOverrides: {\n root: ({ theme }: { theme: Theme }) => ({\n paddingTop: 0,\n paddingBottom: 0,\n color: ophColors.grey900,\n borderColor: theme.palette.primary.main,\n borderWidth: '2px',\n borderRadius: '2px',\n '&.Mui-selected': {\n backgroundColor: theme.palette.primary.main,\n color: ophColors.white,\n '&:hover': {\n backgroundColor: theme.palette.primary.light,\n color: ophColors.white,\n },\n '&:active, &.Mui-focusVisible': {\n backgroundColor: theme.palette.primary.dark,\n },\n },\n '&:hover': {\n backgroundColor: ophColors.white,\n borderColor: theme.palette.primary.light,\n color: theme.palette.primary.main,\n },\n '&.Mui-disabled': {},\n }),\n },\n },\n MuiTypography: {\n defaultProps: {\n variantMapping: {\n subtitle1: 'body1',\n subtitle2: 'body2',\n },\n },\n },\n },\n typography: {\n fontFamily: 'Open Sans, sans-serif',\n fontWeightLight: 400,\n fontWeightRegular: 400,\n fontWeightMedium: 600,\n fontWeightBold: 700,\n h1: {\n fontSize: '34px',\n fontWeight: 700,\n lineHeight: '42px',\n color: ophColors.grey900,\n [themeBase.breakpoints.down('sm')]: {\n fontSize: '26px',\n lineHeight: '34px',\n },\n },\n h2: {\n fontSize: '24px',\n fontWeight: 700,\n lineHeight: '30px',\n color: ophColors.grey900,\n [themeBase.breakpoints.down('sm')]: {\n fontSize: '22px',\n lineHeight: '28px',\n },\n },\n h3: {\n fontSize: '20px',\n fontWeight: 700,\n lineHeight: '26px',\n color: ophColors.grey900,\n },\n h4: {\n fontSize: '18px',\n fontWeight: 700,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n h5: {\n fontSize: '16px',\n fontWeight: 700,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n h6: undefined,\n body1: {\n fontSize: '16px',\n fontWeight: 400,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n body2: {\n fontSize: '13px',\n fontWeight: 400,\n lineHeight: '16px',\n color: ophColors.grey900,\n },\n button: {\n fontSize: '16px',\n fontWeight: 600,\n textTransform: 'none',\n },\n label: {\n fontFamily: 'Open Sans, sans-serif',\n fontSize: '16px',\n fontWeight: 600,\n lineHeight: '24px',\n color: ophColors.grey900,\n },\n },\n};\n\nconst OPH_THEME_OPTIONS = Object.freeze(\n deepmerge(\n COMMON_THEME_OPTIONS,\n {\n palette: {\n background: {\n default: ophColors.grey50,\n },\n primary: {\n main: ophColors.blue2,\n light: ophColors.blue3,\n dark: ophColors.blue1,\n contrastText: ophColors.white,\n },\n },\n },\n { clone: true },\n ),\n);\n\nconst OPINTOPOLKU_THEME_OPTIONS = Object.freeze(\n deepmerge(\n COMMON_THEME_OPTIONS,\n {\n palette: {\n primary: {\n main: ophColors.green2,\n light: ophColors.green3,\n dark: ophColors.green1,\n contrastText: ophColors.white,\n },\n },\n },\n { clone: true },\n ),\n);\n\nconst EMPTY_OBJECT = {} as const;\n\nexport function createOphTheme({\n variant,\n lang,\n overrides = EMPTY_OBJECT,\n}: OphThemeParams) {\n switch (variant) {\n case 'oph':\n return createTheme(\n deepmerge(OPH_THEME_OPTIONS, overrides, { clone: true }),\n getLocale(lang),\n );\n case 'opintopolku':\n return createTheme(\n deepmerge(OPINTOPOLKU_THEME_OPTIONS, overrides, { clone: true }),\n getLocale(lang),\n );\n default:\n throw Error('Theme variant must be \"oph\" or \"opintopolku\"!');\n }\n}\n\nexport const useOphTheme = ({ variant, lang, overrides }: OphThemeParams) =>\n useMemo(\n () => createOphTheme({ variant, lang, overrides }),\n [variant, lang, overrides],\n );\n\nexport const OphThemeProvider = ({\n variant,\n lang,\n overrides,\n children,\n}: OphThemeParams & { children: ReactNode }) => {\n const theme = useOphTheme({ variant, lang, overrides });\n return (\n \n \n {children}\n \n );\n};\n"]} \ No newline at end of file diff --git a/dist/chunk-Z3OLQMEP.js b/dist/chunk-XMAEUMNX.js similarity index 70% rename from dist/chunk-Z3OLQMEP.js rename to dist/chunk-XMAEUMNX.js index 9e153b8..15eb73a 100644 --- a/dist/chunk-Z3OLQMEP.js +++ b/dist/chunk-XMAEUMNX.js @@ -17,16 +17,14 @@ function getLocale(lang) { } } var focusOutlineStyle = (overrides = {}) => ({ - "&.Mui-focusVisible": { - outline: `2px solid ${ophColors.black}`, - outlineOffset: "1px", - zIndex: 9999, - ...overrides - } + outline: `2px solid ${ophColors.black}`, + outlineOffset: "1px", + zIndex: 9999, + ...overrides }); export { getLocale, focusOutlineStyle }; -//# sourceMappingURL=chunk-Z3OLQMEP.js.map \ No newline at end of file +//# sourceMappingURL=chunk-XMAEUMNX.js.map \ No newline at end of file diff --git a/dist/chunk-XMAEUMNX.js.map b/dist/chunk-XMAEUMNX.js.map new file mode 100644 index 0000000..274047d --- /dev/null +++ b/dist/chunk-XMAEUMNX.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/theme/theme-utils.tsx"],"names":[],"mappings":";;;;;AAAA,SAAS,MAAM,MAAM,YAAY;AAK1B,SAAS,UAAU,MAAoB;AAC5C,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,oBAAoB,CAAC,YAA2B,CAAC,OAAO;AAAA,EACnE,SAAS,aAAa,UAAU,KAAK;AAAA,EACrC,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,GAAG;AACL","sourcesContent":["import { enUS, fiFI, svSE } from '@mui/material/locale';\nimport type { OphLanguage } from '../types';\nimport { ophColors } from '../colors';\nimport type { CSSProperties } from 'react';\n\nexport function getLocale(lang?: OphLanguage) {\n switch (lang) {\n case 'fi':\n return fiFI;\n case 'sv':\n return svSE;\n case 'en':\n return enUS;\n default:\n return fiFI;\n }\n}\n\nexport const focusOutlineStyle = (overrides: CSSProperties = {}) => ({\n outline: `2px solid ${ophColors.black}`,\n outlineOffset: '1px',\n zIndex: 9999,\n ...overrides,\n});\n"]} \ No newline at end of file diff --git a/dist/chunk-Z3OLQMEP.js.map b/dist/chunk-Z3OLQMEP.js.map deleted file mode 100644 index d9753dc..0000000 --- a/dist/chunk-Z3OLQMEP.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../src/theme/theme-utils.tsx"],"names":[],"mappings":";;;;;AAAA,SAAS,MAAM,MAAM,YAAY;AAK1B,SAAS,UAAU,MAAoB;AAC5C,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,oBAAoB,CAAC,YAA2B,CAAC,OAAO;AAAA,EACnE,sBAAsB;AAAA,IACpB,SAAS,aAAa,UAAU,KAAK;AAAA,IACrC,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,GAAG;AAAA,EACL;AACF","sourcesContent":["import { enUS, fiFI, svSE } from '@mui/material/locale';\nimport type { OphLanguage } from '../types';\nimport { ophColors } from '../colors';\nimport type { CSSProperties } from 'react';\n\nexport function getLocale(lang?: OphLanguage) {\n switch (lang) {\n case 'fi':\n return fiFI;\n case 'sv':\n return svSE;\n case 'en':\n return enUS;\n default:\n return fiFI;\n }\n}\n\nexport const focusOutlineStyle = (overrides: CSSProperties = {}) => ({\n '&.Mui-focusVisible': {\n outline: `2px solid ${ophColors.black}`,\n outlineOffset: '1px',\n zIndex: 9999,\n ...overrides,\n },\n});\n"]} \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts index 2931167..9a14d68 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -3,6 +3,7 @@ export { OphCheckbox } from './OphCheckbox.js'; export { OphSelect } from './OphSelect.js'; export { OphTypography } from './OphTypography.js'; export { OphLink } from './OphLink.js'; +export { OphInput } from './OphInput.js'; export { ophColors } from './colors.js'; export { OphLanguage, OphThemeParams, OphThemeVariant } from './types.js'; import '@mui/material'; diff --git a/dist/index.js b/dist/index.js index d5477c3..960b98c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -4,6 +4,9 @@ import { import { OphCheckbox } from "./chunk-5ST33H5N.js"; +import { + OphInput +} from "./chunk-OY7DSKP6.js"; import { OphLink } from "./chunk-5WMMVTJX.js"; @@ -20,6 +23,7 @@ import "./chunk-5VLNADN3.js"; export { OphButton, OphCheckbox, + OphInput, OphLink, OphSelect, OphTypography, diff --git a/dist/next/theme/index.js b/dist/next/theme/index.js index 9db7ab9..f32405f 100644 --- a/dist/next/theme/index.js +++ b/dist/next/theme/index.js @@ -3,11 +3,11 @@ import { MUI_NEXTJS_OVERRIDES, OphNextJsThemeProvider, openSans -} from "../../chunk-K2P3FLSP.js"; +} from "../../chunk-PAFPTH2E.js"; import "../../chunk-YQYVPFFR.js"; import "../../chunk-E2WEGGYN.js"; -import "../../chunk-T67FNJ7N.js"; -import "../../chunk-Z3OLQMEP.js"; +import "../../chunk-2Y6NCBS3.js"; +import "../../chunk-XMAEUMNX.js"; import "../../chunk-LVP2BKUK.js"; import "../../chunk-5VLNADN3.js"; export { diff --git a/dist/next/theme/theme-nextjs.js b/dist/next/theme/theme-nextjs.js index 7c4511a..2904b83 100644 --- a/dist/next/theme/theme-nextjs.js +++ b/dist/next/theme/theme-nextjs.js @@ -4,11 +4,11 @@ import { MUI_NEXTJS_OVERRIDES, OphNextJsThemeProvider, openSans -} from "../../chunk-K2P3FLSP.js"; +} from "../../chunk-PAFPTH2E.js"; import "../../chunk-YQYVPFFR.js"; import "../../chunk-E2WEGGYN.js"; -import "../../chunk-T67FNJ7N.js"; -import "../../chunk-Z3OLQMEP.js"; +import "../../chunk-2Y6NCBS3.js"; +import "../../chunk-XMAEUMNX.js"; import "../../chunk-LVP2BKUK.js"; import "../../chunk-5VLNADN3.js"; export { diff --git a/dist/theme/index.js b/dist/theme/index.js index 88a3b7f..7ecb224 100644 --- a/dist/theme/index.js +++ b/dist/theme/index.js @@ -2,8 +2,8 @@ import { OphThemeProvider, createOphTheme, useOphTheme -} from "../chunk-T67FNJ7N.js"; -import "../chunk-Z3OLQMEP.js"; +} from "../chunk-2Y6NCBS3.js"; +import "../chunk-XMAEUMNX.js"; import "../chunk-LVP2BKUK.js"; export { OphThemeProvider, diff --git a/dist/theme/theme-utils.d.ts b/dist/theme/theme-utils.d.ts index 323fd77..5a926d1 100644 --- a/dist/theme/theme-utils.d.ts +++ b/dist/theme/theme-utils.d.ts @@ -6,833 +6,831 @@ import '@mui/material'; declare function getLocale(lang?: OphLanguage): _mui_material_locale.Localization; declare const focusOutlineStyle: (overrides?: CSSProperties) => { - '&.Mui-focusVisible': { - accentColor?: csstype.Property.AccentColor | undefined; - alignContent?: csstype.Property.AlignContent | undefined; - alignItems?: csstype.Property.AlignItems | undefined; - alignSelf?: csstype.Property.AlignSelf | undefined; - alignTracks?: csstype.Property.AlignTracks | undefined; - animationComposition?: csstype.Property.AnimationComposition | undefined; - animationDelay?: csstype.Property.AnimationDelay | undefined; - animationDirection?: csstype.Property.AnimationDirection | undefined; - animationDuration?: csstype.Property.AnimationDuration | undefined; - animationFillMode?: csstype.Property.AnimationFillMode | undefined; - animationIterationCount?: csstype.Property.AnimationIterationCount | undefined; - animationName?: csstype.Property.AnimationName | undefined; - animationPlayState?: csstype.Property.AnimationPlayState | undefined; - animationRangeEnd?: csstype.Property.AnimationRangeEnd | undefined; - animationRangeStart?: csstype.Property.AnimationRangeStart | undefined; - animationTimeline?: csstype.Property.AnimationTimeline | undefined; - animationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; - appearance?: csstype.Property.Appearance | undefined; - aspectRatio?: csstype.Property.AspectRatio | undefined; - backdropFilter?: csstype.Property.BackdropFilter | undefined; - backfaceVisibility?: csstype.Property.BackfaceVisibility | undefined; - backgroundAttachment?: csstype.Property.BackgroundAttachment | undefined; - backgroundBlendMode?: csstype.Property.BackgroundBlendMode | undefined; - backgroundClip?: csstype.Property.BackgroundClip | undefined; - backgroundColor?: csstype.Property.BackgroundColor | undefined; - backgroundImage?: csstype.Property.BackgroundImage | undefined; - backgroundOrigin?: csstype.Property.BackgroundOrigin | undefined; - backgroundPositionX?: csstype.Property.BackgroundPositionX | undefined; - backgroundPositionY?: csstype.Property.BackgroundPositionY | undefined; - backgroundRepeat?: csstype.Property.BackgroundRepeat | undefined; - backgroundSize?: csstype.Property.BackgroundSize | undefined; - blockOverflow?: csstype.Property.BlockOverflow | undefined; - blockSize?: csstype.Property.BlockSize | undefined; - borderBlockColor?: csstype.Property.BorderBlockColor | undefined; - borderBlockEndColor?: csstype.Property.BorderBlockEndColor | undefined; - borderBlockEndStyle?: csstype.Property.BorderBlockEndStyle | undefined; - borderBlockEndWidth?: csstype.Property.BorderBlockEndWidth | undefined; - borderBlockStartColor?: csstype.Property.BorderBlockStartColor | undefined; - borderBlockStartStyle?: csstype.Property.BorderBlockStartStyle | undefined; - borderBlockStartWidth?: csstype.Property.BorderBlockStartWidth | undefined; - borderBlockStyle?: csstype.Property.BorderBlockStyle | undefined; - borderBlockWidth?: csstype.Property.BorderBlockWidth | undefined; - borderBottomColor?: csstype.Property.BorderBottomColor | undefined; - borderBottomLeftRadius?: csstype.Property.BorderBottomLeftRadius | undefined; - borderBottomRightRadius?: csstype.Property.BorderBottomRightRadius | undefined; - borderBottomStyle?: csstype.Property.BorderBottomStyle | undefined; - borderBottomWidth?: csstype.Property.BorderBottomWidth | undefined; - borderCollapse?: csstype.Property.BorderCollapse | undefined; - borderEndEndRadius?: csstype.Property.BorderEndEndRadius | undefined; - borderEndStartRadius?: csstype.Property.BorderEndStartRadius | undefined; - borderImageOutset?: csstype.Property.BorderImageOutset | undefined; - borderImageRepeat?: csstype.Property.BorderImageRepeat | undefined; - borderImageSlice?: csstype.Property.BorderImageSlice | undefined; - borderImageSource?: csstype.Property.BorderImageSource | undefined; - borderImageWidth?: csstype.Property.BorderImageWidth | undefined; - borderInlineColor?: csstype.Property.BorderInlineColor | undefined; - borderInlineEndColor?: csstype.Property.BorderInlineEndColor | undefined; - borderInlineEndStyle?: csstype.Property.BorderInlineEndStyle | undefined; - borderInlineEndWidth?: csstype.Property.BorderInlineEndWidth | undefined; - borderInlineStartColor?: csstype.Property.BorderInlineStartColor | undefined; - borderInlineStartStyle?: csstype.Property.BorderInlineStartStyle | undefined; - borderInlineStartWidth?: csstype.Property.BorderInlineStartWidth | undefined; - borderInlineStyle?: csstype.Property.BorderInlineStyle | undefined; - borderInlineWidth?: csstype.Property.BorderInlineWidth | undefined; - borderLeftColor?: csstype.Property.BorderLeftColor | undefined; - borderLeftStyle?: csstype.Property.BorderLeftStyle | undefined; - borderLeftWidth?: csstype.Property.BorderLeftWidth | undefined; - borderRightColor?: csstype.Property.BorderRightColor | undefined; - borderRightStyle?: csstype.Property.BorderRightStyle | undefined; - borderRightWidth?: csstype.Property.BorderRightWidth | undefined; - borderSpacing?: csstype.Property.BorderSpacing | undefined; - borderStartEndRadius?: csstype.Property.BorderStartEndRadius | undefined; - borderStartStartRadius?: csstype.Property.BorderStartStartRadius | undefined; - borderTopColor?: csstype.Property.BorderTopColor | undefined; - borderTopLeftRadius?: csstype.Property.BorderTopLeftRadius | undefined; - borderTopRightRadius?: csstype.Property.BorderTopRightRadius | undefined; - borderTopStyle?: csstype.Property.BorderTopStyle | undefined; - borderTopWidth?: csstype.Property.BorderTopWidth | undefined; - bottom?: csstype.Property.Bottom | undefined; - boxDecorationBreak?: csstype.Property.BoxDecorationBreak | undefined; - boxShadow?: csstype.Property.BoxShadow | undefined; - boxSizing?: csstype.Property.BoxSizing | undefined; - breakAfter?: csstype.Property.BreakAfter | undefined; - breakBefore?: csstype.Property.BreakBefore | undefined; - breakInside?: csstype.Property.BreakInside | undefined; - captionSide?: csstype.Property.CaptionSide | undefined; - caretColor?: csstype.Property.CaretColor | undefined; - caretShape?: csstype.Property.CaretShape | undefined; - clear?: csstype.Property.Clear | undefined; - clipPath?: csstype.Property.ClipPath | undefined; - color?: csstype.Property.Color | undefined; - colorAdjust?: csstype.Property.PrintColorAdjust | undefined; - colorScheme?: csstype.Property.ColorScheme | undefined; - columnCount?: csstype.Property.ColumnCount | undefined; - columnFill?: csstype.Property.ColumnFill | undefined; - columnGap?: csstype.Property.ColumnGap | undefined; - columnRuleColor?: csstype.Property.ColumnRuleColor | undefined; - columnRuleStyle?: csstype.Property.ColumnRuleStyle | undefined; - columnRuleWidth?: csstype.Property.ColumnRuleWidth | undefined; - columnSpan?: csstype.Property.ColumnSpan | undefined; - columnWidth?: csstype.Property.ColumnWidth | undefined; - contain?: csstype.Property.Contain | undefined; - containIntrinsicBlockSize?: csstype.Property.ContainIntrinsicBlockSize | undefined; - containIntrinsicHeight?: csstype.Property.ContainIntrinsicHeight | undefined; - containIntrinsicInlineSize?: csstype.Property.ContainIntrinsicInlineSize | undefined; - containIntrinsicWidth?: csstype.Property.ContainIntrinsicWidth | undefined; - containerName?: csstype.Property.ContainerName | undefined; - containerType?: csstype.Property.ContainerType | undefined; - content?: csstype.Property.Content | undefined; - contentVisibility?: csstype.Property.ContentVisibility | undefined; - counterIncrement?: csstype.Property.CounterIncrement | undefined; - counterReset?: csstype.Property.CounterReset | undefined; - counterSet?: csstype.Property.CounterSet | undefined; - cursor?: csstype.Property.Cursor | undefined; - direction?: csstype.Property.Direction | undefined; - display?: csstype.Property.Display | undefined; - emptyCells?: csstype.Property.EmptyCells | undefined; - filter?: csstype.Property.Filter | undefined; - flexBasis?: csstype.Property.FlexBasis | undefined; - flexDirection?: csstype.Property.FlexDirection | undefined; - flexGrow?: csstype.Property.FlexGrow | undefined; - flexShrink?: csstype.Property.FlexShrink | undefined; - flexWrap?: csstype.Property.FlexWrap | undefined; - float?: csstype.Property.Float | undefined; - fontFamily?: csstype.Property.FontFamily | undefined; - fontFeatureSettings?: csstype.Property.FontFeatureSettings | undefined; - fontKerning?: csstype.Property.FontKerning | undefined; - fontLanguageOverride?: csstype.Property.FontLanguageOverride | undefined; - fontOpticalSizing?: csstype.Property.FontOpticalSizing | undefined; - fontPalette?: csstype.Property.FontPalette | undefined; - fontSize?: csstype.Property.FontSize | undefined; - fontSizeAdjust?: csstype.Property.FontSizeAdjust | undefined; - fontSmooth?: csstype.Property.FontSmooth | undefined; - fontStretch?: csstype.Property.FontStretch | undefined; - fontStyle?: csstype.Property.FontStyle | undefined; - fontSynthesis?: csstype.Property.FontSynthesis | undefined; - fontSynthesisPosition?: csstype.Property.FontSynthesisPosition | undefined; - fontSynthesisSmallCaps?: csstype.Property.FontSynthesisSmallCaps | undefined; - fontSynthesisStyle?: csstype.Property.FontSynthesisStyle | undefined; - fontSynthesisWeight?: csstype.Property.FontSynthesisWeight | undefined; - fontVariant?: csstype.Property.FontVariant | undefined; - fontVariantAlternates?: csstype.Property.FontVariantAlternates | undefined; - fontVariantCaps?: csstype.Property.FontVariantCaps | undefined; - fontVariantEastAsian?: csstype.Property.FontVariantEastAsian | undefined; - fontVariantEmoji?: csstype.Property.FontVariantEmoji | undefined; - fontVariantLigatures?: csstype.Property.FontVariantLigatures | undefined; - fontVariantNumeric?: csstype.Property.FontVariantNumeric | undefined; - fontVariantPosition?: csstype.Property.FontVariantPosition | undefined; - fontVariationSettings?: csstype.Property.FontVariationSettings | undefined; - fontWeight?: csstype.Property.FontWeight | undefined; - forcedColorAdjust?: csstype.Property.ForcedColorAdjust | undefined; - gridAutoColumns?: csstype.Property.GridAutoColumns | undefined; - gridAutoFlow?: csstype.Property.GridAutoFlow | undefined; - gridAutoRows?: csstype.Property.GridAutoRows | undefined; - gridColumnEnd?: csstype.Property.GridColumnEnd | undefined; - gridColumnStart?: csstype.Property.GridColumnStart | undefined; - gridRowEnd?: csstype.Property.GridRowEnd | undefined; - gridRowStart?: csstype.Property.GridRowStart | undefined; - gridTemplateAreas?: csstype.Property.GridTemplateAreas | undefined; - gridTemplateColumns?: csstype.Property.GridTemplateColumns | undefined; - gridTemplateRows?: csstype.Property.GridTemplateRows | undefined; - hangingPunctuation?: csstype.Property.HangingPunctuation | undefined; - height?: csstype.Property.Height | undefined; - hyphenateCharacter?: csstype.Property.HyphenateCharacter | undefined; - hyphenateLimitChars?: csstype.Property.HyphenateLimitChars | undefined; - hyphens?: csstype.Property.Hyphens | undefined; - imageOrientation?: csstype.Property.ImageOrientation | undefined; - imageRendering?: csstype.Property.ImageRendering | undefined; - imageResolution?: csstype.Property.ImageResolution | undefined; - initialLetter?: csstype.Property.InitialLetter | undefined; - inlineSize?: csstype.Property.InlineSize | undefined; - inputSecurity?: csstype.Property.InputSecurity | undefined; - insetBlockEnd?: csstype.Property.InsetBlockEnd | undefined; - insetBlockStart?: csstype.Property.InsetBlockStart | undefined; - insetInlineEnd?: csstype.Property.InsetInlineEnd | undefined; - insetInlineStart?: csstype.Property.InsetInlineStart | undefined; - isolation?: csstype.Property.Isolation | undefined; - justifyContent?: csstype.Property.JustifyContent | undefined; - justifyItems?: csstype.Property.JustifyItems | undefined; - justifySelf?: csstype.Property.JustifySelf | undefined; - justifyTracks?: csstype.Property.JustifyTracks | undefined; - left?: csstype.Property.Left | undefined; - letterSpacing?: csstype.Property.LetterSpacing | undefined; - lineBreak?: csstype.Property.LineBreak | undefined; - lineHeight?: csstype.Property.LineHeight | undefined; - lineHeightStep?: csstype.Property.LineHeightStep | undefined; - listStyleImage?: csstype.Property.ListStyleImage | undefined; - listStylePosition?: csstype.Property.ListStylePosition | undefined; - listStyleType?: csstype.Property.ListStyleType | undefined; - marginBlockEnd?: csstype.Property.MarginBlockEnd | undefined; - marginBlockStart?: csstype.Property.MarginBlockStart | undefined; - marginBottom?: csstype.Property.MarginBottom | undefined; - marginInlineEnd?: csstype.Property.MarginInlineEnd | undefined; - marginInlineStart?: csstype.Property.MarginInlineStart | undefined; - marginLeft?: csstype.Property.MarginLeft | undefined; - marginRight?: csstype.Property.MarginRight | undefined; - marginTop?: csstype.Property.MarginTop | undefined; - marginTrim?: csstype.Property.MarginTrim | undefined; - maskBorderMode?: csstype.Property.MaskBorderMode | undefined; - maskBorderOutset?: csstype.Property.MaskBorderOutset | undefined; - maskBorderRepeat?: csstype.Property.MaskBorderRepeat | undefined; - maskBorderSlice?: csstype.Property.MaskBorderSlice | undefined; - maskBorderSource?: csstype.Property.MaskBorderSource | undefined; - maskBorderWidth?: csstype.Property.MaskBorderWidth | undefined; - maskClip?: csstype.Property.MaskClip | undefined; - maskComposite?: csstype.Property.MaskComposite | undefined; - maskImage?: csstype.Property.MaskImage | undefined; - maskMode?: csstype.Property.MaskMode | undefined; - maskOrigin?: csstype.Property.MaskOrigin | undefined; - maskPosition?: csstype.Property.MaskPosition | undefined; - maskRepeat?: csstype.Property.MaskRepeat | undefined; - maskSize?: csstype.Property.MaskSize | undefined; - maskType?: csstype.Property.MaskType | undefined; - masonryAutoFlow?: csstype.Property.MasonryAutoFlow | undefined; - mathDepth?: csstype.Property.MathDepth | undefined; - mathShift?: csstype.Property.MathShift | undefined; - mathStyle?: csstype.Property.MathStyle | undefined; - maxBlockSize?: csstype.Property.MaxBlockSize | undefined; - maxHeight?: csstype.Property.MaxHeight | undefined; - maxInlineSize?: csstype.Property.MaxInlineSize | undefined; - maxLines?: csstype.Property.MaxLines | undefined; - maxWidth?: csstype.Property.MaxWidth | undefined; - minBlockSize?: csstype.Property.MinBlockSize | undefined; - minHeight?: csstype.Property.MinHeight | undefined; - minInlineSize?: csstype.Property.MinInlineSize | undefined; - minWidth?: csstype.Property.MinWidth | undefined; - mixBlendMode?: csstype.Property.MixBlendMode | undefined; - motionDistance?: csstype.Property.OffsetDistance | undefined; - motionPath?: csstype.Property.OffsetPath | undefined; - motionRotation?: csstype.Property.OffsetRotate | undefined; - objectFit?: csstype.Property.ObjectFit | undefined; - objectPosition?: csstype.Property.ObjectPosition | undefined; - offsetAnchor?: csstype.Property.OffsetAnchor | undefined; - offsetDistance?: csstype.Property.OffsetDistance | undefined; - offsetPath?: csstype.Property.OffsetPath | undefined; - offsetPosition?: csstype.Property.OffsetPosition | undefined; - offsetRotate?: csstype.Property.OffsetRotate | undefined; - offsetRotation?: csstype.Property.OffsetRotate | undefined; - opacity?: csstype.Property.Opacity | undefined; - order?: csstype.Property.Order | undefined; - orphans?: csstype.Property.Orphans | undefined; - outlineColor?: csstype.Property.OutlineColor | undefined; - outlineOffset: csstype.Property.OutlineOffset; - outlineStyle?: csstype.Property.OutlineStyle | undefined; - outlineWidth?: csstype.Property.OutlineWidth | undefined; - overflowAnchor?: csstype.Property.OverflowAnchor | undefined; - overflowBlock?: csstype.Property.OverflowBlock | undefined; - overflowClipBox?: csstype.Property.OverflowClipBox | undefined; - overflowClipMargin?: csstype.Property.OverflowClipMargin | undefined; - overflowInline?: csstype.Property.OverflowInline | undefined; - overflowWrap?: csstype.Property.OverflowWrap | undefined; - overflowX?: csstype.Property.OverflowX | undefined; - overflowY?: csstype.Property.OverflowY | undefined; - overlay?: csstype.Property.Overlay | undefined; - overscrollBehaviorBlock?: csstype.Property.OverscrollBehaviorBlock | undefined; - overscrollBehaviorInline?: csstype.Property.OverscrollBehaviorInline | undefined; - overscrollBehaviorX?: csstype.Property.OverscrollBehaviorX | undefined; - overscrollBehaviorY?: csstype.Property.OverscrollBehaviorY | undefined; - paddingBlockEnd?: csstype.Property.PaddingBlockEnd | undefined; - paddingBlockStart?: csstype.Property.PaddingBlockStart | undefined; - paddingBottom?: csstype.Property.PaddingBottom | undefined; - paddingInlineEnd?: csstype.Property.PaddingInlineEnd | undefined; - paddingInlineStart?: csstype.Property.PaddingInlineStart | undefined; - paddingLeft?: csstype.Property.PaddingLeft | undefined; - paddingRight?: csstype.Property.PaddingRight | undefined; - paddingTop?: csstype.Property.PaddingTop | undefined; - page?: csstype.Property.Page | undefined; - pageBreakAfter?: csstype.Property.PageBreakAfter | undefined; - pageBreakBefore?: csstype.Property.PageBreakBefore | undefined; - pageBreakInside?: csstype.Property.PageBreakInside | undefined; - paintOrder?: csstype.Property.PaintOrder | undefined; - perspective?: csstype.Property.Perspective | undefined; - perspectiveOrigin?: csstype.Property.PerspectiveOrigin | undefined; - pointerEvents?: csstype.Property.PointerEvents | undefined; - position?: csstype.Property.Position | undefined; - printColorAdjust?: csstype.Property.PrintColorAdjust | undefined; - quotes?: csstype.Property.Quotes | undefined; - resize?: csstype.Property.Resize | undefined; - right?: csstype.Property.Right | undefined; - rotate?: csstype.Property.Rotate | undefined; - rowGap?: csstype.Property.RowGap | undefined; - rubyAlign?: csstype.Property.RubyAlign | undefined; - rubyMerge?: csstype.Property.RubyMerge | undefined; - rubyPosition?: csstype.Property.RubyPosition | undefined; - scale?: csstype.Property.Scale | undefined; - scrollBehavior?: csstype.Property.ScrollBehavior | undefined; - scrollMarginBlockEnd?: csstype.Property.ScrollMarginBlockEnd | undefined; - scrollMarginBlockStart?: csstype.Property.ScrollMarginBlockStart | undefined; - scrollMarginBottom?: csstype.Property.ScrollMarginBottom | undefined; - scrollMarginInlineEnd?: csstype.Property.ScrollMarginInlineEnd | undefined; - scrollMarginInlineStart?: csstype.Property.ScrollMarginInlineStart | undefined; - scrollMarginLeft?: csstype.Property.ScrollMarginLeft | undefined; - scrollMarginRight?: csstype.Property.ScrollMarginRight | undefined; - scrollMarginTop?: csstype.Property.ScrollMarginTop | undefined; - scrollPaddingBlockEnd?: csstype.Property.ScrollPaddingBlockEnd | undefined; - scrollPaddingBlockStart?: csstype.Property.ScrollPaddingBlockStart | undefined; - scrollPaddingBottom?: csstype.Property.ScrollPaddingBottom | undefined; - scrollPaddingInlineEnd?: csstype.Property.ScrollPaddingInlineEnd | undefined; - scrollPaddingInlineStart?: csstype.Property.ScrollPaddingInlineStart | undefined; - scrollPaddingLeft?: csstype.Property.ScrollPaddingLeft | undefined; - scrollPaddingRight?: csstype.Property.ScrollPaddingRight | undefined; - scrollPaddingTop?: csstype.Property.ScrollPaddingTop | undefined; - scrollSnapAlign?: csstype.Property.ScrollSnapAlign | undefined; - scrollSnapMarginBottom?: csstype.Property.ScrollMarginBottom | undefined; - scrollSnapMarginLeft?: csstype.Property.ScrollMarginLeft | undefined; - scrollSnapMarginRight?: csstype.Property.ScrollMarginRight | undefined; - scrollSnapMarginTop?: csstype.Property.ScrollMarginTop | undefined; - scrollSnapStop?: csstype.Property.ScrollSnapStop | undefined; - scrollSnapType?: csstype.Property.ScrollSnapType | undefined; - scrollTimelineAxis?: csstype.Property.ScrollTimelineAxis | undefined; - scrollTimelineName?: csstype.Property.ScrollTimelineName | undefined; - scrollbarColor?: csstype.Property.ScrollbarColor | undefined; - scrollbarGutter?: csstype.Property.ScrollbarGutter | undefined; - scrollbarWidth?: csstype.Property.ScrollbarWidth | undefined; - shapeImageThreshold?: csstype.Property.ShapeImageThreshold | undefined; - shapeMargin?: csstype.Property.ShapeMargin | undefined; - shapeOutside?: csstype.Property.ShapeOutside | undefined; - tabSize?: csstype.Property.TabSize | undefined; - tableLayout?: csstype.Property.TableLayout | undefined; - textAlign?: csstype.Property.TextAlign | undefined; - textAlignLast?: csstype.Property.TextAlignLast | undefined; - textCombineUpright?: csstype.Property.TextCombineUpright | undefined; - textDecorationColor?: csstype.Property.TextDecorationColor | undefined; - textDecorationLine?: csstype.Property.TextDecorationLine | undefined; - textDecorationSkip?: csstype.Property.TextDecorationSkip | undefined; - textDecorationSkipInk?: csstype.Property.TextDecorationSkipInk | undefined; - textDecorationStyle?: csstype.Property.TextDecorationStyle | undefined; - textDecorationThickness?: csstype.Property.TextDecorationThickness | undefined; - textEmphasisColor?: csstype.Property.TextEmphasisColor | undefined; - textEmphasisPosition?: csstype.Property.TextEmphasisPosition | undefined; - textEmphasisStyle?: csstype.Property.TextEmphasisStyle | undefined; - textIndent?: csstype.Property.TextIndent | undefined; - textJustify?: csstype.Property.TextJustify | undefined; - textOrientation?: csstype.Property.TextOrientation | undefined; - textOverflow?: csstype.Property.TextOverflow | undefined; - textRendering?: csstype.Property.TextRendering | undefined; - textShadow?: csstype.Property.TextShadow | undefined; - textSizeAdjust?: csstype.Property.TextSizeAdjust | undefined; - textTransform?: csstype.Property.TextTransform | undefined; - textUnderlineOffset?: csstype.Property.TextUnderlineOffset | undefined; - textUnderlinePosition?: csstype.Property.TextUnderlinePosition | undefined; - textWrap?: csstype.Property.TextWrap | undefined; - timelineScope?: csstype.Property.TimelineScope | undefined; - top?: csstype.Property.Top | undefined; - touchAction?: csstype.Property.TouchAction | undefined; - transform?: csstype.Property.Transform | undefined; - transformBox?: csstype.Property.TransformBox | undefined; - transformOrigin?: csstype.Property.TransformOrigin | undefined; - transformStyle?: csstype.Property.TransformStyle | undefined; - transitionBehavior?: csstype.Property.TransitionBehavior | undefined; - transitionDelay?: csstype.Property.TransitionDelay | undefined; - transitionDuration?: csstype.Property.TransitionDuration | undefined; - transitionProperty?: csstype.Property.TransitionProperty | undefined; - transitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; - translate?: csstype.Property.Translate | undefined; - unicodeBidi?: csstype.Property.UnicodeBidi | undefined; - userSelect?: csstype.Property.UserSelect | undefined; - verticalAlign?: csstype.Property.VerticalAlign | undefined; - viewTimelineAxis?: csstype.Property.ViewTimelineAxis | undefined; - viewTimelineInset?: csstype.Property.ViewTimelineInset | undefined; - viewTimelineName?: csstype.Property.ViewTimelineName | undefined; - viewTransitionName?: csstype.Property.ViewTransitionName | undefined; - visibility?: csstype.Property.Visibility | undefined; - whiteSpace?: csstype.Property.WhiteSpace | undefined; - whiteSpaceCollapse?: csstype.Property.WhiteSpaceCollapse | undefined; - whiteSpaceTrim?: csstype.Property.WhiteSpaceTrim | undefined; - widows?: csstype.Property.Widows | undefined; - width?: csstype.Property.Width | undefined; - willChange?: csstype.Property.WillChange | undefined; - wordBreak?: csstype.Property.WordBreak | undefined; - wordSpacing?: csstype.Property.WordSpacing | undefined; - wordWrap?: csstype.Property.WordWrap | undefined; - writingMode?: csstype.Property.WritingMode | undefined; - zIndex: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"; - zoom?: csstype.Property.Zoom | undefined; - all?: csstype.Property.All | undefined; - animation?: csstype.Property.Animation | undefined; - animationRange?: csstype.Property.AnimationRange | undefined; - background?: csstype.Property.Background | undefined; - backgroundPosition?: csstype.Property.BackgroundPosition | undefined; - border?: csstype.Property.Border | undefined; - borderBlock?: csstype.Property.BorderBlock | undefined; - borderBlockEnd?: csstype.Property.BorderBlockEnd | undefined; - borderBlockStart?: csstype.Property.BorderBlockStart | undefined; - borderBottom?: csstype.Property.BorderBottom | undefined; - borderColor?: csstype.Property.BorderColor | undefined; - borderImage?: csstype.Property.BorderImage | undefined; - borderInline?: csstype.Property.BorderInline | undefined; - borderInlineEnd?: csstype.Property.BorderInlineEnd | undefined; - borderInlineStart?: csstype.Property.BorderInlineStart | undefined; - borderLeft?: csstype.Property.BorderLeft | undefined; - borderRadius?: csstype.Property.BorderRadius | undefined; - borderRight?: csstype.Property.BorderRight | undefined; - borderStyle?: csstype.Property.BorderStyle | undefined; - borderTop?: csstype.Property.BorderTop | undefined; - borderWidth?: csstype.Property.BorderWidth | undefined; - caret?: csstype.Property.Caret | undefined; - columnRule?: csstype.Property.ColumnRule | undefined; - columns?: csstype.Property.Columns | undefined; - containIntrinsicSize?: csstype.Property.ContainIntrinsicSize | undefined; - container?: csstype.Property.Container | undefined; - flex?: csstype.Property.Flex | undefined; - flexFlow?: csstype.Property.FlexFlow | undefined; - font?: csstype.Property.Font | undefined; - gap?: csstype.Property.Gap | undefined; - grid?: csstype.Property.Grid | undefined; - gridArea?: csstype.Property.GridArea | undefined; - gridColumn?: csstype.Property.GridColumn | undefined; - gridRow?: csstype.Property.GridRow | undefined; - gridTemplate?: csstype.Property.GridTemplate | undefined; - inset?: csstype.Property.Inset | undefined; - insetBlock?: csstype.Property.InsetBlock | undefined; - insetInline?: csstype.Property.InsetInline | undefined; - lineClamp?: csstype.Property.LineClamp | undefined; - listStyle?: csstype.Property.ListStyle | undefined; - margin?: csstype.Property.Margin | undefined; - marginBlock?: csstype.Property.MarginBlock | undefined; - marginInline?: csstype.Property.MarginInline | undefined; - mask?: csstype.Property.Mask | undefined; - maskBorder?: csstype.Property.MaskBorder | undefined; - motion?: csstype.Property.Offset | undefined; - offset?: csstype.Property.Offset | undefined; - outline: csstype.Property.Outline; - overflow?: csstype.Property.Overflow | undefined; - overscrollBehavior?: csstype.Property.OverscrollBehavior | undefined; - padding?: csstype.Property.Padding | undefined; - paddingBlock?: csstype.Property.PaddingBlock | undefined; - paddingInline?: csstype.Property.PaddingInline | undefined; - placeContent?: csstype.Property.PlaceContent | undefined; - placeItems?: csstype.Property.PlaceItems | undefined; - placeSelf?: csstype.Property.PlaceSelf | undefined; - scrollMargin?: csstype.Property.ScrollMargin | undefined; - scrollMarginBlock?: csstype.Property.ScrollMarginBlock | undefined; - scrollMarginInline?: csstype.Property.ScrollMarginInline | undefined; - scrollPadding?: csstype.Property.ScrollPadding | undefined; - scrollPaddingBlock?: csstype.Property.ScrollPaddingBlock | undefined; - scrollPaddingInline?: csstype.Property.ScrollPaddingInline | undefined; - scrollSnapMargin?: csstype.Property.ScrollMargin | undefined; - scrollTimeline?: csstype.Property.ScrollTimeline | undefined; - textDecoration?: csstype.Property.TextDecoration | undefined; - textEmphasis?: csstype.Property.TextEmphasis | undefined; - transition?: csstype.Property.Transition | undefined; - viewTimeline?: csstype.Property.ViewTimeline | undefined; - MozAnimationDelay?: csstype.Property.AnimationDelay | undefined; - MozAnimationDirection?: csstype.Property.AnimationDirection | undefined; - MozAnimationDuration?: csstype.Property.AnimationDuration | undefined; - MozAnimationFillMode?: csstype.Property.AnimationFillMode | undefined; - MozAnimationIterationCount?: csstype.Property.AnimationIterationCount | undefined; - MozAnimationName?: csstype.Property.AnimationName | undefined; - MozAnimationPlayState?: csstype.Property.AnimationPlayState | undefined; - MozAnimationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; - MozAppearance?: csstype.Property.MozAppearance | undefined; - MozBinding?: csstype.Property.MozBinding | undefined; - MozBorderBottomColors?: csstype.Property.MozBorderBottomColors | undefined; - MozBorderEndColor?: csstype.Property.BorderInlineEndColor | undefined; - MozBorderEndStyle?: csstype.Property.BorderInlineEndStyle | undefined; - MozBorderEndWidth?: csstype.Property.BorderInlineEndWidth | undefined; - MozBorderLeftColors?: csstype.Property.MozBorderLeftColors | undefined; - MozBorderRightColors?: csstype.Property.MozBorderRightColors | undefined; - MozBorderStartColor?: csstype.Property.BorderInlineStartColor | undefined; - MozBorderStartStyle?: csstype.Property.BorderInlineStartStyle | undefined; - MozBorderTopColors?: csstype.Property.MozBorderTopColors | undefined; - MozBoxSizing?: csstype.Property.BoxSizing | undefined; - MozColumnCount?: csstype.Property.ColumnCount | undefined; - MozColumnFill?: csstype.Property.ColumnFill | undefined; - MozColumnRuleColor?: csstype.Property.ColumnRuleColor | undefined; - MozColumnRuleStyle?: csstype.Property.ColumnRuleStyle | undefined; - MozColumnRuleWidth?: csstype.Property.ColumnRuleWidth | undefined; - MozColumnWidth?: csstype.Property.ColumnWidth | undefined; - MozContextProperties?: csstype.Property.MozContextProperties | undefined; - MozFontFeatureSettings?: csstype.Property.FontFeatureSettings | undefined; - MozFontLanguageOverride?: csstype.Property.FontLanguageOverride | undefined; - MozHyphens?: csstype.Property.Hyphens | undefined; - MozImageRegion?: csstype.Property.MozImageRegion | undefined; - MozMarginEnd?: csstype.Property.MarginInlineEnd | undefined; - MozMarginStart?: csstype.Property.MarginInlineStart | undefined; - MozOrient?: csstype.Property.MozOrient | undefined; - MozOsxFontSmoothing?: csstype.Property.FontSmooth | undefined; - MozOutlineRadiusBottomleft?: csstype.Property.MozOutlineRadiusBottomleft | undefined; - MozOutlineRadiusBottomright?: csstype.Property.MozOutlineRadiusBottomright | undefined; - MozOutlineRadiusTopleft?: csstype.Property.MozOutlineRadiusTopleft | undefined; - MozOutlineRadiusTopright?: csstype.Property.MozOutlineRadiusTopright | undefined; - MozPaddingEnd?: csstype.Property.PaddingInlineEnd | undefined; - MozPaddingStart?: csstype.Property.PaddingInlineStart | undefined; - MozStackSizing?: csstype.Property.MozStackSizing | undefined; - MozTabSize?: csstype.Property.TabSize | undefined; - MozTextBlink?: csstype.Property.MozTextBlink | undefined; - MozTextSizeAdjust?: csstype.Property.TextSizeAdjust | undefined; - MozUserFocus?: csstype.Property.MozUserFocus | undefined; - MozUserModify?: csstype.Property.MozUserModify | undefined; - MozUserSelect?: csstype.Property.UserSelect | undefined; - MozWindowDragging?: csstype.Property.MozWindowDragging | undefined; - MozWindowShadow?: csstype.Property.MozWindowShadow | undefined; - msAccelerator?: csstype.Property.MsAccelerator | undefined; - msBlockProgression?: csstype.Property.MsBlockProgression | undefined; - msContentZoomChaining?: csstype.Property.MsContentZoomChaining | undefined; - msContentZoomLimitMax?: csstype.Property.MsContentZoomLimitMax | undefined; - msContentZoomLimitMin?: csstype.Property.MsContentZoomLimitMin | undefined; - msContentZoomSnapPoints?: csstype.Property.MsContentZoomSnapPoints | undefined; - msContentZoomSnapType?: csstype.Property.MsContentZoomSnapType | undefined; - msContentZooming?: csstype.Property.MsContentZooming | undefined; - msFilter?: csstype.Property.MsFilter | undefined; - msFlexDirection?: csstype.Property.FlexDirection | undefined; - msFlexPositive?: csstype.Property.FlexGrow | undefined; - msFlowFrom?: csstype.Property.MsFlowFrom | undefined; - msFlowInto?: csstype.Property.MsFlowInto | undefined; - msGridColumns?: csstype.Property.MsGridColumns | undefined; - msGridRows?: csstype.Property.MsGridRows | undefined; - msHighContrastAdjust?: csstype.Property.MsHighContrastAdjust | undefined; - msHyphenateLimitChars?: csstype.Property.MsHyphenateLimitChars | undefined; - msHyphenateLimitLines?: csstype.Property.MsHyphenateLimitLines | undefined; - msHyphenateLimitZone?: csstype.Property.MsHyphenateLimitZone | undefined; - msHyphens?: csstype.Property.Hyphens | undefined; - msImeAlign?: csstype.Property.MsImeAlign | undefined; - msLineBreak?: csstype.Property.LineBreak | undefined; - msOrder?: csstype.Property.Order | undefined; - msOverflowStyle?: csstype.Property.MsOverflowStyle | undefined; - msOverflowX?: csstype.Property.OverflowX | undefined; - msOverflowY?: csstype.Property.OverflowY | undefined; - msScrollChaining?: csstype.Property.MsScrollChaining | undefined; - msScrollLimitXMax?: csstype.Property.MsScrollLimitXMax | undefined; - msScrollLimitXMin?: csstype.Property.MsScrollLimitXMin | undefined; - msScrollLimitYMax?: csstype.Property.MsScrollLimitYMax | undefined; - msScrollLimitYMin?: csstype.Property.MsScrollLimitYMin | undefined; - msScrollRails?: csstype.Property.MsScrollRails | undefined; - msScrollSnapPointsX?: csstype.Property.MsScrollSnapPointsX | undefined; - msScrollSnapPointsY?: csstype.Property.MsScrollSnapPointsY | undefined; - msScrollSnapType?: csstype.Property.MsScrollSnapType | undefined; - msScrollTranslation?: csstype.Property.MsScrollTranslation | undefined; - msScrollbar3dlightColor?: csstype.Property.MsScrollbar3dlightColor | undefined; - msScrollbarArrowColor?: csstype.Property.MsScrollbarArrowColor | undefined; - msScrollbarBaseColor?: csstype.Property.MsScrollbarBaseColor | undefined; - msScrollbarDarkshadowColor?: csstype.Property.MsScrollbarDarkshadowColor | undefined; - msScrollbarFaceColor?: csstype.Property.MsScrollbarFaceColor | undefined; - msScrollbarHighlightColor?: csstype.Property.MsScrollbarHighlightColor | undefined; - msScrollbarShadowColor?: csstype.Property.MsScrollbarShadowColor | undefined; - msScrollbarTrackColor?: csstype.Property.MsScrollbarTrackColor | undefined; - msTextAutospace?: csstype.Property.MsTextAutospace | undefined; - msTextCombineHorizontal?: csstype.Property.TextCombineUpright | undefined; - msTextOverflow?: csstype.Property.TextOverflow | undefined; - msTouchAction?: csstype.Property.TouchAction | undefined; - msTouchSelect?: csstype.Property.MsTouchSelect | undefined; - msTransform?: csstype.Property.Transform | undefined; - msTransformOrigin?: csstype.Property.TransformOrigin | undefined; - msTransitionDelay?: csstype.Property.TransitionDelay | undefined; - msTransitionDuration?: csstype.Property.TransitionDuration | undefined; - msTransitionProperty?: csstype.Property.TransitionProperty | undefined; - msTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; - msUserSelect?: csstype.Property.MsUserSelect | undefined; - msWordBreak?: csstype.Property.WordBreak | undefined; - msWrapFlow?: csstype.Property.MsWrapFlow | undefined; - msWrapMargin?: csstype.Property.MsWrapMargin | undefined; - msWrapThrough?: csstype.Property.MsWrapThrough | undefined; - msWritingMode?: csstype.Property.WritingMode | undefined; - WebkitAlignContent?: csstype.Property.AlignContent | undefined; - WebkitAlignItems?: csstype.Property.AlignItems | undefined; - WebkitAlignSelf?: csstype.Property.AlignSelf | undefined; - WebkitAnimationDelay?: csstype.Property.AnimationDelay | undefined; - WebkitAnimationDirection?: csstype.Property.AnimationDirection | undefined; - WebkitAnimationDuration?: csstype.Property.AnimationDuration | undefined; - WebkitAnimationFillMode?: csstype.Property.AnimationFillMode | undefined; - WebkitAnimationIterationCount?: csstype.Property.AnimationIterationCount | undefined; - WebkitAnimationName?: csstype.Property.AnimationName | undefined; - WebkitAnimationPlayState?: csstype.Property.AnimationPlayState | undefined; - WebkitAnimationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; - WebkitAppearance?: csstype.Property.WebkitAppearance | undefined; - WebkitBackdropFilter?: csstype.Property.BackdropFilter | undefined; - WebkitBackfaceVisibility?: csstype.Property.BackfaceVisibility | undefined; - WebkitBackgroundClip?: csstype.Property.BackgroundClip | undefined; - WebkitBackgroundOrigin?: csstype.Property.BackgroundOrigin | undefined; - WebkitBackgroundSize?: csstype.Property.BackgroundSize | undefined; - WebkitBorderBeforeColor?: csstype.Property.WebkitBorderBeforeColor | undefined; - WebkitBorderBeforeStyle?: csstype.Property.WebkitBorderBeforeStyle | undefined; - WebkitBorderBeforeWidth?: csstype.Property.WebkitBorderBeforeWidth | undefined; - WebkitBorderBottomLeftRadius?: csstype.Property.BorderBottomLeftRadius | undefined; - WebkitBorderBottomRightRadius?: csstype.Property.BorderBottomRightRadius | undefined; - WebkitBorderImageSlice?: csstype.Property.BorderImageSlice | undefined; - WebkitBorderTopLeftRadius?: csstype.Property.BorderTopLeftRadius | undefined; - WebkitBorderTopRightRadius?: csstype.Property.BorderTopRightRadius | undefined; - WebkitBoxDecorationBreak?: csstype.Property.BoxDecorationBreak | undefined; - WebkitBoxReflect?: csstype.Property.WebkitBoxReflect | undefined; - WebkitBoxShadow?: csstype.Property.BoxShadow | undefined; - WebkitBoxSizing?: csstype.Property.BoxSizing | undefined; - WebkitClipPath?: csstype.Property.ClipPath | undefined; - WebkitColumnCount?: csstype.Property.ColumnCount | undefined; - WebkitColumnFill?: csstype.Property.ColumnFill | undefined; - WebkitColumnRuleColor?: csstype.Property.ColumnRuleColor | undefined; - WebkitColumnRuleStyle?: csstype.Property.ColumnRuleStyle | undefined; - WebkitColumnRuleWidth?: csstype.Property.ColumnRuleWidth | undefined; - WebkitColumnSpan?: csstype.Property.ColumnSpan | undefined; - WebkitColumnWidth?: csstype.Property.ColumnWidth | undefined; - WebkitFilter?: csstype.Property.Filter | undefined; - WebkitFlexBasis?: csstype.Property.FlexBasis | undefined; - WebkitFlexDirection?: csstype.Property.FlexDirection | undefined; - WebkitFlexGrow?: csstype.Property.FlexGrow | undefined; - WebkitFlexShrink?: csstype.Property.FlexShrink | undefined; - WebkitFlexWrap?: csstype.Property.FlexWrap | undefined; - WebkitFontFeatureSettings?: csstype.Property.FontFeatureSettings | undefined; - WebkitFontKerning?: csstype.Property.FontKerning | undefined; - WebkitFontSmoothing?: csstype.Property.FontSmooth | undefined; - WebkitFontVariantLigatures?: csstype.Property.FontVariantLigatures | undefined; - WebkitHyphenateCharacter?: csstype.Property.HyphenateCharacter | undefined; - WebkitHyphens?: csstype.Property.Hyphens | undefined; - WebkitInitialLetter?: csstype.Property.InitialLetter | undefined; - WebkitJustifyContent?: csstype.Property.JustifyContent | undefined; - WebkitLineBreak?: csstype.Property.LineBreak | undefined; - WebkitLineClamp?: csstype.Property.WebkitLineClamp | undefined; - WebkitMarginEnd?: csstype.Property.MarginInlineEnd | undefined; - WebkitMarginStart?: csstype.Property.MarginInlineStart | undefined; - WebkitMaskAttachment?: csstype.Property.WebkitMaskAttachment | undefined; - WebkitMaskBoxImageOutset?: csstype.Property.MaskBorderOutset | undefined; - WebkitMaskBoxImageRepeat?: csstype.Property.MaskBorderRepeat | undefined; - WebkitMaskBoxImageSlice?: csstype.Property.MaskBorderSlice | undefined; - WebkitMaskBoxImageSource?: csstype.Property.MaskBorderSource | undefined; - WebkitMaskBoxImageWidth?: csstype.Property.MaskBorderWidth | undefined; - WebkitMaskClip?: csstype.Property.WebkitMaskClip | undefined; - WebkitMaskComposite?: csstype.Property.WebkitMaskComposite | undefined; - WebkitMaskImage?: csstype.Property.WebkitMaskImage | undefined; - WebkitMaskOrigin?: csstype.Property.WebkitMaskOrigin | undefined; - WebkitMaskPosition?: csstype.Property.WebkitMaskPosition | undefined; - WebkitMaskPositionX?: csstype.Property.WebkitMaskPositionX | undefined; - WebkitMaskPositionY?: csstype.Property.WebkitMaskPositionY | undefined; - WebkitMaskRepeat?: csstype.Property.WebkitMaskRepeat | undefined; - WebkitMaskRepeatX?: csstype.Property.WebkitMaskRepeatX | undefined; - WebkitMaskRepeatY?: csstype.Property.WebkitMaskRepeatY | undefined; - WebkitMaskSize?: csstype.Property.WebkitMaskSize | undefined; - WebkitMaxInlineSize?: csstype.Property.MaxInlineSize | undefined; - WebkitOrder?: csstype.Property.Order | undefined; - WebkitOverflowScrolling?: csstype.Property.WebkitOverflowScrolling | undefined; - WebkitPaddingEnd?: csstype.Property.PaddingInlineEnd | undefined; - WebkitPaddingStart?: csstype.Property.PaddingInlineStart | undefined; - WebkitPerspective?: csstype.Property.Perspective | undefined; - WebkitPerspectiveOrigin?: csstype.Property.PerspectiveOrigin | undefined; - WebkitPrintColorAdjust?: csstype.Property.PrintColorAdjust | undefined; - WebkitRubyPosition?: csstype.Property.RubyPosition | undefined; - WebkitScrollSnapType?: csstype.Property.ScrollSnapType | undefined; - WebkitShapeMargin?: csstype.Property.ShapeMargin | undefined; - WebkitTapHighlightColor?: csstype.Property.WebkitTapHighlightColor | undefined; - WebkitTextCombine?: csstype.Property.TextCombineUpright | undefined; - WebkitTextDecorationColor?: csstype.Property.TextDecorationColor | undefined; - WebkitTextDecorationLine?: csstype.Property.TextDecorationLine | undefined; - WebkitTextDecorationSkip?: csstype.Property.TextDecorationSkip | undefined; - WebkitTextDecorationStyle?: csstype.Property.TextDecorationStyle | undefined; - WebkitTextEmphasisColor?: csstype.Property.TextEmphasisColor | undefined; - WebkitTextEmphasisPosition?: csstype.Property.TextEmphasisPosition | undefined; - WebkitTextEmphasisStyle?: csstype.Property.TextEmphasisStyle | undefined; - WebkitTextFillColor?: csstype.Property.WebkitTextFillColor | undefined; - WebkitTextOrientation?: csstype.Property.TextOrientation | undefined; - WebkitTextSizeAdjust?: csstype.Property.TextSizeAdjust | undefined; - WebkitTextStrokeColor?: csstype.Property.WebkitTextStrokeColor | undefined; - WebkitTextStrokeWidth?: csstype.Property.WebkitTextStrokeWidth | undefined; - WebkitTextUnderlinePosition?: csstype.Property.TextUnderlinePosition | undefined; - WebkitTouchCallout?: csstype.Property.WebkitTouchCallout | undefined; - WebkitTransform?: csstype.Property.Transform | undefined; - WebkitTransformOrigin?: csstype.Property.TransformOrigin | undefined; - WebkitTransformStyle?: csstype.Property.TransformStyle | undefined; - WebkitTransitionDelay?: csstype.Property.TransitionDelay | undefined; - WebkitTransitionDuration?: csstype.Property.TransitionDuration | undefined; - WebkitTransitionProperty?: csstype.Property.TransitionProperty | undefined; - WebkitTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; - WebkitUserModify?: csstype.Property.WebkitUserModify | undefined; - WebkitUserSelect?: csstype.Property.UserSelect | undefined; - WebkitWritingMode?: csstype.Property.WritingMode | undefined; - MozAnimation?: csstype.Property.Animation | undefined; - MozBorderImage?: csstype.Property.BorderImage | undefined; - MozColumnRule?: csstype.Property.ColumnRule | undefined; - MozColumns?: csstype.Property.Columns | undefined; - MozOutlineRadius?: csstype.Property.MozOutlineRadius | undefined; - msContentZoomLimit?: csstype.Property.MsContentZoomLimit | undefined; - msContentZoomSnap?: csstype.Property.MsContentZoomSnap | undefined; - msFlex?: csstype.Property.Flex | undefined; - msScrollLimit?: csstype.Property.MsScrollLimit | undefined; - msScrollSnapX?: csstype.Property.MsScrollSnapX | undefined; - msScrollSnapY?: csstype.Property.MsScrollSnapY | undefined; - msTransition?: csstype.Property.Transition | undefined; - WebkitAnimation?: csstype.Property.Animation | undefined; - WebkitBorderBefore?: csstype.Property.WebkitBorderBefore | undefined; - WebkitBorderImage?: csstype.Property.BorderImage | undefined; - WebkitBorderRadius?: csstype.Property.BorderRadius | undefined; - WebkitColumnRule?: csstype.Property.ColumnRule | undefined; - WebkitColumns?: csstype.Property.Columns | undefined; - WebkitFlex?: csstype.Property.Flex | undefined; - WebkitFlexFlow?: csstype.Property.FlexFlow | undefined; - WebkitMask?: csstype.Property.WebkitMask | undefined; - WebkitMaskBoxImage?: csstype.Property.MaskBorder | undefined; - WebkitTextEmphasis?: csstype.Property.TextEmphasis | undefined; - WebkitTextStroke?: csstype.Property.WebkitTextStroke | undefined; - WebkitTransition?: csstype.Property.Transition | undefined; - azimuth?: csstype.Property.Azimuth | undefined; - boxAlign?: csstype.Property.BoxAlign | undefined; - boxDirection?: csstype.Property.BoxDirection | undefined; - boxFlex?: csstype.Property.BoxFlex | undefined; - boxFlexGroup?: csstype.Property.BoxFlexGroup | undefined; - boxLines?: csstype.Property.BoxLines | undefined; - boxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; - boxOrient?: csstype.Property.BoxOrient | undefined; - boxPack?: csstype.Property.BoxPack | undefined; - clip?: csstype.Property.Clip | undefined; - gridColumnGap?: csstype.Property.GridColumnGap | undefined; - gridGap?: csstype.Property.GridGap | undefined; - gridRowGap?: csstype.Property.GridRowGap | undefined; - imeMode?: csstype.Property.ImeMode | undefined; - offsetBlock?: csstype.Property.InsetBlock | undefined; - offsetBlockEnd?: csstype.Property.InsetBlockEnd | undefined; - offsetBlockStart?: csstype.Property.InsetBlockStart | undefined; - offsetInline?: csstype.Property.InsetInline | undefined; - offsetInlineEnd?: csstype.Property.InsetInlineEnd | undefined; - offsetInlineStart?: csstype.Property.InsetInlineStart | undefined; - scrollSnapCoordinate?: csstype.Property.ScrollSnapCoordinate | undefined; - scrollSnapDestination?: csstype.Property.ScrollSnapDestination | undefined; - scrollSnapPointsX?: csstype.Property.ScrollSnapPointsX | undefined; - scrollSnapPointsY?: csstype.Property.ScrollSnapPointsY | undefined; - scrollSnapTypeX?: csstype.Property.ScrollSnapTypeX | undefined; - scrollSnapTypeY?: csstype.Property.ScrollSnapTypeY | undefined; - KhtmlBoxAlign?: csstype.Property.BoxAlign | undefined; - KhtmlBoxDirection?: csstype.Property.BoxDirection | undefined; - KhtmlBoxFlex?: csstype.Property.BoxFlex | undefined; - KhtmlBoxFlexGroup?: csstype.Property.BoxFlexGroup | undefined; - KhtmlBoxLines?: csstype.Property.BoxLines | undefined; - KhtmlBoxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; - KhtmlBoxOrient?: csstype.Property.BoxOrient | undefined; - KhtmlBoxPack?: csstype.Property.BoxPack | undefined; - KhtmlLineBreak?: csstype.Property.LineBreak | undefined; - KhtmlOpacity?: csstype.Property.Opacity | undefined; - KhtmlUserSelect?: csstype.Property.UserSelect | undefined; - MozBackfaceVisibility?: csstype.Property.BackfaceVisibility | undefined; - MozBackgroundClip?: csstype.Property.BackgroundClip | undefined; - MozBackgroundInlinePolicy?: csstype.Property.BoxDecorationBreak | undefined; - MozBackgroundOrigin?: csstype.Property.BackgroundOrigin | undefined; - MozBackgroundSize?: csstype.Property.BackgroundSize | undefined; - MozBorderRadius?: csstype.Property.BorderRadius | undefined; - MozBorderRadiusBottomleft?: csstype.Property.BorderBottomLeftRadius | undefined; - MozBorderRadiusBottomright?: csstype.Property.BorderBottomRightRadius | undefined; - MozBorderRadiusTopleft?: csstype.Property.BorderTopLeftRadius | undefined; - MozBorderRadiusTopright?: csstype.Property.BorderTopRightRadius | undefined; - MozBoxAlign?: csstype.Property.BoxAlign | undefined; - MozBoxDirection?: csstype.Property.BoxDirection | undefined; - MozBoxFlex?: csstype.Property.BoxFlex | undefined; - MozBoxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; - MozBoxOrient?: csstype.Property.BoxOrient | undefined; - MozBoxPack?: csstype.Property.BoxPack | undefined; - MozBoxShadow?: csstype.Property.BoxShadow | undefined; - MozFloatEdge?: csstype.Property.MozFloatEdge | undefined; - MozForceBrokenImageIcon?: csstype.Property.MozForceBrokenImageIcon | undefined; - MozOpacity?: csstype.Property.Opacity | undefined; - MozOutline?: csstype.Property.Outline | undefined; - MozOutlineColor?: csstype.Property.OutlineColor | undefined; - MozOutlineStyle?: csstype.Property.OutlineStyle | undefined; - MozOutlineWidth?: csstype.Property.OutlineWidth | undefined; - MozPerspective?: csstype.Property.Perspective | undefined; - MozPerspectiveOrigin?: csstype.Property.PerspectiveOrigin | undefined; - MozTextAlignLast?: csstype.Property.TextAlignLast | undefined; - MozTextDecorationColor?: csstype.Property.TextDecorationColor | undefined; - MozTextDecorationLine?: csstype.Property.TextDecorationLine | undefined; - MozTextDecorationStyle?: csstype.Property.TextDecorationStyle | undefined; - MozTransform?: csstype.Property.Transform | undefined; - MozTransformOrigin?: csstype.Property.TransformOrigin | undefined; - MozTransformStyle?: csstype.Property.TransformStyle | undefined; - MozTransition?: csstype.Property.Transition | undefined; - MozTransitionDelay?: csstype.Property.TransitionDelay | undefined; - MozTransitionDuration?: csstype.Property.TransitionDuration | undefined; - MozTransitionProperty?: csstype.Property.TransitionProperty | undefined; - MozTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; - MozUserInput?: csstype.Property.MozUserInput | undefined; - msImeMode?: csstype.Property.ImeMode | undefined; - OAnimation?: csstype.Property.Animation | undefined; - OAnimationDelay?: csstype.Property.AnimationDelay | undefined; - OAnimationDirection?: csstype.Property.AnimationDirection | undefined; - OAnimationDuration?: csstype.Property.AnimationDuration | undefined; - OAnimationFillMode?: csstype.Property.AnimationFillMode | undefined; - OAnimationIterationCount?: csstype.Property.AnimationIterationCount | undefined; - OAnimationName?: csstype.Property.AnimationName | undefined; - OAnimationPlayState?: csstype.Property.AnimationPlayState | undefined; - OAnimationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; - OBackgroundSize?: csstype.Property.BackgroundSize | undefined; - OBorderImage?: csstype.Property.BorderImage | undefined; - OObjectFit?: csstype.Property.ObjectFit | undefined; - OObjectPosition?: csstype.Property.ObjectPosition | undefined; - OTabSize?: csstype.Property.TabSize | undefined; - OTextOverflow?: csstype.Property.TextOverflow | undefined; - OTransform?: csstype.Property.Transform | undefined; - OTransformOrigin?: csstype.Property.TransformOrigin | undefined; - OTransition?: csstype.Property.Transition | undefined; - OTransitionDelay?: csstype.Property.TransitionDelay | undefined; - OTransitionDuration?: csstype.Property.TransitionDuration | undefined; - OTransitionProperty?: csstype.Property.TransitionProperty | undefined; - OTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; - WebkitBoxAlign?: csstype.Property.BoxAlign | undefined; - WebkitBoxDirection?: csstype.Property.BoxDirection | undefined; - WebkitBoxFlex?: csstype.Property.BoxFlex | undefined; - WebkitBoxFlexGroup?: csstype.Property.BoxFlexGroup | undefined; - WebkitBoxLines?: csstype.Property.BoxLines | undefined; - WebkitBoxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; - WebkitBoxOrient?: csstype.Property.BoxOrient | undefined; - WebkitBoxPack?: csstype.Property.BoxPack | undefined; - alignmentBaseline?: csstype.Property.AlignmentBaseline | undefined; - baselineShift?: csstype.Property.BaselineShift | undefined; - clipRule?: csstype.Property.ClipRule | undefined; - colorInterpolation?: csstype.Property.ColorInterpolation | undefined; - colorRendering?: csstype.Property.ColorRendering | undefined; - dominantBaseline?: csstype.Property.DominantBaseline | undefined; - fill?: csstype.Property.Fill | undefined; - fillOpacity?: csstype.Property.FillOpacity | undefined; - fillRule?: csstype.Property.FillRule | undefined; - floodColor?: csstype.Property.FloodColor | undefined; - floodOpacity?: csstype.Property.FloodOpacity | undefined; - glyphOrientationVertical?: csstype.Property.GlyphOrientationVertical | undefined; - lightingColor?: csstype.Property.LightingColor | undefined; - marker?: csstype.Property.Marker | undefined; - markerEnd?: csstype.Property.MarkerEnd | undefined; - markerMid?: csstype.Property.MarkerMid | undefined; - markerStart?: csstype.Property.MarkerStart | undefined; - shapeRendering?: csstype.Property.ShapeRendering | undefined; - stopColor?: csstype.Property.StopColor | undefined; - stopOpacity?: csstype.Property.StopOpacity | undefined; - stroke?: csstype.Property.Stroke | undefined; - strokeDasharray?: csstype.Property.StrokeDasharray | undefined; - strokeDashoffset?: csstype.Property.StrokeDashoffset | undefined; - strokeLinecap?: csstype.Property.StrokeLinecap | undefined; - strokeLinejoin?: csstype.Property.StrokeLinejoin | undefined; - strokeMiterlimit?: csstype.Property.StrokeMiterlimit | undefined; - strokeOpacity?: csstype.Property.StrokeOpacity | undefined; - strokeWidth?: csstype.Property.StrokeWidth | undefined; - textAnchor?: csstype.Property.TextAnchor | undefined; - vectorEffect?: csstype.Property.VectorEffect | undefined; - }; + accentColor?: csstype.Property.AccentColor | undefined; + alignContent?: csstype.Property.AlignContent | undefined; + alignItems?: csstype.Property.AlignItems | undefined; + alignSelf?: csstype.Property.AlignSelf | undefined; + alignTracks?: csstype.Property.AlignTracks | undefined; + animationComposition?: csstype.Property.AnimationComposition | undefined; + animationDelay?: csstype.Property.AnimationDelay | undefined; + animationDirection?: csstype.Property.AnimationDirection | undefined; + animationDuration?: csstype.Property.AnimationDuration | undefined; + animationFillMode?: csstype.Property.AnimationFillMode | undefined; + animationIterationCount?: csstype.Property.AnimationIterationCount | undefined; + animationName?: csstype.Property.AnimationName | undefined; + animationPlayState?: csstype.Property.AnimationPlayState | undefined; + animationRangeEnd?: csstype.Property.AnimationRangeEnd | undefined; + animationRangeStart?: csstype.Property.AnimationRangeStart | undefined; + animationTimeline?: csstype.Property.AnimationTimeline | undefined; + animationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; + appearance?: csstype.Property.Appearance | undefined; + aspectRatio?: csstype.Property.AspectRatio | undefined; + backdropFilter?: csstype.Property.BackdropFilter | undefined; + backfaceVisibility?: csstype.Property.BackfaceVisibility | undefined; + backgroundAttachment?: csstype.Property.BackgroundAttachment | undefined; + backgroundBlendMode?: csstype.Property.BackgroundBlendMode | undefined; + backgroundClip?: csstype.Property.BackgroundClip | undefined; + backgroundColor?: csstype.Property.BackgroundColor | undefined; + backgroundImage?: csstype.Property.BackgroundImage | undefined; + backgroundOrigin?: csstype.Property.BackgroundOrigin | undefined; + backgroundPositionX?: csstype.Property.BackgroundPositionX | undefined; + backgroundPositionY?: csstype.Property.BackgroundPositionY | undefined; + backgroundRepeat?: csstype.Property.BackgroundRepeat | undefined; + backgroundSize?: csstype.Property.BackgroundSize | undefined; + blockOverflow?: csstype.Property.BlockOverflow | undefined; + blockSize?: csstype.Property.BlockSize | undefined; + borderBlockColor?: csstype.Property.BorderBlockColor | undefined; + borderBlockEndColor?: csstype.Property.BorderBlockEndColor | undefined; + borderBlockEndStyle?: csstype.Property.BorderBlockEndStyle | undefined; + borderBlockEndWidth?: csstype.Property.BorderBlockEndWidth | undefined; + borderBlockStartColor?: csstype.Property.BorderBlockStartColor | undefined; + borderBlockStartStyle?: csstype.Property.BorderBlockStartStyle | undefined; + borderBlockStartWidth?: csstype.Property.BorderBlockStartWidth | undefined; + borderBlockStyle?: csstype.Property.BorderBlockStyle | undefined; + borderBlockWidth?: csstype.Property.BorderBlockWidth | undefined; + borderBottomColor?: csstype.Property.BorderBottomColor | undefined; + borderBottomLeftRadius?: csstype.Property.BorderBottomLeftRadius | undefined; + borderBottomRightRadius?: csstype.Property.BorderBottomRightRadius | undefined; + borderBottomStyle?: csstype.Property.BorderBottomStyle | undefined; + borderBottomWidth?: csstype.Property.BorderBottomWidth | undefined; + borderCollapse?: csstype.Property.BorderCollapse | undefined; + borderEndEndRadius?: csstype.Property.BorderEndEndRadius | undefined; + borderEndStartRadius?: csstype.Property.BorderEndStartRadius | undefined; + borderImageOutset?: csstype.Property.BorderImageOutset | undefined; + borderImageRepeat?: csstype.Property.BorderImageRepeat | undefined; + borderImageSlice?: csstype.Property.BorderImageSlice | undefined; + borderImageSource?: csstype.Property.BorderImageSource | undefined; + borderImageWidth?: csstype.Property.BorderImageWidth | undefined; + borderInlineColor?: csstype.Property.BorderInlineColor | undefined; + borderInlineEndColor?: csstype.Property.BorderInlineEndColor | undefined; + borderInlineEndStyle?: csstype.Property.BorderInlineEndStyle | undefined; + borderInlineEndWidth?: csstype.Property.BorderInlineEndWidth | undefined; + borderInlineStartColor?: csstype.Property.BorderInlineStartColor | undefined; + borderInlineStartStyle?: csstype.Property.BorderInlineStartStyle | undefined; + borderInlineStartWidth?: csstype.Property.BorderInlineStartWidth | undefined; + borderInlineStyle?: csstype.Property.BorderInlineStyle | undefined; + borderInlineWidth?: csstype.Property.BorderInlineWidth | undefined; + borderLeftColor?: csstype.Property.BorderLeftColor | undefined; + borderLeftStyle?: csstype.Property.BorderLeftStyle | undefined; + borderLeftWidth?: csstype.Property.BorderLeftWidth | undefined; + borderRightColor?: csstype.Property.BorderRightColor | undefined; + borderRightStyle?: csstype.Property.BorderRightStyle | undefined; + borderRightWidth?: csstype.Property.BorderRightWidth | undefined; + borderSpacing?: csstype.Property.BorderSpacing | undefined; + borderStartEndRadius?: csstype.Property.BorderStartEndRadius | undefined; + borderStartStartRadius?: csstype.Property.BorderStartStartRadius | undefined; + borderTopColor?: csstype.Property.BorderTopColor | undefined; + borderTopLeftRadius?: csstype.Property.BorderTopLeftRadius | undefined; + borderTopRightRadius?: csstype.Property.BorderTopRightRadius | undefined; + borderTopStyle?: csstype.Property.BorderTopStyle | undefined; + borderTopWidth?: csstype.Property.BorderTopWidth | undefined; + bottom?: csstype.Property.Bottom | undefined; + boxDecorationBreak?: csstype.Property.BoxDecorationBreak | undefined; + boxShadow?: csstype.Property.BoxShadow | undefined; + boxSizing?: csstype.Property.BoxSizing | undefined; + breakAfter?: csstype.Property.BreakAfter | undefined; + breakBefore?: csstype.Property.BreakBefore | undefined; + breakInside?: csstype.Property.BreakInside | undefined; + captionSide?: csstype.Property.CaptionSide | undefined; + caretColor?: csstype.Property.CaretColor | undefined; + caretShape?: csstype.Property.CaretShape | undefined; + clear?: csstype.Property.Clear | undefined; + clipPath?: csstype.Property.ClipPath | undefined; + color?: csstype.Property.Color | undefined; + colorAdjust?: csstype.Property.PrintColorAdjust | undefined; + colorScheme?: csstype.Property.ColorScheme | undefined; + columnCount?: csstype.Property.ColumnCount | undefined; + columnFill?: csstype.Property.ColumnFill | undefined; + columnGap?: csstype.Property.ColumnGap | undefined; + columnRuleColor?: csstype.Property.ColumnRuleColor | undefined; + columnRuleStyle?: csstype.Property.ColumnRuleStyle | undefined; + columnRuleWidth?: csstype.Property.ColumnRuleWidth | undefined; + columnSpan?: csstype.Property.ColumnSpan | undefined; + columnWidth?: csstype.Property.ColumnWidth | undefined; + contain?: csstype.Property.Contain | undefined; + containIntrinsicBlockSize?: csstype.Property.ContainIntrinsicBlockSize | undefined; + containIntrinsicHeight?: csstype.Property.ContainIntrinsicHeight | undefined; + containIntrinsicInlineSize?: csstype.Property.ContainIntrinsicInlineSize | undefined; + containIntrinsicWidth?: csstype.Property.ContainIntrinsicWidth | undefined; + containerName?: csstype.Property.ContainerName | undefined; + containerType?: csstype.Property.ContainerType | undefined; + content?: csstype.Property.Content | undefined; + contentVisibility?: csstype.Property.ContentVisibility | undefined; + counterIncrement?: csstype.Property.CounterIncrement | undefined; + counterReset?: csstype.Property.CounterReset | undefined; + counterSet?: csstype.Property.CounterSet | undefined; + cursor?: csstype.Property.Cursor | undefined; + direction?: csstype.Property.Direction | undefined; + display?: csstype.Property.Display | undefined; + emptyCells?: csstype.Property.EmptyCells | undefined; + filter?: csstype.Property.Filter | undefined; + flexBasis?: csstype.Property.FlexBasis | undefined; + flexDirection?: csstype.Property.FlexDirection | undefined; + flexGrow?: csstype.Property.FlexGrow | undefined; + flexShrink?: csstype.Property.FlexShrink | undefined; + flexWrap?: csstype.Property.FlexWrap | undefined; + float?: csstype.Property.Float | undefined; + fontFamily?: csstype.Property.FontFamily | undefined; + fontFeatureSettings?: csstype.Property.FontFeatureSettings | undefined; + fontKerning?: csstype.Property.FontKerning | undefined; + fontLanguageOverride?: csstype.Property.FontLanguageOverride | undefined; + fontOpticalSizing?: csstype.Property.FontOpticalSizing | undefined; + fontPalette?: csstype.Property.FontPalette | undefined; + fontSize?: csstype.Property.FontSize | undefined; + fontSizeAdjust?: csstype.Property.FontSizeAdjust | undefined; + fontSmooth?: csstype.Property.FontSmooth | undefined; + fontStretch?: csstype.Property.FontStretch | undefined; + fontStyle?: csstype.Property.FontStyle | undefined; + fontSynthesis?: csstype.Property.FontSynthesis | undefined; + fontSynthesisPosition?: csstype.Property.FontSynthesisPosition | undefined; + fontSynthesisSmallCaps?: csstype.Property.FontSynthesisSmallCaps | undefined; + fontSynthesisStyle?: csstype.Property.FontSynthesisStyle | undefined; + fontSynthesisWeight?: csstype.Property.FontSynthesisWeight | undefined; + fontVariant?: csstype.Property.FontVariant | undefined; + fontVariantAlternates?: csstype.Property.FontVariantAlternates | undefined; + fontVariantCaps?: csstype.Property.FontVariantCaps | undefined; + fontVariantEastAsian?: csstype.Property.FontVariantEastAsian | undefined; + fontVariantEmoji?: csstype.Property.FontVariantEmoji | undefined; + fontVariantLigatures?: csstype.Property.FontVariantLigatures | undefined; + fontVariantNumeric?: csstype.Property.FontVariantNumeric | undefined; + fontVariantPosition?: csstype.Property.FontVariantPosition | undefined; + fontVariationSettings?: csstype.Property.FontVariationSettings | undefined; + fontWeight?: csstype.Property.FontWeight | undefined; + forcedColorAdjust?: csstype.Property.ForcedColorAdjust | undefined; + gridAutoColumns?: csstype.Property.GridAutoColumns | undefined; + gridAutoFlow?: csstype.Property.GridAutoFlow | undefined; + gridAutoRows?: csstype.Property.GridAutoRows | undefined; + gridColumnEnd?: csstype.Property.GridColumnEnd | undefined; + gridColumnStart?: csstype.Property.GridColumnStart | undefined; + gridRowEnd?: csstype.Property.GridRowEnd | undefined; + gridRowStart?: csstype.Property.GridRowStart | undefined; + gridTemplateAreas?: csstype.Property.GridTemplateAreas | undefined; + gridTemplateColumns?: csstype.Property.GridTemplateColumns | undefined; + gridTemplateRows?: csstype.Property.GridTemplateRows | undefined; + hangingPunctuation?: csstype.Property.HangingPunctuation | undefined; + height?: csstype.Property.Height | undefined; + hyphenateCharacter?: csstype.Property.HyphenateCharacter | undefined; + hyphenateLimitChars?: csstype.Property.HyphenateLimitChars | undefined; + hyphens?: csstype.Property.Hyphens | undefined; + imageOrientation?: csstype.Property.ImageOrientation | undefined; + imageRendering?: csstype.Property.ImageRendering | undefined; + imageResolution?: csstype.Property.ImageResolution | undefined; + initialLetter?: csstype.Property.InitialLetter | undefined; + inlineSize?: csstype.Property.InlineSize | undefined; + inputSecurity?: csstype.Property.InputSecurity | undefined; + insetBlockEnd?: csstype.Property.InsetBlockEnd | undefined; + insetBlockStart?: csstype.Property.InsetBlockStart | undefined; + insetInlineEnd?: csstype.Property.InsetInlineEnd | undefined; + insetInlineStart?: csstype.Property.InsetInlineStart | undefined; + isolation?: csstype.Property.Isolation | undefined; + justifyContent?: csstype.Property.JustifyContent | undefined; + justifyItems?: csstype.Property.JustifyItems | undefined; + justifySelf?: csstype.Property.JustifySelf | undefined; + justifyTracks?: csstype.Property.JustifyTracks | undefined; + left?: csstype.Property.Left | undefined; + letterSpacing?: csstype.Property.LetterSpacing | undefined; + lineBreak?: csstype.Property.LineBreak | undefined; + lineHeight?: csstype.Property.LineHeight | undefined; + lineHeightStep?: csstype.Property.LineHeightStep | undefined; + listStyleImage?: csstype.Property.ListStyleImage | undefined; + listStylePosition?: csstype.Property.ListStylePosition | undefined; + listStyleType?: csstype.Property.ListStyleType | undefined; + marginBlockEnd?: csstype.Property.MarginBlockEnd | undefined; + marginBlockStart?: csstype.Property.MarginBlockStart | undefined; + marginBottom?: csstype.Property.MarginBottom | undefined; + marginInlineEnd?: csstype.Property.MarginInlineEnd | undefined; + marginInlineStart?: csstype.Property.MarginInlineStart | undefined; + marginLeft?: csstype.Property.MarginLeft | undefined; + marginRight?: csstype.Property.MarginRight | undefined; + marginTop?: csstype.Property.MarginTop | undefined; + marginTrim?: csstype.Property.MarginTrim | undefined; + maskBorderMode?: csstype.Property.MaskBorderMode | undefined; + maskBorderOutset?: csstype.Property.MaskBorderOutset | undefined; + maskBorderRepeat?: csstype.Property.MaskBorderRepeat | undefined; + maskBorderSlice?: csstype.Property.MaskBorderSlice | undefined; + maskBorderSource?: csstype.Property.MaskBorderSource | undefined; + maskBorderWidth?: csstype.Property.MaskBorderWidth | undefined; + maskClip?: csstype.Property.MaskClip | undefined; + maskComposite?: csstype.Property.MaskComposite | undefined; + maskImage?: csstype.Property.MaskImage | undefined; + maskMode?: csstype.Property.MaskMode | undefined; + maskOrigin?: csstype.Property.MaskOrigin | undefined; + maskPosition?: csstype.Property.MaskPosition | undefined; + maskRepeat?: csstype.Property.MaskRepeat | undefined; + maskSize?: csstype.Property.MaskSize | undefined; + maskType?: csstype.Property.MaskType | undefined; + masonryAutoFlow?: csstype.Property.MasonryAutoFlow | undefined; + mathDepth?: csstype.Property.MathDepth | undefined; + mathShift?: csstype.Property.MathShift | undefined; + mathStyle?: csstype.Property.MathStyle | undefined; + maxBlockSize?: csstype.Property.MaxBlockSize | undefined; + maxHeight?: csstype.Property.MaxHeight | undefined; + maxInlineSize?: csstype.Property.MaxInlineSize | undefined; + maxLines?: csstype.Property.MaxLines | undefined; + maxWidth?: csstype.Property.MaxWidth | undefined; + minBlockSize?: csstype.Property.MinBlockSize | undefined; + minHeight?: csstype.Property.MinHeight | undefined; + minInlineSize?: csstype.Property.MinInlineSize | undefined; + minWidth?: csstype.Property.MinWidth | undefined; + mixBlendMode?: csstype.Property.MixBlendMode | undefined; + motionDistance?: csstype.Property.OffsetDistance | undefined; + motionPath?: csstype.Property.OffsetPath | undefined; + motionRotation?: csstype.Property.OffsetRotate | undefined; + objectFit?: csstype.Property.ObjectFit | undefined; + objectPosition?: csstype.Property.ObjectPosition | undefined; + offsetAnchor?: csstype.Property.OffsetAnchor | undefined; + offsetDistance?: csstype.Property.OffsetDistance | undefined; + offsetPath?: csstype.Property.OffsetPath | undefined; + offsetPosition?: csstype.Property.OffsetPosition | undefined; + offsetRotate?: csstype.Property.OffsetRotate | undefined; + offsetRotation?: csstype.Property.OffsetRotate | undefined; + opacity?: csstype.Property.Opacity | undefined; + order?: csstype.Property.Order | undefined; + orphans?: csstype.Property.Orphans | undefined; + outlineColor?: csstype.Property.OutlineColor | undefined; + outlineOffset: csstype.Property.OutlineOffset; + outlineStyle?: csstype.Property.OutlineStyle | undefined; + outlineWidth?: csstype.Property.OutlineWidth | undefined; + overflowAnchor?: csstype.Property.OverflowAnchor | undefined; + overflowBlock?: csstype.Property.OverflowBlock | undefined; + overflowClipBox?: csstype.Property.OverflowClipBox | undefined; + overflowClipMargin?: csstype.Property.OverflowClipMargin | undefined; + overflowInline?: csstype.Property.OverflowInline | undefined; + overflowWrap?: csstype.Property.OverflowWrap | undefined; + overflowX?: csstype.Property.OverflowX | undefined; + overflowY?: csstype.Property.OverflowY | undefined; + overlay?: csstype.Property.Overlay | undefined; + overscrollBehaviorBlock?: csstype.Property.OverscrollBehaviorBlock | undefined; + overscrollBehaviorInline?: csstype.Property.OverscrollBehaviorInline | undefined; + overscrollBehaviorX?: csstype.Property.OverscrollBehaviorX | undefined; + overscrollBehaviorY?: csstype.Property.OverscrollBehaviorY | undefined; + paddingBlockEnd?: csstype.Property.PaddingBlockEnd | undefined; + paddingBlockStart?: csstype.Property.PaddingBlockStart | undefined; + paddingBottom?: csstype.Property.PaddingBottom | undefined; + paddingInlineEnd?: csstype.Property.PaddingInlineEnd | undefined; + paddingInlineStart?: csstype.Property.PaddingInlineStart | undefined; + paddingLeft?: csstype.Property.PaddingLeft | undefined; + paddingRight?: csstype.Property.PaddingRight | undefined; + paddingTop?: csstype.Property.PaddingTop | undefined; + page?: csstype.Property.Page | undefined; + pageBreakAfter?: csstype.Property.PageBreakAfter | undefined; + pageBreakBefore?: csstype.Property.PageBreakBefore | undefined; + pageBreakInside?: csstype.Property.PageBreakInside | undefined; + paintOrder?: csstype.Property.PaintOrder | undefined; + perspective?: csstype.Property.Perspective | undefined; + perspectiveOrigin?: csstype.Property.PerspectiveOrigin | undefined; + pointerEvents?: csstype.Property.PointerEvents | undefined; + position?: csstype.Property.Position | undefined; + printColorAdjust?: csstype.Property.PrintColorAdjust | undefined; + quotes?: csstype.Property.Quotes | undefined; + resize?: csstype.Property.Resize | undefined; + right?: csstype.Property.Right | undefined; + rotate?: csstype.Property.Rotate | undefined; + rowGap?: csstype.Property.RowGap | undefined; + rubyAlign?: csstype.Property.RubyAlign | undefined; + rubyMerge?: csstype.Property.RubyMerge | undefined; + rubyPosition?: csstype.Property.RubyPosition | undefined; + scale?: csstype.Property.Scale | undefined; + scrollBehavior?: csstype.Property.ScrollBehavior | undefined; + scrollMarginBlockEnd?: csstype.Property.ScrollMarginBlockEnd | undefined; + scrollMarginBlockStart?: csstype.Property.ScrollMarginBlockStart | undefined; + scrollMarginBottom?: csstype.Property.ScrollMarginBottom | undefined; + scrollMarginInlineEnd?: csstype.Property.ScrollMarginInlineEnd | undefined; + scrollMarginInlineStart?: csstype.Property.ScrollMarginInlineStart | undefined; + scrollMarginLeft?: csstype.Property.ScrollMarginLeft | undefined; + scrollMarginRight?: csstype.Property.ScrollMarginRight | undefined; + scrollMarginTop?: csstype.Property.ScrollMarginTop | undefined; + scrollPaddingBlockEnd?: csstype.Property.ScrollPaddingBlockEnd | undefined; + scrollPaddingBlockStart?: csstype.Property.ScrollPaddingBlockStart | undefined; + scrollPaddingBottom?: csstype.Property.ScrollPaddingBottom | undefined; + scrollPaddingInlineEnd?: csstype.Property.ScrollPaddingInlineEnd | undefined; + scrollPaddingInlineStart?: csstype.Property.ScrollPaddingInlineStart | undefined; + scrollPaddingLeft?: csstype.Property.ScrollPaddingLeft | undefined; + scrollPaddingRight?: csstype.Property.ScrollPaddingRight | undefined; + scrollPaddingTop?: csstype.Property.ScrollPaddingTop | undefined; + scrollSnapAlign?: csstype.Property.ScrollSnapAlign | undefined; + scrollSnapMarginBottom?: csstype.Property.ScrollMarginBottom | undefined; + scrollSnapMarginLeft?: csstype.Property.ScrollMarginLeft | undefined; + scrollSnapMarginRight?: csstype.Property.ScrollMarginRight | undefined; + scrollSnapMarginTop?: csstype.Property.ScrollMarginTop | undefined; + scrollSnapStop?: csstype.Property.ScrollSnapStop | undefined; + scrollSnapType?: csstype.Property.ScrollSnapType | undefined; + scrollTimelineAxis?: csstype.Property.ScrollTimelineAxis | undefined; + scrollTimelineName?: csstype.Property.ScrollTimelineName | undefined; + scrollbarColor?: csstype.Property.ScrollbarColor | undefined; + scrollbarGutter?: csstype.Property.ScrollbarGutter | undefined; + scrollbarWidth?: csstype.Property.ScrollbarWidth | undefined; + shapeImageThreshold?: csstype.Property.ShapeImageThreshold | undefined; + shapeMargin?: csstype.Property.ShapeMargin | undefined; + shapeOutside?: csstype.Property.ShapeOutside | undefined; + tabSize?: csstype.Property.TabSize | undefined; + tableLayout?: csstype.Property.TableLayout | undefined; + textAlign?: csstype.Property.TextAlign | undefined; + textAlignLast?: csstype.Property.TextAlignLast | undefined; + textCombineUpright?: csstype.Property.TextCombineUpright | undefined; + textDecorationColor?: csstype.Property.TextDecorationColor | undefined; + textDecorationLine?: csstype.Property.TextDecorationLine | undefined; + textDecorationSkip?: csstype.Property.TextDecorationSkip | undefined; + textDecorationSkipInk?: csstype.Property.TextDecorationSkipInk | undefined; + textDecorationStyle?: csstype.Property.TextDecorationStyle | undefined; + textDecorationThickness?: csstype.Property.TextDecorationThickness | undefined; + textEmphasisColor?: csstype.Property.TextEmphasisColor | undefined; + textEmphasisPosition?: csstype.Property.TextEmphasisPosition | undefined; + textEmphasisStyle?: csstype.Property.TextEmphasisStyle | undefined; + textIndent?: csstype.Property.TextIndent | undefined; + textJustify?: csstype.Property.TextJustify | undefined; + textOrientation?: csstype.Property.TextOrientation | undefined; + textOverflow?: csstype.Property.TextOverflow | undefined; + textRendering?: csstype.Property.TextRendering | undefined; + textShadow?: csstype.Property.TextShadow | undefined; + textSizeAdjust?: csstype.Property.TextSizeAdjust | undefined; + textTransform?: csstype.Property.TextTransform | undefined; + textUnderlineOffset?: csstype.Property.TextUnderlineOffset | undefined; + textUnderlinePosition?: csstype.Property.TextUnderlinePosition | undefined; + textWrap?: csstype.Property.TextWrap | undefined; + timelineScope?: csstype.Property.TimelineScope | undefined; + top?: csstype.Property.Top | undefined; + touchAction?: csstype.Property.TouchAction | undefined; + transform?: csstype.Property.Transform | undefined; + transformBox?: csstype.Property.TransformBox | undefined; + transformOrigin?: csstype.Property.TransformOrigin | undefined; + transformStyle?: csstype.Property.TransformStyle | undefined; + transitionBehavior?: csstype.Property.TransitionBehavior | undefined; + transitionDelay?: csstype.Property.TransitionDelay | undefined; + transitionDuration?: csstype.Property.TransitionDuration | undefined; + transitionProperty?: csstype.Property.TransitionProperty | undefined; + transitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; + translate?: csstype.Property.Translate | undefined; + unicodeBidi?: csstype.Property.UnicodeBidi | undefined; + userSelect?: csstype.Property.UserSelect | undefined; + verticalAlign?: csstype.Property.VerticalAlign | undefined; + viewTimelineAxis?: csstype.Property.ViewTimelineAxis | undefined; + viewTimelineInset?: csstype.Property.ViewTimelineInset | undefined; + viewTimelineName?: csstype.Property.ViewTimelineName | undefined; + viewTransitionName?: csstype.Property.ViewTransitionName | undefined; + visibility?: csstype.Property.Visibility | undefined; + whiteSpace?: csstype.Property.WhiteSpace | undefined; + whiteSpaceCollapse?: csstype.Property.WhiteSpaceCollapse | undefined; + whiteSpaceTrim?: csstype.Property.WhiteSpaceTrim | undefined; + widows?: csstype.Property.Widows | undefined; + width?: csstype.Property.Width | undefined; + willChange?: csstype.Property.WillChange | undefined; + wordBreak?: csstype.Property.WordBreak | undefined; + wordSpacing?: csstype.Property.WordSpacing | undefined; + wordWrap?: csstype.Property.WordWrap | undefined; + writingMode?: csstype.Property.WritingMode | undefined; + zIndex: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto"; + zoom?: csstype.Property.Zoom | undefined; + all?: csstype.Property.All | undefined; + animation?: csstype.Property.Animation | undefined; + animationRange?: csstype.Property.AnimationRange | undefined; + background?: csstype.Property.Background | undefined; + backgroundPosition?: csstype.Property.BackgroundPosition | undefined; + border?: csstype.Property.Border | undefined; + borderBlock?: csstype.Property.BorderBlock | undefined; + borderBlockEnd?: csstype.Property.BorderBlockEnd | undefined; + borderBlockStart?: csstype.Property.BorderBlockStart | undefined; + borderBottom?: csstype.Property.BorderBottom | undefined; + borderColor?: csstype.Property.BorderColor | undefined; + borderImage?: csstype.Property.BorderImage | undefined; + borderInline?: csstype.Property.BorderInline | undefined; + borderInlineEnd?: csstype.Property.BorderInlineEnd | undefined; + borderInlineStart?: csstype.Property.BorderInlineStart | undefined; + borderLeft?: csstype.Property.BorderLeft | undefined; + borderRadius?: csstype.Property.BorderRadius | undefined; + borderRight?: csstype.Property.BorderRight | undefined; + borderStyle?: csstype.Property.BorderStyle | undefined; + borderTop?: csstype.Property.BorderTop | undefined; + borderWidth?: csstype.Property.BorderWidth | undefined; + caret?: csstype.Property.Caret | undefined; + columnRule?: csstype.Property.ColumnRule | undefined; + columns?: csstype.Property.Columns | undefined; + containIntrinsicSize?: csstype.Property.ContainIntrinsicSize | undefined; + container?: csstype.Property.Container | undefined; + flex?: csstype.Property.Flex | undefined; + flexFlow?: csstype.Property.FlexFlow | undefined; + font?: csstype.Property.Font | undefined; + gap?: csstype.Property.Gap | undefined; + grid?: csstype.Property.Grid | undefined; + gridArea?: csstype.Property.GridArea | undefined; + gridColumn?: csstype.Property.GridColumn | undefined; + gridRow?: csstype.Property.GridRow | undefined; + gridTemplate?: csstype.Property.GridTemplate | undefined; + inset?: csstype.Property.Inset | undefined; + insetBlock?: csstype.Property.InsetBlock | undefined; + insetInline?: csstype.Property.InsetInline | undefined; + lineClamp?: csstype.Property.LineClamp | undefined; + listStyle?: csstype.Property.ListStyle | undefined; + margin?: csstype.Property.Margin | undefined; + marginBlock?: csstype.Property.MarginBlock | undefined; + marginInline?: csstype.Property.MarginInline | undefined; + mask?: csstype.Property.Mask | undefined; + maskBorder?: csstype.Property.MaskBorder | undefined; + motion?: csstype.Property.Offset | undefined; + offset?: csstype.Property.Offset | undefined; + outline: csstype.Property.Outline; + overflow?: csstype.Property.Overflow | undefined; + overscrollBehavior?: csstype.Property.OverscrollBehavior | undefined; + padding?: csstype.Property.Padding | undefined; + paddingBlock?: csstype.Property.PaddingBlock | undefined; + paddingInline?: csstype.Property.PaddingInline | undefined; + placeContent?: csstype.Property.PlaceContent | undefined; + placeItems?: csstype.Property.PlaceItems | undefined; + placeSelf?: csstype.Property.PlaceSelf | undefined; + scrollMargin?: csstype.Property.ScrollMargin | undefined; + scrollMarginBlock?: csstype.Property.ScrollMarginBlock | undefined; + scrollMarginInline?: csstype.Property.ScrollMarginInline | undefined; + scrollPadding?: csstype.Property.ScrollPadding | undefined; + scrollPaddingBlock?: csstype.Property.ScrollPaddingBlock | undefined; + scrollPaddingInline?: csstype.Property.ScrollPaddingInline | undefined; + scrollSnapMargin?: csstype.Property.ScrollMargin | undefined; + scrollTimeline?: csstype.Property.ScrollTimeline | undefined; + textDecoration?: csstype.Property.TextDecoration | undefined; + textEmphasis?: csstype.Property.TextEmphasis | undefined; + transition?: csstype.Property.Transition | undefined; + viewTimeline?: csstype.Property.ViewTimeline | undefined; + MozAnimationDelay?: csstype.Property.AnimationDelay | undefined; + MozAnimationDirection?: csstype.Property.AnimationDirection | undefined; + MozAnimationDuration?: csstype.Property.AnimationDuration | undefined; + MozAnimationFillMode?: csstype.Property.AnimationFillMode | undefined; + MozAnimationIterationCount?: csstype.Property.AnimationIterationCount | undefined; + MozAnimationName?: csstype.Property.AnimationName | undefined; + MozAnimationPlayState?: csstype.Property.AnimationPlayState | undefined; + MozAnimationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; + MozAppearance?: csstype.Property.MozAppearance | undefined; + MozBinding?: csstype.Property.MozBinding | undefined; + MozBorderBottomColors?: csstype.Property.MozBorderBottomColors | undefined; + MozBorderEndColor?: csstype.Property.BorderInlineEndColor | undefined; + MozBorderEndStyle?: csstype.Property.BorderInlineEndStyle | undefined; + MozBorderEndWidth?: csstype.Property.BorderInlineEndWidth | undefined; + MozBorderLeftColors?: csstype.Property.MozBorderLeftColors | undefined; + MozBorderRightColors?: csstype.Property.MozBorderRightColors | undefined; + MozBorderStartColor?: csstype.Property.BorderInlineStartColor | undefined; + MozBorderStartStyle?: csstype.Property.BorderInlineStartStyle | undefined; + MozBorderTopColors?: csstype.Property.MozBorderTopColors | undefined; + MozBoxSizing?: csstype.Property.BoxSizing | undefined; + MozColumnCount?: csstype.Property.ColumnCount | undefined; + MozColumnFill?: csstype.Property.ColumnFill | undefined; + MozColumnRuleColor?: csstype.Property.ColumnRuleColor | undefined; + MozColumnRuleStyle?: csstype.Property.ColumnRuleStyle | undefined; + MozColumnRuleWidth?: csstype.Property.ColumnRuleWidth | undefined; + MozColumnWidth?: csstype.Property.ColumnWidth | undefined; + MozContextProperties?: csstype.Property.MozContextProperties | undefined; + MozFontFeatureSettings?: csstype.Property.FontFeatureSettings | undefined; + MozFontLanguageOverride?: csstype.Property.FontLanguageOverride | undefined; + MozHyphens?: csstype.Property.Hyphens | undefined; + MozImageRegion?: csstype.Property.MozImageRegion | undefined; + MozMarginEnd?: csstype.Property.MarginInlineEnd | undefined; + MozMarginStart?: csstype.Property.MarginInlineStart | undefined; + MozOrient?: csstype.Property.MozOrient | undefined; + MozOsxFontSmoothing?: csstype.Property.FontSmooth | undefined; + MozOutlineRadiusBottomleft?: csstype.Property.MozOutlineRadiusBottomleft | undefined; + MozOutlineRadiusBottomright?: csstype.Property.MozOutlineRadiusBottomright | undefined; + MozOutlineRadiusTopleft?: csstype.Property.MozOutlineRadiusTopleft | undefined; + MozOutlineRadiusTopright?: csstype.Property.MozOutlineRadiusTopright | undefined; + MozPaddingEnd?: csstype.Property.PaddingInlineEnd | undefined; + MozPaddingStart?: csstype.Property.PaddingInlineStart | undefined; + MozStackSizing?: csstype.Property.MozStackSizing | undefined; + MozTabSize?: csstype.Property.TabSize | undefined; + MozTextBlink?: csstype.Property.MozTextBlink | undefined; + MozTextSizeAdjust?: csstype.Property.TextSizeAdjust | undefined; + MozUserFocus?: csstype.Property.MozUserFocus | undefined; + MozUserModify?: csstype.Property.MozUserModify | undefined; + MozUserSelect?: csstype.Property.UserSelect | undefined; + MozWindowDragging?: csstype.Property.MozWindowDragging | undefined; + MozWindowShadow?: csstype.Property.MozWindowShadow | undefined; + msAccelerator?: csstype.Property.MsAccelerator | undefined; + msBlockProgression?: csstype.Property.MsBlockProgression | undefined; + msContentZoomChaining?: csstype.Property.MsContentZoomChaining | undefined; + msContentZoomLimitMax?: csstype.Property.MsContentZoomLimitMax | undefined; + msContentZoomLimitMin?: csstype.Property.MsContentZoomLimitMin | undefined; + msContentZoomSnapPoints?: csstype.Property.MsContentZoomSnapPoints | undefined; + msContentZoomSnapType?: csstype.Property.MsContentZoomSnapType | undefined; + msContentZooming?: csstype.Property.MsContentZooming | undefined; + msFilter?: csstype.Property.MsFilter | undefined; + msFlexDirection?: csstype.Property.FlexDirection | undefined; + msFlexPositive?: csstype.Property.FlexGrow | undefined; + msFlowFrom?: csstype.Property.MsFlowFrom | undefined; + msFlowInto?: csstype.Property.MsFlowInto | undefined; + msGridColumns?: csstype.Property.MsGridColumns | undefined; + msGridRows?: csstype.Property.MsGridRows | undefined; + msHighContrastAdjust?: csstype.Property.MsHighContrastAdjust | undefined; + msHyphenateLimitChars?: csstype.Property.MsHyphenateLimitChars | undefined; + msHyphenateLimitLines?: csstype.Property.MsHyphenateLimitLines | undefined; + msHyphenateLimitZone?: csstype.Property.MsHyphenateLimitZone | undefined; + msHyphens?: csstype.Property.Hyphens | undefined; + msImeAlign?: csstype.Property.MsImeAlign | undefined; + msLineBreak?: csstype.Property.LineBreak | undefined; + msOrder?: csstype.Property.Order | undefined; + msOverflowStyle?: csstype.Property.MsOverflowStyle | undefined; + msOverflowX?: csstype.Property.OverflowX | undefined; + msOverflowY?: csstype.Property.OverflowY | undefined; + msScrollChaining?: csstype.Property.MsScrollChaining | undefined; + msScrollLimitXMax?: csstype.Property.MsScrollLimitXMax | undefined; + msScrollLimitXMin?: csstype.Property.MsScrollLimitXMin | undefined; + msScrollLimitYMax?: csstype.Property.MsScrollLimitYMax | undefined; + msScrollLimitYMin?: csstype.Property.MsScrollLimitYMin | undefined; + msScrollRails?: csstype.Property.MsScrollRails | undefined; + msScrollSnapPointsX?: csstype.Property.MsScrollSnapPointsX | undefined; + msScrollSnapPointsY?: csstype.Property.MsScrollSnapPointsY | undefined; + msScrollSnapType?: csstype.Property.MsScrollSnapType | undefined; + msScrollTranslation?: csstype.Property.MsScrollTranslation | undefined; + msScrollbar3dlightColor?: csstype.Property.MsScrollbar3dlightColor | undefined; + msScrollbarArrowColor?: csstype.Property.MsScrollbarArrowColor | undefined; + msScrollbarBaseColor?: csstype.Property.MsScrollbarBaseColor | undefined; + msScrollbarDarkshadowColor?: csstype.Property.MsScrollbarDarkshadowColor | undefined; + msScrollbarFaceColor?: csstype.Property.MsScrollbarFaceColor | undefined; + msScrollbarHighlightColor?: csstype.Property.MsScrollbarHighlightColor | undefined; + msScrollbarShadowColor?: csstype.Property.MsScrollbarShadowColor | undefined; + msScrollbarTrackColor?: csstype.Property.MsScrollbarTrackColor | undefined; + msTextAutospace?: csstype.Property.MsTextAutospace | undefined; + msTextCombineHorizontal?: csstype.Property.TextCombineUpright | undefined; + msTextOverflow?: csstype.Property.TextOverflow | undefined; + msTouchAction?: csstype.Property.TouchAction | undefined; + msTouchSelect?: csstype.Property.MsTouchSelect | undefined; + msTransform?: csstype.Property.Transform | undefined; + msTransformOrigin?: csstype.Property.TransformOrigin | undefined; + msTransitionDelay?: csstype.Property.TransitionDelay | undefined; + msTransitionDuration?: csstype.Property.TransitionDuration | undefined; + msTransitionProperty?: csstype.Property.TransitionProperty | undefined; + msTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; + msUserSelect?: csstype.Property.MsUserSelect | undefined; + msWordBreak?: csstype.Property.WordBreak | undefined; + msWrapFlow?: csstype.Property.MsWrapFlow | undefined; + msWrapMargin?: csstype.Property.MsWrapMargin | undefined; + msWrapThrough?: csstype.Property.MsWrapThrough | undefined; + msWritingMode?: csstype.Property.WritingMode | undefined; + WebkitAlignContent?: csstype.Property.AlignContent | undefined; + WebkitAlignItems?: csstype.Property.AlignItems | undefined; + WebkitAlignSelf?: csstype.Property.AlignSelf | undefined; + WebkitAnimationDelay?: csstype.Property.AnimationDelay | undefined; + WebkitAnimationDirection?: csstype.Property.AnimationDirection | undefined; + WebkitAnimationDuration?: csstype.Property.AnimationDuration | undefined; + WebkitAnimationFillMode?: csstype.Property.AnimationFillMode | undefined; + WebkitAnimationIterationCount?: csstype.Property.AnimationIterationCount | undefined; + WebkitAnimationName?: csstype.Property.AnimationName | undefined; + WebkitAnimationPlayState?: csstype.Property.AnimationPlayState | undefined; + WebkitAnimationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; + WebkitAppearance?: csstype.Property.WebkitAppearance | undefined; + WebkitBackdropFilter?: csstype.Property.BackdropFilter | undefined; + WebkitBackfaceVisibility?: csstype.Property.BackfaceVisibility | undefined; + WebkitBackgroundClip?: csstype.Property.BackgroundClip | undefined; + WebkitBackgroundOrigin?: csstype.Property.BackgroundOrigin | undefined; + WebkitBackgroundSize?: csstype.Property.BackgroundSize | undefined; + WebkitBorderBeforeColor?: csstype.Property.WebkitBorderBeforeColor | undefined; + WebkitBorderBeforeStyle?: csstype.Property.WebkitBorderBeforeStyle | undefined; + WebkitBorderBeforeWidth?: csstype.Property.WebkitBorderBeforeWidth | undefined; + WebkitBorderBottomLeftRadius?: csstype.Property.BorderBottomLeftRadius | undefined; + WebkitBorderBottomRightRadius?: csstype.Property.BorderBottomRightRadius | undefined; + WebkitBorderImageSlice?: csstype.Property.BorderImageSlice | undefined; + WebkitBorderTopLeftRadius?: csstype.Property.BorderTopLeftRadius | undefined; + WebkitBorderTopRightRadius?: csstype.Property.BorderTopRightRadius | undefined; + WebkitBoxDecorationBreak?: csstype.Property.BoxDecorationBreak | undefined; + WebkitBoxReflect?: csstype.Property.WebkitBoxReflect | undefined; + WebkitBoxShadow?: csstype.Property.BoxShadow | undefined; + WebkitBoxSizing?: csstype.Property.BoxSizing | undefined; + WebkitClipPath?: csstype.Property.ClipPath | undefined; + WebkitColumnCount?: csstype.Property.ColumnCount | undefined; + WebkitColumnFill?: csstype.Property.ColumnFill | undefined; + WebkitColumnRuleColor?: csstype.Property.ColumnRuleColor | undefined; + WebkitColumnRuleStyle?: csstype.Property.ColumnRuleStyle | undefined; + WebkitColumnRuleWidth?: csstype.Property.ColumnRuleWidth | undefined; + WebkitColumnSpan?: csstype.Property.ColumnSpan | undefined; + WebkitColumnWidth?: csstype.Property.ColumnWidth | undefined; + WebkitFilter?: csstype.Property.Filter | undefined; + WebkitFlexBasis?: csstype.Property.FlexBasis | undefined; + WebkitFlexDirection?: csstype.Property.FlexDirection | undefined; + WebkitFlexGrow?: csstype.Property.FlexGrow | undefined; + WebkitFlexShrink?: csstype.Property.FlexShrink | undefined; + WebkitFlexWrap?: csstype.Property.FlexWrap | undefined; + WebkitFontFeatureSettings?: csstype.Property.FontFeatureSettings | undefined; + WebkitFontKerning?: csstype.Property.FontKerning | undefined; + WebkitFontSmoothing?: csstype.Property.FontSmooth | undefined; + WebkitFontVariantLigatures?: csstype.Property.FontVariantLigatures | undefined; + WebkitHyphenateCharacter?: csstype.Property.HyphenateCharacter | undefined; + WebkitHyphens?: csstype.Property.Hyphens | undefined; + WebkitInitialLetter?: csstype.Property.InitialLetter | undefined; + WebkitJustifyContent?: csstype.Property.JustifyContent | undefined; + WebkitLineBreak?: csstype.Property.LineBreak | undefined; + WebkitLineClamp?: csstype.Property.WebkitLineClamp | undefined; + WebkitMarginEnd?: csstype.Property.MarginInlineEnd | undefined; + WebkitMarginStart?: csstype.Property.MarginInlineStart | undefined; + WebkitMaskAttachment?: csstype.Property.WebkitMaskAttachment | undefined; + WebkitMaskBoxImageOutset?: csstype.Property.MaskBorderOutset | undefined; + WebkitMaskBoxImageRepeat?: csstype.Property.MaskBorderRepeat | undefined; + WebkitMaskBoxImageSlice?: csstype.Property.MaskBorderSlice | undefined; + WebkitMaskBoxImageSource?: csstype.Property.MaskBorderSource | undefined; + WebkitMaskBoxImageWidth?: csstype.Property.MaskBorderWidth | undefined; + WebkitMaskClip?: csstype.Property.WebkitMaskClip | undefined; + WebkitMaskComposite?: csstype.Property.WebkitMaskComposite | undefined; + WebkitMaskImage?: csstype.Property.WebkitMaskImage | undefined; + WebkitMaskOrigin?: csstype.Property.WebkitMaskOrigin | undefined; + WebkitMaskPosition?: csstype.Property.WebkitMaskPosition | undefined; + WebkitMaskPositionX?: csstype.Property.WebkitMaskPositionX | undefined; + WebkitMaskPositionY?: csstype.Property.WebkitMaskPositionY | undefined; + WebkitMaskRepeat?: csstype.Property.WebkitMaskRepeat | undefined; + WebkitMaskRepeatX?: csstype.Property.WebkitMaskRepeatX | undefined; + WebkitMaskRepeatY?: csstype.Property.WebkitMaskRepeatY | undefined; + WebkitMaskSize?: csstype.Property.WebkitMaskSize | undefined; + WebkitMaxInlineSize?: csstype.Property.MaxInlineSize | undefined; + WebkitOrder?: csstype.Property.Order | undefined; + WebkitOverflowScrolling?: csstype.Property.WebkitOverflowScrolling | undefined; + WebkitPaddingEnd?: csstype.Property.PaddingInlineEnd | undefined; + WebkitPaddingStart?: csstype.Property.PaddingInlineStart | undefined; + WebkitPerspective?: csstype.Property.Perspective | undefined; + WebkitPerspectiveOrigin?: csstype.Property.PerspectiveOrigin | undefined; + WebkitPrintColorAdjust?: csstype.Property.PrintColorAdjust | undefined; + WebkitRubyPosition?: csstype.Property.RubyPosition | undefined; + WebkitScrollSnapType?: csstype.Property.ScrollSnapType | undefined; + WebkitShapeMargin?: csstype.Property.ShapeMargin | undefined; + WebkitTapHighlightColor?: csstype.Property.WebkitTapHighlightColor | undefined; + WebkitTextCombine?: csstype.Property.TextCombineUpright | undefined; + WebkitTextDecorationColor?: csstype.Property.TextDecorationColor | undefined; + WebkitTextDecorationLine?: csstype.Property.TextDecorationLine | undefined; + WebkitTextDecorationSkip?: csstype.Property.TextDecorationSkip | undefined; + WebkitTextDecorationStyle?: csstype.Property.TextDecorationStyle | undefined; + WebkitTextEmphasisColor?: csstype.Property.TextEmphasisColor | undefined; + WebkitTextEmphasisPosition?: csstype.Property.TextEmphasisPosition | undefined; + WebkitTextEmphasisStyle?: csstype.Property.TextEmphasisStyle | undefined; + WebkitTextFillColor?: csstype.Property.WebkitTextFillColor | undefined; + WebkitTextOrientation?: csstype.Property.TextOrientation | undefined; + WebkitTextSizeAdjust?: csstype.Property.TextSizeAdjust | undefined; + WebkitTextStrokeColor?: csstype.Property.WebkitTextStrokeColor | undefined; + WebkitTextStrokeWidth?: csstype.Property.WebkitTextStrokeWidth | undefined; + WebkitTextUnderlinePosition?: csstype.Property.TextUnderlinePosition | undefined; + WebkitTouchCallout?: csstype.Property.WebkitTouchCallout | undefined; + WebkitTransform?: csstype.Property.Transform | undefined; + WebkitTransformOrigin?: csstype.Property.TransformOrigin | undefined; + WebkitTransformStyle?: csstype.Property.TransformStyle | undefined; + WebkitTransitionDelay?: csstype.Property.TransitionDelay | undefined; + WebkitTransitionDuration?: csstype.Property.TransitionDuration | undefined; + WebkitTransitionProperty?: csstype.Property.TransitionProperty | undefined; + WebkitTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; + WebkitUserModify?: csstype.Property.WebkitUserModify | undefined; + WebkitUserSelect?: csstype.Property.UserSelect | undefined; + WebkitWritingMode?: csstype.Property.WritingMode | undefined; + MozAnimation?: csstype.Property.Animation | undefined; + MozBorderImage?: csstype.Property.BorderImage | undefined; + MozColumnRule?: csstype.Property.ColumnRule | undefined; + MozColumns?: csstype.Property.Columns | undefined; + MozOutlineRadius?: csstype.Property.MozOutlineRadius | undefined; + msContentZoomLimit?: csstype.Property.MsContentZoomLimit | undefined; + msContentZoomSnap?: csstype.Property.MsContentZoomSnap | undefined; + msFlex?: csstype.Property.Flex | undefined; + msScrollLimit?: csstype.Property.MsScrollLimit | undefined; + msScrollSnapX?: csstype.Property.MsScrollSnapX | undefined; + msScrollSnapY?: csstype.Property.MsScrollSnapY | undefined; + msTransition?: csstype.Property.Transition | undefined; + WebkitAnimation?: csstype.Property.Animation | undefined; + WebkitBorderBefore?: csstype.Property.WebkitBorderBefore | undefined; + WebkitBorderImage?: csstype.Property.BorderImage | undefined; + WebkitBorderRadius?: csstype.Property.BorderRadius | undefined; + WebkitColumnRule?: csstype.Property.ColumnRule | undefined; + WebkitColumns?: csstype.Property.Columns | undefined; + WebkitFlex?: csstype.Property.Flex | undefined; + WebkitFlexFlow?: csstype.Property.FlexFlow | undefined; + WebkitMask?: csstype.Property.WebkitMask | undefined; + WebkitMaskBoxImage?: csstype.Property.MaskBorder | undefined; + WebkitTextEmphasis?: csstype.Property.TextEmphasis | undefined; + WebkitTextStroke?: csstype.Property.WebkitTextStroke | undefined; + WebkitTransition?: csstype.Property.Transition | undefined; + azimuth?: csstype.Property.Azimuth | undefined; + boxAlign?: csstype.Property.BoxAlign | undefined; + boxDirection?: csstype.Property.BoxDirection | undefined; + boxFlex?: csstype.Property.BoxFlex | undefined; + boxFlexGroup?: csstype.Property.BoxFlexGroup | undefined; + boxLines?: csstype.Property.BoxLines | undefined; + boxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; + boxOrient?: csstype.Property.BoxOrient | undefined; + boxPack?: csstype.Property.BoxPack | undefined; + clip?: csstype.Property.Clip | undefined; + gridColumnGap?: csstype.Property.GridColumnGap | undefined; + gridGap?: csstype.Property.GridGap | undefined; + gridRowGap?: csstype.Property.GridRowGap | undefined; + imeMode?: csstype.Property.ImeMode | undefined; + offsetBlock?: csstype.Property.InsetBlock | undefined; + offsetBlockEnd?: csstype.Property.InsetBlockEnd | undefined; + offsetBlockStart?: csstype.Property.InsetBlockStart | undefined; + offsetInline?: csstype.Property.InsetInline | undefined; + offsetInlineEnd?: csstype.Property.InsetInlineEnd | undefined; + offsetInlineStart?: csstype.Property.InsetInlineStart | undefined; + scrollSnapCoordinate?: csstype.Property.ScrollSnapCoordinate | undefined; + scrollSnapDestination?: csstype.Property.ScrollSnapDestination | undefined; + scrollSnapPointsX?: csstype.Property.ScrollSnapPointsX | undefined; + scrollSnapPointsY?: csstype.Property.ScrollSnapPointsY | undefined; + scrollSnapTypeX?: csstype.Property.ScrollSnapTypeX | undefined; + scrollSnapTypeY?: csstype.Property.ScrollSnapTypeY | undefined; + KhtmlBoxAlign?: csstype.Property.BoxAlign | undefined; + KhtmlBoxDirection?: csstype.Property.BoxDirection | undefined; + KhtmlBoxFlex?: csstype.Property.BoxFlex | undefined; + KhtmlBoxFlexGroup?: csstype.Property.BoxFlexGroup | undefined; + KhtmlBoxLines?: csstype.Property.BoxLines | undefined; + KhtmlBoxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; + KhtmlBoxOrient?: csstype.Property.BoxOrient | undefined; + KhtmlBoxPack?: csstype.Property.BoxPack | undefined; + KhtmlLineBreak?: csstype.Property.LineBreak | undefined; + KhtmlOpacity?: csstype.Property.Opacity | undefined; + KhtmlUserSelect?: csstype.Property.UserSelect | undefined; + MozBackfaceVisibility?: csstype.Property.BackfaceVisibility | undefined; + MozBackgroundClip?: csstype.Property.BackgroundClip | undefined; + MozBackgroundInlinePolicy?: csstype.Property.BoxDecorationBreak | undefined; + MozBackgroundOrigin?: csstype.Property.BackgroundOrigin | undefined; + MozBackgroundSize?: csstype.Property.BackgroundSize | undefined; + MozBorderRadius?: csstype.Property.BorderRadius | undefined; + MozBorderRadiusBottomleft?: csstype.Property.BorderBottomLeftRadius | undefined; + MozBorderRadiusBottomright?: csstype.Property.BorderBottomRightRadius | undefined; + MozBorderRadiusTopleft?: csstype.Property.BorderTopLeftRadius | undefined; + MozBorderRadiusTopright?: csstype.Property.BorderTopRightRadius | undefined; + MozBoxAlign?: csstype.Property.BoxAlign | undefined; + MozBoxDirection?: csstype.Property.BoxDirection | undefined; + MozBoxFlex?: csstype.Property.BoxFlex | undefined; + MozBoxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; + MozBoxOrient?: csstype.Property.BoxOrient | undefined; + MozBoxPack?: csstype.Property.BoxPack | undefined; + MozBoxShadow?: csstype.Property.BoxShadow | undefined; + MozFloatEdge?: csstype.Property.MozFloatEdge | undefined; + MozForceBrokenImageIcon?: csstype.Property.MozForceBrokenImageIcon | undefined; + MozOpacity?: csstype.Property.Opacity | undefined; + MozOutline?: csstype.Property.Outline | undefined; + MozOutlineColor?: csstype.Property.OutlineColor | undefined; + MozOutlineStyle?: csstype.Property.OutlineStyle | undefined; + MozOutlineWidth?: csstype.Property.OutlineWidth | undefined; + MozPerspective?: csstype.Property.Perspective | undefined; + MozPerspectiveOrigin?: csstype.Property.PerspectiveOrigin | undefined; + MozTextAlignLast?: csstype.Property.TextAlignLast | undefined; + MozTextDecorationColor?: csstype.Property.TextDecorationColor | undefined; + MozTextDecorationLine?: csstype.Property.TextDecorationLine | undefined; + MozTextDecorationStyle?: csstype.Property.TextDecorationStyle | undefined; + MozTransform?: csstype.Property.Transform | undefined; + MozTransformOrigin?: csstype.Property.TransformOrigin | undefined; + MozTransformStyle?: csstype.Property.TransformStyle | undefined; + MozTransition?: csstype.Property.Transition | undefined; + MozTransitionDelay?: csstype.Property.TransitionDelay | undefined; + MozTransitionDuration?: csstype.Property.TransitionDuration | undefined; + MozTransitionProperty?: csstype.Property.TransitionProperty | undefined; + MozTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; + MozUserInput?: csstype.Property.MozUserInput | undefined; + msImeMode?: csstype.Property.ImeMode | undefined; + OAnimation?: csstype.Property.Animation | undefined; + OAnimationDelay?: csstype.Property.AnimationDelay | undefined; + OAnimationDirection?: csstype.Property.AnimationDirection | undefined; + OAnimationDuration?: csstype.Property.AnimationDuration | undefined; + OAnimationFillMode?: csstype.Property.AnimationFillMode | undefined; + OAnimationIterationCount?: csstype.Property.AnimationIterationCount | undefined; + OAnimationName?: csstype.Property.AnimationName | undefined; + OAnimationPlayState?: csstype.Property.AnimationPlayState | undefined; + OAnimationTimingFunction?: csstype.Property.AnimationTimingFunction | undefined; + OBackgroundSize?: csstype.Property.BackgroundSize | undefined; + OBorderImage?: csstype.Property.BorderImage | undefined; + OObjectFit?: csstype.Property.ObjectFit | undefined; + OObjectPosition?: csstype.Property.ObjectPosition | undefined; + OTabSize?: csstype.Property.TabSize | undefined; + OTextOverflow?: csstype.Property.TextOverflow | undefined; + OTransform?: csstype.Property.Transform | undefined; + OTransformOrigin?: csstype.Property.TransformOrigin | undefined; + OTransition?: csstype.Property.Transition | undefined; + OTransitionDelay?: csstype.Property.TransitionDelay | undefined; + OTransitionDuration?: csstype.Property.TransitionDuration | undefined; + OTransitionProperty?: csstype.Property.TransitionProperty | undefined; + OTransitionTimingFunction?: csstype.Property.TransitionTimingFunction | undefined; + WebkitBoxAlign?: csstype.Property.BoxAlign | undefined; + WebkitBoxDirection?: csstype.Property.BoxDirection | undefined; + WebkitBoxFlex?: csstype.Property.BoxFlex | undefined; + WebkitBoxFlexGroup?: csstype.Property.BoxFlexGroup | undefined; + WebkitBoxLines?: csstype.Property.BoxLines | undefined; + WebkitBoxOrdinalGroup?: csstype.Property.BoxOrdinalGroup | undefined; + WebkitBoxOrient?: csstype.Property.BoxOrient | undefined; + WebkitBoxPack?: csstype.Property.BoxPack | undefined; + alignmentBaseline?: csstype.Property.AlignmentBaseline | undefined; + baselineShift?: csstype.Property.BaselineShift | undefined; + clipRule?: csstype.Property.ClipRule | undefined; + colorInterpolation?: csstype.Property.ColorInterpolation | undefined; + colorRendering?: csstype.Property.ColorRendering | undefined; + dominantBaseline?: csstype.Property.DominantBaseline | undefined; + fill?: csstype.Property.Fill | undefined; + fillOpacity?: csstype.Property.FillOpacity | undefined; + fillRule?: csstype.Property.FillRule | undefined; + floodColor?: csstype.Property.FloodColor | undefined; + floodOpacity?: csstype.Property.FloodOpacity | undefined; + glyphOrientationVertical?: csstype.Property.GlyphOrientationVertical | undefined; + lightingColor?: csstype.Property.LightingColor | undefined; + marker?: csstype.Property.Marker | undefined; + markerEnd?: csstype.Property.MarkerEnd | undefined; + markerMid?: csstype.Property.MarkerMid | undefined; + markerStart?: csstype.Property.MarkerStart | undefined; + shapeRendering?: csstype.Property.ShapeRendering | undefined; + stopColor?: csstype.Property.StopColor | undefined; + stopOpacity?: csstype.Property.StopOpacity | undefined; + stroke?: csstype.Property.Stroke | undefined; + strokeDasharray?: csstype.Property.StrokeDasharray | undefined; + strokeDashoffset?: csstype.Property.StrokeDashoffset | undefined; + strokeLinecap?: csstype.Property.StrokeLinecap | undefined; + strokeLinejoin?: csstype.Property.StrokeLinejoin | undefined; + strokeMiterlimit?: csstype.Property.StrokeMiterlimit | undefined; + strokeOpacity?: csstype.Property.StrokeOpacity | undefined; + strokeWidth?: csstype.Property.StrokeWidth | undefined; + textAnchor?: csstype.Property.TextAnchor | undefined; + vectorEffect?: csstype.Property.VectorEffect | undefined; }; export { focusOutlineStyle, getLocale }; diff --git a/dist/theme/theme-utils.js b/dist/theme/theme-utils.js index 600141e..fe9d356 100644 --- a/dist/theme/theme-utils.js +++ b/dist/theme/theme-utils.js @@ -1,7 +1,7 @@ import { focusOutlineStyle, getLocale -} from "../chunk-Z3OLQMEP.js"; +} from "../chunk-XMAEUMNX.js"; import "../chunk-LVP2BKUK.js"; export { focusOutlineStyle, diff --git a/dist/theme/theme.js b/dist/theme/theme.js index 05b0c63..eb9dc0a 100644 --- a/dist/theme/theme.js +++ b/dist/theme/theme.js @@ -3,8 +3,8 @@ import { OphThemeProvider, createOphTheme, useOphTheme -} from "../chunk-T67FNJ7N.js"; -import "../chunk-Z3OLQMEP.js"; +} from "../chunk-2Y6NCBS3.js"; +import "../chunk-XMAEUMNX.js"; import "../chunk-LVP2BKUK.js"; export { OphThemeProvider, diff --git a/example/app/page.tsx b/example/app/page.tsx index fa39aac..d34c6bc 100644 --- a/example/app/page.tsx +++ b/example/app/page.tsx @@ -1,7 +1,11 @@ 'use client'; import { Box, Alert } from '@mui/material'; import { useTranslations } from 'next-intl'; -import { OphTypography, OphButton } from '@opetushallitus/oph-design-system'; +import { + OphTypography, + OphButton, + OphInput, +} from '@opetushallitus/oph-design-system'; export default function Home() { const t = useTranslations(); @@ -10,7 +14,10 @@ export default function Home() {
{t('title')} - + + {t('button')} {}}> diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-disabled.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-disabled.png new file mode 100644 index 0000000..9f2f4c9 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-disabled.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-error.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-error.png new file mode 100644 index 0000000..60aa4c0 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-error.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-focused.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-focused.png new file mode 100644 index 0000000..e62d895 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-focused.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-hovered.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-hovered.png new file mode 100644 index 0000000..f4f13a9 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default-hovered.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default.png new file mode 100644 index 0000000..d1c5e24 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--default.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--multiline.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--multiline.png new file mode 100644 index 0000000..7d63289 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--multiline.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--with-end-adornment.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--with-end-adornment.png new file mode 100644 index 0000000..8c21a02 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophinput--with-end-adornment.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable-open.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable-open.png index bea7cc1..8d66096 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable-open.png and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable-open.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable.png index 9516ca8..27b90a1 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable.png and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--clearable.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-focused.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-focused.png index 0632247..fed4120 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-focused.png and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-focused.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-open.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-open.png index 0079e01..934f137 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-open.png and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default-open.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default.png index 9516ca8..27b90a1 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default.png and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--default.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--disabled.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--disabled.png index 10da144..962f442 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--disabled.png and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--disabled.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--error.png b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--error.png new file mode 100644 index 0000000..f02b4d3 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/oph--ophselect--error.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-disabled.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-disabled.png new file mode 100644 index 0000000..9f2f4c9 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-disabled.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-error.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-error.png new file mode 100644 index 0000000..60aa4c0 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-error.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-focused.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-focused.png new file mode 100644 index 0000000..8d06e5b Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-focused.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-hovered.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-hovered.png new file mode 100644 index 0000000..83fef9b Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default-hovered.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default.png new file mode 100644 index 0000000..d1c5e24 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--default.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--multiline.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--multiline.png new file mode 100644 index 0000000..7d63289 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--multiline.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--with-end-adornment.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--with-end-adornment.png new file mode 100644 index 0000000..8c21a02 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophinput--with-end-adornment.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable-open.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable-open.png index 48d3c23..377e3b8 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable-open.png and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable-open.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable.png index 9516ca8..27b90a1 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable.png and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--clearable.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-focused.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-focused.png index b194043..0757a76 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-focused.png and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-focused.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-open.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-open.png index d38576a..d01dc04 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-open.png and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default-open.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default.png index 9516ca8..27b90a1 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default.png and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--default.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--disabled.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--disabled.png index 10da144..962f442 100644 Binary files a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--disabled.png and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--disabled.png differ diff --git a/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--error.png b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--error.png new file mode 100644 index 0000000..f02b4d3 Binary files /dev/null and b/playwright/snapshots/stories.spec.ts-snapshots/opintopolku--ophselect--error.png differ diff --git a/src/OphInput.stories.tsx b/src/OphInput.stories.tsx new file mode 100644 index 0000000..ec5f3fd --- /dev/null +++ b/src/OphInput.stories.tsx @@ -0,0 +1,68 @@ +import { Search } from '@mui/icons-material'; +import { OphInput } from './OphInput'; +import type { Meta, StoryObj } from '@storybook/react'; +import { within } from '@storybook/test'; +import { InputAdornment } from '@mui/material'; + +const meta = { + component: OphInput, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + value: + 'Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', + inputProps: { + 'aria-label': 'Otsikko', + }, + }, +}; + +export const DefaultHovered: Story = { + args: Default.args, + parameters: { + pseudo: { hover: true }, + }, +}; + +export const DefaultFocused: Story = { + args: Default.args, + play: ({ canvasElement }) => { + const canvas = within(canvasElement); + const inputs = canvas.getAllByRole('textbox'); + for (const input of inputs) { + input.focus(); + } + }, +}; + +export const DefaultDisabled: Story = { + args: { ...Default.args, disabled: true }, +}; + +export const DefaultError: Story = { + args: { ...Default.args, error: true }, +}; + +export const Multiline: Story = { + args: { + ...Default.args, + multiline: true, + rows: 10, + }, +}; + +export const WithEndAdornment: Story = { + args: { + ...Default.args, + endAdornment: ( + + + + ), + }, +}; diff --git a/src/OphInput.tsx b/src/OphInput.tsx new file mode 100644 index 0000000..a3e8f78 --- /dev/null +++ b/src/OphInput.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { + OutlinedInput, + type OutlinedInputProps, + type Theme, +} from '@mui/material'; +import { forwardRef } from 'react'; +import { type SystemProps } from '@mui/system'; + +export type OphInputProps = Omit< + OutlinedInputProps, + keyof SystemProps | 'label' +>; + +export const OphInput = forwardRef( + function renderInput(props, ref) { + return ; + }, +); diff --git a/src/OphSelect.stories.tsx b/src/OphSelect.stories.tsx index 26d4e08..9973339 100644 --- a/src/OphSelect.stories.tsx +++ b/src/OphSelect.stories.tsx @@ -53,24 +53,33 @@ export const DefaultOpen: Story = { }, }; -export const Clearable: Story = { +export const DefaultDisabled: Story = { args: { ...Default.args, - clearable: true, + disabled: true, }, }; -export const ClearableOpen: Story = { - ...DefaultOpen, +export const DefaultError: Story = { + args: { + ...Default.args, + error: true, + }, +}; + +export const Clearable: Story = { args: { ...Default.args, clearable: true, }, }; -export const Disabled: Story = { +export const ClearableOpen: Story = { + ...DefaultOpen, args: { ...Default.args, - disabled: true, + clearable: true, }, }; + + diff --git a/src/index.ts b/src/index.ts index 9adaf08..d83d51b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,7 @@ export { OphCheckbox } from './OphCheckbox'; export { OphSelect } from './OphSelect'; export { OphTypography } from './OphTypography'; export { OphLink } from './OphLink'; +export { OphInput } from './OphInput'; export { ophColors } from './colors'; export type { OphThemeParams, OphThemeVariant, OphLanguage } from './types'; diff --git a/src/theme/theme-utils.tsx b/src/theme/theme-utils.tsx index 4aaf7c3..b568c34 100644 --- a/src/theme/theme-utils.tsx +++ b/src/theme/theme-utils.tsx @@ -17,10 +17,8 @@ export function getLocale(lang?: OphLanguage) { } export const focusOutlineStyle = (overrides: CSSProperties = {}) => ({ - '&.Mui-focusVisible': { - outline: `2px solid ${ophColors.black}`, - outlineOffset: '1px', - zIndex: 9999, - ...overrides, - }, + outline: `2px solid ${ophColors.black}`, + outlineOffset: '1px', + zIndex: 9999, + ...overrides, }); diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index c666bfd..88268ed 100644 --- a/src/theme/theme.tsx +++ b/src/theme/theme.tsx @@ -53,7 +53,8 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { styleOverrides: { root: { borderRadius: '2px', - padding: '4px 16px', + padding: '6px 16px', + lineHeight: '24px', '&.Mui-disabled': { cursor: 'not-allowed', }, @@ -61,7 +62,7 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { width: '24px', height: '24px', }, - ...focusOutlineStyle(), + '&.Mui-focusVisible': focusOutlineStyle(), variants: [ { props: { variant: 'contained', color: 'primary' }, @@ -183,7 +184,10 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { '& .MuiSvgIcon-root': { zIndex: 1, }, - ...focusOutlineStyle({ outlineOffset: '-2px', borderRadius: '5px' }), + '&.Mui-focusVisible': focusOutlineStyle({ + outlineOffset: '-2px', + borderRadius: '5px', + }), variants: [ { props: { color: 'primary' }, @@ -242,7 +246,7 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { '&:hover, &:active': { textDecoration: 'underline', }, - ...focusOutlineStyle({ + '&.Mui-focusVisible': focusOutlineStyle({ textDecoration: 'underline', borderRadius: '1px', }), @@ -274,20 +278,77 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { }, }, }, + MuiInputBase: { + styleOverrides: { + root: { + borderColor: ophColors.grey800, + borderRadius: '2px', + }, + }, + }, MuiOutlinedInput: { styleOverrides: { - root: ({ theme }) => { - return { - backgroundColor: ophColors.white, - '.MuiOutlinedInput-notchedOutline': { - borderRadius: '2px', - borderWidth: '1px', + input: ({ theme }) => ({ + padding: theme.spacing(1, 1.5), + lineHeight: '24px', + height: 'auto', + }), + root: { + variants: [ + { + props: () => true, + style: ({ theme }) => ({ + '& .MuiInputAdornment-root': { + margin: theme.spacing(1, 1, 1, 0), + }, + padding: 0, + backgroundColor: ophColors.white, + borderRadius: '2px', + '&:has(input:focus-visible)': focusOutlineStyle({ + borderRadius: '2px', + }), + '& .MuiSvgIcon-root': { + color: ophColors.grey800, + }, + '& .MuiOutlinedInput-notchedOutline': { + // Fix: nothcedOutline touches focus outline on firefox when fullscreen + top: '-4.5px', + borderColor: ophColors.grey800, + borderRadius: '2px', + borderWidth: '1px', + }, + }), + }, + { + props: { error: true }, + style: ({ theme }) => ({ + color: theme.palette.error.main, + '& .MuiSvgIcon-root': { + color: theme.palette.error.main, + }, + }), + }, + { + props: (props) => props.color === 'primary' && !props.disabled, + style: ({ theme }) => ({ + '&:hover .MuiOutlinedInput-notchedOutline': { + borderWidth: '2px', + borderColor: theme.palette.primary.main, + }, + }), }, - '&:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': { - borderWidth: '2px', - borderColor: theme.palette.primary.main, + { + props: { disabled: true }, + style: { + '& .MuiOutlinedInput-notchedOutline': { + borderColor: ophColors.grey400, + }, + '& .MuiSvgIcon-root': { + color: ophColors.grey400, + }, + }, }, - }; + ], }, }, }, @@ -307,7 +368,9 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { MuiSelect: { styleOverrides: { select: { - padding: '12px', + '&:focus-visible': focusOutlineStyle({ + borderRadius: '2px', + }), }, }, }, @@ -326,8 +389,6 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { }, styleOverrides: { root: ({ theme }: { theme: Theme }) => ({ - paddingTop: 0, - paddingBottom: 0, color: ophColors.grey900, borderColor: theme.palette.primary.main, borderWidth: '2px', @@ -348,7 +409,6 @@ const COMMON_THEME_OPTIONS: ThemeOptions = { borderColor: theme.palette.primary.light, color: theme.palette.primary.main, }, - '&.Mui-disabled': {}, }), }, },