@likec4/styles 1.43.0 → 1.45.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.
@@ -4,6 +4,10 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
4
4
 
5
5
  interface EdgeLabelVariant {
6
6
  /**
7
+ * @default "all"
8
+ */
9
+ pointerEvents: "none" | "all"
10
+ /**
7
11
  * @default "default"
8
12
  */
9
13
  cursor: "pointer" | "default"
@@ -2,6 +2,7 @@ import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mj
2
2
  import { createRecipe } from './create-recipe.mjs';
3
3
 
4
4
  const edgeLabelDefaultVariants = {
5
+ "pointerEvents": "all",
5
6
  "isStepEdge": false,
6
7
  "cursor": "default"
7
8
  }
@@ -36,6 +37,7 @@ const edgeLabelFn = memo((props = {}) => {
36
37
  })
37
38
 
38
39
  const edgeLabelVariantKeys = [
40
+ "pointerEvents",
39
41
  "cursor",
40
42
  "isStepEdge"
41
43
  ]
@@ -48,6 +50,10 @@ export const edgeLabel = /* @__PURE__ */ Object.assign(edgeLabelFn, {
48
50
  classNameMap: {},
49
51
  variantKeys: edgeLabelVariantKeys,
50
52
  variantMap: {
53
+ "pointerEvents": [
54
+ "none",
55
+ "all"
56
+ ],
51
57
  "cursor": [
52
58
  "pointer",
53
59
  "default"
@@ -7,6 +7,10 @@ interface NavigationPanelActionIconVariant {
7
7
  * @default "default"
8
8
  */
9
9
  variant: "default" | "filled"
10
+ /**
11
+ * @default "default"
12
+ */
13
+ type: "default" | "warning"
10
14
  }
11
15
 
12
16
  type NavigationPanelActionIconVariantMap = {
@@ -16,7 +20,7 @@ type NavigationPanelActionIconVariantMap = {
16
20
 
17
21
 
18
22
  export type NavigationPanelActionIconVariantProps = {
19
- [key in keyof NavigationPanelActionIconVariant]?: ConditionalValue<NavigationPanelActionIconVariant[key]> | undefined
23
+ [key in keyof NavigationPanelActionIconVariant]?: NavigationPanelActionIconVariant[key] | undefined
20
24
  }
21
25
 
22
26
  export interface NavigationPanelActionIconRecipe {
@@ -2,13 +2,29 @@ import { memo, splitProps } from '../helpers.mjs';
2
2
  import { createRecipe, mergeRecipes } from './create-recipe.mjs';
3
3
 
4
4
  const navigationPanelActionIconFn = /* @__PURE__ */ createRecipe('likec4-navigation-panel-icon', {
5
- "variant": "default"
6
- }, [])
5
+ "variant": "default",
6
+ "type": "default"
7
+ }, [
8
+ {
9
+ "type": "warning",
10
+ "variant": "filled",
11
+ "css": {
12
+ "backgroundColor": {
13
+ "base": "likec4.panel.action.warning.bg",
14
+ "_hover": "likec4.panel.action.warning.bg.hover"
15
+ }
16
+ }
17
+ }
18
+ ])
7
19
 
8
20
  const navigationPanelActionIconVariantMap = {
9
21
  "variant": [
10
22
  "default",
11
23
  "filled"
24
+ ],
25
+ "type": [
26
+ "default",
27
+ "warning"
12
28
  ]
13
29
  }
14
30
 
@@ -799,6 +799,34 @@ const tokens = {
799
799
  "value": "none",
800
800
  "variable": "var(--colors-none)"
801
801
  },
802
+ "sizes.100%": {
803
+ "value": "100%",
804
+ "variable": "var(--sizes-100\\%)"
805
+ },
806
+ "sizes.full": {
807
+ "value": "100%",
808
+ "variable": "var(--sizes-full)"
809
+ },
810
+ "sizes.breakpoint-xs": {
811
+ "value": "36em",
812
+ "variable": "var(--sizes-breakpoint-xs)"
813
+ },
814
+ "sizes.breakpoint-sm": {
815
+ "value": "48em",
816
+ "variable": "var(--sizes-breakpoint-sm)"
817
+ },
818
+ "sizes.breakpoint-md": {
819
+ "value": "62em",
820
+ "variable": "var(--sizes-breakpoint-md)"
821
+ },
822
+ "sizes.breakpoint-lg": {
823
+ "value": "75em",
824
+ "variable": "var(--sizes-breakpoint-lg)"
825
+ },
826
+ "sizes.breakpoint-xl": {
827
+ "value": "88em",
828
+ "variable": "var(--sizes-breakpoint-xl)"
829
+ },
802
830
  "borders.none": {
803
831
  "value": "none",
804
832
  "variable": "var(--borders-none)"
@@ -808,7 +836,7 @@ const tokens = {
808
836
  "variable": "var(--borders-transparent)"
809
837
  },
810
838
  "borders.default": {
811
- "value": "1px solid var(--colors-mantine-colors-default-border)",
839
+ "value": "1px solid var(--mantine-color-default-border)",
812
840
  "variable": "var(--borders-default)"
813
841
  },
814
842
  "radii.0": {
@@ -835,6 +863,14 @@ const tokens = {
835
863
  "value": "2rem",
836
864
  "variable": "var(--radii-xl)"
837
865
  },
866
+ "fontWeights.normal": {
867
+ "value": "400",
868
+ "variable": "var(--font-weights-normal)"
869
+ },
870
+ "fontWeights.medium": {
871
+ "value": "500",
872
+ "variable": "var(--font-weights-medium)"
873
+ },
838
874
  "fonts.mono": {
839
875
  "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
840
876
  "variable": "var(--fonts-mono)"
@@ -927,6 +963,26 @@ const tokens = {
927
963
  "value": "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)",
928
964
  "variable": "var(--shadows-xl)"
929
965
  },
966
+ "zIndex.0": {
967
+ "value": "0",
968
+ "variable": "var(--z-index-0)"
969
+ },
970
+ "zIndex.1": {
971
+ "value": "1",
972
+ "variable": "var(--z-index-1)"
973
+ },
974
+ "zIndex.-1": {
975
+ "value": "-1",
976
+ "variable": "var(--z-index--1)"
977
+ },
978
+ "zIndex.likec4.panel": {
979
+ "value": "100",
980
+ "variable": "var(--z-index-likec4-panel)"
981
+ },
982
+ "zIndex.likec4.dropdown": {
983
+ "value": "200",
984
+ "variable": "var(--z-index-likec4-dropdown)"
985
+ },
930
986
  "breakpoints.xs": {
931
987
  "value": "36em",
932
988
  "variable": "var(--breakpoints-xs)"
@@ -947,26 +1003,6 @@ const tokens = {
947
1003
  "value": "88em",
948
1004
  "variable": "var(--breakpoints-xl)"
949
1005
  },
950
- "sizes.breakpoint-xs": {
951
- "value": "36em",
952
- "variable": "var(--sizes-breakpoint-xs)"
953
- },
954
- "sizes.breakpoint-sm": {
955
- "value": "48em",
956
- "variable": "var(--sizes-breakpoint-sm)"
957
- },
958
- "sizes.breakpoint-md": {
959
- "value": "62em",
960
- "variable": "var(--sizes-breakpoint-md)"
961
- },
962
- "sizes.breakpoint-lg": {
963
- "value": "75em",
964
- "variable": "var(--sizes-breakpoint-lg)"
965
- },
966
- "sizes.breakpoint-xl": {
967
- "value": "88em",
968
- "variable": "var(--sizes-breakpoint-xl)"
969
- },
970
1006
  "colors.amber.1": {
971
1007
  "value": "var(--colors-amber-1)",
972
1008
  "variable": "var(--colors-amber-1)"
@@ -9635,25 +9671,49 @@ const tokens = {
9635
9671
  "value": "var(--colors-likec4-panel-border)",
9636
9672
  "variable": "var(--colors-likec4-panel-border)"
9637
9673
  },
9638
- "colors.likec4.panel.action-icon.text": {
9639
- "value": "color-mix(in srgb, var(--mantine-color-text) 80%, transparent)",
9640
- "variable": "var(--colors-likec4-panel-action-icon-text)"
9674
+ "colors.likec4.panel.text": {
9675
+ "value": "color-mix(in oklab, var(--mantine-color-text) 85%, transparent 15%)",
9676
+ "variable": "var(--colors-likec4-panel-text)"
9641
9677
  },
9642
- "colors.likec4.panel.action-icon.text.hover": {
9643
- "value": "var(--mantine-color-bright)",
9644
- "variable": "var(--colors-likec4-panel-action-icon-text-hover)"
9678
+ "colors.likec4.panel.text.dimmed": {
9679
+ "value": "var(--mantine-color-dimmed)",
9680
+ "variable": "var(--colors-likec4-panel-text-dimmed)"
9645
9681
  },
9646
- "colors.likec4.panel.action-icon.text.disabled": {
9682
+ "colors.likec4.panel.action": {
9683
+ "value": "color-mix(in oklab, var(--mantine-color-text) 90%, transparent 10%)",
9684
+ "variable": "var(--colors-likec4-panel-action)"
9685
+ },
9686
+ "colors.likec4.panel.action.disabled": {
9647
9687
  "value": "var(--mantine-color-dimmed)",
9648
- "variable": "var(--colors-likec4-panel-action-icon-text-disabled)"
9688
+ "variable": "var(--colors-likec4-panel-action-disabled)"
9649
9689
  },
9650
- "colors.likec4.panel.action-icon.bg": {
9651
- "value": "var(--colors-likec4-panel-action-icon-bg)",
9652
- "variable": "var(--colors-likec4-panel-action-icon-bg)"
9690
+ "colors.likec4.panel.action.hover": {
9691
+ "value": "var(--mantine-color-bright)",
9692
+ "variable": "var(--colors-likec4-panel-action-hover)"
9653
9693
  },
9654
- "colors.likec4.panel.action-icon.bg.hover": {
9655
- "value": "var(--colors-likec4-panel-action-icon-bg-hover)",
9656
- "variable": "var(--colors-likec4-panel-action-icon-bg-hover)"
9694
+ "colors.likec4.panel.action.bg": {
9695
+ "value": "var(--colors-likec4-panel-action-bg)",
9696
+ "variable": "var(--colors-likec4-panel-action-bg)"
9697
+ },
9698
+ "colors.likec4.panel.action.bg.hover": {
9699
+ "value": "var(--colors-likec4-panel-action-bg-hover)",
9700
+ "variable": "var(--colors-likec4-panel-action-bg-hover)"
9701
+ },
9702
+ "colors.likec4.panel.action.warning": {
9703
+ "value": "var(--mantine-color-orange-6)",
9704
+ "variable": "var(--colors-likec4-panel-action-warning)"
9705
+ },
9706
+ "colors.likec4.panel.action.warning.hover": {
9707
+ "value": "var(--colors-likec4-panel-action-warning-hover)",
9708
+ "variable": "var(--colors-likec4-panel-action-warning-hover)"
9709
+ },
9710
+ "colors.likec4.panel.action.warning.bg": {
9711
+ "value": "var(--colors-likec4-panel-action-warning-bg)",
9712
+ "variable": "var(--colors-likec4-panel-action-warning-bg)"
9713
+ },
9714
+ "colors.likec4.panel.action.warning.bg.hover": {
9715
+ "value": "var(--colors-likec4-panel-action-warning-bg-hover)",
9716
+ "variable": "var(--colors-likec4-panel-action-warning-bg-hover)"
9657
9717
  },
9658
9718
  "colors.likec4.dropdown.bg": {
9659
9719
  "value": "var(--colors-likec4-dropdown-bg)",
@@ -9672,9 +9732,13 @@ const tokens = {
9672
9732
  "variable": "var(--colors-likec4-overlay-body)"
9673
9733
  },
9674
9734
  "colors.likec4.overlay.border": {
9675
- "value": "color-mix(in srgb, var(--colors-mantine-colors-default-border) 50%, transparent)",
9735
+ "value": "color-mix(in oklab, var(--mantine-color-default-border) 50%, transparent 50%)",
9676
9736
  "variable": "var(--colors-likec4-overlay-border)"
9677
9737
  },
9738
+ "colors.likec4.compare.latest": {
9739
+ "value": "var(--mantine-color-green-6)",
9740
+ "variable": "var(--colors-likec4-compare-latest)"
9741
+ },
9678
9742
  "spacing.-0": {
9679
9743
  "value": "calc(var(--spacing-0) * -1)",
9680
9744
  "variable": "var(--spacing-0)"
@@ -9791,6 +9855,14 @@ const tokens = {
9791
9855
  "value": "var(--colors-likec4-mix-color)",
9792
9856
  "variable": "var(--colors-likec4-mix-color)"
9793
9857
  },
9858
+ "colors.likec4.compare.manual": {
9859
+ "value": "var(--colors-likec4-compare-manual)",
9860
+ "variable": "var(--colors-likec4-compare-manual)"
9861
+ },
9862
+ "colors.likec4.compare.manual.outline": {
9863
+ "value": "var(--colors-likec4-compare-manual-outline)",
9864
+ "variable": "var(--colors-likec4-compare-manual-outline)"
9865
+ },
9794
9866
  "colors.colorPalette.colors.primary": {
9795
9867
  "value": "var(--colors-color-palette-colors-primary)",
9796
9868
  "variable": "var(--colors-color-palette-colors-primary)"
@@ -11687,57 +11759,109 @@ const tokens = {
11687
11759
  "value": "var(--colors-color-palette-panel-border)",
11688
11760
  "variable": "var(--colors-color-palette-panel-border)"
11689
11761
  },
11690
- "colors.colorPalette.panel.action-icon.text": {
11691
- "value": "var(--colors-color-palette-panel-action-icon-text)",
11692
- "variable": "var(--colors-color-palette-panel-action-icon-text)"
11762
+ "colors.colorPalette.panel.text": {
11763
+ "value": "var(--colors-color-palette-panel-text)",
11764
+ "variable": "var(--colors-color-palette-panel-text)"
11693
11765
  },
11694
- "colors.colorPalette.action-icon.text": {
11695
- "value": "var(--colors-color-palette-action-icon-text)",
11696
- "variable": "var(--colors-color-palette-action-icon-text)"
11766
+ "colors.colorPalette.panel.text.dimmed": {
11767
+ "value": "var(--colors-color-palette-panel-text-dimmed)",
11768
+ "variable": "var(--colors-color-palette-panel-text-dimmed)"
11697
11769
  },
11698
- "colors.colorPalette.panel.action-icon.text.hover": {
11699
- "value": "var(--colors-color-palette-panel-action-icon-text-hover)",
11700
- "variable": "var(--colors-color-palette-panel-action-icon-text-hover)"
11770
+ "colors.colorPalette.text.dimmed": {
11771
+ "value": "var(--colors-color-palette-text-dimmed)",
11772
+ "variable": "var(--colors-color-palette-text-dimmed)"
11701
11773
  },
11702
- "colors.colorPalette.action-icon.text.hover": {
11703
- "value": "var(--colors-color-palette-action-icon-text-hover)",
11704
- "variable": "var(--colors-color-palette-action-icon-text-hover)"
11774
+ "colors.colorPalette.panel.action": {
11775
+ "value": "var(--colors-color-palette-panel-action)",
11776
+ "variable": "var(--colors-color-palette-panel-action)"
11705
11777
  },
11706
- "colors.colorPalette.text.hover": {
11707
- "value": "var(--colors-color-palette-text-hover)",
11708
- "variable": "var(--colors-color-palette-text-hover)"
11778
+ "colors.colorPalette.action": {
11779
+ "value": "var(--colors-color-palette-action)",
11780
+ "variable": "var(--colors-color-palette-action)"
11709
11781
  },
11710
- "colors.colorPalette.panel.action-icon.text.disabled": {
11711
- "value": "var(--colors-color-palette-panel-action-icon-text-disabled)",
11712
- "variable": "var(--colors-color-palette-panel-action-icon-text-disabled)"
11782
+ "colors.colorPalette.panel.action.disabled": {
11783
+ "value": "var(--colors-color-palette-panel-action-disabled)",
11784
+ "variable": "var(--colors-color-palette-panel-action-disabled)"
11713
11785
  },
11714
- "colors.colorPalette.action-icon.text.disabled": {
11715
- "value": "var(--colors-color-palette-action-icon-text-disabled)",
11716
- "variable": "var(--colors-color-palette-action-icon-text-disabled)"
11717
- },
11718
- "colors.colorPalette.text.disabled": {
11719
- "value": "var(--colors-color-palette-text-disabled)",
11720
- "variable": "var(--colors-color-palette-text-disabled)"
11786
+ "colors.colorPalette.action.disabled": {
11787
+ "value": "var(--colors-color-palette-action-disabled)",
11788
+ "variable": "var(--colors-color-palette-action-disabled)"
11721
11789
  },
11722
11790
  "colors.colorPalette.disabled": {
11723
11791
  "value": "var(--colors-color-palette-disabled)",
11724
11792
  "variable": "var(--colors-color-palette-disabled)"
11725
11793
  },
11726
- "colors.colorPalette.panel.action-icon.bg": {
11727
- "value": "var(--colors-color-palette-panel-action-icon-bg)",
11728
- "variable": "var(--colors-color-palette-panel-action-icon-bg)"
11794
+ "colors.colorPalette.panel.action.hover": {
11795
+ "value": "var(--colors-color-palette-panel-action-hover)",
11796
+ "variable": "var(--colors-color-palette-panel-action-hover)"
11797
+ },
11798
+ "colors.colorPalette.action.hover": {
11799
+ "value": "var(--colors-color-palette-action-hover)",
11800
+ "variable": "var(--colors-color-palette-action-hover)"
11801
+ },
11802
+ "colors.colorPalette.panel.action.bg": {
11803
+ "value": "var(--colors-color-palette-panel-action-bg)",
11804
+ "variable": "var(--colors-color-palette-panel-action-bg)"
11805
+ },
11806
+ "colors.colorPalette.action.bg": {
11807
+ "value": "var(--colors-color-palette-action-bg)",
11808
+ "variable": "var(--colors-color-palette-action-bg)"
11809
+ },
11810
+ "colors.colorPalette.panel.action.bg.hover": {
11811
+ "value": "var(--colors-color-palette-panel-action-bg-hover)",
11812
+ "variable": "var(--colors-color-palette-panel-action-bg-hover)"
11813
+ },
11814
+ "colors.colorPalette.action.bg.hover": {
11815
+ "value": "var(--colors-color-palette-action-bg-hover)",
11816
+ "variable": "var(--colors-color-palette-action-bg-hover)"
11817
+ },
11818
+ "colors.colorPalette.panel.action.warning": {
11819
+ "value": "var(--colors-color-palette-panel-action-warning)",
11820
+ "variable": "var(--colors-color-palette-panel-action-warning)"
11821
+ },
11822
+ "colors.colorPalette.action.warning": {
11823
+ "value": "var(--colors-color-palette-action-warning)",
11824
+ "variable": "var(--colors-color-palette-action-warning)"
11825
+ },
11826
+ "colors.colorPalette.warning": {
11827
+ "value": "var(--colors-color-palette-warning)",
11828
+ "variable": "var(--colors-color-palette-warning)"
11829
+ },
11830
+ "colors.colorPalette.panel.action.warning.hover": {
11831
+ "value": "var(--colors-color-palette-panel-action-warning-hover)",
11832
+ "variable": "var(--colors-color-palette-panel-action-warning-hover)"
11833
+ },
11834
+ "colors.colorPalette.action.warning.hover": {
11835
+ "value": "var(--colors-color-palette-action-warning-hover)",
11836
+ "variable": "var(--colors-color-palette-action-warning-hover)"
11729
11837
  },
11730
- "colors.colorPalette.action-icon.bg": {
11731
- "value": "var(--colors-color-palette-action-icon-bg)",
11732
- "variable": "var(--colors-color-palette-action-icon-bg)"
11838
+ "colors.colorPalette.warning.hover": {
11839
+ "value": "var(--colors-color-palette-warning-hover)",
11840
+ "variable": "var(--colors-color-palette-warning-hover)"
11733
11841
  },
11734
- "colors.colorPalette.panel.action-icon.bg.hover": {
11735
- "value": "var(--colors-color-palette-panel-action-icon-bg-hover)",
11736
- "variable": "var(--colors-color-palette-panel-action-icon-bg-hover)"
11842
+ "colors.colorPalette.panel.action.warning.bg": {
11843
+ "value": "var(--colors-color-palette-panel-action-warning-bg)",
11844
+ "variable": "var(--colors-color-palette-panel-action-warning-bg)"
11737
11845
  },
11738
- "colors.colorPalette.action-icon.bg.hover": {
11739
- "value": "var(--colors-color-palette-action-icon-bg-hover)",
11740
- "variable": "var(--colors-color-palette-action-icon-bg-hover)"
11846
+ "colors.colorPalette.action.warning.bg": {
11847
+ "value": "var(--colors-color-palette-action-warning-bg)",
11848
+ "variable": "var(--colors-color-palette-action-warning-bg)"
11849
+ },
11850
+ "colors.colorPalette.warning.bg": {
11851
+ "value": "var(--colors-color-palette-warning-bg)",
11852
+ "variable": "var(--colors-color-palette-warning-bg)"
11853
+ },
11854
+ "colors.colorPalette.panel.action.warning.bg.hover": {
11855
+ "value": "var(--colors-color-palette-panel-action-warning-bg-hover)",
11856
+ "variable": "var(--colors-color-palette-panel-action-warning-bg-hover)"
11857
+ },
11858
+ "colors.colorPalette.action.warning.bg.hover": {
11859
+ "value": "var(--colors-color-palette-action-warning-bg-hover)",
11860
+ "variable": "var(--colors-color-palette-action-warning-bg-hover)"
11861
+ },
11862
+ "colors.colorPalette.warning.bg.hover": {
11863
+ "value": "var(--colors-color-palette-warning-bg-hover)",
11864
+ "variable": "var(--colors-color-palette-warning-bg-hover)"
11741
11865
  },
11742
11866
  "colors.colorPalette.dropdown.bg": {
11743
11867
  "value": "var(--colors-color-palette-dropdown-bg)",
@@ -11762,6 +11886,30 @@ const tokens = {
11762
11886
  "colors.colorPalette.overlay.border": {
11763
11887
  "value": "var(--colors-color-palette-overlay-border)",
11764
11888
  "variable": "var(--colors-color-palette-overlay-border)"
11889
+ },
11890
+ "colors.colorPalette.compare.manual": {
11891
+ "value": "var(--colors-color-palette-compare-manual)",
11892
+ "variable": "var(--colors-color-palette-compare-manual)"
11893
+ },
11894
+ "colors.colorPalette.manual": {
11895
+ "value": "var(--colors-color-palette-manual)",
11896
+ "variable": "var(--colors-color-palette-manual)"
11897
+ },
11898
+ "colors.colorPalette.compare.manual.outline": {
11899
+ "value": "var(--colors-color-palette-compare-manual-outline)",
11900
+ "variable": "var(--colors-color-palette-compare-manual-outline)"
11901
+ },
11902
+ "colors.colorPalette.manual.outline": {
11903
+ "value": "var(--colors-color-palette-manual-outline)",
11904
+ "variable": "var(--colors-color-palette-manual-outline)"
11905
+ },
11906
+ "colors.colorPalette.compare.latest": {
11907
+ "value": "var(--colors-color-palette-compare-latest)",
11908
+ "variable": "var(--colors-color-palette-compare-latest)"
11909
+ },
11910
+ "colors.colorPalette.latest": {
11911
+ "value": "var(--colors-color-palette-latest)",
11912
+ "variable": "var(--colors-color-palette-latest)"
11765
11913
  }
11766
11914
  }
11767
11915