mirror of
https://github.com/zhigang1992/wallet.git
synced 2026-01-12 22:53:27 +08:00
fix: add panda
This commit is contained in:
alter-eggo
@@ -21,6 +21,7 @@ module.exports = {
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['./leaf-styles'],
|
||||
plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
|
||||
rules: {
|
||||
// This rule helps highlight areas of the code that use deprecated
|
||||
|
||||
4
.github/actions/provision/action.yml
vendored
4
.github/actions/provision/action.yml
vendored
@@ -20,3 +20,7 @@ runs:
|
||||
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
|
||||
run: yarn --frozen-lockfile
|
||||
shell: bash
|
||||
|
||||
- name: Pandacodegen
|
||||
run: yarn panda codegen
|
||||
shell: bash
|
||||
|
||||
10
.github/workflows/build-extension.yml
vendored
10
.github/workflows/build-extension.yml
vendored
@@ -45,11 +45,7 @@ jobs:
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }}
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
|
||||
- name: Install packages
|
||||
uses: ./.github/actions/provision
|
||||
if: steps.cache-node-modules.outputs.cache-hit != 'true'
|
||||
- uses: ./.github/actions/provision
|
||||
|
||||
- name: Build project
|
||||
run: yarn build
|
||||
@@ -83,9 +79,7 @@ jobs:
|
||||
path: '**/node_modules'
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }}
|
||||
|
||||
- name: Install packages
|
||||
uses: ./.github/actions/provision
|
||||
if: steps.cache-node-modules.outputs.cache-hit != 'true'
|
||||
- uses: ./.github/actions/provision
|
||||
|
||||
- name: Build project
|
||||
run: yarn build
|
||||
|
||||
2
.github/workflows/integration-tests.yml
vendored
2
.github/workflows/integration-tests.yml
vendored
@@ -28,6 +28,8 @@ jobs:
|
||||
- name: Check out Git repository
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- uses: ./.github/actions/provision
|
||||
|
||||
- name: Get installed Playwright version
|
||||
id: playwright-version
|
||||
run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
|
||||
|
||||
4
.github/workflows/playwright.yml
vendored
4
.github/workflows/playwright.yml
vendored
@@ -23,9 +23,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
- uses: ./.github/actions/provision
|
||||
|
||||
- name: Get installed Playwright version
|
||||
id: playwright-version
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -21,6 +21,5 @@ trace*
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/playwright/.cache/
|
||||
styled-system/chunks
|
||||
# Local Netlify folder
|
||||
leaf-styles
|
||||
.netlify
|
||||
|
||||
17
package.json
17
package.json
@@ -24,7 +24,7 @@
|
||||
"lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
|
||||
"lint:prettier": "prettier --check \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" \"*.{js,json}\"",
|
||||
"lint:prettier:fix": "prettier --write \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" *.js",
|
||||
"lint:unused-exports": "ts-unused-exports tsconfig.json",
|
||||
"lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leaf-styles",
|
||||
"lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json",
|
||||
"lint:deps": "dependency-cruise --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"",
|
||||
"prod:ext": "yarn build",
|
||||
@@ -184,7 +184,7 @@
|
||||
"chroma-js": "2.4.2",
|
||||
"coinselect": "3.1.13",
|
||||
"compare-versions": "4.1.3",
|
||||
"css-loader": "^6.8.1",
|
||||
"css-loader": "6.8.1",
|
||||
"dayjs": "1.11.8",
|
||||
"dlc-wasm-wallet": "0.4.7",
|
||||
"dompurify": "3.0.4",
|
||||
@@ -204,7 +204,7 @@
|
||||
"object-hash": "3.0.0",
|
||||
"observable-hooks": "4.2.2",
|
||||
"pino": "8.14.1",
|
||||
"postcss-preset-env": "^9.1.1",
|
||||
"postcss-preset-env": "9.1.1",
|
||||
"prismjs": "1.29.0",
|
||||
"promise-memoize": "1.2.1",
|
||||
"punycode": "2.3.0",
|
||||
@@ -221,7 +221,7 @@
|
||||
"react-virtuoso": "4.0.8",
|
||||
"redux-persist": "6.0.0",
|
||||
"rxjs": "7.8.1",
|
||||
"style-loader": "^3.3.3",
|
||||
"style-loader": "3.3.3",
|
||||
"ts-debounce": "4.0.0",
|
||||
"url": "0.11.1",
|
||||
"url-join": "5.0.0",
|
||||
@@ -243,7 +243,7 @@
|
||||
"@emotion/babel-preset-css-prop": "11.11.0",
|
||||
"@emotion/cache": "11.11.0",
|
||||
"@ls-lint/ls-lint": "2.0.1",
|
||||
"@pandacss/dev": "^0.9.0",
|
||||
"@pandacss/dev": "0.11.0",
|
||||
"@playwright/test": "1.34.3",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
|
||||
"@redux-devtools/cli": "2.0.0",
|
||||
@@ -315,8 +315,8 @@
|
||||
"jest-circus": "29.3.1",
|
||||
"jest-dev-server": "6.2.0",
|
||||
"jsdom": "22.1.0",
|
||||
"postcss": "^8.4.27",
|
||||
"postcss-loader": "^7.3.3",
|
||||
"postcss": "8.4.27",
|
||||
"postcss-loader": "7.3.3",
|
||||
"prettier": "2.8.8",
|
||||
"process": "0.11.10",
|
||||
"progress-bar-webpack-plugin": "2.1.0",
|
||||
@@ -339,7 +339,8 @@
|
||||
"webpack-bundle-analyzer": "4.9.0",
|
||||
"webpack-cli": "5.1.4",
|
||||
"webpack-dev-server": "4.15.1",
|
||||
"webpack-hot-middleware": "2.25.4"
|
||||
"webpack-hot-middleware": "2.25.4",
|
||||
"webpack-shell-plugin": "0.5.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"socket.io-parser": "4.2.4",
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { defineConfig } from '@pandacss/dev';
|
||||
|
||||
import { keyframes } from './theme/keyframes';
|
||||
import { semanticTokens } from './theme/semantic-tokens';
|
||||
import { tokens } from './theme/tokens';
|
||||
|
||||
export default defineConfig({
|
||||
// Whether to use css reset
|
||||
preflight: true,
|
||||
@@ -10,20 +14,17 @@ export default defineConfig({
|
||||
// Files to exclude
|
||||
exclude: [],
|
||||
|
||||
jsxFramework: 'react',
|
||||
|
||||
// Useful for theme customization
|
||||
theme: {
|
||||
// 👇🏻 Define your tokens here
|
||||
tokens: {
|
||||
colors: {
|
||||
primary: { value: 'red' },
|
||||
secondary: { value: '#EE0F0F' }
|
||||
extend: {
|
||||
semanticTokens,
|
||||
tokens,
|
||||
keyframes,
|
||||
},
|
||||
fonts: {
|
||||
body: { value: 'system-ui, sans-serif' }
|
||||
}
|
||||
}
|
||||
},
|
||||
// The output directory for your css system
|
||||
outdir: 'styled-system',
|
||||
outdir: 'leaf-styles',
|
||||
outExtension: 'js',
|
||||
});
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'@pandacss/dev/postcss': {},
|
||||
},
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ReactNode, Suspense, memo, useCallback, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { css } from '@emotion/react';
|
||||
import { Box, Flex, FlexProps, transition, useEventListener } from '@stacks/ui';
|
||||
import { css } from 'leaf-styles/css';
|
||||
|
||||
import { noop } from '@shared/utils';
|
||||
|
||||
@@ -101,10 +101,13 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => {
|
||||
maxHeight={['calc(100vh - 24px)', 'calc(100vh - 96px)']}
|
||||
>
|
||||
<Box
|
||||
css={css`
|
||||
overflow-y: scroll;
|
||||
${hideScrollbarStyle}
|
||||
`}
|
||||
className={
|
||||
css({
|
||||
overflowY: 'scroll',
|
||||
}) +
|
||||
' ' +
|
||||
hideScrollbarStyle
|
||||
}
|
||||
>
|
||||
<DrawerHeader
|
||||
enableGoBack={enableGoBack}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from 'leaf-styles/css';
|
||||
|
||||
export const hideScrollbarStyle = css`
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
export const hideScrollbarStyle = css({
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { css } from '@emotion/react';
|
||||
import { bytesToHex } from '@stacks/common';
|
||||
import { Box } from '@stacks/ui';
|
||||
import { css } from 'leaf-styles/css';
|
||||
|
||||
import { isBigInt, isTypedArray } from '@shared/utils';
|
||||
|
||||
@@ -13,13 +13,13 @@ function parseJsonReadable(value: any) {
|
||||
export function Json(value: any) {
|
||||
return (
|
||||
<Box
|
||||
css={css`
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
`}
|
||||
className={css({
|
||||
'& pre': {
|
||||
overflowX: 'auto',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
},
|
||||
})}
|
||||
fontSize="14px"
|
||||
lineHeight="1.7"
|
||||
mt="loose"
|
||||
|
||||
@@ -1,20 +1,11 @@
|
||||
import { keyframes } from '@emotion/react';
|
||||
import { Box, BoxProps } from '@stacks/ui';
|
||||
|
||||
const shine = keyframes`
|
||||
0% {
|
||||
background-position: -50px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px;
|
||||
}
|
||||
`;
|
||||
export function LoadingRectangle(props: BoxProps) {
|
||||
return (
|
||||
<Box
|
||||
backgroundImage="linear-gradient(90deg, rgba(219,219,219,1) 0%, rgba(192,192,247,0.5) 35%, rgba(219,219,219,1) 100%)"
|
||||
backgroundColor="rgb(219,219,219)"
|
||||
animation={`${shine} 5s infinite linear`}
|
||||
animation="shine 5s infinite linear"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Ref, useRef } from 'react';
|
||||
|
||||
import { css } from '@emotion/react';
|
||||
import { Box, Flex, FlexProps, Input, Text, color } from '@stacks/ui';
|
||||
import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
|
||||
import { useField } from 'formik';
|
||||
import { css } from 'leaf-styles/css';
|
||||
|
||||
import { useShowFieldError } from '@app/common/form-utils';
|
||||
import { capitalize } from '@app/common/utils';
|
||||
@@ -59,11 +59,11 @@ export function TextInputField({
|
||||
as="label"
|
||||
border="1px solid #DCDDE2"
|
||||
borderRadius="10px"
|
||||
css={css`
|
||||
:has(:focus)::before {
|
||||
border: 2px solid #bfc6ff;
|
||||
}
|
||||
`}
|
||||
className={css({
|
||||
'& :has(:focus)::before': {
|
||||
border: '2px solid #bfc6ff',
|
||||
},
|
||||
})}
|
||||
flexDirection="column"
|
||||
htmlFor={name}
|
||||
justifyContent="center"
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import { css } from '@emotion/react';
|
||||
import * as Switch from '@radix-ui/react-switch';
|
||||
|
||||
interface ToggleInputProps {
|
||||
name: string;
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export function ToggleInput({ name, checked, onChange }: ToggleInputProps) {
|
||||
return (
|
||||
<Switch.Root
|
||||
css={css`
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background-color: #efeff2;
|
||||
border-radius: 9999px;
|
||||
position: relative;
|
||||
transition: all 100ms;
|
||||
&[data-state='checked'] {
|
||||
background-color: #5546ff;
|
||||
}
|
||||
`}
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
id={name}
|
||||
name={name}
|
||||
>
|
||||
<Switch.Thumb
|
||||
css={css`
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
border-radius: 9999px;
|
||||
transition: all 100ms;
|
||||
transform: translateX(2px);
|
||||
will-change: transform;
|
||||
&[data-state='checked'] {
|
||||
transform: translateX(19px);
|
||||
}
|
||||
`}
|
||||
id={name}
|
||||
/>
|
||||
</Switch.Root>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { useField } from 'formik';
|
||||
|
||||
import { ToggleInput } from './toggle-input';
|
||||
|
||||
interface ToggleProps {
|
||||
name: string;
|
||||
}
|
||||
|
||||
// ts-unused-exports:disable-next-line
|
||||
export function Toggle({ name }: ToggleProps) {
|
||||
const [field, , helpers] = useField(name);
|
||||
|
||||
return (
|
||||
<ToggleInput
|
||||
name={name}
|
||||
checked={field.value}
|
||||
onChange={(checked: boolean) => {
|
||||
helpers.setValue(checked);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { Outlet, useLocation } from 'react-router-dom';
|
||||
|
||||
import { useInitalizeAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { useThemeSwitcher } from '@app/common/theme-provider';
|
||||
import { LoadingSpinner } from '@app/components/loading-spinner';
|
||||
import { useOnSignOut } from '@app/routes/hooks/use-on-sign-out';
|
||||
import { useOnWalletLock } from '@app/routes/hooks/use-on-wallet-lock';
|
||||
@@ -16,6 +17,7 @@ import { SwitchAccountDrawer } from '../switch-account-drawer/switch-account-dra
|
||||
import { ContainerLayout } from './container.layout';
|
||||
|
||||
export function Container() {
|
||||
const { theme } = useThemeSwitcher();
|
||||
const [routeHeader] = useRouteHeaderState();
|
||||
const { pathname } = useLocation();
|
||||
const analytics = useAnalytics();
|
||||
@@ -33,13 +35,13 @@ export function Container() {
|
||||
if (!hasStateRehydrated) return <LoadingSpinner />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className={theme}>
|
||||
<SwitchAccountDrawer />
|
||||
<SettingsDropdown />
|
||||
<Toaster position="bottom-center" toastOptions={{ style: { fontSize: '14px' } }} />
|
||||
<ContainerLayout header={routeHeader}>
|
||||
<Outlet />
|
||||
</ContainerLayout>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ type HomeLayoutProps = Record<
|
||||
>;
|
||||
export function HomeLayout(props: HomeLayoutProps) {
|
||||
const { suggestedFirstSteps, currentAccount, actions, children } = props;
|
||||
|
||||
return (
|
||||
<Stack alignItems="center" width="100%" spacing="extra-tight">
|
||||
{suggestedFirstSteps}
|
||||
|
||||
@@ -2,8 +2,6 @@ import { memo } from 'react';
|
||||
|
||||
import { Box, ButtonProps, Text } from '@stacks/ui';
|
||||
|
||||
import { token } from '@styled-system/tokens';
|
||||
|
||||
interface HomeActionButtonProps extends ButtonProps {
|
||||
icon: any;
|
||||
label: string;
|
||||
@@ -11,16 +9,9 @@ interface HomeActionButtonProps extends ButtonProps {
|
||||
}
|
||||
export const HomeActionButton = memo((props: HomeActionButtonProps) => {
|
||||
const { icon, label, buttonComponent: Button, ...rest } = props;
|
||||
console.log(token)
|
||||
|
||||
return (
|
||||
<Button
|
||||
height="36px"
|
||||
px="base-tight"
|
||||
py="tight"
|
||||
position="relative"
|
||||
// backgroundColor={token('colors.primary')}
|
||||
{...rest}
|
||||
>
|
||||
<Button height="36px" px="base-tight" py="tight" position="relative" {...rest}>
|
||||
<Box as={icon} mr="tight" size="14px" />
|
||||
<Text fontSize="14px">{label}</Text>
|
||||
</Button>
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { withoutSpace } from '../helpers.js';
|
||||
|
||||
const conditions = new Set(["_hover","_focus","_focusWithin","_focusVisible","_disabled","_active","_visited","_target","_readOnly","_readWrite","_empty","_checked","_enabled","_expanded","_highlighted","_before","_after","_firstLetter","_firstLine","_marker","_selection","_file","_backdrop","_first","_last","_only","_even","_odd","_firstOfType","_lastOfType","_onlyOfType","_peerFocus","_peerHover","_peerActive","_peerFocusWithin","_peerFocusVisible","_peerDisabled","_peerChecked","_peerInvalid","_peerExpanded","_peerPlaceholderShown","_groupFocus","_groupHover","_groupActive","_groupFocusWithin","_groupFocusVisible","_groupDisabled","_groupChecked","_groupExpanded","_groupInvalid","_indeterminate","_required","_valid","_invalid","_autofill","_inRange","_outOfRange","_placeholder","_placeholderShown","_pressed","_selected","_default","_optional","_open","_fullscreen","_loading","_currentPage","_currentStep","_motionReduce","_motionSafe","_print","_landscape","_portrait","_dark","_light","_osDark","_osLight","_highContrast","_lessContrast","_moreContrast","_ltr","_rtl","_scrollbar","_scrollbarThumb","_scrollbarTrack","_horizontal","_vertical","sm","smOnly","smDown","md","mdOnly","mdDown","lg","lgOnly","lgDown","xl","xlOnly","xlDown","2xl","2xlOnly","smToMd","smToLg","smToXl","smTo2xl","mdToLg","mdToXl","mdTo2xl","lgToXl","lgTo2xl","xlTo2xl","base"])
|
||||
|
||||
export function isCondition(value){
|
||||
return conditions.has(value) || /^@|&|&$/.test(value)
|
||||
}
|
||||
|
||||
const underscoreRegex = /^_/
|
||||
const selectorRegex = /&|@/
|
||||
|
||||
export function finalizeConditions(paths){
|
||||
return paths.map((path) => {
|
||||
if (conditions.has(path)){
|
||||
return path.replace(underscoreRegex, '')
|
||||
}
|
||||
|
||||
if (selectorRegex.test(path)){
|
||||
return `[${withoutSpace(path.trim())}]`
|
||||
}
|
||||
|
||||
return path
|
||||
})}
|
||||
|
||||
export function sortConditions(paths){
|
||||
return paths.sort((a, b) => {
|
||||
const aa = isCondition(a)
|
||||
const bb = isCondition(b)
|
||||
if (aa && !bb) return 1
|
||||
if (!aa && bb) return -1
|
||||
return 0
|
||||
})
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { withoutSpace } from '../helpers.mjs';
|
||||
|
||||
const conditions = new Set(["_hover","_focus","_focusWithin","_focusVisible","_disabled","_active","_visited","_target","_readOnly","_readWrite","_empty","_checked","_enabled","_expanded","_highlighted","_before","_after","_firstLetter","_firstLine","_marker","_selection","_file","_backdrop","_first","_last","_only","_even","_odd","_firstOfType","_lastOfType","_onlyOfType","_peerFocus","_peerHover","_peerActive","_peerFocusWithin","_peerFocusVisible","_peerDisabled","_peerChecked","_peerInvalid","_peerExpanded","_peerPlaceholderShown","_groupFocus","_groupHover","_groupActive","_groupFocusWithin","_groupFocusVisible","_groupDisabled","_groupChecked","_groupExpanded","_groupInvalid","_indeterminate","_required","_valid","_invalid","_autofill","_inRange","_outOfRange","_placeholder","_placeholderShown","_pressed","_selected","_default","_optional","_open","_fullscreen","_loading","_currentPage","_currentStep","_motionReduce","_motionSafe","_print","_landscape","_portrait","_dark","_light","_osDark","_osLight","_highContrast","_lessContrast","_moreContrast","_ltr","_rtl","_scrollbar","_scrollbarThumb","_scrollbarTrack","_horizontal","_vertical","sm","smOnly","smDown","md","mdOnly","mdDown","lg","lgOnly","lgDown","xl","xlOnly","xlDown","2xl","2xlOnly","smToMd","smToLg","smToXl","smTo2xl","mdToLg","mdToXl","mdTo2xl","lgToXl","lgTo2xl","xlTo2xl","base"])
|
||||
|
||||
export function isCondition(value){
|
||||
return conditions.has(value) || /^@|&|&$/.test(value)
|
||||
}
|
||||
|
||||
const underscoreRegex = /^_/
|
||||
const selectorRegex = /&|@/
|
||||
|
||||
export function finalizeConditions(paths){
|
||||
return paths.map((path) => {
|
||||
if (conditions.has(path)){
|
||||
return path.replace(underscoreRegex, '')
|
||||
}
|
||||
|
||||
if (selectorRegex.test(path)){
|
||||
return `[${withoutSpace(path.trim())}]`
|
||||
}
|
||||
|
||||
return path
|
||||
})}
|
||||
|
||||
export function sortConditions(paths){
|
||||
return paths.sort((a, b) => {
|
||||
const aa = isCondition(a)
|
||||
const bb = isCondition(b)
|
||||
if (aa && !bb) return 1
|
||||
if (!aa && bb) return -1
|
||||
return 0
|
||||
})
|
||||
}
|
||||
9
styled-system/css/css.d.ts
vendored
9
styled-system/css/css.d.ts
vendored
@@ -1,9 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject } from '../types'
|
||||
|
||||
interface CssFunction {
|
||||
(styles: SystemStyleObject): string
|
||||
raw: (styles: SystemStyleObject) => SystemStyleObject
|
||||
}
|
||||
|
||||
export declare const css: CssFunction;
|
||||
@@ -1,398 +0,0 @@
|
||||
import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.js';
|
||||
import { sortConditions, finalizeConditions } from './conditions.js';
|
||||
|
||||
const classNameMap = {
|
||||
"aspectRatio": "aspect",
|
||||
"boxDecorationBreak": "decoration",
|
||||
"zIndex": "z",
|
||||
"boxSizing": "box",
|
||||
"objectPosition": "object",
|
||||
"objectFit": "object",
|
||||
"overscrollBehavior": "overscroll",
|
||||
"overscrollBehaviorX": "overscroll-x",
|
||||
"overscrollBehaviorY": "overscroll-y",
|
||||
"position": "pos",
|
||||
"top": "top",
|
||||
"left": "left",
|
||||
"insetInline": "inset-x",
|
||||
"insetBlock": "inset-y",
|
||||
"inset": "inset",
|
||||
"insetBlockEnd": "inset-b",
|
||||
"insetBlockStart": "inset-t",
|
||||
"insetInlineEnd": "end",
|
||||
"insetInlineStart": "start",
|
||||
"right": "right",
|
||||
"bottom": "bottom",
|
||||
"insetX": "inset-x",
|
||||
"insetY": "inset-y",
|
||||
"float": "float",
|
||||
"visibility": "vis",
|
||||
"display": "d",
|
||||
"hideFrom": "hide",
|
||||
"hideBelow": "show",
|
||||
"flexBasis": "basis",
|
||||
"flex": "flex",
|
||||
"flexDirection": "flex",
|
||||
"flexGrow": "grow",
|
||||
"flexShrink": "shrink",
|
||||
"gridTemplateColumns": "grid-cols",
|
||||
"gridTemplateRows": "grid-rows",
|
||||
"gridColumn": "col-span",
|
||||
"gridRow": "row-span",
|
||||
"gridColumnStart": "col-start",
|
||||
"gridColumnEnd": "col-end",
|
||||
"gridAutoFlow": "grid-flow",
|
||||
"gridAutoColumns": "auto-cols",
|
||||
"gridAutoRows": "auto-rows",
|
||||
"gap": "gap",
|
||||
"gridGap": "gap",
|
||||
"gridRowGap": "gap-x",
|
||||
"gridColumnGap": "gap-y",
|
||||
"rowGap": "gap-x",
|
||||
"columnGap": "gap-y",
|
||||
"justifyContent": "justify",
|
||||
"alignContent": "content",
|
||||
"alignItems": "items",
|
||||
"alignSelf": "self",
|
||||
"padding": "p",
|
||||
"paddingLeft": "pl",
|
||||
"paddingRight": "pr",
|
||||
"paddingTop": "pt",
|
||||
"paddingBottom": "pb",
|
||||
"paddingBlock": "py",
|
||||
"paddingBlockEnd": "pb",
|
||||
"paddingBlockStart": "pt",
|
||||
"paddingInline": "px",
|
||||
"paddingInlineEnd": "pe",
|
||||
"paddingInlineStart": "ps",
|
||||
"marginLeft": "ml",
|
||||
"marginRight": "mr",
|
||||
"marginTop": "mt",
|
||||
"marginBottom": "mb",
|
||||
"margin": "m",
|
||||
"marginBlock": "my",
|
||||
"marginBlockEnd": "mb",
|
||||
"marginBlockStart": "mt",
|
||||
"marginInline": "mx",
|
||||
"marginInlineEnd": "me",
|
||||
"marginInlineStart": "ms",
|
||||
"outlineWidth": "ring",
|
||||
"outlineColor": "ring",
|
||||
"outline": "ring",
|
||||
"outlineOffset": "ring",
|
||||
"divideX": "divide-x",
|
||||
"divideY": "divide-y",
|
||||
"divideColor": "divide",
|
||||
"divideStyle": "divide",
|
||||
"width": "w",
|
||||
"inlineSize": "w",
|
||||
"minWidth": "min-w",
|
||||
"minInlineSize": "min-w",
|
||||
"maxWidth": "max-w",
|
||||
"maxInlineSize": "max-w",
|
||||
"height": "h",
|
||||
"blockSize": "h",
|
||||
"minHeight": "min-h",
|
||||
"minBlockSize": "min-h",
|
||||
"maxHeight": "max-h",
|
||||
"maxBlockSize": "max-b",
|
||||
"color": "text",
|
||||
"fontFamily": "font",
|
||||
"fontSize": "fs",
|
||||
"fontWeight": "font",
|
||||
"fontSmoothing": "smoothing",
|
||||
"fontVariantNumeric": "numeric",
|
||||
"letterSpacing": "tracking",
|
||||
"lineHeight": "leading",
|
||||
"textAlign": "text",
|
||||
"textDecoration": "text-decor",
|
||||
"textDecorationColor": "text-decor",
|
||||
"textEmphasisColor": "text-emphasis",
|
||||
"textDecorationStyle": "decoration",
|
||||
"textDecorationThickness": "decoration",
|
||||
"textUnderlineOffset": "underline-offset",
|
||||
"textTransform": "text",
|
||||
"textIndent": "indent",
|
||||
"textShadow": "text-shadow",
|
||||
"textOverflow": "text",
|
||||
"verticalAlign": "align",
|
||||
"wordBreak": "break",
|
||||
"textWrap": "text",
|
||||
"truncate": "truncate",
|
||||
"lineClamp": "clamp",
|
||||
"listStyleType": "list",
|
||||
"listStylePosition": "list",
|
||||
"listStyleImage": "list-img",
|
||||
"backgroundPosition": "bg",
|
||||
"backgroundPositionX": "bg-x",
|
||||
"backgroundPositionY": "bg-y",
|
||||
"backgroundAttachment": "bg",
|
||||
"backgroundClip": "bg-clip",
|
||||
"background": "bg",
|
||||
"backgroundColor": "bg",
|
||||
"backgroundOrigin": "bg-origin",
|
||||
"backgroundImage": "bg-img",
|
||||
"backgroundRepeat": "bg-repeat",
|
||||
"backgroundBlendMode": "bg-blend",
|
||||
"backgroundSize": "bg",
|
||||
"backgroundGradient": "bg-gradient",
|
||||
"textGradient": "text-gradient",
|
||||
"gradientFrom": "from",
|
||||
"gradientTo": "to",
|
||||
"gradientVia": "via",
|
||||
"borderRadius": "rounded",
|
||||
"borderTopLeftRadius": "rounded-tl",
|
||||
"borderTopRightRadius": "rounded-tr",
|
||||
"borderBottomRightRadius": "rounded-br",
|
||||
"borderBottomLeftRadius": "rounded-bl",
|
||||
"borderTopRadius": "rounded-t",
|
||||
"borderRightRadius": "rounded-r",
|
||||
"borderBottomRadius": "rounded-b",
|
||||
"borderLeftRadius": "rounded-l",
|
||||
"borderStartStartRadius": "rounded-ss",
|
||||
"borderStartEndRadius": "rounded-se",
|
||||
"borderStartRadius": "rounded-s",
|
||||
"borderEndStartRadius": "rounded-es",
|
||||
"borderEndEndRadius": "rounded-ee",
|
||||
"borderEndRadius": "rounded-e",
|
||||
"border": "border",
|
||||
"borderColor": "border",
|
||||
"borderInline": "border-x",
|
||||
"borderInlineWidth": "border-x",
|
||||
"borderInlineColor": "border-x",
|
||||
"borderBlock": "border-y",
|
||||
"borderBlockWidth": "border-y",
|
||||
"borderBlockColor": "border-y",
|
||||
"borderLeft": "border-l",
|
||||
"borderLeftColor": "border-l",
|
||||
"borderInlineStart": "border-s",
|
||||
"borderInlineStartColor": "border-s",
|
||||
"borderRight": "border-r",
|
||||
"borderRightColor": "border-r",
|
||||
"borderInlineEnd": "border-e",
|
||||
"borderInlineEndColor": "border-e",
|
||||
"borderTop": "border-t",
|
||||
"borderTopColor": "border-t",
|
||||
"borderBottom": "border-b",
|
||||
"borderBottomColor": "border-b",
|
||||
"borderBlockEnd": "border-be",
|
||||
"borderBlockEndColor": "border-be",
|
||||
"borderBlockStart": "border-bs",
|
||||
"borderBlockStartColor": "border-bs",
|
||||
"boxShadow": "shadow",
|
||||
"boxShadowColor": "shadow",
|
||||
"mixBlendMode": "mix-blend",
|
||||
"filter": "filter",
|
||||
"brightness": "brightness",
|
||||
"contrast": "contrast",
|
||||
"grayscale": "grayscale",
|
||||
"hueRotate": "hue-rotate",
|
||||
"invert": "invert",
|
||||
"saturate": "saturate",
|
||||
"sepia": "sepia",
|
||||
"dropShadow": "drop-shadow",
|
||||
"blur": "blur",
|
||||
"backdropFilter": "backdrop",
|
||||
"backdropBlur": "backdrop-blur",
|
||||
"backdropBrightness": "backdrop-brightness",
|
||||
"backdropContrast": "backdrop-contrast",
|
||||
"backdropGrayscale": "backdrop-grayscale",
|
||||
"backdropHueRotate": "backdrop-hue-rotate",
|
||||
"backdropInvert": "backdrop-invert",
|
||||
"backdropOpacity": "backdrop-opacity",
|
||||
"backdropSaturate": "backdrop-saturate",
|
||||
"backdropSepia": "backdrop-sepia",
|
||||
"borderCollapse": "border",
|
||||
"borderSpacing": "border-spacing",
|
||||
"borderSpacingX": "border-spacing-x",
|
||||
"borderSpacingY": "border-spacing-y",
|
||||
"tableLayout": "table",
|
||||
"transitionTimingFunction": "ease",
|
||||
"transitionDelay": "delay",
|
||||
"transitionDuration": "duration",
|
||||
"transitionProperty": "transition-prop",
|
||||
"transition": "transition",
|
||||
"animation": "animation",
|
||||
"animationDelay": "animation-delay",
|
||||
"transformOrigin": "origin",
|
||||
"scale": "scale",
|
||||
"scaleX": "scale-x",
|
||||
"scaleY": "scale-y",
|
||||
"translate": "translate",
|
||||
"translateX": "translate-x",
|
||||
"translateY": "translate-y",
|
||||
"accentColor": "accent",
|
||||
"caretColor": "caret",
|
||||
"scrollBehavior": "scroll",
|
||||
"scrollbar": "scrollbar",
|
||||
"scrollMargin": "scroll-m",
|
||||
"scrollMarginX": "scroll-mx",
|
||||
"scrollMarginY": "scroll-my",
|
||||
"scrollMarginLeft": "scroll-ml",
|
||||
"scrollMarginRight": "scroll-mr",
|
||||
"scrollMarginTop": "scroll-mt",
|
||||
"scrollMarginBottom": "scroll-mb",
|
||||
"scrollMarginBlock": "scroll-my",
|
||||
"scrollMarginBlockEnd": "scroll-mb",
|
||||
"scrollMarginBlockStart": "scroll-mt",
|
||||
"scrollMarginInline": "scroll-mx",
|
||||
"scrollMarginInlineEnd": "scroll-me",
|
||||
"scrollMarginInlineStart": "scroll-ms",
|
||||
"scrollPadding": "scroll-p",
|
||||
"scrollPaddingBlock": "scroll-pb",
|
||||
"scrollPaddingBlockStart": "scroll-pt",
|
||||
"scrollPaddingBlockEnd": "scroll-pb",
|
||||
"scrollPaddingInline": "scroll-px",
|
||||
"scrollPaddingInlineEnd": "scroll-pe",
|
||||
"scrollPaddingInlineStart": "scroll-ps",
|
||||
"scrollPaddingX": "scroll-px",
|
||||
"scrollPaddingY": "scroll-py",
|
||||
"scrollPaddingLeft": "scroll-pl",
|
||||
"scrollPaddingRight": "scroll-pr",
|
||||
"scrollPaddingTop": "scroll-pt",
|
||||
"scrollPaddingBottom": "scroll-pb",
|
||||
"scrollSnapAlign": "snap",
|
||||
"scrollSnapStop": "snap",
|
||||
"scrollSnapType": "snap",
|
||||
"scrollSnapStrictness": "strictness",
|
||||
"scrollSnapMargin": "snap-m",
|
||||
"scrollSnapMarginTop": "snap-mt",
|
||||
"scrollSnapMarginBottom": "snap-mb",
|
||||
"scrollSnapMarginLeft": "snap-ml",
|
||||
"scrollSnapMarginRight": "snap-mr",
|
||||
"touchAction": "touch",
|
||||
"userSelect": "select",
|
||||
"fill": "fill",
|
||||
"stroke": "stroke",
|
||||
"srOnly": "sr",
|
||||
"debug": "debug",
|
||||
"appearance": "appearance",
|
||||
"backfaceVisibility": "backface",
|
||||
"clipPath": "clip-path",
|
||||
"hyphens": "hyphens",
|
||||
"mask": "mask",
|
||||
"maskImage": "mask-image",
|
||||
"maskSize": "mask-size",
|
||||
"textSizeAdjust": "text-size-adjust",
|
||||
"textStyle": "textStyle"
|
||||
}
|
||||
|
||||
const shorthands = {
|
||||
"pos": "position",
|
||||
"insetEnd": "insetInlineEnd",
|
||||
"end": "insetInlineEnd",
|
||||
"insetStart": "insetInlineStart",
|
||||
"start": "insetInlineStart",
|
||||
"flexDir": "flexDirection",
|
||||
"p": "padding",
|
||||
"pl": "paddingLeft",
|
||||
"pr": "paddingRight",
|
||||
"pt": "paddingTop",
|
||||
"pb": "paddingBottom",
|
||||
"py": "paddingBlock",
|
||||
"paddingY": "paddingBlock",
|
||||
"paddingX": "paddingInline",
|
||||
"px": "paddingInline",
|
||||
"pe": "paddingInlineEnd",
|
||||
"paddingEnd": "paddingInlineEnd",
|
||||
"ps": "paddingInlineStart",
|
||||
"paddingStart": "paddingInlineStart",
|
||||
"ml": "marginLeft",
|
||||
"mr": "marginRight",
|
||||
"mt": "marginTop",
|
||||
"mb": "marginBottom",
|
||||
"m": "margin",
|
||||
"my": "marginBlock",
|
||||
"marginY": "marginBlock",
|
||||
"mx": "marginInline",
|
||||
"marginX": "marginInline",
|
||||
"me": "marginInlineEnd",
|
||||
"marginEnd": "marginInlineEnd",
|
||||
"ms": "marginInlineStart",
|
||||
"marginStart": "marginInlineStart",
|
||||
"ringWidth": "outlineWidth",
|
||||
"ringColor": "outlineColor",
|
||||
"ring": "outline",
|
||||
"ringOffset": "outlineOffset",
|
||||
"w": "width",
|
||||
"minW": "minWidth",
|
||||
"maxW": "maxWidth",
|
||||
"h": "height",
|
||||
"minH": "minHeight",
|
||||
"maxH": "maxHeight",
|
||||
"bgPosition": "backgroundPosition",
|
||||
"bgPositionX": "backgroundPositionX",
|
||||
"bgPositionY": "backgroundPositionY",
|
||||
"bgAttachment": "backgroundAttachment",
|
||||
"bgClip": "backgroundClip",
|
||||
"bg": "background",
|
||||
"bgColor": "backgroundColor",
|
||||
"bgOrigin": "backgroundOrigin",
|
||||
"bgImage": "backgroundImage",
|
||||
"bgRepeat": "backgroundRepeat",
|
||||
"bgBlendMode": "backgroundBlendMode",
|
||||
"bgSize": "backgroundSize",
|
||||
"bgGradient": "backgroundGradient",
|
||||
"rounded": "borderRadius",
|
||||
"roundedTopLeft": "borderTopLeftRadius",
|
||||
"roundedTopRight": "borderTopRightRadius",
|
||||
"roundedBottomRight": "borderBottomRightRadius",
|
||||
"roundedBottomLeft": "borderBottomLeftRadius",
|
||||
"roundedTop": "borderTopRadius",
|
||||
"roundedRight": "borderRightRadius",
|
||||
"roundedBottom": "borderBottomRadius",
|
||||
"roundedLeft": "borderLeftRadius",
|
||||
"roundedStartStart": "borderStartStartRadius",
|
||||
"roundedStartEnd": "borderStartEndRadius",
|
||||
"roundedStart": "borderStartRadius",
|
||||
"roundedEndStart": "borderEndStartRadius",
|
||||
"roundedEndEnd": "borderEndEndRadius",
|
||||
"roundedEnd": "borderEndRadius",
|
||||
"borderX": "borderInline",
|
||||
"borderXWidth": "borderInlineWidth",
|
||||
"borderXColor": "borderInlineColor",
|
||||
"borderY": "borderBlock",
|
||||
"borderYWidth": "borderBlockWidth",
|
||||
"borderYColor": "borderBlockColor",
|
||||
"borderStart": "borderInlineStart",
|
||||
"borderStartColor": "borderInlineStartColor",
|
||||
"borderEnd": "borderInlineEnd",
|
||||
"borderEndColor": "borderInlineEndColor",
|
||||
"shadow": "boxShadow",
|
||||
"shadowColor": "boxShadowColor",
|
||||
"x": "translateX",
|
||||
"y": "translateY"
|
||||
}
|
||||
|
||||
const breakpointKeys = ["base","sm","md","lg","xl","2xl"]
|
||||
|
||||
const hasShorthand = true
|
||||
|
||||
const resolveShorthand = (prop) => shorthands[prop] || prop
|
||||
|
||||
function transform(prop, value) {
|
||||
const key = resolveShorthand(prop)
|
||||
const propKey = classNameMap[key] || hypenateProperty(key)
|
||||
const className = `${propKey}_${withoutSpace(value)}`
|
||||
return { className }
|
||||
}
|
||||
|
||||
const context = {
|
||||
hash: false,
|
||||
conditions: {
|
||||
shift: sortConditions,
|
||||
finalize: finalizeConditions,
|
||||
breakpoints: { keys: breakpointKeys }
|
||||
},
|
||||
utility: {
|
||||
prefix: undefined,
|
||||
transform,
|
||||
hasShorthand,
|
||||
resolveShorthand,
|
||||
}
|
||||
}
|
||||
|
||||
export const css = createCss(context)
|
||||
css.raw = (styles) => styles
|
||||
|
||||
export const { mergeCss, assignCss } = createMergeCss(context)
|
||||
@@ -1,398 +0,0 @@
|
||||
import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs';
|
||||
import { sortConditions, finalizeConditions } from './conditions.mjs';
|
||||
|
||||
const classNameMap = {
|
||||
"aspectRatio": "aspect",
|
||||
"boxDecorationBreak": "decoration",
|
||||
"zIndex": "z",
|
||||
"boxSizing": "box",
|
||||
"objectPosition": "object",
|
||||
"objectFit": "object",
|
||||
"overscrollBehavior": "overscroll",
|
||||
"overscrollBehaviorX": "overscroll-x",
|
||||
"overscrollBehaviorY": "overscroll-y",
|
||||
"position": "pos",
|
||||
"top": "top",
|
||||
"left": "left",
|
||||
"insetInline": "inset-x",
|
||||
"insetBlock": "inset-y",
|
||||
"inset": "inset",
|
||||
"insetBlockEnd": "inset-b",
|
||||
"insetBlockStart": "inset-t",
|
||||
"insetInlineEnd": "end",
|
||||
"insetInlineStart": "start",
|
||||
"right": "right",
|
||||
"bottom": "bottom",
|
||||
"insetX": "inset-x",
|
||||
"insetY": "inset-y",
|
||||
"float": "float",
|
||||
"visibility": "vis",
|
||||
"display": "d",
|
||||
"hideFrom": "hide",
|
||||
"hideBelow": "show",
|
||||
"flexBasis": "basis",
|
||||
"flex": "flex",
|
||||
"flexDirection": "flex",
|
||||
"flexGrow": "grow",
|
||||
"flexShrink": "shrink",
|
||||
"gridTemplateColumns": "grid-cols",
|
||||
"gridTemplateRows": "grid-rows",
|
||||
"gridColumn": "col-span",
|
||||
"gridRow": "row-span",
|
||||
"gridColumnStart": "col-start",
|
||||
"gridColumnEnd": "col-end",
|
||||
"gridAutoFlow": "grid-flow",
|
||||
"gridAutoColumns": "auto-cols",
|
||||
"gridAutoRows": "auto-rows",
|
||||
"gap": "gap",
|
||||
"gridGap": "gap",
|
||||
"gridRowGap": "gap-x",
|
||||
"gridColumnGap": "gap-y",
|
||||
"rowGap": "gap-x",
|
||||
"columnGap": "gap-y",
|
||||
"justifyContent": "justify",
|
||||
"alignContent": "content",
|
||||
"alignItems": "items",
|
||||
"alignSelf": "self",
|
||||
"padding": "p",
|
||||
"paddingLeft": "pl",
|
||||
"paddingRight": "pr",
|
||||
"paddingTop": "pt",
|
||||
"paddingBottom": "pb",
|
||||
"paddingBlock": "py",
|
||||
"paddingBlockEnd": "pb",
|
||||
"paddingBlockStart": "pt",
|
||||
"paddingInline": "px",
|
||||
"paddingInlineEnd": "pe",
|
||||
"paddingInlineStart": "ps",
|
||||
"marginLeft": "ml",
|
||||
"marginRight": "mr",
|
||||
"marginTop": "mt",
|
||||
"marginBottom": "mb",
|
||||
"margin": "m",
|
||||
"marginBlock": "my",
|
||||
"marginBlockEnd": "mb",
|
||||
"marginBlockStart": "mt",
|
||||
"marginInline": "mx",
|
||||
"marginInlineEnd": "me",
|
||||
"marginInlineStart": "ms",
|
||||
"outlineWidth": "ring",
|
||||
"outlineColor": "ring",
|
||||
"outline": "ring",
|
||||
"outlineOffset": "ring",
|
||||
"divideX": "divide-x",
|
||||
"divideY": "divide-y",
|
||||
"divideColor": "divide",
|
||||
"divideStyle": "divide",
|
||||
"width": "w",
|
||||
"inlineSize": "w",
|
||||
"minWidth": "min-w",
|
||||
"minInlineSize": "min-w",
|
||||
"maxWidth": "max-w",
|
||||
"maxInlineSize": "max-w",
|
||||
"height": "h",
|
||||
"blockSize": "h",
|
||||
"minHeight": "min-h",
|
||||
"minBlockSize": "min-h",
|
||||
"maxHeight": "max-h",
|
||||
"maxBlockSize": "max-b",
|
||||
"color": "text",
|
||||
"fontFamily": "font",
|
||||
"fontSize": "fs",
|
||||
"fontWeight": "font",
|
||||
"fontSmoothing": "smoothing",
|
||||
"fontVariantNumeric": "numeric",
|
||||
"letterSpacing": "tracking",
|
||||
"lineHeight": "leading",
|
||||
"textAlign": "text",
|
||||
"textDecoration": "text-decor",
|
||||
"textDecorationColor": "text-decor",
|
||||
"textEmphasisColor": "text-emphasis",
|
||||
"textDecorationStyle": "decoration",
|
||||
"textDecorationThickness": "decoration",
|
||||
"textUnderlineOffset": "underline-offset",
|
||||
"textTransform": "text",
|
||||
"textIndent": "indent",
|
||||
"textShadow": "text-shadow",
|
||||
"textOverflow": "text",
|
||||
"verticalAlign": "align",
|
||||
"wordBreak": "break",
|
||||
"textWrap": "text",
|
||||
"truncate": "truncate",
|
||||
"lineClamp": "clamp",
|
||||
"listStyleType": "list",
|
||||
"listStylePosition": "list",
|
||||
"listStyleImage": "list-img",
|
||||
"backgroundPosition": "bg",
|
||||
"backgroundPositionX": "bg-x",
|
||||
"backgroundPositionY": "bg-y",
|
||||
"backgroundAttachment": "bg",
|
||||
"backgroundClip": "bg-clip",
|
||||
"background": "bg",
|
||||
"backgroundColor": "bg",
|
||||
"backgroundOrigin": "bg-origin",
|
||||
"backgroundImage": "bg-img",
|
||||
"backgroundRepeat": "bg-repeat",
|
||||
"backgroundBlendMode": "bg-blend",
|
||||
"backgroundSize": "bg",
|
||||
"backgroundGradient": "bg-gradient",
|
||||
"textGradient": "text-gradient",
|
||||
"gradientFrom": "from",
|
||||
"gradientTo": "to",
|
||||
"gradientVia": "via",
|
||||
"borderRadius": "rounded",
|
||||
"borderTopLeftRadius": "rounded-tl",
|
||||
"borderTopRightRadius": "rounded-tr",
|
||||
"borderBottomRightRadius": "rounded-br",
|
||||
"borderBottomLeftRadius": "rounded-bl",
|
||||
"borderTopRadius": "rounded-t",
|
||||
"borderRightRadius": "rounded-r",
|
||||
"borderBottomRadius": "rounded-b",
|
||||
"borderLeftRadius": "rounded-l",
|
||||
"borderStartStartRadius": "rounded-ss",
|
||||
"borderStartEndRadius": "rounded-se",
|
||||
"borderStartRadius": "rounded-s",
|
||||
"borderEndStartRadius": "rounded-es",
|
||||
"borderEndEndRadius": "rounded-ee",
|
||||
"borderEndRadius": "rounded-e",
|
||||
"border": "border",
|
||||
"borderColor": "border",
|
||||
"borderInline": "border-x",
|
||||
"borderInlineWidth": "border-x",
|
||||
"borderInlineColor": "border-x",
|
||||
"borderBlock": "border-y",
|
||||
"borderBlockWidth": "border-y",
|
||||
"borderBlockColor": "border-y",
|
||||
"borderLeft": "border-l",
|
||||
"borderLeftColor": "border-l",
|
||||
"borderInlineStart": "border-s",
|
||||
"borderInlineStartColor": "border-s",
|
||||
"borderRight": "border-r",
|
||||
"borderRightColor": "border-r",
|
||||
"borderInlineEnd": "border-e",
|
||||
"borderInlineEndColor": "border-e",
|
||||
"borderTop": "border-t",
|
||||
"borderTopColor": "border-t",
|
||||
"borderBottom": "border-b",
|
||||
"borderBottomColor": "border-b",
|
||||
"borderBlockEnd": "border-be",
|
||||
"borderBlockEndColor": "border-be",
|
||||
"borderBlockStart": "border-bs",
|
||||
"borderBlockStartColor": "border-bs",
|
||||
"boxShadow": "shadow",
|
||||
"boxShadowColor": "shadow",
|
||||
"mixBlendMode": "mix-blend",
|
||||
"filter": "filter",
|
||||
"brightness": "brightness",
|
||||
"contrast": "contrast",
|
||||
"grayscale": "grayscale",
|
||||
"hueRotate": "hue-rotate",
|
||||
"invert": "invert",
|
||||
"saturate": "saturate",
|
||||
"sepia": "sepia",
|
||||
"dropShadow": "drop-shadow",
|
||||
"blur": "blur",
|
||||
"backdropFilter": "backdrop",
|
||||
"backdropBlur": "backdrop-blur",
|
||||
"backdropBrightness": "backdrop-brightness",
|
||||
"backdropContrast": "backdrop-contrast",
|
||||
"backdropGrayscale": "backdrop-grayscale",
|
||||
"backdropHueRotate": "backdrop-hue-rotate",
|
||||
"backdropInvert": "backdrop-invert",
|
||||
"backdropOpacity": "backdrop-opacity",
|
||||
"backdropSaturate": "backdrop-saturate",
|
||||
"backdropSepia": "backdrop-sepia",
|
||||
"borderCollapse": "border",
|
||||
"borderSpacing": "border-spacing",
|
||||
"borderSpacingX": "border-spacing-x",
|
||||
"borderSpacingY": "border-spacing-y",
|
||||
"tableLayout": "table",
|
||||
"transitionTimingFunction": "ease",
|
||||
"transitionDelay": "delay",
|
||||
"transitionDuration": "duration",
|
||||
"transitionProperty": "transition-prop",
|
||||
"transition": "transition",
|
||||
"animation": "animation",
|
||||
"animationDelay": "animation-delay",
|
||||
"transformOrigin": "origin",
|
||||
"scale": "scale",
|
||||
"scaleX": "scale-x",
|
||||
"scaleY": "scale-y",
|
||||
"translate": "translate",
|
||||
"translateX": "translate-x",
|
||||
"translateY": "translate-y",
|
||||
"accentColor": "accent",
|
||||
"caretColor": "caret",
|
||||
"scrollBehavior": "scroll",
|
||||
"scrollbar": "scrollbar",
|
||||
"scrollMargin": "scroll-m",
|
||||
"scrollMarginX": "scroll-mx",
|
||||
"scrollMarginY": "scroll-my",
|
||||
"scrollMarginLeft": "scroll-ml",
|
||||
"scrollMarginRight": "scroll-mr",
|
||||
"scrollMarginTop": "scroll-mt",
|
||||
"scrollMarginBottom": "scroll-mb",
|
||||
"scrollMarginBlock": "scroll-my",
|
||||
"scrollMarginBlockEnd": "scroll-mb",
|
||||
"scrollMarginBlockStart": "scroll-mt",
|
||||
"scrollMarginInline": "scroll-mx",
|
||||
"scrollMarginInlineEnd": "scroll-me",
|
||||
"scrollMarginInlineStart": "scroll-ms",
|
||||
"scrollPadding": "scroll-p",
|
||||
"scrollPaddingBlock": "scroll-pb",
|
||||
"scrollPaddingBlockStart": "scroll-pt",
|
||||
"scrollPaddingBlockEnd": "scroll-pb",
|
||||
"scrollPaddingInline": "scroll-px",
|
||||
"scrollPaddingInlineEnd": "scroll-pe",
|
||||
"scrollPaddingInlineStart": "scroll-ps",
|
||||
"scrollPaddingX": "scroll-px",
|
||||
"scrollPaddingY": "scroll-py",
|
||||
"scrollPaddingLeft": "scroll-pl",
|
||||
"scrollPaddingRight": "scroll-pr",
|
||||
"scrollPaddingTop": "scroll-pt",
|
||||
"scrollPaddingBottom": "scroll-pb",
|
||||
"scrollSnapAlign": "snap",
|
||||
"scrollSnapStop": "snap",
|
||||
"scrollSnapType": "snap",
|
||||
"scrollSnapStrictness": "strictness",
|
||||
"scrollSnapMargin": "snap-m",
|
||||
"scrollSnapMarginTop": "snap-mt",
|
||||
"scrollSnapMarginBottom": "snap-mb",
|
||||
"scrollSnapMarginLeft": "snap-ml",
|
||||
"scrollSnapMarginRight": "snap-mr",
|
||||
"touchAction": "touch",
|
||||
"userSelect": "select",
|
||||
"fill": "fill",
|
||||
"stroke": "stroke",
|
||||
"srOnly": "sr",
|
||||
"debug": "debug",
|
||||
"appearance": "appearance",
|
||||
"backfaceVisibility": "backface",
|
||||
"clipPath": "clip-path",
|
||||
"hyphens": "hyphens",
|
||||
"mask": "mask",
|
||||
"maskImage": "mask-image",
|
||||
"maskSize": "mask-size",
|
||||
"textSizeAdjust": "text-size-adjust",
|
||||
"textStyle": "textStyle"
|
||||
}
|
||||
|
||||
const shorthands = {
|
||||
"pos": "position",
|
||||
"insetEnd": "insetInlineEnd",
|
||||
"end": "insetInlineEnd",
|
||||
"insetStart": "insetInlineStart",
|
||||
"start": "insetInlineStart",
|
||||
"flexDir": "flexDirection",
|
||||
"p": "padding",
|
||||
"pl": "paddingLeft",
|
||||
"pr": "paddingRight",
|
||||
"pt": "paddingTop",
|
||||
"pb": "paddingBottom",
|
||||
"py": "paddingBlock",
|
||||
"paddingY": "paddingBlock",
|
||||
"paddingX": "paddingInline",
|
||||
"px": "paddingInline",
|
||||
"pe": "paddingInlineEnd",
|
||||
"paddingEnd": "paddingInlineEnd",
|
||||
"ps": "paddingInlineStart",
|
||||
"paddingStart": "paddingInlineStart",
|
||||
"ml": "marginLeft",
|
||||
"mr": "marginRight",
|
||||
"mt": "marginTop",
|
||||
"mb": "marginBottom",
|
||||
"m": "margin",
|
||||
"my": "marginBlock",
|
||||
"marginY": "marginBlock",
|
||||
"mx": "marginInline",
|
||||
"marginX": "marginInline",
|
||||
"me": "marginInlineEnd",
|
||||
"marginEnd": "marginInlineEnd",
|
||||
"ms": "marginInlineStart",
|
||||
"marginStart": "marginInlineStart",
|
||||
"ringWidth": "outlineWidth",
|
||||
"ringColor": "outlineColor",
|
||||
"ring": "outline",
|
||||
"ringOffset": "outlineOffset",
|
||||
"w": "width",
|
||||
"minW": "minWidth",
|
||||
"maxW": "maxWidth",
|
||||
"h": "height",
|
||||
"minH": "minHeight",
|
||||
"maxH": "maxHeight",
|
||||
"bgPosition": "backgroundPosition",
|
||||
"bgPositionX": "backgroundPositionX",
|
||||
"bgPositionY": "backgroundPositionY",
|
||||
"bgAttachment": "backgroundAttachment",
|
||||
"bgClip": "backgroundClip",
|
||||
"bg": "background",
|
||||
"bgColor": "backgroundColor",
|
||||
"bgOrigin": "backgroundOrigin",
|
||||
"bgImage": "backgroundImage",
|
||||
"bgRepeat": "backgroundRepeat",
|
||||
"bgBlendMode": "backgroundBlendMode",
|
||||
"bgSize": "backgroundSize",
|
||||
"bgGradient": "backgroundGradient",
|
||||
"rounded": "borderRadius",
|
||||
"roundedTopLeft": "borderTopLeftRadius",
|
||||
"roundedTopRight": "borderTopRightRadius",
|
||||
"roundedBottomRight": "borderBottomRightRadius",
|
||||
"roundedBottomLeft": "borderBottomLeftRadius",
|
||||
"roundedTop": "borderTopRadius",
|
||||
"roundedRight": "borderRightRadius",
|
||||
"roundedBottom": "borderBottomRadius",
|
||||
"roundedLeft": "borderLeftRadius",
|
||||
"roundedStartStart": "borderStartStartRadius",
|
||||
"roundedStartEnd": "borderStartEndRadius",
|
||||
"roundedStart": "borderStartRadius",
|
||||
"roundedEndStart": "borderEndStartRadius",
|
||||
"roundedEndEnd": "borderEndEndRadius",
|
||||
"roundedEnd": "borderEndRadius",
|
||||
"borderX": "borderInline",
|
||||
"borderXWidth": "borderInlineWidth",
|
||||
"borderXColor": "borderInlineColor",
|
||||
"borderY": "borderBlock",
|
||||
"borderYWidth": "borderBlockWidth",
|
||||
"borderYColor": "borderBlockColor",
|
||||
"borderStart": "borderInlineStart",
|
||||
"borderStartColor": "borderInlineStartColor",
|
||||
"borderEnd": "borderInlineEnd",
|
||||
"borderEndColor": "borderInlineEndColor",
|
||||
"shadow": "boxShadow",
|
||||
"shadowColor": "boxShadowColor",
|
||||
"x": "translateX",
|
||||
"y": "translateY"
|
||||
}
|
||||
|
||||
const breakpointKeys = ["base","sm","md","lg","xl","2xl"]
|
||||
|
||||
const hasShorthand = true
|
||||
|
||||
const resolveShorthand = (prop) => shorthands[prop] || prop
|
||||
|
||||
function transform(prop, value) {
|
||||
const key = resolveShorthand(prop)
|
||||
const propKey = classNameMap[key] || hypenateProperty(key)
|
||||
const className = `${propKey}_${withoutSpace(value)}`
|
||||
return { className }
|
||||
}
|
||||
|
||||
const context = {
|
||||
hash: false,
|
||||
conditions: {
|
||||
shift: sortConditions,
|
||||
finalize: finalizeConditions,
|
||||
breakpoints: { keys: breakpointKeys }
|
||||
},
|
||||
utility: {
|
||||
prefix: undefined,
|
||||
transform,
|
||||
hasShorthand,
|
||||
resolveShorthand,
|
||||
}
|
||||
}
|
||||
|
||||
export const css = createCss(context)
|
||||
css.raw = (styles) => styles
|
||||
|
||||
export const { mergeCss, assignCss } = createMergeCss(context)
|
||||
6
styled-system/css/cva.d.ts
vendored
6
styled-system/css/cva.d.ts
vendored
@@ -1,6 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { RecipeCreatorFn } from '../types/recipe'
|
||||
|
||||
export declare const cva: RecipeCreatorFn
|
||||
|
||||
export type { RecipeVariantProps } from '../types/recipe'
|
||||
@@ -1,63 +0,0 @@
|
||||
import { compact, splitProps } from '../helpers.js';
|
||||
import { css, mergeCss } from './css.js';
|
||||
|
||||
export function cva(config) {
|
||||
const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
|
||||
|
||||
function resolve(props) {
|
||||
const computedVariants = { ...defaultVariants, ...compact(props) }
|
||||
let variantCss = { ...base }
|
||||
for (const [key, value] of Object.entries(computedVariants)) {
|
||||
if (variants[key]?.[value]) {
|
||||
variantCss = mergeCss(variantCss, variants[key][value])
|
||||
}
|
||||
}
|
||||
const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
|
||||
return mergeCss(variantCss, compoundVariantCss)
|
||||
}
|
||||
|
||||
function cvaFn(props) {
|
||||
return css(resolve(props))
|
||||
}
|
||||
|
||||
const variantKeys = Object.keys(variants)
|
||||
|
||||
function splitVariantProps(props) {
|
||||
return splitProps(props, variantKeys)
|
||||
}
|
||||
|
||||
const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
|
||||
|
||||
return Object.assign(cvaFn, {
|
||||
__cva__: true,
|
||||
variantMap,
|
||||
variantKeys,
|
||||
resolve,
|
||||
config,
|
||||
splitVariantProps,
|
||||
})
|
||||
}
|
||||
|
||||
export function getCompoundVariantCss(compoundVariants, variantMap) {
|
||||
let result = {}
|
||||
compoundVariants.forEach((compoundVariant) => {
|
||||
const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
|
||||
if (key === 'css') return true
|
||||
|
||||
const values = Array.isArray(value) ? value : [value]
|
||||
return values.some((value) => variantMap[key] === value)
|
||||
})
|
||||
|
||||
if (isMatching) {
|
||||
result = mergeCss(result, compoundVariant.css)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export function assertCompoundVariant(name, compoundVariants, variants, prop) {
|
||||
if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
|
||||
throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { compact, splitProps } from '../helpers.mjs';
|
||||
import { css, mergeCss } from './css.mjs';
|
||||
|
||||
export function cva(config) {
|
||||
const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
|
||||
|
||||
function resolve(props) {
|
||||
const computedVariants = { ...defaultVariants, ...compact(props) }
|
||||
let variantCss = { ...base }
|
||||
for (const [key, value] of Object.entries(computedVariants)) {
|
||||
if (variants[key]?.[value]) {
|
||||
variantCss = mergeCss(variantCss, variants[key][value])
|
||||
}
|
||||
}
|
||||
const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
|
||||
return mergeCss(variantCss, compoundVariantCss)
|
||||
}
|
||||
|
||||
function cvaFn(props) {
|
||||
return css(resolve(props))
|
||||
}
|
||||
|
||||
const variantKeys = Object.keys(variants)
|
||||
|
||||
function splitVariantProps(props) {
|
||||
return splitProps(props, variantKeys)
|
||||
}
|
||||
|
||||
const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
|
||||
|
||||
return Object.assign(cvaFn, {
|
||||
__cva__: true,
|
||||
variantMap,
|
||||
variantKeys,
|
||||
resolve,
|
||||
config,
|
||||
splitVariantProps,
|
||||
})
|
||||
}
|
||||
|
||||
export function getCompoundVariantCss(compoundVariants, variantMap) {
|
||||
let result = {}
|
||||
compoundVariants.forEach((compoundVariant) => {
|
||||
const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
|
||||
if (key === 'css') return true
|
||||
|
||||
const values = Array.isArray(value) ? value : [value]
|
||||
return values.some((value) => variantMap[key] === value)
|
||||
})
|
||||
|
||||
if (isMatching) {
|
||||
result = mergeCss(result, compoundVariant.css)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export function assertCompoundVariant(name, compoundVariants, variants, prop) {
|
||||
if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
|
||||
throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
|
||||
}
|
||||
}
|
||||
5
styled-system/css/cx.d.ts
vendored
5
styled-system/css/cx.d.ts
vendored
@@ -1,5 +0,0 @@
|
||||
/* eslint-disable */
|
||||
type Argument = string | boolean | null | undefined
|
||||
|
||||
/** Conditionally join classNames into a single string */
|
||||
export declare function cx(...args: Argument[]): string
|
||||
@@ -1,15 +0,0 @@
|
||||
function cx() {
|
||||
let str = '',
|
||||
i = 0,
|
||||
arg
|
||||
|
||||
for (; i < arguments.length; ) {
|
||||
if ((arg = arguments[i++]) && typeof arg === 'string') {
|
||||
str && (str += ' ')
|
||||
str += arg
|
||||
}
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
export { cx }
|
||||
@@ -1,15 +0,0 @@
|
||||
function cx() {
|
||||
let str = '',
|
||||
i = 0,
|
||||
arg
|
||||
|
||||
for (; i < arguments.length; ) {
|
||||
if ((arg = arguments[i++]) && typeof arg === 'string') {
|
||||
str && (str += ' ')
|
||||
str += arg
|
||||
}
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
export { cx }
|
||||
4
styled-system/css/index.d.ts
vendored
4
styled-system/css/index.d.ts
vendored
@@ -1,4 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export * from './css'
|
||||
export * from './cx'
|
||||
export * from './cva'
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './css.js';
|
||||
export * from './cx.js';
|
||||
export * from './cva.js';
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './css.mjs';
|
||||
export * from './cx.mjs';
|
||||
export * from './cva.mjs';
|
||||
@@ -1,36 +0,0 @@
|
||||
@layer base {
|
||||
:root {
|
||||
--made-with-panda: '🐼'
|
||||
}
|
||||
|
||||
*, *::before, *::after, ::backdrop {
|
||||
--blur: ;
|
||||
--brightness: ;
|
||||
--contrast: ;
|
||||
--grayscale: ;
|
||||
--hue-rotate: ;
|
||||
--invert: ;
|
||||
--saturate: ;
|
||||
--sepia: ;
|
||||
--drop-shadow: ;
|
||||
--backdrop-blur: ;
|
||||
--backdrop-brightness: ;
|
||||
--backdrop-contrast: ;
|
||||
--backdrop-grayscale: ;
|
||||
--backdrop-hue-rotate: ;
|
||||
--backdrop-invert: ;
|
||||
--backdrop-opacity: ;
|
||||
--backdrop-saturate: ;
|
||||
--backdrop-sepia: ;
|
||||
--scroll-snap-strictness: proximity;
|
||||
--border-spacing-x: 0;
|
||||
--border-spacing-y: 0;
|
||||
--translate-x: 0;
|
||||
--translate-y: 0;
|
||||
--rotate: 0;
|
||||
--skew-x: 0;
|
||||
--skew-y: 0;
|
||||
--scale-x: 1;
|
||||
--scale-y: 1
|
||||
}
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
// src/assert.ts
|
||||
function isObject(value) {
|
||||
return typeof value === "object" && value != null && !Array.isArray(value);
|
||||
}
|
||||
|
||||
// src/astish.ts
|
||||
var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
|
||||
var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g;
|
||||
var astish = (val, tree = [{}]) => {
|
||||
const block = newRule.exec((val ?? "").replace(ruleClean, ""));
|
||||
if (!block)
|
||||
return tree[0];
|
||||
if (block[4])
|
||||
tree.shift();
|
||||
else if (block[3])
|
||||
tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});
|
||||
else
|
||||
tree[0][block[1]] = block[2];
|
||||
return astish(val, tree);
|
||||
};
|
||||
|
||||
// src/compact.ts
|
||||
function compact(value) {
|
||||
return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
|
||||
}
|
||||
|
||||
// src/condition.ts
|
||||
var isBaseCondition = (v) => v === "base";
|
||||
function filterBaseConditions(c) {
|
||||
return c.slice().filter((v) => !isBaseCondition(v));
|
||||
}
|
||||
|
||||
// src/css-important.ts
|
||||
var importantRegex = /!(important)?$/;
|
||||
function isImportant(value) {
|
||||
return typeof value === "string" ? importantRegex.test(value) : false;
|
||||
}
|
||||
function withoutImportant(value) {
|
||||
return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
|
||||
}
|
||||
function withoutSpace(str) {
|
||||
return typeof str === "string" ? str.replaceAll(" ", "_") : str;
|
||||
}
|
||||
|
||||
// src/hash.ts
|
||||
function toChar(code) {
|
||||
return String.fromCharCode(code + (code > 25 ? 39 : 97));
|
||||
}
|
||||
function toName(code) {
|
||||
let name = "";
|
||||
let x;
|
||||
for (x = Math.abs(code); x > 52; x = x / 52 | 0)
|
||||
name = toChar(x % 52) + name;
|
||||
return toChar(x % 52) + name;
|
||||
}
|
||||
function toPhash(h, x) {
|
||||
let i = x.length;
|
||||
while (i)
|
||||
h = h * 33 ^ x.charCodeAt(--i);
|
||||
return h;
|
||||
}
|
||||
function toHash(value) {
|
||||
return toName(toPhash(5381, value) >>> 0);
|
||||
}
|
||||
|
||||
// src/merge-props.ts
|
||||
function mergeProps(...sources) {
|
||||
const result = {};
|
||||
for (const source of sources) {
|
||||
for (const [key, value] of Object.entries(source)) {
|
||||
if (isObject(value)) {
|
||||
result[key] = mergeProps(result[key] || {}, value);
|
||||
} else {
|
||||
result[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// src/walk-object.ts
|
||||
var isNotNullish = (element) => element != null;
|
||||
function walkObject(target, predicate, options = {}) {
|
||||
const { stop, getKey } = options;
|
||||
function inner(value, path = []) {
|
||||
if (isObject(value) || Array.isArray(value)) {
|
||||
const result = {};
|
||||
for (const [prop, child] of Object.entries(value)) {
|
||||
const key = getKey?.(prop) ?? prop;
|
||||
const childPath = [...path, key];
|
||||
if (stop?.(value, childPath)) {
|
||||
return predicate(value, path);
|
||||
}
|
||||
const next = inner(child, childPath);
|
||||
if (isNotNullish(next)) {
|
||||
result[key] = next;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return predicate(value, path);
|
||||
}
|
||||
return inner(target);
|
||||
}
|
||||
function mapObject(obj, fn) {
|
||||
if (!isObject(obj))
|
||||
return fn(obj);
|
||||
return walkObject(obj, (value) => fn(value));
|
||||
}
|
||||
|
||||
// src/normalize-style-object.ts
|
||||
function toResponsiveObject(values, breakpoints) {
|
||||
return values.reduce((acc, current, index) => {
|
||||
const key = breakpoints[index];
|
||||
if (current != null) {
|
||||
acc[key] = current;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
function normalizeShorthand(styles, context) {
|
||||
const { hasShorthand, resolveShorthand } = context.utility;
|
||||
return walkObject(styles, (v) => v, {
|
||||
getKey: (prop) => {
|
||||
return hasShorthand ? resolveShorthand(prop) : prop;
|
||||
}
|
||||
});
|
||||
}
|
||||
function normalizeStyleObject(styles, context) {
|
||||
const { utility, conditions } = context;
|
||||
const { hasShorthand, resolveShorthand } = utility;
|
||||
return walkObject(
|
||||
styles,
|
||||
(value) => {
|
||||
return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
|
||||
},
|
||||
{
|
||||
stop: (value) => Array.isArray(value),
|
||||
getKey: (prop) => {
|
||||
return hasShorthand ? resolveShorthand(prop) : prop;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// src/classname.ts
|
||||
var fallbackCondition = {
|
||||
shift: (v) => v,
|
||||
finalize: (v) => v,
|
||||
breakpoints: { keys: [] }
|
||||
};
|
||||
var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
|
||||
function createCss(context) {
|
||||
const { utility, hash, conditions: conds = fallbackCondition } = context;
|
||||
const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
|
||||
const hashFn = (conditions, className) => {
|
||||
let result;
|
||||
if (hash) {
|
||||
const baseArray = [...conds.finalize(conditions), className];
|
||||
result = formatClassName(toHash(baseArray.join(":")));
|
||||
} else {
|
||||
const baseArray = [...conds.finalize(conditions), formatClassName(className)];
|
||||
result = baseArray.join(":");
|
||||
}
|
||||
return result;
|
||||
};
|
||||
return (styleObject = {}) => {
|
||||
const normalizedObject = normalizeStyleObject(styleObject, context);
|
||||
const classNames = /* @__PURE__ */ new Set();
|
||||
walkObject(normalizedObject, (value, paths) => {
|
||||
const important = isImportant(value);
|
||||
if (value == null)
|
||||
return;
|
||||
const [prop, ...allConditions] = conds.shift(paths);
|
||||
const conditions = filterBaseConditions(allConditions);
|
||||
const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
|
||||
let className = hashFn(conditions, transformed.className);
|
||||
if (important)
|
||||
className = `${className}!`;
|
||||
classNames.add(className);
|
||||
});
|
||||
return Array.from(classNames).join(" ");
|
||||
};
|
||||
}
|
||||
function compactStyles(...styles) {
|
||||
return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
|
||||
}
|
||||
function createMergeCss(context) {
|
||||
function resolve(styles) {
|
||||
const allStyles = compactStyles(...styles);
|
||||
if (allStyles.length === 1)
|
||||
return allStyles;
|
||||
return allStyles.map((style) => normalizeShorthand(style, context));
|
||||
}
|
||||
function mergeCss(...styles) {
|
||||
return mergeProps(...resolve(styles));
|
||||
}
|
||||
function assignCss(...styles) {
|
||||
return Object.assign({}, ...resolve(styles));
|
||||
}
|
||||
return { mergeCss, assignCss };
|
||||
}
|
||||
|
||||
// src/memo.ts
|
||||
var memo = (fn) => {
|
||||
const cache = /* @__PURE__ */ new Map();
|
||||
const get = (...args) => {
|
||||
const key = JSON.stringify(args);
|
||||
if (cache.has(key)) {
|
||||
return cache.get(key);
|
||||
}
|
||||
const result = fn(...args);
|
||||
cache.set(key, result);
|
||||
return result;
|
||||
};
|
||||
return get;
|
||||
};
|
||||
|
||||
// src/hypenate-property.ts
|
||||
var wordRegex = /([A-Z])/g;
|
||||
var msRegex = /^ms-/;
|
||||
var hypenateProperty = memo((property) => {
|
||||
if (property.startsWith("--"))
|
||||
return property;
|
||||
return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
|
||||
});
|
||||
|
||||
// src/normalize-html.ts
|
||||
var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
|
||||
function convert(key) {
|
||||
return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
|
||||
}
|
||||
function normalizeHTMLProps(props) {
|
||||
return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
|
||||
}
|
||||
normalizeHTMLProps.keys = htmlProps;
|
||||
|
||||
// src/split-props.ts
|
||||
function splitProps(props, ...keys) {
|
||||
const descriptors = Object.getOwnPropertyDescriptors(props);
|
||||
const dKeys = Object.keys(descriptors);
|
||||
const split = (k) => {
|
||||
const clone = {};
|
||||
for (let i = 0; i < k.length; i++) {
|
||||
const key = k[i];
|
||||
if (descriptors[key]) {
|
||||
Object.defineProperty(clone, key, descriptors[key]);
|
||||
delete descriptors[key];
|
||||
}
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
|
||||
return keys.map(fn).concat(split(dKeys));
|
||||
}
|
||||
export {
|
||||
astish,
|
||||
compact,
|
||||
createCss,
|
||||
createMergeCss,
|
||||
filterBaseConditions,
|
||||
hypenateProperty,
|
||||
isBaseCondition,
|
||||
isObject,
|
||||
mapObject,
|
||||
mergeProps,
|
||||
normalizeHTMLProps,
|
||||
splitProps,
|
||||
toHash,
|
||||
walkObject,
|
||||
withoutSpace
|
||||
};
|
||||
|
||||
|
||||
export function __spreadValues(a, b){
|
||||
return { ...a, ...b }
|
||||
}
|
||||
|
||||
export function __objRest(source, exclude){
|
||||
return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
// src/assert.ts
|
||||
function isObject(value) {
|
||||
return typeof value === "object" && value != null && !Array.isArray(value);
|
||||
}
|
||||
|
||||
// src/astish.ts
|
||||
var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
|
||||
var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g;
|
||||
var astish = (val, tree = [{}]) => {
|
||||
const block = newRule.exec((val ?? "").replace(ruleClean, ""));
|
||||
if (!block)
|
||||
return tree[0];
|
||||
if (block[4])
|
||||
tree.shift();
|
||||
else if (block[3])
|
||||
tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});
|
||||
else
|
||||
tree[0][block[1]] = block[2];
|
||||
return astish(val, tree);
|
||||
};
|
||||
|
||||
// src/compact.ts
|
||||
function compact(value) {
|
||||
return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
|
||||
}
|
||||
|
||||
// src/condition.ts
|
||||
var isBaseCondition = (v) => v === "base";
|
||||
function filterBaseConditions(c) {
|
||||
return c.slice().filter((v) => !isBaseCondition(v));
|
||||
}
|
||||
|
||||
// src/css-important.ts
|
||||
var importantRegex = /!(important)?$/;
|
||||
function isImportant(value) {
|
||||
return typeof value === "string" ? importantRegex.test(value) : false;
|
||||
}
|
||||
function withoutImportant(value) {
|
||||
return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
|
||||
}
|
||||
function withoutSpace(str) {
|
||||
return typeof str === "string" ? str.replaceAll(" ", "_") : str;
|
||||
}
|
||||
|
||||
// src/hash.ts
|
||||
function toChar(code) {
|
||||
return String.fromCharCode(code + (code > 25 ? 39 : 97));
|
||||
}
|
||||
function toName(code) {
|
||||
let name = "";
|
||||
let x;
|
||||
for (x = Math.abs(code); x > 52; x = x / 52 | 0)
|
||||
name = toChar(x % 52) + name;
|
||||
return toChar(x % 52) + name;
|
||||
}
|
||||
function toPhash(h, x) {
|
||||
let i = x.length;
|
||||
while (i)
|
||||
h = h * 33 ^ x.charCodeAt(--i);
|
||||
return h;
|
||||
}
|
||||
function toHash(value) {
|
||||
return toName(toPhash(5381, value) >>> 0);
|
||||
}
|
||||
|
||||
// src/merge-props.ts
|
||||
function mergeProps(...sources) {
|
||||
const result = {};
|
||||
for (const source of sources) {
|
||||
for (const [key, value] of Object.entries(source)) {
|
||||
if (isObject(value)) {
|
||||
result[key] = mergeProps(result[key] || {}, value);
|
||||
} else {
|
||||
result[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// src/walk-object.ts
|
||||
var isNotNullish = (element) => element != null;
|
||||
function walkObject(target, predicate, options = {}) {
|
||||
const { stop, getKey } = options;
|
||||
function inner(value, path = []) {
|
||||
if (isObject(value) || Array.isArray(value)) {
|
||||
const result = {};
|
||||
for (const [prop, child] of Object.entries(value)) {
|
||||
const key = getKey?.(prop) ?? prop;
|
||||
const childPath = [...path, key];
|
||||
if (stop?.(value, childPath)) {
|
||||
return predicate(value, path);
|
||||
}
|
||||
const next = inner(child, childPath);
|
||||
if (isNotNullish(next)) {
|
||||
result[key] = next;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return predicate(value, path);
|
||||
}
|
||||
return inner(target);
|
||||
}
|
||||
function mapObject(obj, fn) {
|
||||
if (!isObject(obj))
|
||||
return fn(obj);
|
||||
return walkObject(obj, (value) => fn(value));
|
||||
}
|
||||
|
||||
// src/normalize-style-object.ts
|
||||
function toResponsiveObject(values, breakpoints) {
|
||||
return values.reduce((acc, current, index) => {
|
||||
const key = breakpoints[index];
|
||||
if (current != null) {
|
||||
acc[key] = current;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
function normalizeShorthand(styles, context) {
|
||||
const { hasShorthand, resolveShorthand } = context.utility;
|
||||
return walkObject(styles, (v) => v, {
|
||||
getKey: (prop) => {
|
||||
return hasShorthand ? resolveShorthand(prop) : prop;
|
||||
}
|
||||
});
|
||||
}
|
||||
function normalizeStyleObject(styles, context) {
|
||||
const { utility, conditions } = context;
|
||||
const { hasShorthand, resolveShorthand } = utility;
|
||||
return walkObject(
|
||||
styles,
|
||||
(value) => {
|
||||
return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
|
||||
},
|
||||
{
|
||||
stop: (value) => Array.isArray(value),
|
||||
getKey: (prop) => {
|
||||
return hasShorthand ? resolveShorthand(prop) : prop;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// src/classname.ts
|
||||
var fallbackCondition = {
|
||||
shift: (v) => v,
|
||||
finalize: (v) => v,
|
||||
breakpoints: { keys: [] }
|
||||
};
|
||||
var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
|
||||
function createCss(context) {
|
||||
const { utility, hash, conditions: conds = fallbackCondition } = context;
|
||||
const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
|
||||
const hashFn = (conditions, className) => {
|
||||
let result;
|
||||
if (hash) {
|
||||
const baseArray = [...conds.finalize(conditions), className];
|
||||
result = formatClassName(toHash(baseArray.join(":")));
|
||||
} else {
|
||||
const baseArray = [...conds.finalize(conditions), formatClassName(className)];
|
||||
result = baseArray.join(":");
|
||||
}
|
||||
return result;
|
||||
};
|
||||
return (styleObject = {}) => {
|
||||
const normalizedObject = normalizeStyleObject(styleObject, context);
|
||||
const classNames = /* @__PURE__ */ new Set();
|
||||
walkObject(normalizedObject, (value, paths) => {
|
||||
const important = isImportant(value);
|
||||
if (value == null)
|
||||
return;
|
||||
const [prop, ...allConditions] = conds.shift(paths);
|
||||
const conditions = filterBaseConditions(allConditions);
|
||||
const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
|
||||
let className = hashFn(conditions, transformed.className);
|
||||
if (important)
|
||||
className = `${className}!`;
|
||||
classNames.add(className);
|
||||
});
|
||||
return Array.from(classNames).join(" ");
|
||||
};
|
||||
}
|
||||
function compactStyles(...styles) {
|
||||
return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
|
||||
}
|
||||
function createMergeCss(context) {
|
||||
function resolve(styles) {
|
||||
const allStyles = compactStyles(...styles);
|
||||
if (allStyles.length === 1)
|
||||
return allStyles;
|
||||
return allStyles.map((style) => normalizeShorthand(style, context));
|
||||
}
|
||||
function mergeCss(...styles) {
|
||||
return mergeProps(...resolve(styles));
|
||||
}
|
||||
function assignCss(...styles) {
|
||||
return Object.assign({}, ...resolve(styles));
|
||||
}
|
||||
return { mergeCss, assignCss };
|
||||
}
|
||||
|
||||
// src/memo.ts
|
||||
var memo = (fn) => {
|
||||
const cache = /* @__PURE__ */ new Map();
|
||||
const get = (...args) => {
|
||||
const key = JSON.stringify(args);
|
||||
if (cache.has(key)) {
|
||||
return cache.get(key);
|
||||
}
|
||||
const result = fn(...args);
|
||||
cache.set(key, result);
|
||||
return result;
|
||||
};
|
||||
return get;
|
||||
};
|
||||
|
||||
// src/hypenate-property.ts
|
||||
var wordRegex = /([A-Z])/g;
|
||||
var msRegex = /^ms-/;
|
||||
var hypenateProperty = memo((property) => {
|
||||
if (property.startsWith("--"))
|
||||
return property;
|
||||
return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
|
||||
});
|
||||
|
||||
// src/normalize-html.ts
|
||||
var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
|
||||
function convert(key) {
|
||||
return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
|
||||
}
|
||||
function normalizeHTMLProps(props) {
|
||||
return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
|
||||
}
|
||||
normalizeHTMLProps.keys = htmlProps;
|
||||
|
||||
// src/split-props.ts
|
||||
function splitProps(props, ...keys) {
|
||||
const descriptors = Object.getOwnPropertyDescriptors(props);
|
||||
const dKeys = Object.keys(descriptors);
|
||||
const split = (k) => {
|
||||
const clone = {};
|
||||
for (let i = 0; i < k.length; i++) {
|
||||
const key = k[i];
|
||||
if (descriptors[key]) {
|
||||
Object.defineProperty(clone, key, descriptors[key]);
|
||||
delete descriptors[key];
|
||||
}
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
|
||||
return keys.map(fn).concat(split(dKeys));
|
||||
}
|
||||
export {
|
||||
astish,
|
||||
compact,
|
||||
createCss,
|
||||
createMergeCss,
|
||||
filterBaseConditions,
|
||||
hypenateProperty,
|
||||
isBaseCondition,
|
||||
isObject,
|
||||
mapObject,
|
||||
mergeProps,
|
||||
normalizeHTMLProps,
|
||||
splitProps,
|
||||
toHash,
|
||||
walkObject,
|
||||
withoutSpace
|
||||
};
|
||||
|
||||
|
||||
export function __spreadValues(a, b){
|
||||
return { ...a, ...b }
|
||||
}
|
||||
|
||||
export function __objRest(source, exclude){
|
||||
return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
|
||||
}
|
||||
20
styled-system/patterns/aspect-ratio.d.ts
vendored
20
styled-system/patterns/aspect-ratio.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type AspectRatioProperties = {
|
||||
ratio?: ConditionalValue<number>
|
||||
}
|
||||
|
||||
|
||||
type AspectRatioOptions = AspectRatioProperties & Omit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'>
|
||||
|
||||
interface AspectRatioPatternFn {
|
||||
(options?: AspectRatioOptions): string
|
||||
raw: (options: AspectRatioOptions) => AspectRatioOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const aspectRatio: AspectRatioPatternFn;
|
||||
@@ -1,35 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const aspectRatioConfig = {
|
||||
transform(props, { map }) {
|
||||
const { ratio = 4 / 3, ...rest } = props;
|
||||
return {
|
||||
position: "relative",
|
||||
_before: {
|
||||
content: `""`,
|
||||
display: "block",
|
||||
height: "0",
|
||||
paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
|
||||
},
|
||||
"&>*": {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
position: "absolute",
|
||||
inset: "0",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
},
|
||||
"&>img, &>video": {
|
||||
objectFit: "cover"
|
||||
},
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
|
||||
aspectRatio.raw = (styles) => styles
|
||||
@@ -1,35 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const aspectRatioConfig = {
|
||||
transform(props, { map }) {
|
||||
const { ratio = 4 / 3, ...rest } = props;
|
||||
return {
|
||||
position: "relative",
|
||||
_before: {
|
||||
content: `""`,
|
||||
display: "block",
|
||||
height: "0",
|
||||
paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
|
||||
},
|
||||
"&>*": {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
position: "absolute",
|
||||
inset: "0",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
},
|
||||
"&>img, &>video": {
|
||||
objectFit: "cover"
|
||||
},
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
|
||||
aspectRatio.raw = (styles) => styles
|
||||
20
styled-system/patterns/box.d.ts
vendored
20
styled-system/patterns/box.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type BoxProperties = {
|
||||
|
||||
}
|
||||
|
||||
|
||||
type BoxOptions = BoxProperties & Omit<SystemStyleObject, keyof BoxProperties >
|
||||
|
||||
interface BoxPatternFn {
|
||||
(options?: BoxOptions): string
|
||||
raw: (options: BoxOptions) => BoxOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const box: BoxPatternFn;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const boxConfig = {
|
||||
transform(props) {
|
||||
return props;
|
||||
}}
|
||||
|
||||
export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const box = (styles) => css(getBoxStyle(styles))
|
||||
box.raw = (styles) => styles
|
||||
@@ -1,12 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const boxConfig = {
|
||||
transform(props) {
|
||||
return props;
|
||||
}}
|
||||
|
||||
export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const box = (styles) => css(getBoxStyle(styles))
|
||||
box.raw = (styles) => styles
|
||||
20
styled-system/patterns/center.d.ts
vendored
20
styled-system/patterns/center.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type CenterProperties = {
|
||||
inline?: ConditionalValue<boolean>
|
||||
}
|
||||
|
||||
|
||||
type CenterOptions = CenterProperties & Omit<SystemStyleObject, keyof CenterProperties >
|
||||
|
||||
interface CenterPatternFn {
|
||||
(options?: CenterOptions): string
|
||||
raw: (options: CenterOptions) => CenterOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const center: CenterPatternFn;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const centerConfig = {
|
||||
transform(props) {
|
||||
const { inline, ...rest } = props;
|
||||
return {
|
||||
display: inline ? "inline-flex" : "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const center = (styles) => css(getCenterStyle(styles))
|
||||
center.raw = (styles) => styles
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const centerConfig = {
|
||||
transform(props) {
|
||||
const { inline, ...rest } = props;
|
||||
return {
|
||||
display: inline ? "inline-flex" : "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const center = (styles) => css(getCenterStyle(styles))
|
||||
center.raw = (styles) => styles
|
||||
20
styled-system/patterns/circle.d.ts
vendored
20
styled-system/patterns/circle.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type CircleProperties = {
|
||||
size?: PropertyValue<'width'>
|
||||
}
|
||||
|
||||
|
||||
type CircleOptions = CircleProperties & Omit<SystemStyleObject, keyof CircleProperties >
|
||||
|
||||
interface CirclePatternFn {
|
||||
(options?: CircleOptions): string
|
||||
raw: (options: CircleOptions) => CircleOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const circle: CirclePatternFn;
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const circleConfig = {
|
||||
transform(props) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: "9999px",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const circle = (styles) => css(getCircleStyle(styles))
|
||||
circle.raw = (styles) => styles
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const circleConfig = {
|
||||
transform(props) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: "9999px",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const circle = (styles) => css(getCircleStyle(styles))
|
||||
circle.raw = (styles) => styles
|
||||
20
styled-system/patterns/container.d.ts
vendored
20
styled-system/patterns/container.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type ContainerProperties = {
|
||||
|
||||
}
|
||||
|
||||
|
||||
type ContainerOptions = ContainerProperties & Omit<SystemStyleObject, keyof ContainerProperties >
|
||||
|
||||
interface ContainerPatternFn {
|
||||
(options?: ContainerOptions): string
|
||||
raw: (options: ContainerOptions) => ContainerOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const container: ContainerPatternFn;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const containerConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "relative",
|
||||
maxWidth: "8xl",
|
||||
mx: "auto",
|
||||
px: { base: "4", md: "6", lg: "8" },
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const container = (styles) => css(getContainerStyle(styles))
|
||||
container.raw = (styles) => styles
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const containerConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "relative",
|
||||
maxWidth: "8xl",
|
||||
mx: "auto",
|
||||
px: { base: "4", md: "6", lg: "8" },
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const container = (styles) => css(getContainerStyle(styles))
|
||||
container.raw = (styles) => styles
|
||||
22
styled-system/patterns/divider.d.ts
vendored
22
styled-system/patterns/divider.d.ts
vendored
@@ -1,22 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type DividerProperties = {
|
||||
orientation?: ConditionalValue<"horizontal" | "vertical">
|
||||
thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
|
||||
color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
|
||||
}
|
||||
|
||||
|
||||
type DividerOptions = DividerProperties & Omit<SystemStyleObject, keyof DividerProperties >
|
||||
|
||||
interface DividerPatternFn {
|
||||
(options?: DividerOptions): string
|
||||
raw: (options: DividerOptions) => DividerOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const divider: DividerPatternFn;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const dividerConfig = {
|
||||
transform(props, { map }) {
|
||||
const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
|
||||
return {
|
||||
"--thickness": thickness,
|
||||
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
|
||||
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
|
||||
borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
|
||||
borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
|
||||
borderColor: color,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const divider = (styles) => css(getDividerStyle(styles))
|
||||
divider.raw = (styles) => styles
|
||||
@@ -1,21 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const dividerConfig = {
|
||||
transform(props, { map }) {
|
||||
const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
|
||||
return {
|
||||
"--thickness": thickness,
|
||||
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
|
||||
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
|
||||
borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
|
||||
borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
|
||||
borderColor: color,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const divider = (styles) => css(getDividerStyle(styles))
|
||||
divider.raw = (styles) => styles
|
||||
26
styled-system/patterns/flex.d.ts
vendored
26
styled-system/patterns/flex.d.ts
vendored
@@ -1,26 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type FlexProperties = {
|
||||
align?: PropertyValue<'alignItems'>
|
||||
justify?: PropertyValue<'justifyContent'>
|
||||
direction?: PropertyValue<'flexDirection'>
|
||||
wrap?: PropertyValue<'flexWrap'>
|
||||
basis?: PropertyValue<'flexBasis'>
|
||||
grow?: PropertyValue<'flexGrow'>
|
||||
shrink?: PropertyValue<'flexShrink'>
|
||||
}
|
||||
|
||||
|
||||
type FlexOptions = FlexProperties & Omit<SystemStyleObject, keyof FlexProperties >
|
||||
|
||||
interface FlexPatternFn {
|
||||
(options?: FlexOptions): string
|
||||
raw: (options: FlexOptions) => FlexOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const flex: FlexPatternFn;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const flexConfig = {
|
||||
transform(props) {
|
||||
const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: direction,
|
||||
alignItems: align,
|
||||
justifyContent: justify,
|
||||
flexWrap: wrap2,
|
||||
flexBasis: basis,
|
||||
flexGrow: grow,
|
||||
flexShrink: shrink,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const flex = (styles) => css(getFlexStyle(styles))
|
||||
flex.raw = (styles) => styles
|
||||
@@ -1,23 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const flexConfig = {
|
||||
transform(props) {
|
||||
const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: direction,
|
||||
alignItems: align,
|
||||
justifyContent: justify,
|
||||
flexWrap: wrap2,
|
||||
flexBasis: basis,
|
||||
flexGrow: grow,
|
||||
flexShrink: shrink,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const flex = (styles) => css(getFlexStyle(styles))
|
||||
flex.raw = (styles) => styles
|
||||
23
styled-system/patterns/float.d.ts
vendored
23
styled-system/patterns/float.d.ts
vendored
@@ -1,23 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type FloatProperties = {
|
||||
offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
|
||||
offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
|
||||
offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
|
||||
placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
|
||||
}
|
||||
|
||||
|
||||
type FloatOptions = FloatProperties & Omit<SystemStyleObject, keyof FloatProperties >
|
||||
|
||||
interface FloatPatternFn {
|
||||
(options?: FloatOptions): string
|
||||
raw: (options: FloatOptions) => FloatOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const float: FloatPatternFn;
|
||||
@@ -1,45 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const floatConfig = {
|
||||
transform(props, { map }) {
|
||||
const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
|
||||
return {
|
||||
display: "inline-flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
insetBlockStart: map(placement, (v) => {
|
||||
const [side] = v.split("-");
|
||||
const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
|
||||
return map2[side];
|
||||
}),
|
||||
insetBlockEnd: map(placement, (v) => {
|
||||
const [side] = v.split("-");
|
||||
const map2 = { top: "auto", middle: "50%", bottom: offsetY };
|
||||
return map2[side];
|
||||
}),
|
||||
insetInlineStart: map(placement, (v) => {
|
||||
const [, align] = v.split("-");
|
||||
const map2 = { start: offsetX, center: "50%", end: "auto" };
|
||||
return map2[align];
|
||||
}),
|
||||
insetInlineEnd: map(placement, (v) => {
|
||||
const [, align] = v.split("-");
|
||||
const map2 = { start: "auto", center: "50%", end: offsetX };
|
||||
return map2[align];
|
||||
}),
|
||||
translate: map(placement, (v) => {
|
||||
const [side, align] = v.split("-");
|
||||
const mapX = { start: "-50%", center: "-50%", end: "50%" };
|
||||
const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
|
||||
return `${mapX[align]} ${mapY[side]}`;
|
||||
}),
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const float = (styles) => css(getFloatStyle(styles))
|
||||
float.raw = (styles) => styles
|
||||
@@ -1,45 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const floatConfig = {
|
||||
transform(props, { map }) {
|
||||
const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
|
||||
return {
|
||||
display: "inline-flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
insetBlockStart: map(placement, (v) => {
|
||||
const [side] = v.split("-");
|
||||
const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
|
||||
return map2[side];
|
||||
}),
|
||||
insetBlockEnd: map(placement, (v) => {
|
||||
const [side] = v.split("-");
|
||||
const map2 = { top: "auto", middle: "50%", bottom: offsetY };
|
||||
return map2[side];
|
||||
}),
|
||||
insetInlineStart: map(placement, (v) => {
|
||||
const [, align] = v.split("-");
|
||||
const map2 = { start: offsetX, center: "50%", end: "auto" };
|
||||
return map2[align];
|
||||
}),
|
||||
insetInlineEnd: map(placement, (v) => {
|
||||
const [, align] = v.split("-");
|
||||
const map2 = { start: "auto", center: "50%", end: offsetX };
|
||||
return map2[align];
|
||||
}),
|
||||
translate: map(placement, (v) => {
|
||||
const [side, align] = v.split("-");
|
||||
const mapX = { start: "-50%", center: "-50%", end: "50%" };
|
||||
const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
|
||||
return `${mapX[align]} ${mapY[side]}`;
|
||||
}),
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const float = (styles) => css(getFloatStyle(styles))
|
||||
float.raw = (styles) => styles
|
||||
25
styled-system/patterns/grid-item.d.ts
vendored
25
styled-system/patterns/grid-item.d.ts
vendored
@@ -1,25 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type GridItemProperties = {
|
||||
colSpan?: ConditionalValue<number>
|
||||
rowSpan?: ConditionalValue<number>
|
||||
colStart?: ConditionalValue<number>
|
||||
rowStart?: ConditionalValue<number>
|
||||
colEnd?: ConditionalValue<number>
|
||||
rowEnd?: ConditionalValue<number>
|
||||
}
|
||||
|
||||
|
||||
type GridItemOptions = GridItemProperties & Omit<SystemStyleObject, keyof GridItemProperties >
|
||||
|
||||
interface GridItemPatternFn {
|
||||
(options?: GridItemOptions): string
|
||||
raw: (options: GridItemOptions) => GridItemOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const gridItem: GridItemPatternFn;
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const gridItemConfig = {
|
||||
transform(props, { map }) {
|
||||
const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
|
||||
const spanFn = (v) => v === "auto" ? v : `span ${v}`;
|
||||
return {
|
||||
gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
|
||||
gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
|
||||
gridColumnStart: colStart,
|
||||
gridColumnEnd: colEnd,
|
||||
gridRowStart: rowStart,
|
||||
gridRowEnd: rowEnd,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const gridItem = (styles) => css(getGridItemStyle(styles))
|
||||
gridItem.raw = (styles) => styles
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const gridItemConfig = {
|
||||
transform(props, { map }) {
|
||||
const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
|
||||
const spanFn = (v) => v === "auto" ? v : `span ${v}`;
|
||||
return {
|
||||
gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
|
||||
gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
|
||||
gridColumnStart: colStart,
|
||||
gridColumnEnd: colEnd,
|
||||
gridRowStart: rowStart,
|
||||
gridRowEnd: rowEnd,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const gridItem = (styles) => css(getGridItemStyle(styles))
|
||||
gridItem.raw = (styles) => styles
|
||||
24
styled-system/patterns/grid.d.ts
vendored
24
styled-system/patterns/grid.d.ts
vendored
@@ -1,24 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type GridProperties = {
|
||||
gap?: PropertyValue<'gap'>
|
||||
columnGap?: PropertyValue<'gap'>
|
||||
rowGap?: PropertyValue<'gap'>
|
||||
columns?: ConditionalValue<number>
|
||||
minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
|
||||
}
|
||||
|
||||
|
||||
type GridOptions = GridProperties & Omit<SystemStyleObject, keyof GridProperties >
|
||||
|
||||
interface GridPatternFn {
|
||||
(options?: GridOptions): string
|
||||
raw: (options: GridOptions) => GridOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const grid: GridPatternFn;
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const gridConfig = {
|
||||
transform(props, { map }) {
|
||||
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
|
||||
return {
|
||||
display: "grid",
|
||||
gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
|
||||
gap,
|
||||
columnGap,
|
||||
rowGap,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const grid = (styles) => css(getGridStyle(styles))
|
||||
grid.raw = (styles) => styles
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const gridConfig = {
|
||||
transform(props, { map }) {
|
||||
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
|
||||
return {
|
||||
display: "grid",
|
||||
gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
|
||||
gap,
|
||||
columnGap,
|
||||
rowGap,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const grid = (styles) => css(getGridStyle(styles))
|
||||
grid.raw = (styles) => styles
|
||||
21
styled-system/patterns/hstack.d.ts
vendored
21
styled-system/patterns/hstack.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type HstackProperties = {
|
||||
justify?: PropertyValue<'justifyContent'>
|
||||
gap?: PropertyValue<'gap'>
|
||||
}
|
||||
|
||||
|
||||
type HstackOptions = HstackProperties & Omit<SystemStyleObject, keyof HstackProperties >
|
||||
|
||||
interface HstackPatternFn {
|
||||
(options?: HstackOptions): string
|
||||
raw: (options: HstackOptions) => HstackOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const hstack: HstackPatternFn;
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const hstackConfig = {
|
||||
transform(props) {
|
||||
const { justify, gap = "10px", ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
flexDirection: "row",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const hstack = (styles) => css(getHstackStyle(styles))
|
||||
hstack.raw = (styles) => styles
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const hstackConfig = {
|
||||
transform(props) {
|
||||
const { justify, gap = "10px", ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
flexDirection: "row",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const hstack = (styles) => css(getHstackStyle(styles))
|
||||
hstack.raw = (styles) => styles
|
||||
19
styled-system/patterns/index.d.ts
vendored
19
styled-system/patterns/index.d.ts
vendored
@@ -1,19 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export * from './box'
|
||||
export * from './flex'
|
||||
export * from './stack'
|
||||
export * from './vstack'
|
||||
export * from './hstack'
|
||||
export * from './spacer'
|
||||
export * from './square'
|
||||
export * from './circle'
|
||||
export * from './center'
|
||||
export * from './link-box'
|
||||
export * from './link-overlay'
|
||||
export * from './aspect-ratio'
|
||||
export * from './grid'
|
||||
export * from './grid-item'
|
||||
export * from './wrap'
|
||||
export * from './container'
|
||||
export * from './divider'
|
||||
export * from './float'
|
||||
@@ -1,18 +0,0 @@
|
||||
export * from './box.js';
|
||||
export * from './flex.js';
|
||||
export * from './stack.js';
|
||||
export * from './vstack.js';
|
||||
export * from './hstack.js';
|
||||
export * from './spacer.js';
|
||||
export * from './square.js';
|
||||
export * from './circle.js';
|
||||
export * from './center.js';
|
||||
export * from './link-box.js';
|
||||
export * from './link-overlay.js';
|
||||
export * from './aspect-ratio.js';
|
||||
export * from './grid.js';
|
||||
export * from './grid-item.js';
|
||||
export * from './wrap.js';
|
||||
export * from './container.js';
|
||||
export * from './divider.js';
|
||||
export * from './float.js';
|
||||
@@ -1,18 +0,0 @@
|
||||
export * from './box.mjs';
|
||||
export * from './flex.mjs';
|
||||
export * from './stack.mjs';
|
||||
export * from './vstack.mjs';
|
||||
export * from './hstack.mjs';
|
||||
export * from './spacer.mjs';
|
||||
export * from './square.mjs';
|
||||
export * from './circle.mjs';
|
||||
export * from './center.mjs';
|
||||
export * from './link-box.mjs';
|
||||
export * from './link-overlay.mjs';
|
||||
export * from './aspect-ratio.mjs';
|
||||
export * from './grid.mjs';
|
||||
export * from './grid-item.mjs';
|
||||
export * from './wrap.mjs';
|
||||
export * from './container.mjs';
|
||||
export * from './divider.mjs';
|
||||
export * from './float.mjs';
|
||||
20
styled-system/patterns/link-box.d.ts
vendored
20
styled-system/patterns/link-box.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type LinkBoxProperties = {
|
||||
|
||||
}
|
||||
|
||||
|
||||
type LinkBoxOptions = LinkBoxProperties & Omit<SystemStyleObject, keyof LinkBoxProperties >
|
||||
|
||||
interface LinkBoxPatternFn {
|
||||
(options?: LinkBoxOptions): string
|
||||
raw: (options: LinkBoxOptions) => LinkBoxOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const linkBox: LinkBoxPatternFn;
|
||||
@@ -1,19 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const linkBoxConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "relative",
|
||||
"& :where(a, abbr)": {
|
||||
position: "relative",
|
||||
zIndex: "1"
|
||||
},
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const linkBox = (styles) => css(getLinkBoxStyle(styles))
|
||||
linkBox.raw = (styles) => styles
|
||||
@@ -1,19 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const linkBoxConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "relative",
|
||||
"& :where(a, abbr)": {
|
||||
position: "relative",
|
||||
zIndex: "1"
|
||||
},
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const linkBox = (styles) => css(getLinkBoxStyle(styles))
|
||||
linkBox.raw = (styles) => styles
|
||||
20
styled-system/patterns/link-overlay.d.ts
vendored
20
styled-system/patterns/link-overlay.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type LinkOverlayProperties = {
|
||||
|
||||
}
|
||||
|
||||
|
||||
type LinkOverlayOptions = LinkOverlayProperties & Omit<SystemStyleObject, keyof LinkOverlayProperties >
|
||||
|
||||
interface LinkOverlayPatternFn {
|
||||
(options?: LinkOverlayOptions): string
|
||||
raw: (options: LinkOverlayOptions) => LinkOverlayOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const linkOverlay: LinkOverlayPatternFn;
|
||||
@@ -1,24 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const linkOverlayConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "static",
|
||||
_before: {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
cursor: "inherit",
|
||||
inset: "0",
|
||||
zIndex: "0",
|
||||
...props["_before"]
|
||||
},
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
|
||||
linkOverlay.raw = (styles) => styles
|
||||
@@ -1,24 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const linkOverlayConfig = {
|
||||
transform(props) {
|
||||
return {
|
||||
position: "static",
|
||||
_before: {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
cursor: "inherit",
|
||||
inset: "0",
|
||||
zIndex: "0",
|
||||
...props["_before"]
|
||||
},
|
||||
...props
|
||||
};
|
||||
}}
|
||||
|
||||
export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
|
||||
linkOverlay.raw = (styles) => styles
|
||||
20
styled-system/patterns/spacer.d.ts
vendored
20
styled-system/patterns/spacer.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type SpacerProperties = {
|
||||
size?: ConditionalValue<Tokens["spacing"]>
|
||||
}
|
||||
|
||||
|
||||
type SpacerOptions = SpacerProperties & Omit<SystemStyleObject, keyof SpacerProperties >
|
||||
|
||||
interface SpacerPatternFn {
|
||||
(options?: SpacerOptions): string
|
||||
raw: (options: SpacerOptions) => SpacerOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const spacer: SpacerPatternFn;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const spacerConfig = {
|
||||
transform(props, { map }) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
alignSelf: "stretch",
|
||||
justifySelf: "stretch",
|
||||
flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const spacer = (styles) => css(getSpacerStyle(styles))
|
||||
spacer.raw = (styles) => styles
|
||||
@@ -1,18 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const spacerConfig = {
|
||||
transform(props, { map }) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
alignSelf: "stretch",
|
||||
justifySelf: "stretch",
|
||||
flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const spacer = (styles) => css(getSpacerStyle(styles))
|
||||
spacer.raw = (styles) => styles
|
||||
20
styled-system/patterns/square.d.ts
vendored
20
styled-system/patterns/square.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type SquareProperties = {
|
||||
size?: PropertyValue<'width'>
|
||||
}
|
||||
|
||||
|
||||
type SquareOptions = SquareProperties & Omit<SystemStyleObject, keyof SquareProperties >
|
||||
|
||||
interface SquarePatternFn {
|
||||
(options?: SquareOptions): string
|
||||
raw: (options: SquareOptions) => SquareOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const square: SquarePatternFn;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const squareConfig = {
|
||||
transform(props) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
width: size,
|
||||
height: size,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const square = (styles) => css(getSquareStyle(styles))
|
||||
square.raw = (styles) => styles
|
||||
@@ -1,21 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const squareConfig = {
|
||||
transform(props) {
|
||||
const { size, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: "0 0 auto",
|
||||
width: size,
|
||||
height: size,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const square = (styles) => css(getSquareStyle(styles))
|
||||
square.raw = (styles) => styles
|
||||
23
styled-system/patterns/stack.d.ts
vendored
23
styled-system/patterns/stack.d.ts
vendored
@@ -1,23 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type StackProperties = {
|
||||
align?: PropertyValue<'alignItems'>
|
||||
justify?: PropertyValue<'justifyContent'>
|
||||
direction?: PropertyValue<'flexDirection'>
|
||||
gap?: PropertyValue<'gap'>
|
||||
}
|
||||
|
||||
|
||||
type StackOptions = StackProperties & Omit<SystemStyleObject, keyof StackProperties >
|
||||
|
||||
interface StackPatternFn {
|
||||
(options?: StackOptions): string
|
||||
raw: (options: StackOptions) => StackOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const stack: StackPatternFn;
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const stackConfig = {
|
||||
transform(props) {
|
||||
const { align, justify, direction = "column", gap = "10px", ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: direction,
|
||||
alignItems: align,
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const stack = (styles) => css(getStackStyle(styles))
|
||||
stack.raw = (styles) => styles
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const stackConfig = {
|
||||
transform(props) {
|
||||
const { align, justify, direction = "column", gap = "10px", ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
flexDirection: direction,
|
||||
alignItems: align,
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const stack = (styles) => css(getStackStyle(styles))
|
||||
stack.raw = (styles) => styles
|
||||
21
styled-system/patterns/vstack.d.ts
vendored
21
styled-system/patterns/vstack.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type VstackProperties = {
|
||||
justify?: PropertyValue<'justifyContent'>
|
||||
gap?: PropertyValue<'gap'>
|
||||
}
|
||||
|
||||
|
||||
type VstackOptions = VstackProperties & Omit<SystemStyleObject, keyof VstackProperties >
|
||||
|
||||
interface VstackPatternFn {
|
||||
(options?: VstackOptions): string
|
||||
raw: (options: VstackOptions) => VstackOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const vstack: VstackPatternFn;
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const vstackConfig = {
|
||||
transform(props) {
|
||||
const { justify, gap = "10px", ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
flexDirection: "column",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const vstack = (styles) => css(getVstackStyle(styles))
|
||||
vstack.raw = (styles) => styles
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const vstackConfig = {
|
||||
transform(props) {
|
||||
const { justify, gap = "10px", ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
flexDirection: "column",
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const vstack = (styles) => css(getVstackStyle(styles))
|
||||
vstack.raw = (styles) => styles
|
||||
24
styled-system/patterns/wrap.d.ts
vendored
24
styled-system/patterns/wrap.d.ts
vendored
@@ -1,24 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { SystemStyleObject, ConditionalValue } from '../types'
|
||||
import type { PropertyValue } from '../types/prop-type'
|
||||
import type { Properties } from '../types/csstype'
|
||||
import type { Tokens } from '../tokens'
|
||||
|
||||
export type WrapProperties = {
|
||||
gap?: PropertyValue<'gap'>
|
||||
rowGap?: PropertyValue<'gap'>
|
||||
columnGap?: PropertyValue<'gap'>
|
||||
align?: PropertyValue<'alignItems'>
|
||||
justify?: PropertyValue<'justifyContent'>
|
||||
}
|
||||
|
||||
|
||||
type WrapOptions = WrapProperties & Omit<SystemStyleObject, keyof WrapProperties >
|
||||
|
||||
interface WrapPatternFn {
|
||||
(options?: WrapOptions): string
|
||||
raw: (options: WrapOptions) => WrapOptions
|
||||
}
|
||||
|
||||
|
||||
export declare const wrap: WrapPatternFn;
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.js';
|
||||
import { css } from '../css/index.js';
|
||||
|
||||
const wrapConfig = {
|
||||
transform(props) {
|
||||
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: align,
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
columnGap,
|
||||
rowGap,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const wrap = (styles) => css(getWrapStyle(styles))
|
||||
wrap.raw = (styles) => styles
|
||||
@@ -1,22 +0,0 @@
|
||||
import { mapObject } from '../helpers.mjs';
|
||||
import { css } from '../css/index.mjs';
|
||||
|
||||
const wrapConfig = {
|
||||
transform(props) {
|
||||
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
|
||||
return {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: align,
|
||||
justifyContent: justify,
|
||||
gap,
|
||||
columnGap,
|
||||
rowGap,
|
||||
...rest
|
||||
};
|
||||
}}
|
||||
|
||||
export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
|
||||
|
||||
export const wrap = (styles) => css(getWrapStyle(styles))
|
||||
wrap.raw = (styles) => styles
|
||||
@@ -1,191 +0,0 @@
|
||||
@layer reset {
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: var(--global-color-border, currentColor);
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
--font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
font-family: var(--global-font-body, var(--font-fallback));
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--global-color-placeholder, #9ca3af);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
abbr:where([title]) {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-size: 1em;
|
||||
--font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
|
||||
font-family: var(--global-font-mono, var(--font-fallback));
|
||||
}
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,18 +0,0 @@
|
||||
@layer tokens {
|
||||
:where(:root, :host) {
|
||||
--colors-primary: red;
|
||||
--colors-secondary: #EE0F0F;
|
||||
--fonts-body: system-ui, sans-serif;
|
||||
--breakpoints-sm: 640px;
|
||||
--breakpoints-md: 768px;
|
||||
--breakpoints-lg: 1024px;
|
||||
--breakpoints-xl: 1280px;
|
||||
--breakpoints-2xl: 1536px;
|
||||
--sizes-breakpoint-sm: 640px;
|
||||
--sizes-breakpoint-md: 768px;
|
||||
--sizes-breakpoint-lg: 1024px;
|
||||
--sizes-breakpoint-xl: 1280px;
|
||||
--sizes-breakpoint-2xl: 1536px
|
||||
}
|
||||
}
|
||||
|
||||
9
styled-system/tokens/index.d.ts
vendored
9
styled-system/tokens/index.d.ts
vendored
@@ -1,9 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import type { Token } from './tokens'
|
||||
|
||||
export declare const token: {
|
||||
(path: Token, fallback?: string): string
|
||||
var: (path: Token, fallback?: string) => string
|
||||
}
|
||||
|
||||
export * from './tokens'
|
||||
@@ -1,64 +0,0 @@
|
||||
const tokens = {
|
||||
"colors.primary": {
|
||||
"value": "red",
|
||||
"variable": "var(--colors-primary)"
|
||||
},
|
||||
"colors.secondary": {
|
||||
"value": "#EE0F0F",
|
||||
"variable": "var(--colors-secondary)"
|
||||
},
|
||||
"fonts.body": {
|
||||
"value": "system-ui, sans-serif",
|
||||
"variable": "var(--fonts-body)"
|
||||
},
|
||||
"breakpoints.sm": {
|
||||
"value": "640px",
|
||||
"variable": "var(--breakpoints-sm)"
|
||||
},
|
||||
"breakpoints.md": {
|
||||
"value": "768px",
|
||||
"variable": "var(--breakpoints-md)"
|
||||
},
|
||||
"breakpoints.lg": {
|
||||
"value": "1024px",
|
||||
"variable": "var(--breakpoints-lg)"
|
||||
},
|
||||
"breakpoints.xl": {
|
||||
"value": "1280px",
|
||||
"variable": "var(--breakpoints-xl)"
|
||||
},
|
||||
"breakpoints.2xl": {
|
||||
"value": "1536px",
|
||||
"variable": "var(--breakpoints-2xl)"
|
||||
},
|
||||
"sizes.breakpoint-sm": {
|
||||
"value": "640px",
|
||||
"variable": "var(--sizes-breakpoint-sm)"
|
||||
},
|
||||
"sizes.breakpoint-md": {
|
||||
"value": "768px",
|
||||
"variable": "var(--sizes-breakpoint-md)"
|
||||
},
|
||||
"sizes.breakpoint-lg": {
|
||||
"value": "1024px",
|
||||
"variable": "var(--sizes-breakpoint-lg)"
|
||||
},
|
||||
"sizes.breakpoint-xl": {
|
||||
"value": "1280px",
|
||||
"variable": "var(--sizes-breakpoint-xl)"
|
||||
},
|
||||
"sizes.breakpoint-2xl": {
|
||||
"value": "1536px",
|
||||
"variable": "var(--sizes-breakpoint-2xl)"
|
||||
}
|
||||
}
|
||||
|
||||
export function token(path, fallback) {
|
||||
return tokens[path]?.value || fallback
|
||||
}
|
||||
|
||||
function tokenVar(path, fallback) {
|
||||
return tokens[path]?.variable || fallback
|
||||
}
|
||||
|
||||
token.var = tokenVar
|
||||
@@ -1,64 +0,0 @@
|
||||
const tokens = {
|
||||
"colors.primary": {
|
||||
"value": "#0FEE0F",
|
||||
"variable": "var(--colors-primary)"
|
||||
},
|
||||
"colors.secondary": {
|
||||
"value": "#EE0F0F",
|
||||
"variable": "var(--colors-secondary)"
|
||||
},
|
||||
"fonts.body": {
|
||||
"value": "system-ui, sans-serif",
|
||||
"variable": "var(--fonts-body)"
|
||||
},
|
||||
"breakpoints.sm": {
|
||||
"value": "640px",
|
||||
"variable": "var(--breakpoints-sm)"
|
||||
},
|
||||
"breakpoints.md": {
|
||||
"value": "768px",
|
||||
"variable": "var(--breakpoints-md)"
|
||||
},
|
||||
"breakpoints.lg": {
|
||||
"value": "1024px",
|
||||
"variable": "var(--breakpoints-lg)"
|
||||
},
|
||||
"breakpoints.xl": {
|
||||
"value": "1280px",
|
||||
"variable": "var(--breakpoints-xl)"
|
||||
},
|
||||
"breakpoints.2xl": {
|
||||
"value": "1536px",
|
||||
"variable": "var(--breakpoints-2xl)"
|
||||
},
|
||||
"sizes.breakpoint-sm": {
|
||||
"value": "640px",
|
||||
"variable": "var(--sizes-breakpoint-sm)"
|
||||
},
|
||||
"sizes.breakpoint-md": {
|
||||
"value": "768px",
|
||||
"variable": "var(--sizes-breakpoint-md)"
|
||||
},
|
||||
"sizes.breakpoint-lg": {
|
||||
"value": "1024px",
|
||||
"variable": "var(--sizes-breakpoint-lg)"
|
||||
},
|
||||
"sizes.breakpoint-xl": {
|
||||
"value": "1280px",
|
||||
"variable": "var(--sizes-breakpoint-xl)"
|
||||
},
|
||||
"sizes.breakpoint-2xl": {
|
||||
"value": "1536px",
|
||||
"variable": "var(--sizes-breakpoint-2xl)"
|
||||
}
|
||||
}
|
||||
|
||||
export function token(path, fallback) {
|
||||
return tokens[path]?.value || fallback
|
||||
}
|
||||
|
||||
function tokenVar(path, fallback) {
|
||||
return tokens[path]?.variable || fallback
|
||||
}
|
||||
|
||||
token.var = tokenVar
|
||||
@@ -1,28 +0,0 @@
|
||||
@layer tokens {
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
@keyframes ping {
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8,0,1,1)
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0,0,0.2,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user