properties.ts•3.99 kB
/**
* Visual Properties - CSS visual styling features
*/
import { CSSFeature, CSSFeatureCategory } from "../../types.js";
export const VISUAL_FEATURES: Record<string, CSSFeature> = {
gradients: {
name: "CSS Gradients",
category: CSSFeatureCategory.VISUAL,
properties: [
"background-image",
"linear-gradient",
"radial-gradient",
"conic-gradient",
"repeating-linear-gradient",
"repeating-radial-gradient",
],
description: "Smooth color transitions and gradient backgrounds",
support_level: "excellent",
mdn_url:
"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients",
},
transforms: {
name: "CSS Transforms",
category: CSSFeatureCategory.VISUAL,
properties: [
"transform",
"transform-origin",
"transform-style",
"perspective",
"perspective-origin",
"backface-visibility",
"scale",
"rotate",
"translate",
"skew",
],
description: "2D and 3D transformations of elements",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms",
},
"border-logical": {
name: "Logical Border Properties",
category: CSSFeatureCategory.VISUAL,
properties: [
"border-inline",
"border-block",
"border-inline-start",
"border-inline-end",
"border-block-start",
"border-block-end",
"border-inline-width",
"border-block-width",
"border-inline-style",
"border-block-style",
"border-inline-color",
"border-block-color",
],
description: "Logical border properties that adapt to writing direction",
support_level: "good",
mdn_url:
"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties",
},
overflow: {
name: "CSS Overflow",
category: CSSFeatureCategory.LAYOUT,
properties: [
"overflow",
"overflow-x",
"overflow-y",
"overflow-inline",
"overflow-block",
"text-overflow",
"overflow-wrap",
"overflow-anchor",
],
description: "Control how content overflows its container",
support_level: "excellent",
mdn_url: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow",
},
"overflow-clip": {
name: "CSS Overflow Clip",
category: CSSFeatureCategory.LAYOUT,
properties: ["overflow-clip-margin"],
description: "Control clipping area for overflow: clip",
support_level: "limited",
mdn_url:
"https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin",
},
"overscroll-behavior": {
name: "CSS Overscroll Behavior",
category: CSSFeatureCategory.INTERACTION,
properties: [
"overscroll-behavior",
"overscroll-behavior-x",
"overscroll-behavior-y",
"overscroll-behavior-inline",
"overscroll-behavior-block",
],
description: "Control scrolling behavior when reaching scroll boundaries",
support_level: "good",
mdn_url:
"https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior",
},
"corner-shape": {
name: "CSS Corner Shape",
category: CSSFeatureCategory.VISUAL,
properties: ["corner-shape"],
description:
"Define the shape of element corners using superellipse curves for more organic, rounded designs beyond traditional border-radius",
support_level: "experimental",
mdn_url: "https://drafts.csswg.org/css-borders-4/#corner-shape",
},
};
export const VISUAL_KEYWORDS = [
"gradient",
"linear-gradient",
"radial-gradient",
"conic-gradient",
"background",
"color",
"transform",
"scale",
"rotate",
"translate",
"skew",
"perspective",
"3d",
"border",
"outline",
"overflow",
"overflow-clip",
"overscroll",
"clip",
"clip-margin",
"scroll",
"behavior",
"shadow",
"visual",
"styling",
"corner",
"corner-shape",
"superellipse",
"rounded",
"organic",
"smooth",
"curves",
];