@klinking/squircle 0.7.1 → 0.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tw-plugin.d.mts.map +1 -1
- package/dist/tw-plugin.mjs +4 -4
- package/dist/tw-plugin.mjs.map +1 -1
- package/dist/tw-utils.css +16 -21
- package/package.json +1 -1
package/dist/tw-plugin.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tw-plugin.d.mts","names":[],"sources":["../src/tw-plugin.ts"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"tw-plugin.d.mts","names":[],"sources":["../src/tw-plugin.ts"],"mappings":";;;UAUiB,qBAAA;;EAEf,MAAA;EAFoC;EAIpC,SAAA;EAJoC;EAMpC,MAAA;AAAA;AAAA,cAGI,QAAA,EAAU,UAAA,QAAkB,MAAA,CAAO,WAAA,CAAY,qBAAA"}
|
package/dist/tw-plugin.mjs
CHANGED
|
@@ -8,6 +8,7 @@ function correctedRadius(radius, amt = DEFAULT_AMT_CSS) {
|
|
|
8
8
|
function isComment(entry) {
|
|
9
9
|
return !Array.isArray(entry);
|
|
10
10
|
}
|
|
11
|
+
const SUPPORTS_RULE = "@supports (corner-shape: superellipse(2))";
|
|
11
12
|
const VARIANTS = {
|
|
12
13
|
"": ["border-radius"],
|
|
13
14
|
"$comment-physical-sides": { comment: "/* --- Per-side physical variants --- */" },
|
|
@@ -45,16 +46,15 @@ const squircle = plugin.withOptions((options = {}) => ({ matchUtilities, theme }
|
|
|
45
46
|
const radiusValues = theme("borderRadius");
|
|
46
47
|
const amtCss = `var(${amtVar}, 2)`;
|
|
47
48
|
const cornerShape = getCornerShape(amtVar);
|
|
48
|
-
const supportsCornerShape = "@supports (corner-shape: superellipse())";
|
|
49
49
|
matchUtilities({ [`${prefix}-amt`]: (value) => ({
|
|
50
50
|
[amtVar]: value,
|
|
51
|
-
[
|
|
51
|
+
[SUPPORTS_RULE]: { "corner-shape": `superellipse(var(${amtVar}))` }
|
|
52
52
|
}) }, { type: "number" });
|
|
53
53
|
for (const [suffix, props] of variantEntries()) {
|
|
54
54
|
const name = suffix ? `${prefix}-${suffix}` : prefix;
|
|
55
55
|
if (usesIntermediateVar(suffix)) matchUtilities({ [name]: (value) => ({
|
|
56
56
|
...Object.fromEntries(props.map((p) => [p, value])),
|
|
57
|
-
[
|
|
57
|
+
[SUPPORTS_RULE]: {
|
|
58
58
|
"--squircle-r": correctedRadius(value, amtCss),
|
|
59
59
|
...Object.fromEntries(props.map((p) => [p, "var(--squircle-r)"])),
|
|
60
60
|
"corner-shape": cornerShape
|
|
@@ -67,7 +67,7 @@ const squircle = plugin.withOptions((options = {}) => ({ matchUtilities, theme }
|
|
|
67
67
|
const prop = props[0];
|
|
68
68
|
matchUtilities({ [name]: (value) => {
|
|
69
69
|
const result = { [prop]: value };
|
|
70
|
-
result[
|
|
70
|
+
result[SUPPORTS_RULE] = {
|
|
71
71
|
[prop]: correctedRadius(value, amtCss),
|
|
72
72
|
"corner-shape": cornerShape
|
|
73
73
|
};
|
package/dist/tw-plugin.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tw-plugin.mjs","names":[],"sources":["../src/variants.ts","../src/tw-plugin.ts"],"sourcesContent":["export const DEFAULT_AMT = 2 as const;\nexport const DEFAULT_AMOUNT_VAR_NAME = \"--squircle-amt\" as const;\nexport const DEFAULT_AMT_CSS = `var(${DEFAULT_AMOUNT_VAR_NAME}, ${DEFAULT_AMT})` as const;\n\nexport const getCornerShape = (varName: string = DEFAULT_AMOUNT_VAR_NAME) =>\n `superellipse(var(${varName}, ${DEFAULT_AMT}))` as const;\n\nexport function correctedRadius(radius: string, amt: string = DEFAULT_AMT_CSS): string {\n return `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt}))))` as const;\n}\n\ntype SectionComment = { comment: string };\ntype VariantEntry = string[] | SectionComment;\n\nfunction isComment(entry: VariantEntry): entry is SectionComment {\n return !Array.isArray(entry);\n}\n\nexport const VARIANTS: Record<string, VariantEntry> & Record<`$comment-${string}`, SectionComment> =\n {\n \"\": [\"border-radius\"],\n \"$comment-physical-sides\": { comment: \"/* --- Per-side physical variants --- */\" },\n t: [\"border-top-left-radius\", \"border-top-right-radius\"],\n r: [\"border-top-right-radius\", \"border-bottom-right-radius\"],\n b: [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n l: [\"border-top-left-radius\", \"border-bottom-left-radius\"],\n \"$comment-logical-sides\": { comment: \"/* --- Per-side logical variants --- */\" },\n s: [\"border-start-start-radius\", \"border-end-start-radius\"],\n e: [\"border-start-end-radius\", \"border-end-end-radius\"],\n \"$comment-physical-corners\": { comment: \"/* --- Per-corner physical variants --- */\" },\n tl: [\"border-top-left-radius\"],\n tr: [\"border-top-right-radius\"],\n br: [\"border-bottom-right-radius\"],\n bl: [\"border-bottom-left-radius\"],\n \"$comment-logical-corners\": { comment: \"/* --- Per-corner logical variants --- */\" },\n ss: [\"border-start-start-radius\"],\n se: [\"border-start-end-radius\"],\n es: [\"border-end-start-radius\"],\n ee: [\"border-end-end-radius\"],\n };\n\nexport function variantEntries(): [string, string[]][] {\n return Object.entries(VARIANTS).filter(\n (entry): entry is [string, string[]] => !isComment(entry[1]),\n );\n}\n\nexport function usesIntermediateVar(suffix: string): boolean {\n const entry = VARIANTS[suffix];\n if (!entry || isComment(entry)) return false;\n return suffix === \"\" || entry.length > 1;\n}\n\nexport { isComment };\nexport type { SectionComment, VariantEntry };\n","import plugin from \"tailwindcss/plugin\";\nimport {\n DEFAULT_AMOUNT_VAR_NAME,\n correctedRadius,\n getCornerShape,\n usesIntermediateVar,\n variantEntries,\n} from \"./variants\";\n\nexport interface SquirclePluginOptions {\n /** CSS custom property name for the superellipse amount (default: \"--squircle-amt\") */\n amtVar?: string;\n /** @plugin CSS alias for amtVar */\n \"amt-var\"?: string;\n /** Class name prefix for utilities (default: \"squircle\") */\n prefix?: string;\n}\n\nconst squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>> =\n plugin.withOptions<SquirclePluginOptions>((options = {}) =>\n // eslint-disable-next-line @typescript-eslint/unbound-method\n ({ matchUtilities, theme }) => {\n const amtVar = options.amtVar ?? options[\"amt-var\"] ?? DEFAULT_AMOUNT_VAR_NAME;\n const prefix = options.prefix ?? \"squircle\";\n const radiusValues = theme(\"borderRadius\");\n\n const amtCss = `var(${amtVar}, 2)`;\n const cornerShape = getCornerShape(amtVar);\n
|
|
1
|
+
{"version":3,"file":"tw-plugin.mjs","names":[],"sources":["../src/variants.ts","../src/tw-plugin.ts"],"sourcesContent":["export const DEFAULT_AMT = 2 as const;\nexport const DEFAULT_AMOUNT_VAR_NAME = \"--squircle-amt\" as const;\nexport const DEFAULT_AMT_CSS = `var(${DEFAULT_AMOUNT_VAR_NAME}, ${DEFAULT_AMT})` as const;\n\nexport const getCornerShape = (varName: string = DEFAULT_AMOUNT_VAR_NAME) =>\n `superellipse(var(${varName}, ${DEFAULT_AMT}))` as const;\n\nexport function correctedRadius(radius: string, amt: string = DEFAULT_AMT_CSS): string {\n return `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt}))))` as const;\n}\n\ntype SectionComment = { comment: string };\ntype VariantEntry = string[] | SectionComment;\n\nfunction isComment(entry: VariantEntry): entry is SectionComment {\n return !Array.isArray(entry);\n}\n\nexport const SUPPORTS_RULE = \"@supports (corner-shape: superellipse(2))\";\n\nexport const VARIANTS: Record<string, VariantEntry> & Record<`$comment-${string}`, SectionComment> =\n {\n \"\": [\"border-radius\"],\n \"$comment-physical-sides\": { comment: \"/* --- Per-side physical variants --- */\" },\n t: [\"border-top-left-radius\", \"border-top-right-radius\"],\n r: [\"border-top-right-radius\", \"border-bottom-right-radius\"],\n b: [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n l: [\"border-top-left-radius\", \"border-bottom-left-radius\"],\n \"$comment-logical-sides\": { comment: \"/* --- Per-side logical variants --- */\" },\n s: [\"border-start-start-radius\", \"border-end-start-radius\"],\n e: [\"border-start-end-radius\", \"border-end-end-radius\"],\n \"$comment-physical-corners\": { comment: \"/* --- Per-corner physical variants --- */\" },\n tl: [\"border-top-left-radius\"],\n tr: [\"border-top-right-radius\"],\n br: [\"border-bottom-right-radius\"],\n bl: [\"border-bottom-left-radius\"],\n \"$comment-logical-corners\": { comment: \"/* --- Per-corner logical variants --- */\" },\n ss: [\"border-start-start-radius\"],\n se: [\"border-start-end-radius\"],\n es: [\"border-end-start-radius\"],\n ee: [\"border-end-end-radius\"],\n };\n\nexport function variantEntries(): [string, string[]][] {\n return Object.entries(VARIANTS).filter(\n (entry): entry is [string, string[]] => !isComment(entry[1]),\n );\n}\n\nexport function usesIntermediateVar(suffix: string): boolean {\n const entry = VARIANTS[suffix];\n if (!entry || isComment(entry)) return false;\n return suffix === \"\" || entry.length > 1;\n}\n\nexport { isComment };\nexport type { SectionComment, VariantEntry };\n","import plugin from \"tailwindcss/plugin\";\nimport {\n DEFAULT_AMOUNT_VAR_NAME,\n correctedRadius,\n getCornerShape,\n usesIntermediateVar,\n variantEntries,\n} from \"./variants\";\nimport { SUPPORTS_RULE } from \"./variants\";\n\nexport interface SquirclePluginOptions {\n /** CSS custom property name for the superellipse amount (default: \"--squircle-amt\") */\n amtVar?: string;\n /** @plugin CSS alias for amtVar */\n \"amt-var\"?: string;\n /** Class name prefix for utilities (default: \"squircle\") */\n prefix?: string;\n}\n\nconst squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>> =\n plugin.withOptions<SquirclePluginOptions>((options = {}) =>\n // eslint-disable-next-line @typescript-eslint/unbound-method\n ({ matchUtilities, theme }) => {\n const amtVar = options.amtVar ?? options[\"amt-var\"] ?? DEFAULT_AMOUNT_VAR_NAME;\n const prefix = options.prefix ?? \"squircle\";\n const radiusValues = theme(\"borderRadius\");\n\n const amtCss = `var(${amtVar}, 2)`;\n const cornerShape = getCornerShape(amtVar);\n\n matchUtilities(\n {\n [`${prefix}-amt`]: (value: string) => ({\n [amtVar]: value,\n [SUPPORTS_RULE]: {\n \"corner-shape\": `superellipse(var(${amtVar}))`,\n },\n }),\n },\n { type: \"number\" },\n );\n\n for (const [suffix, props] of variantEntries()) {\n const name = suffix ? `${prefix}-${suffix}` : prefix;\n\n if (usesIntermediateVar(suffix)) {\n matchUtilities(\n {\n [name]: (value: string) => ({\n ...Object.fromEntries(props.map((p) => [p, value])),\n [SUPPORTS_RULE]: {\n \"--squircle-r\": correctedRadius(value, amtCss),\n ...Object.fromEntries(props.map((p) => [p, \"var(--squircle-r)\"])),\n \"corner-shape\": cornerShape,\n },\n }),\n },\n { type: \"length\", values: radiusValues },\n );\n } else {\n const prop = props[0]!;\n matchUtilities(\n {\n [name]: (value: string) => {\n const result: Record<string, string | Record<string, string>> = {\n [prop]: value,\n };\n result[SUPPORTS_RULE] = {\n [prop]: correctedRadius(value, amtCss),\n \"corner-shape\": cornerShape,\n };\n return result;\n },\n },\n { type: \"length\", values: radiusValues },\n );\n }\n }\n });\n\nexport default squircle;\n"],"mappings":";AACA,MAAa,0BAA0B;AACvC,MAAa,kBAAkB,OAAO,wBAAwB;AAE9D,MAAa,kBAAkB,UAAkB,4BAC/C,oBAAoB,QAAQ;AAE9B,SAAgB,gBAAgB,QAAgB,MAAc,iBAAyB;AACrF,QAAO,QAAQ,OAAO,uDAAuD,IAAI;;AAMnF,SAAS,UAAU,OAA8C;AAC/D,QAAO,CAAC,MAAM,QAAQ,MAAM;;AAG9B,MAAa,gBAAgB;AAE7B,MAAa,WACX;CACE,IAAI,CAAC,gBAAgB;CACrB,2BAA2B,EAAE,SAAS,4CAA4C;CAClF,GAAG,CAAC,0BAA0B,0BAA0B;CACxD,GAAG,CAAC,2BAA2B,6BAA6B;CAC5D,GAAG,CAAC,6BAA6B,6BAA6B;CAC9D,GAAG,CAAC,0BAA0B,4BAA4B;CAC1D,0BAA0B,EAAE,SAAS,2CAA2C;CAChF,GAAG,CAAC,6BAA6B,0BAA0B;CAC3D,GAAG,CAAC,2BAA2B,wBAAwB;CACvD,6BAA6B,EAAE,SAAS,8CAA8C;CACtF,IAAI,CAAC,yBAAyB;CAC9B,IAAI,CAAC,0BAA0B;CAC/B,IAAI,CAAC,6BAA6B;CAClC,IAAI,CAAC,4BAA4B;CACjC,4BAA4B,EAAE,SAAS,6CAA6C;CACpF,IAAI,CAAC,4BAA4B;CACjC,IAAI,CAAC,0BAA0B;CAC/B,IAAI,CAAC,0BAA0B;CAC/B,IAAI,CAAC,wBAAwB;CAC9B;AAEH,SAAgB,iBAAuC;AACrD,QAAO,OAAO,QAAQ,SAAS,CAAC,QAC7B,UAAuC,CAAC,UAAU,MAAM,GAAG,CAC7D;;AAGH,SAAgB,oBAAoB,QAAyB;CAC3D,MAAM,QAAQ,SAAS;AACvB,KAAI,CAAC,SAAS,UAAU,MAAM,CAAE,QAAO;AACvC,QAAO,WAAW,MAAM,MAAM,SAAS;;;;ACjCzC,MAAM,WACJ,OAAO,aAAoC,UAAU,EAAE,MAEpD,EAAE,gBAAgB,YAAY;CAC/B,MAAM,SAAS,QAAQ,UAAU,QAAQ,cAAA;CACzC,MAAM,SAAS,QAAQ,UAAU;CACjC,MAAM,eAAe,MAAM,eAAe;CAE1C,MAAM,SAAS,OAAO,OAAO;CAC7B,MAAM,cAAc,eAAe,OAAO;AAE1C,gBACE,GACG,GAAG,OAAO,SAAS,WAAmB;GACpC,SAAS;GACT,gBAAgB,EACf,gBAAgB,oBAAoB,OAAO,KAC5C;EACF,GACF,EACD,EAAE,MAAM,UAAU,CACnB;AAED,MAAK,MAAM,CAAC,QAAQ,UAAU,gBAAgB,EAAE;EAC9C,MAAM,OAAO,SAAS,GAAG,OAAO,GAAG,WAAW;AAE9C,MAAI,oBAAoB,OAAO,CAC7B,gBACE,GACG,QAAQ,WAAmB;GAC1B,GAAG,OAAO,YAAY,MAAM,KAAK,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;IAClD,gBAAgB;IACf,gBAAgB,gBAAgB,OAAO,OAAO;IAC9C,GAAG,OAAO,YAAY,MAAM,KAAK,MAAM,CAAC,GAAG,oBAAoB,CAAC,CAAC;IACjE,gBAAgB;IACjB;GACF,GACF,EACD;GAAE,MAAM;GAAU,QAAQ;GAAc,CACzC;OACI;GACL,MAAM,OAAO,MAAM;AACnB,kBACE,GACG,QAAQ,UAAkB;IACzB,MAAM,SAA0D,GAC7D,OAAO,OACT;AACD,WAAO,iBAAiB;MACrB,OAAO,gBAAgB,OAAO,OAAO;KACtC,gBAAgB;KACjB;AACD,WAAO;MAEV,EACD;IAAE,MAAM;IAAU,QAAQ;IAAc,CACzC;;;EAGL"}
|
package/dist/tw-utils.css
CHANGED
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
/* THIS FILE IS GENERATED — do not edit by hand.
|
|
2
|
-
* Source: scripts/generate-squircle-css.ts
|
|
3
|
-
* Formula: src/variants.ts
|
|
4
|
-
* Run: vp run generate:css */
|
|
5
|
-
|
|
6
1
|
/* ── Squircle utilities ─────────────────────────────────────── */
|
|
7
2
|
/* squircle-amt-[n] sets the superellipse amount (default 2) */
|
|
8
3
|
/* squircle-* mirrors rounded-* variants: all, t, r, b, l, s, e, tl, tr, br, bl, ss, se, es, ee */
|
|
9
4
|
|
|
10
5
|
@utility squircle-amt-* {
|
|
11
6
|
--squircle-amt: --value(--squircle-amt-*, number);
|
|
12
|
-
@supports (corner-shape: superellipse()) {
|
|
7
|
+
@supports (corner-shape: superellipse(2)) {
|
|
13
8
|
corner-shape: superellipse(var(--squircle-amt));
|
|
14
9
|
}
|
|
15
10
|
}
|
|
16
11
|
|
|
17
12
|
@utility squircle-* {
|
|
18
13
|
border-radius: --value(--radius-*);
|
|
19
|
-
@supports (corner-shape: superellipse()) {
|
|
14
|
+
@supports (corner-shape: superellipse(2)) {
|
|
20
15
|
--squircle-r: calc(
|
|
21
16
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
22
17
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -31,7 +26,7 @@
|
|
|
31
26
|
@utility squircle-t-* {
|
|
32
27
|
border-top-left-radius: --value(--radius-*);
|
|
33
28
|
border-top-right-radius: --value(--radius-*);
|
|
34
|
-
@supports (corner-shape: superellipse()) {
|
|
29
|
+
@supports (corner-shape: superellipse(2)) {
|
|
35
30
|
--squircle-r: calc(
|
|
36
31
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
37
32
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -45,7 +40,7 @@
|
|
|
45
40
|
@utility squircle-r-* {
|
|
46
41
|
border-top-right-radius: --value(--radius-*);
|
|
47
42
|
border-bottom-right-radius: --value(--radius-*);
|
|
48
|
-
@supports (corner-shape: superellipse()) {
|
|
43
|
+
@supports (corner-shape: superellipse(2)) {
|
|
49
44
|
--squircle-r: calc(
|
|
50
45
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
51
46
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -59,7 +54,7 @@
|
|
|
59
54
|
@utility squircle-b-* {
|
|
60
55
|
border-bottom-left-radius: --value(--radius-*);
|
|
61
56
|
border-bottom-right-radius: --value(--radius-*);
|
|
62
|
-
@supports (corner-shape: superellipse()) {
|
|
57
|
+
@supports (corner-shape: superellipse(2)) {
|
|
63
58
|
--squircle-r: calc(
|
|
64
59
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
65
60
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -73,7 +68,7 @@
|
|
|
73
68
|
@utility squircle-l-* {
|
|
74
69
|
border-top-left-radius: --value(--radius-*);
|
|
75
70
|
border-bottom-left-radius: --value(--radius-*);
|
|
76
|
-
@supports (corner-shape: superellipse()) {
|
|
71
|
+
@supports (corner-shape: superellipse(2)) {
|
|
77
72
|
--squircle-r: calc(
|
|
78
73
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
79
74
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -89,7 +84,7 @@
|
|
|
89
84
|
@utility squircle-s-* {
|
|
90
85
|
border-start-start-radius: --value(--radius-*);
|
|
91
86
|
border-end-start-radius: --value(--radius-*);
|
|
92
|
-
@supports (corner-shape: superellipse()) {
|
|
87
|
+
@supports (corner-shape: superellipse(2)) {
|
|
93
88
|
--squircle-r: calc(
|
|
94
89
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
95
90
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -103,7 +98,7 @@
|
|
|
103
98
|
@utility squircle-e-* {
|
|
104
99
|
border-start-end-radius: --value(--radius-*);
|
|
105
100
|
border-end-end-radius: --value(--radius-*);
|
|
106
|
-
@supports (corner-shape: superellipse()) {
|
|
101
|
+
@supports (corner-shape: superellipse(2)) {
|
|
107
102
|
--squircle-r: calc(
|
|
108
103
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
109
104
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -118,7 +113,7 @@
|
|
|
118
113
|
|
|
119
114
|
@utility squircle-tl-* {
|
|
120
115
|
border-top-left-radius: --value(--radius-*);
|
|
121
|
-
@supports (corner-shape: superellipse()) {
|
|
116
|
+
@supports (corner-shape: superellipse(2)) {
|
|
122
117
|
border-top-left-radius: calc(
|
|
123
118
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
124
119
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -129,7 +124,7 @@
|
|
|
129
124
|
|
|
130
125
|
@utility squircle-tr-* {
|
|
131
126
|
border-top-right-radius: --value(--radius-*);
|
|
132
|
-
@supports (corner-shape: superellipse()) {
|
|
127
|
+
@supports (corner-shape: superellipse(2)) {
|
|
133
128
|
border-top-right-radius: calc(
|
|
134
129
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
135
130
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -140,7 +135,7 @@
|
|
|
140
135
|
|
|
141
136
|
@utility squircle-br-* {
|
|
142
137
|
border-bottom-right-radius: --value(--radius-*);
|
|
143
|
-
@supports (corner-shape: superellipse()) {
|
|
138
|
+
@supports (corner-shape: superellipse(2)) {
|
|
144
139
|
border-bottom-right-radius: calc(
|
|
145
140
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
146
141
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -151,7 +146,7 @@
|
|
|
151
146
|
|
|
152
147
|
@utility squircle-bl-* {
|
|
153
148
|
border-bottom-left-radius: --value(--radius-*);
|
|
154
|
-
@supports (corner-shape: superellipse()) {
|
|
149
|
+
@supports (corner-shape: superellipse(2)) {
|
|
155
150
|
border-bottom-left-radius: calc(
|
|
156
151
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
157
152
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -164,7 +159,7 @@
|
|
|
164
159
|
|
|
165
160
|
@utility squircle-ss-* {
|
|
166
161
|
border-start-start-radius: --value(--radius-*);
|
|
167
|
-
@supports (corner-shape: superellipse()) {
|
|
162
|
+
@supports (corner-shape: superellipse(2)) {
|
|
168
163
|
border-start-start-radius: calc(
|
|
169
164
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
170
165
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -175,7 +170,7 @@
|
|
|
175
170
|
|
|
176
171
|
@utility squircle-se-* {
|
|
177
172
|
border-start-end-radius: --value(--radius-*);
|
|
178
|
-
@supports (corner-shape: superellipse()) {
|
|
173
|
+
@supports (corner-shape: superellipse(2)) {
|
|
179
174
|
border-start-end-radius: calc(
|
|
180
175
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
181
176
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -186,7 +181,7 @@
|
|
|
186
181
|
|
|
187
182
|
@utility squircle-es-* {
|
|
188
183
|
border-end-start-radius: --value(--radius-*);
|
|
189
|
-
@supports (corner-shape: superellipse()) {
|
|
184
|
+
@supports (corner-shape: superellipse(2)) {
|
|
190
185
|
border-end-start-radius: calc(
|
|
191
186
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
192
187
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|
|
@@ -197,7 +192,7 @@
|
|
|
197
192
|
|
|
198
193
|
@utility squircle-ee-* {
|
|
199
194
|
border-end-end-radius: --value(--radius-*);
|
|
200
|
-
@supports (corner-shape: superellipse()) {
|
|
195
|
+
@supports (corner-shape: superellipse(2)) {
|
|
201
196
|
border-end-end-radius: calc(
|
|
202
197
|
--value(--radius- *) * (1 - pow(2, -0.5)) /
|
|
203
198
|
(1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
|