@likec4/styles 1.34.2 → 1.36.0

package/dist/types/conditions.d.ts

@@ -212,28 +212,6 @@ export interface Conditions {
 	"_icon": string
 	/** `@starting-style` */
 	"_starting": string
-	/** `.likec4-root:is([data-likec4-reduced-graphics]) &` */
-	"_reduceGraphics": string
-	/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) &` */
-	"_reduceGraphicsOnPan": string
-	/** `.likec4-root:not([data-likec4-reduced-graphics]) &` */
-	"_noReduceGraphics": string
-	/** `:is(.likec4-root[data-likec4-diagram-panning]) &` */
-	"_whenPanning": string
-	/** `:where([data-likec4-zoom-small]) &` */
-	"_smallZoom": string
-	/** `:where([data-compound-transparent]) &` */
-	"_compoundTransparent": string
-	/** `:where([data-likec4-edge-active="true"]) &` */
-	"_edgeActive": string
-	/** `:where([data-likec4-hovered="true"]) &` */
-	"_whenHovered": string
-	/** `:where(.react-flow__node.selected, .react-flow__edge.selected) &` */
-	"_whenSelected": string
-	/** `:where([data-likec4-dimmed]) &` */
-	"_whenDimmed": string
-	/** `:where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &` */
-	"_whenFocused": string
 	/** `:where([data-likec4-shape-size='xs']) &` */
 	"_shapeSizeXs": string
 	/** `:where([data-likec4-shape-size='sm']) &` */
@@ -258,6 +236,30 @@ export interface Conditions {
 	"_shapeStorage": string
 	/** `:where([data-likec4-shape='queue']) &` */
 	"_shapeQueue": string
+	/** `&:not(:is(:disabled, [disabled], [data-disabled]))` */
+	"_notDisabled": string
+	/** `.likec4-root:is([data-likec4-reduced-graphics]) &` */
+	"_reduceGraphics": string
+	/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) &` */
+	"_reduceGraphicsOnPan": string
+	/** `.likec4-root:not([data-likec4-reduced-graphics]) &` */
+	"_noReduceGraphics": string
+	/** `:is(.likec4-root[data-likec4-diagram-panning]) &` */
+	"_whenPanning": string
+	/** `:where([data-likec4-zoom-small]) &` */
+	"_smallZoom": string
+	/** `:where([data-compound-transparent]) &` */
+	"_compoundTransparent": string
+	/** `:where([data-likec4-edge-active="true"]) &` */
+	"_edgeActive": string
+	/** `:where([data-likec4-hovered="true"]) &` */
+	"_whenHovered": string
+	/** `:where(.react-flow__node.selected, .react-flow__edge.selected) &` */
+	"_whenSelected": string
+	/** `:where([data-likec4-dimmed]) &` */
+	"_whenDimmed": string
+	/** `:where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &` */
+	"_whenFocused": string
 	/** `@media (color-gamut: p3)` */
 	"_p3": string
 	/** `@media (color-gamut: srgb)` */
@@ -314,6 +316,30 @@ export interface Conditions {
 	"mdToXl": string
 	/** `@media screen and (min-width: 75rem) and (max-width: 87.9975rem)` */
 	"lgToXl": string
+	/** `@container  (min-width: 24rem)` */
+	"@/xs": string
+	/** `@container  (min-width: 40rem)` */
+	"@/sm": string
+	/** `@container  (min-width: 48rem)` */
+	"@/md": string
+	/** `@container  (min-width: 64rem)` */
+	"@/lg": string
+	/** `@container likec4-root (min-width: 24rem)` */
+	"@likec4-root/xs": string
+	/** `@container likec4-root (min-width: 40rem)` */
+	"@likec4-root/sm": string
+	/** `@container likec4-root (min-width: 48rem)` */
+	"@likec4-root/md": string
+	/** `@container likec4-root (min-width: 64rem)` */
+	"@likec4-root/lg": string
+	/** `@container likec4-dialog (min-width: 24rem)` */
+	"@likec4-dialog/xs": string
+	/** `@container likec4-dialog (min-width: 40rem)` */
+	"@likec4-dialog/sm": string
+	/** `@container likec4-dialog (min-width: 48rem)` */
+	"@likec4-dialog/md": string
+	/** `@container likec4-dialog (min-width: 64rem)` */
+	"@likec4-dialog/lg": string
 	/** The base (=no conditions) styles to apply  */
 	"base": string
 }

package/dist/types/prop-type.d.ts

@@ -134,7 +134,7 @@ export interface UtilityValues {
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform" | "fast";
+	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform" | "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "none";
 	animationName: "indicatorStrokeOpacity" | "xyedgeAnimated";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
@@ -183,11 +183,9 @@ export interface UtilityValues {
 	stroke: Tokens["colors"];
 	srOnly: boolean;
 	debug: boolean;
-	likec4Palette: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky" | "amber.1" | "amber.2" | "amber.3" | "amber.4" | "amber.5" | "blue.1" | "blue.2" | "blue.3" | "blue.4" | "blue.5" | "gray.1" | "gray.2" | "gray.3" | "gray.4" | "gray.5" | "slate.1" | "slate.2" | "slate.3" | "slate.4" | "slate.5" | "green.1" | "green.2" | "green.3" | "green.4" | "green.5" | "indigo.1" | "indigo.2" | "indigo.3" | "indigo.4" | "indigo.5" | "muted.1" | "muted.2" | "muted.3" | "muted.4" | "muted.5" | "primary.1" | "primary.2" | "primary.3" | "primary.4" | "primary.5" | "red.1" | "red.2" | "red.3" | "red.4" | "red.5" | "secondary.1" | "secondary.2" | "secondary.3" | "secondary.4" | "secondary.5" | "sky.1" | "sky.2" | "sky.3" | "sky.4" | "sky.5";
-	likec4RelationPalette: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
-	colorPalette: "mantine" | "mantine.colors.primary" | "mantine.colors" | "mantine.colors.gray" | "mantine.colors.dark" | "mantine.colors.orange" | "mantine.colors.teal" | "mantine.colors.red" | "mantine.colors.green" | "mantine.colors.yellow" | "transparent" | "amber" | "amber.light" | "amber.light.a" | "amber.light.p3" | "amber.light.p3.a" | "amber.dark" | "amber.dark.a" | "amber.dark.p3" | "amber.dark.p3.a" | "amber.a" | "amber.p3" | "amber.p3.a" | "blue" | "blue.light" | "blue.light.a" | "blue.light.p3" | "blue.light.p3.a" | "blue.dark" | "blue.dark.a" | "blue.dark.p3" | "blue.dark.p3.a" | "blue.a" | "blue.p3" | "blue.p3.a" | "crimson" | "crimson.light" | "crimson.light.a" | "crimson.light.p3" | "crimson.light.p3.a" | "crimson.dark" | "crimson.dark.a" | "crimson.dark.p3" | "crimson.dark.p3.a" | "crimson.a" | "crimson.p3" | "crimson.p3.a" | "grass" | "grass.light" | "grass.light.a" | "grass.light.p3" | "grass.light.p3.a" | "grass.dark" | "grass.dark.a" | "grass.dark.p3" | "grass.dark.p3.a" | "grass.a" | "grass.p3" | "grass.p3.a" | "indigo" | "indigo.light" | "indigo.light.a" | "indigo.light.p3" | "indigo.light.p3.a" | "indigo.dark" | "indigo.dark.a" | "indigo.dark.p3" | "indigo.dark.p3.a" | "indigo.a" | "indigo.p3" | "indigo.p3.a" | "lime" | "lime.light" | "lime.light.a" | "lime.light.p3" | "lime.light.p3.a" | "lime.dark" | "lime.dark.a" | "lime.dark.p3" | "lime.dark.p3.a" | "lime.a" | "lime.p3" | "lime.p3.a" | "orange" | "orange.light" | "orange.light.a" | "orange.light.p3" | "orange.light.p3.a" | "orange.dark" | "orange.dark.a" | "orange.dark.p3" | "orange.dark.p3.a" | "orange.a" | "orange.p3" | "orange.p3.a" | "pink" | "pink.light" | "pink.light.a" | "pink.light.p3" | "pink.light.p3.a" | "pink.dark" | "pink.dark.a" | "pink.dark.p3" | "pink.dark.p3.a" | "pink.a" | "pink.p3" | "pink.p3.a" | "purple" | "purple.light" | "purple.light.a" | "purple.light.p3" | "purple.light.p3.a" | "purple.dark" | "purple.dark.a" | "purple.dark.p3" | "purple.dark.p3.a" | "purple.a" | "purple.p3" | "purple.p3.a" | "red" | "red.light" | "red.light.a" | "red.light.p3" | "red.light.p3.a" | "red.dark" | "red.dark.a" | "red.dark.p3" | "red.dark.p3.a" | "red.a" | "red.p3" | "red.p3.a" | "ruby" | "ruby.light" | "ruby.light.a" | "ruby.light.p3" | "ruby.light.p3.a" | "ruby.dark" | "ruby.dark.a" | "ruby.dark.p3" | "ruby.dark.p3.a" | "ruby.a" | "ruby.p3" | "ruby.p3.a" | "teal" | "teal.light" | "teal.light.a" | "teal.light.p3" | "teal.light.p3.a" | "teal.dark" | "teal.dark.a" | "teal.dark.p3" | "teal.dark.p3.a" | "teal.a" | "teal.p3" | "teal.p3.a" | "tomato" | "tomato.light" | "tomato.light.a" | "tomato.light.p3" | "tomato.light.p3.a" | "tomato.dark" | "tomato.dark.a" | "tomato.dark.p3" | "tomato.dark.p3.a" | "tomato.a" | "tomato.p3" | "tomato.p3.a" | "violet" | "violet.light" | "violet.light.a" | "violet.light.p3" | "violet.light.p3.a" | "violet.dark" | "violet.dark.a" | "violet.dark.p3" | "violet.dark.p3.a" | "violet.a" | "violet.p3" | "violet.p3.a" | "yellow" | "yellow.light" | "yellow.light.a" | "yellow.light.p3" | "yellow.light.p3.a" | "yellow.dark" | "yellow.dark.a" | "yellow.dark.p3" | "yellow.dark.p3.a" | "yellow.a" | "yellow.p3" | "yellow.p3.a" | "likec4" | "likec4.background" | "likec4.amber" | "likec4.amber.element" | "likec4.amber.relation.stroke" | "likec4.amber.relation" | "likec4.amber.relation.label" | "likec4.blue" | "likec4.blue.element" | "likec4.blue.relation.stroke" | "likec4.blue.relation" | "likec4.blue.relation.label" | "likec4.gray" | "likec4.gray.element" | "likec4.gray.relation.stroke" | "likec4.gray.relation" | "likec4.gray.relation.label" | "likec4.slate" | "likec4.slate.element" | "likec4.slate.relation.stroke" | "likec4.slate.relation" | "likec4.slate.relation.label" | "likec4.green" | "likec4.green.element" | "likec4.green.relation.stroke" | "likec4.green.relation" | "likec4.green.relation.label" | "likec4.indigo" | "likec4.indigo.element" | "likec4.indigo.relation.stroke" | "likec4.indigo.relation" | "likec4.indigo.relation.label" | "likec4.muted" | "likec4.muted.element" | "likec4.muted.relation.stroke" | "likec4.muted.relation" | "likec4.muted.relation.label" | "likec4.primary" | "likec4.primary.element" | "likec4.primary.relation.stroke" | "likec4.primary.relation" | "likec4.primary.relation.label" | "likec4.red" | "likec4.red.element" | "likec4.red.relation.stroke" | "likec4.red.relation" | "likec4.red.relation.label" | "likec4.secondary" | "likec4.secondary.element" | "likec4.secondary.relation.stroke" | "likec4.secondary.relation" | "likec4.secondary.relation.label" | "likec4.sky" | "likec4.sky.element" | "likec4.sky.relation.stroke" | "likec4.sky.relation" | "likec4.sky.relation.label" | "likec4.compound1" | "likec4.compound1.amber" | "likec4.compound1.blue" | "likec4.compound1.gray" | "likec4.compound1.slate" | "likec4.compound1.green" | "likec4.compound1.indigo" | "likec4.compound1.muted" | "likec4.compound1.primary" | "likec4.compound1.red" | "likec4.compound1.secondary" | "likec4.compound1.sky" | "likec4.compound2" | "likec4.compound2.amber" | "likec4.compound2.blue" | "likec4.compound2.gray" | "likec4.compound2.slate" | "likec4.compound2.green" | "likec4.compound2.indigo" | "likec4.compound2.muted" | "likec4.compound2.primary" | "likec4.compound2.red" | "likec4.compound2.secondary" | "likec4.compound2.sky" | "likec4.compound3" | "likec4.compound3.amber" | "likec4.compound3.blue" | "likec4.compound3.gray" | "likec4.compound3.slate" | "likec4.compound3.green" | "likec4.compound3.indigo" | "likec4.compound3.muted" | "likec4.compound3.primary" | "likec4.compound3.red" | "likec4.compound3.secondary" | "likec4.compound3.sky" | "likec4.compound4" | "likec4.compound4.amber" | "likec4.compound4.blue" | "likec4.compound4.gray" | "likec4.compound4.slate" | "likec4.compound4.green" | "likec4.compound4.indigo" | "likec4.compound4.muted" | "likec4.compound4.primary" | "likec4.compound4.red" | "likec4.compound4.secondary" | "likec4.compound4.sky" | "likec4.compound5" | "likec4.compound5.amber" | "likec4.compound5.blue" | "likec4.compound5.gray" | "likec4.compound5.slate" | "likec4.compound5.green" | "likec4.compound5.indigo" | "likec4.compound5.muted" | "likec4.compound5.primary" | "likec4.compound5.red" | "likec4.compound5.secondary" | "likec4.compound5.sky" | "likec4.tag.bg" | "likec4.tag" | "likec4.palette" | "likec4.relation.stroke" | "likec4.relation" | "likec4.relation.label";
-	textStyle: "likec4.node.primary" | "likec4.node.secondary";
-	layerStyle: "likec4.tag";
+	colorPalette: "mantine" | "mantine.colors.primary" | "mantine.colors" | "mantine.colors.gray" | "mantine.colors.dark" | "mantine.colors.orange" | "mantine.colors.teal" | "mantine.colors.red" | "mantine.colors.green" | "mantine.colors.yellow" | "transparent" | "amber" | "amber.light" | "amber.light.a" | "amber.light.p3" | "amber.light.p3.a" | "amber.dark" | "amber.dark.a" | "amber.dark.p3" | "amber.dark.p3.a" | "amber.a" | "amber.p3" | "amber.p3.a" | "blue" | "blue.light" | "blue.light.a" | "blue.light.p3" | "blue.light.p3.a" | "blue.dark" | "blue.dark.a" | "blue.dark.p3" | "blue.dark.p3.a" | "blue.a" | "blue.p3" | "blue.p3.a" | "crimson" | "crimson.light" | "crimson.light.a" | "crimson.light.p3" | "crimson.light.p3.a" | "crimson.dark" | "crimson.dark.a" | "crimson.dark.p3" | "crimson.dark.p3.a" | "crimson.a" | "crimson.p3" | "crimson.p3.a" | "grass" | "grass.light" | "grass.light.a" | "grass.light.p3" | "grass.light.p3.a" | "grass.dark" | "grass.dark.a" | "grass.dark.p3" | "grass.dark.p3.a" | "grass.a" | "grass.p3" | "grass.p3.a" | "indigo" | "indigo.light" | "indigo.light.a" | "indigo.light.p3" | "indigo.light.p3.a" | "indigo.dark" | "indigo.dark.a" | "indigo.dark.p3" | "indigo.dark.p3.a" | "indigo.a" | "indigo.p3" | "indigo.p3.a" | "lime" | "lime.light" | "lime.light.a" | "lime.light.p3" | "lime.light.p3.a" | "lime.dark" | "lime.dark.a" | "lime.dark.p3" | "lime.dark.p3.a" | "lime.a" | "lime.p3" | "lime.p3.a" | "orange" | "orange.light" | "orange.light.a" | "orange.light.p3" | "orange.light.p3.a" | "orange.dark" | "orange.dark.a" | "orange.dark.p3" | "orange.dark.p3.a" | "orange.a" | "orange.p3" | "orange.p3.a" | "pink" | "pink.light" | "pink.light.a" | "pink.light.p3" | "pink.light.p3.a" | "pink.dark" | "pink.dark.a" | "pink.dark.p3" | "pink.dark.p3.a" | "pink.a" | "pink.p3" | "pink.p3.a" | "purple" | "purple.light" | "purple.light.a" | "purple.light.p3" | "purple.light.p3.a" | "purple.dark" | "purple.dark.a" | "purple.dark.p3" | "purple.dark.p3.a" | "purple.a" | "purple.p3" | "purple.p3.a" | "red" | "red.light" | "red.light.a" | "red.light.p3" | "red.light.p3.a" | "red.dark" | "red.dark.a" | "red.dark.p3" | "red.dark.p3.a" | "red.a" | "red.p3" | "red.p3.a" | "ruby" | "ruby.light" | "ruby.light.a" | "ruby.light.p3" | "ruby.light.p3.a" | "ruby.dark" | "ruby.dark.a" | "ruby.dark.p3" | "ruby.dark.p3.a" | "ruby.a" | "ruby.p3" | "ruby.p3.a" | "teal" | "teal.light" | "teal.light.a" | "teal.light.p3" | "teal.light.p3.a" | "teal.dark" | "teal.dark.a" | "teal.dark.p3" | "teal.dark.p3.a" | "teal.a" | "teal.p3" | "teal.p3.a" | "tomato" | "tomato.light" | "tomato.light.a" | "tomato.light.p3" | "tomato.light.p3.a" | "tomato.dark" | "tomato.dark.a" | "tomato.dark.p3" | "tomato.dark.p3.a" | "tomato.a" | "tomato.p3" | "tomato.p3.a" | "violet" | "violet.light" | "violet.light.a" | "violet.light.p3" | "violet.light.p3.a" | "violet.dark" | "violet.dark.a" | "violet.dark.p3" | "violet.dark.p3.a" | "violet.a" | "violet.p3" | "violet.p3.a" | "yellow" | "yellow.light" | "yellow.light.a" | "yellow.light.p3" | "yellow.light.p3.a" | "yellow.dark" | "yellow.dark.a" | "yellow.dark.p3" | "yellow.dark.p3.a" | "yellow.a" | "yellow.p3" | "yellow.p3.a" | "likec4" | "likec4.background" | "likec4.tag.bg" | "likec4.tag" | "likec4.panel.bg" | "likec4.panel" | "likec4.panel.action-icon.text" | "likec4.panel.action-icon" | "likec4.panel.action-icon.bg" | "likec4.dropdown.bg" | "likec4.dropdown";
+	textStyle: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "likec4.node.primary" | "likec4.node.secondary";
+	layerStyle: "likec4.tag" | "likec4.panel" | "likec4.dropdown";
 	animationStyle: "indicator" | "xyedgeAnimated";
 }