@likec4/styles 1.34.2 → 1.36.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.
Files changed (30) hide show
  1. package/dev.ts +24 -1
  2. package/dist/css/conditions.mjs +1 -1
  3. package/dist/css/css.mjs +1 -1
  4. package/dist/jsx/is-valid-prop.mjs +1 -1
  5. package/dist/recipes/action-btn.d.ts +1 -1
  6. package/dist/recipes/edge-action-btn.d.ts +30 -0
  7. package/dist/recipes/edge-action-btn.mjs +24 -0
  8. package/dist/recipes/edge-label.d.ts +31 -0
  9. package/dist/recipes/edge-label.mjs +57 -0
  10. package/dist/recipes/element-node-data.d.ts +33 -0
  11. package/dist/recipes/element-node-data.mjs +81 -0
  12. package/dist/recipes/element-node-icon.d.ts +30 -0
  13. package/dist/recipes/element-node-icon.mjs +24 -0
  14. package/dist/recipes/index.d.ts +7 -1
  15. package/dist/recipes/index.mjs +7 -1
  16. package/dist/recipes/markdown-block.d.ts +3 -1
  17. package/dist/recipes/navigation-link.d.ts +33 -0
  18. package/dist/recipes/navigation-link.mjs +57 -0
  19. package/dist/recipes/navigation-panel-action-icon.d.ts +33 -0
  20. package/dist/recipes/navigation-panel-action-icon.mjs +31 -0
  21. package/dist/styles.css +4230 -1156
  22. package/dist/tokens/index.mjs +1760 -4304
  23. package/dist/tokens/tokens.d.ts +12 -12
  24. package/dist/types/conditions.d.ts +48 -22
  25. package/dist/types/prop-type.d.ts +4 -6
  26. package/dist/types/style-props.d.ts +119 -121
  27. package/package.json +9 -8
  28. package/panda.config.ts +3 -0
  29. package/preset.d.mts +1129 -3
  30. package/preset.mjs +1603 -2462
package/preset.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { definePreset, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles, defineUtility } from '@pandacss/dev';
1
+ import { definePreset, defineSlotRecipe, defineRecipe, defineSemanticTokens, defineTokens, defineLayerStyles, defineTextStyles } from '@pandacss/dev';
2
2
 
3
3
  const grayDark = {
4
4
  gray1: "#111111",
@@ -3948,8 +3948,6 @@ function createPreset(options) {
3948
3948
  });
3949
3949
  }
3950
3950
  const root = ".likec4-root";
3951
- const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
3952
- const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
3953
3951
  const radixColors = [
3954
3952
  "yellow",
3955
3953
  "orange",
@@ -3968,2289 +3966,788 @@ const radixColors = [
3968
3966
  "grass",
3969
3967
  "lime"
3970
3968
  ];
3971
- const themeColors = [
3972
- "amber",
3973
- "blue",
3974
- "gray",
3975
- "slate",
3976
- "green",
3977
- "indigo",
3978
- "muted",
3979
- "primary",
3980
- "red",
3981
- "secondary",
3982
- "sky"
3983
- ];
3984
- const compoundColors = [
3985
- "amber.1",
3986
- "amber.2",
3987
- "amber.3",
3988
- "amber.4",
3989
- "amber.5",
3990
- "blue.1",
3991
- "blue.2",
3992
- "blue.3",
3993
- "blue.4",
3994
- "blue.5",
3995
- "gray.1",
3996
- "gray.2",
3997
- "gray.3",
3998
- "gray.4",
3999
- "gray.5",
4000
- "slate.1",
4001
- "slate.2",
4002
- "slate.3",
4003
- "slate.4",
4004
- "slate.5",
4005
- "green.1",
4006
- "green.2",
4007
- "green.3",
4008
- "green.4",
4009
- "green.5",
4010
- "indigo.1",
4011
- "indigo.2",
4012
- "indigo.3",
4013
- "indigo.4",
4014
- "indigo.5",
4015
- "muted.1",
4016
- "muted.2",
4017
- "muted.3",
4018
- "muted.4",
4019
- "muted.5",
4020
- "primary.1",
4021
- "primary.2",
4022
- "primary.3",
4023
- "primary.4",
4024
- "primary.5",
4025
- "red.1",
4026
- "red.2",
4027
- "red.3",
4028
- "red.4",
4029
- "red.5",
4030
- "secondary.1",
4031
- "secondary.2",
4032
- "secondary.3",
4033
- "secondary.4",
4034
- "secondary.5",
4035
- "sky.1",
4036
- "sky.2",
4037
- "sky.3",
4038
- "sky.4",
4039
- "sky.5"
4040
- ];
4041
- const conditions$1 = {
4042
- shapeSizeXs: ":where([data-likec4-shape-size='xs']) &",
4043
- shapeSizeSm: ":where([data-likec4-shape-size='sm']) &",
4044
- shapeSizeMd: ":where([data-likec4-shape-size='md']) &",
4045
- shapeSizeLg: ":where([data-likec4-shape-size='lg']) &",
4046
- shapeSizeXl: ":where([data-likec4-shape-size='xl']) &",
4047
- shapeRectangle: ":where([data-likec4-shape='rectangle']) &",
4048
- shapePerson: ":where([data-likec4-shape='person']) &",
4049
- shapeBrowser: ":where([data-likec4-shape='browser']) &",
4050
- shapeMobile: ":where([data-likec4-shape='mobile']) &",
4051
- shapeCylinder: ":where([data-likec4-shape='cylinder']) &",
4052
- shapeStorage: ":where([data-likec4-shape='storage']) &",
4053
- shapeQueue: ":where([data-likec4-shape='queue']) &"
4054
- };
4055
- const globalCss = {
4056
- ":where([data-likec4-text-size='xs'])": {
4057
- "--likec4-text-size": "{fontSizes.likec4.xs}"
4058
- },
4059
- ":where([data-likec4-text-size='sm'])": {
4060
- "--likec4-text-size": "{fontSizes.likec4.sm}"
4061
- },
4062
- ":where([data-likec4-text-size='md'])": {
4063
- "--likec4-text-size": "{fontSizes.likec4.md}"
4064
- },
4065
- ":where([data-likec4-text-size='lg'])": {
4066
- "--likec4-text-size": "{fontSizes.likec4.lg}"
4067
- },
4068
- ":where([data-likec4-text-size='xl'])": {
4069
- "--likec4-text-size": "{fontSizes.likec4.xl}"
4070
- },
4071
- ":where([data-likec4-spacing='xs'])": {
4072
- "--likec4-spacing": "{spacing.likec4.xs}"
4073
- },
4074
- ":where([data-likec4-spacing='sm'])": {
4075
- "--likec4-spacing": "{spacing.likec4.sm}"
4076
- },
4077
- ":where([data-likec4-spacing='md'])": {
4078
- "--likec4-spacing": "{spacing.likec4.md}"
4079
- },
4080
- ":where([data-likec4-spacing='lg'])": {
4081
- "--likec4-spacing": "{spacing.likec4.lg}"
4082
- },
4083
- ":where([data-likec4-spacing='xl'])": {
4084
- "--likec4-spacing": "{spacing.likec4.xl}"
4085
- }
4086
- };
4087
- const theme$1 = {
4088
- breakpoints: {
4089
- xs: "36em",
4090
- sm: "48em",
4091
- md: "62em",
4092
- lg: "75em",
4093
- xl: "88em"
4094
- },
4095
- tokens: {
4096
- spacing: {
3969
+ const iconSize = "--likec4-icon-size";
3970
+ const breakpoints = {
3971
+ xs: "36em",
3972
+ sm: "48em",
3973
+ md: "62em",
3974
+ lg: "75em",
3975
+ xl: "88em"
3976
+ };
3977
+ const tokens$1 = {
3978
+ spacing: {
3979
+ likec4: {
4097
3980
  xs: {
4098
- value: "calc(0.625rem * var(--mantine-scale))"
3981
+ description: "LikeC4 Diagram Spacing: xs",
3982
+ value: "8px"
4099
3983
  },
4100
3984
  sm: {
4101
- value: "calc(0.75rem * var(--mantine-scale))"
3985
+ description: "LikeC4 Diagram Spacing: sm",
3986
+ value: "10px"
4102
3987
  },
4103
3988
  md: {
4104
- value: "calc(1rem * var(--mantine-scale))"
3989
+ description: "LikeC4 Diagram Spacing: md",
3990
+ value: "16px"
4105
3991
  },
4106
3992
  lg: {
4107
- value: "calc(1.25rem * var(--mantine-scale))"
3993
+ description: "LikeC4 Diagram Spacing: lg",
3994
+ value: "24px"
4108
3995
  },
4109
3996
  xl: {
4110
- value: "calc(2rem * var(--mantine-scale))"
4111
- },
4112
- likec4: {
4113
- xs: {
4114
- description: "LikeC4 style spacing: xs",
4115
- value: "8px"
4116
- },
4117
- sm: {
4118
- description: "LikeC4 style spacing: sm",
4119
- value: "10px"
4120
- },
4121
- md: {
4122
- description: "LikeC4 style spacing: md",
4123
- value: "16px"
4124
- },
4125
- lg: {
4126
- description: "LikeC4 style spacing: lg",
4127
- value: "24px"
4128
- },
4129
- xl: {
4130
- description: "LikeC4 style spacing: xl",
4131
- value: "32px"
4132
- }
3997
+ description: "LikeC4 Diagram Spacing: xl",
3998
+ value: "32px"
4133
3999
  }
4000
+ }
4001
+ },
4002
+ fontSizes: {
4003
+ xxs: {
4004
+ value: "0.625rem"
4134
4005
  },
4135
- radii: {
4136
- xs: {
4137
- value: "var(--mantine-radius-xs)"
4138
- },
4139
- sm: {
4140
- value: "var(--mantine-radius-sm)"
4141
- },
4142
- md: {
4143
- value: "var(--mantine-radius-md)"
4144
- },
4145
- lg: {
4146
- value: "var(--mantine-radius-lg)"
4147
- },
4148
- xl: {
4149
- value: "var(--mantine-radius-xl)"
4150
- }
4006
+ xs: {
4007
+ value: "calc(0.75rem * var(--mantine-scale))"
4151
4008
  },
4152
- fontSizes: {
4153
- xxs: {
4154
- value: "0.625rem"
4155
- },
4156
- xs: {
4157
- value: "calc(0.75rem * var(--mantine-scale))"
4158
- },
4159
- sm: {
4160
- value: "calc(0.875rem * var(--mantine-scale))"
4161
- },
4162
- md: {
4163
- value: "calc(1rem * var(--mantine-scale))"
4164
- },
4165
- lg: {
4166
- value: "calc(1.125rem * var(--mantine-scale))"
4167
- },
4168
- xl: {
4169
- value: "calc(1.25rem * var(--mantine-scale))"
4170
- },
4171
- likec4: {
4172
- xs: {
4173
- description: "LikeC4 style text size: xs",
4174
- value: "0.833rem"
4175
- },
4176
- sm: {
4177
- description: "LikeC4 style text size: sm",
4178
- value: "1.00rem"
4179
- },
4180
- md: {
4181
- description: "LikeC4 style text size: md",
4182
- value: "1.20rem"
4183
- },
4184
- lg: {
4185
- description: "LikeC4 style text size: lg",
4186
- value: "1.44rem"
4187
- },
4188
- xl: {
4189
- description: "LikeC4 style text size: xl",
4190
- value: "1.73rem"
4191
- }
4192
- }
4009
+ sm: {
4010
+ value: "calc(0.875rem * var(--mantine-scale))"
4011
+ },
4012
+ md: {
4013
+ value: "calc(1rem * var(--mantine-scale))"
4193
4014
  },
4194
- lineHeights: {
4015
+ lg: {
4016
+ value: "calc(1.125rem * var(--mantine-scale))"
4017
+ },
4018
+ xl: {
4019
+ value: "calc(1.25rem * var(--mantine-scale))"
4020
+ },
4021
+ likec4: {
4195
4022
  xs: {
4196
- value: "1.4"
4023
+ description: "LikeC4 Diagram Text Size: xs",
4024
+ value: "0.833rem"
4197
4025
  },
4198
4026
  sm: {
4199
- value: "1.45"
4027
+ description: "LikeC4 Diagram Text Size: sm",
4028
+ value: "1.00rem"
4200
4029
  },
4201
4030
  md: {
4202
- value: "1.55"
4031
+ description: "LikeC4 Diagram Text Size: md",
4032
+ value: "1.20rem"
4203
4033
  },
4204
4034
  lg: {
4205
- value: "1.6"
4035
+ description: "LikeC4 Diagram Text Size: lg",
4036
+ value: "1.44rem"
4206
4037
  },
4207
4038
  xl: {
4208
- value: "1.65"
4039
+ description: "LikeC4 Diagram Text Size: xl",
4040
+ value: "1.73rem"
4209
4041
  }
4042
+ }
4043
+ },
4044
+ lineHeights: {
4045
+ xs: {
4046
+ value: "1.4"
4210
4047
  },
4211
- colors: {
4212
- mantine: {
4213
- colors: {
4214
- primary: {
4215
- DEFAULT: {
4216
- value: "var(--mantine-primary-color-6)"
4217
- },
4218
- filled: {
4219
- value: "var(--mantine-primary-color-filled)"
4220
- },
4221
- filledHover: {
4222
- value: "var(--mantine-primary-color-filled-hover)"
4223
- },
4224
- light: {
4225
- value: "var(--mantine-primary-color-light)"
4226
- },
4227
- lightHover: {
4228
- value: "var(--mantine-primary-color-light-hover)"
4229
- },
4230
- lightColor: {
4231
- value: "var(--mantine-primary-color-light-color)"
4232
- },
4233
- outline: {
4234
- value: "var(--mantine-primary-color-outline)"
4235
- },
4236
- outlineHover: {
4237
- value: "var(--mantine-primary-color-outline-hover)"
4238
- }
4239
- },
4240
- "primary[0]": {
4241
- value: "var(--mantine-primary-color-0)"
4242
- },
4243
- "primary[1]": {
4244
- value: "var(--mantine-primary-color-1)"
4245
- },
4246
- "primary[2]": {
4247
- value: "var(--mantine-primary-color-2)"
4248
- },
4249
- "primary[3]": {
4250
- value: "var(--mantine-primary-color-3)"
4251
- },
4252
- "primary[4]": {
4253
- value: "var(--mantine-primary-color-4)"
4254
- },
4255
- "primary[5]": {
4256
- value: "var(--mantine-primary-color-5)"
4257
- },
4258
- "primary[6]": {
4048
+ sm: {
4049
+ value: "1.45"
4050
+ },
4051
+ md: {
4052
+ value: "1.55"
4053
+ },
4054
+ lg: {
4055
+ value: "1.6"
4056
+ },
4057
+ xl: {
4058
+ value: "1.65"
4059
+ }
4060
+ },
4061
+ colors: {
4062
+ mantine: {
4063
+ colors: {
4064
+ primary: {
4065
+ DEFAULT: {
4066
+ description: "Mantine color primaryColors",
4259
4067
  value: "var(--mantine-primary-color-6)"
4260
4068
  },
4261
- "primary[7]": {
4262
- value: "var(--mantine-primary-color-7)"
4263
- },
4264
- "primary[8]": {
4265
- value: "var(--mantine-primary-color-8)"
4266
- },
4267
- "primary[9]": {
4268
- value: "var(--mantine-primary-color-9)"
4069
+ filled: {
4070
+ description: "Mantine color primaryColors filled",
4071
+ value: "var(--mantine-primary-color-filled)"
4269
4072
  },
4270
- white: {
4271
- value: "var(--mantine-color-white)"
4073
+ filledHover: {
4074
+ description: "Mantine color primaryColors filled hover",
4075
+ value: "var(--mantine-primary-color-filled-hover)"
4272
4076
  },
4273
- text: {
4274
- value: "var(--mantine-color-text)"
4275
- },
4276
- body: {
4277
- value: "var(--mantine-color-body)"
4077
+ light: {
4078
+ description: "Mantine color primaryColors light",
4079
+ value: "var(--mantine-primary-color-light)"
4278
4080
  },
4279
- dimmed: {
4280
- value: "var(--mantine-color-dimmed)"
4081
+ lightHover: {
4082
+ description: "Mantine color primaryColors light hover",
4083
+ value: "var(--mantine-primary-color-light-hover)"
4281
4084
  },
4282
- defaultBorder: {
4283
- value: "var(--mantine-color-default-border)"
4085
+ lightColor: {
4086
+ description: "Mantine color primaryColors light color",
4087
+ value: "var(--mantine-primary-color-light-color)"
4284
4088
  },
4285
- defaultColor: {
4286
- value: "var(--mantine-color-default-color)"
4089
+ outline: {
4090
+ description: "Mantine color primaryColors outline",
4091
+ value: "var(--mantine-primary-color-outline)"
4287
4092
  },
4288
- defaultHover: {
4289
- value: "var(--mantine-color-default-hover)"
4290
- },
4291
- default: {
4292
- value: "var(--mantine-color-default)"
4093
+ outlineHover: {
4094
+ description: "Mantine color primaryColors outline hover",
4095
+ value: "var(--mantine-primary-color-outline-hover)"
4096
+ }
4097
+ },
4098
+ "primary[0]": {
4099
+ description: "Mantine color primaryColors.0",
4100
+ value: "var(--mantine-primary-color-0)"
4101
+ },
4102
+ "primary[1]": {
4103
+ description: "Mantine color primaryColors.1",
4104
+ value: "var(--mantine-primary-color-1)"
4105
+ },
4106
+ "primary[2]": {
4107
+ description: "Mantine color primaryColors.2",
4108
+ value: "var(--mantine-primary-color-2)"
4109
+ },
4110
+ "primary[3]": {
4111
+ description: "Mantine color primaryColors.3",
4112
+ value: "var(--mantine-primary-color-3)"
4113
+ },
4114
+ "primary[4]": {
4115
+ description: "Mantine color primaryColors.4",
4116
+ value: "var(--mantine-primary-color-4)"
4117
+ },
4118
+ "primary[5]": {
4119
+ description: "Mantine color primaryColors.5",
4120
+ value: "var(--mantine-primary-color-5)"
4121
+ },
4122
+ "primary[6]": {
4123
+ description: "Mantine color primaryColors.6",
4124
+ value: "var(--mantine-primary-color-6)"
4125
+ },
4126
+ "primary[7]": {
4127
+ description: "Mantine color primaryColors.7",
4128
+ value: "var(--mantine-primary-color-7)"
4129
+ },
4130
+ "primary[8]": {
4131
+ description: "Mantine color primaryColors.8",
4132
+ value: "var(--mantine-primary-color-8)"
4133
+ },
4134
+ "primary[9]": {
4135
+ description: "Mantine color primaryColors.9",
4136
+ value: "var(--mantine-primary-color-9)"
4137
+ },
4138
+ white: {
4139
+ value: "var(--mantine-color-white)"
4140
+ },
4141
+ text: {
4142
+ value: "var(--mantine-color-text)"
4143
+ },
4144
+ body: {
4145
+ value: "var(--mantine-color-body)"
4146
+ },
4147
+ dimmed: {
4148
+ value: "var(--mantine-color-dimmed)"
4149
+ },
4150
+ defaultBorder: {
4151
+ value: "var(--mantine-color-default-border)"
4152
+ },
4153
+ defaultColor: {
4154
+ value: "var(--mantine-color-default-color)"
4155
+ },
4156
+ defaultHover: {
4157
+ value: "var(--mantine-color-default-hover)"
4158
+ },
4159
+ default: {
4160
+ value: "var(--mantine-color-default)"
4161
+ },
4162
+ error: {
4163
+ value: "var(--mantine-color-error)"
4164
+ },
4165
+ placeholder: {
4166
+ value: "var(--mantine-color-placeholder)"
4167
+ },
4168
+ gray: {
4169
+ DEFAULT: {
4170
+ description: "Mantine color gray",
4171
+ value: "var(--mantine-color-gray-6)"
4293
4172
  },
4294
- error: {
4295
- value: "var(--mantine-color-error)"
4173
+ filled: {
4174
+ description: "Mantine color gray filled",
4175
+ value: "var(--mantine-color-gray-filled)"
4296
4176
  },
4297
- placeholder: {
4298
- value: "var(--mantine-color-placeholder)"
4177
+ filledHover: {
4178
+ description: "Mantine color gray filled hover",
4179
+ value: "var(--mantine-color-gray-filled-hover)"
4299
4180
  },
4300
- gray: {
4301
- DEFAULT: {
4302
- value: "var(--mantine-color-gray-6)"
4303
- },
4304
- filled: {
4305
- value: "var(--mantine-color-gray-filled)"
4306
- },
4307
- filledHover: {
4308
- value: "var(--mantine-color-gray-filled-hover)"
4309
- },
4310
- light: {
4311
- value: "var(--mantine-color-gray-light)"
4312
- },
4313
- lightHover: {
4314
- value: "var(--mantine-color-gray-light-hover)"
4315
- },
4316
- lightColor: {
4317
- value: "var(--mantine-color-gray-light-color)"
4318
- },
4319
- outline: {
4320
- value: "var(--mantine-color-gray-outline)"
4321
- },
4322
- outlineHover: {
4323
- value: "var(--mantine-color-gray-outline-hover)"
4324
- }
4181
+ light: {
4182
+ description: "Mantine color gray light",
4183
+ value: "var(--mantine-color-gray-light)"
4325
4184
  },
4326
- "gray[0]": {
4327
- value: "var(--mantine-color-gray-0)"
4185
+ lightHover: {
4186
+ description: "Mantine color gray light hover",
4187
+ value: "var(--mantine-color-gray-light-hover)"
4328
4188
  },
4329
- "gray[1]": {
4330
- value: "var(--mantine-color-gray-1)"
4189
+ lightColor: {
4190
+ description: "Mantine color gray light color",
4191
+ value: "var(--mantine-color-gray-light-color)"
4331
4192
  },
4332
- "gray[2]": {
4333
- value: "var(--mantine-color-gray-2)"
4193
+ outline: {
4194
+ description: "Mantine color gray outline",
4195
+ value: "var(--mantine-color-gray-outline)"
4334
4196
  },
4335
- "gray[3]": {
4336
- value: "var(--mantine-color-gray-3)"
4197
+ outlineHover: {
4198
+ description: "Mantine color gray outline hover",
4199
+ value: "var(--mantine-color-gray-outline-hover)"
4200
+ }
4201
+ },
4202
+ "gray[0]": {
4203
+ description: "Mantine color gray.0",
4204
+ value: "var(--mantine-color-gray-0)"
4205
+ },
4206
+ "gray[1]": {
4207
+ description: "Mantine color gray.1",
4208
+ value: "var(--mantine-color-gray-1)"
4209
+ },
4210
+ "gray[2]": {
4211
+ description: "Mantine color gray.2",
4212
+ value: "var(--mantine-color-gray-2)"
4213
+ },
4214
+ "gray[3]": {
4215
+ description: "Mantine color gray.3",
4216
+ value: "var(--mantine-color-gray-3)"
4217
+ },
4218
+ "gray[4]": {
4219
+ description: "Mantine color gray.4",
4220
+ value: "var(--mantine-color-gray-4)"
4221
+ },
4222
+ "gray[5]": {
4223
+ description: "Mantine color gray.5",
4224
+ value: "var(--mantine-color-gray-5)"
4225
+ },
4226
+ "gray[6]": {
4227
+ description: "Mantine color gray.6",
4228
+ value: "var(--mantine-color-gray-6)"
4229
+ },
4230
+ "gray[7]": {
4231
+ description: "Mantine color gray.7",
4232
+ value: "var(--mantine-color-gray-7)"
4233
+ },
4234
+ "gray[8]": {
4235
+ description: "Mantine color gray.8",
4236
+ value: "var(--mantine-color-gray-8)"
4237
+ },
4238
+ "gray[9]": {
4239
+ description: "Mantine color gray.9",
4240
+ value: "var(--mantine-color-gray-9)"
4241
+ },
4242
+ dark: {
4243
+ DEFAULT: {
4244
+ description: "Mantine color dark",
4245
+ value: "var(--mantine-color-dark-6)"
4337
4246
  },
4338
- "gray[4]": {
4339
- value: "var(--mantine-color-gray-4)"
4247
+ filled: {
4248
+ description: "Mantine color dark filled",
4249
+ value: "var(--mantine-color-dark-filled)"
4340
4250
  },
4341
- "gray[5]": {
4342
- value: "var(--mantine-color-gray-5)"
4251
+ filledHover: {
4252
+ description: "Mantine color dark filled hover",
4253
+ value: "var(--mantine-color-dark-filled-hover)"
4343
4254
  },
4344
- "gray[6]": {
4345
- value: "var(--mantine-color-gray-6)"
4255
+ light: {
4256
+ description: "Mantine color dark light",
4257
+ value: "var(--mantine-color-dark-light)"
4346
4258
  },
4347
- "gray[7]": {
4348
- value: "var(--mantine-color-gray-7)"
4259
+ lightHover: {
4260
+ description: "Mantine color dark light hover",
4261
+ value: "var(--mantine-color-dark-light-hover)"
4349
4262
  },
4350
- "gray[8]": {
4351
- value: "var(--mantine-color-gray-8)"
4263
+ lightColor: {
4264
+ description: "Mantine color dark light color",
4265
+ value: "var(--mantine-color-dark-light-color)"
4352
4266
  },
4353
- "gray[9]": {
4354
- value: "var(--mantine-color-gray-9)"
4267
+ outline: {
4268
+ description: "Mantine color dark outline",
4269
+ value: "var(--mantine-color-dark-outline)"
4355
4270
  },
4356
- dark: {
4357
- DEFAULT: {
4358
- value: "var(--mantine-color-dark-6)"
4359
- },
4360
- filled: {
4361
- value: "var(--mantine-color-dark-filled)"
4362
- },
4363
- filledHover: {
4364
- value: "var(--mantine-color-dark-filled-hover)"
4365
- },
4366
- light: {
4367
- value: "var(--mantine-color-dark-light)"
4368
- },
4369
- lightHover: {
4370
- value: "var(--mantine-color-dark-light-hover)"
4371
- },
4372
- lightColor: {
4373
- value: "var(--mantine-color-dark-light-color)"
4374
- },
4375
- outline: {
4376
- value: "var(--mantine-color-dark-outline)"
4377
- },
4378
- outlineHover: {
4379
- value: "var(--mantine-color-dark-outline-hover)"
4380
- }
4271
+ outlineHover: {
4272
+ description: "Mantine color dark outline hover",
4273
+ value: "var(--mantine-color-dark-outline-hover)"
4274
+ }
4275
+ },
4276
+ "dark[0]": {
4277
+ description: "Mantine color dark.0",
4278
+ value: "var(--mantine-color-dark-0)"
4279
+ },
4280
+ "dark[1]": {
4281
+ description: "Mantine color dark.1",
4282
+ value: "var(--mantine-color-dark-1)"
4283
+ },
4284
+ "dark[2]": {
4285
+ description: "Mantine color dark.2",
4286
+ value: "var(--mantine-color-dark-2)"
4287
+ },
4288
+ "dark[3]": {
4289
+ description: "Mantine color dark.3",
4290
+ value: "var(--mantine-color-dark-3)"
4291
+ },
4292
+ "dark[4]": {
4293
+ description: "Mantine color dark.4",
4294
+ value: "var(--mantine-color-dark-4)"
4295
+ },
4296
+ "dark[5]": {
4297
+ description: "Mantine color dark.5",
4298
+ value: "var(--mantine-color-dark-5)"
4299
+ },
4300
+ "dark[6]": {
4301
+ description: "Mantine color dark.6",
4302
+ value: "var(--mantine-color-dark-6)"
4303
+ },
4304
+ "dark[7]": {
4305
+ description: "Mantine color dark.7",
4306
+ value: "var(--mantine-color-dark-7)"
4307
+ },
4308
+ "dark[8]": {
4309
+ description: "Mantine color dark.8",
4310
+ value: "var(--mantine-color-dark-8)"
4311
+ },
4312
+ "dark[9]": {
4313
+ description: "Mantine color dark.9",
4314
+ value: "var(--mantine-color-dark-9)"
4315
+ },
4316
+ orange: {
4317
+ DEFAULT: {
4318
+ description: "Mantine color orange",
4319
+ value: "var(--mantine-color-orange-6)"
4381
4320
  },
4382
- "dark[0]": {
4383
- value: "var(--mantine-color-dark-0)"
4321
+ filled: {
4322
+ description: "Mantine color orange filled",
4323
+ value: "var(--mantine-color-orange-filled)"
4384
4324
  },
4385
- "dark[1]": {
4386
- value: "var(--mantine-color-dark-1)"
4325
+ filledHover: {
4326
+ description: "Mantine color orange filled hover",
4327
+ value: "var(--mantine-color-orange-filled-hover)"
4387
4328
  },
4388
- "dark[2]": {
4389
- value: "var(--mantine-color-dark-2)"
4329
+ light: {
4330
+ description: "Mantine color orange light",
4331
+ value: "var(--mantine-color-orange-light)"
4390
4332
  },
4391
- "dark[3]": {
4392
- value: "var(--mantine-color-dark-3)"
4333
+ lightHover: {
4334
+ description: "Mantine color orange light hover",
4335
+ value: "var(--mantine-color-orange-light-hover)"
4393
4336
  },
4394
- "dark[4]": {
4395
- value: "var(--mantine-color-dark-4)"
4337
+ lightColor: {
4338
+ description: "Mantine color orange light color",
4339
+ value: "var(--mantine-color-orange-light-color)"
4396
4340
  },
4397
- "dark[5]": {
4398
- value: "var(--mantine-color-dark-5)"
4341
+ outline: {
4342
+ description: "Mantine color orange outline",
4343
+ value: "var(--mantine-color-orange-outline)"
4399
4344
  },
4400
- "dark[6]": {
4401
- value: "var(--mantine-color-dark-6)"
4345
+ outlineHover: {
4346
+ description: "Mantine color orange outline hover",
4347
+ value: "var(--mantine-color-orange-outline-hover)"
4348
+ }
4349
+ },
4350
+ "orange[0]": {
4351
+ description: "Mantine color orange.0",
4352
+ value: "var(--mantine-color-orange-0)"
4353
+ },
4354
+ "orange[1]": {
4355
+ description: "Mantine color orange.1",
4356
+ value: "var(--mantine-color-orange-1)"
4357
+ },
4358
+ "orange[2]": {
4359
+ description: "Mantine color orange.2",
4360
+ value: "var(--mantine-color-orange-2)"
4361
+ },
4362
+ "orange[3]": {
4363
+ description: "Mantine color orange.3",
4364
+ value: "var(--mantine-color-orange-3)"
4365
+ },
4366
+ "orange[4]": {
4367
+ description: "Mantine color orange.4",
4368
+ value: "var(--mantine-color-orange-4)"
4369
+ },
4370
+ "orange[5]": {
4371
+ description: "Mantine color orange.5",
4372
+ value: "var(--mantine-color-orange-5)"
4373
+ },
4374
+ "orange[6]": {
4375
+ description: "Mantine color orange.6",
4376
+ value: "var(--mantine-color-orange-6)"
4377
+ },
4378
+ "orange[7]": {
4379
+ description: "Mantine color orange.7",
4380
+ value: "var(--mantine-color-orange-7)"
4381
+ },
4382
+ "orange[8]": {
4383
+ description: "Mantine color orange.8",
4384
+ value: "var(--mantine-color-orange-8)"
4385
+ },
4386
+ "orange[9]": {
4387
+ description: "Mantine color orange.9",
4388
+ value: "var(--mantine-color-orange-9)"
4389
+ },
4390
+ teal: {
4391
+ DEFAULT: {
4392
+ description: "Mantine color teal",
4393
+ value: "var(--mantine-color-teal-6)"
4402
4394
  },
4403
- "dark[7]": {
4404
- value: "var(--mantine-color-dark-7)"
4395
+ filled: {
4396
+ description: "Mantine color teal filled",
4397
+ value: "var(--mantine-color-teal-filled)"
4405
4398
  },
4406
- "dark[8]": {
4407
- value: "var(--mantine-color-dark-8)"
4399
+ filledHover: {
4400
+ description: "Mantine color teal filled hover",
4401
+ value: "var(--mantine-color-teal-filled-hover)"
4408
4402
  },
4409
- "dark[9]": {
4410
- value: "var(--mantine-color-dark-9)"
4403
+ light: {
4404
+ description: "Mantine color teal light",
4405
+ value: "var(--mantine-color-teal-light)"
4411
4406
  },
4412
- orange: {
4413
- DEFAULT: {
4414
- value: "var(--mantine-color-orange-6)"
4415
- },
4416
- filled: {
4417
- value: "var(--mantine-color-orange-filled)"
4418
- },
4419
- filledHover: {
4420
- value: "var(--mantine-color-orange-filled-hover)"
4421
- },
4422
- light: {
4423
- value: "var(--mantine-color-orange-light)"
4424
- },
4425
- lightHover: {
4426
- value: "var(--mantine-color-orange-light-hover)"
4427
- },
4428
- lightColor: {
4429
- value: "var(--mantine-color-orange-light-color)"
4430
- },
4431
- outline: {
4432
- value: "var(--mantine-color-orange-outline)"
4433
- },
4434
- outlineHover: {
4435
- value: "var(--mantine-color-orange-outline-hover)"
4436
- }
4407
+ lightHover: {
4408
+ description: "Mantine color teal light hover",
4409
+ value: "var(--mantine-color-teal-light-hover)"
4437
4410
  },
4438
- "orange[0]": {
4439
- value: "var(--mantine-color-orange-0)"
4411
+ lightColor: {
4412
+ description: "Mantine color teal light color",
4413
+ value: "var(--mantine-color-teal-light-color)"
4440
4414
  },
4441
- "orange[1]": {
4442
- value: "var(--mantine-color-orange-1)"
4415
+ outline: {
4416
+ description: "Mantine color teal outline",
4417
+ value: "var(--mantine-color-teal-outline)"
4443
4418
  },
4444
- "orange[2]": {
4445
- value: "var(--mantine-color-orange-2)"
4419
+ outlineHover: {
4420
+ description: "Mantine color teal outline hover",
4421
+ value: "var(--mantine-color-teal-outline-hover)"
4422
+ }
4423
+ },
4424
+ "teal[0]": {
4425
+ description: "Mantine color teal.0",
4426
+ value: "var(--mantine-color-teal-0)"
4427
+ },
4428
+ "teal[1]": {
4429
+ description: "Mantine color teal.1",
4430
+ value: "var(--mantine-color-teal-1)"
4431
+ },
4432
+ "teal[2]": {
4433
+ description: "Mantine color teal.2",
4434
+ value: "var(--mantine-color-teal-2)"
4435
+ },
4436
+ "teal[3]": {
4437
+ description: "Mantine color teal.3",
4438
+ value: "var(--mantine-color-teal-3)"
4439
+ },
4440
+ "teal[4]": {
4441
+ description: "Mantine color teal.4",
4442
+ value: "var(--mantine-color-teal-4)"
4443
+ },
4444
+ "teal[5]": {
4445
+ description: "Mantine color teal.5",
4446
+ value: "var(--mantine-color-teal-5)"
4447
+ },
4448
+ "teal[6]": {
4449
+ description: "Mantine color teal.6",
4450
+ value: "var(--mantine-color-teal-6)"
4451
+ },
4452
+ "teal[7]": {
4453
+ description: "Mantine color teal.7",
4454
+ value: "var(--mantine-color-teal-7)"
4455
+ },
4456
+ "teal[8]": {
4457
+ description: "Mantine color teal.8",
4458
+ value: "var(--mantine-color-teal-8)"
4459
+ },
4460
+ "teal[9]": {
4461
+ description: "Mantine color teal.9",
4462
+ value: "var(--mantine-color-teal-9)"
4463
+ },
4464
+ red: {
4465
+ DEFAULT: {
4466
+ description: "Mantine color red",
4467
+ value: "var(--mantine-color-red-6)"
4446
4468
  },
4447
- "orange[3]": {
4448
- value: "var(--mantine-color-orange-3)"
4469
+ filled: {
4470
+ description: "Mantine color red filled",
4471
+ value: "var(--mantine-color-red-filled)"
4449
4472
  },
4450
- "orange[4]": {
4451
- value: "var(--mantine-color-orange-4)"
4473
+ filledHover: {
4474
+ description: "Mantine color red filled hover",
4475
+ value: "var(--mantine-color-red-filled-hover)"
4452
4476
  },
4453
- "orange[5]": {
4454
- value: "var(--mantine-color-orange-5)"
4477
+ light: {
4478
+ description: "Mantine color red light",
4479
+ value: "var(--mantine-color-red-light)"
4455
4480
  },
4456
- "orange[6]": {
4457
- value: "var(--mantine-color-orange-6)"
4481
+ lightHover: {
4482
+ description: "Mantine color red light hover",
4483
+ value: "var(--mantine-color-red-light-hover)"
4458
4484
  },
4459
- "orange[7]": {
4460
- value: "var(--mantine-color-orange-7)"
4485
+ lightColor: {
4486
+ description: "Mantine color red light color",
4487
+ value: "var(--mantine-color-red-light-color)"
4461
4488
  },
4462
- "orange[8]": {
4463
- value: "var(--mantine-color-orange-8)"
4489
+ outline: {
4490
+ description: "Mantine color red outline",
4491
+ value: "var(--mantine-color-red-outline)"
4464
4492
  },
4465
- "orange[9]": {
4466
- value: "var(--mantine-color-orange-9)"
4493
+ outlineHover: {
4494
+ description: "Mantine color red outline hover",
4495
+ value: "var(--mantine-color-red-outline-hover)"
4496
+ }
4497
+ },
4498
+ "red[0]": {
4499
+ description: "Mantine color red.0",
4500
+ value: "var(--mantine-color-red-0)"
4501
+ },
4502
+ "red[1]": {
4503
+ description: "Mantine color red.1",
4504
+ value: "var(--mantine-color-red-1)"
4505
+ },
4506
+ "red[2]": {
4507
+ description: "Mantine color red.2",
4508
+ value: "var(--mantine-color-red-2)"
4509
+ },
4510
+ "red[3]": {
4511
+ description: "Mantine color red.3",
4512
+ value: "var(--mantine-color-red-3)"
4513
+ },
4514
+ "red[4]": {
4515
+ description: "Mantine color red.4",
4516
+ value: "var(--mantine-color-red-4)"
4517
+ },
4518
+ "red[5]": {
4519
+ description: "Mantine color red.5",
4520
+ value: "var(--mantine-color-red-5)"
4521
+ },
4522
+ "red[6]": {
4523
+ description: "Mantine color red.6",
4524
+ value: "var(--mantine-color-red-6)"
4525
+ },
4526
+ "red[7]": {
4527
+ description: "Mantine color red.7",
4528
+ value: "var(--mantine-color-red-7)"
4529
+ },
4530
+ "red[8]": {
4531
+ description: "Mantine color red.8",
4532
+ value: "var(--mantine-color-red-8)"
4533
+ },
4534
+ "red[9]": {
4535
+ description: "Mantine color red.9",
4536
+ value: "var(--mantine-color-red-9)"
4537
+ },
4538
+ green: {
4539
+ DEFAULT: {
4540
+ description: "Mantine color green",
4541
+ value: "var(--mantine-color-green-6)"
4467
4542
  },
4468
- teal: {
4469
- DEFAULT: {
4470
- value: "var(--mantine-color-teal-6)"
4471
- },
4472
- filled: {
4473
- value: "var(--mantine-color-teal-filled)"
4474
- },
4475
- filledHover: {
4476
- value: "var(--mantine-color-teal-filled-hover)"
4477
- },
4478
- light: {
4479
- value: "var(--mantine-color-teal-light)"
4480
- },
4481
- lightHover: {
4482
- value: "var(--mantine-color-teal-light-hover)"
4483
- },
4484
- lightColor: {
4485
- value: "var(--mantine-color-teal-light-color)"
4486
- },
4487
- outline: {
4488
- value: "var(--mantine-color-teal-outline)"
4489
- },
4490
- outlineHover: {
4491
- value: "var(--mantine-color-teal-outline-hover)"
4492
- }
4493
- },
4494
- "teal[0]": {
4495
- value: "var(--mantine-color-teal-0)"
4496
- },
4497
- "teal[1]": {
4498
- value: "var(--mantine-color-teal-1)"
4499
- },
4500
- "teal[2]": {
4501
- value: "var(--mantine-color-teal-2)"
4502
- },
4503
- "teal[3]": {
4504
- value: "var(--mantine-color-teal-3)"
4505
- },
4506
- "teal[4]": {
4507
- value: "var(--mantine-color-teal-4)"
4508
- },
4509
- "teal[5]": {
4510
- value: "var(--mantine-color-teal-5)"
4511
- },
4512
- "teal[6]": {
4513
- value: "var(--mantine-color-teal-6)"
4514
- },
4515
- "teal[7]": {
4516
- value: "var(--mantine-color-teal-7)"
4517
- },
4518
- "teal[8]": {
4519
- value: "var(--mantine-color-teal-8)"
4520
- },
4521
- "teal[9]": {
4522
- value: "var(--mantine-color-teal-9)"
4523
- },
4524
- red: {
4525
- DEFAULT: {
4526
- value: "var(--mantine-color-red-6)"
4527
- },
4528
- filled: {
4529
- value: "var(--mantine-color-red-filled)"
4530
- },
4531
- filledHover: {
4532
- value: "var(--mantine-color-red-filled-hover)"
4533
- },
4534
- light: {
4535
- value: "var(--mantine-color-red-light)"
4536
- },
4537
- lightHover: {
4538
- value: "var(--mantine-color-red-light-hover)"
4539
- },
4540
- lightColor: {
4541
- value: "var(--mantine-color-red-light-color)"
4542
- },
4543
- outline: {
4544
- value: "var(--mantine-color-red-outline)"
4545
- },
4546
- outlineHover: {
4547
- value: "var(--mantine-color-red-outline-hover)"
4548
- }
4549
- },
4550
- "red[0]": {
4551
- value: "var(--mantine-color-red-0)"
4552
- },
4553
- "red[1]": {
4554
- value: "var(--mantine-color-red-1)"
4555
- },
4556
- "red[2]": {
4557
- value: "var(--mantine-color-red-2)"
4558
- },
4559
- "red[3]": {
4560
- value: "var(--mantine-color-red-3)"
4561
- },
4562
- "red[4]": {
4563
- value: "var(--mantine-color-red-4)"
4564
- },
4565
- "red[5]": {
4566
- value: "var(--mantine-color-red-5)"
4567
- },
4568
- "red[6]": {
4569
- value: "var(--mantine-color-red-6)"
4570
- },
4571
- "red[7]": {
4572
- value: "var(--mantine-color-red-7)"
4573
- },
4574
- "red[8]": {
4575
- value: "var(--mantine-color-red-8)"
4576
- },
4577
- "red[9]": {
4578
- value: "var(--mantine-color-red-9)"
4579
- },
4580
- green: {
4581
- DEFAULT: {
4582
- value: "var(--mantine-color-green-6)"
4583
- },
4584
- filled: {
4585
- value: "var(--mantine-color-green-filled)"
4586
- },
4587
- filledHover: {
4588
- value: "var(--mantine-color-green-filled-hover)"
4589
- },
4590
- light: {
4591
- value: "var(--mantine-color-green-light)"
4592
- },
4593
- lightHover: {
4594
- value: "var(--mantine-color-green-light-hover)"
4595
- },
4596
- lightColor: {
4597
- value: "var(--mantine-color-green-light-color)"
4598
- },
4599
- outline: {
4600
- value: "var(--mantine-color-green-outline)"
4601
- },
4602
- outlineHover: {
4603
- value: "var(--mantine-color-green-outline-hover)"
4604
- }
4605
- },
4606
- "green[0]": {
4607
- value: "var(--mantine-color-green-0)"
4608
- },
4609
- "green[1]": {
4610
- value: "var(--mantine-color-green-1)"
4611
- },
4612
- "green[2]": {
4613
- value: "var(--mantine-color-green-2)"
4614
- },
4615
- "green[3]": {
4616
- value: "var(--mantine-color-green-3)"
4617
- },
4618
- "green[4]": {
4619
- value: "var(--mantine-color-green-4)"
4620
- },
4621
- "green[5]": {
4622
- value: "var(--mantine-color-green-5)"
4623
- },
4624
- "green[6]": {
4625
- value: "var(--mantine-color-green-6)"
4626
- },
4627
- "green[7]": {
4628
- value: "var(--mantine-color-green-7)"
4629
- },
4630
- "green[8]": {
4631
- value: "var(--mantine-color-green-8)"
4632
- },
4633
- "green[9]": {
4634
- value: "var(--mantine-color-green-9)"
4635
- },
4636
- yellow: {
4637
- DEFAULT: {
4638
- value: "var(--mantine-color-yellow-6)"
4639
- },
4640
- filled: {
4641
- value: "var(--mantine-color-yellow-filled)"
4642
- },
4643
- filledHover: {
4644
- value: "var(--mantine-color-yellow-filled-hover)"
4645
- },
4646
- light: {
4647
- value: "var(--mantine-color-yellow-light)"
4648
- },
4649
- lightHover: {
4650
- value: "var(--mantine-color-yellow-light-hover)"
4651
- },
4652
- lightColor: {
4653
- value: "var(--mantine-color-yellow-light-color)"
4654
- },
4655
- outline: {
4656
- value: "var(--mantine-color-yellow-outline)"
4657
- },
4658
- outlineHover: {
4659
- value: "var(--mantine-color-yellow-outline-hover)"
4660
- }
4661
- },
4662
- "yellow[0]": {
4663
- value: "var(--mantine-color-yellow-0)"
4664
- },
4665
- "yellow[1]": {
4666
- value: "var(--mantine-color-yellow-1)"
4667
- },
4668
- "yellow[2]": {
4669
- value: "var(--mantine-color-yellow-2)"
4670
- },
4671
- "yellow[3]": {
4672
- value: "var(--mantine-color-yellow-3)"
4673
- },
4674
- "yellow[4]": {
4675
- value: "var(--mantine-color-yellow-4)"
4676
- },
4677
- "yellow[5]": {
4678
- value: "var(--mantine-color-yellow-5)"
4679
- },
4680
- "yellow[6]": {
4681
- value: "var(--mantine-color-yellow-6)"
4682
- },
4683
- "yellow[7]": {
4684
- value: "var(--mantine-color-yellow-7)"
4685
- },
4686
- "yellow[8]": {
4687
- value: "var(--mantine-color-yellow-8)"
4688
- },
4689
- "yellow[9]": {
4690
- value: "var(--mantine-color-yellow-9)"
4691
- }
4692
- }
4693
- }
4694
- },
4695
- shadows: {
4696
- xs: {
4697
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1)"
4698
- },
4699
- sm: {
4700
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale))"
4701
- },
4702
- md: {
4703
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale))"
4704
- },
4705
- lg: {
4706
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale))"
4707
- },
4708
- xl: {
4709
- value: "0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale))"
4710
- }
4711
- }
4712
- },
4713
- semanticTokens: {
4714
- colors: {
4715
- likec4: {
4716
- background: {
4717
- DEFAULT: {
4718
- description: "Background color",
4719
- value: "{colors.mantine.colors.body}"
4720
- },
4721
- pattern: {
4722
- description: "Background pattern color",
4723
- value: {
4724
- base: "{colors.mantine.colors.dark[5]}",
4725
- _light: "{colors.mantine.colors.gray[4]}"
4726
- }
4727
- }
4728
- },
4729
- amber: {
4730
- element: {
4731
- fill: {
4732
- value: "#A35829"
4733
- },
4734
- stroke: {
4735
- value: "#7E451D"
4736
- },
4737
- hiContrast: {
4738
- value: "#FFE0C2"
4739
- },
4740
- loContrast: {
4741
- value: "#f9b27c"
4742
- }
4743
- },
4744
- relation: {
4745
- stroke: {
4746
- DEFAULT: {
4747
- value: "#b45309"
4748
- },
4749
- selected: {
4750
- value: {
4751
- _light: "rgb(153, 70.55, 7.65)",
4752
- _dark: "rgb(202.5, 134.6, 82.8)"
4753
- }
4754
- }
4755
- },
4756
- label: {
4757
- DEFAULT: {
4758
- value: "#FFE0C2"
4759
- },
4760
- bg: {
4761
- value: "#78350f"
4762
- }
4763
- }
4764
- }
4765
- },
4766
- blue: {
4767
- element: {
4768
- fill: {
4769
- value: "#3b82f6"
4770
- },
4771
- stroke: {
4772
- value: "#2563eb"
4773
- },
4774
- hiContrast: {
4775
- value: "#eff6ff"
4776
- },
4777
- loContrast: {
4778
- value: "#bfdbfe"
4779
- }
4780
- },
4781
- relation: {
4782
- stroke: {
4783
- DEFAULT: {
4784
- value: "#3b82f6"
4785
- },
4786
- selected: {
4787
- value: {
4788
- _light: "rgb(50.15, 110.5, 209.1)",
4789
- _dark: "rgb(117.8, 167.5, 248.7)"
4790
- }
4791
- }
4792
- },
4793
- label: {
4794
- DEFAULT: {
4795
- value: "#60a5fa"
4796
- },
4797
- bg: {
4798
- value: "#172554"
4799
- }
4800
- }
4801
- }
4802
- },
4803
- gray: {
4804
- element: {
4805
- fill: {
4806
- value: "#737373"
4807
- },
4808
- stroke: {
4809
- value: "#525252"
4810
- },
4811
- hiContrast: {
4812
- value: "#fafafa"
4813
- },
4814
- loContrast: {
4815
- value: "#d4d4d4"
4816
- }
4817
- },
4818
- relation: {
4819
- stroke: {
4820
- DEFAULT: {
4821
- value: "#6E6E6E"
4822
- },
4823
- selected: {
4824
- value: {
4825
- _light: "rgb(93.5, 93.5, 93.5)",
4826
- _dark: "rgb(153.5, 153.5, 153.5)"
4827
- }
4828
- }
4829
- },
4830
- label: {
4831
- DEFAULT: {
4832
- value: "#C6C6C6"
4833
- },
4834
- bg: {
4835
- value: "#18191b"
4836
- }
4837
- }
4838
- }
4839
- },
4840
- slate: {
4841
- element: {
4842
- fill: {
4843
- value: "#64748b"
4844
- },
4845
- stroke: {
4846
- value: "#475569"
4847
- },
4848
- hiContrast: {
4849
- value: "#f8fafc"
4850
- },
4851
- loContrast: {
4852
- value: "#cbd5e1"
4853
- }
4854
- },
4855
- relation: {
4856
- stroke: {
4857
- DEFAULT: {
4858
- value: "#64748b"
4859
- },
4860
- selected: {
4861
- value: {
4862
- _light: "rgb(85, 98.6, 118.15)",
4863
- _dark: "rgb(146.5, 157.7, 173.8)"
4864
- }
4865
- }
4866
- },
4867
- label: {
4868
- DEFAULT: {
4869
- value: "#cbd5e1"
4870
- },
4871
- bg: {
4872
- value: "#0f172a"
4873
- }
4874
- }
4875
- }
4876
- },
4877
- green: {
4878
- element: {
4879
- fill: {
4880
- value: "#428a4f"
4881
- },
4882
- stroke: {
4883
- value: "#2d5d39"
4884
- },
4885
- hiContrast: {
4886
- value: "#f8fafc"
4887
- },
4888
- loContrast: {
4889
- value: "#c2f0c2"
4890
- }
4891
- },
4892
- relation: {
4893
- stroke: {
4894
- DEFAULT: {
4895
- value: "#15803d"
4896
- },
4897
- selected: {
4898
- value: {
4899
- _light: "rgb(17.85, 108.8, 51.85)",
4900
- _dark: "rgb(91.2, 166.1, 119.2)"
4901
- }
4902
- }
4903
- },
4904
- label: {
4905
- DEFAULT: {
4906
- value: "#22c55e"
4907
- },
4908
- bg: {
4909
- value: "#052e16"
4910
- }
4911
- }
4912
- }
4913
- },
4914
- indigo: {
4915
- element: {
4916
- fill: {
4917
- value: "#6366f1"
4918
- },
4919
- stroke: {
4920
- value: "#4f46e5"
4921
- },
4922
- hiContrast: {
4923
- value: "#eef2ff"
4924
- },
4925
- loContrast: {
4926
- value: "#c7d2fe"
4927
- }
4928
- },
4929
- relation: {
4930
- stroke: {
4931
- DEFAULT: {
4932
- value: "#6366f1"
4933
- },
4934
- selected: {
4935
- value: {
4936
- _light: "rgb(84.15, 86.7, 204.85)",
4937
- _dark: "rgb(145.8, 147.9, 245.2)"
4938
- }
4939
- }
4940
- },
4941
- label: {
4942
- DEFAULT: {
4943
- value: "#818cf8"
4944
- },
4945
- bg: {
4946
- value: "#1e1b4b"
4947
- }
4948
- }
4949
- }
4950
- },
4951
- muted: {
4952
- element: {
4953
- fill: {
4954
- value: "#64748b"
4955
- },
4956
- stroke: {
4957
- value: "#475569"
4958
- },
4959
- hiContrast: {
4960
- value: "#f8fafc"
4961
- },
4962
- loContrast: {
4963
- value: "#cbd5e1"
4964
- }
4965
- },
4966
- relation: {
4967
- stroke: {
4968
- DEFAULT: {
4969
- value: "#64748b"
4970
- },
4971
- selected: {
4972
- value: {
4973
- _light: "rgb(85, 98.6, 118.15)",
4974
- _dark: "rgb(146.5, 157.7, 173.8)"
4975
- }
4976
- }
4977
- },
4978
- label: {
4979
- DEFAULT: {
4980
- value: "#cbd5e1"
4981
- },
4982
- bg: {
4983
- value: "#0f172a"
4984
- }
4985
- }
4986
- }
4987
- },
4988
- primary: {
4989
- element: {
4990
- fill: {
4991
- value: "#3b82f6"
4992
- },
4993
- stroke: {
4994
- value: "#2563eb"
4995
- },
4996
- hiContrast: {
4997
- value: "#eff6ff"
4998
- },
4999
- loContrast: {
5000
- value: "#bfdbfe"
5001
- }
5002
- },
5003
- relation: {
5004
- stroke: {
5005
- DEFAULT: {
5006
- value: "#3b82f6"
5007
- },
5008
- selected: {
5009
- value: {
5010
- _light: "rgb(50.15, 110.5, 209.1)",
5011
- _dark: "rgb(117.8, 167.5, 248.7)"
5012
- }
5013
- }
5014
- },
5015
- label: {
5016
- DEFAULT: {
5017
- value: "#60a5fa"
5018
- },
5019
- bg: {
5020
- value: "#172554"
5021
- }
5022
- }
5023
- }
5024
- },
5025
- red: {
5026
- element: {
5027
- fill: {
5028
- value: "#AC4D39"
5029
- },
5030
- stroke: {
5031
- value: "#853A2D"
5032
- },
5033
- hiContrast: {
5034
- value: "#FBD3CB"
5035
- },
5036
- loContrast: {
5037
- value: "#f5b2a3"
5038
- }
5039
- },
5040
- relation: {
5041
- stroke: {
5042
- DEFAULT: {
5043
- value: "#AC4D39"
5044
- },
5045
- selected: {
5046
- value: {
5047
- _light: "rgb(146.2, 65.45, 48.45)",
5048
- _dark: "rgb(196.9, 130.4, 116.4)"
5049
- }
5050
- }
5051
- },
5052
- label: {
5053
- DEFAULT: {
5054
- value: "#f5b2a3"
5055
- },
5056
- bg: {
5057
- value: "#b91c1c"
5058
- }
5059
- }
5060
- }
5061
- },
5062
- secondary: {
5063
- element: {
5064
- fill: {
5065
- value: "#0284c7"
5066
- },
5067
- stroke: {
5068
- value: "#0369a1"
5069
- },
5070
- hiContrast: {
5071
- value: "#f0f9ff"
5072
- },
5073
- loContrast: {
5074
- value: "#B6ECF7"
5075
- }
5076
- },
5077
- relation: {
5078
- stroke: {
5079
- DEFAULT: {
5080
- value: "#0ea5e9"
5081
- },
5082
- selected: {
5083
- value: {
5084
- _light: "rgb(11.9, 140.25, 198.05)",
5085
- _dark: "rgb(86.3, 192, 239.6)"
5086
- }
5087
- }
5088
- },
5089
- label: {
5090
- DEFAULT: {
5091
- value: "#38bdf8"
5092
- },
5093
- bg: {
5094
- value: "#082f49"
5095
- }
5096
- }
5097
- }
5098
- },
5099
- sky: {
5100
- element: {
5101
- fill: {
5102
- value: "#0284c7"
5103
- },
5104
- stroke: {
5105
- value: "#0369a1"
5106
- },
5107
- hiContrast: {
5108
- value: "#f0f9ff"
5109
- },
5110
- loContrast: {
5111
- value: "#B6ECF7"
5112
- }
5113
- },
5114
- relation: {
5115
- stroke: {
5116
- DEFAULT: {
5117
- value: "#0ea5e9"
5118
- },
5119
- selected: {
5120
- value: {
5121
- _light: "rgb(11.9, 140.25, 198.05)",
5122
- _dark: "rgb(86.3, 192, 239.6)"
5123
- }
5124
- }
5125
- },
5126
- label: {
5127
- DEFAULT: {
5128
- value: "#38bdf8"
5129
- },
5130
- bg: {
5131
- value: "#082f49"
5132
- }
5133
- }
5134
- }
5135
- },
5136
- compound1: {
5137
- amber: {
5138
- hiContrast: {
5139
- value: "{colors.likec4.amber.element.hiContrast}"
5140
- },
5141
- loContrast: {
5142
- value: "{colors.likec4.amber.element.loContrast}"
5143
- },
5144
- fill: {
5145
- value: {
5146
- _light: "#794524",
5147
- _dark: "#704225"
5148
- }
5149
- },
5150
- stroke: {
5151
- value: {
5152
- _light: "#5e361a",
5153
- _dark: "#56331b"
5154
- }
5155
- }
5156
- },
5157
- blue: {
5158
- hiContrast: {
5159
- value: "{colors.likec4.blue.element.hiContrast}"
5160
- },
5161
- loContrast: {
5162
- value: "{colors.likec4.blue.element.loContrast}"
5163
- },
5164
- fill: {
5165
- value: {
5166
- _light: "#145ed7",
5167
- _dark: "#1a5bc5"
5168
- }
5169
- },
5170
- stroke: {
5171
- value: {
5172
- _light: "#194bb8",
5173
- _dark: "#1e49a9"
5174
- }
5175
- }
5176
- },
5177
- gray: {
5178
- hiContrast: {
5179
- value: "{colors.likec4.gray.element.hiContrast}"
5180
- },
5181
- loContrast: {
5182
- value: "{colors.likec4.gray.element.loContrast}"
5183
- },
5184
- fill: {
5185
- value: {
5186
- _light: "#595959",
5187
- _dark: "#545454"
5188
- }
5189
- },
5190
- stroke: {
5191
- value: {
5192
- _light: "#3f3f3f",
5193
- _dark: "#3c3c3c"
5194
- }
5195
- }
5196
- },
5197
- slate: {
5198
- hiContrast: {
5199
- value: "{colors.likec4.slate.element.hiContrast}"
5200
- },
5201
- loContrast: {
5202
- value: "{colors.likec4.slate.element.loContrast}"
5203
- },
5204
- fill: {
5205
- value: {
5206
- _light: "#4e5a6a",
5207
- _dark: "#4b5563"
5208
- }
5209
- },
5210
- stroke: {
5211
- value: {
5212
- _light: "#384250",
5213
- _dark: "#363e4b"
5214
- }
5215
- }
5216
- },
5217
- green: {
5218
- hiContrast: {
5219
- value: "{colors.likec4.green.element.hiContrast}"
5220
- },
5221
- loContrast: {
5222
- value: "{colors.likec4.green.element.loContrast}"
5223
- },
5224
- fill: {
5225
- value: {
5226
- _light: "#35683e",
5227
- _dark: "#34613c"
5228
- }
5229
- },
5230
- stroke: {
5231
- value: {
5232
- _light: "#24462d",
5233
- _dark: "#24412b"
5234
- }
5235
- }
5236
- },
5237
- indigo: {
5238
- hiContrast: {
5239
- value: "{colors.likec4.indigo.element.hiContrast}"
5240
- },
5241
- loContrast: {
5242
- value: "{colors.likec4.indigo.element.loContrast}"
5243
- },
5244
- fill: {
5245
- value: {
5246
- _light: "#2529e1",
5247
- _dark: "#2529d3"
5248
- }
5249
- },
5250
- stroke: {
5251
- value: {
5252
- _light: "#2d24c2",
5253
- _dark: "#3028b2"
5254
- }
5255
- }
5256
- },
5257
- muted: {
5258
- hiContrast: {
5259
- value: "{colors.likec4.muted.element.hiContrast}"
5260
- },
5261
- loContrast: {
5262
- value: "{colors.likec4.muted.element.loContrast}"
5263
- },
5264
- fill: {
5265
- value: {
5266
- _light: "#4e5a6a",
5267
- _dark: "#4b5563"
5268
- }
5269
- },
5270
- stroke: {
5271
- value: {
5272
- _light: "#384250",
5273
- _dark: "#363e4b"
5274
- }
5275
- }
5276
- },
5277
- primary: {
5278
- hiContrast: {
5279
- value: "{colors.likec4.primary.element.hiContrast}"
5280
- },
5281
- loContrast: {
5282
- value: "{colors.likec4.primary.element.loContrast}"
5283
- },
5284
- fill: {
5285
- value: {
5286
- _light: "#145ed7",
5287
- _dark: "#1a5bc5"
5288
- }
5289
- },
5290
- stroke: {
5291
- value: {
5292
- _light: "#194bb8",
5293
- _dark: "#1e49a9"
5294
- }
5295
- }
5296
- },
5297
- red: {
5298
- hiContrast: {
5299
- value: "{colors.likec4.red.element.hiContrast}"
5300
- },
5301
- loContrast: {
5302
- value: "{colors.likec4.red.element.loContrast}"
5303
- },
5304
- fill: {
5305
- value: {
5306
- _light: "#803e30",
5307
- _dark: "#773d30"
5308
- }
5309
- },
5310
- stroke: {
5311
- value: {
5312
- _light: "#632f26",
5313
- _dark: "#5c2e26"
5314
- }
5315
- }
5316
- },
5317
- secondary: {
5318
- hiContrast: {
5319
- value: "{colors.likec4.secondary.element.hiContrast}"
5320
- },
5321
- loContrast: {
5322
- value: "{colors.likec4.secondary.element.loContrast}"
5323
- },
5324
- fill: {
5325
- value: {
5326
- _light: "#086392",
5327
- _dark: "#0d5d86"
5328
- }
5329
- },
5330
- stroke: {
5331
- value: {
5332
- _light: "#084f76",
5333
- _dark: "#0b4a6c"
5334
- }
5335
- }
5336
- },
5337
- sky: {
5338
- hiContrast: {
5339
- value: "{colors.likec4.sky.element.hiContrast}"
5340
- },
5341
- loContrast: {
5342
- value: "{colors.likec4.sky.element.loContrast}"
5343
- },
5344
- fill: {
5345
- value: {
5346
- _light: "#086392",
5347
- _dark: "#0d5d86"
5348
- }
5349
- },
5350
- stroke: {
5351
- value: {
5352
- _light: "#084f76",
5353
- _dark: "#0b4a6c"
5354
- }
5355
- }
5356
- }
5357
- },
5358
- compound2: {
5359
- amber: {
5360
- hiContrast: {
5361
- value: "{colors.likec4.amber.element.hiContrast}"
5362
- },
5363
- loContrast: {
5364
- value: "{colors.likec4.amber.element.loContrast}"
5365
- },
5366
- fill: {
5367
- value: {
5368
- _light: "#724325",
5369
- _dark: "#663e25"
5370
- }
5371
- },
5372
- stroke: {
5373
- value: {
5374
- _light: "#58341b",
5375
- _dark: "#4e301b"
5376
- }
5377
- }
5378
- },
5379
- blue: {
5380
- hiContrast: {
5381
- value: "{colors.likec4.blue.element.hiContrast}"
5382
- },
5383
- loContrast: {
5384
- value: "{colors.likec4.blue.element.loContrast}"
5385
- },
5386
- fill: {
5387
- value: {
5388
- _light: "#195cc8",
5389
- _dark: "#1e56b1"
5390
- }
5391
- },
5392
- stroke: {
5393
- value: {
5394
- _light: "#1d4aac",
5395
- _dark: "#204698"
5396
- }
5397
- }
5398
- },
5399
- gray: {
5400
- hiContrast: {
5401
- value: "{colors.likec4.gray.element.hiContrast}"
5402
- },
5403
- loContrast: {
5404
- value: "{colors.likec4.gray.element.loContrast}"
5405
- },
5406
- fill: {
5407
- value: {
5408
- _light: "#555555",
5409
- _dark: "#4e4e4e"
5410
- }
5411
- },
5412
- stroke: {
5413
- value: {
5414
- _light: "#3d3d3d",
5415
- _dark: "#383838"
5416
- }
5417
- }
5418
- },
5419
- slate: {
5420
- hiContrast: {
5421
- value: "{colors.likec4.slate.element.hiContrast}"
5422
- },
5423
- loContrast: {
5424
- value: "{colors.likec4.slate.element.loContrast}"
5425
- },
5426
- fill: {
5427
- value: {
5428
- _light: "#4c5665",
5429
- _dark: "#474f5c"
5430
- }
5431
- },
5432
- stroke: {
5433
- value: {
5434
- _light: "#363f4c",
5435
- _dark: "#333a45"
5436
- }
5437
- }
5438
- },
5439
- green: {
5440
- hiContrast: {
5441
- value: "{colors.likec4.green.element.hiContrast}"
5442
- },
5443
- loContrast: {
5444
- value: "{colors.likec4.green.element.loContrast}"
5445
- },
5446
- fill: {
5447
- value: {
5448
- _light: "#35623d",
5449
- _dark: "#325839"
5450
- }
5451
- },
5452
- stroke: {
5453
- value: {
5454
- _light: "#24422c",
5455
- _dark: "#223c29"
5456
- }
5457
- }
5458
- },
5459
- indigo: {
5460
- hiContrast: {
5461
- value: "{colors.likec4.indigo.element.hiContrast}"
5462
- },
5463
- loContrast: {
5464
- value: "{colors.likec4.indigo.element.loContrast}"
5465
- },
5466
- fill: {
5467
- value: {
5468
- _light: "#2428d7",
5469
- _dark: "#282bbf"
5470
- }
5471
- },
5472
- stroke: {
5473
- value: {
5474
- _light: "#3028b5",
5475
- _dark: "#312aa1"
5476
- }
5477
- }
5478
- },
5479
- muted: {
5480
- hiContrast: {
5481
- value: "{colors.likec4.muted.element.hiContrast}"
5482
- },
5483
- loContrast: {
5484
- value: "{colors.likec4.muted.element.loContrast}"
5485
- },
5486
- fill: {
5487
- value: {
5488
- _light: "#4c5665",
5489
- _dark: "#474f5c"
5490
- }
5491
- },
5492
- stroke: {
5493
- value: {
5494
- _light: "#363f4c",
5495
- _dark: "#333a45"
5496
- }
5497
- }
5498
- },
5499
- primary: {
5500
- hiContrast: {
5501
- value: "{colors.likec4.primary.element.hiContrast}"
5502
- },
5503
- loContrast: {
5504
- value: "{colors.likec4.primary.element.loContrast}"
5505
- },
5506
- fill: {
5507
- value: {
5508
- _light: "#195cc8",
5509
- _dark: "#1e56b1"
5510
- }
5511
- },
5512
- stroke: {
5513
- value: {
5514
- _light: "#1d4aac",
5515
- _dark: "#204698"
5516
- }
5517
- }
5518
- },
5519
- red: {
5520
- hiContrast: {
5521
- value: "{colors.likec4.red.element.hiContrast}"
5522
- },
5523
- loContrast: {
5524
- value: "{colors.likec4.red.element.loContrast}"
5525
- },
5526
- fill: {
5527
- value: {
5528
- _light: "#793d31",
5529
- _dark: "#6c3a2f"
5530
- }
5531
- },
5532
- stroke: {
5533
- value: {
5534
- _light: "#5e2e26",
5535
- _dark: "#542c25"
5536
- }
5537
- }
5538
- },
5539
- secondary: {
5540
- hiContrast: {
5541
- value: "{colors.likec4.secondary.element.hiContrast}"
5542
- },
5543
- loContrast: {
5544
- value: "{colors.likec4.secondary.element.loContrast}"
5545
- },
5546
- fill: {
5547
- value: {
5548
- _light: "#0c5e88",
5549
- _dark: "#105579"
5550
- }
5551
- },
5552
- stroke: {
5553
- value: {
5554
- _light: "#0b4b6e",
5555
- _dark: "#0e4462"
5556
- }
5557
- }
5558
- },
5559
- sky: {
5560
- hiContrast: {
5561
- value: "{colors.likec4.sky.element.hiContrast}"
5562
- },
5563
- loContrast: {
5564
- value: "{colors.likec4.sky.element.loContrast}"
5565
- },
5566
- fill: {
5567
- value: {
5568
- _light: "#0c5e88",
5569
- _dark: "#105579"
5570
- }
5571
- },
5572
- stroke: {
5573
- value: {
5574
- _light: "#0b4b6e",
5575
- _dark: "#0e4462"
5576
- }
5577
- }
5578
- }
5579
- },
5580
- compound3: {
5581
- amber: {
5582
- hiContrast: {
5583
- value: "{colors.likec4.amber.element.hiContrast}"
5584
- },
5585
- loContrast: {
5586
- value: "{colors.likec4.amber.element.loContrast}"
5587
- },
5588
- fill: {
5589
- value: {
5590
- _light: "#6b4126",
5591
- _dark: "#5c3a25"
5592
- }
5593
- },
5594
- stroke: {
5595
- value: {
5596
- _light: "#52321c",
5597
- _dark: "#472d1b"
5598
- }
5599
- }
5600
- },
5601
- blue: {
5602
- hiContrast: {
5603
- value: "{colors.likec4.blue.element.hiContrast}"
5604
- },
5605
- loContrast: {
5606
- value: "{colors.likec4.blue.element.loContrast}"
5607
- },
5608
- fill: {
5609
- value: {
5610
- _light: "#1e59ba",
5611
- _dark: "#21519f"
5612
- }
5613
- },
5614
- stroke: {
5615
- value: {
5616
- _light: "#2149a0",
5617
- _dark: "#224289"
5618
- }
5619
- }
5620
- },
5621
- gray: {
5622
- hiContrast: {
5623
- value: "{colors.likec4.gray.element.hiContrast}"
5624
- },
5625
- loContrast: {
5626
- value: "{colors.likec4.gray.element.loContrast}"
5627
- },
5628
- fill: {
5629
- value: {
5630
- _light: "#525252",
5631
- _dark: "#484848"
5632
- }
5633
- },
5634
- stroke: {
5635
- value: {
5636
- _light: "#3a3a3a",
5637
- _dark: "#343434"
5638
- }
5639
- }
5640
- },
5641
- slate: {
5642
- hiContrast: {
5643
- value: "{colors.likec4.slate.element.hiContrast}"
5644
- },
5645
- loContrast: {
5646
- value: "{colors.likec4.slate.element.loContrast}"
5647
- },
5648
- fill: {
5649
- value: {
5650
- _light: "#4a5360",
5651
- _dark: "#424a54"
5652
- }
5653
- },
5654
- stroke: {
5655
- value: {
5656
- _light: "#353d48",
5657
- _dark: "#30363f"
5658
- }
5659
- }
5660
- },
5661
- green: {
5662
- hiContrast: {
5663
- value: "{colors.likec4.green.element.hiContrast}"
5664
- },
5665
- loContrast: {
5666
- value: "{colors.likec4.green.element.loContrast}"
5667
- },
5668
- fill: {
5669
- value: {
5670
- _light: "#345d3c",
5671
- _dark: "#305136"
5672
- }
5673
- },
5674
- stroke: {
5675
- value: {
5676
- _light: "#243e2a",
5677
- _dark: "#213626"
5678
- }
5679
- }
5680
- },
5681
- indigo: {
5682
- hiContrast: {
5683
- value: "{colors.likec4.indigo.element.hiContrast}"
5684
- },
5685
- loContrast: {
5686
- value: "{colors.likec4.indigo.element.loContrast}"
5687
- },
5688
- fill: {
5689
- value: {
5690
- _light: "#292cc8",
5691
- _dark: "#2b2dac"
5692
- }
5693
- },
5694
- stroke: {
5695
- value: {
5696
- _light: "#322ba9",
5697
- _dark: "#312b91"
5698
- }
5699
- }
5700
- },
5701
- muted: {
5702
- hiContrast: {
5703
- value: "{colors.likec4.muted.element.hiContrast}"
5704
- },
5705
- loContrast: {
5706
- value: "{colors.likec4.muted.element.loContrast}"
5707
- },
5708
- fill: {
5709
- value: {
5710
- _light: "#4a5360",
5711
- _dark: "#424a54"
5712
- }
5713
- },
5714
- stroke: {
5715
- value: {
5716
- _light: "#353d48",
5717
- _dark: "#30363f"
5718
- }
5719
- }
5720
- },
5721
- primary: {
5722
- hiContrast: {
5723
- value: "{colors.likec4.primary.element.hiContrast}"
5724
- },
5725
- loContrast: {
5726
- value: "{colors.likec4.primary.element.loContrast}"
5727
- },
5728
- fill: {
5729
- value: {
5730
- _light: "#1e59ba",
5731
- _dark: "#21519f"
5732
- }
5733
- },
5734
- stroke: {
5735
- value: {
5736
- _light: "#2149a0",
5737
- _dark: "#224289"
5738
- }
5739
- }
5740
- },
5741
- red: {
5742
- hiContrast: {
5743
- value: "{colors.likec4.red.element.hiContrast}"
5744
- },
5745
- loContrast: {
5746
- value: "{colors.likec4.red.element.loContrast}"
5747
- },
5748
- fill: {
5749
- value: {
5750
- _light: "#723c31",
5751
- _dark: "#62372e"
5752
- }
5753
- },
5754
- stroke: {
5755
- value: {
5756
- _light: "#582e27",
5757
- _dark: "#4c2a24"
5758
- }
5759
- }
5760
- },
5761
- secondary: {
5762
- hiContrast: {
5763
- value: "{colors.likec4.secondary.element.hiContrast}"
5764
- },
5765
- loContrast: {
5766
- value: "{colors.likec4.secondary.element.loContrast}"
5767
- },
5768
- fill: {
5769
- value: {
5770
- _light: "#10597f",
5771
- _dark: "#134e6c"
5772
- }
5773
- },
5774
- stroke: {
5775
- value: {
5776
- _light: "#0e4767",
5777
- _dark: "#103e57"
5778
- }
5779
- }
5780
- },
5781
- sky: {
5782
- hiContrast: {
5783
- value: "{colors.likec4.sky.element.hiContrast}"
5784
- },
5785
- loContrast: {
5786
- value: "{colors.likec4.sky.element.loContrast}"
5787
- },
5788
- fill: {
5789
- value: {
5790
- _light: "#10597f",
5791
- _dark: "#134e6c"
5792
- }
5793
- },
5794
- stroke: {
5795
- value: {
5796
- _light: "#0e4767",
5797
- _dark: "#103e57"
5798
- }
5799
- }
5800
- }
5801
- },
5802
- compound4: {
5803
- amber: {
5804
- hiContrast: {
5805
- value: "{colors.likec4.amber.element.hiContrast}"
5806
- },
5807
- loContrast: {
5808
- value: "{colors.likec4.amber.element.loContrast}"
5809
- },
5810
- fill: {
5811
- value: {
5812
- _light: "#643e27",
5813
- _dark: "#533624"
5814
- }
5815
- },
5816
- stroke: {
5817
- value: {
5818
- _light: "#4d301d",
5819
- _dark: "#402a1a"
5820
- }
5821
- }
5822
- },
5823
- blue: {
5824
- hiContrast: {
5825
- value: "{colors.likec4.blue.element.hiContrast}"
5826
- },
5827
- loContrast: {
5828
- value: "{colors.likec4.blue.element.loContrast}"
5829
- },
5830
- fill: {
5831
- value: {
5832
- _light: "#2357ad",
5833
- _dark: "#234c8e"
5834
- }
5835
- },
5836
- stroke: {
5837
- value: {
5838
- _light: "#244795",
5839
- _dark: "#243f7a"
5840
- }
5841
- }
5842
- },
5843
- gray: {
5844
- hiContrast: {
5845
- value: "{colors.likec4.gray.element.hiContrast}"
5846
- },
5847
- loContrast: {
5848
- value: "{colors.likec4.gray.element.loContrast}"
5849
- },
5850
- fill: {
5851
- value: {
5852
- _light: "#4e4e4e",
5853
- _dark: "#434343"
5854
- }
5855
- },
5856
- stroke: {
5857
- value: {
5858
- _light: "#383838",
5859
- _dark: "#303030"
5860
- }
5861
- }
5862
- },
5863
- slate: {
5864
- hiContrast: {
5865
- value: "{colors.likec4.slate.element.hiContrast}"
5866
- },
5867
- loContrast: {
5868
- value: "{colors.likec4.slate.element.loContrast}"
5869
- },
5870
- fill: {
5871
- value: {
5872
- _light: "#48505b",
5873
- _dark: "#3e444d"
5874
- }
5875
- },
5876
- stroke: {
5877
- value: {
5878
- _light: "#333a44",
5879
- _dark: "#2d323a"
5880
- }
5881
- }
5882
- },
5883
- green: {
5884
- hiContrast: {
5885
- value: "{colors.likec4.green.element.hiContrast}"
5886
- },
5887
- loContrast: {
5888
- value: "{colors.likec4.green.element.loContrast}"
5889
- },
5890
- fill: {
5891
- value: {
5892
- _light: "#33573a",
5893
- _dark: "#2d4932"
5894
- }
5895
- },
5896
- stroke: {
5897
- value: {
5898
- _light: "#233b29",
5899
- _dark: "#1f3123"
5900
- }
5901
- }
5902
- },
5903
- indigo: {
5904
- hiContrast: {
5905
- value: "{colors.likec4.indigo.element.hiContrast}"
5906
- },
5907
- loContrast: {
5908
- value: "{colors.likec4.indigo.element.loContrast}"
5909
- },
5910
- fill: {
5911
- value: {
5912
- _light: "#2d30ba",
5913
- _dark: "#2c2f99"
5914
- }
5915
- },
5916
- stroke: {
5917
- value: {
5918
- _light: "#342e9e",
5919
- _dark: "#302c82"
5920
- }
5921
- }
5922
- },
5923
- muted: {
5924
- hiContrast: {
5925
- value: "{colors.likec4.muted.element.hiContrast}"
5926
- },
5927
- loContrast: {
5928
- value: "{colors.likec4.muted.element.loContrast}"
5929
- },
5930
- fill: {
5931
- value: {
5932
- _light: "#48505b",
5933
- _dark: "#3e444d"
5934
- }
5935
- },
5936
- stroke: {
5937
- value: {
5938
- _light: "#333a44",
5939
- _dark: "#2d323a"
5940
- }
5941
- }
5942
- },
5943
- primary: {
5944
- hiContrast: {
5945
- value: "{colors.likec4.primary.element.hiContrast}"
5946
- },
5947
- loContrast: {
5948
- value: "{colors.likec4.primary.element.loContrast}"
5949
- },
5950
- fill: {
5951
- value: {
5952
- _light: "#2357ad",
5953
- _dark: "#234c8e"
5954
- }
5955
- },
5956
- stroke: {
5957
- value: {
5958
- _light: "#244795",
5959
- _dark: "#243f7a"
5960
- }
5961
- }
5962
- },
5963
- red: {
5964
- hiContrast: {
5965
- value: "{colors.likec4.red.element.hiContrast}"
5966
- },
5967
- loContrast: {
5968
- value: "{colors.likec4.red.element.loContrast}"
5969
- },
5970
- fill: {
5971
- value: {
5972
- _light: "#6a3b31",
5973
- _dark: "#58342c"
5974
- }
5975
- },
5976
- stroke: {
5977
- value: {
5978
- _light: "#522d27",
5979
- _dark: "#442823"
5980
- }
5981
- }
5982
- },
5983
- secondary: {
5984
- hiContrast: {
5985
- value: "{colors.likec4.secondary.element.hiContrast}"
5986
- },
5987
- loContrast: {
5988
- value: "{colors.likec4.secondary.element.loContrast}"
5989
- },
5990
- fill: {
5991
- value: {
5992
- _light: "#135475",
5993
- _dark: "#154660"
5994
- }
5995
- },
5996
- stroke: {
5997
- value: {
5998
- _light: "#11435f",
5999
- _dark: "#11384e"
6000
- }
6001
- }
6002
- },
6003
- sky: {
6004
- hiContrast: {
6005
- value: "{colors.likec4.sky.element.hiContrast}"
6006
- },
6007
- loContrast: {
6008
- value: "{colors.likec4.sky.element.loContrast}"
6009
- },
6010
- fill: {
6011
- value: {
6012
- _light: "#135475",
6013
- _dark: "#154660"
6014
- }
6015
- },
6016
- stroke: {
6017
- value: {
6018
- _light: "#11435f",
6019
- _dark: "#11384e"
6020
- }
6021
- }
6022
- }
6023
- },
6024
- compound5: {
6025
- amber: {
6026
- hiContrast: {
6027
- value: "{colors.likec4.amber.element.hiContrast}"
6028
- },
6029
- loContrast: {
6030
- value: "{colors.likec4.amber.element.loContrast}"
6031
- },
6032
- fill: {
6033
- value: {
6034
- _light: "#5d3c28",
6035
- _dark: "#493223"
6036
- }
6037
- },
6038
- stroke: {
6039
- value: {
6040
- _light: "#472f1d",
6041
- _dark: "#38261a"
6042
- }
6043
- }
6044
- },
6045
- blue: {
6046
- hiContrast: {
6047
- value: "{colors.likec4.blue.element.hiContrast}"
6048
- },
6049
- loContrast: {
6050
- value: "{colors.likec4.blue.element.loContrast}"
6051
- },
6052
- fill: {
6053
- value: {
6054
- _light: "#2755a0",
6055
- _dark: "#25467d"
6056
- }
6057
- },
6058
- stroke: {
6059
- value: {
6060
- _light: "#27468a",
6061
- _dark: "#243b6c"
6062
- }
6063
- }
4543
+ filled: {
4544
+ description: "Mantine color green filled",
4545
+ value: "var(--mantine-color-green-filled)"
6064
4546
  },
6065
- gray: {
6066
- hiContrast: {
6067
- value: "{colors.likec4.gray.element.hiContrast}"
6068
- },
6069
- loContrast: {
6070
- value: "{colors.likec4.gray.element.loContrast}"
6071
- },
6072
- fill: {
6073
- value: {
6074
- _light: "#4b4b4b",
6075
- _dark: "#3d3d3d"
6076
- }
6077
- },
6078
- stroke: {
6079
- value: {
6080
- _light: "#353535",
6081
- _dark: "#2b2b2b"
6082
- }
6083
- }
4547
+ filledHover: {
4548
+ description: "Mantine color green filled hover",
4549
+ value: "var(--mantine-color-green-filled-hover)"
6084
4550
  },
6085
- slate: {
6086
- hiContrast: {
6087
- value: "{colors.likec4.slate.element.hiContrast}"
6088
- },
6089
- loContrast: {
6090
- value: "{colors.likec4.slate.element.loContrast}"
6091
- },
6092
- fill: {
6093
- value: {
6094
- _light: "#454c56",
6095
- _dark: "#393e46"
6096
- }
6097
- },
6098
- stroke: {
6099
- value: {
6100
- _light: "#323841",
6101
- _dark: "#292e34"
6102
- }
6103
- }
4551
+ light: {
4552
+ description: "Mantine color green light",
4553
+ value: "var(--mantine-color-green-light)"
6104
4554
  },
6105
- green: {
6106
- hiContrast: {
6107
- value: "{colors.likec4.green.element.hiContrast}"
6108
- },
6109
- loContrast: {
6110
- value: "{colors.likec4.green.element.loContrast}"
6111
- },
6112
- fill: {
6113
- value: {
6114
- _light: "#335238",
6115
- _dark: "#2b422f"
6116
- }
6117
- },
6118
- stroke: {
6119
- value: {
6120
- _light: "#223728",
6121
- _dark: "#1d2c21"
6122
- }
6123
- }
4555
+ lightHover: {
4556
+ description: "Mantine color green light hover",
4557
+ value: "var(--mantine-color-green-light-hover)"
6124
4558
  },
6125
- indigo: {
6126
- hiContrast: {
6127
- value: "{colors.likec4.indigo.element.hiContrast}"
6128
- },
6129
- loContrast: {
6130
- value: "{colors.likec4.indigo.element.loContrast}"
6131
- },
6132
- fill: {
6133
- value: {
6134
- _light: "#3133ac",
6135
- _dark: "#2d2f87"
6136
- }
6137
- },
6138
- stroke: {
6139
- value: {
6140
- _light: "#363092",
6141
- _dark: "#2f2b73"
6142
- }
6143
- }
4559
+ lightColor: {
4560
+ description: "Mantine color green light color",
4561
+ value: "var(--mantine-color-green-light-color)"
6144
4562
  },
6145
- muted: {
6146
- hiContrast: {
6147
- value: "{colors.likec4.muted.element.hiContrast}"
6148
- },
6149
- loContrast: {
6150
- value: "{colors.likec4.muted.element.loContrast}"
6151
- },
6152
- fill: {
6153
- value: {
6154
- _light: "#454c56",
6155
- _dark: "#393e46"
6156
- }
6157
- },
6158
- stroke: {
6159
- value: {
6160
- _light: "#323841",
6161
- _dark: "#292e34"
6162
- }
6163
- }
4563
+ outline: {
4564
+ description: "Mantine color green outline",
4565
+ value: "var(--mantine-color-green-outline)"
6164
4566
  },
6165
- primary: {
6166
- hiContrast: {
6167
- value: "{colors.likec4.primary.element.hiContrast}"
6168
- },
6169
- loContrast: {
6170
- value: "{colors.likec4.primary.element.loContrast}"
6171
- },
6172
- fill: {
6173
- value: {
6174
- _light: "#2755a0",
6175
- _dark: "#25467d"
6176
- }
6177
- },
6178
- stroke: {
6179
- value: {
6180
- _light: "#27468a",
6181
- _dark: "#243b6c"
6182
- }
6183
- }
4567
+ outlineHover: {
4568
+ description: "Mantine color green outline hover",
4569
+ value: "var(--mantine-color-green-outline-hover)"
4570
+ }
4571
+ },
4572
+ "green[0]": {
4573
+ description: "Mantine color green.0",
4574
+ value: "var(--mantine-color-green-0)"
4575
+ },
4576
+ "green[1]": {
4577
+ description: "Mantine color green.1",
4578
+ value: "var(--mantine-color-green-1)"
4579
+ },
4580
+ "green[2]": {
4581
+ description: "Mantine color green.2",
4582
+ value: "var(--mantine-color-green-2)"
4583
+ },
4584
+ "green[3]": {
4585
+ description: "Mantine color green.3",
4586
+ value: "var(--mantine-color-green-3)"
4587
+ },
4588
+ "green[4]": {
4589
+ description: "Mantine color green.4",
4590
+ value: "var(--mantine-color-green-4)"
4591
+ },
4592
+ "green[5]": {
4593
+ description: "Mantine color green.5",
4594
+ value: "var(--mantine-color-green-5)"
4595
+ },
4596
+ "green[6]": {
4597
+ description: "Mantine color green.6",
4598
+ value: "var(--mantine-color-green-6)"
4599
+ },
4600
+ "green[7]": {
4601
+ description: "Mantine color green.7",
4602
+ value: "var(--mantine-color-green-7)"
4603
+ },
4604
+ "green[8]": {
4605
+ description: "Mantine color green.8",
4606
+ value: "var(--mantine-color-green-8)"
4607
+ },
4608
+ "green[9]": {
4609
+ description: "Mantine color green.9",
4610
+ value: "var(--mantine-color-green-9)"
4611
+ },
4612
+ yellow: {
4613
+ DEFAULT: {
4614
+ description: "Mantine color yellow",
4615
+ value: "var(--mantine-color-yellow-6)"
6184
4616
  },
6185
- red: {
6186
- hiContrast: {
6187
- value: "{colors.likec4.red.element.hiContrast}"
6188
- },
6189
- loContrast: {
6190
- value: "{colors.likec4.red.element.loContrast}"
6191
- },
6192
- fill: {
6193
- value: {
6194
- _light: "#633a31",
6195
- _dark: "#4f312a"
6196
- }
6197
- },
6198
- stroke: {
6199
- value: {
6200
- _light: "#4d2c27",
6201
- _dark: "#3d2521"
6202
- }
6203
- }
4617
+ filled: {
4618
+ description: "Mantine color yellow filled",
4619
+ value: "var(--mantine-color-yellow-filled)"
6204
4620
  },
6205
- secondary: {
6206
- hiContrast: {
6207
- value: "{colors.likec4.secondary.element.hiContrast}"
6208
- },
6209
- loContrast: {
6210
- value: "{colors.likec4.secondary.element.loContrast}"
6211
- },
6212
- fill: {
6213
- value: {
6214
- _light: "#164f6c",
6215
- _dark: "#163f55"
6216
- }
6217
- },
6218
- stroke: {
6219
- value: {
6220
- _light: "#133f58",
6221
- _dark: "#123345"
6222
- }
6223
- }
4621
+ filledHover: {
4622
+ description: "Mantine color yellow filled hover",
4623
+ value: "var(--mantine-color-yellow-filled-hover)"
6224
4624
  },
6225
- sky: {
6226
- hiContrast: {
6227
- value: "{colors.likec4.sky.element.hiContrast}"
6228
- },
6229
- loContrast: {
6230
- value: "{colors.likec4.sky.element.loContrast}"
6231
- },
6232
- fill: {
6233
- value: {
6234
- _light: "#164f6c",
6235
- _dark: "#163f55"
6236
- }
6237
- },
6238
- stroke: {
6239
- value: {
6240
- _light: "#133f58",
6241
- _dark: "#123345"
6242
- }
6243
- }
4625
+ light: {
4626
+ description: "Mantine color yellow light",
4627
+ value: "var(--mantine-color-yellow-light)"
4628
+ },
4629
+ lightHover: {
4630
+ description: "Mantine color yellow light hover",
4631
+ value: "var(--mantine-color-yellow-light-hover)"
4632
+ },
4633
+ lightColor: {
4634
+ description: "Mantine color yellow light color",
4635
+ value: "var(--mantine-color-yellow-light-color)"
4636
+ },
4637
+ outline: {
4638
+ description: "Mantine color yellow outline",
4639
+ value: "var(--mantine-color-yellow-outline)"
4640
+ },
4641
+ outlineHover: {
4642
+ description: "Mantine color yellow outline hover",
4643
+ value: "var(--mantine-color-yellow-outline-hover)"
6244
4644
  }
4645
+ },
4646
+ "yellow[0]": {
4647
+ description: "Mantine color yellow.0",
4648
+ value: "var(--mantine-color-yellow-0)"
4649
+ },
4650
+ "yellow[1]": {
4651
+ description: "Mantine color yellow.1",
4652
+ value: "var(--mantine-color-yellow-1)"
4653
+ },
4654
+ "yellow[2]": {
4655
+ description: "Mantine color yellow.2",
4656
+ value: "var(--mantine-color-yellow-2)"
4657
+ },
4658
+ "yellow[3]": {
4659
+ description: "Mantine color yellow.3",
4660
+ value: "var(--mantine-color-yellow-3)"
4661
+ },
4662
+ "yellow[4]": {
4663
+ description: "Mantine color yellow.4",
4664
+ value: "var(--mantine-color-yellow-4)"
4665
+ },
4666
+ "yellow[5]": {
4667
+ description: "Mantine color yellow.5",
4668
+ value: "var(--mantine-color-yellow-5)"
4669
+ },
4670
+ "yellow[6]": {
4671
+ description: "Mantine color yellow.6",
4672
+ value: "var(--mantine-color-yellow-6)"
4673
+ },
4674
+ "yellow[7]": {
4675
+ description: "Mantine color yellow.7",
4676
+ value: "var(--mantine-color-yellow-7)"
4677
+ },
4678
+ "yellow[8]": {
4679
+ description: "Mantine color yellow.8",
4680
+ value: "var(--mantine-color-yellow-8)"
4681
+ },
4682
+ "yellow[9]": {
4683
+ description: "Mantine color yellow.9",
4684
+ value: "var(--mantine-color-yellow-9)"
6245
4685
  }
6246
4686
  }
6247
4687
  }
6248
4688
  }
6249
4689
  };
4690
+ const conditions$1 = {
4691
+ shapeSizeXs: ":where([data-likec4-shape-size='xs']) &",
4692
+ shapeSizeSm: ":where([data-likec4-shape-size='sm']) &",
4693
+ shapeSizeMd: ":where([data-likec4-shape-size='md']) &",
4694
+ shapeSizeLg: ":where([data-likec4-shape-size='lg']) &",
4695
+ shapeSizeXl: ":where([data-likec4-shape-size='xl']) &",
4696
+ shapeRectangle: ":where([data-likec4-shape='rectangle']) &",
4697
+ shapePerson: ":where([data-likec4-shape='person']) &",
4698
+ shapeBrowser: ":where([data-likec4-shape='browser']) &",
4699
+ shapeMobile: ":where([data-likec4-shape='mobile']) &",
4700
+ shapeCylinder: ":where([data-likec4-shape='cylinder']) &",
4701
+ shapeStorage: ":where([data-likec4-shape='storage']) &",
4702
+ shapeQueue: ":where([data-likec4-shape='queue']) &"
4703
+ };
4704
+ const generatedGlobalCss = {
4705
+ ":where([data-likec4-text-size='xs'])": {
4706
+ "--likec4-text-size": "{fontSizes.likec4.xs}"
4707
+ },
4708
+ ":where([data-likec4-text-size='sm'])": {
4709
+ "--likec4-text-size": "{fontSizes.likec4.sm}"
4710
+ },
4711
+ ":where([data-likec4-text-size='md'])": {
4712
+ "--likec4-text-size": "{fontSizes.likec4.md}"
4713
+ },
4714
+ ":where([data-likec4-text-size='lg'])": {
4715
+ "--likec4-text-size": "{fontSizes.likec4.lg}"
4716
+ },
4717
+ ":where([data-likec4-text-size='xl'])": {
4718
+ "--likec4-text-size": "{fontSizes.likec4.xl}"
4719
+ },
4720
+ ":where([data-likec4-spacing='xs'])": {
4721
+ "--likec4-spacing": "{spacing.likec4.xs}"
4722
+ },
4723
+ ":where([data-likec4-spacing='sm'])": {
4724
+ "--likec4-spacing": "{spacing.likec4.sm}"
4725
+ },
4726
+ ":where([data-likec4-spacing='md'])": {
4727
+ "--likec4-spacing": "{spacing.likec4.md}"
4728
+ },
4729
+ ":where([data-likec4-spacing='lg'])": {
4730
+ "--likec4-spacing": "{spacing.likec4.lg}"
4731
+ },
4732
+ ":where([data-likec4-spacing='xl'])": {
4733
+ "--likec4-spacing": "{spacing.likec4.xl}"
4734
+ }
4735
+ };
4736
+ const paletteGlobalVars = {
4737
+ "--likec4-palette-fill": "#3b82f6",
4738
+ "--likec4-palette-stroke": "#2563eb",
4739
+ "--likec4-palette-hiContrast": "#eff6ff",
4740
+ "--likec4-palette-loContrast": "#bfdbfe",
4741
+ "--likec4-palette-relation-stroke": "#3b82f6",
4742
+ "--likec4-palette-relation-label": "#60a5fa",
4743
+ "--likec4-palette-relation-label-bg": "#172554"
4744
+ };
6250
4745
  const conditions = {
6251
4746
  extend: {
4747
+ ...conditions$1,
6252
4748
  light: '[data-mantine-color-scheme="light"] &',
6253
4749
  dark: '[data-mantine-color-scheme="dark"] &',
4750
+ notDisabled: "&:not(:is(:disabled, [disabled], [data-disabled]))",
6254
4751
  // This is used to hide certain elements when the diagram is in reduced graphics mode (large)
6255
4752
  reduceGraphics: [
6256
4753
  `${root}:is([data-likec4-reduced-graphics])`,
@@ -6276,11 +4773,103 @@ const conditions = {
6276
4773
  whenHovered: ':where([data-likec4-hovered="true"]) &',
6277
4774
  whenSelected: ":where(.react-flow__node.selected, .react-flow__edge.selected) &",
6278
4775
  whenDimmed: ":where([data-likec4-dimmed]) &",
6279
- whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &",
4776
+ whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
6280
4777
  // likec4Color: ':where([data-likec4-color]) &',
6281
- ...conditions$1
6282
4778
  }
6283
4779
  };
4780
+ const globalCss = {
4781
+ extend: {
4782
+ // '@supports ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))': {
4783
+ // // TODO: this workaround disables animations in Safari (to improve performance)
4784
+ // ['--likec4-safari-animation-hook']: ' ',
4785
+ // },
4786
+ ":where(:root, :host)": {
4787
+ ["--likec4-app-font-default"]: `'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'`
4788
+ },
4789
+ ".likec4-shadow-root": {
4790
+ display: "contents",
4791
+ "--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
4792
+ "--mantine-font-family-headings": "var(--likec4-app-font, var(--likec4-app-font-default))"
4793
+ },
4794
+ ...generatedGlobalCss
4795
+ }
4796
+ };
4797
+ const globalVars = {
4798
+ extend: {
4799
+ ...paletteGlobalVars,
4800
+ "--likec4-text-size": {
4801
+ syntax: "<length> | <percentage>",
4802
+ inherits: false
4803
+ },
4804
+ "--likec4-spacing": {
4805
+ syntax: "<length> | <percentage>",
4806
+ inherits: false
4807
+ },
4808
+ "--text-fz": {
4809
+ syntax: "<length> | <percentage>",
4810
+ inherits: false
4811
+ },
4812
+ [iconSize]: {
4813
+ syntax: "<length> | <percentage>",
4814
+ inherits: false
4815
+ }
4816
+ }
4817
+ };
4818
+ const layerStyles = defineLayerStyles({
4819
+ likec4: {
4820
+ tag: {
4821
+ description: "LikeC4 tag layer",
4822
+ value: {
4823
+ color: "likec4.tag.text",
4824
+ backgroundColor: "likec4.tag.bg",
4825
+ _hover: {
4826
+ backgroundColor: "likec4.tag.bg.hover"
4827
+ },
4828
+ border: "none",
4829
+ borderRadius: 3
4830
+ }
4831
+ },
4832
+ panel: {
4833
+ description: "LikeC4 panel layer",
4834
+ value: {
4835
+ paddingBlock: "1",
4836
+ paddingInline: "xs",
4837
+ borderRadius: "0",
4838
+ backgroundColor: {
4839
+ base: "likec4.panel.bg",
4840
+ _whenPanning: "likec4.panel.bg.whenPanning"
4841
+ },
4842
+ border: "1px solid {colors.likec4.panel.border}",
4843
+ backdropFilter: "blur(10px)",
4844
+ "@/sm": {
4845
+ boxShadow: "lg",
4846
+ borderRadius: "md",
4847
+ padding: "2xs"
4848
+ },
4849
+ _whenPanning: {
4850
+ boxShadow: "none",
4851
+ borderRadius: "0"
4852
+ }
4853
+ }
4854
+ },
4855
+ dropdown: {
4856
+ description: "LikeC4 dropdown layer",
4857
+ value: {
4858
+ paddingInline: "2xs",
4859
+ paddingBlock: "2xs",
4860
+ backgroundColor: "likec4.dropdown.bg",
4861
+ border: "1px solid {colors.likec4.dropdown.border}",
4862
+ boxShadow: "lg",
4863
+ borderRadius: "md",
4864
+ _whenPanning: {
4865
+ boxShadow: "none",
4866
+ borderRadius: "0px",
4867
+ borderColor: "transparent"
4868
+ }
4869
+ }
4870
+ }
4871
+ }
4872
+ });
6284
4873
  const patterns = {
6285
4874
  extend: {
6286
4875
  vstack: {
@@ -6298,18 +4887,18 @@ const patterns = {
6298
4887
  };
6299
4888
  const actionBtn = defineRecipe({
6300
4889
  className: "action-btn",
6301
- description: "The styles for the Action Buttons",
4890
+ description: "Action Button within Diagram Node (Bottom-Center)",
6302
4891
  base: {
6303
4892
  pointerEvents: "all",
6304
4893
  cursor: "pointer",
6305
4894
  color: "var(--actionbtn-color)",
6306
4895
  opacity: 0.75,
6307
- "--actionbtn-color": "{colors.likec4.palette.loContrast}",
6308
- "--actionbtn-color-hovered": "{colors.likec4.palette.loContrast}",
6309
- "--actionbtn-color-hovered-btn": "{colors.likec4.palette.hiContrast}",
6310
- "--actionbtn-bg-idle": `color-mix(in srgb , {colors.likec4.palette.fill}, transparent 99%)`,
6311
- "--actionbtn-bg-hovered": `color-mix(in srgb , {colors.likec4.palette.fill} 65%, {colors.likec4.palette.stroke})`,
6312
- "--actionbtn-bg-hovered-btn": `color-mix(in srgb , {colors.likec4.palette.fill} 50%, {colors.likec4.palette.stroke})`,
4896
+ "--actionbtn-color": "var(--likec4-palette-loContrast)",
4897
+ "--actionbtn-color-hovered": "var(--likec4-palette-loContrast)",
4898
+ "--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
4899
+ "--actionbtn-bg-idle": `color-mix(in srgb , var(--likec4-palette-fill), transparent 99%)`,
4900
+ "--actionbtn-bg-hovered": `color-mix(in srgb , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
4901
+ "--actionbtn-bg-hovered-btn": `color-mix(in srgb , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
6313
4902
  "--ai-bg": `var(--actionbtn-bg-idle)`,
6314
4903
  background: `var(--ai-bg)`,
6315
4904
  _whenHovered: {
@@ -6367,40 +4956,115 @@ const actionBtn = defineRecipe({
6367
4956
  size: ["md"],
6368
4957
  radius: ["md"],
6369
4958
  variant: ["*"],
6370
- conditions: ["whenHovered", "hover", "reducedGraphics"]
4959
+ conditions: ["*"]
4960
+ }]
4961
+ });
4962
+ const edgeActionBtn = defineRecipe({
4963
+ className: "likec4-edge-action-btn",
4964
+ description: "Action Button within Diagram Edge Label",
4965
+ base: {
4966
+ // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
4967
+ pointerEvents: "all",
4968
+ color: `var(--xy-edge-label-color)`,
4969
+ cursor: "pointer",
4970
+ opacity: 0.75,
4971
+ transition: "fast",
4972
+ translate: "auto",
4973
+ // '--ai-bg': 'var(--xy-edge-label-background-color)',
4974
+ "--ai-bg": "transparent",
4975
+ "--ai-hover": `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
4976
+ "--ai-size": `var(--ai-size-sm)`,
4977
+ "--ai-radius": `{radii.sm}`,
4978
+ _hover: {
4979
+ translateY: "[2px]",
4980
+ scale: 1.15
4981
+ },
4982
+ _active: {
4983
+ translateY: "[-1px]",
4984
+ scale: "0.9"
4985
+ },
4986
+ _whenHovered: {
4987
+ "--ai-bg": "var(--xy-edge-label-background-color)",
4988
+ opacity: 1
4989
+ },
4990
+ "& .tabler-icon": {
4991
+ width: "80%",
4992
+ height: "80%",
4993
+ strokeWidth: "2"
4994
+ }
4995
+ },
4996
+ variants: {},
4997
+ defaultVariants: {},
4998
+ staticCss: [{
4999
+ conditions: ["*"]
5000
+ }]
5001
+ });
5002
+ const varIconSize = `var(${iconSize})`;
5003
+ const elementNodeIcon = defineRecipe({
5004
+ className: "likec4-element-node-icon",
5005
+ description: "Element Icon displayed in diagram nodes",
5006
+ base: {
5007
+ flex: `0 0 ${varIconSize}`,
5008
+ height: varIconSize,
5009
+ width: varIconSize,
5010
+ display: "flex",
5011
+ alignSelf: "flex-start",
5012
+ alignItems: "center",
5013
+ justifyContent: "center",
5014
+ mixBlendMode: {
5015
+ base: "hard-light",
5016
+ _reduceGraphicsOnPan: "normal"
5017
+ },
5018
+ "& svg, & img": {
5019
+ width: "100%",
5020
+ height: "auto",
5021
+ maxHeight: "100%",
5022
+ pointerEvents: "none",
5023
+ filter: {
5024
+ base: [
5025
+ "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
5026
+ "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
5027
+ "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
5028
+ ],
5029
+ _reduceGraphicsOnPan: "none"
5030
+ }
5031
+ },
5032
+ "& img": {
5033
+ objectFit: "contain"
5034
+ }
5035
+ },
5036
+ staticCss: [{
5037
+ conditions: ["*"]
6371
5038
  }]
6372
5039
  });
6373
5040
  const likec4tag = defineRecipe({
6374
5041
  className: "likec4-tag",
6375
5042
  base: {
6376
5043
  pointerEvents: "all",
6377
- display: "flex",
5044
+ display: "inline-flex",
6378
5045
  alignItems: "center",
6379
5046
  justifyContent: "center",
6380
5047
  minWidth: 40,
6381
5048
  width: "min-content",
6382
5049
  transition: "fast",
6383
5050
  fontSize: "xs",
6384
- fontFamily: "var(--likec4-element-font, {fonts.likec4})",
6385
- fontWeight: 500,
6386
- "& > span": {
6387
- display: "inline-block"
6388
- // lineHeight: 1.5,
6389
- },
5051
+ gap: "[1px]",
5052
+ cursor: "default",
5053
+ fontFamily: "likec4.element",
5054
+ fontWeight: "bold",
5055
+ layerStyle: "likec4.tag",
6390
5056
  whiteSpace: "nowrap",
6391
- px: 5,
6392
- border: "none",
6393
- borderRadius: 3,
6394
- backgroundColor: {
6395
- base: "likec4.tag.bg",
6396
- _hover: "likec4.tag.bg.hover"
6397
- }
5057
+ px: "1",
5058
+ py: "0"
6398
5059
  },
6399
5060
  variants: {
6400
5061
  autoTextColor: {
6401
5062
  false: {
6402
5063
  "& > span": {
6403
- color: "likec4.tag.text"
5064
+ color: "likec4.tag.text",
5065
+ _first: {
5066
+ opacity: 0.65
5067
+ }
6404
5068
  }
6405
5069
  },
6406
5070
  true: {
@@ -6425,20 +5089,21 @@ const likec4tag = defineRecipe({
6425
5089
  const markdownBlock = defineRecipe({
6426
5090
  className: "likec4-markdown-block",
6427
5091
  jsx: ["MarkdownBlock"],
5092
+ description: "Block with Markdown content",
6428
5093
  base: {
6429
5094
  pointerEvents: "all",
6430
5095
  "--text-fz": "1rem",
6431
5096
  "--typography-spacing": "calc(0.75 * var(--text-fz) * var(--mantine-scale, 1))",
6432
- "--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale) / 1.125)",
6433
- "--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale))",
5097
+ "--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale, 1) / 1.125)",
5098
+ "--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale, 1))",
6434
5099
  "--text-fw-headings": "600",
6435
5100
  paddingBottom: "calc(.5 * var(--typography-spacing) + 1px)",
6436
5101
  fontSize: "var(--text-fz-md)",
6437
5102
  "& :first-child": {
6438
- marginTop: 0
5103
+ marginTop: "0"
6439
5104
  },
6440
5105
  "& :last-child": {
6441
- marginBottom: 0
5106
+ marginBottom: "0"
6442
5107
  },
6443
5108
  "& :where(h1, h2, h3, h4, h5, h6)": {
6444
5109
  lineHeight: "1.5",
@@ -6564,7 +5229,7 @@ const markdownBlock = defineRecipe({
6564
5229
  '& :where(ul, ol):not([data-type="taskList"])': {
6565
5230
  marginBottom: "var(--typography-spacing)",
6566
5231
  paddingInlineStart: "var(--typography-spacing)",
6567
- listStylePosition: "outside"
5232
+ listStylePosition: "inside"
6568
5233
  },
6569
5234
  "& :where(table)": {
6570
5235
  width: "100%",
@@ -6631,20 +5296,20 @@ const markdownBlock = defineRecipe({
6631
5296
  true: {
6632
5297
  "--typography-spacing": "calc(0.25rem * var(--mantine-scale, 1))",
6633
5298
  "& :where(a)": {
6634
- color: "likec4.palette.fill/45",
5299
+ color: "var(--likec4-palette-fill)/45",
6635
5300
  mixBlendMode: "difference"
6636
5301
  },
6637
5302
  "& :where(code)": {
6638
- borderColor: "likec4.palette.stroke/85",
6639
- color: "likec4.palette.hiContrast",
6640
- backgroundColor: "likec4.palette.stroke/70"
5303
+ borderColor: "var(--likec4-palette-stroke)/85",
5304
+ color: "var(--likec4-palette-loContrast)",
5305
+ backgroundColor: "var(--likec4-palette-stroke)/70"
6641
5306
  },
6642
5307
  "& :where(strong)": {
6643
- color: `color-mix(in srgb , {colors.likec4.palette.hiContrast} 50%, {colors.likec4.palette.loContrast})`
5308
+ color: `color-mix(in srgb , var(--likec4-palette-hiContrast) 50%, var(--likec4-palette-loContrast))`
6644
5309
  },
6645
5310
  "& :where(blockquote)": {
6646
5311
  padding: "2xs",
6647
- backgroundColor: "likec4.palette.stroke/65"
5312
+ backgroundColor: "var(--likec4-palette-stroke)/65"
6648
5313
  }
6649
5314
  },
6650
5315
  false: {}
@@ -6654,32 +5319,63 @@ const markdownBlock = defineRecipe({
6654
5319
  uselikec4palette: false
6655
5320
  },
6656
5321
  staticCss: [{
6657
- uselikec4palette: ["true"],
6658
- conditions: ["hover"]
5322
+ uselikec4palette: ["*"],
5323
+ conditions: ["*"]
6659
5324
  }]
6660
5325
  });
6661
- const recipes = {
6662
- __proto__: null,
6663
- actionBtn,
6664
- likec4tag,
6665
- markdownBlock
6666
- };
6667
- const layerStyles = defineLayerStyles({
6668
- likec4: {
6669
- tag: {
6670
- description: "LikeC4 tag layer",
6671
- value: {
6672
- color: "likec4.tag.text",
6673
- backgroundColor: "likec4.tag.bg",
6674
- _hover: {
6675
- backgroundColor: "likec4.tag.bg.hover"
6676
- },
6677
- border: "none",
6678
- borderRadius: 3
5326
+ const navigationPanelActionIcon = defineRecipe({
5327
+ className: "likec4-navigation-panel-icon",
5328
+ jsx: ["PanelActionIcon"],
5329
+ description: "ActionIcon for navigation panel",
5330
+ base: {
5331
+ color: {
5332
+ base: "likec4.panel.action-icon.text",
5333
+ _disabled: "likec4.panel.action-icon.text.disabled",
5334
+ _notDisabled: {
5335
+ _hover: "likec4.panel.action-icon.text.hover"
6679
5336
  }
5337
+ },
5338
+ _disabled: {
5339
+ opacity: 0.5
6680
5340
  }
6681
- }
5341
+ },
5342
+ variants: {
5343
+ variant: {
5344
+ "default": {
5345
+ backgroundColor: {
5346
+ base: "[transparent]",
5347
+ _notDisabled: {
5348
+ _hover: "likec4.panel.action-icon.bg.hover"
5349
+ }
5350
+ }
5351
+ },
5352
+ "filled": {
5353
+ backgroundColor: {
5354
+ base: "likec4.panel.action-icon.bg",
5355
+ _notDisabled: {
5356
+ _hover: "likec4.panel.action-icon.bg.hover"
5357
+ }
5358
+ }
5359
+ }
5360
+ }
5361
+ },
5362
+ defaultVariants: {
5363
+ variant: "default"
5364
+ },
5365
+ staticCss: [{
5366
+ variant: ["*"],
5367
+ conditions: ["*"]
5368
+ }]
6682
5369
  });
5370
+ const recipes = {
5371
+ __proto__: null,
5372
+ actionBtn,
5373
+ edgeActionBtn,
5374
+ elementNodeIcon,
5375
+ likec4tag,
5376
+ markdownBlock,
5377
+ navigationPanelActionIcon
5378
+ };
6683
5379
  const semanticTokens = defineSemanticTokens({
6684
5380
  fontSizes: {
6685
5381
  likec4: {
@@ -6691,6 +5387,19 @@ const semanticTokens = defineSemanticTokens({
6691
5387
  },
6692
5388
  colors: {
6693
5389
  likec4: {
5390
+ background: {
5391
+ DEFAULT: {
5392
+ description: "Background color",
5393
+ value: "{colors.mantine.colors.body}"
5394
+ },
5395
+ pattern: {
5396
+ description: "Background pattern color",
5397
+ value: {
5398
+ _dark: "{colors.mantine.colors.dark[4]/70}",
5399
+ _light: "{colors.mantine.colors.gray[4]}"
5400
+ }
5401
+ }
5402
+ },
6694
5403
  mixColor: {
6695
5404
  description: "Color to be used in color-mix",
6696
5405
  value: {
@@ -6710,27 +5419,450 @@ const semanticTokens = defineSemanticTokens({
6710
5419
  value: `{colors.tomato.12}`
6711
5420
  }
6712
5421
  },
6713
- palette: {
6714
- DEFAULT: { value: `var(--likec4-palette,'likec4.primary')` },
6715
- fill: { value: "{colors.likec4.primary.element.fill}" },
6716
- stroke: { value: "{colors.likec4.primary.element.stroke}" },
6717
- hiContrast: { value: "{colors.likec4.primary.element.hiContrast}" },
6718
- loContrast: { value: "{colors.likec4.primary.element.loContrast}" }
5422
+ panel: {
5423
+ bg: {
5424
+ DEFAULT: {
5425
+ description: "LikeC4 panel background color",
5426
+ value: {
5427
+ base: `{colors.mantine.colors.body/90}`,
5428
+ _dark: `{colors.mantine.colors.dark[6]/80}`
5429
+ }
5430
+ },
5431
+ whenPanning: {
5432
+ description: "LikeC4 panel background color when panning",
5433
+ value: {
5434
+ base: `{colors.mantine.colors.body}`,
5435
+ _dark: `{colors.mantine.colors.dark[6]}`
5436
+ }
5437
+ }
5438
+ },
5439
+ border: {
5440
+ description: "LikeC4 panel border color",
5441
+ value: {
5442
+ base: "transparent",
5443
+ _light: `{colors.mantine.colors.defaultBorder/30}`
5444
+ }
5445
+ },
5446
+ "action-icon": {
5447
+ text: {
5448
+ DEFAULT: {
5449
+ description: "LikeC4 action icon text color",
5450
+ value: "{colors.mantine.colors.text/70}"
5451
+ },
5452
+ hover: {
5453
+ description: "LikeC4 action icon text color on hover",
5454
+ value: "{colors.mantine.colors.text}"
5455
+ },
5456
+ disabled: {
5457
+ description: "LikeC4 action icon text color when disabled",
5458
+ value: "{colors.mantine.colors.dimmed}"
5459
+ }
5460
+ },
5461
+ bg: {
5462
+ DEFAULT: {
5463
+ description: "LikeC4 action icon background color",
5464
+ value: {
5465
+ base: "{colors.mantine.colors.gray[1]}",
5466
+ _dark: "{colors.mantine.colors.dark[7]/70}"
5467
+ }
5468
+ },
5469
+ hover: {
5470
+ description: "LikeC4 action icon background color on hover",
5471
+ value: {
5472
+ base: "{colors.mantine.colors.gray[2]}",
5473
+ _dark: "{colors.mantine.colors.dark[8]}"
5474
+ }
5475
+ }
5476
+ }
5477
+ }
6719
5478
  },
6720
- relation: {
6721
- stroke: {
6722
- DEFAULT: { value: "{colors.likec4.gray.relation.stroke}" },
6723
- selected: { value: "{colors.likec4.gray.relation.stroke.selected}" }
5479
+ dropdown: {
5480
+ bg: {
5481
+ DEFAULT: {
5482
+ description: "LikeC4 dropdown background color",
5483
+ value: {
5484
+ base: `#FFF`,
5485
+ _dark: `{colors.mantine.colors.dark[6]}`
5486
+ }
5487
+ }
6724
5488
  },
6725
- label: {
6726
- DEFAULT: { value: "{colors.likec4.gray.relation.label}" },
6727
- bg: { value: "{colors.likec4.gray.relation.label.bg}" }
5489
+ border: {
5490
+ description: "LikeC4 dropdown border color",
5491
+ value: "{colors.likec4.panel.border}"
5492
+ }
5493
+ }
5494
+ }
5495
+ }
5496
+ });
5497
+ const edgeLabel = defineSlotRecipe({
5498
+ className: "likec4-edge-label",
5499
+ slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
5500
+ base: {
5501
+ root: {
5502
+ pointerEvents: "all",
5503
+ fontFamily: "likec4.relation",
5504
+ paddingBlock: "1",
5505
+ paddingInline: "1.5",
5506
+ display: "flex",
5507
+ flexDirection: "column",
5508
+ alignItems: "center",
5509
+ width: "max-content",
5510
+ lineHeight: "[1.2]",
5511
+ maxWidth: "100%",
5512
+ gap: "0.5",
5513
+ color: "var(--xy-edge-label-color)"
5514
+ },
5515
+ stepNumber: {
5516
+ alignSelf: "stretch",
5517
+ flex: "0 0 auto",
5518
+ fontWeight: 600,
5519
+ fontSize: "14px",
5520
+ padding: "1",
5521
+ textAlign: "center",
5522
+ minWidth: "22px",
5523
+ borderTopLeftRadius: "4px",
5524
+ borderBottomLeftRadius: "4px",
5525
+ background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
5526
+ fontVariantNumeric: "tabular-nums",
5527
+ // _dark: {
5528
+ [':where([data-likec4-color="gray"]) &']: {
5529
+ _dark: {
5530
+ background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
5531
+ }
5532
+ }
5533
+ },
5534
+ labelContents: {
5535
+ display: "contents",
5536
+ _empty: {
5537
+ display: "none !important"
5538
+ }
5539
+ },
5540
+ labelText: {
5541
+ whiteSpaceCollapse: "preserve-breaks",
5542
+ fontSize: "14px",
5543
+ margin: "0"
5544
+ },
5545
+ labelTechnology: {
5546
+ textAlign: "center",
5547
+ whiteSpaceCollapse: "preserve-breaks",
5548
+ fontSize: "11px",
5549
+ lineHeight: "[1]",
5550
+ opacity: 0.75
5551
+ }
5552
+ },
5553
+ variants: {
5554
+ isStepEdge: {
5555
+ false: {},
5556
+ true: {
5557
+ root: {
5558
+ flexDirection: "row",
5559
+ gap: "1",
5560
+ padding: "0"
5561
+ },
5562
+ labelContents: {
5563
+ display: "flex",
5564
+ flexDirection: "column",
5565
+ alignItems: "center",
5566
+ paddingTop: "0.5",
5567
+ paddingRight: "1",
5568
+ paddingBottom: "1",
5569
+ gap: "0.5"
5570
+ },
5571
+ labelText: {
5572
+ py: "0.5",
5573
+ paddingRight: "0.5"
6728
5574
  }
6729
5575
  }
6730
5576
  }
5577
+ },
5578
+ defaultVariants: {
5579
+ isStepEdge: false
5580
+ },
5581
+ staticCss: [{
5582
+ conditions: ["*"],
5583
+ isStepEdge: ["*"]
5584
+ }]
5585
+ });
5586
+ const title = {
5587
+ textStyle: "likec4.node.primary",
5588
+ flex: "0 0 auto",
5589
+ textAlign: "center",
5590
+ color: "var(--likec4-palette-hiContrast)"
5591
+ };
5592
+ const description = {
5593
+ flexGrow: "0",
5594
+ flexShrink: "1",
5595
+ textStyle: "likec4.node.secondary",
5596
+ color: "var(--likec4-palette-loContrast)",
5597
+ textAlign: "center",
5598
+ textOverflow: "ellipsis",
5599
+ overflow: "hidden",
5600
+ _shapeSizeXs: {
5601
+ display: "none"
5602
+ },
5603
+ _smallZoom: {
5604
+ display: "none"
5605
+ }
5606
+ };
5607
+ const technology = {
5608
+ flex: "0 0 auto",
5609
+ textStyle: "likec4.node.secondary",
5610
+ color: "var(--likec4-palette-loContrast)",
5611
+ fontSize: `calc(var(--likec4-text-size) * 0.635)`,
5612
+ lineHeight: 1.125,
5613
+ textAlign: "center",
5614
+ textWrap: "balance",
5615
+ opacity: 0.92,
5616
+ _whenHovered: {
5617
+ opacity: 1
5618
+ },
5619
+ _shapeSizeXs: {
5620
+ display: "none"
5621
+ },
5622
+ _shapeSizeSm: {
5623
+ display: "none"
5624
+ },
5625
+ _smallZoom: {
5626
+ display: "none"
6731
5627
  }
5628
+ };
5629
+ const elementNodeData = defineSlotRecipe({
5630
+ className: "likec4-el-node-data",
5631
+ slots: ["root", "textContainer", "title", "description", "technology", "icon"],
5632
+ base: {
5633
+ root: {
5634
+ position: "relative",
5635
+ flex: "1",
5636
+ height: "fit-content",
5637
+ width: "fit-content",
5638
+ maxHeight: "100%",
5639
+ maxWidth: "100%",
5640
+ margin: "[0 auto]",
5641
+ display: "flex",
5642
+ alignItems: "center",
5643
+ justifyContent: "center",
5644
+ flexDirection: "row",
5645
+ paddingTop: "var(--likec4-spacing)",
5646
+ paddingBottom: "var(--likec4-spacing)",
5647
+ paddingLeft: "calc(var(--likec4-spacing) + 8px)",
5648
+ paddingRight: "calc(var(--likec4-spacing) + 8px)",
5649
+ overflow: "hidden",
5650
+ pointerEvents: "none",
5651
+ gap: "3",
5652
+ _shapeQueue: {
5653
+ paddingLeft: "[46px]",
5654
+ paddingRight: "[16px]"
5655
+ },
5656
+ _shapeMobile: {
5657
+ paddingLeft: "[46px]",
5658
+ paddingRight: "[16px]"
5659
+ },
5660
+ _shapeCylinder: {
5661
+ paddingTop: "[30px]"
5662
+ },
5663
+ _shapeStorage: {
5664
+ paddingTop: "[30px]"
5665
+ },
5666
+ _shapeBrowser: {
5667
+ paddingTop: "[32px]",
5668
+ paddingBottom: "[28px]"
5669
+ },
5670
+ _shapeSizeXs: {
5671
+ [iconSize]: "24px"
5672
+ },
5673
+ _shapeSizeSm: {
5674
+ [iconSize]: "36px"
5675
+ },
5676
+ _shapeSizeMd: {
5677
+ [iconSize]: "60px"
5678
+ },
5679
+ _shapeSizeLg: {
5680
+ [iconSize]: "82px",
5681
+ gap: "4"
5682
+ },
5683
+ _shapeSizeXl: {
5684
+ [iconSize]: "90px",
5685
+ gap: "4"
5686
+ }
5687
+ },
5688
+ textContainer: {
5689
+ height: "fit-content",
5690
+ width: "fit-content",
5691
+ maxHeight: "100%",
5692
+ maxWidth: "100%",
5693
+ flex: "0 1 auto",
5694
+ display: "flex",
5695
+ flexDirection: "column",
5696
+ alignItems: "stretch",
5697
+ justifyContent: "center",
5698
+ flexWrap: "nowrap",
5699
+ overflow: "hidden",
5700
+ gap: "8px"
5701
+ },
5702
+ title,
5703
+ description,
5704
+ technology
5705
+ },
5706
+ variants: {
5707
+ hasIcon: {
5708
+ false: {},
5709
+ true: {
5710
+ root: {
5711
+ gap: "16px"
5712
+ },
5713
+ textContainer: {
5714
+ minWidth: `calc(50% + var(${iconSize}))`,
5715
+ alignItems: "flex-start"
5716
+ },
5717
+ title: {
5718
+ textAlign: "left"
5719
+ },
5720
+ description: {
5721
+ textAlign: "left"
5722
+ },
5723
+ technology: {
5724
+ textAlign: "left"
5725
+ }
5726
+ }
5727
+ },
5728
+ hasDescription: {
5729
+ false: {},
5730
+ true: {}
5731
+ },
5732
+ hasTechnology: {
5733
+ false: {},
5734
+ true: {}
5735
+ }
5736
+ },
5737
+ compoundVariants: [
5738
+ {
5739
+ hasDescription: true,
5740
+ hasTechnology: true,
5741
+ css: {
5742
+ textContainer: {
5743
+ gap: "6px"
5744
+ }
5745
+ }
5746
+ }
5747
+ ],
5748
+ defaultVariants: {
5749
+ hasIcon: false
5750
+ },
5751
+ staticCss: [{
5752
+ hasIcon: ["*"],
5753
+ hasDescription: ["*"],
5754
+ hasTechnology: ["*"],
5755
+ conditions: ["*"]
5756
+ }]
5757
+ });
5758
+ const navigationLink = defineSlotRecipe({
5759
+ className: "likec4-navlink",
5760
+ description: "Navigation Link (classes for Mantine NavLink)",
5761
+ jsx: ["NavLink"],
5762
+ slots: ["root", "body", "section", "label", "description"],
5763
+ base: {
5764
+ root: {
5765
+ rounded: "sm",
5766
+ px: "xs",
5767
+ py: "xxs",
5768
+ backgroundColor: {
5769
+ _hover: {
5770
+ "&:not([data-active])": {
5771
+ base: "mantine.colors.gray[1]",
5772
+ _dark: "mantine.colors.dark[5]"
5773
+ }
5774
+ }
5775
+ }
5776
+ },
5777
+ body: {
5778
+ gap: "0.5",
5779
+ display: "flex",
5780
+ flexDirection: "column"
5781
+ },
5782
+ section: {
5783
+ '&:where([data-position="left"])': {
5784
+ marginInlineEnd: "xxs"
5785
+ // alignSelf: 'flex-start',
5786
+ }
5787
+ },
5788
+ label: {
5789
+ display: "block",
5790
+ fontSize: "sm",
5791
+ fontWeight: "500",
5792
+ lineHeight: 1.2
5793
+ },
5794
+ description: {
5795
+ display: "block",
5796
+ fontSize: "xxs",
5797
+ lineHeight: 1.2
5798
+ }
5799
+ },
5800
+ variants: {
5801
+ truncateLabel: {
5802
+ "true": {
5803
+ label: {
5804
+ width: "100%",
5805
+ truncate: true
5806
+ },
5807
+ description: {
5808
+ width: "100%",
5809
+ truncate: true
5810
+ }
5811
+ },
5812
+ "false": {}
5813
+ }
5814
+ },
5815
+ defaultVariants: {
5816
+ truncateLabel: false
5817
+ },
5818
+ staticCss: [{
5819
+ truncateLabel: ["*"],
5820
+ conditions: ["*"]
5821
+ }]
6732
5822
  });
5823
+ const slotRecipes = {
5824
+ __proto__: null,
5825
+ edgeLabel,
5826
+ elementNodeData,
5827
+ navigationLink
5828
+ };
6733
5829
  const textStyles = defineTextStyles({
5830
+ xxs: {
5831
+ value: {
5832
+ fontSize: "0.625rem",
5833
+ lineHeight: "1rem"
5834
+ }
5835
+ },
5836
+ xs: {
5837
+ value: {
5838
+ fontSize: "0.75rem",
5839
+ lineHeight: "1rem"
5840
+ }
5841
+ },
5842
+ sm: {
5843
+ value: {
5844
+ fontSize: "0.875rem",
5845
+ lineHeight: "1.25rem"
5846
+ }
5847
+ },
5848
+ md: {
5849
+ value: {
5850
+ fontSize: "1rem",
5851
+ lineHeight: "1.5rem"
5852
+ }
5853
+ },
5854
+ lg: {
5855
+ value: {
5856
+ fontSize: "1.125rem",
5857
+ lineHeight: "1.75rem"
5858
+ }
5859
+ },
5860
+ xl: {
5861
+ value: {
5862
+ fontSize: "1.25rem",
5863
+ lineHeight: "1.75rem"
5864
+ }
5865
+ },
6734
5866
  likec4: {
6735
5867
  node: {
6736
5868
  primary: {
@@ -6738,7 +5870,7 @@ const textStyles = defineTextStyles({
6738
5870
  value: {
6739
5871
  fontFamily: "var(--likec4-element-font, {fonts.likec4})",
6740
5872
  fontWeight: 500,
6741
- fontSize: "[var(--likec4-text-size)]",
5873
+ fontSize: "var(--likec4-text-size)",
6742
5874
  lineHeight: 1.15,
6743
5875
  textWrapStyle: "balance",
6744
5876
  whiteSpace: "preserve-breaks"
@@ -6749,7 +5881,7 @@ const textStyles = defineTextStyles({
6749
5881
  value: {
6750
5882
  fontFamily: "var(--likec4-element-font, {fonts.likec4})",
6751
5883
  fontWeight: 400,
6752
- fontSize: `[var(--likec4-text-size) * 0.74]`,
5884
+ fontSize: `[calc(var(--likec4-text-size) * 0.74)]`,
6753
5885
  lineHeight: 1.3,
6754
5886
  textWrapStyle: "pretty",
6755
5887
  "--text-fz": `[calc(var(--likec4-text-size) * 0.74)]`
@@ -6759,7 +5891,9 @@ const textStyles = defineTextStyles({
6759
5891
  }
6760
5892
  });
6761
5893
  const tokens = defineTokens({
5894
+ ...tokens$1,
6762
5895
  lineHeights: {
5896
+ ...tokens$1.lineHeights,
6763
5897
  "1": {
6764
5898
  value: "1"
6765
5899
  }
@@ -6770,26 +5904,124 @@ const tokens = defineTokens({
6770
5904
  default: { value: "1px solid {colors.mantine.colors.defaultBorder}" }
6771
5905
  },
6772
5906
  spacing: {
5907
+ ...tokens$1.spacing,
6773
5908
  "0": {
5909
+ description: "Non-scalable spacing value - 0px",
6774
5910
  value: "0px"
6775
5911
  },
6776
- "2": {
5912
+ "0.5": {
5913
+ description: "Non-scalable spacing value - (0.5 * 4px)",
6777
5914
  value: "2px"
6778
5915
  },
6779
- "4": {
5916
+ "1": {
5917
+ description: "Non-scalable spacing value - (1 * 4px)",
6780
5918
  value: "4px"
6781
5919
  },
6782
- "micro": {
6783
- value: "4px"
5920
+ "1.5": {
5921
+ description: "Non-scalable spacing value - (1.5 * 4px)",
5922
+ value: "6px"
6784
5923
  },
6785
- "2xs": {
5924
+ "2": {
5925
+ description: "Non-scalable spacing value - (2 * 4px)",
6786
5926
  value: "8px"
6787
5927
  },
5928
+ "2.5": {
5929
+ description: "Non-scalable spacing value - (2.5 * 4px)",
5930
+ value: "10px"
5931
+ },
5932
+ "3": {
5933
+ description: "Non-scalable spacing value - (3 * 4px)",
5934
+ value: "12px"
5935
+ },
5936
+ "3.5": {
5937
+ description: "Non-scalable spacing value - (3.5 * 4px)",
5938
+ value: "14px"
5939
+ },
5940
+ "4": {
5941
+ description: "Non-scalable spacing value - (4 * 4px)",
5942
+ value: "16px"
5943
+ },
5944
+ "4.5": {
5945
+ description: "Non-scalable spacing value - (4.5 * 4px)",
5946
+ value: "18px"
5947
+ },
5948
+ "5": {
5949
+ description: "Non-scalable spacing value - (5 * 4px)",
5950
+ value: "20px"
5951
+ },
5952
+ "6": {
5953
+ description: "Non-scalable spacing value - (6 * 4px)",
5954
+ value: "24px"
5955
+ },
5956
+ "7": {
5957
+ description: "Non-scalable spacing value - (7 * 4px)",
5958
+ value: "28px"
5959
+ },
6788
5960
  "8": {
6789
- value: "8px"
5961
+ description: "Non-scalable spacing value - (8 * 4px)",
5962
+ value: "32px"
5963
+ },
5964
+ "9": {
5965
+ description: "Non-scalable spacing value - (9 * 4px)",
5966
+ value: "36px"
5967
+ },
5968
+ "10": {
5969
+ description: "Non-scalable spacing value - (10 * 4px)",
5970
+ value: "40px"
5971
+ },
5972
+ xxs: {
5973
+ description: "Scalable spacing value - (0.5rem * var(--scale)) (8px)",
5974
+ value: "calc(0.5rem * var(--mantine-scale))"
5975
+ // 8px
5976
+ },
5977
+ xs: {
5978
+ description: "Scalable spacing value - (0.625rem * var(--scale)) (10px)",
5979
+ value: "calc(0.625rem * var(--mantine-scale))"
5980
+ // 10px
5981
+ },
5982
+ sm: {
5983
+ description: "Scalable spacing value - (0.75rem * var(--scale)) (12px)",
5984
+ value: "calc(0.75rem * var(--mantine-scale))"
5985
+ // 12px
5986
+ },
5987
+ md: {
5988
+ description: "Scalable spacing value - (1rem * var(--scale)) (16px)",
5989
+ value: "calc(1rem * var(--mantine-scale))"
5990
+ // 16px
5991
+ },
5992
+ lg: {
5993
+ description: "Scalable spacing value - (1.25rem * var(--scale)) (20px)",
5994
+ value: "calc(1.25rem * var(--mantine-scale))"
5995
+ // 20px
5996
+ },
5997
+ xl: {
5998
+ description: "Scalable spacing value - (2rem * var(--scale)) (32px)",
5999
+ value: "calc(2rem * var(--mantine-scale))"
6000
+ // 32px
6001
+ }
6002
+ },
6003
+ radii: {
6004
+ 0: {
6005
+ value: "0px"
6006
+ },
6007
+ xs: {
6008
+ value: "0.125rem"
6009
+ },
6010
+ sm: {
6011
+ value: "0.25rem"
6012
+ },
6013
+ md: {
6014
+ value: "0.5rem"
6015
+ },
6016
+ lg: {
6017
+ value: "1rem"
6018
+ },
6019
+ xl: {
6020
+ value: "2rem"
6790
6021
  }
6791
6022
  },
6792
6023
  colors: {
6024
+ ...tokens$1.colors,
6793
6025
  // For typesafety, otherwise wrap with []
6794
6026
  transparent: { value: "transparent" }
6795
6027
  },
@@ -6826,123 +6058,110 @@ const tokens = defineTokens({
6826
6058
  slow: { value: "300ms" },
6827
6059
  slower: { value: "400ms" },
6828
6060
  slowest: { value: "500ms" }
6829
- }
6830
- });
6831
- const theme = {
6832
- ...theme$1,
6833
- extend: {
6834
- textStyles,
6835
- layerStyles,
6836
- tokens,
6837
- semanticTokens,
6838
- recipes,
6839
- keyframes: {
6840
- "indicatorStrokeOpacity": {
6841
- "0%": {
6842
- strokeOpacity: 0.8
6843
- },
6844
- "100%": {
6845
- strokeOpacity: 0.4
6846
- }
6847
- },
6848
- "xyedgeAnimated": {
6849
- "0%": {
6850
- strokeDashoffset: 18 * 2 + 10
6851
- },
6852
- "100%": {
6853
- strokeDashoffset: 10
6854
- }
6855
- }
6061
+ },
6062
+ shadows: {
6063
+ none: { value: "none" },
6064
+ xs: {
6065
+ value: "0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)"
6856
6066
  },
6857
- animationStyles: {
6858
- "indicator": {
6859
- value: {
6860
- animationDuration: "1s",
6861
- animationIterationCount: "infinite",
6862
- animationDirection: "alternate",
6863
- animationName: "indicatorStrokeOpacity"
6864
- }
6865
- },
6866
- "xyedgeAnimated": {
6867
- value: {
6868
- animationDuration: "800ms",
6869
- animationIterationCount: "infinite",
6870
- animationTimingFunction: "linear",
6871
- animationFillMode: "both",
6872
- animationName: "xyedgeAnimated"
6873
- }
6874
- }
6875
- }
6876
- }
6877
- };
6878
- const colorPaletteValues = [
6879
- ...themeColors,
6880
- ...compoundColors
6881
- ];
6882
- const likec4Palette = defineUtility({
6883
- values: colorPaletteValues,
6884
- className: "likec4-palette",
6885
- // @ts-expect-error
6886
- property: "--likec4-palette",
6887
- transform(value, { token }) {
6888
- if (!colorPaletteValues.includes(value)) {
6889
- throw new Error(`Invalid value "${value}" for likec4ColorPalette`);
6890
- }
6891
- const [color, depth] = value.split(".");
6892
- if (depth) {
6893
- return {
6894
- ["--likec4-palette"]: `'likec4.compound${depth}.${color}'`,
6895
- ["--colors-likec4-palette-hi-contrast"]: token(`colors.likec4.compound${depth}.${color}.hiContrast`),
6896
- ["--colors-likec4-palette-lo-contrast"]: token(`colors.likec4.compound${depth}.${color}.loContrast`),
6897
- ["--colors-likec4-palette-fill"]: token(`colors.likec4.compound${depth}.${color}.fill`),
6898
- ["--colors-likec4-palette-stroke"]: token(`colors.likec4.compound${depth}.${color}.stroke`)
6899
- };
6900
- } else {
6901
- return {
6902
- ["--likec4-palette"]: `'likec4.${color}'`,
6903
- ["--colors-likec4-palette-fill"]: token(`colors.likec4.${color}.element.fill`),
6904
- ["--colors-likec4-palette-stroke"]: token(`colors.likec4.${color}.element.stroke`),
6905
- ["--colors-likec4-palette-hi-contrast"]: token(`colors.likec4.${color}.element.hiContrast`),
6906
- ["--colors-likec4-palette-lo-contrast"]: token(`colors.likec4.${color}.element.loContrast`)
6907
- };
6908
- }
6909
- }
6910
- });
6911
- const likec4RelationPalette = defineUtility({
6912
- values: themeColors,
6913
- className: "likec4-relation-color",
6914
- transform(value, { token, raw }) {
6915
- if (!themeColors.includes(value)) {
6916
- console.log("raw", raw);
6917
- throw new Error(`Invalid value "${value}" for likec4RelationPalette`);
6067
+ sm: {
6068
+ value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px"
6069
+ },
6070
+ md: {
6071
+ value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px"
6072
+ },
6073
+ lg: {
6074
+ value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px"
6075
+ },
6076
+ xl: {
6077
+ value: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px"
6918
6078
  }
6919
- return {
6920
- ["--likec4-palette"]: `'likec4.${value}'`,
6921
- ["--colors-likec4-relation-stroke"]: token(`colors.likec4.${value}.relation.stroke`),
6922
- ["--colors-likec4-relation-stroke-selected"]: token(`colors.likec4.${value}.relation.stroke.selected`),
6923
- ["--colors-likec4-relation-label"]: token(`colors.likec4.${value}.relation.label`),
6924
- ["--colors-likec4-relation-label-bg"]: token(`colors.likec4.${value}.relation.label.bg`)
6925
- };
6926
6079
  }
6927
6080
  });
6081
+ const durationValues = [
6082
+ "fastest",
6083
+ "faster",
6084
+ "fast",
6085
+ "normal",
6086
+ "slow",
6087
+ "slower",
6088
+ "slowest",
6089
+ "none"
6090
+ ];
6928
6091
  const utilities = {
6929
6092
  extend: {
6930
6093
  transition: {
6931
- values: ["fast"],
6932
- className: "transition-fast",
6094
+ values: durationValues,
6095
+ className: "transition",
6933
6096
  transform(value, { token }) {
6934
- if (value !== "fast") {
6097
+ if (value === "none") {
6098
+ return {
6099
+ transition: "none"
6100
+ };
6101
+ }
6102
+ if (!durationValues.includes(value)) {
6935
6103
  return {
6936
6104
  transition: value
6937
6105
  };
6938
6106
  }
6939
6107
  return {
6940
- transition: `all ${token("durations.fast")} ${token("easings.inOut")}`
6108
+ transition: `all ${token(`durations.${value}`)} ${token("easings.inOut")}`
6941
6109
  };
6942
6110
  }
6111
+ }
6112
+ }
6113
+ };
6114
+ const theme = {
6115
+ breakpoints,
6116
+ textStyles,
6117
+ layerStyles,
6118
+ tokens,
6119
+ semanticTokens,
6120
+ recipes,
6121
+ slotRecipes,
6122
+ containerNames: ["likec4-root", "likec4-dialog"],
6123
+ containerSizes: {
6124
+ xs: "384px",
6125
+ sm: "640px",
6126
+ md: "768px",
6127
+ lg: "1024px"
6128
+ },
6129
+ keyframes: {
6130
+ "indicatorStrokeOpacity": {
6131
+ "0%": {
6132
+ strokeOpacity: 0.8
6133
+ },
6134
+ "100%": {
6135
+ strokeOpacity: 0.4
6136
+ }
6137
+ },
6138
+ "xyedgeAnimated": {
6139
+ "0%": {
6140
+ strokeDashoffset: 18 * 2 + 10
6141
+ },
6142
+ "100%": {
6143
+ strokeDashoffset: 10
6144
+ }
6145
+ }
6146
+ },
6147
+ animationStyles: {
6148
+ "indicator": {
6149
+ value: {
6150
+ animationDuration: "1s",
6151
+ animationIterationCount: "infinite",
6152
+ animationDirection: "alternate",
6153
+ animationName: "indicatorStrokeOpacity"
6154
+ }
6943
6155
  },
6944
- likec4Palette,
6945
- likec4RelationPalette
6156
+ "xyedgeAnimated": {
6157
+ value: {
6158
+ animationDuration: "800ms",
6159
+ animationIterationCount: "infinite",
6160
+ animationTimingFunction: "linear",
6161
+ animationFillMode: "both",
6162
+ animationName: "xyedgeAnimated"
6163
+ }
6164
+ }
6946
6165
  }
6947
6166
  };
6948
6167
  const index = definePreset({
@@ -6960,97 +6179,19 @@ const index = definePreset({
6960
6179
  colorScales: radixColors
6961
6180
  })
6962
6181
  ],
6963
- globalVars: {
6964
- extend: {
6965
- "--likec4-palette": {
6966
- syntax: "*",
6967
- inherits: false
6968
- // initialValue: `'likec4.primary'`,
6969
- },
6970
- "--likec4-text-size": {
6971
- syntax: "<length-percentage>",
6972
- inherits: false
6973
- // initialValue: '1rem',
6974
- },
6975
- "--likec4-spacing": {
6976
- syntax: "<length-percentage>",
6977
- inherits: false
6978
- // initialValue: '1rem',
6979
- }
6980
- }
6981
- },
6982
- globalCss: {
6983
- extend: {
6984
- // '@supports ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))': {
6985
- // // TODO: this workaround disables animations in Safari (to improve performance)
6986
- // ['--likec4-safari-animation-hook']: ' ',
6987
- // },
6988
- ":where(:host, :root)": {
6989
- ["--likec4-app-font-default"]: `'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'`
6990
- },
6991
- ".likec4-shadow-root": {
6992
- display: "contents",
6993
- "--mantine-font-family": "var(--likec4-app-font-default)",
6994
- "--mantine-font-family-headings": "var(--likec4-app-font-default)"
6995
- },
6996
- [`${root}`]: {
6997
- overflow: "hidden",
6998
- position: "relative",
6999
- width: "100%",
7000
- height: "100%",
7001
- padding: "0px",
7002
- margin: "0px",
7003
- border: "0px solid transparent"
7004
- },
7005
- [`${root} .react-flow:is(.not-initialized)`]: {
7006
- opacity: 0
7007
- },
7008
- [`:where(${root} .mantine-ActionIcon-icon) .tabler-icon`]: {
7009
- width: "75%",
7010
- height: "75%"
7011
- },
7012
- [`${root} ${nodeOrEdge}:has([data-likec4-dimmed])`]: {
7013
- opacity: 0.25
7014
- },
7015
- [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed])`]: {
7016
- filter: "auto",
7017
- grayscale: 0.85,
7018
- blur: "3px"
7019
- },
7020
- [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed="true"])`]: {
7021
- transitionProperty: "opacity, filter",
7022
- transitionTimingFunction: "{easings.inOut}",
7023
- transitionDuration: "600ms"
7024
- // transitionDelay: '100ms',
7025
- },
7026
- [`[data-mantine-color-scheme="dark"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
7027
- mixBlendMode: "plus-lighter"
7028
- },
7029
- [`[data-mantine-color-scheme="light"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
7030
- mixBlendMode: "screen"
7031
- },
7032
- ...globalCss
7033
- }
7034
- },
6182
+ globalVars,
6183
+ globalCss,
7035
6184
  staticCss: {
7036
6185
  extend: {
7037
- themes: ["light", "dark"],
7038
- css: [{
7039
- properties: {
7040
- color: [
7041
- "likec4.palette.hiContrast",
7042
- "likec4.palette.loContrast"
7043
- ],
7044
- likec4Palette: [...themeColors, ...compoundColors],
7045
- likec4RelationPalette: themeColors
7046
- }
7047
- }]
6186
+ themes: ["light", "dark"]
7048
6187
  }
7049
6188
  },
7050
6189
  conditions,
7051
6190
  patterns,
7052
6191
  utilities,
7053
- theme
6192
+ theme: {
6193
+ extend: theme
6194
+ }
7054
6195
  });
7055
6196
 
7056
6197
  export { index as default, theme };