2021-11-23 08:01:46 +00:00
|
|
|
const colors = require("tailwindcss/colors");
|
|
|
|
|
|
2022-06-21 13:57:34 +00:00
|
|
|
// TODO: replace the colors in line with Tailwind 3 naming
|
2021-11-23 08:01:46 +00:00
|
|
|
module.exports = {
|
2022-06-21 13:57:34 +00:00
|
|
|
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
2021-11-23 08:01:46 +00:00
|
|
|
theme: {
|
2022-06-21 13:57:34 +00:00
|
|
|
extend: {
|
|
|
|
|
screens: {
|
|
|
|
|
xs: "320px",
|
|
|
|
|
sm: "640px",
|
|
|
|
|
md: "768px",
|
|
|
|
|
lg: "1024px",
|
|
|
|
|
xl: "1280px",
|
|
|
|
|
"2xl": "1536px",
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
2022-06-21 13:57:34 +00:00
|
|
|
colors: {
|
|
|
|
|
current: "currentColor",
|
|
|
|
|
// https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases
|
|
|
|
|
green: colors.emerald,
|
|
|
|
|
yellow: colors.amber,
|
|
|
|
|
purple: colors.violet,
|
|
|
|
|
// https://tailwindcss.com/docs/upgrade-guide#renamed-gray-scales
|
|
|
|
|
gray: colors.zinc,
|
|
|
|
|
trueGray: colors.neutral,
|
|
|
|
|
warmGray: colors.stone,
|
|
|
|
|
|
|
|
|
|
primary: {
|
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
|
|
|
50: "#FFFFFF",
|
|
|
|
|
100: "#FFF5F0",
|
|
|
|
|
200: "#FDD2BF",
|
|
|
|
|
300: "#FBAF8E",
|
|
|
|
|
400: "#FA8D5C",
|
|
|
|
|
500: "#F86A2B",
|
|
|
|
|
600: "#E84D08",
|
|
|
|
|
700: "#B73C06",
|
|
|
|
|
800: "#862C04",
|
|
|
|
|
900: "#541C03",
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
|
|
|
|
},
|
2022-06-21 13:57:34 +00:00
|
|
|
spacing: {
|
|
|
|
|
px: "1px",
|
|
|
|
|
0: "0px",
|
|
|
|
|
0.5: "0.125rem",
|
|
|
|
|
1: "0.25rem",
|
|
|
|
|
1.5: "0.375rem",
|
|
|
|
|
2: "0.5rem",
|
|
|
|
|
2.5: "0.625rem",
|
|
|
|
|
3: "0.75rem",
|
|
|
|
|
3.5: "0.875rem",
|
|
|
|
|
4: "1rem",
|
|
|
|
|
5: "1.25rem",
|
|
|
|
|
6: "1.5rem",
|
|
|
|
|
7: "1.75rem",
|
|
|
|
|
8: "2rem",
|
|
|
|
|
9: "2.25rem",
|
|
|
|
|
10: "2.5rem",
|
|
|
|
|
11: "2.75rem",
|
|
|
|
|
12: "3rem",
|
|
|
|
|
14: "3.5rem",
|
|
|
|
|
16: "4rem",
|
|
|
|
|
20: "5rem",
|
|
|
|
|
24: "6rem",
|
|
|
|
|
28: "7rem",
|
|
|
|
|
32: "8rem",
|
|
|
|
|
36: "9rem",
|
2023-04-07 13:51:35 +00:00
|
|
|
39: "9.75rem",
|
2022-06-21 13:57:34 +00:00
|
|
|
40: "10rem",
|
|
|
|
|
44: "11rem",
|
|
|
|
|
48: "12rem",
|
|
|
|
|
52: "13rem",
|
|
|
|
|
56: "14rem",
|
|
|
|
|
60: "15rem",
|
|
|
|
|
64: "16rem",
|
|
|
|
|
72: "18rem",
|
|
|
|
|
80: "20rem",
|
|
|
|
|
96: "24rem",
|
|
|
|
|
100: "28rem",
|
|
|
|
|
104: "32rem",
|
|
|
|
|
108: "26rem",
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
2022-06-21 13:57:34 +00:00
|
|
|
animation: {
|
|
|
|
|
none: "none",
|
|
|
|
|
spin: "spin 1s linear infinite",
|
|
|
|
|
ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
|
|
|
|
|
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
|
|
|
bounce: "bounce 1s infinite",
|
|
|
|
|
},
|
|
|
|
|
backdropBlur: (theme) => theme("blur"),
|
|
|
|
|
backdropBrightness: (theme) => theme("brightness"),
|
|
|
|
|
backdropContrast: (theme) => theme("contrast"),
|
|
|
|
|
backdropGrayscale: (theme) => theme("grayscale"),
|
|
|
|
|
backdropHueRotate: (theme) => theme("hueRotate"),
|
|
|
|
|
backdropInvert: (theme) => theme("invert"),
|
|
|
|
|
backdropOpacity: (theme) => theme("opacity"),
|
|
|
|
|
backdropSaturate: (theme) => theme("saturate"),
|
|
|
|
|
backdropSepia: (theme) => theme("sepia"),
|
|
|
|
|
backgroundColor: (theme) => theme("colors"),
|
|
|
|
|
backgroundImage: {
|
|
|
|
|
none: "none",
|
|
|
|
|
"gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-tr":
|
|
|
|
|
"linear-gradient(to top right, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-br":
|
|
|
|
|
"linear-gradient(to bottom right, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-bl":
|
|
|
|
|
"linear-gradient(to bottom left, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
|
|
|
|
|
"gradient-to-tl":
|
|
|
|
|
"linear-gradient(to top left, var(--tw-gradient-stops))",
|
|
|
|
|
},
|
|
|
|
|
backgroundOpacity: (theme) => theme("opacity"),
|
|
|
|
|
backgroundPosition: {
|
|
|
|
|
bottom: "bottom",
|
|
|
|
|
center: "center",
|
|
|
|
|
left: "left",
|
|
|
|
|
"left-bottom": "left bottom",
|
|
|
|
|
"left-top": "left top",
|
|
|
|
|
right: "right",
|
|
|
|
|
"right-bottom": "right bottom",
|
|
|
|
|
"right-top": "right top",
|
|
|
|
|
top: "top",
|
|
|
|
|
},
|
|
|
|
|
backgroundSize: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
cover: "cover",
|
|
|
|
|
contain: "contain",
|
|
|
|
|
},
|
|
|
|
|
blur: {
|
|
|
|
|
0: "0",
|
|
|
|
|
none: "0",
|
|
|
|
|
sm: "4px",
|
|
|
|
|
DEFAULT: "8px",
|
|
|
|
|
md: "12px",
|
|
|
|
|
lg: "16px",
|
|
|
|
|
xl: "24px",
|
|
|
|
|
"2xl": "40px",
|
|
|
|
|
"3xl": "64px",
|
|
|
|
|
},
|
|
|
|
|
brightness: {
|
|
|
|
|
0: "0",
|
|
|
|
|
50: ".5",
|
|
|
|
|
75: ".75",
|
|
|
|
|
90: ".9",
|
|
|
|
|
95: ".95",
|
|
|
|
|
100: "1",
|
|
|
|
|
105: "1.05",
|
|
|
|
|
110: "1.1",
|
|
|
|
|
125: "1.25",
|
|
|
|
|
150: "1.5",
|
|
|
|
|
200: "2",
|
|
|
|
|
},
|
|
|
|
|
borderColor: (theme) => ({
|
|
|
|
|
...theme("colors"),
|
2023-05-19 18:37:06 +00:00
|
|
|
DEFAULT: "#CDD5DF",
|
2022-06-21 13:57:34 +00:00
|
|
|
}),
|
|
|
|
|
borderOpacity: (theme) => theme("opacity"),
|
|
|
|
|
borderRadius: {
|
|
|
|
|
none: "0px",
|
|
|
|
|
sm: "0.125rem",
|
2023-05-19 18:37:06 +00:00
|
|
|
DEFAULT: "4px",
|
2022-06-21 13:57:34 +00:00
|
|
|
md: "0.375rem",
|
|
|
|
|
lg: "0.5rem",
|
|
|
|
|
xl: "0.75rem",
|
|
|
|
|
"2xl": "1rem",
|
|
|
|
|
"3xl": "1.5rem",
|
|
|
|
|
full: "9999px",
|
|
|
|
|
},
|
|
|
|
|
borderWidth: {
|
|
|
|
|
DEFAULT: "1px",
|
|
|
|
|
0: "0px",
|
|
|
|
|
2: "2px",
|
|
|
|
|
4: "4px",
|
|
|
|
|
8: "8px",
|
|
|
|
|
},
|
|
|
|
|
boxShadow: {
|
|
|
|
|
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
|
|
|
DEFAULT:
|
|
|
|
|
"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
|
|
|
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
|
|
|
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
|
|
|
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
2022-06-21 13:57:34 +00:00
|
|
|
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
|
|
|
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
|
|
|
|
|
none: "none",
|
|
|
|
|
},
|
|
|
|
|
caretColor: (theme) => theme("colors"),
|
|
|
|
|
contrast: {
|
|
|
|
|
0: "0",
|
|
|
|
|
50: ".5",
|
|
|
|
|
75: ".75",
|
|
|
|
|
100: "1",
|
|
|
|
|
125: "1.25",
|
|
|
|
|
150: "1.5",
|
|
|
|
|
200: "2",
|
|
|
|
|
},
|
|
|
|
|
container: {},
|
|
|
|
|
content: {
|
|
|
|
|
none: "none",
|
|
|
|
|
},
|
|
|
|
|
cursor: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
default: "default",
|
|
|
|
|
pointer: "pointer",
|
|
|
|
|
wait: "wait",
|
|
|
|
|
text: "text",
|
|
|
|
|
move: "move",
|
|
|
|
|
help: "help",
|
|
|
|
|
grab: "grab",
|
|
|
|
|
grabbing: "grabbing",
|
|
|
|
|
"not-allowed": "not-allowed",
|
|
|
|
|
"ew-resize": "ew-resize",
|
|
|
|
|
"ns-resize": "ns-resize",
|
|
|
|
|
},
|
|
|
|
|
divideColor: (theme) => theme("borderColor"),
|
|
|
|
|
divideOpacity: (theme) => theme("borderOpacity"),
|
|
|
|
|
divideWidth: (theme) => theme("borderWidth"),
|
|
|
|
|
dropShadow: {
|
|
|
|
|
sm: "0 1px 1px rgba(0,0,0,0.05)",
|
|
|
|
|
DEFAULT: [
|
|
|
|
|
"0 1px 2px rgba(0, 0, 0, 0.1)",
|
|
|
|
|
"0 1px 1px rgba(0, 0, 0, 0.06)",
|
|
|
|
|
],
|
|
|
|
|
md: ["0 4px 3px rgba(0, 0, 0, 0.07)", "0 2px 2px rgba(0, 0, 0, 0.06)"],
|
|
|
|
|
lg: ["0 10px 8px rgba(0, 0, 0, 0.04)", "0 4px 3px rgba(0, 0, 0, 0.1)"],
|
|
|
|
|
xl: [
|
|
|
|
|
"0 20px 13px rgba(0, 0, 0, 0.03)",
|
|
|
|
|
"0 8px 5px rgba(0, 0, 0, 0.08)",
|
|
|
|
|
],
|
|
|
|
|
"2xl": "0 25px 25px rgba(0, 0, 0, 0.15)",
|
|
|
|
|
none: "0 0 #0000",
|
|
|
|
|
},
|
|
|
|
|
fill: { current: "currentColor" },
|
|
|
|
|
grayscale: {
|
|
|
|
|
0: "0",
|
|
|
|
|
DEFAULT: "100%",
|
|
|
|
|
},
|
|
|
|
|
hueRotate: {
|
|
|
|
|
"-180": "-180deg",
|
|
|
|
|
"-90": "-90deg",
|
|
|
|
|
"-60": "-60deg",
|
|
|
|
|
"-30": "-30deg",
|
|
|
|
|
"-15": "-15deg",
|
|
|
|
|
0: "0deg",
|
|
|
|
|
15: "15deg",
|
|
|
|
|
30: "30deg",
|
|
|
|
|
60: "60deg",
|
|
|
|
|
90: "90deg",
|
|
|
|
|
180: "180deg",
|
|
|
|
|
},
|
|
|
|
|
invert: {
|
|
|
|
|
0: "0",
|
|
|
|
|
DEFAULT: "100%",
|
|
|
|
|
},
|
|
|
|
|
flex: {
|
|
|
|
|
1: "1 1 0%",
|
|
|
|
|
auto: "1 1 auto",
|
|
|
|
|
initial: "0 1 auto",
|
|
|
|
|
none: "none",
|
|
|
|
|
},
|
|
|
|
|
flexGrow: {
|
|
|
|
|
0: "0",
|
|
|
|
|
DEFAULT: "1",
|
|
|
|
|
},
|
|
|
|
|
flexShrink: {
|
|
|
|
|
0: "0",
|
|
|
|
|
DEFAULT: "1",
|
|
|
|
|
},
|
|
|
|
|
fontFamily: {
|
|
|
|
|
sans: [
|
|
|
|
|
"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"',
|
|
|
|
|
],
|
|
|
|
|
serif: [
|
|
|
|
|
"ui-serif",
|
|
|
|
|
"Georgia",
|
|
|
|
|
"Cambria",
|
|
|
|
|
'"Times New Roman"',
|
|
|
|
|
"Times",
|
|
|
|
|
"serif",
|
|
|
|
|
],
|
|
|
|
|
mono: [
|
|
|
|
|
"ui-monospace",
|
|
|
|
|
"SFMono-Regular",
|
|
|
|
|
"Menlo",
|
|
|
|
|
"Monaco",
|
|
|
|
|
"Consolas",
|
|
|
|
|
'"Liberation Mono"',
|
|
|
|
|
'"Courier New"',
|
|
|
|
|
"monospace",
|
|
|
|
|
],
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
2022-06-21 13:57:34 +00:00
|
|
|
fontSize: {
|
|
|
|
|
xs: ["0.75rem", { lineHeight: "1rem" }],
|
|
|
|
|
sm: ["0.875rem", { lineHeight: "1.25rem" }],
|
|
|
|
|
base: ["1rem", { lineHeight: "1.5rem" }],
|
|
|
|
|
lg: ["1.125rem", { lineHeight: "1.75rem" }],
|
|
|
|
|
xl: ["1.25rem", { lineHeight: "1.75rem" }],
|
|
|
|
|
"2xl": ["1.5rem", { lineHeight: "2rem" }],
|
|
|
|
|
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
|
|
|
|
|
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
|
|
|
|
|
"5xl": ["3rem", { lineHeight: "1" }],
|
|
|
|
|
"6xl": ["3.75rem", { lineHeight: "1" }],
|
|
|
|
|
"7xl": ["4.5rem", { lineHeight: "1" }],
|
|
|
|
|
"8xl": ["6rem", { lineHeight: "1" }],
|
|
|
|
|
"9xl": ["8rem", { lineHeight: "1" }],
|
|
|
|
|
},
|
|
|
|
|
fontWeight: {
|
|
|
|
|
thin: "100",
|
|
|
|
|
extralight: "200",
|
|
|
|
|
light: "300",
|
|
|
|
|
normal: "400",
|
|
|
|
|
medium: "500",
|
|
|
|
|
semibold: "600",
|
|
|
|
|
bold: "700",
|
|
|
|
|
extrabold: "800",
|
|
|
|
|
black: "900",
|
|
|
|
|
},
|
|
|
|
|
gap: (theme) => theme("spacing"),
|
|
|
|
|
gradientColorStops: (theme) => theme("colors"),
|
|
|
|
|
gridAutoColumns: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
min: "min-content",
|
|
|
|
|
max: "max-content",
|
|
|
|
|
fr: "minmax(0, 1fr)",
|
|
|
|
|
},
|
|
|
|
|
gridAutoRows: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
min: "min-content",
|
|
|
|
|
max: "max-content",
|
|
|
|
|
fr: "minmax(0, 1fr)",
|
|
|
|
|
},
|
|
|
|
|
gridColumn: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
"span-1": "span 1 / span 1",
|
|
|
|
|
"span-2": "span 2 / span 2",
|
|
|
|
|
"span-3": "span 3 / span 3",
|
|
|
|
|
"span-4": "span 4 / span 4",
|
|
|
|
|
"span-5": "span 5 / span 5",
|
|
|
|
|
"span-6": "span 6 / span 6",
|
|
|
|
|
"span-7": "span 7 / span 7",
|
|
|
|
|
"span-8": "span 8 / span 8",
|
|
|
|
|
"span-9": "span 9 / span 9",
|
|
|
|
|
"span-10": "span 10 / span 10",
|
|
|
|
|
"span-11": "span 11 / span 11",
|
|
|
|
|
"span-12": "span 12 / span 12",
|
|
|
|
|
"span-full": "1 / -1",
|
|
|
|
|
},
|
|
|
|
|
gridColumnEnd: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
1: "1",
|
|
|
|
|
2: "2",
|
|
|
|
|
3: "3",
|
|
|
|
|
4: "4",
|
|
|
|
|
5: "5",
|
|
|
|
|
6: "6",
|
|
|
|
|
7: "7",
|
|
|
|
|
8: "8",
|
|
|
|
|
9: "9",
|
|
|
|
|
10: "10",
|
|
|
|
|
11: "11",
|
|
|
|
|
12: "12",
|
|
|
|
|
13: "13",
|
|
|
|
|
},
|
|
|
|
|
gridColumnStart: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
1: "1",
|
|
|
|
|
2: "2",
|
|
|
|
|
3: "3",
|
|
|
|
|
4: "4",
|
|
|
|
|
5: "5",
|
|
|
|
|
6: "6",
|
|
|
|
|
7: "7",
|
|
|
|
|
8: "8",
|
|
|
|
|
9: "9",
|
|
|
|
|
10: "10",
|
|
|
|
|
11: "11",
|
|
|
|
|
12: "12",
|
|
|
|
|
13: "13",
|
|
|
|
|
},
|
|
|
|
|
gridRow: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
"span-1": "span 1 / span 1",
|
|
|
|
|
"span-2": "span 2 / span 2",
|
|
|
|
|
"span-3": "span 3 / span 3",
|
|
|
|
|
"span-4": "span 4 / span 4",
|
|
|
|
|
"span-5": "span 5 / span 5",
|
|
|
|
|
"span-6": "span 6 / span 6",
|
|
|
|
|
"span-full": "1 / -1",
|
|
|
|
|
},
|
|
|
|
|
gridRowStart: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
1: "1",
|
|
|
|
|
2: "2",
|
|
|
|
|
3: "3",
|
|
|
|
|
4: "4",
|
|
|
|
|
5: "5",
|
|
|
|
|
6: "6",
|
|
|
|
|
7: "7",
|
|
|
|
|
},
|
|
|
|
|
gridRowEnd: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
1: "1",
|
|
|
|
|
2: "2",
|
|
|
|
|
3: "3",
|
|
|
|
|
4: "4",
|
|
|
|
|
5: "5",
|
|
|
|
|
6: "6",
|
|
|
|
|
7: "7",
|
|
|
|
|
},
|
|
|
|
|
gridTemplateColumns: {
|
|
|
|
|
none: "none",
|
|
|
|
|
1: "repeat(1, minmax(0, 1fr))",
|
|
|
|
|
2: "repeat(2, minmax(0, 1fr))",
|
|
|
|
|
3: "repeat(3, minmax(0, 1fr))",
|
|
|
|
|
4: "repeat(4, minmax(0, 1fr))",
|
|
|
|
|
5: "repeat(5, minmax(0, 1fr))",
|
|
|
|
|
6: "repeat(6, minmax(0, 1fr))",
|
|
|
|
|
7: "repeat(7, minmax(0, 1fr))",
|
|
|
|
|
8: "repeat(8, minmax(0, 1fr))",
|
|
|
|
|
9: "repeat(9, minmax(0, 1fr))",
|
|
|
|
|
10: "repeat(10, minmax(0, 1fr))",
|
|
|
|
|
11: "repeat(11, minmax(0, 1fr))",
|
|
|
|
|
12: "repeat(12, minmax(0, 1fr))",
|
|
|
|
|
},
|
|
|
|
|
gridTemplateRows: {
|
|
|
|
|
none: "none",
|
|
|
|
|
1: "repeat(1, minmax(0, 1fr))",
|
|
|
|
|
2: "repeat(2, minmax(0, 1fr))",
|
|
|
|
|
3: "repeat(3, minmax(0, 1fr))",
|
|
|
|
|
4: "repeat(4, minmax(0, 1fr))",
|
|
|
|
|
5: "repeat(5, minmax(0, 1fr))",
|
|
|
|
|
6: "repeat(6, minmax(0, 1fr))",
|
|
|
|
|
},
|
|
|
|
|
height: (theme) => ({
|
|
|
|
|
auto: "auto",
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
"1/2": "50%",
|
|
|
|
|
"1/3": "33.333333%",
|
|
|
|
|
"2/3": "66.666667%",
|
|
|
|
|
"1/4": "25%",
|
|
|
|
|
"2/4": "50%",
|
|
|
|
|
"3/4": "75%",
|
|
|
|
|
"1/5": "20%",
|
|
|
|
|
"2/5": "40%",
|
|
|
|
|
"3/5": "60%",
|
|
|
|
|
"4/5": "80%",
|
|
|
|
|
"1/6": "16.666667%",
|
|
|
|
|
"2/6": "33.333333%",
|
|
|
|
|
"3/6": "50%",
|
|
|
|
|
"4/6": "66.666667%",
|
|
|
|
|
"5/6": "83.333333%",
|
|
|
|
|
full: "100%",
|
|
|
|
|
screen: "100vh",
|
|
|
|
|
}),
|
|
|
|
|
inset: (theme, { negative }) => ({
|
|
|
|
|
auto: "auto",
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
...negative(theme("spacing")),
|
|
|
|
|
"1/2": "50%",
|
|
|
|
|
"1/3": "33.333333%",
|
|
|
|
|
"2/3": "66.666667%",
|
|
|
|
|
"1/4": "25%",
|
|
|
|
|
"2/4": "50%",
|
|
|
|
|
"3/4": "75%",
|
|
|
|
|
full: "100%",
|
|
|
|
|
"-1/2": "-50%",
|
|
|
|
|
"-1/3": "-33.333333%",
|
|
|
|
|
"-2/3": "-66.666667%",
|
|
|
|
|
"-1/4": "-25%",
|
|
|
|
|
"-2/4": "-50%",
|
|
|
|
|
"-3/4": "-75%",
|
|
|
|
|
"-full": "-100%",
|
|
|
|
|
}),
|
|
|
|
|
keyframes: {
|
|
|
|
|
spin: {
|
|
|
|
|
to: {
|
|
|
|
|
transform: "rotate(360deg)",
|
|
|
|
|
},
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
2022-06-21 13:57:34 +00:00
|
|
|
ping: {
|
|
|
|
|
"75%, 100%": {
|
|
|
|
|
transform: "scale(2)",
|
|
|
|
|
opacity: "0",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
pulse: {
|
|
|
|
|
"50%": {
|
|
|
|
|
opacity: ".5",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
bounce: {
|
|
|
|
|
"0%, 100%": {
|
|
|
|
|
transform: "translateY(-25%)",
|
|
|
|
|
animationTimingFunction: "cubic-bezier(0.8,0,1,1)",
|
|
|
|
|
},
|
|
|
|
|
"50%": {
|
|
|
|
|
transform: "none",
|
|
|
|
|
animationTimingFunction: "cubic-bezier(0,0,0.2,1)",
|
|
|
|
|
},
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
|
|
|
|
},
|
2022-06-21 13:57:34 +00:00
|
|
|
letterSpacing: {
|
|
|
|
|
tighter: "-0.05em",
|
|
|
|
|
tight: "-0.025em",
|
|
|
|
|
normal: "0em",
|
|
|
|
|
wide: "0.025em",
|
|
|
|
|
wider: "0.05em",
|
|
|
|
|
widest: "0.1em",
|
|
|
|
|
},
|
|
|
|
|
lineHeight: {
|
|
|
|
|
none: "1",
|
|
|
|
|
tight: "1.25",
|
|
|
|
|
snug: "1.375",
|
|
|
|
|
normal: "1.5",
|
|
|
|
|
relaxed: "1.625",
|
|
|
|
|
loose: "2",
|
|
|
|
|
3: ".75rem",
|
|
|
|
|
4: "1rem",
|
|
|
|
|
5: "1.25rem",
|
|
|
|
|
6: "1.5rem",
|
|
|
|
|
7: "1.75rem",
|
|
|
|
|
8: "2rem",
|
|
|
|
|
9: "2.25rem",
|
|
|
|
|
10: "2.5rem",
|
|
|
|
|
},
|
|
|
|
|
listStyleType: {
|
|
|
|
|
none: "none",
|
|
|
|
|
disc: "disc",
|
|
|
|
|
decimal: "decimal",
|
|
|
|
|
},
|
|
|
|
|
margin: (theme, { negative }) => ({
|
|
|
|
|
auto: "auto",
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
...negative(theme("spacing")),
|
|
|
|
|
}),
|
|
|
|
|
maxHeight: (theme) => ({
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
full: "100%",
|
|
|
|
|
screen: "100vh",
|
|
|
|
|
}),
|
|
|
|
|
maxWidth: (theme, { breakpoints }) => ({
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
none: "none",
|
|
|
|
|
0: "0rem",
|
|
|
|
|
xs: "20rem",
|
|
|
|
|
sm: "24rem",
|
|
|
|
|
md: "28rem",
|
|
|
|
|
lg: "32rem",
|
|
|
|
|
xl: "36rem",
|
|
|
|
|
"2xl": "42rem",
|
|
|
|
|
"3xl": "48rem",
|
|
|
|
|
"4xl": "56rem",
|
|
|
|
|
"5xl": "64rem",
|
|
|
|
|
"6xl": "72rem",
|
|
|
|
|
"7xl": "80rem",
|
|
|
|
|
full: "100%",
|
|
|
|
|
min: "min-content",
|
|
|
|
|
max: "max-content",
|
|
|
|
|
prose: "65ch",
|
|
|
|
|
...breakpoints(theme("screens")),
|
|
|
|
|
}),
|
|
|
|
|
minHeight: (theme, { breakpoints }) => ({
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
0: "0px",
|
|
|
|
|
full: "100%",
|
|
|
|
|
screen: "100vh",
|
|
|
|
|
...breakpoints(theme("screens")),
|
|
|
|
|
}),
|
|
|
|
|
minWidth: (theme) => ({
|
|
|
|
|
0: "0px",
|
|
|
|
|
auto: "auto",
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
"1/2": "50%",
|
|
|
|
|
"1/3": "33.333333%",
|
|
|
|
|
"2/3": "66.666667%",
|
|
|
|
|
"1/4": "25%",
|
|
|
|
|
"2/4": "50%",
|
|
|
|
|
"3/4": "75%",
|
|
|
|
|
"1/5": "20%",
|
|
|
|
|
"2/5": "40%",
|
|
|
|
|
"3/5": "60%",
|
|
|
|
|
"4/5": "80%",
|
|
|
|
|
"1/6": "16.666667%",
|
|
|
|
|
"2/6": "33.333333%",
|
|
|
|
|
"3/6": "50%",
|
|
|
|
|
"4/6": "66.666667%",
|
|
|
|
|
"5/6": "83.333333%",
|
|
|
|
|
"1/12": "8.333333%",
|
|
|
|
|
"2/12": "16.666667%",
|
|
|
|
|
"3/12": "25%",
|
|
|
|
|
"4/12": "33.333333%",
|
|
|
|
|
"5/12": "41.666667%",
|
|
|
|
|
"6/12": "50%",
|
|
|
|
|
"7/12": "58.333333%",
|
|
|
|
|
"8/12": "66.666667%",
|
|
|
|
|
"9/12": "75%",
|
|
|
|
|
"10/12": "83.333333%",
|
|
|
|
|
"11/12": "91.666667%",
|
|
|
|
|
full: "100%",
|
|
|
|
|
screen: "100vw",
|
|
|
|
|
min: "min-content",
|
|
|
|
|
max: "max-content",
|
|
|
|
|
}),
|
|
|
|
|
objectPosition: {
|
|
|
|
|
bottom: "bottom",
|
|
|
|
|
center: "center",
|
|
|
|
|
left: "left",
|
|
|
|
|
"left-bottom": "left bottom",
|
|
|
|
|
"left-top": "left top",
|
|
|
|
|
right: "right",
|
|
|
|
|
"right-bottom": "right bottom",
|
|
|
|
|
"right-top": "right top",
|
|
|
|
|
top: "top",
|
|
|
|
|
},
|
|
|
|
|
opacity: {
|
|
|
|
|
0: "0",
|
|
|
|
|
5: "0.05",
|
|
|
|
|
10: "0.1",
|
|
|
|
|
20: "0.2",
|
|
|
|
|
25: "0.25",
|
|
|
|
|
30: "0.3",
|
|
|
|
|
40: "0.4",
|
|
|
|
|
50: "0.5",
|
|
|
|
|
60: "0.6",
|
|
|
|
|
70: "0.7",
|
|
|
|
|
75: "0.75",
|
|
|
|
|
80: "0.8",
|
|
|
|
|
90: "0.9",
|
|
|
|
|
95: "0.95",
|
|
|
|
|
100: "1",
|
|
|
|
|
},
|
|
|
|
|
order: {
|
|
|
|
|
first: "-9999",
|
|
|
|
|
last: "9999",
|
|
|
|
|
none: "0",
|
|
|
|
|
1: "1",
|
|
|
|
|
2: "2",
|
|
|
|
|
3: "3",
|
|
|
|
|
4: "4",
|
|
|
|
|
5: "5",
|
|
|
|
|
6: "6",
|
|
|
|
|
7: "7",
|
|
|
|
|
8: "8",
|
|
|
|
|
9: "9",
|
|
|
|
|
10: "10",
|
|
|
|
|
11: "11",
|
|
|
|
|
12: "12",
|
|
|
|
|
},
|
|
|
|
|
outline: {
|
|
|
|
|
none: ["2px solid transparent", "2px"],
|
|
|
|
|
white: ["2px dotted white", "2px"],
|
|
|
|
|
black: ["2px dotted black", "2px"],
|
|
|
|
|
},
|
|
|
|
|
padding: (theme) => theme("spacing"),
|
|
|
|
|
placeholderColor: (theme) => theme("colors"),
|
|
|
|
|
placeholderOpacity: (theme) => theme("opacity"),
|
|
|
|
|
ringColor: (theme) => ({
|
|
|
|
|
DEFAULT: theme("colors.blue.500", "#3b82f6"),
|
|
|
|
|
...theme("colors"),
|
|
|
|
|
}),
|
|
|
|
|
ringOffsetColor: (theme) => theme("colors"),
|
|
|
|
|
ringOffsetWidth: {
|
|
|
|
|
0: "0px",
|
|
|
|
|
1: "1px",
|
|
|
|
|
2: "2px",
|
|
|
|
|
3: "3px",
|
|
|
|
|
4: "4px",
|
|
|
|
|
5: "5px",
|
|
|
|
|
6: "6px",
|
|
|
|
|
7: "7px",
|
|
|
|
|
8: "8px",
|
|
|
|
|
},
|
|
|
|
|
ringOpacity: (theme) => ({
|
|
|
|
|
DEFAULT: "0.5",
|
|
|
|
|
...theme("opacity"),
|
|
|
|
|
}),
|
|
|
|
|
ringWidth: {
|
|
|
|
|
DEFAULT: "3px",
|
|
|
|
|
0: "0px",
|
|
|
|
|
1: "1px",
|
|
|
|
|
2: "2px",
|
|
|
|
|
3: "3px",
|
|
|
|
|
4: "4px",
|
|
|
|
|
5: "5px",
|
|
|
|
|
6: "6px",
|
|
|
|
|
7: "7px",
|
|
|
|
|
8: "8px",
|
|
|
|
|
},
|
|
|
|
|
rotate: {
|
|
|
|
|
"-180": "-180deg",
|
|
|
|
|
"-90": "-90deg",
|
|
|
|
|
"-45": "-45deg",
|
|
|
|
|
"-12": "-12deg",
|
|
|
|
|
"-6": "-6deg",
|
|
|
|
|
"-3": "-3deg",
|
|
|
|
|
"-2": "-2deg",
|
|
|
|
|
"-1": "-1deg",
|
|
|
|
|
0: "0deg",
|
|
|
|
|
1: "1deg",
|
|
|
|
|
2: "2deg",
|
|
|
|
|
3: "3deg",
|
|
|
|
|
6: "6deg",
|
|
|
|
|
12: "12deg",
|
|
|
|
|
45: "45deg",
|
|
|
|
|
90: "90deg",
|
|
|
|
|
180: "180deg",
|
|
|
|
|
},
|
|
|
|
|
saturate: {
|
|
|
|
|
0: "0",
|
|
|
|
|
50: ".5",
|
|
|
|
|
100: "1",
|
|
|
|
|
150: "1.5",
|
|
|
|
|
200: "2",
|
|
|
|
|
},
|
|
|
|
|
scale: {
|
|
|
|
|
0: "0",
|
|
|
|
|
50: ".5",
|
|
|
|
|
75: ".75",
|
|
|
|
|
90: ".9",
|
|
|
|
|
95: ".95",
|
|
|
|
|
100: "1",
|
|
|
|
|
105: "1.05",
|
|
|
|
|
110: "1.1",
|
|
|
|
|
125: "1.25",
|
|
|
|
|
150: "1.5",
|
|
|
|
|
},
|
|
|
|
|
sepia: {
|
|
|
|
|
0: "0",
|
|
|
|
|
DEFAULT: "100%",
|
|
|
|
|
},
|
|
|
|
|
skew: {
|
|
|
|
|
"-12": "-12deg",
|
|
|
|
|
"-6": "-6deg",
|
|
|
|
|
"-3": "-3deg",
|
|
|
|
|
"-2": "-2deg",
|
|
|
|
|
"-1": "-1deg",
|
|
|
|
|
0: "0deg",
|
|
|
|
|
1: "1deg",
|
|
|
|
|
2: "2deg",
|
|
|
|
|
3: "3deg",
|
|
|
|
|
6: "6deg",
|
|
|
|
|
12: "12deg",
|
|
|
|
|
},
|
|
|
|
|
space: (theme, { negative }) => ({
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
...negative(theme("spacing")),
|
|
|
|
|
}),
|
|
|
|
|
stroke: {
|
|
|
|
|
current: "currentColor",
|
|
|
|
|
},
|
|
|
|
|
strokeWidth: {
|
|
|
|
|
0: "0",
|
|
|
|
|
1: "1",
|
|
|
|
|
2: "2",
|
|
|
|
|
},
|
|
|
|
|
textColor: (theme) => theme("colors"),
|
|
|
|
|
textOpacity: (theme) => theme("opacity"),
|
|
|
|
|
transformOrigin: {
|
|
|
|
|
center: "center",
|
|
|
|
|
top: "top",
|
|
|
|
|
"top-right": "top right",
|
|
|
|
|
right: "right",
|
|
|
|
|
"bottom-right": "bottom right",
|
|
|
|
|
bottom: "bottom",
|
|
|
|
|
"bottom-left": "bottom left",
|
|
|
|
|
left: "left",
|
|
|
|
|
"top-left": "top left",
|
|
|
|
|
},
|
|
|
|
|
transitionDelay: {
|
|
|
|
|
75: "75ms",
|
|
|
|
|
100: "100ms",
|
|
|
|
|
150: "150ms",
|
|
|
|
|
200: "200ms",
|
|
|
|
|
300: "300ms",
|
|
|
|
|
500: "500ms",
|
|
|
|
|
700: "700ms",
|
|
|
|
|
1000: "1000ms",
|
|
|
|
|
},
|
|
|
|
|
transitionDuration: {
|
|
|
|
|
DEFAULT: "150ms",
|
|
|
|
|
75: "75ms",
|
|
|
|
|
100: "100ms",
|
|
|
|
|
150: "150ms",
|
|
|
|
|
200: "200ms",
|
|
|
|
|
300: "300ms",
|
|
|
|
|
400: "400ms",
|
|
|
|
|
500: "500ms",
|
|
|
|
|
700: "700ms",
|
|
|
|
|
1000: "1000ms",
|
|
|
|
|
},
|
|
|
|
|
transitionProperty: {
|
|
|
|
|
none: "none",
|
|
|
|
|
all: "all",
|
|
|
|
|
DEFAULT:
|
|
|
|
|
"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
|
|
|
|
colors: "background-color, border-color, color, fill, stroke",
|
|
|
|
|
opacity: "opacity",
|
|
|
|
|
shadow: "box-shadow",
|
|
|
|
|
transform: "transform",
|
|
|
|
|
},
|
|
|
|
|
transitionTimingFunction: {
|
|
|
|
|
DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
|
|
|
linear: "linear",
|
|
|
|
|
in: "cubic-bezier(0.4, 0, 1, 1)",
|
|
|
|
|
out: "cubic-bezier(0, 0, 0.2, 1)",
|
|
|
|
|
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
|
|
|
},
|
|
|
|
|
translate: (theme, { negative }) => ({
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
...negative(theme("spacing")),
|
|
|
|
|
"1/2": "50%",
|
|
|
|
|
"1/3": "33.333333%",
|
|
|
|
|
"2/3": "66.666667%",
|
|
|
|
|
"1/4": "25%",
|
|
|
|
|
"2/4": "50%",
|
|
|
|
|
"3/4": "75%",
|
|
|
|
|
full: "100%",
|
|
|
|
|
"-1/2": "-50%",
|
|
|
|
|
"-1/3": "-33.333333%",
|
|
|
|
|
"-2/3": "-66.666667%",
|
|
|
|
|
"-1/4": "-25%",
|
|
|
|
|
"-2/4": "-50%",
|
|
|
|
|
"-3/4": "-75%",
|
|
|
|
|
"-full": "-100%",
|
|
|
|
|
}),
|
|
|
|
|
width: (theme) => ({
|
|
|
|
|
auto: "auto",
|
|
|
|
|
...theme("spacing"),
|
|
|
|
|
"1/2": "50%",
|
|
|
|
|
"1/3": "33.333333%",
|
|
|
|
|
"2/3": "66.666667%",
|
|
|
|
|
"1/4": "25%",
|
|
|
|
|
"2/4": "50%",
|
|
|
|
|
"3/4": "75%",
|
|
|
|
|
"1/5": "20%",
|
|
|
|
|
"2/5": "40%",
|
|
|
|
|
"3/5": "60%",
|
|
|
|
|
"4/5": "80%",
|
|
|
|
|
"1/6": "16.666667%",
|
|
|
|
|
"2/6": "33.333333%",
|
|
|
|
|
"3/6": "50%",
|
|
|
|
|
"4/6": "66.666667%",
|
2023-06-21 08:09:14 +00:00
|
|
|
"7/10": "70%",
|
2022-06-21 13:57:34 +00:00
|
|
|
"5/6": "83.333333%",
|
|
|
|
|
"1/12": "8.333333%",
|
|
|
|
|
"2/12": "16.666667%",
|
|
|
|
|
"3/12": "25%",
|
|
|
|
|
"4/12": "33.333333%",
|
|
|
|
|
"5/12": "41.666667%",
|
|
|
|
|
"6/12": "50%",
|
|
|
|
|
"7/12": "58.333333%",
|
|
|
|
|
"8/12": "66.666667%",
|
|
|
|
|
"9/12": "75%",
|
|
|
|
|
"10/12": "83.333333%",
|
|
|
|
|
"11/12": "91.666667%",
|
|
|
|
|
full: "100%",
|
|
|
|
|
screen: "100vw",
|
|
|
|
|
min: "min-content",
|
|
|
|
|
max: "max-content",
|
|
|
|
|
}),
|
|
|
|
|
zIndex: {
|
|
|
|
|
auto: "auto",
|
|
|
|
|
0: "0",
|
|
|
|
|
...{ ...[...Array(10).keys()] },
|
|
|
|
|
10: "10",
|
|
|
|
|
20: "20",
|
|
|
|
|
30: "30",
|
|
|
|
|
40: "40",
|
|
|
|
|
50: "50",
|
|
|
|
|
},
|
2021-11-23 08:01:46 +00:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
plugins: [],
|
|
|
|
|
};
|