@likec4/styles 1.34.1 → 1.35.0
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/css/conditions.mjs +1 -1
- package/dist/jsx/is-valid-prop.mjs +1 -1
- package/dist/recipes/action-btn.d.ts +1 -1
- package/dist/recipes/element-node-data.d.ts +33 -0
- package/dist/recipes/element-node-data.mjs +81 -0
- package/dist/recipes/element-node-icon.d.ts +30 -0
- package/dist/recipes/element-node-icon.mjs +24 -0
- package/dist/recipes/index.d.ts +5 -1
- package/dist/recipes/index.mjs +5 -1
- package/dist/recipes/markdown-block.d.ts +3 -1
- package/dist/recipes/navigation-link.d.ts +33 -0
- package/dist/recipes/navigation-link.mjs +57 -0
- package/dist/recipes/navigation-panel-action-icon.d.ts +33 -0
- package/dist/recipes/navigation-panel-action-icon.mjs +31 -0
- package/dist/styles.css +306 -71
- package/dist/tokens/index.mjs +140 -20
- package/dist/tokens/tokens.d.ts +2 -2
- package/dist/types/conditions.d.ts +2 -0
- package/dist/types/prop-type.d.ts +2 -2
- package/dist/types/style-props.d.ts +2 -2
- package/package.json +7 -7
- package/preset.mjs +617 -25
|
@@ -212,6 +212,8 @@ export interface Conditions {
|
|
|
212
212
|
"_icon": string
|
|
213
213
|
/** `@starting-style` */
|
|
214
214
|
"_starting": string
|
|
215
|
+
/** `&:not(:is(:disabled, [disabled], [data-disabled]))` */
|
|
216
|
+
"_notDisabled": string
|
|
215
217
|
/** `.likec4-root:is([data-likec4-reduced-graphics]) &` */
|
|
216
218
|
"_reduceGraphics": string
|
|
217
219
|
/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) &` */
|
|
@@ -185,9 +185,9 @@ export interface UtilityValues {
|
|
|
185
185
|
debug: boolean;
|
|
186
186
|
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";
|
|
187
187
|
likec4RelationPalette: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
|
|
188
|
-
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.
|
|
188
|
+
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.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.background" | "likec4.tag.bg" | "likec4.tag" | "likec4.palette" | "likec4.relation.stroke" | "likec4.relation" | "likec4.relation.label" | "likec4.panel.bg" | "likec4.panel" | "likec4.panel.action-icon.text" | "likec4.panel.action-icon" | "likec4.panel.action-icon.bg" | "likec4.dropdown.bg" | "likec4.dropdown";
|
|
189
189
|
textStyle: "likec4.node.primary" | "likec4.node.secondary";
|
|
190
|
-
layerStyle: "likec4.tag";
|
|
190
|
+
layerStyle: "likec4.tag" | "likec4.panel" | "likec4.dropdown";
|
|
191
191
|
animationStyle: "indicator" | "xyedgeAnimated";
|
|
192
192
|
}
|
|
193
193
|
|
|
@@ -5,10 +5,10 @@ import type { CssProperties } from './system-types';
|
|
|
5
5
|
import type { Token } from '../tokens/index';
|
|
6
6
|
|
|
7
7
|
type AnyString = (string & {})
|
|
8
|
-
type CssVars = "var(--likec4-palette)" | "var(--likec4-text-size)" | "var(--likec4-spacing)"
|
|
8
|
+
type CssVars = "var(--likec4-palette)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--likec4-icon-size)"
|
|
9
9
|
type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
|
|
10
10
|
|
|
11
|
-
type CssVarKeys = "--likec4-palette" | "--likec4-text-size" | "--likec4-spacing" | `--${string}` & {}
|
|
11
|
+
type CssVarKeys = "--likec4-palette" | "--likec4-text-size" | "--likec4-spacing" | "--likec4-icon-size" | `--${string}` & {}
|
|
12
12
|
|
|
13
13
|
export type CssVarProperties = {
|
|
14
14
|
[key in CssVarKeys]?: CssVarValue
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@likec4/styles",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.35.0",
|
|
5
5
|
"bugs": "https://github.com/likec4/likec4/issues",
|
|
6
6
|
"homepage": "https://likec4.dev",
|
|
7
7
|
"author": "Denis Davydkov <denis@davydkov.com>",
|
|
@@ -65,20 +65,20 @@
|
|
|
65
65
|
}
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@types/node": "~20.19.
|
|
68
|
+
"@types/node": "~20.19.2",
|
|
69
69
|
"@pandabox/panda-plugins": "^0.0.8",
|
|
70
70
|
"@pandabox/utils": "^0.0.5",
|
|
71
71
|
"@pandabox/unplugin": "^0.2.2",
|
|
72
|
-
"@types/picomatch": "^4.0.
|
|
73
|
-
"@types/react": "19.1.
|
|
74
|
-
"@types/react-dom": "19.1.
|
|
72
|
+
"@types/picomatch": "^4.0.2",
|
|
73
|
+
"@types/react": "19.1.9",
|
|
74
|
+
"@types/react-dom": "19.1.7",
|
|
75
75
|
"@pandacss/dev": "^0.54.0",
|
|
76
76
|
"postcss": "8.5.5",
|
|
77
77
|
"nano-spawn": "^1.0.2",
|
|
78
78
|
"unbuild": "3.5.0",
|
|
79
79
|
"typescript": "5.8.3",
|
|
80
|
-
"@likec4/style-preset": "1.
|
|
81
|
-
"@likec4/tsconfig": "1.
|
|
80
|
+
"@likec4/style-preset": "1.35.0",
|
|
81
|
+
"@likec4/tsconfig": "1.35.0"
|
|
82
82
|
},
|
|
83
83
|
"scripts": {
|
|
84
84
|
"typecheck": "tsc --build --verbose",
|