@likec4/styles 1.31.0 → 1.32.0

package/dist/types/conditions.d.ts

@@ -258,6 +258,12 @@ export interface Conditions {
 	"_shapeStorage": string
 	/** `:where([data-likec4-shape='queue']) &` */
 	"_shapeQueue": string
+	/** `@media (color-gamut: p3)` */
+	"_p3": string
+	/** `@media (color-gamut: srgb)` */
+	"_srgb": string
+	/** `@media (color-gamut: rec2020)` */
+	"_rec2020": string
 	/** `@media screen and (min-width: 36rem)` */
 	"xs": string
 	/** `@media screen and (min-width: 36rem) and (max-width: 47.9975rem)` */

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

@@ -185,8 +185,9 @@ export interface UtilityValues {
 	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" | "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.palette" | "likec4.relation.stroke" | "likec4.relation" | "likec4.relation.label";
+	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";
 	animationStyle: "indicator" | "xyedgeAnimated";
 }
 

package/dist/types/style-props.d.ts

@@ -7490,6 +7490,7 @@ scrollSnapMarginRight?: ConditionalValue<UtilityValues["scrollSnapMarginRight"]
  likec4RelationPalette?: ConditionalValue<UtilityValues["likec4RelationPalette"] | CssVars | CssProperties["likec4RelationPalette"]>
  colorPalette?: ConditionalValue<UtilityValues["colorPalette"] | CssVars | CssProperties["colorPalette"]>
  textStyle?: ConditionalValue<UtilityValues["textStyle"] | CssVars | CssProperties["textStyle"]>
+ layerStyle?: ConditionalValue<UtilityValues["layerStyle"] | CssVars | CssProperties["layerStyle"]>
  animationStyle?: ConditionalValue<UtilityValues["animationStyle"] | CssVars | CssProperties["animationStyle"]>
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likec4/styles",
   "license": "MIT",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -66,18 +66,18 @@
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.1",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.3",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
     "@pandacss/dev": "^0.53.6",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "nano-spawn": "^1.0.2",
     "unbuild": "^3.5.0",
     "typescript": "^5.8.3",
-    "@likec4/style-preset": "1.31.0",
-    "@likec4/tsconfig": "1.31.0"
+    "@likec4/style-preset": "1.32.0",
+    "@likec4/tsconfig": "1.32.0"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --build --verbose",
     "build": "unbuild",
     "generate": "panda codegen && panda cssgen",
     "emit-pkg": "panda emit-pkg --base dist"

package/postcss.d.mts

@@ -1,6 +1,6 @@
 import { type PluginOptions } from '@pandacss/dev/postcss'
-import type { PluginCreator } from 'postcss'
+import type * as postcss from 'postcss'
 
-declare const pandaCss: PluginCreator<PluginOptions>
+declare function pandaCss(options?: PluginOptions): postcss.Plugin
 
 export { pandaCss as default }

package/preset.d.mts

@@ -1,9 +1,8 @@
-import * as _pandacss_dev from '@pandacss/dev';
-import { Config } from '@pandacss/dev';
+import { Config, Preset } from '@pandacss/dev';
 
 type ExtendableTheme = NonNullable<Config['theme']>;
 declare const theme: ExtendableTheme;
 
-declare const _default: _pandacss_dev.Preset;
+declare const _default: Preset;
 
 export { _default as default, theme };